body {
    background: #FFF;
    color: #333;
    font-family: 'BossaTRIALExtendedLight';
}
/*  */

h1 {

    text-transform: uppercase;

}

h3 {

    margin-bottom: 40px;

    text-transform: uppercase;
    font-family: 'Bossa';

    font-weight: initial;

}


.nav {

    background: #FCF8F3;

}

.div_container {

    padding: 40px 20px;

    max-width: 100%; /*1000px;*/

    margin-left: auto;

    margin-right: auto;

}

.div_login_signup {

    padding: 40px 30px;

    border-radius: 12px;

    background: #fff;

    max-width: 360px;

    margin-top: auto;

    margin-bottom: auto;

}

.hide {

    display: none;

}

.tabs {

    display: flex;

}

.tabs .tab {

    width: 100%;

    padding: 10px;

    text-align: center;

    border-bottom: 2px solid #fff;

    font-weight: bold;

    margin-bottom: 20px;

    cursor: pointer;

    color: #aaa;

}

.tabs .tab.sel {

    color: #414142;

    border-color: #414142;

}

.forgot {

    color: #fff;

    font-size: 14px;

    display: block;

    padding-top: 12px;

}

body .div_container {

    margin-top: 0px;

    padding: 0px;

    width: 100%;

    height: 100vh;

    /*max-width: 100%;*/

    display: flex;

    /*align-items: center;*/

    justify-content: center;

    background: #fff;

}

html,
body {

    background: #fafafa;

    background-position: right;

    background-size: cover;

    min-height: calc(100vh - 0px);

}

.img_bg {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.bg_gradient {

    position: absolute;

    left: 0px;

    top: 0px;

    width: 100%;

    height: 100%;

    background: linear-gradient(180deg, rgba(10, 69, 57, 0) 0%, rgba(6, 77, 68, 0.427833) 43.17%, rgba(0, 88, 83, 0.8) 100%);

}

.login_left {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

}

form {

    max-width: 100%;

    width: 384px;

    width: 416px;

    padding: 0px 16px;

    padding-bottom: 20px;

}

form .logo_text {

    font-size: 50px;

    color: #ffc645;

    line-height: 70px;

    font-weight: 900;

}

form h1 {

    font-size: 36px;

    line-height: 44px;

    margin: 0;

    margin-bottom: 48px;

    color: #0F233A;

}

form .welcome {

    padding-top: 20px;

    padding-bottom: 12px;

    font-size: 18px;

    line-height: 24px;

    color: #666;

}

.or {

    border-top: 1px solid #E6EBF1;

    position: relative;

    display: flex;

    justify-content: center;

    margin-top: 40px;

}

.or span {

    background: #fff;

    padding: 4px 10px;

    font-size: 12px;

    line-height: 14px;

    margin-top: -11px;

    color: #4E5D6F;

}

.create_account a {

    font-size: 14px;

    line-height: 20px;

    padding-left: 8px;

}

.social_icon {

    width: 48px;

    height: 48px;

    background: #FFFFFF;

    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);

    border-radius: 100px;

    margin: 0px 16px;

    padding: 12px, 16px;

}

.socials {

    display: flex;

    justify-content: center;

    padding-top: 30px;

    padding-bottom: 26px;

}

.desc {

    font-size: 12px;

    line-height: 16px;

    padding-top: 4px;

}

.bt_back {

    display: flex;

    align-items: center;

    font-weight: 600;

    margin-bottom: 18px;

}

.bt_back img {

    width: 16px;

    margin-right: 12px;

}

.img_lock {

    margin-bottom: 48px;

}

.sentemail {

    margin: -16px;

    padding-bottom: 32px;

    font-size: 18px;

    line-height: 24px;

    color: #4E5D6F;

}

#bt_open_email {

    margin-bottom: 24px;

}

.space {

    height: 20vh;

}

.d_input .f_input {

    font-size: 14px;

    color: #C4C4C4;

    background-color: #2F2F2F;

    background-image: none;

    border: 1px solid #C4C4C4;

    border-radius: 4px;

}



.blist {

    display: flex;

    justify-content: center;
    flex-wrap: wrap;

}

.blist .branding {

    width: 300px;

    height: 390px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 10px;

    border: 5px solid #ccc;

    cursor: pointer;

    background: #fff;

    max-width: calc(33vw - 20px);

    max-height: calc(40vw - 20px);

}

.blist .branding.sel {

    border-color: #d42524;

}

.blist .branding img {

    object-fit: contain;

    max-height: 100%;

}

.bt {

    font-weight: 700;

    background: #d42524;

    min-width: 120px;

}

.bt.disabled {

    background: #888;

    opacity: 0.5;

}

.bt.disabled:hover {

    background: #888;

    opacity: 0.5;

    cursor: not-allowed;

}

.bt:hover {

    background: #d42524;

    color: #fff;

    opacity: 0.8;

}

.buttons {
    justify-content: center;
    padding: 0px;
    margin: 0 0 20px;
}

.buttons .bt {
    font-weight: 700;
    font-size: 15px;
    padding: 10px;
    height: auto;
    max-height: 100%;
}

.bt_eclose {
    display: flex;
    margin: 0px auto;
    justify-content: center;
    padding-left: 100px;
}

.llist,
.llistb {

    min-width: 360px;

    max-width: 380px;

    /* display: flex;

    flex-wrap: wrap;
    margin: 0 auto; */

}

.litem,
.litem-logo,
.litem-back {

    width: 100px;

    height: 100px;

    display: flex;

    align-items: center;

    margin: 10px;

    border: 3px solid #ccc;

    cursor: pointer;
    background: #ddd;

}

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

.litem-back img {
    height: 100%;
    margin: auto;
}

.litem.sel {

    border-color: #d42524;

}

.litem img {

    object-fit: contain;

    max-height: 100%;

    width: 100%;

    height: 100%;

}

.setting_icon {

    width: 30px;

    height: 30px;

    cursor: pointer;

    position: absolute;

    right: 20px;

    top: 40px;

    opacity: 0.5;
    z-index: 9999;

}

.setting_icon:hover {
    opacity: 0.9;
}

.dinput,

.dinput input {

    font-size: 22px;

}

.dinput input {

    height: 44px;

    margin-top: 10px;

    margin-bottom: 20px;

    text-align: center;

}

#step1 {

    /*background: url('../images/red_circle.png');*/

    background-size: contain;

    background-repeat: no-repeat;

    background-position-x: center;

}

#stepCustom,

#step2,

#step3,

#step4,

#step0,

#stepp {

    display: none;

}

.bitem,

.bitem1 {
    position: relative;
    max-width: 100%;
}

.customwidth-col {
    position: relative;
    max-width: 410px;
    text-align: center;
    margin: auto;
}

/* div#step3 .row div.col-md-6 {
    border: 3px solid #000;
} */
.bitem img,

.bitem1 img {

    width: 100%;

}

.oimg {
    display: none;
    position: absolute;
    width: 100%;
    height: 270px;
    left: 0px;
    top: 0px;
}

.rinput {
    display: flex;
    margin: 0px 0px 20px;
    font-size: 15px;
    align-items: center;
    gap: 10px;

}

.custom_div .rinput {
    display: block !important;
    text-align: left;
}

.custom_div .rinput label {
    margin: 0px 0px 10px 0px !important;
    width: 100%;
}

.custom_div .screenprint-form .rinput {
    padding: 0 40px;
}

.rinput label {
    width: 100px;
    text-transform: uppercase;
    display: block;
    margin: 0;
}

.rinput input,

.rinput select {
    border: 0px;
    outline: none;
    background: #d42524;
    color: #fff;
    padding: 10px;
    width: 100%;
    max-width: 100%;

}

h1 {

    font-size: 46px;
    font-family: 'Bossa';
    font-weight: initial;

}

#step4 h1 {

    color: #fff;

    text-shadow: none;

    font-size: 90px;

    line-height: 100px;

}

#step4 p {

    font-size: 20px;

    max-width: 600px;

    padding: 20px 0px;

    color: #fff;

}

#step4 img {

    display: block;
    max-height: 100px;
    /* max-height: 240px; */

}

.div_container.step4 {

    background: #d42524;

}

body .div_container {

    padding: 50px 40px;

    min-height: 100% !important;
    height: auto;

}

body .custom_div {

    padding: 0px !important;

    min-height: calc(100vh - 0px);

    height: auto;

}

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #fff;
    opacity: 0.5;
}




.margin-30 {
    margin: 28px 0;
}

div#live_printing_custom {
    /* margin: -45px 0px 0px 0px; */
    /* border: 3px dotted; */
    padding: 10px 15px 0;
}

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

.live_printing-form h3 {
    margin-bottom: 25px;
    font-size: 24px;
}

.order-form .rinput_live_printing label {
    font-size: 16px;
    min-width: 86px;
    text-transform: uppercase;
    margin: 0 0 0 8px;
    font-weight: 500;
}

/* .order-form .rinput_live_printing {
    display: flex;
    padding: 10px 0px 10px 0px;
    align-items: start;
} */

.order-form .thred-color-box {
    text-transform: uppercase;
    display: block;
    text-align: center;
    text-transform: uppercase;
}

.order-form .style-radio-btn {
    display: block;
    text-align: start;
}

.order-form .rinput_live_printing input {
    width: 60%;
    border-width: 0px 0px 2px 0px;
    border-color: #000;
}

.order-form .rinput_live_printing input:focus-visible {
    outline: none;
}

.thred-color label span {
    font-size: 17px;
}



.rinput_live_printing.thred-color-box {
    display: block;
    text-align: start;
    padding-bottom: 25px;
}

.color {
    align-items: flex-start;
    justify-content: center;
}

.font-style-liveprinting {
    display: contents;
}

.tcenter.main .rinput_live_printing.thred-color-box .color label.color-style-label {
    width: 100% !important;
    height: auto !important;
}

.rinput_live_printing.thred-color-box label {
    font-size: 24px;
    min-width: auto;
    margin: 0;
}

.color_div.main-custotext input {
    display: flex;
    width: 100%;
}

.bitem,
.bitem1 {
    display: flex;
    margin: 0px auto;
    justify-content: center;
    text-align: center;
    position: relative;
    top: 0px;
}

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

.custom-messages-html {
    position: absolute;
    text-align: center;
}

/* #message2 {
    position: absolute;
    /*top:45%;*/
/* left: 46%;
    transform: translate( -50%, -50% );
    text-align: center;
} */
/* #message3 {
    position: absolute; */
/*top: 80%;*/
/* left: 46%;
    transform: translate( -50%, -50% );
    text-align: center;
} */
.detail .ditem {
    text-transform: capitalize;
}

.script-family-new {
    font-family: 'AlexBrushRegular';
}

/*.script-family-new.font_message {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    text-align: center;*/
/*    font-size: 27px!important;*/
/*    padding: 0px 0px;*/
/*    justify-content: center;*/
/*    font-family: Arial;*/
/*}*/
.script-family {
    margin-right: 15px;
}

.custom-text-print {
    content: "";
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

#stepCustom h1,
#step2 h1 {
    font-size: 30px;
}

.drawing-area {
     top: 0px; 
    /* z-index: 10; */
    /* width: 200px;
    height: 400px; */
    border: 1px solid #ccc0;
}

.canvas-container {
    /* width: 200px;
    height: 400px; */
    position: relative;
    user-select: none;
}

.titem {

    position: relative;
    background-color: #fff;
}

#text {
    margin: auto;
}

.rightMenu {
    overflow-y: scroll;
    margin-bottom: 20px;
    margin: 0px 0px 15px 0px;
    border: 3px dotted;
    width: 439px;
    overflow-x: hidden;
}

#canvas {
    position: absolute;
    width: 200px;
    height: 400px;
    left: 0px;
    top: 0px;
    user-select: none;
    cursor: default;
}

.textb .custom-input-field1 #custotextC,
#custotextC2 {
    border: none;
}

.textb .custom-input-field1 {
    padding: 7px;
    border-radius: 5px;
}

.textb .custom-input-field1 #custotextC:focus-visible,
#custotextC2:focus-visible {
    border: none;
    outline: none;
}

.order-form .rinput_live_printing .style {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 15px;
    justify-content: start;
    padding: 10px 0;
}

.order-form .rinput_live_printing .style .style-inner input[type="radio"] {
    margin: 0;
}

.order-form .rinput_live_printing .style .style-inner label {
    margin: 0 0 0 5px;
    font-size: 20px;
    min-width: auto;
    text-transform: uppercase;
    line-height: 20px;
    cursor: pointer;
    font-weight: initial;
}

.order-form .style-radio-btn {
    padding-top: 0;
}

.rinput_live_printing .color {
    align-items: center;
    column-gap: 5px;
    margin-top: 10px;
    justify-content: start;
}

#live_printing_custominput#email::placeholder {
    color: lightgray;
}

.custom_div .tcenter.main .bitem1.titem1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
}

.custom_div .tcenter.main .bitem1.titem1 img {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    height: auto;
}

.rinput_live_printing.style-radio-btn label {
    margin: 0;
    font-size: 24px;
}

.color_div.main-custotext.customTextEmb h5 {
    margin: 10px 0 30px;
}

.button3-borderclass {
    border: 3px dotted;
    margin: -45px 0px 0px 0px;
}



@media screen and (max-width: 980px) and (min-width: 768px) {

    /* #message {
        position: absolute;
        background: transparent;
        left: 430px;
    } */
    /* .order-form .rinput_live_printing {
        display: flex;
        padding: 10px 0px 10px 0px;
    }
     .rinput_live_printing.thred-color-box {
         display: flex;
        align-items: flex-start; 
        gap: 0px 20px;
        justify-content: flex-start;
        margin: 0px auto;
    }  */
    .buttons {
        justify-content: center;
        padding: 0px;
    }

    .bt_eclose {
        display: flex;
        margin: 0px auto;
        justify-content: center;
        padding-left: 0px;
    }

    .button3-borderclass {
        margin: 15px 40px 0;
    }

}

@media screen and (max-width:767px) {

    div#live_printing_custom {
        padding: 0;
    }

    /*   .button3-borderclass {*/
    /*    margin: 15px 40px 0;*/
    /*}*/
    /*.rinput_live_printing.thred-color-box label {*/
    /*    font-size: 20px !important;*/
    /*}*/
    /*.rinput_live_printing.style-radio-btn label {*/
    /*    margin: 0;*/
    /*    font-size: 20px !important;*/
    /*}*/
    /*.color_div.main-custotext.customTextEmb h5 {*/
    /*    margin: 10px 0 30px;*/
    /*}*/
    .blist {
        flex-wrap: wrap;
    }

    .flex {

        display: block;

    }

    h1,

    #step4 h1 {

        font-size: 32px;

        line-height: 44px;

    }

    .llist,
    .llistb {

        justify-content: center;

        max-width: 100%;


    }

    .rinput {

        width: calc(100% - 20px);

        margin-left: 5px;

    }

    #step4 p {

        padding: 10px;

    }

    #step4 img {

        padding: 40px;

    }

}


@media screen and (max-width:767px) and (min-width:400px) {
    .bt_eclose {
        display: flex;
        margin: 0px auto;
        justify-content: center;
        padding-left: 0px;
    }

    /* div#message {
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translate( -50%, -50% );
        text-align: center;
    } */
    /* div#live_printing_custom{
        margin: 0px 28px 0px 0px;
    }*/
    .bitem1 img {
        width: 70% !important;
    }

    .live_printing-form h3 {
        font-size: 20px;
        text-align: left;
    }

    .buttons {
        justify-content: center;
        padding: 0px;
    }

    /*.order-form .rinput_live_printing {
       
        padding: 10px 25px 10px 20px;
    }*/
    /* .rinput_live_printing.thred-color-box label {
        width: 40px !important;
        height: 70px !important;
    } */
    .order-form .rinput_live_printing input {
        width: auto;
        border-width: 0px 0px 1px 0px;
    }

    /* .order-form .rinput_live_printing label {
        font-size: 18px;
        min-width: 75px;
        text-transform: uppercase;
    } */
    .order-form .rinput_live_printing input {
        width: 90%;
        border-width: 0px 0px 1px 0px;
    }

    .thred-color label span {
        font-size: 16px;
    }

    .buttons .bt {
        margin: 4px;
        font-weight: 700;
        font-size: 22px;
        padding: 3px 13px;
        height: auto;
        max-height: 100%;
    }
}

@media screen and (max-width:375px) {
    .bt_eclose {
        padding-left: 0px;
    }

    /*  div#live_printing_custom{
        margin: 0px 28px 0px 25px;
    }*/
    .bitem1 img {
        width: 50%;
    }

    .live_printing-form h3 {
        font-size: 20px;
    }

    .buttons {
        justify-content: center;
        padding: 0px;
    }

    .order-form .rinput_live_printing label {
        font-size: 14px;
        min-width: 70px;
        text-transform: uppercase;
    }

    /*.order-form .rinput_live_printing {
        display: flex;
        padding: 10px 25px 10px 26px;
    }*/
    /* .rinput_live_printing.thred-color-box label {
        width: 40px !important;
        height: 60px !important;
    }*/
    .order-form .rinput_live_printing input {
        width: auto;
        border-width: 0px 0px 1px 0px;
    }

    .custom-input-field {
        display: block;
    }

    .order-form .rinput_live_printing input {
        width: 90%;
        border-width: 0px 0px 1px 0px;
    }

    .thred-color label span {
        font-size: 15px;
    }

    .buttons .bt {
        margin: 0px;
        font-weight: 700;
        font-size: 20px;
        padding: 6px 20px;
        height: auto;
        max-height: 100%;
    }

    /* div#message {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate( -50%, -50% );
        text-align: center;
    } */
}



/** New Style for box **/
.bit-maxw-screen {
    max-width: 410px;
}

.flex.custom_div {
    background: transparent;
}

.tcenter.main>.row {
    padding: 5rem 0;
    margin: 0;
}

.tcenter.main .bitem1.titem1 img {
    margin: 0;
    background: #fff;
    border-radius: 50px;
    border: 3px solid #000;
}

.tcenter.main .bitem1.titem1 img.oimg {
    margin: 0;
    background: none;
    border-radius: unset;
    border: none;
}

.tcenter.main .col-md-6.button3-borderclass {
    border: none;
    padding: 0;
    margin: 0;
}

.tcenter.main .live_printing-form {
    border: none;
    margin: 0;
}

.tcenter.main .live_printing-form h3 {
    margin-bottom: 10px;
    font-size: 24px;
    font-family: 'Bossa';
    font-weight: initial;
}

.tcenter.main .order-form .rinput_live_printing label {
    font-size: 15px;
    margin: 0;
}

.tcenter.main .order-form .rinput_live_printing input {
    width: 100%;
}

#live_printing_cell input::placeholder {
  color: #A9A9A9; 
}


.tcenter.main .order-form .customTextEmb h5 {
    font-size: 20px !important;
    margin: 10px 0 15px;
    font-family: 'Bossa';
    font-weight: initial !important;
}

.tcenter.main .order-form .rinput_live_printing label {
    font-size: 15px;
    margin: 0;
}

.tcenter.main .order-form .custom-input-field {
    margin: 5px 0px 5px;
}

.tcenter.main .rinput_live_printing.thred-color-box label {
    font-size: 20px;
    margin: 0 0 5px;
    font-family: 'Bossa';
    font-weight: initial;
}

.tcenter.main .rinput_live_printing .color {
    column-gap: 8px;
    margin-top: 0px;
}

.tcenter.main .order-form .rinput_live_printing input {
    margin: 0;
}

.tcenter.main .rinput_live_printing.thred-color-box .color label {
    width: 20px !important;
    height: 20px !important;
}

.tcenter.main .rinput_live_printing.style-radio-btn label {
    margin: 0;
    font-size: 20px;
    font-family: 'Bossa';
    font-weight: initial;
}

.tcenter.main .order-form .rinput_live_printing .style .style-inner label {
    margin: 0 0 0 2px;
    font-size: 15px;
    line-height: 16px;
}

/** Custom Dev Test Server Style **/

#stepCustom {
    width: 100%;
}

#stepCustom .row h3 {
    margin-bottom: 5px !important;
    margin-top: 0;
}

#stepCustom .order-form .rightMenu {
    margin: 0;
    width: 100%;
    padding: 0;
    overflow: inherit;
}

#stepCustom .order-form .row {
    margin: 0;
}

#stepCustom .order-form .llist {
    justify-content: center;
    gap: 15px;
    margin: 0 auto 20px;
    min-width: auto;
}

#stepCustom .order-form .litem-logo {
    width: 120px;
    height: 120px;
    margin: 0;
}

#stepCustom .order-form .rightMenu,
#stepCustom .bitem #tshirt-canvas1 {
    background: #fff;
    border-radius: 50px;
    border: 3px solid #000;
}

#stepCustom .bitem {
    max-width: 100%;
    background: transparent;
}

#stepCustom .order-form .rightMenu {
    padding: 20px 30px;
}

#stepCustom .order-form .rightMenu h3 {
    margin: 0 0 15px !important;
    font-size: 18px;
}

#stepCustom .order-form .rightMenu .custom-input-field1 {
    width: 100%;
    margin: 0;
}

#stepCustom .order-form .rightMenu .color {
    column-gap: 8px;
    margin-top: 0px;
    justify-content: flex-start;
    align-items: center;
}

#stepCustom .order-form .rightMenu .color input[type="radio"] {
    margin: 0;
}

#stepCustom .order-form .rightMenu .color label {
    width: 20px !important;
    height: 20px !important;
}

#stepCustom .order-form .rightMenu .rinput_live_printing.style-radio-btn {
    padding-top: 20px;
}

#stepCustom .order-form .rightMenu #custotextC,
#custotextC2 {
    font-size: 20px;
}

#stepCustom .order-form .rightMenu .rinput_live_printing.style-radio-btn label {
    text-transform: uppercase;
    font-weight: 700;
}

#stepCustom .order-form .rightMenu .rinput_live_printing.style-radio-btn .style label {
    font-weight: initial;
}

#step2 .llist,
#step3 .button3-borderclass {
    background: #fff;
    border-radius: 50px;
    border: 2px solid #000;
    overflow: hidden;
    max-width: 100%;
    padding: 25px;
    justify-content: center;
    top:20px;
    display:flex;
    height: auto;
    flex-direction:column;
}

#step2,
#step3 {
    width: 100%;
}

#step2 .bitem.bit-maxw-screen .canvas-container {
    margin: 0;
    background: #fff;
    border-radius: 50px;
    overflow: hidden;
}

#step2 .bitem.bit-maxw-screen .canvas-container .canvas-container {
    border: 3px solid #000
}

div#customprint {
    background: #fff;
    border-radius: 50px;
    border: 3px solid #000;
    overflow: hidden;
    max-width: 100%;
    padding: 20px 30px;
    /* margin: 80px 0 0 0; */
}

div#customprint h3 {
    margin-top: 0;
    font-size: 18px;
}

.row.screenprint-form.customprint #finalDesign {
    background: #fff;
    border-radius: 50px;
    border: 3px solid #000;
    overflow: hidden;
    max-width: 100%;
    padding: 15px;
}

.thp-content {
    margin-bottom: 20px;
}

.logo-list-printing h3,
.tcenter.main .live_printing-form h3 {
    font-size: 14px;
    line-height: 16px;
    margin: 0 0 10px;
    font-weight: normal;
    text-align: center;
}

.button3-borderclass .llist,
.button3-borderclass .llistb {
    /* display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    min-width: auto; */
    /*width: 160px;*/
}

.button3-borderclass .litem {
    /* margin: 0;
    width: auto;
    height: auto;
    border: 2px solid #ccc;
    background: #ddd;
    display: inline-block; */
    padding: 5px;
}

.button3-borderclass .litem img {
    object-position: center;
    object-fit: contain;
    height: auto;
    width: auto;
}

.logo-list-printing {
    margin: 0 0 20px;
}

.tcenter.main #live_printing_custom.live_printing-form {
    padding: 0;
}

.tcenter.main .order-form .rinput_live_printing {
    padding: 0;
    align-items: center;
    margin: 0 0 20px;
}

.tcenter.main .order-form .rinput_live_printing label {
    font-size: 11px;
    line-height: 11px;
    min-width: 70px;
}

.tcenter.main .order-form .rinput_live_printing input {
    padding: 0;
    border: solid #000;
    border-width: 0px 0px 1px;
    font-size: 13px;
    line-height: 14px;
    height: 20px;
    /*text-transform: lowercase;*/
}

/* .tcenter.main .order-form .rinput_live_printing.noextra-margin-bottom input {
    text-transform: uppercase;
} */

.tcenter.main .order-form .rinput_live_printing input::-webkit-input-placeholder {
    font-size: 12px;
    line-height: 14px;
}

.tcenter.main .order-form .customTextEmb h5 {
    font-size: 13px !important;
    line-height: 15px;
    margin: 0 0 10px;
    font-family: 'Bossa';
    font-weight: normal !important;
    text-align: center;
}

/* 1. Target the wrapper and everything inside it */
#ai-capture-wrapper, 
#ai-capture-wrapper * {
    font-family: 'Bossa' !important;
}

/* 2. Specifically force buttons and labels which are often stubborn */
#ai-capture-wrapper button,
#ai-capture-wrapper label,
#ai-capture-wrapper input,
#ai-capture-wrapper p {
    font-family: 'Bossa' !important;
    text-transform: uppercase; /* Optional: many custom fonts look better in caps for buttons */
}

/* 3. If you want to keep the "inherit" logic but make it work */
button, input, select, textarea {
    font-family: inherit; /* This tells it to look at #ai-capture-wrapper */
}
.tcenter.main .order-form .custom-input-field {
    margin: 5px 0px;
    border: none;
}

.tcenter.main .order-form .rinput_live_printing .custom-input-field input {
    border-width: 1px;
    height: 34px;
    text-transform: none;
}

.tcenter.main .rinput_live_printing.noextra-margin-bottom,
.tcenter.main #live_printing_cell.rinput_live_printing {
    margin: 0 0 15px;
}

.tcenter.main .order-form .customTextEmb .center-text span {
    font-size: 10px;
    line-height: 12px;
}

.tcenter.main .live_printing-form .order-form .input-text-after label,
.tcenter.main .rinput_live_printing.style-radio-btn label {
    margin: 0 0 8px;
}

.rinput_live_printing .custom-text-design {
    padding-top: 10px;
}

.order-form .rinput_live_printing.style-radio-btn .style {
    padding: 0;
    align-items: center;
}

.tcenter.main #live_printing_Font .style-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tcenter.main #live_printing_Font .style-inner input[type="radio"],
.tcenter.main .rinput_live_printing.thred-color-box input[type="radio"] {
    font-size: 13px;
    line-height: 13px;
    height: 13px;
}

.tcenter.main #live_printing_Font .style-inner label {
    font-size: 13px;
    line-height: 13px;
    min-width: auto;
    margin: 0;
}

.tcenter.main .rinput_live_printing.rinput input,
.tcenter.main .rinput_live_printing.rinput select {
    font-size: 13px;
    line-height: 14px;
    height: 34px;
    padding: 10px;
    border: none;
}

.tcenter.main .error,
.tcenter.main .error1 {
    padding: 0;
}

.tcenter.main .buttons {
    margin: 0;
}

.tcenter.main .buttons .bt {
    margin: 0;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 12px;
    padding: 12px 10px;
    text-align: center;
}

.tcenter.main .customwidth-col,
.tcenter.main .bit-maxw-screen {
    max-width: 100%;
}

.tcenter.main .row {
    padding: 5rem;
}

.tcenter.main .customwidth-col>.screenprint-form {
    display: none !important;
}

/* #zoomBtn {
  position: absolute;
  bottom: 40px;
  left: 180px;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 26px;
  cursor: pointer;
} */

@media screen and (max-width: 992px) {
  .bitem.bit-maxw-screen .drawing-area {

    position: relative;

  }
}

/**Ash Dev ***/
@media screen and (min-width:992px) {
    .tcenter.main .row {
        display: flex;
        /* align-items: center; */
    }
 .bitem.bit-maxw-screen .drawing-area {
    position: fixed;

  }
    .tcenter.main .row.screenprint-form,
    .tcenter.main .row.live_printing-form,
    .tcenter.main .row.screenprint-form.rightMenu {
        display: block;
    }

    .tcenter.main .button3-borderclass .row {
        display: block;
    }
}

.custom-text-printing {
    border-width: 0px 0px 0px 1px;
    text-align: center;
    height: 40px;
    font-size: 25px;
    text-transform: capitalize;
}

@media screen and (max-width:980px) {
    .tcenter.main .row {
        padding: 2rem;
    }

    .tcenter.main .button3-borderclass {
        margin: 15px 0 0;
    }
}
.tcenter.main .live_printing-form .order-form .color-style-liveprinting label {
    min-width: auto;
    width: 20px;
    margin-right: 10px;
    border-radius: 50%;
    border: 1px solid black;
    height: 20px;
}

.tcenter.main .live_printing-form .order-form .color-style-liveprinting  input {
    max-width: 15px;
    margin-top: 4px;
}

.tcenter.main .live_printing-form .order-form .color-style-liveprinting {
    display: flex;
    width: 100%;
}
.backto-stepone{
    width: 200px;
    color: black;
    line-height: 23px;
    background: transparent;
    display: block;
    position: relative;
    text-align: center;
    top: 22px;
    padding: 2px;
    font-size: 12px;
    font-weight: 500;
    margin-left: 10rem;
    z-index: 9999999;
}
.backto-stepone a{
    color: black;
}
.backto-stepone a:hover{
    text-decoration: underline;
}

span#payStripePayment {
    font-size: 30px;
    font-weight: 600;
}

.out-of-stock {
  color: yellow;
  font-weight: bold;
  background-color: gray;
  font-size: 13px !important;
}

.order-form .rinput_live_printing.noextra-margin-bottom{
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.order-form .rinput_live_printing.noextra-margin-bottom input::placeholder {
    text-transform: uppercase;
    color: #888888;  
    opacity: 1;
}


canvas {
  touch-action: none; /* Critical for iPad + Android */
  -ms-touch-action: none;
  user-select: none;
}



/*******************************************************/
.logo-list-printing {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.personalize-text {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

/*.logo-scroll-wrapper {*/
/*  position: relative;*/
/*  width: 100%;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  overflow: hidden;*/
/*}*/


/*.llist {*/
/*  display: grid;*/
/*  grid-auto-flow: column;   */
/*  grid-template-rows: repeat(2, auto); */
/*  gap: 2px;*/
/*  overflow-x: hidden;*/
/*  scroll-behavior: smooth;*/
/*  width: 170px;   */
/*  height: auto;*/
/*  margin-bottom: 20px;*/
/*}*/
/* Ensure the wrapper doesn't clip the buttons moving -30px out */
.logo-scroll-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* Changed from hidden to allow buttons to sit outside */
}

/* Container for the arrows */
.scroll-controls {
    position: absolute;
    top: -20px;      
    right: -20px;    
    display: flex;
    gap: 5px;        
    z-index: 100;
}

.scroll-btn {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 8px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-size: 14px;
    line-height: 1;
    transition: background 0.2s;
}

.scroll-btn:hover {
    background: #f0f0f0;
}

/* Keep your existing .llist styles but ensure overflow-x is hidden */
.llist {
    display: grid;
    grid-auto-flow: column;   
    grid-template-rows: repeat(2, auto); 
    gap: 2px;
    overflow-x: hidden; /* This keeps the list neat while buttons stay visible */
    scroll-behavior: smooth;
     
    height: auto;
    margin-bottom: 20px;
}
.litem {
  /*width: 100px;*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.litem img {
  height: 50px;
  width: auto;
  border-radius: 6px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.litem:hover img {
  transform: scale(1.05);
  border-color: #007bff;
}

/*.scroll-btn {*/
/*  position: absolute;*/
/*  bottom: 0%;*/
/*  transform: translateY(-50%);*/
/*  background: rgba(0, 0, 0, 0.4);*/
/*  color: white;*/
/*  border: none;*/
/*  cursor: pointer;*/
/*  padding: 3px 8px;*/
/*  border-radius: 50%;*/
/*  font-size: 18px;*/
/*  transition: background 0.2s ease, opacity 0.2s ease;*/
/*  z-index: 5;*/
/*  opacity: 1;*/
/*}*/

.llist.active {
  cursor: grabbing;
}

/*.scroll-btn:hover {*/
/*  background: rgba(0, 0, 0, 0.7);*/
/*}*/

.logo-scroll-wrapper:hover .scroll-btn {
  opacity: 1;
}

.scroll-btn.left {
  right: 30px; /* Push just outside the left edge */
}

.scroll-btn.right {
  right: 0; /* Push just outside the right edge */
}
.scroll-btn.right {
  display: block !important ;
}

button#zoomBtn {
    bottom: 10px;
    position: absolute;
}


#scrollArrow {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: pointer;
  user-select: none;
}

/* Optional: only show on mobile */
@media (min-width: 901px) {
  #scrollArrow {
    display: none !important;
  }
  #camera-container {
    width: 60%;
  }
}



#ai-video {
    width: 100%;
    border-radius: 15px;
    background: #000;
}

@media (max-width: 901px) {
  #camera-container {
    width: 100%;
  }
}

/* #ai-final-result{
    width: 300px;
    height: 300px;
    border-radius: 50%; 
    object-fit: cover;   
    border: 2px solid black; 
} */


/* ── iPad / iOS Safari color swatch fix ── */
/* Undo the opacity/position hiding so radio inputs are visible and tappable next to color circles */
input.fav-color-style {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    opacity: 1 !important;
    position: static !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 4px 0 0 !important;
    vertical-align: middle !important;
    cursor: pointer !important;
}