.x-ripple {
  overflow: hidden;
  position: relative;
}
.x-ripple:not(:empty) {
  transform: translateZ(0);
}
.x-ripple-element {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.1);
  transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
  transform: scale(0);
}
.x-ripple-initial .x-ripple-element {
  background-color: var(--x-background-a500);
}
.x-ripple-primary .x-ripple-element {
  background-color: var(--x-primary-200);
}
.x-ripple-success .x-ripple-element {
  background-color: var(--x-success-200);
}
.x-ripple-warning .x-ripple-element {
  background-color: var(--x-warning-200);
}
.x-ripple-danger .x-ripple-element {
  background-color: var(--x-danger-200);
}
.x-ripple-info .x-ripple-element {
  background-color: var(--x-info-200);
}
.x-ripple-text .x-ripple-element {
  background-color: rgba(0, 0, 0, 0.1);
}

.x-resizable {
  position: relative;
}
.x-resizable-resizing {
  user-select: none;
}
.x-resizable-bottom {
  position: absolute;
  cursor: s-resize;
  width: 100%;
  height: 0.625rem;
  left: 0;
  bottom: -0.375rem;
  padding: 0.25rem 0;
}
.x-resizable-bottom::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  border-bottom: 0.0625rem dashed transparent;
  pointer-events: none;
}
.x-resizable-bottom:hover::before {
  transition: border-color var(--x-animation-duration-base) ease-in var(--x-animation-duration-base);
  border-color: var(--x-primary);
}
.x-resizable-top {
  position: absolute;
  cursor: n-resize;
  width: 100%;
  height: 0.625rem;
  left: 0;
  top: -0.375rem;
  padding: 0.25rem 0;
}
.x-resizable-top::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  border-top: 0.0625rem dashed transparent;
  pointer-events: none;
}
.x-resizable-top:hover::before {
  transition: border-color var(--x-animation-duration-base) ease-in var(--x-animation-duration-base);
  border-color: var(--x-primary);
}
.x-resizable-left {
  position: absolute;
  cursor: w-resize;
  width: 0.625rem;
  height: 100%;
  left: -0.375rem;
  top: 0;
  padding: 0 0.25rem;
}
.x-resizable-left::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  border-left: 0.0625rem dashed transparent;
  pointer-events: none;
}
.x-resizable-left:hover::before {
  transition: border-color var(--x-animation-duration-base) ease-in var(--x-animation-duration-base);
  border-color: var(--x-primary);
}
.x-resizable-right {
  position: absolute;
  cursor: e-resize;
  width: 0.625rem;
  height: 100%;
  right: -0.375rem;
  top: 0;
  padding: 0 0.25rem;
}
.x-resizable-right::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  border-right: 0.0625rem dashed transparent;
  pointer-events: none;
}
.x-resizable-right:hover::before {
  transition: border-color var(--x-animation-duration-base) ease-in var(--x-animation-duration-base);
  border-color: var(--x-primary);
}
.x-resizable-top-start {
  position: absolute;
  cursor: nw-resize;
  width: 0.625rem;
  height: 0.625rem;
  left: -0.375rem;
  top: -0.375rem;
  padding: 0 0;
}
.x-resizable-top-start::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  border: 0 dashed transparent;
  pointer-events: none;
}
.x-resizable-top-start:hover::before {
  transition: border-color var(--x-animation-duration-base) ease-in var(--x-animation-duration-base);
  border-color: var(--x-primary);
}
.x-resizable-top-end {
  position: absolute;
  cursor: ne-resize;
  width: 0.625rem;
  height: 0.625rem;
  right: -0.375rem;
  top: -0.375rem;
  padding: 0 0;
}
.x-resizable-top-end::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  border: 0 dashed transparent;
  pointer-events: none;
}
.x-resizable-top-end:hover::before {
  transition: border-color var(--x-animation-duration-base) ease-in var(--x-animation-duration-base);
  border-color: var(--x-primary);
}
.x-resizable-bottom-start {
  position: absolute;
  cursor: sw-resize;
  width: 0.625rem;
  height: 0.625rem;
  left: -0.375rem;
  bottom: -0.375rem;
  padding: 0 0;
}
.x-resizable-bottom-start::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  border: 0 dashed transparent;
  pointer-events: none;
}
.x-resizable-bottom-start:hover::before {
  transition: border-color var(--x-animation-duration-base) ease-in var(--x-animation-duration-base);
  border-color: var(--x-primary);
}
.x-resizable-bottom-end {
  position: absolute;
  cursor: se-resize;
  width: 0.625rem;
  height: 0.625rem;
  right: -0.375rem;
  bottom: -0.375rem;
  padding: 0 0;
}
.x-resizable-bottom-end::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  border: 0 dashed transparent;
  pointer-events: none;
}
.x-resizable-bottom-end:hover::before {
  transition: border-color var(--x-animation-duration-base) ease-in var(--x-animation-duration-base);
  border-color: var(--x-primary);
}
.x-resizable-activating::before {
  border-color: var(--x-primary);
}
.x-resizable-disabled > div[class^=x-resizable-] {
  display: none;
}

.x-keyword-initial > .x-keyword-text {
  color: var(--x-background);
  text-decoration: underline;
}
.x-keyword-primary > .x-keyword-text {
  color: var(--x-primary);
  text-decoration: underline;
}
.x-keyword-success > .x-keyword-text {
  color: var(--x-success);
  text-decoration: underline;
}
.x-keyword-warning > .x-keyword-text {
  color: var(--x-warning);
  text-decoration: underline;
}
.x-keyword-danger > .x-keyword-text {
  color: var(--x-danger);
  text-decoration: underline;
}
.x-keyword-info > .x-keyword-text {
  color: var(--x-info);
  text-decoration: underline;
}
.x-keyword-text > .x-keyword-text {
  color: rgba(0, 0, 0, 0.1);
  text-decoration: underline;
}

.x-base-enter {
  animation: x-base-enter var(--x-animation-duration-base);
  animation-timing-function: ease-in;
}

.x-base-leave {
  animation: x-base-leave var(--x-animation-duration-base);
  animation-timing-function: ease-out;
}

@keyframes x-base-enter {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes x-base-leave {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.2);
  }
}
.x-connect-enter {
  animation: x-connect-enter var(--x-animation-duration-fast);
  animation-timing-function: ease-in;
}

.x-connect-leave {
  animation: x-connect-leave var(--x-animation-duration-fast);
  animation-timing-function: ease-out;
}

@keyframes x-connect-enter {
  from {
    opacity: 0;
    transform: scaleY(0.8);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}
@keyframes x-connect-leave {
  from {
    opacity: 1;
    transform: scaleY(1);
  }
  to {
    opacity: 0;
    transform: scaleY(0.8);
  }
}
.x-fade-enter {
  animation: x-fade-enter var(--x-animation-duration-fast);
  animation-timing-function: ease-in;
}

.x-fade-leave {
  animation: x-fade-leave var(--x-animation-duration-fast);
  animation-timing-function: ease-out;
}

@keyframes x-fade-enter {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes x-fade-leave {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}
.x-slide-right-enter {
  animation: x-right-enter var(--x-animation-duration-base) ease-in;
}

.x-slide-right-leave {
  animation: x-right-leave var(--x-animation-duration-base) ease-out;
}

@keyframes x-right-enter {
  from {
    transform: translateX(100%);
    opacity: 0.8;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes x-right-leave {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0.8;
  }
}
.x-slide-left-enter {
  animation: x-left-enter var(--x-animation-duration-base) ease-in;
}

.x-slide-left-leave {
  animation: x-left-leave var(--x-animation-duration-base) ease-out;
}

@keyframes x-left-enter {
  from {
    transform: translateX(-100%);
    opacity: 0.8;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes x-left-leave {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0.8;
  }
}
.x-slide-top-enter {
  animation: x-top-enter var(--x-animation-duration-base) ease-in;
}

.x-slide-top-leave {
  animation: x-top-leave var(--x-animation-duration-base) ease-out;
}

@keyframes x-top-enter {
  from {
    transform: translateY(-100%);
    opacity: 0.8;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes x-top-leave {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0.8;
  }
}
.x-slide-bottom-enter {
  animation: x-bottom-enter var(--x-animation-duration-base) ease-in;
}

.x-slide-bottom-leave {
  animation: x-bottom-leave var(--x-animation-duration-base) ease-out;
}

@keyframes x-bottom-enter {
  from {
    transform: translateY(100%);
    opacity: 0.8;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes x-bottom-leave {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0.8;
  }
}
.x-move-top-start-enter,
.x-move-top-enter,
.x-move-top-end-enter,
.x-move-center-enter {
  animation: x-move-top-enter var(--x-animation-duration-base) ease-in;
}

.x-move-top-start-leave,
.x-move-top-leave,
.x-move-top-end-leave,
.x-move-center-leave {
  animation: x-move-top-leave var(--x-animation-duration-base) ease-out;
}

@keyframes x-move-top-enter {
  from {
    transform: translateY(-2rem);
    opacity: 0;
  }
  to {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes x-move-top-leave {
  from {
    transform: translateY(0%);
    opacity: 1;
  }
  to {
    transform: translateY(-2rem);
    opacity: 0;
  }
}
.x-move-left-enter {
  animation: x-move-left-enter var(--x-animation-duration-base) ease-in;
}

.x-move-left-leave {
  animation: x-move-left-leave var(--x-animation-duration-base) ease-out;
}

@keyframes x-move-left-enter {
  from {
    transform: translateX(-2rem);
    opacity: 0;
  }
  to {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes x-move-left-leave {
  from {
    transform: translateX(0%);
    opacity: 1;
  }
  to {
    transform: translateX(-2rem);
    opacity: 0;
  }
}
.x-move-right-enter {
  animation: x-move-right-enter var(--x-animation-duration-base) ease-in;
}

.x-move-right-leave {
  animation: x-move-right-leave var(--x-animation-duration-base) ease-out;
}

@keyframes x-move-right-enter {
  from {
    transform: translateX(2rem);
    opacity: 0;
  }
  to {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes x-move-right-leave {
  from {
    transform: translateX(0%);
    opacity: 1;
  }
  to {
    transform: translateX(2rem);
    opacity: 0;
  }
}
.x-move-bottom-start-enter,
.x-move-bottom-enter,
.x-move-bottom-end-enter {
  animation: x-move-bottom-enter var(--x-animation-duration-base) ease-in;
}

.x-move-bottom-start-leave,
.x-move-bottom-leave,
.x-move-bottom-end-leave {
  animation: x-move-bottom-leave var(--x-animation-duration-base) ease-out;
}

@keyframes x-move-bottom-enter {
  from {
    transform: translateY(2rem);
    opacity: 0;
  }
  to {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes x-move-bottom-leave {
  from {
    transform: translateY(0%);
    opacity: 1;
  }
  to {
    transform: translateY(2rem);
    opacity: 0;
  }
}
.x-opacity-enter {
  animation: x-opacity-enter var(--x-animation-duration-slow) ease-in;
}

.x-opacity-leave {
  animation: x-opacity-leave var(--x-animation-duration-slow) ease-out;
}

@keyframes x-opacity-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes x-opacity-leave {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.x-animate-disabled {
  animation: none !important;
  transition: none !important;
}

@media only screen and (max-width: 767px) {
  [x-hidden-xs-only] {
    display: none !important;
  }
}

@media only screen and (min-width: 768px) {
  [x-hidden-sm-and-up] {
    display: none !important;
  }
}

@media only screen and (max-width: 991px) {
  [x-hidden-sm-only] {
    display: none !important;
  }
}

@media only screen and (max-width: 991px) {
  [x-hidden-sm-and-down] {
    display: none !important;
  }
}

@media only screen and (min-width: 992px) {
  [x-hidden-md-and-up] {
    display: none !important;
  }
}

@media only screen and (max-width: 1199px) {
  [x-hidden-md-only] {
    display: none !important;
  }
}

@media only screen and (max-width: 1199px) {
  [x-hidden-md-and-down] {
    display: none !important;
  }
}

@media only screen and (min-width: 1200px) {
  [x-hidden-lg-and-up] {
    display: none !important;
  }
}

@media only screen and (max-width: 1919px) {
  [x-hidden-lg-only] {
    display: none !important;
  }
}

@media only screen and (max-width: 1919px) {
  [x-hidden-lg-and-down] {
    display: none !important;
  }
}

@media only screen and (min-width: 1920px) {
  [x-hidden-xl-only] {
    display: none !important;
  }
}

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

body,
input,
textarea {
  font-family: var(--x-font-family);
  font-size: var(--x-font-size);
  color: var(--x-text);
  line-height: var(--x-line-height);
}

code,
pre,
tt {
  font-family: var(--x-font-code-family);
}

/*# sourceMappingURL=index.css.map */