:root {
  --primary: 11, 106, 176;
  /* #ffffff */
  --secondary: 53, 53, 53;
  /* #ffffff */

  --white: 255, 255, 255;
  /* #ffffff */
  --light: 240, 240, 240;
  /* #f2f2f2 */
  --gray: 127, 127, 127;
  /* #808080 */
  --dark: 51, 51, 51;
  /* #333333 */
  --black: 0, 0, 0;
  /* #000000 */

  --white-black-100: 255, 255, 255;
  /* #ffffff */
  --white-black-95: 242, 242, 242;
  /* #f2f2f2 */
  --white-black-90: 230, 230, 230;
  /* #e6e6e6 */
  --white-black-85: 217, 217, 217;
  /* #d9d9d9 */
  --white-black-80: 204, 204, 204;
  /* #cccccc */
  --white-black-75: 191, 191, 191;
  /* #bfbfbf */
  --white-black-70: 179, 179, 179;
  /* #b3b3b3 */
  --white-black-65: 166, 166, 166;
  /* #a6a6a6 */
  --white-black-60: 153, 153, 153;
  /* #999999 */
  --white-black-55: 140, 140, 140;
  /* #8c8c8c */
  --white-black-50: 128, 128, 128;
  /* #808080 */
  --white-black-45: 115, 115, 115;
  /* #737373 */
  --white-black-40: 102, 102, 102;
  /* #666666 */
  --white-black-35: 89, 89, 89;
  /* #595959 */
  --white-black-30: 77, 77, 77;
  /* #4d4d4d */
  --white-black-25: 64, 64, 64;
  /* #404040 */
  --white-black-20: 51, 51, 51;
  /* #333333 */
  --white-black-15: 38, 38, 38;
  /* #262626 */
  --white-black-10: 26, 26, 26;
  /* #1a1a1a */
  --white-black-5: 13, 13, 13;
  /* #0d0d0d */
  --white-black-0: 0, 0, 0;
  /* #8c8c8c */

  --red: 223, 48, 65;
  /* #dc3545 */
  --orange: 255, 115, 40;
  /* #fd7e14 */
  --yellow: 255, 186, 44;
  /* #ffc107 */
  --green: 0, 157, 65;
  /* #28a745 */
  --blue: 0, 111, 250;
  /* #007bff */
  --purple: 103, 57, 182;
  /* #6f42c1 */
  --indigo: 96, 10, 235;
  /* #6610f2 */

  --teal: 0, 194, 141;
  /* #20c997 */
  --cyan: 0, 151, 173;
  /* #17a2b8 */
  --pink: 237, 55, 129;
  /* #e83e8c */

  --link: 0, 123, 255;
  --success: 40, 167, 69;
  --alert: 23, 162, 184;
  --warning: 255, 193, 7;
  --error: 220, 53, 69;

  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;

  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --font-family: var(--font-family-sans-serif);

  --font-size: 14px;

  /*
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap" rel="stylesheet">
        font-family: 'Tajawal', sans-serif;
    */
}

/*=====================================================*/
* {
  margin: 0;
  padding: 0;
  border: none;
  text-align: start;
  text-transform: none;
  box-sizing: border-box;
  background-color: transparent;
}

*::before,
*::after {
  clear: both;
}

*:focus {
  outline: none !important;
}

/*=====================================================*/
html {
  font-size: var(--font-size);
  line-height: 1.15rem;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -ms-overflow-style: scrollbar;
}

body {
  font-size: 1rem;
  font-weight: normal;
  color: rgba(var(--dark), 1);
  font-family: var(--font-family);
  position: relative;
  width: 100%;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
}

section {
  position: relative;

  display: flex;
  flex-direction: column;
}

.flex-grow {
  flex: 1 1 0;
}

/*===================================================== Font Awesome Support */
.fab {
  font-family: "Font Awesome 5 Brands" !important;
}

.far,
.fa,
.fas {
  font-family: "Font Awesome 5 Free" !important;
}

/*=====================================================*/
.animate-0 {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.animate-250ms {
  -webkit-transition: all 250ms linear !important;
  -moz-transition: all 250ms linear !important;
  -ms-transition: all 250ms linear !important;
  -o-transition: all 250ms linear !important;
  transition: all 250ms linear !important;
}

.animate-500ms {
  -webkit-transition: all 500ms linear !important;
  -moz-transition: all 500ms linear !important;
  -ms-transition: all 500ms linear !important;
  -o-transition: all 500ms linear !important;
  transition: all 500ms linear !important;
}

.animate-750ms {
  -webkit-transition: all 750ms linear !important;
  -moz-transition: all 750ms linear !important;
  -ms-transition: all 750ms linear !important;
  -o-transition: all 750ms linear !important;
  transition: all 750ms linear !important;
}

.animate-1000ms {
  -webkit-transition: all 1000ms linear !important;
  -moz-transition: all 1000ms linear !important;
  -ms-transition: all 1000ms linear !important;
  -o-transition: all 1000ms linear !important;
  transition: all 1000ms linear !important;
}

.animate-1250ms {
  -webkit-transition: all 1250ms linear !important;
  -moz-transition: all 1250ms linear !important;
  -ms-transition: all 1250ms linear !important;
  -o-transition: all 1250ms linear !important;
  transition: all 1250ms linear !important;
}

.animate-1500ms {
  -webkit-transition: all 1500ms linear !important;
  -moz-transition: all 1500ms linear !important;
  -ms-transition: all 1500ms linear !important;
  -o-transition: all 1500ms linear !important;
  transition: all 1500ms linear !important;
}

.animate-1750ms {
  -webkit-transition: all 1750ms linear !important;
  -moz-transition: all 1750ms linear !important;
  -ms-transition: all 1750ms linear !important;
  -o-transition: all 1750ms linear !important;
  transition: all 1750ms linear !important;
}

.animate-2000ms {
  -webkit-transition: all 2000ms linear !important;
  -moz-transition: all 2000ms linear !important;
  -ms-transition: all 2000ms linear !important;
  -o-transition: all 2000ms linear !important;
  transition: all 2000ms linear !important;
} /*==============================*/
.text-tarnucate {
  text-transform: capitalize !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-transform-none {
  text-transform: none !important;
}

/*==============================*/
.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.text-start {
  text-align: start !important;
}

.text-end {
  text-align: end !important;
}

.text-justify {
  text-align: justify !important;
}

/*==============================*/
.font-weight-light {
  font-weight: lighter !important;
}

.font-weight-normal {
  font-weight: normal !important;
}

.font-weight-bold {
  font-weight: bold !important;
}

.font-weight-100 {
  font-weight: 100 !important;
}

.font-weight-200 {
  font-weight: 200 !important;
}

.font-weight-300 {
  font-weight: 300 !important;
}

.font-weight-400 {
  font-weight: 400 !important;
}

.font-weight-500 {
  font-weight: 500 !important;
}

.font-weight-600 {
  font-weight: 600 !important;
}

.font-weight-700 {
  font-weight: 700 !important;
}

.font-weight-800 {
  font-weight: 800 !important;
}

.font-weight-900 {
  font-weight: 900 !important;
}

@media (min-width: 576px) {
  .font-weight-sm-light {
    font-weight: lighter !important;
  }

  .font-weight-sm-normal {
    font-weight: normal !important;
  }

  .font-weight-sm-bold {
    font-weight: bold !important;
  }

  .font-weight-sm-100 {
    font-weight: 100 !important;
  }

  .font-weight-sm-200 {
    font-weight: 200 !important;
  }

  .font-weight-sm-300 {
    font-weight: 300 !important;
  }

  .font-weight-sm-400 {
    font-weight: 400 !important;
  }

  .font-weight-sm-500 {
    font-weight: 500 !important;
  }

  .font-weight-sm-600 {
    font-weight: 600 !important;
  }

  .font-weight-sm-700 {
    font-weight: 700 !important;
  }

  .font-weight-sm-800 {
    font-weight: 800 !important;
  }

  .font-weight-sm-900 {
    font-weight: 900 !important;
  }
}

@media (min-width: 768px) {
  .font-weight-md-light {
    font-weight: lighter !important;
  }

  .font-weight-md-normal {
    font-weight: normal !important;
  }

  .font-weight-md-bold {
    font-weight: bold !important;
  }

  .font-weight-md-100 {
    font-weight: 100 !important;
  }

  .font-weight-md-200 {
    font-weight: 200 !important;
  }

  .font-weight-md-300 {
    font-weight: 300 !important;
  }

  .font-weight-md-400 {
    font-weight: 400 !important;
  }

  .font-weight-md-500 {
    font-weight: 500 !important;
  }

  .font-weight-md-600 {
    font-weight: 600 !important;
  }

  .font-weight-md-700 {
    font-weight: 700 !important;
  }

  .font-weight-md-800 {
    font-weight: 800 !important;
  }

  .font-weight-md-900 {
    font-weight: 900 !important;
  }
}

@media (min-width: 992px) {
  .font-weight-lg-light {
    font-weight: lighter !important;
  }

  .font-weight-lg-normal {
    font-weight: normal !important;
  }

  .font-weight-lg-bold {
    font-weight: bold !important;
  }

  .font-weight-lg-100 {
    font-weight: 100 !important;
  }

  .font-weight-lg-200 {
    font-weight: 200 !important;
  }

  .font-weight-lg-300 {
    font-weight: 300 !important;
  }

  .font-weight-lg-400 {
    font-weight: 400 !important;
  }

  .font-weight-lg-500 {
    font-weight: 500 !important;
  }

  .font-weight-lg-600 {
    font-weight: 600 !important;
  }

  .font-weight-lg-700 {
    font-weight: 700 !important;
  }

  .font-weight-lg-800 {
    font-weight: 800 !important;
  }

  .font-weight-lg-900 {
    font-weight: 900 !important;
  }
}

@media (min-width: 1200px) {
  .font-weight-xl-light {
    font-weight: lighter !important;
  }

  .font-weight-xl-normal {
    font-weight: normal !important;
  }

  .font-weight-xl-bold {
    font-weight: bold !important;
  }

  .font-weight-xl-100 {
    font-weight: 100 !important;
  }

  .font-weight-xl-200 {
    font-weight: 200 !important;
  }

  .font-weight-xl-300 {
    font-weight: 300 !important;
  }

  .font-weight-xl-400 {
    font-weight: 400 !important;
  }

  .font-weight-xl-500 {
    font-weight: 500 !important;
  }

  .font-weight-xl-600 {
    font-weight: 600 !important;
  }

  .font-weight-xl-700 {
    font-weight: 700 !important;
  }

  .font-weight-xl-800 {
    font-weight: 800 !important;
  }

  .font-weight-xl-900 {
    font-weight: 900 !important;
  }
}

/*==============================*/
.font-style-none {
  font-style: normal !important;
}

.font-style-italic {
  font-style: italic !important;
}

.font-style-oblique {
  font-style: oblique !important;
}

/*==============================*/
.text-decoration-none {
  text-decoration: none !important;
}

.text-underline {
  text-decoration: underline !important;
}

.text-overline {
  text-decoration: overline !important;
}

.text-strikethrough {
  text-decoration: line-through !important;
}

.text-underline-overline {
  text-decoration: underline overline !important;
}

.text-overline-strikethrough {
  text-decoration: underline overline !important;
}

.text-underline-strikethrough {
  text-decoration: underline overline !important;
}

.text-underline-overline-strikethrough {
  text-decoration: underline overline line-through !important;
}

/*==============================*/
.indent-1 {
  text-indent: 1rem !important;
}

.indent-2 {
  text-indent: calc(1rem * 2) !important;
}

.indent-3 {
  text-indent: calc(1rem * 3) !important;
}

.indent-4 {
  text-indent: calc(1rem * 4) !important;
}

.indent-5 {
  text-indent: calc(1rem * 5) !important;
}

.indent-6 {
  text-indent: calc(1rem * 6) !important;
}

.indent-7 {
  text-indent: calc(1rem * 7) !important;
}

.indent-8 {
  text-indent: calc(1rem * 8) !important;
}

.indent-9 {
  text-indent: calc(1rem * 9) !important;
}

@media (min-width: 576px) {
  .indent-sm-1 {
    text-indent: 1rem !important;
  }

  .indent-sm-2 {
    text-indent: calc(1rem * 2) !important;
  }

  .indent-sm-3 {
    text-indent: calc(1rem * 3) !important;
  }

  .indent-sm-4 {
    text-indent: calc(1rem * 4) !important;
  }

  .indent-sm-5 {
    text-indent: calc(1rem * 5) !important;
  }

  .indent-sm-6 {
    text-indent: calc(1rem * 6) !important;
  }

  .indent-sm-7 {
    text-indent: calc(1rem * 7) !important;
  }

  .indent-sm-8 {
    text-indent: calc(1rem * 8) !important;
  }

  .indent-sm-9 {
    text-indent: calc(1rem * 9) !important;
  }
}

@media (min-width: 768px) {
  .indent-md-1 {
    text-indent: 1rem !important;
  }

  .indent-md-2 {
    text-indent: calc(1rem * 2) !important;
  }

  .indent-md-3 {
    text-indent: calc(1rem * 3) !important;
  }

  .indent-md-4 {
    text-indent: calc(1rem * 4) !important;
  }

  .indent-md-5 {
    text-indent: calc(1rem * 5) !important;
  }

  .indent-md-6 {
    text-indent: calc(1rem * 6) !important;
  }

  .indent-md-7 {
    text-indent: calc(1rem * 7) !important;
  }

  .indent-md-8 {
    text-indent: calc(1rem * 8) !important;
  }

  .indent-md-9 {
    text-indent: calc(1rem * 9) !important;
  }
}

@media (min-width: 992px) {
  .indent-lg-1 {
    text-indent: 1rem !important;
  }

  .indent-lg-2 {
    text-indent: calc(1rem * 2) !important;
  }

  .indent-lg-3 {
    text-indent: calc(1rem * 3) !important;
  }

  .indent-lg-4 {
    text-indent: calc(1rem * 4) !important;
  }

  .indent-lg-5 {
    text-indent: calc(1rem * 5) !important;
  }

  .indent-lg-6 {
    text-indent: calc(1rem * 6) !important;
  }

  .indent-lg-7 {
    text-indent: calc(1rem * 7) !important;
  }

  .indent-lg-8 {
    text-indent: calc(1rem * 8) !important;
  }

  .indent-lg-9 {
    text-indent: calc(1rem * 9) !important;
  }
}

@media (min-width: 1200px) {
  .indent-xl-1 {
    text-indent: 1rem !important;
  }

  .indent-xl-2 {
    text-indent: calc(1rem * 2) !important;
  }

  .indent-xl-3 {
    text-indent: calc(1rem * 3) !important;
  }

  .indent-xl-4 {
    text-indent: calc(1rem * 4) !important;
  }

  .indent-xl-5 {
    text-indent: calc(1rem * 5) !important;
  }

  .indent-xl-6 {
    text-indent: calc(1rem * 6) !important;
  }

  .indent-xl-7 {
    text-indent: calc(1rem * 7) !important;
  }

  .indent-xl-8 {
    text-indent: calc(1rem * 8) !important;
  }

  .indent-xl-9 {
    text-indent: calc(1rem * 9) !important;
  }
}

/*==============================*/

/*=====================< 0*/
.font-0 {
  font-size: 0 !important;
}

.font-025 {
  font-size: calc(1rem * 0.25) !important;
}

.font-050 {
  font-size: calc(1rem * 0.5) !important;
}

.font-075 {
  font-size: calc(1rem * 0.75) !important;
}

@media (min-width: 576px) {
  .font-sm-0 {
    font-size: 0 !important;
  }

  .font-sm-025 {
    font-size: calc(1rem * 0.25) !important;
  }

  .font-sm-050 {
    font-size: calc(1rem * 0.5) !important;
  }

  .font-sm-075 {
    font-size: calc(1rem * 0.75) !important;
  }
}

@media (min-width: 768px) {
  .font-md-0 {
    font-size: 0 !important;
  }

  .font-md-025 {
    font-size: calc(1rem * 0.25) !important;
  }

  .font-md-050 {
    font-size: calc(1rem * 0.5) !important;
  }

  .font-md-075 {
    font-size: calc(1rem * 0.75) !important;
  }
}

@media (min-width: 992px) {
  .font-lg-0 {
    font-size: 0 !important;
  }

  .font-lg-025 {
    font-size: calc(1rem * 0.25) !important;
  }

  .font-lg-050 {
    font-size: calc(1rem * 0.5) !important;
  }

  .font-lg-075 {
    font-size: calc(1rem * 0.75) !important;
  }
}

@media (min-width: 1200px) {
  .font-xl-0 {
    font-size: 0 !important;
  }

  .font-xl-025 {
    font-size: calc(1rem * 0.25) !important;
  }

  .font-xl-050 {
    font-size: calc(1rem * 0.5) !important;
  }

  .font-xl-075 {
    font-size: calc(1rem * 0.75) !important;
  }
}

/*=====================< 1*/
.font-100 {
  font-size: 1rem !important;
}

.font-125 {
  font-size: calc(1rem * 1.25) !important;
}

.font-150 {
  font-size: calc(1rem * 1.5) !important;
}

.font-175 {
  font-size: calc(1rem * 1.75) !important;
}

@media (min-width: 576px) {
  .font-sm-100 {
    font-size: 1rem !important;
  }

  .font-sm-125 {
    font-size: calc(1rem * 1.25) !important;
  }

  .font-sm-150 {
    font-size: calc(1rem * 1.5) !important;
  }

  .font-sm-175 {
    font-size: calc(1rem * 1.75) !important;
  }
}

@media (min-width: 768px) {
  .font-md-100 {
    font-size: 1rem !important;
  }

  .font-md-125 {
    font-size: calc(1rem * 1.25) !important;
  }

  .font-md-150 {
    font-size: calc(1rem * 1.5) !important;
  }

  .font-md-175 {
    font-size: calc(1rem * 1.75) !important;
  }
}

@media (min-width: 992px) {
  .font-lg-100 {
    font-size: 1rem !important;
  }

  .font-lg-125 {
    font-size: calc(1rem * 1.25) !important;
  }

  .font-lg-150 {
    font-size: calc(1rem * 1.5) !important;
  }

  .font-lg-175 {
    font-size: calc(1rem * 1.75) !important;
  }
}

@media (min-width: 1200px) {
  .font-xl-100 {
    font-size: 1rem !important;
  }

  .font-xl-125 {
    font-size: calc(1rem * 1.25) !important;
  }

  .font-xl-150 {
    font-size: calc(1rem * 1.5) !important;
  }

  .font-xl-175 {
    font-size: calc(1rem * 1.75) !important;
  }
}

/*=====================< 2*/
.font-200 {
  font-size: calc(1rem * 2) !important;
}

.font-225 {
  font-size: calc(1rem * 2.25) !important;
}

.font-250 {
  font-size: calc(1rem * 2.5) !important;
}

.font-275 {
  font-size: calc(1rem * 2.75) !important;
}

@media (min-width: 576px) {
  .font-sm-200 {
    font-size: calc(1rem * 2) !important;
  }

  .font-sm-225 {
    font-size: calc(1rem * 2.25) !important;
  }

  .font-sm-250 {
    font-size: calc(1rem * 2.5) !important;
  }

  .font-sm-275 {
    font-size: calc(1rem * 2.75) !important;
  }
}

@media (min-width: 768px) {
  .font-md-200 {
    font-size: calc(1rem * 2) !important;
  }

  .font-md-225 {
    font-size: calc(1rem * 2.25) !important;
  }

  .font-md-250 {
    font-size: calc(1rem * 2.5) !important;
  }

  .font-md-275 {
    font-size: calc(1rem * 2.75) !important;
  }
}

@media (min-width: 992px) {
  .font-lg-200 {
    font-size: calc(1rem * 2) !important;
  }

  .font-lg-225 {
    font-size: calc(1rem * 2.25) !important;
  }

  .font-lg-250 {
    font-size: calc(1rem * 2.5) !important;
  }

  .font-lg-275 {
    font-size: calc(1rem * 2.75) !important;
  }
}

@media (min-width: 1200px) {
  .font-xl-200 {
    font-size: calc(1rem * 2) !important;
  }

  .font-xl-225 {
    font-size: calc(1rem * 2.25) !important;
  }

  .font-xl-250 {
    font-size: calc(1rem * 2.5) !important;
  }

  .font-xl-275 {
    font-size: calc(1rem * 2.75) !important;
  }
}

/*=====================< 3*/
.font-300 {
  font-size: calc(1rem * 3) !important;
}

.font-325 {
  font-size: calc(1rem * 3.25) !important;
}

.font-350 {
  font-size: calc(1rem * 3.5) !important;
}

.font-375 {
  font-size: calc(1rem * 3.75) !important;
}

@media (min-width: 576px) {
  .font-sm-300 {
    font-size: calc(1rem * 3) !important;
  }

  .font-sm-325 {
    font-size: calc(1rem * 3.25) !important;
  }

  .font-sm-350 {
    font-size: calc(1rem * 3.5) !important;
  }

  .font-sm-375 {
    font-size: calc(1rem * 3.75) !important;
  }
}

@media (min-width: 768px) {
  .font-md-300 {
    font-size: calc(1rem * 3) !important;
  }

  .font-md-325 {
    font-size: calc(1rem * 3.25) !important;
  }

  .font-md-350 {
    font-size: calc(1rem * 3.5) !important;
  }

  .font-md-375 {
    font-size: calc(1rem * 3.75) !important;
  }
}

@media (min-width: 992px) {
  .font-lg-300 {
    font-size: calc(1rem * 3) !important;
  }

  .font-lg-325 {
    font-size: calc(1rem * 3.25) !important;
  }

  .font-lg-350 {
    font-size: calc(1rem * 3.5) !important;
  }

  .font-lg-375 {
    font-size: calc(1rem * 3.75) !important;
  }
}

@media (min-width: 1200px) {
  .font-xl-300 {
    font-size: calc(1rem * 3) !important;
  }

  .font-xl-325 {
    font-size: calc(1rem * 3.25) !important;
  }

  .font-xl-350 {
    font-size: calc(1rem * 3.5) !important;
  }

  .font-xl-375 {
    font-size: calc(1rem * 3.75) !important;
  }
}

/*=====================< 4*/
.font-400 {
  font-size: calc(1rem * 4) !important;
}

.font-425 {
  font-size: calc(1rem * 4.25) !important;
}

.font-450 {
  font-size: calc(1rem * 4.5) !important;
}

.font-475 {
  font-size: calc(1rem * 4.75) !important;
}

@media (min-width: 576px) {
  .font-sm-400 {
    font-size: calc(1rem * 4) !important;
  }

  .font-sm-425 {
    font-size: calc(1rem * 4.25) !important;
  }

  .font-sm-450 {
    font-size: calc(1rem * 4.5) !important;
  }

  .font-sm-475 {
    font-size: calc(1rem * 4.75) !important;
  }
}

@media (min-width: 768px) {
  .font-md-400 {
    font-size: calc(1rem * 4) !important;
  }

  .font-md-425 {
    font-size: calc(1rem * 4.25) !important;
  }

  .font-md-450 {
    font-size: calc(1rem * 4.5) !important;
  }

  .font-md-475 {
    font-size: calc(1rem * 4.75) !important;
  }
}

@media (min-width: 992px) {
  .font-lg-400 {
    font-size: calc(1rem * 4) !important;
  }

  .font-lg-425 {
    font-size: calc(1rem * 4.25) !important;
  }

  .font-lg-450 {
    font-size: calc(1rem * 4.5) !important;
  }

  .font-lg-475 {
    font-size: calc(1rem * 4.75) !important;
  }
}

@media (min-width: 1200px) {
  .font-xl-400 {
    font-size: calc(1rem * 4) !important;
  }

  .font-xl-425 {
    font-size: calc(1rem * 4.25) !important;
  }

  .font-xl-450 {
    font-size: calc(1rem * 4.5) !important;
  }

  .font-xl-475 {
    font-size: calc(1rem * 4.75) !important;
  }
}

/*=====================< 5*/
.font-500 {
  font-size: calc(1rem * 5) !important;
}

.font-525 {
  font-size: calc(1rem * 5.25) !important;
}

.font-550 {
  font-size: calc(1rem * 5.5) !important;
}

.font-575 {
  font-size: calc(1rem * 5.75) !important;
}

@media (min-width: 576px) {
  .font-sm-500 {
    font-size: calc(1rem * 5) !important;
  }

  .font-sm-525 {
    font-size: calc(1rem * 5.25) !important;
  }

  .font-sm-550 {
    font-size: calc(1rem * 5.5) !important;
  }

  .font-sm-575 {
    font-size: calc(1rem * 5.75) !important;
  }
}

@media (min-width: 768px) {
  .font-md-500 {
    font-size: calc(1rem * 5) !important;
  }

  .font-md-525 {
    font-size: calc(1rem * 5.25) !important;
  }

  .font-md-550 {
    font-size: calc(1rem * 5.5) !important;
  }

  .font-md-575 {
    font-size: calc(1rem * 5.75) !important;
  }
}

@media (min-width: 992px) {
  .font-lg-500 {
    font-size: calc(1rem * 5) !important;
  }

  .font-lg-525 {
    font-size: calc(1rem * 5.25) !important;
  }

  .font-lg-550 {
    font-size: calc(1rem * 5.5) !important;
  }

  .font-lg-575 {
    font-size: calc(1rem * 5.75) !important;
  }
}

@media (min-width: 1200px) {
  .font-xl-500 {
    font-size: calc(1rem * 5) !important;
  }

  .font-xl-525 {
    font-size: calc(1rem * 5.25) !important;
  }

  .font-xl-550 {
    font-size: calc(1rem * 5.5) !important;
  }

  .font-xl-575 {
    font-size: calc(1rem * 5.75) !important;
  }
}

/*=====================< 6*/
.font-600 {
  font-size: calc(1rem * 6) !important;
}

.font-625 {
  font-size: calc(1rem * 6.25) !important;
}

.font-650 {
  font-size: calc(1rem * 6.5) !important;
}

.font-675 {
  font-size: calc(1rem * 6.75) !important;
}

@media (min-width: 576px) {
  .font-sm-600 {
    font-size: calc(1rem * 6) !important;
  }

  .font-sm-625 {
    font-size: calc(1rem * 6.25) !important;
  }

  .font-sm-650 {
    font-size: calc(1rem * 6.5) !important;
  }

  .font-sm-675 {
    font-size: calc(1rem * 6.75) !important;
  }
}

@media (min-width: 768px) {
  .font-md-600 {
    font-size: calc(1rem * 6) !important;
  }

  .font-md-625 {
    font-size: calc(1rem * 6.25) !important;
  }

  .font-md-650 {
    font-size: calc(1rem * 6.5) !important;
  }

  .font-md-675 {
    font-size: calc(1rem * 6.75) !important;
  }
}

@media (min-width: 992px) {
  .font-lg-600 {
    font-size: calc(1rem * 6) !important;
  }

  .font-lg-625 {
    font-size: calc(1rem * 6.25) !important;
  }

  .font-lg-650 {
    font-size: calc(1rem * 6.5) !important;
  }

  .font-lg-675 {
    font-size: calc(1rem * 6.75) !important;
  }
}

@media (min-width: 1200px) {
  .font-xl-600 {
    font-size: calc(1rem * 6) !important;
  }

  .font-xl-625 {
    font-size: calc(1rem * 6.25) !important;
  }

  .font-xl-650 {
    font-size: calc(1rem * 6.5) !important;
  }

  .font-xl-675 {
    font-size: calc(1rem * 6.75) !important;
  }
}

/*=====================< 7*/
.font-700 {
  font-size: calc(1rem * 7) !important;
}

.font-725 {
  font-size: calc(1rem * 7.25) !important;
}

.font-750 {
  font-size: calc(1rem * 7.5) !important;
}

.font-775 {
  font-size: calc(1rem * 7.75) !important;
}

@media (min-width: 576px) {
  .font-sm-700 {
    font-size: calc(1rem * 7) !important;
  }

  .font-sm-725 {
    font-size: calc(1rem * 7.25) !important;
  }

  .font-sm-750 {
    font-size: calc(1rem * 7.5) !important;
  }

  .font-sm-775 {
    font-size: calc(1rem * 7.75) !important;
  }
}

@media (min-width: 768px) {
  .font-md-700 {
    font-size: calc(1rem * 7) !important;
  }

  .font-md-725 {
    font-size: calc(1rem * 7.25) !important;
  }

  .font-md-750 {
    font-size: calc(1rem * 7.5) !important;
  }

  .font-md-775 {
    font-size: calc(1rem * 7.75) !important;
  }
}

@media (min-width: 992px) {
  .font-lg-700 {
    font-size: calc(1rem * 7) !important;
  }

  .font-lg-725 {
    font-size: calc(1rem * 7.25) !important;
  }

  .font-lg-750 {
    font-size: calc(1rem * 7.5) !important;
  }

  .font-lg-775 {
    font-size: calc(1rem * 7.75) !important;
  }
}

@media (min-width: 1200px) {
  .font-xl-700 {
    font-size: calc(1rem * 7) !important;
  }

  .font-xl-725 {
    font-size: calc(1rem * 7.25) !important;
  }

  .font-xl-750 {
    font-size: calc(1rem * 7.5) !important;
  }

  .font-xl-775 {
    font-size: calc(1rem * 7.75) !important;
  }
}

/*=====================< 8*/
.font-800 {
  font-size: calc(1rem * 8) !important;
}

.font-825 {
  font-size: calc(1rem * 8.25) !important;
}

.font-850 {
  font-size: calc(1rem * 8.5) !important;
}

.font-875 {
  font-size: calc(1rem * 8.75) !important;
}

@media (min-width: 576px) {
  .font-sm-800 {
    font-size: calc(1rem * 8) !important;
  }

  .font-sm-825 {
    font-size: calc(1rem * 8.25) !important;
  }

  .font-sm-850 {
    font-size: calc(1rem * 8.5) !important;
  }

  .font-sm-875 {
    font-size: calc(1rem * 8.75) !important;
  }
}

@media (min-width: 768px) {
  .font-md-800 {
    font-size: calc(1rem * 8) !important;
  }

  .font-md-825 {
    font-size: calc(1rem * 8.25) !important;
  }

  .font-md-850 {
    font-size: calc(1rem * 8.5) !important;
  }

  .font-md-875 {
    font-size: calc(1rem * 8.75) !important;
  }
}

@media (min-width: 992px) {
  .font-lg-800 {
    font-size: calc(1rem * 8) !important;
  }

  .font-lg-825 {
    font-size: calc(1rem * 8.25) !important;
  }

  .font-lg-850 {
    font-size: calc(1rem * 8.5) !important;
  }

  .font-lg-875 {
    font-size: calc(1rem * 8.75) !important;
  }
}

@media (min-width: 1200px) {
  .font-xl-800 {
    font-size: calc(1rem * 8) !important;
  }

  .font-xl-825 {
    font-size: calc(1rem * 8.25) !important;
  }

  .font-xl-850 {
    font-size: calc(1rem * 8.5) !important;
  }

  .font-xl-875 {
    font-size: calc(1rem * 8.75) !important;
  }
}

/*=====================< 9*/
.font-900 {
  font-size: calc(1rem * 9) !important;
}

.font-925 {
  font-size: calc(1rem * 9.25) !important;
}

.font-950 {
  font-size: calc(1rem * 9.5) !important;
}

.font-975 {
  font-size: calc(1rem * 9.75) !important;
}

@media (min-width: 576px) {
  .font-sm-900 {
    font-size: calc(1rem * 9) !important;
  }

  .font-sm-925 {
    font-size: calc(1rem * 9.95) !important;
  }

  .font-sm-950 {
    font-size: calc(1rem * 9.5) !important;
  }

  .font-sm-975 {
    font-size: calc(1rem * 9.75) !important;
  }
}

@media (min-width: 768px) {
  .font-md-900 {
    font-size: calc(1rem * 9) !important;
  }

  .font-md-925 {
    font-size: calc(1rem * 9.95) !important;
  }

  .font-md-950 {
    font-size: calc(1rem * 9.5) !important;
  }

  .font-md-975 {
    font-size: calc(1rem * 9.75) !important;
  }
}

@media (min-width: 992px) {
  .font-lg-900 {
    font-size: calc(1rem * 9) !important;
  }

  .font-lg-925 {
    font-size: calc(1rem * 9.95) !important;
  }

  .font-lg-950 {
    font-size: calc(1rem * 9.5) !important;
  }

  .font-lg-975 {
    font-size: calc(1rem * 9.75) !important;
  }
}

@media (min-width: 1200px) {
  .font-xl-900 {
    font-size: calc(1rem * 9) !important;
  }

  .font-xl-925 {
    font-size: calc(1rem * 9.95) !important;
  }

  .font-xl-950 {
    font-size: calc(1rem * 9.5) !important;
  }

  .font-xl-975 {
    font-size: calc(1rem * 9.75) !important;
  }
}
/*============================================================================================< primary */
/*==============================================< norm*/
.primary-c {
  color: rgba(var(--primary), 1) !important;
}

.primary-o75-c {
  color: rgba(var(--primary), 0.75) !important;
}

.primary-o50-c {
  color: rgba(var(--primary), 0.5) !important;
}

.primary-o25-c {
  color: rgba(var(--primary), 0.25) !important;
}

.primary-bg {
  background-color: rgba(var(--primary), 1) !important;
}

.primary-o75-bg {
  background-color: rgba(var(--primary), 0.75) !important;
}

.primary-o50-bg {
  background-color: rgba(var(--primary), 0.5) !important;
}

.primary-o25-bg {
  background-color: rgba(var(--primary), 0.25) !important;
}

.primary-brdr {
  border-color: rgba(var(--primary), 1) !important;
}

.primary-o75-brdr {
  border-color: rgba(var(--primary), 0.75) !important;
}

.primary-o50-brdr {
  border-color: rgba(var(--primary), 0.5) !important;
}

.primary-o25-brdr {
  border-color: rgba(var(--primary), 0.25) !important;
}

/*==============================================< hover*/
.hover-primary-c:hover {
  color: rgba(var(--primary), 1) !important;
}

.hover-primary-o75-c:hover {
  color: rgba(var(--primary), 0.75) !important;
}

.hover-primary-o50-c:hover {
  color: rgba(var(--primary), 0.5) !important;
}

.hover-primary-o25-c:hover {
  color: rgba(var(--primary), 0.25) !important;
}

.hover-primary-bg:hover {
  background-color: rgba(var(--primary), 1) !important;
}

.hover-primary-o75-bg:hover {
  background-color: rgba(var(--primary), 0.75) !important;
}

.hover-primary-o50-bg:hover {
  background-color: rgba(var(--primary), 0.5) !important;
}

.hover-primary-o25-bg:hover {
  background-color: rgba(var(--primary), 0.25) !important;
}

.hover-primary-brdr:hover {
  border-color: rgba(var(--primary), 1) !important;
}

.hover-primary-o75-brdr:hover {
  border-color: rgba(var(--primary), 0.75) !important;
}

.hover-primary-o50-brdr:hover {
  border-color: rgba(var(--primary), 0.5) !important;
}

.hover-primary-o25-brdr:hover {
  border-color: rgba(var(--primary), 0.25) !important;
}

/*==============================================< active*/
.active-primary-c.active {
  color: rgba(var(--primary), 1) !important;
}

.active-primary-o75-c.active {
  color: rgba(var(--primary), 0.75) !important;
}

.active-primary-o50-c.active {
  color: rgba(var(--primary), 0.5) !important;
}

.active-primary-o25-c.active {
  color: rgba(var(--primary), 0.25) !important;
}

.active-primary-bg.active {
  background-color: rgba(var(--primary), 1) !important;
}

.active-primary-o75-bg.active {
  background-color: rgba(var(--primary), 0.75) !important;
}

.active-primary-o50-bg.active {
  background-color: rgba(var(--primary), 0.5) !important;
}

.active-primary-o25-bg.active {
  background-color: rgba(var(--primary), 0.25) !important;
}

.active-primary-brdr.active {
  border-color: rgba(var(--primary), 1) !important;
}

.active-primary-o75-brdr.active {
  border-color: rgba(var(--primary), 0.75) !important;
}

.active-primary-o50-brdr.active {
  border-color: rgba(var(--primary), 0.5) !important;
}

.active-primary-o25-brdr.active {
  border-color: rgba(var(--primary), 0.25) !important;
}

/*==============================================< focus*/
.focus-primary-c:focus {
  color: rgba(var(--primary), 1) !important;
}

.focus-primary-o75-c:focus {
  color: rgba(var(--primary), 0.75) !important;
}

.focus-primary-o50-c:focus {
  color: rgba(var(--primary), 0.5) !important;
}

.focus-primary-o25-c:focus {
  color: rgba(var(--primary), 0.25) !important;
}

.focus-primary-bg:focus {
  background-color: rgba(var(--primary), 1) !important;
}

.focus-primary-o75-bg:focus {
  background-color: rgba(var(--primary), 0.75) !important;
}

.focus-primary-o50-bg:focus {
  background-color: rgba(var(--primary), 0.5) !important;
}

.focus-primary-o25-bg:focus {
  background-color: rgba(var(--primary), 0.25) !important;
}

.focus-primary-brdr:focus {
  border-color: rgba(var(--primary), 1) !important;
}

.focus-primary-o75-brdr:focus {
  border-color: rgba(var(--primary), 0.75) !important;
}

.focus-primary-o50-brdr:focus {
  border-color: rgba(var(--primary), 0.5) !important;
}

.focus-primary-o25-brdr:focus {
  border-color: rgba(var(--primary), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-primary-c[disabled] {
  color: rgba(var(--primary), 1) !important;
}

.disabled-primary-o75-c[disabled] {
  color: rgba(var(--primary), 0.75) !important;
}

.disabled-primary-o50-c[disabled] {
  color: rgba(var(--primary), 0.5) !important;
}

.disabled-primary-o25-c[disabled] {
  color: rgba(var(--primary), 0.25) !important;
}

.disabled-primary-bg[disabled] {
  background-color: rgba(var(--primary), 1) !important;
}

.disabled-primary-o75-bg[disabled] {
  background-color: rgba(var(--primary), 0.75) !important;
}

.disabled-primary-o50-bg[disabled] {
  background-color: rgba(var(--primary), 0.5) !important;
}

.disabled-primary-o25-bg[disabled] {
  background-color: rgba(var(--primary), 0.25) !important;
}

.disabled-primary-brdr[disabled] {
  border-color: rgba(var(--primary), 1) !important;
}

.disabled-primary-o75-brdr[disabled] {
  border-color: rgba(var(--primary), 0.75) !important;
}

.disabled-primary-o50-brdr[disabled] {
  border-color: rgba(var(--primary), 0.5) !important;
}

.disabled-primary-o25-brdr[disabled] {
  border-color: rgba(var(--primary), 0.25) !important;
}

/*============================================================================================< secondary */
/*==============================================< norm*/
.secondary-c {
  color: rgba(var(--secondary), 1) !important;
}

.secondary-o75-c {
  color: rgba(var(--secondary), 0.75) !important;
}

.secondary-o50-c {
  color: rgba(var(--secondary), 0.5) !important;
}

.secondary-o25-c {
  color: rgba(var(--secondary), 0.25) !important;
}

.secondary-bg {
  background-color: rgba(var(--secondary), 1) !important;
}

.secondary-o75-bg {
  background-color: rgba(var(--secondary), 0.75) !important;
}

.secondary-o50-bg {
  background-color: rgba(var(--secondary), 0.5) !important;
}

.secondary-o25-bg {
  background-color: rgba(var(--secondary), 0.25) !important;
}

.secondary-brdr {
  border-color: rgba(var(--secondary), 1) !important;
}

.secondary-o75-brdr {
  border-color: rgba(var(--secondary), 0.75) !important;
}

.secondary-o50-brdr {
  border-color: rgba(var(--secondary), 0.5) !important;
}

.secondary-o25-brdr {
  border-color: rgba(var(--secondary), 0.25) !important;
}

/*==============================================< hover*/
.hover-secondary-c:hover {
  color: rgba(var(--secondary), 1) !important;
}

.hover-secondary-o75-c:hover {
  color: rgba(var(--secondary), 0.75) !important;
}

.hover-secondary-o50-c:hover {
  color: rgba(var(--secondary), 0.5) !important;
}

.hover-secondary-o25-c:hover {
  color: rgba(var(--secondary), 0.25) !important;
}

.hover-secondary-bg:hover {
  background-color: rgba(var(--secondary), 1) !important;
}

.hover-secondary-o75-bg:hover {
  background-color: rgba(var(--secondary), 0.75) !important;
}

.hover-secondary-o50-bg:hover {
  background-color: rgba(var(--secondary), 0.5) !important;
}

.hover-secondary-o25-bg:hover {
  background-color: rgba(var(--secondary), 0.25) !important;
}

.hover-secondary-brdr:hover {
  border-color: rgba(var(--secondary), 1) !important;
}

.hover-secondary-o75-brdr:hover {
  border-color: rgba(var(--secondary), 0.75) !important;
}

.hover-secondary-o50-brdr:hover {
  border-color: rgba(var(--secondary), 0.5) !important;
}

.hover-secondary-o25-brdr:hover {
  border-color: rgba(var(--secondary), 0.25) !important;
}

/*==============================================< active*/
.active-secondary-c.active {
  color: rgba(var(--secondary), 1) !important;
}

.active-secondary-o75-c.active {
  color: rgba(var(--secondary), 0.75) !important;
}

.active-secondary-o50-c.active {
  color: rgba(var(--secondary), 0.5) !important;
}

.active-secondary-o25-c.active {
  color: rgba(var(--secondary), 0.25) !important;
}

.active-secondary-bg.active {
  background-color: rgba(var(--secondary), 1) !important;
}

.active-secondary-o75-bg.active {
  background-color: rgba(var(--secondary), 0.75) !important;
}

.active-secondary-o50-bg.active {
  background-color: rgba(var(--secondary), 0.5) !important;
}

.active-secondary-o25-bg.active {
  background-color: rgba(var(--secondary), 0.25) !important;
}

.active-secondary-brdr.active {
  border-color: rgba(var(--secondary), 1) !important;
}

.active-secondary-o75-brdr.active {
  border-color: rgba(var(--secondary), 0.75) !important;
}

.active-secondary-o50-brdr.active {
  border-color: rgba(var(--secondary), 0.5) !important;
}

.active-secondary-o25-brdr.active {
  border-color: rgba(var(--secondary), 0.25) !important;
}

/*==============================================< focus*/
.focus-secondary-c:focus {
  color: rgba(var(--secondary), 1) !important;
}

.focus-secondary-o75-c:focus {
  color: rgba(var(--secondary), 0.75) !important;
}

.focus-secondary-o50-c:focus {
  color: rgba(var(--secondary), 0.5) !important;
}

.focus-secondary-o25-c:focus {
  color: rgba(var(--secondary), 0.25) !important;
}

.focus-secondary-bg:focus {
  background-color: rgba(var(--secondary), 1) !important;
}

.focus-secondary-o75-bg:focus {
  background-color: rgba(var(--secondary), 0.75) !important;
}

.focus-secondary-o50-bg:focus {
  background-color: rgba(var(--secondary), 0.5) !important;
}

.focus-secondary-o25-bg:focus {
  background-color: rgba(var(--secondary), 0.25) !important;
}

.focus-secondary-brdr:focus {
  border-color: rgba(var(--secondary), 1) !important;
}

.focus-secondary-o75-brdr:focus {
  border-color: rgba(var(--secondary), 0.75) !important;
}

.focus-secondary-o50-brdr:focus {
  border-color: rgba(var(--secondary), 0.5) !important;
}

.focus-secondary-o25-brdr:focus {
  border-color: rgba(var(--secondary), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-secondary-c[disabled] {
  color: rgba(var(--secondary), 1) !important;
}

.disabled-secondary-o75-c[disabled] {
  color: rgba(var(--secondary), 0.75) !important;
}

.disabled-secondary-o50-c[disabled] {
  color: rgba(var(--secondary), 0.5) !important;
}

.disabled-secondary-o25-c[disabled] {
  color: rgba(var(--secondary), 0.25) !important;
}

.disabled-secondary-bg[disabled] {
  background-color: rgba(var(--secondary), 1) !important;
}

.disabled-secondary-o75-bg[disabled] {
  background-color: rgba(var(--secondary), 0.75) !important;
}

.disabled-secondary-o50-bg[disabled] {
  background-color: rgba(var(--secondary), 0.5) !important;
}

.disabled-secondary-o25-bg[disabled] {
  background-color: rgba(var(--secondary), 0.25) !important;
}

.disabled-secondary-brdr[disabled] {
  border-color: rgba(var(--secondary), 1) !important;
}

.disabled-secondary-o75-brdr[disabled] {
  border-color: rgba(var(--secondary), 0.75) !important;
}

.disabled-secondary-o50-brdr[disabled] {
  border-color: rgba(var(--secondary), 0.5) !important;
}

.disabled-secondary-o25-brdr[disabled] {
  border-color: rgba(var(--secondary), 0.25) !important;
}

/*============================================================================================< link */
/*==============================================< norm*/
.link-c {
  color: rgba(var(--link), 1) !important;
}

.link-o75-c {
  color: rgba(var(--link), 0.75) !important;
}

.link-o50-c {
  color: rgba(var(--link), 0.5) !important;
}

.link-o25-c {
  color: rgba(var(--link), 0.25) !important;
}

.link-bg {
  background-color: rgba(var(--link), 1) !important;
}

.link-o75-bg {
  background-color: rgba(var(--link), 0.75) !important;
}

.link-o50-bg {
  background-color: rgba(var(--link), 0.5) !important;
}

.link-o25-bg {
  background-color: rgba(var(--link), 0.25) !important;
}

.link-brdr {
  border-color: rgba(var(--link), 1) !important;
}

.link-o75-brdr {
  border-color: rgba(var(--link), 0.75) !important;
}

.link-o50-brdr {
  border-color: rgba(var(--link), 0.5) !important;
}

.link-o25-brdr {
  border-color: rgba(var(--link), 0.25) !important;
}

/*==============================================< hover*/
.hover-link-c:hover {
  color: rgba(var(--link), 1) !important;
}

.hover-link-o75-c:hover {
  color: rgba(var(--link), 0.75) !important;
}

.hover-link-o50-c:hover {
  color: rgba(var(--link), 0.5) !important;
}

.hover-link-o25-c:hover {
  color: rgba(var(--link), 0.25) !important;
}

.hover-link-bg:hover {
  background-color: rgba(var(--link), 1) !important;
}

.hover-link-o75-bg:hover {
  background-color: rgba(var(--link), 0.75) !important;
}

.hover-link-o50-bg:hover {
  background-color: rgba(var(--link), 0.5) !important;
}

.hover-link-o25-bg:hover {
  background-color: rgba(var(--link), 0.25) !important;
}

.hover-link-brdr:hover {
  border-color: rgba(var(--link), 1) !important;
}

.hover-link-o75-brdr:hover {
  border-color: rgba(var(--link), 0.75) !important;
}

.hover-link-o50-brdr:hover {
  border-color: rgba(var(--link), 0.5) !important;
}

.hover-link-o25-brdr:hover {
  border-color: rgba(var(--link), 0.25) !important;
}

/*==============================================< active*/
.active-link-c.active {
  color: rgba(var(--link), 1) !important;
}

.active-link-o75-c.active {
  color: rgba(var(--link), 0.75) !important;
}

.active-link-o50-c.active {
  color: rgba(var(--link), 0.5) !important;
}

.active-link-o25-c.active {
  color: rgba(var(--link), 0.25) !important;
}

.active-link-bg.active {
  background-color: rgba(var(--link), 1) !important;
}

.active-link-o75-bg.active {
  background-color: rgba(var(--link), 0.75) !important;
}

.active-link-o50-bg.active {
  background-color: rgba(var(--link), 0.5) !important;
}

.active-link-o25-bg.active {
  background-color: rgba(var(--link), 0.25) !important;
}

.active-link-brdr.active {
  border-color: rgba(var(--link), 1) !important;
}

.active-link-o75-brdr.active {
  border-color: rgba(var(--link), 0.75) !important;
}

.active-link-o50-brdr.active {
  border-color: rgba(var(--link), 0.5) !important;
}

.active-link-o25-brdr.active {
  border-color: rgba(var(--link), 0.25) !important;
}

/*==============================================< focus*/
.focus-link-c:focus {
  color: rgba(var(--link), 1) !important;
}

.focus-link-o75-c:focus {
  color: rgba(var(--link), 0.75) !important;
}

.focus-link-o50-c:focus {
  color: rgba(var(--link), 0.5) !important;
}

.focus-link-o25-c:focus {
  color: rgba(var(--link), 0.25) !important;
}

.focus-link-bg:focus {
  background-color: rgba(var(--link), 1) !important;
}

.focus-link-o75-bg:focus {
  background-color: rgba(var(--link), 0.75) !important;
}

.focus-link-o50-bg:focus {
  background-color: rgba(var(--link), 0.5) !important;
}

.focus-link-o25-bg:focus {
  background-color: rgba(var(--link), 0.25) !important;
}

.focus-link-brdr:focus {
  border-color: rgba(var(--link), 1) !important;
}

.focus-link-o75-brdr:focus {
  border-color: rgba(var(--link), 0.75) !important;
}

.focus-link-o50-brdr:focus {
  border-color: rgba(var(--link), 0.5) !important;
}

.focus-link-o25-brdr:focus {
  border-color: rgba(var(--link), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-link-c[disabled] {
  color: rgba(var(--link), 1) !important;
}

.disabled-link-o75-c[disabled] {
  color: rgba(var(--link), 0.75) !important;
}

.disabled-link-o50-c[disabled] {
  color: rgba(var(--link), 0.5) !important;
}

.disabled-link-o25-c[disabled] {
  color: rgba(var(--link), 0.25) !important;
}

.disabled-link-bg[disabled] {
  background-color: rgba(var(--link), 1) !important;
}

.disabled-link-o75-bg[disabled] {
  background-color: rgba(var(--link), 0.75) !important;
}

.disabled-link-o50-bg[disabled] {
  background-color: rgba(var(--link), 0.5) !important;
}

.disabled-link-o25-bg[disabled] {
  background-color: rgba(var(--link), 0.25) !important;
}

.disabled-link-brdr[disabled] {
  border-color: rgba(var(--link), 1) !important;
}

.disabled-link-o75-brdr[disabled] {
  border-color: rgba(var(--link), 0.75) !important;
}

.disabled-link-o50-brdr[disabled] {
  border-color: rgba(var(--link), 0.5) !important;
}

.disabled-link-o25-brdr[disabled] {
  border-color: rgba(var(--link), 0.25) !important;
}

/*============================================================================================< success */
/*==============================================< norm*/
.success-c {
  color: rgba(var(--success), 1) !important;
}

.success-o75-c {
  color: rgba(var(--success), 0.75) !important;
}

.success-o50-c {
  color: rgba(var(--success), 0.5) !important;
}

.success-o25-c {
  color: rgba(var(--success), 0.25) !important;
}

.success-bg {
  background-color: rgba(var(--success), 1) !important;
}

.success-o75-bg {
  background-color: rgba(var(--success), 0.75) !important;
}

.success-o50-bg {
  background-color: rgba(var(--success), 0.5) !important;
}

.success-o25-bg {
  background-color: rgba(var(--success), 0.25) !important;
}

.success-brdr {
  border-color: rgba(var(--success), 1) !important;
}

.success-o75-brdr {
  border-color: rgba(var(--success), 0.75) !important;
}

.success-o50-brdr {
  border-color: rgba(var(--success), 0.5) !important;
}

.success-o25-brdr {
  border-color: rgba(var(--success), 0.25) !important;
}

/*==============================================< hover*/
.hover-success-c:hover {
  color: rgba(var(--success), 1) !important;
}

.hover-success-o75-c:hover {
  color: rgba(var(--success), 0.75) !important;
}

.hover-success-o50-c:hover {
  color: rgba(var(--success), 0.5) !important;
}

.hover-success-o25-c:hover {
  color: rgba(var(--success), 0.25) !important;
}

.hover-success-bg:hover {
  background-color: rgba(var(--success), 1) !important;
}

.hover-success-o75-bg:hover {
  background-color: rgba(var(--success), 0.75) !important;
}

.hover-success-o50-bg:hover {
  background-color: rgba(var(--success), 0.5) !important;
}

.hover-success-o25-bg:hover {
  background-color: rgba(var(--success), 0.25) !important;
}

.hover-success-brdr:hover {
  border-color: rgba(var(--success), 1) !important;
}

.hover-success-o75-brdr:hover {
  border-color: rgba(var(--success), 0.75) !important;
}

.hover-success-o50-brdr:hover {
  border-color: rgba(var(--success), 0.5) !important;
}

.hover-success-o25-brdr:hover {
  border-color: rgba(var(--success), 0.25) !important;
}

/*==============================================< active*/
.active-success-c.active {
  color: rgba(var(--success), 1) !important;
}

.active-success-o75-c.active {
  color: rgba(var(--success), 0.75) !important;
}

.active-success-o50-c.active {
  color: rgba(var(--success), 0.5) !important;
}

.active-success-o25-c.active {
  color: rgba(var(--success), 0.25) !important;
}

.active-success-bg.active {
  background-color: rgba(var(--success), 1) !important;
}

.active-success-o75-bg.active {
  background-color: rgba(var(--success), 0.75) !important;
}

.active-success-o50-bg.active {
  background-color: rgba(var(--success), 0.5) !important;
}

.active-success-o25-bg.active {
  background-color: rgba(var(--success), 0.25) !important;
}

.active-success-brdr.active {
  border-color: rgba(var(--success), 1) !important;
}

.active-success-o75-brdr.active {
  border-color: rgba(var(--success), 0.75) !important;
}

.active-success-o50-brdr.active {
  border-color: rgba(var(--success), 0.5) !important;
}

.active-success-o25-brdr.active {
  border-color: rgba(var(--success), 0.25) !important;
}

/*==============================================< focus*/
.focus-success-c:focus {
  color: rgba(var(--success), 1) !important;
}

.focus-success-o75-c:focus {
  color: rgba(var(--success), 0.75) !important;
}

.focus-success-o50-c:focus {
  color: rgba(var(--success), 0.5) !important;
}

.focus-success-o25-c:focus {
  color: rgba(var(--success), 0.25) !important;
}

.focus-success-bg:focus {
  background-color: rgba(var(--success), 1) !important;
}

.focus-success-o75-bg:focus {
  background-color: rgba(var(--success), 0.75) !important;
}

.focus-success-o50-bg:focus {
  background-color: rgba(var(--success), 0.5) !important;
}

.focus-success-o25-bg:focus {
  background-color: rgba(var(--success), 0.25) !important;
}

.focus-success-brdr:focus {
  border-color: rgba(var(--success), 1) !important;
}

.focus-success-o75-brdr:focus {
  border-color: rgba(var(--success), 0.75) !important;
}

.focus-success-o50-brdr:focus {
  border-color: rgba(var(--success), 0.5) !important;
}

.focus-success-o25-brdr:focus {
  border-color: rgba(var(--success), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-success-c[disabled] {
  color: rgba(var(--success), 1) !important;
}

.disabled-success-o75-c[disabled] {
  color: rgba(var(--success), 0.75) !important;
}

.disabled-success-o50-c[disabled] {
  color: rgba(var(--success), 0.5) !important;
}

.disabled-success-o25-c[disabled] {
  color: rgba(var(--success), 0.25) !important;
}

.disabled-success-bg[disabled] {
  background-color: rgba(var(--success), 1) !important;
}

.disabled-success-o75-bg[disabled] {
  background-color: rgba(var(--success), 0.75) !important;
}

.disabled-success-o50-bg[disabled] {
  background-color: rgba(var(--success), 0.5) !important;
}

.disabled-success-o25-bg[disabled] {
  background-color: rgba(var(--success), 0.25) !important;
}

.disabled-success-brdr[disabled] {
  border-color: rgba(var(--success), 1) !important;
}

.disabled-success-o75-brdr[disabled] {
  border-color: rgba(var(--success), 0.75) !important;
}

.disabled-success-o50-brdr[disabled] {
  border-color: rgba(var(--success), 0.5) !important;
}

.disabled-success-o25-brdr[disabled] {
  border-color: rgba(var(--success), 0.25) !important;
}

/*============================================================================================< alert */
/*==============================================< norm*/
.alert-c {
  color: rgba(var(--alert), 1) !important;
}

.alert-o75-c {
  color: rgba(var(--alert), 0.75) !important;
}

.alert-o50-c {
  color: rgba(var(--alert), 0.5) !important;
}

.alert-o25-c {
  color: rgba(var(--alert), 0.25) !important;
}

.alert-bg {
  background-color: rgba(var(--alert), 1) !important;
}

.alert-o75-bg {
  background-color: rgba(var(--alert), 0.75) !important;
}

.alert-o50-bg {
  background-color: rgba(var(--alert), 0.5) !important;
}

.alert-o25-bg {
  background-color: rgba(var(--alert), 0.25) !important;
}

.alert-brdr {
  border-color: rgba(var(--alert), 1) !important;
}

.alert-o75-brdr {
  border-color: rgba(var(--alert), 0.75) !important;
}

.alert-o50-brdr {
  border-color: rgba(var(--alert), 0.5) !important;
}

.alert-o25-brdr {
  border-color: rgba(var(--alert), 0.25) !important;
}

/*==============================================< hover*/
.hover-alert-c:hover {
  color: rgba(var(--alert), 1) !important;
}

.hover-alert-o75-c:hover {
  color: rgba(var(--alert), 0.75) !important;
}

.hover-alert-o50-c:hover {
  color: rgba(var(--alert), 0.5) !important;
}

.hover-alert-o25-c:hover {
  color: rgba(var(--alert), 0.25) !important;
}

.hover-alert-bg:hover {
  background-color: rgba(var(--alert), 1) !important;
}

.hover-alert-o75-bg:hover {
  background-color: rgba(var(--alert), 0.75) !important;
}

.hover-alert-o50-bg:hover {
  background-color: rgba(var(--alert), 0.5) !important;
}

.hover-alert-o25-bg:hover {
  background-color: rgba(var(--alert), 0.25) !important;
}

.hover-alert-brdr:hover {
  border-color: rgba(var(--alert), 1) !important;
}

.hover-alert-o75-brdr:hover {
  border-color: rgba(var(--alert), 0.75) !important;
}

.hover-alert-o50-brdr:hover {
  border-color: rgba(var(--alert), 0.5) !important;
}

.hover-alert-o25-brdr:hover {
  border-color: rgba(var(--alert), 0.25) !important;
}

/*==============================================< active*/
.active-alert-c.active {
  color: rgba(var(--alert), 1) !important;
}

.active-alert-o75-c.active {
  color: rgba(var(--alert), 0.75) !important;
}

.active-alert-o50-c.active {
  color: rgba(var(--alert), 0.5) !important;
}

.active-alert-o25-c.active {
  color: rgba(var(--alert), 0.25) !important;
}

.active-alert-bg.active {
  background-color: rgba(var(--alert), 1) !important;
}

.active-alert-o75-bg.active {
  background-color: rgba(var(--alert), 0.75) !important;
}

.active-alert-o50-bg.active {
  background-color: rgba(var(--alert), 0.5) !important;
}

.active-alert-o25-bg.active {
  background-color: rgba(var(--alert), 0.25) !important;
}

.active-alert-brdr.active {
  border-color: rgba(var(--alert), 1) !important;
}

.active-alert-o75-brdr.active {
  border-color: rgba(var(--alert), 0.75) !important;
}

.active-alert-o50-brdr.active {
  border-color: rgba(var(--alert), 0.5) !important;
}

.active-alert-o25-brdr.active {
  border-color: rgba(var(--alert), 0.25) !important;
}

/*==============================================< focus*/
.focus-alert-c:focus {
  color: rgba(var(--alert), 1) !important;
}

.focus-alert-o75-c:focus {
  color: rgba(var(--alert), 0.75) !important;
}

.focus-alert-o50-c:focus {
  color: rgba(var(--alert), 0.5) !important;
}

.focus-alert-o25-c:focus {
  color: rgba(var(--alert), 0.25) !important;
}

.focus-alert-bg:focus {
  background-color: rgba(var(--alert), 1) !important;
}

.focus-alert-o75-bg:focus {
  background-color: rgba(var(--alert), 0.75) !important;
}

.focus-alert-o50-bg:focus {
  background-color: rgba(var(--alert), 0.5) !important;
}

.focus-alert-o25-bg:focus {
  background-color: rgba(var(--alert), 0.25) !important;
}

.focus-alert-brdr:focus {
  border-color: rgba(var(--alert), 1) !important;
}

.focus-alert-o75-brdr:focus {
  border-color: rgba(var(--alert), 0.75) !important;
}

.focus-alert-o50-brdr:focus {
  border-color: rgba(var(--alert), 0.5) !important;
}

.focus-alert-o25-brdr:focus {
  border-color: rgba(var(--alert), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-alert-c[disabled] {
  color: rgba(var(--alert), 1) !important;
}

.disabled-alert-o75-c[disabled] {
  color: rgba(var(--alert), 0.75) !important;
}

.disabled-alert-o50-c[disabled] {
  color: rgba(var(--alert), 0.5) !important;
}

.disabled-alert-o25-c[disabled] {
  color: rgba(var(--alert), 0.25) !important;
}

.disabled-alert-bg[disabled] {
  background-color: rgba(var(--alert), 1) !important;
}

.disabled-alert-o75-bg[disabled] {
  background-color: rgba(var(--alert), 0.75) !important;
}

.disabled-alert-o50-bg[disabled] {
  background-color: rgba(var(--alert), 0.5) !important;
}

.disabled-alert-o25-bg[disabled] {
  background-color: rgba(var(--alert), 0.25) !important;
}

.disabled-alert-brdr[disabled] {
  border-color: rgba(var(--alert), 1) !important;
}

.disabled-alert-o75-brdr[disabled] {
  border-color: rgba(var(--alert), 0.75) !important;
}

.disabled-alert-o50-brdr[disabled] {
  border-color: rgba(var(--alert), 0.5) !important;
}

.disabled-alert-o25-brdr[disabled] {
  border-color: rgba(var(--alert), 0.25) !important;
}

/*============================================================================================< warning */
/*==============================================< norm*/
.warning-c {
  color: rgba(var(--warning), 1) !important;
}

.warning-o75-c {
  color: rgba(var(--warning), 0.75) !important;
}

.warning-o50-c {
  color: rgba(var(--warning), 0.5) !important;
}

.warning-o25-c {
  color: rgba(var(--warning), 0.25) !important;
}

.warning-bg {
  background-color: rgba(var(--warning), 1) !important;
}

.warning-o75-bg {
  background-color: rgba(var(--warning), 0.75) !important;
}

.warning-o50-bg {
  background-color: rgba(var(--warning), 0.5) !important;
}

.warning-o25-bg {
  background-color: rgba(var(--warning), 0.25) !important;
}

.warning-brdr {
  border-color: rgba(var(--warning), 1) !important;
}

.warning-o75-brdr {
  border-color: rgba(var(--warning), 0.75) !important;
}

.warning-o50-brdr {
  border-color: rgba(var(--warning), 0.5) !important;
}

.warning-o25-brdr {
  border-color: rgba(var(--warning), 0.25) !important;
}

/*==============================================< hover*/
.hover-warning-c:hover {
  color: rgba(var(--warning), 1) !important;
}

.hover-warning-o75-c:hover {
  color: rgba(var(--warning), 0.75) !important;
}

.hover-warning-o50-c:hover {
  color: rgba(var(--warning), 0.5) !important;
}

.hover-warning-o25-c:hover {
  color: rgba(var(--warning), 0.25) !important;
}

.hover-warning-bg:hover {
  background-color: rgba(var(--warning), 1) !important;
}

.hover-warning-o75-bg:hover {
  background-color: rgba(var(--warning), 0.75) !important;
}

.hover-warning-o50-bg:hover {
  background-color: rgba(var(--warning), 0.5) !important;
}

.hover-warning-o25-bg:hover {
  background-color: rgba(var(--warning), 0.25) !important;
}

.hover-warning-brdr:hover {
  border-color: rgba(var(--warning), 1) !important;
}

.hover-warning-o75-brdr:hover {
  border-color: rgba(var(--warning), 0.75) !important;
}

.hover-warning-o50-brdr:hover {
  border-color: rgba(var(--warning), 0.5) !important;
}

.hover-warning-o25-brdr:hover {
  border-color: rgba(var(--warning), 0.25) !important;
}

/*==============================================< active*/
.active-warning-c.active {
  color: rgba(var(--warning), 1) !important;
}

.active-warning-o75-c.active {
  color: rgba(var(--warning), 0.75) !important;
}

.active-warning-o50-c.active {
  color: rgba(var(--warning), 0.5) !important;
}

.active-warning-o25-c.active {
  color: rgba(var(--warning), 0.25) !important;
}

.active-warning-bg.active {
  background-color: rgba(var(--warning), 1) !important;
}

.active-warning-o75-bg.active {
  background-color: rgba(var(--warning), 0.75) !important;
}

.active-warning-o50-bg.active {
  background-color: rgba(var(--warning), 0.5) !important;
}

.active-warning-o25-bg.active {
  background-color: rgba(var(--warning), 0.25) !important;
}

.active-warning-brdr.active {
  border-color: rgba(var(--warning), 1) !important;
}

.active-warning-o75-brdr.active {
  border-color: rgba(var(--warning), 0.75) !important;
}

.active-warning-o50-brdr.active {
  border-color: rgba(var(--warning), 0.5) !important;
}

.active-warning-o25-brdr.active {
  border-color: rgba(var(--warning), 0.25) !important;
}

/*==============================================< focus*/
.focus-warning-c:focus {
  color: rgba(var(--warning), 1) !important;
}

.focus-warning-o75-c:focus {
  color: rgba(var(--warning), 0.75) !important;
}

.focus-warning-o50-c:focus {
  color: rgba(var(--warning), 0.5) !important;
}

.focus-warning-o25-c:focus {
  color: rgba(var(--warning), 0.25) !important;
}

.focus-warning-bg:focus {
  background-color: rgba(var(--warning), 1) !important;
}

.focus-warning-o75-bg:focus {
  background-color: rgba(var(--warning), 0.75) !important;
}

.focus-warning-o50-bg:focus {
  background-color: rgba(var(--warning), 0.5) !important;
}

.focus-warning-o25-bg:focus {
  background-color: rgba(var(--warning), 0.25) !important;
}

.focus-warning-brdr:focus {
  border-color: rgba(var(--warning), 1) !important;
}

.focus-warning-o75-brdr:focus {
  border-color: rgba(var(--warning), 0.75) !important;
}

.focus-warning-o50-brdr:focus {
  border-color: rgba(var(--warning), 0.5) !important;
}

.focus-warning-o25-brdr:focus {
  border-color: rgba(var(--warning), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-warning-c[disabled] {
  color: rgba(var(--warning), 1) !important;
}

.disabled-warning-o75-c[disabled] {
  color: rgba(var(--warning), 0.75) !important;
}

.disabled-warning-o50-c[disabled] {
  color: rgba(var(--warning), 0.5) !important;
}

.disabled-warning-o25-c[disabled] {
  color: rgba(var(--warning), 0.25) !important;
}

.disabled-warning-bg[disabled] {
  background-color: rgba(var(--warning), 1) !important;
}

.disabled-warning-o75-bg[disabled] {
  background-color: rgba(var(--warning), 0.75) !important;
}

.disabled-warning-o50-bg[disabled] {
  background-color: rgba(var(--warning), 0.5) !important;
}

.disabled-warning-o25-bg[disabled] {
  background-color: rgba(var(--warning), 0.25) !important;
}

.disabled-warning-brdr[disabled] {
  border-color: rgba(var(--warning), 1) !important;
}

.disabled-warning-o75-brdr[disabled] {
  border-color: rgba(var(--warning), 0.75) !important;
}

.disabled-warning-o50-brdr[disabled] {
  border-color: rgba(var(--warning), 0.5) !important;
}

.disabled-warning-o25-brdr[disabled] {
  border-color: rgba(var(--warning), 0.25) !important;
}

/*============================================================================================< error */
/*==============================================< norm*/
.error-c {
  color: rgba(var(--error), 1) !important;
}

.error-o75-c {
  color: rgba(var(--error), 0.75) !important;
}

.error-o50-c {
  color: rgba(var(--error), 0.5) !important;
}

.error-o25-c {
  color: rgba(var(--error), 0.25) !important;
}

.error-bg {
  background-color: rgba(var(--error), 1) !important;
}

.error-o75-bg {
  background-color: rgba(var(--error), 0.75) !important;
}

.error-o50-bg {
  background-color: rgba(var(--error), 0.5) !important;
}

.error-o25-bg {
  background-color: rgba(var(--error), 0.25) !important;
}

.error-brdr {
  border-color: rgba(var(--error), 1) !important;
}

.error-o75-brdr {
  border-color: rgba(var(--error), 0.75) !important;
}

.error-o50-brdr {
  border-color: rgba(var(--error), 0.5) !important;
}

.error-o25-brdr {
  border-color: rgba(var(--error), 0.25) !important;
}

/*==============================================< hover*/
.hover-error-c:hover {
  color: rgba(var(--error), 1) !important;
}

.hover-error-o75-c:hover {
  color: rgba(var(--error), 0.75) !important;
}

.hover-error-o50-c:hover {
  color: rgba(var(--error), 0.5) !important;
}

.hover-error-o25-c:hover {
  color: rgba(var(--error), 0.25) !important;
}

.hover-error-bg:hover {
  background-color: rgba(var(--error), 1) !important;
}

.hover-error-o75-bg:hover {
  background-color: rgba(var(--error), 0.75) !important;
}

.hover-error-o50-bg:hover {
  background-color: rgba(var(--error), 0.5) !important;
}

.hover-error-o25-bg:hover {
  background-color: rgba(var(--error), 0.25) !important;
}

.hover-error-brdr:hover {
  border-color: rgba(var(--error), 1) !important;
}

.hover-error-o75-brdr:hover {
  border-color: rgba(var(--error), 0.75) !important;
}

.hover-error-o50-brdr:hover {
  border-color: rgba(var(--error), 0.5) !important;
}

.hover-error-o25-brdr:hover {
  border-color: rgba(var(--error), 0.25) !important;
}

/*==============================================< active*/
.active-error-c.active {
  color: rgba(var(--error), 1) !important;
}

.active-error-o75-c.active {
  color: rgba(var(--error), 0.75) !important;
}

.active-error-o50-c.active {
  color: rgba(var(--error), 0.5) !important;
}

.active-error-o25-c.active {
  color: rgba(var(--error), 0.25) !important;
}

.active-error-bg.active {
  background-color: rgba(var(--error), 1) !important;
}

.active-error-o75-bg.active {
  background-color: rgba(var(--error), 0.75) !important;
}

.active-error-o50-bg.active {
  background-color: rgba(var(--error), 0.5) !important;
}

.active-error-o25-bg.active {
  background-color: rgba(var(--error), 0.25) !important;
}

.active-error-brdr.active {
  border-color: rgba(var(--error), 1) !important;
}

.active-error-o75-brdr.active {
  border-color: rgba(var(--error), 0.75) !important;
}

.active-error-o50-brdr.active {
  border-color: rgba(var(--error), 0.5) !important;
}

.active-error-o25-brdr.active {
  border-color: rgba(var(--error), 0.25) !important;
}

/*==============================================< focus*/
.focus-error-c:focus {
  color: rgba(var(--error), 1) !important;
}

.focus-error-o75-c:focus {
  color: rgba(var(--error), 0.75) !important;
}

.focus-error-o50-c:focus {
  color: rgba(var(--error), 0.5) !important;
}

.focus-error-o25-c:focus {
  color: rgba(var(--error), 0.25) !important;
}

.focus-error-bg:focus {
  background-color: rgba(var(--error), 1) !important;
}

.focus-error-o75-bg:focus {
  background-color: rgba(var(--error), 0.75) !important;
}

.focus-error-o50-bg:focus {
  background-color: rgba(var(--error), 0.5) !important;
}

.focus-error-o25-bg:focus {
  background-color: rgba(var(--error), 0.25) !important;
}

.focus-error-brdr:focus {
  border-color: rgba(var(--error), 1) !important;
}

.focus-error-o75-brdr:focus {
  border-color: rgba(var(--error), 0.75) !important;
}

.focus-error-o50-brdr:focus {
  border-color: rgba(var(--error), 0.5) !important;
}

.focus-error-o25-brdr:focus {
  border-color: rgba(var(--error), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-error-c[disabled] {
  color: rgba(var(--error), 1) !important;
}

.disabled-error-o75-c[disabled] {
  color: rgba(var(--error), 0.75) !important;
}

.disabled-error-o50-c[disabled] {
  color: rgba(var(--error), 0.5) !important;
}

.disabled-error-o25-c[disabled] {
  color: rgba(var(--error), 0.25) !important;
}

.disabled-error-bg[disabled] {
  background-color: rgba(var(--error), 1) !important;
}

.disabled-error-o75-bg[disabled] {
  background-color: rgba(var(--error), 0.75) !important;
}

.disabled-error-o50-bg[disabled] {
  background-color: rgba(var(--error), 0.5) !important;
}

.disabled-error-o25-bg[disabled] {
  background-color: rgba(var(--error), 0.25) !important;
}

.disabled-error-brdr[disabled] {
  border-color: rgba(var(--error), 1) !important;
}

.disabled-error-o75-brdr[disabled] {
  border-color: rgba(var(--error), 0.75) !important;
}

.disabled-error-o50-brdr[disabled] {
  border-color: rgba(var(--error), 0.5) !important;
}

.disabled-error-o25-brdr[disabled] {
  border-color: rgba(var(--error), 0.25) !important;
}

/*============================================================================================< white */
/*==============================================< norm*/
.white-c {
  color: rgba(var(--white), 1) !important;
}

.white-o75-c {
  color: rgba(var(--white), 0.75) !important;
}

.white-o50-c {
  color: rgba(var(--white), 0.5) !important;
}

.white-o25-c {
  color: rgba(var(--white), 0.25) !important;
}

.white-bg {
  background-color: rgba(var(--white), 1) !important;
}

.white-o75-bg {
  background-color: rgba(var(--white), 0.75) !important;
}

.white-o50-bg {
  background-color: rgba(var(--white), 0.5) !important;
}

.white-o25-bg {
  background-color: rgba(var(--white), 0.25) !important;
}

.white-brdr {
  border-color: rgba(var(--white), 1) !important;
}

.white-o75-brdr {
  border-color: rgba(var(--white), 0.75) !important;
}

.white-o50-brdr {
  border-color: rgba(var(--white), 0.5) !important;
}

.white-o25-brdr {
  border-color: rgba(var(--white), 0.25) !important;
}

/*==============================================< hover*/
.hover-white-c:hover {
  color: rgba(var(--white), 1) !important;
}

.hover-white-o75-c:hover {
  color: rgba(var(--white), 0.75) !important;
}

.hover-white-o50-c:hover {
  color: rgba(var(--white), 0.5) !important;
}

.hover-white-o25-c:hover {
  color: rgba(var(--white), 0.25) !important;
}

.hover-white-bg:hover {
  background-color: rgba(var(--white), 1) !important;
}

.hover-white-o75-bg:hover {
  background-color: rgba(var(--white), 0.75) !important;
}

.hover-white-o50-bg:hover {
  background-color: rgba(var(--white), 0.5) !important;
}

.hover-white-o25-bg:hover {
  background-color: rgba(var(--white), 0.25) !important;
}

.hover-white-brdr:hover {
  border-color: rgba(var(--white), 1) !important;
}

.hover-white-o75-brdr:hover {
  border-color: rgba(var(--white), 0.75) !important;
}

.hover-white-o50-brdr:hover {
  border-color: rgba(var(--white), 0.5) !important;
}

.hover-white-o25-brdr:hover {
  border-color: rgba(var(--white), 0.25) !important;
}

/*==============================================< active*/
.active-white-c.active {
  color: rgba(var(--white), 1) !important;
}

.active-white-o75-c.active {
  color: rgba(var(--white), 0.75) !important;
}

.active-white-o50-c.active {
  color: rgba(var(--white), 0.5) !important;
}

.active-white-o25-c.active {
  color: rgba(var(--white), 0.25) !important;
}

.active-white-bg.active {
  background-color: rgba(var(--white), 1) !important;
}

.active-white-o75-bg.active {
  background-color: rgba(var(--white), 0.75) !important;
}

.active-white-o50-bg.active {
  background-color: rgba(var(--white), 0.5) !important;
}

.active-white-o25-bg.active {
  background-color: rgba(var(--white), 0.25) !important;
}

.active-white-brdr.active {
  border-color: rgba(var(--white), 1) !important;
}

.active-white-o75-brdr.active {
  border-color: rgba(var(--white), 0.75) !important;
}

.active-white-o50-brdr.active {
  border-color: rgba(var(--white), 0.5) !important;
}

.active-white-o25-brdr.active {
  border-color: rgba(var(--white), 0.25) !important;
}

/*==============================================< focus*/
.focus-white-c:focus {
  color: rgba(var(--white), 1) !important;
}

.focus-white-o75-c:focus {
  color: rgba(var(--white), 0.75) !important;
}

.focus-white-o50-c:focus {
  color: rgba(var(--white), 0.5) !important;
}

.focus-white-o25-c:focus {
  color: rgba(var(--white), 0.25) !important;
}

.focus-white-bg:focus {
  background-color: rgba(var(--white), 1) !important;
}

.focus-white-o75-bg:focus {
  background-color: rgba(var(--white), 0.75) !important;
}

.focus-white-o50-bg:focus {
  background-color: rgba(var(--white), 0.5) !important;
}

.focus-white-o25-bg:focus {
  background-color: rgba(var(--white), 0.25) !important;
}

.focus-white-brdr:focus {
  border-color: rgba(var(--white), 1) !important;
}

.focus-white-o75-brdr:focus {
  border-color: rgba(var(--white), 0.75) !important;
}

.focus-white-o50-brdr:focus {
  border-color: rgba(var(--white), 0.5) !important;
}

.focus-white-o25-brdr:focus {
  border-color: rgba(var(--white), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-white-c[disabled] {
  color: rgba(var(--white), 1) !important;
}

.disabled-white-o75-c[disabled] {
  color: rgba(var(--white), 0.75) !important;
}

.disabled-white-o50-c[disabled] {
  color: rgba(var(--white), 0.5) !important;
}

.disabled-white-o25-c[disabled] {
  color: rgba(var(--white), 0.25) !important;
}

.disabled-white-bg[disabled] {
  background-color: rgba(var(--white), 1) !important;
}

.disabled-white-o75-bg[disabled] {
  background-color: rgba(var(--white), 0.75) !important;
}

.disabled-white-o50-bg[disabled] {
  background-color: rgba(var(--white), 0.5) !important;
}

.disabled-white-o25-bg[disabled] {
  background-color: rgba(var(--white), 0.25) !important;
}

.disabled-white-brdr[disabled] {
  border-color: rgba(var(--white), 1) !important;
}

.disabled-white-o75-brdr[disabled] {
  border-color: rgba(var(--white), 0.75) !important;
}

.disabled-white-o50-brdr[disabled] {
  border-color: rgba(var(--white), 0.5) !important;
}

.disabled-white-o25-brdr[disabled] {
  border-color: rgba(var(--white), 0.25) !important;
}

/*============================================================================================< light */
/*==============================================< norm*/
.light-c {
  color: rgba(var(--light), 1) !important;
}

.light-o75-c {
  color: rgba(var(--light), 0.75) !important;
}

.light-o50-c {
  color: rgba(var(--light), 0.5) !important;
}

.light-o25-c {
  color: rgba(var(--light), 0.25) !important;
}

.light-bg {
  background-color: rgba(var(--light), 1) !important;
}

.light-o75-bg {
  background-color: rgba(var(--light), 0.75) !important;
}

.light-o50-bg {
  background-color: rgba(var(--light), 0.5) !important;
}

.light-o25-bg {
  background-color: rgba(var(--light), 0.25) !important;
}

.light-brdr {
  border-color: rgba(var(--light), 1) !important;
}

.light-o75-brdr {
  border-color: rgba(var(--light), 0.75) !important;
}

.light-o50-brdr {
  border-color: rgba(var(--light), 0.5) !important;
}

.light-o25-brdr {
  border-color: rgba(var(--light), 0.25) !important;
}

/*==============================================< hover*/
.hover-light-c:hover {
  color: rgba(var(--light), 1) !important;
}

.hover-light-o75-c:hover {
  color: rgba(var(--light), 0.75) !important;
}

.hover-light-o50-c:hover {
  color: rgba(var(--light), 0.5) !important;
}

.hover-light-o25-c:hover {
  color: rgba(var(--light), 0.25) !important;
}

.hover-light-bg:hover {
  background-color: rgba(var(--light), 1) !important;
}

.hover-light-o75-bg:hover {
  background-color: rgba(var(--light), 0.75) !important;
}

.hover-light-o50-bg:hover {
  background-color: rgba(var(--light), 0.5) !important;
}

.hover-light-o25-bg:hover {
  background-color: rgba(var(--light), 0.25) !important;
}

.hover-light-brdr:hover {
  border-color: rgba(var(--light), 1) !important;
}

.hover-light-o75-brdr:hover {
  border-color: rgba(var(--light), 0.75) !important;
}

.hover-light-o50-brdr:hover {
  border-color: rgba(var(--light), 0.5) !important;
}

.hover-light-o25-brdr:hover {
  border-color: rgba(var(--light), 0.25) !important;
}

/*==============================================< active*/
.active-light-c.active {
  color: rgba(var(--light), 1) !important;
}

.active-light-o75-c.active {
  color: rgba(var(--light), 0.75) !important;
}

.active-light-o50-c.active {
  color: rgba(var(--light), 0.5) !important;
}

.active-light-o25-c.active {
  color: rgba(var(--light), 0.25) !important;
}

.active-light-bg.active {
  background-color: rgba(var(--light), 1) !important;
}

.active-light-o75-bg.active {
  background-color: rgba(var(--light), 0.75) !important;
}

.active-light-o50-bg.active {
  background-color: rgba(var(--light), 0.5) !important;
}

.active-light-o25-bg.active {
  background-color: rgba(var(--light), 0.25) !important;
}

.active-light-brdr.active {
  border-color: rgba(var(--light), 1) !important;
}

.active-light-o75-brdr.active {
  border-color: rgba(var(--light), 0.75) !important;
}

.active-light-o50-brdr.active {
  border-color: rgba(var(--light), 0.5) !important;
}

.active-light-o25-brdr.active {
  border-color: rgba(var(--light), 0.25) !important;
}

/*==============================================< focus*/
.focus-light-c:focus {
  color: rgba(var(--light), 1) !important;
}

.focus-light-o75-c:focus {
  color: rgba(var(--light), 0.75) !important;
}

.focus-light-o50-c:focus {
  color: rgba(var(--light), 0.5) !important;
}

.focus-light-o25-c:focus {
  color: rgba(var(--light), 0.25) !important;
}

.focus-light-bg:focus {
  background-color: rgba(var(--light), 1) !important;
}

.focus-light-o75-bg:focus {
  background-color: rgba(var(--light), 0.75) !important;
}

.focus-light-o50-bg:focus {
  background-color: rgba(var(--light), 0.5) !important;
}

.focus-light-o25-bg:focus {
  background-color: rgba(var(--light), 0.25) !important;
}

.focus-light-brdr:focus {
  border-color: rgba(var(--light), 1) !important;
}

.focus-light-o75-brdr:focus {
  border-color: rgba(var(--light), 0.75) !important;
}

.focus-light-o50-brdr:focus {
  border-color: rgba(var(--light), 0.5) !important;
}

.focus-light-o25-brdr:focus {
  border-color: rgba(var(--light), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-light-c[disabled] {
  color: rgba(var(--light), 1) !important;
}

.disabled-light-o75-c[disabled] {
  color: rgba(var(--light), 0.75) !important;
}

.disabled-light-o50-c[disabled] {
  color: rgba(var(--light), 0.5) !important;
}

.disabled-light-o25-c[disabled] {
  color: rgba(var(--light), 0.25) !important;
}

.disabled-light-bg[disabled] {
  background-color: rgba(var(--light), 1) !important;
}

.disabled-light-o75-bg[disabled] {
  background-color: rgba(var(--light), 0.75) !important;
}

.disabled-light-o50-bg[disabled] {
  background-color: rgba(var(--light), 0.5) !important;
}

.disabled-light-o25-bg[disabled] {
  background-color: rgba(var(--light), 0.25) !important;
}

.disabled-light-brdr[disabled] {
  border-color: rgba(var(--light), 1) !important;
}

.disabled-light-o75-brdr[disabled] {
  border-color: rgba(var(--light), 0.75) !important;
}

.disabled-light-o50-brdr[disabled] {
  border-color: rgba(var(--light), 0.5) !important;
}

.disabled-light-o25-brdr[disabled] {
  border-color: rgba(var(--light), 0.25) !important;
}

/*============================================================================================< gray */
/*==============================================< norm*/
.gray-c {
  color: rgba(var(--gray), 1) !important;
}

.gray-o75-c {
  color: rgba(var(--gray), 0.75) !important;
}

.gray-o50-c {
  color: rgba(var(--gray), 0.5) !important;
}

.gray-o25-c {
  color: rgba(var(--gray), 0.25) !important;
}

.gray-bg {
  background-color: rgba(var(--gray), 1) !important;
}

.gray-o75-bg {
  background-color: rgba(var(--gray), 0.75) !important;
}

.gray-o50-bg {
  background-color: rgba(var(--gray), 0.5) !important;
}

.gray-o25-bg {
  background-color: rgba(var(--gray), 0.25) !important;
}

.gray-brdr {
  border-color: rgba(var(--gray), 1) !important;
}

.gray-o75-brdr {
  border-color: rgba(var(--gray), 0.75) !important;
}

.gray-o50-brdr {
  border-color: rgba(var(--gray), 0.5) !important;
}

.gray-o25-brdr {
  border-color: rgba(var(--gray), 0.25) !important;
}

/*==============================================< hover*/
.hover-gray-c:hover {
  color: rgba(var(--gray), 1) !important;
}

.hover-gray-o75-c:hover {
  color: rgba(var(--gray), 0.75) !important;
}

.hover-gray-o50-c:hover {
  color: rgba(var(--gray), 0.5) !important;
}

.hover-gray-o25-c:hover {
  color: rgba(var(--gray), 0.25) !important;
}

.hover-gray-bg:hover {
  background-color: rgba(var(--gray), 1) !important;
}

.hover-gray-o75-bg:hover {
  background-color: rgba(var(--gray), 0.75) !important;
}

.hover-gray-o50-bg:hover {
  background-color: rgba(var(--gray), 0.5) !important;
}

.hover-gray-o25-bg:hover {
  background-color: rgba(var(--gray), 0.25) !important;
}

.hover-gray-brdr:hover {
  border-color: rgba(var(--gray), 1) !important;
}

.hover-gray-o75-brdr:hover {
  border-color: rgba(var(--gray), 0.75) !important;
}

.hover-gray-o50-brdr:hover {
  border-color: rgba(var(--gray), 0.5) !important;
}

.hover-gray-o25-brdr:hover {
  border-color: rgba(var(--gray), 0.25) !important;
}

/*==============================================< active*/
.active-gray-c.active {
  color: rgba(var(--gray), 1) !important;
}

.active-gray-o75-c.active {
  color: rgba(var(--gray), 0.75) !important;
}

.active-gray-o50-c.active {
  color: rgba(var(--gray), 0.5) !important;
}

.active-gray-o25-c.active {
  color: rgba(var(--gray), 0.25) !important;
}

.active-gray-bg.active {
  background-color: rgba(var(--gray), 1) !important;
}

.active-gray-o75-bg.active {
  background-color: rgba(var(--gray), 0.75) !important;
}

.active-gray-o50-bg.active {
  background-color: rgba(var(--gray), 0.5) !important;
}

.active-gray-o25-bg.active {
  background-color: rgba(var(--gray), 0.25) !important;
}

.active-gray-brdr.active {
  border-color: rgba(var(--gray), 1) !important;
}

.active-gray-o75-brdr.active {
  border-color: rgba(var(--gray), 0.75) !important;
}

.active-gray-o50-brdr.active {
  border-color: rgba(var(--gray), 0.5) !important;
}

.active-gray-o25-brdr.active {
  border-color: rgba(var(--gray), 0.25) !important;
}

/*==============================================< focus*/
.focus-gray-c:focus {
  color: rgba(var(--gray), 1) !important;
}

.focus-gray-o75-c:focus {
  color: rgba(var(--gray), 0.75) !important;
}

.focus-gray-o50-c:focus {
  color: rgba(var(--gray), 0.5) !important;
}

.focus-gray-o25-c:focus {
  color: rgba(var(--gray), 0.25) !important;
}

.focus-gray-bg:focus {
  background-color: rgba(var(--gray), 1) !important;
}

.focus-gray-o75-bg:focus {
  background-color: rgba(var(--gray), 0.75) !important;
}

.focus-gray-o50-bg:focus {
  background-color: rgba(var(--gray), 0.5) !important;
}

.focus-gray-o25-bg:focus {
  background-color: rgba(var(--gray), 0.25) !important;
}

.focus-gray-brdr:focus {
  border-color: rgba(var(--gray), 1) !important;
}

.focus-gray-o75-brdr:focus {
  border-color: rgba(var(--gray), 0.75) !important;
}

.focus-gray-o50-brdr:focus {
  border-color: rgba(var(--gray), 0.5) !important;
}

.focus-gray-o25-brdr:focus {
  border-color: rgba(var(--gray), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-gray-c[disabled] {
  color: rgba(var(--gray), 1) !important;
}

.disabled-gray-o75-c[disabled] {
  color: rgba(var(--gray), 0.75) !important;
}

.disabled-gray-o50-c[disabled] {
  color: rgba(var(--gray), 0.5) !important;
}

.disabled-gray-o25-c[disabled] {
  color: rgba(var(--gray), 0.25) !important;
}

.disabled-gray-bg[disabled] {
  background-color: rgba(var(--gray), 1) !important;
}

.disabled-gray-o75-bg[disabled] {
  background-color: rgba(var(--gray), 0.75) !important;
}

.disabled-gray-o50-bg[disabled] {
  background-color: rgba(var(--gray), 0.5) !important;
}

.disabled-gray-o25-bg[disabled] {
  background-color: rgba(var(--gray), 0.25) !important;
}

.disabled-gray-brdr[disabled] {
  border-color: rgba(var(--gray), 1) !important;
}

.disabled-gray-o75-brdr[disabled] {
  border-color: rgba(var(--gray), 0.75) !important;
}

.disabled-gray-o50-brdr[disabled] {
  border-color: rgba(var(--gray), 0.5) !important;
}

.disabled-gray-o25-brdr[disabled] {
  border-color: rgba(var(--gray), 0.25) !important;
}

/*============================================================================================< dark */
/*==============================================< norm*/
.dark-c {
  color: rgba(var(--dark), 1) !important;
}

.dark-o75-c {
  color: rgba(var(--dark), 0.75) !important;
}

.dark-o50-c {
  color: rgba(var(--dark), 0.5) !important;
}

.dark-o25-c {
  color: rgba(var(--dark), 0.25) !important;
}

.dark-bg {
  background-color: rgba(var(--dark), 1) !important;
}

.dark-o75-bg {
  background-color: rgba(var(--dark), 0.75) !important;
}

.dark-o50-bg {
  background-color: rgba(var(--dark), 0.5) !important;
}

.dark-o25-bg {
  background-color: rgba(var(--dark), 0.25) !important;
}

.dark-brdr {
  border-color: rgba(var(--dark), 1) !important;
}

.dark-o75-brdr {
  border-color: rgba(var(--dark), 0.75) !important;
}

.dark-o50-brdr {
  border-color: rgba(var(--dark), 0.5) !important;
}

.dark-o25-brdr {
  border-color: rgba(var(--dark), 0.25) !important;
}

/*==============================================< hover*/
.hover-dark-c:hover {
  color: rgba(var(--dark), 1) !important;
}

.hover-dark-o75-c:hover {
  color: rgba(var(--dark), 0.75) !important;
}

.hover-dark-o50-c:hover {
  color: rgba(var(--dark), 0.5) !important;
}

.hover-dark-o25-c:hover {
  color: rgba(var(--dark), 0.25) !important;
}

.hover-dark-bg:hover {
  background-color: rgba(var(--dark), 1) !important;
}

.hover-dark-o75-bg:hover {
  background-color: rgba(var(--dark), 0.75) !important;
}

.hover-dark-o50-bg:hover {
  background-color: rgba(var(--dark), 0.5) !important;
}

.hover-dark-o25-bg:hover {
  background-color: rgba(var(--dark), 0.25) !important;
}

.hover-dark-brdr:hover {
  border-color: rgba(var(--dark), 1) !important;
}

.hover-dark-o75-brdr:hover {
  border-color: rgba(var(--dark), 0.75) !important;
}

.hover-dark-o50-brdr:hover {
  border-color: rgba(var(--dark), 0.5) !important;
}

.hover-dark-o25-brdr:hover {
  border-color: rgba(var(--dark), 0.25) !important;
}

/*==============================================< active*/
.active-dark-c.active {
  color: rgba(var(--dark), 1) !important;
}

.active-dark-o75-c.active {
  color: rgba(var(--dark), 0.75) !important;
}

.active-dark-o50-c.active {
  color: rgba(var(--dark), 0.5) !important;
}

.active-dark-o25-c.active {
  color: rgba(var(--dark), 0.25) !important;
}

.active-dark-bg.active {
  background-color: rgba(var(--dark), 1) !important;
}

.active-dark-o75-bg.active {
  background-color: rgba(var(--dark), 0.75) !important;
}

.active-dark-o50-bg.active {
  background-color: rgba(var(--dark), 0.5) !important;
}

.active-dark-o25-bg.active {
  background-color: rgba(var(--dark), 0.25) !important;
}

.active-dark-brdr.active {
  border-color: rgba(var(--dark), 1) !important;
}

.active-dark-o75-brdr.active {
  border-color: rgba(var(--dark), 0.75) !important;
}

.active-dark-o50-brdr.active {
  border-color: rgba(var(--dark), 0.5) !important;
}

.active-dark-o25-brdr.active {
  border-color: rgba(var(--dark), 0.25) !important;
}

/*==============================================< focus*/
.focus-dark-c:focus {
  color: rgba(var(--dark), 1) !important;
}

.focus-dark-o75-c:focus {
  color: rgba(var(--dark), 0.75) !important;
}

.focus-dark-o50-c:focus {
  color: rgba(var(--dark), 0.5) !important;
}

.focus-dark-o25-c:focus {
  color: rgba(var(--dark), 0.25) !important;
}

.focus-dark-bg:focus {
  background-color: rgba(var(--dark), 1) !important;
}

.focus-dark-o75-bg:focus {
  background-color: rgba(var(--dark), 0.75) !important;
}

.focus-dark-o50-bg:focus {
  background-color: rgba(var(--dark), 0.5) !important;
}

.focus-dark-o25-bg:focus {
  background-color: rgba(var(--dark), 0.25) !important;
}

.focus-dark-brdr:focus {
  border-color: rgba(var(--dark), 1) !important;
}

.focus-dark-o75-brdr:focus {
  border-color: rgba(var(--dark), 0.75) !important;
}

.focus-dark-o50-brdr:focus {
  border-color: rgba(var(--dark), 0.5) !important;
}

.focus-dark-o25-brdr:focus {
  border-color: rgba(var(--dark), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-dark-c[disabled] {
  color: rgba(var(--dark), 1) !important;
}

.disabled-dark-o75-c[disabled] {
  color: rgba(var(--dark), 0.75) !important;
}

.disabled-dark-o50-c[disabled] {
  color: rgba(var(--dark), 0.5) !important;
}

.disabled-dark-o25-c[disabled] {
  color: rgba(var(--dark), 0.25) !important;
}

.disabled-dark-bg[disabled] {
  background-color: rgba(var(--dark), 1) !important;
}

.disabled-dark-o75-bg[disabled] {
  background-color: rgba(var(--dark), 0.75) !important;
}

.disabled-dark-o50-bg[disabled] {
  background-color: rgba(var(--dark), 0.5) !important;
}

.disabled-dark-o25-bg[disabled] {
  background-color: rgba(var(--dark), 0.25) !important;
}

.disabled-dark-brdr[disabled] {
  border-color: rgba(var(--dark), 1) !important;
}

.disabled-dark-o75-brdr[disabled] {
  border-color: rgba(var(--dark), 0.75) !important;
}

.disabled-dark-o50-brdr[disabled] {
  border-color: rgba(var(--dark), 0.5) !important;
}

.disabled-dark-o25-brdr[disabled] {
  border-color: rgba(var(--dark), 0.25) !important;
}

/*============================================================================================< black */
/*==============================================< norm*/
.black-c {
  color: rgba(var(--black), 1) !important;
}

.black-o75-c {
  color: rgba(var(--black), 0.75) !important;
}

.black-o50-c {
  color: rgba(var(--black), 0.5) !important;
}

.black-o25-c {
  color: rgba(var(--black), 0.25) !important;
}

.black-bg {
  background-color: rgba(var(--black), 1) !important;
}

.black-o75-bg {
  background-color: rgba(var(--black), 0.75) !important;
}

.black-o50-bg {
  background-color: rgba(var(--black), 0.5) !important;
}

.black-o25-bg {
  background-color: rgba(var(--black), 0.25) !important;
}

.black-brdr {
  border-color: rgba(var(--black), 1) !important;
}

.black-o75-brdr {
  border-color: rgba(var(--black), 0.75) !important;
}

.black-o50-brdr {
  border-color: rgba(var(--black), 0.5) !important;
}

.black-o25-brdr {
  border-color: rgba(var(--black), 0.25) !important;
}

/*==============================================< hover*/
.hover-black-c:hover {
  color: rgba(var(--black), 1) !important;
}

.hover-black-o75-c:hover {
  color: rgba(var(--black), 0.75) !important;
}

.hover-black-o50-c:hover {
  color: rgba(var(--black), 0.5) !important;
}

.hover-black-o25-c:hover {
  color: rgba(var(--black), 0.25) !important;
}

.hover-black-bg:hover {
  background-color: rgba(var(--black), 1) !important;
}

.hover-black-o75-bg:hover {
  background-color: rgba(var(--black), 0.75) !important;
}

.hover-black-o50-bg:hover {
  background-color: rgba(var(--black), 0.5) !important;
}

.hover-black-o25-bg:hover {
  background-color: rgba(var(--black), 0.25) !important;
}

.hover-black-brdr:hover {
  border-color: rgba(var(--black), 1) !important;
}

.hover-black-o75-brdr:hover {
  border-color: rgba(var(--black), 0.75) !important;
}

.hover-black-o50-brdr:hover {
  border-color: rgba(var(--black), 0.5) !important;
}

.hover-black-o25-brdr:hover {
  border-color: rgba(var(--black), 0.25) !important;
}

/*==============================================< active*/
.active-black-c.active {
  color: rgba(var(--black), 1) !important;
}

.active-black-o75-c.active {
  color: rgba(var(--black), 0.75) !important;
}

.active-black-o50-c.active {
  color: rgba(var(--black), 0.5) !important;
}

.active-black-o25-c.active {
  color: rgba(var(--black), 0.25) !important;
}

.active-black-bg.active {
  background-color: rgba(var(--black), 1) !important;
}

.active-black-o75-bg.active {
  background-color: rgba(var(--black), 0.75) !important;
}

.active-black-o50-bg.active {
  background-color: rgba(var(--black), 0.5) !important;
}

.active-black-o25-bg.active {
  background-color: rgba(var(--black), 0.25) !important;
}

.active-black-brdr.active {
  border-color: rgba(var(--black), 1) !important;
}

.active-black-o75-brdr.active {
  border-color: rgba(var(--black), 0.75) !important;
}

.active-black-o50-brdr.active {
  border-color: rgba(var(--black), 0.5) !important;
}

.active-black-o25-brdr.active {
  border-color: rgba(var(--black), 0.25) !important;
}

/*==============================================< focus*/
.focus-black-c:focus {
  color: rgba(var(--black), 1) !important;
}

.focus-black-o75-c:focus {
  color: rgba(var(--black), 0.75) !important;
}

.focus-black-o50-c:focus {
  color: rgba(var(--black), 0.5) !important;
}

.focus-black-o25-c:focus {
  color: rgba(var(--black), 0.25) !important;
}

.focus-black-bg:focus {
  background-color: rgba(var(--black), 1) !important;
}

.focus-black-o75-bg:focus {
  background-color: rgba(var(--black), 0.75) !important;
}

.focus-black-o50-bg:focus {
  background-color: rgba(var(--black), 0.5) !important;
}

.focus-black-o25-bg:focus {
  background-color: rgba(var(--black), 0.25) !important;
}

.focus-black-brdr:focus {
  border-color: rgba(var(--black), 1) !important;
}

.focus-black-o75-brdr:focus {
  border-color: rgba(var(--black), 0.75) !important;
}

.focus-black-o50-brdr:focus {
  border-color: rgba(var(--black), 0.5) !important;
}

.focus-black-o25-brdr:focus {
  border-color: rgba(var(--black), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-black-c[disabled] {
  color: rgba(var(--black), 1) !important;
}

.disabled-black-o75-c[disabled] {
  color: rgba(var(--black), 0.75) !important;
}

.disabled-black-o50-c[disabled] {
  color: rgba(var(--black), 0.5) !important;
}

.disabled-black-o25-c[disabled] {
  color: rgba(var(--black), 0.25) !important;
}

.disabled-black-bg[disabled] {
  background-color: rgba(var(--black), 1) !important;
}

.disabled-black-o75-bg[disabled] {
  background-color: rgba(var(--black), 0.75) !important;
}

.disabled-black-o50-bg[disabled] {
  background-color: rgba(var(--black), 0.5) !important;
}

.disabled-black-o25-bg[disabled] {
  background-color: rgba(var(--black), 0.25) !important;
}

.disabled-black-brdr[disabled] {
  border-color: rgba(var(--black), 1) !important;
}

.disabled-black-o75-brdr[disabled] {
  border-color: rgba(var(--black), 0.75) !important;
}

.disabled-black-o50-brdr[disabled] {
  border-color: rgba(var(--black), 0.5) !important;
}

.disabled-black-o25-brdr[disabled] {
  border-color: rgba(var(--black), 0.25) !important;
}

/*============================================================================================< red */
/*==============================================< norm*/
.red-c {
  color: rgba(var(--red), 1) !important;
}

.red-o75-c {
  color: rgba(var(--red), 0.75) !important;
}

.red-o50-c {
  color: rgba(var(--red), 0.5) !important;
}

.red-o25-c {
  color: rgba(var(--red), 0.25) !important;
}

.red-bg {
  background-color: rgba(var(--red), 1) !important;
}

.red-o75-bg {
  background-color: rgba(var(--red), 0.75) !important;
}

.red-o50-bg {
  background-color: rgba(var(--red), 0.5) !important;
}

.red-o25-bg {
  background-color: rgba(var(--red), 0.25) !important;
}

.red-brdr {
  border-color: rgba(var(--red), 1) !important;
}

.red-o75-brdr {
  border-color: rgba(var(--red), 0.75) !important;
}

.red-o50-brdr {
  border-color: rgba(var(--red), 0.5) !important;
}

.red-o25-brdr {
  border-color: rgba(var(--red), 0.25) !important;
}

/*==============================================< hover*/
.hover-red-c:hover {
  color: rgba(var(--red), 1) !important;
}

.hover-red-o75-c:hover {
  color: rgba(var(--red), 0.75) !important;
}

.hover-red-o50-c:hover {
  color: rgba(var(--red), 0.5) !important;
}

.hover-red-o25-c:hover {
  color: rgba(var(--red), 0.25) !important;
}

.hover-red-bg:hover {
  background-color: rgba(var(--red), 1) !important;
}

.hover-red-o75-bg:hover {
  background-color: rgba(var(--red), 0.75) !important;
}

.hover-red-o50-bg:hover {
  background-color: rgba(var(--red), 0.5) !important;
}

.hover-red-o25-bg:hover {
  background-color: rgba(var(--red), 0.25) !important;
}

.hover-red-brdr:hover {
  border-color: rgba(var(--red), 1) !important;
}

.hover-red-o75-brdr:hover {
  border-color: rgba(var(--red), 0.75) !important;
}

.hover-red-o50-brdr:hover {
  border-color: rgba(var(--red), 0.5) !important;
}

.hover-red-o25-brdr:hover {
  border-color: rgba(var(--red), 0.25) !important;
}

/*==============================================< active*/
.active-red-c.active {
  color: rgba(var(--red), 1) !important;
}

.active-red-o75-c.active {
  color: rgba(var(--red), 0.75) !important;
}

.active-red-o50-c.active {
  color: rgba(var(--red), 0.5) !important;
}

.active-red-o25-c.active {
  color: rgba(var(--red), 0.25) !important;
}

.active-red-bg.active {
  background-color: rgba(var(--red), 1) !important;
}

.active-red-o75-bg.active {
  background-color: rgba(var(--red), 0.75) !important;
}

.active-red-o50-bg.active {
  background-color: rgba(var(--red), 0.5) !important;
}

.active-red-o25-bg.active {
  background-color: rgba(var(--red), 0.25) !important;
}

.active-red-brdr.active {
  border-color: rgba(var(--red), 1) !important;
}

.active-red-o75-brdr.active {
  border-color: rgba(var(--red), 0.75) !important;
}

.active-red-o50-brdr.active {
  border-color: rgba(var(--red), 0.5) !important;
}

.active-red-o25-brdr.active {
  border-color: rgba(var(--red), 0.25) !important;
}

/*==============================================< focus*/
.focus-red-c:focus {
  color: rgba(var(--red), 1) !important;
}

.focus-red-o75-c:focus {
  color: rgba(var(--red), 0.75) !important;
}

.focus-red-o50-c:focus {
  color: rgba(var(--red), 0.5) !important;
}

.focus-red-o25-c:focus {
  color: rgba(var(--red), 0.25) !important;
}

.focus-red-bg:focus {
  background-color: rgba(var(--red), 1) !important;
}

.focus-red-o75-bg:focus {
  background-color: rgba(var(--red), 0.75) !important;
}

.focus-red-o50-bg:focus {
  background-color: rgba(var(--red), 0.5) !important;
}

.focus-red-o25-bg:focus {
  background-color: rgba(var(--red), 0.25) !important;
}

.focus-red-brdr:focus {
  border-color: rgba(var(--red), 1) !important;
}

.focus-red-o75-brdr:focus {
  border-color: rgba(var(--red), 0.75) !important;
}

.focus-red-o50-brdr:focus {
  border-color: rgba(var(--red), 0.5) !important;
}

.focus-red-o25-brdr:focus {
  border-color: rgba(var(--red), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-red-c[disabled] {
  color: rgba(var(--red), 1) !important;
}

.disabled-red-o75-c[disabled] {
  color: rgba(var(--red), 0.75) !important;
}

.disabled-red-o50-c[disabled] {
  color: rgba(var(--red), 0.5) !important;
}

.disabled-red-o25-c[disabled] {
  color: rgba(var(--red), 0.25) !important;
}

.disabled-red-bg[disabled] {
  background-color: rgba(var(--red), 1) !important;
}

.disabled-red-o75-bg[disabled] {
  background-color: rgba(var(--red), 0.75) !important;
}

.disabled-red-o50-bg[disabled] {
  background-color: rgba(var(--red), 0.5) !important;
}

.disabled-red-o25-bg[disabled] {
  background-color: rgba(var(--red), 0.25) !important;
}

.disabled-red-brdr[disabled] {
  border-color: rgba(var(--red), 1) !important;
}

.disabled-red-o75-brdr[disabled] {
  border-color: rgba(var(--red), 0.75) !important;
}

.disabled-red-o50-brdr[disabled] {
  border-color: rgba(var(--red), 0.5) !important;
}

.disabled-red-o25-brdr[disabled] {
  border-color: rgba(var(--red), 0.25) !important;
}

/*============================================================================================< orange */
/*==============================================< norm*/
.orange-c {
  color: rgba(var(--orange), 1) !important;
}

.orange-o75-c {
  color: rgba(var(--orange), 0.75) !important;
}

.orange-o50-c {
  color: rgba(var(--orange), 0.5) !important;
}

.orange-o25-c {
  color: rgba(var(--orange), 0.25) !important;
}

.orange-bg {
  background-color: rgba(var(--orange), 1) !important;
}

.orange-o75-bg {
  background-color: rgba(var(--orange), 0.75) !important;
}

.orange-o50-bg {
  background-color: rgba(var(--orange), 0.5) !important;
}

.orange-o25-bg {
  background-color: rgba(var(--orange), 0.25) !important;
}

.orange-brdr {
  border-color: rgba(var(--orange), 1) !important;
}

.orange-o75-brdr {
  border-color: rgba(var(--orange), 0.75) !important;
}

.orange-o50-brdr {
  border-color: rgba(var(--orange), 0.5) !important;
}

.orange-o25-brdr {
  border-color: rgba(var(--orange), 0.25) !important;
}

/*==============================================< hover*/
.hover-orange-c:hover {
  color: rgba(var(--orange), 1) !important;
}

.hover-orange-o75-c:hover {
  color: rgba(var(--orange), 0.75) !important;
}

.hover-orange-o50-c:hover {
  color: rgba(var(--orange), 0.5) !important;
}

.hover-orange-o25-c:hover {
  color: rgba(var(--orange), 0.25) !important;
}

.hover-orange-bg:hover {
  background-color: rgba(var(--orange), 1) !important;
}

.hover-orange-o75-bg:hover {
  background-color: rgba(var(--orange), 0.75) !important;
}

.hover-orange-o50-bg:hover {
  background-color: rgba(var(--orange), 0.5) !important;
}

.hover-orange-o25-bg:hover {
  background-color: rgba(var(--orange), 0.25) !important;
}

.hover-orange-brdr:hover {
  border-color: rgba(var(--orange), 1) !important;
}

.hover-orange-o75-brdr:hover {
  border-color: rgba(var(--orange), 0.75) !important;
}

.hover-orange-o50-brdr:hover {
  border-color: rgba(var(--orange), 0.5) !important;
}

.hover-orange-o25-brdr:hover {
  border-color: rgba(var(--orange), 0.25) !important;
}

/*==============================================< active*/
.active-orange-c.active {
  color: rgba(var(--orange), 1) !important;
}

.active-orange-o75-c.active {
  color: rgba(var(--orange), 0.75) !important;
}

.active-orange-o50-c.active {
  color: rgba(var(--orange), 0.5) !important;
}

.active-orange-o25-c.active {
  color: rgba(var(--orange), 0.25) !important;
}

.active-orange-bg.active {
  background-color: rgba(var(--orange), 1) !important;
}

.active-orange-o75-bg.active {
  background-color: rgba(var(--orange), 0.75) !important;
}

.active-orange-o50-bg.active {
  background-color: rgba(var(--orange), 0.5) !important;
}

.active-orange-o25-bg.active {
  background-color: rgba(var(--orange), 0.25) !important;
}

.active-orange-brdr.active {
  border-color: rgba(var(--orange), 1) !important;
}

.active-orange-o75-brdr.active {
  border-color: rgba(var(--orange), 0.75) !important;
}

.active-orange-o50-brdr.active {
  border-color: rgba(var(--orange), 0.5) !important;
}

.active-orange-o25-brdr.active {
  border-color: rgba(var(--orange), 0.25) !important;
}

/*==============================================< focus*/
.focus-orange-c:focus {
  color: rgba(var(--orange), 1) !important;
}

.focus-orange-o75-c:focus {
  color: rgba(var(--orange), 0.75) !important;
}

.focus-orange-o50-c:focus {
  color: rgba(var(--orange), 0.5) !important;
}

.focus-orange-o25-c:focus {
  color: rgba(var(--orange), 0.25) !important;
}

.focus-orange-bg:focus {
  background-color: rgba(var(--orange), 1) !important;
}

.focus-orange-o75-bg:focus {
  background-color: rgba(var(--orange), 0.75) !important;
}

.focus-orange-o50-bg:focus {
  background-color: rgba(var(--orange), 0.5) !important;
}

.focus-orange-o25-bg:focus {
  background-color: rgba(var(--orange), 0.25) !important;
}

.focus-orange-brdr:focus {
  border-color: rgba(var(--orange), 1) !important;
}

.focus-orange-o75-brdr:focus {
  border-color: rgba(var(--orange), 0.75) !important;
}

.focus-orange-o50-brdr:focus {
  border-color: rgba(var(--orange), 0.5) !important;
}

.focus-orange-o25-brdr:focus {
  border-color: rgba(var(--orange), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-orange-c[disabled] {
  color: rgba(var(--orange), 1) !important;
}

.disabled-orange-o75-c[disabled] {
  color: rgba(var(--orange), 0.75) !important;
}

.disabled-orange-o50-c[disabled] {
  color: rgba(var(--orange), 0.5) !important;
}

.disabled-orange-o25-c[disabled] {
  color: rgba(var(--orange), 0.25) !important;
}

.disabled-orange-bg[disabled] {
  background-color: rgba(var(--orange), 1) !important;
}

.disabled-orange-o75-bg[disabled] {
  background-color: rgba(var(--orange), 0.75) !important;
}

.disabled-orange-o50-bg[disabled] {
  background-color: rgba(var(--orange), 0.5) !important;
}

.disabled-orange-o25-bg[disabled] {
  background-color: rgba(var(--orange), 0.25) !important;
}

.disabled-orange-brdr[disabled] {
  border-color: rgba(var(--orange), 1) !important;
}

.disabled-orange-o75-brdr[disabled] {
  border-color: rgba(var(--orange), 0.75) !important;
}

.disabled-orange-o50-brdr[disabled] {
  border-color: rgba(var(--orange), 0.5) !important;
}

.disabled-orange-o25-brdr[disabled] {
  border-color: rgba(var(--orange), 0.25) !important;
}

/*============================================================================================< yellow */
/*==============================================< norm*/
.yellow-c {
  color: rgba(var(--yellow), 1) !important;
}

.yellow-o75-c {
  color: rgba(var(--yellow), 0.75) !important;
}

.yellow-o50-c {
  color: rgba(var(--yellow), 0.5) !important;
}

.yellow-o25-c {
  color: rgba(var(--yellow), 0.25) !important;
}

.yellow-bg {
  background-color: rgba(var(--yellow), 1) !important;
}

.yellow-o75-bg {
  background-color: rgba(var(--yellow), 0.75) !important;
}

.yellow-o50-bg {
  background-color: rgba(var(--yellow), 0.5) !important;
}

.yellow-o25-bg {
  background-color: rgba(var(--yellow), 0.25) !important;
}

.yellow-brdr {
  border-color: rgba(var(--yellow), 1) !important;
}

.yellow-o75-brdr {
  border-color: rgba(var(--yellow), 0.75) !important;
}

.yellow-o50-brdr {
  border-color: rgba(var(--yellow), 0.5) !important;
}

.yellow-o25-brdr {
  border-color: rgba(var(--yellow), 0.25) !important;
}

/*==============================================< hover*/
.hover-yellow-c:hover {
  color: rgba(var(--yellow), 1) !important;
}

.hover-yellow-o75-c:hover {
  color: rgba(var(--yellow), 0.75) !important;
}

.hover-yellow-o50-c:hover {
  color: rgba(var(--yellow), 0.5) !important;
}

.hover-yellow-o25-c:hover {
  color: rgba(var(--yellow), 0.25) !important;
}

.hover-yellow-bg:hover {
  background-color: rgba(var(--yellow), 1) !important;
}

.hover-yellow-o75-bg:hover {
  background-color: rgba(var(--yellow), 0.75) !important;
}

.hover-yellow-o50-bg:hover {
  background-color: rgba(var(--yellow), 0.5) !important;
}

.hover-yellow-o25-bg:hover {
  background-color: rgba(var(--yellow), 0.25) !important;
}

.hover-yellow-brdr:hover {
  border-color: rgba(var(--yellow), 1) !important;
}

.hover-yellow-o75-brdr:hover {
  border-color: rgba(var(--yellow), 0.75) !important;
}

.hover-yellow-o50-brdr:hover {
  border-color: rgba(var(--yellow), 0.5) !important;
}

.hover-yellow-o25-brdr:hover {
  border-color: rgba(var(--yellow), 0.25) !important;
}

/*==============================================< active*/
.active-yellow-c.active {
  color: rgba(var(--yellow), 1) !important;
}

.active-yellow-o75-c.active {
  color: rgba(var(--yellow), 0.75) !important;
}

.active-yellow-o50-c.active {
  color: rgba(var(--yellow), 0.5) !important;
}

.active-yellow-o25-c.active {
  color: rgba(var(--yellow), 0.25) !important;
}

.active-yellow-bg.active {
  background-color: rgba(var(--yellow), 1) !important;
}

.active-yellow-o75-bg.active {
  background-color: rgba(var(--yellow), 0.75) !important;
}

.active-yellow-o50-bg.active {
  background-color: rgba(var(--yellow), 0.5) !important;
}

.active-yellow-o25-bg.active {
  background-color: rgba(var(--yellow), 0.25) !important;
}

.active-yellow-brdr.active {
  border-color: rgba(var(--yellow), 1) !important;
}

.active-yellow-o75-brdr.active {
  border-color: rgba(var(--yellow), 0.75) !important;
}

.active-yellow-o50-brdr.active {
  border-color: rgba(var(--yellow), 0.5) !important;
}

.active-yellow-o25-brdr.active {
  border-color: rgba(var(--yellow), 0.25) !important;
}

/*==============================================< focus*/
.focus-yellow-c:focus {
  color: rgba(var(--yellow), 1) !important;
}

.focus-yellow-o75-c:focus {
  color: rgba(var(--yellow), 0.75) !important;
}

.focus-yellow-o50-c:focus {
  color: rgba(var(--yellow), 0.5) !important;
}

.focus-yellow-o25-c:focus {
  color: rgba(var(--yellow), 0.25) !important;
}

.focus-yellow-bg:focus {
  background-color: rgba(var(--yellow), 1) !important;
}

.focus-yellow-o75-bg:focus {
  background-color: rgba(var(--yellow), 0.75) !important;
}

.focus-yellow-o50-bg:focus {
  background-color: rgba(var(--yellow), 0.5) !important;
}

.focus-yellow-o25-bg:focus {
  background-color: rgba(var(--yellow), 0.25) !important;
}

.focus-yellow-brdr:focus {
  border-color: rgba(var(--yellow), 1) !important;
}

.focus-yellow-o75-brdr:focus {
  border-color: rgba(var(--yellow), 0.75) !important;
}

.focus-yellow-o50-brdr:focus {
  border-color: rgba(var(--yellow), 0.5) !important;
}

.focus-yellow-o25-brdr:focus {
  border-color: rgba(var(--yellow), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-yellow-c[disabled] {
  color: rgba(var(--yellow), 1) !important;
}

.disabled-yellow-o75-c[disabled] {
  color: rgba(var(--yellow), 0.75) !important;
}

.disabled-yellow-o50-c[disabled] {
  color: rgba(var(--yellow), 0.5) !important;
}

.disabled-yellow-o25-c[disabled] {
  color: rgba(var(--yellow), 0.25) !important;
}

.disabled-yellow-bg[disabled] {
  background-color: rgba(var(--yellow), 1) !important;
}

.disabled-yellow-o75-bg[disabled] {
  background-color: rgba(var(--yellow), 0.75) !important;
}

.disabled-yellow-o50-bg[disabled] {
  background-color: rgba(var(--yellow), 0.5) !important;
}

.disabled-yellow-o25-bg[disabled] {
  background-color: rgba(var(--yellow), 0.25) !important;
}

.disabled-yellow-brdr[disabled] {
  border-color: rgba(var(--yellow), 1) !important;
}

.disabled-yellow-o75-brdr[disabled] {
  border-color: rgba(var(--yellow), 0.75) !important;
}

.disabled-yellow-o50-brdr[disabled] {
  border-color: rgba(var(--yellow), 0.5) !important;
}

.disabled-yellow-o25-brdr[disabled] {
  border-color: rgba(var(--yellow), 0.25) !important;
}

/*============================================================================================< green */
/*==============================================< norm*/
.green-c {
  color: rgba(var(--green), 1) !important;
}

.green-o75-c {
  color: rgba(var(--green), 0.75) !important;
}

.green-o50-c {
  color: rgba(var(--green), 0.5) !important;
}

.green-o25-c {
  color: rgba(var(--green), 0.25) !important;
}

.green-bg {
  background-color: rgba(var(--green), 1) !important;
}

.green-o75-bg {
  background-color: rgba(var(--green), 0.75) !important;
}

.green-o50-bg {
  background-color: rgba(var(--green), 0.5) !important;
}

.green-o25-bg {
  background-color: rgba(var(--green), 0.25) !important;
}

.green-brdr {
  border-color: rgba(var(--green), 1) !important;
}

.green-o75-brdr {
  border-color: rgba(var(--green), 0.75) !important;
}

.green-o50-brdr {
  border-color: rgba(var(--green), 0.5) !important;
}

.green-o25-brdr {
  border-color: rgba(var(--green), 0.25) !important;
}

/*==============================================< hover*/
.hover-green-c:hover {
  color: rgba(var(--green), 1) !important;
}

.hover-green-o75-c:hover {
  color: rgba(var(--green), 0.75) !important;
}

.hover-green-o50-c:hover {
  color: rgba(var(--green), 0.5) !important;
}

.hover-green-o25-c:hover {
  color: rgba(var(--green), 0.25) !important;
}

.hover-green-bg:hover {
  background-color: rgba(var(--green), 1) !important;
}

.hover-green-o75-bg:hover {
  background-color: rgba(var(--green), 0.75) !important;
}

.hover-green-o50-bg:hover {
  background-color: rgba(var(--green), 0.5) !important;
}

.hover-green-o25-bg:hover {
  background-color: rgba(var(--green), 0.25) !important;
}

.hover-green-brdr:hover {
  border-color: rgba(var(--green), 1) !important;
}

.hover-green-o75-brdr:hover {
  border-color: rgba(var(--green), 0.75) !important;
}

.hover-green-o50-brdr:hover {
  border-color: rgba(var(--green), 0.5) !important;
}

.hover-green-o25-brdr:hover {
  border-color: rgba(var(--green), 0.25) !important;
}

/*==============================================< active*/
.active-green-c.active {
  color: rgba(var(--green), 1) !important;
}

.active-green-o75-c.active {
  color: rgba(var(--green), 0.75) !important;
}

.active-green-o50-c.active {
  color: rgba(var(--green), 0.5) !important;
}

.active-green-o25-c.active {
  color: rgba(var(--green), 0.25) !important;
}

.active-green-bg.active {
  background-color: rgba(var(--green), 1) !important;
}

.active-green-o75-bg.active {
  background-color: rgba(var(--green), 0.75) !important;
}

.active-green-o50-bg.active {
  background-color: rgba(var(--green), 0.5) !important;
}

.active-green-o25-bg.active {
  background-color: rgba(var(--green), 0.25) !important;
}

.active-green-brdr.active {
  border-color: rgba(var(--green), 1) !important;
}

.active-green-o75-brdr.active {
  border-color: rgba(var(--green), 0.75) !important;
}

.active-green-o50-brdr.active {
  border-color: rgba(var(--green), 0.5) !important;
}

.active-green-o25-brdr.active {
  border-color: rgba(var(--green), 0.25) !important;
}

/*==============================================< focus*/
.focus-green-c:focus {
  color: rgba(var(--green), 1) !important;
}

.focus-green-o75-c:focus {
  color: rgba(var(--green), 0.75) !important;
}

.focus-green-o50-c:focus {
  color: rgba(var(--green), 0.5) !important;
}

.focus-green-o25-c:focus {
  color: rgba(var(--green), 0.25) !important;
}

.focus-green-bg:focus {
  background-color: rgba(var(--green), 1) !important;
}

.focus-green-o75-bg:focus {
  background-color: rgba(var(--green), 0.75) !important;
}

.focus-green-o50-bg:focus {
  background-color: rgba(var(--green), 0.5) !important;
}

.focus-green-o25-bg:focus {
  background-color: rgba(var(--green), 0.25) !important;
}

.focus-green-brdr:focus {
  border-color: rgba(var(--green), 1) !important;
}

.focus-green-o75-brdr:focus {
  border-color: rgba(var(--green), 0.75) !important;
}

.focus-green-o50-brdr:focus {
  border-color: rgba(var(--green), 0.5) !important;
}

.focus-green-o25-brdr:focus {
  border-color: rgba(var(--green), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-green-c[disabled] {
  color: rgba(var(--green), 1) !important;
}

.disabled-green-o75-c[disabled] {
  color: rgba(var(--green), 0.75) !important;
}

.disabled-green-o50-c[disabled] {
  color: rgba(var(--green), 0.5) !important;
}

.disabled-green-o25-c[disabled] {
  color: rgba(var(--green), 0.25) !important;
}

.disabled-green-bg[disabled] {
  background-color: rgba(var(--green), 1) !important;
}

.disabled-green-o75-bg[disabled] {
  background-color: rgba(var(--green), 0.75) !important;
}

.disabled-green-o50-bg[disabled] {
  background-color: rgba(var(--green), 0.5) !important;
}

.disabled-green-o25-bg[disabled] {
  background-color: rgba(var(--green), 0.25) !important;
}

.disabled-green-brdr[disabled] {
  border-color: rgba(var(--green), 1) !important;
}

.disabled-green-o75-brdr[disabled] {
  border-color: rgba(var(--green), 0.75) !important;
}

.disabled-green-o50-brdr[disabled] {
  border-color: rgba(var(--green), 0.5) !important;
}

.disabled-green-o25-brdr[disabled] {
  border-color: rgba(var(--green), 0.25) !important;
}

/*============================================================================================< blue */
/*==============================================< norm*/
.blue-c {
  color: rgba(var(--blue), 1) !important;
}

.blue-o75-c {
  color: rgba(var(--blue), 0.75) !important;
}

.blue-o50-c {
  color: rgba(var(--blue), 0.5) !important;
}

.blue-o25-c {
  color: rgba(var(--blue), 0.25) !important;
}

.blue-bg {
  background-color: rgba(var(--blue), 1) !important;
}

.blue-o75-bg {
  background-color: rgba(var(--blue), 0.75) !important;
}

.blue-o50-bg {
  background-color: rgba(var(--blue), 0.5) !important;
}

.blue-o25-bg {
  background-color: rgba(var(--blue), 0.25) !important;
}

.blue-brdr {
  border-color: rgba(var(--blue), 1) !important;
}

.blue-o75-brdr {
  border-color: rgba(var(--blue), 0.75) !important;
}

.blue-o50-brdr {
  border-color: rgba(var(--blue), 0.5) !important;
}

.blue-o25-brdr {
  border-color: rgba(var(--blue), 0.25) !important;
}

/*==============================================< hover*/
.hover-blue-c:hover {
  color: rgba(var(--blue), 1) !important;
}

.hover-blue-o75-c:hover {
  color: rgba(var(--blue), 0.75) !important;
}

.hover-blue-o50-c:hover {
  color: rgba(var(--blue), 0.5) !important;
}

.hover-blue-o25-c:hover {
  color: rgba(var(--blue), 0.25) !important;
}

.hover-blue-bg:hover {
  background-color: rgba(var(--blue), 1) !important;
}

.hover-blue-o75-bg:hover {
  background-color: rgba(var(--blue), 0.75) !important;
}

.hover-blue-o50-bg:hover {
  background-color: rgba(var(--blue), 0.5) !important;
}

.hover-blue-o25-bg:hover {
  background-color: rgba(var(--blue), 0.25) !important;
}

.hover-blue-brdr:hover {
  border-color: rgba(var(--blue), 1) !important;
}

.hover-blue-o75-brdr:hover {
  border-color: rgba(var(--blue), 0.75) !important;
}

.hover-blue-o50-brdr:hover {
  border-color: rgba(var(--blue), 0.5) !important;
}

.hover-blue-o25-brdr:hover {
  border-color: rgba(var(--blue), 0.25) !important;
}

/*==============================================< active*/
.active-blue-c.active {
  color: rgba(var(--blue), 1) !important;
}

.active-blue-o75-c.active {
  color: rgba(var(--blue), 0.75) !important;
}

.active-blue-o50-c.active {
  color: rgba(var(--blue), 0.5) !important;
}

.active-blue-o25-c.active {
  color: rgba(var(--blue), 0.25) !important;
}

.active-blue-bg.active {
  background-color: rgba(var(--blue), 1) !important;
}

.active-blue-o75-bg.active {
  background-color: rgba(var(--blue), 0.75) !important;
}

.active-blue-o50-bg.active {
  background-color: rgba(var(--blue), 0.5) !important;
}

.active-blue-o25-bg.active {
  background-color: rgba(var(--blue), 0.25) !important;
}

.active-blue-brdr.active {
  border-color: rgba(var(--blue), 1) !important;
}

.active-blue-o75-brdr.active {
  border-color: rgba(var(--blue), 0.75) !important;
}

.active-blue-o50-brdr.active {
  border-color: rgba(var(--blue), 0.5) !important;
}

.active-blue-o25-brdr.active {
  border-color: rgba(var(--blue), 0.25) !important;
}

/*==============================================< focus*/
.focus-blue-c:focus {
  color: rgba(var(--blue), 1) !important;
}

.focus-blue-o75-c:focus {
  color: rgba(var(--blue), 0.75) !important;
}

.focus-blue-o50-c:focus {
  color: rgba(var(--blue), 0.5) !important;
}

.focus-blue-o25-c:focus {
  color: rgba(var(--blue), 0.25) !important;
}

.focus-blue-bg:focus {
  background-color: rgba(var(--blue), 1) !important;
}

.focus-blue-o75-bg:focus {
  background-color: rgba(var(--blue), 0.75) !important;
}

.focus-blue-o50-bg:focus {
  background-color: rgba(var(--blue), 0.5) !important;
}

.focus-blue-o25-bg:focus {
  background-color: rgba(var(--blue), 0.25) !important;
}

.focus-blue-brdr:focus {
  border-color: rgba(var(--blue), 1) !important;
}

.focus-blue-o75-brdr:focus {
  border-color: rgba(var(--blue), 0.75) !important;
}

.focus-blue-o50-brdr:focus {
  border-color: rgba(var(--blue), 0.5) !important;
}

.focus-blue-o25-brdr:focus {
  border-color: rgba(var(--blue), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-blue-c[disabled] {
  color: rgba(var(--blue), 1) !important;
}

.disabled-blue-o75-c[disabled] {
  color: rgba(var(--blue), 0.75) !important;
}

.disabled-blue-o50-c[disabled] {
  color: rgba(var(--blue), 0.5) !important;
}

.disabled-blue-o25-c[disabled] {
  color: rgba(var(--blue), 0.25) !important;
}

.disabled-blue-bg[disabled] {
  background-color: rgba(var(--blue), 1) !important;
}

.disabled-blue-o75-bg[disabled] {
  background-color: rgba(var(--blue), 0.75) !important;
}

.disabled-blue-o50-bg[disabled] {
  background-color: rgba(var(--blue), 0.5) !important;
}

.disabled-blue-o25-bg[disabled] {
  background-color: rgba(var(--blue), 0.25) !important;
}

.disabled-blue-brdr[disabled] {
  border-color: rgba(var(--blue), 1) !important;
}

.disabled-blue-o75-brdr[disabled] {
  border-color: rgba(var(--blue), 0.75) !important;
}

.disabled-blue-o50-brdr[disabled] {
  border-color: rgba(var(--blue), 0.5) !important;
}

.disabled-blue-o25-brdr[disabled] {
  border-color: rgba(var(--blue), 0.25) !important;
}

/*============================================================================================< purple */
/*==============================================< norm*/
.purple-c {
  color: rgba(var(--purple), 1) !important;
}

.purple-o75-c {
  color: rgba(var(--purple), 0.75) !important;
}

.purple-o50-c {
  color: rgba(var(--purple), 0.5) !important;
}

.purple-o25-c {
  color: rgba(var(--purple), 0.25) !important;
}

.purple-bg {
  background-color: rgba(var(--purple), 1) !important;
}

.purple-o75-bg {
  background-color: rgba(var(--purple), 0.75) !important;
}

.purple-o50-bg {
  background-color: rgba(var(--purple), 0.5) !important;
}

.purple-o25-bg {
  background-color: rgba(var(--purple), 0.25) !important;
}

.purple-brdr {
  border-color: rgba(var(--purple), 1) !important;
}

.purple-o75-brdr {
  border-color: rgba(var(--purple), 0.75) !important;
}

.purple-o50-brdr {
  border-color: rgba(var(--purple), 0.5) !important;
}

.purple-o25-brdr {
  border-color: rgba(var(--purple), 0.25) !important;
}

/*==============================================< hover*/
.hover-purple-c:hover {
  color: rgba(var(--purple), 1) !important;
}

.hover-purple-o75-c:hover {
  color: rgba(var(--purple), 0.75) !important;
}

.hover-purple-o50-c:hover {
  color: rgba(var(--purple), 0.5) !important;
}

.hover-purple-o25-c:hover {
  color: rgba(var(--purple), 0.25) !important;
}

.hover-purple-bg:hover {
  background-color: rgba(var(--purple), 1) !important;
}

.hover-purple-o75-bg:hover {
  background-color: rgba(var(--purple), 0.75) !important;
}

.hover-purple-o50-bg:hover {
  background-color: rgba(var(--purple), 0.5) !important;
}

.hover-purple-o25-bg:hover {
  background-color: rgba(var(--purple), 0.25) !important;
}

.hover-purple-brdr:hover {
  border-color: rgba(var(--purple), 1) !important;
}

.hover-purple-o75-brdr:hover {
  border-color: rgba(var(--purple), 0.75) !important;
}

.hover-purple-o50-brdr:hover {
  border-color: rgba(var(--purple), 0.5) !important;
}

.hover-purple-o25-brdr:hover {
  border-color: rgba(var(--purple), 0.25) !important;
}

/*==============================================< active*/
.active-purple-c.active {
  color: rgba(var(--purple), 1) !important;
}

.active-purple-o75-c.active {
  color: rgba(var(--purple), 0.75) !important;
}

.active-purple-o50-c.active {
  color: rgba(var(--purple), 0.5) !important;
}

.active-purple-o25-c.active {
  color: rgba(var(--purple), 0.25) !important;
}

.active-purple-bg.active {
  background-color: rgba(var(--purple), 1) !important;
}

.active-purple-o75-bg.active {
  background-color: rgba(var(--purple), 0.75) !important;
}

.active-purple-o50-bg.active {
  background-color: rgba(var(--purple), 0.5) !important;
}

.active-purple-o25-bg.active {
  background-color: rgba(var(--purple), 0.25) !important;
}

.active-purple-brdr.active {
  border-color: rgba(var(--purple), 1) !important;
}

.active-purple-o75-brdr.active {
  border-color: rgba(var(--purple), 0.75) !important;
}

.active-purple-o50-brdr.active {
  border-color: rgba(var(--purple), 0.5) !important;
}

.active-purple-o25-brdr.active {
  border-color: rgba(var(--purple), 0.25) !important;
}

/*==============================================< focus*/
.focus-purple-c:focus {
  color: rgba(var(--purple), 1) !important;
}

.focus-purple-o75-c:focus {
  color: rgba(var(--purple), 0.75) !important;
}

.focus-purple-o50-c:focus {
  color: rgba(var(--purple), 0.5) !important;
}

.focus-purple-o25-c:focus {
  color: rgba(var(--purple), 0.25) !important;
}

.focus-purple-bg:focus {
  background-color: rgba(var(--purple), 1) !important;
}

.focus-purple-o75-bg:focus {
  background-color: rgba(var(--purple), 0.75) !important;
}

.focus-purple-o50-bg:focus {
  background-color: rgba(var(--purple), 0.5) !important;
}

.focus-purple-o25-bg:focus {
  background-color: rgba(var(--purple), 0.25) !important;
}

.focus-purple-brdr:focus {
  border-color: rgba(var(--purple), 1) !important;
}

.focus-purple-o75-brdr:focus {
  border-color: rgba(var(--purple), 0.75) !important;
}

.focus-purple-o50-brdr:focus {
  border-color: rgba(var(--purple), 0.5) !important;
}

.focus-purple-o25-brdr:focus {
  border-color: rgba(var(--purple), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-purple-c[disabled] {
  color: rgba(var(--purple), 1) !important;
}

.disabled-purple-o75-c[disabled] {
  color: rgba(var(--purple), 0.75) !important;
}

.disabled-purple-o50-c[disabled] {
  color: rgba(var(--purple), 0.5) !important;
}

.disabled-purple-o25-c[disabled] {
  color: rgba(var(--purple), 0.25) !important;
}

.disabled-purple-bg[disabled] {
  background-color: rgba(var(--purple), 1) !important;
}

.disabled-purple-o75-bg[disabled] {
  background-color: rgba(var(--purple), 0.75) !important;
}

.disabled-purple-o50-bg[disabled] {
  background-color: rgba(var(--purple), 0.5) !important;
}

.disabled-purple-o25-bg[disabled] {
  background-color: rgba(var(--purple), 0.25) !important;
}

.disabled-purple-brdr[disabled] {
  border-color: rgba(var(--purple), 1) !important;
}

.disabled-purple-o75-brdr[disabled] {
  border-color: rgba(var(--purple), 0.75) !important;
}

.disabled-purple-o50-brdr[disabled] {
  border-color: rgba(var(--purple), 0.5) !important;
}

.disabled-purple-o25-brdr[disabled] {
  border-color: rgba(var(--purple), 0.25) !important;
}

/*============================================================================================< indigo */
/*==============================================< norm*/
.indigo-c {
  color: rgba(var(--indigo), 1) !important;
}

.indigo-o75-c {
  color: rgba(var(--indigo), 0.75) !important;
}

.indigo-o50-c {
  color: rgba(var(--indigo), 0.5) !important;
}

.indigo-o25-c {
  color: rgba(var(--indigo), 0.25) !important;
}

.indigo-bg {
  background-color: rgba(var(--indigo), 1) !important;
}

.indigo-o75-bg {
  background-color: rgba(var(--indigo), 0.75) !important;
}

.indigo-o50-bg {
  background-color: rgba(var(--indigo), 0.5) !important;
}

.indigo-o25-bg {
  background-color: rgba(var(--indigo), 0.25) !important;
}

.indigo-brdr {
  border-color: rgba(var(--indigo), 1) !important;
}

.indigo-o75-brdr {
  border-color: rgba(var(--indigo), 0.75) !important;
}

.indigo-o50-brdr {
  border-color: rgba(var(--indigo), 0.5) !important;
}

.indigo-o25-brdr {
  border-color: rgba(var(--indigo), 0.25) !important;
}

/*==============================================< hover*/
.hover-indigo-c:hover {
  color: rgba(var(--indigo), 1) !important;
}

.hover-indigo-o75-c:hover {
  color: rgba(var(--indigo), 0.75) !important;
}

.hover-indigo-o50-c:hover {
  color: rgba(var(--indigo), 0.5) !important;
}

.hover-indigo-o25-c:hover {
  color: rgba(var(--indigo), 0.25) !important;
}

.hover-indigo-bg:hover {
  background-color: rgba(var(--indigo), 1) !important;
}

.hover-indigo-o75-bg:hover {
  background-color: rgba(var(--indigo), 0.75) !important;
}

.hover-indigo-o50-bg:hover {
  background-color: rgba(var(--indigo), 0.5) !important;
}

.hover-indigo-o25-bg:hover {
  background-color: rgba(var(--indigo), 0.25) !important;
}

.hover-indigo-brdr:hover {
  border-color: rgba(var(--indigo), 1) !important;
}

.hover-indigo-o75-brdr:hover {
  border-color: rgba(var(--indigo), 0.75) !important;
}

.hover-indigo-o50-brdr:hover {
  border-color: rgba(var(--indigo), 0.5) !important;
}

.hover-indigo-o25-brdr:hover {
  border-color: rgba(var(--indigo), 0.25) !important;
}

/*==============================================< active*/
.active-indigo-c.active {
  color: rgba(var(--indigo), 1) !important;
}

.active-indigo-o75-c.active {
  color: rgba(var(--indigo), 0.75) !important;
}

.active-indigo-o50-c.active {
  color: rgba(var(--indigo), 0.5) !important;
}

.active-indigo-o25-c.active {
  color: rgba(var(--indigo), 0.25) !important;
}

.active-indigo-bg.active {
  background-color: rgba(var(--indigo), 1) !important;
}

.active-indigo-o75-bg.active {
  background-color: rgba(var(--indigo), 0.75) !important;
}

.active-indigo-o50-bg.active {
  background-color: rgba(var(--indigo), 0.5) !important;
}

.active-indigo-o25-bg.active {
  background-color: rgba(var(--indigo), 0.25) !important;
}

.active-indigo-brdr.active {
  border-color: rgba(var(--indigo), 1) !important;
}

.active-indigo-o75-brdr.active {
  border-color: rgba(var(--indigo), 0.75) !important;
}

.active-indigo-o50-brdr.active {
  border-color: rgba(var(--indigo), 0.5) !important;
}

.active-indigo-o25-brdr.active {
  border-color: rgba(var(--indigo), 0.25) !important;
}

/*==============================================< focus*/
.focus-indigo-c:focus {
  color: rgba(var(--indigo), 1) !important;
}

.focus-indigo-o75-c:focus {
  color: rgba(var(--indigo), 0.75) !important;
}

.focus-indigo-o50-c:focus {
  color: rgba(var(--indigo), 0.5) !important;
}

.focus-indigo-o25-c:focus {
  color: rgba(var(--indigo), 0.25) !important;
}

.focus-indigo-bg:focus {
  background-color: rgba(var(--indigo), 1) !important;
}

.focus-indigo-o75-bg:focus {
  background-color: rgba(var(--indigo), 0.75) !important;
}

.focus-indigo-o50-bg:focus {
  background-color: rgba(var(--indigo), 0.5) !important;
}

.focus-indigo-o25-bg:focus {
  background-color: rgba(var(--indigo), 0.25) !important;
}

.focus-indigo-brdr:focus {
  border-color: rgba(var(--indigo), 1) !important;
}

.focus-indigo-o75-brdr:focus {
  border-color: rgba(var(--indigo), 0.75) !important;
}

.focus-indigo-o50-brdr:focus {
  border-color: rgba(var(--indigo), 0.5) !important;
}

.focus-indigo-o25-brdr:focus {
  border-color: rgba(var(--indigo), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-indigo-c[disabled] {
  color: rgba(var(--indigo), 1) !important;
}

.disabled-indigo-o75-c[disabled] {
  color: rgba(var(--indigo), 0.75) !important;
}

.disabled-indigo-o50-c[disabled] {
  color: rgba(var(--indigo), 0.5) !important;
}

.disabled-indigo-o25-c[disabled] {
  color: rgba(var(--indigo), 0.25) !important;
}

.disabled-indigo-bg[disabled] {
  background-color: rgba(var(--indigo), 1) !important;
}

.disabled-indigo-o75-bg[disabled] {
  background-color: rgba(var(--indigo), 0.75) !important;
}

.disabled-indigo-o50-bg[disabled] {
  background-color: rgba(var(--indigo), 0.5) !important;
}

.disabled-indigo-o25-bg[disabled] {
  background-color: rgba(var(--indigo), 0.25) !important;
}

.disabled-indigo-brdr[disabled] {
  border-color: rgba(var(--indigo), 1) !important;
}

.disabled-indigo-o75-brdr[disabled] {
  border-color: rgba(var(--indigo), 0.75) !important;
}

.disabled-indigo-o50-brdr[disabled] {
  border-color: rgba(var(--indigo), 0.5) !important;
}

.disabled-indigo-o25-brdr[disabled] {
  border-color: rgba(var(--indigo), 0.25) !important;
}

/*============================================================================================< teal */
/*==============================================< norm*/
.teal-c {
  color: rgba(var(--teal), 1) !important;
}

.teal-o75-c {
  color: rgba(var(--teal), 0.75) !important;
}

.teal-o50-c {
  color: rgba(var(--teal), 0.5) !important;
}

.teal-o25-c {
  color: rgba(var(--teal), 0.25) !important;
}

.teal-bg {
  background-color: rgba(var(--teal), 1) !important;
}

.teal-o75-bg {
  background-color: rgba(var(--teal), 0.75) !important;
}

.teal-o50-bg {
  background-color: rgba(var(--teal), 0.5) !important;
}

.teal-o25-bg {
  background-color: rgba(var(--teal), 0.25) !important;
}

.teal-brdr {
  border-color: rgba(var(--teal), 1) !important;
}

.teal-o75-brdr {
  border-color: rgba(var(--teal), 0.75) !important;
}

.teal-o50-brdr {
  border-color: rgba(var(--teal), 0.5) !important;
}

.teal-o25-brdr {
  border-color: rgba(var(--teal), 0.25) !important;
}

/*==============================================< hover*/
.hover-teal-c:hover {
  color: rgba(var(--teal), 1) !important;
}

.hover-teal-o75-c:hover {
  color: rgba(var(--teal), 0.75) !important;
}

.hover-teal-o50-c:hover {
  color: rgba(var(--teal), 0.5) !important;
}

.hover-teal-o25-c:hover {
  color: rgba(var(--teal), 0.25) !important;
}

.hover-teal-bg:hover {
  background-color: rgba(var(--teal), 1) !important;
}

.hover-teal-o75-bg:hover {
  background-color: rgba(var(--teal), 0.75) !important;
}

.hover-teal-o50-bg:hover {
  background-color: rgba(var(--teal), 0.5) !important;
}

.hover-teal-o25-bg:hover {
  background-color: rgba(var(--teal), 0.25) !important;
}

.hover-teal-brdr:hover {
  border-color: rgba(var(--teal), 1) !important;
}

.hover-teal-o75-brdr:hover {
  border-color: rgba(var(--teal), 0.75) !important;
}

.hover-teal-o50-brdr:hover {
  border-color: rgba(var(--teal), 0.5) !important;
}

.hover-teal-o25-brdr:hover {
  border-color: rgba(var(--teal), 0.25) !important;
}

/*==============================================< active*/
.active-teal-c.active {
  color: rgba(var(--teal), 1) !important;
}

.active-teal-o75-c.active {
  color: rgba(var(--teal), 0.75) !important;
}

.active-teal-o50-c.active {
  color: rgba(var(--teal), 0.5) !important;
}

.active-teal-o25-c.active {
  color: rgba(var(--teal), 0.25) !important;
}

.active-teal-bg.active {
  background-color: rgba(var(--teal), 1) !important;
}

.active-teal-o75-bg.active {
  background-color: rgba(var(--teal), 0.75) !important;
}

.active-teal-o50-bg.active {
  background-color: rgba(var(--teal), 0.5) !important;
}

.active-teal-o25-bg.active {
  background-color: rgba(var(--teal), 0.25) !important;
}

.active-teal-brdr.active {
  border-color: rgba(var(--teal), 1) !important;
}

.active-teal-o75-brdr.active {
  border-color: rgba(var(--teal), 0.75) !important;
}

.active-teal-o50-brdr.active {
  border-color: rgba(var(--teal), 0.5) !important;
}

.active-teal-o25-brdr.active {
  border-color: rgba(var(--teal), 0.25) !important;
}

/*==============================================< focus*/
.focus-teal-c:focus {
  color: rgba(var(--teal), 1) !important;
}

.focus-teal-o75-c:focus {
  color: rgba(var(--teal), 0.75) !important;
}

.focus-teal-o50-c:focus {
  color: rgba(var(--teal), 0.5) !important;
}

.focus-teal-o25-c:focus {
  color: rgba(var(--teal), 0.25) !important;
}

.focus-teal-bg:focus {
  background-color: rgba(var(--teal), 1) !important;
}

.focus-teal-o75-bg:focus {
  background-color: rgba(var(--teal), 0.75) !important;
}

.focus-teal-o50-bg:focus {
  background-color: rgba(var(--teal), 0.5) !important;
}

.focus-teal-o25-bg:focus {
  background-color: rgba(var(--teal), 0.25) !important;
}

.focus-teal-brdr:focus {
  border-color: rgba(var(--teal), 1) !important;
}

.focus-teal-o75-brdr:focus {
  border-color: rgba(var(--teal), 0.75) !important;
}

.focus-teal-o50-brdr:focus {
  border-color: rgba(var(--teal), 0.5) !important;
}

.focus-teal-o25-brdr:focus {
  border-color: rgba(var(--teal), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-teal-c[disabled] {
  color: rgba(var(--teal), 1) !important;
}

.disabled-teal-o75-c[disabled] {
  color: rgba(var(--teal), 0.75) !important;
}

.disabled-teal-o50-c[disabled] {
  color: rgba(var(--teal), 0.5) !important;
}

.disabled-teal-o25-c[disabled] {
  color: rgba(var(--teal), 0.25) !important;
}

.disabled-teal-bg[disabled] {
  background-color: rgba(var(--teal), 1) !important;
}

.disabled-teal-o75-bg[disabled] {
  background-color: rgba(var(--teal), 0.75) !important;
}

.disabled-teal-o50-bg[disabled] {
  background-color: rgba(var(--teal), 0.5) !important;
}

.disabled-teal-o25-bg[disabled] {
  background-color: rgba(var(--teal), 0.25) !important;
}

.disabled-teal-brdr[disabled] {
  border-color: rgba(var(--teal), 1) !important;
}

.disabled-teal-o75-brdr[disabled] {
  border-color: rgba(var(--teal), 0.75) !important;
}

.disabled-teal-o50-brdr[disabled] {
  border-color: rgba(var(--teal), 0.5) !important;
}

.disabled-teal-o25-brdr[disabled] {
  border-color: rgba(var(--teal), 0.25) !important;
}

/*============================================================================================< cyan */
/*==============================================< norm*/
.cyan-c {
  color: rgba(var(--cyan), 1) !important;
}

.cyan-o75-c {
  color: rgba(var(--cyan), 0.75) !important;
}

.cyan-o50-c {
  color: rgba(var(--cyan), 0.5) !important;
}

.cyan-o25-c {
  color: rgba(var(--cyan), 0.25) !important;
}

.cyan-bg {
  background-color: rgba(var(--cyan), 1) !important;
}

.cyan-o75-bg {
  background-color: rgba(var(--cyan), 0.75) !important;
}

.cyan-o50-bg {
  background-color: rgba(var(--cyan), 0.5) !important;
}

.cyan-o25-bg {
  background-color: rgba(var(--cyan), 0.25) !important;
}

.cyan-brdr {
  border-color: rgba(var(--cyan), 1) !important;
}

.cyan-o75-brdr {
  border-color: rgba(var(--cyan), 0.75) !important;
}

.cyan-o50-brdr {
  border-color: rgba(var(--cyan), 0.5) !important;
}

.cyan-o25-brdr {
  border-color: rgba(var(--cyan), 0.25) !important;
}

/*==============================================< hover*/
.hover-cyan-c:hover {
  color: rgba(var(--cyan), 1) !important;
}

.hover-cyan-o75-c:hover {
  color: rgba(var(--cyan), 0.75) !important;
}

.hover-cyan-o50-c:hover {
  color: rgba(var(--cyan), 0.5) !important;
}

.hover-cyan-o25-c:hover {
  color: rgba(var(--cyan), 0.25) !important;
}

.hover-cyan-bg:hover {
  background-color: rgba(var(--cyan), 1) !important;
}

.hover-cyan-o75-bg:hover {
  background-color: rgba(var(--cyan), 0.75) !important;
}

.hover-cyan-o50-bg:hover {
  background-color: rgba(var(--cyan), 0.5) !important;
}

.hover-cyan-o25-bg:hover {
  background-color: rgba(var(--cyan), 0.25) !important;
}

.hover-cyan-brdr:hover {
  border-color: rgba(var(--cyan), 1) !important;
}

.hover-cyan-o75-brdr:hover {
  border-color: rgba(var(--cyan), 0.75) !important;
}

.hover-cyan-o50-brdr:hover {
  border-color: rgba(var(--cyan), 0.5) !important;
}

.hover-cyan-o25-brdr:hover {
  border-color: rgba(var(--cyan), 0.25) !important;
}

/*==============================================< active*/
.active-cyan-c.active {
  color: rgba(var(--cyan), 1) !important;
}

.active-cyan-o75-c.active {
  color: rgba(var(--cyan), 0.75) !important;
}

.active-cyan-o50-c.active {
  color: rgba(var(--cyan), 0.5) !important;
}

.active-cyan-o25-c.active {
  color: rgba(var(--cyan), 0.25) !important;
}

.active-cyan-bg.active {
  background-color: rgba(var(--cyan), 1) !important;
}

.active-cyan-o75-bg.active {
  background-color: rgba(var(--cyan), 0.75) !important;
}

.active-cyan-o50-bg.active {
  background-color: rgba(var(--cyan), 0.5) !important;
}

.active-cyan-o25-bg.active {
  background-color: rgba(var(--cyan), 0.25) !important;
}

.active-cyan-brdr.active {
  border-color: rgba(var(--cyan), 1) !important;
}

.active-cyan-o75-brdr.active {
  border-color: rgba(var(--cyan), 0.75) !important;
}

.active-cyan-o50-brdr.active {
  border-color: rgba(var(--cyan), 0.5) !important;
}

.active-cyan-o25-brdr.active {
  border-color: rgba(var(--cyan), 0.25) !important;
}

/*==============================================< focus*/
.focus-cyan-c:focus {
  color: rgba(var(--cyan), 1) !important;
}

.focus-cyan-o75-c:focus {
  color: rgba(var(--cyan), 0.75) !important;
}

.focus-cyan-o50-c:focus {
  color: rgba(var(--cyan), 0.5) !important;
}

.focus-cyan-o25-c:focus {
  color: rgba(var(--cyan), 0.25) !important;
}

.focus-cyan-bg:focus {
  background-color: rgba(var(--cyan), 1) !important;
}

.focus-cyan-o75-bg:focus {
  background-color: rgba(var(--cyan), 0.75) !important;
}

.focus-cyan-o50-bg:focus {
  background-color: rgba(var(--cyan), 0.5) !important;
}

.focus-cyan-o25-bg:focus {
  background-color: rgba(var(--cyan), 0.25) !important;
}

.focus-cyan-brdr:focus {
  border-color: rgba(var(--cyan), 1) !important;
}

.focus-cyan-o75-brdr:focus {
  border-color: rgba(var(--cyan), 0.75) !important;
}

.focus-cyan-o50-brdr:focus {
  border-color: rgba(var(--cyan), 0.5) !important;
}

.focus-cyan-o25-brdr:focus {
  border-color: rgba(var(--cyan), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-cyan-c[disabled] {
  color: rgba(var(--cyan), 1) !important;
}

.disabled-cyan-o75-c[disabled] {
  color: rgba(var(--cyan), 0.75) !important;
}

.disabled-cyan-o50-c[disabled] {
  color: rgba(var(--cyan), 0.5) !important;
}

.disabled-cyan-o25-c[disabled] {
  color: rgba(var(--cyan), 0.25) !important;
}

.disabled-cyan-bg[disabled] {
  background-color: rgba(var(--cyan), 1) !important;
}

.disabled-cyan-o75-bg[disabled] {
  background-color: rgba(var(--cyan), 0.75) !important;
}

.disabled-cyan-o50-bg[disabled] {
  background-color: rgba(var(--cyan), 0.5) !important;
}

.disabled-cyan-o25-bg[disabled] {
  background-color: rgba(var(--cyan), 0.25) !important;
}

.disabled-cyan-brdr[disabled] {
  border-color: rgba(var(--cyan), 1) !important;
}

.disabled-cyan-o75-brdr[disabled] {
  border-color: rgba(var(--cyan), 0.75) !important;
}

.disabled-cyan-o50-brdr[disabled] {
  border-color: rgba(var(--cyan), 0.5) !important;
}

.disabled-cyan-o25-brdr[disabled] {
  border-color: rgba(var(--cyan), 0.25) !important;
}

/*============================================================================================< pink */
/*==============================================< norm*/
.pink-c {
  color: rgba(var(--pink), 1) !important;
}

.pink-o75-c {
  color: rgba(var(--pink), 0.75) !important;
}

.pink-o50-c {
  color: rgba(var(--pink), 0.5) !important;
}

.pink-o25-c {
  color: rgba(var(--pink), 0.25) !important;
}

.pink-bg {
  background-color: rgba(var(--pink), 1) !important;
}

.pink-o75-bg {
  background-color: rgba(var(--pink), 0.75) !important;
}

.pink-o50-bg {
  background-color: rgba(var(--pink), 0.5) !important;
}

.pink-o25-bg {
  background-color: rgba(var(--pink), 0.25) !important;
}

.pink-brdr {
  border-color: rgba(var(--pink), 1) !important;
}

.pink-o75-brdr {
  border-color: rgba(var(--pink), 0.75) !important;
}

.pink-o50-brdr {
  border-color: rgba(var(--pink), 0.5) !important;
}

.pink-o25-brdr {
  border-color: rgba(var(--pink), 0.25) !important;
}

/*==============================================< hover*/
.hover-pink-c:hover {
  color: rgba(var(--pink), 1) !important;
}

.hover-pink-o75-c:hover {
  color: rgba(var(--pink), 0.75) !important;
}

.hover-pink-o50-c:hover {
  color: rgba(var(--pink), 0.5) !important;
}

.hover-pink-o25-c:hover {
  color: rgba(var(--pink), 0.25) !important;
}

.hover-pink-bg:hover {
  background-color: rgba(var(--pink), 1) !important;
}

.hover-pink-o75-bg:hover {
  background-color: rgba(var(--pink), 0.75) !important;
}

.hover-pink-o50-bg:hover {
  background-color: rgba(var(--pink), 0.5) !important;
}

.hover-pink-o25-bg:hover {
  background-color: rgba(var(--pink), 0.25) !important;
}

.hover-pink-brdr:hover {
  border-color: rgba(var(--pink), 1) !important;
}

.hover-pink-o75-brdr:hover {
  border-color: rgba(var(--pink), 0.75) !important;
}

.hover-pink-o50-brdr:hover {
  border-color: rgba(var(--pink), 0.5) !important;
}

.hover-pink-o25-brdr:hover {
  border-color: rgba(var(--pink), 0.25) !important;
}

/*==============================================< active*/
.active-pink-c.active {
  color: rgba(var(--pink), 1) !important;
}

.active-pink-o75-c.active {
  color: rgba(var(--pink), 0.75) !important;
}

.active-pink-o50-c.active {
  color: rgba(var(--pink), 0.5) !important;
}

.active-pink-o25-c.active {
  color: rgba(var(--pink), 0.25) !important;
}

.active-pink-bg.active {
  background-color: rgba(var(--pink), 1) !important;
}

.active-pink-o75-bg.active {
  background-color: rgba(var(--pink), 0.75) !important;
}

.active-pink-o50-bg.active {
  background-color: rgba(var(--pink), 0.5) !important;
}

.active-pink-o25-bg.active {
  background-color: rgba(var(--pink), 0.25) !important;
}

.active-pink-brdr.active {
  border-color: rgba(var(--pink), 1) !important;
}

.active-pink-o75-brdr.active {
  border-color: rgba(var(--pink), 0.75) !important;
}

.active-pink-o50-brdr.active {
  border-color: rgba(var(--pink), 0.5) !important;
}

.active-pink-o25-brdr.active {
  border-color: rgba(var(--pink), 0.25) !important;
}

/*==============================================< focus*/
.focus-pink-c:focus {
  color: rgba(var(--pink), 1) !important;
}

.focus-pink-o75-c:focus {
  color: rgba(var(--pink), 0.75) !important;
}

.focus-pink-o50-c:focus {
  color: rgba(var(--pink), 0.5) !important;
}

.focus-pink-o25-c:focus {
  color: rgba(var(--pink), 0.25) !important;
}

.focus-pink-bg:focus {
  background-color: rgba(var(--pink), 1) !important;
}

.focus-pink-o75-bg:focus {
  background-color: rgba(var(--pink), 0.75) !important;
}

.focus-pink-o50-bg:focus {
  background-color: rgba(var(--pink), 0.5) !important;
}

.focus-pink-o25-bg:focus {
  background-color: rgba(var(--pink), 0.25) !important;
}

.focus-pink-brdr:focus {
  border-color: rgba(var(--pink), 1) !important;
}

.focus-pink-o75-brdr:focus {
  border-color: rgba(var(--pink), 0.75) !important;
}

.focus-pink-o50-brdr:focus {
  border-color: rgba(var(--pink), 0.5) !important;
}

.focus-pink-o25-brdr:focus {
  border-color: rgba(var(--pink), 0.25) !important;
}

/*==============================================< disabled*/
.disabled-pink-c[disabled] {
  color: rgba(var(--pink), 1) !important;
}

.disabled-pink-o75-c[disabled] {
  color: rgba(var(--pink), 0.75) !important;
}

.disabled-pink-o50-c[disabled] {
  color: rgba(var(--pink), 0.5) !important;
}

.disabled-pink-o25-c[disabled] {
  color: rgba(var(--pink), 0.25) !important;
}

.disabled-pink-bg[disabled] {
  background-color: rgba(var(--pink), 1) !important;
}

.disabled-pink-o75-bg[disabled] {
  background-color: rgba(var(--pink), 0.75) !important;
}

.disabled-pink-o50-bg[disabled] {
  background-color: rgba(var(--pink), 0.5) !important;
}

.disabled-pink-o25-bg[disabled] {
  background-color: rgba(var(--pink), 0.25) !important;
}

.disabled-pink-brdr[disabled] {
  border-color: rgba(var(--pink), 1) !important;
}

.disabled-pink-o75-brdr[disabled] {
  border-color: rgba(var(--pink), 0.75) !important;
}

.disabled-pink-o50-brdr[disabled] {
  border-color: rgba(var(--pink), 0.5) !important;
}

.disabled-pink-o25-brdr[disabled] {
  border-color: rgba(var(--pink), 0.25) !important;
}

/*============================================================================================< inherit */
/*==============================================< norm*/
.inherit-c {
  color: inherit !important;
}

.inherit-bg {
  background-color: inherit !important;
}

.inherit-brdr {
  border-color: inherit !important;
}

/*==============================================< hover*/
.hover-inherit-c:hover {
  color: inherit !important;
}

.hover-inherit-bg:hover {
  background-color: inherit !important;
}

.hover-inherit-brdr:hover {
  border-color: inherit !important;
}

/*==============================================< active*/
.active-inherit-c.active {
  color: inherit !important;
}

.active-inherit-bg.active {
  background-color: inherit !important;
}

.active-inherit-brdr.active {
  border-color: inherit !important;
}

/*==============================================< focus*/
.focus-inherit-c:focus {
  color: inherit !important;
}

.focus-inherit-bg:focus {
  background-color: inherit !important;
}

.focus-inherit-brdr:focus {
  border-color: inherit !important;
}

/*==============================================< disabled*/
.disabled-inherit-c[disabled] {
  color: inherit !important;
}

.disabled-inherit-bg[disabled] {
  background-color: inherit !important;
}

.disabled-inherit-brdr[disabled] {
  border-color: inherit !important;
}

/*==============================================< placeholder*/
.placeholder-inherit-c::-webkit-input-placeholder {
  color: inherit !important;
}

.placeholder-inherit-c::-ms-input-placeholder {
  color: inherit !important;
}

.placeholder-inherit-c::-moz-input-placeholder {
  color: inherit !important;
}

.placeholder-inherit-c:-ms-input-placeholder {
  color: inherit !important;
}

.placeholder-inherit-c::placeholder {
  color: inherit !important;
}

/*============================================================================================< transparent */
/*==============================================< norm*/
.transparent-c {
  color: transparent !important;
}

.transparent-bg {
  background-color: transparent !important;
}

.transparent-brdr {
  border-color: transparent !important;
}

/*==============================================< hover*/
.hover-transparent-c:hover {
  color: transparent !important;
}

.hover-transparent-bg:hover {
  background-color: transparent !important;
}

.hover-transparent-brdr:hover {
  border-color: transparent !important;
}

/*==============================================< active*/
.active-transparent-c.active {
  color: transparent !important;
}

.active-transparent-bg.active {
  background-color: transparent !important;
}

.active-transparent-brdr.active {
  border-color: transparent !important;
}

/*==============================================< focus*/
.focus-transparent-c:focus {
  color: transparent !important;
}

.focus-transparent-bg:focus {
  background-color: transparent !important;
}

.focus-transparent-brdr:focus {
  border-color: transparent !important;
}

/*==============================================< disabled*/
.disabled-transparent-c[disabled] {
  color: transparent !important;
}

.disabled-transparent-bg[disabled] {
  background-color: transparent !important;
}

.disabled-transparent-brdr[disabled] {
  border-color: transparent !important;
}

/*==============================================< placeholder*/
.placeholder-transparent-c::-webkit-input-placeholder {
  color: transparent !important;
}

.placeholder-transparent-c::-ms-input-placeholder {
  color: transparent !important;
}

.placeholder-transparent-c::-moz-input-placeholder {
  color: transparent !important;
}

.placeholder-transparent-c:-ms-input-placeholder {
  color: transparent !important;
}

.placeholder-transparent-c::placeholder {
  color: transparent !important;
}

/*==============================*/
.cursor-alias {
  cursor: alias !important;
}

.cursor-all-scroll {
  cursor: all-scroll !important;
}

.cursor-auto {
  cursor: auto !important;
}

.cursor-cell {
  cursor: cell !important;
}

.cursor-col-resize {
  cursor: col-resize !important;
}

.cursor-context-menu {
  cursor: context-menu !important;
}

.cursor-copy {
  cursor: copy !important;
}

.cursor-crosshair {
  cursor: crosshair !important;
}

.cursor-default {
  cursor: default !important;
}

.cursor-grab {
  cursor: grab !important;
}

.cursor-grabbing {
  cursor: grabbing !important;
}

.cursor-help {
  cursor: help !important;
}

.cursor-inherit {
  cursor: inherit !important;
}

.cursor-move {
  cursor: move !important;
}

.cursor-n-resize {
  cursor: n-resize !important;
}

.cursor-ne-resize {
  cursor: ne-resize !important;
}

.cursor-e-resize {
  cursor: e-resize !important;
}

.cursor-ew-resize {
  cursor: ew-resize !important;
}

.cursor-nesw-resize {
  cursor: nesw-resize !important;
}

.cursor-no-drop {
  cursor: no-drop !important;
}

.cursor-none {
  cursor: none !important;
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

.cursor-ns-resize {
  cursor: ns-resize !important;
}

.cursor-nw-resize {
  cursor: nw-resize !important;
}

.cursor-nwse-resize {
  cursor: nwse-resize !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.cursor-progress {
  cursor: progress !important;
}

.cursor-row-resize {
  cursor: row-resize !important;
}

.cursor-s-resize {
  cursor: s-resize !important;
}

.cursor-se-resize {
  cursor: se-resize !important;
}

.cursor-sw-resize {
  cursor: sw-resize !important;
}

.cursor-text {
  cursor: text !important;
}

.cursor-vertical-text {
  cursor: vertical-text !important;
}

.cursor-w-resize {
  cursor: w-resize !important;
}

.cursor-wait {
  cursor: wait !important;
}

.cursor-zoom-in {
  cursor: zoom-in !important;
}

.cursor-zoom-out {
  cursor: zoom-out !important;
}
:root {
  --ebhead-bg: rgba(var(--primary), 1);
  --ebhead-c: rgba(var(--white), 1);
  --ebhead-brdr: rgba(var(--primary), 1);

  --ebrow-bg: rgba(var(--white-black-100), 1);
  --ebrow-c: rgba(var(--white-black-35), 1);
  --ebrow-brdr: rgba(var(--white-black-95), 1);

  --ebrow-strip-bg: rgba(var(--white-black-95), 1);
  --ebrow-strip-c: rgba(var(--white-black-35), 1);
  --ebrow-strip-brdr: rgba(var(--white-black-90), 1);

  --ebrow-hover-bg: rgba(var(--white-black-90), 1);
  --ebrow-hover-c: rgba(var(--white-black-35), 1);
  --ebrow-hover-brdr: rgba(var(--white-black-85), 1);
}

.ebtable-container {
  display: block;
  overflow: auto;
  width: 100%;
}

.ebtable {
  width: 100%;
  display: table;
  table-layout: fixed;
  border-collapse: separate;
  empty-cells: show;
  border-spacing: 0.1rem;
}

.ebtable.responsive {
  table-layout: auto;
}

.ebtable.shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.075);
}

.ebtable.cards {
  box-shadow: none;
  border-spacing: 0.1rem 1.5rem;
}

.ebtable .ebtbody {
  display: table-row-group;
}

.ebtable .ebthead,
.ebtable .ebtrow {
  position: relative;
  display: table-row;
}

.ebtable .ebtcell {
  display: table-cell;
}

.ebtable .ebthead .ebtcell {
  padding: 0.75rem 0.5rem;
  width: 100%;
  word-break: break-all;
  word-wrap: break-word;
  overflow: hidden;
  text-align: start;
  font-weight: bold;
  color: var(--ebhead-c);
  background-color: var(--ebhead-bg);
  border: 1px solid transparent;
  border-bottom: 1px solid var(--ebhead-brdr);
}

.ebtable.bordered .ebthead .ebtcell {
  border: 1px solid var(--ebhead-brdr);
}

.ebtable .ebtbody .ebtrow .ebtcell {
  padding: 0.75rem 0.5rem;
  width: 100%;
  word-break: break-all;
  word-wrap: break-word;
  overflow: hidden;
  text-align: start;
  color: var(--ebrow-c);
  background-color: var(--ebrow-bg);
  border: 1px solid transparent;
  border-bottom: 1px solid var(--ebrow-brdr);
}

.ebtable.bordered .ebtbody .ebtrow .ebtcell {
  border: 1px solid var(--ebrow-brdr);
}

.ebtable .ebtbody .ebtrow.bordered .ebtcell {
  border: 1px solid var(--ebrow-brdr);
}

.ebtable .ebthead.blend .ebtcell {
  color: var(--ebhead-bg);
  background-color: transparent;
  border: 1px solid transparent;
}

.ebtable .ebthead.bland {
  border: 1px solid var(--ebhead-brdr);
}

.ebtable .ebthead.bland .ebtcell {
  color: var(--ebhead-bg);
  background-color: var(--ebrow-bg);
  border: 1px solid var(--ebhead-brdr);
}

.ebtable .ebthead.bland .ebtcell:empty {
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}

.ebtable.cards .ebtbody .ebtrow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.075);
  margin-bottom: 10px;
  border-radius: 5px;
}

.ebtable .ebtbody .ebtrow,
.ebtable .ebtbody .ebtrow .ebtcell {
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}

.ebtable .ebthead .ebtcell.center,
.ebtable .ebtbody .ebtrow .ebtcell.center,
.ebtable .ebtcell.center {
  text-align: center;
}

.ebtable .ebthead .ebtcell,
.ebtable .ebtbody .ebtrow .ebtcell {
  position: sticky;
}

/* for css strip */
.ebtable.striped .ebtbody .ebtrow:nth-child(odd) .ebtcell {
  color: var(--ebrow-strip-c);
  background-color: var(--ebrow-strip-bg);
  border-bottom: 1px solid var(--ebrow-strip-brdr);
}

.ebtable.striped.bordered .ebtbody .ebtrow:nth-child(odd) .ebtcell {
  border: 1px solid var(--ebrow-strip-brdr);
}

/* hover effect */
.ebtable.hover .ebtbody .ebtrow:hover .ebtcell {
  color: var(--ebrow-hover-c);
  background-color: var(--ebrow-hover-bg);
  background: linear-gradient(var(--ebrow-strip-bg), var(--ebrow-hover-bg));
  border-bottom: 1px solid var(--ebrow-hover-brdr);
}

.ebtable.hover.bordered .ebtbody .ebtrow:hover .ebtcell {
  border: 1px solid var(--ebrow-hover-brdr);
}

/* blending */
.ebtable .ebthead .ebtcell.blend {
  color: var(--ebhead-bg);
  background-color: transparent !important;
  border: 1px solid transparent !important;
}

.ebtable .ebthead .ebtcell.bordered,
.ebtable .ebthead.blend .ebtcell.bordered,
.ebtable .ebthead.bland .ebtcell.bordered {
  border: 1px solid var(--ebhead-brdr);
}

/* stick */
.ebtable .ebthead .ebtcell.sticky,
.ebtable .ebtbody .ebtrow .ebtcell.sticky {
  left: 0;
  right: 0;
}

/* compact */
.ebtable .ebthead.compact .ebtcell {
  padding: 0.5rem 0.25rem;
}
#ebloader {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--dark), 0.25) !important;
  z-index: 999999 !important;
}

#ebloader * {
  background-color: transparent !important;
}

html.ebloader {
  overflow: hidden !important;
}

#ebloader::after {
  content: "";
  display: inline;
  margin: auto;
  border: 5vmin solid rgba(var(--white), 1) !important;
  border-top: 5vmin solid rgba(var(--primary), 1) !important;
  border-radius: 100%;
  width: 0;
  height: 0;
  /*safari*/
  -webkit-animation: ebloader 2s linear infinite;
  -moz-animation: ebloader 2s linear infinite;
  -ms-animation: ebloader 2s linear infinite;
  -o-animation: ebloader 2s linear infinite;
  animation: ebloader 2s linear infinite;
}

@-webkit-keyframes ebloader {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes ebloader {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-ms-keyframes ebloader {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes ebloader {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes ebloader {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.ebnav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: rgba(var(--white), 1);
  border: 1px solid rgba(var(--gray), 0.25);
  border-bottom: 2px solid rgba(var(--gray), 0.25);
  justify-content: start;
  align-items: center;
  align-content: center;
  padding: 0;
  margin: 0;

  width: 100%;
  height: auto;

  overflow: visible;
}

.ebnav.wrap {
  flex-wrap: wrap;
}

.ebnav .ebnav {
  width: max-content;
  height: auto;
}

.ebnav .ebnav-link,
.ebnav .ebnav-text,
.ebnav .ebnav-btn,
.ebnav .ebnav-breadcrumbs,
.ebnav .ebnav-dropdown .ebnav-dropdown-link {
  margin: 0.1rem;
  padding: 0.75rem;
  text-decoration: none;
  overflow: hidden;
}

.ebnav .ebnav-link *,
.ebnav .ebnav-text *,
.ebnav .ebnav-btn *,
.ebnav .ebnav-breadcrumbs *,
.ebnav .ebnav-dropdown .ebnav-dropdown-link * {
  vertical-align: middle;
}

.ebnav .ebnav-breadcrumb {
  display: inline-flex;
  flex-direction: row;
  width: max-content;
  height: auto;
  justify-content: start;
  align-items: center;
  align-content: center;
}

.ebnav .ebnav-breadcrumb .ebnav-link {
  padding: 0.5rem;
}

.ebnav .ebnav-breadcrumb .ebnav-link:not(:last-child):after {
  padding-inline-start: 0.75rem;
  content: "/";
}

.ebnav .ebnav-breadcrumb .ebnav-link:last-child {
  opacity: 1;
}

.ebnav .ebnav-breadcrumb .ebnav-link:first-child {
  padding-inline-start: 0.75rem;
}

.ebnav .ebnav-breadcrumb .ebnav-link:last-child {
  padding-inline-end: 0.75rem;
}

.ebnav .ebnav-dropdown {
  position: relative;
  flex-direction: column;
  overflow: visible;
}

.ebnav .ebnav-dropdown .ebnav-dropdown-list {
  display: none;
  position: absolute;
  flex-direction: column;
  width: auto;
  height: auto;
  min-width: max-content;
  min-height: max-content;
  background-color: rgba(var(--white), 1);
  border: 1px solid rgba(var(--gray), 0.25);
  justify-content: center;
  align-items: stretch;
  align-content: start;
  z-index: 9000;
}

.ebnav .ebnav-dropdown .ebnav-dropdown-link:focus ~ .ebnav-dropdown-list,
.ebnav .ebnav-dropdown .ebnav-dropdown-list:hover,
.ebnav .ebnav-dropdown .ebnav-dropdown-list *:hover > .ebnav-dropdown-list,
.ebnav .ebnav-dropdown .ebnav-dropdown-list:focus,
.ebnav .ebnav-dropdown .ebnav-dropdown-list *:focus > .ebnav-dropdown-list {
  display: flex;
}

.ebnav .ebnav-image {
  padding: 0.25rem 0.75rem;
}

.ebnav .ebnav-divider {
  margin: 0 0.75rem;
}

.ebnav .ebnav-divider {
  align-self: stretch;
  border-left: 1px solid rgba(var(--gray), 0.25);
  border-bottom: 1px solid rgba(var(--gray), 0.25);
}

.ebnav .ebnav-space {
  flex: 1 1 0;
}

/*nav trees*/
.ebnav-container {
  display: inline-flex;
  flex-direction: column;
  background-color: rgba(var(--white), 1);
  border: 1px solid rgba(var(--gray), 0.25);
  border-bottom: 2px solid rgba(var(--gray), 0.25);
  justify-content: start;
  align-items: start;
  align-content: start;
  padding: 0;
  margin: 0;

  width: 100%;
  height: auto;

  overflow: visible;
}

.ebnav-container .ebnav {
  border: none;
}

.ebnav-container .ebnav:not(:last-child) {
  border-bottom: 1px solid rgba(var(--gray), 0.25);
}

/* vertical */
.ebnav.vertical {
  width: auto;
  flex-direction: column;
}

.ebnav.vertical .ebnav-image {
  padding: 0.75rem 0.2rem;
}

.ebnav.vertical .ebnav-divider {
  margin: 0.75rem 0;
}

/*animation nav*/
.ebnav .ebnav-link,
.ebnav .ebnav-dropdown .ebnav-dropdown-link {
  border: 1px solid transparent;
  border-radius: 5px;

  opacity: 0.75;
  -webkit-transition: opacity 250ms linear !important;
  -moz-transition: opacity 250ms linear !important;
  -ms-transition: opacity 250ms linear !important;
  -o-transition: opacity 250ms linear !important;
  transition: opacity 250ms linear !important;
}

.ebnav .ebnav-link:hover,
.ebnav .ebnav-link.active,
.ebnav .ebnav-dropdown .ebnav-dropdown-link:hover,
.ebnav .ebnav-dropdown .ebnav-dropdown-link.active {
  opacity: 1;
}

/*border nav*/
.ebnav .ebnav-link.bordered,
.ebnav .ebnav-dropdown .ebnav-dropdown-link.bordered {
  border-color: currentColor;
}

/*styling nav*/
.ebnav-container.borderless,
.ebnav.borderless {
  border: none !important;
}

.ebnav.main-axis-start {
  justify-content: flex-start;
}

.ebnav.main-axis-center {
  justify-content: center;
}

.ebnav.main-axis-around {
  justify-content: space-around;
}

.ebnav.main-axis-between {
  justify-content: space-between;
}

.ebnav.main-axis-evenly {
  justify-content: space-evenly;
}

.ebnav.main-axis-end {
  justify-content: flex-end;
}

.ebnav.cross-axis-start {
  align-items: flex-start;
}

.ebnav.cross-axis-center {
  align-items: center;
}

.ebnav.cross-axis-stretch {
  align-items: stretch;
}

.ebnav.cross-axis-end {
  align-items: flex-end;
}
html.ebmodal-open {
  overflow: hidden;
}

.ebmodal {
  display: none;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
}

.ebmodal.show {
  display: flex;
}
.ebinput-dropdown {
  position: relative;
  flex-direction: column;
  overflow: visible;
}

.ebinput-dropdown .ebinput-dropdown-btn {
  margin: 5px;
  padding: 5px 12.5px;
  text-decoration: none;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 2.5px;
  min-width: 50px;
  cursor: pointer;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}

.ebinput-dropdown .ebinput-dropdown-btn::after {
  content: "";
  display: inline-block;
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 4px solid transparent !important;
  border-bottom: 2px solid transparent !important;
  border-left: 4px solid transparent !important;
  margin-inline-start: 5px;
}

.ebinput-dropdown .ebinput-dropdown-btn * {
  vertical-align: middle;
}

.ebinput-dropdown .ebinput-dropdown-list {
  display: none;
  position: absolute;
  flex-direction: column;
  width: auto;
  height: auto;
  min-width: max-content;
  min-height: max-content;
  background-color: rgba(var(--white), 1);
  border: 1px solid rgba(var(--gray), 0.25);
  justify-content: center;
  align-items: stretch;
  align-content: start;
  z-index: 9000;
  padding: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.ebinput-dropdown .ebinput-dropdown-list .ebinput-dropdown-item {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  align-content: start;
  padding: 5px 12.5px;
  min-width: 50px;
  cursor: pointer;
}

.ebinput-dropdown .ebinput-dropdown-list .ebinput-dropdown-item:hover {
  opacity: 1;
}

.ebinput-dropdown .ebinput-dropdown-list .ebinput-dropdown-item input {
  margin-inline-end: 10px;
}

.ebinput-dropdown .ebinput-dropdown-btn:focus ~ .ebinput-dropdown-list,
.ebinput-dropdown .ebinput-dropdown-list:hover,
.ebinput-dropdown .ebinput-dropdown-list *:hover > .ebinput-dropdown-list,
.ebinput-dropdown .ebinput-dropdown-list:focus,
.ebinput-dropdown .ebinput-dropdown-list *:focus > .ebinput-dropdown-list {
  display: flex;
}
[ebtab] {
  display: none;
}

[ebtab].show {
  display: block;
}