@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Quicksand:wght@300;400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

html {
    font-size: 1rem;
    height: 100%;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    scroll-padding-top: 5rem;
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
    font-size: 1rem;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    margin-bottom: 0em;
}

a {
    text-decoration: none;
}

.table {
    vertical-align: middle;
}

#root, #__next {
    isolation: isolate;
}

    #root:focus {
        outline: none;
    }

body {
    color: #242424;
    font-family: "Arial";
    height: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -webkit-touch-callout: none;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

* {
    scrollbar-width: thin;
    scrollbar-color: lightsteelblue transparent;
}

    *::-webkit-scrollbar {
        width: 4px;
    }

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

    *::-webkit-scrollbar-thumb {
        background-color: lightsteelblue;
        border-radius: 20px;
        border: none;
    }

.page-title {
    color: #22242C;
    font-family: Arial;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: 0.2px;
    vertical-align: bottom;
}

.page-title-image {
    width: 32px;
    height: 32px;
    vertical-align: text-bottom;
}

.validation-message {
    color: red;
    text-align: end;
    font-size: 0.825rem;
    font-family: "Aeonik";
}

.w-95{
    width:95%;
}

/*LOGIN - RESET*/
/*SignIn-Start*/
.main-login {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-column-gap: 0em;
    grid-auto-flow: dense;
    height: 100vh;
    background: #FFF;
    justify-content: center;
    align-items: center;
}

.login-carousel {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.login-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.login-logo {
    margin: 0em auto 5em;
}

.login-input h3 {
    margin-bottom: 0.6em;
    font-size: 2.5625rem;
    font-family: "Arial";
}

.form-option {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0em;
}

    .form-option a {
        color: #414141;
        font-size: 0.75rem;
        font-family: "Arial";
        text-decoration: underline;
    }

.btn-signin {
    color: #FFF;
    background-color: #035488;
    border-radius: 6px;
    height: 54px;
    font-size: 1.125rem;
    font-family: "Arial";
    border: none;
    width: 100%;
}
/*SignIn-End*/

/*Reset-Start*/
.main-reset {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 0em;
    grid-auto-flow: dense;
    height: 100vh;
    background: #FFF;
    justify-content: center;
    align-items: center;
    position: relative;
}

.reset-area {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.goback {
    margin: 0em 2em;
    position: absolute;
    top: 2em;
}

    .goback a {
        color: #000;
        font-size: 1rem;
        font-family: "Arial";
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .goback a .backimg {
            width: 26px;
        }

.reset-logo {
    margin: 0em auto 5em;
    justify-self: center;
}

.reset-input h3 {
    margin-bottom: 0.6em;
    font-size: 1.5rem;
    font-family: "Arial";
}

.reset-input h5 {
    margin-bottom: 0.6em;
    font-size: 1rem;
    font-family: "Arial";
}

.reset-input a {
    color: #15a362;
    margin-top: 1em;
    font-size: 0.875rem;
    font-family: "Arial";
}

.reset-form {
    font-size: 1rem;
    padding: 0.875rem 0.75rem;
    border: 0.5px solid #6E7274;
}

.btn-reset {
    color: #FFF;
    background-color: #035488;
    border-radius: 6px;
    height: 45px;
    font-size: 1.125rem;
    font-family: "Arial";
    border: none;
    width: 100%;
}

    .btn-reset:hover {
        color: #FEFEFE;
    }

.reset-ad img {
    border-radius: 10px;
    box-shadow: rgba(3, 84, 136, 0.4) 0px 30px 90px;
}

.resetsuccessmsg {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
}

    .resetsuccessmsg h4 {
        font-size: 2rem;
        font-family: "Arial";
    }

        .resetsuccessmsg h4 a {
            font-size: 2.5rem;
            font-family: "Aeonik Pro Bold";
        }

.resetpwd-text {
    border: 1px solid #8B8B8B !important;
    border-radius: 4px;
    font-size: 1rem;
    font-family: "Arial";
    padding: 0em;
}
/*Reset-End*/
/*LOGIN - RESET*/

/*PARTNER*/
/*Partner-Start*/
.main-partner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 70px 1fr;
    height: 100vh;
    background: #FFF;
    justify-content: center;
    align-items: center;
}

.partner-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.partner-logo {
    margin: 0em auto 3em;
}

.partner-input {
    max-width: 500px;
}

    .partner-input h1 {
        margin-bottom: 0.6em;
        font-size: 2.5625rem;
        font-family: "Arial";
    }

    .partner-input h4 {
        margin-bottom: 0.6em;
        font-size: 1.5rem;
        font-family: "Arial";
    }

.btn-continue {
    color: #FFF;
    background-color: #0C7576;
    border-radius: 6px;
    height: 54px;
    font-size: 1.125rem;
    font-family: "Arial";
    border: none;
    width: 100%;
}

.btn-logoutbtn {
    display: inline-flex;
    gap: 10px;
    justify-content: center;
    font-size: 0.88rem;
    font-family: "Arial";
    max-width: 100%;
    color: black;
    background-color: #FFF;
    border: 1px solid black;
    border-radius: 4px;
    margin: 0.25rem 0.2rem;
    padding: 0.8em 0.6em !important;
    width: auto;
}

    .btn-logoutbtn img {
        width: 20px;
    }
/*Partner-Start*/
/*PARTNER*/

/* STRUCTURE & LAYOUT */
.tdnex-app {
    display: grid;
    height: 100vh;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "header" "main" "footer";
}

header {
    grid-area: header;
    background: #FFF;
    position: relative;
}

main {
    grid-area: main;
    background: #F7F7F7;
    height: 100%;
    position: relative;
    display: flex;
}

.disabled-button {
    cursor: not-allowed !important;
    opacity: 0.6;
}

.aliqam {
    align-self: stretch;
    background-color: var(--base-white);
    filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.03));
    align-items: center;
    justify-content: space-between;
    padding: 1.4rem 1.5rem;
    box-sizing: border-box;
    top: 0;
    z-index: 99;
    position: sticky;
    text-align: right;
    font-family: Arial;
    background: white;
}

.aliqam,
.incur {
    display: flex;
    flex-direction: row;
    max-width: 100%;
}

.incur {
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0 20px;
}

.label-with-text {
    display: flex;
    flex-direction: row;
    gap: 0 11px;
    justify-content: flex-start;
}

.header-dropdowns {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: right;
    gap: 0 10px;
    z-index: 2;
}

.btn-contact-option {
    position: absolute;
    height: 44px;
    width: 44px;
    top: 9%;
    right: 4.17%;
    bottom: 4.17%;
    left: 4.17%;
    border-radius: 100px;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
    object-fit: cover;
    z-index: 1;
    /*border: 2px solid white;*/
    border-radius: 50%;
    /*filter: drop-shadow(0px 2px 4px #D2D5DD);*/
}

.profile-photo {
    height: 48px;
    width: 48px;
    position: relative;
    z-index: 7;
}

.header-user-name {
    color: #22242C;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.user-role {
    color: #5F6368;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.about-us-services {
    flex-direction: column;
}


.user-profile-dropdown {
    border: none;
    background: white;
    padding-left: 0;
}


.frame-outer {
    flex-direction: column;
    padding: var(--padding-10xs) 0 0;
    text-align: left;
    font-size: var(--text-s-medium-size);
    color: var(--black);
    font-family: var(--font-roboto);
}

.sem {
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 30px 0;
    /*max-width: calc(100% - 230px); */
    font-size: var(--font-size-5xl);
    color: var(--color-darkslategray-100);
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    align-self: stretch;
    flex-direction: row;
    align-items: flex-start;
    max-width: 100%;
    flex-shrink: 0;
    /* text-align: left; */
    font-size: var(--font-size-base);
    color: var(--color-gray-200);
    font-family: var(--font-arial);
}

.notification-bell {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    border: 1px solid #E2E8F0;
    padding: 0;
}

.notification-count {
    height: 18px;
    width: 18px;
    font-size: 11px;
    top: -37px;
    right: -6px;
    background-color: #005758;
    color: #fff;
    font-family: 'Poppins';
    font-weight: 600;
    border-radius: 50%;
    text-align: center;
}

/* Currency Dropdown */
.currency-dropdown {
    background: white;
    color: #858080;
    /* box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); */
    border: 1px solid var(--Greyscale-200, #E2E8F0);
    border-radius: 8px
}

.dropdown img {
    display: inline;
}

.btn:hover {
    background-color: #EFF7F8;
    color: #414869;
}

.country-logo {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 5px;
}

.currency {
    color: var(--Greyscale-500, #64748B);
    text-align: right;
    font-family: Arial;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
}

.selected-currency {
    font-weight: 500;
    color: #414869;
    font-size: 12px;
    line-height: 160%;
}

/* Hide default arrow */
.dropdown-toggle::after {
    display: none;
}

.footer {
    background-color: #EFF2F5;
    color: #64748B;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    /*padding: 50px;*/
    padding-left: 50px;
}

.footer-top-section {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    /*margin-left: 50px;*/
}

    .footer-top-section .footer-column p {
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px; /* 183.333% */
    }

.footer-column {
    flex: 1;
    margin-right: 20px;
    padding: 50px;
    padding-top: 80px;
}

    .footer-column li {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; /* 171.429% */
        text-decoration-line: underline;
        list-style-type: none;
        padding-top: 6px;
    }

.footer a {
    color: #414869;
}

.footer-address-header {
    font-size: 15px;
    font-style: normal;
    font-weight: 550;
    line-height: 24px; /* 171.429% */
}

.address {
    margin-top: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.footer-social-icons {
    margin-top: 10px;
}

    .footer-social-icons img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        margin-right: 10px;
        display: inline-block;
    }

.footer-bottom-section {
    margin-left: 50px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    border-top: 1px solid #DEE4EC;
    margin-right: 17%;
    margin-right: 9%;
    padding-top: 24px;
    padding-bottom: 24px;
}

.footer-bottom-links {
    gap: 9.5px;
}

.footer .footer-bottom-section a {
    text-decoration: none;
}

#tdLogoFooter {
    mix-blend-mode: multiply;
    padding-bottom: 16px;
}
/* STRUCTURE & LAYOUT */

/* HEADER */
/* Header-Start */
.navbar {
    height: auto;
    background-color: #FFF;
    /*border: 0.3px solid #B3B3B3;*/
}

.navbar-brand {
    margin: 0em 2em;
}

.navbar-toggler {
    color: #8B8B8B;
    border: none;
}

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

.list-inline-item {
    vertical-align: middle;
}

.nav-search-form {
    position: relative;
    width: 290px;
}

    .nav-search-form .search-input {
        font-size: 0.875rem;
        font-family: "Aeonik";
        border-radius: 6px;
        border: 0.3px solid #8B8B8B;
        padding: 0.7em 0.75em;
    }

    .nav-search-form .search-btn {
        color: #000000;
        background: #FFF;
        border: none;
        position: absolute;
        right: 2px;
        top: 1px;
        margin-right: 0;
        padding: 0.8em 0.8em;
    }

.btn-light {
    width: 42px;
    height: 42px;
    text-align: center;
    border: 0.3px solid #8B8B8B;
}

    .btn-light span {
        position: absolute;
        top: -24px;
        right: -5px;
    }

/*Navbar Dropdown-Start*/
.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #005287;
    border-radius: 4px;
}

.dropdown-vendor {
    border-radius: 6px;
    border: 0.3px solid #8B8B8B;
    padding: 0.2em 0em;
}

    .dropdown-vendor > a {
        color: #000 !important;
    }

.dropdown-partner {
    border-radius: 6px;
    border: 0.3px solid #8B8B8B;
    display: flex;
    padding: 0.1em 0.2em 0.1em 0.2em;
}

    .dropdown-partner > a {
        color: #000 !important;
    }

.vendorDropdown {
    font-family: "Arial" !important;
    /*border-radius: 25px !important;*/
    width: 152px !important;
}

.partner-text {
    /*background: #d4e3fb;*/
    border-radius: 4px;
    padding: 0.28em 0.5em;
    font-size: 1rem;
    font-family: "Arial";
}

.partner-drop, .prodrop, .userdrop, .blognewdrop {
    background: none;
    border: none;
}

    .partner-drop a {
        color: #000;
        font-family: "Arial";
    }

.partnerDropdown {
    font-family: "Arial" !important;
    border: none;
    width: auto !important;
}

.notify-boundry {
    width: 450px;
    padding: 1em;
    height: 450px;
    overflow-y: auto;
}

.dropdown-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .dropdown-menu-header h5 {
        font-size: 1.275rem;
        font-family: "Arial";
    }

    .dropdown-menu-header a {
        color: #000;
        font-size: 0.875rem;
        font-family: "Arial";
    }

        .dropdown-menu-header a:hover {
            color: #8B8B8B;
        }

.dropdown-menu-body {
    padding: 1em 0em;
}

.notify-container {
    background: #F7F7F7;
    padding: 0.5em 0.5em;
    margin: 0.5em 0em;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    list-style-type: none;
}

.notify-box {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.notify-product, .notify-vendor, .notify-course, .notify-incentive, .notify-order {
    border-radius: 100%;
    text-align: center;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
}

.notify-product {
    background: #dfedc8;
}

.notify-vendor {
    background: #ffecde;
}

.notify-course {
    background: #E4F7FF;
}

.notify-incentive {
    background: #dfedc8;
}

.notify-order {
    background: #005287;
}

.notify-text {
    padding-left: 1em;
}

    .notify-text p {
        font-size: 0.6rem;
        font-family: "Arial";
    }

    .notify-text h6 {
        font-size: 1rem;
        font-family: "Arial";
    }

.highlight {
    font-family: "Arial";
    /*text-align: center;*/
}

    .highlight:hover {
        background: #005287;
        border-radius: 4px;
        color: #FFF;
    }
/*Navbar Dropdown-End*/
/* Header-End */
/* HEADER */

/* CONTENTS */
.tdnex-content {
    position: relative;
}

/* Aside-Start */
.tdnex-aside {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 3.2em 0 0;
}

.aside-nav {
    border-radius: 6px;
    background: #005287;
    margin: 2em auto 0em;
    padding: 1.8em 0em;
    width: 100%;
    height: auto;
    overflow-y: auto;
}

.list-unstyled {
    padding-left: 0.5em;
}

.aside-nav .nav-link.active {
    background: linear-gradient(-90deg, #014673 -10.39%, rgba(225, 225, 225, 2.00) 160%);
    border-left: 4px solid #FFF;
}

.aside-nav .nav-link:hover {
    background: linear-gradient(-90deg, #014673 -10.39%, rgba(225, 225, 225, 2.00) 160%);
    border-left: 4px solid #FFF;
}


.aside-nav .nav-link {
    display: block;
    padding: 0.5em 1em;
    font-family: "Arial";
    font-size: 1.125rem;
    color: #FFF;
    position: relative;
    display: block;
    padding-left: 3em;
    /*margin-bottom: 0.5em;*/
    border-left: 3px solid rgba(0,0,0,0);
    transition: ease-in-out;
}

.aside-nav .nav-icon {
    position: absolute;
    left: 1em;
    top: 0.7em;
}

.aside-nav .submenu {
    margin: 0.8em auto 0em;
    transition: all 0.5s linear;
}

.aside-nav .submenu-toggle {
    transition: all 0.3s ease-in-out;
}

.aside-nav .submenu-link {
    color: #FFF;
    font-family: "Arial";
    font-size: 0.875rem;
    margin-left: 2.3em;
    padding: 0.5em 0em;
    padding-left: 1.3em;
    position: relative;
    display: block;
    margin-bottom: 0;
    text-decoration: none;
    transition: ease-in-out;
}

    .aside-nav .submenu-link.active {
        background: linear-gradient(-90deg, #014673 -10.39%, rgba(225, 225, 225, 2.00) 160%);
        border-left: 3px solid #FFF;
        padding: 0.5em 1em;
        transition: ease-in-out;
    }

    .aside-nav .submenu-link:hover {
        background: linear-gradient(-90deg, #014673 -10.39%, rgba(225, 225, 225, 2.00) 160%);
        border-left: 3px solid #FFF;
        padding: 0.5em 1em;
    }

.btn-icon {
    color: #8B8B8B;
    font-size: 1.5rem;
}

.aside-ad {
    border-radius: 9px;
    background: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1em;
    margin: 1em;
}

.ad-content {
    color: #000000;
    text-align: center;
    padding: 1em;
}

    .ad-content h6 {
        font-size: 1rem;
        font-family: "Aeonik Pro Bold";
        margin-bottom: 0.5em;
    }

    .ad-content p {
        font-size: 0.775rem;
        font-family: "Arial";
        margin-bottom: 0.5em;
    }

.ad-link {
    background: #000;
    color: #FFF;
    padding: 0.5em 1em;
    font-size: 0.675rem;
    font-family: "Arial";
}

    .ad-link:hover {
        background: #FFF;
        border: 1.5px solid #000;
        color: #000;
    }
/* Aside-End */

/* Main-Start */
.tdnex-main {
    min-height: 100%;
    flex-grow: 1;
}

/* Introduction-Start */
.main-introduction {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    margin: 1em 0em 1em;
}

.introduction-text {
    display: block;
}

    .introduction-text h1 {
        color: #000000;
        font-size: 2rem;
        font-family: "Aeonik Pro Black";
        line-height: 1;
        margin-bottom: 0em;
        text-transform: capitalize;
    }

    .introduction-text p {
        color: #474747;
        font-size: 1.2rem;
        font-family: "Arial";
    }

.introduction-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

    .introduction-buttons a {
        display: inline-flex;
        gap: 10px;
        justify-content: center;
        font-size: 0.88rem;
        font-family: "Arial";
        max-width: 100%;
    }

.btn-buyproduct {
    color: #619d00;
    background-color: #dfedc8;
    border: none;
    border-radius: 4px;
    margin: 0.25rem 0.2rem;
    padding: 0.8em 0.6em !important;
    width: auto;
}

    .btn-buyproduct:hover {
        color: #000;
        background-color: #FFF;
        /*border: 1px solid #dfedc8;*/
    }

.btn-renewproduct {
    color: #1f509e;
    background-color: #d4e3fb;
    border: none;
    border-radius: 4px;
    margin: 0.25rem 0.2rem;
    padding: 0.8em 0.6em !important;
    width: auto;
}

    .btn-renewproduct:hover {
        color: #000;
        background-color: #FFF;
        /*border: 1px solid #d4e3fb;*/
    }

.btn-cloudservices {
    color: #cf6a23;
    background-color: #ffecde;
    border: none;
    border-radius: 4px;
    margin: 0.25rem 0.2rem;
    padding: 0.8em 0.6em !important;
    width: auto;
}

    .btn-cloudservices:hover {
        color: #000;
        background-color: #FFF;
        /*border: 1px solid #ffecde;*/
    }

.btn-trainingcourses {
    color: #1485B2;
    background-color: #E4F7FF;
    border: none;
    border-radius: 4px;
    margin: 0.25rem 0.2rem;
    padding: 0.8em 0.6em !important;
    width: auto;
}

    .btn-trainingcourses:hover {
        color: #000;
        background-color: #FFF;
        /*border: 1px solid #ffecde;*/
    }

.introduction-version {
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
    margin: 1em 0em 1em;
}

.trainingcourses {
    background: rgb(206,221,235);
    background: radial-gradient(circle, rgba(206,221,235,1) 0%, rgba(247,247,247,1) 100%);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2em;
}

    .trainingcourses h6 {
        color: #434474;
        font-size: 1.375rem;
        font-family: "Aeonik Pro Bold";
        margin-bottom: 0.5em;
    }

.btn-trainingcourses2 {
    color: #FFF;
    background-color: #E4F7FF;
    /*border: 2px solid #090979;
    border-radius: 50%;
    padding: 1em;*/
    text-align: center;
    position: relative;
}

    .btn-trainingcourses2:hover {
        color: #005287;
        background-color: #FFF;
    }

    .btn-trainingcourses2 img {
        width: 50px;
    }
/* Introduction-End */

/* Widgets-Start */

#tdnex-widgets {
    padding-top: 30px;
    background: #fff;
    /*filter: drop-shadow(0px 4px 12px #F3F4F4);*/
}

.flex-container {
    display: flex;
    flex-wrap: nowrap;
    /*box-shadow: 0 1px 12px #F3F4F4;*/
}

.widgetParentContainer {
    width: 100%;
    display: flex;
    align-items: stretch;
    background-color: white;
    margin-top: 24px;
}

.childContainer1 {
    width: 62% !important;
    float: left;
    /*padding-right: 21px;*/
    box-shadow: 0 4px 12px #F3F4F4;
}

.childContainer2 {
    /*width: auto;*/
    flex-grow: 1;
    /*box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);*/
    box-shadow: 0 4px 12px #F3F4F4;
    text-align: center;
    padding: 10px 16px;
    margin-left: 21px;
}

.widget-icon {
    /* margin-right: 100px; */
    font-size: 22px;
    color: black;
    /* padding-left: 28%; */
    padding: 0;
    border: none;
}

.widgetText {
    /* margin-right: 83px; */
    color: #64748B;
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-top: 16px;
}

.widgetNumberSection {
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 24px;
    padding-bottom: 16px;
}

.widgetNumber {
    color: var(--Black, #22242C);
    font-family: Arial;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.widgetDelta {
    vertical-align: super;
    background: #F0FDF4;
    border-radius: 50px;
    color: #00856F;
    font-family: Arial;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%; /* 19.2px */
    padding: 4px 6px;
}

.widgetNegativeDelta {
    vertical-align: super;
    background: #FDF2F8;
    border-radius: 50px;
    color: #CE3022;
    font-family: Arial;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%; /* 19.2px */
    padding: 4px 6px;
}

.widgetBottomTextSection {
    color: #0C7576;
    font-family: Arial;
    font-size: 13px;
    margin-right: 52px;
    font-weight: 500;
    /*text-wrap: nowrap;*/
}

.widgetViewMoreText {
    color: #2aa860;
    text-decoration: none;
}

    .widgetViewMoreText:hover {
        color: #2aa860;
    }

.view-more-arrow {
    display: inline !important;
    width: auto !important;
    vertical-align: sub;
}

.widgetImage {
    background: #F6F8F9;
    border-radius: 12px;
    padding: 12px;
    width: auto !important;
}

#tdnex-widgets > div.widgetParentContainer > div.flex-container.childContainer1.owl-carousel.owl-theme.owl-loaded.owl-drag > div.owl-stage-outer > div > div > div {
    border-right: 2px solid #f3eeee;
    /*padding: 10px 20px;
    margin: 10px;*/
    margin: 1.5rem 0;
    padding-left: 4.5rem;
    margin-bottom: 20px;
    width: 100%;
}

#tdnex-widgets > div.widgetParentContainer > div.flex-container.childContainer1.owl-carousel.owl-theme.owl-loaded.owl-drag > div.owl-stage-outer > div > div:last-child > div {
    border-right: none;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    width: 30px;
}


.main-widgets {
    background: linear-gradient(180deg, #CEDDEB 1.52%, #F7F7F7 99.80%);
    border-radius: 6px;
    display: grid;
    /*grid-template-columns: repeat(3, 1fr);*/
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1em;
    padding: 1em;
}

.widgets {
    border-radius: 6px;
    background: #FFF;
    padding: 1em;
}

    .widgets a {
        color: #014977;
        font-size: 1.25rem;
        font-family: "Arial";
    }

.widget-icon {
    width: 49.961px;
    height: 50.229px;
}

.widget-leads p, .widget-invoices p, .widget-quotes p, .widget-orders p, .widget-training p {
    font-size: 1.5rem;
    font-family: "Aeonik";
}

.widget-leads h5, .widget-invoices h5, .widget-quotes h5, .widget-orders h5, .widget-training h5 {
    font-size: 2.125rem;
    font-family: "Poppins", sans-serif;
}

.invoice-year {
    font-size: 0.75rem;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    background: #FFF0C3;
    color: #CD9A00;
    padding: 0.7em 1em;
}

.invoice-count {
    font-size: 0.875rem;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    border-radius: 4px;
    background: rgba(237, 98, 0, 0.20);
    color: #FF6900;
    padding: 0.5em 1.12em;
    margin-left: 1em;
}

.widget-quotes {
    /*margin: 0em 0.5em;*/
}

.widget-training a {
    margin-top: 2em;
}

.widget-refresh a {
    color: #014977;
    display: contents;
    font-size: 0.875rem;
    font-family: "Aeonik";
    margin-top: 0.7em;
}

.widget-refresh-img {
    width: 18px;
    height: 18px;
}

.widget-refresh i {
    color: #979797;
    font-size: 0.875rem;
    font-family: "Aeonik";
}

.widget-currencyImg {
    width: 25px;
    height: 20px;
    display: inline-flex;
    margin-right: 5px;
}

/* Widgets-End */

/* Graph-Start */
#tdnex-salesinsights {
    filter: drop-shadow(0px 4px 12px #F3F4F4);
}

.sales-insight-graph-heading {
    color: #414869;
    font-family: Arial;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0.2px;
}

.sales-tooltip {
    display: flex;
    padding: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    border-radius: 8px;
    background: #6425FE;
    font-family: Arial;
    font-style: normal;
    line-height: normal;
}

.tooltip-month {
    color: #DCD2D2;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
}

.tooltip-total-sales {
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
}

.img-inline-invert-white {
    filter: invert(100%);
    display: inline;
}

.main-salesinsights {
    /*background: linear-gradient(180deg, #FFF5EC 5.8%, #F7F7F7 76.67%, rgba(255, 255, 255, 0.12) 97.98%);*/
    background: white;
    border-radius: 6px;
    margin: 0em 0em 0em 0em;
    padding: 1em;
    padding-bottom: 24px;
}

.tertiary-button, .tertiary-button:hover, .tertiary-button:focus {
    border-radius: 6px;
    border: 1px solid rgba(123, 139, 163, 0.56);
    background: rgba(255, 255, 255, 0.90) !important;
    color: #64748B !important;
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.refresh-chart-button {
    border-radius: 6px;
    border-color: #288F93 !important;
    background-color: white !important;
    color: #0C7576 !important;
    font-family: Arial;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    display: flex;
    padding: 8px 18px;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.salesinsights-head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

    .salesinsights-head h5 {
        font-size: 1.625rem;
        font-family: "Arial";
    }

.salesinsights-graphs {
    /*display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    grid-gap: 1em;*/
    margin-top: 28px;
    display: flex;
    flex-direction: row;
    margin-top: 0;
}

    .salesinsights-graphs .graph {
        background: #FFF;
        padding: 1em;
        border-right: 2px solid #f3eeee;
        width: 47%;
    }

.graph:last-child {
    border-right: none !important;
}

.salesinsights-graphs .graph p {
    font-size: 1.5rem;
    font-family: "Arial";
}

.salesinsights-currencyImg {
    width: 16px;
    height: 16px;
    /*display: inline-flex;
    margin-right: 0px;*/
}

.graph-responsive {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.graph {
    position: relative;
}

    .graph h1 {
        color: #FFF;
        font-size: 3rem;
        font-family: "Aeonik Pro Bold";
        position: absolute;
        left: 8%;
        top: 30%;
        background: #005287;
        padding: 1em;
        border-radius: 6px;
    }

.graph-disabled {
    background: #000;
    opacity: 0;
    place-items: center;
    position: relative;
}

.graph-year {
    padding: 0.35rem 2.75rem 0.35rem 1.75rem;
    font-size: 0.875rem;
    font-family: "Aeonik";
    background-position: right 0.75rem center;
    background-size: 20px 15px;
    width: auto;
}

.fnYearDropdown-partner {
    border-radius: 30px;
    border: 0.3px solid #ced4da;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.1em 0.5em 0.1em 1.2em;
    background: #FFF;
}

.fnYearDropdown-text {
    /* background: #d4e3fb; */
    /* border-radius: 4px; */
    /* padding: 0.28em 0.5em; */
    font-size: 1rem;
    font-family: "Arial";
}

.fnYearDropdown-drop {
    background: none;
    border: none;
}

.fnYearDropdown {
    font-family: "Arial" !important;
    border: none;
    width: 136px !important;
}

.graph-refresh {
    background: #FFF;
    border-radius: 30px;
    border: 0.3px solid #ced4da;
    padding: 0.2em 0.5em;
}

    .graph-refresh a {
        color: #014977;
        display: contents;
        font-size: 0.875rem;
        font-family: "Aeonik";
        margin-top: 0.7em;
    }

.graph-refresh-img {
    width: 18px;
    height: 18px;
}

.graph-refresh i {
    color: #979797;
    font-size: 0.875rem;
    font-family: "Aeonik";
}

.graph table tbody tr td.right-td {
    text-align: right;
    display: flex;
    justify-content: end;
    align-items: center;
}

.graph table tbody tr.legend-font td {
    font-size: 1.125rem;
    font-family: "Arial";
}

.legendrectangle {
    width: 15px;
    height: 15px;
    border-radius: 3px;
}

.m-align {
    margin-left: -2.5em;
}
/* Graph-End */

/* Shipments & Tracking-Start */
.main-shipmentstracking {
    background: linear-gradient(178deg, #E9F0FC 11.79%, rgba(240, 240, 240, 0.47) 112.29%);
    border-radius: 6px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 1em;
    margin: 1em 0em 0em 0em;
    padding: 1em;
}

.shipmentstracking-head-text {
    font-size: 1.625rem;
    font-family: "Arial";
}

.ship-search-form {
    position: relative;
    /*width: 290px;
    height: 42px;
    margin-right: 5px;
    justify-self: end;*/
}

    .ship-search-form .shipsearch-input {
        font-size: 0.875rem;
        font-family: "Aeonik";
        border-radius: 6px;
        border: none;
        padding: 0.8em 0.8em;
    }

    .ship-search-form .shipsearch-btn {
        color: #000000;
        background: #FFF;
        border: none;
        position: absolute;
        right: 8px;
        top: 1px;
        margin-right: 0;
        /*padding: 0.8em 0.8em;*/
    }

.shiptrack-eta {
    text-align: end;
}

.shipmentstracking-head-data {
    margin-top: 1em;
}

.custom-table-responsive {
    border-radius: 6px;
}

.custom-table {
    min-width: auto;
}

    .custom-table tbody.table-body {
        text-align: center;
    }

    .custom-table tbody tr.table-body-heading th {
        font-size: 0.8125rem;
        font-family: "Arial";
        padding-bottom: 1.2em;
        padding-top: 1.2em;
    }

    .custom-table tbody th, .custom-table tbody td {
        font-size: 0.825rem;
        font-family: "Arial";
        padding-bottom: 1.7em;
        padding-top: 1.7em;
    }

    .custom-table tbody tr:not(.spacer) {
        border-radius: 6px;
        overflow: hidden;
        -webkit-transition: .3s all ease;
        -o-transition: .3s all ease;
        transition: .3s all ease;
    }

        .custom-table tbody tr:not(.spacer):hover {
            -webkit-box-shadow: 0 2px 10px -5px rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 10px -5px rgba(0, 0, 0, 0.1);
        }

    .custom-table tbody.table-body tr.active td {
        background: #005287;
        color: #FFF;
    }

    .custom-table tbody tr th, .custom-table tbody tr td {
        background: #fff;
        border: none;
    }

        .custom-table tbody tr th:first-child, .custom-table tbody tr td:first-child {
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
        }

        .custom-table tbody tr th:last-child, .custom-table tbody tr td:last-child {
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;
        }

    .custom-table tbody tr.spacer td {
        padding: 0 !important;
        height: 6px;
        border-radius: 0 !important;
        background: transparent !important;
    }

.shipmentstracking-body-track {
    margin-top: 1em;
}

.track {
    border-radius: 6px;
    background: #005287;
    color: #FFF;
    padding: 1.2em 1.5em 0.8em;
    height: 100%;
    position: relative;
}

    .track h5 {
        font-family: "Arial";
        font-size: 1.375rem;
    }

.track-details {
    /*display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;*/
    margin: 0.8em auto;
    padding: 0em 0.2em;
}

    .track-details .table thead tr th.track-details-item {
        color: #FFF;
        font-family: "Aeonik";
        font-size: 0.625rem;
        padding: 0em 0.2em;
        width: 132px;
        display: table-cell;
    }

    .track-details .table tbody tr td.track-details-item {
        color: #FFF;
        font-family: "Arial";
        font-size: 0.875rem;
        padding: 0em 0.2em;
        width: 132px;
        display: table-cell;
    }

.break {
    border: 0.5px solid #C6C6C6;
}

.track-progress {
    margin: 0.8em auto;
    padding: 0em 0.2em;
    height: 270px;
    box-sizing: content-box;
    place-items: center;
    display: table-cell;
    position: relative;
}

.step {
    /*padding: 0.5em 0.5em;
    margin: 1em auto;*/
    position: relative;
    min-height: 1em;
    color: #FFF;
    /*position: absolute;*/
    right: 9em;
    /*top: 5em;*/
}

    /*.step + .step {
        margin-top: 0.8em;
    }*/

    .step p {
        font-family: "Aeonik";
        font-size: 0.625rem;
    }

    .step h5 {
        font-family: "Arial";
        font-size: 0.875rem;
    }

.norecord-text {
    width: 100%;
}

    .norecord-text p {
        background: #f3c9c9;
        border-radius: 6px;
        font-family: "Arial";
        font-size: 1.2rem;
        padding: 1em;
        display: flex;
        align-items: center;
    }
/* Shipments & Tracking-End */
/* Recommendations-Start */
.main-recommendations {
    background: white;
    margin-right: 10px;
    padding: 1em 0em 0em 1em;
}

.recommendations-text h5 {
    font-size: 1.625rem;
    font-family: Arial;
}

.recommendation-container {
    position: relative;
    /* width: 1151px; */
    height: 550px;
    background: url('/images/recommendedBackground.svg');
    background-size: cover;
    overflow: hidden;
    border-radius: 16px;
}

.partsAnimationImage {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    transition: transform 1s ease;
}

.recommendation-container:hover .partsAnimationImage {
    transition: transform 1s ease;
    transform: translate(-50%, -50%) scale(2);
}

.recommendedBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 0.5s ease;
}

.back1 {
    background-image: url('../images/productsBackground1.svg');
    z-index: 2;
}

.back2 {
    background-image: url('../images/productsBackground2.svg');
    opacity: 0;
    z-index: 1;
}

.animate__animated.animate__bounceInRight {
    --animate-duration: 1.5s;
    /*--animate-delay: 1.5s;*/
}

.recommended-parent-container {
    display: flex;
    justify-content: space-between;
    /* height: 600px;
        width: 1151px; */
    overflow: hidden;
    background-size: cover;
    transition: all 1.5s ease;
    border-radius: 16px;
    padding: 2%;
}

.left-section, .right-section {
    /* padding: 40px; */
    opacity: 0;
    transition: opacity 1s ease 0.5s, transform 1s ease 0.5s;
}

.left-section {
    width: auto;
    transform: translateX(-100%);
    color: #FFF;
    font-family: Arial;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: 0.2px;
}

.right-section {
    margin: 4% 0% 0% 0%;
    width: 65%;
    transform: translateX(100%);
    transition: opacity 2s ease 3s, transform 2s ease 3s;
}

    .left-section.show, .right-section.show {
        opacity: 1;
        transform: translateX(0);
    }

.recommended-item {
    /*border: 2px solid black;*/
    /* padding: 15%; */
    padding: 13%;
    padding: 15px;
    background-color: white;
    border-radius: 16px;
    height: 100%;
    /*height: 91%;*/
    justify-content: space-evenly;
}

#product-carousel .owl-item {
    height: 371px;
    overflow: hidden;
}

#product-carousel .recommended-item img {
    /*height: 35%;
    width: 97px;*/
    aspect-ratio: 3 / 2;
    object-fit: contain;
    width: 75%;
}

.owl-item {
    margin-right: 2%;
}

#product-carousel > div.owl-stage-outer > div > div > div > img {
    padding: 4% 0;
}

#product-carousel > div > img {
    border-radius: 10px;
    width: 103px !important;
    height: 73.226px !important;
}

.title-p {
    color: #414869;
    text-align: center;
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 22.4px;
    letter-spacing: 0.2px;
}

.bottom-p {
    color: #64748B;
    text-align: center;
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /*to ensure no clipping of CTA :*/ 
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
}

.productCardsBottomTextSection {
    color: #0C7576;
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    font-weight: 550;
    line-height: normal;
    padding-top: 15%;
}

.products-chevron {
    font-size: 11px !important;
}

.recommended-text {
    color: #FFF;
    font-family: Arial;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: 0.2px;
}

.products-text {
    color: #FFF;
    font-family: Arial;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: 0.2px;
}

.recommendations-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    grid-gap: 2em;
    margin-top: 0.8em;
}

    .recommendations-products .products {
        border-radius: 6px;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .recommendations-products .products .product-image {
            background: linear-gradient(135deg, #FFF 17.02%, rgba(203, 203, 203, 0.12) 101.27%);
            border-radius: 12px;
            width: 212px;
            height: 184px;
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .recommendations-products .products .product-image img {
                max-width: 100%;
                max-height: 100%;
            }

        .recommendations-products .products .product-text {
            padding-left: 1em;
        }

            .recommendations-products .products .product-text h5 {
                font-size: 1.375rem;
                font-family: "Arial";
                margin-bottom: 0.3em;
            }

            .recommendations-products .products .product-text p {
                font-size: 0.875rem;
                font-family: "Arial";
                margin-bottom: 0.3em;
            }

            .recommendations-products .products .product-text h6 {
                font-size: 1.25rem;
                font-family: "Arial";
                margin-bottom: 0.3em;
            }

            .recommendations-products .products .product-text .product-contact {
                font-size: 0.75rem;
                font-family: "Aeonik";
                background: #005287;
                color: #FFF;
                padding: 0.8em 3em;
            }

                .recommendations-products .products .product-text .product-contact:hover {
                    background: #FFF;
                    border: 1px solid #005287;
                    color: #005287;
                }
/* Recommendations-End */

/* Promotions-Start */
.main-promotions {
    /*background: linear-gradient(180deg, #ECEFF0 37.67%, rgba(255, 255, 255, 0.47) 57.63%, rgba(255, 255, 255, 0.12) 109.56%);*/
    background: white;
    /*border-radius: 10px;*/
    /*margin: 1em 0em 0em 0em;*/
    padding: 3em 0em 3em 0em;
    padding-top: 40px;
}

.promotions-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .promotions-text h5 {
        font-size: 1.625rem;
        font-family: "Arial";
    }

.promotions-showmore {
    color: #000;
    display: inline-flex;
    gap: 10px;
    align-items: center;
}

    .promotions-showmore a {
        font-size: 1.25rem;
        font-family: "Arial";
    }

.promotions-ad {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    /*margin: 1em auto;*/
    margin: 0em auto;
    justify-content: center;
    align-items: center;
    /*text-align: -webkit-center;*/
    padding: 0% 1%;
}

.promotions-content .img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0% 4%;
}

    .promotions-content .img-container img {
        border-radius: 12px;
        object-fit: fill;
        object-position: center;
        width: 100%;
        height: 35vh;
        overflow: hidden;
    }

.main-productpromotions {
    background: #FFF;
    border-radius: 6px;
    padding: 1em;
}

.promo-text h4 {
    font-size: 1.625rem;
    font-family: "Arial";
}

.promo-vendor {
    background: #FFF;
    border-radius: 30px;
    border: 0.3px solid #8B8B8B;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.3em 0.5em;
}

.promo-drop {
    background: none;
    border: none;
}

    .promo-drop a {
        color: #000;
        font-family: "Arial";
    }

.promotions-container {
    background-color: #fff;
    margin-top: 2em;
}

.promo-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    padding: 0em;
    justify-content: space-between;
}

    .promo-gallery > li {
        cursor: pointer;
        position: relative;
        list-style-type: none;
        flex: 0 1 auto;
    }

        .promo-gallery > li img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            vertical-align: middle;
            border-radius: 5px;
        }

.pro-details {
    position: absolute;
    top: 5em;
    left: 5em;
    width: 400px;
}

    .pro-details h5 {
        font-size: 1.375rem;
        font-family: "Arial";
    }

    .pro-details h4 {
        font-size: 1.875rem;
        font-family: "Arial";
    }

    .pro-details p {
        font-size: 0.675rem;
        font-family: "Arial";
        margin-bottom: 1em;
    }

.promo-contact {
    font-size: 0.75rem;
    font-family: "Aeonik";
    background: #FFF;
    border-radius: 30px;
    color: #000;
    padding: 0.8em 3em;
}
/* Promotions-End */

/* Blogs & News-Start */
.main-blognews {
    /*background: linear-gradient(180deg, #ECEFF0 37.67%, rgba(255, 255, 255, 0.47) 57.63%, rgba(255, 255, 255, 0.12) 109.56%);
    border-radius: 10px;
    margin: 1em 0em 0em 0em;*/
    padding: 40px 20px 40px 20px;
}

.blognews-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .blognews-text h5 {
        font-size: 1.625rem;
        font-family: "Arial";
    }

.blognews-showmore {
    color: #000;
    display: inline-flex;
    gap: 10px;
    align-items: center;
}

    .blognews-showmore a {
        font-size: 1.25rem;
        font-family: "Arial";
    }

.blognews-head {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.blognews-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1.5em;
}

.blognews-body-data {
    border-radius: 8px;
    margin: 1em auto;
}

    .blognews-body-data .blog-picture img {
        width: 100%;
        height: 350px;
        object-fit: cover;
        border-radius: 12px;
    }

    .blognews-body-data .blog-details {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 0.3em 0em;
    }

        .blognews-body-data .blog-details p {
            font-family: "Arial";
            font-size: 0.775rem;
        }

    .blognews-body-data .blog-description {
        text-align: justify;
        display: flex;
        flex-direction: column;
    }

        .blognews-body-data .blog-description span {
            font-family: "Arial";
            font-size: 1rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            -webkit-line-clamp: 3;
        }

        .blognews-body-data .blog-description a {
            color: #000;
            text-decoration: underline;
            font-family: "Aeonik Pro Bold";
        }

.main-blog {
    background: #FFF;
    border-radius: 6px;
    padding: 1em;
}

.blog-area {
    display: grid;
    grid-template-columns: 1fr;
}

.blogpage-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1.5em;
}

.blogpage-body-data {
    margin: 1em auto;
}

.blog-post {
    position: relative;
}

    .blog-post a img {
        border-radius: 12px;
        height: 400px;
    }

    .blog-post .blog-postinfo {
        background: rgba(0,82,135,0.8);
        border-radius: 12px;
        position: absolute;
        bottom: 0;
        padding: 1em;
        width: 100%;
    }

        .blog-post .blog-postinfo h6 {
            color: #FFF;
            font-family: "Arial";
            font-size: 0.875rem;
        }

        .blog-post .blog-postinfo p {
            color: #FFF;
            font-family: "Arial";
            font-size: 0.775rem;
        }

.blogbox {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

.blogpost {
    border-radius: 8px;
    margin: 1em 0em;
    display: flex;
    height: 400px;
    position: relative;
}

    .blogpost img {
        border-radius: 32px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        object-fit: fill;
        width: 100%;
    }

.blog-name {
    border-radius: 8px;
    width: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
    position: relative;
}

    .blog-name h5 {
        text-transform: uppercase;
        color: #FFF;
        font-family: "Aeonik Pro Bold";
        font-size: 3rem;
    }

    .blog-name .blog-author {
        background: rgba(255,255,255,0.5);
        border-radius: 12px;
        position: absolute;
        bottom: 3em;
        left: 3em;
        padding: 1em;
    }

        .blog-name .blog-author p {
            color: #000;
            font-family: "Arial";
            font-size: 0.875rem;
        }

.blogparagraph {
    margin: 1em 0em;
}

    .blogparagraph h5 {
        font-family: "Aeonik Pro Bold";
        font-size: 1.5rem;
    }

    .blogparagraph p {
        font-family: "Arial";
        font-size: 1rem;
        margin-bottom: 1em;
    }
/* Blogs & News-End */

/* Invoice-Start*/
.main-invoice {
    background: #FFF;
    border-radius: 6px;
    padding: 1em 0.5em;
    padding-top: 38px;
}

.invoice-area {
    display: grid;
    grid-template-columns: 1fr;
}
/* Invoice-End*/

/*Quotes-Start*/
.main-quotes {
    background: #FFF;
    /*border-radius: 6px;*/
    padding: 1em 0.5em;
}

/*ETA-Start*/
.main-eta {
    background: #FFF;
    border-radius: 6px;
    padding: 1em;
}

.eta-area {
    display: grid;
    grid-template-columns: 1fr;
}

.eta-list {
    display: flex;
    flex-direction: column;
}

.eta-modal {
    border-radius: 10px;
}

.eta-modalhead {
    border-bottom: none;
}

.eta-modalfoot {
    border-top: none;
}

.eta-tooltip {
    position: relative;
    display: inline-block;
}

    .eta-tooltip .eta-tooltiptext {
        visibility: hidden;
        width: 150px;
        background-color: #005287;
        border: 2px solid #FFF;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 0.3em;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: -16%;
        margin-left: -60px;
    }

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

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

.btn-upload {
    color: #FFF !important;
    font-size: 0.875rem;
    font-family: "Arial" !important;
    background-color: #005287 !important;
    border: none;
    border-radius: 4px;
    /*margin: 0.25rem 0.225rem;*/
    padding: 0.375em 1em !important;
    width: auto;
}

    .btn-upload:hover {
        background-color: #d4e3fb;
        color: #1f509e;
    }

.btn-uploadsave {
    color: #d4e3fb !important;
    font-size: 0.875rem !important;
    font-family: "Arial" !important;
    background-color: #1f509e !important;
    border: none;
    border-radius: 4px;
    margin: 0.25rem 0.225rem;
    padding: 0.375em 1em !important;
    width: auto;
}

    .btn-uploadsave:hover {
        background-color: #d4e3fb !important;
        color: #1f509e !important;
    }

.btn-uploadcancel {
    color: #ffecde !important;
    font-size: 0.875rem;
    font-family: "Arial" !important;
    background-color: #cf6a23 !important;
    border: none;
    border-radius: 4px;
    margin: 0.25rem 0.225rem;
    padding: 0.375em 1em !important;
    width: auto;
}

    .btn-uploadcancel:hover {
        background-color: #ffecde !important;
        color: #cf6a23 !important;
    }
/*ETA-End*/

/* Leads-Start*/
.main-leads {
    background: #FFF;
    border-radius: 6px;
    padding: 1em 0.5em;
}

.leads-area {
    display: grid;
    grid-template-columns: 1fr;
}
/* Leads-End*/

/* Invite User-Start*/
.main-inviteuser {
    background: #FFF;
    /*border-radius: 6px;*/
    padding: 1em 0.5em;
}

.inviteuser-area {
    display: grid;
    grid-template-columns: 1fr;
}

.inviteuser-text {
    display: block;
}

    .inviteuser-text h1 {
        color: #000000;
        font-size: 1.5rem;
        font-family: "Arial";
        line-height: 1;
        margin-bottom: 0em;
    }

    .inviteuser-text p {
        color: #474747;
        font-size: 1rem;
        font-family: "Arial";
    }

.inviteuser-buttons {
    /*display: inline-flex;
    gap: 10px;
    justify-content: center;*/
    max-width: 100%;
}

.userlist-text {
    border: 1px solid #8B8B8B !important;
    font-size: 1rem;
    font-family: "Arial";
    padding: 0.5em;
}

.btn-inviteuser {
    color: #dfedc8;
    font-size: 0.875rem;
    font-family: "Arial";
    background-color: #619d00;
    border: none;
    border-radius: 4px;
    margin: 0.25rem 0.225rem;
    padding: 0.375em 1em !important;
    width: 5.35vw;
}

    .btn-inviteuser:hover {
        color: #619d00;
        background-color: #dfedc8;
    }

.btn-saveuser, .btn-saveuser:hover {
    display: inline-flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 1px solid #66AFB9;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.90);
    color: #0C7576;
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-right: 15px;
    margin-top: 10px;
}

.btn-canceluser, .btn-canceluser:hover {
    border-radius: 6px;
    border: 1px solid rgba(123, 139, 163, 0.56);
    background: rgba(255, 255, 255, 0.90);
    color: #64748B;
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-top: 10px;
}

.btn-savecustomer {
    color: #d4e3fb;
    font-size: 0.875rem;
    font-family: "Arial";
    background-color: #1f509e;
    border: none;
    border-radius: 4px;
    margin: 0.25rem 0.225rem;
    padding: 0.375em 1em !important;
    width: 10vw;
}

    .btn-savecustomer:hover {
        color: #1f509e;
        background-color: #d4e3fb;
    }

.inviteuser-buttons a:hover {
    color: #FFF;
}

.inviteuser-list {
    display: grid;
    grid-template-columns: 1fr;
}

.user-name {
    display: inline-flex;
    align-items: center;
    gap: 1em;
}

.user-alphabet {
    background: cornsilk;
    border: 3px solid #005287;
    border-radius: 50%;
    text-align: center;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .user-alphabet p {
        color: #0A9FFF;
        font-size: 1.5rem;
        font-family: "Arial";
    }

.user-access {
    font-size: 0.75rem;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    background: #00558C;
    color: #FFF;
    padding: 0.7em 1em;
}

.search-filter {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
}

.user-table {
    background: #FFF;
    /*border-radius: 6px;*/
}
/* Invite User-End*/

/* Add Promotions-Start*/
.main-promotionlist {
    background: #FFF;
    border-radius: 6px;
    padding: 1em;
}

.promotionlist-area {
    display: grid;
    grid-template-columns: 1fr;
}

.promotionlist-text {
    display: block;
}

    .promotionlist-text h1 {
        color: #000000;
        font-size: 1.5rem;
        font-family: "Aeonik Pro Bold";
        line-height: 1;
        margin-bottom: 0em;
    }

    .promotionlist-text p {
        color: #474747;
        font-size: 1rem;
        font-family: "Arial";
    }

.promotionlist-buttons {
    /*display: inline-flex;
    gap: 10px;
    justify-content: center;*/
    max-width: 100%;
}

.promotionlist-text {
    font-size: 1rem;
    font-family: "Arial";
    padding: 0.5em 0em;
}

.btn-addpromo {
    color: #dfedc8;
    font-size: 0.875rem;
    font-family: "Arial";
    background-color: #619d00;
    border: none;
    border-radius: 4px;
    margin: 0.25rem 0.225rem;
    padding: 0.375em 1em !important;
    width: auto;
}

    .btn-addpromo:hover {
        color: #619d00;
        background-color: #dfedc8;
    }

.btn-savepromo {
    color: #d4e3fb;
    font-size: 0.875rem;
    font-family: "Arial";
    background-color: #1f509e;
    border: none;
    border-radius: 4px;
    margin: 0.25rem 0.225rem;
    padding: 0.375em 1em !important;
    width: auto;
}

    .btn-savepromo:hover {
        color: #1f509e;
        background-color: #d4e3fb;
    }

.btn-cancelpromo {
    color: #ffecde;
    font-size: 0.875rem;
    font-family: "Arial";
    background-color: #cf6a23;
    border: none;
    border-radius: 4px;
    margin: 0.25rem 0.225rem;
    padding: 0.375em 1em !important;
    width: auto;
}

    .btn-cancelpromo:hover {
        color: #cf6a23;
        background-color: #ffecde;
    }

.promotionlist-buttons a:hover {
    color: #FFF;
}

.promotionlist-list {
    display: grid;
    grid-template-columns: 1fr;
}

.promotionlist-name {
    display: inline-flex;
    align-items: center;
    gap: 1em;
}

.promotionlist-alphabet {
    background: cornsilk;
    border: 3px solid #005287;
    border-radius: 50%;
    text-align: center;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .promotionlist-alphabet p {
        color: #0A9FFF;
        font-size: 1.5rem;
        font-family: "Aeonik Pro Bold";
    }

.promotionlist-access {
    font-size: 0.75rem;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    background: #00558C;
    color: #FFF;
    padding: 0.7em 1em;
}

.search-filter {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
}

.promotionlist-table {
    background: #FFF;
    border-radius: 6px;
}
/* Add Promotions-End*/

/* Add Blogs-Start*/
.main-blognewslist {
    background: #FFF;
    border-radius: 6px;
    padding: 1em;
}

.blognewslist-area {
    display: grid;
    grid-template-columns: 1fr;
}

.blognewslist-text {
    display: block;
}

    .blognewslist-text h1 {
        color: #000000;
        font-size: 1.5rem;
        font-family: "Aeonik Pro Bold";
        line-height: 1;
        margin-bottom: 0em;
    }

    .blognewslist-text p {
        color: #474747;
        font-size: 1rem;
        font-family: "Arial";
    }

.blognewslist-buttons {
    /*display: inline-flex;
    gap: 10px;
    justify-content: center;*/
    max-width: 100%;
}

.blognewslist-text {
    font-size: 1rem;
    font-family: "Arial";
    padding: 0.5em 0em;
}

.btn-addblognews {
    color: #dfedc8;
    font-size: 0.875rem;
    font-family: "Arial";
    background-color: #619d00;
    border: none;
    border-radius: 4px;
    margin: 0.25rem 0.225rem;
    padding: 0.375em 1em !important;
    width: auto;
}

    .btn-addblognews:hover {
        color: #619d00;
        background-color: #dfedc8;
    }

.btn-saveblognews {
    color: #d4e3fb;
    font-size: 0.875rem;
    font-family: "Arial";
    background-color: #1f509e;
    border: none;
    border-radius: 4px;
    margin: 0.25rem 0.225rem;
    padding: 0.375em 1em !important;
    width: auto;
}

    .btn-saveblognews:hover {
        color: #1f509e;
        background-color: #d4e3fb;
    }

.btn-cancelblognews {
    color: #ffecde;
    font-size: 0.875rem;
    font-family: "Arial";
    background-color: #cf6a23;
    border: none;
    border-radius: 4px;
    margin: 0.25rem 0.225rem;
    padding: 0.375em 1em !important;
    width: auto;
}

    .btn-cancelblognews:hover {
        color: #cf6a23;
        background-color: #ffecde;
    }

.blognewslist-buttons a:hover {
    color: #FFF;
}

.blognewslist-list {
    display: grid;
    grid-template-columns: 1fr;
}

.blognewslist-name {
    display: inline-flex;
    align-items: center;
    gap: 1em;
}

.blognewslist-alphabet {
    background: cornsilk;
    border: 3px solid #005287;
    border-radius: 50%;
    text-align: center;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .blognewslist-alphabet p {
        color: #0A9FFF;
        font-size: 1.5rem;
        font-family: "Aeonik Pro Bold";
    }

.blognewslist-access {
    font-size: 0.75rem;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    background: #00558C;
    color: #FFF;
    padding: 0.7em 1em;
}

.search-filter {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
}

.blognewslist-table {
    background: #FFF;
    border-radius: 6px;
}
/* Add Blogs-End*/

/*Vendors-Start*/
.main-vendors {
    background: #FFF;
    border-radius: 6px;
    padding: 1em 0.5em;
}

.vendor-area {
    display: grid;
    grid-template-columns: 1fr;
}

.vendor-head h4 {
    font-size: 1.375rem;
    font-family: "Arial";
}

.vendor-head .btn-addvendor {
    color: #FFF;
    background-color: #005287;
    border: none;
    border-radius: 30px;
    margin: 0.25rem 0.225rem;
    padding: 0.375em 1em !important;
    /*width: 11.35vw;*/
}

.vendor-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1em;
    justify-content: center;
    align-items: center;
    padding-top: 2em;
    border-top: 1px solid #E3E8F0;
}

.vendor-box {
    border-radius: 6px;
    background: #FFF;
    box-shadow: rgba(3, 84, 136, 0.1) 0px 1px 5px;
    display: flex;
    /*justify-content: space-between;*/
    align-items: flex-start;
    padding: 0.8em;
    height: 368px;
    flex-direction: column;
}

.vendor-box .vendor-image {
    /*background: linear-gradient(135deg, #FFF 13.02%, rgba(203, 203, 203, 0.12) 103.27%);
    border-radius: 12px;*/
    width: 130px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 1em;
    margin-bottom: 2em;
}

.vendor-box .vendor-image img {
    max-width: 130px;
    max-height: 60px;
}

.vendor-box .vendor-text {
    padding-left: 1em;
    padding-right: 1em;
}

.vendor-box .vendor-text h5 {
    color: #414869;
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 22.4px */
    letter-spacing: 0.2px;
    align-self: stretch;
    margin-bottom: 1em;
}

.vendor-box .vendor-text p {
    color: #64748B;
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
    align-self: stretch;
    height: 150px;
}

.vendor-box .vendor-text .vendor-contact {
    font-size: 0.7rem;
    font-family: Arial;
    border: 2px solid #005287;
    color: #005287;
    padding: 0.8em 3em;
}

.vendor-box .vendor-text .vendor-contact:hover {
    background: #005287;
    color: #FFF;
}

.vendor-toggle {
    padding: 0.8em 0em;
    display: flex;
}

.switch-container {
    display: flex;
    gap: 0.5em;
    border: 2px solid #c1bebe;
    border-radius: 6px;
    padding: 0.5em;
}

.btn-vendor {
    border: none;
    outline: none;
    padding: 12px 16px;
    background: none;
    cursor: pointer;
    border-radius: 6px;
    color: #8B8B8B;
    transition: all 0.3s ease-in-out;
}

.select {
    background-color: #005287;
    color: #FFF;
}
/*Vendors-End*/

/* MyProfile-Start*/
.main-profile {
    background: #FFF;
    border-radius: 6px;
    padding: 1em;
}

.profile-area {
    display: grid;
    grid-template-columns: 1fr;
}

.profile-text h4 {
    font-size: 1.275rem;
    font-family: "Aeonik Pro Bold";
}

.profile-bg {
    border-radius: 6px;
    background: linear-gradient(90deg, #116abe 1.72%, #F7F7F7 112.55%);
    height: 136px;
    margin: 1em auto 0em;
}

.avatar {
    height: 180px;
    width: 180px;
    position: relative;
    display: inline-block;
    margin: -5em 0em 1em 1.5em;
}

    .avatar span {
        background: #fff;
        border-radius: 50%;
        height: 30px;
        width: 30px;
        position: absolute;
        bottom: 1em;
        right: 1em;
        padding: 0.4em;
        display: flex;
        justify-content: center;
        border: 1px solid #000;
    }

.avatar-img {
    border-radius: 50%;
    border: 5px solid #fff;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: relative;
}

.initials {
    background-color: rgba(0,82,162,1);
    border-radius: 50%;
    border: 5px solid #fff;
    height: 100%;
    width: 100%;
    position: relative;
}

.initials-inner {
    color: #FFF;
    font-size: 3.875rem;
    font-family: "Arial";
}

.profile-name {
    margin: 0.5em 2em;
}

    .profile-name h3 {
        font-size: 1.875rem;
        font-family: "Arial";
    }

    .profile-name p {
        color: #8B8B8B;
        font-size: 1.2rem;
        font-family: "Arial";
    }

.profile-info {
    margin: 1em 1.5em;
    width: 50%;
}

    .profile-info p {
        color: #8B8B8B;
        font-size: 1.2rem;
        font-family: "Arial";
    }

    .profile-info h4 {
        font-size: 1.2rem;
        font-family: "Arial";
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .profile-info span {
        background: #D4E3FB;
        border-radius: 50%;
        width: 28px;
        padding: 0.4em;
        display: inline-flex;
        justify-content: center;
        cursor: pointer;
    }

.profile-update {
    margin: 0.5em 1.5em;
}

    .profile-update .btn-profileupdate {
        color: #FFF;
        background-color: #005287;
        border: none;
        border-radius: 30px;
        margin: 0.25rem 0.225rem;
        padding: 0.375em 1em !important;
        /*width: 11.35vw;*/
    }
/* MyProfile-End*/

/*Teams-Start*/
.main-teams {
    background: #FFF;
    border-radius: 6px;
    padding: 1em;
}

.team-area {
    display: grid;
    grid-template-columns: 1fr;
}

.team-head h4 {
    font-size: 1.375rem;
    font-family: "Arial";
}

.team-head .btn-addmember {
    color: #FFF;
    background-color: #005287;
    border: none;
    border-radius: 30px;
    margin: 0.25rem 0.225rem;
    padding: 0.375em 1em !important;
    /*width: 11.35vw;*/
}

.member-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1em;
    justify-content: center;
    align-items: center;
    margin-top: 1em;
}

.member-box {
    border-radius: 6px;
    border: 1px solid #8b8b8b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8em;
}

    .member-box .member-img {
        border-radius: 6px;
        width: 86px;
        height: 86px;
        -o-object-fit: cover;
        object-fit: cover;
        position: relative;
    }

    .member-box .member-avatar {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .member-box .member-info {
        margin-left: 1em;
    }

        .member-box .member-info h3 {
            font-size: 1.675rem;
            font-family: "Arial";
        }

        .member-box .member-info p {
            color: #8B8B8B;
            font-size: 1rem;
            font-family: "Arial";
        }

    .member-box .member-edit img {
        height: 36px;
        cursor: pointer;
    }
/*Teams-End*/

/* Main-End */
/* CONTENTS */

/* FOOTER */
/* Footer-Start */
/* Footer-End */
/* FOOTER */

@media (max-width: 575.98px) {
    .main-login, .main-reset, .main-introduction, .main-widgets, .salesinsights-graphs, .main-shipmentstracking, .recommendations-products, .blognews-head, .blognews-body, .blogpage-body, .footnavigation-head, .footnavigation-foot {
        grid-template-columns: 1fr;
    }

    .tdnex-app {
        grid-template-rows: auto 1fr auto;
    }

    .login-carousel, .reset-ad img {
        display: none;
    }

    .partner-logo {
        margin: 1em auto 2em;
    }

    .partner-input {
        padding: 0em 0.5em;
    }

    .navbar-brand {
        margin: 0em auto;
    }

        .navbar-brand img {
            width: 120px;
        }

    .navbar .list-inline {
        margin: 0.5em auto;
        text-align: center;
    }

    .nav-search-form {
        width: 180px;
    }

        .nav-search-form .search-btn {
            top: 1px;
        }

    .btn-light span {
        top: -24px;
        right: -5px;
    }

    .partner-drop {
        padding: 0.2em 0em 0.2em 0em;
    }

    .dropdown-vendor {
        padding: 0.35em 0em;
    }

    .partner-text {
        padding: 0.4em 0.5em;
    }

    .notify-boundry {
        width: 356px;
        padding: 0.5em;
        margin-right: -3.5em;
    }

    .tdnex-main {
        /*padding: 4em 0em;*/
    }

    .tdnex-aside {
        width: 178px;
        transition: ease-in-out;
    }

    .aside-nav {
        margin: 0.5em auto 0em;
        padding: 1em 0em;
    }

        .aside-nav .nav-link {
            font-size: 0.8rem;
        }

        .aside-nav .nav-icon img {
            width: 14px;
        }

        .aside-nav .submenu-link {
            font-size: 0.675rem;
            margin-left: 2em;
        }

    .aside-ad {
        padding: 0em;
    }

    .ad-content h6 {
        font-size: 0.8rem;
    }

    .ad-content p {
        font-size: 0.5rem;
    }

    .main-introduction {
        margin: 1em 1em 1em;
    }

    .introduction-version {
        margin: 1em 2em 1em;
    }

    .introduction-text {
        text-align: center;
        margin-bottom: 1em;
    }

        .introduction-text h1 {
            font-size: 1rem;
        }

        .introduction-text p {
            font-size: 0.675rem;
        }

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

        .introduction-buttons a {
            font-size: 0.55rem;
            width: auto;
            gap: 4px;
        }

        .introduction-buttons .list-inline-item {
            margin-right: 0em;
        }

    .btn-buyproduct img, .btn-renewproduct img, .btn-cloudservices img, .btn-trainingcourses img {
        width: 12px;
    }

    .trainingcourses h6 {
        font-size: 1rem;
    }

    .widgets a {
        font-size: 0.8rem;
    }

    .widget-refresh a, .graph-refresh a {
        font-size: 0.6rem;
    }

    .widget-leads p, .widget-invoices p, .widget-quotes p, .widget-orders p, .widget-training p {
        font-size: 0.8rem;
    }

    .widget-leads h5, .widget-invoices h5, .widget-quotes h5, .widget-orders h5, .widget-training h5 {
        font-size: 1.2rem;
    }

    .widget-quotes {
        margin: 0em 0em;
    }

    .salesinsights-head h5, .shipmentstracking-head-text, .recommendations-text h5, .promotions-text h5, .blognews-text h5 {
        font-size: 1.325rem;
    }

    .salesinsights-graphs .graph p {
        font-size: 1rem;
    }

    .graph-responsive, .recommendations-products .products {
        flex-direction: column;
    }

    .graph table tbody tr.legend-font td {
        font-size: 0.8rem;
    }

    .graph-year {
        padding: 0.35rem 1.75rem 0.35rem 1rem;
        font-size: 0.675rem;
        background-size: 10px 15px;
    }

    .graph-refresh {
        padding: 0.5em 0.5em;
    }

    .shipmentstracking-head-text {
        margin-bottom: 0.2em;
    }

    .ship-search-form {
        margin-right: 0px;
    }

    .shipmentstracking-body {
        grid-gap: 0em;
    }

    /*.track {
        height: 436px;
    }*/

    .track-details-item h5 {
        font-size: 0.675rem;
    }

    .step {
        right: 9em;
    }

        .step p {
            margin-left: -2.5em;
        }

    .recommendations-products .products .product-text {
        text-align: center;
    }

        .recommendations-products .products .product-text h5, .recommendations-products .products .product-text h6 {
            font-size: 1rem;
        }

        .recommendations-products .products .product-text p {
            font-size: 0.675rem;
        }

    .promotions-content .img-container img {
        height: 14vh;
        width: auto;
    }

    .blognews-body-data .blog-details p {
        font-size: 0.575rem;
    }

    .blognews-body-data .blog-description span, .blognews-body-data .blog-description a {
        font-size: 0.675rem;
    }

    .profile-info {
        width: 100%;
    }

    .vendor-details, .member-details {
        grid-template-columns: 1fr;
    }

    .vendor-box {
        height: auto;
        flex-direction: column;
    }

    .footnavigation-head {
        padding: 0em;
    }

    .footnavigation-about {
        padding: 1em 1em;
        justify-self: start;
    }

        .footnavigation-about .company-description {
            padding: 0em 0em 0em 0em;
        }

            .footnavigation-about .company-description p {
                font-size: 0.675rem;
            }

    .footnavigation-company {
        padding: 1em 0em;
        justify-self: start;
    }

    .footnavigation-address {
        padding: 2em 1em;
        justify-self: start;
    }

    .footnavigation-foot {
        padding: 0em;
    }

        .footnavigation-foot .footnavigation-copyright {
            padding: 0em 1em;
        }

        .footnavigation-foot .footnavigation-policy {
            padding: 1em 1em;
            justify-self: start;
        }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .main-login, .main-reset, .main-introduction, .main-widgets, .salesinsights-graphs, .main-shipmentstracking, .recommendations-products, .blognews-head, .blognews-body, .blogpage-body, .footnavigation-head, .footnavigation-foot {
        grid-template-columns: 1fr;
    }

    .tdnex-app {
        grid-template-rows: auto 1fr auto;
    }

    .login-carousel, .reset-ad img {
        display: none;
    }

    .navbar-brand {
        margin: 0em auto;
    }

        .navbar-brand img {
            width: 120px;
        }

    .navbar .list-inline {
        margin: 0.5em auto;
        text-align: center;
    }

    .nav-search-form {
        width: 180px;
    }

        .nav-search-form .search-btn {
            top: 1px;
        }

    .btn-light span {
        top: -24px;
        right: -5px;
    }

    .partner-drop {
        padding: 0.2em 0em 0.2em 0em;
    }

    .dropdown-vendor {
        padding: 0.35em 0em;
    }

    .partner-text {
        padding: 0.4em 0.5em;
    }

    .notify-boundry {
        margin-right: -3.5em;
    }

    .tdnex-main {
        /*padding: 4em 0em;*/
    }

    .tdnex-aside {
        width: 178px;
        transition: ease-in-out;
    }

    .aside-nav {
        margin: 0.5em auto 0em;
        padding: 1em 0em;
    }

        .aside-nav .nav-link {
            font-size: 0.8rem;
        }

        .aside-nav .nav-icon img {
            width: 14px;
        }

        .aside-nav .submenu-link {
            font-size: 0.675rem;
            margin-left: 2em;
        }

    .aside-ad {
        padding: 0em;
    }

    .ad-content h6 {
        font-size: 0.8rem;
    }

    .ad-content p {
        font-size: 0.5rem;
    }

    .main-introduction {
        margin: 1em 1em 1em;
    }

    .introduction-version {
        margin: 1em 2em 1em;
    }

    .introduction-text {
        text-align: center;
        margin-bottom: 1em;
    }

        .introduction-text h1 {
            font-size: 1rem;
        }

        .introduction-text p {
            font-size: 0.675rem;
        }

    .introduction-buttons a {
        font-size: 0.55rem;
        width: auto;
        gap: 4px;
    }

    .introduction-buttons .list-inline-item {
        margin-right: 0em;
    }

    .btn-buyproduct img, .btn-renewproduct img, .btn-cloudservices img, .btn-trainingcourses img {
        width: 12px;
    }

    .widgets a {
        font-size: 0.8rem;
    }

    .widget-refresh a, .graph-refresh a {
        font-size: 0.6rem;
    }

    .widget-leads p, .widget-invoices p, .widget-quotes p, .widget-orders p, .widget-training p {
        font-size: 0.8rem;
    }

    .widget-leads h5, .widget-invoices h5, .widget-quotes h5, .widget-orders h5, .widget-training h5 {
        font-size: 1.2rem;
    }

    .widget-quotes {
        margin: 0em 0em;
    }

    .salesinsights-head {
        flex-direction: row;
    }

        .salesinsights-head h5, .shipmentstracking-head-text, .recommendations-text h5, .promotions-text h5, .blognews-text h5 {
            font-size: 1.325rem;
        }

    .salesinsights-graphs .graph p {
        font-size: 1rem;
    }

    .graph-responsive, .recommendations-products .products {
        flex-direction: column;
    }

    .graph table tbody tr.legend-font td {
        font-size: 0.8rem;
    }

    .graph-year {
        padding: 0.35rem 1.75rem 0.35rem 1rem;
        font-size: 0.675rem;
        background-size: 10px 15px;
    }

    .graph-refresh {
        padding: 0.5em 0.5em;
    }

    .shipmentstracking-head-text {
        margin-bottom: 0.2em;
    }

    .ship-search-form {
        margin-right: 0px;
    }

    .shipmentstracking-body {
        grid-gap: 0em;
    }

    /*.track {
        height: 100%;
    }*/

    .track-details-item h5 {
        font-size: 0.675rem;
    }

    .step {
        right: 9em;
    }

        .step p {
            margin-left: -2.5em;
        }

    .recommendations-products .products .product-text {
        text-align: center;
    }

        .recommendations-products .products .product-text h5, .recommendations-products .products .product-text h6 {
            font-size: 1rem;
        }

        .recommendations-products .products .product-text p {
            font-size: 0.675rem;
        }

    .promotions-content .img-container img {
        height: 17.5vh;
        width: auto;
    }

    .blognews-body-data .blog-details p {
        font-size: 0.575rem;
    }

    .blognews-body-data .blog-description span, .blognews-body-data .blog-description a {
        font-size: 0.675rem;
    }

    .profile-info {
        width: 100%;
    }

    .vendor-details, .member-details {
        grid-template-columns: 1fr;
    }

    .vendor-box {
        height: auto;
        flex-direction: column;
    }

    .footnavigation-head {
        padding: 0em;
    }

    .footnavigation-about {
        padding: 1em 1em;
        justify-self: start;
    }

        .footnavigation-about .company-description {
            padding: 0em 0em 0em 0em;
        }

            .footnavigation-about .company-description p {
                font-size: 0.675rem;
            }

    .footnavigation-company {
        padding: 1em 0em;
        justify-self: start;
    }

    .footnavigation-address {
        padding: 2em 1em;
        justify-self: start;
    }

    .footnavigation-foot {
        padding: 0em;
    }

        .footnavigation-foot .footnavigation-copyright {
            padding: 0em 1em;
        }

        .footnavigation-foot .footnavigation-policy {
            padding: 1em 1em;
            justify-self: start;
        }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .main-login, .main-reset, .main-shipmentstracking, .blognews-head {
        grid-template-columns: 1fr;
    }

    .main-introduction, .salesinsights-graphs, .blogpage-body, .recommendations-products, .footnavigation-foot {
        grid-template-columns: repeat(2, 1fr);
    }

    .footnavigation-head {
        grid-template-columns: repeat(3, 1fr);
    }

    .main-widgets {
        grid-template-columns: repeat(4, 1fr);
    }

    .tdnex-app {
        grid-template-rows: auto 1fr auto;
    }

    .login-carousel, .reset-ad img {
        display: none;
    }

    .navbar-brand {
        margin: 0em auto;
    }

        .navbar-brand img {
            width: 120px;
        }

    .navbar .list-inline {
        margin: 0.5em auto;
        text-align: center;
    }

    .nav-search-form {
        width: 180px;
    }

        .nav-search-form .search-btn {
            top: 1px;
        }

    .btn-light span {
        top: -24px;
        right: -5px;
    }

    .partner-drop {
        padding: 0.2em 0em 0.2em 0em;
    }

    .dropdown-vendor {
        padding: 0.35em 0em;
    }

    .partner-text {
        padding: 0.45em 0.5em;
    }

    .tdnex-main {
        /*padding: 4em 0em;*/
    }

    .tdnex-aside {
        width: 178px;
        transition: ease-in-out;
    }

    .aside-nav {
        margin: 0.5em auto 0em;
        padding: 1em 0em;
    }

        .aside-nav .nav-link {
            font-size: 0.8rem;
        }

        .aside-nav .nav-icon img {
            width: 14px;
        }

        .aside-nav .submenu-link {
            font-size: 0.675rem;
            margin-left: 2em;
        }

    .aside-ad {
        padding: 0em;
    }

    .ad-content h6 {
        font-size: 0.8rem;
    }

    .ad-content p {
        font-size: 0.5rem;
    }

    .main-introduction {
        margin: 1em 1em 1em;
    }

    .introduction-version {
        margin: 1em 2em 1em;
    }

    .introduction-text {
        text-align: start;
        margin-bottom: 0em;
    }

        .introduction-text h1 {
            font-size: 1rem;
        }

        .introduction-text p {
            font-size: 0.8rem;
        }

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

        .introduction-buttons a {
            font-size: 0.675rem;
            width: auto;
            gap: 4px;
        }

        .introduction-buttons .list-inline-item {
            margin-right: 0em;
        }

    .btn-buyproduct img, .btn-renewproduct img, .btn-cloudservices img, .btn-trainingcourses img {
        width: 12px;
    }
    /*.btn-buyproduct, .btn-renewproduct, .btn-cloudservices {
        padding: 0.8em 0.4em !important;
    }*/

    .widgets a {
        font-size: 0.8rem;
    }

    .widget-refresh a, .graph-refresh a {
        font-size: 0.6rem;
    }

    .widget-leads p, .widget-invoices p, .widget-quotes p, .widget-orders p, .widget-training p {
        font-size: 0.675rem;
    }

    .widget-leads h5, .widget-invoices h5, .widget-quotes h5, .widget-orders h5, .widget-training h5 {
        font-size: 0.9rem;
    }

    .widget-quotes {
        margin: 0em 0em;
    }

    .widget-training a {
        margin-top: 1.6em;
    }

    .invoice-year, .invoice-count {
        font-size: 0.5rem;
    }

    .invoice-count {
        padding: 0em 1.12em;
    }

    .salesinsights-head {
        flex-direction: row;
    }

        .salesinsights-head h5, .shipmentstracking-head-text, .recommendations-text h5, .promotions-text h5, .blognews-text h5 {
            font-size: 1.325rem;
        }

    .salesinsights-graphs .graph p {
        font-size: 1rem;
    }

    .graph-responsive {
        flex-direction: row;
    }

    .graph table tbody tr.legend-font td {
        font-size: 0.8rem;
    }

    .graph-year {
        padding: 0.35rem 1.75rem 0.35rem 1rem;
        font-size: 0.675rem;
        background-size: 10px 15px;
    }

    .graph-refresh {
        padding: 0.5em 0.5em;
    }

    .shipmentstracking-head-text {
        margin-bottom: 0.2em;
    }

    .ship-search-form {
        margin-right: 0px;
    }

    .shipmentstracking-body {
        grid-gap: 0em;
    }

    /*.track {
        height: 436px;
    }*/

    .track-details-item h5 {
        font-size: 0.675rem;
    }

    .step {
        right: 9em;
    }

        .step p {
            margin-left: -2.5em;
        }

    .recommendations-products .products {
        flex-direction: column;
    }

        .recommendations-products .products .product-text {
            text-align: center;
            padding: 1em 3em;
        }

            .recommendations-products .products .product-text h5, .recommendations-products .products .product-text h6 {
                font-size: 1rem;
            }

            .recommendations-products .products .product-text p {
                font-size: 0.675rem;
            }

    .promotions-content .img-container img {
        height: 20vh;
        width: auto;
    }

    .blognews-body-data .blog-details p {
        font-size: 0.575rem;
    }

    .blognews-body-data .blog-description span, .blognews-body-data .blog-description a {
        font-size: 0.675rem;
    }

    .profile-info {
        width: 100%;
    }

    .vendor-details, .member-details {
        grid-template-columns: 1fr;
    }

    .vendor-box {
        height: auto;
        flex-direction: column;
    }

    .footnavigation-head {
        padding: 0em;
    }

    .footnavigation-about {
        padding: 1em 2em;
        justify-self: start;
    }

        .footnavigation-about .company-description {
            padding: 0em 0em 0em 0em;
        }

            .footnavigation-about .company-description p {
                font-size: 0.675rem;
            }

    .footnavigation-company {
        padding: 1em 3em;
        justify-self: start;
    }

    .footnavigation-address {
        padding: 2em 1em;
        justify-self: start;
    }

    .footnavigation-foot {
        padding: 0em 2em 0em 0em;
        align-items: center;
    }

        .footnavigation-foot .footnavigation-copyright {
            padding: 0em 2em;
        }

        .footnavigation-foot .footnavigation-policy {
            padding: 1em 0em;
            justify-self: end;
        }
}

@media (min-width: 992px) and (max-width: 1151.98px) {
    .main-login {
        grid-template-columns: 1.2fr 1fr;
    }

    .main-reset {
        grid-template-columns: 1fr 1fr;
    }

    .main-shipmentstracking, .blognews-head {
        grid-template-columns: 1fr;
    }

    .main-introduction, .salesinsights-graphs, .blogpage-body, .recommendations-products, .footnavigation-foot {
        grid-template-columns: repeat(2, 1fr);
    }

    .blognews-body, .footnavigation-head {
        grid-template-columns: repeat(3, 1fr);
    }

    .main-widgets {
        grid-template-columns: repeat(4, 1fr);
    }

    .tdnex-app {
        grid-template-rows: auto 1fr auto;
    }

    .login-carousel {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .reset-ad img {
        display: block;
    }

    .navbar-brand {
        margin: 0em 0.8em;
    }

        .navbar-brand img {
            width: 134px;
        }

    .nav-search-form .search-input {
        padding: 0.5em 0.75em;
    }

    .nav-search-form .search-btn {
        top: 2px;
        padding: 0.6em 0.8em;
    }

    .dropdown-vendor > .nav-link {
        padding: 0.36rem 1rem;
    }

    .btn-light {
        height: 36px;
        border-radius: 6px;
    }

        .btn-light span {
            top: -20px;
            right: -6px;
        }

    .list-inline-item:not(:last-child) {
        margin-right: 0.3rem;
    }

    .tdnex-main {
        /*padding: 4em 0em;*/
    }

    .aside-nav {
        margin: 1em 0.3em 0em;
        padding: 0.8em 0em;
    }

        .aside-nav .nav-link {
            font-size: 0.875rem;
        }

        .aside-nav .submenu-link {
            font-size: 0.675rem;
            margin-left: 1.8em;
        }

        .aside-nav .submenu-link {
            padding-left: 1.3em;
        }

    .aside-ad {
        padding: 0em;
    }

    .ad-content h6 {
        font-size: 0.8rem;
    }

    .ad-content p {
        font-size: 0.5rem;
    }

    .introduction-text h1 {
        font-size: 1.5rem;
    }

    .introduction-text p {
        font-size: 0.875rem;
    }

    .introduction-buttons {
        place-items: center;
    }

        .introduction-buttons a {
            font-size: 0.5rem;
            width: auto;
            gap: 4px;
        }

    .btn-buyproduct, .btn-renewproduct, .btn-cloudservices {
        padding: 0.8em 0.4em !important;
    }

        .btn-buyproduct img, .btn-renewproduct img, .btn-cloudservices img, .btn-trainingcourses img {
            width: 14px;
        }

    .widgets a {
        font-size: 0.8rem;
    }

    .widget-refresh a, .graph-refresh a {
        font-size: 0.6rem;
    }

    .widget-leads p, .widget-invoices p, .widget-quotes p, .widget-orders p, .widget-training p {
        font-size: 0.675rem;
    }

    .widget-leads h5, .widget-invoices h5, .widget-quotes h5, .widget-orders h5, .widget-training h5 {
        font-size: 0.9rem;
    }

    .widget-quotes {
        margin: 0em 0em;
    }

    .widget-training a {
        margin-top: 1.6em;
    }

    .invoice-year, .invoice-count {
        font-size: 0.5rem;
    }

    .invoice-count {
        padding: 0em 1.12em;
    }

    .introduction-buttons .list-inline-item {
        margin-right: 0em;
    }

    .widget-refresh a {
        font-size: 0.675rem;
    }

    .widget-refresh-img {
        width: 18px;
        height: 18px;
    }

    .widget-refresh i {
        font-size: 0.675rem;
    }

    .salesinsights-head {
        flex-direction: row;
    }

        .salesinsights-head h5, .shipmentstracking-head-text, .recommendations-text h5, .promotions-text h5, .blognews-text h5 {
            font-size: 1.325rem;
        }

    .salesinsights-graphs .graph p {
        font-size: 1.15rem;
    }

    .graph-responsive {
        flex-direction: column;
    }

    .graph-year {
        padding: 0.35rem 2.45rem 0.35rem 1.45rem;
        font-size: 0.675rem;
        background-size: 15px 15px;
    }

    .graph table tbody tr.legend-font td {
        font-size: 0.8rem;
    }

    .graph-refresh {
        padding: 0.5em 0.5em;
    }

        .graph-refresh a {
            font-size: 0.675rem;
        }

        .graph-refresh i {
            font-size: 0.675rem;
        }

    /*.shipmentstracking-body-data {
        grid-column: span 2 / 3;
    }*/

    .ship-search-form {
        width: 200px;
    }

    .custom-table tbody tr.table-body-heading th {
        font-size: 0.6rem;
    }

    .custom-table tbody th, .custom-table tbody td {
        font-size: 0.72rem;
    }

    .track {
        padding: 1.6em 1em;
        height: 100%;
        max-height: clamp(95%, 96%, 100%);
    }

        .track h5 {
            font-size: 1.375rem;
        }

    .track-details-item p {
        font-size: 0.66rem;
    }

    .track-details-item h5 {
        font-size: 0.6rem;
    }

    .step {
        /*padding: 0.5em 0.5em;
        margin: 1.5em auto;*/
        right: 9em;
        /*top: 5.5em;*/
    }

        .step p {
            font-size: 0.625rem;
            margin-left: -2.6em;
        }

        .step h5 {
            font-size: 0.7rem;
        }

    .partsAnimationImage {
        top: 75%;
    }

    .recommendations-products .products {
        flex-direction: column;
    }

        .recommendations-products .products .product-text {
            text-align: center;
            padding: 1em 3em;
        }

            .recommendations-products .products .product-text h5, .recommendations-products .products .product-text h6 {
                font-size: 1rem;
            }

            .recommendations-products .products .product-text p {
                font-size: 0.675rem;
            }

    .promotions-content .img-container img {
        height: 25vh;
        width: auto;
    }

    .blognews-body-data .blog-details p {
        font-size: 0.675rem;
    }

    .blognews-body-data .blog-description span, .blognews-body-data .blog-description a {
        font-size: 0.775rem;
    }

    .profile-info {
        width: 100%;
    }

    .vendor-details, .member-details {
        grid-template-columns: repeat(2, 1fr);
    }

    .vendor-box {
        height: 360px;
        flex-direction: column;
    }

    .footnavigation-head {
        padding: 0em;
    }

    .footnavigation-about {
        padding: 1em 2em;
        justify-self: start;
    }

        .footnavigation-about .company-description {
            padding: 0em 0em 0em 0em;
        }

            .footnavigation-about .company-description p {
                font-size: 0.675rem;
            }

    .footnavigation-company {
        padding: 1em 4em;
        justify-self: start;
    }

    .footnavigation-address {
        padding: 2em 1em;
        justify-self: start;
    }

    .footnavigation-foot {
        padding: 0em 2em 0em 0em;
        align-items: center;
    }

        .footnavigation-foot .footnavigation-copyright {
            padding: 0em 2em;
        }

        .footnavigation-foot .footnavigation-policy {
            padding: 1em 0em;
            justify-self: end;
        }
}

@media (min-width: 1152px) and (max-width: 1279.98px) {
    .main-login {
        grid-template-columns: 1.2fr 1fr;
    }

    .main-reset {
        grid-template-columns: 1fr 1fr;
    }

    .blognews-head {
        grid-template-columns: 1fr;
    }

    .main-shipmentstracking {
        grid-template-columns: 2fr 1fr;
    }

    .main-introduction, .salesinsights-graphs, .blogpage-body, .recommendations-products, .footnavigation-foot {
        grid-template-columns: repeat(2, 1fr);
    }

    .blognews-body, .footnavigation-head {
        grid-template-columns: repeat(3, 1fr);
    }

    .main-widgets {
        grid-template-columns: repeat(4, 1fr);
    }

    .tdnex-app {
        grid-template-rows: auto 1fr auto;
    }

    .login-carousel {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .reset-ad img {
        display: block;
    }

    .navbar-brand {
        margin: 0em 0.8em;
    }

        .navbar-brand img {
            width: 150px;
        }

    .nav-search-form .search-input {
        padding: 0.5em 0.75em;
    }

    .nav-search-form .search-btn {
        top: 2px;
        padding: 0.6em 0.8em;
    }

    .dropdown-vendor > .nav-link {
        padding: 0.36rem 1rem;
    }

    .btn-light {
        height: 36px;
        border-radius: 6px;
    }

        .btn-light span {
            top: -20px;
            right: -6px;
        }

    .tdnex-main {
        /*padding: 4em 0em;*/
    }

    .aside-nav {
        margin: 1em 0.3em 0em;
        padding: 0.8em 0em;
    }

        .aside-nav .nav-link {
            font-size: 0.875rem;
        }

        .aside-nav .submenu-link {
            font-size: 0.8rem;
            margin-left: 1.8em;
        }

        .aside-nav .submenu-link {
            padding-left: 1.3em;
        }

    .aside-ad {
        padding: 0em;
    }

    .ad-content h6 {
        font-size: 0.8rem;
    }

    .ad-content p {
        font-size: 0.5rem;
    }

    .introduction-text h1 {
        font-size: 1.3rem;
    }

    .introduction-text p {
        font-size: 0.775rem;
    }

    .introduction-buttons {
        place-items: center;
    }

        .introduction-buttons a {
            font-size: 0.6rem;
            width: auto;
            gap: 4px;
        }

    .btn-buyproduct img, .btn-renewproduct img, .btn-cloudservices img, .btn-trainingcourses img {
        width: 14px;
    }

    .btn-buyproduct, .btn-renewproduct, .btn-cloudservices, .btn-trainingcourses1 {
        padding: 0.8em 0.6em !important;
    }

    #tdnex-widgets > div.widgetParentContainer > div.flex-container.childContainer1.owl-carousel.owl-theme.owl-loaded.owl-drag > div.owl-stage-outer > div > div > div {
        border-right: 2px solid #f3eeee;
        /*padding: 10px 20px;
        margin: 10px;*/
        margin: 1rem 0;
        padding-left: 3rem;
    }

    .widgetNumber {
        font-size: 1.4rem;
    }

    .widgetDelta {
        font-size: 10px;
    }


    .widgets a {
        font-size: 0.8rem;
    }

    .widget-refresh a, .graph-refresh a {
        font-size: 0.6rem;
    }

    .widget-leads p, .widget-invoices p, .widget-quotes p, .widget-orders p, .widget-training p {
        font-size: 0.7rem;
    }

    .widget-leads h5, .widget-invoices h5, .widget-quotes h5, .widget-orders h5, .widget-training h5 {
        font-size: 1rem;
    }

    .widget-quotes {
        margin: 0em 0em;
    }

    .widget-training a {
        margin-top: 1.6em;
    }

    .invoice-year, .invoice-count {
        font-size: 0.65rem;
    }

    .invoice-count {
        padding: 0em 1.12em;
    }

    .introduction-buttons .list-inline-item {
        margin-right: 0em;
    }

    .widget-refresh a {
        font-size: 0.675rem;
    }

    .widget-refresh-img {
        width: 18px;
        height: 18px;
    }

    .widget-refresh i {
        font-size: 0.675rem;
    }

    .salesinsights-head {
        flex-direction: row;
    }

        .salesinsights-head h5, .shipmentstracking-head-text, .recommendations-text h5, .promotions-text h5, .blognews-text h5 {
            font-size: 1.325rem;
        }

    .salesinsights-graphs .graph p {
        font-size: 1.15rem;
    }

    .graph-responsive {
        flex-direction: column;
    }

    .graph-year {
        padding: 0.35rem 2.45rem 0.35rem 1.45rem;
        font-size: 0.675rem;
        background-size: 15px 15px;
    }

    .graph table tbody tr.legend-font td {
        font-size: 0.8rem;
    }

    .graph-refresh {
        padding: 0.5em 0.5em;
    }

        .graph-refresh a {
            font-size: 0.675rem;
        }

        .graph-refresh i {
            font-size: 0.675rem;
        }

    /*.shipmentstracking-body-data {
        grid-column: span 2 / 3;
    }*/

    .ship-search-form {
        width: 200px;
    }

    .custom-table tbody tr.table-body-heading th {
        font-size: 0.7rem;
    }

    .custom-table tbody th, .custom-table tbody td {
        font-size: 0.68rem;
    }

    .track {
        padding: 1.2em 1.5em 0.5em;
        height: 100%;
        max-height: clamp(95%, 96%, 100%);
    }

        .track h5 {
            font-size: 1.375rem;
        }

    .track-details-item p {
        font-size: 0.66rem;
    }

    .track-details-item h5 {
        font-size: 0.6rem;
    }

    .step {
        /*padding: 0.5em 0.5em;
        margin: 1.5em auto;*/
        right: 9em;
        /*top: 4.5em;*/
    }

        .step p {
            font-size: 0.625rem;
            margin-left: -2.6em;
        }

        .step h5 {
            font-size: 0.7rem;
        }

    .recommendations-products .products {
        flex-direction: column;
    }

    #product-carousel .owl-item {
        height: 330px;
    }

    .right-section {
        margin: 4% 0% 0% 0%;
    }

    .recommendations-products .products .product-text {
        text-align: center;
        padding: 1em 3em;
    }

        .recommendations-products .products .product-text h5, .recommendations-products .products .product-text h6 {
            font-size: 1rem;
        }

        .recommendations-products .products .product-text p {
            font-size: 0.675rem;
        }

    .promotions-content .img-container img {
        height: 25vh;
        width: auto;
    }

    .blognews-body-data .blog-details p {
        font-size: 0.675rem;
    }

    .blognews-body-data .blog-description span, .blognews-body-data .blog-description a {
        font-size: 0.775rem;
    }

    .profile-info {
        width: 100%;
    }

    .vendor-details, .member-details {
        grid-template-columns: repeat(2, 1fr);
    }

    .footnavigation-head {
        padding: 0em;
    }

    .footnavigation-about {
        padding: 1em 2em;
        justify-self: start;
    }

        .footnavigation-about .company-description {
            padding: 0em 0em 0em 0em;
        }

            .footnavigation-about .company-description p {
                font-size: 0.675rem;
            }

    .footnavigation-company {
        padding: 1em 4em;
        justify-self: start;
    }

    .footnavigation-address {
        padding: 2em 3em;
        justify-self: start;
    }

    .footnavigation-foot {
        padding: 0em 4em 0em 1em;
        align-items: center;
    }

        .footnavigation-foot .footnavigation-copyright {
            padding: 0em 1em;
        }

        .footnavigation-foot .footnavigation-policy {
            padding: 1em 0em;
            justify-self: end;
        }
}

@media (min-width: 1280px) and (max-width: 1399.98px) {
    .main-login {
        grid-template-columns: 1.2fr 1fr;
    }

    .main-reset {
        grid-template-columns: 1fr 1fr;
    }

    .blognews-head {
        grid-template-columns: 1fr;
    }

    .main-shipmentstracking {
        grid-template-columns: 2fr 1fr;
    }

    .main-introduction, .salesinsights-graphs, .recommendations-products, .footnavigation-foot {
        grid-template-columns: repeat(2, 1fr);
    }

    .blognews-body, .blogpage-body, .footnavigation-head {
        grid-template-columns: repeat(3, 1fr);
    }

    .main-widgets {
        grid-template-columns: repeat(4, 1fr);
    }

    .tdnex-app {
        grid-template-rows: auto 1fr auto;
    }

    .login-carousel {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .reset-ad img {
        display: block;
    }

    .navbar-brand {
        margin: 0em 1.5em;
    }

        .navbar-brand img {
            width: 150px;
        }

    .nav-search-form .search-input {
        padding: 0.5em 0.75em;
    }

    .nav-search-form .search-btn {
        top: 2px;
        padding: 0.6em 0.8em;
    }

    .dropdown-vendor > .nav-link {
        padding: 0.36rem 1rem;
    }

    .btn-light {
        height: 36px;
        border-radius: 6px;
    }

        .btn-light span {
            top: -20px;
            right: -6px;
        }

    .tdnex-main {
        /*padding: 4em 0em;*/
    }

    .aside-nav {
        margin: 1em 0.3em 0em;
        padding: 0.8em 0em;
    }

        .aside-nav .nav-link {
            font-size: 0.875rem;
        }

        .aside-nav .submenu-link {
            font-size: 0.8rem;
            margin-left: 1.8em;
        }

        .aside-nav .submenu-link {
            padding-left: 1.3em;
        }

    .aside-ad {
        padding: 0em;
    }

    .ad-content h6 {
        font-size: 0.8rem;
    }

    .ad-content p {
        font-size: 0.5rem;
    }

    .introduction-text h1 {
        font-size: 1.5rem;
    }

    .introduction-text p {
        font-size: 1rem;
    }

    .introduction-buttons {
        place-items: center;
    }

        .introduction-buttons a {
            font-size: 0.7rem;
            width: auto;
            gap: 4px;
        }

    .btn-buyproduct img, .btn-renewproduct img, .btn-cloudservices img, .btn-trainingcourses img {
        width: 14px;
    }

    .widgets a {
        font-size: 1rem;
    }

    .widget-refresh a, .graph-refresh a {
        font-size: 0.8rem;
    }

    .widget-leads p, .widget-invoices p, .widget-quotes p, .widget-orders p, .widget-training p {
        font-size: 1rem;
    }

    .widget-leads h5, .widget-invoices h5, .widget-quotes h5, .widget-orders h5, .widget-training h5 {
        font-size: 1.275rem;
    }

    .widget-quotes {
        margin: 0em 0em;
    }

    .widget-training a {
        margin-top: 1.2em;
    }

    .invoice-year, .invoice-count {
        font-size: 0.7rem;
    }

    .invoice-count {
        padding: 0.2em 1.12em;
    }

    .introduction-buttons .list-inline-item {
        margin-right: 0em;
    }

    .widget-refresh a {
        font-size: 0.675rem;
    }

    .widget-refresh-img {
        width: 18px;
        height: 18px;
    }

    .widget-refresh i {
        font-size: 0.675rem;
    }

    .salesinsights-head {
        flex-direction: row;
    }

        .salesinsights-head h5, .shipmentstracking-head-text, .recommendations-text h5, .promotions-text h5, .blognews-text h5 {
            font-size: 1.325rem;
        }

    .salesinsights-graphs .graph p {
        font-size: 1.15rem;
    }

    .graph-responsive {
        flex-direction: column;
    }

    .graph-year {
        padding: 0.35rem 2.45rem 0.35rem 1.45rem;
        font-size: 0.675rem;
        background-size: 15px 15px;
    }

    .graph table tbody tr.legend-font td {
        font-size: 0.6rem;
    }

    .graph-refresh {
        padding: 0.5em 0.5em;
    }

        .graph-refresh a {
            font-size: 0.675rem;
        }

        .graph-refresh i {
            font-size: 0.675rem;
        }

    /*.shipmentstracking-body-data {
        grid-column: span 2 / 3;
    }*/

    .ship-search-form {
        width: 200px;
    }

    .custom-table tbody tr.table-body-heading th {
        font-size: 0.785rem;
    }

    .custom-table tbody th, .custom-table tbody td {
        font-size: 0.79rem;
    }

    .track {
        padding: 1.2em 1.5em 0.5em;
        height: 100%;
        max-height: clamp(95%, 95%, 100%);
    }

        .track h5 {
            font-size: 1.375rem;
        }

    .track-details-item p {
        font-size: 0.66rem;
    }

    .track-details-item h5 {
        font-size: 0.75rem;
    }

    .step {
        /*padding: 0.5em 0.5em;
        margin: 1.5em auto;*/
        right: 9em;
        /*top: 4.5em;*/
    }

        .step p {
            font-size: 0.75rem;
            margin-left: -2.6em;
        }

        .step h5 {
            font-size: 0.7rem;
        }

    .recommendations-products .products {
        flex-direction: row;
    }

    .recommendation-container {
        height: 750px;
    }

    .right-section {
        width: 72%;
    }

    .recommended-item {
        padding: 6%;
    }

    #product-carousel .owl-item {
        height: 500px;
    }

    .title-p {
        font-size: 19px;
    }

    .bottom-p {
        font-size: 16px;
    }

    /*#product-carousel .recommended-item img {
        height: 40%;
        width: 75%;
    }*/

    .partsAnimationImage {
        top: 75%;
    }

    .recommendations-products .products {
        flex-direction: row;
    }

        .recommendations-products .products .product-text {
            text-align: start;
            padding: 0em 2em;
        }

            .recommendations-products .products .product-text h5, .recommendations-products .products .product-text h6 {
                font-size: 1rem;
            }

            .recommendations-products .products .product-text p {
                font-size: 0.675rem;
            }

    .promotions-content .img-container img {
        height: 35vh;
        width: auto;
    }

    .blognews-body-data .blog-details p {
        font-size: 0.675rem;
    }

    .blognews-body-data .blog-description span, .blognews-body-data .blog-description a {
        font-size: 0.775rem;
    }

    .vendor-details, .member-details {
        grid-template-columns: repeat(2, 1fr);
    }

    .footnavigation-head {
        padding: 0em;
    }

    .footnavigation-about {
        padding: 1em 6em;
        justify-self: start;
    }

        .footnavigation-about .company-description {
            padding: 0em 0em 0em 0em;
        }

            .footnavigation-about .company-description p {
                font-size: 0.675rem;
            }

    .footnavigation-company {
        padding: 1em 8em;
        justify-self: start;
    }

    .footnavigation-address {
        padding: 2em 5em;
        justify-self: start;
    }

    .footnavigation-foot {
        padding: 0em 5em 0em 5em;
        align-items: center;
    }

        .footnavigation-foot .footnavigation-copyright {
            padding: 0em 1em;
        }

        .footnavigation-foot .footnavigation-policy {
            padding: 1em 0em;
            justify-self: end;
        }
}

@media (min-width: 1400px) {
    .main-login {
        grid-template-columns: 1.2fr 1fr;
    }

    .main-reset {
        grid-template-columns: 1fr 1fr;
    }

    .blognews-head {
        grid-template-columns: 1fr;
    }

    .main-shipmentstracking {
        grid-template-columns: 2fr 1fr;
    }

    .main-introduction, .salesinsights-graphs, .recommendations-products, .footnavigation-foot {
        grid-template-columns: repeat(2, 1fr);
    }

    .blognews-body, .blogpage-body, .footnavigation-head {
        grid-template-columns: repeat(3, 1fr);
    }

    .main-widgets {
        grid-template-columns: repeat(4, 1fr);
    }

    .tdnex-app {
        grid-template-rows: auto 1fr auto;
    }

    .login-carousel {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .reset-ad img {
        display: block;
    }

    .navbar-brand {
        margin: 0em 1.8em;
    }

        .navbar-brand img {
            width: 150px;
        }

    .nav-search-form .search-input {
        padding: 0.5em 0.75em;
    }

    .nav-search-form .search-btn {
        top: 2px;
        padding: 0.6em 0.8em;
    }

    .dropdown-vendor > .nav-link {
        padding: 0.36rem 1rem;
    }

    .btn-light {
        height: 36px;
        border-radius: 6px;
    }

        .btn-light span {
            top: -20px;
            right: -6px;
        }

    .tdnex-main {
        /*padding: 4.6em 0em;*/
    }

    .tdnex-aside {
        padding: 3.5em 0em;
    }

    .aside-nav {
        margin: 1em 0.3em 0em;
        padding: 1.2em 0em;
    }

        .aside-nav .nav-link {
            font-size: 0.875rem;
        }

        .aside-nav .submenu-link {
            font-size: 0.8rem;
            margin-left: 1.8em;
        }

        .aside-nav .submenu-link {
            padding-left: 1.3em;
        }

    .aside-ad {
        padding: 0em;
    }

    .ad-content h6 {
        font-size: 0.8rem;
    }

    .ad-content p {
        font-size: 0.5rem;
    }

    .introduction-text h1 {
        font-size: 1.5rem;
    }

    .introduction-text p {
        font-size: 1rem;
    }

    .introduction-buttons {
        place-items: center;
    }

        .introduction-buttons a {
            font-size: 0.775rem;
            width: auto;
            gap: 4px;
        }

    .btn-buyproduct img, .btn-renewproduct img, .btn-cloudservices img, .btn-trainingcourses img {
        width: 14px;
    }

    #tdnex-widgets > div.widgetParentContainer > div.flex-container.childContainer1.owl-carousel.owl-theme.owl-loaded.owl-drag > div.owl-stage-outer > div > div > div {
        padding-left: 3.5rem;
    }

    /*.widgetNumber {
        font-size: 28px;
    }*/

    .widgets a {
        font-size: 1rem;
    }

    .widget-refresh a, .graph-refresh a {
        font-size: 0.8rem;
    }

    .widget-leads p, .widget-invoices p, .widget-quotes p, .widget-orders p, .widget-training p {
        font-size: 1.3rem;
    }

    .widget-leads h5, .widget-invoices h5, .widget-quotes h5, .widget-orders h5, .widget-training h5 {
        font-size: 1.675rem;
    }

    .widget-quotes {
        margin: 0em 0em;
    }

    .widget-training a {
        margin-top: 1.2em;
    }

    .invoice-year, .invoice-count {
        font-size: 0.7rem;
    }

    .invoice-count {
        padding: 0.2em 1.12em;
    }

    .introduction-buttons .list-inline-item {
        margin-right: 0em;
    }

    .widget-refresh a {
        font-size: 0.675rem;
    }

    .widget-refresh-img {
        width: 18px;
        height: 18px;
    }

    .widget-refresh i {
        font-size: 0.675rem;
    }

    .salesinsights-head {
        flex-direction: row;
    }

        .salesinsights-head h5, .shipmentstracking-head-text, .recommendations-text h5, .promotions-text h5, .blognews-text h5 {
            font-size: 1.325rem;
        }

    .salesinsights-graphs .graph p {
        font-size: 1.15rem;
    }

    .graph-responsive {
        flex-direction: row;
    }

    .graph-year {
        padding: 0.35rem 2.45rem 0.35rem 1.45rem;
        font-size: 0.675rem;
        background-size: 15px 15px;
    }

    .graph table tbody tr.legend-font td {
        font-size: 0.675rem;
    }

    .graph-refresh {
        padding: 0.5em 0.5em;
    }

        .graph-refresh a {
            font-size: 0.675rem;
        }

        .graph-refresh i {
            font-size: 0.675rem;
        }

    /*.shipmentstracking-body-data {
        grid-column: span 2 / 3;
    }*/

    .ship-search-form {
        width: 200px;
    }

    .custom-table tbody tr.table-body-heading th {
        font-size: 0.8rem;
    }

    .custom-table tbody th, .custom-table tbody td {
        font-size: 0.8rem;
    }

    .track {
        padding: 1.2em 1.5em 0.5em;
        height: 100%;
        max-height: clamp(95%, 96%, 100%);
    }

        .track h5 {
            font-size: 1.375rem;
        }

    .track-details-item p {
        font-size: 0.66rem;
    }

    .track-details-item h5 {
        font-size: 0.75rem;
    }

    .step {
        /*padding: 0.5em 0.5em;
        margin: 1.5em auto;*/
        right: 9em;
        /*top: 4.5em;*/
    }

        .step p {
            font-size: 0.75rem;
            margin-left: -2.6em;
        }

        .step h5 {
            font-size: 0.7rem;
        }

    .recommendations-products .products {
        flex-direction: row;
    }

    .bottom-p {
        font-size: 16px;
    }

    .recommendations-products .products {
        flex-direction: row;
    }

        .recommendations-products .products .product-text {
            text-align: start;
            padding: 0em 2em;
        }

            .recommendations-products .products .product-text h5, .recommendations-products .products .product-text h6 {
                font-size: 1rem;
            }

            .recommendations-products .products .product-text h6 {
                font-size: 0.825rem;
            }

            .recommendations-products .products .product-text p {
                font-size: 0.675rem;
            }

    .promotions-content .img-container img {
        height: 35vh;
        width: auto;
    }

    .blognews-body-data .blog-details p {
        font-size: 0.775rem;
    }

    .blognews-body-data .blog-description span, .blognews-body-data .blog-description a {
        font-size: 1rem;
    }

    .vendor-details, .member-details {
        grid-template-columns: repeat(3, 1fr);
    }

    .footnavigation-head {
        padding: 0em;
    }

    .footnavigation-about {
        padding: 1em 6em;
        justify-self: start;
    }

        .footnavigation-about .company-description {
            padding: 0em 0em 0em 0em;
        }

            .footnavigation-about .company-description p {
                font-size: 0.675rem;
            }

    .footnavigation-company {
        padding: 1em 8em;
        justify-self: start;
    }

    .footnavigation-address {
        padding: 2em 4em;
        justify-self: start;
    }

    .footnavigation-foot {
        padding: 0em 8em 0em 5em;
        align-items: center;
    }

        .footnavigation-foot .footnavigation-copyright {
            padding: 0em 1em;
        }

        .footnavigation-foot .footnavigation-policy {
            padding: 1em 0em;
            justify-self: end;
        }
}

@media (min-width: 1600px) {
    .main-login {
        grid-template-columns: 1.2fr 1fr;
    }

    .main-reset {
        grid-template-columns: 1fr 1fr;
    }

    .blognews-head {
        grid-template-columns: 1fr;
    }

    .main-shipmentstracking {
        grid-template-columns: 2fr 1fr;
    }

    .main-introduction, .salesinsights-graphs, .recommendations-products, .footnavigation-foot {
        grid-template-columns: repeat(2, 1fr);
    }

    .blognews-body, .blogpage-body, .footnavigation-head {
        grid-template-columns: repeat(3, 1fr);
    }

    .main-widgets {
        grid-template-columns: repeat(4, 1fr);
    }

    .tdnex-app {
        grid-template-rows: auto 1fr auto;
    }

    .login-carousel {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .reset-ad img {
        display: block;
    }

    .navbar-brand {
        margin: 0em 2.8em;
    }

        .navbar-brand img {
            width: 150px;
        }

    .nav-search-form .search-input {
        padding: 0.5em 0.75em;
    }

    .nav-search-form .search-btn {
        top: 2px;
        padding: 0.6em 0.8em;
    }

    .dropdown-vendor > .nav-link {
        padding: 0.36rem 1rem;
    }

    .btn-light {
        height: 36px;
        border-radius: 6px;
    }

        .btn-light span {
            top: -20px;
            right: -6px;
        }

    .tdnex-main {
        /*padding: 4.8em 0em;*/
    }

    .tdnex-aside {
        padding: 3.5em 0em;
    }

    .aside-nav {
        margin: 1em 0.3em 0em;
        padding: 1.2em 0em;
    }

        .aside-nav .nav-link {
            font-size: 1.175rem;
        }

        .aside-nav .submenu-link {
            font-size: 1rem;
            margin-left: 2em;
        }

        .aside-nav .submenu-link {
            padding-left: 1.3em;
        }

    .aside-ad {
        padding: 0em;
    }

    .ad-content h6 {
        font-size: 1.2rem;
    }

    .ad-content p {
        font-size: 0.875rem;
    }

    .introduction-text h1 {
        font-size: 2rem;
    }

    .introduction-text p {
        font-size: 1.3rem;
    }

    .introduction-buttons {
        place-items: center;
    }

        .introduction-buttons a {
            font-size: 0.88rem;
            width: auto;
            gap: 6px;
        }

    .btn-buyproduct img, .btn-renewproduct img, .btn-cloudservices img, .btn-trainingcourses img {
        width: 20px;
    }

    .widgetNumber {
        font-size: 32px;
    }

    .widgets a {
        font-size: 1rem;
    }

    .widget-refresh a, .graph-refresh a {
        font-size: 0.8rem;
    }

    .widget-leads p, .widget-invoices p, .widget-quotes p, .widget-orders p, .widget-training p {
        font-size: 1.2rem;
    }

    .widget-leads h5, .widget-invoices h5, .widget-quotes h5, .widget-orders h5, .widget-training h5 {
        font-size: 1.675rem;
    }

    .widget-quotes {
        margin: 0em 0em;
    }

    .widget-training a {
        margin-top: 1.2em;
    }

    .invoice-count {
        padding: 0.2em 1.12em;
    }

    .introduction-buttons .list-inline-item {
        margin-right: 0em;
    }

    .widget-refresh a, .graph-refresh a {
        font-size: 0.675rem;
    }

    .widget-refresh-img {
        width: 18px;
        height: 18px;
    }

    .widget-refresh i {
        font-size: 0.675rem;
    }

    .salesinsights-head h5, .shipmentstracking-head-text, .recommendations-text h5, .promotions-text h5, .blognews-text h5 {
        font-size: 1.625rem;
    }

    .salesinsights-graphs .graph p {
        font-size: 1.15rem;
    }

    .graph-responsive {
        flex-direction: row;
    }

    .graph-year {
        padding: 0.35rem 2.45rem 0.35rem 1.45rem;
        font-size: 0.775rem;
        background-size: 15px 15px;
    }

    .graph table tbody tr.legend-font td {
        font-size: 0.8rem;
    }

    .graph-refresh {
        padding: 0.3em 0.5em;
    }

        .graph-refresh i {
            font-size: 0.675rem;
        }

    .graph-refresh-img {
        width: 16px;
        height: 24px;
    }

    /*.shipmentstracking-body-data {
        grid-column: span 2 / 3;
    }*/

    .ship-search-form {
        width: 200px;
    }

    .custom-table tbody tr.table-body-heading th {
        font-size: 0.8rem;
    }

    .custom-table tbody th, .custom-table tbody td {
        font-size: 0.8rem;
    }

    .track {
        padding: 1.2em 1.5em 0.8em;
        height: 100%;
        max-height: clamp(95%, 96%, 100%);
    }

        .track h5 {
            font-size: 1.375rem;
        }

    .track-details-item p {
        font-size: 0.66rem;
    }

    .track-details-item h5 {
        font-size: 0.75rem;
    }

    .step {
        /*padding: 0.5em 0.5em;
        margin: 1.5em auto;*/
        right: 9em;
        /*top: 4.5em;*/
    }

        .step p {
            font-size: 0.75rem;
            margin-left: -2.6em;
        }

        .step h5 {
            font-size: 0.7rem;
        }

    .recommendations-products .products {
        flex-direction: row;
    }

    .recommendation-container {
        height: 620px;
    }

    .right-section {
        width: 65%;
    }

    .partsAnimationImage {
        top: 72%;
    }

    .recommended-item {
        padding: 6%;
        /*margin: 0em 4em 0em 0em;*/
        width: 246px;
    }

    #product-carousel .owl-item {
        height: 380px;
    }

    .title-p {
        font-size: 16px;
    }

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

    /*#product-carousel .recommended-item img {
        height: 40%;
        width: 75%;
    }*/

    .recommendations-products .products {
        flex-direction: row;
    }

        .recommendations-products .products .product-text {
            text-align: start;
            padding: 0em 2em;
        }

            .recommendations-products .products .product-text h5, .recommendations-products .products .product-text h6 {
                font-size: 1.375rem;
            }

            .recommendations-products .products .product-text h6 {
                font-size: 1.25rem;
            }

            .recommendations-products .products .product-text p {
                font-size: 0.875rem;
            }

    .promotions-content .img-container img {
        height: 35vh;
        width: auto;
    }

    .blognews-body-data .blog-details p {
        font-size: 0.775rem;
    }

    .blognews-body-data .blog-description span, .blognews-body-data .blog-description a {
        font-size: 1rem;
    }

    .footnavigation-head {
        padding: 0em;
    }

    .footnavigation-about {
        padding: 2em 0em 2em 10em;
        justify-self: start;
    }

        .footnavigation-about .company-description {
            padding: 0em 3em 0em 0em;
        }

            .footnavigation-about .company-description p {
                font-size: 0.875rem;
            }

    .footnavigation-company {
        padding: 2em 12em;
    }

    .footnavigation-address {
        padding: 2em 10em 2em 10em;
        justify-self: start;
    }

    .footnavigation-foot {
        padding: 0em 8em 0em 9em;
    }

        .footnavigation-foot .footnavigation-copyright {
            padding: 0em 1em 0em 1em;
        }

        .footnavigation-foot .footnavigation-policy {
            padding: 1em 2em 1em 1em;
            justify-self: end;
        }
}

@media (min-width: 1920px) and (max-width: 3840.98px) {
    .main-login {
        grid-template-columns: 1.2fr 1fr;
    }

    .main-reset {
        grid-template-columns: 1fr 1fr;
    }

    .blognews-head {
        grid-template-columns: 1fr;
    }

    .main-shipmentstracking {
        grid-template-columns: 2fr 1fr;
    }

    .main-introduction, .salesinsights-graphs, .recommendations-products, .footnavigation-foot {
        grid-template-columns: repeat(2, 1fr);
    }

    .blognews-body, .blogpage-body, .footnavigation-head {
        grid-template-columns: repeat(3, 1fr);
    }

    .main-widgets {
        grid-template-columns: repeat(4, 1fr);
    }

    .tdnex-app {
        grid-template-rows: auto 1fr auto;
    }

    .login-carousel {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .reset-ad img {
        display: block;
    }

    .navbar-brand {
        margin: 0em 3.8em;
    }

        .navbar-brand img {
            width: 150px;
        }

    .nav-search-form .search-input {
        padding: 0.5em 0.75em;
    }

    .nav-search-form .search-btn {
        top: 2px;
        padding: 0.6em 0.8em;
    }

    .dropdown-vendor > .nav-link {
        padding: 0.36rem 1rem;
    }

    .btn-light {
        height: 36px;
        border-radius: 6px;
    }

        .btn-light span {
            top: -20px;
            right: -6px;
        }

    .tdnex-main {
        /*padding: 4.8em 0em;*/
    }

    .tdnex-aside {
        padding: 3.5em 0em;
    }

    .aside-nav {
        margin: 1em 0.3em 0em;
        padding: 1.2em 0em;
    }

        .aside-nav .nav-link {
            font-size: 1.175rem;
        }

        .aside-nav .submenu-link {
            font-size: 1rem;
            margin-left: 2em;
        }

        .aside-nav .submenu-link {
            padding-left: 1.3em;
        }

    .aside-ad {
        padding: 0em;
    }

    .ad-content h6 {
        font-size: 1rem;
    }

    .ad-content p {
        font-size: 0.875rem;
    }

    .ad-link {
        font-size: 0.875rem;
    }

    .introduction-text h1 {
        font-size: 2.125rem;
    }

    .introduction-text p {
        font-size: 1.375rem;
    }

    .introduction-buttons {
        place-items: center;
    }

        .introduction-buttons a {
            font-size: 1.25rem;
            width: auto;
            gap: 10px;
        }

    .btn-buyproduct img, .btn-renewproduct img, .btn-cloudservices img, .btn-trainingcourses img {
        width: 20px;
    }

    .widgets a {
        font-size: 1rem;
    }

    .widget-refresh a, .graph-refresh a {
        font-size: 0.8rem;
    }

    .widget-leads p, .widget-invoices p, .widget-quotes p, .widget-orders p, .widget-training p {
        font-size: 1.5rem;
    }

    .widget-leads h5, .widget-invoices h5, .widget-quotes h5, .widget-orders h5, .widget-training h5 {
        font-size: 2rem;
    }

    .widget-quotes {
        margin: 0em 0em;
    }

    .widget-training a {
        margin-top: 1.2em;
    }

    .invoice-count {
        padding: 0.2em 1.12em;
    }

    .introduction-buttons .list-inline-item {
        margin-right: 0em;
    }

    .widget-refresh a, .graph-refresh a {
        font-size: 0.675rem;
    }

    .widget-refresh-img {
        width: 18px;
        height: 18px;
    }

    .widget-refresh i {
        font-size: 0.675rem;
    }

    .salesinsights-head h5, .shipmentstracking-head-text, .recommendations-text h5, .promotions-text h5, .blognews-text h5 {
        font-size: 1.625rem;
    }

    .salesinsights-graphs .graph p {
        font-size: 1.15rem;
    }

    .graph-responsive {
        flex-direction: row;
    }

    .graph-year {
        padding: 0.35rem 2.45rem 0.35rem 1.45rem;
        font-size: 0.675rem;
        background-size: 15px 15px;
    }

    .graph table tbody tr.legend-font td {
        font-size: 0.8rem;
    }

    .graph-refresh {
        padding: 0.3em 0.5em;
    }

        .graph-refresh i {
            font-size: 0.675rem;
        }

    .graph-refresh-img {
        width: 16px;
        height: 24px;
    }

    /*.shipmentstracking-body-data {
        grid-column: span 2 / 3;
    }*/

    .ship-search-form {
        width: 200px;
    }

    .custom-table tbody tr.table-body-heading th {
        font-size: 0.8rem;
    }

    .custom-table tbody th, .custom-table tbody td {
        font-size: 0.8rem;
    }

    .track {
        padding: 1.2em 1.5em 0.8em;
        height: 100%;
        max-height: clamp(95%, 96%, 100%);
    }

        .track h5 {
            font-size: 1.375rem;
        }

    .track-details-item p {
        font-size: 0.66rem;
    }

    .track-details-item h5 {
        font-size: 1rem;
    }

    .step {
        /*padding: 0.5em 0.5em;
        margin: 1.5em auto;*/
        right: 9em;
        /*top: 4.5em;*/
    }

        .step p {
            font-size: 0.875rem;
            margin-left: -1.6em;
        }

        .step h5 {
            font-size: 0.7rem;
        }

    .recommendations-products .products {
        flex-direction: row;
    }

    .recommendation-container {
        height: 630px;
    }

    .right-section {
        margin: 4% 0% 0% 0%;
        width: 65%;
        transform: translateX(100%);
        transition: opacity 2s ease 3s, transform 2s ease 3s;
    }

    .recommended-item {
        padding: 6%;
    }

    #product-carousel .owl-item {
        height: 400px;
    }


    .partsAnimationImage {
        top: 72%;
    }

    #product-carousel .recommended-item img {
        /*height: 85%;
        width: 85%;*/
        height: 40%;
        width: 75%;
    }



    .recommendations-products .products .product-text {
        text-align: start;
        padding: 0em 2em;
    }

        .recommendations-products .products .product-text h5, .recommendations-products .products .product-text h6 {
            font-size: 1.375rem;
        }

        .recommendations-products .products .product-text h6 {
            font-size: 1.25rem;
        }

        .recommendations-products .products .product-text p {
            font-size: 0.875rem;
        }

    .promotions-content .img-container img {
        height: 35vh;
        width: auto;
    }

    .blognews-body-data .blog-details p {
        font-size: 0.775rem;
    }

    .blognews-body-data .blog-description span, .blognews-body-data .blog-description a {
        font-size: 1rem;
    }

    .vendor-details, .member-details {
        grid-template-columns: repeat(3, 1fr);
    }

    .footnavigation-head {
        padding: 0em;
    }

    .footnavigation-about {
        padding: 2em 0em 2em 10em;
        justify-self: start;
    }

        .footnavigation-about .company-description {
            padding: 0em 3em 0em 0em;
        }

            .footnavigation-about .company-description p {
                font-size: 0.875rem;
            }

    .footnavigation-company {
        padding: 2em 12em;
    }

    .footnavigation-address {
        padding: 2em 10em 2em 10em;
        justify-self: start;
    }

    .footnavigation-foot {
        padding: 0em 8em 0em 9em;
    }

        .footnavigation-foot .footnavigation-copyright {
            padding: 0em 1em 0em 1em;
        }

        .footnavigation-foot .footnavigation-policy {
            padding: 1em 2em 1em 1em;
            justify-self: end;
        }
}

@media (min-width: 3841px) {
    .main-login {
        grid-template-columns: 1.2fr 1fr;
    }

    .main-reset {
        grid-template-columns: 1fr 1fr;
    }

    .blognews-head {
        grid-template-columns: 1fr;
    }

    .main-shipmentstracking {
        grid-template-columns: 2fr 1fr;
    }

    .main-introduction, .salesinsights-graphs, .recommendations-products, .footnavigation-foot {
        grid-template-columns: repeat(2, 1fr);
    }

    .blognews-body, .blogpage-body, .footnavigation-head {
        grid-template-columns: repeat(3, 1fr);
    }

    .main-widgets {
        grid-template-columns: repeat(4, 1fr);
    }

    .tdnex-app {
        grid-template-rows: auto 1fr auto;
    }

    .login-carousel {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .reset-ad img {
        display: block;
    }

    .navbar-brand {
        margin: 0em 6.8em;
    }

        .navbar-brand img {
            width: 214px;
        }

    .nav-search-form .search-input, .ship-search-form .shipsearch-input {
        padding: 0.875em 0.75em;
        font-size: 1rem;
    }

    .nav-search-form .search-btn, .ship-search-form .shipsearch-btn {
        top: 10px;
        padding: 0.6em 0.8em;
    }

    .dropdown-vendor > .nav-link {
        padding: 0.36rem 1rem;
    }

    .btn-light {
        width: 46px;
        height: 50px;
        border-radius: 6px;
    }

        .btn-light span {
            top: -20px;
            right: -6px;
        }

    .tdnex-main {
        /*padding: 6.2em 0em;*/
    }

    .tdnex-aside {
        padding: 5em 0em;
    }

    .aside-nav {
        margin: 1em 0.3em 0em;
        padding: 1.2em 0em;
    }

        .aside-nav .nav-link {
            font-size: 1.675rem;
        }

        .aside-nav .submenu-link {
            font-size: 1.5rem;
            margin-left: 2em;
        }

        .aside-nav .submenu-link {
            padding-left: 1.3em;
        }

        .aside-nav .nav-icon img {
            width: 32px;
        }

    .aside-ad {
        padding: 0em;
    }

    .ad-content h6 {
        font-size: 1.8rem;
    }

    .ad-content p {
        font-size: 1.3rem;
    }

    .ad-link {
        font-size: 1.3rem;
    }

    .introduction-text h1 {
        font-size: 2.8rem;
    }

    .introduction-text p {
        font-size: 2rem;
    }

    .introduction-buttons {
        place-items: center;
    }

        .introduction-buttons a {
            font-size: 1.8rem;
            width: auto;
            gap: 10px;
        }

    .btn-buyproduct img, .btn-renewproduct img, .btn-cloudservices img, .btn-trainingcourses img {
        width: 36px;
    }

    .widgets a {
        font-size: 1.8rem;
    }

    .widget-refresh a, .graph-refresh a {
        font-size: 1.5rem;
    }

    .widget-leads p, .widget-invoices p, .widget-quotes p, .widget-orders p, .widget-training p {
        font-size: 2rem;
    }

    .widget-leads h5, .widget-invoices h5, .widget-quotes h5, .widget-orders h5, .widget-training h5 {
        font-size: 2.8rem;
    }

    .widget-quotes {
        margin: 0em 0em;
    }

    .widget-training a {
        margin-top: 0.5em;
    }

    .invoice-year {
        font-size: 1.3rem;
    }

    .invoice-count {
        padding: 0.5em 1.12em;
        font-size: 1.3rem;
    }

    .introduction-buttons .list-inline-item {
        margin-right: 1em;
    }

        .introduction-buttons .list-inline-item:last-child {
            margin-right: 0em;
        }

    .widget-refresh-img {
        width: 18px;
        height: 18px;
    }

    .widget-refresh i {
        font-size: 0.675rem;
    }

    .salesinsights-head h5, .shipmentstracking-head-text, .recommendations-text h5, .promotions-text h5, .blognews-text h5 {
        font-size: 2.625rem;
    }

    .salesinsights-graphs .graph p {
        font-size: 2rem;
    }

    .graph-responsive {
        flex-direction: row;
    }

    .graph-year {
        padding: 0.35rem 3.45rem 0.35rem 2.45rem;
        font-size: 1.5rem;
        background-size: 15px 15px;
        background-position: right 1.35rem center;
    }

    .graph table tbody tr.legend-font td {
        font-size: 1.3rem;
    }

    .graph-refresh {
        padding: 0.3em 0.5em;
    }

        .graph-refresh i {
            font-size: 0.675rem;
        }

    .graph-refresh-img {
        width: 32px;
        height: 32px;
    }

    /*.shipmentstracking-body-data {
        grid-column: span 2 / 3;
    }*/

    .ship-search-form {
        width: 290px;
    }

    .custom-table tbody tr.table-body-heading th {
        font-size: 1.2rem;
    }

    .custom-table tbody th, .custom-table tbody td {
        font-size: 1.325rem;
    }

    .track {
        padding: 1.2em 1.5em 0.8em;
        height: 100%;
        max-height: clamp(95%, 96%, 100%);
    }

        .track h5 {
            font-size: 2.375rem;
        }

    .track-details-item p {
        font-size: 1.2rem;
    }

    .track-details-item h5 {
        font-size: 1.5rem;
    }

    .step {
        /*padding: 3.5em 0.5em;
        margin: 4.5em auto;*/
        right: 9em;
        /*top: 4.5em;*/
    }

        .step p {
            font-size: 0.825rem;
            margin-left: -1.6em;
        }

        .step h5 {
            font-size: 1rem;
        }

    .recommendations-products .products {
        flex-direction: row;
    }

        .recommendations-products .products .product-image {
            width: 228px;
            height: 228px;
        }

        .recommendations-products .products .product-text {
            text-align: start;
            padding: 0em 2em;
        }

            .recommendations-products .products .product-text h5, .recommendations-products .products .product-text h6 {
                font-size: 1.5rem;
            }

            .recommendations-products .products .product-text p {
                font-size: 1.2rem;
            }

        .recommendations-products .products .product-contact {
            font-size: 1rem;
        }

    .promotions-content .img-container img {
        height: 35vh;
        width: auto;
    }

    .blognews-body-data .blog-details p {
        font-size: 1.3rem;
    }

    .blognews-body-data .blog-description span, .blognews-body-data .blog-description a {
        font-size: 1.5rem;
    }

    .vendor-details, .member-details {
        grid-template-columns: repeat(3, 1fr);
    }

    .footnavigation-head {
        padding: 0em;
    }

    .footnavigation-about {
        padding: 2em 0em 2em 10em;
        justify-self: start;
    }

        .footnavigation-about .company-description {
            padding: 0em 3em 0em 0em;
        }

            .footnavigation-about .company-description p {
                font-size: 0.875rem;
            }

    .footnavigation-company {
        padding: 2em 19em;
    }

    .footnavigation-address {
        padding: 2em 10em 2em 10em;
        justify-self: start;
    }

    .footnavigation-foot {
        padding: 0em 26em 0em 18em;
    }

        .footnavigation-foot .footnavigation-copyright {
            padding: 0em 1em 0em 1em;
        }

        .footnavigation-foot .footnavigation-policy {
            padding: 1em 2em 1em 1em;
            justify-self: end;
        }
}

.logout-logo {
    margin: 9em auto 5em;
}
.logout-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
}