@charset "UTF-8";

:root {
    --ems-font-primary: "DM Sans", sans-serif;
    --max-width: 1280px;
    --DMSans: "DM Sans", sans-serif;
    --primary-900: #233876; /* Base color */
    --primary-800: #1E429F;
    --primary-700: #1A56DB;
    --primary-600: #1C64F2;
    --primary-500: #3F83F8;
    --primary-400: #76A9FA;
    --primary-300: #A4CAFE;
    --primary-200: #C3DDFD;
    --primary-100: #E1EFFE;
    --primary-050: #EBF5FF;
    --secondary-900: #771D1D; /* Base color */
    --secondary-800: #8A2C0D;
    --secondary-700: #B43403;
    --secondary-600: #f9c0ab;
    --secondary-500: #FF5A1F;
    --secondary-400: #FF8A4C;
    --secondary-300: #FDBA8C;
    --secondary-200: #FCD9BD;
    --secondary-100: #FEECDC;
    --secondary-050: #FFF8F1;
    --neutral-900: #111928; /* Base color */
    --neutral-800: #1F2A37;
    --neutral-700: #374151;
    --neutral-600: #4B5563;
    --neutral-500: #6B7280;
    --neutral-400: #9CA3AF;
    --neutral-300: #D1D5DB;
    --neutral-200: #E5E7EB;
    --neutral-100: #F3F4F6;
    --neutral-050: #F9FAFB;
    --Indigo-900: #362F78;
    --Indigo-800: #42389D;
    --Indigo-700: #5145CD;
    --Indigo-600: #5850EC;
    --Indigo-500: #6875F5;
    --Indigo-400: #8DA2FB;
    --Indigo-300: #B4C6FC;
    --Indigo-200: #CDDBFE;
    --Indigo-100: #E5EDFF;
    --Indigo-050: #F0F5FF;
    --purple-900: #4A1D96;
    --purple-800: #5521B5;
    --purple-700: #6C2BD9;
    --purple-600: #7E3AF2;
    --purple-500: #9061F9;
    --purple-400: #AC94FA;
    --purple-300: #CABFFD;
    --purple-200: #DCD7FE;
    --purple-100: #EDEBFE;
    --purple-050: #F6F5FF;
    --teal-900: #014451;
    --teal-200: #AFECEF;
    --pink-900: #751A3D;
    --pink200: #FAD1E8;
    --lt-gray: #393B3C;
    --white: #ffffff;
    --yellow: #E3A914;
    --green: #47B17E;
    --bg-blacklg: #393B3C;
    --pri-gradient: linear-gradient(180deg, rgba(225, 239, 254, 0) 0%, var(--primary-100) 100%);
    --sec-gradient: linear-gradient(180deg, rgba(255, 248, 241, 0) 0%, rgba(255, 248, 241, 0.8) 37.14%, var(--secondary-050) 100%);
    --fnt-medium: 500 !important;
    --fnt-semi: 600 !important;
    --fnt-bold: 700 !important;
    --radius20: 20px;
    --radius16: 16px;
    --radius12: 12px;
    --label: #AAAAAA;
    --color-text: navy;
    --color-bg: papayawhip;
    --color-bg-accent: #ecdcc0;
    --size: clamp(10rem, 1rem + 40vmin, 30rem);
    --gap: calc(var(--size) / 20);
    --duration: 35s;
    --scroll-start: 0;
    --scroll-end: calc(-100% - var(--gap));
    --ems-primary-50: hsl(210, 100%, 96%);
    --ems-color-primary: hsl(220, 89%, 53%);
    --ems-color-primary-300: hsl(215, 98%, 82%);
    --ems-color-primary-100: hsl(210, 88%, 94%);
    --ems-success-bold-color: hsl(186, 95%, 26%);
    --ems-input-color: hsl(219, 40%, 11%);
    --ems-input-placeholder-color: hsl(218, 11%, 65%);
    --ems-input-border-color: hsl(216, 12%, 84%);
    --bs-border-color: hsl(216, 12%, 84%);
    --ems-input-border-color-onfocus: hsl(220, 89%, 66%);
    --ems-input-label-color: hsl(213, 28%, 17%);
    --ems-inactive-step-color: hsl(210, 10%, 23%);
    --color-white: hsl(0, 0%, 100%);
    --color-peach-light: hsl(30, 100%, 97%);
    --color-peach: hsl(27, 89%, 86%);
    --color-peach-dark: hsl(21, 90%, 48%);
    --bg-orange-50: hsl(33, 100%, 96%);
    --bg-orange-200: hsl(32, 98%, 83%);
    --bg-orange-500: hsl(25, 95%, 53%);
    --black-50: hsl(220, 27%, 96%);
    --black-100: hsl(220, 14%, 96%);
    --black-200: hsl(220, 13%, 91%);
    --black-600: hsl(215, 14%, 34%);
    --black-800: hsl(213, 28%, 17%);
    --black-900: hsl(219, 40%, 11%);
    --pink-50: hsl(327, 73%, 97%);
    --color-grey-500: hsl(210, 20%, 98%);
    --ems-bg-body-secondary-color: hsl(220, 14%, 96%);
    --ems-bg-body-tertiary-color: hsl(210, 17%, 98%);
    --ems-dropzone-bg-color: hsl(210, 14%, 83%);
    --ems-step-circle-bg-color: hsl(258, 90%, 66%);
    --ems-inactive-step-bg-color: hsl(0, 0%, 95%);
    --bg-toast-danger: hsl(0, 70%, 35%);
    --ems-shadow-sm: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    --ems-shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.0509803922);
    --app-vh: 100vh;
}

@supports (height: 100dvh) {
    :root {
        --app-vh: 100dvh;
    }
}

body,
html {
    font-family: var(--DMSans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    margin: 0;
    padding: 0;
    min-height: calc(var(--app-vh) - 12px);
    width: 100%;
    color: var(--global);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    font-size: 16px;
    background: linear-gradient(180deg, #FFF8F1 0%, #fdfbfb 100%);
    background-repeat: no-repeat;
}

* {
    overscroll-behavior: auto;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, p {
    margin: 0;
}

strong {
    font-weight: var(--fnt-semi) !important;
}

b {
    font-weight: var(--fnt-bold) !important;
}

li {
    list-style-type: none;
}

a, a:hover {
    text-decoration: none;
}

.ems-flexvr {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ems-main-wrapper {
    padding-top: 90px;
}

.ems-subspace {
    padding-top: 106px;
}

.ems-imgfit {
    width: 100%;
    max-width: 100%;
}

.ems-imgfluid {
    max-width: 100%;
    height: 100%;
}

.ems-padding100 {
    padding-block: 45px;
}

.ems-flex-v-center {
    display: flex;
    align-items: center;
}

.ems-section-overflow {
    position: relative;
    overflow: hidden;
}

.ems-newPwdHide.hide, .ems-newPwdShow.hide, .ems-confirmNewPwdHide.hide, .ems-confirmNewPwdShow.hide, .ems-currentPwdHide.hide, .ems-currentPwdShow.hide {
    display: none;
}

.ems-newPwdHide img, .ems-newPwdShow img, .ems-confirmNewPwdHide img, .ems-confirmNewPwdShow img, .ems-currentPwdHide img, .ems-currentPwdShow img {
    width: 16px;
    height: 16px;
}

/* New CSS */
.ems-bg-secondaryGradient {
    background-color: #FFFBF8 !important;
}

.ems-pwdEl {
    margin-bottom: 40px !important;
}

.ems-newPwdHide, .ems-newPwdShow, .ems-confirmNewPwdHide, .ems-confirmNewPwdShow, .ems-currentPwdHide, .ems-currentPwdShow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    cursor: pointer;
}

.pwdStrengthStatus {
    padding: 15px;
    margin-bottom: 15px;
    font-size: 13px;
    border-radius: 3px;
    border: 1px solid #eeeeee;
    background: #ffffff;
    display: none;
    position: absolute;
    right: -300px;
    top: 50px;
}

.pwd-progress {
    background: rgb(227, 236, 229);
    width: 100%;
    height: 6px;
    background: #ddd;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 5px;
}

.pwd-progress-bar {
    height: 100%;
    width: 0%;
    background: red;
    transition: width 0.3s;
}

.ems-planSubscription__title {
    font-size: 18px;
    font-weight: 600;
}

.ems-freeTrail__bg {
    background-image: url(../images/free-trial-login.jpg);
    background-size: cover;
}

.is-valid {
    border: 2px solid green;
}

.is-invalid {
    border: 2px solid red;
}

.field-validation-error {
    color: rgb(220, 53, 69);
    margin-top: 4px;
    display: inline-block;
    font-size: 0.875rem;
}

.ems-welcomeNote label {
    display: inline !important;
}

.freelogin-bg {
    background-image: url(../../images/free-trial-login.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

/* Alert Content */
.alertContent {
    position: fixed;
    -webkit-box-shadow: 0 7px 20px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 7px 20px rgba(0, 0, 0, 0.25);
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.25);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    outline: 0;
    background: #fff;
    width: 400px;
    padding: 10px 15px;
    left: 33%;
    top: 35%;
    vertical-align: middle;
    z-index: 10200;
    font-size: 13px;
}

.alertContent h2, .alertContent .h2 {
    color: #fff;
    margin: 0px;
    font-size: 16px;
    background: #333;
    padding: 10px 15px;
    margin: -10px -15px 0px -15px;
}

.alertContent .btn-set {
    text-align: right;
    margin-bottom: 5px;
}

.alertContent .btn-set a {
    margin-left: 10px;
}

.alertContent .info, .alertContent .success, .alertContent .warning, .alertContent .error, .alertContent .help, .alertContent .download {
    margin: 15px 0px 10px;
    padding: 10px 10px 10px 40px;
    background-repeat: no-repeat;
    background-position: 0px 5px;
}

.alertContent .info {
    color: #00529B;
    background-image: url("/Content/eMDMSCSS/img/info.png");
}

.alertContent .help {
    color: #00529B;
    background-image: url("/Content/eMDMSCSS/img/help.png");
}

.alertContent .success {
    color: #4F8A10;
    background-image: url("/Content/eMDMSCSS/img/success.png");
}

.alertContent .warning {
    color: #9F6000;
    background-image: url("/Content/eMDMSCSS/img/warning.png");
}

.alertContent .error {
    color: #D8000C;
    background-image: url("/Content/eMDMSCSS/img/error.png");
}

.alertContent .download {
    color: #333;
    background-image: url("/Content/eMDMSCSS/img/download.png");
}

.alertContent .closewindow {
    width: 14px;
    height: 14px;
    display: block;
    position: absolute;
    right: 15px;
    top: 10px;
    background: url(/Content/eMDMSCSS/img/modal-close-white.png);
}

.overlayBg {
    margin: 0px;
    padding: 0px;
    position: fixed;
    background: #000;
    overflow: auto;
    height: 100%;
    width: 100%;
    display: block;
    left: 0;
    top: 0;
    opacity: 0.3;
    z-index: 10100;
}

.alertContent .info, .alertContent .success, .alertContent .warning, .alertContent .error, .alertContent .help, .alertContent .download {
    margin: 15px 10px 10px;
    padding: 10px 10px 10px 40px;
    background-repeat: no-repeat;
    background-position: 0px 5px;
}

.alertContent {
    padding: 0;
}

.alertWindow .ems-btn--default-alert {
    padding: 0.5rem 1rem !important;
}

.iti {
    width: 100% !important;
}

.intl-tel-input {
    width: 100% !important;
}

.intl-tel-input .selected-flag .iti-flag {
    margin: 11px auto !important;
}

.intl-tel-input .selected-flag .iti-arrow {
    top: 19px !important;
}

.iti__flag-container {
    padding: 0;
}

.ems-cntryDrop__head::after {
    content: url("https://d27raczcaj0ncn.cloudfront.net/default/down-arrow.svg") !important;
}

.cookies-section {
    position: fixed;
    box-shadow: rgba(0, 0, 0, 0.1) 0px -2px 2px;
    bottom: 0px;
    width: 100%;
    z-index: 999999 !important;
    background: #fff;
}

.mt-rightsticky {
    position: sticky;
    position: -webkit-sticky;
}

.mt-pado {
    padding: 0 !important;
}

/* UAE Pass Btn */
.uaepass-btn:active, .uaepass-btn:focus, .uaepass-btn:active:focus {
    color: #000;
    background: #ecebeb;
}

.other-login a {
    padding: 3px;
    border-radius: 3px;
    display: block;
    border: 1px solid #bbbbbb;
    margin: 10px 0px 0px;
}

.uaepass-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 3px !important;
    font-weight: 400;
    color: #000;
}

.uaepass-btn:hover {
    color: #000;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
}

.checkmark--borderColor {
    border: 1px solid #87888a;
}

.border-purple-400 {
    border-color: var(--purple-400) !important;
}

.ems-border-purple-400 {
    border: 1px solid var(--purple-400) !important;
}

.ems-headertop {
    background: var(--secondary-200);
}

.ems-headertop__info {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
}

.ems-navlinks-group {
    display: flex;
    gap: 30px;
    position: relative;
    align-items: center;
    padding-right: 10px;
}

.ems-navlink {
    color: var(--neutral-700);
    font-weight: var(--fnt-medium);
    font-size: 14px !important;
    line-height: 20px !important;
}

.ems-sticky-top {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
    transition: background-color 0.3s ease, padding 0.3s ease;
}

.ems-sticky-top.scrolled {
    background-color: var(--white); /* Change this to the color you want after scrolling */
    box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.1);
}

.ems-headerlogo-wrappr {
    display: flex;
    align-items: center;
}

.qx-brandlogo img {
    height: 41px;
}

.ems-navheader {
    padding-block: 1rem;
    background-color: var(--secondary-050) !important;
}

.ems-navheader__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ems-navheader .nav-link {
    font-weight: var(--fnt-medium);
    color: var(--neutral-700);
    font-size: 14px;
    line-height: 140%;
}

.ems-navheader .nav-link.active {
    color: var(--neutral-900);
}

.ems-brandlogo img {
    height: 18px;
}

.ems-navlist {
    display: flex;
    margin: 0 auto;
    /* Hide scrollbar for IE, Edge and Firefox */
}

.navbar-toggler {
    border: none !important;
    background: transparent;
    padding-left: 0 !important;
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

.sub-nav {
    padding: 19px 0;
    background-color: #fff8f1;
    box-shadow: 0px 4px 30px 0px rgba(28, 100, 242, 0.1019607843);
    border-top: 1px solid #e5e7eb;
    position: fixed !important;
    left: 0;
    right: 0;
    z-index: 100;
    transition: 0.6s ease-in-out;
    position: absolute;
    width: 100%;
    opacity: 1;
}

.sub-nav a {
    color: var(--neutral-700);
    font-weight: 500;
    font-size: 14px;
    position: relative;
}

.sub-nav a:first-of-type {
    margin-left: 0;
}

.sub-nav.active {
    opacity: 0;
}

.sub-nav-head {
    font-size: 14px;
}

.sub-nav-dropdown__head {
    text-align: right;
    position: relative;
    padding-right: 20px;
}

.sub-nav-dropdown__head span {
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    color: var(--neutral-700);
}

.sub-nav-dropdown__head::after {
    content: url("https://d27raczcaj0ncn.cloudfront.net/default/down-arrow.svg");
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: 0s !important;
}

.nav-emsignup {
    padding: 40px 8px 20px 8px;
    background-color: #ffffff;
}

.ems-signupContainer {
    padding: 0 0 20px 0;
    flex-direction: column;
    display: flex;
    justify-content: space-between;
}

.ems-signupContainer__form {
    width: 100%;
}

.ems-signupContainer__img {
    width: 100%;
}

.ems-signupContainer__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    border-radius: 40px;
}

.ems-signuplogo {
    display: inline-block;
}

.ems-signuplogo img {
    width: 100%;
}

.ems-signup-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}

#sub-nav.menu-show .sub-nav-dropdown__head::after {
    transform: translateY(-50%) rotate(180deg);
}

#sub-nav.menu-show .sub-nav-dropdown__body {
    opacity: 1;
    z-index: 9;
    pointer-events: all;
}

.ovr-x-hdn {
    overflow-x: hidden;
}

.pe-12 {
    padding-right: 24px;
}

.ems-pwdHide, .ems-pwdShow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    cursor: pointer;
}

.ems-pwdHide.hide, .ems-pwdShow.hide {
    display: none;
}

.ems-pwdHide img, .ems-pwdShow img {
    width: 16px;
    height: 16px;
}

.ems-paswd-field .parsley-errors-list {
    left: 0 !important;
}

.ems-min-input-pwd {
    position: absolute;
    left: 0;
    top: 100%;
    transform: translateY(2px);
}

.parsley-errors-list ~ .ems-min-input-pwd {
    opacity: 0;
}

.ems-navheader {
    padding-block: 1rem;
    background-color: var(--secondary-050) !important;
}

.ems-navheader__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ems-navheader .nav-link {
    font-weight: var(--fnt-medium);
    color: var(--neutral-700);
    font-size: 14px;
    line-height: 140%;
}

.ems-navheader .nav-link.active {
    color: var(--neutral-900);
}

.ems-brandlogo img {
    height: 18px;
}

.ems-navlist {
    display: flex;
}

.ems-navlist .nav-item-header:first-of-type .nav-link {
    border-top: 0;
}

.navbar-toggler {
    border: none !important;
    background: transparent;
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

.nav-dropdown li {
    list-style-type: none;
}

.nav-dropdown--sm .ems-drp-link-list__item {
    width: 100%;
}

.nav-dropdown--md .ems-drp-link-list__item {
    width: 680px;
}

.nav-item-header {
    position: relative;
}

.nav-item-header:first-child {
    position: unset !important;
}

.nav-item-header:nth-child(2) {
    position: unset !important;
}

.nav-item-header .nav-link {
    position: relative;
}

.nav-item-header .nav-link.active {
    font-weight: 700 !important;
}

.nav-item-header .nav-link::after {
    position: absolute;
    content: "";
    transition: 0.4s ease-in-out;
    z-index: 9;
}

.ems-h-dropdown {
    padding: 0;
}

.ems-h-dropdown__head h3 {
    color: var(--neutral-400);
    font-size: 14px !important;
}

.ems-drp-link-list__item {
    margin-bottom: 20px;
    width: 100%;
}

.ems-drp-link-list__item:last-child {
    margin-bottom: 0;
}

.ems-drp-link-list--w100 .ems-drp-link-list__item {
    width: 100% !important;
}

.ems-drp-link__icon {
    width: 20px;
    height: 20px;
    object-fit: cover;
    margin-right: 16px;
}

.ems-drp-link__img {
    min-width: 46px;
    height: 46px;
    border-radius: 10px;
    margin-right: 16px;
}

.ems-drp-link__img img {
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    height: 100%;
}

.ems-drp-link-lg__item {
    margin-bottom: 28px;
}

.ems-drp-casrStudyWrap {
    width: 100%;
    height: 100%;
    border: 1px solid;
    border-radius: 10px;
    background-color: var(--purple-050);
    padding: 15px;
    border: 1px solid var(--purple-200);
}

.ems-drp-casrStudyWrap__img {
    max-width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 8px;
    margin-right: 12px;
}

.ems-drp-casrStudyWrap__img img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.ems-drp-casrStudyWrap__body {
    padding: 12px 0;
}

.nav-close {
    z-index: 99;
    font-weight: 600;
}

.link-arr {
    position: relative;
}

.link-arr::after {
    position: absolute;
    content: url(https://d27raczcaj0ncn.cloudfront.net/default/link-ar.svg);
    top: 50%;
    right: -23px;
    z-index: 9;
    transform: translateY(-50%);
    height: 20px;
}

.h-caseStudy-listWrap {
    width: 100%;
}

.h-singleCaseStudy {
    width: 100%;
}

.h-InternalpreviewSidebar-docList {
    max-height: calc(var(--app-vh) - 314px);
}

.ems-dropdown .menu {
    padding: 12px !important;
    border-radius: 12px !important;
    border: 0 !important;
}

.ems-dropdown .item {
    color: var(--neutral-700);
    font-weight: 500;
    font-size: 14px;
    position: relative;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.ems-dropdown .item.selected {
    color: var(--neutral-900) !important;
    font-weight: 700 !important;
}

.ems-dropdown .item.selected a {
    color: var(--neutral-900) !important;
    font-weight: 700 !important;
}

.ems-dropdown.active .icon::before {
    transform: rotate(180deg);
}

.ems-dropdown .icon::before {
    top: 2px !important;
    right: -4px !important;
    position: absolute;
    content: url("https://d27raczcaj0ncn.cloudfront.net/default/down-arrow.svg") !important;
}

.nav-item-header .nav-link.ems-border-bottom-none::after {
    position: absolute;
    content: "";
    transition: 0.4s ease-in-out;
    z-index: 9;
    background-color: initial;
}

.nav-item-header .nav-link.ems-border-bottom-none:hover::after {
    opacity: 0;
    transition: none;
}

.position-unset {
    position: unset !important;
}

/*
    ==================== SCROLLBAR ====================
*/

::-webkit-scrollbar {
    width: 4px;
    height: 6px;
    cursor: pointer;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

.w-scrollbar-lg::-webkit-scrollbar {
    width: 8px;
}

.w-scrollbar-lg::-webkit-scrollbar-track {
    background: var(--Indigo-050);
}

.w-scrollbar-lg::-webkit-scrollbar-thumb {
    background: grey;
}
/*
    ==================== TYPOGRAPHY ====================
*/
@font-face {
    font-family: "DM Sans";
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/dm-sans/DMSans-Light.ttf") format("opentype");
}

@font-face {
    font-family: "DM Sans";
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/dm-sans/DMSans-Regular.ttf") format("opentype");
}

@font-face {
    font-family: "DM Sans";
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/dm-sans/DMSans-Medium.ttf") format("opentype");
}

@font-face {
    font-family: "DM Sans";
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 600;
    src: url("../fonts/dm-sans/DMSans-SemiBold.ttf") format("opentype");
}

@font-face {
    font-family: "DM Sans";
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/dm-sans/DMSans-Bold.ttf") format("opentype");
}

.font-thin {
    font-family: var(--ems-font-primary) !important;
    font-weight: 300 !important;
}

.font-regular {
    font-family: var(--ems-font-primary) !important;
    font-weight: 400 !important;
}

.font-medium {
    font-family: var(--ems-font-primary) !important;
    font-weight: 500 !important;
}

.font-semibold {
    font-family: var(--ems-font-primary) !important;
    font-weight: 600 !important;
}

.font-bold {
    font-family: var(--ems-font-primary) !important;
    font-weight: 700 !important;
}

.h1 {
    font-size: 32px;
    line-height: 44px;
    letter-spacing: -0.2% !important;
}

.h2 {
    font-size: 24px;
    line-height: 33px;
}

.h3 {
    font-size: 20px;
}

.h4 {
    font-size: 18px;
    line-height: 25px;
}

.h5 {
    font-size: 16px;
    line-height: 22px;
}

:is(.h1, .h2, .h3, .h4) {
    font-weight: 600;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700 !important;
}

.fst-italic {
    font-style: italic;
}

.mt-bg-pri {
    background: var(--global);
}

.mt-clr-glb {
    color: var(--global);
}

.mt-clr-sec {
    color: var(--rg-lght);
}

.fs-12 {
    font-size: 12px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-S38 {
    font-size: 38px;
    font-weight: 500;
    line-height: 53.2px;
    letter-spacing: -0.02em;
}

.fs-40 {
    font-size: 24px;
    line-height: 33.6px;
}

.mb-40-cm {
    margin-bottom: 40px;
}

.mb-n4 {
    margin-bottom: -40px;
}

.pt-mainContainer {
    padding-top: 68px;
}

.ems-setSignMinHeight {
    min-height: calc(var(--app-vh) - 180px);
    max-height: calc(var(--app-vh) - 180px);
    overflow-y: auto;
    overflow-x: hidden;
}

.ems-configureSettingsWrapHeight {
    min-height: calc(var(--app-vh) - 255px);
    max-height: calc(var(--app-vh) - 255px);
    overflow-y: auto;
    overflow-x: hidden;
}

.ems-configureSettingsOuterHeight {
    min-height: calc(var(--app-vh) - 195px);
    max-height: calc(var(--app-vh) - 195px);
    overflow: hidden;
}

.h-templateConfigureSettings {
    min-height: calc(var(--app-vh) - 216px);
    max-height: calc(var(--app-vh) - 216px);
    overflow-y: auto;
    overflow-x: hidden;
}

.csn-step-icon {
    width: 24px;
    height: 24px;
}

.ems-mainSection {
    min-height: calc(var(--app-vh) - 76px);
}

.mb-12px {
    margin-bottom: 0.75rem;
}


/*
    ==================== INPUTS ====================
*/

.ems-textInput {
    width: 100%;
    border: 1px solid var(--ems-input-border-color);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.0509803922);
    border-radius: 0.5rem;
    padding: 0.625rem 1rem;
    color: var(--ems-input-color);
    background-color: var(--color-white);
    line-height: 1;
    font-size: 0.875rem;
    resize: none;
}

.ems-textInput:disabled, .ems-textInput[readonly] {
    background-color: #f8f9fa !important;
    opacity: 1;
}

.ems-textInput.ems-textInput--bgTransparent {
    background-color: transparent !important;
}

.ems-textInput.form-select {
    padding: 0.75rem 2.25rem 0.75rem .75rem;
}

.ems-textInput::placeholder {
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    color: var(--ems-input-placeholder-color);
}

.ems-textInput:focus, .ems-tableSelect:focus {
    outline: none;
    border-color: var(--ems-input-border-color-onfocus);
    box-shadow: 0 0 0 .09rem var(--ems-input-border-color-onfocus);
    position: relative;
    border-radius: 0.375rem !important;
}

.ems-textInput::selection {
    background-color: var(--ems-color-primary-100);
}

.ems-input-label {
    display: inline;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    color: var(--ems-input-label-color);
    border-radius: 0.25rem;
}

.ems-formLabel {
    display: inline;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    color: var(--ems-input-label-color);
    position: absolute;
    top: -10px;
    left: 12px;
    z-index: 1;
    background-color: var(--color-white);
    padding-inline: 0.25rem;
    border-radius: 50rem;
}

.ems-tableSelect {
    font-size: 0.75rem;
    font-weight: 500;
    background-image: unset;
    box-shadow: none;
    background-color: transparent;
    min-width: 130px;
}

.form-check-input, .form-check-label {
    cursor: pointer;
    color: #000;
}

.form-control::placeholder {
    color: #9ca3af;
    opacity: 1;
    font-size: 14px;
    font-weight: 400;
}

input:focus, select:focus {
    outline: none !important;
}

.iti--allow-dropdown input, .iti--allow-dropdown input[type=text],
.iti--allow-dropdown input[type=tel], .iti--separate-dial-code input,
.iti--separate-dial-code input[type=text], .iti--separate-dial-code input[type=tel] {
    padding-left: 3.25rem;
}

.iti__selected-flag {
    border-radius: 6px 0 0 6px;
}

.iti--separate-dial-code .iti__selected-flag {
    background-color: var(--Indigo-050);
    border: 1px solid var(--Indigo-200);
}

.iti--separate-dial-code .iti__selected-dial-code {
    margin-left: 14px;
    font-size: 12px;
}

.ems-form-check-input {
    width: 3em !important;
    height: 1.4em !important;
}

.ems-form-check-input:focus {
    appearance: none;
    box-shadow: none;
    background-color: transparent;
    border-color: #d1d5db;
}

.ems-form-check-input:checked {
    appearance: none;
    background-color: #1c64f2;
    box-shadow: none;
    border: 0;
}

.ems-checkbox-lg {
    width: 1.2rem;
    height: 1.2rem;
}

.upload-form-section .input-file {
    background-color: #f8f9fc;
    border: 1px solid #e2e9f3;
    border-radius: 4px;
    padding: 3px;
    width: 100%;
    color: #232323;
}

.upload-form-section .input-file::file-selector-button {
    border: none;
    border-radius: 4px;
    color: white;
    background: -webkit-linear-gradient(#037ee0, #0034ac);
    background: -o-linear-gradient(#037ee0, #0034ac);
    background: -moz-linear-gradient(#037ee0, #0034ac);
    background: linear-gradient(#037ee0, #0034ac);
    height: 30px;
    cursor: pointer;
    transition: all .25s ease-in;
    cursor: pointer;
}

.upload-form-section .input-file::file-selector-button:hover {
    background-color: #fff;
    color: #fff;
    transition: all .25s ease-in;
}

.choices {
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.0509803922);
    border-radius: 0.375rem;
}

.choices__inner {
    border-radius: 0.375rem !important;
    background-color: transparent !important;
    min-height: 40px;
}

.choices__input {
    background-color: transparent !important;
    margin: 0;
}

.choices__list--dropdown, .choices__list[aria-expanded] {
    margin-top: 1px !important;
    border-radius: 0.375rem !important;
}

.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item {
    border-radius: 0.375rem;
}

.form-check-label:has(.ems-checkboxInput:checked) {
    border-color: var(--Indigo-600) !important;
    background-color: var(--Indigo-050) !important;
}

.ems-checkboxInput:focus {
    box-shadow: none;
}

/* ---------------  JQuery Datepicker CSS  --------------- */

.ui-datepicker {
    font-family: var(--ems-font-primary) !important;
    width: 15em !important;
    padding: 0 !important;
    border-radius: 0.375rem !important;
    z-index: 100000 !important;
}

.ui-datepicker-header {
    border-radius: 0.375rem 0.375rem 0 0 !important;
    padding: 0.25rem 0 !important;
}

.ui-datepicker-title {
    margin: 0 4.6em 0 0 !important;
}

.ui-datepicker-title select {
    padding: 4px;
    border-radius: 0.375rem;
    border-color: #ced4da;
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 12px;
    font-weight: 500;
}

.ui-datepicker-month {
    margin-right: 4px !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 8px !important;
    left: unset !important;
    transform: rotate(270deg);
    width: 24px !important;
    height: 24px !important;
    cursor: pointer;
    border-radius: 0.25rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.ui-datepicker .ui-datepicker-prev {
    right: 30px !important;
}

.ui-datepicker .ui-datepicker-next {
    right: 2px !important;
}

.ui-datepicker .ui-datepicker-prev-hover {
    right: 30px !important;
}

.ui-datepicker .ui-datepicker-next-hover {
    right: 2px !important;
}

.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
    background-image: none !important;
    text-indent: 0 !important;
    position: static !important;
    margin: 0 !important;
}

.ui-datepicker .ui-datepicker-prev .ui-icon::before,
.ui-datepicker .ui-datepicker-next .ui-icon::before {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 7 Free';
    font-weight: 900;
    font-size: 0.625rem;
    color: #333;
    display: block;
    text-align: center;
}

.ui-datepicker .ui-datepicker-prev .ui-icon::before {
    content: '\f053';
}

.ui-datepicker .ui-datepicker-next .ui-icon::before {
    content: '\f054';
}

.ui-datepicker td {
    padding: 4px !important;
}

.ui-state-default, .ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button, html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    border-radius: 0.375rem;
    text-align: center;
    border: unset !important;
    background-color: transparent !important;
    padding-top: 3px !important;
    font-size: 12px;
}

.ui-state-active, .ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active, a.ui-button:active,
.ui-button:active, .ui-button.ui-state-active:hover {
    border-color: #0587ef !important;
    background-color: var(--primary-600) !important;
}

.ui-state-hover, .ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover, .ui-state-focus,
.ui-widget-content .ui-state-focus, .ui-widget-header
.ui-state-focus, .ui-button:hover, .ui-button:focus {
    border: unset !important;
    background-color: #ededed !important;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: 1px solid #0587ef !important;
    background-color: transparent !important;
    color: #000 !important;
}

/*
    ==================== BUTTONS ====================
*/

.ems-btn, .btn-custom {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    font-size: 0.875rem;
    line-height: 22px;
    font-weight: var(--fnt-medium);
    border-radius: 12px;
    border: none;
    background: transparent;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    outline: none;
    box-shadow: none;
    cursor: pointer;
}

.btn-custom-md {
    padding: 10px 12px;
    font-size: 14px;
    line-height: 12px;
}

.ems-btn--lg {
    padding: 0.65rem 2.5rem;
}

.ems-btn-sm {
    padding: 0.75rem 1.5rem;
}

.ems-btn-xs {
    padding: 0.25rem 0.75rem;
    min-width: auto !important;
    font-size: 0.75rem;
}

.ems-btn--primary {
    background: var(--bg-orange-500);
    border: 1px solid var(--bg-orange-500);
    color: var(--white);
}

.ems-btn--primary:hover {
    background: transparent;
    color: var(--bg-orange-500);
    border: 1px solid var(--bg-orange-500);
}

.ems-btn--lowWalletBalance {
    background-color: hsl(354.25deg 70.46% 53.53% / 25%) !important;
    border: 1px solid hsl(354.25deg 70.46% 53.53% / 75%) !important;
    color: hsl(354.35deg 72.65% 54.12%) !important;
}

.ems-btn--lowWalletBalance:hover, .ems-btn--lowWalletBalance:hover .ems-addBalanceIcon {
    color: var(--color-white) !important;
    background-color: hsl(354.35deg 72.65% 54.12%) !important;
}

.ems-addBalanceIconWrap {
    background-color: hsl(354.25deg 70.46% 53.53% / 25%) !important;
    color: hsl(354.35deg 72.65% 54.12%) !important;
}

.ems-btn--lowWalletBalance:hover .ems-addBalanceIconWrap {
    background-color: var(--color-white) !important;
}

.ems-walletBalanceWrap {
    border-left: 1px solid hsl(354.35deg 72.65% 54.12%);
}

.ems-btn--lowWalletBalance:hover .ems-walletBalanceWrap {
    border-left: 1px solid var(--color-white);
}

.ems-btn--default.ems-btn-login-h-mb {
    padding: 4px 20px;
}

.ems-btn--default {
    border: 1px solid var(--primary-600);
    color: var(--primary-600);
    padding: 0.65rem 2.2rem;
}

.ems-btn--default:hover {
    background-color: var(--primary-600);
    color: var(--white);
}

.ems-btn--info, .btn-ems--info {
    background: var(--primary-600);
    border: 1px solid var(--primary-600);
    color: var(--white);
}

.ems-btn--info:hover, .btn-ems--info:hover {
    background: transparent;
    color: var(--primary-600);
    border: 1px solid var(--primary-600);
}

.ems-btn--info .ems-btn-arrow {
    margin-left: 5px;
}

.ems-btn--info:hover .ems-btn-arrow path {
    stroke: var(--primary-600);
}

.ems-btn--info.disabled {
    background: #a0aec0;
    border-color: #a0aec0;
    color: var(--white);
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

.ems-btn--danger {
    background: #e53e3e;
    border: 1px solid #e53e3e;
    color: var(--white);
}

.ems-btn--danger:hover {
    background: transparent;
    color: #e53e3e;
    border: 1px solid #e53e3e;
}

.ems-btn--success {
    background: #38a169;
    border: 1px solid #38a169;
    color: var(--white);
}

.ems-btn--success:hover {
    background: transparent;
    color: #38a169;
    border: 1px solid #38a169;
}

.ems-tableBtn {
    border: 1px solid #dee2e6;
    padding: 0.375rem 1rem;
    color: #000;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.5rem;
    background-color: transparent;
    text-wrap: nowrap;
    box-shadow: var(--ems-shadow-xs);
}

.ems-tableBtn:hover {
    background-color: rgb(248,249,250);
}

.ems-btn:disabled {
    opacity: 0.6;
    pointer-events: none;
}

.ems-tableBtn.active {
    background-color: rgba(25,135,84, 0.1);
    border-color: rgb(25,135,84);
}

.ems-tableBtn.active::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f058";
    margin-left: 0.25rem;
    float: right;
    color: rgb(25,135,84);
}

.ems-accordion-btn:focus {
    box-shadow: inset 0 calc(-1 * 1px) 0 #dee2e6;
}

.ems-accordion-btn::after {
    content: '\f0dd';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.85rem;
    background-image: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ems-accordion-btn:not(.collapsed) {
    background-color: transparent;
}

.ems-paddingsm {
    padding-inline: 1.35rem;
}

.ems-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    line-height: 22px;
    font-weight: var(--fnt-medium);
}

.ems-link-pri {
    color: var(--primary-600);
}

.ems-btn--infoPricing {
    width: 280px;
}

.ems-btn-tertiary {
    background: var(--bg-orange-500);
    border: 1px solid var(--bg-orange-500);
    color: var(--color-white);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sec-contact {
    padding: 20px 0;
    background: linear-gradient(180deg, #fff8f1 0%, #ffffff 100%);
}

.ems-contact-form--bg {
    padding: 16px;
    border-radius: 12px;
    background-color: #FEECDC;
}

.ems-contact-fields .ems-field {
    width: 100%;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    padding: 7px 14px;
    color: #111928;
    background-color: #ffffff;
}

.ems-contact-fields .ems-field::placeholder {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #9ca3af;
}

.ems-contact-fields .ems-field:focus {
    appearance: none;
    outline: none;
}

.ems-contact-fields .ems-field--noBorder {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 0 12px;
}

.ems-contact-fields textarea {
    min-height: 84px;
}

.ems-contact-fields label {
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--neutral-800);
    margin-bottom: 6px;
}

.ems-contact-fields__item {
    margin-bottom: 20px;
    position: relative;
}

.ems-contact-fields .parsley-errors-list {
    position: absolute;
    left: 12px;
    top: 100%;
}

.contact-us-head {
    margin-bottom: 32px;
}

.contact-us-head h1 {
    font-size: 24px;
    font-weight: 600;
    line-height: 33.6px;
    letter-spacing: -0.02em;
    color: #111928;
}

.ems-contact-form-check p {
    width: calc(100% - 32px);
    padding-left: 12px;
}

.ems-reCaptchatext {
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
}

.parsley-errors-list,
.parsley-required,
.parsley-type,
.parsley-minlength {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.parsley-required,
.parsley-type,
.parsley-minlength {
    color: #F05252;
    font-size: 12px;
}

.cntrydrop-phonenumber {
    padding-right: 12px;
}

.cntrydrop-phonenumber::after {
    content: url("https://d27raczcaj0ncn.cloudfront.net/default/ar-down-gray.svg");
}

.map-nav {
    display: flex;
    justify-content: space-around;
    padding: 9px 12px;
    border: 1px solid #c3ddfd;
    background-color: #ffffff;
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: hidden;
}

.map-nav::-webkit-scrollbar {
    display: none;
}

.map-nav__item {
    cursor: pointer;
    text-align: center;
    padding: 0 15px;
    white-space: nowrap;
}

.map-nav__item span {
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    color: #6b7280;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    position: relative;
}

.map-nav__item span::after {
    content: "";
    position: absolute;
    bottom: -22px;
    left: 50%;
    width: 70%;
    height: 3px;
    background-color: #1c64f2;
    transform: translateX(-50%);
    border-radius: 20px;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.map-nav__item:hover span,
.map-nav__item.active span {
    color: #1c64f2;
}

.map-nav__item.active span {
    font-weight: 700;
}

.map-nav__item.active span::after {
    opacity: 1;
}

.ems-signup-methods__text {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    display: block;
    position: relative;
    margin-bottom: 16px;
}

.ems-signup-methods__text::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    z-index: 9;
    background: linear-gradient(90deg, rgba(243, 111, 33, 0) 8.95%, #f4bc9b 51.74%, rgba(243, 111, 33, 0) 91.92%);
}

.ems-signup-methods__text span {
    background-color: #ffffff;
    z-index: 10;
    position: relative;
    padding: 0 10px;
    color: var(--Indigo-600);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.ems-signup-methods__item {
    border: 1px solid #D1D5DB;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    padding: 8px 16px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
}

.ems-signup-methods__item span {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #374151;
    padding-left: 12px;
}

.ems-signup-methods__item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.ems-signup-methods__item:last-child {
    margin-bottom: 32px;
}

.form-check-input, .form-check-label {
    cursor: pointer;
    font-size: 0.875rem;
}

.modal {
    background-color: rgba(0, 0, 0, 0.6);
}

#loginModal .modal-content {
    border-radius: 24px;
    background-color: #FFF8F1;
    border: 0;
    padding: 67px 16px;
}

#loginModal .parsley-required,
#loginModal .parsley-type,
#loginModal .parsley-minlength {
    font-size: 12px;
}

.float-right {
    float: right;
    margin-left: auto;
}

.forogt-pass-link {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #1C64F2;
}

.close-modal {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 99;
    cursor: pointer;
}

.ems-abt-form-info::before {
    top: 0;
    transform: none;
}

.ems-form--aboutUs textarea {
    min-height: 80px;
}



/*
    ==================== UTILITIES - COLORS ====================
*/

.ems-color-neu900 {
    color: var(--neutral-900);
}

.ems-color-neu700 {
    color: var(--neutral-700);
}

.ems-color-neu500 {
    color: var(--neutral-500);
}

.ems-color-neu600 {
    color: var(--neutral-600);
}

.ems-color-neu400 {
    color: var(--neutral-400);
}

.bg-light-orange-200 {
    background: #feecdc;
}

.ems-color--neu-600 {
    color: var(--neutral-600);
}

.ems-color-neu800 {
    color: var(--neutral-800) !important;
}

.ems-bg-Indigo-100 {
    background-color: var(--Indigo-100) !important;
}

.ems-color-Indigo-500 {
    color: var(--Indigo-500);
}

.ems-color-purple-200 {
    color: var(--purple-200);
}

.ems-color--neu-700 {
    color: var(--neutral-700);
}

.ems-color-neu700Imp {
    color: var(--neutral-700) !important;
}

.ems-bg-secondary {
    background: var(--secondary-050);
}

.ems-bg-purple {
    background: var(--purple-050);
}

.ems-bg-purple100 {
    background: var(--purple-100);
}

.ems-bg-purple200 {
    background: var(--purple-200);
}

.ems-bg-orange {
    background: var(--secondary-300);
}

.ems-bggradient-pri {
    background: var(--pri-gradient);
}

.ems-bggradient-sec {
    background: var(--sec-gradient);
}

.ems-bggradient-topbtm {
    background: linear-gradient(180deg, #FFF8F1 0%, #FFFFFF 100%) !important;
}

.ems-bggradient-multi {
    background: linear-gradient(180deg, #FFF8F1 0%, #FFFBF8 77.6%, rgba(255, 255, 255, 0) 100%);
}

.ems-bggradient-single {
    background: linear-gradient(180deg, #FFF8F1 41.62%, rgba(255, 248, 241, 0) 100%);
}

.ems-gradient-primary {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
}

.ems-gradient-success {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
}

.ems-gradient-orange {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
}

.ems-gradient-info {
    background: linear-gradient(135deg, #e0f7fa, #b2ebf2)
}

.ems-color-primary600 {
    color: var(--primary-600);
}

.ems-black327 {
    color: #202327;
}

.fs-7 {
    font-size: 0.875rem !important;
}

.fs-13px {
    font-size: 0.813rem !important;
}

.fs-8 {
    font-size: 0.75rem !important;
}

.fs-11px {
    font-size: 0.688rem !important;
}

.fs-9 {
    font-size: 0.625rem !important;
}

.fs-9px {
    font-size: 0.563rem !important;
}

.fs-10 {
    font-size: 0.5rem !important;
}

.fs-46 {
    font-size: 46px;
    line-height: 56px;
}

.p-2px {
    padding: 0.125rem !important;
}

.p-6px {
    padding: 0.375rem !important;
}

.pb-6px {
    padding-bottom: 0.375rem !important;
}

.p-10px {
    padding: 0.625rem !important;
}

.p-12px {
    padding: 0.75rem !important;
}

.ps-6px {
    padding-left: 0.375rem !important;
}

.ps-12px {
    padding-left: 0.75rem !important;
}

.ps-2rem {
    padding-left: 2rem !important;
}

.pe-12px {
    padding-right: 0.75rem !important;
}

.pt-12px {
    padding-top: 0.75rem !important;
}

.px-6px {
    padding-inline: 0.375rem !important;
}

.px-10px {
    padding-inline: 0.625rem !important;
}

.px-12px {
    padding-inline: 0.75rem !important;
}

.py-6px {
    padding-block: 0.375rem !important;
}

.py-10px {
    padding-block: 0.625rem !important;
}

.py-12px {
    padding-block: 0.75rem !important;
}

.pb-12px {
    padding-bottom: 0.75rem !important;
}

.py-11 {
    padding-block: 11rem !important;
}

.py-6 {
    padding-block: 6rem !important;
}

.mt-2px {
    margin-top: 0.125rem !important;
}

.mt-6px {
    margin-top: 0.375rem !important;
}

.mb-6px {
    margin-bottom: 0.375rem !important;
}

.ms-6px {
    margin-left: 0.375rem !important;
}

.me-6px {
    margin-right: 0.375rem !important;
}

.mx-6px {
    margin-inline: 0.375rem !important;
}

.my-6px {
    margin-block: 0.375rem !important;
}

.mt-10px {
    margin-top: 0.625rem !important;
}

.m-12px {
    margin: 0.75rem !important;
}

.ms-12px {
    margin-left: 0.75rem !important;
}

.me-12px {
    margin-right: 0.75rem !important;
}

.mt-12px {
    margin-top: 0.75rem !important;
}

.mb-12px {
    margin-bottom: 0.75rem !important;
}

.mx-12px {
    margin-inline: 0.75rem !important;
}

.my-12px {
    margin-block: 0.75rem !important;
}

.mb-22px {
    margin-bottom: 1.375rem !important;
}

.mb-44px {
    margin-bottom: 44px !important;
}

.mb-100px {
    margin-bottom: 6.25rem !important;
}

.lh-0 {
    line-height: 0 !important;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-grab {
    cursor: grab;
}

.cursor-move {
    cursor: move;
}

.cursor-notAllowed {
    cursor: not-allowed;
}

.display-flex {
    display: flex;
}

.display-none {
    display: none;
}

.z-99 {
    z-index: 99 !important;
}

.z-999 {
    z-index: 999 !important;
}

.z-9999 {
    z-index: 999 !important;
}

.z-1030 {
    z-index: 1030;
}

.appearance-none {
    appearance: none;
}

.h-full {
    height: var(--app-vh) !important;
}

.rotate-180 {
    transform: rotateY(180deg);
}

.top-10 {
    top: 10%;
}

.z-1 {
    z-index: 1;
}

.gap-base {
    gap: 0.75rem;
}

.ems-shadow-sm {
    box-shadow: var(--ems-shadow-sm);
}

.ems-shadow-xs {
    box-shadow: var(--ems-shadow-xs);
}

.ems-text-primary, .ems-text-primary path {
    color: var(--ems-color-primary) !important;
    stroke: var(--ems-color-primary) !important;
}

.ems-text-danger {
    color: var(--bg-toast-danger);
}

.ems-bg-body-tertiary {
    background-color: var(--color-grey-500);
}

.ems-bg-body-secondary {
    background-color: var(--ems-bg-body-secondary-color) !important;
}

.ems-success-bold {
    color: var(--ems-success-bold-color);
}

.ems-text-muted {
    color: var(--black-600);
}

.text-bg-danger {
    background-color: var(--bg-toast-danger) !important;
}

.text-peach-dark {
    color: var(--color-peach-dark) !important;
}

.ems-text-info {
    color: #006064 !important;
}

.ems-img-bg {
    background-color: var(--color-peach-light);
}

.bg-orange-50 {
    background-color: var(--bg-orange-50) !important;
}

.bg-orange-500 {
    background-color: var(--bg-orange-500) !important;
}

.border {
    border-color: var(--ems-input-border-color);
}

.border-top-dashed {
    border-top: 1px dashed #adb5bd !important
}

.border-orange-200 {
    border-color: var(--bg-orange-200) !important;
}

.border-black-50 {
    border-color: var(--black-50) !important;
}

.border-black-100 {
    border-color: var(--black-100) !important;
}

.text-black-600 {
    color: var(--black-600);
}

.text-black-800 {
    color: var(--black-800);
}

.text-black-900 {
    color: var(--black-900);
}

.text-ellipsis {
    text-overflow: ellipsis;
}

.bg-pink-50 {
    background-color: var(--pink-50);
}

.bg-black-200 {
    background-color: var(--black-200) !important;
}

.bg-unset {
    background-image: unset;
}

.mw-auto {
    min-width: auto !important;
}

.mw-maxContent {
    min-width: max-content;
}

.mw-dateInput {
    min-width: 220px;
}

.min-w-270px {
    min-width: 270px;
}

.max-w-120px {
    max-width: 120px;
}

.max-w-250px {
    max-width: 250px;
}

.mw-0 {
    min-width: 0 !important;
}

.mh-auto {
    min-height: auto !important;
}

.mw-profileDropdown {
    min-width: 290px;
    max-height: calc(var(--app-vh) - 74px);
    overflow-y: auto;
}

.object-position-start {
    object-position: left;
}

.ems-or-separator {
    background: linear-gradient(90deg, rgba(243, 111, 33, 0) 8.95%, #f36f21 51.74%, rgba(243, 111, 33, 0) 91.92%);
    height: 1px;
}

.ems-or-separator .ems-or-text {
    position: absolute;
    top: -9px;
    left: 50%;
    padding: 0 8px;
    background: #fffbf8;
    transform: translateX(-50%);
}

.ems-arrow-top {
    position: absolute;
    top: 15px;
    left: -20px;
    height: 120px;
    width: 250px;
}

.ems-arrow-bottom {
    position: absolute;
    bottom: 15px;
    right: -20px;
    height: 120px;
    width: 250px;
    transform: scaleX(-1) scaleY(-1);
}

.min-h-52px {
    min-height: 52px;
}

.min-h-100 {
    min-height: 100% !important;
}

.progress-container {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.progress-step {
    background: #dcdcdc;
    color: #333;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    position: relative;
    transition: 0.3s;
}

.progress-step.active {
    background: #1c64f2;
    color: #fff;
}

.progress-step.finish {
    background: #28a745;
    color: #fff;
}

.progress-label {
    position: absolute;
    top: 45px;
    width: max-content;
    font-size: 14px;
    text-align: center;
    color: #000;
}

.rounded-base-sm {
    border-radius: 0.5rem !important;
}

.rounded-base {
    border-radius: 0.75rem !important;
}

.rounded-base-top {
    border-top-right-radius: 0.75rem !important;
    border-top-left-radius: 0.75rem !important;
}

.rounded-base-bottom {
    border-bottom-right-radius: 0.75rem !important;
    border-bottom-left-radius: 0.75rem !important;
}

.ems-list li {
    list-style-type: inherit !important;
}

.ems-subList-heading::marker {
    color: var(--ems-color-primary);
    font-size: initial;
}

.ems-dropdown-menu .ems-reportSidebarNavLink:hover {
    transform: none !important;
}

.w-text-overflow {
    display: inline-block;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.w-text-overflow-110px {
    max-width: 110px;
}

.w-text-overflow-130px {
    max-width: 200px;
}

.w-text-overflow-150px {
    width: 150px;
}

.w-text-overflow-180px {
    width: 180px;
}

.w-text-overflow-200px {
    width: 200px;
}

.list-style-auto {
    list-style-type: auto !important;
}

.list-style-disc {
    list-style-type: disc !important;
}

.w-fitContent {
    width: fit-content;
}

.h-ems-progess {
    height: 12px !important;
}

.w-sessionTimeDisplay {
    width: 40px;
}

.animation-none {
    animation: none !important;
}

/*
    ==================== HEADER ====================
*/
.page-topbar {
    min-height: 56px;
    position: fixed;
    width: calc(100% - 12px);
    top: 6px;
    left: 6px;
    right: 6px;
    z-index: 1030;
    background: #FCD9BD;
    border: 1px solid var(--bg-orange-200);
    font-size: 14px;
    border-radius: 0.75rem;
}

.page-topbar .nav-item.active {
    font-weight: 600;
    transform: scale(1.05);
    color: var(--secondary-500);
}

.page-topbar .nav-link.active {
    font-weight: 600;
    color: var(--secondary-500) !important;
    animation: navLinkActiveIn 0.3s ease forwards;
}

@keyframes navLinkActiveIn {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.15);
    }
}

.page-topbar .nav-link {
    text-decoration: none;
    padding-inline: 0.75rem;
    transition: color 0.3s ease, transform 0.3s ease;
    text-wrap: nowrap;
}

.page-topbar .nav-link:hover {
    color: var(--secondary-500);
    transform: scale(1.02);
}

.dropdown-toggle::after {
    display: none;
}

/*
    ==================== SIDEBAR ====================
*/

.main-body-section {
    background: linear-gradient(180deg, #FFF8F1 0%, #fdfbfb 100%);
}

.page-sidebar {
    position: sticky;
    left: 0;
    top: 60px;
    width: 100%;
}

.ems-closeSidebarBtnWrap {
    height: 18px;
}

.ems-closeSidebarBtn {
    background-color: lightgrey;
    border-radius: 0px 12px 0 8px;
}

.wflow-navlist-wrapper {
    min-height: calc(var(--app-vh) - 392px);
    max-height: calc(var(--app-vh) - 392px);
    overflow-y: auto;
    overflow-x: hidden;
}

.wflow-navlist-wrapper--user {
    min-height: calc(var(--app-vh) - 320px);
    max-height: calc(var(--app-vh) - 320px);
    overflow-y: auto;
    overflow-x: hidden;
}

.wflow-navlist-wrapper--uploadDoc {
    min-height: calc(var(--app-vh) - 280px);
    max-height: calc(var(--app-vh) - 280px);
    overflow-y: auto;
    overflow-x: hidden;
}

.ems-reportSidebarCollapsed .wflow-navlist-wrapper {
    max-height: calc(var(--app-vh) - 266px);
}

.sidebar-or-separator {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    background: #ecf0ff;
    width: 50px;
    line-height: 20px;
    font-size: 12px;
    text-align: center;
    border-radius: 15px;
}

.ems-sidebar__footer {
    position: absolute;
    bottom: 12px;
    width: calc(100% - 24px);
}

/* Sidebar flex layout — templates auto-adjust, profile-info sticks to bottom */
.ems-sidebar-flex {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ems-sidebar-flex > .ems-sidebar-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ems-sidebar-flex .ems-reportSidebarNavSection {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ems-sidebar-flex .create-envelope-section,
.ems-sidebar-flex .ems-signup-methods__text {
    flex-shrink: 0;
}

.ems-sidebar-flex .ems-sidebar__footer {
    position: static;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ems-sidebar-flex .workflow-sidebar-wrapper {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.ems-sidebar-flex .profile-info {
    flex-shrink: 0;
    width: calc(100% - 24px);
}

/* ---------- Reports Sidebar ---------- */


.ems-sidebarToggleWrap:has(.ems-sidebarToggleBtn.active) {
    scale: 1;
}

.ems-sidebarToggleLine {
    width: 10px;
    height: 0.005rem;
    margin-bottom: 2.7px;
}

.chevron-container {
    display: none;
    transform: scale(0.7) rotate(-10deg);
    transition: opacity 0.4s ease, transform 0.4s ease;
    padding-inline: 2px;
}

.chevron-path {
    transition: fill 0.3s ease;
}

.ems-sidebarToggleBtn.active .hamburger-container {
    display: none;
    transform: scale(0.7) rotate(10deg);
}

.ems-sidebarToggleBtn.active .chevron-container {
    display: flex;
    transform: scale(1) rotate(0deg);
}

.ems-previewExternal .ems-sidebarToggleIconWrap,
.ems-workflow .ems-sidebarToggleIconWrap {
    display: none !important;
}

.ems-toggleSidebarLine {
    stroke: var(--primary-600);
    stroke-width: 3;
    stroke-linecap: round;
    transition: transform 0.6s ease-in-out;
}

.ems-toggleSidebarLine--top {
    transform-origin: 35px 12px;
}

.ems-toggleSidebarLine--bottom {
    transform-origin: 35px 28px;
}

.ems-reportSidebar {
    position: fixed;
    top: 67px;
    left: 6px;
    min-height: calc(var(--app-vh) - 74px);
    max-height: calc(var(--app-vh) - 74px);
    width: 268px;
    background: #fff;
    transition: all 0.35s ease-out;
    display: flex;
    flex-direction: column;
    border-radius: 0.75rem;
    z-index: 2;
    overflow-y: auto;
    overflow-x: hidden;
}

.ems-reportSidebarNavSection {
    margin-bottom: 2rem;
}

.ems-reportSidebarNavSection:last-child {
    margin-bottom: 1rem;
}

.ems-reportSidebarNavSectionTitle {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    opacity: 1;
    transition: opacity 0.15s ease-out;
}

.ems-reportSidebarNavLink {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    color: #334155;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.15s ease-out;
    position: relative;
    font-size: 0.813rem;
    font-weight: 500;
    cursor: pointer;
}

.ems-reportSidebarNavLink:hover {
    background: #f8fafc;
    color: #334155;
    text-decoration: none;
}

.ems-reportSidebarNavLink.active {
    background: #f0f4ff;
    color: #1d4ed8;
    font-weight: 600;
}

.ems-reportSidebarNavSubLink.active {
    background: transparent;
    font-weight: 700;
}

.ems-reportSidebarNavText {
    opacity: 1;
    transition: opacity 0.35s ease-out;
}

.ems-reportsMainContent {
    margin-left: calc(268px + 6px);
    transition: margin-left 0.35s ease-out;
    position: relative;
    top: 62px;
}

.ems-reportSidebarHidden .ems-reportSidebar {
    transform: translateX(calc(-100% + -6px));
}

.ems-reportSidebarHidden .ems-reportsMainContent {
    margin-left: 0;
}

.ems-reportSidebarNavLink:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.ems-reportSidebarAccordionBtn::after {
    content: none;
}

.ems-reportSidebarAccordionBtn:focus {
    box-shadow: none;
}

.ems-reportSidebarAccordionBtn:not(.collapsed) {
    background-color: #f0f4ff;
    color: #1d4ed8;
    box-shadow: none;
}

/* ------------------- Settings Grid ------------------- */

.settings-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0.75rem;
}

.settings-box {
    background: var(--color-white);
    border: 1px solid var(--Indigo-300);
    transition: all 0.25s ease;
}

.settings-box:hover {
    border-color: var(--primary-300);
    background: rgba(235, 245, 255, 0.55);
    box-shadow: 0 4px 12px rgba(28, 100, 242, 0.08);
    transform: translateY(-2px);
}

.settings-box .settings-icon-wrap {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: var(--primary-050);
    transition: background 0.25s ease;
}

.settings-box:hover .settings-icon-wrap {
    background: var(--primary-100);
}

.settings-box .settings-cardIcon {
    height: 24px;
}

.settings-box:hover .settings-cardIcon {
    transform: scale(1.08);
}

.settings-box .settings-tile-label {
    letter-spacing: 0.02em;
}

.settings-section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5px;
    height: 70%;
    background: var(--primary-400);
    border-radius: 4px;
}

.settings-box-disabled {
    cursor: not-allowed;
    position: relative;
}

.settings-box-disabled .plan-badge {
    background: var(--Indigo-200);
    border-radius: 0 12px 0 8px;
    letter-spacing: 0.04em;
}

.settings-box-disabled .plan-overlay {
    inset: 0;
    background: rgba(255, 255, 255, 0.97);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.settings-box-disabled:hover .plan-overlay {
    opacity: 1;
    visibility: visible;
}

.toggle-menu-icon {
    font-size: 22px;
    position: absolute;
    top: 20px;
    left: 25px;
}

.nav-back i {
    background: #fff;
    padding: 4px;
    font-size: 12px;
    margin-right: 10px;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 3px;
    line-height: 22px;
    border: 1px solid #e2e2e2;
}

.settings-message-box {
    color: #212529;
    padding: 10px;
    background-color: #fff9ea;
    border: solid 1px #dfd8c2;
    border-radius: 8px;
    font-size: 13px;
    line-height: 17px;
    margin-bottom: 1rem;
    overflow: hidden;
    position: relative;
}

.settings-message-box.collapsed {
    max-height: 50px;
}

.settings-message-box.collapsed::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    background: rgb(255 249 234 / 85%);
    height: 20px;
}

.settings-message-box-btn {
    font-size: 13px;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
}

.settings-message-box .got-it {
    color: #212529;
    border: 1px solid #212529;
}

.settings-message-box .download-btn {
    color: #fff;
}

.bg-light-yellow {
    background-color: #fff9ea !important;
}

.btn-float-end {
    position: absolute;
    top: 21px;
    right: 0;
    background: #eee;
}

.btn-float-end:hover {
    position: absolute;
    top: 21px;
    right: 0;
    background: #e5e5e5;
}

.datepicker-input {
    background-image: url("../images/icons/calendar_icon.svg");
    background-repeat: no-repeat;
    background-position: 97% center;
}

.custom-file-upload-btn {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.iti {
    width: 100%;
}

.unit-float {
    position: absolute;
    right: 15px;
    top: 30px;
}

.geofencing-map {
    border: 1px solid #ced4da;
    min-height: 300px;
    overflow: hidden;
    border-radius: .375rem;
}

.float-end-select {
    position: absolute;
    top: 21px;
    right: 0;
}

.choices {
    margin-bottom: 0px !important;
}

.nav-tabs .nav-link {
    color: #495057;
}

.jstree-section {
    height: 280px;
    overflow-y: auto;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    padding: 10px;
    background: #fff;
    width: 100%;
}

.new-template-wrapper .section-heading {
    min-height: 2.5rem;
}

.doc-preview-wrapper .doc-preview-no-doc {
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-uploadsection:hover {
    background: #eee;
}

.d-item-flex {
    display: flex;
}

.topup-desp {
    text-align: left;
    position: absolute;
    width: 260px;
    top: 55px;
    right: 0px;
    padding: 15px;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.topup-desp::after {
    right: 30px;
    top: -20px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-width: 10px;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #dddddd;
}

.topup-desp .desp-content {
    line-height: 20px;
    font-size: 14px;
}

.box-shadow-1 {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.theme-group {
    display: flex;
}

.theme-group .custom-coBrand {
    color: #fff;
    padding: 5px;
    position: relative;
    display: inline-block;
    border-radius: 4px;
    margin: 0px 5px 0px 0px;
    height: 35px;
    min-width: 50px;
    text-align: center;
    cursor: pointer;
}

.theme-group .custom-coBrand i {
    font-size: 18px;
    font-weight: 100;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 12;
    display: none;
}

.theme-group input {
    visibility: hidden;
}

.lbldefault {
    background: #fcd9bd;
    border: 1px solid #fcd9bd;
    color: #1c64f2 !important;
}

.lblblue {
    background: #0034ac;
}

.lblpurple {
    background: #564aa3;
}

.lblred {
    background: #ec2121;
}

.lblgreen {
    background: #2b957a;
}

.lblmultiple {
    background: url("../images/lblmultiple-bg.jpg") no-repeat center center;
    height: 100px;
    background-size: auto 100px;
    display: inline-block;
}

.ems-cobrandingColor {
    width: 30px;
    height: 30px;
}

.theme-body .form-note {
    font-size: 13px;
    vertical-align: middle;
    margin-left: 5px;
    line-height: 18px;
    color: #888;
    margin: 10px 0px;
}

.theme-body .orboxH {
    border-bottom: 1px solid #eee;
    position: relative;
    margin-bottom: 25px;
    padding-bottom: 25px;
    width: 240px;
}

.theme-body .orboxH .or {
    font-size: 11px;
    position: absolute;
    top: 0px;
    left: 42%;
    height: 28px;
    background: #eee;
    color: #333;
    padding: 5px 7px;
    display: block;
    line-height: 20px;
    text-align: center;
    margin: 10px;
    border-radius: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-body .image-url {
    margin: 10px 0px;
}

.customize-theme {
    display: inline-block;
    vertical-align: top;
}

.customize-theme a.btn {
    background: #fff;
    padding: 6px 12px;
    border: 1px solid #e2e2e2;
}

.customize-theme a.btn:hover {
    box-shadow: none;
    background: #f9f9f9;
}

.preview-theme h3 {
    text-align: center;
    font-size: 16px;
    margin: 0px;
}

.preview-image {
    margin-top: 10px;
    position: relative;
    max-width: 660px;
}

.preview-image .pv-img {
    border: 1px solid #e2e2e2;
    width: 100%;
}

.theme-body {
    height: 380px;
}

.preview-content {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

.preview-content .header {
    min-height: 42px;
    background: #fcd9bd;
    z-index: 0;
}

.preview-content .ems-reportSidebar {
    position: absolute;
    top: 56px;
    width: 150px;
    min-height: 318px;
    max-height: 318px;
}

.preview-content .ems-coBrandingSidebar {
    z-index: 1;
}

.preview-content .ems-reportsMainContent {
    top: 56px;
}

.preview-content .ems-contentBody {
    min-height: 318px;
    max-height: 318px;
}

.preview-content .ems-textInput::placeholder {
    font-size: 8px;
}

.preview-content .header .header-text {
    color: #000;
    display: inline-block;
    margin-left: 75px;
    font-size: 11px;
}

.preview-content .header .header-text i {
    font-size: 11px;
}

.preview-content .header .header-text span {
    margin-right: 20px;
}

.preview-content .menu-sidebar {
    position: relative;
    width: 27%;
    height: 100%;
}

.preview-content .wf-parent.open .folder-header {
    background: #f8fafc;
}

.preview-content .wf-parent.open .folder-header i {
    font-size: 10px;
    margin-right: 5px;
}

.preview-content .wf-parent.open .folder-header span.fa-solid {
    float: right;
    margin-top: 5px;
}

.preview-content .button {
    font-size: 10px;
    background: #1c64f2;
    color: #fff;
    width: 70px;
    display: block;
    text-align: center;
    border-radius: 4px;
    position: absolute;
    right: 5%;
    bottom: 8%;
}

.preview-content .days {
    position: absolute;
    left: 50%;
    top: 7%;
}

.preview-content .days span {
    background: #1c64f2;
    color: #fff;
    width: 16px;
    border-radius: 12px;
    margin: 0px 1px;
    font-size: 7px;
    display: inline-block;
    text-align: center;
    line-height: 14px;
}

.preview-content .storage {
    position: absolute;
    left: 8%;
    top: 17%;
    font-size: 9px;
    color: #0034ac;
}

.preview-content .menu-hlink {
    position: absolute;
    right: 13.5%;
    top: 26%;
    font-size: 6px;
    color: #0034ac;
}

.preview-content .menu-selected {
    position: absolute;
    left: 12%;
    top: 37.5%;
    font-size: 7px;
    color: #0034ac;
}

/* Co-branding Gateway Preview - Signing Page Layout */
    .preview-content.gateway-preview {
        display: flex;
        flex-direction: column;
        background: linear-gradient(180deg, #FFF8F1 0%, #fdfbfb 100%);
    }

.preview-content.gateway-preview .header {
    position: relative;
    flex-shrink: 0;
}

.preview-content .cobranding-info-banner {
    flex-shrink: 0;
}

.preview-content .cobranding-doc-toolbar {
    flex-shrink: 0;
    margin-top: 56px;
}

.preview-content .cobranding-doc-viewer {
    flex: 1;
    min-height: 0;
}

.sgc-maxh-pdf {
    max-height: 248px;
}

.sgc-pdfcontainer {
    aspect-ratio: 210/297;
}

.preview-content .cobranding-footer-bar {
    flex-shrink: 0;
}

.customCobranding tbody tr td:not(:first-child), .customCobranding thead tr th:not(:first-child) {
    text-align: center;
    width: 30%;
}

.customCobranding tbody tr td:first-child, .customCobranding thead tr th:first-child {
    width: 40%;
}

.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner, .sp-replacer {
    border-radius: 0.25rem;
}

.sp-input-container {
    display: flex;
}

.customCobranding tbody tr td .sp-replacer:last-child {
    display: none;
}

.signature-appearance-img {
    min-height: 60px;
    max-height: 60px;
    max-width: 100%;
}

.sign-tick-icon {
    background-color: lightgray;
}

.sign-tick-icon.sign-default {
    background-color: green;
}

.btn-custom-sm {
    padding: 6px 12px;
    font-size: 12px;
    line-height: 12px;
    cursor: pointer;
}

.setup-template-section {
    display: none;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    position: absolute;
    min-width: 275px;
    background: #fff;
    z-index: 10;
}

.close-setup-template {
    position: absolute;
    top: -8px;
    right: -8px;
}

.close-templates-search {
    position: absolute;
    top: 10px;
    right: 10px;
}

/*
    ==================== FOOTER ====================
*/

.ems-footer__left-wrap {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ems-footer__left-wrap p {
    color: var(--neutral-500);
}

.ems-footer__right-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.ems-footer-sub {
    display: grid;
    gap: 20px;
    padding-block: 1.8rem;
    border-top: 1px solid var(--neutral-300);
    justify-content: center;
}

.ems-footer-contactinfo {
    display: inline-flex;
    flex-direction: column;
    gap: 15px;
}

.ems-contactlink {
    text-decoration: none;
    color: var(--neutral-700);
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.ems-footer-container {
    padding-block: 2rem;
}

.ems-footermenu-list {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.ems-footermenu-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ems-footermenu-heading {
    color: var(--neutral-400);
}

.ems-footermenu-link {
    text-decoration: none;
    color: var(--neutral-900);
    font-weight: var(--fnt-medium);
    font-size: 14px;
    line-height: 19.6px;
    display: inline-flex;
}

.ems-footermenu-link:is(:hover, :focus) {
    color: var(--primary-700);
    transition: color 0.3s ease-in-out;
}

:is(.ems-mobilenav, .ems-footer-socialnav) {
    display: flex;
    gap: 15px;
    align-items: center;
}

.ems-banner__heading {
    color: var(--neutral-900);
}

.ems-banner__des {
    color: var(--neutral-600);
}

.ems-illustrationh337 {
    height: 224px !important;
}

.ems-btns-group {
    display: flex;
    gap: 1.2rem;
    margin-top: 2rem;
}

.ems-pricing-section {
    background: linear-gradient(180deg, #fff8f1 0%, #fff8f1 20.4%, rgba(255, 248, 241, 0) 36.04%);
}

.ems-pricing-section.tab-1 {
    background: linear-gradient(180deg, #fff8f1 0%, rgba(255, 248, 241, 0.7) 39.39%, rgba(255, 248, 241, 0) 94.92%) !important;
}

.ems-pricing-tabs {
    padding: 4px;
    border-radius: 12px;
    background-color: #ffffff;
    display: inline-flex;
    border: 1px solid var(--neutral-200);
}

.ems-pricing-tabs .nav-link {
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    text-align: center;
    text-decoration-skip-ink: none;
    color: var(--neutral-600);
    padding: 8px 12px;
    border-radius: 12px;
    min-width: 125px;
}

.ems-pricing-tabs .nav-link.active {
    background-color: var(--secondary-400);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1019607843);
}

.ems-toggle-btn {
    width: 60px;
    padding: 3px;
    height: 32px;
    border: 1px solid var(--primary-600);
    border-radius: 20px;
    position: relative;
}

.ems-toggle-btn .ems-toogle-radio {
    opacity: 0;
    position: absolute;
}

.ems-toggle-btn .ems-toogle-radio:checked ~ .ems-toogle-check {
    right: 3px;
    left: auto;
}

.ems-toggle-btn .ems-toogle-check {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 20px;
    background-color: var(--primary-600);
    left: 3px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    display: inline-block;
}

.ems-save-tag {
    padding: 2px 10px;
    border: 1px solid var(--secondary-200);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16.8px;
    text-decoration-skip-ink: none;
    color: var(--secondary-600);
    text-align: center;
    background-color: var(--secondary-100);
}

.ems-save-tag--billedYearlly {
    margin-left: 6px;
}

.ems-subscribePlans__item {
    margin-bottom: 20px;
}

.ems-subscribePlans__item:last-child {
    margin-bottom: 0;
}

.ems-subscribePlan {
    padding: 24px 20px;
    background-color: #ffffff;
    border: 1px solid var(--primary-100);
    border-radius: 20px;
}

.ems-subscribePlan__head {
    margin-bottom: 28px;
}

.ems-subscribePlan__price {
    margin-bottom: 40px;
}

.ems-PopularTag {
    padding: 2px 10px;
    border: 1px solid var(--purple-300);
    background-color: var(--purple-200);
    border-radius: 20px;
    color: var(--purple-600);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16.8px;
    text-align: center;
}

.ems-plancategery {
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    text-align: left;
    color: var(--neutral-900);
}

.icon-right-mark-cm {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #feecdc;
}

.ems-plan-ovrall__item {
    margin-bottom: 8px;
}

.ems-plan-ovrall__item:last-child {
    margin-bottom: 0;
}

.ems-staticTabPlan {
    padding: 40px 16px 0;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100% - 48px);
}

.ems-staticTabPlan .pos-T {
    position: absolute;
    top: 10px;
    left: 16px;
}

.ems-staticTabPlan__price {
    font-size: 24px;
    line-height: 33.6px;
    letter-spacing: -0.02em;
}

.ems-staticTabPlan-text {
    font-size: 12px;
    font-weight: 700;
    line-height: 16.8px;
    letter-spacing: -0.02em;
}

.ems-pos-tabTitle {
    z-index: 99;
    min-width: 135px;
    max-width: 135px;
}

.ems-pos-tabTitle h3 {
    font-size: 16px;
    font-weight: 700;
    line-height: 22.4px;
    letter-spacing: -0.02em;
}

.ems-accordion-single {
    border-bottom: 1px solid #efefef;
    margin-top: 10px;
}

.ems-accordion-single-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 22.4px;
    cursor: pointer;
    color: #111928;
    position: relative;
    padding-right: 20px;
}

.ems-accordion-single-title::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transition: all 0.2s ease-in-out;
    width: 8px;
    height: 8px;
    border-top: 2px solid #111928;
    border-right: 2px solid #111928;
    transform: translateY(-50%) rotate(135deg);
}

.ems-accordion-single-content {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
    padding-top: 0;
    padding-right: 20px;
}

.ems-accordion-single-content p,
.ems-accordion-single-content a {
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
}

.ems-accordion-single-content a {
    color: #1c64f2;
    text-decoration: underline;
}

.ems-accordion-single__item {
    padding: 20px;
    border: 1px solid #dcd7fe;
    background-color: #f6f5ff;
    border-radius: 10px;
    margin-bottom: 26px;
}

.ems-accordion-single__item:last-child {
    margin-bottom: 0;
}

.ems-accordion-single__item.is-open .ems-accordion-single-content {
    height: auto;
    padding-top: 12px;
}

.ems-accordion-single__item.is-open .ems-accordion-single-title::after {
    transform: translateY(-50%) rotate(315deg);
}

.ems-price-accSec {
    padding: 40px 0;
    background: linear-gradient(180.2deg, #fff8f1 -37.81%, rgba(255, 248, 241, 0) 50.01%);
}

.ems-enterprise-planTitle {
    font-weight: 700;
    font-size: 18px;
    line-height: 25.2px;
}

/*
    ==================== TABLES ====================
*/

.ems-table-1 {
    overflow-x: auto;
}

.ems-table-1 thead {
    background: var(--secondary-300);
    position: sticky;
    top: 0;
    z-index: 99;
}

.ems-table-1 table {
    border-collapse: separate;
    border-spacing: 0 1em;
    margin-top: -16px;
}

.ems-table-1 th {
    min-width: 215px;
    padding: 12px 0;
    white-space: nowrap;
}

.ems-table-1 th .thead {
    padding: 3px 12px;
    border-right: 1px solid var(--secondary-200);
    font-size: 12px;
    font-weight: 700;
    line-height: 16.8px;
    text-align: left;
    text-decoration-skip-ink: none;
    color: var(--neutral-900);
}

.ems-table-1 th:first-of-type {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.ems-table-1 th:last-of-type {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.ems-table-1 th:last-of-type .thead {
    border-right: none;
}

.ems-table-1 tbody td {
    padding: 16px 0;
    background: var(--secondary-050);
    vertical-align: top;
    border: 1px solid var(--secondary-200);
    border-left: none;
    border-right: none;
    position: relative;
}

.ems-table-1 tbody td::after {
    content: "";
    position: absolute;
    width: 1px;
    height: calc(100% - 32px);
    top: 16px;
    right: 0;
    background: var(--secondary-200);
}

.ems-table-1 tbody td:first-of-type {
    border-left: 1px solid var(--secondary-200);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.ems-table-1 tbody td:last-of-type {
    border-right: 1px solid var(--secondary-200);
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.ems-table-1 tbody td:last-of-type::after {
    display: none;
}

.ems-table-1 tbody td .t-cell {
    padding: 0 12px;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: left;
    text-decoration-skip-ink: none;
    color: var(--neutral-900);
}

.ems-table-1::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.ems-table-1::-webkit-scrollbar-track,
.ems-table-2::-webkit-scrollbar-track,
.product-comparison-table::-webkit-scrollbar-track,
.ems-staticTabTypelist::-webkit-scrollbar-track {
    background: var(--secondary-100);
    border-radius: 20px;
}

.ems-table-1::-webkit-scrollbar-thumb {
    background: var(--secondary-400);
    border-radius: 20px;
}

.ems-table-1::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-400);
}

.product-comparison-table {
    position: relative;
    border-radius: 20px;
}

.product-comparison-table table {
    margin: auto;
    border-collapse: separate;
    border-spacing: 0;
}

.product-comparison-table th {
    position: sticky;
    left: 0;
}

.product-comparison-table td {
    padding: 16px;
    color: #374151;
    font-size: 12px;
    font-weight: 500;
    background: #ffffff;
}

.product-comparison-table td:first-child {
    border-left: 4px solid #F8B4D9;
    font-weight: 600;
    color: #111928;
    position: sticky;
    left: 0;
    white-space: pre-wrap;
    text-overflow: ellipsis;
}

.product-comparison-table td span {
    position: relative;
    z-index: 9;
}

.product-comparison-table td .icon-right-mark,
.product-comparison-table td .icon-cross-mark {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-comparison-table td .icon-right-mark {
    background: #FCD9BD;
}

.product-comparison-table td .icon-cross-mark {
    background: #FBD5D5;
}

.product-comparison-table tr:nth-child(odd) td {
    background: #F9FAFB;
}

.product-comparison-table tr:first-child td {
    border-top: 1px solid var(--neutral-200);
}

.product-comparison-table tr:first-child td:first-child {
    border: none;
    background: #ffffff;
}

                .product-comparison-table tr:first-child td:first-child::after {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: calc(100% + 1px);
                    background: #F9FAFB;
                    border-top-left-radius: 20px;
                    border-left: 4px solid #F8B4D9;
                    border-top: 1px solid var(--neutral-200);
                    left: 0;
                    top: -1px;
                }

            .product-comparison-table tr:first-child td:last-child {
                border-top-right-radius: 20px;
            }

        .product-comparison-table tr:last-child td {
            border-bottom: 1px solid var(--neutral-200);
        }

            .product-comparison-table tr:last-child td:first-child {
                border: none;
                background: #ffffff;
            }

                .product-comparison-table tr:last-child td:first-child::after {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: calc(100% + 1px);
                    border-bottom-left-radius: 20px;
                    border-left: 4px solid #F8B4D9;
                    border-bottom: 1px solid var(--neutral-200);
                    left: 0;
                    bottom: -1px;
                }

        .product-comparison-table tr:last-child:not(:nth-child(odd)) td:first-child::after {
            background: #ffffff;
        }

        .product-comparison-table tr:last-child:not(:nth-child(even)) td:first-child::after {
            background: #F9FAFB;
        }

        .product-comparison-table tr td.selected {
            background: #FEECDC;
        }

            .product-comparison-table tr td.selected .icon-right-mark {
                background: #FF8A4C;
            }

        .product-comparison-table tr td:last-child {
            border-right: 1px solid var(--neutral-200);
        }

        .product-comparison-table .ems-title-tbody td {
            background: none;
            border: none;
            padding: 0;
        }

            .product-comparison-table .ems-title-tbody td::after {
                display: none;
            }

    .product-comparison-table--pricing td:not(:first-child) * {
        margin: auto;
    }

    .product-comparison-table--SelectPlans td {
        background: none !important;
        border: none !important;
    }

    .product-comparison-table--SelectPlans *::after {
        display: none;
    }

    .ems-staticTabTypelist .ems-staticTabType {
        padding: 16px;
        background: var(--neutral-100);
        display: flex;
        align-items: center;
    }

        .ems-staticTabTypelist .ems-staticTabType span {
            font-size: 18px;
            font-weight: 600;
            color: var(--neutral-900);
            display: inline-block;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .ems-staticTabTypelist__item {
        cursor: pointer;
        position: relative;
        min-width: 160px;
        max-width: 160px;
    }

        .ems-staticTabTypelist__item input {
            left: 0;
            opacity: 0;
        }

        .ems-staticTabTypelist__item:first-child .ems-staticTabType {
            border-top-left-radius: 20px;
        }

        .ems-staticTabTypelist__item:last-child .ems-staticTabType {
            border-top-right-radius: 20px;
        }

        .ems-staticTabTypelist__item.selected .ems-staticTabType {
            background: #FEECDC;
        }

    .ems-product-comparison-nav {
        margin: 0 auto;
        padding: 6px;
        border: 1px solid #A4CAFE;
        box-shadow: 0px 0px 11px 0px rgba(28, 100, 242, 0.16);
        border-radius: 80px;
        text-align: center;
    }

        .ems-product-comparison-nav.active {
            position: fixed;
            bottom: 20px;
            left: 50%;
            white-space: nowrap;
            z-index: 99;
            background: white;
            transform: translateX(-50%);
        }

    .ems-product-comparison-nav__item {
        padding: 10px;
        border-radius: 80px;
        font-size: 12px;
        font-weight: 500;
        line-height: 16.8px;
        background: none;
        border: none;
    }

        .ems-product-comparison-nav__item.active {
            box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
            background: #C3DDFD;
            color: #1C64F2;
        }

    .ems-cmTabtitle {
        font-size: 12px;
        font-weight: 600;
        line-height: 16.8px;
    }

    .ems-emtyLine {
        width: 12px;
        height: 2px;
        background: var(--neutral-400);
        border-radius: 20px;
        display: block;
        z-index: 0;
        position: static;
    }

    .ems-table-2 {
        border: 1px solid #dcd7fe;
        border-radius: 12px;
        overflow: hidden;
    }

        .ems-table-2 table th {
            font-size: 12px;
            font-weight: 700;
            line-height: 16.8px;
            color: #111928;
            padding: 11px 24px;
            box-shadow: 0px 20px 60px -3.75px rgba(0, 0, 0, 0.02);
            background: #cabffd;
        }

            .ems-table-2 table th:last-child::after {
                content: "";
                position: absolute;
                width: 1px;
                right: 0;
                height: 100%;
                background: #dcd7fe;
                border-top-right-radius: 12px;
            }

        .ems-table-2 table td {
            font-size: 12px;
            line-height: 16.8px;
            color: #111928;
            background: #f6f5ff;
            border-bottom: 1px solid #dcd7fe;
            padding: 17px 24px;
            font-weight: 400;
        }

            .ems-table-2 table td:last-child::after {
                content: "";
                position: absolute;
                width: 1px;
                right: 0;
                top: 0;
                height: 100%;
                background: #dcd7fe;
                border-top-right-radius: 12px;
            }

            .ems-table-2 table td:first-child,
            .ems-table-2 table td:first-child * {
                font-weight: 600;
            }

        .ems-table-2 table a {
            font-size: 12px;
            line-height: 16.8px;
            color: #111928;
        }

        .ems-table-2 table tbody tr:last-child td {
            border-bottom: none;
            border-bottom-right-radius: 12px;
        }

            .ems-table-2 table tbody tr:last-child td::after {
                border-bottom-right-radius: 12px;
            }

    .ems-table-2--serviceProvider th {
        min-width: 150px;
    }

        .ems-table-2--serviceProvider th:first-child {
            min-width: 250px;
        }

        .ems-table-2--serviceProvider th:nth-child(2) {
            min-width: 208px;
        }

    .ems-table-3 table {
        border-collapse: separate;
        border-spacing: 0 16px;
    }

        .ems-table-3 table thead {
            box-shadow: 0px 20px 60px -3.75px rgba(0, 0, 0, 0.02);
        }

        .ems-table-3 table th {
            font-size: 12px;
            font-weight: 700;
            line-height: 16.8px;
            color: #111928;
            padding: 20px 12px;
            background: #CABFFD;
            position: relative;
        }

            .ems-table-3 table th::after {
                content: "";
                position: absolute;
                top: 8px;
                right: 0;
                width: 1px;
                height: calc(100% - 16px);
                background: #DCD7FE;
            }

            .ems-table-3 table th:first-child {
                border-top-left-radius: 12px;
                border-bottom-left-radius: 12px;
            }

            .ems-table-3 table th:last-child {
                border-top-right-radius: 12px;
                border-bottom-right-radius: 12px;
            }

                .ems-table-3 table th:last-child::after {
                    display: none;
                }

        .ems-table-3 table tbody tr td {
            font-size: 12px;
            font-weight: 400;
            line-height: 16.8px;
            padding: 16px 12px;
            background: #F6F5FF;
            border: 1px solid #DCD7FE;
            border-right: none;
            border-left: none;
            position: relative;
        }

            .ems-table-3 table tbody tr td::after {
                content: "";
                position: absolute;
                top: 12px;
                right: 0;
                width: 1px;
                height: calc(100% - 24px);
                background: #DCD7FE;
            }

            .ems-table-3 table tbody tr td:first-child {
                font-weight: 600;
                border-left: 1px solid #DCD7FE;
                border-top-left-radius: 12px;
                border-bottom-left-radius: 12px;
            }

            .ems-table-3 table tbody tr td:last-child {
                border-right: 1px solid #DCD7FE;
                border-top-right-radius: 12px;
                border-bottom-right-radius: 12px;
            }

                .ems-table-3 table tbody tr td:last-child::after {
                    display: none;
                }

    .ems-table-wrapper .datatable-wrapper {
        padding-bottom: 0;
    }

    :is(.ems-table, .ems-reportsTable) {
        font-size: 0.875rem;
    }

        :is(.ems-table, .ems-reportsTable) thead th {
            padding: 1rem 0.5rem;
            font-weight: 600;
            text-wrap: nowrap;
            text-align: center;
            border-bottom: 1px solid #e9ecef !important;
        }

    .ems-table.table-bordered.dataTable :is(th, td) {
        border-color: #e9ecef;
    }

    .ems-table.table-bordered.dataTable td {
        border-bottom-width: 1px !important;
        color: #334155;
        vertical-align: middle;
    }

    .ems-table.table-striped > tbody > tr:nth-of-type(odd) > * {
        --bs-table-bg-type: rgba(0, 0, 0, 0.01) !important;
        background-color: rgba(0, 0, 0, 0.01) !important;
    }

    table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
        box-shadow: none !important;
    }

    .ems-table thead th:first-child {
        border-top-left-radius: 12px;
    }

    .ems-table thead th:first-child, .ems-table tbody td:first-child {
        border-left: unset;
    }

    .ems-table thead th:last-child, .ems-table tbody td:last-child {
        border-right: unset;
    }

    .ems-table tbody, td, tfoot, th, thead, tr {
        border-color: #e9ecef;
    }

    .ems-table thead th:last-child {
        border-top-right-radius: 12px;
    }

    .ems-table .form-check {
        padding-left: 0;
        line-height: 23px;
        margin: 0;
    }

        .ems-table .form-check .form-check-input {
            float: none;
            margin: 0 auto;
            width: 1.2em;
            height: 1.2em;
            vertical-align: middle;
        }

    .ems-reportsTable > tbody > tr > * {
        padding: 0.8rem;
        font-size: 13px;
        text-wrap: nowrap;
    }

    .ems-table.table-bordered > :not(caption) > * {
        border: unset !important;
    }
    /* ------ Data tables ------ */
    table.dataTable {
        margin-block: 0 !important;
    }

    .dataTables_scrollHeadInner table.dataTable {
         margin-top: 0 !important;
    }

    .dt-container > div {
        margin-top: 0 !important;
    }

    .dt-layout-table {
        margin-top: 0 !important;
    }

    .dt-layout-full {
        padding: 0 !important;
    }

    div.dataTables_wrapper div.dataTables_info {
        padding-top: 0;
    }

    .ems-table-wrapper .dataTables_info {
        font-size: 0.875rem;
    }

    .ems-table-wrapper .page-link {
        font-size: 0.75rem;
        font-weight: 500;
    }

    .ems-table-wrapper .dataTables_length select {
        border: 1px solid var(--ems-input-border-color);
        box-shadow: var(--ems-shadow-xs);
        padding-block: 0.375rem;
        border-radius: 0.5rem;
        color: var(--ems-input-color);
        line-height: 1;
        font-size: 0.75rem;
    }

    .ems-table-wrapper .dataTables_length label {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .ems-table-wrapper .dataTables_paginate .pagination {
        margin-bottom: 0;
    }

    .ems-table-wrapper table.table-bordered.dataTable thead tr:first-child th {
        text-align: center;
    }
/*
    ==================== TABS ====================
*/
.ems-tabs.nav-underline .nav-link, .ems-selectedOption {
    color: var(--black-900);
    padding-inline: 0.5rem;
    border: 0;
    font-size: 0.875rem;
    background-color: transparent;
    position: relative;
    display: inline-block;
    text-wrap: nowrap;
}

.ems-tabs.nav-underline .nav-link.active, .nav-underline .show > .nav-link, .ems-selectedOption.active {
    color: var(--primary-600);
    font-weight: 600;
}

.ems-tabs.nav-underline .nav-link.active::after, .nav-underline .show > .nav-link::after, .ems-selectedOption.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--primary-600);
    border-radius: 12px;
}

.status-count-wrapper {
    background-color: var(--primary-100);
    min-width: 24px;
    display: inline-block;
    color: var(--primary-600);
    font-weight: 600;
}

/* ------ Custom Offcanvas & modal ------ */

.ems-offcanvas {
    margin: 12px;
    border-radius: 1rem;
    z-index: 1060 !important;
}

.offcanvas-backdrop {
    z-index: 1055 !important;
}

.ems-modal .modal-content {
    border-radius: 1rem;
}

.ems-modal .modal-body {
    min-height: 200px;
}

.ems-offcanvas .offcanvas-header {
    position: relative;
    margin-top: 4px;
}

.ems-offcanvas .offcanvas-header::after {
    content: "";
    height: 0.005rem;
    width: calc(100% - 32px);
    background-color: var(--ems-input-border-color);
    position: absolute;
    left: 50%;
    bottom: 1px;
    transform: translateX(-50%);
}

.ems-offcanvas .offcanvas-title {
    font-size: 18px;
}

.ems-offcanvas .offcanvas-header .btn-close, .ems-modal .modal-header .btn-close {
    font-size: 0.625rem;
    border: 1px solid #000;
    border-radius: 50%;
    margin-right: 0;
}

.ems-offcanvas .ems-offcanvas-footer {
    position: relative;
}

.ems-offcanvas .ems-offcanvas-footer::before {
    content: "";
    height: 0.005rem;
    width: calc(100% - 32px);
    background-color: var(--ems-input-border-color);
    position: absolute;
    left: 50%;
    top: 1px;
    transform: translateX(-50%);
}

.ems-offcanvas-xl, .w-sessionTimeOutModal {
    width: calc(100% - 24px) !important;
}

.ems-h-offcanvasBody {
    min-height: calc(var(--app-vh) - 150px);
    max-height: calc(var(--app-vh) - 150px);
}

.spinner-border-xs {
    --bs-spinner-width: 10px;
    --bs-spinner-height: 10px;
    --bs-spinner-border-width: 0.2em;
}

.ems-spinner-border-sm {
    --bs-spinner-width: 0.8rem;
    --bs-spinner-height: 0.8rem;
    --bs-spinner-border-width: 0.2em;
}

/*
    ==================== MAIN CSS ====================
*/

    .ems-documentListWrap {
        max-height: calc(var(--app-vh) - 176px);
    }

    .sidebar-body-section.documents-list {
        max-height: 94px;
        overflow-y: auto;
    }

    .documents-body.active, .ems-documentList.active {
        background: var(--primary-050);
        border-color: rgba(13,110,253, 0.25) !important;
        color: var(--ems-color-primary);
    }

    .documents-body .document-info .document-info-number {
        background-color: var(--primary-800);
        width: 24px;
        height: 24px;
    }

    .signatories-section {
        margin: 0px;
        padding: 0px;
        position: relative;
    }

        .signatories-section ul {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

            .signatories-section ul li {
                margin: 0px;
                clear: both;
                cursor: pointer;
                position: relative;
            }

                .signatories-section ul li label {
                    display: block;
                    padding: 2px 5px 4px;
                    border-top: 1px dotted #e5e5e5;
                }

                .signatories-section ul li .details {
                    display: block;
                    padding-left: 30px;
                    line-height: 14px;
                    text-transform: capitalize;
                    font-size: 13px;
                }

                    .signatories-section ul li .details .mail {
                        font-size: 12px;
                        color: #666;
                        display: block;
                        text-transform: none;
                        width: 141px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                .signatories-section ul li:hover {
                    background: #f9f9f9;
                }

        .signatories-section li:hover {
            background: #0060c0 !important;
            color: #fff !important;
        }

            .signatories-section li:hover .mail {
                color: #fff !important;
            }

            .signatories-section li:hover .user-ico {
                background: #fff;
            }

        .signatories-section ul li .chk-signer {
            position: absolute;
            right: 10px;
            top: 5px;
        }

        .signatories-section .form-signer {
            width: 190px;
            margin-right: 3px;
            display: inline-block;
            vertical-align: middle;
        }

        .signatories-section .btn {
            font-size: 20px;
            font-weight: bold;
            padding: 0px 10px;
            vertical-align: middle;
            line-height: 1.4;
        }

        .signatories-section .profileScroll {
            height: 180px;
        }

    .controls-body-section .labelField, .controls-body-section .qr-labelField {
        display: flex;
        justify-content: space-between;
        border: 1px solid var(--sdrag-border);
        width: 49%;
    }

    .controls-body-section .drag-icon {
        gap: 2px;
    }

    .uploaded-document-preview {
        min-height: calc(var(--app-vh) - 183px);
        max-height: calc(var(--app-vh) - 183px);
    }

        .uploaded-document-preview .documentVisual {
            text-align: center;
        }

            .uploaded-document-preview .documentVisual canvas {
                position: relative;
                border-radius: 0.25rem;
            }

    .ems-docListNum {
        min-width: 24px;
        max-width: 24px;
        aspect-ratio: 1 / 1;
        background-color: var(--primary-800);
    }

.shepherd-header {
    display: none;
}

.shepherd-modal-overlay-container, .shepherd-element {
    z-index: 1032 !important;
}

.shepherd-enabled.shepherd-element {
    border-radius: 0.75rem !important;
}

/* ------------------ Preview Page - Signatories Background & Border Colors ------------------ */
.signatories-section {
    min-height: auto !important;
}

.sign-font-option .select-sign-radio.selected,
.sign-font-option .select-sign-radio.selected:hover,
.ms-sign-font-option .select-sign-radio.selected,
.ms-sign-font-option .select-sign-radio.selected:hover,
.sign-font-seal-option .select-sign-radio.selected,
.sign-font-seal-option .select-sign-radio.selected:hover,
.sign-font-optionIn .select-sign-radio.selected,
.sign-font-optionIn .select-sign-radio.selected:hover,
.initialSign-font-option .select-sign-radio.selected,
.initialSign-font-option .select-sign-radio.selected:hover {
    border-color: var(--primary-300) !important;
}

.sign-font-option .select-sign-radio,
.ms-sign-font-option .select-sign-radio,
.initialSign-font-option .select-sign-radio,
.sign-font-seal-option .select-sign-radio,
.sign-font-optionIn .select-sign-radio {
    height: 80px;
}

    .sign-font-option .select-sign-radio.selected:before,
    .ms-sign-font-option .select-sign-radio.selected:before,
    .initialSign-font-option .select-sign-radio.selected:before,
    .sign-font-seal-option .select-sign-radio.selected:before,
    .sign-font-optionIn .select-sign-radio.selected:before {
        content: '\f00c';
        font-family: 'Font Awesome 7 Free';
        font-weight: 900;
        background: var(--primary-600);
        border: 1px solid var(--primary-600);
        color: #fff;
        font-size: 0.625rem;
        display: inline-block;
    }

    .sign-font-option .select-sign-radio:before,
    .ms-sign-font-option .select-sign-radio:before,
    .initialSign-font-option .select-sign-radio:before,
    .sign-font-seal-option .select-sign-radio:before,
    .sign-font-optionIn .select-sign-radio:before {
        content: '';
        background: #fff;
        width: 20px;
        height: 20px;
        border: 1px solid #ddd;
        border-radius: 50%;
        position: absolute;
        top: 30px;
        left: 16px;
        z-index: 12;
        font-size: 12px;
        line-height: 18px;
        color: #fff;
        text-align: center;
    }

    .sign-font-option .select-sign-radio.selected .lbl-signature,
    .ms-sign-font-option .select-sign-radio.selected .lbl-signature,
    .initialSign-font-option .select-sign-radio.selected .lbl-signature,
    .sign-font-seal-option .select-sign-radio.selected .lbl-signature,
    .sign-font-optionIn .select-sign-radio.selected .lbl-signature {
        background: var(--primary-600) !important;
    }

    .sign-font-option .select-sign-radio .lbl-signature,
    .ms-sign-font-option .select-sign-radio .lbl-signature,
    .initialSign-font-option .select-sign-radio .lbl-signature,
    .sign-font-seal-option .select-sign-radio .lbl-signature,
    .sign-font-optionIn .select-sign-radio .lbl-signature {
        top: -9px;
        left: 12px;
    }

    .sign-font-option .select-sign-radio .rdo-signer,
    .ms-sign-font-option .select-sign-radio .rdo-signer,
    .initialSign-font-option .select-sign-radio .rdo-In-signer,
    .sign-font-seal-option .select-sign-radio .rdo-signer,
    .sign-font-optionIn .select-sign-radio .rdo-signer {
        position: absolute;
        left: 18px;
        top: 34px;
    }

    .sign-font-option .select-sign-radio .span-label,
    .ms-sign-font-option .select-sign-radio .span-label,
    .sign-font-optionIn .select-sign-radio .span-label {
        padding-left: 30px;
        overflow: hidden;
    }

        .sign-font-option .select-sign-radio .span-label img,
        .ms-sign-font-option .select-sign-radio .span-label img,
        .sign-font-optionIn .select-sign-radio .span-label img {
            object-fit: contain;
            max-width: 100%;
            max-height: 100%;
            width: auto !important;
            height: auto !important;
        }

    .sign-font-option .select-sign-radio .font-sign,
    .ms-sign-font-option .select-sign-radio .font-sign,
    .initialSign-font-option .select-sign-radio .font-Inl,
    .sign-font-option .select-sign-radio .font-Sealsign,
    .ms-sign-font-option .select-sign-radio .font-Sealsign,
    .sign-font-seal-option .select-sign-radio .font-Sealsign,
    .sign-font-optionIn .select-sign-radio .font-sign {
        height: 100%;
    }

    .sign-penColor {
        width: 32px;
        height: 32px;
    }

    .icon-selectedPenColor {
        font-size: 1rem;
        position: absolute;
        top: 7px;
        left: 5px;
        color: var(--color-white);
    }

    .sign-penColor.lblBlue {
        background: #00008b;
    }

    .sign-penColor.lblRed {
        background: #ff0000;
    }

    .sign-penColor.lblGreen {
        background: #23ab23;
    }

    .signaturePanel {
        height: 230px;
        border: 1px dashed var(--primary-400);
    }

        .signaturePanel canvas {
            margin-inline: 10% !important;
        }

        .signaturePanel:before {
            content: ' ';
            border-bottom: 1px solid var(--primary-400);
            width: 80%;
            margin: 0px 10%;
            position: absolute;
            color: #ccc;
            padding-bottom: 10px;
            bottom: 20%;
            text-align: left;
            font-size: 30px;
            line-height: 30px;
        }

    .ems-uploadedImageHeight {
        max-height: 150px;
    }

    .ems-extPreviewMain {
        top: 67px;
    }

.document-preview-section .dragDiv {
    box-shadow: var(--ems-shadow-sm);
    border-radius: 0.25rem;
    background-color: var(--color-white) !important;
    position: absolute;
}

    .dropped-nonsignature-wrapper {
        display: flex;
        align-items: stretch;
        justify-content: center;
        height: 100%;
    }

    .dropped-nonsignature-wrapper .iti--allow-dropdown input[type="text"] {
        padding-left: 52px !important;
    }

    .dropped-nonsignature-wrapper .dropped-form-control {
        width: 100%;
        height: 100%;
        border: none;
        box-shadow: none;
        border-radius: 0.25rem;
    }

.dropped-control .iti .form-control {
    padding-left: 44px !important;
}

    .documentContainment {
        position: relative;
    }

    .mh-uploaded-document-preview {
        min-height: 430px;
    }

    .document-preview-section .divSettings {
        top: -30px;
        border: 1px solid var(--sdrag-border);
    }

    .dragDiv input[disabled],
    .dragDiv select[disabled],
    .dragDiv textarea[disabled] {
        pointer-events: none;
    }

    .document-preview-section .text-input::placeholder {
        font-size: 0.625rem;
    }

    .controls-section .qr-labelField {
        background-color: #e1e3e5 !important;
        border-color: #495057 !important;
        color: #495057 !important;
        fill: #495057 !important;
        stroke: #495057 !important;
    }

    .dragDivOut {
        width: 180px;
        cursor: move;
        display: flex;
        justify-content: space-between;
        padding: 0 !important;
        border-radius: 0.25rem !important;
        background-color: #fff !important;
        height: 22px;
    }


    .dragDivOut.initialcontrol, .dragDivOut.stampcontrol, .dragDivOut.photocontrol, .dragDivOut.signaturecontrol, .dragDivOut.dragDivQRCode-newflow {
        height: 90px;
    }


    .dragDivOutMobile {
        display: inline-block;
        min-width: 140px !important;
        width: 140px !important;
        height: 40px !important;
        line-height: 12px;
        font-size: 8px !important;
        cursor: move;
        padding: 3px !important;
    }

.base64img {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    transform: scale(1) !important;
}

    .dragDiv .psignImg {
        background: url('https://d27raczcaj0ncn.cloudfront.net/default/emsigner-watermark.svg') no-repeat center center;
        height: 100%;
        width: 100%;
        display: block;
        vertical-align: top;
        opacity: 1;
        background-size: contain;
    }

    .dragDiv .pInImg {
        background: url('https://d27raczcaj0ncn.cloudfront.net/default/select-initials.svg') no-repeat center center;
        height: 100%;
        width: 100%;
        display: block;
        vertical-align: top;
        opacity: 1;
        margin-left: 3px;
        margin-right: -3px;
        background-size: contain;
    }

    .dragDiv .pstampImg {
        background: url('https://d27raczcaj0ncn.cloudfront.net/default/select-stamp.svg') no-repeat center center;
        height: 100%;
        width: 100%;
        display: block;
        vertical-align: top;
        opacity: 1;
        margin-left: 3px;
        margin-right: -3px;
        background-size: contain;
    }

    .dragDiv .psignloadImg {
        position: absolute;
        left: 45%;
        top: 35%;
        display: block;
        vertical-align: top;
        opacity: 1;
    }

    .cmntReply .cmntReply__detailsWrap {
        justify-content: start !important;
        flex-direction: row-reverse !important;
    }

    .cmntReply .cmntReply__time, .cmntReply .cmntReply__userName {
        color: var(--Indigo-600) !important;
    }

    .cmntReply .cmntReply__userName {
        text-align: start !important;
    }

    .cmntReply .cmntReply__msgContent {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0.75rem !important;
        background-color: var(--Indigo-100) !important;
        border-color: var(--Indigo-100) !important;
        color: var(--Indigo-600) !important;
    }


    [class*="signatoryBg_"],
    [class*="signatoryBg_"] .divSettings, .divSettings,
    [class*="signatoryBg_"] .divSettings a, .divSettings a,
    [class*="signatoryBg_"] .control-img-section .ems-signatory-icon {
        background: var(--sbg, #e1e3e5) !important;
        border-color: var(--sborder-default) !important;
        color: var(--sdrag-border, #495057) !important;
        fill: var(--sdrag-border);
        stroke: var(--sdrag-border);
    }

        [class*="signatoryBg_"] .select2-container--default .select2-selection--single {
            background-color: transparent;
        }

        [class*="signatoryBg_"] .select2-selection {
            border-color: var(--sdrag-border) !important;
            padding-left: 12px !important;
        }

        [class*="signatoryBg_"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-top-color: var(--sdrag-border) !important;
        }

        [class*="signatoryBg_"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
            border-bottom-color: var(--sdrag-border) !important;
        }

        [class*="signatoryBg_"].ui-draggable-dragging, .ui-draggable-dragging {
            border: 1px solid var(--sdrag-border, #495057) !important;
            padding: 6px;
            color: var(--sdrag-border, #495057) !important;
        }

            [class*="signatoryBg_"].ui-draggable-dragging .ui-resizable-handle {
                background: var(--sdrag-border, #495057) !important;
            }

    .dragDiv.selectedControl .ui-resizable-handle {
        z-index: 9;
        position: absolute;
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 10px;
    }

    .ui-resizable-se {
        right: -2px;
        bottom: -2px;
    }

    .ui-resizable-ne {
        right: -2px;
        top: -2px;
    }

    .ui-resizable-nw {
        left: -2px;
        top: -2px;
    }

    .ui-resizable-sw {
        left: -2px;
        bottom: -2px;
    }

    /* Default: settings above the control */
    .dragDiv::before {
        content: '';
        position: absolute;
        top: -30px;
        right: 0;
        width: 80px;
        height: 30px;
        pointer-events: none;
    }

    .dragDiv:hover::before,
    .dragDiv.divSettings-active::before {
        pointer-events: auto;
    }

    .divSettings {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
    }

    .dragDiv:hover .divSettings,
    .dragDiv.divSettings-active .divSettings {
        opacity: 1;
        pointer-events: auto;
    }

    /* Right-side: when control is at top edge */
    .dragDiv.divSettings-right .divSettings {
        top: 0;
        right: auto !important;
        left: 100%;
        border-radius: 0 0.25rem 0.25rem 0;
        border: 1px solid var(--sdrag-border);
    }

    .dragDiv.divSettings-right::before {
        top: 0;
        right: auto;
        left: 100%;
        width: 10px;
        height: 100%;
    }

    /* Left-side: when control is at top-right corner */
    .dragDiv.divSettings-left .divSettings {
        top: 0;
        right: 100% !important;
        left: auto;
        border-radius: 0.25rem 0 0 0.25rem;
        border: 1px solid var(--sdrag-border);
    }

    .dragDiv.divSettings-left::before {
        top: 0;
        right: 100%;
        left: auto;
        width: 10px;
        height: 100%;
    }

    .signatoryBg_1 {
        --sbg: var(--bg-orange-50);
        --sdrag-border: var(--bg-orange-500);
    }

    .signatoryBg_2 {
        --sbg: rgba(238, 246, 255, 1);
        --sdrag-border: rgb(60, 120, 200);
    }

    .signatoryBg_3 {
        --sbg: rgba(255, 243, 250, 1);
        --sdrag-border: rgb(200, 60, 150);
    }

    .signatoryBg_4 {
        --sbg: rgba(237, 255, 241, 1);
        --sdrag-border: rgb(34, 160, 80);
    }

    .signatoryBg_5 {
        --sbg: rgba(240, 240, 255, 1);
        --sdrag-border: rgb(85, 75, 200);
    }

    .signatoryBg_6 {
        --sbg: rgba(255, 243, 246, 1);
        --sdrag-border: rgb(220, 65, 140);
    }

    .signatoryBg_7 {
        --sbg: rgba(236, 244, 247, 1);
        --sdrag-border: rgb(95, 140, 155);
    }

    .signatoryBg_8 {
        --sbg: rgba(224, 247, 251, 1);
        --sdrag-border: rgb(10, 150, 200);
    }

    .signatoryBg_9 {
        --sbg: rgba(236, 248, 232, 1);
        --sdrag-border: rgb(70, 165, 95);
    }

    .signatoryBg_10 {
        --sbg: rgba(255, 247, 230, 1);
        --sdrag-border: rgb(220, 140, 50);
    }

    .signatoryBg_11 {
        --sbg: rgba(246, 236, 239, 1);
        --sdrag-border: rgb(150, 85, 100);
    }

    .signatoryBg_12 {
        --sbg: rgba(232, 215, 248, 1);
        --sdrag-border: rgb(130, 80, 180);
    }

    .signatoryBg_13 {
        --sbg: rgba(216, 228, 240, 1);
        --sdrag-border: rgb(60, 110, 150);
    }

    .signatoryBg_14 {
        --sbg: rgba(255, 253, 224, 1);
        --sdrag-border: rgb(200, 170, 60);
    }

    .signatoryBg_15 {
        --sbg: rgba(208, 255, 232, 1);
        --sdrag-border: rgb(20, 160, 100);
    }

    .signatoryBg_16 {
        --sbg: rgba(249, 216, 237, 1);
        --sdrag-border: rgb(180, 55, 150);
    }

    .signatoryBg_17 {
        --sbg: rgba(255, 246, 220, 1);
        --sdrag-border: rgb(210, 165, 60);
    }

    .signatoryBg_18 {
        --sbg: rgba(221, 215, 255, 1);
        --sdrag-border: rgb(95, 60, 220);
    }

    .signatoryBg_19 {
        --sbg: rgba(196, 255, 250, 1);
        --sdrag-border: rgb(20, 170, 160);
    }

    .signatoryBg_20 {
        --sbg: rgba(237, 255, 211, 1);
        --sdrag-border: rgb(120, 200, 70);
    }

    .signatoryBg_21 {
        --sbg: rgba(255, 238, 238, 1);
        --sdrag-border: rgb(200, 80, 80);
    }

    .signatoryBg_22 {
        --sbg: rgba(255, 235, 249, 1);
        --sdrag-border: rgb(180, 80, 170);
    }

    .signatoryBg_23 {
        --sbg: rgba(205, 235, 255, 1);
        --sdrag-border: rgb(30, 150, 230);
    }

    .signatoryBg_24 {
        --sbg: rgba(220, 220, 250, 1);
        --sdrag-border: rgb(120, 100, 220);
    }

    .signatoryBg_25 {
        --sbg: rgba(205, 255, 220, 1);
        --sdrag-border: rgb(70, 190, 90);
    }

    .signatoryBg_26 {
        --sbg: rgba(240, 248, 232, 1);
        --sdrag-border: rgb(140, 190, 90);
    }

    .signatoryBg_27 {
        --sbg: rgba(255, 244, 220, 1);
        --sdrag-border: rgb(215, 150, 70);
    }

    .signatoryBg_28 {
        --sbg: rgba(225, 235, 255, 1);
        --sdrag-border: rgb(100, 150, 230);
    }

    .signatoryBg_29 {
        --sbg: rgba(200, 255, 250, 1);
        --sdrag-border: rgb(40, 200, 185);
    }

    .signatoryBg_30 {
        --sbg: rgba(255, 235, 246, 1);
        --sdrag-border: rgb(220, 110, 200);
    }

    .signatoryBg_31 {
        --sbg: rgba(230, 255, 232, 1);
        --sdrag-border: rgb(120, 210, 120);
    }

    .signatoryBg_32 {
        --sbg: rgba(220, 220, 255, 1);
        --sdrag-border: rgb(120, 115, 245);
    }

    .signatoryBg_33 {
        --sbg: rgba(255, 230, 238, 1);
        --sdrag-border: rgb(220, 95, 155);
    }

    .signatoryBg_34 {
        --sbg: rgba(210, 225, 230, 1);
        --sdrag-border: rgb(100, 150, 160);
    }

    .signatoryBg_35 {
        --sbg: rgba(215, 245, 255, 1);
        --sdrag-border: rgb(90, 190, 235);
    }

    .signatoryBg_36 {
        --sbg: rgba(230, 245, 220, 1);
        --sdrag-border: rgb(140, 190, 90);
    }

    .signatoryBg_37 {
        --sbg: rgba(200, 220, 255, 1);
        --sdrag-border: rgb(90, 140, 230);
    }

    .signatoryBg_38 {
        --sbg: rgba(255, 215, 215, 1);
        --sdrag-border: rgb(230, 105, 105);
    }

    .signatoryBg_39 {
        --sbg: rgba(255, 210, 245, 1);
        --sdrag-border: rgb(210, 90, 210);
    }

    .signatoryBg_40 {
        --sbg: rgba(235, 220, 255, 1);
        --sdrag-border: rgb(160, 105, 240);
    }

    .signatoryBg_41 {
        --sbg: rgba(205, 235, 255, 1);
        --sdrag-border: rgb(80, 170, 230);
    }

    .signatoryBg_42 {
        --sbg: rgba(220, 240, 220, 1);
        --sdrag-border: rgb(110, 190, 120);
    }

    .signatoryBg_43 {
        --sbg: rgba(255, 245, 220, 1);
        --sdrag-border: rgb(220, 160, 70);
    }

    .signatoryBg_44 {
        --sbg: rgba(240, 225, 230, 1);
        --sdrag-border: rgb(170, 110, 125);
    }

    .signatoryBg_45 {
        --sbg: rgba(225, 210, 245, 1);
        --sdrag-border: rgb(140, 100, 185);
    }

    .signatoryBg_46 {
        --sbg: rgba(205, 220, 235, 1);
        --sdrag-border: rgb(100, 150, 180);
    }

    .signatoryBg_47 {
        --sbg: rgba(255, 250, 220, 1);
        --sdrag-border: rgb(235, 210, 90);
    }

    .signatoryBg_48 {
        --sbg: rgba(200, 255, 230, 1);
        --sdrag-border: rgb(30, 190, 110);
    }

    .signatoryBg_49 {
        --sbg: rgba(245, 200, 235, 1);
        --sdrag-border: rgb(195, 70, 165);
    }

    .signatoryBg_50 {
        --sbg: rgba(255, 245, 200, 1);
        --sdrag-border: rgb(235, 195, 85);
    }

    .signatoryBg_51 {
        --sbg: rgba(210, 200, 255, 1);
        --sdrag-border: rgb(115, 85, 240);
    }

    .signatoryBg_52 {
        --sbg: rgba(235, 215, 220, 1);
        --sdrag-border: rgb(165, 100, 120);
    }

    .signatoryBg_53 {
        --sbg: rgba(210, 200, 235, 1);
        --sdrag-border: rgb(140, 95, 170);
    }

    .signatoryBg_54 {
        --sbg: rgba(200, 220, 235, 1);
        --sdrag-border: rgb(85, 145, 175);
    }

    .signatoryBg_55 {
        --sbg: rgba(255, 250, 220, 1);
        --sdrag-border: rgb(225, 200, 90);
    }
    /* ------------------ Success & Failure Icon Animation ------------------ */

    .animation-ctn {
        text-align: center;
        margin-top: -3.2em;
    }

    @-webkit-keyframes checkmark {
        0% {
            stroke-dashoffset: 100px
        }

        100% {
            stroke-dashoffset: 0px
        }
    }

    @-ms-keyframes checkmark {
        0% {
            stroke-dashoffset: 100px
        }

        100% {
            stroke-dashoffset: 0px
        }
    }

    @keyframes checkmark {
        0% {
            stroke-dashoffset: 100px
        }

        100% {
            stroke-dashoffset: 0px
        }
    }

    @-webkit-keyframes checkmark-circle {
        0% {
            stroke-dashoffset: 480px
        }

        100% {
            stroke-dashoffset: 960px
        }
    }

    @-ms-keyframes checkmark-circle {
        0% {
            stroke-dashoffset: 240px
        }

        100% {
            stroke-dashoffset: 480px
        }
    }

    @keyframes checkmark-circle {
        0% {
            stroke-dashoffset: 480px
        }

        100% {
            stroke-dashoffset: 960px
        }
    }

    @keyframes colored-circle {
        0% {
            opacity: 0
        }

        100% {
            opacity: 1
        }
    }

    .inlinesvg .svg svg {
        display: inline
    }

    .icon--order-success svg polyline {
        -webkit-animation: checkmark 0.25s ease-in-out 0.7s backwards;
        animation: checkmark 0.25s ease-in-out 0.7s backwards
    }

    .icon--order-success svg circle {
        -webkit-animation: checkmark-circle 0.6s ease-in-out backwards;
        animation: checkmark-circle 0.6s ease-in-out backwards;
    }

        .icon--order-success svg circle#colored {
            -webkit-animation: colored-circle 0.6s ease-in-out 0.7s backwards;
            animation: colored-circle 0.6s ease-in-out 0.7s backwards;
        }
    /* ------------------ Lock Icon Animation ------------------ */

    .ems-lockIconWrapper {
        padding-inline: 22px;
    }

    .ems-lockIcon {
        position: relative;
        width: 24px;
        height: 38px;
    }

    .ems-lockBody {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 20px;
        background: var(--primary-600);
        border-radius: 4px;
    }

    .ems-lockIconShackle {
        position: absolute;
        bottom: 18px;
        left: 4px;
        width: 16px;
        height: 14px;
        border: 3px solid var(--primary-600);
        border-bottom: none;
        border-radius: 6px 6px 0 0;
        transform-origin: left;
        transform: rotateY(90deg) translateY(-3px);
        animation: closeLock 1s ease 0.5s forwards;
    }

    @keyframes closeLock {
        0% {
            transform: rotateY(90deg) translateY(4px);
        }

        100% {
            transform: rotateY(0deg);
        }
    }
    /* ------------------ Signer Tooltip Animation ------------------ */

    .animated-tooltip {
        position: absolute;
        bottom: calc(100% + 12px);
        left: 50%;
        transform: translateX(-50%);
        background: #1e40af;
        padding: 10px 6px;
        border-radius: 6px;
        font-size: 12px;
        line-height: 16px;
        font-weight: 600;
        color: #fff;
        width: 96px;
        height: 60px;
        z-index: 999;
        box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3);
        border: 1px solid #1e40af;
        animation: slideIn 0.5s ease-out forwards, gentleFloat 1.8s ease-in-out 0.5s infinite, borderGlow 2.5s ease-in-out infinite;
    }

        .animated-tooltip.placeholder-validated {
            border: 2px solid rgb(25,135,84);
            animation: none;
            box-shadow: none;
            color: rgb(25,135,84);
        }

        .animated-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: #1e40af;
        }

        .animated-tooltip.placeholder-validated::after {
            border-top-color: rgb(25,135,84);
        }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(-15px);
        }

        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }

    @keyframes gentleFloat {
        0%, 100% {
            transform: translateX(-50%) translateY(0);
        }

        50% {
            transform: translateX(-50%) translateY(-5px);
        }
    }

    @keyframes borderGlow {
        0%, 100% {
            border-color: #1e40af;
            box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
        }

        50% {
            border-color: #1e40af;
            box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3), 0 0 0 3px rgba(30, 64, 175, 0.35);
        }
    }

    .region-options .region-country:hover .ems-countryName {
        color: var(--secondary-500);
    }

    .mt-ems-main-wrapper {
        margin-top: 6.25rem;
    }

    .pt-ems-main-wrapper {
        padding-top: 122px;
    }

    #Individual-Enterprise-Tab .nav-tab-item .nav-tab-link {
        padding: 0.6rem 4rem;
        background: transparent;
        border: none;
    }

        #Individual-Enterprise-Tab .nav-tab-item .nav-tab-link.active {
            background: #fff;
            border-radius: 12px 12px 0 0;
            border-bottom: 2px solid #ff8a4c;
        }

    .h-min-60 {
        min-height: 60px;
    }

.section {
    padding-bottom: 25px;
}

    .ems-pricingBox__Border {
        border: 1px solid var(--secondary-200);
    }

    .step {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 3;
        flex: 1;
    }

    .step-circle {
        width: 20px;
        height: 20px;
        transition: all 0.3s ease;
    }

    .step-title {
        font-size: 16px;
        color: #6b7280;
        text-align: center;
    }

    .step:not(:last-child)::before {
        content: '';
        position: absolute;
        top: 11px;
        left: calc(50% + 24px);
        width: calc(100% - 48px);
        height: 2px;
        background-color: #E5E7EB;
        z-index: 1;
    }

    .step.completed .step-circle {
        background-color: green;
        color: white;
    }

    .step.completed .step-title {
        color: #6B7280;
        font-weight: 500;
    }

    .step.completed:not(:last-child)::before {
        background-color: #DBEAFE;
    }

    .step.current .step-circle {
        background-color: #a855f7;
        color: white;
    }

    .step.current .step-title {
        color: #374151;
        font-weight: 600;
    }

    .step.pending .step-circle {
        background-color: #F3F4F6;
        color: #1F2937;
    }

    .step.pending .step-title {
        color: #6B7280;
    }

    .check-icon {
        width: 16px;
        height: 16px;
    }

    .step-circle:hover {
        transform: scale(1.05);
    }


        .drop-zone.dragover {
            background-color: var(--ems-color-primary-100) !important;
            border-color: #007bff;
            transition: border-color 0.2s ease, background-color 0.2s ease;
        }

        .drop-zone.dragover-invalid {
            background-color: #fff5f5 !important;
            border-color: #dc3545;
            animation: shake 0.3s ease;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-4px); }
            75% { transform: translateX(4px); }
        }

    /* ===============================================
       ENVELOPE UPLOAD COMPONENT STYLES
       =============================================== */
    .envelope-wrapper {
        position: relative;
        width: 100%;
        height: 302px;
        border: none !important;
        background: transparent;
    }

.mu-envelope-wrapper {
    height: 210px;
}

.envelope-wrapper.dragover .env-body {
    background-color: hsl(210, 88%, 90%) !important;
}

        .envelope-wrapper.dragover-invalid .env-body {
            background-color: #fff5f5 !important;
        }

    /* ---- Envelope body (rectangular pocket) ---- */
    .env-body {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(180deg, hsl(210, 55%, 96%) 0%, hsl(210, 45%, 92%) 100%);
        border: 1.5px solid hsl(215, 50%, 85%);
        border-radius: 2px 2px 8px 8px;
        z-index: 1;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    /* ---- Flap (triangle lid) ----
       Base sits at top of envelope body.
       Starts closed (scaleY -1 = flipped down over envelope).
       Animates to open (scaleY 1 = pointing up). */
    .env-flap {
        position: absolute;
        bottom: calc(50% - 1px);
        left: 0;
        right: 0;
        height: 50%;
        z-index: 2;
        pointer-events: none;
        transform-origin: bottom center;
        transform: scaleY(-1);
        animation: openFlap 0.5s ease-in-out forwards;
    }

    .env-flap-shape {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    /* Outer layer = border color (darker shade) */
    .env-flap-shape::before {
        content: '';
        position: absolute;
        inset: 0;
        background: hsl(215, 50%, 82%);
        clip-path: polygon(0% 100%, 50% 5%, 100% 100%);
    }

    /* Inner layer = fill color (inset top & sides only, flush at bottom) */
    .env-flap-shape::after {
        content: '';
        position: absolute;
        top: 1.5px;
        left: 1.5px;
        right: 1.5px;
        bottom: 0;
        background: linear-gradient(180deg, hsl(210, 42%, 87%) 0%, hsl(210, 45%, 83%) 100%);
        clip-path: polygon(0% 100%, 50% 6%, 100% 100%);
    }

    /* Step 1: flap opens (scaleY -1 → 1) */
    @keyframes openFlap {
        0%   { transform: scaleY(-1); }
        100% { transform: scaleY(1); }
    }

    /* ---- Front V-fold — covers bottom of card ---- */
    .env-front {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50%;
        z-index: 4;
        pointer-events: none;
        clip-path: polygon(0% 0%, 50% 60%, 100% 0%, 100% 100%, 0% 100%);
        background: linear-gradient(180deg, hsl(210, 55%, 95%) 0%, hsl(210, 45%, 91%) 100%);
        border-radius: 0 0 8px 8px;
    }

    .env-front::after {
        content: '';
        position: absolute;
        inset: 0;
        clip-path: polygon(0% 0%, 50% 60%, 100% 0%, 100% 100%, 0% 100%);
        border: 1.5px solid hsl(215, 50%, 85%);
        border-radius: 0 0 8px 8px;
    }

    /* ---- Card — slides up AFTER flap is open ---- */
    .card-content {
        position: absolute;
        left: 50%;
        top: 19%;
        transform: translateX(-50%) translateY(70px);
        z-index: 2;
        width: 98%;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        opacity: 0;
        border-radius: 12px;
        animation: slideCardUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
    }

.mu-card-content {
    top: 22%;
}
/* Step 2: card rises out (after flap finishes) */
@keyframes slideCardUp {
    0% {
        transform: translateX(-50%) translateY(30px);
        opacity: 0;
    }

    100% {
        transform: translateX(-50%) translateY(-20px);
        opacity: 1;
    }
}

    .dashed-zone {
        width: 100%;
        border: 2px dashed hsl(210, 20%, 87%);
        border-radius: 10px;
        background-color: hsl(210, 50%, 99%);
        padding: 20px 20px 16px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .icon-circle {
        width: 40px;
        height: 40px;
        background: hsl(215, 100%, 96%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
        color: hsl(220, 89%, 53%);
    }

        .icon-circle svg {
            width: 20px;
            height: 20px;
        }

    .txt-sub {
        font-size: 12px;
        color: hsl(210, 10%, 55%);
        margin: 2px 0 6px;
    }

    /* Tablet landscape */
    @media (max-width: 992px) {
        .envelope-wrapper {
            height: 310px;
        }

        .card-content {
            width: 98%;
            padding: 14px 16px 12px;
        }

        .dashed-zone {
            padding: 16px 16px 14px;
        }
    }

    /* Tablet portrait */
    @media (max-width: 768px) {
        .envelope-wrapper {
            height: 280px;
        }

        .mu-envelope-wrapper {
            height: 172px;
        }

        .card-content {
            width: 98%;
            padding: 12px 12px 10px;
        }

        .dashed-zone {
            padding: 14px 12px 12px;
        }

        .icon-circle {
            width: 34px;
            height: 34px;
            margin-bottom: 4px;
        }

        .icon-circle svg {
            width: 17px;
            height: 17px;
        }
    }

    /* Mobile */
    @media (max-width: 576px) {
        .envelope-wrapper {
            height: 240px;
        }

        .mu-envelope-wrapper {
            height: 190px;
        }

        .card-content {
            width: 98%;
            padding: 8px 8px 6px;
        }

        .dashed-zone {
            padding: 12px 8px 10px;
        }

        .icon-circle {
            width: 28px;
            height: 28px;
            margin-bottom: 3px;
        }

        .icon-circle svg {
            width: 14px;
            height: 14px;
        }

    }

    .ems-fileUpload__pageCount {
        color: #8A2C0D !important;
        background-color: var(--color-peach) !important;
    }

    .ss-badge {
        border-bottom-left-radius: 6px !important;
    }

.ems-fileUpload__progressBar {
    height: 3px;
}

    /* Signature option cards - equal height, flexible grid */
    #SelfSignOptions, #OtherSignatureModes {
        align-items: stretch;
    }

    #SelfSignOptions > div,
    #OtherSignatureModes > div {
        min-height: 0;
    }

    #SelfSignOptions .ems-newKycOption-wrap,
    #OtherSignatureModes .ems-newKycOption-wrap {
        display: flex;
        flex-direction: column;
        min-height: 70px;
    }

    #SelfSignOptions .ems-newKycOption-wrap .form-check-label,
    #OtherSignatureModes .ems-newKycOption-wrap .form-check-label {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    /* Card description text - allow full display */
    #SelfSignOptions .ems-newKycOption-wrap .form-check-label > p,
    #OtherSignatureModes .ems-newKycOption-wrap .form-check-label > p {
        overflow: visible;
    }

    .text-truncate-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .text-truncate-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ems-newKycOption-wrap:has(.ems-newKycOption-input:checked) {
        border-width: 1px !important;
        border-color: hsl(220deg 79.74% 65.8%) !important;
        background-color: hsl(210deg 100% 97.84%) !important;
    }

    .ems-radio-input:checked + label {
        background-color: #fff;
        color: var(--color-peach-dark);
        box-shadow: var(--ems-shadow-sm);
        font-weight: 500;
    }

    .ems-radio-input:checked ~ .ems-radio-label {
        background-color: var(--ems-input-border-color);
        color: inherit;
    }

    .ems-signOptions-img {
        left: 12px;
        top: 12px;
    }

    .ems-signOptions-label {
        padding-left: 50px;
    }

    .search-section {
        position: relative;
    }

    .select2-container {
        display: block;
        font-size: 12px;
    }

    .select2-dropdown {
        border: 1px solid #E5E7EB !important;
        border-radius: 0.75rem !important;
        top: 4px;
    }

    .select2-selection {
        height: 32px !important;
        border: 1px solid #E5E7EB !important;
        border-radius: 0.625rem !important;
        padding-left: 35px !important;
    }

    .ems-select2 .select2-selection {
        padding-left: 12px !important;
    }

    .select2-selection__rendered {
        line-height: 32px !important;
        padding-left: 0 !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 30px;
        right: 6px;
    }

    .select2-container--default .select2-search--dropdown .select2-search__field {
        outline-color: transparent;
        padding-block: 0.5rem;
        border-radius: 0.5rem;
        border-color: #aaa;
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: var(--ems-primary-50);
        color: var(--ems-color-primary);
    }

    .select2-results__options {
        margin: 0.25rem;
    }

    .select2-results__option {
        border-radius: 6px;
        margin-bottom: 4px;
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        border-radius: 0.375rem;
    }

    .participant-item {
        cursor: pointer;
        background-color: hsl(210deg 58.98% 98.46%);
        transition: all 0.2s ease;
    }

        .participant-item:hover {
            box-shadow: var(--ems-shadow-sm);
        }

        .participant-item.active {
            border: 1px solid #1C64F2;
        }

        .participant-item .remove:hover {
            opacity: 1;
        }

    .participant-avatar {
        background-color: #CDDBFE;
        color: #42389D;
        width: 24px;
        height: 24px;
    }

    .participant-avatar--sm {
        width: 28px;
        height: 28px;
    }

    .participant-avatar--md {
        width: 36px;
        height: 36px;
    }

.participant-avatar--lg {
    width: 60px;
    height: 60px;
}

    .participant-info {
        flex-grow: 1;
        min-width: 0;
    }

    .drag-handle {
        cursor: grab;
        user-select: none;
        touch-action: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }

    .drag-handle:active {
        cursor: grabbing;
    }

    /* Larger, finger-friendly drag handle on any touch-primary device
       (covers phones, tablets, and large desktop touchscreens) */
    @media (pointer: coarse) {
        .drag-handle {
            min-width: 44px;
            min-height: 44px;
            padding: 10px !important;
        }
        .drag-handle img {
            width: 16px !important;
            height: 16px !important;
        }
    }

    /* While actively dragging, suppress browser scroll/gesture on the list
       regardless of device — applies only when JS toggles .is-dragging */
    #participant-list.is-dragging,
    #participant-list.is-dragging .participant-item-wrapper,
    #participant-list.is-dragging .participant-item {
        touch-action: none !important;
    }

    /* Floating clone that follows the cursor */
    .drag-clone {
        z-index: 9999;
        opacity: 1;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.08);
        border: 2px solid #1C64F2;
        border-radius: 6px;
        background: #fff;
        cursor: grabbing;
    }

    .drop-placeholder {
        border: 2px dashed #1C64F2;
        border-radius: 6px;
        background: rgba(28, 100, 242, 0.06);
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1C64F2;
        font-size: 13px;
        font-weight: 500;
    }

    .delay-note {
        border: 1px solid #F17EB8;
        font-size: 0.563rem;
    }

    .ems-participantInfo {
        font-size: 0.688rem;
        line-height: 0.813rem;
    }

    .attached-file-details-wrapper {
        display: flex;
        flex-direction: column;
        line-height: 16px;
    }

    .border-light-gray {
        border: 1px solid #e2e2e2;
    }

    .ems-orLine {
        background-color: var(--Indigo-100);
        color: var(--Indigo-600);
    }

.ems-orLine::before {
    content: '';
    position: absolute;
    left: -130%;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 2px;
    background-color: var(--Indigo-200);
    border-radius: 0.375rem;
}

.ems-orLine::after {
    content: '';
    position: absolute;
    right: -130%;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 2px;
    background-color: var(--Indigo-200);
    border-radius: 0.375rem;
}

.ems-dropdown-menu {
    max-height: 224px;
    overflow-y: auto;
    z-index: 1030 !important;
}

    .ems-badge-card {
        border-top-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .ems-profileContainer {
        min-height: calc(var(--app-vh) - 143px);
        max-height: calc(var(--app-vh) - 143px);
    }

    .ems-h-certificateCounter {
        max-height: 294px;
    }

    .mh-mainSection {
        min-height: calc(var(--app-vh) - 74px);
        max-height: calc(var(--app-vh) - 74px);
    }

.mh-settingSection {
    min-height: calc(var(--app-vh) - 146px);
    max-height: calc(var(--app-vh) - 146px);
}

.mh-signerGatewaySection {
    min-height: calc(var(--app-vh) - 80px);
    max-height: calc(var(--app-vh) - 80px);
}

.mh-reportsSidebarLinks {
    max-height: calc(var(--app-vh) - 240px);
    min-height: calc(var(--app-vh) - 240px);
}

.ems-mainContainerMinHeight {
    min-height: calc(var(--app-vh) - 126px);
    max-height: calc(var(--app-vh) - 126px);
}

.ems-contentBody {
    max-height: calc(var(--app-vh) - 181px);
}

.AttachDocModal-offcanvas {
    min-height: calc(var(--app-vh) - 17.25rem);
    max-height: calc(var(--app-vh) - 17.25rem);
    overflow-y: auto;
}

    .CommentsModal-offcanvas {
        min-height: calc(var(--app-vh) - 240px);
        max-height: calc(var(--app-vh) - 240px);
        overflow-y: auto;
    }

    .map-wrapper {
        height: 400px;
    }

    .wf-parallel {
        top: -8px;
        left: -8px;
    }
    /* --------------- Manage Templates --------------- */

    .template-list-container .template-item:hover {
        background-color: #f8f9fa;
    }

    .template-list-container .template-name {
        width: 200px;
    }

    .template-list-container .template-icon.folder-icon {
        color: #ffa726;
    }

    .template-list-container .template-name:hover {
        text-decoration: underline;
    }

    .template-type-badge {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 2px 8px;
        border-radius: 12px;
        margin-left: 8px;
        flex-shrink: 0;
    }

    .template-config-status {
        display: inline-flex;
        align-items: center;
        margin-left: 8px;
        cursor: help;
    }

    .template-status {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #666;
        font-size: 14px;
    }

        .template-status img {
            width: 100px;
        }

    .template-list-container .action-btn:hover {
        color: #333;
    }

    .context-menu {
        position: fixed;
        z-index: 1000;
        min-width: 200px;
        max-width: 280px;
    }

    .webform-link-container {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .webform-link-input {
        flex: 1;
        font-size: 13px;
        padding: 6px 12px;
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
    }

    .copy-webform-btn {
        white-space: nowrap;
        font-size: 13px;
        padding: 6px 16px;
    }

    .access-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .access-item {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .access-label {
        font-size: 13px;
        font-weight: 500;
        color: #6c757d;
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .access-label i {
            font-size: 14px;
        }

    .access-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .access-tag {
        background-color: #e3f2fd;
        color: #1976d2;
        padding: 4px 12px;
        border-radius: 16px;
        font-size: 12px;
        font-weight: 500;
        display: inline-block;
    }

    .web-form-link-btn {
        background-color: #e0e0e0;
        border: none;
        padding: 8px 20px;
        border-radius: 20px;
        font-size: 14px;
        cursor: pointer;
        margin-left: auto;
    }

        .web-form-link-btn:hover {
            background-color: #d0d0d0;
        }

    .template-expanded .action-btn[data-action="expand"] i {
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }
    /* Template expanded state */
    .template-wrapper.template-expanded {
        background-color: #f8f9fa;
    }
        /* Show template details in expanded state */
        .template-wrapper.template-expanded .template-meta .template-original-content {
            display: none !important;
        }

        .template-wrapper.template-expanded .template-meta .template-details-content {
            display: block !important;
        }

    .template-children.show, .template-expanded > .template-children, .template-details.show {
        display: block;
    }

    .template-meta .template-details-content {
        display: none;
    }

    .template-meta {
        width: 150px;
    }

    .section-title {
        font-size: 14px;
        font-weight: 600;
        color: #495057;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
    }

        .section-title i {
            margin-right: 8px;
            font-size: 16px;
        }
    /* Single row template info */
    .template-info-row {
        padding: 5px 0;
    }

    .info-item-inline {
        display: flex;
        align-items: center;
    }

    .info-label-inline {
        font-size: 12px;
        color: #6c757d;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-right: 8px;
    }

    .info-value-inline {
        font-size: 14px;
        color: #212529;
        font-weight: 400;
    }

    .info-item {
        margin-bottom: 16px;
    }

        .info-item:last-child {
            margin-bottom: 0;
        }

    .info-label {
        font-size: 12px;
        color: #6c757d;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
    }

    .info-value {
        font-size: 15px;
        color: #212529;
        font-weight: 400;
        margin-bottom: 0;
    }
    /* Access row */
    .access-row {
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 6px;
        margin-top: 15px;
    }
    /* No access text */
    .no-access-text {
        color: #6c757d;
        font-style: italic;
    }
    /* User avatar */
    .user-avatar-wrapper {
        position: relative;
        margin-right: 12px;
    }

    .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .user-avatar-placeholder {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        color: white;
    }
    /* Department badge */
    .dept-badge {
        display: inline-block;
        padding: 5px 14px;
        background-color: #e3f2fd;
        border-radius: 15px;
        font-size: 13px;
        font-weight: 500;
        color: #1976d2;
        white-space: nowrap;
        margin-right: 8px;
    }
    /* Access subtitle styling */
    .access-subtitle {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 10px;
    }
    /* User avatar item */
    .user-avatar-item {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        width: 65px;
    }

    .user-name-below {
        color: #495057;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
    }
    /* Responsive styles for template details */
    @media (max-width: 768px) {
        .access-details-grid {
            flex-direction: column;
            gap: 20px;
        }

        .template-info-grid {
            gap: 15px;
        }

        .info-item {
            flex: 1 1 100%;
            min-width: auto;
        }
    }

    .sbWindow {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
    }

    .overlayBg {
        background: rgba(0,0,0,0.5);
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .sbContent {
        position: relative;
        max-width: 800px;
        margin: 50px auto;
        background: #fff;
        border-radius: 8px;
        padding: 30px;
    }

    .loadingtext {
        animation: blink 1s linear infinite;
    }

    @keyframes blink {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }
    /* Multi-select dropdown styles */
    .access-select-wrapper {
        margin-bottom: 20px;
    }

        .access-select-wrapper label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #333;
        }

        .access-select-wrapper .form-text {
            font-size: 12px;
            color: #6c757d;
            margin-top: 4px;
        }
    /* Selected items display */
    .selected-items {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }

    .selected-item .remove-item {
        cursor: pointer;
        font-size: 14px;
        opacity: 0.7;
    }

        .selected-item .remove-item:hover {
            opacity: 1;
        }
    /* Bulk selection bar */
.bulk-selection-bar {
    bottom: 20px;
    background: hsl(33deg 90.7% 90.39%);
    border: 1px solid hsl(33deg 90.7% 90.39%);
}

        .bulk-selection-bar.show {
            display: flex;
        }
    /* Fix modal overlay issue */
    .modal-backdrop {
        z-index: 1040 !important;
    }

    .modal {
        z-index: 1050 !important;
    }
    /* Choices.js custom styles for profile images */
    .choices__list--dropdown .choice-content,
    .choices__list--multiple .choice-item-content {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .choice-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
    }

    .choices__list--multiple {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
    }

    .choice-details {
        display: flex;
        flex-direction: column;
        gap: 2px;
        overflow: hidden;
    }

    .choice-email {
        color: #666;
        font-size: 12px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .choices__list--multiple .choice-text {
        margin-left: 5px;
    }

    .choices__item--choice {
        padding: 8px 16px;
    }

    .choices__list--dropdown .choices__item--choice .choice-content {
        width: 100%;
    }

    .choices__item--selectable-shorthand .choices__button {
        background: transparent;
        border: none;
        padding: 2px 4px;
        margin-left: 0;
        opacity: 0.7;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
    }

        .choices__item--selectable-shorthand .choices__button:hover {
            opacity: 1;
            background-color: rgba(0, 0, 0, 0.1);
        }

        .choices__item--selectable-shorthand .choices__button i {
            font-size: 10px;
            color: #666;
        }
    /* Override default Choices.js button text */
    .choices__item--selectable-shorthand .choices__button {
        text-indent: -9999px;
        line-height: 0;
    }

        .choices__item--selectable-shorthand .choices__button::after {
            content: none;
        }

    .ems-remove-btn {
        top: -4px;
        right: -4px;
    }
    /* Fix for X icon in selected items in Grant Access modal */
    #grantAccessModal .choices__item {
        position: relative;
        display: inline-flex;
        align-items: center;
        padding-right: 28px;
    }

    #grantAccessModal .choices__button {
        position: absolute !important;
        right: 4px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }


    .loading-section {
        position: relative;
        pointer-events: none;
    }

        .loading-section::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.8);
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .loading-section::before {
            content: "Loading existing access...";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 11;
            font-size: 14px;
            color: #666;
            background: white;
            padding: 10px 20px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    /* Avatar list styling */
    .avatar-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 10px;
    }

    .avatar-item {
        width: 30px;
        height: 30px;
    }
    /* Department badge styling */
    .department-badge {
        display: inline-block;
        padding: 6px 12px;
        background-color: #e3f2fd;
        color: #1976d2;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
        margin: 4px;
        transition: all 0.2s ease;
    }

        .department-badge:hover {
            background-color: #1976d2;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(25, 118, 210, 0.3);
        }

    .mh-template-list {
        min-height: calc(var(--app-vh) - 204px);
        max-height: calc(var(--app-vh) - 204px);
    }

.mh-topupBtn {
    min-height: 30px;
}

.mh-50px {
    max-height: 50px;
}

.mh-150px {
    max-height: 150px;
}

.mh-180px {
    max-height: 180px;
}

.mh-300px {
    max-height: 300px;
}

/* ------------------ Google Map Wrapper CSS ------------------ */

.gm-control-active, .gm-svpc, .gmnoprint div {
    border-radius: 12px !important;
}

.gm-style-mtc-bbw .gm-style-mtc:first-of-type > button {
    border-start-start-radius: 12px;
    border-end-start-radius: 12px;
}

.gm-style-mtc-bbw .gm-style-mtc > button {
    font-family: var(--ems-font-primary) !important;
    font-weight: 500;
    font-size: 16px;
}

.gm-style-mtc-bbw .gm-style-mtc:last-of-type > button {
    border-start-end-radius: 12px;
    border-end-end-radius: 12px;
}
/* ------------------ Email Toolbar CSS ------------------ */

div.jHtmlArea {
    border-color: #e9ecef !important;
    border-radius: 0.25rem;
}

div.jHtmlArea .ToolBar {
    border-bottom-color: #e9ecef !important;
}

div.jHtmlArea div {
    padding: 0.25rem !important;
}

div.jHtmlArea .ToolBar ul {
    background: unset !important;
    background-color: var(--ems-bg-body-tertiary-color) !important;
    padding: 0.25rem !important;
    margin: 0.25rem !important;
    border-radius: 0.25rem;
    box-shadow: var(--ems-shadow-xs);
}

.ems-userStatusPosition {
    bottom: -8px;
    right: -10px;
}

.ems-userStatusPosition--cobranding {
    bottom: 3px;
    right: -4px;
}

/*
    ==================== MEDIA QUERIES ====================
*/
@media (min-width: 576px) {

    .fs-sm-8 {
        font-size: 0.75rem !important;
    }

    .ems-offcanvas {
        margin: 12px !important;
    }

    .border-sm-start {
        border-left: 1px solid #dee2e6;
    }

    .w-sm-auto {
        width: auto !important;
    }

    .w-sessionTimeDisplay {
        width: 50px;
    }

    .preview-content .ems-reportsMainContent {
        margin-left: 162px;
        width: calc(100% - 168px);
    }

    .mw-emsModal {
        min-width: 340px;
    }
}

@media (min-width: 768px) {
    .ems-main-wrapper {
        padding-top: 110px;
    }

    .ems-subspace {
        padding-top: 113px;
    }

    .ems-padding100 {
        padding-block: 90px;
    }

    .ems-subscribePlan {
        padding: 20px 16px;
        height: 100%;
    }

    .ems-navheader {
        padding-inline: 1.2rem;
    }

    .ems-brandlogo img {
        height: 25px;
    }

    .nav-dropdown--lg .ems-drp-link-list__item:nth-last-child(-n+2) {
        margin-bottom: 0;
    }

    .ems-h-dropdown__head h3 {
        font-size: 14px !important;
    }

    .ems-navlinks-group {
        padding-right: 20px;
    }

    .ems-navlinks-group::after {
        content: "";
        position: absolute;
        top: 50%;
        height: 80%;
        width: 1px;
        right: 0;
        background: var(--neutral-400);
        transform: translateY(-50%);
    }

    .nav-emsignup {
        padding: 32px 32px 0 32px;
    }

    .ems-signupContainer {
        padding: 32px 32px 32px 32px;
        flex-direction: row;
        position: relative;
        z-index: 999;
    }

    .ems-signupContainer__form {
        width: 100%;
        padding: 60px 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .h1 {
        font-size: 48px !important;
        line-height: 67.2px;
    }

    .h2 {
        font-size: 38px;
        line-height: 53.2px;
    }

    .h3 {
        font-size: 28px;
    }

    .h4 {
        font-size: 24px;
        line-height: 33.6px;
    }

    .h5 {
        font-size: 18px;
        line-height: 25px;
    }

    .fs-16 {
        font-size: 16px !important;
    }

    .fs-20 {
        font-size: 20px !important;
        line-height: 28px !important;
    }

    .fs-24 {
        font-size: 24px !important;
        line-height: 33.6px !important;
    }

    .fs-32 {
        font-size: 32px !important;
        line-height: 44.8px !important;
    }

    .fs-36 {
        font-size: 36px;
        line-height: 50.4px;
    }

    .fs-40 {
        font-size: 40px;
        line-height: 56px;
    }

    .ems-btn--lg {
        padding: 0.9rem 4.5rem;
    }

    .ems-btn-sm {
        padding-inline: 1.2rem;
    }

    .ems-btns-equal {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
    }

    .ems-btns-equal .ems-btn {
        padding-block: 0.75rem;
        min-width: 146px;
    }

    .sec-contact {
        padding: 50px 0;
    }

    .ems-contact-fields textarea {
        min-height: 134px;
    }

    .contact-us-head h1 {
        font-size: 36px;
        line-height: 50.4px;
    }

    .map-nav {
        padding: 21px;
    }

    .map-nav__item span {
        font-size: 16px;
        line-height: 25px;
    }

    #loginModal .modal-content {
        min-width: 488px;
        max-width: 488px;
        padding: 60px 64px;
    }

    .ems-footer__right-wrap {
        grid-template-columns: repeat(4, 1fr);
        gap: 35px;
    }

    .ems-footer-sub {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ems-footer-container {
        padding-block: 3.5rem;
        gap: 3rem;
        display: grid;
        grid-template-columns: minmax(0, 264px) 1fr;
    }

    .ems-footermenu-item {
        flex: 1;
    }

    .ems-banner {
        padding-block: 5.5rem;
    }

    .ems-banner__content {
        padding-inline: 3rem;
    }

    .ems-illustrationh337 {
        height: 370px !important;
        width: 362px !important;
    }

    .ems-btns-group--lg .ems-btn {
        min-width: 214px !important;
    }


    .ems-pricing-tabs {
        display: inline-flex;
    }

    .ems-subscribePlans__item {
        margin-bottom: 0;
        margin-top: 24px;
    }

    .ems-subscribePlans__item:nth-child(-n+2) {
        margin-top: 0;
    }

    .ems-subscribePlan {
        padding: 24px;
        height: 100%;
    }

    .ems-PopularTag {
        font-size: 10px;
    }

    .ems-staticTabPlan-text {
        font-size: 18px;
        line-height: 25.2px;
        letter-spacing: -0.02em;
    }

    .ems-pos-tabTitle {
        min-width: 180px;
        max-width: 180px;
    }

    .ems-accordion-single-title {
        font-size: 20px;
        line-height: 28px;
    }

    .ems-accordion-single-content p,
    .ems-accordion-single-content a {
        font-size: 16px;
        line-height: 22.4px;
    }

    .pos-sticky-t100 {
        position: sticky;
        top: 150px;
    }

    .ems-table-1 {
        max-height: calc(var(--app-vh) - 100px);
        overflow-y: auto;
    }

    .ems-table-1 th .thead {
        font-size: 20px;
        line-height: 28px;
        padding: 6px 20px;
    }

    .ems-table-1 tbody td {
        padding: 22px 0;
        vertical-align: middle;
    }

    .ems-table-1 tbody td::after {
        height: calc(100% - 44px);
        top: 22px;
    }

    .ems-table-1 tbody td .t-cell {
        padding: 0 20px;
        font-size: 14px;
        line-height: 20px;
    }

    .product-comparison-table td {
        font-size: 14px;
        padding: 22px 24px;
    }

    .product-comparison-table tr td {
        min-width: 160px;
        max-width: 160px;
    }

    .product-comparison-table tr td:first-child {
        min-width: 180px;
        max-width: 180px;
    }

    .ems-staticTabTypelist .ems-staticTabType {
        padding: 16px 24px;
    }

    .ems-table-2 table td {
        font-size: 14px;
        line-height: 20px;
        padding: 13px 24px;
    }

    .ems-table-2 table a {
        font-size: 14px;
        line-height: 20px;
    }

    .ems-table-2 table th:last-child::after,
    .ems-table-2 table td:last-child::after {
        display: none;
    }

    .ems-table-3 table th {
        font-size: 20px;
        line-height: 28px;
        padding: 18px 24px;
    }

    .ems-table-3 table tbody tr td {
        font-size: 14px;
        line-height: 20px;
        padding: 12px 24px;
    }

    .section {
        padding-bottom: 30px;
    }

    .p-md-12px {
        padding: 0.75rem !important;
    }

    .ps-md-6px {
        padding-left: 0.375rem !important;
    }

    .px-md-6px {
        padding-inline: 0.375rem !important;
    }

    .py-md-12px {
        padding-block: 0.75rem !important;
    }

    .pe-md-12px {
        padding-right: 0.75rem !important;
    }

    .ps-md-12px {
        padding-left: 0.75rem !important;
    }

    .ps-md-2rem {
        padding-left: 2rem !important;
    }

    .px-md-6px {
        padding-inline: 0.375rem !important;
    }

    .px-md-12px {
        padding-inline: 0.75rem !important;
    }

    .ms-md-12px {
        margin-left: 0.75rem !important;
    }

    .me-md-12px {
        margin-right: 0.75rem !important;
    }

    .mx-md-12px {
        margin-inline: 0.75rem !important;
    }

    .my-md-12px {
        margin-block: 0.75rem !important;
    }

    .w-md-auto {
        width: auto !important;
    }

    .fs-md-5 {
        font-size: 1.25rem !important;
    }

    .step-indicator {
        left: 50px;
    }

    .flex-md-grow-1 {
        flex-grow: 1 !important;
    }

    .border-md-end {
        border-right: 1px solid #dee2e6 !important;
    }

    .border-md-start {
        border-left: 1px solid #dee2e6 !important;
    }

    .border-md-top-0 {
        border-top: unset !important;
    }

    .border-md-bottom-0 {
        border-bottom: unset !important;
    }

    .ems-btn {
        min-width: 120px;
    }

    .ems-contentBody {
        min-height: calc(var(--app-vh) - 130px);
        max-height: calc(var(--app-vh) - 130px);
    }

    .ems-offcanvas-md {
        width: 600px !important;
    }

    .settings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

    @media (min-width: 992px) {

        .ems-reportSidebarCollapsed .ems-reportSidebar {
            width: 74px;
        }

        .ems-reportSidebarCollapsed .ems-maxSidebarContent--opacity {
            opacity: 0;
        }

        .ems-reportSidebarCollapsed .ems-reportSidebar .ems-maxSidebarContent {
            display: none;
        }

        .ems-reportSidebarCollapsed .ems-sidebarBtn, .ems-reportSidebarCollapsed .profile-info {
            display: flex !important;
            justify-content: center !important;
            height: 48px;
        }

        .ems-reportSidebarCollapsed .ems-reportSidebarContent {
            overflow-y: unset;
        }

        .ems-reportSidebarCollapsed .ems-reportsMainContent {
            margin-left: 80px;
        }

        .ems-reportSidebarCollapsed .ems-reportSidebarNavLink {
            justify-content: center;
            padding: 0.75rem;
        }

        .ems-reportSidebarCollapsed .ems-reportSidebarNavItem {
            margin-block: 0.25rem;
        }

        .ems-reportSidebarCollapsed .ems-reportSidebarTitle {
            justify-content: center;
        }

        .ems-subscribePlans__item {
            margin-top: 0;
        }

        .ems-freeTrail__rtDiv::before {
            content: "";
            height: 100%;
            border-left: 1px solid orange;
            display: inline-block;
            width: 8px;
            position: absolute;
            left: -6%;
        }

        .ems-signup-methods__text--lg {
            transform: rotate(270deg) translateX(-37%);
            left: -59%;
        }

        .ems-signup-methods__desc {
            transform: rotate(90deg);
            position: absolute !important;
            left: 50%;
            height: 24px !important;
            width: 24px;
            bottom: -7px;
            right: 50%;
        }

        .nav-item-header:has(.nav-dropdown):hover .nav-link::after {
            width: 23px;
            opacity: 1;
        }

        .nav-item-header .nav-link.ems-border-bottom-none::after {
            background-color: transparent;
        }

        .ems-navheader .nav-link.ems-border-bottom-none:hover, .ems-navheader .nav-link.ems-border-bottom-none:focus {
            transition: none;
        }

        .h-singleCaseStudy {
            width: 200px;
        }

        .h-caseStudy-listWrap {
            width: calc(100% - 200px);
        }

        .ems-drp-link__img {
            width: 50px;
            min-width: 50px;
            max-width: 50px;
            height: 45px;
            border-radius: 15px;
        }

        .ems-drp-casrStudyWrap {
            border-radius: 20px;
        }

        .ems-drp-casrStudyWrap__img {
            width: 100%;
            max-width: 100%;
            height: 80px;
            height: 100px;
        }

        .ems-drp-casrStudyWrap__img {
            height: 120px;
            margin-right: 0;
        }

        .ems-navheader .nav-link:is(:hover, :focus) {
            color: var(--neutral-900);
            transition: color 0.3s ease-in-out;
        }

        .nav-dropdown {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: 0.3s ease-in-out;
            pointer-events: none;
            left: 50%;
            transform: translateX(-50%);
            width: auto;
            padding-top: 20px;
        }

        .nav-dropdown {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: 0.3s ease-in-out;
            pointer-events: none;
            left: 38%;
            transform: translateX(-50%);
            width: auto;
            padding-top: 20px;
        }

        .nav-dropdown--sm {
            min-width: 334px;
            max-width: 334px;
        }

        .nav-dropdown--md {
            min-width: 750px;
            max-width: 750px;
        }

        .nav-dropdown--lg {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 720px;
        }

        .nav-dropdown--lg {
            width: 960px;
        }

            .nav-dropdown--lg .feature-container {
                min-height: 50vh;
                max-height: 70vh;
                overflow-y: auto;
            }

        .nav-item-header:hover .nav-dropdown {
            opacity: 1;
            z-index: 999;
            pointer-events: all;
        }

        .nav-item-header .nav-link::after {
            width: 0;
            height: 4px;
            left: 50%;
            bottom: -20px;
            transform: translateX(-50%);
            background-color: #6875F5;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        .nav-item-header .nav-link.active::after {
            width: 24px;
            opacity: 1;
        }

        .nav-item-header .nav-link:hover::after {
            width: 23px;
            opacity: 1;
        }

        .ems-h-dropdown {
            background-color: #ffffff;
            padding: 24px 24px 36px 24px;
            box-shadow: 0px 4px 40px 0px rgba(28, 100, 242, 0.0784313725);
            border-radius: 12px;
            border: 1px solid var(--secondary-100);
        }

        .ems-h-dropdown__body {
            padding-left: 12px;
        }

        .feature-container__item:nth-child(even) {
            border-left: 0.4px solid var(--neutral-400);
        }

        .feature-container__item:nth-child(odd) {
            padding-right: 20px;
        }

        .feature-container__item:nth-child(even) {
            padding-left: 20px;
        }

        .ems-drp-link-list__item {
            margin-bottom: 28px;
            width: 50%;
        }

        .sec-signup {
            height: var(--app-vh);
            overflow: hidden;
        }

        .ems-navheader .nav-link:is(:hover, :focus) {
            color: var(--neutral-900);
            transition: color 0.3s ease-in-out;
        }

        .ems-navlist {
            gap: 25px;
            margin: 0 auto;
        }

        .sub-nav a {
            margin-left: 15px;
        }

            .sub-nav a.active {
                color: var(--neutral-900);
                font-weight: 700;
            }

                .sub-nav a.active::after {
                    position: absolute;
                    content: "";
                    width: 24px;
                    height: 4px;
                    background-color: var(--Indigo-500);
                    bottom: -100%;
                    left: 50%;
                    transform: translateX(-50%);
                    border-top-left-radius: 8px;
                    border-top-right-radius: 8px;
                }

        .sub-nav-head {
            font-size: 18px;
        }

        .ems-signupContainer__form {
            width: 50%;
            padding: 30px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .ems-signupContainer__img {
            width: 50%;
            border-radius: 40px;
            height: calc(var(--app-vh) - 64px);
        }

        .ems-signuplogo {
            width: 90px;
        }

        .sec-contact {
            padding: 100px 0;
        }

        .ems-contact-form {
            padding-left: 36px;
        }

        .ems-contact-form--bg {
            padding: 40px 68px;
            border-radius: 32px;
        }

        .ems-contact-fields__item {
            margin-bottom: 24px;
        }

        .contact-us-head {
            margin-bottom: 48px;
        }

        .map-nav__item {
            padding: 0 30px;
        }

            .map-nav__item span {
                font-size: 20px;
                line-height: 28px;
            }

        .ems-table-1 th .thead {
            padding: 6px 34px;
        }

        .ems-table-2--serviceProvider th:first-child {
            min-width: 323px;
        }

        .ems-product-comparison-nav__item {
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            padding: 10px 20px;
        }

        .border-lg-start {
            border-left: 1px solid #dee2e6;
        }

        .fs-lg-6 {
            font-size: 1rem !important;
        }

        .fs-lg-7 {
            font-size: 0.875rem !important;
        }

        .fs-lg-8 {
            font-size: 0.75rem !important;
        }

        .flex-lg-grow-1 {
            flex-grow: 1 !important;
        }

        .ems-signupContainer .ems-contact-fields__item {
            margin-bottom: 15px !important;
        }

        .ems-offcanvas.offcanvas-width-lg {
            width: 900px;
        }

        .ems-setSignMinHeight {
            min-height: calc(var(--app-vh) - 130px);
            max-height: calc(var(--app-vh) - 130px);
        }

        .settings-grid {
            grid-template-columns: repeat(3, 1fr);
        }

        .border-lg-top-0 {
            border-top: unset !important;
        }

        .border-lg-bottom-0 {
            border-bottom: unset !important;
        }

        .border-lg-end {
            border-right: 1px solid #dee2e6 !important;
        }
    }

    @media (min-width: 1200px) {

        .page-topbar .nav-link {
            font-size: 0.813rem;
        }

        .display-xl-flex {
            display: flex;
        }

        .px-xl-6 {
            padding-left: 5rem !important;
            padding-right: 5rem !important;
        }

        .mb-xl-0 {
            margin-bottom: 0 !important;
        }

        .ems-orderSummary {
            position: sticky;
            top: 135px;
        }

        .h-singleCaseStudy {
            width: 264px;
        }

        .h-caseStudy-listWrap {
            width: calc(100% - 264px);
        }

        .ems-drp-link-lg__item {
            margin-bottom: 32px;
        }

        .ems-drp-casrStudyWrap__img {
            height: 140px;
        }

        .ems-drp-link__img {
            width: 75px;
            height: 70px;
            min-width: 75px;
            max-width: 75px;
            object-fit: cover;
            border-radius: 20px;
        }

        .nav-dropdown--lg {
            width: 1266px;
        }

            .nav-dropdown--lg .feature-container {
                min-height: 56vh;
                max-height: 70vh;
            }

        .feature-container__item:nth-child(odd) {
            padding-right: 32px;
        }

        .feature-container__item:nth-child(even) {
            padding-left: 32px;
        }

        .sub-nav a {
            margin-left: 32px;
        }

        .ems-signupContainer__form {
            padding: 60px 100px 60px 100px;
        }

        .ems-signuplogo {
            width: 134px;
        }

        .ems-table-1 tbody td .t-cell {
            padding: 0 34px;
        }

        .ems-cmTabtitle {
            font-size: 16px;
        }

        .ems-offcanvas-xl {
            width: 1050px !important;
        }

        .ep-listOfDocs-section {
            min-height: calc(var(--app-vh) - 73px);
            max-height: calc(var(--app-vh) - 73px);
            overflow-y: auto;
        }

        .fs-xl-11px {
            font-size: 0.688rem !important;
        }
    }

    @media (min-width: 1240px) {
        .page-topbar .nav-link {
            padding-inline: 1rem;
        }
    }

    @media (min-width: 1400px) {
        .nav-dropdown--lg {
            width: 1266px;
        }

        .ems-signupContainer__form {
            width: 50%;
            padding: 50px 150px;
        }
    }

    @media(min-width: 2000px) {
        .container-xxxl {
            max-width: 1920px;
        }

    }

@media (max-width: 576px) {
    .ems-coBrandingSidebar {
        width: 100%;
        max-width: 320px;
    }

    .ems-coBrandingSidebarOpen .ems-coBrandingSidebar {
        transform: translateX(0);
    }
}
        @media (max-width: 767px) {
           

            .signingplaceholder {
                width: 100% !important;
                height: 100% !important;
                overflow: hidden !important;
            }

                .signingplaceholder .base64img {
                    max-width: 100% !important;
                    max-height: 85% !important;
                    width: auto !important;
                    height: auto !important;
                    object-fit: contain !important;
                }

                .signingplaceholder .signature-loader .spinner-border {
                    width: 1rem;
                    height: 1rem;
                }

        .signedby-tag, .bottom-text {
            font-size: 0.35rem !important;
            line-height: 1.1 !important;
            width: 100%;
        }

            section {
                padding: 0 0.5rem;
            }

            .ems-loginWrap {
                background-color: var(--color-white);
                box-shadow: var(--ems-shadow-sm);
            }

            .ems-section-mbX-overflow {
                overflow-x: hidden;
            }

            .ems-drp-link__img {
                max-width: 46px;
            }

            .navbar-collapse.show {
                transform: translateX(0);
            }

            .mb-accordion.open::after {
                transform: translateY(-50%) rotate(-180deg) !important;
            }

            .nav-item-header .nav-link {
                border-top: 1px solid var(--neutral-200);
            }

            .ems-drp-link {
                align-items: center;
            }

            .sec-signup {
                padding-top: 100px;
            }

            .qx-brandlogo {
                width: 94px;
                height: 32px;
                z-index: 999;
                display: block;
            }

                .qx-brandlogo img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }

            .navbar-collapse {
                position: absolute;
                left: 0;
                right: 0;
                background: var(--white);
                padding: 10px 20px 40px 20px;
            }

                .navbar-collapse .nav-link {
                    color: #000000;
                }

                    .navbar-collapse .nav-link.active {
                        color: var(--secondary) !important;
                    }

            .ems-footer__right-wrap {
                row-gap: 40px;
            }

            .ems-footer-sub {
                text-align: center;
            }

            :is(.ems-mobilenav, .ems-footer-socialnav) {
                margin: 0 auto;
            }

            .ems-banner {
                padding-block: 2rem;
            }

            .ems-banner__row {
                flex-direction: column-reverse;
            }

            .ems-banner-illustration {
                height: 190px !important;
            }

            .ems-btns-group {
                margin-top: 1.2rem;
                flex-direction: column;
            }


            .ems-pricing-tabs {
                width: 100%;
                display: flex;
                justify-content: center;
            }

                .ems-pricing-tabs .nav-item {
                    width: 50%;
                }

                .ems-pricing-tabs .nav-link {
                    width: 100%;
                }

            .ems-subscribePlanType {
                padding-top: 37px;
            }

            .ems-subscribePlanType__item {
                font-size: 16px !important;
                font-weight: 600 !important;
                line-height: 22.4px !important;
            }

            .ems-save-tag--billedYearlly {
                position: absolute;
                top: 12px;
                right: 12px;
            }

            .ems-staticTabPlan .ems-btn {
                padding: 10px !important;
                font-size: 14px !important;
            }

            .ems-accordion-single__item {
                padding: 16px;
            }

            .ems-enterprise-planTitle {
                font-size: 24px;
                line-height: 28.8px;
                letter-spacing: 0;
            }

            .ems-table-1 {
                margin: 0 -20px 0 -24px;
                padding: 0 20px;
                overflow-x: scroll;
            }

                .ems-table-1::-webkit-scrollbar {
                    width: 6px;
                    height: 6px;
                }

            .product-comparison-table {
                border-top-right-radius: 0;
                border-right: 0;
            }

                .product-comparison-table table {
                    padding-right: 12px;
                }

                .product-comparison-table tr td {
                    min-width: 135px;
                    max-width: 135px;
                }

                    .product-comparison-table tr td:first-child {
                        min-width: 125px;
                        max-width: 125px;
                        text-overflow: ellipsis;
                    }

            .ems-staticTabTypelist {
                margin-left: 125px;
            }

            .ems-staticTabTypelist--pricing {
                margin-left: 0;
            }

            .ems-staticTabTypelist__item {
                min-width: 135px;
                max-width: 135px;
            }

            .ems-table-2 {
                margin-right: -30px;
                border-top: none;
                border-right: none;
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

                .ems-table-2 .mb-scroll {
                    padding-right: 12px;
                }

                .ems-table-2 table th:last-child {
                    border-top-right-radius: 12px;
                }

            .ems-table-3 {
                margin-right: -30px;
            }

                .ems-table-3 table th {
                    min-width: 200px;
                }

                    .ems-table-3 table th::after {
                        top: 12px;
                        height: calc(100% - 24px);
                    }

                .ems-table-3 table tbody tr td::after {
                    top: 16px;
                    height: calc(100% - 32px);
                }

            .pe-sm-0 {
                padding-right: 0;
            }

            .me-sm-0 {
                margin-right: 0;
            }

            .pl-mb-24 {
                padding-left: 24px;
            }

            .p-mb-0 {
                padding: 0;
            }

            .mobile-menu {
                min-width: 100%;
                right: -100%;
            }
        }

    @media (max-width: 768px) {

        .ems-mob-extraspace {
            margin-top: 3.6rem;
        }

            .ems-mob-w100 {
                width: 100%;
            }

            .flex-mob-reverse {
                flex-direction: column-reverse;
            }

            .ems-navheader__container {
                padding-inline: 1.2rem;
            }

            .navbar-toggler {
                padding-right: 0.4rem;
            }

            .ems-mob-grid2 {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
            }

            .ems-btn-mobfull {
                width: 100%;
            }
        }

        @media (max-width: 991px) {

            .ems-drp-smallimg {
                width: 48px;
                height: 48px;
                border-radius: 8px;
                margin-right: 12px;
                padding: 0 !important;
            }

                .ems-drp-smallimg img {
                    height: 100%;
                    object-fit: cover;
                    border-radius: 8px;
                }

            .ems-h-login {
                margin-top: auto;
                position: absolute;
                bottom: 60px;
                left: 20px;
                z-index: 99;
                background: #ffffff;
                width: calc(100% - 40px);
            }

                .ems-h-login button {
                    width: calc(50% - 8px);
                    padding: 12px 10px !important;
                }

            .ems-dropdown .item:last-of-type {
                margin-bottom: 0;
            }

            .ems-dropdown .item {
                padding: 4px 8px;
                border-radius: 8px;
                margin-bottom: 16px;
            }

                .ems-dropdown .item.selected, .ems-dropdown .item.selected a {
                    background-color: var(--primary-050) !important;
                }

            .ems-drp-casrStudyWrap {
                align-items: center;
            }

            .ems-navheader .nav-link {
                font-size: 16px;
                padding: 21px 0 !important;
            }

            .ems-navlist {
                width: 100%;
                height: calc(var(--app-vh) - 180px);
                overflow-x: hidden;
                overflow-y: auto;
            }

                .ems-navlist::-webkit-scrollbar {
                    display: none;
                }

            .ems-navlist {
                -ms-overflow-style: none; /* IE and Edge */
                scrollbar-width: none; /* Firefox */
            }

            .navbar-collapse {
                position: fixed;
                left: 0;
                top: 0;
                transform: translateX(-100%);
                height: 100%;
                overflow-y: auto;
                background: var(--white);
                padding: 10px 20px 40px 20px;
                display: flex !important;
                flex-direction: column;
                transition: 0.3s ease-in-out;
                align-items: start;
                width: 100%;
                margin-top: 36px;
                z-index: 999;
            }

            .nav-dropdown {
                display: none;
            }

                .nav-dropdown.open {
                    display: block;
                }

            .mb-accordion::after {
                content: url("https://d27raczcaj0ncn.cloudfront.net/default/down-arrow.svg") !important;
                right: 2px;
                top: 50%;
                transform: translateY(-50%) rotate(0);
                transition: 0s !important;
            }

            .feature-container__item {
                margin-bottom: 30px;
            }

            .ems-drp-link p {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .ems-navheader .nav-link {
                font-size: 16px;
                padding: 21px 0 !important;
            }

            .ems-navlist {
                -ms-overflow-style: none; /* IE and Edge */
                scrollbar-width: none; /* Firefox */
                padding-bottom: 100px;
            }

            .sub-nav a {
                padding: 4px 8px;
                border-radius: 8px;
                margin-bottom: 16px;
            }

                .sub-nav a:last-of-type {
                    margin-bottom: 0;
                }

                .sub-nav a.active::after {
                    display: none;
                    content: none;
                }

            .sub-nav-dropdown__body {
                position: absolute;
                right: 12px;
                padding: 12px;
                border-radius: 12px;
                background-color: #ffffff;
                opacity: 0;
                z-index: -9;
                pointer-events: none;
                transition: 0.3s ease-in-out;
            }

            .sub-nav-dropdown__body a.active {
                background: #ebf5ff;
                color: #111928;
                font-weight: 700;
            }

            .ems-signupContainer__img {
                display: none !important;
                opacity: 0 !important;
                visibility: hidden !important;
            }

            .mb-scroll {
                overflow-x: auto;
            }

            .ml-md-148 {
                margin-left: 148px;
            }
        }

        @media (max-width: 991.98px) {
            .ems-reportSidebar {
                width: 100%;
                max-width: 320px;
            }

            .ems-reportsMainContent {
                margin-left: 0;
            }

            .ems-reportSidebarOpen .ems-reportSidebar {
                transform: translateX(0);
            }
        }

        @media (min-width: 576px) and (max-width: 991.98px) {
            .preview-content .ems-coBrandingSidebar {
                transform: none;
            }
        }

        @media (max-width: 992px) {

            .alertWindow .alertContent {
                left: 5%;
                width: 90%;
                top: 25%;
            }

            .progress-container {
                padding: 20px;
            }

            .step {
                max-width: none;
            }

                .step:not(:last-child)::before {
                    top: 11px;
                    left: calc(50% + 20px);
                    width: calc(100% - 40px);
                }

            .step-circle {
                width: 18px;
                height: 18px;
                font-size: 0.5rem;
            }
        }

        @media (max-width: 1200px) {
            .sidebar-body-section.documents-list {
                display: flex;
                align-items: center;
                flex-wrap: nowrap;
                max-width: 100%;
                overflow-x: auto;
            }

            .single-documents-list .documents-body {
                min-width: 100%;
            }

            .multiple-documents-list .documents-body {
                min-width: 70%;
                border-right: 2px solid #dbdbdb;
            }

            .controls-body-section {
                display: flex;
                padding: 4px 0px 45px;
                background-color: var(--ems-bg-body-tertiary-color);
                width: calc(100% - 32px);
                max-width: 100%;
                overflow-x: auto;
                position: fixed;
                bottom: 45px;
                left: 16px;
                right: 8px;
                z-index: 1029;
                border-radius: 12px;
            }

                .controls-body-section .controls-subbody-section {
                    flex-wrap: nowrap;
                }

                .controls-body-section .labelField, .controls-body-section .qr-labelField {
                    display: flex;
                    justify-content: center;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    padding: 7px;
                    width: 32px;
                    height: 32px;
                    cursor: pointer;
                    flex-direction: column-reverse;
                    align-items: center;
                    position: relative;
                    margin: 0 12px;
                    min-width: 32px;
                }

                .controls-body-section .labelField.h-bp-labelField {
                    height: 66px;

                }

                .controls-body-section .labelField .drag-name-section, .controls-body-section .qr-labelField .drag-name-section {
                    display: flex;
                    align-items: center;
                    gap: 5px;
                    position: absolute;
                    bottom: -20px;
                }

                .controls-body-section .labelField .drag-name-section .drag-icon, .controls-body-section .qr-labelField .drag-name-section .drag-icon {
                    display: none;
                }

            .labelField .control-img-section img, .qr-labelField .control-img-section img {
                width: 16px;
                height: 16px;
            }

            .d-list-item {
                display: list-item;
            }

            .ems-documentListWrap {
                min-height: 34px;
                max-height: 80px;
            }
        }

        @media (min-width: 768px) and (max-width: 991px) {
            .navbar-collapse {
                width: 375px;
                right: 0 !important;
                left: auto !important;
                transform: translateX(100%) !important;
                margin-top: 0;
                box-shadow: 0px 4px 30px 0px rgba(28, 100, 242, 0.1019607843);
            }

                .navbar-collapse.show {
                    transform: translateX(0) !important;
                }
        }

        .min-width-auto {
            min-width: auto !important;
        }

        .fileinput-button {
            position: relative;
        }

            .fileinput-button input[type="file"] {
                position: absolute;
                top: 0;
                right: 0;
                width: 100%;
                opacity: 0;
                height: 100%;
                cursor: pointer;
            }

        .border-dashed {
            border: 1px dashed #d1d5db;
        }

        .upload-doc-jstree .jstree-container-ul {
            max-height: 18rem;
            overflow-y: auto;
        }

        .modal .choices__list--dropdown, .modal .choices__list[aria-expanded] {
            z-index: 1066;
        }

        .modal .choices__inner {
            padding: 12px 7.5px 3.75px;
        }
        /*    .diagram-container {
        background-color: #f1f1f1;
        display: block;
    }*/

        .modal .content.fluid, .modal_content-list, .modal_content-noPad, .modal_content.fluid {
            margin: 0;
            padding: 0;
        }

        .diagram-container table {
            width: 100%;
        }

        .diagram-row-contents {
            padding: 10px 0px;
        }

        .diagram-row:last-of-type {
            border-bottom: none;
        }

        .diagram-row {
            border-bottom: 1px solid #e5e5e5;
        }

        .diagram-row-caption {
            font-size: 15px;
            color: #555;
            line-height: 35px;
            margin: 0px;
            padding: 0px 15px;
            text-align: center;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 160px;
            white-space: nowrap;
        }

        .diagram-title-caption {
            font-size: 16px;
            color: #555;
            line-height: 35px;
            padding: 5px 15px;
            text-align: left;
            border-bottom: 1px solid #e5e5e5;
            background: #eeeeee;
        }

        .diagram-signer {
            position: relative;
        }

        .thumbnail-wrapper {
            position: relative;
        }

            .thumbnail-wrapper.signer {
                position: relative;
                height: 55px;
            }

        .diagram-row-contents .sender:after, .diagram-row-contents .complete:before {
            content: "";
            background: url("https://d27raczcaj0ncn.cloudfront.net/default/sod-line-arrow.png") no-repeat center center;
            height: 55px;
            width: 35%;
            right: 0%;
            position: absolute;
            top: -2px;
        }

        .diagram-row-contents .complete:before {
            left: 0px;
        }

        .thumbnail-wrapper .thumbnail-line {
            border-top: 2px dashed #717171;
            position: absolute;
            display: block;
            width: 100%;
            top: 25px;
        }

            .thumbnail-wrapper .thumbnail-line:after {
                content: "";
                left: 50%;
                height: 55px;
                border-right: 2px dashed #717171;
                display: block;
                position: absolute;
                top: 0px;
            }

        .diagram-signer .signer:before,
        .diagram-signer .signer:after {
            content: "";
            height: 55px;
            background: #717171;
            width: 2px;
            display: block;
            position: absolute;
            top: 25px;
        }

        .diagram-signer .signer:after {
            right: 0px;
        }

        .diagram-signer .signer:last-child:before, .diagram-signer .no-leftline:before,
        .diagram-signer .signer:last-child:after, .diagram-signer .signer:last-child .thumbnail-line:after {
            display: none;
        }

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

        .dashboard-signerdiagram {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0 auto;
            font-weight: bold;
        }

        .thumbnail-wrapper {
            display: block;
            margin: 0;
            padding: 5px 0;
            text-align: center;
        }

        .thumbnail-contents.recipient-completed {
            background-color: #690;
        }

            .thumbnail-contents.recipient-completed *, .thumbnail-contents.recipient-completed .completion-icon::before {
                color: #fff;
            }

        .thumbnail-wrapper.complete:only-child {
            background-position: -187px -30px
        }

        .thumbnail-contents.recipient-not-recieved {
            background-color: #d9e1f1;
            border-color: #b8bfcc;
        }

        .thumbnail-contents {
            background-color: #f36f21;
            border: 2px solid rgba(0,0,0,.1);
            border-radius: 6px;
            display: inline-block;
            height: 39px;
            line-height: 36px;
            margin: 3px;
            width: 50px;
            position: relative;
            z-index: 999;
        }

            .thumbnail-contents u {
                text-decoration: none;
            }

            .thumbnail-contents .fa-check {
                font-size: 18px;
            }

            .thumbnail-contents .user-status {
                position: absolute;
                right: -10px;
                top: -8px;
                background: #000;
                padding: 0px;
                display: flex;
                line-height: 10px;
                font-weight: normal;
                border-radius: 100px;
                font-size: 12px;
                width: 20px;
                height: 20px;
                justify-content: center;
                align-items: center;
            }

        .strong, .text-strong, .u-text-strong, strong {
            font-weight: 700;
        }

        .thumbnail-contents.recipient-not-recieved *, .thumbnail-contents.recipient-not-recieved .completion-icon::before {
            color: #b8bfcc;
        }

        .complete .thumbnail-contents i {
            right: auto;
            left: -50%;
        }

        .diagram-row-contents .series-sign:before {
            display: none;
        }

        .diagram-row-contents .series-sign:after {
            display: none;
        }

        .thumbnail-wrapper .thumbnail-noline:after {
            content: "";
            left: 50%;
            height: 60px;
            background: #717171;
            width: 2px;
            display: block;
            position: absolute;
            top: 10px;
        }

        .diagram-row-contents .series-sender:after {
            width: 100%;
            right: -50%;
            position: absolute;
        }

        .diagram-row-contents .no-display:after {
            display: none;
        }

        .diagram-row-contents .series-completed:before {
            content: "";
            width: 100%;
            left: -50%;
            position: absolute;
        }

        .wfstatusBox {
            margin: 5px 0 0;
            text-align: right;
        }

            .wfstatusBox .wflabel span {
                width: 15px;
                height: 15px;
                display: inline-block;
                margin: -3px 3px 0px 0px;
                vertical-align: middle;
                border-radius: 0.25rem;
            }
            /*        .wfstatusBox .wflabel {
            margin-right: 15px;
            font-size: 13px;
            margin-bottom: 5px;
            display: inline-block;
        }*/

            .wfstatusBox .pending {
                background: #f36f21;
            }

            .wfstatusBox .notyetstarted {
                background: #969696;
            }

            .wfstatusBox .recalled {
                background: #0066cc;
            }

            .wfstatusBox .completed {
                background: #669900;
            }

            .wfstatusBox .declined {
                background: #cc3333;
            }

            .wfstatusBox .delete {
                background: #ff0000;
            }

            .wfstatusBox .carboncopy {
                background: #f1f1f1;
                border: 2px solid #de07f4;
            }

            .wfstatusBox .delegation, .wfstatusBox .reviewer, .wfstatusBox .carboncopy, .wfstatusBox .signer {
                background: #000 !important;
                border: none !important;
                color: #fff;
                border-radius: 100%;
                position: relative;
                height: 18px !important;
                width: 18px !important;
            }

                .wfstatusBox .delegation:before, .wfstatusBox .reviewer:before, .wfstatusBox .carboncopy:before, .wfstatusBox .signer:before {
                    display: flex;
                    font-size: 10px;
                    height: 18px;
                    justify-content: center;
                    align-items: center;
                }

                .wfstatusBox .delegation:before {
                    content: 'D';
                }

                .wfstatusBox .reviewer:before {
                    content: 'R';
                }

                .wfstatusBox .carboncopy:before {
                    content: 'CC';
                }

                .wfstatusBox .signer:before {
                    content: 'S';
                }
        /*    .signer-order-status {
        text-align: left;
        padding: 10px 20px;
        margin: 0 0 5px;
        background: #f9f9f9;
        border-bottom: 1px solid #e2e2e2;
    }*/

        .sod-completed {
            background-color: #690;
            color: #ffffff;
        }

        .cc-completed {
            background-color: #690;
            color: #ffffff;
            border: 2px solid #de07f4;
        }

        .cc-pending {
            background-color: #f36f21;
            color: #ffffff;
            border: 2px solid #de07f4;
        }

        .sod-pending {
            background-color: #f36f21;
            color: #ffffff;
        }

        .sod-notstarted {
            background-color: #969696;
            color: #ffffff;
        }

        .sod-declined {
            background-color: #c33;
            color: #ffffff;
        }

        .sod-recalled {
            background-color: #06c;
            color: #ffffff;
        }

        .sod-deleted {
            background-color: #f00000;
            color: #ffffff;
        }

        .sod-delegation {
            border-color: #673695;
            color: #fff;
        }

        .del-completed {
            background-color: #690;
            color: #ffffff;
            border-color: #673695;
        }

        .del-declined {
            background-color: #c33;
            color: #ffffff;
            border-color: #673695;
        }
        /* For Chromium-based Edge */
        input[type="password"]::-ms-reveal,
        input[type="password"]::-ms-clear {
            display: none;
        }
        .toast-btn-close {
            position: absolute;
            right: 10px;
            top: 10px;
            font-size: 10px;
        }

        .bg-light-green {
            background: #b5e1c6;
        }

        .bg-light-red {
            background: #f1c4cb;
        }

        .dt-inline-loader td {
            border-bottom: none !important;
            padding: 26px 0;
        }
        /* Signature placeholder loader */
        .signingplaceholder {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            text-align: left;
        }

            .signingplaceholder .base64img {
                display: block;
            }

            .signingplaceholder .signature-loader {
                position: absolute;
                top: 35%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 1;
            }

                .signingplaceholder .signature-loader .spinner-border {
                    width: 1.2rem;
                    height: 1.2rem;
                }


/* Smooth header column width transitions */
.dataTables_scrollHead table thead th {
    transition: width 0.5s ease, min-width 0.5s ease;
}

.dataTables_scrollBody table tbody td {
    transition: width 0.5s ease, min-width 0.5s ease;
}

/* Smooth the scroll containers resizing */
.dataTables_scrollHead,
.dataTables_scrollBody {
    transition: width 0.5s ease;
}

/* Body: always show horizontal scrollbar so it's visible */
.dataTables_scrollBody {
    overflow-x: scroll !important;
    overflow-y: auto !important;
}

.custom-theme-hover {
    position: relative;
    display: inline-block;
}

.custom-theme-label {
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.custom-theme-tooltip {
    display: none;
    position: absolute;
    top: 120%;
    left: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid #ccc;
    padding: 8px 10px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    white-space: nowrap;
    min-width: 260px;
}

.custom-theme-hover:hover .custom-theme-tooltip {
    display: block;
}

.circular-timer {
    position: relative;
    width: 140px;
    height: 140px;
    margin: auto;
}

.circular-timer svg {
    transform: rotate(0deg);
}

.timer-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    text-align: center;
}

.timer-text span {
    font-size: 28px;
    color: #212529;
}


/* -------------------- Login Page -------------------- */

:root {
    --orange: #f97316;
    --orange-deep: #ea580c;
    --blue: #2563eb;
    --blue-deep: #1d4ed8;
    --white: #ffffff;
    --s50: #f8fafc;
    --s100: #f1f5f9;
    --s200: #e2e8f0;
    --s300: #cbd5e1;
    --s400: #94a3b8;
    --s500: #64748b;
    --s600: #475569;
    --s700: #334155;
    --s800: #1e293b;
    --green: #10b981;
    --red: #ef4444;
}

.layout {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    height: var(--app-vh);
}

/* ─────────────────────────────────────
       LEFT PANEL
    ───────────────────────────────────── */
.ems-loginLayout-left {
    background: linear-gradient(150deg, #fff9f5 0%, #fef3e8 30%, #f0f7ff 65%, #eef4ff 100%);
    border: 1px solid rgba(249,115,22,0.1);
    min-height: calc(var(--app-vh) - 128px);
}

/* Subtle dot texture */
.ems-loginLayout-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(249,115,22,0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
}

/* Soft colour wash */
.ems-loginGradient {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    pointer-events: none;
}

.ems-loginGradient--left {
    width: 360px;
    height: 360px;
    background: radial-gradient(circle,rgba(249,115,22,0.15) 0%,transparent 70%);
    top: -100px;
    left: -80px;
    animation: wf 14s ease-in-out infinite;
}

.ems-loginGradient--right {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle,rgba(37,99,235,0.11) 0%,transparent 70%);
    bottom: -60px;
    right: -60px;
    animation: wf 17s ease-in-out infinite;
    animation-delay: -6s;
}

@keyframes wf {
    0%,100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(16px,-22px);
    }
}

/* ── SINGLE EMSIGNER ICON — ghost outline ── */
.shield-wrap {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 310px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.18;
}

    .shield-wrap svg {
        width: 100%;
        height: auto;
    }

/* Brand */
.brand {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 11px;
    animation: dn .8s cubic-bezier(.22,1,.36,1) both;
}

.brand-img {
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 2px 8px rgba(249,115,22,0.3));
}

.brand-name {
    font-size: 21px;
    font-weight: 700;
    color: var(--s800);
    letter-spacing: -.3px;
}

    .brand-name b {
        color: var(--orange);
        font-weight: 800;
    }

/* Hero text */


.pill {
    background: rgba(249,115,22,0.09);
    border: 1px solid rgba(249,115,22,0.22);
    color: var(--orange-deep);
    letter-spacing: .7px;
    animation: dn .8s .07s cubic-bezier(.22,1,.36,1) both;
}

h1 {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--s800);
    margin-bottom: 16px;
/*    animation: dn .8s .13s cubic-bezier(.22,1,.36,1) both;*/
}

h1 .grad {
    background: linear-gradient(90deg, var(--orange), var(--blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sub {
    animation: dn .8s .19s cubic-bezier(.22,1,.36,1) both;
}

.stats {
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(249,115,22,0.13);
    animation: dn .8s .25s cubic-bezier(.22,1,.36,1) both;
}

.stat:last-child {
    border-right: none;
}

.stat-n {
    color: var(--s800);
    letter-spacing: -.5px;
}

.stat-n span {
    color: var(--orange);
}

.stat-l {
    color: var(--s400);
    letter-spacing: .8px;
}

/* Chips */
.chips {
    animation: dn .8s .37s cubic-bezier(.22,1,.36,1) both;
}

.chip {
    background: rgba(255,255,255,.8);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0,0,0,.07);
    color: var(--s600);
    letter-spacing: .2px;
    cursor: default;
    transition: border-color .25s, background .25s, transform .2s;
}

    .chip:hover {
        border-color: var(--orange);
        background: #fff;
        transform: translateY(-1px);
    }

    .chip svg {
        width: 11px;
        height: 11px;
        color: var(--orange);
        flex-shrink: 0;
    }

/* ─────────────────────────────────────
       RIGHT PANEL
    ───────────────────────────────────── */
.right {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 52px;
    position: relative;
    overflow: hidden;
    box-shadow: -4px 0 28px rgba(0,0,0,.05);
}

    .right::before {
        content: '';
        position: absolute;
        top: -90px;
        right: -90px;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(249,115,22,0.05) 0%,transparent 70%);
        pointer-events: none;
    }

    .right::after {
        content: '';
        position: absolute;
        bottom: -70px;
        left: -70px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(37,99,235,0.04) 0%,transparent 70%);
        pointer-events: none;
    }

.form-box {
    width: 100%;
    max-width: 390px;
    position: relative;
    z-index: 1;
}

/* Steps */
.steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 26px;
    animation: up .7s .04s cubic-bezier(.22,1,.36,1) both;
}

.st {
    height: 4px;
    border-radius: 2px;
    background: var(--s200);
}

    .st.done {
        width: 24px;
        background: var(--green);
    }

    .st.now {
        width: 38px;
        background: var(--orange);
    }

    .st.next {
        width: 24px;
    }

/* Lock */
.lock-wrap {
    text-align: center;
    margin-bottom: 22px;
    animation: up .7s .09s cubic-bezier(.22,1,.36,1) both;
}

.lock-ring {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orange), var(--orange-deep));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 9px rgba(249,115,22,0.09), 0 8px 26px rgba(249,115,22,0.28);
    animation: rp 3s ease-in-out infinite;
}

@keyframes rp {
    0%,100% {
        box-shadow: 0 0 0 9px rgba(249,115,22,0.09),0 8px 26px rgba(249,115,22,0.28);
    }

    50% {
        box-shadow: 0 0 0 14px rgba(249,115,22,0.05),0 12px 34px rgba(249,115,22,0.38);
    }
}

.lock-ring svg {
    width: 25px;
    height: 25px;
    fill: #fff;
}

/* Headings */
.fhead {
    text-align: center;
    margin-bottom: 26px;
    animation: up .7s .14s cubic-bezier(.22,1,.36,1) both;
}

.fh1 {
    font-size: 21px;
    font-weight: 700;
    color: var(--s800);
    letter-spacing: -.4px;
    margin-bottom: 6px;
}

.fh2 {
    font-size: 13px;
    color: var(--s400);
}

    .fh2 strong {
        color: var(--s600);
        font-weight: 600;
    }

/* Cred row */
.cred-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--s500);
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 16px;
    animation: up .7s .19s cubic-bezier(.22,1,.36,1) both;
}

    .cred-row svg {
        width: 13px;
        height: 13px;
        color: var(--s400);
    }

.cline {
    flex: 1;
    height: 1px;
    background: var(--s200);
}

/* Fields */
.fg {
    margin-bottom: 14px;
    animation: up .7s cubic-bezier(.22,1,.36,1) both;
}

    .fg:nth-of-type(4) {
        animation-delay: .23s;
    }

    .fg:nth-of-type(5) {
        animation-delay: .28s;
    }

.fl {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--s600);
    margin-bottom: 6px;
    letter-spacing: .2px;
}

.fw {
    position: relative;
}

.ficon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    transition: color .25s;
}

    .ficon svg {
        width: 15px;
        height: 15px;
        color: var(--s300);
        transition: color .25s;
    }

.fw:focus-within .ficon svg {
    color: var(--orange);
}

.fi {
    width: 100%;
    height: 47px;
    padding: 0 42px;
    border: 1.5px solid var(--s200);
    border-radius: 11px;
    background: var(--s50);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    color: var(--s800);
    outline: none;
    transition: border-color .25s, background .25s, box-shadow .25s;
}

    .fi::placeholder {
        color: var(--s300);
        font-size: 13px;
    }

    .fi:focus {
        border-color: var(--orange);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(249,115,22,0.09);
    }

    .fi.err {
        border-color: var(--red);
        box-shadow: 0 0 0 4px rgba(239,68,68,0.08);
        animation: shake .4s both;
    }

@keyframes shake {
    10%,90% {
        transform: translateX(-1px);
    }

    20%,80% {
        transform: translateX(2px);
    }

    30%,50%,70% {
        transform: translateX(-3px);
    }

    40%,60% {
        transform: translateX(3px);
    }
}

.fbar {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--orange), var(--orange-deep));
    transition: width .35s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}

.fi:focus ~ .fbar {
    width: calc(100% - 20px);
}

.pw-btn {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--s300);
    transition: color .2s;
    display: flex;
    align-items: center;
}

    .pw-btn:hover {
        color: var(--s500);
    }

    .pw-btn svg {
        width: 15px;
        height: 15px;
    }

.ferr {
    font-size: 11px;
    color: var(--red);
    margin-top: 4px;
    display: none;
}

/* Location */
.loc {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg,#ecfdf5,#d1fae5);
    border: 1.5px solid #a7f3d0;
    border-radius: 11px;
    padding: 10px 14px;
    margin-bottom: 16px;
    animation: up .7s .33s cubic-bezier(.22,1,.36,1) both;
}

.ldot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.2);
    animation: lp 2s ease-in-out infinite;
}

@keyframes lp {
    0%,100% {
        box-shadow: 0 0 0 3px rgba(16,185,129,0.2);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(16,185,129,0.07);
    }
}

.ltxt {
    font-size: 12.5px;
    font-weight: 500;
    color: #065f46;
}

.shim {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
    transform: skewX(-18deg);
    animation: shim 4s ease-in-out infinite 2s;
}

@keyframes shim {
    0% {
        left: -100%
    }

    50% {
        left: 160%
    }

    100% {
        left: 160%
    }
}

.btn-sign.loading .blbl {
    opacity: 0;
}

.btn-sign.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* OR */
.or-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    animation: up .7s .43s cubic-bezier(.22,1,.36,1) both;
}

.orl {
    flex: 1;
    height: 1px;
    background: var(--s200);
}

.ort {
    font-size: 11px;
    color: var(--s400);
    font-weight: 500;
}

/* Microsoft */
.btn-ms {
    width: 100%;
    height: 47px;
    background: #fff;
    border: 1.5px solid var(--s200);
    border-radius: 11px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--s700);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: border-color .25s, background .25s, transform .15s, box-shadow .25s;
    margin-bottom: 6px;
    animation: up .7s .48s cubic-bezier(.22,1,.36,1) both;
}

    .btn-ms:hover {
        border-color: #0078d4;
        background: #f0f8ff;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,120,212,0.1);
    }

.ms-sub {
    text-align: center;
    font-size: 11px;
    color: var(--s400);
    margin-bottom: 20px;
    animation: up .7s .53s cubic-bezier(.22,1,.36,1) both;
}

/* Footer */
.ffoot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding-top: 14px;
    border-top: 1px solid var(--s100);
    animation: up .7s .58s cubic-bezier(.22,1,.36,1) both;
}

    .ffoot svg {
        width: 13px;
        height: 13px;
        color: var(--s300);
    }

    .ffoot span {
        font-size: 11px;
        color: var(--s400);
    }

@keyframes dn {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media(max-width:860px) {
    .layout {
        grid-template-columns: 1fr;
    }

    .left {
        display: none;
    }

    .right {
        padding: 32px 24px;
    }
}

/* Toast — allow long text (e.g. filenames) to wrap inside the toast */
#toastContainer .toast {
    max-width: 400px;
    width: auto;
    min-width: 280px;
}

#toastContainer .toast .toast-message {
    word-break: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

/* Toast containers — ensure they stay above sidebar (z-index: 2) and header (z-index: 1030) */
#toastContainer.toast-container {
    z-index: 11000 !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
}

#confirmToastContainer .toast {
    max-width: 400px;
    width: auto;
    min-width: 280px;
}

#confirmToastContainer .toast .toast-body {
    word-break: break-word;
    overflow-wrap: break-word;
}

#confirmToastContainer.toast-container {
    z-index: 11100 !important;
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    top: auto !important;
}

.funnel-stage {
    margin: 0.5rem auto;
    padding: 0.75rem;
    color: white;
    text-align: center;
    border-radius: 4px;
    font-weight: 500;
}

.ems-custom-tooltip .tooltip-inner {
    max-width: 310px;
    border-radius: 0.75rem;
}

/* ===== Dashboard Initial Loader ===== */
.esign-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.esign-loader-logo {
    max-height: 36px;
}

.esign-loader-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.esign-loader-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bs-primary, #3b82f6);
    opacity: 0.35;
    animation: esignDotPulse 0.9s ease-in-out infinite;
}

.esign-loader-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.esign-loader-dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes esignDotPulse {
    0%, 80%, 100% { opacity: 0.35; transform: scale(1); }
    40% { opacity: 1; transform: scale(1.25); }
}

/* Stamp Duty Payment Method Options */
.stamp-duty-option {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
}

.stamp-duty-radio {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    pointer-events: none !important;
}

.stamp-duty-option .stamp-duty-check {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 50%;
    border: 2px solid #D1D5DB;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}

.stamp-duty-option:hover {
    border-color: #1A56DB !important;
    background-color: rgba(26, 86, 219, 0.04);
}

.stamp-duty-option:has(input:checked) {
    border-color: #1A56DB !important;
    background-color: rgba(26, 86, 219, 0.04);
    box-shadow: 0 0 0 1px #1A56DB;
}

.stamp-duty-option:has(input:checked) .stamp-duty-check {
    border-color: #1A56DB;
    background-color: #1A56DB;
}

.stamp-duty-option:has(input:checked) .stamp-duty-check::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 8px;
    color: #fff;
}

/* Sign Type Selection (Set Signatories) */
.sign-type-check {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 50%;
    border: 2px solid #D1D5DB;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}

.sign-type-option {
    transition: background-color 0.15s ease-in-out;
}

.sign-type-option:hover {
    background-color: rgba(26, 86, 219, 0.04);
}

.sign-type-option:has(.form-check-input:checked) .sign-type-check {
    border-color: #1A56DB;
    background-color: #1A56DB;
}

.sign-type-option:has(.form-check-input:checked) .sign-type-check::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 8px;
    color: #fff;
}

/* Stamp Duty Payer Button */
.btn-stamp-duty-payer {
    transition: all 0.15s ease-in-out;
    font-size: 0.75rem;
}

.btn-stamp-duty-payer:hover {
    color: #1A56DB !important;
}

.btn-stamp-duty-payer.active {
    color: #1A56DB !important;
    font-weight: 600;
}

.btn-stamp-duty-payer.active i {
    color: #1A56DB;
}

.ems-newKycOption-wrap:has(.ems-newKycOption-input:disabled) {
    background-color: #f8f9fa !important;
}

.ems-newKycOption-input:disabled ~ .form-check-label, .ems-newKycOption-input[disabled] ~ .form-check-label {
    opacity: 1;
}

.ems-newKycOption-wrap:has(.ems-newKycOption-input:disabled) .unverified-kyc-text {
    opacity: 0.6;
}

.ems-logo-transparent {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 4px 8px;
}

@media print {
    body * { visibility: hidden; }
    #addDocumentlog,
    #addDocumentlog * { visibility: visible; }
    #addDocumentlog {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        transform: none !important;
        border: none !important;
        box-shadow: none !important;
        display: block !important;
        overflow: visible !important;
    }
    #addDocumentlog .offcanvas-body {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
        display: block !important;
    }
    .doctrail {
        max-height: none !important;
        overflow: visible !important;
        height: auto !important;
    }
    #btnPrintDoclog,
    #addDocumentlog .btn-close { visibility: hidden !important; }
}