@media screen and (max-width: 2560px) {
    input.OTPInput {
        flex: 1 1 calc(100% / 6 - 30px);
        max-width: calc(100% / 6 - 26px);
    }

    .accordsign-logo img {
        width: inherit;
    }

    .settings-header {
        padding: 24px 30px 30px 0px;
    }

    .search-section {
        margin: 10px auto;
    }

    .plan-main-body {
        width: calc(100% - 225px);
    }

    .table-col-width {
        min-width: -webkit-fill-available;
        width: -moz-available;
    }
}

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

    .otp-right {
        padding: 50px 64px;
    }

    input.OTPInput {
        flex: 1 1 calc(100% / 6 - 30px);
        max-width: calc(100% / 6 - 26px);
    }

    .get-started-popup {
        padding: 12px 40px;
        margin: 0 120px;
        height: fit-content;
        align-items: center;
    }

    .get-started-popup-content {
        gap: 30px;
    }

    h1.popup-title {
        font-size: 24px;
    }

    .sidebar.collapsed {
        padding: 0px 15px 0px 15px;
        width: 115px;
    }

    .search-section {
        margin: 0px;
    }

    .profile-right {
        gap: 25px;
    }

    .settings-header {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .signature-done-section {
        margin: auto 20%;
    }

    .document-body-top {
        gap: 24px;
    }

    .document-content-text p {
        font-size: 14px;
    }
}

@media screen and (max-width: 1450px) {
    .remember-me a {
        font-size: 14px;
    }

    .btn-google,
    .btn-microsoft {
        font-size: 14px;
        border-radius: 7px;
        padding: 6px 10px;
    }

    .form-group p {
        font-size: 14px;
    }

    .formCompanyGroup {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
    }

    input.OTPInput {
        flex: 1 1 calc(100% / 6 - 30px);
        max-width: calc(100% / 6 - 26px);
    }

    .otp-right {
        padding: 50px 64px;
    }

    .text-section h1 {
        font-size: 20px;
    }

    td.border {
        border: none !important;
        padding: 5px 5px !important;
    }

    tbody,
    td,
    tfoot,
    th,
    thead,
    tr {
        font-size: 14px;
    }

    .create-signature {
        max-width: 960px;
    }

    .signature-type-1,
    .signature-type-2,
    .signature-type-3 {
        font-size: 32px !important;
    }

    .navigation-menu-inner {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .arrow-scroll {
        right: 8px;
    }

    .create-signature-inner-step3 {
        padding-top: 20px;
    }

    .create-signature-inner-step3 {
        padding-top: 24px;
    }

    .profile .create-signature-inner-step1 {
        padding-top: 16px;
    }

    .profile .create-signature-inner-step2,
    .profile.create-signature-inner-step3 {
        padding-top: 20px;
    }

    span.status-text.pending,
    span.status-text.signed,
    span.status-text.cancel {
        font-size: 16px;
    }

    .psl-body-title {
        font-size: 14px;
    }

    .psl-body-fields {
        width: 100%;
    }

    .responsive-width {
        width: 150px;
    }

    .psl-top-title {
        width: 120px;
    }

    .customeDetails p {
        font-size: 14px;
    }

    .customeDetails h6 {
        font-size: 14px;
    }
}

@media screen and (max-width: 1367px) {
    .form-group {
        margin-bottom: 10px;
    }

    .otp-right {
        padding: 50px 64px;
    }

    .inputsContainer {
        gap: 20px;
    }

    .iti__country {
        font-size: 14px;
    }

    input.OTPInput {
        flex: 1 1 calc(100% / 6 - 30px);
        max-width: calc(100% / 6 - 17px);
    }

    .navigation-menu {
        width: 225px;
    }

    .home-page-left-menu {
        min-width: 225px;
    }

    .responsive-width {
        width: 119px;
    }

    .table-col-width {
        min-width: -webkit-fill-available;
        width: -moz-available;
    }

    .sign-signature {
        width: 210px;
    }

    .search-section {
        width: 45%;
        margin: 15px auto;
    }

    .date-ranges {
        display: flex;
        gap: 10px;
    }

    .profile-section {
        flex-direction: column;
        padding: 7px 16px;
        border-radius: 8px 0px 0px 8px;
    }

    .sidebar.collapsed {
        width: 115px;
    }

    .profile-sub-title {
        font-size: 11px;
    }

    td.border.doc-icons {
        gap: 10px;
    }

    .get-started-popup {
        padding: 20px 45px;
        margin: 0 42px;
        height: fit-content;
        align-items: center;
        gap: 0px;
    }

    .get-started-popup-inner {
        padding: 40px 0px;
        width: min-content;
    }

    .get-started-popup-content {
        gap: 30px;
    }

    span.popup-line {
        margin: 50px 0px;
    }

    h1.popup-title {
        font-size: 18px;
    }

    p.popup-sub-title {
        font-size: 14px;
    }

    .create-signature {
        max-width: 900px;
    }

    .user-signer-avatar,
    .delete-icon {
        margin-bottom: 0px;
        margin-top: 10px;
    }

    .signer-radio-buttons-group {
        margin-top: 16px;
    }

    .signer-title,
    .cc-title,
    .message-title {
        font-size: 20px;
        font-weight: 600;
    }

    .signer-sub-title,
    .cc-sub-title,
    .message-sub-title {
        font-size: 14px;
    }

    .psl-top-title {
        font-size: 12px;
    }

    button.add-signer-button {
        font-size: 14px;
    }

    .arrow-scroll {
        right: 22px;
    }

    .user-profile {
        cursor: pointer;
        width: 200px;
    }

    input.select-image-button {
        padding: 10px 10px;
    }

    input.remove-button {
        padding: 10px 10px;
    }

    .notification-popup {
        left: 245px;
    }

    .document-name {
        font-size: 12px;
    }

    .document-size {
        font-size: 12px;
    }

    .status-section {
        padding: 2px 6px;
    }

    .block-header-title,
    .block-header-subtitle {
        font-size: 12px;
    }

    .document-step-1-title,
    .document-step-2-title,
    .document-step-3-title {
        font-size: 14px;
    }

    .expiry-text {
        font-size: 12px;
    }

    .oauth-text {
        font-size: 20px;
    }

    .document-body-top h5 {
        font-size: 14px;
    }

    .document-content-text p {
        font-size: 12px;
    }

    .table-responsiveness {
        font-size: 16px;
    }

    .notification-update-section {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .subscription-tabs {
        flex-direction: column;
    }
}

@media screen and (max-width: 1200px) {
    .form-group {
        margin-bottom: 8px;
    }

    tbody,
    td,
    tfoot,
    th,
    thead,
    tr {
        font-size: 12px;
    }

    .table-col-width {
        min-width: 1152px;
    }

    .navigation-menu {
        width: 215px;
    }

    .home-page-left-menu {
        min-width: 215px;
    }

    .search-section {
        width: 40%;
        margin: 10px auto;
    }

    .sign-signature {
        width: 190px;
        padding: 15px 15px;
    }

        .sign-signature p {
            font-size: 18px;
        }

    .text-section h1 {
        font-size: 16px;
    }

    .text-section p {
        font-size: 14px;
    }

    .signupFormMain,
    .signupFormMain .form-group,
    .form-group label {
        font-size: 12px;
    }

    .get-started-popup-content {
        gap: 0px;
    }

    .sidebar.collapsed {
        margin-left: -12px;
    }

    .connected-accounts-section {
        min-width: 275px;
        padding: 16px;
    }

    .connected-accounts-second-div {
        width: 275px;
    }

    .guideline {
        font-size: 14px;
    }

    .oauth-text {
        font-size: 18px;
    }

    .welcome-title {
        font-size: 22px;
    }

    .sub-welcome-title {
        font-size: 14px;
    }

    .account-text {
        font-size: 14px;
    }

    .user-text {
        font-size: 14px;
    }

    .document-step-1-title,
    .document-step-2-title,
    .document-step-3-title {
        font-size: 12px;
    }

    .subscription-tabs {
        flex: 1 1 calc(100% / 3 - 30px);
        max-width: calc(100% / 3 - 18px);
    }

    .license-amount {
        padding: 8px 15px;
    }
}

@media screen and (max-width: 1050px) {
    .remember-me a {
        font-size: 13px;
    }

    .btn-google,
    .btn-microsoft {
        font-size: 12px;
    }

    .form-group p {
        font-size: 12px;
        margin: 0;
    }

    .otp-right {
        padding: 50px 40px;
    }

    .inputsContainer {
        gap: 20px;
    }

    .navigation-menu-inner {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .modal-popup {
        padding: 24px;
    }

    .pop-image {
        height: auto;
        width: 200px;
    }

    .navigation-menu {
        width: 170px;
    }

    .profile .navigation-menu-inner {
        gap: 30px;
    }

    .home-page-left-menu {
        min-width: 10px;
    }

    p.datepicker-title {
        font-size: 12px;
    }

    .close-style {
        padding: 2px 7px;
    }

    .doc-name {
        font-size: 12px;
        word-break: break-all;
    }

    .doc-author {
        color: var(--text-secondary);
        font-size: 12px;
    }

    .esign-logo img {
        width: 80%;
    }

    .profile-section {
        align-items: center;
        border-radius: 8px 8px 0px 0px;
    }

    .profile-sub-title {
        font-size: 10px;
    }

    a.nav-link {
        font-size: 12px;
        line-height: 1.5;
    }

    .text-section {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .profile-right {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
        padding-left: inherit;
    }

    img.user-profile {
        width: 80px;
    }

    .sidebar-link {
        white-space: wrap;
    }

    .collapsed .settings-header {
        padding: 25px 30px;
    }

    .password-width {
        min-width: 400px;
    }

    .create-signature {
        max-width: 650px;
    }

    .upload-signature-canvas-text {
        font-size: 16px;
    }

    .signature-step-color {
        font-size: 14px;
    }

    .signature-wrapper,
    .signature-wrapper .signature-pad {
        width: 300px;
    }

    .signing-order-section,
    .signing-expiry-date-section {
        font-size: 12px;
        line-height: normal;
    }

    .signer-title,
    .cc-title,
    .message-title {
        font-size: 16px;
        font-weight: 600;
    }

    .signer-sub-title,
    .cc-sub-title,
    .message-sub-title {
        font-size: 12px;
    }

    .signer-radio-buttons-group label {
        font-size: 14px;
    }

    .create-account-title-text {
        font-size: 1rem;
        text-align: center;
    }

    .signing-fields-inner {
        flex-direction: column;
    }

    .notification-popup {
        left: 185px;
    }

    .eod-notification {
        font-size: 12px;
    }

    .signer-order-expire-date-section {
        flex-wrap: wrap;
        gap: 20px;
    }

    .placefield-right-text {
        font-size: 12px;
    }

    .signer-model-user-title {
        font-size: 14px;
    }

    .signature-done-section {
        margin: auto 10%;
    }

    .filterSmallScreenMain {
        display: block;
        width: 100%;
    }

    .filterSmallScreen {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    .filterMainDocument {
        gap: 10px;
        flex-wrap: wrap;
    }

    .document-divider {
        display: none;
    }

    .document-main-table p,
    .document-main-table-section p {
        font-size: 14px;
    }

    span.status-text.pending,
    span.status-text.signed,
    span.status-text.cancel {
        font-size: 14px;
    }

    .document-body-top {
        gap: 15px;
        flex-direction: column;
    }

    .document-pdf-section {
        height: calc(100vh - 195px);
        padding: 0 20px;
    }

    .button-group {
        gap: 7px;
    }

    .billing-address {
        display: flex;
        flex-direction: column;
    }

    .license-quantity {
        width: 75%;
    }
}

@media screen and (max-width: 992px) {
    .form-group {
        margin-bottom: 10px;
    }

    .login-left {
        display: none;
    }

    .top-content img {
        height: 60%;
    }

    img.digital-signature-logo {
        height: 25%;
    }

    img.auth-vector-left-top {
        height: 15%;
    }

    img.auth-vector-left-bottom {
        height: 6%;
    }

    img.auth-vector-right-top {
        height: 15%;
    }

    .auth-vector-right-top {
        right: 0%;
    }

    img.auth-vector-right-bottom {
        height: 15%;
    }

    .auth-vector-right-bottom {
        right: 0%;
    }

    .navigation-menu {
        width: 190px;
    }

    .otp-right {
        padding: 50px 85px;
    }

    .inputsContainer {
        gap: 30px;
    }

    input.OTPInput {
        flex: 1 1 calc(100% / 6 - 30px);
        max-width: calc(100% / 6 - 24px);
    }

    .signature-text {
        font-size: 16px;
    }

    .wrapping {
        position: relative;
    }

    .sidebar-navigation {
        width: 215px;
    }

    .main-popup {
        overflow: hidden;
    }

    .pop-image {
        width: -webkit-fill-available;
        width: -moz-available;
        object-fit: contain;
        height: 120px;
    }

    span.popup-line {
        margin: 40px 0px;
    }

    .get-started-popup-inner {
        width: -webkit-fill-available;
        width: -moz-available;
    }

    .user-welcome {
        font-size: 22px;
    }

    .start-with-document-image-section,
    .get-sign-image-section,
    .keep-it-all-in-one-place-image-section {
        width: 20%;
        overflow: hidden;
    }

    p.popup-sub-title {
        padding: 0px 0px;
    }

    .sidebar.collapsed {
        padding: 0px 10px 0px 10px;
        width: 100px;
    }

    .profile {
        padding-left: 10px !important;
    }

    .search-section {
        width: 35%;
        margin: 5px auto;
    }

    .search-navigation-bar {
        justify-content: space-around;
    }

    .password-width {
        min-width: 300px;
    }

    .connected-accounts-first-div {
        flex-direction: column;
    }

    .connected-accounts-second-div {
        width: 340px;
    }

    .oauth-text {
        font-size: 16px;
    }

    .create-signature {
        max-width: 400px;
    }

    .create-signature-title-text {
        font-size: 1.2rem;
    }

    .create-signature-subtitle-text {
        text-align: center;
        font-size: 1rem;
    }

    .profile .create-signature-canvas-top-section {
        gap: 10px;
    }

    .profile .sign-element {
        padding: 8px 10px;
        gap: 5px;
    }

    .create-signature-canvas-top-section {
        gap: 4px;
    }

    .sign-element {
        padding: 8px 10px;
        gap: 5px;
    }

    .signature-type-1,
    .signature-type-2,
    .signature-type-3 {
        font-size: 24px !important;
        padding: 10px 10px;
    }

    .clear-signature {
        justify-content: flex-end;
        width: -webkit-fill-available;
        width: -moz-available;
    }

    .draw-signature-canvas-main {
        min-height: 412px;
    }

    .choose-signature-step {
        min-height: 412px;
    }

    .upload-signature-canvas-inner {
        min-height: 372px;
    }

    .upload-signature-canvas-main {
        min-height: 412px;
        margin-bottom: 0px;
    }

    .signature-wrapper {
        width: 200px;
    }

        .signature-wrapper,
        .signature-wrapper .signature-pad {
            width: 200px;
        }

    .initial-wrapper {
        width: 200px;
    }

    .signature-pad {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
    }

    .upload-pdf-section {
        gap: 9px;
    }

    .upload-doc-name {
        font-size: 12px;
    }

    .upload-signature-canvas-bottom-section-step2 {
        align-items: center;
    }

    .document-step-1-title,
    .document-step-2-title,
    .document-step-3-title {
        font-size: 12px;
        min-width: 143px;
        min-height: fit-content;
    }

        .document-step-1-title::before,
        .document-step-2-title::before,
        .document-step-1-title::after,
        .document-step-2-title::after {
            height: 30px;
            top: -1px;
        }

        .document-step-3-title::before {
            left: -2px;
            top: -2px;
            height: 31px;
            overflow: hidden;
        }

    .sign-expiry-date {
        gap: 5px;
    }

    button.add-signer-button {
        font-size: 12px;
    }

    .signer-radio-buttons-group label {
        font-size: 12px;
    }

    .signer-order-expire-date-section {
        gap: 25px;
    }

    .profile .business-form-group {
        gap: 10px;
    }

    .profile .guideline {
        font-size: 12px;
    }

    .drag-button {
        margin-top: 15px;
    }

    .user-sign-section,
    .signer-sign-section,
    .message-box-section {
        align-items: flex-start;
        flex-direction: column;
    }

    .select-signer-button {
        font-size: 14px;
    }

    .wizard2-title h4 {
        font-size: 14px;
    }

    .wizard2-top-section-btns {
        flex-direction: column;
    }

    .psl-top-title {
        width: 100px;
    }

    .drag-input {
        width: 120px;
    }

    .dropdown.signers-dropdown {
        gap: 20px;
    }

    label.form-check-label.drag-required-field {
        font-size: 14px;
        color: var(--text-secondary) !important;
    }

    h1.popup-title {
        font-size: 16px;
    }

    p.popup-sub-title {
        font-size: 12px;
    }

    .signatureModalpopup .modal-dialog {
        max-width: 500px;
    }

    .select-signer-preview-bottom-section::after {
        display: none;
    }

    .signature-done-section {
        margin: auto 0%;
    }

    .psl-body-title {
        flex-direction: column;
        align-items: center;
    }

    .document-content {
        gap: 0px;
        padding: 0px;
        flex-direction: column;
    }

    .col-format {
        flex-direction: column;
    }

    .page-navigator {
        display: none !important;
    }

    /* New Home Page css */

    .table-row {
        margin-bottom: 0;
        border: none;
        border-radius: 0;
        overflow: visible;
        box-shadow: none;
    }

    .table-cell {
        display: table-cell;
        align-items: flex-start;
        padding: 12px 16px;
        font-size: 14px;
    }

    .recent-docs-title {
        font-size: 14px;
    }

    .filter-btn,
    .view-all-btn {
        font-size: 14px;
    }

    .user-text,
    .company-text {
        font-size: 12px;
    }

    .account-text {
        font-size: 13px;
    }

    .status-badge {
        width: 80px;
        padding: 4px 12px;
        font-size: 12px;
    }

    .top-header {
        padding: 0px;
        background: none;
        box-shadow: none;
        flex-direction: column-reverse;
        gap: 20px;
    }

    .welcome-tab,
    .notification-dropdown-section {
        width: -webkit-fill-available;
        width: -moz-available;
        background: var(--white-color);
        box-shadow: 3px 4px 8px 0px rgba(0, 0, 0, 0.05);
        padding: 16px 28px;
        border-radius: 12px;
    }

    .notification-inner {
        width: -webkit-fill-available;
        width: -moz-available;
        flex-direction: row;
        justify-content: space-between;
    }

    .head-profile-dropdown-menu {
        top: 26px !important;
    }

    .invitation-card {
        margin: 20px;
    }

    .avatar {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .privacy-text {
        font-size: 11px;
    }

    .document-main-table {
        max-width: calc(100% - 100px);
    }

    .text-width {
        max-width: 55%;
    }

    .switch-accounts-section {
        max-width: 345px;
        min-width: 380px;
    }

    .settings-section {
        padding: 0px 40px;
        margin-left: 0px !important;
    }

    .logo-remove-mobile {
        display: none;
    }

    .plan-table p {
        font-size: 14px;
        text-wrap: wrap;
    }

    .signature-btn-group .cancel-button,
    .signature-btn-group .primary-button {
        padding: 10px 20px;
    }

    .pdf-sec-middle {
        padding: 0 30px;
    }
}