html,
body {
    height: 100%;
    width: 100%;
}

#message-back {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.loader-back.loading,
.loader-back-image.loading,
#message-back.loading {
    visibility: visible;
    opacity: 1;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.wrapper {
    position: fixed;
    background: rgba(255, 255, 255, 1);
    z-index: 9990;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    overflow-y: auto;
    padding-bottom: 70px;
    padding-top: 70px;
    /* 	border-radius: 10px; */
    /* 	box-shadow: 0px 0px 20px #a2e6ff; */
    /* 	border: 1px solid #000; */
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.image_wrapper {
    border: none !important;
    width: 100%;
    height: 100%;
    left: 0 !important;
    top: 0 !important;
    background: rgba(0, 0, 0, 0);
}

.image_wrapper>img {
    position: absolute;
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
}

.s_wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: rgba(255, 255, 255, 1);
    z-index: 9999;
    width: 600px;
    height: 400px;
    color: #2b2b2b;
    border-radius: 10px;
    box-shadow: 0px 0px 20px #a2e6ff;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.s_wrapper p {
    font-size: 20px;
    line-height: 20px;
}

.s_wrapper.show {
    top: 0;
    /*visibility: hidden;*/
    opacity: 1;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#message {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    overflow-y: auto;
    padding: 20px;
}

.process_wrapper {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    font-size: 2.5em;
    line-height: 2.5em;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    border-radius: 0;
    color: white;
    border: none !important;
    top: 0 !important;
}

#progress {
    display: none;
}

#progress.active {
    display: block;
}

.process_wrapper>div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.wrapper.show {
    visibility: visible;
    opacity: 1;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.wrapper>.wrapper_cancel {
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 2em;
    border: none;
    background: none;
    color: black;
    z-index: 9999;
}

.image_wrapper>.wrapper_cancel {
    color: white;
}

.uppercase {
    text-transform: uppercase;
}

.align-left {
    float: left;
    margin: 0 25px 0 0px !important;
}

.align-right {
    float: right;
    margin: 0 0 0 25px !important;
}

.text-align-left {
    text-align: left;
}

.text-align-center {
    text-align: center;
}

.text-align-right {
    text-align: right;
}

label {
    display: inline-block;
    margin-bottom: 10px;
    color: #9a9a9a;
    font-size: 13pt;
    font-weight: 600;
}

.size_style label {
    color: #6a6a6a;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    padding: 0 10px;
    margin-bottom: 5px;
    font-weight: 600;
}

.custom-radio label {
    font-size: 11pt;
    line-height: 1;
    margin-bottom: 0;
}

.custom-control.custom-radio {
    text-align: left;
}

.form-control {
    margin-bottom: 20px;
}

.form-group {
    margin: 0;
    display: inline-block;
    width: 100%;
}

textarea.form-control {
    border-radius: 2px;
    resize: none;
    height: 90px;
    border: 1px solid #f3f3f3;
}

::-webkit-input-placeholder {
    /* Edge */
    color: #aeaeae;
}

body {
    background-color: #000d37;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    font-family: dana;
    line-height: 1.5em;
    overflow-x: hidden;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

html {
    width: 100%;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

div.design-container a {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

div.design-container .row {
    margin-right: 0;
    margin-left: 0;
}

div.design-container * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-boxf;
    box-sizing: border-box;
    outline: none;
}

div.design-container ol,
div.design-container ul {
    list-style: none;
}

.align_wrap {
    padding: 0;
    display: flex;
    justify-content: space-between;
    width: 20%;
    height: 135px;
    flex-direction: column;
    margin-left: 5px;
    border-radius: 8px;
    align-items: center;
}

.align_icon {
    display: inline-block;
    width: 100%;
    height: 42px;
    cursor: pointer;
    background-position: center;
    border-radius: 8px;
    border: 1px solid #d4d4d4;
    background-color: #f4f4f4;
}

.align_icon svg {
    height: 100%;
}

.align_icon.active {
    background-color: #ff7ac7;
    color: #fff;
}

.align_icon.active path {
    stroke: #fff;
}

@font-face {
    font-family: "IranNastaliq";
    src: url("../fonts/IranNastaliq.ttf") format("truetype");
}

@font-face {
    font-family: "Artin";
    src: url("../fonts/Artin.ttf") format("truetype");
}

@font-face {
    font-family: "Mitra";
    src: url("../fonts/Mitra.ttf") format("truetype");
}

@font-face {
    font-family: "Ordibehesht";
    src: url("../fonts/Ordibehesht.TTF") format("truetype");
}

@font-face {
    font-family: "yasamin";
    src: url("../fonts/yasamin.ttf") format("truetype");
}

@font-face {
    font-family: "Ghasem";
    src: url("../fonts/Ghasem.ttf") format("truetype");
}

@font-face {
    font-family: "Mosalas";
    src: url("../fonts/Mosalas.ttf") format("truetype");
}

@font-face {
    font-family: "Homa";
    src: url("../fonts/Homa.ttf") format("truetype");
}

@font-face {
    font-family: "Lotus";
    src: url("../fonts/Lotus.ttf") format("truetype");
}

@font-face {
    font-family: "Colak";
    src: url("../fonts/Colak.ttf") format("truetype");
}

@font-face {
    font-family: "Dibaj";
    src: url("../fonts/Dibaj.otf") format("opentype");
}

@font-face {
    font-family: "edameh";
    src: url("../fonts/edameh.ttf") format("truetype");
}

@font-face {
    font-family: "Farhang";
    src: url("../fonts/Farhang.ttf") format("truetype");
}

@font-face {
    font-family: "Gofteh";
    src: url("../fonts/Gofteh.ttf") format("truetype");
}

@font-face {
    font-family: "Gramophone";
    src: url("../fonts/Gramophone.ttf") format("truetype");
}

@font-face {
    font-family: "Paykan";
    src: url("../fonts/Paykan.ttf") format("truetype");
}

@font-face {
    font-family: "Rezvan";
    src: url("../fonts/Rezvan.ttf") format("truetype");
}

@font-face {
    font-family: "Shams";
    src: url("../fonts/Shams.ttf") format("truetype");
}

@font-face {
    font-family: "Amanda";
    src: url("../fonts/Amanda.ttf") format("truetype");
}

@font-face {
    font-family: "BTitrBold";
    src: url("../fonts/BTitrBold.ttf") format("truetype");
}

@font-face {
    font-family: "Austin";
    src: url("../fonts/Austin.ttf") format("truetype");
}

@font-face {
    font-family: "Avante";
    src: url("../fonts/Avante.ttf") format("truetype");
}

@font-face {
    font-family: "FarTraffic";
    src: url("../fonts/FarTraffic.ttf") format("truetype");
}

@font-face {
    font-family: "danstevis";
    src: url("../fonts/danstevis.otf") format("opentype");
}

@font-face {
    font-family: "Beachfront";
    src: url("../fonts/Beachfront.ttf") format("truetype");
}

@font-face {
    font-family: "Bellview";
    src: url("../fonts/Bellview.ttf") format("truetype");
}

@font-face {
    font-family: "Buttercup";
    src: url("../fonts/Buttercup.ttf") format("truetype");
}

@font-face {
    font-family: "Chelsea";
    src: url("../fonts/Chelsea.ttf") format("truetype");
}

@font-face {
    font-family: "ClassicType";
    src: url("../fonts/ClassicType.ttf") format("truetype");
}

@font-face {
    font-family: "Freehand";
    src: url("../fonts/Freehand.ttf") format("truetype");
}

@font-face {
    font-family: "Freespirit";
    src: url("../fonts/Freespirit.ttf") format("truetype");
}

@font-face {
    font-family: "lalehzar";
    src: url("../fonts/LalezarRegular.ttf") format("truetype");
}

@font-face {
    font-family: "LoveNeon";
    src: url("../fonts/LoveNeon.ttf") format("truetype");
}

@font-face {
    font-family: "LoveNote";
    src: url("../fonts/LoveNote.ttf") format("truetype");
}

@font-face {
    font-family: "Marquee";
    src: url("../fonts/Marquee.ttf") format("truetype");
}

@font-face {
    font-family: "Mayfair";
    src: url("../fonts/Mayfair.ttf") format("truetype");
}

@font-face {
    font-family: "Melbourne";
    src: url("../fonts/Melbourne.ttf") format("truetype");
}

@font-face {
    font-family: "Monaco";
    src: url("../fonts/Monaco.ttf") format("truetype");
}

@font-face {
    font-family: "NeonGlow";
    src: url("../fonts/NeonGlow.ttf") format("truetype");
}

@font-face {
    font-family: "NeonLite";
    src: url("../fonts/NeonLite.ttf") format("truetype");
}

@font-face {
    font-family: "Neonscript";
    src: url("../fonts/Neonscript.ttf") format("truetype");
}

@font-face {
    font-family: "Neontrace";
    src: url("../fonts/Neontrace.ttf") format("truetype");
}

@font-face {
    font-family: "NeoTokyo";
    src: url("../fonts/NeoTokyo.ttf") format("truetype");
}

@font-face {
    font-family: "Nevada";
    src: url("../fonts/Nevada.ttf") format("truetype");
}

@font-face {
    font-family: "kamran";
    src: url("../fonts/BKamranOutlineRegular.ttf") format("truetype");
}

@font-face {
    font-family: "Northshore";
    src: url("../fonts/Northshore.ttf") format("truetype");
}

@font-face {
    font-family: "Photogenic";
    src: url("../fonts/Photogenic.ttf") format("truetype");
}

@font-face {
    font-family: "Rocket";
    src: url("../fonts/Rocket.ttf") format("truetype");
}

@font-face {
    font-family: "Royalty";
    src: url("../fonts/Royalty.ttf") format("truetype");
}

@font-face {
    font-family: "SciFi";
    src: url("../fonts/SciFi.ttf") format("truetype");
}

@font-face {
    font-family: "Signature";
    src: url("../fonts/Signature.ttf") format("truetype");
}

@font-face {
    font-family: "Sorrento";
    src: url("../fonts/Sorrento.ttf") format("truetype");
}

@font-face {
    font-family: "Typewriter";
    src: url("../fonts/Typewriter.ttf") format("truetype");
}

@font-face {
    font-family: "Venetian";
    src: url("../fonts/Venetian.ttf") format("truetype");
}

@font-face {
    font-family: "koodak";
    src: url("../fonts/BKoodakBold.ttf") format("truetype");
}

@font-face {
    font-family: "Waikiki";
    src: url("../fonts/Waikiki.ttf") format("truetype");
}

@font-face {
    font-family: "WildScript";
    src: url("../fonts/WildScript.ttf") format("truetype");
}

@font-face {
    font-family: "Loveisland";
    src: url("../fonts/Loveisland.ttf") format("truetype");
}

.demo_on_off {
    cursor: pointer;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 96px;
    height: 50px;
}

.font_style li {
    background: transparent;
    color: black;
    height: 2rem;
    font-size: 1rem;
    line-height: 2rem;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.font_style li.active {
    text-shadow: rgb(255, 255, 255) 0px 0px 2px, rgb(255, 255, 255) 0px 0px 4px, #a2e6ff 0px 0px 8px, #a2e6ff 0px 0px 6px, #a2e6ff 0px 0px 8px, #a2e6ff 0px 0px 22px, #a2e6ff 0px 0px 30px, #a2e6ff 0px 0px 50px, #a2e6ff 0px 0px 100px;
}

.custom_tab>li.active>a {
    background: none;
    border: none;
    border-bottom: 2px solid #ff7ac7;
}

.board-sub {
    overflow: hidden;
}

.board-sub>image {
    width: 100%;
}

.backboard-img {
    width: 100%;
    height: auto;
    margin: 5px 0 0;
}

.demo_text {
    background-color: #3d4a53;
    z-index: 2;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    /* 	border: 1px solid white; */
}

.demo_text .text_show {
    font-size: 7rem;
    position: absolute;
    box-sizing: content-box;
    width: auto;
    line-height: 7rem;
    text-align: center;
    color: white;
    cursor: pointer;
    z-index: 2;
    -webkit-transition: text-shadow 0.5s ease;
    -moz-transition: text-shadow 0.5s ease;
    -ms-transition: text-shadow 0.5s ease;
    -o-transition: text-shadow 0.5s ease;
    transition: text-shadow 0.5s ease;
}

#text {
    padding: 0.5em;
    font-size: 3.3rem;
    line-height: normal;
    overflow: hidden;
}

.font_style li {
    background: transparent;
    color: black;
    height: 2rem;
    font-size: 1rem;
    line-height: 2rem;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 0;
}

.font_style li.active {
    text-shadow: rgb(255, 255, 255) 0px 0px 2px, rgb(255, 255, 255) 0px 0px 4px, #a2e6ff 0px 0px 8px, #a2e6ff 0px 0px 6px, #a2e6ff 0px 0px 8px, #a2e6ff 0px 0px 22px, #a2e6ff 0px 0px 30px;
}

#color_table {
    margin: 5px 0 0;
    padding: 0;
}

#color_table li {
    height: 70px;
    cursor: pointer;
    padding: 0;
}

#color_table li>p {
    width: 35px;
    height: 35px;
    text-align: center;
    font-size: 2rem;
    line-height: 4rem;
    margin: 0 auto;
    padding: 0;
    border-radius: 50%;
}

#color_table li>.color_name {
    width: 100%;
    height: auto;
    text-align: center;
    line-height: 0.7rem !important;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 0;
    margin-top: 10px;
    color: #fff;
}

.MobOnly {
    display: none;
}

@media handheld,
screen and (min-width: 300px) and (max-width: 350px) {
    .topim {
        text-align: center;
    }
    .topim img {
        margin: 0 auto;
    }
    .WordSection1 h2.tpH {
        text-align: center;
        font-size: 30px;
    }
}

@media handheld,
screen and (min-width: 350px) and (max-width: 768px) {
    .topim {
        text-align: center;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .topim img {
        margin: 0 auto;
    }
    .WordSection1 h2.tpH {
        text-align: center;
        font-size: 30px;
    }
}

@media (max-width: 899px) {
    .container {
        padding: 0 !important;
    }
    .WordSection1 .col-md-6:first-child {
        padding-right: 0 !important;
    }
}

@media all and (max-width: 30em) {}

.make_style_form {
    height: 100%;
    width: auto;
    padding: 0;
}

.make_style_form .bord_color .bord_img {
    display: inline-flex;
}

.make_style_form .bord_color .bord_img .board-name {
    display: none;
    color: #ff7ac7;
    font-weight: 600;
}

.make_style_form .bord_color .bord_img img {
    border-color: transparent;
    border-radius: 9px;
    border: 2px solid #616161;
    margin-left: 12px;
    cursor: pointer;
    margin-right: 12px;
    transition: all 0.5s ease;
}

.make_style_form .bord_color .bord_img img.active {
    border: 2px solid #ff7ac7;
}

.make_style_form .bord_color .bord_img img:hover {
    border: 2px solid #ff7ac7;
}

.make_style_form .bord_color .bord_txt {
    margin-top: 10px;
    text-align: left;
    margin-left: 10px;
}

.make_style_form .bord_color .bord_txt span {
    color: #333333;
    font-weight: 600;
    font-size: 14px;
}

@media only screen and (max-width: 1200px) {
    .make_style_form .bord_color .bord_img img {
        margin: 0 12px;
        height: 36px;
    }
}

@media only screen and (max-width: 767px) {
    .make_style_form .bord_color .bord_img img {
        margin: 0 10px;
        height: 36px;
    }
}


/* dd board prices 23-04-21 end*/

.color_desc {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    width: 100%;
}

.color_desc span.cdesc {
    display: inline-block;
    width: 100%;
}

.color_desc span.cimg {
    display: inline-block;
    width: 100%;
    max-width: 335px;
    align: center;
    repeat: none;
    height: 150px;
    margin-top: 10px;
}

.color_desc span.cmore {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.color_desc span.cmore>a {
    color: #337ab7;
}

#color_table li>.color_name {
    font-size: 10px !important;
}

#quoteform {
    display: none;
    width: 70%;
    float: left;
    margin: 10px 30px;
    text-align: left;
}

#quoteform label {
    text-align: left;
    float: left;
}

.demo_text {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}


/* The container */

.custom-checkbox .custom-control-label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: left;
    font-weight: 400;
    color: #000;
}


/* Hide the browser's default checkbox */

.custom-checkbox .custom-control-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-control.custom-option {
    text-align: left;
    font-family: "Brandon_light", sans-serif;
}

.custom-control.custom-option .col-xs-6,
.custom-control.custom-option .col-xs-5,
.custom-control.custom-option .col-xs-7 {
    padding: 0;
    margin-top: 10px;
}

.custom-control.custom-option label {
    float: left;
    color: #00c4c8;
    font-size: 20px;
}

.custom-control.custom-option small {
    float: right;
    width: 52%;
    font-weight: bold;
    font-size: 14px;
}

.custom-control.custom-option .col-xs-7 small {
    width: 65%;
}

.custom-control.custom-option span {
    font-weight: bold;
}

.custom-control.custom-radio {
    margin-bottom: 5px;
}


/* Create a custom checkbox */

.custom-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 15px;
    background-color: #fff;
    border: 2px solid gray;
}

.custom-radio label {
    border: 2px solid #e9e9e9;
    border-radius: 15px;
    width: 100%;
    text-align: center;
    padding: 10px;
    color: #000;
    font-size: 16px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    cursor: pointer;
    height: 75px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    font-weight: 500;
}

.custom-radio.selected label,
.custom-radio:hover label {
    box-shadow: unset;
    border-color: transparent;
    border-radius: 15px;
    border: 1px solid #ff7ac7;
    background: #fff;
}

.custom-radio input {
    position: absolute;
    opacity: 0;
}

span.radio_span {
    display: inline-block;
    margin: 10px 0 0;
    font-size: 16px;
    color: #5761fe;
}

span.radio_span span#waterProofPrice {
    font-size: 16px;
    color: #5761fe;
}


/* On mouse-over, add a grey background color */

.custom-checkbox .custom-control-label:hover input~.checkmark {
    background-color: #fff;
    border: 2px solid gray;
}


/* When the checkbox is checked, add a blue background */

.custom-checkbox .custom-control-label input:checked~.checkmark {
    background-color: #ff7ac7;
    border-color: #ff7ac7;
}

.custom-checkbox .custom-control-label input[type="checkbox"]:checked+label {
    background-color: #ff7ac7;
}


/* Create the checkmark/indicator (hidden when not checked) */

.custom-checkbox .custom-control-label:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the checkmark when checked */

.custom-checkbox .custom-control-label input:checked~.checkmark:after {
    display: block;
}


/* Style the checkmark/indicator */

.custom-checkbox .custom-control-label .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    position: absolute;
}

.color_desc {
    width: 100%;
    color: #000;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 5px 0 0;
}

.cdesc {
    padding: 0px 5px 0px 5px;
}

.demo_on_off.offswitch {
    background-image: url("data:image/svg+xml; charset=utf8, %3Csvg%20width%3D%2272%22%20height%3D%2229%22%20viewBox%3D%220%200%2072%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M2%202h33v26H2z%22%2F%3E%3Cpath%20d%3D%22M13.562%2020.098a5.064%205.064%200%200%201-2.52-.644%204.823%204.823%200%200%201-1.82-1.778c-.448-.765-.672-1.629-.672-2.59%200-.952.224-1.806.672-2.562a4.793%204.793%200%200%201%201.82-1.792%205.064%205.064%200%200%201%202.52-.644c.924%200%201.764.215%202.52.644a4.691%204.691%200%200%201%201.806%201.792c.448.756.672%201.61.672%202.562%200%20.961-.224%201.825-.672%202.59a4.72%204.72%200%200%201-1.806%201.778%205.063%205.063%200%200%201-2.52.644Zm0-1.75c.588%200%201.106-.13%201.554-.392.448-.27.798-.653%201.05-1.148.252-.495.378-1.069.378-1.722s-.126-1.223-.378-1.708a2.689%202.689%200%200%200-1.05-1.134c-.448-.261-.966-.392-1.554-.392-.588%200-1.11.13-1.568.392-.448.261-.798.64-1.05%201.134-.252.485-.378%201.055-.378%201.708s.126%201.227.378%201.722c.252.495.602.877%201.05%201.148.458.261.98.392%201.568.392ZM27.97%2020h-1.96l-4.438-6.706V20h-1.96v-9.786h1.96l4.438%206.72v-6.72h1.96V20Z%22%20fill%3D%22%2376E51F%22%2F%3E%3Cpath%20fill%3D%22%2357585C%22%20d%3D%22M35%202h35v26H35z%22%2F%3E%3Cpath%20d%3D%22M45.49%2020.098a5.063%205.063%200%200%201-2.52-.644%204.823%204.823%200%200%201-1.82-1.778c-.448-.765-.672-1.629-.672-2.59%200-.952.224-1.806.672-2.562a4.792%204.792%200%200%201%201.82-1.792%205.063%205.063%200%200%201%202.52-.644c.924%200%201.764.215%202.52.644a4.693%204.693%200%200%201%201.806%201.792c.448.756.672%201.61.672%202.562%200%20.961-.224%201.825-.672%202.59a4.721%204.721%200%200%201-1.806%201.778%205.064%205.064%200%200%201-2.52.644Zm0-1.75c.588%200%201.106-.13%201.554-.392.448-.27.798-.653%201.05-1.148.252-.495.378-1.069.378-1.722s-.126-1.223-.378-1.708a2.689%202.689%200%200%200-1.05-1.134c-.448-.261-.966-.392-1.554-.392-.588%200-1.11.13-1.568.392-.448.261-.798.64-1.05%201.134-.252.485-.378%201.055-.378%201.708s.126%201.227.378%201.722c.252.495.602.877%201.05%201.148.457.261.98.392%201.568.392Zm12.082-8.12v1.582h-4.074v2.506h3.122v1.554h-3.122V20h-1.96v-9.772h6.034Zm7.016%200v1.582h-4.074v2.506h3.122v1.554h-3.122V20h-1.96v-9.772h6.034Z%22%20fill%3D%22%239E9FA1%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2270%22%20height%3D%2227%22%20rx%3D%2211%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cdefs%3E%3CclipPath%20id%3D%22a%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2268%22%20height%3D%2225%22%20rx%3D%2210%22%20fill%3D%22%23fff%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
    height: 34px;
    background-size: contain;
    background-repeat: no-repeat;
    width: 74px;
}

.demo_on_off.onswitch {
    background-image: url("data:image/svg+xml; charset=utf8, %3Csvg%20width%3D%2272%22%20height%3D%2229%22%20viewBox%3D%220%200%2072%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20fill%3D%22%2357585C%22%20d%3D%22M2%202h33v26H2z%22%2F%3E%3Cpath%20d%3D%22M13.562%2020.098a5.064%205.064%200%200%201-2.52-.644%204.823%204.823%200%200%201-1.82-1.778c-.448-.765-.672-1.629-.672-2.59%200-.952.224-1.806.672-2.562a4.793%204.793%200%200%201%201.82-1.792%205.064%205.064%200%200%201%202.52-.644c.924%200%201.764.215%202.52.644a4.691%204.691%200%200%201%201.806%201.792c.448.756.672%201.61.672%202.562%200%20.961-.224%201.825-.672%202.59a4.72%204.72%200%200%201-1.806%201.778%205.063%205.063%200%200%201-2.52.644Zm0-1.75c.588%200%201.106-.13%201.554-.392.448-.27.798-.653%201.05-1.148.252-.495.378-1.069.378-1.722s-.126-1.223-.378-1.708a2.689%202.689%200%200%200-1.05-1.134c-.448-.261-.966-.392-1.554-.392-.588%200-1.11.13-1.568.392-.448.261-.798.64-1.05%201.134-.252.485-.378%201.055-.378%201.708s.126%201.227.378%201.722c.252.495.602.877%201.05%201.148.458.261.98.392%201.568.392ZM27.97%2020h-1.96l-4.438-6.706V20h-1.96v-9.786h1.96l4.438%206.72v-6.72h1.96V20Z%22%20fill%3D%22%239E9FA1%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M35%202h35v26H35z%22%2F%3E%3Cpath%20d%3D%22M45.49%2020.098a5.063%205.063%200%200%201-2.52-.644%204.823%204.823%200%200%201-1.82-1.778c-.448-.765-.672-1.629-.672-2.59%200-.952.224-1.806.672-2.562a4.792%204.792%200%200%201%201.82-1.792%205.063%205.063%200%200%201%202.52-.644c.924%200%201.764.215%202.52.644a4.693%204.693%200%200%201%201.806%201.792c.448.756.672%201.61.672%202.562%200%20.961-.224%201.825-.672%202.59a4.721%204.721%200%200%201-1.806%201.778%205.064%205.064%200%200%201-2.52.644Zm0-1.75c.588%200%201.106-.13%201.554-.392.448-.27.798-.653%201.05-1.148.252-.495.378-1.069.378-1.722s-.126-1.223-.378-1.708a2.689%202.689%200%200%200-1.05-1.134c-.448-.261-.966-.392-1.554-.392-.588%200-1.11.13-1.568.392-.448.261-.798.64-1.05%201.134-.252.485-.378%201.055-.378%201.708s.126%201.227.378%201.722c.252.495.602.877%201.05%201.148.457.261.98.392%201.568.392Zm12.082-8.12v1.582h-4.074v2.506h3.122v1.554h-3.122V20h-1.96v-9.772h6.034Zm7.016%200v1.582h-4.074v2.506h3.122v1.554h-3.122V20h-1.96v-9.772h6.034Z%22%20fill%3D%22%2376E51F%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2270%22%20height%3D%2227%22%20rx%3D%2211%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cdefs%3E%3CclipPath%20id%3D%22a%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2268%22%20height%3D%2225%22%20rx%3D%2210%22%20fill%3D%22%23fff%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
    height: 34px;
    background-size: contain;
    background-repeat: no-repeat;
    width: 74px;
}

.demo_on_off {
    top: 15px;
    left: 15px;
}

div.rgb_switch_container {
    position: absolute;
    top: 15px;
    left: 15px;
    text-align: left;
    color: #fff;
}

.rgb_switch {
    background: url(../images/RGB.png) no-repeat;
    height: 34px;
    background-size: auto 100%;
    width: 74px;
    display: inline-block;
}

#input_text::-webkit-input-placeholder {
    text-align: center;
    padding-top: 1%;
}

textarea[data-placeholder].active {
    color: #8a8a8a !important;
}

.option-label {
    font-weight: 600;
}

@media all and (max-width: 30em) {}

.get-quote-btn {
    color: #5d5d5d !important;
    font-weight: bolder;
    text-transform: uppercase;
}

button.click-save-button {
    padding: 10px 40px;
    border-radius: 10px;
    font-size: 16px;
    display: inline-block;
    border: none;
    text-decoration: none;
    font-weight: 300;
    text-align: center;
    transition: all 0.5s;
    width: 100%;
    background: #5761ff;
    color: #fff;
    font-weight: 600;
}

button.click-save-button:hover {
    color: #fff;
    background-color: #ff7ac7;
}

.save-design {
    margin-right: 0;
    margin-top: 15px;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    cursor: pointer;
    background-color: #f4f4f4;
    border-radius: 15px;
    padding: 15px;
}

.save-design img {
    margin-right: 10px;
}

.save-design-wrapper {
    font-size: 12px;
}

.save-design-wrapper .dd-tooltip {
    position: relative;
    display: inline-block;
}

.save-design-wrapper .dd-tooltip .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    font-size: 12px;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
}

.save-design-wrapper .dd-tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.save-design-wrapper .dd-tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


/* 1-10-20 */

strong,
.strong {
    background: #f5f5f5;
    text-transform: capitalize;
    padding-left: 0px;
}

.demo_text {
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    height: 100%;
}

@media screen and (max-width: 899px) {
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .custom {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

@media screen and (max-width: 767px) {
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .custom {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .col-xs-12.top-logo {
        float: none;
    }
    .color_desc {
        background-color: #fff !important;
    }
}

@media handheld,
screen and (min-width: 768px) and (max-width: 899px) {
    .col-xs-12.top-logo {
        float: none;
    }
}

@media screen and (max-width: 767px) {
    .page-footer-logo img {
        max-width: 300px;
    }
}

.two_btn .col-md-6 a,
.quote_form_two_btn .col-md-6 a {
    color: #2b2b2b;
}


/*tabnewend*/

#quoteform {
    width: 100%;
}

.two_btn,
.quote_form_two_btn {
    margin-bottom: 0;
    padding: 30px 16px 30px;
}

.two_btn .btn,
.quote_form_two_btn .btn {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    transition: all 0.5s;
    background-color: #f4f4f4;
    width: 100%;
    letter-spacing: 0;
    margin: 0 auto 20px;
    padding: 15px;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 600;
    outline: none !important;
    text-transform: none;
}

#quoteform {
    margin: 0;
    padding: 10px 30px;
}

#quoteform .for_more {
    font-size: 20px;
    text-transform: uppercase;
}

a.standard-order {
    color: #fff;
}

div.sign-containment {
    position: absolute;
    top: 0;
    left: 0;
}

div.sign-container {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* For dimension calculation */

div.demo_text_clone {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.demo_text_clone .text_show {
    position: absolute;
    color: white;
    text-align: center;
}

div.demo_text_clone div.text_show {
    text-shadow: none !important;
}

.message-pop {
    min-height: 170px;
}

.message-pop div {
    float: left;
    margin: 0 15px;
    width: 27%;
}

.message-pop div {
    font-weight: 400;
    font-size: 16px;
}

.message-pop div a {
    color: #5761ff;
}

.message-pop div strong {
    color: #ff7ac7;
    font-weight: 400;
    font-size: 16px;
    background-color: #fff;
    margin-bottom: 15px;
}

.message_wrapper button {
    background-color: #5761ff;
    font-size: 16px;
    padding: 5px 45px;
}

div.small-ip67-warning {
    margin-top: 2px;
    font-size: 6px;
    line-height: 1.2;
}

#save-design-url,
#save-design-url-mob {
    background: #f5f5f5;
    padding: 15px;
    font-size: 12px;
    border-radius: 15px;
    text-align: left;
    word-break: break-all;
    margin: 0 0 20px 0;
}

ul.font-image-container {
    padding: 0;
    margin: 0 -3px;
}

ul.font-image-container li {
    height: auto;
    padding: 3px 3px;
    margin: 0;
    overflow-x: hidden;
}

ul.font-image-container li span {
    padding: 10px 2px;
    border: 1px solid #e9e9e9;
    border-radius: 6px;
    display: inline-block;
    width: 100%;
}

ul.font-image-container li span:hover {
    background-color: #f4f4f4;
    border-color: #f4f4f4;
}

ul.font-image-container li.active span {
    background-color: #5761ff;
    border-color: #5761ff;
}

ul.font-image-container .custom-font {
    width: 100%;
    max-width: 87px;
    max-height: 29px;
}

.text-highlight {
    color: #ff82cb !important;
}

div.non-latin-backboard-type-header {
    padding: 0 10px 0;
}

div.non-latin-text-header {
    font-weight: 600;
    font-size: 13px;
    color: #6a6a6a;
    text-align: left;
}

div.non-latin-price-quote-header {
    font-weight: 600;
    font-size: 17px;
    padding: 10px 0 5px;
    color: #828282;
    text-align: left;
}

form.non-latin-form {
    margin: 15px 0;
}

form.non-latin-form label {
    font-size: 13px;
    text-align: left !important;
    padding: 0 10px;
    color: #696969;
}

form.non-latin-form div.input-field {
    padding: 0 10px;
}

form.non-latin-form .form-control {
    margin-bottom: 0px;
}

form.non-latin-form .non-latin-range-slider {
    margin: 10px 0 0;
}

span.step-number {
    background-color: #5761fe;
    color: #fff;
    border-radius: 3px;
    padding: 0px 10px;
    font-size: 16px;
    margin-left: 5px;
    position: relative;
    top: -1px;
}

div.color-step-footer {
    display: flex;
    clear: both;
    padding-top: 5px;
}

div.rgb-color-header {
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
}

div.rgb-color-icon-container {
    width: 16.66%;
    display: flex;
    justify-content: center;
}

div.rgb-color-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
}

div.rgb-color-icon.active,
#color_table p.active {
    border: 3px solid #fff;
    position: relative;
}

div.rgb-color-icon.active::before,
#color_table p.active::before {
    content: " ";
    position: absolute;
    z-index: -1;
    width: 41px;
    height: 41px;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: 0;
    border: 3px solid #5761fe;
    border-radius: 50%;
}

div.rgb-color-text {
    font-size: 11px;
    line-height: 1.5;
    text-align: right;
    cursor: pointer;
    width: 49.98%;
}

div.rgb-color-desc {
    font-size: 10px;
    line-height: 11px;
    color: #fff;
}

div.rgb-waterproof-message {
    color: rgb(105, 105, 105);
    font-size: 12px;
    padding-top: 3px;
}

.color_desc .yt-container {
    overflow: hidden;
    aspect-ratio: 16/9;
}

.color_desc .yt-container iframe {
    width: 300%;
    height: 100%;
    margin-left: -100%;
}


/* For Medium screen */

@media (min-width: 768px) {
    div.small-ip67-warning {
        font-size: 8px;
    }
}

@media (min-width: 1175px) {
    .color_desc .yt-container {
        pointer-events: none;
    }
}

div.design-container {
    position: relative;
}

div.preview-container {
    width: 100%;
    position: relative;
    top: 0;
}

div.editor-container {
    width: 100%;
    margin: 0;
    border-radius: 12px;
    position: absolute;
    z-index: 2;
    display: block;
}

div.editor-right-border {
    width: 20px;
    background-color: #3d4a53;
}

div.editor-top-border {
    height: 30px;
    background-color: #3d4a53;
    position: sticky;
    margin-left: -20px;
    margin-right: -20px;
    z-index: 1000;
}

div.editor-curve-container {
    height: 30px;
    position: relative;
}

div.editor-curve-top {
    /*changed from 5px */
    height: 10px;
    background-color: #000d37;
    border-radius: 12px 12px 0 0;
    position: absolute;
    bottom: -1px;
    width: 100%;
}

div.editor-bottom-border {
    height: 30px;
    background-color: #3d4a53;
    position: sticky;
    bottom: 0;
    margin-left: -20px;
    margin-right: -20px;
}

div.editor-curve-container {
    height: 30px;
    position: relative;
}

div.editor-curve-bottom {
    /*changed from 5px */
    height: 10px;
    background-color: #fff;
    border-radius: 0 0 12px 12px;
    position: absolute;
    top: 0;
    width: 100%;
}

div.editor-content-container {
    height: 100%;
    overflow: auto;
    padding: 5px 5px 0;
}

div.m-step {
    height: auto;
    padding-top: 10px;
}

div.m-step-1,
div.m-step-9 {
    padding-top: 0;
}

div.step-content {
    padding: 0 5px;
}

div.step-header {
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 500;
    margin: 30px 0 10px;
}

div.step-header-mobile {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
    background: white;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 58px;
    border-radius: 12px 12px 0 0;
    text-align: left;
    margin: 0;
    height: auto;
    background-color: transparent;
    position: inherit;
}

span.forward-arrow {
    display: none !important;
    width: 65px;
    height: 42px;
    margin-right: 15px;
    background-color: #5761fe;
    color: #fff;
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

div.step-title {
    color: #fff;
    font-size: 12px;
    text-align: right;
    margin: 0 0 10px;
}

div.step-1-title {
    color: #fff;
    font-size: 12px;
    text-align: right;
    margin: 0 0 10px;
    display: flex;
}

div.step-1-input-container {
    display: flex;
    flex-direction: row;
}

textarea#input_text {
    text-align: center;
    padding-top: 10px;
    background: #f5f5f5;
    border-radius: 12px;
    border: 1px solid #b9b9b9;
    height: 135px;
    width: 100%;
}

div.align-wrap-desktop {
    flex-direction: row;
    width: auto;
    height: 100%;
    border: none;
}

div.align-wrap-desktop .align_icon {
    margin: 0px 4px;
    height: 45px;
}

div.align-wrap-desktop .align_icon.active {
    background-color: #ff7ac7;
}

div.modal {
    z-index: 1503;
}

#helpModal div.modal-body {
    padding: 20px 40px;
}

#helpModal p {
    font-size: 14px;
    color: #9a9a9a;
    margin-bottom: 7px;
}

#helpModal input.form-control {
    margin-bottom: 7px;
}

#helpModal textarea.form-control {
    border: 1px solid #ccc;
}

div.help-header {
    text-align: center;
    font-size: 20px;
    padding: 20px 20px 0;
    font-weight: 500;
    letter-spacing: 0.5px;
}

label.help-label {
    float: left;
    font-size: 15px;
    margin-bottom: 5px;
    font-weight: 500;
}

img.help-close {
    float: right;
    cursor: pointer;
}

button.quote-btn {
    background-color: #5761ff;
    padding: 10px 40px;
    color: #fff;
}

button.quote-btn:hover {
    background-color: #ff7ac7;
}

span.two-btn-brk {
    display: block;
}

.two_btn .btn {
    font-size: 18px;
}

div.digital-disclaimer {
    padding: 0 15px;
    background-color: transparent;
}

div.rgb_switch_text {
    font-size: 11px;
    line-height: 11px;
}

li.neon-color {
    width: 16.66666667%;
    float: left;
}

div.background-images-container {
    width: 100%;
    position: absolute;
    bottom: 25px;
    text-align: center;
}

div.background-images {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px;
    display: inline-block;
}

div.background-image {
    width: 60px;
    height: 60px;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
}

div.background-image.active {
    width: 70px;
    height: 70px;
}

div.background-image img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

div.get-quote-xs {
    font-size: 14px;
    line-height: 16px;
    color: #828282;
    text-align: left;
    margin: 10px 0;
}

div.get-quote-xs a {
    color: #5761fe;
}

div.proof-sign-container {
    position: relative;
    padding-bottom: 20px;
}

div.demo_text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 90%;
    display: block;
    width: 12%;
    height: 12%;
}

div.demo_text::after {
    content: "";
    position: absolute;
    display: block;
    width: 12%;
    height: 12%;
    bottom: 0;
    left: 90%;
}

div.split-view div.demo_text.bg-1::before {
    background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #3d4a53 85%);
}

div.split-view div.demo_text.bg-1::after {
    background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #3d4a53 85%);
}

div.split-view div.demo_text.bg-2::before {
    background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #dbdada 85%);
}

div.split-view div.demo_text.bg-2::after {
    background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #dbdada 85%);
}

div.split-view div.demo_text.bg-3::before {
    background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #908e89 85%);
}

div.split-view div.demo_text.bg-3::after {
    background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #908e89 85%);
}

div.split-view div.demo_text.bg-4::before {
    background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #dddddd 85%);
}

div.split-view div.demo_text.bg-4::after {
    background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #dddddd 85%);
}

div.split-view div.demo_text.bg-5::before {
    background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #102608 85%);
}

div.split-view div.demo_text.bg-5::after {
    background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #102608 85%);
}

div.split-view div.demo_text.bg-6::before {
    background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #102608 85%);
}

div.split-view div.demo_text.bg-6::after {
    background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #102608 85%);
}

div.split-view div.demo_text.bg-7::before {
    background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #2e2d32 85%);
}

div.split-view div.demo_text.bg-7::after {
    background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #2e2d32 85%);
}

div.split-view div.demo_text.bg-8::before {
    background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #babdc2 85%);
}

div.split-view div.demo_text.bg-8::after {
    background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #babdc2 85%);
}

div.split-view div.demo_text.bg-9::before {
    background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #291814 85%);
}

div.split-view div.demo_text.bg-9::after {
    background: linear-gradient( 135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #291814 85%);
}

div.proof-field {
    display: flex;
    justify-content: space-between;
}

div.design-proof-form div.proof-field label {
    font-size: 14px;
    color: #2f2f2f;
    font-weight: 500;
}

div.design-proof-form div.proof-field div {
    font-size: 14px;
    line-height: 17px;
    color: #2f2f2f;
    font-weight: 400;
}

img.proof-sign {
    max-height: 140px;
    width: auto;
    max-width: 100%;
}

div.split-view {
    display: flex;
}

div.design-proof-form {
    height: calc(100% - 58px);
    line-height: 1.3em;
}

div.proof-backboard-color-value,
div.proof-wall-mounting-value {
    text-transform: capitalize;
}

div.font-dropdown-container {
    text-align: left;
    margin-bottom: 8px;
    display: flex;
}

div.font-dropdown {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    background-color: #f4f4f4;
    font-size: 25px;
    user-select: none;
    width: calc(30% + 30px);
    height: 45px;
}

div.font-dropdown div.selected-font {
    display: inline-block;
    width: calc(100% - 25px);
    height: 100%;
    text-align: center;
}

div.font-dropdown div.selected-font img {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

div.font-dropdown i.fa {
    float: right;
    margin-top: 2px;
}

div.m-step-checkout {
    position: sticky;
    bottom: 30px;
    background-color: #fff;
    padding-bottom: 10px;
}

div.step-helper-header {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    font-weight: 600;
    margin: 30px 15px 10px;
}

div.step-helper-body {
    color: #828282;
    font-size: 12px;
    text-align: left;
    margin: 0px 20px 20px;
}

span.step-text-first {
    margin-left: 15px;
}

@media (min-width: 900px) {
    .make_style_form {
        width: calc(100% - 35px);
        height: calc(100% - 60px);
        padding: 0 20px;
    }
    div.editor-content-container {
        overflow: inherit;
        padding: 0;
        overflow: hidden;
    }
    div.m-step-1 {
        padding-top: 10px;
    }
    textarea#input_text {
        width: 100%;
        height: 100px;
    }
    li.neon-color {
        width: 11.11%;
    }
    div.color-step-footer {
        padding-top: 10px;
    }
    div.rgb-color-icon-container {
        width: 11.11%;
    }
    div.rgb-color-text {
        width: 44.44%;
    }
    span.step-text-first {
        padding-top: 0;
        margin-left: 0;
    }
    div.m-step {
        height: auto;
    }
    div.step-content {
        padding: 0;
        height: auto;
        margin-top: 0;
        overflow: visible;
    }
    div.step-header-mobile {
        text-align: left;
        margin: 0;
        height: auto;
        background-color: transparent;
        position: inherit;
    }
    div.editor-container {
        max-width: 600px;
        padding: 0;
        position: static;
        display: flex;
    }
    div.upload-get-help {
        margin: 0 0 10px;
    }
    div.upload-get-help a {
        color: #5761fe;
    }
    span.two-btn-brk {
        display: inline-block;
    }
    .two_btn .btn {
        font-size: 16px;
    }
    #save-design-url {
        margin-right: 15px;
    }
    .save-design {
        margin-top: 0;
        margin-right: 15px;
        font-size: 16px;
    }
    div.demo_box_side div.text_show,
    div.demo_text_clone div.text_show {
        margin: 0 40px 120px 0;
    }
    div.design-proof-form {
        min-height: calc(100vh - 333px);
    }
}

@media (min-width: 767px) {
    div.rgb_switch_text {
        font-size: 15px;
        line-height: 15px;
    }
}

@media (max-width: 767px) {
    #my-faq-section .faq-featured-area .faq-featured-item {
        width: 100%;
    }
    #my-faq-section .accordion-primary {
        padding-left: 0px;
        padding-right: 0px;
    }
    .accordion-primary .my-faq-item {
        width: 100%;
        /* changed */
        margin-bottom: 25px;
        /* changed */
        padding: 20px;
        /* changed */
        gap: 12px;
        /* changed */
        background-color: #fbfbfb;
        /* changed */
        border-radius: 12px;
        /* changed */
        border: 1px solid #eeeeee;
    }
}

#fb-messanger-fake-button {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100;
    transition: opacity 0.3s;
}

.kl-private-reset-css-Xuajs1 {
    display: none !important;
}

.proof-sign-container.landscape-view {
    display: none;
}

.proof-sign-container.not-landscape-view {
    display: block;
}

.design-proof-form-layout {
    display: flex;
    flex-direction: column;
    height: calc(100% - 120px);
}

.design-proof-form-left {
    width: 100%;
    padding-right: 0;
}

.design-proof-form-right {
    width: 100%;
    padding-left: 0;
    height: 100%;
}

.simplebar-scrollbar:before {
    background-color: #d1d1d1 !important;
    opacity: 1 !important;
}

@media (orientation: landscape) and (max-width: 899px) {
    textarea#input_text {
        height: 130px;
    }
    .align_icon svg {
        height: 37px;
    }
    .proof-sign-container.not-landscape-view {
        display: none;
    }
    .proof-sign-container.landscape-view {
        display: flex;
        position: absolute;
        width: calc(50% - 14px);
        top: 7px;
        text-align: center;
        justify-content: center;
    }
    .design-proof-form-layout {
        display: flex;
        flex-direction: row;
        height: 100%;
    }
    .design-proof-form-left {
        padding-right: 7px;
    }
    .design-proof-form-right {
        padding-left: 7px;
    }
    div.design-proof-form {
        height: 100%;
    }
}

@media (orientation: portrait) and (max-width: 899px) {
    div.design-proof-form-layout {
        position: relative;
    }
}


/* For XXS screen */

@media (max-width: 430px) {}

@media (max-width: 379px) {
    div.col-xxs-12 {
        width: 100%;
    }
}

@media (max-width: 359px) {}

@media (orientation: landscape) and (max-width: 680px) {
    div.col-xxs-12 {
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 899px) {
    div.design-container .cn-hidden-sm,
    div.editor-form-helper .cn-hidden-sm {
        display: none !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) {
    div.design-container .cn-hidden-md {
        display: none !important;
    }
}

@media (min-width: 900px) and (max-width: 1099px) {
    div.design-container .cn-hidden-back-md {
        display: none !important;
    }
}

@media (min-width: 1100px) and (max-width: 1249px) {
    div.design-container .cn-hidden-back-lg {
        display: none !important;
    }
}

.Arixo-white {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(22deg) brightness(103%) contrast(103%);
}