:root {
    --primary-fonts: "Inter", sans-serif;
    --secondary-fonts: "Open Sans", sans-serif;

    --primary-color: #3374FF;
    --secondary-color: #000;

    --btn-primary-color: linear-gradient(180deg, #5188FF 11.67%, #3374FF 112.5%);
    --btn-secondary-color: #1C5EEA;

    --white-color: #ffffff;
    --black-color: #000000;
}
body{
     font-family: var(--primary-fonts);
     font-size: 16px;
     font-weight: 400;

      overflow: hidden;
     height: 100vh;


}

/* Hide password reveal (eye) icon in Edge and IE */
input[type="password"]::-ms-reveal {
  display: none;
}

/* Hide password reveal icon in Chrome, Edge (Chromium), Safari */
input[type="password"]::-webkit-textfield-decoration-container {
  display: none;
}

/* Just in case for other possible webkit pseudo-elements */
input[type="password"]::-webkit-clear-button,
input[type="password"]::-webkit-inner-spin-button {
  display: none;
}

/* Optional: prevent native styling that may add reveal icon */
input[type="password"] {
  -webkit-appearance: none;
  appearance: none;
}


@supports (-moz-appearance: none) {
    *{
        scrollbar-width: thin;
    }
}
::-webkit-scrollbar {
    width: 6px; /* Adjust width for vertical scrollbar */
    height: 6px; /* Adjust height for horizontal scrollbar, if needed */
}
::-webkit-scrollbar-track {
    background: transparent; /* Track background */
}
::-webkit-scrollbar-thumb {
    background-color: #C3D4EA; /* Scrollbar color */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #C3D4EA; /* On hover */
}
::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}
[dir=rtl] input[type="tel"]{
    text-align: right;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

.primary-title-large {
    font-size: 60px;
    font-weight: 700;
    line-height: 70px;
    color: #000;
    margin-bottom: 0;
    font-family: var(--secondary-fonts);
}
.primary-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 100%;
    color: #000;
    margin-bottom: 10px;
}
.secondary-title {
    font-size: 20px;
    font-weight: 700;
    line-height: initial;
    color: #01001F;
    margin-bottom: 13px;
}
.heading-title{
    margin-bottom: 20px;
}
.heading-para{
     font-size: 15px;
    font-weight: 400;
    line-height: initial;
    color: #01001F;
    margin-bottom: 20px;
}
.heading-para:last-child{
    margin-bottom: 0;
}
.heading-para a{
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted var(--primary-color);
}

.tooltip .tooltiptext {
  visibility: hidden;
      width: 70px;
    background-color: var(--primary-color);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 3px 2px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -34px;
    font-weight: 300;
    font-size: 13px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--primary-color) transparent transparent transparent;
}

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

.input-group-prepend {
    margin-left: -1px;
    position: absolute;
    left: 8px;
    height: 100%;
    z-index: 9;
}
[dir="rtl"] .input-group-prepend {
    margin-right: -1px;
    margin-left: 0px;
    right: 8px;
    left: unset;
}
.input-group > .input-group-prepend > .input-group-text{
    background-color: inherit;
    border: none;
    border-radius: 0px;
}
.input-group > .input-group-prepend > .input-group-text img {
    width: 16px;
    height: 16px;
    object-fit: scale-down;
}
.input-group .form-control {
    padding-left: 42px;
    background-color: #fff;
}
[dir="rtl"] .input-group .form-control {
   padding-right: 42px;
   padding-left: 20px; 
}
.loadingTemplate {
    margin: 40px;
    text-align: center;
    color: red;
}
div#show_card_mailer {
    max-width: 600px;
    margin:20px 0px;
}

/**email template section**/
.email_siteHeader{
    background-color: #fff;
    padding: 24px 0;
    height: 90px;
}
.emailHeader_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.emailHeader_social {
    display: flex;
    gap: 12px;
}
.emailHeader_social img{
    width: 40px;
    height: 40px;
    object-fit: scale-down;
    transition: all 0.6s;
}
.emailHeader_social a img:hover{
    transition: all 0.6s;
    transform: scale(1.1);
}
.emailContent_dec .primary-title-large{
    margin-bottom: 20px;
}
.emailContent_dec .primary-title-large span{
    color: #3374FF;
    display: block;
}
.emailContent_dec p{
    color: #000;
    margin: 0 0 50px;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
}
.emailContent_dec .borderParaLine{
  padding-bottom: 50px;
  border-bottom: 1px solid #D9D9D9;
}

.emailContent_section {
    padding: 10px 0;
    height: calc(100% - 90px);
     display: flex;
    justify-content: center;
}
.emailContent_section .emailContent_wrap {
    display: flex;
    align-items: center;
    width: 100%;
}
.emailContent_section .row {
    align-items: center;
}
.emailContent_btn .btn{
    height: 60px;
}

/**header section**/
.siteHeader {
    background-color: #fff;
    padding: 23px 0;
    height: 86px;
    position: sticky;
    top: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #C3D4EA;
}
.siteHeader_main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}
.siteHeader_logo {
    flex: 1 1 30%;
    max-width: 30%;
}
.siteHeader_lang{
    flex: none;
}
.siteHeader_logo img {
    height: auto;
    width: 100%;
    max-width: 113px;
}
.siteHeader_lang select.form-control {
    height: auto;
    border: none;
    padding-left: 38px;
    border-radius: 0;
    color: #333333;
    font-weight: 500;
    font-size: 16px;
    background-size: 13px !important;
}
.siteHeader_last {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1 1 30%;
    max-width: 30%;
    justify-content: end;
}
.siteHeader_prof{
    position: relative;
    display: flex;
    gap: 9px;
    align-items: center;
    font-family: var(--primary-fonts);
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    color: #333;
    flex: none;
}
.siteHeader_prof:before{
  content: "";
  position: absolute;
  left: -20px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1px;
  height: 28px;
  background-color: #D9D9D9;
}
.siteHeader_prof img{
    width: 100%;
    width: 40px;
    height: 40px;
    object-fit: cover;
}
.siteHeader_switcher {
    height: 40px;
    background-color: #8D8D8D;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    overflow: hidden;
    gap: 5px;
}
.siteHeader_switcher_btn {
    padding: 11px 48px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--primary-fonts);
    font-weight: 500;
    font-size: 15px;
    text-align: center;
    color: #fff;
     border-radius: 30px;
}
.siteHeader_switcher_btn:hover, 
.siteHeader_switcher_btn.active{
    background-color: #3374FF;
    color: #fff;
}

/**login page section**/
.login_section {
    height: calc(100% - 86px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.login_section_wrap {
    max-height: 100%;
    overflow: scroll;
    width: 100%;
    padding: 100px;
}
.loginForm_box {
    box-shadow: 0px 0px 84px 0px #0000000F;
    background: #FFFFFF;
    padding: 50px;
    border-radius: 10px;
}
.loginForm_wrap {
    width: calc(100% - 20px);
    max-width: 600px;
    margin: auto;
}
.loginForm_wrap .row{
    gap: 20px 0;
}
.loginForm_box .form-group {
    margin: 0;
}
.form-forgot-div{
    display: block;
    text-align: right;
}
.form-forgot-login {
    color: #333;
    font-weight: 400;
    font-size: 15px;
}
.form-forgot-login:hover{
    color: var(--primary-color);
}
[dir="rtl"] .form-forgot-div {
    text-align: left;
}
.loginForm_box .form-control{
    height: 45px;
    border-color: #DCDCDC;
    border-radius: 50px;
}
.loginForm_box .form-control::-webkit-input-placeholder {
    color: #D2D2D2;
}
.loginForm_box .form-control::-moz-placeholder {
    color: #D2D2D2;
}
.loginForm_box .form-control:-ms-input-placeholder {
   color: #D2D2D2;
}
.loginForm_box .form-control::-ms-input-placeholder {
  color: #D2D2D2;
}
.loginForm_box .form-control::placeholder {
    color: #D2D2D2;
}

.heading_login{
    padding-bottom: 30px;
}
.heading_login p{
   font-weight: 400;
   margin-bottom: 0;
   font-size: 16px;
   color: #000000;
}
.heading_login .login_para span{
    color: #1C5EEA;
    font-weight: 700;
}
.heading_login .primary-title{
    font-weight: 400;
}
.login_para span a{
    color: #1C5EEA;
    font-weight: 700;
}
.login-logo-icon {
    margin: 0 0 14px;
}
.login-logo-icon img{
    width: 91px;
    height: auto;
}
.loginForm_ftr{
    margin: 30px 0 0;
}
.loginForm_ftr .btn-group{
    gap: 30px;
    display: flex;
    flex-wrap: wrap;
}
.loginForm_ftr .btn-group .btn{
    flex: none;
    max-width: 285px;
    width: 100%;
    margin: auto;
}
.haveAccount {
    text-align: center;
    margin: 50px 0 0;
    color: #333;
    font-size: 18px;
    font-weight: 400;
}
.haveAccount a{
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: underline;
    margin: 0 15px;
}
.invalid-feedback {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
    display: none;
}

.is-invalid {
    border-color: #dc3545 !important;
}
.invalid-feedback {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
    text-align: right;
    direction: rtl;
}
.otp_form_input .is-invalid {
    border-color: #dc3545 !important;
}

.otp_form_input {
    display: flex;
    gap: 13px;
    max-width: 296px;
    margin: 0 auto 15px;
}
.otp_form_input .form-control-otp{
    width: 100%;
    border: none;
    border-bottom: 1px solid #7D7D7D;
    height: 80px;
    font-family: var(--primary-fonts);
    font-weight: 200;
    font-size: 60px;
    line-height: 22px;
    text-align: center;
}
.otp_form_input .form-control-otp:focus{
    outline: none;
}



/**sidebar menu**/
.sidebarMenu {
    width: 100px;
    border-style: solid;
    border-color: #C3D4EA;
    border-width: 0px 0 0 1px;
    height: calc(100vh - 87px);
    position: fixed;
    top: 86px;
    max-height: 100%;
    overflow: auto;
}
[dir="ltr"] .sidebarMenu {
    border-width: 0px 1px 0 0;
}
.sidebarMenu .main-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.sidebarMenu .main-menu ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 15px;
    position: relative;
    color: #01001F;
    font-weight: 400;
    font-size: 16px;
    background-color: #fff;
}
.sidebarMenu .main-menu ul li a:before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 70px;
    height: 1px;
    background-color: #C3D4EA;
    margin: auto;
}
.sidebarMenu .main-menu ul li.active a, 
.sidebarMenu .main-menu ul li a:hover{
    background: var(--primary-color);
    color: #fff;
}
.sidebarMenu .main-menu ul li.active a:before, 
.sidebarMenu .main-menu ul li a:hover:before{
    display: none;
}
.sidebarMenu .main-menu ul li.active img, 
.sidebarMenu .main-menu ul li a:hover img{
    filter: brightness(0) invert(1);
}

/**main content**/
.main_wrap{
    overflow: hidden;
}
.main_content{
    margin-left: 100px;
    width: calc(100% - 100px);
    display: flex;
    gap: 0;
     height: calc(100vh - 86px);

}
[dir="rtl"] .main_content{
    margin-right: 100px;
    margin-left: 0;
}
.main_content_area{
    flex: 1;
    display: flex;
    align-items: center;
        height: calc(100% - 40px);
    max-height: 100%;
    overflow: auto;
}
.stepWrap_bx {
    height: 100%;
    max-height: 100%;
    overflow: auto;
}



.accordion {
  width: 100%;
}
.accordion-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s;
    color: #01001F;
    font-size: 20px;
    font-weight: 700;
}
.accordion-icon {
    transition: transform 0.3s;
    background-color: #1C5EEA;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 5px;
    font-weight: 400;
    font-size: 20px;
    padding-bottom: 2px;
}
.accordion-content {
 display: none;

}
.accordion-item.active .accordion-content {
 display: block;
 padding-bottom: 10px;
}
.accordion-item {
    padding: 20px 0 17px;
    border-bottom: 1px solid #C3D4EA;
}
.accordion-item:first-child {
    padding-top: 0px;
}

/**step wrap box**/
.stepWrap_bx{
    padding: 30px;
    background: #EEF6FF;
    width: 100%;
    max-width: 640px;
    width: 640px;
    flex: none;
}
.step_counter_hd{
   color: #01001F;
   font-size: 16px;
   font-weight: 400;
   margin: 0 0 10px;
}
.stepWrap_bx .form-group{
   margin: 0;
}
.signature_form_box {
    border-top: 1px solid #C3D4EA;
    padding-top: 30px;
    margin: 30px 0 0;
}
.signature_form {
    margin: 13px 0 0;
}
.signatureFrame{
    width: calc(100% - 20px);
    max-width: 844px;
    margin: 30px auto;
}
.mail_signatureFrame {
    box-shadow: 0px 0px 84px 0px #0000000F;
    border-radius: 10px;
    background: #FFFFFF;
    overflow: hidden;
    width: 100%;
}
.signatureFrame_hdr{
    padding: 18px 30px;
    box-shadow: 0px 0px 84px 0px #0000000F;
    background: #07183A;
    border-radius: 10px 10px 0 0;
}
.signatureFrame_body{
    padding: 32px 30px 60px;
    background-color: #fff;
}
.signature_to {
    padding-bottom: 20px;
    border-bottom: 1px solid #DCDCDC;
}
.signature_to label{
    margin-bottom: 10px;
}
.signature_subjects {
    display: flex;
    gap: 4px;
    color: #01001F;
}
.signature_subjects input{
    border: none;
    padding:0;
    color: #01001F;
    font-size: 16px;
    font-weight: 400;
    width: 100%;
    height: auto;
    font-family: var(--primary-fonts);
}
.signature_subjects input:focus, 
.singnatureBx_area_label input:focus, 
.singnatureBx_area_text textarea:focus{
    outline: none;
}
.singnatureBx_area{
    margin: 60px 0 0;
    width: 100%;
}
.singnatureBx_area img{
    width: 400px;
    height: auto;
}
.singnatureBx_area_label input {
    border: none;
    padding:0;
    color: #000;
    font-size: 18px;
    font-weight: 700;
    width: 100%;
    height: auto;
    font-family: var(--primary-fonts);
    margin: 0 0 7px;
}
.singnatureBx_area_text textarea{
    border: none;
    padding:0;
    color: #01001F;
    font-size: 16px;
    font-weight: 400;
    width: 100%;
    height: auto;
    font-family: var(--primary-fonts);
    margin: 0;
    min-height: 80px;
    resize: none;
    text-align: left;
    overflow: hidden;
}
.signature_form_box textarea{
    min-height: 50px;
}
[dir="rtl"] .singnatureBx_area_text textarea{
    text-align: right;
}
.singnatureBx_area_text{
    border-bottom: 1px solid #1C5EEA;
    padding-bottom: 32px;
}
.singnatureBx_link{
    margin: 75px auto 0;
    width: 250px;
    text-align: center;
}
.singnatureBx_link a{
    font-size: 15px;
    text-decoration: underline;
}
.singnatureBx_link a:hover{
    color: var(--primary-color);
}
.signatureFrame_ftr {
    margin: 50px 0 0;
    text-align: center;
}
.signatureFrame_ftr .btn-group {
    gap: 30px;
    flex-wrap: wrap;
}
.signatureFrame_ftr .btn-group .btn{
    min-width: 236px;
}
.stepWrap_bx .heading-title{
    border-bottom: 1px solid #C3D4EA;
    padding-bottom: 20px;
}
.singnature_quoteHd, .gallery_quoteHd {
    display: flex;
    gap: 20px;
    justify-content: space-between;
        align-items: center;
}
.singnature_info_icon {
    background-color: #1C5EEA;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
}
.singnature_info_icon.tooltip .tooltiptext{
    right: 0;
    margin: 0;
    width: 120px;
    left: unset;
}
.singnature_info_icon.tooltip .tooltiptext::after{
    right: 10px;
    left: unset;
}
[dir="rtl"] .singnature_info_icon.tooltip .tooltiptext{
    left: 0;
    right: unset;
}
[dir="rtl"] .singnature_info_icon.tooltip .tooltiptext::after{
    left: 10px;
    right: unset;
}
.singnature_quotes_list, .gallery_quotes_list{
   margin-bottom: 20px;
}
.singnature_quoteHd, .gallery_quoteHd{
    padding-bottom: 10px;
}
.singnature_quoteHd label , .gallery_quoteHd label{
    margin: 0;
    font-size: 15px;
    color: #01001F;
}
.singnature_uploads, .gallery_uploads {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.singnature_upload_file, .gallery_upload_file {
    border: 1px solid #C3D4EA;
    background: #FFFFFF;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 4px;
    position: relative;
    
}
.singnature_upload_file label, .gallery_upload_file label{
    color: #01001F;
    font-size: 45px;
    font-weight: 100;
    margin: 0; 
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.singnature_upload_file label input, .gallery_upload_file label input{
    visibility: hidden;
    width: 1px;
    height: 1px;
    position: absolute;
}
.singnature_upload_preview img, .gallery_upload_preview img{
    border: 1px solid #C3D4EA;
    background: #FFFFFF;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 4px;
   object-fit: scale-down;
}
.singnature_step_ftr .btn-group{
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.singnature_step_ftr .btn-group .btn{
    height: 50px;
    min-width: 120px;
}
.stepWrap_justify {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 50px;
}

.singnature_sample {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 100px;
    justify-content: space-between;
    padding-left: 40px;
}
[dir="rtl"] .singnature_sample{
    padding-left: 0px;
    padding-right: 40px;
}
.singnature_sample_items{
    position: relative;
    flex: 1 1 calc(50% - 50px);
    max-width: calc(50% - 50px);
}
.singnature_sample_items label {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    cursor: pointer;
    color: #01001F;
}
.singnature_sample_items label input{
    visibility: hidden;
    width: 1px;
    width: 1px;
    position: absolute;
}
.singnature_imgBx {
    width: 208px;
    height: 140px;
    border: 1px solid #C3D4EA;
    border-radius: 4px;
    background-color: #fff;
}
.singnature_sample_items label img{
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}
.singnature_sample_items.active .singnature_imgBx{
    box-shadow: 0px 0px 24px 0px #00000040;
   border: 2px solid #3374FF;
}
.singnature_sample_items.active:before{
    content: "";
    position: absolute;
    top: 3px;
    right: 4px;
    background-image: url(../../assets/images/checked_product.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 9;
    width: 20px;
    height: 20px;
    display: none;
}
.signature_form .signature_form_box .btn-black{
    min-width: 160px;
    height: 40px;
    border-radius: 7px;
}

/**style color**/
.colorPickerWrap {
    display: flex;
    gap: 15px;
}
.colorPicker_label{
  position: relative;
}
.colorPicker_span {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    background-color: #C3D4EA;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    border-radius: 3px;
}
[dir="rtl"] .colorPicker_span{
    left: unset;
    right: 0;
} 
.colorPickerWrap .colorValue {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
}
.colorPickerWrap input[type="color"] {
  -webkit-appearance: none;
  padding: 0;
  border: none;
  border-radius: 4px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  flex: none;
}
.colorPickerWrap input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
  padding: 0;
}
.colorPickerWrap input[type="color"]::-webkit-color-swatch-wrapper {
  border: none;
  border-radius: 4px;
  padding: 0;
}


.styles_wrapBx {
    margin: 20px 0;
    padding-top: 20px;
    border-top: 1px solid #C3D4EA;
}
.callToaction_style .form-group label{
    font-weight: 600;
}

/**range slider**/
.range_output {
    color: #01001F;
    font-size: 15px;
    font-weight: 400;
    border: 1px solid #38538C;
    width: 90px;
    height: 36px;
    background-color: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: ltr;
    flex: none;
}
.range-slider {
    direction: rtl;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
#range, #font_size, .range-input-bx {
    -webkit-appearance: none;
    width: 100%;
}
#range::-webkit-slider-runnable-track, 
#font_size::-webkit-slider-runnable-track, 
.range-input-bx::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    background: linear-gradient(90deg, #C3D4EA var(--range-progress), #3374FF var(--range-progress));
    border-radius: 1rem;
}
#range::-webkit-slider-thumb, 
#font_size::-webkit-slider-thumb, 
.range-input-bx::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 0.25rem solid #01001F;
    border-radius: 50%;
    background: #01001F;
    cursor: pointer;
    height: 19px;
    width: 19px;
    transform: translateY(calc(-50% + 2px));
}
.range-slider-flex{
    display: flex;
    align-items: center;
    gap: 15px;
}
/**end range slider**/


/**select screen**/
.selectOption_screen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 616px;
    margin: auto;
    flex-direction: column;
    gap: 42px;
    padding: 40px 0;
}
.selectScreen_bx {
    display: flex;
    gap: 38px;
    width: 100%;
    flex-wrap: wrap;
}
.selectScreen_col {
    display: flex;
    flex-direction: column;
    padding: 50px;
    background-color: #EEF6FF;
    border-radius: 20px;
    text-align: center;
    gap: 30px;
    font-family: var(--primary-fonts);
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    color: #01001F;
    flex: 1;

}
.selectScreen_icon {
    width: 130px;
    height: 130px;
    margin: auto;
    background-color: #3374FF;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}
.selectScreen_icon img {
    width: 78px;
    height: 78px;
    object-fit: scale-down;
    filter: brightness(0) invert(1);
}
.selectScreen_col:hover, 
.selectScreen_col.active{
    color: #fff;
    background-color: #3374FF;
}
.selectScreen_col:hover .selectScreen_icon img, 
.selectScreen_col.active .selectScreen_icon img{
    filter: inherit;
}
.selectScreen_col:hover .selectScreen_icon, 
.selectScreen_col.active .selectScreen_icon{
    background-color: #fff;
}

.btn-logout{
    color: var(--primary-color);
    text-decoration: underline;
    font-weight: 700;
    margin: 4px 0 0;
    font-size: 16px;
    display: block;
}
.no-posts {
    width: 100%;
    text-align: center;
    padding: 40px 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 300px;
}

.table_head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin: 16px 0;
    flex-wrap: wrap;
}
.table_head .title_secondary{
    margin: 0;
    font-weight: 600;
}
.table-responsive .btn-group{
    gap: 10px;
}
.table-bordered{
    border: 1px solid #ccc;
}
.table_head .btn-group .btn{
    height: 46px;
}
.table thead th{
    background-color: #eee;
}
.table tbody tr:nth-child(even) {
    background-color: #f5f8ff;
}
.table tbody tr td:last-child{
    text-align: left;
}

 .template_option_desktop .template_option_item.active .templateOpt_imgBx{
    border-radius: 0px;
  }
  #show-template_option.active .templateOpt_imgBx {
    width: 550px;
}

 .btn.reset-style-fields {
        width: 120px;
        height: 38px;
}
.clearBtn_bx {
    width: 100%;
    margin: 0 0 20px;
    text-align: left;
}
.form-control-number {
    direction: ltr;
    text-align: right;
}


/*.custom-desktop-view {
   width: 100%;
   max-width: 90%;
   margin: auto;
}
.custom-desktop-view iframe {
    height: 100%!important;
    overflow: hidden;
}

.custom-mobile-view {
    background-image: url(../../assets/images/mobile_device_flash_bg.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    max-width: 550px;
    padding: 29px 25px 50px 25px;
    overflow: hidden;
    height: 1110px!important;
        min-height: 1110px !important;

    transform: scale(0.7);
    transform-origin: top center;     
}
.custom-mobile-view iframe {
    height: 100%!important;
    border-radius: 54px;
    overflow: hidden;
}*/


@media only screen and (min-width: 980px){
.stepWrap_justify{
   padding: 30px 15px;
   gap: 0px!important;
   overflow: hidden;
}
.stepWrap_justify_top{
    height: calc(100% - 0px);
    overflow: hidden;
    overflow-y: auto;
    padding: 0 15px;
    padding-bottom: 70px;
}
.singnature_step_ftr {
        padding: 0 15px;
        margin-bottom: -100px;
        position: relative;
        top: -70px;
        background: #EEF6FF;
        background: linear-gradient(0deg, rgba(238, 246, 255, 1) 0%, rgb(238 246 255 / 27%) 100%);
        padding-top: 15px;
        padding-bottom: 30px;
}
.main_content .tab-content{
    height: 100%;
}
form#templatesForm {
    overflow: hidden !important;
}
}

@media only screen and (max-width: 1600px){
 [dir="rtl"] .singnature_sample {
    padding-left: 0px;
    padding-right: 15px;
}
.singnature_sample {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 50px;
    justify-content: space-between;
    padding-left: 15px;
}   
}   

/**start media**/

@media only screen and (max-width: 1800px){
.stepWrap_bx{
    max-width: 600px;
    width: 600px;
}    
.signatureFrame{
    max-width: 90%;
} 
.main_content_area {
    align-items: baseline!important;
} 
.signatureFrame_body{
    padding: 20px 20px 30px;
}
.singnatureBx_area {
    margin: 30px 0 0;
}
.singnatureBx_area_text{
    padding-bottom: 20px;
}  
.singnatureBx_link {
    margin: 30px auto 0;
 }
.signatureFrame_ftr {
    margin: 30px 0 0;
} 
}

@media only screen and (max-width: 1600px){
.primary-title-large {
    font-size: 45px;
    line-height: 50px;
} 
.emailContent_dec .borderParaLine {
    padding-bottom: 20px;
   
}  
.emailContent_dec p{
     margin: 0 0 20px;
}
.emailContent_thumbs {
    width: 400px;
    margin: auto;
} 
.emailContent_btn .btn {
    height: 45px;
}
.email_siteHeader {
    padding: 15px 0;
    height: 73px;
}
.emailContent_section {
    height: calc(100% - 73px);
}
div#show-template_option {
    max-height: 100%;
}
.siteHeader_switcher_btn{
   padding: 11px 28px;
}
}

@media only screen and (max-width: 1200px){
.heading-title {
    margin-bottom: 15px;
}
.heading-para{
   margin-bottom: 10px; 
}    
.email_siteHeader {
   padding: 10px 0;
   height: 60px;
}    
.emailHeader_logo img {
    width: 130px;
    height: auto;
} 
.emailHeader_social{
    gap: 5px;
}
.emailHeader_social img {
    width: 30px;
    height: 30px;
} 
.emailContent_section {
    height: calc(100% - 60px);
} 
.emailContent_dec .primary-title-large {
    font-size: 32px;
    line-height: 36px;
}
.emailContent_thumbs {
   width: 300px;
} 
.siteHeader {
    padding: 10px 0;
    height: 60px;
}
.siteHeader_logo img {
    width: 125px;
    height: auto;
}
.sidebarMenu {
    width: 85px;
    height: calc(100vh - 60px);
    top: 60px;
}
.sidebarMenu .main-menu ul li a {
    padding: 15px 15px;
    font-size: 14px;
}
.sidebarMenu .main-menu ul li img{
   width: 26px;
   height: 26px;
}
[dir="rtl"] .main_content {
    margin-right: 86px;
    margin-left: 0;
}
.main_content {
    margin-left: 100px;
    width: calc(100% - 86px);
    height: calc(100vh - 60px);
}
.signatureFrame_hdr {
    padding: 8px 20px;
}
.signatureFrame_body {
  padding: 15px;
}
.singnatureBx_area {
   margin: 20px 0 0;
}
.singnatureBx_area_text {
        padding-bottom: 10px;
}
.singnatureBx_link {
        margin: 10px auto 0;
}
.signatureFrame_ftr {
  margin: 20px 0 0;
}
.signatureFrame_ftr .btn-group .btn {
    min-width: 100px;
    height: 45px;
}
.signatureFrame_ftr .btn-group {
    gap: 10px;
    justify-content: center;
}
.stepWrap_bx {
   max-width: 450px;
   width: 450px;
   padding: 20px;
}
.stepWrap_bx .heading-title{
    padding-bottom: 15px;
}
.accordion-header {
    font-size: 18px;
}
.accordion-icon {
    width: 20px;
    height: 20px;
    font-size: 16px;
}
.signature_form_box {
    padding-top: 15px;
    margin: 15px 0 0;
}
.singnature_step_ftr .btn-group .btn {
    height: 45px;
    font-size: 14px;
}
.singnature_quotes_list {
    margin-bottom: 15px;
}
.singnature_sample{
    gap: 30px;
    padding: 0!important;
}
.singnature_imgBx {
    width: 100%;
    height: 110px;
}
.singnature_sample_items {
    position: relative;
    flex: 1 1 calc(50% - 15px);
    max-width: calc(50% - 15px);
}

.colorPickerWrap input[type="color"] {
    width: 45px;
    height: 45px;
}
}
@media only screen and (max-width: 1000px){

.siteHeader_logo img {
    max-width: 77px;
}

.main_content {
        flex-direction: column;
        max-height: 100%;
        overflow: auto;
    }
    .stepWrap_bx {
        height: auto;
        max-height: fit-content;
        overflow: visible;
        max-width: 100%;
        width: 100%;
    } 
    .signatureFrame {
        max-width: 100%;
    }
.singnature_sample {
    padding-left: 0px;
    padding-right: 0px;
}             
[dir="rtl"] .singnature_sample {
    padding-left: 0px;
    padding-right: 0px;
}
.singnature_imgBx {
    width: 100%;
    height: 100px;
}
.singnature_sample_items label {
    gap: 5px;
    font-size: 14px;
}
.login_section_wrap {
    padding: 50px 0;
}
.loginForm_box {
    padding: 40px;
}
.heading_login {
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.haveAccount {
    margin: 30px 0 0;
    font-size: 16px;
}
.haveAccount a {
    margin: 0 8px;
} 
.siteHeader_switcher_btn{
    padding: 11px;
    min-width: 130px;
}
.main_content_area{
    height: 100%;
    max-height: 100%;
    overflow: visible;
}
}

@media only screen and (max-width: 767px){
body{
  overflow: visible;
}
.emailContent_section{
    padding: 40px 0;
    height: auto;
}    
.emailContent_section .emailContent_wrap{
    align-items: baseline;
}
.emailContent_dec .primary-title-large {
        font-size: 26px;
        line-height: 32px;
}
.emailContent_dec p {
    font-size: 18px;
    line-height: 26px;
    margin: 0 0 15px;
}  
.emailContent_dec .borderParaLine{
    padding-bottom: 15px;
}
    .emailContent_btn .btn {
        height: 40px;
}
.loginForm_ftr .btn-group {
    gap: 10px;
}
.primary-title {
    font-size: 24px;
}  
.selectOption_screen{
  width: calc(100% - 20px);  
}
.siteHeader_switcher{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0;
}
.siteHeader_switcher_btn{
    border-radius: 0;
    flex: 1;
}
.siteHeader_prof {
    background-image: url(../images/arrow_select_icon.svg) !important;
    background-size: 13px !important;
    background-repeat: no-repeat !important;
    background-position: left 0px center !important;
    padding-left: 25px;
    cursor: pointer;
}
.siteHeader_prof_drop{
    display: none;
}
.siteHeader_prof_drop.active {
    position: absolute;
    padding: 10px;
    background: #fff;
    display: block;
    left: 0;
    top: 51px;
    width: 100%;
    min-width: 258px;
    text-align: center;
    box-shadow: 0px 0px 4px 0px #eee;
    max-width: 100%;
}
.show-template_option{
    max-height: 100%;
    overflow: hidden;
}
.main_content{
    height: 100%;
}
.main_content_area{
       padding: 0 0 80px;
    height: 100%; 
}
.show-template_option{
    overflow: hidden;
    height: 100%;
    max-height: 100%;
}
.show-template_option .template_option_item.active{
    width: 100%;
}
.signatureCode_MainBx {
    max-width: 100%;
    overflow: auto;
    padding: 10px 20px 40px;
}
.signatureFrame_body div#show_card_mailer{
        width: 100%;
    overflow: auto;
}
.signatureFrame_body div#show_card_mailer > div {
    width: 600px;
    overflow: auto;
}
}
@media only screen and (max-width: 520px){
 .loginForm_box {
        padding: 40px 20px;
} 

}





/**=========================================================
 * ==========business card website css code===============**/
.template_mode_op {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid #E8E8E8;
    overflow: hidden;
}
.template_mode_list {
    display: flex;
    align-items: center;
    position: relative;
}
.template_mode_list input{
    position: absolute;
    width: 1px;
    height: 1px;
    visibility: hidden;
    border: none;
}
.template_mode_list label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
}
.template_mode_list label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    padding: 6px 12px;
    min-width: 50px;
    height: 34px;
    cursor: pointer;
}
.template_mode_list label img{
    width: 22px;
    height: 22px;
    object-fit: scale-down;
}
.template_mode_list input:checked + label{
    background-color: #1C5EEA;
    border-radius: 6px;
}
.template_mode_list input:checked + label img{
    filter: brightness(0) invert(1);
}
.template_option_design {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 25px;
    margin: 21px 0 0;
}
.template_option_item {
    flex: 1 1 calc(33.333% - 17px);
    max-width: calc(33.333% - 17px);
    text-align: center;
}
.template_option_item label{
    cursor: pointer;
    margin: 0;
    font-family: var(--primary-fonts);
    font-weight: 400;
    font-size: 15px;
    line-height: 100%;
    text-align: center;
    color: #333333;
}
.template_option_item label input{
    position: absolute;
    width: 1px;
    height: 1px;
    visibility: hidden;
    border: none;
}
.template_option_item span{
  display: block;
  margin: 9px 0 0;
}
.template_option_item .templateOpt_imgBx{
   position: relative;
}
.template_option_item.active .templateOpt_imgBx{
    border: 2px solid #3374FF;
    border-radius: 27px;

}
.template_option_item.active .templateOpt_imgBx:before{
    content: "";
    position: absolute;
    right: 20px;
    top: 20px;
    background-image: url(../../assets/images/business-card/check_right_icon_white.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 35px;
    height: 35px;
    border-radius: 100%;
    background-color: #1C5EEA;
    box-shadow: 0px 0px 9px 0px #000000A6;
}
.show-template_option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 30px 0;
    max-height: calc(100% - 22px);
    overflow: auto;
}
.show-template_option .template_option_item.active{
    flex: none;
    max-width: 422px;
    width: 422px;
    opacity: 1!important;
    margin: auto;
}
.show-template_option .template_option_item.active .templateOpt_imgBx:before{
    display: none;
}
.show-template_option .template_option_item.active .templateOpt_imgBx{
   border: none;
       width: 300px;
}
.show-template_option .template_option_item.active .templateOpt_imgBx img{
    width: 100%;
    height: auto;
}
.show-template_option .template_option_item span{
    font-size: 22px;
    margin: 22px 0 0;
}
#show-template_option{
    margin: auto;
        width: 100%;
    height: 100%;
}