/* GLOBAL COLOR */
:root {
  --accent-color:#FFF;
  --main-color:#071B3C;
  font-size: 10px !important;
}
/* END GLOBAL COLOR */

/* GLOBAL BUTTON RIPPLE ANIMATION */
.global-ripple-button.ripple-button{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  white-space:nowrap;
  line-height:normal;
  overflow:hidden;
  position:relative;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-font-smoothing:subpixel-antialiased;
  -webkit-perspective:1000;
  will-change:transform;
  --amplitude:5%;
  text-decoration:none;
  border:0;
  cursor:pointer;
  user-select:none;
}
.global-ripple-button .ripple-button__line{
  display: inline-flex;
  align-items: center;
  width: 100%;
  
}

.global-ripple-button .ripple-button__line--ghost{
  opacity: 0;
}
.global-ripple-button .ripple-button__pseudo{
  width:100%;
  text-align:center;
  position:relative;
  overflow:hidden;
  will-change:transform;
  display:inline-block;
}

.global-ripple-button .ripple-button__text{
  opacity:0;
  display:inline-block;
  will-change:transform;
}

.global-ripple-button .ripple-button__before{
  right:0;
  width:100%;
  text-align:center;
  line-height:inherit;
  position:absolute;
  top:0;
  left:0;
  will-change:transform;
}
.global-ripple-button .ripple-button__after svg,
.global-ripple-button .ripple-button__after svg *{
  fill: var(--accent-color) !important;
}

.global-ripple-button .ripple-button__after i{
  color: var(--accent-color); /* icon font */
}
.global-ripple-button .ripple-button__after{
  position:absolute;
  top:-300%;
  left:0;
  right:0;
  width:100%;
  text-align:center;
  line-height:inherit;
  z-index:5;
  color:rgb(255, 255, 255);
  will-change:transform;
}

.global-ripple-button .ripple-button__hover-fill{
  position:absolute;
  top:110%;
  left:calc(var(--amplitude) * -1);
  height:150%;
  width:calc(100% + var(--amplitude) * 2);
  background:#000;
  z-index:-5;
  border-radius:50% 50% 0 0;
  will-change:transform;
}
/* END GLOBAL BUTTON RIPPLE ANIMATION */

/* GLOBAL BUTTON UNDERLINE ANIMATION */
.underline-button {
  position: relative;
  display: inline-block;
  --after-scale: 0;
  --after-origin: left;
}

.underline-button::after {
  content: '';
  position: absolute;
  bottom: calc(-100vw / 500);
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(var(--after-scale));
  transform-origin: var(--after-origin) center;
  transition: none;
  border-radius:calc(100vw/100);
}