@charset "utf-8";
/*--- TEXT ---*/
.color-white,
.link-color-white {
  color: rgba(var(--white), 1);
}
.color-black,
.link-color-black {
  color: rgba(var(--black), 1);
}
.color-none,
.link-color-none {
  color: rgba(var(--black), 0);
}
.color-theme,
.link-color-theme {
  color: rgba(var(--theme), 1);
}
.color-theme-opacity,
.link-color-theme-opacity {
  color: rgba(var(--theme), 0.2);
}
.color-master,
.link-color-master {
  color: rgba(var(--master), 1);
}
.color-master-opacity,
.link-color-master-opacity {
  color: rgba(var(--master), 0.2);
}
.color-primary,
.link-color-primary {
  color: rgba(var(--primary), 1);
}
.color-primary-opacity,
.link-color-primary-opacity {
  color: rgba(var(--primary), 0.2);
}
.color-secondary,
.link-color-secondary {
  color: rgba(var(--secondary), 1);
}
.color-secondary-opacity,
.link-color-secondary-opacity {
  color: rgba(var(--secondary), 0.2);
}
.color-black-opacity,
.link-color-black-opacity {
  color: rgba(var(--black), 0.2);
}
.color-white-opacity,
.link-color-white-opacity {
  color: rgba(var(--white), 0.2);
}
.color-gold,
.link-color-gold {
  color: rgba(var(--gold), 1);
}
.color-light,
.link-color-light {
  color: rgba(var(--light), 1);
}
.color-golddark,
.link-color-golddark {
  color: rgba(var(--golddark), 1);
}
.color-brown,
.link-color-brown {
  color: rgba(var(--brown), 1);
}
.color-blue,
.link-color-blue {
  color: rgba(var(--blue), 1);
}
.color-indigo,
.link-color-indigo {
  color: rgba(var(--indigo), 1);
}
.color-purple,
.link-color-purple {
  color: rgba(var(--purple), 1);
}
.color-pink,
.link-color-pink {
  color: rgba(var(--pink), 1);
}
.color-red,
.link-color-red {
  color: rgba(var(--red), 1);
}
.color-orange,
.link-color-orange {
  color: rgba(var(--orange), 1);
}
.color-yellow,
.link-color-yellow {
  color: rgba(var(--yellow), 1);
}
.color-green,
.link-color-green {
  color: rgba(var(--green), 1);
}
.color-teal,
.link-color-teal {
  color: rgba(var(--teal), 1);
}
.color-cyan,
.link-color-cyan {
  color: rgba(var(--cyan), 1);
}
.color-gray,
.link-color-gray {
  color: rgba(var(--gray), 1);
}
.color-error,
.link-color-error {
  color: rgba(var(--error), 1);
}
.color-success,
.link-color-success {
  color: rgba(var(--success), 1);
}
.color-info,
.link-color-info {
  color: rgba(var(--cyan), 1);
}
.color-warning,
.link-color-warning {
  color: rgba(var(--yellow), 1);
}
.color-danger,
.link-color-danger {
  color: rgba(var(--danger), 1);
}
.color-light,
.link-color-light {
  color: rgba(var(--light), 1);
}
.color-dark,
.link-color-dark {
  color: rgba(var(--dark), 1);
}
.color-codebody,
.link-color-codebody {
  color: rgba(var(--codebody), 1);
}
.color-codetext,
.link-color-codetext {
  color: rgba(var(--codetext), 1);
}
/* HOVER */
.link-color-none:hover {
  color: rgba(var(--black), 0);
}
.link-color-white:hover {
  color: rgba(var(--white), 0.5);
}
.link-color-white-opacity:hover {
  color: rgba(var(--white), 0.1);
}
.link-color-black:hover {
  color: rgba(var(--black), 0.5);
}
.link-color-black-opacity:hover {
  color: rgba(var(--black), 0.1);
}
.link-color-theme:hover {
  color: rgba(var(--theme), 0.5);
}
.link-color-theme-opacity:hover {
  color: rgba(var(--theme), 0.1);
}
.link-color-master:hover {
  color: rgba(var(--master), 0.5);
}
.link-color-master-opacity:hover {
  color: rgba(var(--master), 0.1);
}
.link-color-primary:hover {
  color: rgba(var(--primary), 0.5);
}
.link-color-primary-opacity:hover {
  color: rgba(var(--primary), 0.1);
}
.link-color-secondary:hover {
  color: rgba(var(--secondary), 0.5);
}
.link-color-secondary-opacity:hover {
  color: rgba(var(--secondary), 0.1);
}
.link-color-gold:hover {
  color: rgba(var(--gold), 0.5);
}
.link-color-light:hover {
  color: rgba(var(--light), 0.5);
}
.link-color-golddark:hover {
  color: rgba(var(--golddark), 0.5);
}
.link-color-brown:hover {
  color: rgba(var(--brown), 0.5);
}
.link-color-blue:hover {
  color: rgba(var(--blue), 0.5);
}
.link-color-indigo:hover {
  color: rgba(var(--indigo), 0.5);
}
.link-color-purple:hover {
  color: rgba(var(--purple), 0.5);
}
.link-color-pink:hover {
  color: rgba(var(--pink), 0.5);
}
.link-color-red:hover {
  color: rgba(var(--red), 0.5);
}
.link-color-orange:hover {
  color: rgba(var(--orange), 0.5);
}
.link-color-yellow:hover {
  color: rgba(var(--yellow), 0.5);
}
.link-color-green:hover {
  color: rgba(var(--green), 0.5);
}
.link-color-teal:hover {
  color: rgba(var(--teal), 0.5);
}
.link-color-cyan:hover {
  color: rgba(var(--cyan), 0.5);
}
.link-color-gray:hover {
  color: rgba(var(--gray), 0.5);
}
.link-color-error:hover {
  color: rgba(var(--error), 0.5);
}
.link-color-success:hover {
  color: rgba(var(--success), 0.5);
}
.link-color-info:hover {
  color: rgba(var(--cyan), 0.5);
}
.link-color-warning:hover {
  color: rgba(var(--yellow), 0.5);
}
.link-color-danger:hover {
  color: rgba(var(--danger), 0.5);
}
.link-color-light:hover {
  color: rgba(var(--light), 0.5);
}
.link-color-dark:hover {
  color: rgba(var(--dark), 0.5);
}
.link-color-codebody:hover {
  color: rgba(var(--codebody), 0.5);
}
.link-color-codetext:hover {
  color: rgba(var(--codetext), 0.5);
}
.color-theme-op1 {
  color: rgba(var(--theme), 0.1);
}
.color-theme-op2 {
  color: rgba(var(--theme), 0.2);
}
.color-theme-op3 {
  color: rgba(var(--theme), 0.3);
}
.color-theme-op4 {
  color: rgba(var(--theme), 0.4);
}
.color-theme-op5 {
  color: rgba(var(--theme), 0.5);
}
.color-theme-op6 {
  color: rgba(var(--theme), 0.6);
}
.color-theme-op7 {
  color: rgba(var(--theme), 0.7);
}
.color-theme-op8 {
  color: rgba(var(--theme), 0.8);
}
.color-theme-op9 {
  color: rgba(var(--theme), 0.9);
}
.color-master-op1 {
  color: rgba(var(--master), 0.1);
}
.color-master-op2 {
  color: rgba(var(--master), 0.2);
}
.color-master-op3 {
  color: rgba(var(--master), 0.3);
}
.color-master-op4 {
  color: rgba(var(--master), 0.4);
}
.color-master-op5 {
  color: rgba(var(--master), 0.5);
}
.color-master-op6 {
  color: rgba(var(--master), 0.6);
}
.color-master-op7 {
  color: rgba(var(--master), 0.7);
}
.color-master-op8 {
  color: rgba(var(--master), 0.8);
}
.color-master-op9 {
  color: rgba(var(--master), 0.9);
}
.color-primary-op9 {
  color: rgba(var(--primary), 0.9);
}
.color-primary-op1 {
  color: rgba(var(--primary), 0.1);
}
.color-primary-op2 {
  color: rgba(var(--primary), 0.2);
}
.color-primary-op3 {
  color: rgba(var(--primary), 0.3);
}
.color-primary-op4 {
  color: rgba(var(--primary), 0.4);
}
.color-primary-op5 {
  color: rgba(var(--primary), 0.5);
}
.color-primary-op6 {
  color: rgba(var(--primary), 0.6);
}
.color-primary-op7 {
  color: rgba(var(--primary), 0.7);
}
.color-primary-op8 {
  color: rgba(var(--primary), 0.8);
}
.color-primary-op9 {
  color: rgba(var(--primary), 0.9);
}
.color-secondary-op1 {
  color: rgba(var(--secondary), 0.1);
}
.color-secondary-op2 {
  color: rgba(var(--secondary), 0.2);
}
.color-secondary-op3 {
  color: rgba(var(--secondary), 0.3);
}
.color-secondary-op4 {
  color: rgba(var(--secondary), 0.4);
}
.color-secondary-op5 {
  color: rgba(var(--secondary), 0.5);
}
.color-secondary-op6 {
  color: rgba(var(--secondary), 0.6);
}
.color-secondary-op7 {
  color: rgba(var(--secondary), 0.7);
}
.color-secondary-op8 {
  color: rgba(var(--secondary), 0.8);
}
.color-secondary-op9 {
  color: rgba(var(--secondary), 0.9);
}
.color-white-op1 {
  color: rgba(var(--white), 0.1);
}
.color-white-op2 {
  color: rgba(var(--white), 0.2);
}
.color-white-op3 {
  color: rgba(var(--white), 0.3);
}
.color-white-op4 {
  color: rgba(var(--white), 0.4);
}
.color-white-op5 {
  color: rgba(var(--white), 0.5);
}
.color-white-op6 {
  color: rgba(var(--white), 0.6);
}
.color-white-op7 {
  color: rgba(var(--white), 0.7);
}
.color-white-op8 {
  color: rgba(var(--white), 0.8);
}
.color-white-op9 {
  color: rgba(var(--white), 0.9);
}
.color-black-op1 {
  color: rgba(var(--black), 0.1);
}
.color-black-op2 {
  color: rgba(var(--black), 0.2);
}
.color-black-op3 {
  color: rgba(var(--black), 0.3);
}
.color-black-op4 {
  color: rgba(var(--black), 0.4);
}
.color-black-op5 {
  color: rgba(var(--black), 0.5);
}
.color-black-op6 {
  color: rgba(var(--black), 0.6);
}
.color-black-op7 {
  color: rgba(var(--black), 0.7);
}
.color-black-op8 {
  color: rgba(var(--black), 0.8);
}
.color-black-op9 {
  color: rgba(var(--black), 0.9);
} 
.color-codebody-op1 {
  color: rgba(var(--codebody), 0.1);
}
.color-codebody-op2 {
  color: rgba(var(--codebody), 0.2);
}
.color-codebody-op3 {
  color: rgba(var(--codebody), 0.3);
}
.color-codebody-op4 {
  color: rgba(var(--codebody), 0.4);
}
.color-codebody-op5 {
  color: rgba(var(--codebody), 0.5);
}
.color-codebody-op6 {
  color: rgba(var(--codebody), 0.6);
}
.color-codebody-op7 {
  color: rgba(var(--codebody), 0.7);
}
.color-codebody-op8 {
  color: rgba(var(--codebody), 0.8);
}
.color-codebody-op9 {
  color: rgba(var(--codebody), 0.9);
} 
.color-codetext-op1 {
  color: rgba(var(--codetext), 0.1);
}
.color-codetext-op2 {
  color: rgba(var(--codetext), 0.2);
}
.color-codetext-op3 {
  color: rgba(var(--codetext), 0.3);
}
.color-codetext-op4 {
  color: rgba(var(--codetext), 0.4);
}
.color-codetext-op5 {
  color: rgba(var(--codetext), 0.5);
}
.color-codetext-op6 {
  color: rgba(var(--codetext), 0.6);
}
.color-codetext-op7 {
  color: rgba(var(--codetext), 0.7);
}
.color-codetext-op8 {
  color: rgba(var(--codetext), 0.8);
}
.color-codetext-op9 {
  color: rgba(var(--codetext), 0.9);
} 
/*--- BACKGROUND ---*/
.bg-none,
.link-bg-none {
  background-color: rgba(var(--black), 0);
}
.bg-white,
.link-bg-white {
  background-color: rgba(var(--white), 1);
}
.bg-white-opacity,
.link-bg-white-opacity {
  background-color: rgba(var(--white), 0.2);
}
.bg-black,
.link-bg-black {
  background-color: rgba(var(--black), 1);
}
.bg-black-opacity,
.link-bg-black-opacity {
  background-color: rgba(var(--black), 0.2);
}
.bg-theme,
.link-bg-theme {
  background-color: rgba(var(--theme), 1);
}
.bg-theme-opacity,
.link-bg-theme-opacity {
  background-color: rgba(var(--theme), 0.2);
}
.bg-master,
.link-bg-master {
  background-color: rgba(var(--master), 1);
}
.bg-master-opacity,
.link-bg-master-opacity {
  background-color: rgba(var(--master), 0.2);
}
.bg-primary,
.link-bg-primary {
  background-color: rgba(var(--primary), 1);
}
.bg-primary-opacity,
.link-bg-primary-opacity {
  background-color: rgba(var(--primary), 0.2);
}
.bg-secondary,
.link-bg-secondary {
  background-color: rgba(var(--secondary), 1);
}
.bg-secondary-opacity,
.link-bg-secondary-opacity {
  background-color: rgba(var(--secondary), 0.2);
}
.bg-gold,
.link-bg-gold {
  background-color: rgba(var(--gold), 1);
}
.bg-light,
.link-bg-light {
  background-color: rgba(var(--light), 1);
}
.bg-golddark,
.link-bg-golddark {
  background-color: rgba(var(--golddark), 1);
}
.bg-brown,
.link-bg-brown {
  background-color: rgba(var(--brown), 1);
}
.bg-blue,
.link-bg-blue {
  background-color: rgba(var(--blue), 1);
}
.bg-indigo,
.link-bg-indigo {
  background-color: rgba(var(--indigo), 1);
}
.bg-purple,
.link-bg-purple {
  background-color: rgba(var(--purple), 1);
}
.bg-pink,
.link-bg-pink {
  background-color: rgba(var(--pink), 1);
}
.bg-red,
.link-bg-red {
  background-color: rgba(var(--red), 1);
}
.bg-orange,
.link-bg-orange {
  background-color: rgba(var(--orange), 1);
}
.bg-yellow,
.link-bg-yellow {
  background-color: rgba(var(--yellow), 1);
}
.bg-green,
.link-bg-green {
  background-color: rgba(var(--green), 1);
}
.bg-teal,
.link-bg-teal {
  background-color: rgba(var(--teal), 1);
}
.bg-cyan,
.link-bg-cyan {
  background-color: rgba(var(--cyan), 1);
}
.bg-gray,
.link-bg-gray {
  background-color: rgba(var(--gray), 1);
}
.bg-error,
.link-bg-error {
  background-color: rgba(var(--error), 1);
}
.bg-success,
.link-bg-success {
  background-color: rgba(var(--success), 1);
}
.bg-info,
.link-bg-info {
  background-color: rgba(var(--cyan), 1);
}
.bg-warning,
.link-bg-warning {
  background-color: rgba(var(--yellow), 1);
}
.bg-danger,
.link-bg-danger {
  background-color: rgba(var(--danger), 1);
}
.bg-light,
.link-bg-light {
  background-color: rgba(var(--light), 1);
}
.bg-dark,
.link-bg-dark {
  background-color: rgba(var(--dark), 1);
}
.bg-codebody,
.link-bg-codebody {
  background-color: rgba(var(--codebody), 1);
}
.bg-codetext,
.link-bg-codetext {
  background-color: rgba(var(--codetext), 1);
}
/* HOVER */
.link-bg-none:hover {
  background-color: rgba(var(--black), 0);
}
.link-bg-white:hover {
  background-color: rgba(var(--white), 0.8);
}
.link-bg-white-opacity:hover {
  background-color: rgba(var(--white), 0.1);
}
.link-bg-black:hover {
  background-color: rgba(var(--black), 0.8);
}
.link-bg-black-opacity:hover {
  background-color: rgba(var(--black), 0.1);
}
.link-bg-theme:hover {
  background-color: rgba(var(--theme), 0.8);
}
.link-bg-theme-opacity:hover {
  background-color: rgba(var(--theme), 0.1);
}
.link-bg-master:hover {
  background-color: rgba(var(--master), 0.8);
}
.link-bg-master-opacity:hover {
  background-color: rgba(var(--master), 0.1);
}
.link-bg-primary:hover {
  background-color: rgba(var(--primary), 0.8);
}
.link-bg-primary-opacity:hover {
  background-color: rgba(var(--primary), 0.1);
}
.link-bg-secondary:hover {
  background-color: rgba(var(--secondary), 0.8);
}
.link-bg-secondary-opacity:hover {
  background-color: rgba(var(--secondary), 0.1);
}
.link-bg-gold:hover {
  background-color: rgba(var(--gold), 0.8);
}
.link-bg-light:hover {
  background-color: rgba(var(--light), 0.8);
}
.link-bg-golddark:hover {
  background-color: rgba(var(--golddark), 0.8);
}
.link-bg-brown:hover {
  background-color: rgba(var(--brown), 0.8);
}
.link-bg-blue:hover {
  background-color: rgba(var(--blue), 0.8);
}
.link-bg-indigo:hover {
  background-color: rgba(var(--indigo), 0.8);
}
.link-bg-purple:hover {
  background-color: rgba(var(--purple), 0.8);
}
.link-bg-pink:hover {
  background-color: rgba(var(--pink), 0.8);
}
.link-bg-red:hover {
  background-color: rgba(var(--red), 0.8);
}
.link-bg-orange:hover {
  background-color: rgba(var(--orange), 0.8);
}
.link-bg-yellow:hover {
  background-color: rgba(var(--yellow), 0.8);
}
.link-bg-green:hover {
  background-color: rgba(var(--green), 0.8);
}
.link-bg-teal:hover {
  background-color: rgba(var(--teal), 0.8);
}
.link-bg-cyan:hover {
  background-color: rgba(var(--cyan), 0.8);
}
.link-bg-gray:hover {
  background-color: rgba(var(--gray), 0.8);
}
.link-bg-error:hover {
  background-color: rgba(var(--error), 0.8);
}
.link-bg-success:hover {
  background-color: rgba(var(--success), 0.8);
}
.link-bg-info:hover {
  background-color: rgba(var(--cyan), 0.8);
}
.link-bg-warning:hover {
  background-color: rgba(var(--yellow), 0.8);
}
.link-bg-danger:hover {
  background-color: rgba(var(--danger), 0.8);
}
.link-bg-light:hover {
  background-color: rgba(var(--light), 0.8);
}
.link-bg-dark:hover {
  background-color: rgba(var(--dark), 0.8);
}
.link-bg-codebody:hover {
  background-color: rgba(var(--codebody), 0.8);
}
.link-bg-codetext:hover {
  background-color: rgba(var(--codetext), 0.8);
}
.bg-theme-op1 {
  background-color: rgba(var(--theme), 0.1);
}
.bg-theme-op2 {
  background-color: rgba(var(--theme), 0.2);
}
.bg-theme-op3 {
  background-color: rgba(var(--theme), 0.3);
}
.bg-theme-op4 {
  background-color: rgba(var(--theme), 0.4);
}
.bg-theme-op5 {
  background-color: rgba(var(--theme), 0.5);
}
.bg-theme-op6 {
  background-color: rgba(var(--theme), 0.6);
}
.bg-theme-op7 {
  background-color: rgba(var(--theme), 0.7);
}
.bg-theme-op8 {
  background-color: rgba(var(--theme), 0.8);
}
.bg-theme-op9 {
  background-color: rgba(var(--theme), 0.9);
}
.bg-master-op1 {
  background-color: rgba(var(--master), 0.1);
}
.bg-master-op2 {
  background-color: rgba(var(--master), 0.2);
}
.bg-master-op3 {
  background-color: rgba(var(--master), 0.3);
}
.bg-master-op4 {
  background-color: rgba(var(--master), 0.4);
}
.bg-master-op5 {
  background-color: rgba(var(--master), 0.5);
}
.bg-master-op6 {
  background-color: rgba(var(--master), 0.6);
}
.bg-master-op7 {
  background-color: rgba(var(--master), 0.7);
}
.bg-master-op8 {
  background-color: rgba(var(--master), 0.8);
}
.bg-master-op9 {
  background-color: rgba(var(--master), 0.9);
}
.bg-primary-op1 {
  background-color: rgba(var(--primary), 0.1);
}
.bg-primary-op2 {
  background-color: rgba(var(--primary), 0.2);
}
.bg-primary-op3 {
  background-color: rgba(var(--primary), 0.3);
}
.bg-primary-op4 {
  background-color: rgba(var(--primary), 0.4);
}
.bg-primary-op5 {
  background-color: rgba(var(--primary), 0.5);
}
.bg-primary-op6 {
  background-color: rgba(var(--primary), 0.6);
}
.bg-primary-op7 {
  background-color: rgba(var(--primary), 0.7);
}
.bg-primary-op8 {
  background-color: rgba(var(--primary), 0.8);
}
.bg-primary-op9 {
  background-color: rgba(var(--primary), 0.9);
}
.bg-secondary-op1 {
  background-color: rgba(var(--secondary), 0.1);
}
.bg-secondary-op2 {
  background-color: rgba(var(--secondary), 0.2);
}
.bg-secondary-op3 {
  background-color: rgba(var(--secondary), 0.3);
}
.bg-secondary-op4 {
  background-color: rgba(var(--secondary), 0.4);
}
.bg-secondary-op5 {
  background-color: rgba(var(--secondary), 0.5);
}
.bg-secondary-op6 {
  background-color: rgba(var(--secondary), 0.6);
}
.bg-secondary-op7 {
  background-color: rgba(var(--secondary), 0.7);
}
.bg-secondary-op8 {
  background-color: rgba(var(--secondary), 0.8);
}
.bg-secondary-op9 {
  background-color: rgba(var(--secondary), 0.9);
}
.bg-white-op1 {
  background-color: rgba(var(--white), 0.1);
}
.bg-white-op2 {
  background-color: rgba(var(--white), 0.2);
}
.bg-white-op3 {
  background-color: rgba(var(--white), 0.3);
}
.bg-white-op4 {
  background-color: rgba(var(--white), 0.4);
}
.bg-white-op5 {
  background-color: rgba(var(--white), 0.5);
}
.bg-white-op6 {
  background-color: rgba(var(--white), 0.6);
}
.bg-white-op7 {
  background-color: rgba(var(--white), 0.7);
}
.bg-white-op8 {
  background-color: rgba(var(--white), 0.8);
}
.bg-white-op9 {
  background-color: rgba(var(--white), 0.9);
}
.bg-black-op1 {
  background-color: rgba(var(--black), 0.1);
}
.bg-black-op2 {
  background-color: rgba(var(--black), 0.2);
}
.bg-black-op3 {
  background-color: rgba(var(--black), 0.3);
}
.bg-black-op4 {
  background-color: rgba(var(--black), 0.4);
}
.bg-black-op5 {
  background-color: rgba(var(--black), 0.5);
}
.bg-black-op6 {
  background-color: rgba(var(--black), 0.6);
}
.bg-black-op7 {
  background-color: rgba(var(--black), 0.7);
}
.bg-black-op8 {
  background-color: rgba(var(--black), 0.8);
}
.bg-black-op9 {
  background-color: rgba(var(--black), 0.9);
}
.bg-codebody-op1 {
  background-color: rgba(var(--codebody), 0.1);
}
.bg-codebody-op2 {
  background-color: rgba(var(--codebody), 0.2);
}
.bg-codebody-op3 {
  background-color: rgba(var(--codebody), 0.3);
}
.bg-codebody-op4 {
  background-color: rgba(var(--codebody), 0.4);
}
.bg-codebody-op5 {
  background-color: rgba(var(--codebody), 0.5);
}
.bg-codebody-op6 {
  background-color: rgba(var(--codebody), 0.6);
}
.bg-codebody-op7 {
  background-color: rgba(var(--codebody), 0.7);
}
.bg-codebody-op8 {
  background-color: rgba(var(--codebody), 0.8);
}
.bg-codebody-op9 {
  background-color: rgba(var(--codebody), 0.9);
}
.bg-codetext-op1 {
  background-color: rgba(var(--codetext), 0.1);
}
.bg-codetext-op2 {
  background-color: rgba(var(--codetext), 0.2);
}
.bg-codetext-op3 {
  background-color: rgba(var(--codetext), 0.3);
}
.bg-codetext-op4 {
  background-color: rgba(var(--codetext), 0.4);
}
.bg-codetext-op5 {
  background-color: rgba(var(--codetext), 0.5);
}
.bg-codetext-op6 {
  background-color: rgba(var(--codetext), 0.6);
}
.bg-codetext-op7 {
  background-color: rgba(var(--codetext), 0.7);
}
.bg-codetext-op8 {
  background-color: rgba(var(--codetext), 0.8);
}
.bg-codetext-op9 {
  background-color: rgba(var(--codetext), 0.9);
}
/*--- /GRADIENT ---*/
/*--- Radial-Gradient BG Circle ---*/
.radial-gradient {
  background: rgba(var(--theme), 1);
  background: radial-gradient(
    circle,
    rgba(var(--theme), 1) 25%,
    rgba(var(--theme), 0) 100%
  );
}
.radial-gradient-white {
  background: rgba(var(--white), 1);
  background: radial-gradient(
    circle,
    rgba(var(--white), 1) 25%,
    rgba(var(--white), 0) 100%
  );
}
.radial-gradient-black {
  background: rgba(var(--black), 1);
  background: radial-gradient(
    circle,
    rgba(var(--black), 1) 25%,
    rgba(var(--black), 0) 100%
  );
}
.radial-gradient-light {
  background: rgba(var(--light), 1);
  background: radial-gradient(
    circle,
    rgba(var(--light), 1) 25%,
    rgba(var(--light), 0) 100%
  );
}
.radial-gradient-dark {
  background: rgba(var(--dark), 1);
  background: radial-gradient(
    circle,
    rgba(var(--dark), 1) 25%,
    rgba(var(--dark), 0) 100%
  );
}
.radial-gradient-theme {
  background: rgba(var(--theme), 1);
  background: radial-gradient(
    circle,
    rgba(var(--theme), 1) 25%,
    rgba(var(--theme), 0) 100%
  );
}
.radial-gradient-master {
  background: rgba(var(--master), 1);
  background: radial-gradient(
    circle,
    rgba(var(--master), 1) 25%,
    rgba(var(--master), 0) 100%
  );
}
.radial-gradient-primary {
  background: rgba(var(--primary), 1);
  background: radial-gradient(
    circle,
    rgba(var(--primary), 1) 25%,
    rgba(var(--primary), 0) 100%
  );
}
.radial-gradient-secondary {
  background: rgba(var(--secondary), 1);
  background: radial-gradient(
    circle,
    rgba(var(--secondary), 1) 25%,
    rgba(var(--secondary), 0) 100%
  );
}
.radial-gradient-gray {
  background: rgba(var(--gray), 1);
  background: radial-gradient(
    circle,
    rgba(var(--gray), 1) 25%,
    rgba(var(--gray), 0) 100%
  );
}
/* gradient half*/
.gradient-half {
  background: linear-gradient(
    90deg,
    rgba(var(--theme), 1) 0%,
    rgba(var(--theme), 1) 50%,
    rgba(var(--gray), 1) 50%
  );
}
.gradient-half-theme-white {
  background: linear-gradient(
    90deg,
    rgba(var(--theme), 1) 0%,
    rgba(var(--theme), 1) 50%,
    rgba(var(--white), 1) 50%
  );
}
/* gradient top->bottom */
.gradient-white-opacity {
  background: linear-gradient(
    0deg,
    rgba(var(--white), 0),
    rgba(var(--white), 1)
  );
  background-size: 100% 100%;
}
.gradient-black-opacity {
  background: linear-gradient(
    0deg,
    rgba(var(--black), 0),
    rgba(var(--black), 1)
  );
  background-size: 100% 100%;
}
.gradient-light-opacity {
  background: linear-gradient(
    0deg,
    rgba(var(--light), 0),
    rgba(var(--light), 1)
  );
  background-size: 100% 100%;
}
.gradient-dark-opacity {
  background: linear-gradient(0deg, rgba(var(--dark), 0), rgba(var(--dark), 1));
  background-size: 100% 100%;
}
.gradient-theme-opacity {
  background: linear-gradient(
    0deg,
    rgba(var(--theme), 0),
    rgba(var(--theme), 1)
  );
  background-size: 100% 100%;
}
.gradient-master-opacity {
  background: linear-gradient(
    0deg,
    rgba(var(--master), 0),
    rgba(var(--master), 1)
  );
  background-size: 100% 100%;
}
.gradient-primary-opacity {
  background: linear-gradient(
    0deg,
    rgba(var(--primary), 0),
    rgba(var(--primary), 1)
  );
  background-size: 100% 100%;
}
.gradient-secondary-opacity {
  background: linear-gradient(
    0deg,
    rgba(var(--secondary), 0),
    rgba(var(--secondary), 1)
  );
  background-size: 100% 100%;
}
.gradient-gray-opacity {
  background: linear-gradient(0deg, rgba(var(--gray), 0), rgba(var(--gray), 1));
  background-size: 100% 100%;
}
/* gradient opacity->top */
.gradient-white-opacity-top {
  background: linear-gradient(
    0deg,
    rgba(var(--white), 1),
    rgba(var(--white), 0)
  );
  background-size: 100% 100%;
}
.gradient-black-opacity-top {
  background: linear-gradient(
    0deg,
    rgba(var(--black), 1),
    rgba(var(--black), 0)
  );
  background-size: 100% 100%;
}
.gradient-light-opacity-top {
  background: linear-gradient(
    0deg,
    rgba(var(--light), 1),
    rgba(var(--light), 0)
  );
  background-size: 100% 100%;
}
.gradient-dark-opacity-top {
  background: linear-gradient(0deg, rgba(var(--dark), 1), rgba(var(--dark), 0));
  background-size: 100% 100%;
}
.gradient-theme-opacity-top {
  background: linear-gradient(
    0deg,
    rgba(var(--theme), 1),
    rgba(var(--theme), 0)
  );
  background-size: 100% 100%;
}
.gradient-master-opacity-top {
  background: linear-gradient(
    0deg,
    rgba(var(--master), 1),
    rgba(var(--master), 0)
  );
  background-size: 100% 100%;
}
.gradient-primary-opacity-top {
  background: linear-gradient(
    0deg,
    rgba(var(--primary), 1),
    rgba(var(--primary), 0)
  );
  background-size: 100% 100%;
}
.gradient-secondary-opacity-top {
  background: linear-gradient(
    0deg,
    rgba(var(--secondary), 1),
    rgba(var(--secondary), 0)
  );
  background-size: 100% 100%;
}
.gradient-gray-opacity-top {
  background: linear-gradient(0deg, rgba(var(--gray), 1), rgba(var(--gray), 0));
  background-size: 100% 100%;
}
/* gradient opacity->left */
.gradient-white-opacity-left {
  background: linear-gradient(
    90deg,
    rgba(var(--white), 1),
    rgba(var(--white), 0)
  );
  background-size: 100% 100%;
}
.gradient-black-opacity-left {
  background: linear-gradient(
    90deg,
    rgba(var(--black), 1),
    rgba(var(--black), 0)
  );
  background-size: 100% 100%;
}
.gradient-light-opacity-left {
  background: linear-gradient(
    90deg,
    rgba(var(--light), 1),
    rgba(var(--light), 0)
  );
  background-size: 100% 100%;
}
.gradient-dark-opacity-left {
  background: linear-gradient(0deg, rgba(var(--dark), 1), rgba(var(--dark), 0));
  background-size: 100% 100%;
}
.gradient-theme-opacity-left {
  background: linear-gradient(
    90deg,
    rgba(var(--theme), 1),
    rgba(var(--theme), 0)
  );
  background-size: 100% 100%;
}
.gradient-master-opacity-left {
  background: linear-gradient(
    90deg,
    rgba(var(--master), 1),
    rgba(var(--master), 0)
  );
  background-size: 100% 100%;
}
.gradient-primary-opacity-left {
  background: linear-gradient(
    90deg,
    rgba(var(--primary), 1),
    rgba(var(--primary), 0)
  );
  background-size: 100% 100%;
}
.gradient-secondary-opacity-left {
  background: linear-gradient(
    90deg,
    rgba(var(--secondary), 1),
    rgba(var(--secondary), 0)
  );
  background-size: 100% 100%;
}
.gradient-gray-opacity-left {
  background: linear-gradient(0deg, rgba(var(--gray), 1), rgba(var(--gray), 0));
  background-size: 100% 100%;
}
/* gradient left->right */
.gradient-white-opacity-lr {
  background: linear-gradient(
    90deg,
    rgba(var(--white), 0),
    rgba(var(--white), 1),
    rgba(var(--white), 0)
  );
  background-size: 100% 100%;
}
.gradient-black-opacity-lr {
  background: linear-gradient(
    90deg,
    rgba(var(--black), 0),
    rgba(var(--black), 1),
    rgba(var(--black), 0)
  );
  background-size: 100% 100%;
}
.gradient-light-opacity-lr {
  background: linear-gradient(
    90deg,
    rgba(var(--light), 0),
    rgba(var(--light), 1),
    rgba(var(--light), 0)
  );
  background-size: 100% 100%;
}
.gradient-dark-opacity-lr {
  background: linear-gradient(
    90deg,
    rgba(var(--dark), 0),
    rgba(var(--dark), 1),
    rgba(var(--dark), 0)
  );
  background-size: 100% 100%;
}
.gradient-theme-opacity-lr {
  background: linear-gradient(
    90deg,
    rgba(var(--theme), 0),
    rgba(var(--theme), 1),
    rgba(var(--theme), 0)
  );
  background-size: 100% 100%;
}
.gradient-master-opacity-lr {
  background: linear-gradient(
    90deg,
    rgba(var(--master), 0),
    rgba(var(--master), 1),
    rgba(var(--master), 0)
  );
  background-size: 100% 100%;
}
.gradient-primary-opacity-lr {
  background: linear-gradient(
    90deg,
    rgba(var(--primary), 0),
    rgba(var(--primary), 1),
    rgba(var(--primary), 0)
  );
  background-size: 100% 100%;
}
.gradient-secondary-opacity-lr {
  background: linear-gradient(
    90deg,
    rgba(var(--secondary), 0),
    rgba(var(--secondary), 1),
    rgba(var(--secondary), 0)
  );
  background-size: 100% 100%;
}
/* gradient both */
.gradient-white-opacity-both {
  background: linear-gradient(
    0deg,
    rgba(var(--white), 0),
    rgba(var(--white), 1),
    rgba(var(--white), 0)
  );
  background-size: 100% 100%;
}
.gradient-black-opacity-both {
  background: linear-gradient(
    0deg,
    rgba(var(--black), 0),
    rgba(var(--black), 1),
    rgba(var(--black), 0)
  );
  background-size: 100% 100%;
}
.gradient-light-opacity-both {
  background: linear-gradient(
    0deg,
    rgba(var(--light), 0),
    rgba(var(--light), 1),
    rgba(var(--light), 0)
  );
  background-size: 100% 100%;
}
.gradient-dark-opacity-both {
  background: linear-gradient(
    0deg,
    rgba(var(--dark), 0),
    rgba(var(--dark), 1),
    rgba(var(--dark), 0)
  );
  background-size: 100% 100%;
}
.gradient-theme-opacity-both {
  background: linear-gradient(
    0deg,
    rgba(var(--theme), 0),
    rgba(var(--theme), 1),
    rgba(var(--theme), 0)
  );
  background-size: 100% 100%;
}
.gradient-master-opacity-both {
  background: linear-gradient(
    0deg,
    rgba(var(--master), 0),
    rgba(var(--master), 1),
    rgba(var(--master), 0)
  );
  background-size: 100% 100%;
}
.gradient-primary-opacity-both {
  background: linear-gradient(
    0deg,
    rgba(var(--primary), 0),
    rgba(var(--primary), 1),
    rgba(var(--primary), 0)
  );
  background-size: 100% 100%;
}
.gradient-secondary-opacity-both {
  background: linear-gradient(
    0deg,
    rgba(var(--secondary), 0),
    rgba(var(--secondary), 1),
    rgba(var(--secondary), 0)
  );
  background-size: 100% 100%;
}
.gradient-gray-opacity-both {
  background: linear-gradient(
    0deg,
    rgba(var(--gray), 0),
    rgba(var(--gray), 1),
    rgba(var(--gray), 0)
  );
  background-size: 100% 100%;
}
/*--- /GRADIENT ---*/
/* Button */
.btn-login {
  background: linear-gradient(
    45deg,
    rgba(var(--color), 1),
    rgba(var(--colorlight), 1),
    rgba(var(--color), 1),
    rgba(var(--colorlight), 1)
  );
  background-size: 100% 100%;
  color: rgba(var(--black), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 1);
}
.btn-login:hover {
  background: linear-gradient(
    45deg,
    rgba(var(--color), 1),
    rgba(var(--colorlight), 1),
    rgba(var(--color), 1),
    rgba(var(--colorlight), 1)
  );
  background-size: 200% 200%;
  -webkit-animation: Gradient 9s ease infinite;
  animation: Gradient 9s ease infinite;
  color: rgba(var(--black), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 1);
}
.btn-regis {
  background: linear-gradient(
    45deg,
    rgba(var(--theme), 1),
    rgba(var(--primary), 1),
    rgba(var(--theme), 1),
    rgba(var(--primary), 1)
  );
  background-size: 100% 100%;
  color: rgba(var(--white), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 1);
}
.btn-regis:hover {
  background: linear-gradient(
    45deg,
    rgba(var(--theme), 1),
    rgba(var(--primary), 1),
    rgba(var(--theme), 1),
    rgba(var(--primary), 1)
  );
  background-size: 200% 200%;
  -webkit-animation: Gradient 9s ease infinite;
  animation: Gradient 9s ease infinite;
  color: rgba(var(--white), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 1);
}
.btn-line {
  background: linear-gradient(
    45deg,
    rgba(var(--green), 1),
    rgba(var(--dark), 1),
    rgba(var(--green), 1),
    rgba(var(--dark), 1)
  );
  background-size: 100% 100%;
  color: rgba(var(--white), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 1);
}
.btn-line:hover {
  background: linear-gradient(
    45deg,
    rgba(var(--dark), 1),
    rgba(var(--green), 1),
    rgba(var(--dark), 1),
    rgba(var(--green), 1)
  );
  background-size: 200% 200%;
  -webkit-animation: Gradient 9s ease infinite;
  animation: Gradient 9s ease infinite;
  color: rgba(var(--white), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 1);
}
.btn-click {
  background: linear-gradient(
    45deg,
    rgba(var(--theme), 1),
    rgba(var(--theme), 1),
    rgba(var(--theme), 1),
    rgba(var(--theme), 1)
  );
  background-size: 200% 200%;
}
.btn-click:hover {
  background: linear-gradient(
    45deg,
    rgba(var(--theme), 1),
    rgba(var(--white), 1),
    rgba(var(--theme), 1),
    rgba(var(--white), 1)
  );
  background-size: 200% 200%;
  -webkit-animation: Gradient 9s ease infinite;
  animation: Gradient 9s ease infinite;
}
.btn-submit {
  background: linear-gradient(
    0deg,
    rgba(var(--dark), 1) 0%,
    rgba(var(--dark), 1) 50%,
    rgba(var(--black), 1) 50%
  );
  background-size: 100% 100%;
  color: rgba(var(--white), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 0.33);
}
.btn-submit:hover {
  background: linear-gradient(
    0deg,
    rgba(var(--black), 1) 0%,
    rgba(var(--black), 1) 50%,
    rgba(var(--dark), 1) 50%
  );
  background-size: 200% 200%;
  -webkit-animation: Gradient 9s ease infinite;
  animation: Gradient 9s ease infinite;
  color: rgba(var(--white), 1);
  text-shadow: 0px 2px 8px rgba(var(--theme), 0.33);
}
/* BTN Current */
.btn-curr {
  background: linear-gradient(
    45deg,
    rgba(var(--white), 0),
    rgba(var(--white), 0),
    rgba(var(--white), 0),
    rgba(var(--white), 0)
  );
  background-size: 100% 100%;
  -webkit-animation: Gradient 3s ease infinite;
  animation: Gradient 3s ease infinite;
  color: rgba(var(--white), 1);
  text-shadow: 0px 1px 1px rgba(var(--black), 0.25);
}
.btn-curr:hover {
  background: linear-gradient(
    45deg,
    rgba(var(--black), 0),
    rgba(var(--black), 0),
    rgba(var(--black), 0),
    rgba(var(--black), 0)
  );
  background-size: 100% 100%;
  -webkit-animation: Gradient 3s ease infinite;
  animation: Gradient 3s ease infinite;
  color: rgba(var(--black), 1);
  text-shadow: 0px 1px 1px rgba(var(--master), 0.33);
}
.btn-curr.fix {
  color: rgba(var(--black), 1);
  text-shadow: 0px 1px 1px rgba(var(--master), 0.33);
}
.btn-curr.fix:hover {
  color: rgba(var(--black), 1);
  text-shadow: 0px 1px 1px rgba(var(--master), 0.33);
}
/* BTN Active */
.btn-active {
  background: linear-gradient(
    45deg,
    rgba(var(--white), 1),
    rgba(var(--white), 1),
    rgba(var(--white), 1),
    rgba(var(--white), 1)
  );
  background-size: 100% 100%;
  -webkit-animation: Gradient 3s ease infinite;
  animation: Gradient 3s ease infinite;
  color: rgba(var(--theme), 1);
  text-shadow: 0px 1px 1px rgba(var(--black), 0.11);
}
.btn-active:hover {
  background: linear-gradient(
    45deg,
    rgba(var(--white), 1),
    rgba(var(--white), 1),
    rgba(var(--white), 1),
    rgba(var(--white), 1)
  );
  background-size: 100% 100%;
  -webkit-animation: Gradient 3s ease infinite;
  animation: Gradient 3s ease infinite;
  color: rgba(var(--black), 1);
  text-shadow: 0px 1px 1px rgba(var(--master), 0.33);
}
.btn-active.fix {
  color: rgba(var(--black), 1);
  text-shadow: 0px 1px 1px rgba(var(--master), 0.33);
}
.btn-active.fix:hover {
  color: rgba(var(--black), 1);
  text-shadow: 0px 1px 1px rgba(var(--master), 0.33);
}
.btn-box {
  background: linear-gradient(
    45deg,
    rgba(var(--white), 1),
    rgba(var(--white), 1),
    rgba(var(--white), 1),
    rgba(var(--white), 1)
  );
  background-size: 100% 100%;
  color: rgba(var(--theme), 1);
  text-shadow: 0px 2px 8px rgba(var(--white), 1);
}
.btn-box:hover {
  background: linear-gradient(
    45deg,
    rgba(var(--theme), 1),
    rgba(var(--theme), 1),
    rgba(var(--master), 0.2),
    rgba(var(--theme), 1)
  );
  background-size: 200% 200%;
  -webkit-animation: Gradient 9s ease infinite;
  animation: Gradient 9s ease infinite;
  color: rgba(var(--white), 1);
  text-shadow: 0px 2px 8px rgba(var(--theme), 1);
}
.btn-tab {
  background: linear-gradient(
    45deg,
    rgba(var(--theme), 1),
    rgba(var(--master), 1),
    rgba(var(--theme), 1),
    rgba(var(--master), 1)
  );
  background-size: 100% 100%;
  color: rgba(var(--white), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 1);
}
.btn-tab:hover {
  background: linear-gradient(
    45deg,
    rgba(var(--theme), 1),
    rgba(var(--master), 1),
    rgba(var(--theme), 1),
    rgba(var(--master), 1)
  );
  background-size: 200% 200%;
  -webkit-animation: Gradient 9s ease infinite;
  animation: Gradient 9s ease infinite;
  color: rgba(var(--secondary), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 1);
}
.btn-main {
  background: linear-gradient(
    45deg,
    rgba(var(--black), 1),
    rgba(var(--black), 1),
    rgba(var(--black), 1),
    rgba(var(--black), 1)
  );
  background-size: 100% 100%;
  color: rgba(var(--white), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 0.11);
}
.btn-main:hover {
  background: linear-gradient(
    45deg,
    rgba(var(--white), 0.33),
    rgba(var(--white), 0.33),
    rgba(var(--white), 0.33),
    rgba(var(--white), 0.33)
  );
  background-size: 200% 200%;
  -webkit-animation: Gradient 9s ease infinite;
  animation: Gradient 9s ease infinite;
  color: rgba(var(--white), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 0.11);
}
.btn-sub {
  background: linear-gradient(
    45deg,
    rgba(var(--white), 1),
    rgba(var(--white), 1),
    rgba(var(--white), 1),
    rgba(var(--white), 1)
  );
  background-size: 100% 100%;
  color: rgba(var(--theme), 1);
  text-shadow: 0px 2px 8px rgba(var(--white), 0.11);
}
.btn-sub:hover {
  background: linear-gradient(
    45deg,
    rgba(var(--white), 0.88),
    rgba(var(--white), 0.88),
    rgba(var(--white), 0.88),
    rgba(var(--white), 0.88)
  );
  background-size: 200% 200%;
  -webkit-animation: Gradient 9s ease infinite;
  animation: Gradient 9s ease infinite;
  color: rgba(var(--black), 1);
  text-shadow: 0px 2px 8px rgba(var(--white), 0.11);
}

/* Tab */
/* Dashboard */
.btn-white {
  background: linear-gradient(
    45deg,
    rgba(var(--white), 1),
    rgba(var(--white), 1)
  );
  background-size: 100% 100%;
  color: rgba(var(--theme), 1);
  text-shadow: 0px 2px 8px rgba(var(--gray), 1);
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.btn-white:hover {
  background: linear-gradient(
    45deg,
    rgba(var(--theme), 1),
    rgba(var(--theme), 1)
  );
  background-size: 200% 200%;
  -webkit-animation: Gradient 9s ease infinite;
  animation: Gradient 9s ease infinite;
  color: rgba(var(--white), 1);
  text-shadow: 0px 2px 8px rgba(var(--master), 1);
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.btn-black {
  background: linear-gradient(
    45deg,
    rgba(var(--black), 1),
    rgba(var(--master), 1),
    rgba(var(--black), 1),
    rgba(var(--master), 1)
  );
  background-size: 100% 100%;
  color: rgba(var(--secondary), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 1);
}
.btn-black:hover {
  background: linear-gradient(
    45deg,
    rgba(var(--black), 1),
    rgba(var(--theme), 1),
    rgba(var(--black), 1),
    rgba(var(--theme), 1)
  );
  background-size: 200% 200%;
  -webkit-animation: Gradient 9s ease infinite;
  animation: Gradient 9s ease infinite;
  color: rgba(var(--white), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 1);
}
.btn-theme {
  background: linear-gradient(
    45deg,
    rgba(var(--theme), 1),
    rgba(var(--theme), 1),
    rgba(var(--theme), 1),
    rgba(var(--theme), 1)
  );
  background-size: 100% 100%;
  color: rgba(var(--white), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 1);
}
.btn-theme:hover {
  background: linear-gradient(
    45deg,
    rgba(var(--theme), 1),
    rgba(var(--theme), 1),
    rgba(var(--theme), 1),
    rgba(var(--theme), 1)
  );
  background-size: 200% 200%;
  -webkit-animation: Gradient 9s ease infinite;
  animation: Gradient 9s ease infinite;
  color: rgba(var(--white), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 1);
}
.btn-master {
  background: linear-gradient(
    45deg,
    rgba(var(--master), 1),
    rgba(var(--theme), 1),
    rgba(var(--master), 1),
    rgba(var(--theme), 1)
  );
  background-size: 100% 100%;
  color: rgba(var(--white), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 1);
}
.btn-master:hover {
  background: linear-gradient(
    45deg,
    rgba(var(--master), 1),
    rgba(var(--theme), 1),
    rgba(var(--master), 1),
    rgba(var(--theme), 1)
  );
  background-size: 200% 200%;
  -webkit-animation: Gradient 9s ease infinite;
  animation: Gradient 9s ease infinite;
  color: rgba(var(--white), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 1);
}
.btn-primary {
  background: linear-gradient(
    45deg,
    rgba(var(--primary), 1),
    rgba(var(--secondary), 1),
    rgba(var(--primary), 1),
    rgba(var(--secondary), 1)
  );
  background-size: 100% 100%;
  color: rgba(var(--white), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 1);
}
.btn-primary:hover {
  background: linear-gradient(
    45deg,
    rgba(var(--primary), 1),
    rgba(var(--secondary), 1),
    rgba(var(--primary), 1),
    rgba(var(--secondary), 1)
  );
  background-size: 200% 200%;
  -webkit-animation: Gradient 9s ease infinite;
  animation: Gradient 9s ease infinite;
  color: rgba(var(--white), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 1);
}
.btn-secondary {
  background: linear-gradient(
    45deg,
    rgba(var(--secondary), 1),
    rgba(var(--primary), 1),
    rgba(var(--secondary), 1),
    rgba(var(--primary), 1)
  );
  background-size: 100% 100%;
  color: rgba(var(--white), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 1);
}
.btn-secondary:hover {
  background: linear-gradient(
    45deg,
    rgba(var(--secondary), 1),
    rgba(var(--primary), 1),
    rgba(var(--secondary), 1),
    rgba(var(--primary), 1)
  );
  background-size: 200% 200%;
  -webkit-animation: Gradient 9s ease infinite;
  animation: Gradient 9s ease infinite;
  color: rgba(var(--white), 1);
  text-shadow: 0px 2px 8px rgba(var(--black), 1);
}
/* Button */
/* Tab */
.bg-number {
  background: linear-gradient(
    45deg,
    rgba(213, 235, 246, 1),
    rgba(116, 192, 227, 1)
  );
  background-size: 100% 100%;
}
.bg-number:hover {
  background: linear-gradient(
    45deg,
    rgba(213, 235, 246, 1),
    rgba(116, 192, 227, 1)
  );
  background-size: 200% 200%;
  -webkit-animation: Gradient 9s ease infinite;
  animation: Gradient 9s ease infinite;
}
.bg-delete {
  background: linear-gradient(45deg, rgba(255, 0, 0, 1), rgba(200, 0, 0, 1));
  background-size: 100% 100%;
}
.bg-delete:hover {
  background: linear-gradient(45deg, rgba(255, 0, 0, 1), rgba(200, 0, 0, 1));
  background-size: 200% 200%;
  -webkit-animation: Gradient 9s ease infinite;
  animation: Gradient 9s ease infinite;
}
/* Layouts Button */
/* Menu */
.hov-click {
  padding-left: 0;
  transition: all 0.15s ease-in-out;
}
.hov-click:hover {
  padding-left: 10px;
  transition: all 0.15s ease-in-out;
}
/* Layouts Icons */
.btn-layouts {
  background-color: rgba(var(--red), 1);
  color: rgba(var(--white), 1);
  transform: scale(1.00);
  transition: all 0.15s ease-in-out;
}
.btn-layouts:hover {
  background-color: rgba(var(--theme), 1);
  color: rgba(var(--white), 1);
  transform: scale(0.96);
  transition: all 0.15s ease-in-out;
}
/* Contents Icons */
.btn-contents {
  background-color: rgba(var(--theme), 1);
  color: rgba(var(--white), 1);
  transform: scale(1.00);
  transition: all 0.15s ease-in-out;
}
.btn-contents:hover {
  background-color: rgba(var(--black), 1);
  color: rgba(var(--white), 1);
  transform: scale(0.96);
  transition: all 0.15s ease-in-out;
}
/* Contents Icons */
.btn-contents {
  background-color: rgba(var(--black), 1);
  color: rgba(var(--white), 1);
  transform: scale(1.00);
  transition: all 0.15s ease-in-out;
}
.btn-contents:hover {
  background-color: rgba(var(--theme), 1);
  color: rgba(var(--white), 1);
  transform: scale(0.96);
  transition: all 0.15s ease-in-out;
}
/* Box Icons */
.btn-boxs {
  background-color: rgba(var(--theme), 1);
  color: rgba(var(--white), 1);
  transform: scale(1.00);
  transition: all 0.15s ease-in-out;
}
.btn-boxs:hover {
  background-color: rgba(var(--black), 1);
  color: rgba(var(--white), 1);
  transform: scale(0.96);
  transition: all 0.15s ease-in-out;
}
/* Contents Icons */
.btn-divs {
  transform: scale(1);
  transition: all 0.15s ease-in-out;
}
.btn-divs:hover {
  transform: scale(0.9);
  transition: all 0.15s ease-in-out;
}

/* highlight */
.highlight {
  display: inline !important;
  background-image: linear-gradient(
    transparent calc(100% - 5px),
    rgba(var(--theme), 0.1) 5px
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: background-size 1s;
  text-transform: capitalize;
  z-index: 0 !important;
}
.highlight-black {
  display: inline !important;
  background-image: linear-gradient(
    transparent calc(100% - 5px),
    rgba(var(--black), 0.1) 5px
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: background-size 1s;
  text-transform: capitalize;
  z-index: 0 !important;
}
.highlight-white {
  display: inline !important;
  background-image: linear-gradient(
    transparent calc(100% - 5px),
    rgba(var(--white), 0.1) 5px
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: background-size 1s;
  text-transform: capitalize;
  z-index: 0 !important;
}
.highlight-theme {
  display: inline !important;
  background-image: linear-gradient(
    transparent calc(100% - 5px),
    rgba(var(--theme), 0.1) 5px
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: background-size 1s;
  text-transform: capitalize;
  z-index: 0 !important;
}
.highlight-master {
  display: inline !important;
  background-image: linear-gradient(
    transparent calc(100% - 5px),
    rgba(var(--master), 0.1) 5px
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: background-size 1s;
  text-transform: capitalize;
  z-index: 0 !important;
}
.highlight-primary {
  display: inline !important;
  background-image: linear-gradient(
    transparent calc(100% - 5px),
    rgba(var(--primary), 0.1) 5px
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: background-size 1s;
  text-transform: capitalize;
  z-index: 0 !important;
}
.highlight-secondary {
  display: inline !important;
  background-image: linear-gradient(
    transparent calc(100% - 5px),
    rgba(var(--secondary), 0.1) 5px
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: background-size 1s;
  text-transform: capitalize;
  z-index: 0 !important;
}