.border-primary {
    border-color: #545cd8
}

.border-secondary {
    border-color: #6c757d
}

.border-success {
    border-color: #3ac47d
}

.border-info {
    border-color: #30b1ff
}

.border-warning {
    border-color: #f7b924
}

.border-danger {
    border-color: #d92550
}

.border-light {
    border-color: #eee
}

.border-dark {
    border-color: #343a40
}

.border-focus {
    border-color: #444054
}

.border-alternate {
    border-color: #83588a
}

:root {
    --bs-blue: #86c6fb;
    --bs-indigo: #444054;
    --bs-purple: #83588a;
    --bs-pink: #f65ca2;
    --bs-red: #d92550;
    --bs-orange: #fd7e14;
    --bs-yellow: #f7b924;
    --bs-green: #3ac47d;
    --bs-teal: #16e0bd;
    --bs-cyan: #30b1ff;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-primary: #545cd8;
    --bs-secondary: #6c757d;
    --bs-success: #3ac47d;
    --bs-info: #30b1ff;
    --bs-warning: #f7b924;
    --bs-danger: #d92550;
    --bs-light: #eee;
    --bs-dark: #343a40;
    --bs-focus: #444054;
    --bs-alternate: #83588a;
    --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,0))
}

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

@media(prefers-reduced-motion:no-preference) {
    :root {
        scroll-behavior: smooth
    }
}

body {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    background-color: #fff;
    color: #495057;
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    font-family: var(--bs-font-sans-serif);
    font-size: .88rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    min-height:100vh;
}
.w-100{
    width:100%;
}
.mw-100{
    max-width:100%;
}
.h-100 {
    height: 100%;
}
.fw-400{
    font-weight:400;
}

.btn, a, button {
    outline: none !important;
    text-decoration:none;
}

hr:not([size]) {
    height: 1px
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: .5rem;
    margin-top: 0
}

.h1, h1 {
    font-size: calc(1.345rem + 1.14vw)
}

@media(min-width: 1200px) {
    .h1, h1 {
        font-size: 2.2rem
    }
}

.h2, h2 {
    font-size: calc(1.301rem + .612vw)
}

@media(min-width: 1200px) {
    .h2, h2 {
        font-size: 1.76rem
    }
}

.h3, h3 {
    font-size: calc(1.279rem + .348vw)
}

@media(min-width: 1200px) {
    .h3, h3 {
        font-size: 1.54rem
    }
}

.h4, h4 {
    font-size: calc(1.257rem + .084vw)
}

@media(min-width: 1200px) {
    .h4, h4 {
        font-size: 1.32rem
    }
}

.h5, h5 {
    font-size: 1.1rem
}

.h6, h6 {
    font-size: .88rem
}

p {
    margin-bottom: 1rem;
    margin-top: 0
}

.fs-10{
    font-size:10px;
}
.fs-11 {
    font-size: 11px;
}
.fs-12 {
    font-size: 12px;
}
.fs-13 {
    font-size: 13px;
}
.fs-14 {
    font-size: 14px;
}
.fs-15 {
    font-size: 15px;
}
.fs-16 {
    font-size: 16px;
}
.fs-17 {
    font-size: 17px;
}

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

.fs-19 {
    font-size: 19px;
}

.fs-20 {
    font-size: 20px;
}

.fs-21 {
    font-size: 21px;
}

.fs-22 {
    font-size: 22px;
}

.fs-23 {
    font-size: 23px;
}
.fs-24 {
    font-size: 24px;
}
/*--Background */
.bg-plum-plate {
    background-image: linear-gradient(135deg,#667eea,#764ba2) !important;
}

.bg-animation {
    -webkit-animation: bg-pan-left 8s both;
    animation: bg-pan-left 8s both;
}
.bg-light {
    color: #212529;
}

.negativeAmount {
    color: Green;
}

.positiveAmount {
    color: IndianRed;
}


/*--Login*/
.app-logo-inverse {
    height: 23px;
    width: 97px;
    background: url(../img/logo3.png);
}

.login-box .h4{
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.login-box .h5 div{
    opacity: .6;
}

.modal-dialog {
    border-radius: 0.25rem;
    box-shadow: 0 0.76875rem 2.4875rem rgba(52,58,64,.3), 0 1.3375rem 1.70625rem rgba(52,58,64,.3), 0 0.55rem 0.53125rem rgba(0,0,0,.05), 0 0.225rem 0.4375rem rgba(52,58,64,.3);
}

.modal-content {
    background-clip: padding-box;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 0.3rem;
    display: flex;
    flex-direction: column;
    outline: 0;
    pointer-events: auto;
    position: relative;
    width: 100%;
}

.modal-body {
    flex: 1 1 auto;
    padding: 1rem;
    position: relative;
}
.modal-footer {
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

.modal-footer, .modal-header {
    background: #f8f9fa;
}

.modal-footer {
    align-items: center;
    border-bottom-left-radius: calc(0.3rem - 1px);
    border-bottom-right-radius: calc(0.3rem - 1px);
    border-top: 1px solid #dee2e6;
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 0.75rem;
}

.login-box .h5 span{
    font-size: 1.1rem;
}
.divider {
    background: #e9ecef;
    height: 1px;
    margin-bottom: 1rem;
    margin-top: 1rem;
    overflow: hidden;
}


/*--MainDashboard*/
.header {
    background: #fafbfc;
    position: relative;
    top: 0;
    width: 100%;
    align-content: center;
    align-items: center;
    display: flex;
    height: 60px;
    transition: all .2s;
    z-index: 10;
}

.header-shadow {
    box-shadow: 0 0.46875rem 2.1875rem rgba(8,10,37,.03), 0 0.9375rem 1.40625rem rgba(8,10,37,.03), 0 0.25rem 0.53125rem rgba(8,10,37,.05), 0 0.125rem 0.1875rem rgba(8,10,37,.03);
}
.header__logo {
    background: rgba(250,251,252,.1);
    padding: 0 1.5rem;
    height: 60px;
    width: 280px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: width .2s;
    -o-transition: width .2s;
    transition: width .2s;
}
.header .header__content {
    align-content: center;
    align-items: center;
    display: flex;
    flex: 1 1;
    height: 60px;
    padding: 0 1.5rem;
}

.header .header__logo .logo-src {
    height: auto;
    width: 120px;
    border:0px;
}

.ml-auto, .mx-auto {
    margin-left: auto !important;
}

.Burger {
    padding: 15px;
    display: inline-block;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
    outline: 0;
}

.header .header__content {
    align-content: center;
    align-items: center;
    display: flex;
    flex: 1 1;
    height: 60px;
    padding: 0 1.5rem;
}

.header-left {
    align-items: center;
    display: flex;
}

.header-right {
    align-items: center;
    display: flex;
    margin-left: auto;
}
.page-title {
    padding: 20px 45px;
    margin: -30px -30px 20px;
    position: relative;
    background: rgba(255,255,255,.55);
}

.page-title .page-title-wrapper {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}
.page-title .page-title-heading {
    font-size: 1.25rem;
    font-weight: 400;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-align: center;
    align-items: center;
}

.page-title .page-title-icon {
    font-size: 2rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    text-align: center;
    padding: 0.8333333333rem;
    margin: 0 30px 0 0;
    background: #fff;
    -webkit-box-shadow: 0 0.46875rem 2.1875rem rgba(0,0,0,.03), 0 0.9375rem 1.40625rem rgba(0,0,0,.03), 0 0.25rem 0.53125rem rgba(0,0,0,.05), 0 0.125rem 0.1875rem rgba(0,0,0,.03);
    box-shadow: 0 0.46875rem 2.1875rem rgba(0,0,0,.03), 0 0.9375rem 1.40625rem rgba(0,0,0,.03), 0 0.25rem 0.53125rem rgba(0,0,0,.05), 0 0.125rem 0.1875rem rgba(0,0,0,.03);
    border-radius: 0.25rem;
    width: 60px;
    height: 60px;
}
.page-title .page-title-subheading {
    padding: 3px 0 0;
    font-size: .88rem;
    opacity: .6;
}

.page-title .page-title-heading, .page-title .page-title-subheading {
    margin: 0;
    padding: 0;
}

.bg-mean-fruit {
    color: #4e4376;
}

/*--Sidebar*/
.main {
    -ms-flex: 1 1;
    flex: 1 1;
    display: -ms-flexbox;
    display: flex;
    z-index: 8;
    position: relative;
    height:100%;
}
.main__outer {
    padding-top: 0px;
}
.sidebar {
    width: 280px;
    display: flex;
    overflow: hidden;
    min-width: 280px;
    position: relative;
    flex: 0 0 280px;
    /*padding-top: 60px;*/
    transition: all .2s;
    background: #fff;
    z-index: 13;
    height: 100%;
}
.sidebar__inner {
    padding: 2px 1.5rem 1.5rem;
    z-index: 11;
    color:white;
}
.vertical-nav-menu {
    position: relative;
}
.vertical-nav-menu .metismenu-container {
    list-style: none;
}
.sidebar__heading {
    text-transform: uppercase;
    font-size: .8rem;
    margin: 0.75rem 0;
    font-weight: 700;
    color: #033c73;
    white-space: nowrap;
    position: relative;
    color: rgba(255,255,255,.6);
}
.vertical-nav-menu .metismenu-container, .vertical-nav-menu .metismenu-item {
    margin: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0;
    position: relative;
    border-radius: 5px;
}
.sidebar .sidebar-bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: .05;
    background-size: cover;
    z-index: 10;
}
.sidebar.sidebar-text-light .metismenu .metismenu-container .metismenu-link.active {
    background: rgba(255,255,255,.1);
}
.vertical-nav-menu .metismenu-container .metismenu-link {
    -webkit-transition: height 300ms,color 300ms,background-color 300ms,-webkit-transform .2s;
    transition: height 300ms,color 300ms,background-color 300ms,-webkit-transform .2s;
    -o-transition: transform .2s,height 300ms,color 300ms,background-color 300ms;
    transition: transform .2s,height 300ms,color 300ms,background-color 300ms;
    transition: transform .2s,height 300ms,color 300ms,background-color 300ms,-webkit-transform .2s;
    display: block;
    line-height: 2.5rem;
    height: 2.5rem;
    padding: 0 1.5rem 0 45px;
    position: relative;
    border-radius: 0.25rem;
    color: rgba(255,255,255,.6);
    white-space: nowrap;
}
.app-sidebar.sidebar-text-light .metismenu .metismenu-container i.metismenu-state-icon, .app-sidebar.sidebar-text-light .metismenu .metismenu-container i.metismenu-icon {
    opacity: .5;
}

.vertical-nav-menu .metismenu-container i.metismenu-state-icon, .vertical-nav-menu .metismenu-container i.metismenu-icon {
    text-align: center;
    width: 34px;
    height: 34px;
    line-height: 34px;
    position: absolute;
    left: 5px;
    top: 50%;
    margin-top: -17px;
    font-size: 1.5rem;
    opacity: .3;
    -webkit-transition: color 300ms;
    -o-transition: color 300ms;
    transition: color 300ms;
}
.sidebar.sidebar-text-light .metismenu .metismenu-container .metismenu-link {
    color: rgba(255,255,255,.7);
}

.opacity-06 {
    opacity: .06 !important;
}
.main .main__inner {
    padding: 30px 30px 0;
    flex: 1;
}

.metismenu-item:hover {
    background: #6c757d;
    transition: transform .2s,height 300ms,color 300ms,background-color 300ms,-webkit-transform .2s;
    
}

.closed-sidebar .sidebar {
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    width: 0px;
    min-width: 0px;
    -ms-flex: 0 0 0px;
    flex: 0 0 0px;
    z-index: 13;
}


/*--Main*/
.fixed-sidebar .main .main__outer {
    z-index: 9;
    padding-left: 280px;
}
.dxgvControl_MaterialCompact .dxgvTable_MaterialCompact .dxgvSelectedRow_MaterialCompact, .dxgvControl_MaterialCompact .dxgvTable_MaterialCompact .dxgvSelectedRow_MaterialCompact.dxgvDataRowHover_MaterialCompact {
    background-color: #243b55;
    color: white;
}
.card.mb-3 {
    margin-bottom: 30px !important;
}

.widget-chart {
    text-align: center;
    padding: 1rem;
    position: relative;
}

.icon-wrapper[class*=border-] {
    border-width: 1px;
    border-style: solid;
}

.icon-wrapper {
    width: 54px;
    height: 54px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.icon-wrapper {
    display: flex;
    align-content: center;
    align-items: center;
}

.icon-wrapper .icon-wrapper-bg.bg-light {
    opacity: .08;
}

.icon-wrapper .icon-wrapper-bg {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 3;
    opacity: .2;
}
.icon-wrapper i {
    margin: 0 auto;
    font-size: 1.7rem;
    position: relative;
    z-index: 5;
}

.icon-gradient {
    color: #a18cd1;
}


.widget-content {
    padding: 0.7rem;
    flex-direction: row;
    align-items: center;
    border: 1px solid rgb(201, 201, 201);
}

.widget-content .widget-content-wrapper {
    display: flex;
    flex: 1;
    position: relative;
    align-items: center;
}
.widget-content .widget-content-right {
    margin-left: auto;
}

.mr-3, .mx-3 {
    margin-right: 1rem !important;
}

.ml-0, .mx-0 {
    margin-left: 0 !important;
}
.widget-content .widget-numbers {
    font-weight: 700;
    font-size: 1.8rem;
    display: block;
}

.widget-content .widget-content-left .widget-heading {
    opacity: .8;
    font-weight: 700;
}

.widget-content .widget-content-left .widget-subheading {
    opacity: .5;
}


.dxgvControl_Moderno,
.dxgvDisabled_Moderno {
    font: 12px "Segoe UI", "Helvetica Neue", "Droid Sans", Arial, Tahoma, Geneva, Sans-serif;
}

/* Footer */
.main .main__outer {
    -ms-flex: 1 1;
    flex: 1 1;
    -ms-flex-direction: column;
    flex-direction: column;
    display: -ms-flexbox;
    display: flex;
    z-index: 12;
}
.footer {
    margin-top:50px;
    height: 60px;
}
.footer .footer__inner{
    background: #fafbfc;
    padding: 0 1.5rem 0 0.75rem;
    height: 60px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-align: center;
    align-items: center;
}

/*--Responsive*/
@media (min-width: 576px) {
    .modal-dialog {
        margin: 1.75rem auto;
        max-width: 500px;
    }
}
@media (max-width: 576px) {

    .main .main__inner {
        padding: 15px 5px 0 5px;
        flex: 1;
    }
    .page-title {
        padding: 30px;
        margin: -15px -5px 0 -5px;
        position: relative;
        background: rgba(255,255,255,.55);
    }
}
@media (max-width: 991.98px){
    .sidebar {
        flex: 0 0 280px !important;
        width: 280px !important;
        transform: translateX(-280px);
        position: fixed;
    }
    .mobil-sidebar-open .sidebar {
        transform:inherit;
    }
}
@media (max-width: 767.98px){
   /* .page-title .page-title-heading, .page-title .page-title-wrapper {
        display: block;
        margin: 0 auto;
    }*/
    .page-title .page-title-actions {
        margin: 0.75rem auto 0;
    }
    .page-title {
        text-align: center;
        justify-items:center;
    }
}
/*--Text Style*/

.text-primary {
    color: #545cd8 !important
}

.text-secondary {
    color: #6c757d !important
}

.text-success {
    color: #3ac47d !important
}

.text-info {
    color: #30b1ff !important
}

.text-warning {
    color: #f7b924 !important
}

.text-danger {
    color: #d92550 !important
}

.text-light {
    color: #eee !important
}

.text-dark {
    color: #343a40 !important
}

.text-focus {
    color: #444054 !important
}

.text-alternate {
    color: #83588a !important
}

.text-white {
    color: #fff !important
}

.text-body {
    color: #495057 !important
}

.text-muted {
    color: #6c757d !important
}

.text-black-50 {
    color: rgba(0,0,0,.5) !important
}

.text-white-50 {
    color: hsla(0,0%,100%,.5) !important
}

.text-reset {
    color: inherit !important
}

.bg-primary {
    background-color: #545cd8 !important
}

.bg-secondary {
    background-color: #6c757d !important
}

.bg-success {
    background-color: #3ac47d !important
}

.bg-info {
    background-color: #30b1ff !important
}

.bg-warning {
    background-color: #f7b924 !important
}

.bg-danger {
    background-color: #d92550 !important
}

.bg-light {
    background-color: #eee !important
}

.bg-dark {
    background-color: #343a40 !important
}

.bg-focus {
    background-color: #444054 !important
}

.bg-alternate {
    background-color: #83588a !important
}

.bg-body, .bg-white {
    background-color: #fff !important
}

.bg-transparent {
    background-color: initial !important
}

.bg-gradient {
    background-image: linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,0)) !important;
    background-image: var(--bs-gradient) !important
}



/*--Btn-Style*/

.btn-outline-2x {
    border-width: 2px
}

.btn-group .btn {
    font-size: .8rem;
    font-weight: 500
}

.btn-group .btn-outline-2x + .btn-outline-2x {
    margin-left: -2px
}

.btn-group .btn-square {
    border-radius: 0
}

.btn {
    font-size: .8rem;
    font-weight: 500
}

    .btn.btn-pill, .btn.btn-pill.btn-wide {
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px
    }

.btn-dashed {
    border-style: dashed
}

.btn-icon {
    vertical-align: bottom
}

    .btn-icon.btn-icon-right .btn-icon-wrapper {
        margin-left: .5rem;
        margin-right: 0
    }

    .btn-icon .btn-icon-wrapper {
        display: inline-block;
        font-size: 17px;
        margin-left: 0;
        margin-right: .5rem;
        margin-top: 0;
        transition: color .1s;
        vertical-align: middle
    }

    .btn-icon.btn-link {
        text-decoration: none
    }

    .btn-group-lg > .btn-icon.btn:not(.btn-block) .btn-icon-wrapper, .btn-icon.btn-lg:not(.btn-block) .btn-icon-wrapper {
        font-size: 25px
    }

    .btn-group-sm > .btn-icon.btn:not(.btn-block) .btn-icon-wrapper, .btn-icon.btn-sm:not(.btn-block) .btn-icon-wrapper {
        font-size: 16px
    }

.btn-icon-only .btn-icon-wrapper {
    margin-left: 0;
    margin-right: 0
}

.btn-hover-shine {
    position: relative
}

    .btn-hover-shine:after {
        background-color: hsla(0,0%,100%,.4);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        transition: none;
        width: 0
    }

    .btn-hover-shine:hover:after {
        background-color: transparent;
        transition: all .4s ease-in-out;
        width: 120%
    }

    .btn-hover-shine.btn-pill:after {
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px
    }

.btn-icon-vertical {
    padding-bottom: 1rem;
    padding-top: 1rem
}

    .btn-icon-vertical .btn-icon-wrapper {
        display: block;
        font-size: 200%;
        margin: 5px 0;
        opacity: .6
    }

    .btn-icon-vertical.btn-link {
        text-decoration: none
    }

    .btn-group-lg > .btn-icon-vertical.btn:not(.btn-block) .btn-icon-wrapper, .btn-icon-vertical.btn-lg:not(.btn-block) .btn-icon-wrapper {
        font-size: 25px
    }

    .btn-group-sm > .btn-icon-vertical.btn:not(.btn-block) .btn-icon-wrapper, .btn-icon-vertical.btn-sm:not(.btn-block) .btn-icon-wrapper {
        font-size: 16px
    }

    .btn-icon-vertical.active .btn-icon-wrapper, .btn-icon-vertical:active .btn-icon-wrapper, .btn-icon-vertical:hover .btn-icon-wrapper {
        opacity: 1
    }

    .btn-icon-vertical.btn-icon-bottom .btn-icon-wrapper {
        margin: .2rem 0 5px
    }

    .btn-icon-vertical.btn-transition-text .btn-icon-wrapper {
        transition: all .2s !important
    }

    .btn-icon-vertical.btn-transition-text:hover .btn-icon-wrapper {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    .btn-icon-vertical.btn-transition-text.btn-transition-alt:hover .btn-icon-wrapper {
        color: #fff !important
    }

.btn-icon-lg {
    font-size: 2.2rem !important
}

.btn-transition {
    background-color: none;
    border-color: #e9ecef;
    color: #6c757d
}

    .btn-transition.btn-outline-link {
        background-color: initial;
        border-color: transparent
    }

        .btn-transition.btn-outline-link:hover {
            background: #f8f9fa;
            color: #545cd8
        }

    .btn-transition.disabled, .btn-transition:disabled {
        border-color: #e9ecef;
        color: #6c757d
    }

    .btn-transition:hover .btn-icon-wrapper {
        transition: none
    }

.btn-transition-alt:hover .icon-gradient {
    -webkit-text-fill-color: initial;
    text-fill-color: initial;
    -webkit-background-clip: initial;
    background-clip: initial;
    background: 0 0 !important;
    color: #fff
}

.btn-square {
    border-radius: 0 !important
}

.btn.btn-wide {
    border-radius: .25rem;
    font-size: .8rem;
    padding: .375rem 1.5rem
}

.btn-group-lg > .btn-wide.btn, .btn-lg.btn-wide {
    border-radius: .3rem;
    font-size: 1.1rem;
    padding: .5rem 2rem
}

.btn-group-sm > .btn-wide.btn, .btn-sm.btn-wide {
    border-radius: .2rem;
    font-size: .8rem;
    padding: .25rem 1rem
}

.dropdown-toggle-split {
    border-left: 1px solid hsla(0,0%,100%,.1)
}

.btn-gradient-primary {
    background-color: #2a32b6;
    background-image: linear-gradient(140deg,#2a32b6 -30%,#545cd8 90%);
    border-color: #2a32b6;
    color: color-yiq(#20278c)
}

    .btn-gradient-primary.active, .btn-gradient-primary:active, .btn-gradient-primary:not(:disabled):not(.disabled):hover {
        background-image: linear-gradient(120deg,#272faa,#4850d5);
        border-color: #20278c;
        color: color-yiq(#20278c)
    }

    .btn-gradient-primary.active, .btn-gradient-primary.focus, .btn-gradient-primary:active, .btn-gradient-primary:focus {
        border-color: #252ca1 !important;
        color: color-yiq(#20278c) !important
    }

    .btn-gradient-primary.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(84,92,216,.4),0 .0625rem .125rem rgba(84,92,216,.5)
    }

        .btn-gradient-primary.btn-shadow:hover {
            box-shadow: 0 .125rem .625rem rgba(84,92,216,.5),0 .0625rem .125rem rgba(84,92,216,.6)
        }

.btn-gradient-secondary {
    background-color: #494f54;
    background-image: linear-gradient(140deg,#494f54 -30%,#6c757d 90%);
    border-color: #494f54;
    color: color-yiq(#313539)
}

    .btn-gradient-secondary.active, .btn-gradient-secondary:active, .btn-gradient-secondary:not(:disabled):not(.disabled):hover {
        background-image: linear-gradient(120deg,#41474c,#656d75);
        border-color: #313539;
        color: color-yiq(#313539)
    }

    .btn-gradient-secondary.active, .btn-gradient-secondary.focus, .btn-gradient-secondary:active, .btn-gradient-secondary:focus {
        border-color: #3d4246 !important;
        color: color-yiq(#313539) !important
    }

    .btn-gradient-secondary.btn-shadow {
        box-shadow: 0 .125rem .625rem hsla(208,7%,46%,.4),0 .0625rem .125rem hsla(208,7%,46%,.5)
    }

        .btn-gradient-secondary.btn-shadow:hover {
            box-shadow: 0 .125rem .625rem hsla(208,7%,46%,.5),0 .0625rem .125rem hsla(208,7%,46%,.6)
        }

.btn-gradient-success {
    background-color: #298957;
    background-image: linear-gradient(140deg,#298957 -30%,#3ac47d 90%);
    border-color: #298957;
    color: color-yiq(#1d623e)
}

    .btn-gradient-success.active, .btn-gradient-success:active, .btn-gradient-success:not(:disabled):not(.disabled):hover {
        background-image: linear-gradient(120deg,#257d50,#37b875);
        border-color: #1d623e;
        color: color-yiq(#1d623e)
    }

    .btn-gradient-success.active, .btn-gradient-success.focus, .btn-gradient-success:active, .btn-gradient-success:focus {
        border-color: #23754b !important;
        color: color-yiq(#1d623e) !important
    }

    .btn-gradient-success.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(58,196,125,.4),0 .0625rem .125rem rgba(58,196,125,.5)
    }

        .btn-gradient-success.btn-shadow:hover {
            box-shadow: 0 .125rem .625rem rgba(58,196,125,.5),0 .0625rem .125rem rgba(58,196,125,.6)
        }

.btn-gradient-info {
    background-color: #008de3;
    background-image: linear-gradient(140deg,#008de3 -30%,#30b1ff 90%);
    border-color: #008de3;
    color: color-yiq(#006db0)
}

    .btn-gradient-info.active, .btn-gradient-info:active, .btn-gradient-info:not(:disabled):not(.disabled):hover {
        background-image: linear-gradient(120deg,#0084d3,#21abff);
        border-color: #006db0;
        color: color-yiq(#006db0)
    }

    .btn-gradient-info.active, .btn-gradient-info.focus, .btn-gradient-info:active, .btn-gradient-info:focus {
        border-color: #007dc9 !important;
        color: color-yiq(#006db0) !important
    }

    .btn-gradient-info.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(48,177,255,.4),0 .0625rem .125rem rgba(48,177,255,.5)
    }

        .btn-gradient-info.btn-shadow:hover {
            box-shadow: 0 .125rem .625rem rgba(48,177,255,.5),0 .0625rem .125rem rgba(48,177,255,.6)
        }

.btn-gradient-warning {
    background-color: #c78f07;
    background-image: linear-gradient(140deg,#c78f07 -30%,#f7b924 90%);
    border-color: #c78f07;
    color: color-yiq(#966c05)
}

    .btn-gradient-warning.active, .btn-gradient-warning:active, .btn-gradient-warning:not(:disabled):not(.disabled):hover {
        background-image: linear-gradient(120deg,#b88407,#f6b415);
        border-color: #966c05;
        color: color-yiq(#966c05)
    }

    .btn-gradient-warning.active, .btn-gradient-warning.focus, .btn-gradient-warning:active, .btn-gradient-warning:focus {
        border-color: #af7d06 !important;
        color: color-yiq(#966c05) !important
    }

    .btn-gradient-warning.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(247,185,36,.4),0 .0625rem .125rem rgba(247,185,36,.5)
    }

        .btn-gradient-warning.btn-shadow:hover {
            box-shadow: 0 .125rem .625rem rgba(247,185,36,.5),0 .0625rem .125rem rgba(247,185,36,.6)
        }

.btn-gradient-danger {
    background-color: #981a38;
    background-image: linear-gradient(140deg,#981a38 -30%,#d92550 90%);
    border-color: #981a38;
    color: color-yiq(#6c1228)
}

    .btn-gradient-danger.active, .btn-gradient-danger:active, .btn-gradient-danger:not(:disabled):not(.disabled):hover {
        background-image: linear-gradient(120deg,#8b1833,#cc234b);
        border-color: #6c1228;
        color: color-yiq(#6c1228)
    }

    .btn-gradient-danger.active, .btn-gradient-danger.focus, .btn-gradient-danger:active, .btn-gradient-danger:focus {
        border-color: #821630 !important;
        color: color-yiq(#6c1228) !important
    }

    .btn-gradient-danger.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(217,37,80,.4),0 .0625rem .125rem rgba(217,37,80,.5)
    }

        .btn-gradient-danger.btn-shadow:hover {
            box-shadow: 0 .125rem .625rem rgba(217,37,80,.5),0 .0625rem .125rem rgba(217,37,80,.6)
        }

.btn-gradient-focus {
    background-color: #211f29;
    background-image: linear-gradient(140deg,#211f29 -30%,#444054 90%);
    border-color: #211f29;
    color: color-yiq(#09090c)
}

    .btn-gradient-focus.active, .btn-gradient-focus:active, .btn-gradient-focus:not(:disabled):not(.disabled):hover {
        background-image: linear-gradient(120deg,#1a1820,#3d394b);
        border-color: #09090c;
        color: color-yiq(#09090c)
    }

    .btn-gradient-focus.active, .btn-gradient-focus.focus, .btn-gradient-focus:active, .btn-gradient-focus:focus {
        border-color: #15141a !important;
        color: color-yiq(#09090c) !important
    }

    .btn-gradient-focus.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(68,64,84,.4),0 .0625rem .125rem rgba(68,64,84,.5)
    }

        .btn-gradient-focus.btn-shadow:hover {
            box-shadow: 0 .125rem .625rem rgba(68,64,84,.5),0 .0625rem .125rem rgba(68,64,84,.6)
        }

.btn-gradient-alternate {
    background-color: #573a5b;
    background-image: linear-gradient(140deg,#573a5b -30%,#83588a 90%);
    border-color: #573a5b;
    color: color-yiq(#39263c)
}

    .btn-gradient-alternate.active, .btn-gradient-alternate:active, .btn-gradient-alternate:not(:disabled):not(.disabled):hover {
        background-image: linear-gradient(120deg,#4e3452,#7a5281);
        border-color: #39263c;
        color: color-yiq(#39263c)
    }

    .btn-gradient-alternate.active, .btn-gradient-alternate.focus, .btn-gradient-alternate:active, .btn-gradient-alternate:focus {
        border-color: #48304c !important;
        color: color-yiq(#39263c) !important
    }

    .btn-gradient-alternate.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(131,88,138,.4),0 .0625rem .125rem rgba(131,88,138,.5)
    }

        .btn-gradient-alternate.btn-shadow:hover {
            box-shadow: 0 .125rem .625rem rgba(131,88,138,.5),0 .0625rem .125rem rgba(131,88,138,.6)
        }

.btn-gradient-light {
    background-color: #c8c8c8;
    background-image: linear-gradient(140deg,#c8c8c8 -30%,#eee 90%);
    border-color: #c8c8c8;
    color: color-yiq(#aeaeae)
}

    .btn-gradient-light.active, .btn-gradient-light:active, .btn-gradient-light:not(:disabled):not(.disabled):hover {
        background-image: linear-gradient(120deg,silver,#e6e6e6);
        border-color: #aeaeae;
        color: color-yiq(#aeaeae)
    }

    .btn-gradient-light.active, .btn-gradient-light.focus, .btn-gradient-light:active, .btn-gradient-light:focus {
        border-color: #bbb !important;
        color: color-yiq(#aeaeae) !important
    }

    .btn-gradient-light.btn-shadow {
        box-shadow: 0 .125rem .625rem hsla(0,0%,93%,.4),0 .0625rem .125rem hsla(0,0%,93%,.5)
    }

        .btn-gradient-light.btn-shadow:hover {
            box-shadow: 0 .125rem .625rem hsla(0,0%,93%,.5),0 .0625rem .125rem hsla(0,0%,93%,.6)
        }

.btn-gradient-dark {
    background-color: #121416;
    background-image: linear-gradient(140deg,#121416 -30%,#343a40 90%);
    border-color: #121416;
    color: color-yiq(#000)
}

    .btn-gradient-dark.active, .btn-gradient-dark:active, .btn-gradient-dark:not(:disabled):not(.disabled):hover {
        background-image: linear-gradient(120deg,#0b0c0d,#2d3238);
        border-color: #000;
        color: color-yiq(#000)
    }

    .btn-gradient-dark.active, .btn-gradient-dark.focus, .btn-gradient-dark:active, .btn-gradient-dark:focus {
        border-color: #060708 !important;
        color: color-yiq(#000) !important
    }

    .btn-gradient-dark.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(52,58,64,.4),0 .0625rem .125rem rgba(52,58,64,.5)
    }

        .btn-gradient-dark.btn-shadow:hover {
            box-shadow: 0 .125rem .625rem rgba(52,58,64,.5),0 .0625rem .125rem rgba(52,58,64,.6)
        }

.btn-shadow.active {
    box-shadow: 0 0 0 0 transparent !important
}

.btn-primary {
    background-color: #545cd8;
    border-color: #545cd8;
    color: #fff
}

    .btn-check:focus + .btn-primary, .btn-primary:focus, .btn-primary:hover {
        background-color: #474eb8;
        border-color: #434aad;
        color: #fff
    }

    .btn-check:focus + .btn-primary, .btn-primary:focus {
        box-shadow: 0 0 0 0 rgba(110,116,222,.5)
    }

    .btn-check:active + .btn-primary, .btn-check:checked + .btn-primary, .btn-primary.active, .btn-primary:active, .show > .btn-primary.dropdown-toggle {
        background-color: #434aad;
        border-color: #3f45a2;
        color: #fff
    }

        .btn-check:active + .btn-primary:focus, .btn-check:checked + .btn-primary:focus, .btn-primary.active:focus, .btn-primary:active:focus, .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0 rgba(110,116,222,.5)
        }

    .btn-primary.disabled, .btn-primary:disabled {
        background-color: #545cd8;
        border-color: #545cd8;
        color: #fff
    }

    .btn-primary.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(84,92,216,.4),0 .0625rem .125rem rgba(84,92,216,.5)
    }

        .btn-primary.btn-shadow:hover {
            box-shadow: 0 .125rem .625rem rgba(84,92,216,.5),0 .0625rem .125rem rgba(84,92,216,.6)
        }

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff
}

    .btn-check:focus + .btn-secondary, .btn-secondary:focus, .btn-secondary:hover {
        background-color: #5c636a;
        border-color: #565e64;
        color: #fff
    }

    .btn-check:focus + .btn-secondary, .btn-secondary:focus {
        box-shadow: 0 0 0 0 hsla(208,6%,54%,.5)
    }

    .btn-check:active + .btn-secondary, .btn-check:checked + .btn-secondary, .btn-secondary.active, .btn-secondary:active, .show > .btn-secondary.dropdown-toggle {
        background-color: #565e64;
        border-color: #51585e;
        color: #fff
    }

        .btn-check:active + .btn-secondary:focus, .btn-check:checked + .btn-secondary:focus, .btn-secondary.active:focus, .btn-secondary:active:focus, .show > .btn-secondary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0 hsla(208,6%,54%,.5)
        }

    .btn-secondary.disabled, .btn-secondary:disabled {
        background-color: #6c757d;
        border-color: #6c757d;
        color: #fff
    }

    .btn-secondary.btn-shadow {
        box-shadow: 0 .125rem .625rem hsla(208,7%,46%,.4),0 .0625rem .125rem hsla(208,7%,46%,.5)
    }

        .btn-secondary.btn-shadow:hover {
            box-shadow: 0 .125rem .625rem hsla(208,7%,46%,.5),0 .0625rem .125rem hsla(208,7%,46%,.6)
        }

.btn-success {
    background-color: #3ac47d;
    border-color: #3ac47d;
    color: #000
}

    .btn-check:focus + .btn-success, .btn-success:focus, .btn-success:hover {
        background-color: #58cd91;
        border-color: #4eca8a;
        color: #000
    }

    .btn-check:focus + .btn-success, .btn-success:focus {
        box-shadow: 0 0 0 0 rgba(49,167,106,.5)
    }

    .btn-check:active + .btn-success, .btn-check:checked + .btn-success, .btn-success.active, .btn-success:active, .show > .btn-success.dropdown-toggle {
        background-color: #61d097;
        border-color: #4eca8a;
        color: #000
    }

        .btn-check:active + .btn-success:focus, .btn-check:checked + .btn-success:focus, .btn-success.active:focus, .btn-success:active:focus, .show > .btn-success.dropdown-toggle:focus {
            box-shadow: 0 0 0 0 rgba(49,167,106,.5)
        }

    .btn-success.disabled, .btn-success:disabled {
        background-color: #3ac47d;
        border-color: #3ac47d;
        color: #000
    }

    .btn-success.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(58,196,125,.4),0 .0625rem .125rem rgba(58,196,125,.5)
    }

        .btn-success.btn-shadow:hover {
            box-shadow: 0 .125rem .625rem rgba(58,196,125,.5),0 .0625rem .125rem rgba(58,196,125,.6)
        }

.btn-info {
    background-color: #30b1ff;
    border-color: #30b1ff;
    color: #000
}

    .btn-check:focus + .btn-info, .btn-info:focus, .btn-info:hover {
        background-color: #4fbdff;
        border-color: #45b9ff;
        color: #000
    }

    .btn-check:focus + .btn-info, .btn-info:focus {
        box-shadow: 0 0 0 0 rgba(41,150,217,.5)
    }

    .btn-check:active + .btn-info, .btn-check:checked + .btn-info, .btn-info.active, .btn-info:active, .show > .btn-info.dropdown-toggle {
        background-color: #59c1ff;
        border-color: #45b9ff;
        color: #000
    }

        .btn-check:active + .btn-info:focus, .btn-check:checked + .btn-info:focus, .btn-info.active:focus, .btn-info:active:focus, .show > .btn-info.dropdown-toggle:focus {
            box-shadow: 0 0 0 0 rgba(41,150,217,.5)
        }

    .btn-info.disabled, .btn-info:disabled {
        background-color: #30b1ff;
        border-color: #30b1ff;
        color: #000
    }

    .btn-info.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(48,177,255,.4),0 .0625rem .125rem rgba(48,177,255,.5)
    }

        .btn-info.btn-shadow:hover {
            box-shadow: 0 .125rem .625rem rgba(48,177,255,.5),0 .0625rem .125rem rgba(48,177,255,.6)
        }

.btn-warning {
    background-color: #f7b924;
    border-color: #f7b924;
    color: #000
}

    .btn-check:focus + .btn-warning, .btn-warning:focus, .btn-warning:hover {
        background-color: #f8c445;
        border-color: #f8c03a;
        color: #000
    }

    .btn-check:focus + .btn-warning, .btn-warning:focus {
        box-shadow: 0 0 0 0 rgba(210,157,31,.5)
    }

    .btn-check:active + .btn-warning, .btn-check:checked + .btn-warning, .btn-warning.active, .btn-warning:active, .show > .btn-warning.dropdown-toggle {
        background-color: #f9c750;
        border-color: #f8c03a;
        color: #000
    }

        .btn-check:active + .btn-warning:focus, .btn-check:checked + .btn-warning:focus, .btn-warning.active:focus, .btn-warning:active:focus, .show > .btn-warning.dropdown-toggle:focus {
            box-shadow: 0 0 0 0 rgba(210,157,31,.5)
        }

    .btn-warning.disabled, .btn-warning:disabled {
        background-color: #f7b924;
        border-color: #f7b924;
        color: #000
    }

    .btn-warning.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(247,185,36,.4),0 .0625rem .125rem rgba(247,185,36,.5)
    }

        .btn-warning.btn-shadow:hover {
            box-shadow: 0 .125rem .625rem rgba(247,185,36,.5),0 .0625rem .125rem rgba(247,185,36,.6)
        }

.btn-danger {
    background-color: #d92550;
    border-color: #d92550;
    color: #fff
}

    .btn-check:focus + .btn-danger, .btn-danger:focus, .btn-danger:hover {
        background-color: #b81f44;
        border-color: #ae1e40;
        color: #fff
    }

    .btn-check:focus + .btn-danger, .btn-danger:focus {
        box-shadow: 0 0 0 0 rgba(223,70,106,.5)
    }

    .btn-check:active + .btn-danger, .btn-check:checked + .btn-danger, .btn-danger.active, .btn-danger:active, .show > .btn-danger.dropdown-toggle {
        background-color: #ae1e40;
        border-color: #a31c3c;
        color: #fff
    }

        .btn-check:active + .btn-danger:focus, .btn-check:checked + .btn-danger:focus, .btn-danger.active:focus, .btn-danger:active:focus, .show > .btn-danger.dropdown-toggle:focus {
            box-shadow: 0 0 0 0 rgba(223,70,106,.5)
        }

    .btn-danger.disabled, .btn-danger:disabled {
        background-color: #d92550;
        border-color: #d92550;
        color: #fff
    }

    .btn-danger.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(217,37,80,.4),0 .0625rem .125rem rgba(217,37,80,.5)
    }

        .btn-danger.btn-shadow:hover {
            box-shadow: 0 .125rem .625rem rgba(217,37,80,.5),0 .0625rem .125rem rgba(217,37,80,.6)
        }

.btn-light {
    background-color: #eee;
    border-color: #eee;
    color: #000
}

    .btn-check:focus + .btn-light, .btn-light:focus, .btn-light:hover {
        background-color: #f1f1f1;
        border-color: #f0f0f0;
        color: #000
    }

    .btn-check:focus + .btn-light, .btn-light:focus {
        box-shadow: 0 0 0 0 hsla(0,0%,79%,.5)
    }

    .btn-check:active + .btn-light, .btn-check:checked + .btn-light, .btn-light.active, .btn-light:active, .show > .btn-light.dropdown-toggle {
        background-color: #f1f1f1;
        border-color: #f0f0f0;
        color: #000
    }

        .btn-check:active + .btn-light:focus, .btn-check:checked + .btn-light:focus, .btn-light.active:focus, .btn-light:active:focus, .show > .btn-light.dropdown-toggle:focus {
            box-shadow: 0 0 0 0 hsla(0,0%,79%,.5)
        }

    .btn-light.disabled, .btn-light:disabled {
        background-color: #eee;
        border-color: #eee;
        color: #000
    }

    .btn-light.btn-shadow {
        box-shadow: 0 .125rem .625rem hsla(0,0%,93%,.4),0 .0625rem .125rem hsla(0,0%,93%,.5)
    }

        .btn-light.btn-shadow:hover {
            box-shadow: 0 .125rem .625rem hsla(0,0%,93%,.5),0 .0625rem .125rem hsla(0,0%,93%,.6)
        }

.btn-dark {
    background-color: #343a40;
    border-color: #343a40;
    color: #fff
}

    .btn-check:focus + .btn-dark, .btn-dark:focus, .btn-dark:hover {
        background-color: #2c3136;
        border-color: #2a2e33;
        color: #fff
    }

    .btn-check:focus + .btn-dark, .btn-dark:focus {
        box-shadow: 0 0 0 0 rgba(82,88,93,.5)
    }

    .btn-check:active + .btn-dark, .btn-check:checked + .btn-dark, .btn-dark.active, .btn-dark:active, .show > .btn-dark.dropdown-toggle {
        background-color: #2a2e33;
        border-color: #272c30;
        color: #fff
    }

        .btn-check:active + .btn-dark:focus, .btn-check:checked + .btn-dark:focus, .btn-dark.active:focus, .btn-dark:active:focus, .show > .btn-dark.dropdown-toggle:focus {
            box-shadow: 0 0 0 0 rgba(82,88,93,.5)
        }

    .btn-dark.disabled, .btn-dark:disabled {
        background-color: #343a40;
        border-color: #343a40;
        color: #fff
    }

    .btn-dark.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(52,58,64,.4),0 .0625rem .125rem rgba(52,58,64,.5)
    }

        .btn-dark.btn-shadow:hover {
            box-shadow: 0 .125rem .625rem rgba(52,58,64,.5),0 .0625rem .125rem rgba(52,58,64,.6)
        }

.btn-focus {
    background-color: #444054;
    border-color: #444054;
    color: #fff
}

    .btn-check:focus + .btn-focus, .btn-focus:focus, .btn-focus:hover {
        background-color: #3a3647;
        border-color: #363343;
        color: #fff
    }

    .btn-check:focus + .btn-focus, .btn-focus:focus {
        box-shadow: 0 0 0 0 rgba(96,93,110,.5)
    }

    .btn-check:active + .btn-focus, .btn-check:checked + .btn-focus, .btn-focus.active, .btn-focus:active, .show > .btn-focus.dropdown-toggle {
        background-color: #363343;
        border-color: #33303f;
        color: #fff
    }

        .btn-check:active + .btn-focus:focus, .btn-check:checked + .btn-focus:focus, .btn-focus.active:focus, .btn-focus:active:focus, .show > .btn-focus.dropdown-toggle:focus {
            box-shadow: 0 0 0 0 rgba(96,93,110,.5)
        }

    .btn-focus.disabled, .btn-focus:disabled {
        background-color: #444054;
        border-color: #444054;
        color: #fff
    }

    .btn-focus.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(68,64,84,.4),0 .0625rem .125rem rgba(68,64,84,.5)
    }

        .btn-focus.btn-shadow:hover {
            box-shadow: 0 .125rem .625rem rgba(68,64,84,.5),0 .0625rem .125rem rgba(68,64,84,.6)
        }

.btn-alternate {
    background-color: #83588a;
    border-color: #83588a;
    color: #fff
}

    .btn-alternate:focus, .btn-alternate:hover, .btn-check:focus + .btn-alternate {
        background-color: #6f4b75;
        border-color: #69466e;
        color: #fff
    }

    .btn-alternate:focus, .btn-check:focus + .btn-alternate {
        box-shadow: 0 0 0 0 rgba(150,113,156,.5)
    }

    .btn-alternate.active, .btn-alternate:active, .btn-check:active + .btn-alternate, .btn-check:checked + .btn-alternate, .show > .btn-alternate.dropdown-toggle {
        background-color: #69466e;
        border-color: #624268;
        color: #fff
    }

        .btn-alternate.active:focus, .btn-alternate:active:focus, .btn-check:active + .btn-alternate:focus, .btn-check:checked + .btn-alternate:focus, .show > .btn-alternate.dropdown-toggle:focus {
            box-shadow: 0 0 0 0 rgba(150,113,156,.5)
        }

    .btn-alternate.disabled, .btn-alternate:disabled {
        background-color: #83588a;
        border-color: #83588a;
        color: #fff
    }

    .btn-alternate.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(131,88,138,.4),0 .0625rem .125rem rgba(131,88,138,.5)
    }

        .btn-alternate.btn-shadow:hover {
            box-shadow: 0 .125rem .625rem rgba(131,88,138,.5),0 .0625rem .125rem rgba(131,88,138,.6)
        }

.btn-shadow-primary:hover {
    box-shadow: 0 .125rem .625rem rgba(84,92,216,.4),0 .0625rem .125rem rgba(84,92,216,.5)
}

.btn-shadow-secondary:hover {
    box-shadow: 0 .125rem .625rem hsla(208,7%,46%,.4),0 .0625rem .125rem hsla(208,7%,46%,.5)
}

.btn-shadow-success:hover {
    box-shadow: 0 .125rem .625rem rgba(58,196,125,.4),0 .0625rem .125rem rgba(58,196,125,.5)
}

.btn-shadow-info:hover {
    box-shadow: 0 .125rem .625rem rgba(48,177,255,.4),0 .0625rem .125rem rgba(48,177,255,.5)
}

.btn-shadow-warning:hover {
    box-shadow: 0 .125rem .625rem rgba(247,185,36,.4),0 .0625rem .125rem rgba(247,185,36,.5)
}

.btn-shadow-danger:hover {
    box-shadow: 0 .125rem .625rem rgba(217,37,80,.4),0 .0625rem .125rem rgba(217,37,80,.5)
}

.btn-shadow-light:hover {
    box-shadow: 0 .125rem .625rem hsla(0,0%,93%,.4),0 .0625rem .125rem hsla(0,0%,93%,.5)
}

.btn-shadow-dark:hover {
    box-shadow: 0 .125rem .625rem rgba(52,58,64,.4),0 .0625rem .125rem rgba(52,58,64,.5)
}

.btn-shadow-focus:hover {
    box-shadow: 0 .125rem .625rem rgba(68,64,84,.4),0 .0625rem .125rem rgba(68,64,84,.5)
}

.btn-shadow-alternate:hover {
    box-shadow: 0 .125rem .625rem rgba(131,88,138,.4),0 .0625rem .125rem rgba(131,88,138,.5)
}

.btn-outline-primary {
    border-color: #545cd8;
    color: #545cd8
}

    .btn-outline-primary:hover {
        background-color: #545cd8;
        border-color: #545cd8;
        color: #fff
    }

    .btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
        box-shadow: 0 0 0 0 rgba(84,92,216,.5)
    }

    .btn-check:active + .btn-outline-primary, .btn-check:checked + .btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active {
        background-color: #545cd8;
        border-color: #545cd8;
        color: #fff
    }

        .btn-check:active + .btn-outline-primary:focus, .btn-check:checked + .btn-outline-primary:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus, .btn-outline-primary:active:focus {
            box-shadow: 0 0 0 0 rgba(84,92,216,.5)
        }

    .btn-outline-primary.disabled, .btn-outline-primary:disabled {
        background-color: initial;
        color: #545cd8
    }

    .btn-outline-primary.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(84,92,216,.4),0 .0625rem .125rem rgba(84,92,216,.5)
    }

        .btn-outline-primary.btn-shadow.active:hover, .btn-outline-primary.btn-shadow.disabled:hover, .btn-outline-primary.btn-shadow:active:hover, .btn-outline-primary.btn-shadow:disabled:hover {
            box-shadow: 0 .125rem .625rem rgba(84,92,216,.5),0 .0625rem .125rem rgba(84,92,216,.6)
        }

        .btn-outline-primary.btn-shadow:hover {
            box-shadow: 0 5px 15px 2px rgba(84,92,216,.19)
        }

.btn-outline-secondary {
    border-color: #6c757d;
    color: #6c757d
}

    .btn-outline-secondary:hover {
        background-color: #6c757d;
        border-color: #6c757d;
        color: #fff
    }

    .btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
        box-shadow: 0 0 0 0 hsla(208,7%,46%,.5)
    }

    .btn-check:active + .btn-outline-secondary, .btn-check:checked + .btn-outline-secondary, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show, .btn-outline-secondary:active {
        background-color: #6c757d;
        border-color: #6c757d;
        color: #fff
    }

        .btn-check:active + .btn-outline-secondary:focus, .btn-check:checked + .btn-outline-secondary:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus, .btn-outline-secondary:active:focus {
            box-shadow: 0 0 0 0 hsla(208,7%,46%,.5)
        }

    .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
        background-color: initial;
        color: #6c757d
    }

    .btn-outline-secondary.btn-shadow {
        box-shadow: 0 .125rem .625rem hsla(208,7%,46%,.4),0 .0625rem .125rem hsla(208,7%,46%,.5)
    }

        .btn-outline-secondary.btn-shadow.active:hover, .btn-outline-secondary.btn-shadow.disabled:hover, .btn-outline-secondary.btn-shadow:active:hover, .btn-outline-secondary.btn-shadow:disabled:hover {
            box-shadow: 0 .125rem .625rem hsla(208,7%,46%,.5),0 .0625rem .125rem hsla(208,7%,46%,.6)
        }

        .btn-outline-secondary.btn-shadow:hover {
            box-shadow: 0 5px 15px 2px hsla(208,7%,46%,.19)
        }

.btn-outline-success {
    border-color: #3ac47d;
    color: #3ac47d
}

    .btn-outline-success:hover {
        background-color: #3ac47d;
        border-color: #3ac47d;
        color: #000
    }

    .btn-check:focus + .btn-outline-success, .btn-outline-success:focus {
        box-shadow: 0 0 0 0 rgba(58,196,125,.5)
    }

    .btn-check:active + .btn-outline-success, .btn-check:checked + .btn-outline-success, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show, .btn-outline-success:active {
        background-color: #3ac47d;
        border-color: #3ac47d;
        color: #000
    }

        .btn-check:active + .btn-outline-success:focus, .btn-check:checked + .btn-outline-success:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus, .btn-outline-success:active:focus {
            box-shadow: 0 0 0 0 rgba(58,196,125,.5)
        }

    .btn-outline-success.disabled, .btn-outline-success:disabled {
        background-color: initial;
        color: #3ac47d
    }

    .btn-outline-success.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(58,196,125,.4),0 .0625rem .125rem rgba(58,196,125,.5)
    }

        .btn-outline-success.btn-shadow.active:hover, .btn-outline-success.btn-shadow.disabled:hover, .btn-outline-success.btn-shadow:active:hover, .btn-outline-success.btn-shadow:disabled:hover {
            box-shadow: 0 .125rem .625rem rgba(58,196,125,.5),0 .0625rem .125rem rgba(58,196,125,.6)
        }

        .btn-outline-success.btn-shadow:hover {
            box-shadow: 0 5px 15px 2px rgba(58,196,125,.19)
        }

.btn-outline-info {
    border-color: #30b1ff;
    color: #30b1ff
}

    .btn-outline-info:hover {
        background-color: #30b1ff;
        border-color: #30b1ff;
        color: #000
    }

    .btn-check:focus + .btn-outline-info, .btn-outline-info:focus {
        box-shadow: 0 0 0 0 rgba(48,177,255,.5)
    }

    .btn-check:active + .btn-outline-info, .btn-check:checked + .btn-outline-info, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show, .btn-outline-info:active {
        background-color: #30b1ff;
        border-color: #30b1ff;
        color: #000
    }

        .btn-check:active + .btn-outline-info:focus, .btn-check:checked + .btn-outline-info:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus, .btn-outline-info:active:focus {
            box-shadow: 0 0 0 0 rgba(48,177,255,.5)
        }

    .btn-outline-info.disabled, .btn-outline-info:disabled {
        background-color: initial;
        color: #30b1ff
    }

    .btn-outline-info.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(48,177,255,.4),0 .0625rem .125rem rgba(48,177,255,.5)
    }

        .btn-outline-info.btn-shadow.active:hover, .btn-outline-info.btn-shadow.disabled:hover, .btn-outline-info.btn-shadow:active:hover, .btn-outline-info.btn-shadow:disabled:hover {
            box-shadow: 0 .125rem .625rem rgba(48,177,255,.5),0 .0625rem .125rem rgba(48,177,255,.6)
        }

        .btn-outline-info.btn-shadow:hover {
            box-shadow: 0 5px 15px 2px rgba(48,177,255,.19)
        }

.btn-outline-warning {
    border-color: #f7b924;
    color: #f7b924
}

    .btn-outline-warning:hover {
        background-color: #f7b924;
        border-color: #f7b924;
        color: #000
    }

    .btn-check:focus + .btn-outline-warning, .btn-outline-warning:focus {
        box-shadow: 0 0 0 0 rgba(247,185,36,.5)
    }

    .btn-check:active + .btn-outline-warning, .btn-check:checked + .btn-outline-warning, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show, .btn-outline-warning:active {
        background-color: #f7b924;
        border-color: #f7b924;
        color: #000
    }

        .btn-check:active + .btn-outline-warning:focus, .btn-check:checked + .btn-outline-warning:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus, .btn-outline-warning:active:focus {
            box-shadow: 0 0 0 0 rgba(247,185,36,.5)
        }

    .btn-outline-warning.disabled, .btn-outline-warning:disabled {
        background-color: initial;
        color: #f7b924
    }

    .btn-outline-warning.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(247,185,36,.4),0 .0625rem .125rem rgba(247,185,36,.5)
    }

        .btn-outline-warning.btn-shadow.active:hover, .btn-outline-warning.btn-shadow.disabled:hover, .btn-outline-warning.btn-shadow:active:hover, .btn-outline-warning.btn-shadow:disabled:hover {
            box-shadow: 0 .125rem .625rem rgba(247,185,36,.5),0 .0625rem .125rem rgba(247,185,36,.6)
        }

        .btn-outline-warning.btn-shadow:hover {
            box-shadow: 0 5px 15px 2px rgba(247,185,36,.19)
        }

.btn-outline-danger {
    border-color: #d92550;
    color: #d92550
}

    .btn-outline-danger:hover {
        background-color: #d92550;
        border-color: #d92550;
        color: #fff
    }

    .btn-check:focus + .btn-outline-danger, .btn-outline-danger:focus {
        box-shadow: 0 0 0 0 rgba(217,37,80,.5)
    }

    .btn-check:active + .btn-outline-danger, .btn-check:checked + .btn-outline-danger, .btn-outline-danger.active, .btn-outline-danger.dropdown-toggle.show, .btn-outline-danger:active {
        background-color: #d92550;
        border-color: #d92550;
        color: #fff
    }

        .btn-check:active + .btn-outline-danger:focus, .btn-check:checked + .btn-outline-danger:focus, .btn-outline-danger.active:focus, .btn-outline-danger.dropdown-toggle.show:focus, .btn-outline-danger:active:focus {
            box-shadow: 0 0 0 0 rgba(217,37,80,.5)
        }

    .btn-outline-danger.disabled, .btn-outline-danger:disabled {
        background-color: initial;
        color: #d92550
    }

    .btn-outline-danger.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(217,37,80,.4),0 .0625rem .125rem rgba(217,37,80,.5)
    }

        .btn-outline-danger.btn-shadow.active:hover, .btn-outline-danger.btn-shadow.disabled:hover, .btn-outline-danger.btn-shadow:active:hover, .btn-outline-danger.btn-shadow:disabled:hover {
            box-shadow: 0 .125rem .625rem rgba(217,37,80,.5),0 .0625rem .125rem rgba(217,37,80,.6)
        }

        .btn-outline-danger.btn-shadow:hover {
            box-shadow: 0 5px 15px 2px rgba(217,37,80,.19)
        }

.btn-outline-light {
    border-color: #eee;
    color: #eee
}

    .btn-outline-light:hover {
        background-color: #eee;
        border-color: #eee;
        color: #000
    }

    .btn-check:focus + .btn-outline-light, .btn-outline-light:focus {
        box-shadow: 0 0 0 0 hsla(0,0%,93%,.5)
    }

    .btn-check:active + .btn-outline-light, .btn-check:checked + .btn-outline-light, .btn-outline-light.active, .btn-outline-light.dropdown-toggle.show, .btn-outline-light:active {
        background-color: #eee;
        border-color: #eee;
        color: #000
    }

        .btn-check:active + .btn-outline-light:focus, .btn-check:checked + .btn-outline-light:focus, .btn-outline-light.active:focus, .btn-outline-light.dropdown-toggle.show:focus, .btn-outline-light:active:focus {
            box-shadow: 0 0 0 0 hsla(0,0%,93%,.5)
        }

    .btn-outline-light.disabled, .btn-outline-light:disabled {
        background-color: initial;
        color: #eee
    }

    .btn-outline-light.btn-shadow {
        box-shadow: 0 .125rem .625rem hsla(0,0%,93%,.4),0 .0625rem .125rem hsla(0,0%,93%,.5)
    }

        .btn-outline-light.btn-shadow.active:hover, .btn-outline-light.btn-shadow.disabled:hover, .btn-outline-light.btn-shadow:active:hover, .btn-outline-light.btn-shadow:disabled:hover {
            box-shadow: 0 .125rem .625rem hsla(0,0%,93%,.5),0 .0625rem .125rem hsla(0,0%,93%,.6)
        }

        .btn-outline-light.btn-shadow:hover {
            box-shadow: 0 5px 15px 2px hsla(0,0%,93%,.19)
        }

.btn-outline-dark {
    border-color: #343a40;
    color: #343a40
}

    .btn-outline-dark:hover {
        background-color: #343a40;
        border-color: #343a40;
        color: #fff
    }

    .btn-check:focus + .btn-outline-dark, .btn-outline-dark:focus {
        box-shadow: 0 0 0 0 rgba(52,58,64,.5)
    }

    .btn-check:active + .btn-outline-dark, .btn-check:checked + .btn-outline-dark, .btn-outline-dark.active, .btn-outline-dark.dropdown-toggle.show, .btn-outline-dark:active {
        background-color: #343a40;
        border-color: #343a40;
        color: #fff
    }

        .btn-check:active + .btn-outline-dark:focus, .btn-check:checked + .btn-outline-dark:focus, .btn-outline-dark.active:focus, .btn-outline-dark.dropdown-toggle.show:focus, .btn-outline-dark:active:focus {
            box-shadow: 0 0 0 0 rgba(52,58,64,.5)
        }

    .btn-outline-dark.disabled, .btn-outline-dark:disabled {
        background-color: initial;
        color: #343a40
    }

    .btn-outline-dark.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(52,58,64,.4),0 .0625rem .125rem rgba(52,58,64,.5)
    }

        .btn-outline-dark.btn-shadow.active:hover, .btn-outline-dark.btn-shadow.disabled:hover, .btn-outline-dark.btn-shadow:active:hover, .btn-outline-dark.btn-shadow:disabled:hover {
            box-shadow: 0 .125rem .625rem rgba(52,58,64,.5),0 .0625rem .125rem rgba(52,58,64,.6)
        }

        .btn-outline-dark.btn-shadow:hover {
            box-shadow: 0 5px 15px 2px rgba(52,58,64,.19)
        }

.btn-outline-focus {
    border-color: #444054;
    color: #444054
}

    .btn-outline-focus:hover {
        background-color: #444054;
        border-color: #444054;
        color: #fff
    }

    .btn-check:focus + .btn-outline-focus, .btn-outline-focus:focus {
        box-shadow: 0 0 0 0 rgba(68,64,84,.5)
    }

    .btn-check:active + .btn-outline-focus, .btn-check:checked + .btn-outline-focus, .btn-outline-focus.active, .btn-outline-focus.dropdown-toggle.show, .btn-outline-focus:active {
        background-color: #444054;
        border-color: #444054;
        color: #fff
    }

        .btn-check:active + .btn-outline-focus:focus, .btn-check:checked + .btn-outline-focus:focus, .btn-outline-focus.active:focus, .btn-outline-focus.dropdown-toggle.show:focus, .btn-outline-focus:active:focus {
            box-shadow: 0 0 0 0 rgba(68,64,84,.5)
        }

    .btn-outline-focus.disabled, .btn-outline-focus:disabled {
        background-color: initial;
        color: #444054
    }

    .btn-outline-focus.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(68,64,84,.4),0 .0625rem .125rem rgba(68,64,84,.5)
    }

        .btn-outline-focus.btn-shadow.active:hover, .btn-outline-focus.btn-shadow.disabled:hover, .btn-outline-focus.btn-shadow:active:hover, .btn-outline-focus.btn-shadow:disabled:hover {
            box-shadow: 0 .125rem .625rem rgba(68,64,84,.5),0 .0625rem .125rem rgba(68,64,84,.6)
        }

        .btn-outline-focus.btn-shadow:hover {
            box-shadow: 0 5px 15px 2px rgba(68,64,84,.19)
        }

.btn-outline-alternate {
    border-color: #83588a;
    color: #83588a
}

    .btn-outline-alternate:hover {
        background-color: #83588a;
        border-color: #83588a;
        color: #fff
    }

    .btn-check:focus + .btn-outline-alternate, .btn-outline-alternate:focus {
        box-shadow: 0 0 0 0 rgba(131,88,138,.5)
    }

    .btn-check:active + .btn-outline-alternate, .btn-check:checked + .btn-outline-alternate, .btn-outline-alternate.active, .btn-outline-alternate.dropdown-toggle.show, .btn-outline-alternate:active {
        background-color: #83588a;
        border-color: #83588a;
        color: #fff
    }

        .btn-check:active + .btn-outline-alternate:focus, .btn-check:checked + .btn-outline-alternate:focus, .btn-outline-alternate.active:focus, .btn-outline-alternate.dropdown-toggle.show:focus, .btn-outline-alternate:active:focus {
            box-shadow: 0 0 0 0 rgba(131,88,138,.5)
        }

    .btn-outline-alternate.disabled, .btn-outline-alternate:disabled {
        background-color: initial;
        color: #83588a
    }

    .btn-outline-alternate.btn-shadow {
        box-shadow: 0 .125rem .625rem rgba(131,88,138,.4),0 .0625rem .125rem rgba(131,88,138,.5)
    }

        .btn-outline-alternate.btn-shadow.active:hover, .btn-outline-alternate.btn-shadow.disabled:hover, .btn-outline-alternate.btn-shadow:active:hover, .btn-outline-alternate.btn-shadow:disabled:hover {
            box-shadow: 0 .125rem .625rem rgba(131,88,138,.5),0 .0625rem .125rem rgba(131,88,138,.6)
        }

        .btn-outline-alternate.btn-shadow:hover {
            box-shadow: 0 5px 15px 2px rgba(131,88,138,.19)
        }

/* Widget Container - CSS Grid Layout */
.widgets-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    overflow: hidden;
}

.widget-column {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e5e7eb;
}

.widget-column:last-child {
    border-right: none;
}

/* Widget Content - Kompakt Tasarım */
.widget-content {
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid #e5e7eb;
    background-color: #ffffff;
    margin: 0;
}

.widget-content:last-child {
    border-bottom: none;
}

/* Widget Content Wrapper */
.widget-content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    width: 100%;
    font-size: 14px !important;
}

.widget-content-left {
    flex: 1;
    text-align: left;
    padding-right: 0.5rem;
}

.widget-content-right {
    flex: 0 0 300px;
    text-align: right;
    padding-left: 0.5rem;
    border-left: 1px solid #e5e7eb;
    min-width: 300px;
}

.widget-numbers {
    font-size: 1.4rem;
    font-weight: 700; 
    border-radius: 0.375rem;
    background-color: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.widget-heading {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.1rem;
    line-height: 1.1;
}

.widget-subheading {
    font-size: 0.7rem;
    color: #6b7280;
    line-height: 1.1;
    margin-bottom: 0;
}

/* Responsive tasarım - CSS Grid ile */
@media (max-width: 1200px) {
    .widgets-container {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .widget-content-right {
        flex: 0 0 250px;
        min-width: 250px;
    }
    
    .widget-numbers {
        font-size: 1.2rem;
    }
    
    .widget-heading {
        font-size: 0.8rem;
        margin-bottom: 0.05rem;
        line-height: 1.0;
    }
    
    .widget-subheading {
        font-size: 0.65rem;
        line-height: 1.0;
    }
    
    .widget-content {
        padding: 0.25rem 0.5rem;
    }
}

@media (max-width: 992px) {
    .widgets-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .widget-content-right {
        flex: 0 0 250px;
        min-width: 250px;
    }
    
    .widget-numbers {
        font-size: 1.1rem;
    }
    
    .widget-heading {
        font-size: 0.75rem;
        margin-bottom: 0.05rem;
        line-height: 1.0;
    }
    
    .widget-subheading {
        font-size: 0.6rem;
        line-height: 1.0;
    }
    
    .widget-content {
        padding: 0.2rem 0.5rem;
    }
}

@media (max-width: 768px) {
    .widgets-container {
        grid-template-columns: 1fr;
    }
    
    .widget-column {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .widget-column:last-child {
        border-bottom: none;
    }
    
    .widget-content-right {
        flex: 0 0 250px;
        min-width: 250px;
    }
    
    .widget-numbers {
        font-size: 1.0rem;
    }
    
    .widget-heading {
        font-size: 0.7rem;
        margin-bottom: 0.05rem;
        line-height: 1.0;
    }
    
    .widget-subheading {
        font-size: 0.55rem;
        line-height: 1.0;
    }
    
    .widget-content {
        padding: 0.15rem 0.4rem;
    }
}

@media (max-width: 576px) {
    .widget-content-right {
        flex: 0 0 250px;
        min-width: 250px;
    }
    
    .widget-numbers {
        font-size: 0.9rem;
    }
    
    .widget-heading {
        font-size: 0.65rem;
        margin-bottom: 0.05rem;
        line-height: 1.0;
    }
    
    .widget-subheading {
        font-size: 0.5rem;
        line-height: 1.0;
    }
    
    .widget-content {
        padding: 0.1rem 0.3rem;
    }
}

@media (max-width: 480px) {
    .widget-content-right {
        flex: 0 0 200px;
        min-width: 200px;
    }
    
    .widget-numbers {
        font-size: 0.8rem;
    }
    
    .widget-heading {
        font-size: 0.6rem;
        margin-bottom: 0.05rem;
        line-height: 1.0;
    }
    
    .widget-subheading {
        font-size: 0.45rem;
        line-height: 1.0;
    }
    
    .widget-content {
        padding: 0.05rem 0.2rem;
    }
}

@media (max-width: 400px) {
    .widget-content-right {
        flex: 0 0 150px;
        min-width: 150px;
    }
    
    .widget-numbers {
        font-size: 0.5rem;
    }
    
    .widget-heading {
        font-size: 0.45rem;
        margin-bottom: 0.02rem;
        line-height: 1.0;
    }
    
    .widget-subheading {
        font-size: 0.3rem;
        line-height: 1.0;
    }
    
    .widget-content {
        padding: 0.03rem 0.15rem;
    }
}

@media (max-width: 350px) {
    .widget-content-right {
        flex: 0 0 120px;
        min-width: 120px;
    }
    
    .widget-numbers {
        font-size: 0.45rem;
    }
    
    .widget-heading {
        font-size: 0.4rem;
        margin-bottom: 0.01rem;
        line-height: 1.0;
    }
    
    .widget-subheading {
        font-size: 0.25rem;
        line-height: 1.0;
    }
    
    .widget-content {
        padding: 0.02rem 0.1rem;
    }
}

/* Tablet için özel düzenlemeler */
@media (min-width: 768px) and (max-width: 1024px) {
    .main-card .row {
        display: flex;
        flex-wrap: wrap;
    }
    
    .main-card .row > div {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .widget-numbers {
        font-size: 1.2rem;
    }
    
    .widget-heading {
        font-size: 0.8rem;
    }
    
    .widget-subheading {
        font-size: 0.65rem;
    }
}