html{ /* same as : html[data-theme='light'] */
  background-color: #ffffff;
  color: #000000;
  transition: background-color 0.3s, color 0.3s;
  }

html[data-theme='dark'] {
  background-color: #000000;
  color: #ffffff;
}

[data-theme='dark'] a:link {
  color: #0077EE;
}

[data-theme='dark'] a:visited {
  color: #8B1A89;
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding:6px;
}

td.error {
	color:#FF0000;
}


[data-theme='dark'] table, [data-theme='dark'] th, [data-theme='dark'] td {
  border: 1px solid white;
  border-collapse: collapse;
  padding:6px;
  color: #ffffff;
}


/* Apply background color to alternate rows */
tr:nth-child(even) {
    background-color: #f2f2f2; /* Light gray for even rows */
    color: #000000;
}
tr:nth-child(odd) {
    background-color: #ffffff; /* White for odd rows */
    color: #000000;
}

[data-theme='dark'] tr:nth-child(odd) {
    background-color: #000000;
    color: #ffffff;
}
[data-theme='dark'] tr:nth-child(even) {
    background-color: #323232; /* Dark gray for even rows */
    color: #ffffff;
}
[data-theme='dark'] textarea, [data-theme='dark'] input  {
    background-color: #323232; 
    color: #ffffff;
}

body {
  margin: 0;
  padding: 5px 15px 50px 15px;
   font-family:'Source Sans Pro', Arial, sans-serif;font-size:1.00rem
}


ul.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333333;
  display: flex;
}

ul.menu li a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

ul.menu li a:hover {
  background-color: #111111;
}



h2, ul, li, body {
  padding: 0;
  margin: 0;
}

div {
  background-color: #FEFEFE;
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
}

.breadcrumb > h2, ul {
  display: inline-flex;
  list-style: none;
  font-size: initial;
  color: #c3259b;
}

.breadcrumb ul > li + li {
  margin-left: 5px;
}

.breadcrumb ul > li a[href] {
  text-decoration: none;
  position: relative;
  font-weight: 400;
  color: c3259b;
  z-index: 0;
}

.breadcrumb ul > li a[href]:hover,
.breadcrumb ul > li a[href]:focus {
  color: #C41C87;
  outline: none;
}

.breadcrumb ul > li a[href]:hover:before,
.breadcrumb ul > li a[href]:focus:before{
  transform: skew(-3deg) rotate(-1deg);
  border-bottom: 3px solid #D6DBD2;
  left: -3px; right: 2px;
  position: absolute;
  bottom: -2px;
  content: "";
  z-index: -1;
}

.breadcrumb ul > li a:not([href]) {
  font-weight: bold;
  color: #c3259b;
}



/* https://cssloaders.github.io/ */
.loader {
        transform: rotateZ(45deg);
        perspective: 1000px;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        color: #8353FD;
      }
        .loader:before,
        .loader:after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: inherit;
          height: inherit;
          border-radius: 50%;
          transform: rotateX(70deg);
          animation: 1s spin linear infinite;
        }
        .loader:after {
          color: #E50053;
          transform: rotateY(70deg);
          animation-delay: .4s;
        }

      @keyframes rotate {
        0% {
          transform: translate(-50%, -50%) rotateZ(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotateZ(360deg);
        }
      }

      @keyframes rotateccw {
        0% {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotate(-360deg);
        }
      }

      @keyframes spin {
        0%,
        100% {
          box-shadow: .2em 0px 0 0px currentcolor;
        }
        12% {
          box-shadow: .2em .2em 0 0 currentcolor;
        }
        25% {
          box-shadow: 0 .2em 0 0px currentcolor;
        }
        37% {
          box-shadow: -.2em .2em 0 0 currentcolor;
        }
        50% {
          box-shadow: -.2em 0 0 0 currentcolor;
        }
        62% {
          box-shadow: -.2em -.2em 0 0 currentcolor;
        }
        75% {
          box-shadow: 0px -.2em 0 0 currentcolor;
        }
        87% {
          box-shadow: .2em -.2em 0 0 currentcolor;
        }
      }