/* DEFAULT STYLE */
:root {
    --text-color: rgba(51, 46, 124, 0.9);
    --blue: #332e7c;
    --purple: #913BFF;
    --light-blue: #1799da;
    --dark-light-blue: #2171b7;
    --violet: #39186D;
    --white: #fff;
    --darker-white: #f5f5f5;
    --black: #000;
    --green: #295a32;
    --light-grey: #333;
    --light-grey2: #bcbcbc;
    --light-grey3: #ececec;
    --cards-color: #f7f7f7;
    --card-title: #6AB1E3;
    --active_card: #f7f9ff;
    --main-banners: linear-gradient(to right, rgba(35, 35, 44, 1), rgba(35, 35, 44, 0.8)), url('funds-bg.jpeg') !important;
    --light-blue-gradient: linear-gradient(0deg, rgba(248, 253, 255, 0) 0%, rgba(241, 252, 255, 0.51782) 48.22%, #cddde2 100%);
}

::selection {
    background-color: var(--light-blue);
    color: var(--blue);
}

.logo-dh {
    width: 220px;
}

.badge.notification {
    background: red;
    position: absolute;
    border-radius: 100%;
}

/****** Sidebar ******/
.sidebar-container {
    min-height: 100vh;
    padding: 0;
}

.sidebar {
    position: fixed;
    top: 150px;
    left: 0;
    height: calc(100% - 100px);
    max-width: 25% !important;
    width: 100% !important;
    background-color: var(--white);
    padding: 50px;
    overflow-y: auto;
    z-index: 2000;
}

.sidebar-link {
    border-color: transparent !important;
    position: relative;
    display: flex;
    align-items: center;
    color: var(--light-grey);
    background-color: transparent;
    font-size: 18px;
    padding: 12px 16px;
    text-decoration: none;
    border: none;
    width: 100%;
}

.sidebar-link i {
    margin-right: 10px;
}

.sidebar-link:hover {
    color: var(--black);
    border-radius: 4px;
    background-color: var(--darker-white);
    text-decoration: none;
}

.sidebar-link:focus {
    outline: none;
}

.sidebar-link.active {
    color: var(--black);
    border-radius: 4px;
    background-color: var(--darker-white);
}

.sidebar-link.active:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background-color: var(--light-blue);
}

.sidebar-link-inactive {
    border-color: transparent !important;
    position: relative;
    display: flex;
    align-items: center;
    color: var(--light-grey2);
    background-color: transparent;
    font-size: 18px;
    padding: 12px 16px;
    text-decoration: none;
    border: none;
    width: 100%;
    margin: 3px 0px 0px 0px;
}

.sidebar-link-inactive:hover {
    color: var(--light-grey2) !important;
}

.coming-soon-sidebar {
    position: absolute;
    top: 0;
    left: 13%;
    background-color: rgb(142 192 205);
    color: white;
    border-radius: 2px;
    padding: 2px 5px;
    font-size: 7px;
    z-index: 2;
}

.coming-soon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    background: var(--light-blue-gradient);
}

.coming-soon h1 {
    font-family: 'gorditamedium';
    color: var(--dark-light-blue);
    font-size: 45px;
    font-weight: 400;
    line-height: 1em;
    letter-spacing: 1px;
    margin: 0;
}

.coming-soon h1 span {
    color: var(--blue);
}

.btn-export-pdf {
    border: none !important;
    background-color: var(--blue) !important;
    width: 100%;
    color: white !important;
    box-shadow: none !important;
}

.btn-export-pdf:hover {
    border-style: solid !important;
    border-width: 2px !important;
    border-color: var(--blue) !important;
    background-color: white !important;
    width: 100%;
    color: var(--blue) !important;
    box-shadow: none !important;
}

.btn-export-disabled-pdf {
    border: none !important;
    background-color: #bab8ce !important;
    width: 100%;
    color: white !important;
    box-shadow: none !important;
    position: relative;
    cursor: not-allowed !important;
}

.btn-export-disabled-pdf .upgrade {
    position: absolute;
    background-image: linear-gradient(90deg, rgba(154, 59, 255, 1) 0%, rgba(64, 114, 180, 1) 48.22%, #73cde4 100%);
    padding: 3px;
    font-weight: 500;
    font-size: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    border-radius: 5px;
}

.btn-export-pac-pdf {
    border: none !important;
    background-color: white !important;
    min-width: 250px;
    max-width: 300px;
    color: var(--blue) !important;
    box-shadow: none !important;
}

.btn-export-pac-pdf:hover {
    border: none !important;
    background-color: var(--blue) !important;
    min-width: 250px;
    max-width: 300px;
    color: white !important;
    box-shadow: none !important;
}

.btn-export-pac-pdf-disabled {
    position: relative;
    border: none !important;
    background-color: rgb(187, 187, 187) !important;
    min-width: 250px;
    max-width: 300px;
    color: #5e5d67 !important;
    box-shadow: none !important;
}

.btn-export-pac-pdf-disabled .upgrade {
    position: absolute;
    background-image: linear-gradient(90deg, rgba(154, 59, 255, 1) 0%, rgba(64, 114, 180, 1) 48.22%, #73cde4 100%);
    color: white !important;
    padding: 3px;
    font-weight: 500;
    font-size: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    border-radius: 5px;
}

.btn-export-opt-pdf {
    font-size: 12px !important;
    border: none !important;
    background-color: white !important;
    min-width: 250px;
    max-width: 300px;
    color: var(--blue) !important;
    box-shadow: none !important;
}

.btn-export-opt-pdf:hover {
    border: none !important;
    background-color: var(--blue) !important;
    min-width: 250px;
    max-width: 300px;
    color: white !important;
    box-shadow: none !important;
}

/****** End Sidebar ******/

/****** Section & Container  ******/
.standard-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    box-sizing: border-box;
}

.standard-section {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    margin-top: 10%;
}

.compare-section-title .title {
    font-size: 28px;
    color: var(--blue);
    font-weight: 800;
    margin-top: 25px;
}

.share-section-title .title {
    font-size: 28px;
    color: var(--blue);
    font-weight: 800;
    margin-top: 25px;
}

.share-section-title .portfolioName {
    font-size: 20px;
    color: var(--purple);
    font-weight: 500;
}

.account-section-title .title {
    font-size: 28px;
    color: var(--blue);
    font-weight: 800;
    margin-top: 25px;
}

.product-section-title .title {
    font-size: 24px;
    color: var(--blue);
    font-weight: 800;
    margin-top: 25px;
}

.product-section-title .title-product {
    font-size: 44px;
    color: var(--blue);
    font-weight: 800;
    margin-top: 25px;
}

.dh-section {
    color: rgba(51, 46, 124, 1);
    padding: 20px;
    width: 250px !important;
    border-color: rgba(51, 46, 124, 0.2);
    border-style: dotted;
    border-width: 2px;
    border-radius: 8px !important;
    background-color: transparent;
}

.dh-section-title {
    margin-top: auto;
    margin-bottom: auto;
    font-size: 14px;
}

/****** End Section & Container  ******/

/****** Home Dh  ******/
.dashboard-heroBg {
    background-image: linear-gradient(to right, rgba(35, 35, 44, 1), rgba(35, 35, 44, 0.2)), url('dashboardbg.jpg') !important;
    height: 300px;
    padding: 20px !important;
    border: none !important;
    border-radius: 10px !important;
    background-size: cover;
    background-position: center;
    color: var(--white) !important;
}

.dh-dashboard-button-cta {
    font-size: 14px;
    border: 1px solid var(--white);
    border-radius: 5px;
    padding: 8px;
    min-width: 100%;
    color: var(--white);
    text-decoration: none;
    width: 200px;
}

.dh-dashboard-button-cta:hover {
    background-color: var(--white);
    border: 1px solid var(--white);
    border-radius: 5px;
    padding: 8px;
    width: 200px;
    color: var(--blue);
}

.heroHomeContainer {
    height: 100vh;
    background: #fff;
}

.homeWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    position: relative;
}

.HomeSearchElementWrapper {
    position: absolute;
    top: 30%;
    bottom: 70%;
    left: 0%;
    right: 0%;
}

.alternativep {
    color: #7e7e7e;
    font-weight: 200;
    text-align: center;
    font-size: 12px;
    margin-bottom: 10px;
}

.btnHomeDashboard {
    font-weight: 400;
    min-width: 200px;
    font-size: 14px;
    border-color: var(--blue);
    border-width: 1px;
    border-style: solid;
    color: var(--blue);
    border-radius: 4px;
    padding: 8px;
    cursor: pointer;
    text-decoration: none !important;
}

.btnHomeDashboard:hover {
    background: var(--blue);
    color: var(--white);
    border: 1px solid var(--blue);
}

.btnDashboardHomePos {
    justify-content: end;
}

.btnHomeLogin {
    font-weight: 400;
    min-width: 200px;
    font-size: 14px;
    border-color: var(--light-blue);
    border-width: 1px;
    border-style: solid;
    color: var(--light-blue);
    border-radius: 4px;
    padding: 8px;
    text-decoration: none !important;
}

.btnHomeLogin:hover {
    background: var(--light-blue);
    color: var(--white);
    border: 1px solid var(--light-blue);
}

.btnLoginHomePos {
    justify-content: start;
}

.btnOptionDashboard {
    font-weight: 400;
    font-size: 18px;
    border-color: var(--blue);
    border-width: 1px;
    border-style: solid;
    color: var(--blue);
    border-radius: 4px;
    padding: 8px;
    cursor: pointer;
    text-decoration: none !important;
}

.mobileDropdownList {
    line-height: 44px !important;
    padding: 10px !important;
    position: absolute !important;
    inset: 0px auto auto 0px !important;
    margin: 7px 0px 0px 0px !important;
    transform: translate3d(0px, 41px, 0px) !important;
    width: 100% !important;
    font-size: 20px !important;
    color: var(--blue) !important;
    list-style: none !important;
    border: 1px solid !important;
    border-radius: 10px !important;
}

/****** End Home Dh  ******/

/****** Account Page Dh  ******/

.account-connect-input {
    display: flex;
    width: 90%;
    padding: 0.4rem;
    border: 1px solid #dfe1e5;
    border-radius: 10px;
    margin-top: 2%;
    color: var(--blue);
}

.creator-name-input {
    display: flex;
    width: 30%;
    padding: 0.4rem;
    border: 1px solid #dfe1e5;
    border-radius: 10px;
    color: var(--blue);
}

.creator-photoupload-input {
    display: flex;
    margin-top: 10px;
    width: 30%;
    padding: 0.4rem;
    border: 1px solid #dfe1e5;
    background: #fff;
    border-radius: 10px;
    color: var(--blue);
}

.creator-save-button {
    border-color: var(--prime-five);
    font-size: 14px;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    min-width: 30%;
    color: var(--heading);
}

.creator-save-button:hover {
    border-color: var(--prime-five);
    background-color: var(--prime-five);
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    color: white;
}

.creator-profile-img {
    max-height: 200px;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
}

.account-addconnect-button {
    border-color: var(--prime-five);
    font-size: 14px;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    min-width: 30%;
    color: var(--heading);
}

.account-addconnect-button:hover {
    border-color: var(--prime-five);
    background-color: var(--prime-five);
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    color: white;
}


.account-deleteconnect-button {
    border-color: #b0233b;
    border-style: solid;
    border-width: 1px;
    font-size: 14px;
    border-radius: 5px;
    padding: 5px;
    min-width: 30%;
    color: #b0233b;
}

.account-deleteconnect-button:hover {
    background: #b0233b;
    border-radius: 5px;
    padding: 5px;
    min-width: 30%;
    padding: 5px;
    color: #fff;
}


.account-connected-li {
    padding: 12px;
    border: 1px solid #dfe1e5;
    border-radius: 10px;
}

.account-connected-ul {
    list-style: none;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    height: 290px;
    overflow: hidden;
    overflow-y: scroll;
}

.account-connected-name {
    font-size: 20px;
    margin: 0;
    margin-top: auto;
    margin-bottom: auto;
}

.account-connected-email {
    font-size: 16px;
    font-weight: 200;

}

/****** End Account Page Dh  ******/


/****** Punteggi Dh  ******/

.valoredato-ottimo-p {
    margin: 0;
    font-weight: 800;
    text-align: center;
    font-size: 10px;
    color: white;
    background: green;
    border: 1px solid green;
    border-radius: 4px;
    padding: 2px 8px;
}

.valoredato-medio-p {
    margin: 0;
    font-weight: 800;
    text-align: center;
    font-size: 10px;
    color: white;
    background: goldenrod;
    border: 1px solid goldenrod;
    border-radius: 4px;
    padding: 2px 8px;
}

.valoredato-basso-p {
    margin: 0;
    font-weight: 800;
    text-align: center;
    font-size: 10px;
    color: white;
    background: #b15353;
    border: 1px solid #b15353;
    border-radius: 4px;
    padding: 2px 8px;
}

/****** End Punteggi Dh ******/



/****** Share Page Dh  ******/

.share-save-button {
    border-color: var(--prime-five);
    font-size: 14px;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    min-width: 200px;
    color: var(--heading);
}

.share-save-button:hover {
    border-color: var(--prime-five);
    background-color: var(--prime-five);
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    color: white;
}

.visible-comp {
    font-size: 22px !important;
    border: 2px solid var(--purple) !important;
    padding: 10px !important;
    border-radius: 10px !important;
    color: var(--purple) !important;
    font-weight: 700 !important;
}

.sharedwme-ptfname h1 {
    color: var(--blue);
    font-size: 20px;
    font-weight: 400;
}

.sharedwme-ptfname h2 {
    font-size: 28px;
    font-weight: 900;
    color: var(--purple) !important;
}

.sharedwme-ptfname h3 {
    font-size: 14px;
    font-weight: 400;
}

.sharedwme-ptfname h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

/* .sharedwme-ptfname p{
}

.sharedwme-ptfname a{
} */

.sharedwme-button {
    font-size: 14px;
    color: var(--heading);
    border: 1px solid var(--prime-five);
    border-radius: 5px;
    padding: 5px 10px;
    text-decoration: none !important;
}

.sharedwme-button:hover {
    background-color: var(--prime-five);
    border: 1px solid var(--prime-five);
    border-radius: 5px;
    padding: 5px 10px;
    color: white;
}

.sharedwo-button {
    font-size: 14px;
    color: var(--heading);
    border: 1px solid var(--prime-five);
    border-radius: 5px;
    padding: 5px 10px;
    text-decoration: none !important;
}

.sharedwo-button:hover {
    background-color: var(--prime-five);
    border: 1px solid var(--prime-five);
    border-radius: 5px;
    padding: 5px 10px;
    color: white;
}

/****** End Share Page Dh  ******/

/****** Mobile Search Avdanced ******/
.mobileSearchAdvancedContainer {
    min-height: 100vh;
    height: 7800px;
    position: relative;
}

.mobileSearchAdvancedContainer .header {
    background: #2d3447;
    position: fixed;
    padding-top: 5%;
    left: 0%;
    right: 0%;
    z-index: 999999999;
}

.header .headerCard {
    height: 110px;
    min-width: 100px;
    width: 100%;
    overflow: hidden;
}

.headerCard .bg1 {
    background-color: var(--cards-color);
    border-radius: 18px;
    width: 100%;
    height: 100%;
    padding: 10%;
}

.headerCard .bg2 {
    background-color: var(--cards-color);
    border-radius: 18px;
    width: 100%;
    height: 100%;
    padding: 10%;
}

.headerCard .bg3 {
    background-color: var(--cards-color);
    border-radius: 18px;
    width: 100%;
    height: 100%;
    padding: 10%;
}

.heading {
    width: 100px;
    margin: auto;
}

.bg1 .heading p {
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    line-height: 15px;
    color: var(--blue);
    margin: 0;
}

.bg2 .heading p {
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    line-height: 15px;
    color: var(--blue);
    margin: 0;
}

.bg3 .heading p {
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    line-height: 15px;
    color: var(--blue);
    margin: 0;
}

.mobile-value {
    margin-top: 10px;
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    color: var(--purple);
}

.mobile-value .ais-Stats {
    margin-top: 10px;
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    color: var(--purple);
}

.mobile-filter-stats .ais-Stats {
    border: 1px solid var(--purple);
    background-color: var(--purple);
    border-radius: 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
    padding: 10px;
    margin-right: 10px;
}

.header .headerItemsCard {
    width: 100%;
    overflow: hidden;
}

.headerFoundElements {
    padding: 5px 10px 5px 10px;
    margin-top: 10px;
    color: var(--blue);
    background: var(--light-blue);
}

.headerItemsCard .bg4 {
    color: white;
    width: 100%;
    height: 100%;
}

.heading2 {
    width: 100px;
}

.bg4 .heading2 p {
    font-size: 12px;
    line-height: 15px;
    color: white;
    margin: 0;
}

.FoundElements {
    position: absolute;
    top: 340px;
    width: 100%;
}

.FoundElements-compare-active {
    top: 385px !important;
}

.accordion-items {
    padding: 10px !important;
    padding-left: 0px !important;
    border: none !important;
}

.accordion-items .accordion-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--blue);
}

.accordion-items .accordion-item-isin {
    margin: auto;
    font-size: 12px;
    text-align: center;
    font-weight: 600;
    color: var(--light-blue);
}

.accordion-items .accordion-item-score {
    margin: auto;
    font-size: 16px;
    font-weight: 600;
    color: var(--purple);
    text-align: center;
}

.mobile-search-caption {
    font-size: 12px;
    text-align: center;
    font-weight: 400;
    color: #636363;
}

.mobile-search-items-th {
    text-align: center;
    font-size: 9px;
    color: var(--blue);
}

.mobile-search-td-values {
    font-size: 12px !important;
    text-align: center;
    font-weight: 600 !important;
    color: var(--purple) !important;
}

.mobile-custom-select {
    color: var(--purple) !important;
    width: 100% !important;
    max-width: 100px !important;
    font-size: 12px !important;
}

.form-select:focus {
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.mobile-compare-row-hidden {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.mobile-compare-row-visible {
    opacity: 1;
    margin: auto !important;
    margin-bottom: 30px !important;
    max-height: 50px;
    text-align: center;
    width: 100%;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.header-stats {
    transition: margin-bottom 0.3s ease;
}

.header-stats-expanded {
    padding-top: 0% !important;
}

.mobile-dh-compare-launch-button {
    border-color: var(--prime-one);
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    background-color: var(--prime-one);
    color: white;
    margin-top: 5%;
    padding: 10px;
    min-width: 100%;
    font-size: 15px;
    font-weight: 700;
    opacity: 1;
    /* Fully visible */
    pointer-events: auto;
    /* Allow interactions */
    transition: opacity 0.3s ease, transform 0.3s ease;
    /* Smooth transition */
}

.mobile-dh-compare-launch-button-inactive {
    opacity: 0;
    /* Fully transparent */
    pointer-events: none;
    /* Disable interactions */
    transform: scale(0.95);
    /* Slightly scale down */
    transition: opacity 0.3s ease, transform 0.3s ease;
    /* Smooth transition */
}

/* Filter Section: Initially hidden with transition effect */
.mobile-filter-section {
    min-height: 100vh;
    max-height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background: var(--blue);
    z-index: 99999999999;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    overflow-x: hidden;
}


.mobile-filter-section.active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: all;
}


.sticky-filter-controls {
    position: sticky;
    top: 0;
    background-color: var(--blue);
    z-index: 10;
    padding: 50px 10px 5px 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.close-filter-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 14px;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-filter-button {
    width: 45px;
    height: 45px;
    line-height: 35px;
    z-index: 999;
    text-align: center;
    color: #fff;
    font-size: 25px;
    cursor: pointer;
    border-radius: 50%;
    background: var(--purple);
    transition: all 0.3s ease-in-out;
}

.mobile-ais-CurrentRefinements-root {
    margin-bottom: 40px;
}

.ais-CurrentRefinements-list {
    list-style: none;
}

.mobile-ais-CurrentRefinements-item {
    display: flex;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.ais-CurrentRefinements-delete {
    color: white;
}

.dh-azzera-filtri {
    color: var(--purple);
    font-size: 15px;
    font-weight: 500;
}

.dh-azzera-filtri:hover {
    color: var(--blue);
}

.filter-p-col {
    width: auto !important;
}


.mobile-filter-p-col .mobile-filter-p {
    border: 1px solid white;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
    padding: 10px;
    margin-left: 10px;
}

.mobile-filter-p-col .mobile-filter-p .bold {
    font-weight: 700;
}

.mobile-clear-refinements .mobile-button-clear-refinements {
    border: 1px solid white;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
    padding: 10px;
}

.mobile-compare-checkbox {
    width: 20px !important;
    height: 30px !important;
}

.mobile-analysis-button {
    border: 1px solid var(--blue);
    background-color: var(--blue);
    padding: 10px 20px 10px 20px;
    border-radius: 12px;
    text-align: center;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--white) !important;
}

/****** End Mobile Search Avdanced ******/

/****** General Dh Elements ******/
.main-content {
    padding-top: 56px;
}

.success {
    position: relative;
    background-color: #2bc169 !important;
    padding: 10px;
    color: var(--white);
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 0px;
}

.error {
    position: relative;
    background-color: #7c1712 !important;
    padding: 10px;
    color: var(--white);
    font-size: 12px;
    font-weight: 400;
    text-align: center;

}

.errorlist {
    list-style-type: none !important;
    margin-bottom: 2rem !important;
    color: #ff0000 !important;
    font-size: 0.95rem !important;
    padding-left: 0;

}

.error-message {
    color: #ff0000;
    font-size: 0.85rem;
}

.helptext {
    list-style-type: none !important;
    color: var(--blue) !important;
    font-size: 0.85rem !important;
}

.password-helper-list {
    list-style-type: none !important;
    color: var(--blue) !important;
    font-size: 0.8rem !important;
    padding-left: 0;
    margin-bottom: 2rem;
}

.dh-btn-buy {
    font-family: 'gorditamedium';
    font-size: 18px;
    min-width: 220px;
    text-align: center;
    color: var(--white);
    line-height: 55px;
    border-radius: 9px;
    background: var(--blue);
    padding: 0 30px;
    text-decoration: none !important;
}

.dh-btn-buy:hover {
    background: var(--purple);
    color: var(--white);
}

.dh-btn-buy-end {
    font-family: 'gorditamedium';
    font-size: 18px;
    min-width: 220px;
    text-align: center;
    color: var(--white);
    line-height: 55px;
    border-radius: 9px;
    background: var(--dark-light-blue);
    padding: 0 30px;
    text-decoration: none !important;
}

.dh-btn-buy-end:hover {
    background: var(--purple);
    color: var(--white);
}

/****** End General Dh Elements ******/

/****** Deltahedge Cards Style ******/
.cards-container {
    margin-left: 25%;
    width: calc(75% - 50px);
    padding: 0px;
    overflow-y: auto;
}

.full-cards-container {
    padding: 50px;
    overflow-y: auto;
}

.dh-row-cards {
    margin-right: 2em !important;
}

.card {
    display: block;
    min-height: 150px;
    margin-top: 10px;
    width: 100%;
    border: none;
    outline: none;
}

.card-body {
    margin-top: auto;
    margin-bottom: auto;
}

.dh-card {
    padding: 40px;
}

.dh-ptf-card {
    padding: 0px;
    min-height: 100% !important;
}

.dh-ptf-insight-card {
    padding: 10px;
}

.dh-compare-card {
    padding: 70px !important;
}

.dh-card-special {
    padding: 20px;
}

.dh-card-bg-right {
    border-color: transparent !important;
    border-radius: 8px !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background-color: var(--cards-color) !important;
}

.dh-card-bg-left {
    border-color: transparent !important;
    border-radius: 8px !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background-color: var(--cards-color) !important;
}

.dh-card-title h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--blue) !important;
    margin-bottom: 30px;
    opacity: 0.8;
}

.dh-card-title h1:before {
    background-color: var(--light-blue);
    border-radius: 0.20rem;
    content: '';
    display: block;
    height: 0.05rem;
    width: 42px;
    margin-bottom: 0.5rem;
}

.dh-card-title h2 {
    display: inline-flex;
    font-size: 18px;
    font-weight: 300;
    color: var(--blue) !important;
}

.dh-card-title h3 {
    position: relative;
    display: inline-flex;
    font-size: 18px;
    font-weight: 300;
    color: var(--blue) !important;
    padding-left: 16px;
}

.dh-card-title h3::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--purple);
    border-radius: 0.10rem;
    content: '';
    display: block;
    height: 9px;
    width: 9px;
    margin-bottom: 0.5rem;
}

.dh-card-title p {
    font-size: 14px;
    color: var(--blue);
}

.dh-card-title a {
    font-size: 14px;
    font-weight: 200;
    color: var(--card-title) !important;
    text-decoration: none;
}

.dh-card-title a:hover {
    color: var(--blue) !important;
    text-decoration: none;
}

.dh-card-title th {
    font-size: 14px;
    font-weight: 300;
    color: var(--blue) !important;
}

.dh-card-title td {
    font-size: 15px;
    font-weight: 500;
    color: var(--blue);
    padding-top: 15px !important;
}

.dh-card-title th {
    font-size: 15px;
    font-weight: 500;
    color: var(--blue);
    padding-top: 15px !important;
}

.dh-card-title td span {
    font-size: 15px;
    font-weight: 300;
}

.dh-card-title .market::before {
    background-color: #30414C;
}

.dh-card-title .size::before {
    background-color: var(--card-title);
}

.dh-card-title .value::before {
    background-color: #8445FA;
}

.dh-card-title .profit::before {
    background-color: #11D3CE;
}

.dh-card-title .aggress::before {
    background-color: #F416E9;
}

.dh-card-title .momentum::before {
    background-color: #095D91;
}

.dh-card-title-special h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--blue) !important;
    margin-bottom: 30px;
    opacity: 0.8;
}

.dh-card-title-special h1:before {
    background-color: var(--light-blue);
    border-radius: 0.20rem;
    content: '';
    display: block;
    height: 0.05rem;
    width: 42px;
    margin-bottom: 0.5rem;
}

.dh-card-title-special h2 {
    display: inline-flex;
    font-size: 18px;
    font-weight: 300;
    color: var(--blue) !important;
}

.dh-card-title-special h3 {
    position: relative;
    display: inline-flex;
    font-size: 18px;
    font-weight: 300;
    color: var(--blue) !important;
    padding-left: 16px;
}

.dh-card-title-special h3::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--purple);
    border-radius: 0.10rem;
    content: '';
    display: block;
    height: 9px;
    width: 9px;
    margin-bottom: 0.5rem;
}

.dh-card-title-special p {
    color: var(--blue);
    margin-bottom: 0;
}

.dh-card-title-special a {
    font-size: 14px;
    font-weight: 200;
    color: var(--card-title) !important;
    text-decoration: none;
}

.dh-card-title-special a:hover {
    color: var(--blue) !important;
    text-decoration: none;
}

.dh-card-title-special .market::before {
    background-color: #30414C;
}

.dh-card-title-special .size::before {
    background-color: var(--card-title);
}

.dh-card-title-special .value::before {
    background-color: #8445FA;
}

.dh-card-title-special .profit::before {
    background-color: #11D3CE;
}

.dh-card-title-special .aggress::before {
    background-color: #F416E9;
}

.dh-card-title-special .momentum::before {
    background-color: #095D91;
}

.dh-card-special-title h1 {
    font-size: 12px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 30px;
    opacity: 0.8;
    text-align: center;
}

.dh-card-special-title h1:before {
    background-color: var(--blue);
    border-radius: 0.2rem;
    content: '';
    display: block;
    height: 0.05rem;
    width: 42px;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
}

.dh-percentage-style1 {
    font-size: 20px !important;
    font-weight: 800;
    color: var(--blue) !important;
}

.dh-percentage-style2 {
    font-size: 30px;
    font-weight: 800;
}

.dh-percentage-style3 {
    font-size: 15px !important;
    font-weight: 800;
    color: var(--purple) !important;
}

.dh-card-section-title h1 {
    color: var(--blue);
    font-size: 30px;
    font-weight: 500;
}

.dh-card-ftitle-bg {
    padding: 20px !important;
    border: none !important;
    border-radius: 4px !important;
    background-image: var(--main-banners);
    background-size: cover;
    background-position: center;
    color: var(--white) !important;
}

.dh-card-section-title-bg {
    padding: 20px !important;
    border: none !important;
    border-radius: 4px !important;
    background-image: linear-gradient(to right, rgba(35, 35, 44, 1), rgba(33, 113, 183, 1)), url(#) !important;
    background-size: cover;
    background-position: center;
    color: var(--white) !important;
}

.dh-card-ftitle-bg h1 {
    font-size: 20px;
    font-weight: 300;
}

.dh-card-section-title-bg h1 {
    font-size: 20px;
}

.dh-card-funddesc {
    font-size: 14px;
    color: var(--white);
    opacity: 0.8;
}

.description-fund {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

.link-text {
    margin-left: 8px;
    /* Add the same space between the icon and the text for all links */
}

.dh-alert-bg {
    background: var(--purple);
    padding: 30px !important;
    border-radius: 10px;
}

.dh-alert h2 {
    color: var(--white) !important;
}

.dh-alert p {
    color: var(--white) !important;
}

.dh-alert p strong {
    color: var(--white) !important;
    font-weight: 600;
}

/****** End Deltahedge Cards Style ******/

/****** Deltahedge Dashboard ******/
.dashboard-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    box-sizing: border-box;
}

.mobile-dashboard-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    box-sizing: border-box;
}

.dashboard-section {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 25vh;
}

.mobile-dashboard-section {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 15%;
}

.logo-dashboard {
    min-width: 750px;
    margin: auto;
}

.dashboard-slogan h1 {
    margin-top: -25px;
    text-align: center;
    letter-spacing: 2.5px;
    font-size: 19px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--blue);
}

.dashboard-slogan h1 span {
    text-align: center;
    letter-spacing: 1px;
    font-size: 32px;
    font-weight: 200;
    text-transform: uppercase;
    color: var(--dark-light-blue);
}

.dh-dashboard-card {
    min-height: 0px !important;
}

.dh-card-dashboard-bg {
    border-color: transparent !important;
    border-radius: 8px !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background-color: var(--cards-color) !important;
}

.dh-card-dashboard-shop-bg {
    border-color: transparent !important;
    border-radius: 8px !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background: var(--dark-light-blue) !important;
}

.dh-card-dashboard-shop-bg:hover {
    background: var(--blue) !important;
}

.dh-card-shop-title h1 {
    font-size: 18px;
    text-align: center;
    font-weight: 700;
    color: var(--blue) !important;
    opacity: 0.8;
}

.ptf-card-dashboard-bg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--purple);
    border-radius: 8px 0 0 8px;
}

.fund-card-dashboard-bg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--dark-light-blue);
    border-radius: 8px 0 0 8px;
}

.list-card-dashboard-bg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #934888;
    border-radius: 8px 0 0 8px;
}

.else-card-dashboard-bg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #74cee5;
    border-radius: 8px 0 0 8px;
}

.share-card-dashboard-bg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-image: linear-gradient(0deg, rgba(154, 59, 255, 1) 0%, rgba(64, 114, 180, 1) 48.22%, #73cde4 100%);
    border-radius: 8px 0 0 8px;
}

.pmf-card-dashboard-bg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--dark-light-blue);
    border-radius: 8px 0 0 8px;
}

.dh-card-dashboard-bg:hover {
    border-color: transparent !important;
    border-radius: 8px !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background-color: #f7f9ff !important;
}

.dashboard-fund-title h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--blue) !important;
    opacity: 0.8;
}

.dashboard-fund-title h1:before {
    background-color: var(--dark-light-blue);
    border-radius: 0.20rem;
    content: '';
    display: block;
    height: 0.15rem;
    width: 50px;
    margin-bottom: 0.5rem;
}

.dashboard-portfolio-title h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--blue) !important;
    opacity: 0.8;
}

.dashboard-portfolio-title h1:before {
    background-color: var(--purple);
    border-radius: 0.20rem;
    content: '';
    display: block;
    height: 0.15rem;
    width: 50px;
    margin-bottom: 0.5rem;
}

.dh-card-dashboard-title h1 {
    font-size: 18px;
    text-align: center;
    font-weight: 600;
    color: var(--blue) !important;
    opacity: 0.8;
    margin-bottom: 0px;
}

.dh-card-dashboard-title h2 {
    /* font-size: 18px;
    font-weight: 700;
    color: var(--blue) !important;
    opacity: 0.8; */
    font-size: 15px;
    text-align: center;
    font-weight: 400;
    color: var(--blue) !important;
    opacity: 0.8;
}

.dh-card-dashboard-shop-title h2 {
    font-size: 18px;
    text-align: center;
    font-weight: 700;
    color: var(--white) !important;
    opacity: 1;
}


.dh-card-dashboard-title p {
    text-align: center;
    font-size: 12px;
}

.dh-card-dashboard-title h1:before {
    background-color: var(--light-blue);
    border-radius: 0.20rem;
    content: '';
    /* display: block; */
    display: none !important;
    height: 0.05rem;
    width: 42px;
    margin-bottom: 0.5rem;
    margin-right: auto;
    margin-left: auto;
}

.dh-card-dashboard-title .login-need {
    background: var(--purple);
    padding: 2px;
    border-radius: 5px;
    color: white !important;
}

.dh-card-dashboard-title .login-need-mobile {
    background: var(--purple);
    padding: 6px;
    border-radius: 5px;
    color: white !important;
}

.dh-card-dashboard-title .login-premium-need {
    background-image: linear-gradient(90deg, rgba(154, 59, 255, 1) 0%, rgba(64, 114, 180, 1) 48.22%, #73cde4 100%);
    padding: 2px;
    border-radius: 5px;
    color: white !important;
}

.dh-dashboard-icon {
    max-width: 120px;
}

.dh-dashboard-opacity-50 {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.dh-dashboard-opacity-1 {
    opacity: 1 !important;
}

.dh-dashboard-active-card {
    opacity: 1 !important;
    background-color: var(--active-card) !important;
}

.dh-card-title .dh-btn-list-more a {
    font-size: 14px;
    width: 200px !important;
    background: var(--blue) !important;
    color: var(--white) !important;
    text-decoration: none !important;
    box-shadow: none;
}

.dh-card-title .dh-btn-list-more a:hover {
    width: 200px !important;
    border: solid !important;
    background-color: transparent !important;
    border-color: var(--blue) !important;
    color: var(--blue) !important;
    text-decoration: none !important;
    box-shadow: none;
}

.banner-coupon {
    background: var(--blue);
    color: var(--white) !important;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

.banner-coupon.h40-90 {
    height: 40px;
}

.banner-coupon p {
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 0px;
}

.banner-coupon p span {
    font-weight: 800;
}

.banner-coupon p strong {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0px;
}

.banner-coupon .btn-coupon {
    font-weight: 600;
    background: var(--purple);
    padding: 10px;
    font-size: 14px;
    text-decoration: none;
    border: none;
    color: var(--white);
    border-radius: 5px;
}

.banner-coupon .btn-coupon:hover {
    background: transparent;
    border-width: 1px;
    border-style: solid;
    border-color: var(--purple);
}

.copy-btn {
    color: var(--blue);
}

.copy-btn:hover {
    color: var(--purple);
}

.add-strumento-btn {
    color: var(--blue);
}

.add-strumento-btn:hover {
    color: var(--purple);
}

/******End  Deltahedge Dashboard ******/


/****** Deltahedge Mobile Dashboard ******/
.header-dashboard-mobile {
    position: fixed;
    z-index: 10;
    top: 0;
    margin-top: 50px !important;
    left: 0;
    right: 0;
    background: var(--white);
    padding: 20px;
}

/****** End Deltahedge Mobile Dashboard ******/

/****** Deltahedge Components ******/
.p-relative {
    position: relative;
}

.dh-portfolio-create-section-title h2 {
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    color: var(--blue) !important;
}

.dh-isin {
    font-size: 14px;
    font-weight: 200;
}

.dh-fund-icon {
    width: 50px;
    margin: 0px 0px 20px 0px;
}

.dh-score {
    font-size: 12px;
}

.dh-score-value {
    font-size: 20px;
    font-weight: 800;
}

.dh-score-value-sm {
    font-size: 12px;
    font-weight: 800;
}

.dh-nav {
    font-size: 10px;
    margin-bottom: 0px;
}

.dh-nav-tags {
    font-size: 8px;
    font-weight: 300;
    margin-bottom: 0px;
}

.dh-tag-container {
    border: 1px solid #fff;
    color: white;
    border-radius: 100px;
    text-align: center;
    padding: 7px 25px 7px 25px;
    margin-bottom: 12px;
    margin-right: 15px;
}

.dh-value-tags {
    font-size: 10px;
    font-weight: 400;
    margin: auto;
}

.dh-search-general-input {
    display: flex;
    width: 450px;
    padding: 0.4rem;
    border: 1px solid #dfe1e5;
    border-radius: 10px;
    margin-top: 2%;
    color: var(--blue);
}

.dh-card-preview-metric {
    border: 1px dotted var(--blue);
    border-radius: 10px;
    padding: 20px 0px 20px 0px !important;
}

.dh-price {
    font-size: 15px;
    font-weight: 400;

}

.dh-renew-btn-inactive {
    opacity: 0.5;
    cursor: not-allowed !important;
    padding: 10px;
    border-radius: 4px;
    font-size: 11px;
    color: white;
    background-color: var(--blue);
    border: none;
}

.dh-renew-btn {
    padding: 10px;
    border-radius: 4px;
    font-size: 11px;
    color: white;
    background-color: var(--blue);
    border: 1px solid var(--blue);
}

.dh-renew-btn:hover {
    background: transparent;
    border: 1px solid var(--blue);
    color: var(--blue);
}

.dh-renew-btn:focus {
    border: none !important;
}

.dh-pay-btn {
    text-decoration: none;
    font-size: 18px;
    font-weight: 500 !important;
    color: var(--purple);
    line-height: 48px;
    border: 1px solid var(--purple);
    border-radius: 9px;
    padding: 0 42px;
    position: relative;
    transition: all 0.3s ease-in-out;
}

.dh-pay-btn:hover {
    color: var(--white);
    background-color: var(--purple);
    line-height: 48px;
    border: 1px solid var(--purple);
}

.dh-card-ftitle-icon {
    text-align: right;
    line-height: 50px;
    margin-right: 50px;
    font-size: 110px;
    color: var(--white);
    position: absolute;
    right: -5px;
    opacity: 0.1;
}

.p-bg-low {
    background: linear-gradient(135deg, #600135, #d20057) !important;
    color: var(--white);
}

.p-bg-medium {
    background: linear-gradient(135deg, #a92200, #d27b00) !important;
    color: var(--white);
}

.p-bg-high {
    background: linear-gradient(135deg, #07562e, #00b08a) !important;
    color: var(--white);
}

.filter-line-chart-align {
    justify-content: flex-start;
}

.date-line-chart-align {
    justify-content: flex-end;
}

.chart-filter {
    margin: 5px;
    height: 20px;
    width: 50px;
    font-size: 10px;
    background-color: transparent;
    border-style: solid;
    border-width: 1px;
    border-color: var(--blue);
    border-radius: 5px;
    color: var(--blue);
    cursor: pointer;
}

.chart-filter:hover {
    color: var(--white);
    background-color: var(--blue);
}

.chart-filter.active {
    color: var(--white);
    background-color: var(--blue);
}

.chart-filter-vol {
    margin: 5px;
    height: 20px;
    width: 50px;
    font-size: 10px;
    background-color: transparent;
    border-style: solid;
    border-width: 1px;
    border-color: var(--blue);
    border-radius: 5px;
    color: var(--blue);
    cursor: pointer;
}

.chart-filter-vol:hover {
    color: var(--white);
    background-color: var(--blue);
}

.chart-filter-vol.active {
    color: var(--white);
    background-color: var(--blue);
}

.chart-filter-draw {
    margin: 5px;
    height: 20px;
    width: 50px;
    font-size: 10px;
    background-color: transparent;
    border-style: solid;
    border-width: 1px;
    border-color: var(--blue);
    border-radius: 5px;
    color: var(--blue);
    cursor: pointer;
}

.chart-filter-draw:hover {
    color: var(--white);
    background-color: var(--blue);
}

.chart-filter-draw.active {
    color: var(--white);
    background-color: var(--blue);
}

.chart-filter-var {
    margin: 5px;
    height: 20px;
    width: 50px;
    font-size: 10px;
    background-color: transparent;
    border-style: solid;
    border-width: 1px;
    border-color: var(--blue);
    border-radius: 5px;
    color: var(--blue);
    cursor: pointer;
}

.chart-filter-var:hover {
    color: var(--white);
    background-color: var(--blue);
}

.chart-filter-var.active {
    color: var(--white);
    background-color: var(--blue);
}

.date-filter {
    margin: 5px;
    height: 30px;
    text-align: center;
    padding-right: 2%;
    font-size: 10px;
    background-color: transparent;
    border-style: solid;
    border-width: 1px;
    border-color: var(--blue);
    border-radius: 5px;
    color: var(--blue);
    cursor: text;
}

.date-filter-submit {
    margin: 5px;
    height: 30px;
    width: 30px;
    font-size: 12px;
    background-color: var(--blue);
    border-style: solid;
    border-width: 1px;
    border-color: var(--blue);
    border-radius: 5px;
    color: var(--white);
    cursor: pointer;
}

.date-filter-submit:hover {
    color: var(--blue);
    background-color: var(--white);
}

.btn-linechart-long-simulation {
    margin: 5px;
    height: 30px;
    padding: 5px 15px;
    font-size: 12px;
    background-color: var(--blue);
    border-style: solid;
    border-width: 1px;
    border-color: var(--blue);
    border-radius: 5px;
    color: var(--white);
    cursor: pointer;
}

.btn-linechart-long-simulation:hover {
    color: var(--blue);
    background-color: var(--white);
}

.date-filter-vol {
    margin: 5px;
    height: 30px;
    text-align: center;
    padding-right: 2%;
    font-size: 10px;
    background-color: transparent;
    border-style: solid;
    border-width: 1px;
    border-color: var(--blue);
    border-radius: 5px;
    color: var(--blue);
    cursor: text;
}

.date-filter-vol-submit {
    margin: 5px;
    height: 30px;
    width: 30px;
    font-size: 12px;
    background-color: var(--blue);
    border-style: solid;
    border-width: 1px;
    border-color: var(--blue);
    border-radius: 5px;
    color: var(--white);
    cursor: pointer;
}

.date-filter-var-submit:hover {
    color: var(--blue);
    background-color: var(--white);
}

.date-filter-var {
    margin: 5px;
    height: 30px;
    text-align: center;
    padding-right: 2%;
    font-size: 10px;
    background-color: transparent;
    border-style: solid;
    border-width: 1px;
    border-color: var(--blue);
    border-radius: 5px;
    color: var(--blue);
    cursor: text;
}

.date-filter-var-submit {
    margin: 5px;
    height: 30px;
    width: 30px;
    font-size: 12px;
    background-color: var(--blue);
    border-style: solid;
    border-width: 1px;
    border-color: var(--blue);
    border-radius: 5px;
    color: var(--white);
    cursor: pointer;
}

.date-filter-var-submit:hover {
    color: var(--blue);
    background-color: var(--white);
}

.date-filter-draw {
    margin: 5px;
    height: 30px;
    text-align: center;
    padding-right: 2%;
    font-size: 10px;
    background-color: transparent;
    border-style: solid;
    border-width: 1px;
    border-color: var(--blue);
    border-radius: 5px;
    color: var(--blue);
    cursor: text;
}

.date-filter-draw-submit {
    margin: 5px;
    height: 30px;
    width: 30px;
    font-size: 12px;
    background-color: var(--blue);
    border-style: solid;
    border-width: 1px;
    border-color: var(--blue);
    border-radius: 5px;
    color: var(--white);
    cursor: pointer;
}

.date-filter-draw-submit:hover {
    color: var(--blue);
    background-color: var(--white);
}

.table-container {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.table-container .table {
    width: 100%;
    margin-bottom: 0;
}

.td-arrow-details {
    color: var(--blue);
}

.td-arrow-details:hover {
    color: var(--purple);
}

.td-values-style1 {
    font-size: 13px !important;
    font-weight: 300 !important;
    color: var(--blue) !important;
}

.td-values-style1.link {
    font-size: 13px !important;
    font-weight: 300 !important;
    color: var(--blue) !important;
}

.td-values-style1.link:hover {
    text-decoration: none !important;
    color: var(--purple) !important;
}

.td-values-style1 a {
    text-decoration: none !important;
}

.td-values-style1 a:hover {
    text-decoration: none !important;
    color: var(--purple) !important;
}

.td-values-style2 {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--purple) !important;
}

.td-values-style3 {
    font-size: 13px !important;
    font-weight: 300 !important;
    color: var(--dark-light-blue) !important;
}

.td-style2 {
    font-size: 15px;
    font-weight: 500;
    color: var(--blue);
    padding-top: 50px !important;
}

.td-sub-style1 {
    font-size: 12px !important;
    font-weight: 300 !important;
    color: var(--light-blue) !important;
}

.td-sub-style2 {
    font-size: 12px !important;
    font-weight: 300 !important;
    color: var(--light-blue) !important;
}

.dh-compare-button {
    border-color: var(--blue);
    font-size: 14px;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    min-width: 20%;
    color: var(--blue);
}

.search-accordion {
    min-height: 0px;
}

.search-accordion-label {
    color: var(--blue) !important;
    font-size: 15px !important;
    font-weight: 600;
}

caption {
    caption-side: top;
    text-align: left;
    padding: 5px;
}

.sort-button {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 2px;
    display: flex;
}

.sort-icon {
    color: var(--purple);
    font-size: 10px;
}

.rotate-icon {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.bi-question-circle-fill {
    margin-left: 5px;
    font-size: 10px;
    cursor: pointer;
}

.tooltip-inner {
    background-color: var(--blue) !important;
    color: white !important;
    font-size: 12px !important;
    border-radius: 4px !important;
    padding: 15px !important;
    min-width: 200px;
}

.disabled-hit {
    opacity: 0.5;
    pointer-events: none;
}

.portfolios-container {
    border: 1px solid #eeeeee;
    padding: 20px;
    border-radius: 10px;
    height: 100%;
    max-height: 420px;
    overflow: hidden;
    overflow-y: scroll;
}

.portfolio-icon {
    color: var(--blue) !important;
    font-size: 26px !important;
}

.portfolio-list {
    display: flex;
    flex-direction: column;
    /* Stacks items in a single column by default */
}

.portfolio-links a {
    font-size: 15px;
    font-weight: 500;
    color: var(--purple) !important;
    text-decoration: none;
    cursor: pointer !important;
}

.portfolio-links a:hover {
    color: var(--violet) !important;
    text-decoration: none;
    cursor: pointer !important;
}

.portfolio-links ul {
    padding: 0px !important;
}

.portfolio-links li {
    list-style: none;
    padding: 0px !important;
}

.portfolio-shared-links a {
    font-size: 15px;
    font-weight: 500;
    color: var(--violet) !important;
    text-decoration: none;
    cursor: pointer !important;
}

.portfolio-shared-links a:hover {
    color: var(--purple) !important;
    text-decoration: none;
    cursor: pointer !important;
}

.ptfname {
    width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.href-compare-two-title {
    text-decoration: none !important;
    color: var(--white) !important;
}

.href-compare-two.title:hover {
    color: var(--light-blue) !important;
}

.list-icon {
    color: var(--blue) !important;
    font-size: 26px !important;
}

.list-links a {
    font-size: 20px;
    font-weight: 500;
    color: var(--purple) !important;
    text-decoration: none;
    cursor: default;
}

.list-links a:hover {
    color: var(--purple) !important;
    text-decoration: none;
    cursor: default;
}

.list-links ul {
    padding: 0px !important;
}

.list-links li {
    list-style: none;
    padding: 0px !important;
}

.desktop-filter-items {
    display: flex;
    font-size: 12px;
    display: flex;
    color: var(--blue);
    font-weight: 700;
}

.footer-disclaimer p {
    font-size: 18px;
    color: var(--blue);
}

.footer-disclaimer p strong {
    font-size: 18px;
    color: var(--blue);
    font-weight: 700;
}

/****** End Deltahedge Components ******/

/****** Deltahedge EXCEL ******/
.dh-xls-header-colors {
    background-color: var(--dark-light-blue) !important;
    color: white !important;
}

.dh-xls-form-label {
    color: var(--blue) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.dh-xls-form-control {
    color: var(--blue) !important;
    font-size: 14px !important;
    font-weight: 200 !important;
}

.dh-xls-btn-close {
    background-color: var(--blue) !important;
    color: white !important;
}

.dh-xls-btn-save {
    background-color: var(--purple) !important;
    color: white !important;
}

.dh-link-download {
    color: var(--dark-light-blue);
    font-size: 14px;
}

.dh-link-download:hover {
    color: var(--purple);
}

/****** End Deltahedge EXCEL ******/

/****** Deltahedge PTF ******/
.class-fixed-header .padding-ptf-tb {
    padding-top: 120px;
    padding-bottom: 10px;
}

.dh-ptfsec-title h1 {
    font-size: 25px;
    font-weight: 800;
    color: var(--blue) !important;
    opacity: 0.8;
    margin-bottom: 15px;
}

.ptf-action-settings {
    transition: max-height 0.5s ease, opacity 0.5s ease;
    overflow: hidden;
}

.ptf-action-settings.ptf-d-none {
    max-height: 0;
    opacity: 0;
}

.ptf-d-none {
    max-height: 0;
    opacity: 0;
}

#ptf-toggle-text {
    font-size: 12px;
}

#ptf-toggle-arrow {
    cursor: pointer;
}

#toggle-arrow-down {
    transform: rotate(0deg);
}

#toggle-arrow-up {
    transform: rotate(180deg);
}

.ptf-toggle-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    font-size: 16px;
    color: var(--blue) !important;
    cursor: pointer;
}

.ptf-mt {
    margin-top: 160px;
    transition: margin-top 0.5s ease;
}

.ptf-mt-collapsed {
    margin-top: 0px;
    transition: margin-top 0.5s ease;
}

.btn-dropdown-ptf {
    font-size: 12px;
    width: 20px;
    height: 20px;
    background: var(--purple);
    color: var(--white);
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    box-shadow: none;
}

.btn-dropdown-shared-ptf {
    font-size: 12px;
    width: 20px;
    height: 20px;
    background: var(--violet);
    color: var(--white);
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    box-shadow: none;
}

/****** End Deltahedge PTF ******/

/****** Deltahedge PAC ******/
.dh-pac-form .dh-pac-form-component .pac-form-label {
    margin-bottom: .5rem;
    font-size: 14px;
    color: var(--blue);
}

.dh-pac-form .dh-pac-form-component .pac-form-control {
    color: var(--blue) !important;
    font-size: 14px !important;
    font-weight: 200 !important;
}

/****** End Deltahedge PAC ******/


/****** Deltahedge search form ******/
.dh-search-fund-button {
    border-color: var(--heading);
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    background-color: var(--heading);
    color: white;
    padding: 10px;
    min-width: 100%;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    position: relative;
}

.dh-search-fund-button:hover {
    border-color: var(--heading);
    border-width: 2px;
    border-style: solid;
    border-radius: 5px;
    background-color: transparent;
    color: var(--heading);
}

.dh-ptfinsight-export-button {
    border-color: var(--heading);
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    background-color: var(--heading);
    color: white;
    padding: 10px;
    min-width: 100%;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    position: relative;
}

.dh-ptfinsight-accordion-title {
    font-weight: 600 !important;
    color: var(--blue) !important;
}

.dh-ptfinsight-export-button:hover {
    border-color: var(--heading);
    border-width: 2px;
    border-style: solid;
    border-radius: 5px;
    background-color: transparent;
    color: var(--heading);
}

.ptfinsight-form-label {
    margin-bottom: .5rem;
    font-size: 14px;
    color: var(--blue);
}

.ptfinsight-form-control {
    color: var(--blue) !important;
    font-size: 14px !important;
    font-weight: 200 !important;
}

.deltahedge-search-form {
    background: var(--prime-one);
    border: none;
    height: 60vh;
    min-height: 420px;
    padding: 0 12px;
}

.deltahedge-search-form.bg-two {
    background: var(--prime-two);
}

.deltahedge-search-form.bg-three {
    background: var(--blue);
    z-index: 9999999999;
    opacity: 1;
}

.deltahedge-search-form .close-btn {
    position: absolute;
    right: 30px;
    top: 30px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 22px;
    box-shadow: none;
}

.deltahedge-search-form .close-btn:hover,
.deltahedge-search-form .close-btn:focus {
    color: rgba(255, 255, 255, 1);
}

.deltahedge-search-form form {
    height: 70px;
    max-width: 940px;
    margin: 0 auto;
    position: relative;
}

.deltahedge-search-form form input {
    font-family: 'gorditamedium';
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 0px;
    padding: 0;
    background: transparent;
    font-size: 18px;
    color: var(--white);
}

.deltahedge-search-form form ::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.85);
}

.deltahedge-search-form form :-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.85);
}

.deltahedge-search-form form ::placeholder {
    color: rgba(255, 255, 255, 0.85);
}

/****** END Deltahedge search form ******/


/****** Deltahedge OPTIMIZE ******/
.dh-opt-form .dh-opt-form-component .opt-form-label {
    margin-bottom: .5rem;
    font-size: 14px;
    color: var(--blue);
}

.dh-opt-form .dh-opt-form-component .opt-form-control {
    color: var(--blue) !important;
    font-size: 14px !important;
    font-weight: 200 !important;
}

.opt-form-label {
    margin-bottom: .5rem;
    font-size: 14px;
    color: var(--blue);
}

.opt-form-control {
    color: var(--blue) !important;
    font-size: 14px !important;
    font-weight: 200 !important;
    text-align: center !important;
}

.dh-opt-btn {
    border-color: var(--blue) !important;
    border-radius: 9px;
    color: var(--blue) !important;
    font-weight: 600;
    background: transparent !important;
    border-width: 1px !important;
    border-style: solid;
    min-width: 200px;
    padding: 10px;
    margin: 10px;
}

.dh-opt-btn:hover {
    color: white !important;
    background: var(--blue) !important;
}

.dh-opt-btn.active {
    color: white !important;
    background: var(--blue) !important;
}

.list-group-opt-comingsoon {
    padding: 0;
    list-style: none;
}

.list-group-opt-comingsoon .list-group-item-opt {
    background: transparent;
}

.list-group-opt-comingsoon .list-group-item-opt h1 {
    color: var(--blue);
    font-size: 17px;
    font-weight: 500;
}

.list-group-opt-comingsoon .list-group-item-opt p {
    color: var(--dark-light-blue);
    font-size: 13px;
}

.class-fixed-header {
    width: 100%;
    position: fixed;
    overflow: hidden;
    background-color: var(--cards-color) !important;
    box-shadow: 0 13px 35px -12px rgba(35, 35, 35, 0.1);
    text-align: center;
    z-index: 99;
    margin-top: -9em;
    max-height: 800px;
    transition: max-height 0.5s ease-in-out;
}

.class-fixed-header .paddingtb {
    padding-top: 70px;
    padding-bottom: 10px;
}

.opt-mt {
    margin-top: 190px;
    transition: margin-top 0.5s ease;
}

.opt-mt-collapsed {
    margin-top: 0 !important;
    transition: margin-top 0.5s ease;
}

.opt-section-settings {
    transition: max-height 0.5s ease, opacity 0.5s ease;
    overflow: hidden;
}

.opt-section-settings.opt-d-none {
    display: none;
}

.opt-d-none {
    display: none;
}

#opt-toggle-text {
    font-size: 12px;
}

#opt-toggle-arrow {
    cursor: pointer;
}

#toggle-arrow-down {
    transform: rotate(0deg);
}

#toggle-arrow-up {
    transform: rotate(180deg);
}

.opt-toggle-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    font-size: 16px;
    color: var(--blue) !important;
    cursor: pointer;
}

.dh-optsec-title h1 {
    font-size: 15px;
    font-weight: 800;
    color: var(--blue) !important;
    opacity: 0.8;
}

.dh-card-opttitle-bg {
    padding: 20px !important;
    border: none !important;
    border-radius: 20px !important;
    background-image: var(--main-banners);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background-size: cover;
    background-position: center;
    color: var(--white) !important;
}

.dh-card-opttitle-bg h1 {
    font-size: 20px;
}

.dh-card-origtitle-bg {
    padding: 20px !important;
    border: none !important;
    border-radius: 20px !important;
    background-image: var(--main-banners);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background-size: cover;
    background-position: center;
    color: var(--white) !important;
}

.dh-card-origtitle-bg h1 {
    font-size: 20px;
}

.dh-addopt-ptf-input {
    width: 70px !important;
    text-align: center;
    font-weight: 500;
    color: var(--blue);
    border-color: var(--purple);
    border-radius: 10px !important;
}

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

/******* End Deltahedge OPTIMIZE ******/

/****** Deltahedge Prodotto ******/
.premium-product-before {
    width: 200px !important;
    color: var(--white);
    font-weight: 600;
    text-align: center;
    border-radius: 0px 10px 10px 0px;
    background-image: linear-gradient(90deg, rgba(154, 59, 255, 1) 0%, rgba(64, 114, 180, 1) 48.22%, #73cde4 100%);
    padding: 10px;
}

.dh-card-bg-product {
    border-color: transparent !important;
    border-radius: 8px !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background-color: var(--cards-color) !important;
}

.dh-card-bg-product-price {
    border-color: transparent !important;
    border-radius: 8px !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background-color: var(--blue) !important;
}

.dh-card-product-img {
    min-height: 200px;
    border-color: transparent !important;
    border-radius: 8px !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background-color: var(--cards-color) !important;
}

.dh-card-product-img .icon {
    max-width: 200px;
}

.dh-card-product-img-shop {
    min-height: 200px;
    border-color: transparent !important;
    border-radius: 8px !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background-color: var(--cards-color) !important;
}

.dh-card-product-img-shop:hover {
    background-color: #f7f9ff !important;
}

.dh-card-product-img-shop .icon {
    max-width: 200px;
}


.dh-card-bg-product .product-content h2 {
    font-size: 24px;
    color: var(--blue);
    margin: 0;
}

.dh-card-bg-product .product-content p {
    font-size: 18px;
    color: var(--blue);
    margin: 0;
}

.dh-card-bg-product .product-content p strong {
    font-weight: 600;
}

.dh-card-bg-product-price .price-content h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--white) !important;
    margin-bottom: 20px;
}

.product-feat-list {
    color: var(--blue);
}

.price-product-border {
    border: 0.5px solid #bcbcbc;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
}

.price-product-border-special {
    position: relative;
    border: 2px solid var(--purple);
    background: var(--purple);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
}

.price-product-border-special .most-sold {
    position: absolute;
    background: var(--white);
    color: var(--purple);
    padding: 2px;
    font-weight: 500;
    text-align: center;
    font-size: 8px;
    border-radius: 4px;
    overflow: hidden;
    right: 0;
    /* Align the element to the right edge */
    top: 50%;
    /* Vertically center */
    transform: translateY(-50%);
    /* Adjust for element's height */
}

.price-type p {
    font-size: 14px !important;
    color: var(--white) !important;
    margin: 0 !important;
}

.price-type-notallowed p {
    font-size: 14px !important;
    color: var(--white) !important;
    margin: 0 !important;
}

.price-import p {
    font-size: 14px !important;
    color: var(--white) !important;
    margin: 0 !important;
    font-weight: 700 !important;
}

.price-type-special p {
    font-size: 15px !important;
    color: var(--white) !important;
    margin: 0 !important;
}

.price-import-special p {
    font-size: 15px !important;
    color: var(--white) !important;
    margin: 0 !important;
    font-weight: 700 !important;
}

.price-import-discount p {
    font-size: 14px !important;
    text-decoration: line-through !important;
    color: var(--white) !important;
    margin: 0 !important;
    font-weight: 700 !important;
}

.dh-product-buy-button {
    padding: 5px;
    min-width: 100%;
    background-color: var(--purple);
    text-decoration: none !important;
    text-align: center;
    border: 1px solid var(--purple);
    border-radius: 5px;
    font-size: 14px;
    color: var(--white);
}

.dh-product-buy-button:hover {
    border: 1px solid var(--white);
    background-color: transparent;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    color: var(--white);
    text-decoration: none !important;
}

/* .dh-card-bg-product::before{
    border-radius: 10px;
    background-image: linear-gradient(90deg, rgba(154, 59, 255, 1) 0%, rgba(64, 114, 180, 1) 48.22%, #73cde4 100%);
    content: '';
    display: block;
    height: 0.1rem;
    width: 100%;
    margin-bottom: 0.5rem;
    margin-left: auto;
    margin-right: auto;
} */
/****** End Deltahedge Prodotto ******/

/****** Deltahedge Chatbot ******/
.chatbot-card-bg {
    border-color: transparent !important;
    border-radius: 0px !important;
}

.chatbot-dashboard-card-bg {
    background-image: linear-gradient(to right, rgba(35, 35, 44, 1), rgba(33, 113, 183, 0.5)), url('chatbot.jpg') !important;
    border-color: transparent !important;
    border-radius: 8px !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.chatbot-dashboard-card-bg:hover {
    background-image: linear-gradient(to right, rgba(33, 113, 183, 0.7), rgba(33, 113, 183, 0.5)), url('chatbot.jpg') !important;
    border-color: transparent !important;
    border-radius: 8px !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.chatbot-card-gradient-container {
    height: 100% !important;
}

.chatbot-card-gradient {
    --size: 58px;
    --speed: 10s;
    --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
    width: var(--size);
    height: var(--size);
    margin: auto;
    filter: blur(calc(var(--size) / 5.5));
    background-image: linear-gradient(hsla(200, 81%, 47%, 0.75), hsla(266, 100%, 62%, 1));
    animation: rotate var(--speed) var(--easing) alternate infinite;
    border-radius: 50% 70% 70% 30% / 30% 30% 70% 70%;
    transition: filter 0.5s ease, transform 0.5s ease;
}

.chatbot-card-gradient:hover {
    animation: rotate var(--speed) var(--easing) alternate infinite, pulse 1.5s ease-out infinite;
    box-shadow: 0 0 20px hsla(266, 100%, 62%, 0.5);
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(100%) blur(calc(var(--size) / 5));
    }

    50% {
        transform: scale(1.05);
        filter: brightness(110%) blur(calc(var(--size) / 5));
    }
}

.dh-chatbot-title h1::before {
    background-color: var(--white);
    border-radius: 0.20rem;
    content: '';
    display: block;
    height: 0.05rem;
    width: 42px;
    margin-bottom: 0.5rem;
    margin-left: auto;
    margin-right: auto;
}

.dh-chatbot-title h1 {
    font-size: 19px;
    font-weight: 800;
    color: white !important;
    margin-bottom: 20px;
    opacity: 1;
    text-align: center;
}

.dh-chatbot-title p {
    font-size: 14px;
    font-weight: 200;
    color: var(--white);
}

.dh-chatbot-button {
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    border-width: 1px;
    border-color: var(--white);
    background-color: var(--white);
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    color: var(--blue) !important;
}

.dh-chatbot-button:hover {
    background-color: transparent !important;
    color: var(--white) !important;
    border-color: var(--white);
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
}

.chatbot-container {
    background: var(--white);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.chatbot-sub-container {
    min-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.dh-introchat-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dh-introchat-card h1 {
    font-size: 36px !important;
    font-weight: 700;
    background: linear-gradient(150deg, var(--blue), var(--dark-light-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dh-introchat-card h2 {
    font-size: 18px !important;
    color: var(--blue) !important;
}

.dh-introchat-card p {
    font-size: 12px;
    color: var(--black);
}

.dh-introchat-card p strong {
    font-weight: 600;
}

.dh-introchat-btn {
    font-size: 16px;
    background-color: var(--dark-light-blue);
    border: 1px solid var(--dark-light-blue);
    border-radius: 5px;
    padding: 10px;
    min-width: 20%;
    color: white;
}

.dh-introchat-btn:hover {
    font-size: 16px;
    background-color: transparent;
    border: 1px solid var(--dark-light-blue);
    border-radius: 5px;
    padding: 10px;
    min-width: 20%;
    color: var(--dark-light-blue);
}

.dh-chat-card {
    margin: 0 !important;
    padding: 30px;
    height: 100vh !important;
}

.dh-chat-card-embed {
    padding: 30px;
    min-height: 85vh;
}

.pulse-wrapper {
    display: flex;
    justify-content: center;
    /* Center pulse horizontally */
    width: 100%;
    /* Ensure it takes full width to align correctly */
}

.pulse {
    margin-left: 1%;
    margin-top: 1.3%;
    margin-right: 3%;
    position: relative;
    width: 35px;
    height: 35px;
    background-color: var(--dark-light-blue);
    border-radius: 50%;
}

.pulse span {
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    opacity: .8;
    animation: pulseAnimate 4s ease-out infinite;
    animation-delay: calc(1s * var(--i));
}

@keyframes pulseAnimate {
    100% {
        opacity: 0;
        transform: scale(2);
    }
}

.messages-box {
    margin-top: 100px;
    padding-bottom: 0 !important;
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow-y: auto;
}

.messages-box-embed {
    margin-top: 10px;
    padding-bottom: 0 !important;
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow-y: auto;
    max-height: 600px;
}

.messages-list {
    padding-left: 0;
    padding-bottom: 40px;
    margin-bottom: 0;
    width: 100%;
    overflow-y: auto;
}

.messages-list-embed {
    padding-left: 0;
    margin-bottom: 0;
    width: 100%;
    overflow-y: auto;
}

.message {
    margin-bottom: 15px;
    list-style: none;
}

.message-text {
    padding: 30px 50px;
    border-radius: 1.5rem !important;
}

.message-text .ai-message-sender {
    color: var(--dark-light-blue);
}

.message-text .message-sender {
    color: var(--purple);
}

.message-content h3 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-size: 1.1em;
    font-weight: 700;
}

.message-content p {
    font-size: 0.9em;
    font-weight: 400;
}

.message-content p strong {
    font-size: 0.9em;
    font-weight: 600;
}

.message-content a {
    color: var(--purple);
    text-decoration: none;
}

.message-content a:hover {
    color: var(--blue);
    text-decoration: none;
}

.message-text .message-content {
    font-size: 1.1em;
    color: #505161 !important;
}

.sent {
    background-color: #f2e8ff;
    align-self: flex-end;
    border-radius: 1.5rem !important;
}

.received {
    background-color: #f1f0f0;
    align-self: flex-start;
    border-radius: 1.5rem !important;
}

.p-suggestions p {
    color: #505161 !important;
    font-size: 15px;
}

.suggestions-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 10px;
    /* Adjust gap between grid items as needed */
}

.suggestions-container-embed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 10px;
    /* Adjust gap between grid items as needed */
}

.suggestion-btn {
    margin: 0;
    text-align: left;
    font-size: 0.9rem;
    color: #505161 !important;
    padding: 15px 20px;
    background-color: #fdfcfc;
    border-color: #f2f2f2;
    border-width: 2px;
    border-style: dotted;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.suggestion-btn:hover {
    margin: 0;
    text-align: left;
    font-size: 0.9rem;
    color: #505161 !important;
    padding: 15px 20px;
    background-color: #efeeee;
    border-color: #f2f2f2;
    border-width: 2px;
    border-style: dotted;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.suggestion-btn-icon {
    color: var(--dark-light-blue);
}


.suggestion-btn-embed {
    margin: 0;
    text-align: left;
    font-size: 0.9rem;
    color: var(--dark-light-blue) !important;
    padding: 15px 20px;
    background-color: transparent;
    border-color: var(--dark-light-blue);
    border-width: 2px;
    border-style: dotted;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.suggestion-btn-embed:hover {
    margin: 0;
    text-align: left;
    font-size: 0.9rem;
    color: var(--white) !important;
    padding: 15px 20px;
    background-color: var(--dark-light-blue);
    border-color: var(--dark-light-blue);
    border-width: 2px;
    border-style: dotted;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.suggestion-btn-embed-icon {
    color: var(--dark-light-blue);
}

.chatbot-form {
    position: sticky;
    top: 100%;
    background-color: transparent !important;
    padding: 0px !important;
    border-top: none !important;
}

.message-form {
    display: flex;
    min-height: 5rem;
    margin-bottom: 1rem;
    padding: 0px !important;
    border-radius: 1.5rem;
    background-color: #f8f9fa;
    flex-wrap: nowrap;
}

.message-form-embed {
    display: flex;
    min-height: 5rem;
    margin-bottom: 1rem;
    padding: 0px !important;
    border-radius: 1.5rem;
    background-color: var(--white);
    flex-wrap: nowrap;
}

.message-input-wrapper {
    margin: auto;
    width: 100%;
    padding: 10px;
}

.message-input {
    color: #505161 !important;
    margin-right: 4.5rem;
    background-color: transparent !important;
    border: none !important;
    resize: none;
    overflow-y: auto;
}

/* .input-group {
    margin: auto !important;
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    width: 70% !important;
    } */
/* .input-group .form-control {
    border-radius: 10px !important;
    flex-grow: 1 !important;
    resize: none;
    overflow-y: auto;
    min-height: 38px;
    max-height: 150px;
    margin-right: 60px; 
    }       
    .input-group-append {
    position: absolute;
    right: 5px; 
    top: 5px; 
    bottom: 5px; 
    width: 50px;
    } */
.form-control:focus {
    border-color: #f0f0f0 !important;
    box-shadow: none !important;
    transition: border none !important;
}

.btn-send {
    --height-btn: 2.5rem;
    position: absolute !important;
    right: 2rem !important;
    top: calc(var(--height-btn) / 2);
    margin: auto !important;
    z-index: 2 !important;
    background-color: var(--dark-light-blue) !important;
    color: var(--white) !important;
    border: none !important;
    box-shadow: none !important;
}

.btn-send:hover {
    background-color: var(--blue) !important;
    color: var(--white);
    border: none !important;
    box-shadow: none !important;
}

.typing-indicator .message-content span {
    color: var(--dark-light-blue) !important;
    font-size: 2rem;
    display: inline-block;
    margin-right: 2px;
    animation: typing 1.4s infinite;
}

@keyframes typing {

    0%,
    40%,
    100% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }
}

/****** End Deltahedge Chatbot ******/

/****** Google Sign In ******/
.gsi-material-button {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: none;
    background-color: WHITE;
    background-image: none;
    border: 1px solid #747775;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #1f1f1f;
    cursor: pointer;
    font-family: 'Roboto', arial, sans-serif;
    font-size: 14px;
    height: 40px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
    text-align: center;
    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    max-width: 100%;
    min-width: min-content;
}

.gsi-material-button .gsi-material-button-icon {
    height: 20px;
    margin-right: 12px;
    min-width: 20px;
    width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
    -webkit-transition: opacity .218s;
    transition: opacity .218s;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.gsi-material-button:disabled {
    cursor: default;
    background-color: #ffffff61;
    border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
    opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
    opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
    background-color: #303030;
    opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
    background-color: #303030;
    opacity: 8%;
}

/****** End Google Sign In ******/

/****** ProntoMiFid ******/

.pmf-card {
    padding: 40px;
}

.pmf-card-bg {
    border-color: transparent !important;
    border-radius: 8px !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background-color: var(--cards-color) !important;
}

.pmf-section-title .title {
    font-size: 28px;
    color: var(--blue);
    font-weight: 800;
    margin-top: 25px;
}

.pmf-card-title h1:before {
    background-color: var(--light-blue);
    border-radius: 0.20rem;
    content: '';
    display: block;
    height: 0.05rem;
    width: 42px;
    margin-bottom: 0.5rem;
}

.pmf-card-title h2 {
    display: inline-flex;
    font-size: 18px;
    font-weight: 300;
    color: var(--blue) !important;
}

.pmf-card-title h3 {
    position: relative;
    display: inline-flex;
    font-size: 18px;
    font-weight: 300;
    color: var(--blue) !important;
    padding-left: 16px;
}

.pmf-card-title h3::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--purple);
    border-radius: 0.10rem;
    content: '';
    display: block;
    height: 9px;
    width: 9px;
    margin-bottom: 0.5rem;
}

.pmf-card-title p {
    font-size: 14px;
    color: var(--blue);
}

.pmf-card-title a {
    font-size: 14px;
    font-weight: 200;
    color: var(--card-title);
    text-decoration: none;
}

.pmf-card-title a:hover {
    color: var(--blue) !important;
    text-decoration: none;
}

.pmf-input {
    border: 1px solid grey;
    border-radius: 4px;
    padding: 4px;
    font-size: 12px;
    color: var(--dark-light-blue) !important;
    font-weight: 700 !important;
}

.pmf-label {
    font-size: 16px;
    color: var(--blue);
}

.pmf-submit-button {
    border-color: var(--prime-five);
    font-size: 14px;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    min-width: 20%;
    color: var(--heading);
}

.pmf-submit-button:hover {
    border-color: var(--blue);
    background-color: var(--blue);
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    color: white;
}

.pmf-createnewclient-button {
    border-color: var(--heading);
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    background-color: var(--heading);
    color: white;
    padding: 10px;
    min-width: 100%;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    position: relative;
    text-align: center;
}

.pmf-createnewclient-button:hover {
    border-color: var(--heading);
    border-width: 2px;
    border-style: solid;
    border-radius: 5px;
    background-color: transparent;
    color: var(--heading);
}

/****** End ProntoMiFid ******/


/****** AlphaMetrics ******/

.am-section-title .title {
    font-size: 28px;
    color: var(--blue);
    font-weight: 800;
    margin-top: 25px;
}

.am-card {
    padding: 40px;
}

.am-card-bg {
    border-color: transparent !important;
    border-radius: 8px !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background-color: var(--cards-color) !important;
}

.am-card-bg .am-metrics h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--blue) !important;
    margin-bottom: 30px;
    opacity: 0.8;
}

.am-card-bg .am-metrics h2:before {
    background-color: var(--light-blue);
    border-radius: 0.20rem;
    content: '';
    display: block;
    height: 0.05rem;
    width: 42px;
    margin-bottom: 0.5rem;
}

.am-card-bg .am-metrics h1 {
    font-size: 14px;
    font-weight: 400;
    color: var(--light-blue) !important;
}

.am-card-bg .am-metrics h1 span {
    font-size: 16px;
    font-weight: 600;
    color: var(--dark-light-blue) !important;
}

.am-card-bg .am-metrics h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--blue) !important;
}

.am-card-bg .am-metrics h2 span {
    font-size: 18px;
    font-weight: 700;
    color: var(--purple) !important;
}

.am-card-bg .am-metrics h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--blue) !important;
    margin-bottom: 30px;
    opacity: 0.8;
}

.am-card-bg .am-metrics h3:before {
    background-color: var(--light-blue);
    border-radius: 0.20rem;
    content: '';
    display: block;
    height: 0.05rem;
    width: 42px;
    margin-bottom: 0.5rem;
}

.am-card-bg .am-metrics p {
    font-size: 15px;
    font-weight: 400;
    color: var(--blue) !important;
}

.am-alert-bg {
    background: var(--purple) !important;
    padding: 30px !important;
    border-radius: 10px !important; 
} 

.am-alert h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--white) !important;
    opacity: 1;
}

.am-alert p {
    font-size: 18px;
    font-weight: 400;
    color: var(--white) !important;
}

.am-card-start-bg {
    padding: 20px;
    border: transparent !important;
    border-radius: 8px !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background-color: var(--cards-color) !important;
}

.am-card-start-bg .start h1 {
    font-size: 16px;
    font-weight: 600;
    color: var(--dark-light-blue) !important;
}

.am-card-start-bg .start h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--blue) !important;
}

.am-card-start-bg .start h3 {
    font-size: 14px;
    font-weight: 500;
    color: var(--blue) !important;
    margin: 0;
}

.am-card-start-bg .start h4 {
    font-size: 12px;
    font-weight: 300;
    color: var(--light-blue) !important;
}

.am-card-final-bg {
    padding: 20px;
    border-radius: 8px !important;
    border: transparent !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background-color: var(--cards-color) !important;
}

.am-card-final-bg .final h1 {
    font-size: 16px;
    font-weight: 600;
    color: var(--dark-light-blue) !important;
}

.am-card-final-bg .final h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--blue) !important;
}


.am-card-final-bg .final h3 {
    font-size: 14px;
    font-weight: 500;
    color: var(--blue) !important;
    margin: 0;
}

.am-card-final-bg .final h4 {
    font-size: 12px;
    font-weight: 300;
    color: var(--light-blue) !important;
}

.am-card-rendimento-bg {
    padding: 20px;
    border-radius: 8px !important;
    border: 4px solid var(--dark-light-blue) !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.am-card-rendimento-bg .rendimento h1 {
    font-size: 20px;
    font-weight: 600;
    color: var(--blue) !important;
}

.am-card-rendimento-bg .rendimento h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark-light-blue) !important;
}


.am-card-rendimento-bg .rendimento h3 {
    font-size: 14px;
    font-weight: 500;
    color: var(--blue) !important;
    margin: 0;
}

.am-card-rendimento-bg .rendimento h4 {
    font-size: 12px;
    font-weight: 300;
    color: var(--dark-light-blue) !important;
}

.am-link-download {
    color: var(--dark-light-blue);
    font-size: 14px;
}

.am-link-download:hover {
    color: var(--purple);
}

.am-button {
    border-color: var(--blue);
    font-size: 14px;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    min-width: 20%;
    color: var(--blue);
}

.am-button:hover {
    border-color: var(--blue);
    background-color: var(--blue);
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    color: white;
}

.am-button-light {
    border-color: var(--white);
    font-size: 14px;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    min-width: 20%;
    color: var(--white);
}

.am-button-light:hover {
    border-color: var(--white);
    background-color: var(--white);
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    color: var(--blue);
}

.am-button-success {
    background-color: var(--dark-light-blue);
    color: var(--white);
    font-size: 14px;
    border: 1px solid var(--dark-light-blue);
    border-radius: 5px;
    padding: 5px;
    min-width: 20%;
}

.am-button-success:hover {
    background-color: transparent;
    border: 1px solid var(--dark-light-blue);
    border-radius: 5px;
    padding: 5px;
    color: var(--dark-light-blue);
}

.am-button-disabled {
    border-color: #bab8ce;
    font-size: 14px;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    min-width: 20%;
    color: #bab8ce;
}

.am-button-disabled .upgrade {
    color: white;
    position: absolute;
    background-image: linear-gradient(90deg, rgba(154, 59, 255, 1) 0%, rgba(64, 114, 180, 1) 48.22%, #73cde4 100%);
    padding: 3px;
    font-weight: 500;
    font-size: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    border-radius: 5px;
}

.am-filter-title h1 {
    font-size: 20px;
    font-weight: 700;
    color: #332e7c !important;
    opacity: 0.8;
}

.am-filter-title h1:before {
    background-color: #1799da;
    border-radius: 0.20rem;
    content: '';
    display: block;
    height: 0.05rem;
    width: 42px;
    margin-bottom: 0.5rem;
}

.am-filter-title p {
    font-size: 14px;
    color: var(--prime-five);
}

.am-partner-title p {
    font-size: 9px;
    color: var(--black);
}

.am-form-counter {
    font-size: 30px;
    font-weight: 700;
    color: var(--blue);
}

.am-input {
    border: 1px solid grey;
    border-radius: 4px;
    padding: 4px;
    font-size: 14px;
    color: var(--blue) !important;
    font-weight: 500 !important;
}

.am-select {
    color: var(--blue) !important;
    font-weight: 500 !important;
}

.am-label {
    font-size: 16px;
    color: var(--blue);
}

.am-table-col {
    font-size: 13px;
    color: var(--dark-light-blue);
    text-transform: uppercase;
}

.am-table-input {
    border: 1px solid grey;
    border-radius: 4px;
    padding: 4px;
    font-size: 14px !important; 
    color: var(--blue) !important;
    font-weight: 500 !important;
}

.am-table-sheet-col {
    font-size: 13px;
    color: var(--light-grey3);
    text-transform: uppercase;
    border: none !important;
}

.am-table-sheet-input {
    font-size: 14px;
    color: var(--blue);
    font-weight: 300;
}

.am-table-sheet-input strong{
    font-weight: 500;
}

.am-table-sheet-input span{
    font-size: 15px;
    color: var(--blue);
    font-weight: 500;
}

.am-table-sheet-input-xl {
    font-size: 15px;
    color: var(--blue);
    font-weight: 600;
}

.am-table-sheet-input-xl strong{
    font-weight: 500;
}

.am-table-sheet-input-xl span{
    font-size: 15px;
    color: var(--blue);
    font-weight: 700;
}

.am-table-sheet-input.am-table-row-main{
    background-color: var(--dark-light-blue) !important;
    font-size: 16px;
    color: white;
    font-weight: 500;
}

.am-circle-icon-sheet {
    font-size: 14px;
}

.am-circle-icon-sheet.taxcost {
    color: var(--dark-light-blue);
}

.am-circle-icon-sheet.net {
    color: var(--purple);
}


/****** End AlphaMetrics ******/

/* END DEFAULT STYLE */

/* MEDIA QUERIES MAX-MIN
    /* Responsive DESKTOP max-min 1920px */
@media (max-width: 1920px) {}

@media (min-width: 1920px) {
    .dh-card-special-title h1 {
        font-size: 14px;
        margin-bottom: 0;
    }

    .dh-card-special-title h1:before {
        width: 32px;
    }

    .dh-percentage-style2 {
        font-size: 25px !important;
    }

    #mobile-fund-sidebar {
        display: none;
    }
}

/* Responsive DESKTOP max-min 1440px */
@media (max-width: 1440px) {}

@media (min-width: 1440px) {
    .dh-card-special-title h1 {
        font-size: 12px;
    }

    .dh-card-special-title h1:before {
        width: 30px;
    }

    .dh-percentage-style2 {
        font-size: 25px !important;
    }
}

/* Responsive DESKTOP max-min 1280px */
@media (max-width: 1199px) {
    .cards-container {
        margin-left: 0%;
        width: calc(75% - 50px);
        padding: 0px;
        overflow-y: auto;
    }

    #mobile-fund-sidebar {
        display: flex;
        background-color: transparent;
        white-space: nowrap;
        padding: 10px 0px 10px 0px;
        margin-top: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #mobile-fund-sidebar::-webkit-scrollbar {
        display: none;
    }

    #mobile-fund-sidebar .nav-link {
        display: inline-block;
        padding: 4px 8px;
        margin: 8px;
        color: var(--blue);
        text-decoration: none;
    }

    #mobile-fund-sidebar .nav-link:hover {
        color: var(--blue);
        text-decoration: none;
    }

    #mobile-fund-sidebar .nav-link.active {
        border-bottom: 4px solid var(--blue);
        padding: 4px;
        color: var(--blue);
        text-decoration: none;
    }

    .sidebar {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .cards-container {
        margin-left: 25%;
        width: calc(75% - 50px);
        padding: 0px;
        overflow-y: auto;
    }

    .dh-card-special-title h1 {
        font-size: 9px;
        margin-bottom: 0px;
    }

    .dh-percentage-style2 {
        font-size: 20px !important;
    }
}

/* Responsive max-min 1024px */
@media (max-width: 1024px) {
    .logo-dh {
        width: 140px;
    }

    .dh-row-cards {
        margin-right: 0em !important;
    }

    .cards-container {
        margin-left: 0%;
        width: 100%;
        padding: 0px;
        overflow-y: auto;
    }

    .mobile-cards-container {
        margin-left: 0%;
        width: 100%;
        padding: 0px;
        overflow-y: auto;
    }

    .dh-card {
        padding: 12px;
    }

    .dh-dashboard-card {
        padding: 12px;
    }

    .dh-card-charts {
        padding: 0px;
    }

    .dh-card-ftitle-icon {
        display: none;
    }

    .filter-line-chart-align {
        justify-content: center;
    }

    .date-line-chart-align {
        justify-content: center;
    }

    .dh-card-dashboard-title h1 {
        margin-bottom: 0px !important;
        font-size: 1.3em;
        text-align: center;
    }

    .dh-card-dashboard-title h1:before {
        display: none;
    }


    .dh-chatbot-title h1 {
        margin-bottom: 0px !important;
        font-size: 1.3em;
        text-align: center;
    }

    .dh-chatbot-title h1:before {
        display: none;
    }

    .dh-chatbot-title .dh-chatbot-description {
        display: none;
    }

    .portfolio-button-wrapper {
        display: none;
    }

    .dh-add-portfolio-button {
        display: none;
    }

    .card-img-top {
        margin: auto;
    }

    .dh-portfolio-edits-container {
        width: 100% !important;
    }

    .dh-dashboard-icon {
        width: 50% !important;
    }

    .ptf-mt {
        margin-top: 260px;
        transition: margin-top 0.5s ease;
    }

    .ptf-mt-collapsed {
        margin-top: 0px;
        transition: margin-top 0.5s ease;
    }

    .class-fixed-header .padding-ptf-t {
        padding-top: 70px;
        padding-bottom: 10px;
    }

    .HomeSearchElementWrapper {
        position: absolute;
        top: 15%;
        bottom: 85%;
        left: 0%;
        right: 0%;
        padding: 5%;
    }

    .class-fixed-header .padding-ptf-tb {
        padding-top: 80px;
        padding-bottom: 10px;
    }

    .dh-ptfsec-title h1 {
        font-size: 20px;
    }

    .share-section-title .title {
        font-size: 20px;
    }
}

@media (min-width: 1024px) {
    .sidebar-container {
        display: none;
    }

    .sidebar {
        width: 100% !important;
    }

    .main-content {
        margin-left: 25%;
    }

    .dh-card-special-title h1 {
        font-size: 14px;
        margin-bottom: 0;
    }

    .dh-card-special-title h1:before {
        display: none;
    }

    .dh-percentage-style2 {
        font-size: 20px !important;
    }
}

/* Responsive max-min 768px */
@media (max-width: 768px) {

    .standard-section {
        margin-top: 20%;
    }

    .dh-card-special-title h1 {
        font-size: 18px !important;
        margin-bottom: 0;
    }

    .dh-card-special-title h1:before {
        font-size: 30px !important;
        display: none;
    }

    .dh-percentage-style2 {
        font-size: 30px !important;
    }

    .dh-card-dashboard-title h1 {
        margin-bottom: 0px !important;
        font-size: 1em;
        text-align: center;
    }

    .dh-chatbot-title h1 {
        margin-bottom: 0px !important;
        font-size: 1em;
        text-align: center;
    }

    .card-img-top {
        margin: auto;
    }

    .banner-coupon.h40-90 {
        height: 90px;
    }

    .full-cards-container {
        padding: 0px;
    }

    .btnHomeDashboard {
        font-weight: 400;
        min-width: 180px;
        font-size: 14px;
        border-color: var(--blue);
        border-width: 1px;
        border-style: solid;
        color: var(--blue);
        border-radius: 4px;
        padding: 8px;
        text-decoration: none !important;
    }

    .btnDashboardHomePos {
        justify-content: center;
    }

    .btnHomeLogin {
        font-weight: 400;
        min-width: 180px;
        font-size: 14px;
        border-color: var(--light-blue);
        border-width: 1px;
        border-style: solid;
        color: var(--light-blue);
        border-radius: 4px;
        padding: 8px;
        text-decoration: none !important;
        margin-top: 5px;
    }

    .btnLoginHomePos {
        justify-content: center;
    }

    .ptf-mt-collapsed {
        transition: margin-top 0.5s ease;
    }

    .dh-introchat-card h1 {
        font-size: 30px !important;
        font-weight: 700;
        background: linear-gradient(150deg, var(--blue), var(--dark-light-blue));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .dh-introchat-card h2 {
        font-size: 15px !important;
        color: var(--blue) !important;
    }

    .suggestions-container-embed {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, auto);
        gap: 10px;
    }

    .messages-box-embed {
        margin-top: 0px;
        max-height: 540px !important;
    }

}

@media (min-width: 768px) {
    .portfolio-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .portfolio-list {
        width: 50%;
    }

    .class-fixed-header .padding-ptf-t {
        padding-top: 90px;
        padding-bottom: 10px;
    }
}


/* Responsive max-min 480px */
@media (max-width: 480px) {
    .dh-card-special-title h1 {
        font-size: 15px !important;
        margin-bottom: 0;
    }

    .dh-card-special-title h1:before {
        font-size: 30px !important;
        display: none;
    }

    .dh-percentage-style2 {
        font-size: 30px !important;
    }



    .dh-card-dashboard-title h1 {
        margin-bottom: 0px !important;
        font-size: 1em;
    }

    .dh-chatbot-title .dh-chatbot-description {
        display: none;
    }

    .dh-chatbot-title h1 {
        margin-bottom: 0px !important;
        font-size: 1em;
    }

    .message-box {
        margin-top: 50px;
    }

    .message-text {
        padding: 20px 20px;
        border-radius: 1.5rem !important;
    }

    .message-text .message-content {
        font-size: 1em;
        color: #505161 !important;
    }

    .dh-chat-card {
        height: calc(100vh - 50px) !important;
    }

    .chatbot-card-gradient {
        --size: 45px;
        --speed: 10s;
        --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
        width: var(--size);
        height: var(--size);
        margin: auto;
        filter: blur(calc(var(--size) / 5.5));
        background-image: linear-gradient(hsla(200, 81%, 47%, 0.75), hsla(266, 100%, 62%, 1));
        animation: rotate var(--speed) var(--easing) alternate infinite;
        border-radius: 50% 70% 70% 30% / 30% 30% 70% 70%;
        transition: filter 0.5s ease, transform 0.5s ease;
    }

    .chatbot-container {
        height: 100vh;
        background: var(--white);
        position: relative;
        z-index: 1;
        overflow: hidden;
    }

    .suggestions-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, auto);
        gap: 12px;
    }

    .dh-compare-card {
        padding: 60px 30px !important;
    }

    .portfolio-button-wrapper {
        display: none;
    }

    .dh-add-portfolio-button {
        display: none;
    }

    .btnHomeDashboard {
        font-weight: 400;
        min-width: 180px;
        font-size: 14px;
        border-color: var(--blue);
        border-width: 1px;
        border-style: solid;
        color: var(--blue);
        border-radius: 4px;
        padding: 8px;
        text-decoration: none !important;
    }

    .btnDashboardHomePos {
        justify-content: center;
    }

    .btnHomeLogin {
        font-weight: 400;
        min-width: 180px;
        font-size: 14px;
        border-color: var(--light-blue);
        border-width: 1px;
        border-style: solid;
        color: var(--light-blue);
        border-radius: 4px;
        padding: 8px;
        text-decoration: none !important;
        margin-top: 5px;
    }

    .btnLoginHomePos {
        justify-content: center;
    }
}

@media (min-width: 480px) {}

/* Responsive MOBILE max-min 320px */
@media (max-width: 320px) {}

@media (min-width: 320px) {}



/* MEDIA QUERIES WITHIN SPECIFIC RANGE
    /* Responsive DESKTOP Range Above 1920px */
@media (min-width: 1920px) {}

/* Responsive DESKTOP Range Between 1920px and 1440px */
@media (min-width: 1440px) and (max-width: 1919px) {}

/* Responsive DESKTOP Range Between 1440px and 1280px */
@media (min-width: 1280px) and (max-width: 1439px) {}

/* Responsive DESKTOP Range Between 1280px and 1024px */
@media (min-width: 1024px) and (max-width: 1279px) {}

/* Responsive TABLET LANDSCAPE Range Between 1024px and 768px */
@media (min-width: 768px) and (max-width: 1023px) {}

/* Responsive TABLET PORTRAIT Range Between 768px and 480px */
@media (min-width: 480px) and (max-width: 767px) {}

/* Responsive MOBILE Range Between 480px and 320px */
@media (min-width: 320px) and (max-width: 479px) {}

/* Responsive MOBILE Below 320px */
@media (max-width: 319px) {}