:root {
    --animate-duration: var(--animation-duration) !important;
    --animate-delay: var(--animation-duration) !important;
    --animate-repeat: 1 !important;
    color-scheme: var(--theme);
}

* {
    -webkit-transition: 
        background-color 0.25s ease,
        color 0.1s ease,
        border 0.25s ease,
        width var(--animation-duration) ease-in-out,
        height var(--animation-duration) ease-in-out;
    -moz-transition: 
        background-color 0.25s ease,
        color 0.1s ease,
        border 0.25s ease,
        width var(--animation-duration) ease-in-out,
        height var(--animation-duration) ease-in-out;
    -o-transition:
        background-color 25s ease,
        color 0.1s ease,
        border 25s.2s ease,
        width var(--animation-duration) ease-in-out,
        height var(--animation-duration) ease-in-out;
    transition:
        background-color 0.25s ease,
        color 0.1s ease,
        border 0.25s ease,
        width var(--animation-duration) ease-in-out,
        height var(--animation-duration) ease-in-out;
}

::-webkit-scrollbar {
    width: 0.75rem;
  }
  
/* Track */
::-webkit-scrollbar-track {
    background: var(--theme-color);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--theme-color-inverted);
    border-radius: 1rem;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

.red-text {
    color: var(--red-color) !important;
}

.red {
    background-color: var(--red-color) !important;
}

.white-text {
    color: #ffffff !important;
}

.green-text {
    color: var(--green-color) !important;
}

.green {
    background-color: var(--green-color) !important;
}

.grey-text {
    color: #666666 !important;
}

.grey {
    background-color: #66666677 !important;
}

.yellow-text {
    color: #aaaa00 !important;
}

.yellow {
    background-color: #aaaa00 !important;
}

.orange-text {
    color: #ff6700 !important;
}

.orange {
    background-color: #ff6700 !important;
}

header,
footer {
    background-color: var(--theme-color);
    color: var(--theme-text-color);
}

input[type="date"],
input[type="text"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea
{
    background-color: var(--theme-color-inverted) !important;
    color: var(--theme-text-color-inverted);
}


input[type="number"]:disabled,
input[type="text"]:disabled {
    background-color: var(--theme-color) !important;
    color: var(--theme-text-color);
}

input[type="radio"]:not(.chip) + label::before,
input[type="checkbox"]:not(.chip) + label::before {
    background-color: var(--theme-color-inverted);
}

input[type="checkbox"]:not(.chip):checked + label::before,
input[type="radio"].image-radio:checked + label::before {
    content: "\2714";

    background-color: var(--theme-color-inverted);
    color: var(--theme-text-color-inverted);
}

input[type="radio"]:not(.chip, .image-radio):checked + label::before {
    content: "\2022";

    background-color: var(--theme-color-inverted);
    color: var(--theme-text-color-inverted);
}

.chip-field label {
    border: 0.2rem solid var(--theme-color-inverted);
    color: var(--theme-text-color);
}

input.chip:checked + label {
    background-color: var(--theme-color-inverted);
    color: var(--theme-text-color-inverted);
}

input[type="date"].invalid-field,
input[type="text"].invalid-field,
input[type="number"].invalid-field,
input[type="password"].invalid-field,
input[type="email"].invalid-field,
input[type="tel"].invalid-field
{
    box-shadow: inset 0 0 1rem var(--red-color);
    background-color: #ffbfbf !important;
    color: var(--red-color);
}

.helper {
    color: var(--red-color);
    padding: 0.6rem 1.6rem;
    background-color: #ffbfbf !important;
    border-radius: 2.4rem;
    font-weight: bold !important;
}

input[type="date"].valid-field,
input[type="text"].valid-field,
input[type="number"].valid-field,
input[type="password"].valid-field,
input[type="email"].valid-field,
input[type="tel"].valid-field
{
    box-shadow: inset 0 0 0.75rem var(--green-color);
}

.btn:not(:disabled) {
    background-color: var(--theme-color-inverted);
    color: var(--theme-text-color-inverted);
}

.btn:not(:disabled):hover,
.btn:not(:disabled):focus {
    background-color: var(--theme-color) !important;
    color: var(--theme-text-color) !important;
}

.card,
.collapsible {
    background-color: var(--theme-color);
    color: var(--theme-text-color);

    -webkit-backdrop-filter: blur(2.5rem);
    backdrop-filter: blur(2.5rem);
}


.dialog-container {
    background-color: var(--background-color);
    color: var(--theme-text-color);
}


.menu-button {
    background-color: var(--theme-color) !important;
    color: var(--theme-text-color) !important;

    -webkit-backdrop-filter: blur(2.5rem);
    backdrop-filter: blur(2.5rem);
    background: linear-gradient(15deg, transparent, #000000);
}

.info-card {
    color: var(--theme-color-inverted);
}

.btn-flat,
.collapsible-header {
    background-color: transparent;
    color: var(--theme-color-inverted);
}

.btn-flat.facebook i {
    background-color: transparent;
    color: var(--facebook-color);
}

.btn-flat.linkedin i {
    background-color: transparent;
    color: var(--linkedin-color);
}
.content-container .btn-flat {
    background-color: var(--theme-color-inactive);
    color: var(--theme-text-color);
}

.tile:hover,
.btn-flat:hover,
.btn-flat:focus,
.collapsible-header:hover,
.collapsible-header:focus {
    background-color: var(--theme-color-inverted);
    color: var(--theme-text-color-inverted);
}

.btn-flat.facebook:hover,
.btn-flat.facebook:focus {
    background-color: var(--facebook-color);
    color: var(--facebook-text-color);
}

.btn-flat.facebook:hover i ,
.btn-flat.facebook:focus i {
    color: var(--facebook-text-color);
}

.btn-flat.linkedin:hover,
.btn-flat.linkedin:focus {
    background-color: var(--linkedin-color);
    color: var(--linkedin-text-color);
}

.btn-flat.linkedin:hover i ,
.btn-flat.linkedin:focus i {
    color: var(--linkedin-text-color);
}


input[type="radio"]:disabled + label,
button:disabled,
.btn:disabled,
.btn-flat:disabled {
    background-color: transparent !important;
    color: #00000055;
    color:var(--theme-text-color-disabled);
    cursor:not-allowed;
}

.btn-register {
    text-decoration: none;
    text-transform: uppercase;
    background-image: linear-gradient(to right, #ff9800 0%, #e5187d 90%);
    border-radius: 2.4rem;
}

.divider,
.divider-vertical {
    background-color: var(--theme-color-inverted);
}

.card .divider,
.card .divider-vertical {
    background-color: var(--theme-color-inverted);
    opacity: 0.5;
}

.sidemenu, aside {
    background-color: var(--theme-color);
    color: var(--theme-text-color);
}

.sidemenu a.active {
    background-color: var(--theme-color-inverted);
    color: var(--theme-text-color-inverted);
}

nav.sidemenu .sidemenu-header {
    border-bottom: 0.1rem solid var(--theme-color-inverted);
    background: linear-gradient(15deg, transparent, #000000);
}

.sidemenu .info-card {
    background-color: var(--theme-color);
    color: var(--theme-text-color);
}

a.btn,
a.btn-flat,
a.client-logo {
    text-decoration: none;
}

a {
    color: var(--theme-text-color);;
}

footer a{
    color: var(--theme-text-color);
}

.card a {
    color: var(--theme-color-inverted);
}

a.client-logo {
    color: var(--theme-text-color);
}

a.mailto {
    color: var(--theme-text-color);
}

.message-container {
    background: var(--theme-color-inverted);
    
    -webkit-backdrop-filter: blur(2.5rem);
    backdrop-filter: blur(2.5rem);
}

.message-container.error {
    box-shadow: inset 0 0 1rem 0.5rem var(--red-color);
}

.message-container.success {
    box-shadow: inset 0 0 1rem 0.5rem var(--green-color);
}

.message-container p,
.message-close-btn {
    color: var(--theme-text-color-inverted);
}

.copyright,
.powered-by {
    color: var(--theme-text-color-disabled);
}

.cookie-text {
    color: var(--theme-text-color);
}

tbody tr:not(:last-of-type) {
    border-bottom: 1pt solid var(--theme-text-color);
}

tr.highlight {
    background-color: var(--highlight-color);
}

tr.highlight .btn-flat{
    background-color: var(--theme-color-inverted);
    color: var(--theme-text-color-inverted);
}

tr.highlight .btn-flat:hover,
tr.highlight .btn-flat:focus {
    background-color: var(--theme-color);
    color: var(--theme-text-color);
}

.badge {
    color: var(--theme-text-color-inverted);
    background-color: var(--theme-color-inverted);
}

.btn-flat .collapsible-header .badge,
.btn-flat:hover .badge,
.collapsible[data-open="true"] .collapsible-header .badge,
.collapsible-header:hover .badge {
    color: var(--theme-text-color);
    background-color: var(--theme-text-color-inverted);
}

.outlined {
    border: 0.2rem solid var(--theme-color-inverted);
}

.loader {
    width: 100%;
    height: 0.5rem;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.loader::after {
    content: '';  
    width: 10rem;
    height: 0.5rem;
    border-radius: 2.4rem;
    background: var(--theme-color-inverted);
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    animation: hitZak 0.6s ease-in-out infinite alternate;
}

input[type='range'] {
    accent-color: var(--theme-color-inverted);
}

/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      border-radius: 2.4rem;
      -webkit-appearance: none;
      background-color: var(--theme-color-inverted);
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 1rem;
      -webkit-appearance: none;
      color: var(--theme-color-inverted);
    }
    
    input[type='range']::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 1rem;
      height: 1rem;
      color: var(--theme-color-inverted);
      box-shadow: -1rem 0 0 1rem var(--theme-color);
      border-radius: 2.4rem;
      cursor: ew-resize;
    }

}

input[type="range"]::-moz-range-progress {
  background-color: var(--theme-color);
}
input[type="range"]::-moz-range-track {  
  background-color: var(--theme-color-inverted);
}

input[type="range"]::-ms-fill-lower {
  background-color: var(--theme-color);
}
input[type="range"]::-ms-fill-upper {  
  background-color: var(--theme-color-inverted);
}
*/

@keyframes hitZak {
    0% {
        left: 0;
        transform: translateX(-1%);
    }
    100% {
        left: 100%;
        transform: translateX(-99%);
    }
}