.skin-footer-label {
  color: var(--brand-color);
  font-size: 0.75rem;
}

.skin-form-label {
  color: var(--brand-color);
}


.form-control:focus {
  border: 2px solid var(--brand-color);
}

input[type="radio"].skin-radio {
  position: relative;
  display: inline-block;
  border: 2px solid var(--brand-color);
}

input[type="radio"].skin-radio::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: transparent;
  transform: translate(-50%, -50%);
  transition: background-color 0.15s ease-in-out;
}

input[type="radio"].skin-radio:checked::before {
  background-color: var(--brand-color);
}

.skin-slider .option.selected {
  color: var(--brand-color);
}

.skin-range, .skin-range::-webkit-slider-thumb {
  background-color: #ededed;
}

.skin-range::-moz-range-thumb {
  background-color: var(--brand-color);
}

.skin-button {
  color: white;
  background-color: var(--brand-color);
  text-transform: uppercase;
  border-radius: 0.5rem;
  border-color: var(--brand-color);
}

.skin-button:hover {
  background-color: black;
  border-color: black;
}

.skin-link {
  color: var(--brand-color);
}

.skin-text {
  color: var(--brand-color);
}

.skin-link:hover {
  text-decoration: underline;
}

.skin-icon path.a,
.skin-icon path.b,
.skin-icon {
  fill: var(--brand-color);
  color: var(--brand-color);
}

.menu-option .menu-link .skin-icon path.a,
.menu-option .menu-link .skin-icon path.b,
.menu-option .menu-link .skin-icon {
  fill: white;
}

.menu-option--active .menu-link .skin-icon path.a,
.menu-option--active .menu-link .skin-icon path.b,
.menu-option--active .menu-link .skin-icon {
  fill: var(--brand-color);
}

.menu-option--active:hover .menu-link .skin-icon path.a,
.menu-option--active:hover .menu-link .skin-icon path.b,
.menu-option--active:hover .menu-link .skin-icon {
  fill: white;
}

.skin-button .skin-icon path.a,
.skin-button .skin-icon path.b,
.skin-button .skin-icon {
  fill: white;
}

.skin-icon-inactive path.a,
.skin-icon-inactive path.b,
.skin-icon-inactive {
  fill: white;
}

.skin-icon-black path.a,
.skin-icon-black path.b,
.skin-icon-black {
  fill: black;
}

.skin-icon-disabled path.a,
.skin-icon-disabled path.b,
.skin-icon-disabled {
  fill: #D2DBE5;
}

input.skin:focus {
  border: 2px solid var(--brand-color);
  outline: none;
}

input.skin:focus ~ .floating-label,
input.skin ~ .floating-label.not-empty,
select.skin:focus ~ .floating-label,
select.skin ~ .floating-label.not-empty {
  color: var(--brand-color);
}

.form-control:focus, .form-control--select:focus {
  border-color: var(--brand-color);
}

.skin-spinner {
  border-color: var(--brand-color);
}

.skin-select-profile .skin-username-circle {
  background-color: #6b7e95;
}

.skin-select-profile:hover .skin-username-circle {
  background-color: var(--brand-color);
}

.skin-current-profile-selector .skin-username-circle {
  background-color: var(--brand-color);
}

.skin-tab {
  border-color: var(--brand-color);
}

.skin-tab button.active {
  border-color: var(--brand-color);
}

.skin-menu-option:hover {
  background-color: var(--brand-color);
}


.submenu-option:hover:not(.submenu-option--active) {
  color: var(--brand-color);
}

.submenu-option:hover:not(.submenu-option--active) .secondary-text {
  color: var(--brand-color);
}

.skin-bg {
  background-color: var(--brand-color);
}

.skin-light-bg {
  background-color: var(--brand-light-color);
}

.skin-bg-contrast {
  background-color: var(--brand-contrast);
}

.skin-bg .skin-icon path.a,
.skin-bg .skin-icon path.b,
.skin-bg .skin-icon {
  fill: white;
  color: white;
}

.skin-shadow {
  box-shadow: 0 0 20px var(--brand-color);
}

.tag-filter .skin-icon path.a,
.tag-filter .skin-icon path.b,
.tag-filter .skin-icon {
  fill: white;
}

.tag-filter:hover .skin-icon path.a,
.tag-filter:hover .skin-icon path.b,
.tag-filter:hover .skin-icon {
  fill: var(--brand-color);
}

.skin-border {
  border-color: var(--brand-color);
}

.pagination {
  color: var(--brand-color);
}

.pagination-list p.active {
  color: var(--brand-color);
}

.pagination-list li a:hover {
  color: var(--brand-color);
}

.skin-hr {
  border-top: 1px solid var(--brand-color);
}

.skin-hr.is-bolder {
  border-top: 2px solid var(--brand-color);
}

.skin-scrollbar::-webkit-scrollbar-thumb {
      border-color: var(--brand-color);
  }

.skin-scrollbar::-webkit-scrollbar-track {
    background: var(--brand-light-color);
}


.skin-table-modal thead tr:last-of-type th{
  border-color: var(--brand-color);
}

.skin-loader {
  color: var(--brand-color);
}

/* Spinner Tabs Animation */
@keyframes spinner-tab-progress {
  0% {
    left: 0%;
    width: 0%;
  }
  50% {
    left: 0%;
    width: 100%;
  }
  100% {
    left: 100%;
    width: 0%;
  }
}

.tab-active-refreshing {
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 5px;
  color: var(--brand-color);
  font-size: 1.125rem;
  font-weight: 700;
  border-bottom: 2px solid transparent;
}

.tab-active-refreshing::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px;
  background: var(--brand-color);
  animation: spinner-tab-progress 2s ease-in-out infinite;
}

@keyframes tab-card-border-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.tab-card-refreshing {
  position: relative;
  overflow: hidden;
}

.tab-card-refreshing::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  margin-top: -250px;
  margin-left: -250px;
  background: conic-gradient(from 0deg, transparent 0%, var(--brand-color) 15%, transparent 30%);
  animation: tab-card-border-spin 2.5s linear infinite;
  z-index: 0;
}

.tab-card-refreshing::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: white;
  border-radius: 6px;
  z-index: 1;
}

.tab-card-refreshing a {
  position: relative;
  z-index: 2;
}

@property --pill-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes pill-border-progress {
  to { --pill-border-angle: 360deg; }
}

.tab-card-refreshing[aria-current="page"] {
  border-width: 3px;
  padding: 6px 18px;
  border-color: transparent;
  background:
    linear-gradient(var(--brand-light-color), var(--brand-light-color)) padding-box,
    conic-gradient(from var(--pill-border-angle), color-mix(in srgb, var(--brand-color) 20%, transparent) 0%, var(--brand-color) 15%, color-mix(in srgb, var(--brand-color) 20%, transparent) 30%) border-box;
  animation: pill-border-progress 2.5s linear infinite;
}

.tab-card-refreshing[aria-current="page"]::before,
.tab-card-refreshing[aria-current="page"]::after {
  content: none;
}

@media (prefers-reduced-motion: reduce) {
  .tab-card-refreshing[aria-current="page"] {
    animation: none;
  }
}