/*
==========================================================
 KONECTA CRYPTOS
 BRAND SYSTEM V1
==========================================================

 COLOR OFICIAL:
 #0099EC
==========================================================
*/

:root{

  /* ==========================================
     BRAND
  ========================================== */

  --konecta-blue:#0099EC;

  --konecta-blue-rgb:
    0,153,236;

  --konecta-blue-hover:
    #18A6F2;

  --konecta-blue-deep:
    #0076BC;

  --konecta-blue-dark:
    #005F99;

  --konecta-blue-soft:
    rgba(0,153,236,.10);

  --konecta-blue-soft2:
    rgba(0,153,236,.16);

  --konecta-blue-glow:
    rgba(0,153,236,.28);

  --konecta-blue-glow2:
    rgba(0,153,236,.45);


  /* ==========================================
     SECONDARY CHART COLORS
  ========================================== */

  --konecta-cyan:
    #32D6F5;

  --konecta-green:
    #24D99C;

  --konecta-violet:
    #8C73F6;

  --konecta-pink:
    #EA66CE;

  --konecta-yellow:
    #FFC14B;

  --konecta-red:
    #FF6178;


  /* ==========================================
     DARK DEFAULT
  ========================================== */

  --kc-page-bg:
    #03070B;

  --kc-page-bg2:
    #060D14;

  --kc-surface:
    #091521;

  --kc-surface2:
    #0D1C2A;

  --kc-surface3:
    #102234;

  --kc-text:
    #F7FBFF;

  --kc-text2:
    #D7E5F0;

  --kc-muted:
    #8298AC;

  --kc-muted2:
    #637B91;

  --kc-border:
    rgba(255,255,255,.075);

  --kc-header:
    rgba(3,7,11,.91);

  --kc-footer-bg:
    #060A12;

  --kc-shadow:
    rgba(0,0,0,.35);

  color-scheme:dark;
}


/* ==========================================================
   DARK
========================================================== */

html[data-kc-theme="dark"]{

  --kc-page-bg:#03070B;
  --kc-page-bg2:#060D14;

  --kc-surface:#091521;
  --kc-surface2:#0D1C2A;
  --kc-surface3:#102234;

  --kc-text:#F7FBFF;
  --kc-text2:#D7E5F0;

  --kc-muted:#8298AC;
  --kc-muted2:#637B91;

  --kc-border:
    rgba(255,255,255,.075);

  --kc-header:
    rgba(3,7,11,.92);

  --kc-footer-bg:
    #060A12;

  --kc-shadow:
    rgba(0,0,0,.35);

  color-scheme:dark;
}


/* ==========================================================
   LIGHT
========================================================== */

html[data-kc-theme="light"]{

  --kc-page-bg:
    #F6F9FC;

  --kc-page-bg2:
    #FFFFFF;

  --kc-surface:
    #FFFFFF;

  --kc-surface2:
    #F2F7FB;

  --kc-surface3:
    #EAF2F8;

  --kc-text:
    #17212B;

  --kc-text2:
    #293743;

  --kc-muted:
    #617385;

  --kc-muted2:
    #81909D;

  --kc-border:
    rgba(27,48,66,.105);

  --kc-header:
    rgba(255,255,255,.91);

  --kc-footer-bg:
    #EAF6FC;

  --kc-shadow:
    rgba(16,43,63,.12);

  color-scheme:light;
}


/* ==========================================================
   BODY
========================================================== */

html,
body{

  transition:
    background .38s ease,
    color .38s ease;
}

body{

  color:
    var(--kc-text) !important;

  background:
    radial-gradient(
      900px 600px
      at 78% 4%,
      rgba(
        var(--konecta-blue-rgb),
        .13
      ),
      transparent 66%
    ),
    linear-gradient(
      180deg,
      var(--kc-page-bg),
      var(--kc-page-bg2)
    ) !important;
}


/* ==========================================================
   OFFICIAL BLUE OVERRIDES
========================================================== */

.btn-main,
.kc-op-main,
.kc-page-cta,
.newsletter button,
.kc-media-save{

  background:
    linear-gradient(
      135deg,
      #10A5F5,
      var(--konecta-blue)
    ) !important;

  border-color:
    rgba(
      var(--konecta-blue-rgb),
      .42
    ) !important;

  box-shadow:
    0 14px 40px
    var(--konecta-blue-soft) !important;
}


.btn-main:hover,
.kc-op-main:hover,
.kc-page-cta:hover{

  box-shadow:
    0 18px 52px
    var(--konecta-blue-glow) !important;
}


.section-label,
.kpx-label,
.kc-ops-kicker,
.next-kicker,
.kc-op-number{

  color:
    var(--konecta-blue) !important;
}


.logo,
.brand-logo,
.brand-logo,
.window-logo,
.app-mini-logo,
.kc-page-logo,
.kc-page-logo,
.kc-page-logo,
.kc-page-logo,
.kc-page-logo{

  background:
    linear-gradient(
      145deg,
      #16A8F5,
      var(--konecta-blue)
    ) !important;
}


.hero-dot.active{

  background:
    linear-gradient(
      90deg,
      var(--konecta-blue),
      var(--konecta-cyan)
    ) !important;
}


.kc-scroll-progress{

  background:
    linear-gradient(
      90deg,
      var(--konecta-blue),
      var(--konecta-cyan),
      var(--konecta-violet),
      var(--konecta-pink),
      var(--konecta-yellow)
    ) !important;
}


/* ==========================================================
   HEADER STICKY
========================================================== */

body > header{

  background:
    var(--kc-header) !important;

  border-bottom:
    1px solid
    var(--kc-border) !important;

  backdrop-filter:
    blur(22px)
    saturate(145%) !important;

  -webkit-backdrop-filter:
    blur(22px)
    saturate(145%) !important;

  transition:
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease !important;
}


body > header.kc-scrolled{

  box-shadow:
    0 16px 48px
    var(--kc-shadow) !important;
}


/* ==========================================================
   LINKS HEADER
========================================================== */

nav a,
.kc-mega-trigger{

  color:
    var(--kc-muted) !important;
}


nav a:hover,
.kc-mega-trigger:hover{

  color:
    var(--kc-text) !important;
}


/* ==========================================================
   BRAND LOGO REAL
========================================================== */

.kc-brand-with-theme-logo{

  display:flex !important;

  align-items:center !important;
}


.kc-brand-with-theme-logo
> *:not(.kc-theme-brand-logo){

  display:none !important;
}


.kc-theme-brand-logo{

  display:block;

  width:auto;

  max-width:220px;

  height:46px;

  object-fit:contain;
}


footer
.kc-theme-brand-logo{

  max-width:235px;

  height:52px;
}


/* ==========================================================
   THEME BUTTON
========================================================== */

.kc-theme-toggle{

  width:43px;
  height:43px;

  display:grid;
  place-items:center;

  flex:0 0 auto;

  padding:0;

  cursor:pointer;

  border-radius:13px;

  border:
    1px solid
    var(--kc-border);

  color:
    var(--kc-text);

  background:
    rgba(
      127,150,170,
      .06
    );

  transition:
    transform .22s ease,
    background .22s ease,
    border-color .22s ease;
}


.kc-theme-toggle:hover{

  transform:
    translateY(-2px)
    rotate(4deg);

  border-color:
    rgba(
      var(--konecta-blue-rgb),
      .28
    );

  background:
    var(--konecta-blue-soft);
}


.kc-theme-toggle-icon{

  font-size:17px;

  line-height:1;
}


/* ==========================================================
   GENERAL SURFACES
========================================================== */

.panel,
.window,
.app-window,
.analytics-large,
.analytics-card,
.circle-stat,
.service,
.placeholder,
.kpx-market,
.kpx-terminal,
.kpx-mainchart,
.kpx-sidebox,
.kpx-bottom-card,
.kpx-ecosystem,
.kc-detail-card,
.kc-live-widget,
.kc-flow-widget,
.kc-withdraw-widget,
.kc-convert-widget{

  border-color:
    var(--kc-border) !important;

  transition:
    background .35s ease,
    border-color .35s ease,
    color .35s ease,
    box-shadow .35s ease;
}


/* ==========================================================
   LIGHT HOME
========================================================== */

html[data-kc-theme="light"]
body{

  background:
    radial-gradient(
      900px 620px
      at 82% 2%,
      rgba(
        var(--konecta-blue-rgb),
        .10
      ),
      transparent 67%
    ),
    radial-gradient(
      700px 450px
      at 5% 35%,
      rgba(50,214,245,.08),
      transparent 68%
    ),
    #F6F9FC !important;
}


html[data-kc-theme="light"]
body:before{

  opacity:.42;

  background-image:
    linear-gradient(
      rgba(25,55,75,.028) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(25,55,75,.028) 1px,
      transparent 1px
    ) !important;
}


/* ==========================================================
   LIGHT HEADER
========================================================== */

html[data-kc-theme="light"]
body > header{

  background:
    rgba(255,255,255,.91) !important;

  box-shadow:
    0 6px 28px
    rgba(20,50,70,.045);
}


html[data-kc-theme="light"]
.btn-soft,
html[data-kc-theme="light"]
.kc-page-login{

  color:#253746 !important;

  background:
    rgba(25,71,99,.035) !important;

  border-color:
    rgba(24,53,72,.10) !important;
}


/* ==========================================================
   LIGHT TYPOGRAPHY
========================================================== */

html[data-kc-theme="light"]
.hero-copy p,

html[data-kc-theme="light"]
.section-text,

html[data-kc-theme="light"]
.kc-ops-heading p,

html[data-kc-theme="light"]
.kc-op-copy p,

html[data-kc-theme="light"]
.kpx-copy,

html[data-kc-theme="light"]
.kpx-market-copy p,

html[data-kc-theme="light"]
.kpx-eco-copy p,

html[data-kc-theme="light"]
.kc-page-hero-copy p{

  color:
    #627689 !important;
}


html[data-kc-theme="light"]
.hero-copy h1,

html[data-kc-theme="light"]
.section-title,

html[data-kc-theme="light"]
.kc-ops-heading h2,

html[data-kc-theme="light"]
.kc-op-copy h3,

html[data-kc-theme="light"]
.kpx-title,

html[data-kc-theme="light"]
.kpx-market-copy h3,

html[data-kc-theme="light"]
.kpx-eco-copy h2,

html[data-kc-theme="light"]
.kc-page-hero-copy h1{

  color:
    #17232D !important;
}


html[data-kc-theme="light"]
.hero-copy h1 span{

  background:
    linear-gradient(
      90deg,
      #17232D,
      var(--konecta-blue)
    ) !important;

  -webkit-background-clip:
    text !important;

  color:
    transparent !important;
}


/* ==========================================================
   LIGHT WINDOW / DASHBOARD
========================================================== */

html[data-kc-theme="light"]
.window,

html[data-kc-theme="light"]
.app-window,

html[data-kc-theme="light"]
.panel{

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.97),
      rgba(240,247,252,.98)
    ) !important;

  border-color:
    rgba(26,58,79,.09) !important;

  box-shadow:
    0 35px 90px
    rgba(30,65,90,.10) !important;
}


html[data-kc-theme="light"]
.multi-grid,

html[data-kc-theme="light"]
.analytics-chart,

html[data-kc-theme="light"]
.combo-chart,

html[data-kc-theme="light"]
.candle-chart{

  background-image:
    linear-gradient(
      rgba(22,55,77,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(22,55,77,.045) 1px,
      transparent 1px
    ) !important;
}


/* ==========================================================
   LIGHT SERVICE CARDS
========================================================== */

html[data-kc-theme="light"]
.service,

html[data-kc-theme="light"]
.circle-stat,

html[data-kc-theme="light"]
.analytics-large,

html[data-kc-theme="light"]
.analytics-card,

html[data-kc-theme="light"]
.placeholder,

html[data-kc-theme="light"]
.kc-detail-card{

  background:
    linear-gradient(
      145deg,
      #FFFFFF,
      #F1F6FA
    ) !important;

  color:
    #182630 !important;

  border-color:
    rgba(27,59,81,.09) !important;

  box-shadow:
    0 18px 55px
    rgba(25,56,77,.055);
}


/* ==========================================================
   LIGHT OPERATIONS
========================================================== */

html[data-kc-theme="light"]
.kc-operation{

  color:
    #17242E !important;
}


html[data-kc-theme="light"]
.kc-operation:before{

  color:
    rgba(23,54,77,.035) !important;
}


html[data-kc-theme="light"]
.kc-operation:not(:last-child):after{

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        var(--konecta-blue-rgb),
        .20
      ),
      rgba(30,60,78,.09),
      transparent
    ) !important;
}


html[data-kc-theme="light"]
.kc-live-widget,

html[data-kc-theme="light"]
.kc-flow-widget,

html[data-kc-theme="light"]
.kc-withdraw-widget,

html[data-kc-theme="light"]
.kc-convert-widget{

  color:
    #182630 !important;

  background:
    rgba(255,255,255,.94) !important;

  border-color:
    rgba(29,61,82,.10) !important;

  box-shadow:
    0 25px 75px
    rgba(25,55,76,.14) !important;
}


html[data-kc-theme="light"]
.kc-sim-input,

html[data-kc-theme="light"]
.kc-convert-box{

  color:
    #182630 !important;

  background:
    #EDF4F8 !important;

  border-color:
    rgba(30,60,80,.10) !important;
}


html[data-kc-theme="light"]
.kc-sim-unit{

  color:
    var(--konecta-blue) !important;

  background:
    #E7F4FB !important;
}


/* ==========================================================
   LIGHT MEGA MENU
========================================================== */

html[data-kc-theme="light"]
.kc-mega-panel{

  background:
    rgba(255,255,255,.985) !important;

  border-color:
    rgba(24,52,72,.10) !important;

  box-shadow:
    0 30px 90px
    rgba(30,60,82,.14) !important;
}


html[data-kc-theme="light"]
.kc-mega-card:hover{

  background:
    rgba(
      var(--konecta-blue-rgb),
      .055
    ) !important;
}


html[data-kc-theme="light"]
.kc-mega-copy strong{

  color:
    #1C2C38 !important;
}


html[data-kc-theme="light"]
.kc-mega-copy span{

  color:
    #697F91 !important;
}


/* ==========================================================
   LIGHT CIRCLES
========================================================== */

html[data-kc-theme="light"]
.stat-ring:before,

html[data-kc-theme="light"]
.kpx-ring:after,

html[data-kc-theme="light"]
.wallet-donut:after,

html[data-kc-theme="light"]
.large-donut:after,

html[data-kc-theme="light"]
.rings-mini:after,

html[data-kc-theme="light"]
.donut:after{

  background:
    #F8FBFD !important;
}


/* ==========================================================
   LIGHT ECOSYSTEM
========================================================== */

html[data-kc-theme="light"]
.radial-box,

html[data-kc-theme="light"]
.kpx-ecosystem,

html[data-kc-theme="light"]
.kpx-market{

  background:
    radial-gradient(
      520px 410px
      at 72% 50%,
      rgba(
        var(--konecta-blue-rgb),
        .10
      ),
      transparent 70%
    ),
    linear-gradient(
      145deg,
      #FFFFFF,
      #EEF5F9
    ) !important;

  border-color:
    rgba(25,57,77,.095) !important;
}


html[data-kc-theme="light"]
.radial-center,

html[data-kc-theme="light"]
.kpx-network-core{

  color:
    #17242E !important;

  background:
    radial-gradient(
      circle,
      #FFFFFF,
      #EAF3F8 70%
    ) !important;

  border-color:
    rgba(
      var(--konecta-blue-rgb),
      .22
    ) !important;
}


/* ==========================================================
   FOOTER DARK
========================================================== */

footer{

  transition:
    background .4s ease,
    color .4s ease,
    border-color .4s ease;
}


/* ==========================================================
   FOOTER LIGHT
========================================================== */

html[data-kc-theme="light"]
footer{

  background:
    radial-gradient(
      650px 350px
      at 10% 10%,
      rgba(
        var(--konecta-blue-rgb),
        .11
      ),
      transparent 70%
    ),
    radial-gradient(
      650px 350px
      at 90% 15%,
      rgba(54,215,245,.10),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #EDF8FD,
      #E5F2F8
    ) !important;

  color:
    #526C80 !important;

  border-color:
    rgba(
      var(--konecta-blue-rgb),
      .13
    ) !important;
}


html[data-kc-theme="light"]
.footer-news h2,

html[data-kc-theme="light"]
.footer-col strong{

  color:
    #1D3242 !important;
}


html[data-kc-theme="light"]
.footer-col a,

html[data-kc-theme="light"]
.footer-brand-copy{

  color:
    #61798B !important;
}


html[data-kc-theme="light"]
.footer-badge{

  color:
    #506E82 !important;

  background:
    rgba(255,255,255,.5) !important;

  border-color:
    rgba(29,62,83,.09) !important;
}


/* ==========================================================
   THEME TRANSITION COVER
========================================================== */

.kc-theme-transition{

  position:fixed;

  inset:0;

  z-index:50000;

  pointer-events:none;

  opacity:0;

  background:
    radial-gradient(
      circle
      at var(--kc-switch-x,90%)
         var(--kc-switch-y,7%),
      rgba(
        var(--konecta-blue-rgb),
        .22
      ),
      transparent 42%
    );

  transition:
    opacity .18s ease;
}


.kc-theme-transition.active{

  opacity:1;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:760px){

  .kc-theme-toggle{

    width:40px;
    height:40px;
  }

  .kc-theme-brand-logo{

    max-width:165px;

    height:38px;
  }

}


@media(prefers-reduced-motion:reduce){

  html,
  body,
  body > header,
  footer{

    transition:none !important;
  }

}