/* modern-theme.css 
   Generated: 2026-01-16
   Strategy: Scoped Attribute Toggle
   Preserves EXACT layout of original files.
*/
:root {
    --transition-speed: 0s;
}

/* Common Transitions */
body,
.topBanner,
nav,
.bulutWidgetTree,
.bulutWidgetFour,
.dashed-grid-paper {
    transition: background-color var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed), filter var(--transition-speed);
}

/* === LIGHT THEME DATA === */
/* File: light.css (Scoped) */

html[data-theme="light"] body {
    background-color: #ffffff;
    font-family: 'Poppins';
    -webkit-user-select: none;
    user-select: none;
    color: #555;
}

html[data-theme="light"] .dashed-grid-paper {
    --grid-size: 400px;
    --grid-strength: 1px;
    --grid-dash: 5px;
    --grid-gap: 15px;
    --grid-color: #fff;
    --paper-color: #ffffff;
    background-color: var(--paper-color);
    background-size: var(--grid-gap) var(--grid-gap), var(--grid-size) var(--grid-size);
    background-image: linear-gradient(to bottom, transparent var(--grid-dash), var(--paper-color) var(--grid-dash)), linear-gradient(to right, var(--grid-color) var(--grid-strength), transparent var(--grid-strength)), linear-gradient(to right, transparent var(--grid-dash), var(--paper-color) var(--grid-dash)), linear-gradient(to bottom, var(--grid-color) var(--grid-strength), transparent var(--grid-strength));
}

html[data-theme="light"] .dark-mode {
    background-color: #fff;
    color: white;
}

html[data-theme="light"] .topBanner {
    margin: 1.5rem;
    background: #adc8ff;
    background: linear-gradient(0deg, rgb(173 200 255 / 93%) 60%, rgb(245 245 245 / 0%) 90%);
    height: 902px;
    padding: 1rem;
    padding-left: 3rem;
    border-radius: 2rem;
    margin-bottom: 0;
    margin-left: 2rem;
    margin-right: 2rem;
}

html[data-theme="light"] .topLogo {
    width: 245px;
    filter: invert(1);
}

html[data-theme="light"] .topMenuBg {
    text-align: center;
}

html[data-theme="light"] .topMenuBg .nav-link {
    color: #414141 !important;
    margin-left: 2.5rem;
    text-align: center;
}

html[data-theme="light"] .topMenuBg .nav-link.active {
    color: #5b78d7 !important;
    font-weight: bold;
}

html[data-theme="light"] nav.navbar.navbar-expand-lg.topMenuBg {
    box-shadow: 3px 8px 15px 3px rgb(154 199 249 / 61%);
    border-radius: 5rem;
    background: #fff;
    height: 55px;
    border: 1px solid #d2e8ff;
}

html[data-theme="light"] .bannerSlogan h1 {
    color: #414141;
    font-size: 60px;
    text-align: center;
    margin-top: 57px;
    font-weight: bold;
}

html[data-theme="light"] .bannerSlogan h2 {
    color: #414141;
    font-size: 30px;
    text-align: center;
    font-weight: 700;
}

html[data-theme="light"] .bannerSlogan p {
    font-size: 16px;
    text-align: center;
    padding-top: 21px;

}

html[data-theme="light"] .bannerCircle {
    position: absolute;
    bottom: 0rem;
    left: 18rem;
    z-index: -1;
}

html[data-theme="light"] .bannerCircle img {
    width: 77%;
}

html[data-theme="light"] .topCircleButton {
    width: 35px;
    height: 35px;
    font-size: 18px;
    background: #fff;
    text-align: center;
    padding: 0;
    color: #414141;
    border-radius: 5rem;
    box-shadow: 2px 3px 8px 2px #adc8ff;
    margin-top: 15px;
}

html[data-theme="light"] .langGlobeButton {
    height: 35px;
    min-width: 78px;
    padding: 0 12px;
    margin-top: 15px;
    border-radius: 5rem;
    background: #fff !important;
    color: #414141 !important;
    border: none !important;
    box-shadow: 2px 3px 8px 2px #adc8ff;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
}

html[data-theme="light"] .langGlobeButton::after {
    margin-left: .25rem;
}

html[data-theme="light"] .mL25 {
    margin-left: 25px;
}

html[data-theme="light"] .text-right {
    text-align: right;
}

html[data-theme="light"] .circleBtnRight {
    margin-left: -55px;
}

html[data-theme="light"] .phoneBg {
    background: #8620E0;
    background: linear-gradient(34deg, rgb(134 32 224 / 66%) 0%, rgb(255 255 255 / 68%) 32%, rgb(169 25 255 / 72%) 100%);
    width: 391px;
    height: 567px;
    position: absolute;
    margin-left: 15rem;
    border-top-right-radius: 3rem;
    border-top-left-radius: 3rem;
    margin-top: 17px;
}

html[data-theme="light"] .phoneCam img {
    position: absolute;
    z-index: 1;
    margin-top: 24px;
    margin-left: -49px;
    width: 95px;
}

html[data-theme="light"] .btPhoneLogo img {
    width: 188px;
    position: absolute;
    z-index: 1;
    margin-top: 4.5rem;
    margin-left: -11rem;
}

html[data-theme="light"] .btBalance {
    position: absolute;
    z-index: 2;
    margin-left: 16rem;
    background: #fff;
    border-radius: 1rem;
    width: 357px;
    margin-top: 8rem;
}

html[data-theme="light"] .centerPhone {
    width: 870px;
}

html[data-theme="light"] .centerDevice img {
    width: 429px;
}

html[data-theme="light"] .totalBalance {
    color: #555;
    text-align: left;
    padding-left: 1.5rem;
    padding-top: 1.5rem;
}

html[data-theme="light"] .totalBalanceNumber {
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    padding-left: 1.5rem;
    letter-spacing: 2px;
    color: 555;
    padding-top: 1rem;
}

html[data-theme="light"] span.balancePlus {
    font-size: 60px;
    position: absolute;
    text-align: right;
    right: 21px;
    top: 20px;
    color: #7923c6;
}

html[data-theme="light"] .balanceQuality {
    color: 555;
    font-size: 12px;
    text-align: left;
    padding-left: 1.5rem;
    padding-top: .5rem;
}

html[data-theme="light"] .comingAndGoingBox {
    background: #8620E0;
    background: linear-gradient(285deg, rgba(134, 32, 224, 1) 0%, rgb(193 131 247) 100%);
    margin: 1rem;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    border-radius: .7rem;
    color: #fff;
    margin-top: 12px;
    position: relative;
    float: left;
    width: 310px;
}

html[data-theme="light"] .comingAndGoing {
    width: 153px;
    margin-left: 0rem;
    margin-top: 2px;
    float: left;
    position: relative;
}

html[data-theme="light"] .comingAndGoing .gelen {
    font-size: 11px;
    padding-top: 8px;
}

html[data-theme="light"] .comingAndGoing .adet {
    font-size: 11px;
    padding-bottom: 8px;
}

html[data-theme="light"] .comingAndGoing .toplam {
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 13px;
}

html[data-theme="light"] .hHr {
    float: left;
    position: relative;
    height: 60px;
    width: 2px;
    background: #FFF;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgb(255 255 255 / 1%) 100%);
    top: 7px;
}

html[data-theme="light"] .widgetOne {
    position: absolute;
    width: 155px;
    height: 45px;
    background: #fff;
    margin-top: -32rem;
    border-radius: 4rem;
    color: #414141;
    margin-left: 22rem;
    box-shadow: 9px 5px 12px rgb(91 120 215 / 53%);
}

html[data-theme="light"] .widgetOne i {
    color: #fff;
}

html[data-theme="light"] .widgetOneIcon {
    width: 30px;
    height: 30px;
    background: #5b78d7;
    border-radius: 6rem;
    text-align: center;
    margin-top: 6px;
    margin-left: 9px;
    float: left;
    padding-top: 5px;
}

html[data-theme="light"] .widgetOneText small {
    font-size: 10px;
    float: left;
}

html[data-theme="light"] .widgetOneText h2 {
    font-size: 14px;
}

html[data-theme="light"] .widgetOneText {
    margin-left: 10px;
    float: left;
    margin-top: 6px;
}

html[data-theme="light"] .widgetTwo {
    position: absolute;
    width: 185px;
    height: 45px;
    background: #fff;
    margin-top: -24rem;
    border-radius: 4rem;
    color: #414141;
    margin-left: 27rem;
    box-shadow: 9px 5px 12px rgb(91 120 215 / 53%);
}

html[data-theme="light"] .widgetOneIcon.widgetIconTwo {
    margin-left: -.7rem;
}

html[data-theme="light"] .redWidget {
    background-color: #ff0000;
    color: white;
}

html[data-theme="light"] .greenWidget {
    background-color: #00b727;
    color: white;
}

html[data-theme="light"] .blueWidget {
    background-color: #2e3191;
    color: white;
}

html[data-theme="light"] .widgetOneText.widgetTwoText h2 {
    font-size: 16px;
    font-weight: bold;
    margin-left: 5px;
    padding-top: 6px;
}

html[data-theme="light"] .widgetIconTree {
    width: 315px;
    background: #fff;
    min-height: 200px;
    padding: 1rem;
    border-radius: 1rem;
    position: absolute;
    margin-top: -31rem;
    margin-left: 64rem;
    z-index: 2;
    color: #414141;
    box-shadow: -8px 10px 19px 1px rgb(91 120 215 / 53%);
    background-image: url(../img/widgetTreeBg.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}

html[data-theme="light"] .wIconTLeft {
    font-size: 14px;
    float: left;
}

html[data-theme="light"] .wIconTRight {
    font-size: 10px;
    text-align: right;
    padding-right: 10px;
    padding-top: 5px;
}

html[data-theme="light"] .widgetIconTreeText {
    float: left;
    width: 50%;
}

html[data-theme="light"] .widgetIconTreeTitle {
    width: 100%;
    float: left;
}

html[data-theme="light"] .widgetIconTreeCircle {
    margin-top: 10px;
    float: left;
    width: 100%;
}

html[data-theme="light"] .widgetIconTreeCircle .widgetOneIcon {
    margin-left: 0;
    float: left;
}

html[data-theme="light"] .widgetIconTDate {
    font-size: 10.5px;
    padding-top: 6px;
    margin-left: 5px;
    float: left;
}

html[data-theme="light"] .widgetIconTDate h3 {
    font-size: 13px;
    font-weight: normal;
    color: #727272;
}

html[data-theme="light"] .widgetIconTreeBalance {
    float: left;
    width: 50%;
}

html[data-theme="light"] .widgetIconTreeBalance h3 {
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    padding-top: 13px;
    padding-right: 10px;
}

html[data-theme="light"] .rotate315 {
    font-size: 16px;
    background: -webkit-linear-gradient(#5c9bb9, #8cb887);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

html[data-theme="light"] .rotate130 {
    font-size: 16px;
    background: -webkit-linear-gradient(#ff4343, #ffcb3b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

html[data-theme="light"] .widgetOneIcon.redWidget img {
    margin-bottom: 4px;
}

html[data-theme="light"] .widgetOneIcon.greenWidget img {
    margin-top: -4px;
}

html[data-theme="light"] .widgetFour {
    width: 395px;
    background: #fff;
    height: 205px;
    padding: 1rem;
    border-radius: 1rem;
    position: absolute;
    margin-top: -17rem;
    margin-left: 14rem;
    z-index: 2;
    color: #414141;
    box-shadow: 8px 5px 19px 1px rgb(91 120 215 / 53%);
    background-image: url(../img/widgetFourBg.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
}

html[data-theme="light"] .widgetFourHead h3 {
    font-size: 14px;
    padding-top: 10px;
    font-weight: 600;
}

html[data-theme="light"] .donutChart {
    height: 150px;
    float: left;
}

html[data-theme="light"] .widgetFourchart {
    float: left;
}

html[data-theme="light"] .widgetFourText {
    float: left;
    margin-top: 1rem;
}

html[data-theme="light"] .wFourposBank h3 {
    font-size: 14px;
}

html[data-theme="light"] .wFourposBank {
    width: 45px;
}

html[data-theme="light"] .wFourposBankIcon {
    width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 15rem;
    margin-bottom: 9px;
}

html[data-theme="light"] .wCommissionBank {
    float: left;
    margin-top: 1rem;
    width: 65px;
    margin-left: 13px;
}

html[data-theme="light"] .wCommissionBankTitle h3 {
    font-size: 14px;
}

html[data-theme="light"] .wCommissionBank h4 {
    font-size: 14px;
}

html[data-theme="light"] .wCommissionBank h3 {
    font-size: 13px;
    line-height: 2;
}

html[data-theme="light"] .wCommissionIslem h3 {
    font-size: 13px;
    line-height: 2;
    text-align: right;
}

html[data-theme="light"] .widgetCircle {
    width: 55px;
    height: 55px;
    position: absolute;
    background: #fff;
    bottom: 9rem;
    z-index: 1;
    color: #4f93f8;
    text-align: center;
    float: right;
    right: 0;
    margin-right: 39rem;
    border-radius: 12rem;
    padding-top: 11px;
    font-size: 22px;
    box-shadow: -8px 10px 19px 1px rgb(91 120 215 / 53%);
}

html[data-theme="light"] .cashFlowReport {
    position: absolute;
    z-index: 2;
    margin-left: 16rem;
    background: #fff;
    border-radius: 1rem;
    width: 357px;
    margin-top: 23rem;
    height: 217px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

html[data-theme="light"] .cashFlowReportTitle h3 {
    color: #555;
    text-align: left;
    padding-left: 1.5rem;
    padding-top: 1.5rem;
    font-size: 15px;
}

#chart2 {
    width: 100%;
}

html[data-theme="light"] .chartWrap {
    max-width: 378px;
}

html[data-theme="light"] .cashFlowReportTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

html[data-theme="light"] .cashTabs {
    display: inline-flex;
    background: rgb(155 71 255);
    border-radius: 999px;
    font-size: 12px;
    margin-right: 25px;
    margin-top: 15px;
}

html[data-theme="light"] .cashTabs button {
    border: 0;
    background: transparent;
    color: #d8d1e6;
    border-radius: 5px;
    font-weight: 400;
    cursor: pointer;
}

html[data-theme="light"] .cashTabs button.active {
    background: #7e25ba;
    color: #fff;
}

html[data-theme="light"] .hizmetTitle {
    text-align: center;
    font-size: 28px;
    color: #555;
}

html[data-theme="light"] .mt60 {
    margin-top: 60px;
}

html[data-theme="light"] .brandLogo {
    text-align: center;
}

html[data-theme="light"] h3.blueText {
    color: #90a6ec;
    font-size: 50px;
    font-weight: 500;
}

html[data-theme="light"] h3.baslik {
    color: #555;
    font-size: 50px;
    font-weight: 500;
}

html[data-theme="light"] .mt120 {
    margin-top: 120px;
}

html[data-theme="light"] .mt30 {
    margin-top: 30px;
}

html[data-theme="light"] .mt45 {
    margin-top: 45px;
}

html[data-theme="light"] .f-size12 {
    font-size: 12px;
    color: #555;
}

html[data-theme="light"] .blue-btn:hover {
    background: #5b78d7;
    color: white;
    padding: .5rem;
    border-radius: 3rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

html[data-theme="light"] .blue-btn {
    border: 1px solid #5b78d7;
    color: #5b78d7;
    padding: .5rem;
    border-radius: 3rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

html[data-theme="light"] .text-justify {
    text-align: justify;
}

html[data-theme="light"] .twoCircleBlur {
    background-image: url(../img/right-bg-blur.png);
    background-repeat: no-repeat;
    background-position: top right;
    min-height: 800px;
}

html[data-theme="light"] .twoCircleBlurLeft {
    background-image: url(../img/right-bg-left.png);
    background-repeat: no-repeat;
    background-position: top left;
    min-height: 800px;
}

html[data-theme="light"] .BtfeatureBox {
    min-height: 240px;
    background: #f8f9fa;
    /* FIXED: Solid Opacity */
    border-radius: 1.5rem;
    padding: 2rem;
    padding-top: 3rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    padding-left: 3rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .purpleBoxBg {
    background: #F8F0FF;
    /* FIXED: Solid Light Purple */
}

html[data-theme="light"] .BtfeatureCircleIcon {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    text-align: center;
    background: #7a04b7;
    border-radius: 3rem;
    color: white;
    padding: 0.5rem;
    float: left;
}

html[data-theme="light"] .BtfeatureBoxTitle {
    float: left;
}

html[data-theme="light"] .BtfeatureBoxTitle h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    float: left;
    padding-left: 19px;
    width: 90%;
}

html[data-theme="light"] .BtfeatureBoxTitle p {
    float: left;
    margin-left: 66px;
    margin-top: 10px;
    font-size: 15px;
}

html[data-theme="light"] span.blueText {
    color: #90a6ec;
}

html[data-theme="light"] .f-size22 {
    font-size: 22px;
    color: #5c5c5c;
    font-weight: 500;
}

html[data-theme="light"] .font-w-size13 {
    font-size: 15px;
    color: #555;
    line-height: 2;
    text-align: justify;
    margin-bottom: 0;
}

html[data-theme="light"] .mt20 {
    margin-top: 20px;
}

html[data-theme="light"] .pLeftRight {
    padding: 0rem 2rem 2rem 0rem;
}

html[data-theme="light"] .padding4rem {
    padding: 4rem;
}

html[data-theme="light"] .bulutWidgetOne {
    float: left;
    background: #fff;
    min-width: 215px;
    margin-left: 20px;
    border-radius: 1rem;
    margin-top: 2.5rem;
    background-image: url(../img/widgetGreenBg.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 80%;
    height: 95px;
}

html[data-theme="light"] .floatLeft {
    float: left;
}

html[data-theme="light"] .purpleBox {
    background: #7118a1;
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 16px;
    color: white;
    margin-top: 14px;
    margin-left: 15px;
    border-radius: 5px;
    padding-top: 3px;
    float: left;
}

html[data-theme="light"] .bulutWidgetOneAmount h3 {
    font-size: 15px;
    text-align: right;
}

html[data-theme="light"] .bulutWidgetOneAmount {
    float: right;
    text-align: right;
    margin-right: 16px;
    margin-top: 8px;
}

html[data-theme="light"] .bulutWidgetOneAmount small {
    font-size: 8px;
}

html[data-theme="light"] svg.chart {
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
    position: relative;
    bottom: 37px;
}

html[data-theme="light"] .stat-card {
    height: 100px;
}

html[data-theme="light"] .smallBanner {
    padding: .5rem;
    border: .5px dashed #692d89;
    border-radius: 2rem;
}

html[data-theme="light"] .bulutWidgetTwo {
    float: left;
    background: #fff;
    height: 310px;
    width: 308px;
    margin-left: -2px;
    border-radius: 1rem;
    padding: .5rem;
    position: relative;
}

html[data-theme="light"] .borderDahsed {
    float: left;
    border: .5px dashed #dc9aff;
    border-radius: 1rem;
    padding: 1rem;
    height: 345px;
    width: 343px;
    position: absolute;
    margin-left: 210px;
    margin-top: 155px;
}

html[data-theme="light"] .paddingLeft1 {
    padding-left: 1rem;
}

html[data-theme="light"] .minH900 {
    min-height: 1055px;
}

html[data-theme="light"] .circleHover {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 2rem;
    border: 2px solid #8619e4;
    margin-top: 5rem;
    position: absolute;
    margin-left: -2px;
    z-index: 1;
}

html[data-theme="light"] .hoverChartBox {
    position: absolute;
    width: 205px;
    background: #881EE5;
    background: linear-gradient(90deg, rgba(136, 30, 229, 1) 0%, rgba(156, 107, 253, 1) 100%);
    border-radius: .6rem;
    margin-top: 51px;
    margin-left: -14rem;
    padding: .8rem;
}

html[data-theme="light"] .hoverBoxBankIcon img {
    width: 15px;
    padding-top: 8px;
}

html[data-theme="light"] .hoverBoxBankIcon {
    float: left;
}

html[data-theme="light"] .hoverBoxTitle h4 {
    font-size: 14px;
    font-weight: 600;
    float: right;
    letter-spacing: 2px;
}

html[data-theme="light"] .hoverBoxTitle {
    color: #fff;
}

html[data-theme="light"] .hoverBoxTitle i {
    color: #fff;
}

html[data-theme="light"] .hoverBoxTitle small {
    float: right;
    margin-left: 14px;
    font-size: 11px;
    padding-bottom: 3px;
    padding-top: 3px;
}

html[data-theme="light"] .hoverBoxBankIcon {
    float: left;
    width: 45px;
    height: 45px;
    text-align: center;
    border-radius: .5rem;
    border: 1px dashed #fff;
    padding: 3px;
}

html[data-theme="light"] .hoverBoxTitle i {
    color: #fff;
    background: -webkit-linear-gradient(#ffffff, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .triangle {
    position: absolute;
    width: 10px;
    height: 10px;
    rotate: 45deg;
    background: #9c6afd;
    margin-top: 5rem;
    margin-left: -25px;
}

html[data-theme="light"] .positionAb {
    position: absolute;
}

html[data-theme="light"] .bottomBanner {
    background: #5B78D7;
    background: linear-gradient(180deg, rgb(91 120 215 / 70%) 0%, rgb(255 255 255 / 41%) 82%, rgb(255 255 255) 100%);
    border-radius: 2rem;
    min-height: 600px;
    padding-top: 6rem;
}

html[data-theme="light"] .bottomBanner h4 {
    font-size: 30px;
    color: #000;
}

html[data-theme="light"] .bottomBanner h5 {
    font-size: 30px;
    font-weight: 600;
    color: #000;
}

html[data-theme="light"] .footerLink h5 {
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 2rem;
    padding-top: 10px;
}

html[data-theme="light"] .footerLink ul {
    list-style: none;
    padding-left: 0;
}

html[data-theme="light"] .footerLink ul a {
    text-decoration: none;
    color: #555;
    font-size: 14px;
    line-height: 35px;
}

html[data-theme="light"] .paddingRight3 {
    padding-right: 3rem;
}

html[data-theme="light"] .footerBg {
    background: #C6C6C6;
    background: linear-gradient(0deg, rgb(83 83 83 / 21%) 0%, rgb(249 249 249 / 5%) 89%);
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    margin-left: 2rem;
    margin-right: 2rem;
    padding-bottom: 24px;
}

html[data-theme="light"] .cookie {
    padding: 20px 30px;
    position: fixed;
    bottom: 0;
    z-index: 99;
    background: rgb(233 233 233 / 48%);
    font-size: 12px;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    width: 370px;
    float: right;
    right: 0;
    margin-right: 5px;
}

html[data-theme="light"] .btn-close-cookie-notification {
    padding: 1rem;
    font-size: 16px;
}

html[data-theme="light"] button.btn-close-cookie-notification {
    width: 100%;
    background: #5b78d7;
    border: none;
    color: #fff;
    border-radius: 3rem;
}

html[data-theme="light"] .row.footerLink img {
    filter: invert(68);
}

html[data-theme="light"] .mt45 img {
    filter: grayscale(1) !important;
}

html[data-theme="light"] .bottomPurple {
    background: #881EE5;
    background: linear-gradient(181deg, rgb(255 255 255) 80%, rgb(140 83 239 / 66%) 100%);
}

html[data-theme="light"] .widgetOneIcon.yellowWidget i {
    color: white;
}

/* File: light-chart3.css, light-chartgreen.css, light-chartpurple1.css, light-chart5.css */

/* Common Animation for Light Theme Charts */
@keyframes draw-chart-light {
    0% {
        stroke-dashoffset: 100;
    }

    28% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

/* Chart 3 (Orange) */
html[data-theme="light"] svg.chart3 {
    position: relative;
    bottom: 20px;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

html[data-theme="light"] .line2 {
    fill: none;
    stroke: #ffb24a;
    stroke-width: 3;
    stroke-linecap: round !important;
    filter: drop-shadow(0 0 6px rgba(255, 178, 74, .8)) !important;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: draw-chart-light 5s ease-out infinite;
}

html[data-theme="light"] .bulutWidgetTree {
    float: left;
    width: 215px;
    margin-left: 3rem;
    position: relative;
    right: 64px;
    background: #fff;
    height: 92px;
    border-radius: 1rem;
    top: 14px;
    background-image: url(../img/brown-chartbg.png);
    background-position: top right;
    background-repeat: no-repeat;
}

/* Chart 1 (Green) */
html[data-theme="light"] svg.chart1 {
    position: relative;
    bottom: 2rem;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
    --accent: #3ee57d;
    /* Scoped Variable */
}

html[data-theme="light"] .line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(62, 229, 125, .9));
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: draw-chart-light 5s ease-out infinite;
}

/* Chart 4 (Purple) */
html[data-theme="light"] svg.chart4 {
    position: relative;
    bottom: 37px;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
    --accent: #8416d3;
    /* Scoped Variable */
}

html[data-theme="light"] .line4 {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round !important;
    filter: drop-shadow(0 0 6px rgba(168, 61, 255, 0.85));
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: draw-chart-light 5s ease-out infinite;
}

html[data-theme="light"] .bulutWidgetFour {
    float: left;
    min-height: 100px;
    background: #fff;
    min-width: 215px;
    margin-left: 20px;
    border-radius: 1rem;
    margin-top: 2rem;
    background-image: url(../img/purple-chartBg.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 80%;
    height: 100px;
}

/* Chart 5 */
html[data-theme="light"] svg.chart5 {
    top: 19px;
    position: relative;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    margin-left: -.5rem;
    width: 105.5%;
    --accent: rgba(124, 58, 237, .85);
    /* Scoped Variable */
}

html[data-theme="light"] .line5 {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.2;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px rgba(124, 58, 237, .85));
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: draw-chart-light 5s ease-out infinite;
}

html[data-theme="light"] .bottomShade {
    fill: url(#shade);
    opacity: .55;
    transform: translateY(2px);
}

/* Gradient stops helper classes - generic but picked up by SVG context */
.fade-top {
    stop-color: var(--accent);
    stop-opacity: .55;
}

.fade-bottom {
    stop-color: var(--accent);
    stop-opacity: 0;
}

.g-top {
    stop-color: var(--accent);
    stop-opacity: .65;
}

.g-bottom {
    stop-color: #212121;
    stop-opacity: .0;
}

/* Missing Light Theme Styles for Information Page */

html[data-theme="light"] .nav-pills {
    background: #f8f9fa;
    /* Light background */
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 5rem;
}

html[data-theme="light"] .tab-content {
    background: #f8f9fa;
    /* Light gray to distinguish from white body */
    padding: 1.5rem;
    padding-left: 2rem;
    border-radius: 1rem;
    width: 100%;
    margin-bottom: 4rem;
}

html[data-theme="light"] .nav-pills .nav-link {
    color: #555;
    /* Dark text */
    text-align: left;
    padding: .5rem;
    border-radius: 3rem;
    border: 1px solid #dee2e6;
    /* Light border */
    margin-bottom: 10px;
    font-size: 14px;
    min-width: 260px;
    padding-left: 20px;
}

html[data-theme="light"] .nav-pills .nav-link.active,
html[data-theme="light"] .nav-pills .show>.nav-link {
    background: linear-gradient(90deg, #e3f2fd 20%, #ffffff 90%);
    color: #0d6efd;
    /* Bootstrap Primary Blue */
    font-weight: 600;
    border-color: #0d6efd;
}

html[data-theme="light"] .table {
    --bs-table-color: #555;
    --bs-table-bg: transparent;
}

html[data-theme="light"] table.rounded-corners {
    border-spacing: 0;
    border-collapse: separate;
    border-radius: 10px;
    border: 1px solid #dee2e6;
}

html[data-theme="light"] .d-flex.align-items-start button {
    text-align: left;
}

/* === DARK THEME DATA === */
/* File: dark.css (Scoped) */

html[data-theme="dark"] body {
    background-color: #2b2b2b;
    font-family: 'Poppins';
    -webkit-user-select: none;
    user-select: none;
    color: #bcbcbc;
}

/*html[data-theme="dark"] .dashed-grid-paper {
    --grid-size: 400px;
    --grid-strength: 1px;
    --grid-dash: 5px;
    --grid-gap: 15px;
    --grid-color: rgb(73 80 87 / 50%);
    --paper-color: #2b2b2b;
    background-color: var(--paper-color);
    background-size: var(--grid-gap) var(--grid-gap), var(--grid-size) var(--grid-size);
    background-image: linear-gradient(to bottom, transparent var(--grid-dash), var(--paper-color) var(--grid-dash)), linear-gradient(to right, var(--grid-color) var(--grid-strength), transparent var(--grid-strength)), linear-gradient(to right, transparent var(--grid-dash), var(--paper-color) var(--grid-dash)), linear-gradient(to bottom, var(--grid-color) var(--grid-strength), transparent var(--grid-strength));
}*/

html[data-theme="dark"] .dark-mode {
    background-color: #fff;
    color: white;
}

html[data-theme="dark"] .topBanner {
    margin: 1.5rem;
    background: #646ECD;
    background: linear-gradient(0deg, rgb(55 67 181 / 50%) 20%, rgba(43, 43, 43, 0.66) 90%);
    height: 902px;
    padding: 1rem;
    padding-left: 3rem;
    border-radius: 2rem;
    margin-bottom: 0;
    margin-left: 2rem;
    margin-right: 2rem;
}

html[data-theme="dark"] .topLogo {
    width: 245px;
}

html[data-theme="dark"] .topMenuBg {
    text-align: center;
}

html[data-theme="dark"] .topMenuBg .nav-link {
    color: #e0e0e0 !important;
    margin-left: 2.5rem;
    text-align: center;
}

html[data-theme="dark"] .topMenuBg .nav-link.active {
    color: #90a6ec !important;
    font-weight: bold;
}

html[data-theme="dark"] nav.navbar.navbar-expand-lg.topMenuBg {
    box-shadow: 3px 8px 15px 3px #495287;
    border-radius: 5rem;
    background: #252525;
    height: 55px;
}

html[data-theme="dark"] .bannerSlogan h1 {
    color: #90a6ec;
    font-size: 60px;
    text-align: center;
    margin-top: 57px;
    font-weight: bold;
}

html[data-theme="dark"] .bannerSlogan h2 {
    color: #90a6ec;
    font-size: 30px;
    text-align: center;
    font-weight: 700;
}

html[data-theme="dark"] .bannerSlogan p {
    color: #bcbcbc;
    font-size: 16px;
    text-align: center;
    padding-top: 21px;

}

html[data-theme="dark"] .bannerCircle {
    position: absolute;
    bottom: 0rem;
    left: 18rem;
    z-index: -1;
}

html[data-theme="dark"] .bannerCircle img {
    width: 77%;
}

html[data-theme="dark"] .topCircleButton {
    width: 35px;
    height: 35px;
    font-size: 18px;
    background: #252525;
    text-align: center;
    padding: 0;
    color: white;
    border-radius: 5rem;
    box-shadow: 2px 3px 8px 2px #495287;
    margin-top: 15px;
}

html[data-theme="dark"] .langGlobeButton {
    height: 35px;
    min-width: 78px;
    padding: 0 12px;
    margin-top: 15px;
    border-radius: 5rem;
    background: #252525 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 2px 3px 8px 2px #495287;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
}

html[data-theme="dark"] .langGlobeButton::after {
    margin-left: .25rem;
}

html[data-theme="dark"] .mL25 {
    margin-left: 25px;
}

html[data-theme="dark"] .text-right {
    text-align: right;
}

html[data-theme="dark"] .circleBtnRight {
    margin-left: -55px;
}

html[data-theme="dark"] .phoneBg {
    background: #8620E0;
    background: linear-gradient(34deg, rgb(134 32 224 / 1) 0%, rgb(51 51 51 / 68%) 32%, rgb(169 25 255) 100%);
    width: 391px;
    height: 568px;
    position: absolute;
    margin-left: 15rem;
    border-top-right-radius: 3rem;
    border-top-left-radius: 3rem;
    margin-top: 17px;
}

html[data-theme="dark"] .phoneCam img {
    position: absolute;
    z-index: 1;
    margin-top: 24px;
    margin-left: -49px;
    width: 95px;
}

html[data-theme="dark"] .btPhoneLogo img {
    width: 188px;
    position: absolute;
    z-index: 1;
    margin-top: 4.5rem;
    margin-left: -11rem;
}

html[data-theme="dark"] .btBalance {
    position: absolute;
    z-index: 2;
    margin-left: 16rem;
    background: #252525;
    border-radius: 1rem;
    width: 357px;
    margin-top: 8rem;
}

html[data-theme="dark"] .centerPhone {
    width: 870px;
}

html[data-theme="dark"] .centerDevice img {
    width: 430px;
}

html[data-theme="dark"] .totalBalance {
    color: white;
    text-align: left;
    padding-left: 1.5rem;
    padding-top: 1.5rem;
}

html[data-theme="dark"] .totalBalanceNumber {
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    padding-left: 1.5rem;
    letter-spacing: 2px;
    color: white;
    padding-top: 1rem;
}

html[data-theme="dark"] span.balancePlus {
    font-size: 60px;
    position: absolute;
    text-align: right;
    right: 21px;
    top: 20px;
    color: #7923c6;
}

html[data-theme="dark"] .balanceQuality {
    color: white;
    font-size: 12px;
    text-align: left;
    padding-left: 1.5rem;
    padding-top: .5rem;
}

html[data-theme="dark"] .comingAndGoingBox {
    background: #8620E0;
    background: linear-gradient(285deg, rgba(134, 32, 224, 1) 0%, rgb(193 131 247) 100%);
    margin: 1rem;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    border-radius: .7rem;
    color: #fff;
    margin-top: 12px;
    position: relative;
    float: left;
    width: 310px;
}

html[data-theme="dark"] .comingAndGoing {
    width: 153px;
    margin-left: 0rem;
    margin-top: 2px;
    float: left;
    position: relative;
}

html[data-theme="dark"] .comingAndGoing .gelen {
    font-size: 11px;
    padding-top: 8px;
}

html[data-theme="dark"] .comingAndGoing .adet {
    font-size: 11px;
    padding-bottom: 8px;
}

html[data-theme="dark"] .comingAndGoing .toplam {
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 13px;
}

html[data-theme="dark"] .hHr {
    float: left;
    position: relative;
    height: 60px;
    width: 2px;
    background: #FFF;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgb(255 255 255 / 1%) 100%);
    top: 7px;
}

html[data-theme="dark"] .widgetOne {
    position: absolute;
    width: 155px;
    height: 45px;
    background: #212529;
    margin-top: -32rem;
    border-radius: 4rem;
    color: #bcbcbc;
    margin-left: 22rem;
    box-shadow: 9px 5px 12px rgb(91 120 215 / 53%);
}

html[data-theme="dark"] .widgetOneIcon {
    width: 30px;
    height: 30px;
    background: #5b78d7;
    border-radius: 6rem;
    text-align: center;
    margin-top: 6px;
    margin-left: 9px;
    float: left;
    padding-top: 5px;
}

html[data-theme="dark"] .widgetOneText small {
    font-size: 10px;
    float: left;
}

html[data-theme="dark"] .widgetOneText h2 {
    font-size: 14px;
}

html[data-theme="dark"] .widgetOneText {
    margin-left: 10px;
    float: left;
    margin-top: 6px;
}

html[data-theme="dark"] .widgetTwo {
    position: absolute;
    width: 185px;
    height: 45px;
    background: #212529;
    margin-top: -24rem;
    border-radius: 4rem;
    color: #bcbcbc;
    margin-left: 27rem;
    box-shadow: 9px 5px 12px rgb(91 120 215 / 53%);
}

html[data-theme="dark"] .widgetOneIcon.widgetIconTwo {
    margin-left: -.7rem;
}

html[data-theme="dark"] .redWidget {
    background-color: #ff0000;
    color: white;
}

html[data-theme="dark"] .yellowWidget {
    background-color: #ff8a57;
    color: white;
}

html[data-theme="dark"] .greenWidget {
    background-color: #00b727;
    color: white;
}

html[data-theme="dark"] .blueWidget {
    background-color: #2e3191;
    color: white;
}

html[data-theme="dark"] .widgetOneText.widgetTwoText h2 {
    font-size: 16px;
    font-weight: bold;
    margin-left: 5px;
    padding-top: 6px;
}

html[data-theme="dark"] .widgetIconTree {
    width: 315px;
    background: #252525;
    min-height: 200px;
    padding: 1rem;
    border-radius: 1rem;
    position: absolute;
    margin-top: -31rem;
    margin-left: 64rem;
    z-index: 2;
    color: #bcbcbc;
    box-shadow: -8px 10px 19px 1px rgb(91 120 215 / 53%);
    background-image: url(../img/widgetTreeBg.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}

html[data-theme="dark"] .wIconTLeft {
    font-size: 14px;
    float: left;
}

html[data-theme="dark"] .wIconTRight {
    font-size: 10px;
    text-align: right;
    padding-right: 10px;
    padding-top: 5px;
}

html[data-theme="dark"] .widgetIconTreeText {
    float: left;
    width: 50%;
}

html[data-theme="dark"] .widgetIconTreeTitle {
    width: 100%;
    float: left;
}

html[data-theme="dark"] .widgetIconTreeCircle {
    margin-top: 10px;
    float: left;
    width: 100%;
}

html[data-theme="dark"] .widgetIconTreeCircle .widgetOneIcon {
    margin-left: 0;
    float: left;
}

html[data-theme="dark"] .widgetIconTDate {
    font-size: 10.5px;
    padding-top: 6px;
    margin-left: 5px;
    float: left;
}

html[data-theme="dark"] .widgetIconTDate h3 {
    font-size: 13px;
    font-weight: normal;
    color: #727272;
}

html[data-theme="dark"] .widgetIconTreeBalance {
    float: left;
    width: 50%;
}

html[data-theme="dark"] .widgetIconTreeBalance h3 {
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    padding-top: 13px;
    padding-right: 10px;
}

html[data-theme="dark"] .rotate315 {
    font-size: 16px;
    background: -webkit-linear-gradient(#5c9bb9, #8cb887);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

html[data-theme="dark"] .rotate130 {
    font-size: 16px;
    background: -webkit-linear-gradient(#ff4343, #ffcb3b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

html[data-theme="dark"] .widgetOneIcon.redWidget img {
    margin-bottom: 4px;
}

html[data-theme="dark"] .widgetOneIcon.greenWidget img {
    margin-top: -4px;
}

html[data-theme="dark"] .widgetFour {
    width: 395px;
    background: #252525;
    height: 205px;
    padding: 1rem;
    border-radius: 1rem;
    position: absolute;
    margin-top: -17rem;
    margin-left: 14rem;
    z-index: 2;
    color: #bcbcbc;
    box-shadow: 8px 5px 19px 1px rgb(91 120 215 / 53%);
    background-image: url(../img/widgetFourBg.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
}

html[data-theme="dark"] .widgetFourHead h3 {
    font-size: 14px;
    padding-top: 10px;
}

html[data-theme="dark"] .donutChart {
    height: 150px;
    float: left;
}

html[data-theme="dark"] .widgetFourchart {
    float: left;
}

html[data-theme="dark"] .widgetFourText {
    float: left;
    margin-top: 1rem;
}

html[data-theme="dark"] .wFourposBank h3 {
    font-size: 14px;
}

html[data-theme="dark"] .wFourposBank {
    width: 45px;
}

html[data-theme="dark"] .wFourposBankIcon {
    width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 15rem;
    margin-bottom: 9px;
}

html[data-theme="dark"] .wCommissionBank {
    float: left;
    margin-top: 1rem;
    width: 65px;
    margin-left: 13px;
}

html[data-theme="dark"] .wCommissionBankTitle h3 {
    font-size: 14px;
}

html[data-theme="dark"] .wCommissionBank h4 {
    font-size: 14px;
}

html[data-theme="dark"] .wCommissionBank h3 {
    font-size: 13px;
    line-height: 2;
}

html[data-theme="dark"] .wCommissionIslem h3 {
    font-size: 13px;
    line-height: 2;
    text-align: right;
}

html[data-theme="dark"] .widgetCircle {
    width: 55px;
    height: 55px;
    position: absolute;
    background: #252525;
    bottom: 9rem;
    z-index: 1;
    color: #9dbceb;
    text-align: center;
    float: right;
    right: 0;
    margin-right: 39rem;
    border-radius: 12rem;
    padding-top: 11px;
    font-size: 22px;
    box-shadow: -8px 10px 19px 1px rgb(91 120 215 / 53%);
}

html[data-theme="dark"] .cashFlowReport {
    position: absolute;
    z-index: 2;
    margin-left: 16rem;
    background: #252525;
    border-radius: 1rem;
    width: 357px;
    margin-top: 23rem;
    height: 217px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

html[data-theme="dark"] .cashFlowReportTitle h3 {
    color: white;
    text-align: left;
    padding-left: 1.5rem;
    padding-top: 1.5rem;
    font-size: 15px;
}

#chart2 {
    width: 100%;
}

html[data-theme="dark"] .chartWrap {
    max-width: 378px;
}

html[data-theme="dark"] .cashFlowReportTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

html[data-theme="dark"] .cashTabs {
    display: inline-flex;
    background: #2b2b2b;
    border-radius: 999px;
    font-size: 12px;
    margin-right: 25px;
    margin-top: 15px;
}

html[data-theme="dark"] .cashTabs button {
    border: 0;
    background: transparent;
    color: #d8d1e6;
    border-radius: 5px;
    font-weight: 400;
    cursor: pointer;
}

html[data-theme="dark"] .cashTabs button.active {
    background: #7e25ba;
    color: #fff;
}

html[data-theme="dark"] .hizmetTitle {
    text-align: center;
    font-size: 28px;
    color: #bcbcbc;
}

html[data-theme="dark"] .mt60 {
    margin-top: 60px;
}

html[data-theme="dark"] .brandLogo {
    text-align: center;
}

html[data-theme="dark"] h3.blueText {
    color: #90a6ec;
    font-size: 50px;
    font-weight: 500;
}

html[data-theme="dark"] h3.baslik {
    color: #bcbcbc;
    font-size: 50px;
    font-weight: 500;
}

html[data-theme="dark"] .mt120 {
    margin-top: 120px;
}

html[data-theme="dark"] .mt30 {
    margin-top: 30px;
}

html[data-theme="dark"] .mt45 {
    margin-top: 45px;
}

html[data-theme="dark"] .f-size12 {
    font-size: 12px;
    color: #bcbcbc;
}

html[data-theme="dark"] .blue-btn:hover {
    background: #5b78d7;
    color: white;
    padding: .5rem;
    border-radius: 3rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

html[data-theme="dark"] .blue-btn {
    border: 1px solid #5b78d7;
    color: #5b78d7;
    padding: .5rem;
    border-radius: 3rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

html[data-theme="dark"] .text-justify {
    text-align: justify;
}

html[data-theme="dark"] .twoCircleBlur {
    background-image: url(../img/right-bg-blur.png);
    background-repeat: no-repeat;
    background-position: top right;
    min-height: 800px;
}

html[data-theme="dark"] .twoCircleBlurLeft {
    background-image: url(../img/right-bg-left.png);
    background-repeat: no-repeat;
    background-position: top left;
    min-height: 800px;
}

html[data-theme="dark"] .BtfeatureBox {
    min-height: 240px;
    background: rgb(37 37 37 / 50%);
    border-radius: 1.5rem;
    padding: 2rem;
    padding-top: 3rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    padding-left: 3rem;
    padding-bottom: 4rem;
}

html[data-theme="dark"] .BtfeatureCircleIcon {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    text-align: center;
    background: #7a04b7;
    border-radius: 3rem;
    color: white;
    padding: 0.5rem;
    float: left;
}

html[data-theme="dark"] .BtfeatureBoxTitle {
    float: left;
}

html[data-theme="dark"] .BtfeatureBoxTitle h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    float: left;
    padding-left: 19px;
    width: 90%;
}

html[data-theme="dark"] .BtfeatureBoxTitle p {
    float: left;
    margin-left: 66px;
    margin-top: 10px;
    font-size: 15px;
}

html[data-theme="dark"] span.blueText {
    color: #90a6ec;
}

html[data-theme="dark"] .f-size22 {
    font-size: 22px;
    color: #e0e0e0;
    font-weight: 500;
}

html[data-theme="dark"] .font-w-size13 {
    font-size: 15px;
    color: #bcbcbc;
    line-height: 2;
    text-align: justify;
    margin-bottom: 0;
}

html[data-theme="dark"] .mt20 {
    margin-top: 20px;
}

html[data-theme="dark"] .pLeftRight {
    padding: 0rem 2rem 2rem 0rem;
}

html[data-theme="dark"] .padding4rem {
    padding: 4rem;
}

html[data-theme="dark"] .bulutWidgetOne {
    float: left;
    background: #212121;
    min-width: 215px;
    margin-left: 20px;
    border-radius: 1rem;
    margin-top: 2.5rem;
    background-image: url(../img/widgetGreenBg.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 80%;
    height: 95px;
}

html[data-theme="dark"] .floatLeft {
    float: left;
}

html[data-theme="dark"] .purpleBox {
    background: #7118a1;
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 16px;
    color: white;
    margin-top: 14px;
    margin-left: 15px;
    border-radius: 5px;
    padding-top: 3px;
    float: left;
}

html[data-theme="dark"] .bulutWidgetOneAmount h3 {
    font-size: 15px;
    text-align: right;
}

html[data-theme="dark"] .bulutWidgetOneAmount {
    float: right;
    text-align: right;
    margin-right: 16px;
    margin-top: 8px;
}

html[data-theme="dark"] .bulutWidgetOneAmount small {
    font-size: 8px;
}

html[data-theme="dark"] svg.chart {
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
    position: relative;
    bottom: 37px;
}

html[data-theme="dark"] .stat-card {
    height: 100px;
}

html[data-theme="dark"] .smallBanner {
    padding: .5rem;
    border: .5px dashed #692d89;
    border-radius: 2rem;
}

html[data-theme="dark"] .bulutWidgetTwo {
    float: left;
    background: #212121;
    height: 310px;
    width: 308px;
    margin-left: -2px;
    border-radius: 1rem;
    padding: .5rem;
    position: relative;
}

html[data-theme="dark"] .borderDahsed {
    float: left;
    border: .5px dashed #4c0075;
    border-radius: 1rem;
    padding: 1rem;
    height: 345px;
    width: 343px;
    position: absolute;
    margin-left: 210px;
    margin-top: 155px;
}

html[data-theme="dark"] .paddingLeft1 {
    padding-left: 1rem;
}

html[data-theme="dark"] .minH900 {
    min-height: 1055px;
}

html[data-theme="dark"] .circleHover {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 2rem;
    border: 2px solid #8619e4;
    margin-top: 5rem;
    position: absolute;
    margin-left: -2px;
    z-index: 1;
}

html[data-theme="dark"] .hoverChartBox {
    position: absolute;
    width: 205px;
    background: #881EE5;
    background: linear-gradient(90deg, rgba(136, 30, 229, 1) 0%, rgba(156, 107, 253, 1) 100%);
    border-radius: .6rem;
    margin-top: 51px;
    margin-left: -14rem;
    padding: .8rem;
}

html[data-theme="dark"] .hoverBoxBankIcon img {
    width: 15px;
    padding-top: 8px;
}

html[data-theme="dark"] .hoverBoxBankIcon {
    float: left;
}

html[data-theme="dark"] .hoverBoxTitle h4 {
    font-size: 14px;
    font-weight: 600;
    float: right;
    letter-spacing: 2px;
}

html[data-theme="dark"] .hoverBoxTitle {
    color: #fff;
}

html[data-theme="dark"] .hoverBoxTitle i {
    color: #fff;
}

html[data-theme="dark"] .hoverBoxTitle small {
    float: right;
    margin-left: 14px;
    font-size: 11px;
    padding-bottom: 3px;
    padding-top: 3px;
}

html[data-theme="dark"] .hoverBoxBankIcon {
    float: left;
    width: 45px;
    height: 45px;
    text-align: center;
    border-radius: .5rem;
    border: 1px dashed #fff;
    padding: 3px;
}

html[data-theme="dark"] .hoverBoxTitle i {
    color: #fff;
    background: -webkit-linear-gradient(#ffffff, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html[data-theme="dark"] .triangle {
    position: absolute;
    width: 10px;
    height: 10px;
    rotate: 45deg;
    background: #9c6afd;
    margin-top: 5rem;
    margin-left: -25px;
}

html[data-theme="dark"] .positionAb {
    position: absolute;
}

html[data-theme="dark"] .bottomBanner {
    background: #5B78D7;
    background: linear-gradient(180deg, rgb(91 120 215 / 70%) 0%, rgb(43 43 43 / 41%) 82%, rgb(43 43 43) 100%);
    border-radius: 2rem;
    min-height: 600px;
    padding-top: 6rem;
}

html[data-theme="dark"] .bottomBanner h4 {
    font-size: 30px;
}

html[data-theme="dark"] .bottomBanner h5 {
    font-size: 30px;
    font-weight: 600;
}

html[data-theme="dark"] .footerLink h5 {
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 2rem;
    padding-top: 10px;
}

html[data-theme="dark"] .footerLink ul {
    list-style: none;
    padding-left: 0;
}

html[data-theme="dark"] .footerLink ul a {
    text-decoration: none;
    color: #bcbcbc;
    font-size: 14px;
    line-height: 35px;
}

html[data-theme="dark"] .paddingRight3 {
    padding-right: 3rem;
}

html[data-theme="dark"] .footerBg {
    background: #C6C6C6;
    background: linear-gradient(0deg, rgb(198 198 198 / 21%) 0%, rgb(43 43 43 / 52%) 89%);
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    margin-left: 2rem;
    margin-right: 2rem;
    padding-bottom: 24px;
}

html[data-theme="dark"] .cookie {
    padding: 20px 30px;
    position: fixed;
    bottom: 0;
    z-index: 99;
    background: rgb(33 33 33 / 48%);
    font-size: 12px;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    width: 370px;
    float: right;
    right: 0;
    margin-right: 5px;
}

html[data-theme="dark"] .btn-close-cookie-notification {
    padding: 1rem;
    font-size: 16px;
}

html[data-theme="dark"] button.btn-close-cookie-notification {
    width: 100%;
    background: #313770;
    border: none;
    color: #bcbcbc;
    border-radius: 3rem;
}

html[data-theme="dark"] button.navbar-toggler {
    background: #303670;
    padding: .5rem;
    margin-top: 4px;
    border-color: #313770;
}

html[data-theme="dark"] button.navbar-toggler i {
    color: white;
}

html[data-theme="dark"] .bgDarkDropdown {
    background: linear-gradient(285deg, rgb(0 0 0 / 30%) 0%, #2121216b 100%);
    border: none;
}

html[data-theme="dark"] .bgDarkDropdown a {
    color: #bcbcbc;
}

html[data-theme="dark"] .bgDarkDropdown.dropdown-item.active,
html[data-theme="dark"] .dropdown-item:active {
    color: #bcbcbc;
    text-decoration: none;
    background-color: rgb(198 198 198 / 21%);
}

html[data-theme="dark"] .bgDarkDropdown.dropdown-item.hover,
html[data-theme="dark"] .dropdown-item:hover {
    color: #e0e0e0;
    text-decoration: none;
    background-color: rgb(198 198 198 / 21%);
}

html[data-theme="dark"] .p-bottom15 {
    padding-bottom: 15px;
}

html[data-theme="dark"] .nav-pills {
    background: #212121;
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 5rem;
}

html[data-theme="dark"] .tab-content {
    background: #212121;
    padding: 1.5rem;
    padding-left: 2rem;
    border-radius: 1rem;
    width: 100%;
    margin-bottom: 4rem;
}

html[data-theme="dark"] .table> :not(caption)>*>* {
    background-color: rgb(37 37 37 / 50%);
    color: #bcbcbc;
    border: 1px solid rgb(198 198 198 / 10%);
}

html[data-theme="dark"] table.rounded-corners {
    border-spacing: 0;
    border-collapse: separate;
    border-radius: 10px;
    border: 1px solid black;
}

html[data-theme="dark"] .d-flex.align-items-start button {
    text-align: left;
    padding: .5rem;
    border-radius: 3rem;
    border-color: rgb(55 67 181 / 50%);
    margin-bottom: 10px;
    color: #bcbcbc;
    font-size: 14px;
    min-width: 260px;
    padding-left: 20px;
}

html[data-theme="dark"] .nav-pills .nav-link.active,
html[data-theme="dark"] .nav-pills .show>.nav-link {
    background: linear-gradient(-90deg, rgb(55 67 181 / 50%) 20%, rgba(43, 43, 43, 0.66) 90%);
}

html[data-theme="dark"] .d-flex.align-items-start button {
    text-align: left;
}

/* File: chart3.css, chartgreen.css, chartpurple1.css, chart5.css */

/* Common Animation for Dark Theme Charts */
@keyframes draw-chart-dark {
    0% {
        stroke-dashoffset: 100;
    }

    28% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

html[data-theme="dark"] svg.chart3 {
    position: relative;
    bottom: 20px;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

html[data-theme="dark"] .line2 {
    fill: none;
    stroke: #ffb24a;
    stroke-width: 3;
    stroke-linecap: round !important;
    filter: drop-shadow(0 0 6px rgba(255, 178, 74, .8)) !important;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: draw-chart-dark 5s ease-out infinite;
}

html[data-theme="dark"] .bulutWidgetTree {
    float: left;
    width: 215px;
    margin-left: 3rem;
    position: relative;
    right: 64px;
    background: #252525;
    height: 92px;
    border-radius: 1rem;
    top: 14px;
    background-image: url(../img/brown-chartbg.png);
    background-position: top right;
    background-repeat: no-repeat;
}


/* File: chartgreen.css */
/* Chart 1 (Green) - Dark Mode */
html[data-theme="dark"] svg.chart1 {
    position: relative;
    bottom: 2rem;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
    --accent: #3ee57d;
    /* Scoped Variable */
}

html[data-theme="dark"] .line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(62, 229, 125, .9));
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: draw-chart-dark 5s ease-out infinite;
}


/* File: chartpurple1.css */
/* Chart 4 (Purple) - Dark Mode */
html[data-theme="dark"] svg.chart4 {
    position: relative;
    bottom: 33px;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
    --accent: rgba(124, 58, 237, .85);
    /* Scoped Variable */
}

html[data-theme="dark"] .line4 {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round !important;
    filter: drop-shadow(0 0 6px rgba(124, 58, 237, .85));
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: draw-chart-dark 5s ease-out infinite;
}

.fade-top {
    stop-color: var(--accent);
    /* Picks up from parent SVG scope */
    stop-opacity: .55;
}

.fade-bottom {
    stop-color: var(--accent);
    stop-opacity: 0;
}

html[data-theme="dark"] .bulutWidgetFour {
    float: left;
    min-height: 100px;
    background: #212121;
    min-width: 215px;
    margin-left: 20px;
    border-radius: 1rem;
    margin-top: 2rem;
    background-image: url(../img/purple-chartBg.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 80%;
    height: 100px;
}

/* File: chart5.css */
html[data-theme="dark"] svg.chart5 {
    top: 19px;
    position: relative;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    margin-left: -.5rem;
    width: 105.5%;
    --accent: rgba(124, 58, 237, .85);
    /* Scoped Variable */
}

.g-top {
    stop-color: var(--accent);
    stop-opacity: .65;
}

.g-bottom {
    stop-color: #212121;
    stop-opacity: .0;
}

html[data-theme="dark"] .line5 {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.2;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px rgba(124, 58, 237, .85));
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: draw-chart-dark 5s ease-out infinite;
}

html[data-theme="dark"] .bottomShade {
    fill: url(#shade);
    opacity: .55;
    transform: translateY(2px);
}

html[data-theme="dark"] .mobilTemaButton {
    width: 40px !important;
    background: none !important;
    text-align: center;
    padding: 0;
    color: white;
    border-radius: 5rem;
    box-shadow: none !important;
    color: #e0e0e0;
    font-size: 25px;
    margin-top: 1rem;
    padding-left: 20px;
    padding-right: 20px;
}
html[data-theme="light"] .mobilTemaButton {
    width: 40px !important;
    background: none !important;
    text-align: center;
    padding: 0;
    color: white;
    border-radius: 5rem;
    box-shadow: none !important;
    color: #414141;
    font-size: 25px;
    margin-top: 1rem;
    padding-left: 20px;
    padding-right: 20px;
}
.h300{
    min-height:320px;
}
.h65{
    min-height:65px;
}
html[data-theme="dark"] .st0 {
    fill: #bcbcbc;
}

html[data-theme="light"] .st0 {
    fill: #555;
}


.ptop15{
    padding-top:15px;
}
.col-md-2.text-right.circleBtnRight.d-none {
    margin-top: -5px;
}

button.btn-close-cookie-notification.stroke {
    background: none !important;
    border: 1px solid #313770 !important;
    margin-top: 10px;
}