:root{
--c2: rgb(36,187,208);
--c1: rgb(80,93,212);
}

.pulseShift {filter: hue-rotate(122deg); transition: 3.5s;}


/* SYNC BUTTONS */

.pulsify,.pulsify:hover,.btn-check:focus+.pulsify, .pulsify:focus {
color: white !important;
transition: 0.5s;
/* background: linear-gradient(45deg, var(--p1, rgb(36,187,208)), var(--p2, rgba(80,93,212,1) ) 51%, var(--p1, rgb(36,187,208))) var(--x, 0)/ 200% !important; */
--c2: rgb(255 0 102) !important;
--c1: rgb(62 47 166) !important;
}

.pulseVars{
--c2: rgb(255 0 102) !important;
--c1: rgb(62 47 166) !important;
/* --c2: rgb(208, 36, 105) !important;
--c1: rgb(80, 82, 212) !important; */
}


.nav{
  font-variant-caps: small-caps;
  font-weight: 500;
  font-size: xx-large;
}

/* //Page buttons

//btn btn-sm btn-falcon-default */
/*
.col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1,
.col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1,
.col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1
 {border: 1px solid red;} */


/* SYNC BUTTONS */

.btn,.btn-falcon-primary:hover,.btn-check:focus+.btn-falcon-primary, .btn-falcon-primary:focus {
      color: white !important;
      transition: 0.5s;
      background: linear-gradient(45deg, var(--c1, rgb(36,187,208)), var(--c2, rgba(80,93,212,1) ) 51%, var(--c1, rgb(36,187,208))) var(--x, 0)/ 200%;
      --c2: rgb(36,187,208);
      --c1: rgb(80,93,212) !important;
}

.btn:hover,.btn-falcon-primary:hover {
            --x: 100%;
            color: white !important;
}

.btn-falcon-primary:hover:not(.disabled):not(:disabled), .btn-falcon-primary:focus:not(.disabled):not(:disabled) {
            color: white !important;
}

.btn-falcon-primary:disabled, .btn-falcon-primary.disabled {
    background-image: linear-gradient( 45deg , rgb(80,93,212) 0%, rgb(36,187,208) 100%) !important;
}


.table thead th .asc:before {
   border-width: 6px;
   margin-top: -9px;
   right: 10px;
   border-bottom-color: #3f3f3f;
 }
 .table thead th .asc:after {
   content: " ";
 }
.table thead th .desc:before {
   content: "none";
 }
.table thead th .desc:after {
   border-width: 6px;
   margin-top: -2px;
   right: 10px;
   border-top-color: #3f3f3f;
 }


section {
    padding-top: 30px !important;
  }


  .coolscroll::-webkit-scrollbar-track
  {
  	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  	background-color: transparent;
  	border-radius: 10px;
  }

  .coolscroll::-webkit-scrollbar
  {
  	width: 10px;
  	background-color: transparent;
  }

  .coolscroll::-webkit-scrollbar-thumb
  {
  	background-image: -webkit-gradient(linear,
  									   left bottom,
  									   left top,
  									   color-stop(0, #24BBD0 ),
  									   color-stop(1, #505DD4));
  }

  ::-webkit-scrollbar {
      height: 5px;
      width: 5px;
  }
  ::-webkit-scrollbar-thumb {
      background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#24bbd0),color-stop(1,#505dd4));
      border-radius: 5px;
  }
  /* ::-webkit-scrollbar-track {
      background: transparent !important;
      border-radius: 5px;
  } */


  .COMMON {
    box-shadow: inset 0 30px 30px #212134;
    background: radial-gradient(#000 0.5px,transparent 0.5px) 0   0   /3px 3px,
                radial-gradient(#000 0.5px,transparent 0.5px) 1px 1px /3px 3px,
                radial-gradient(#000 0.5px,transparent 0.5px) 2px 2px /3px 3px,
				 linear-gradient(to top, #212134, #838489);
    animation: pulse 2s infinite;
}

.GEN1 {
    box-shadow: inset -5px 2px 90px -9px #000c44;
    background: radial-gradient(#000 0.5px,transparent 0.5px) 0   0   /3px 3px,
                radial-gradient(#000 0.5px,transparent 0.5px) 1px 1px /3px 3px,
                radial-gradient(#000 0.5px,transparent 0.5px) 2px 2px /3px 3px;
    animation: pulse 2s infinite;
}
.RARE {
  /* box-shadow: inset 0px 0px 30px -9px #09BFC9;
  background: radial-gradient(#000000 0.5px,transparent 0.5px) 0 0 /3px 3px, radial-gradient(#000000 0.5px,transparent 0.5px) 1px 1px /3px 3px, radial-gradient(#000000 0.5px,transparent 0.5px) 2px 2px /3px 3px; */
    background: radial-gradient(#000 0.5px,transparent 0.5px) 0   0   /3px 3px,
                radial-gradient(#000 0.5px,transparent 0.5px) 1px 1px /3px 3px,
                radial-gradient(#000 0.5px,transparent 0.5px) 2px 2px /3px 3px,
                linear-gradient(to top, #16295b, #8384c7);
  box-shadow: inset 0 30px 30px #16295b;
  /* box-shadow: inset 0 30px 30px #212134; */
  animation: pulse 2s infinite;
}

.EPIC {
  background:   radial-gradient(#000 0.5px,transparent 0.5px) 0   0   /3px 3px,
                radial-gradient(#000 0.5px,transparent 0.5px) 1px 1px /3px 3px,
                radial-gradient(#000 0.5px,transparent 0.5px) 2px 2px /3px 3px,
                linear-gradient(to top, #16295b, #8384c7);
  box-shadow: inset 0 8px 12px #16295b;
  animation: pulse 5s infinite;
  filter: brightness(1.8);
  transition:1s;
}

.EPIC:hover {filter: brightness(1.6);}
.EPIC:hover > td {filter: brightness(.7) contrast(1);text-shadow:0px 0px 0px black;transition:1s} 
.EPIC > td {filter: brightness(0.8) contrast(.75);text-shadow:0px 0px 3px black, 0px 0px 18px black;transition:1s} 

.LEGENDARY {
  background: linear-gradient(0deg,#00000000 30% , #2b2b2b69 45%,#4c4c4c40 60%, #00000000 70%), linear-gradient(to top, #4f2c04, #ffd046);
  box-shadow: inset 0 17px 17px #4f2c04;
  animation: pulse 2s infinite;
	filter: brightness(1);
	transition:1s
}

.LEGENDARY:hover {filter: brightness(1.3);}
.LEGENDARY:hover > td > h3 {filter: brightness(1) contrast(1); transition:.15s} 
.LEGENDARY > td > h3 {filter: brightness(1) contrast(1);  transition:1s; color: wheat;} 
.LEGENDARY > td {text-shadow:0px 0px 3px #feab00, 0px 0px 10px #eeb320,0px 0px 20px black;}

.LUCKY {
  background: radial-gradient(#000 0.5px,transparent 0.5px) 0   0   /3px 3px,
              radial-gradient(#000 0.5px,transparent 0.5px) 1px 1px /3px 3px,
              radial-gradient(#000 0.5px,transparent 0.5px) 2px 2px /3px 3px,
              linear-gradient(to top, #1138b4, #12add9);
  box-shadow: inset 0 7px 8px #1138b4;
}

.LUCKY:hover {filter: brightness(1);}
.LUCKY:hover > td {filter: brightness(1) contrast(1); text-shadow:0px 0px 0px black;transition:1s} 
.LUCKY > td {filter: brightness(0.8) contrast(.75); text-shadow:0px 0px 3px black, 0px 0px 18px black;transition:1s} 

@keyframes pulse {
	0% {
		opacity: 1;
	}

	70% {
		opacity: .8;
	}

	100% {
		opacity: 1;
	}
}

.card {background-color: #f6f9fc;
  -webkit-box-shadow: 0 7px 14px 0 rgb(65 69 88 / 22%), 0 3px 6px 0 rgb(0 0 0 / 16%) !important;
  box-shadow: 0 7px 14px 0 rgb(65 69 88 / 22%), 0 3px 6px 0 rgb(0 0 0 / 16%) !important;
}

.sync { color: transparent;
  background: linear-gradient( to left, #38F9EC, #46DBF1, #58B5F6, #6599FA, #7479FF, #38F9EC );
  background-size: 1000px 100%;
  animation: bg 25s linear infinite;
  background-clip: text;
  -webkit-background-clip: text;
  animation-duration: 25s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: bg;
}

@keyframes bg {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 10000px;
  }
}


.page {
    margin: 0 3px;
    display: inline-block;
    font-weight: 500;
    line-height: 1.5;
    color: #5e6e82;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .3125rem 1rem;
    font-size: 1rem;
    border-radius: .25rem;
    -webkit-transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;
    -o-transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;
}

.page {
    padding: .1875rem .75rem;
    font-size: .875rem;
    border-radius: .2rem;
}

.page {
  margin: 0 3px;
    color: #4d5969;
    background-color: #fff;
    background-image: var(--bs-gradient);
    border-color: #fff;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1px rgba(0,0,0,0.075);
    -webkit-box-shadow: 0 0 0 1px rgba(43,45,80,0.1),0 2px 5px 0 rgba(43,45,80,0.08),0 1px 1.5px 0 rgba(0,0,0,0.07),0 1px 2px 0 rgba(0,0,0,0.08) !important;
    box-shadow: 0 0 0 1px rgba(43,45,80,0.1),0 2px 5px 0 rgba(43,45,80,0.08),0 1px 1.5px 0 rgba(0,0,0,0.07),0 1px 2px 0 rgba(0,0,0,0.08) !important;
}

.page:hover:not(.disabled):not(:disabled), .page:focus:not(.disabled):not(:disabled) {
    color: #010305 !important;
    -webkit-box-shadow: 0 0 0 1px rgba(43,45,80,0.1), 0 2px 5px 0 rgba(43,45,80,0.1), 0 3px 9px 0 rgba(43,45,80,0.08), 0 1px 1.5px 0 rgba(0,0,0,0.08), 0 1px 2px 0 rgba(0,0,0,0.08);
    box-shadow: 0 0 0 1px rgba(43,45,80,0.1), 0 2px 5px 0 rgba(43,45,80,0.1), 0 3px 9px 0 rgba(43,45,80,0.08), 0 1px 1.5px 0 rgba(0,0,0,0.08), 0 1px 2px 0 rgba(0,0,0,0.08);
}

.page:active {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    color: #010305 !important;
}

.page:active  {
    color: #4d5969;
    background-color: #e6e6e6;
    background-image: none;
    border-color: #dfdfdf;
  }

  .page:hover {
      color: #4d5969;
      background-color: #fff;
      background-image: var(--bs-gradient);
      border-color: #fff;
  }

/* #Weird Fixes */

.navbar .dropdown-menu:after {-webkit-box-shadow: none; box-shadow: none;}

/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&text=%21'); */

/* Helper Class */
.dill {
  display:inline !important;
  border: 1px solid red;
}

.tokenimg {    z-index: 2;    }  /* Change Order and Shade box-shadow: 2px 2px 3px 1px #00000087; */

.tokenimg, .baseimg {    box-shadow: -3px 2px 3px #00000059,2px 2px 3px 1px #00000087;
    border-radius: 250px;
    transition: all 0.6s ease;
  }

  .tokenimg:hover,.baseimg:hover {
    transform: scale(1.02);
    box-shadow: -5px 4px 5px #00000039, 0px 0px 5px var(--cyan), 0px 0px 5px var(--cyan), 0px 0px 10px #6b4eff, 0px 0px 20px indianred;
}

.bondloader {
  animation: loaderspin 1s infinite linear;
  border: solid 2vmin transparent;
  border-radius: 50%;
  border-right-color: #09f;
  border-top-color: #09f;
  box-sizing: border-box;
  height: 20vmin;
  left: calc(50% - 10vmin);
  position: fixed;
  top: calc(50% - 10vmin);
  width: 20vmin;
  z-index: 1;
}
.bondloader:before {
  animation: loaderspin 2s infinite linear;
  border: solid 2vmin transparent;
  border-radius: 50%;
  border-right-color: #3cf;
  border-top-color: #3cf;
  box-sizing: border-box;
  content: "";
  height: 16vmin;
  left: 0;
  position: absolute;
  top: 0;
  width: 16vmin;
}
.bondloader:after {
  animation: loaderspin 3s infinite linear;
  border: solid 2vmin transparent;
  border-radius: 50%;
  border-right-color: #6ff;
  border-top-color: #6ff;
  box-sizing: border-box;
  content: "";
  height: 12vmin;
  left: 2vmin;
  position: absolute;
  top: 2vmin;
  width: 12vmin;
}

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

#syncAmount, #earningRate {
  overflow: hidden;
    height: 28px;
}
/*LOADER-Bars*/
.loader-Bars {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 5px;
  display: inline-block;
  vertical-align: revert;
}
.loader-Bars .line {
  width: 8px;
  position: absolute;
  border-radius: 5px;
  bottom: 0;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#505DD4),
    to(#24BBD0)
  );
  background: -webkit-linear-gradient(top, #24BBD0, #505DD4);
  background: -o-linear-gradient(top, #24BBD0, #505DD4);
  background: linear-gradient(to bottom, #24BBD0, #505DD4);
}

.loader-Bars .line1 {
  left: 0;
  -webkit-animation: line-grow 0.5s ease alternate infinite;
  animation: line-grow 0.5s ease alternate infinite;
}

.loader-Bars .line2 {
  left: 20px;
  -webkit-animation: line-grow 0.5s 0.2s ease alternate infinite;
  animation: line-grow 0.5s 0.2s ease alternate infinite;
}

.loader-Bars .line3 {
  left: 40px;
  -webkit-animation: line-grow 0.5s 0.4s ease alternate infinite;
  animation: line-grow 0.5s 0.4s ease alternate infinite;
}
@-webkit-keyframes line-grow {
  0% {
    height: 0;
  }
  100% {
    height: 75%;
  }
}

@keyframes line-grow {
  0% {
    height: 0;
  }
  100% {
    height: 75%;
  }
}
/*  Data loader Bars   */

.blinking-cursor {
  font-weight: 100;
  font-size: 30px;
  color: #2E3D48;
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}

@keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-moz-keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-webkit-keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

 canvas{ display: block; }
  /* ---- particles.js container ---- */
/*  #particles-js{ position:absolute;
    top: 1px;
    bottom: 371px;
    left:1px;
    right: 1px;

 background-color: #edf2f9;
    background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;

  }
   /* ---- particles.js container ---- */
 #par4ticles {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #edf2f9;
  background-size: cover;
  background-position: 50% 50%;
}

.particles-js-canvas-el {position:fixed; opacity:.8;
  top: 1px;
  bottom: 371px;
  left:1px;
  right: 1px;}

  @font-face {
    font-family: 'cgMontserrat';
  	src: url('syncfont.woff2') format("woff");
    unicode-range: U+A7;
  }

/* #syncAmount,  #earningRate */
.text {
  font-family: "Montserrat" !important;
  /*, "Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
*/
}



.bond:hover, .bond:active, .active {    background-color: #24BBD0;}

.text {
  fill: none;
  /* text-shaedow: 0 0 10px #24BBD08a; */
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-dasharray: 60 240;
  stroke-dashoffset: 0;
  -webkit-animation: stroke 10s infinite linear;
 animation: stroke 10s infinite linear;

}
.text:nth-child(5n + 1) {
  stroke: #505DD4;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}
.text:nth-child(5n + 2) {
  stroke: #24BBD0;
  -webkit-animation-delay: -4s;
  animation-delay: -4s;
}
.text:nth-child(5n + 3) {
  stroke: #398dd2;
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}
.text:nth-child(5n + 4) {
  stroke: #505DD4;
  -webkit-animation-delay: -8s;
  animation-delay: -8s;
}
.text:nth-child(5n + 5) {
  stroke: #24BBD0;
  -webkit-animation-delay: -10s;
  animation-delay: -10s;
}

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -300;
  }
}
@keyframes stroke {
  100% {
    stroke-dashoffset: -300;
  }
}


.original,
.box {
  border-radius: 6px;
}
/* .original {
} */
.box {
  line-height: 95px;
  text-align: center;
}
.spin {
  cursor: pointer;
  transform-style: preserve-3d;
}
.spin {
    animation: spin 20s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  33% {
    transform: rotateY(45deg);
  }
  66% {
    transform: rotateY(-45deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
.box-1 {
  transform: perspective(200px) rotateX(45deg);
}
.box-2 {
  transform: perspective(200px) rotateY(45deg);
}
.box-3 {
  transform: perspective(200px) rotateZ(10deg);
}


#syncAmountAlert {color:red;}

.hover-cyan:focus, .hover-cyan:hover {
    color: #15aabf;
}

.img-magnifier-glass {
  position: absolute;
  border: 2px solid #333;
  border-radius: 50% 50% 0 0%;
  cursor: none;
  /*Set the size of the magnifier glass:*/
  width: 200px;
  height: 200px;
}

/*  Decided against experimental font in favor of more standard font.

@font-face{
	font-family:Avenir Next;
	src:url(fonts/AvenirNext/AvenirNextLTPro-Heavy.otf) format("truetype");
	font-weight:700
}
@font-face{
	font-family:Avenir Next;
	src:url(fonts/AvenirNext/AvenirNextLTPro-Bold.otf) format("truetype");
	font-weight:600
}
@font-face{
	font-family:Avenir Next;
	src:url(fonts/AvenirNext/AvenirNextLTPro-BoldItalic.otf) format("truetype");
	font-weight:600;
	font-style:italic
}
@font-face{
	font-family:Avenir Next;
	src:url(fonts/AvenirNext/AvenirNextLTPro-Demi.otf) format("truetype");
	font-weight:500
}
@font-face{
	font-family:Avenir Next;
	src:url(fonts/AvenirNext/AvenirNextLTPro-DemiIt.otf) format("truetype");
	font-weight:500;
	font-style:italic
}
@font-face{
	font-family:Avenir Next;
	src:url(fonts/AvenirNext/AvenirNextLTPro-Medium.otf) format("truetype");
	font-weight:400
}
@font-face{
	font-family:Avenir Next;
	src:url(fonts/AvenirNext/AvenirNextLTPro-MediumItalic.otf) format("truetype");
	font-weight:400;
	font-style:italic
}
@font-face{
	font-family:Avenir Next;
	src:url(fonts/AvenirNext/AvenirNextLTPro-Regular.otf) format("truetype");
	font-weight:300
}
@font-face{
	font-family:Avenir Next;
	src:url(fonts/AvenirNext/AvenirNextLTPro-It.otf) format("truetype");
	font-weight:300;
	font-style:italic
}

* { font-family: Avenir Next !important;}

*/

.pulsechain {filter: hue-rotate(45deg)}