/* ---------- Color Module Styles ----------- */
:root {
  --dsg-color-primary: hsl(213, 100%, 35%);
  --dsg-color-secondary: hsl(213, 100%, 65%);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem hsla(213, 100%, 35%, 0.25);
  --bs-primary: hsl(213, 100%, 35%);
  --bs-primary-rgb: 0, 82, 180;
  --bs-primary-text-emphasis: hsl(213, 100%, 15%);
  --bs-primary-bg-subtle: hsl(213, 100%, 75%);
  --bs-primary-border-subtle: hsl(213, 100%, 65%);
}

::-moz-selection {
  color: var(--bs-light);
  background-color: var(--dsg-color-secondary);
}

::selection {
  color: var(--bs-light);
  background-color: var(--dsg-color-secondary);
}

body {
  color: var(--bs-gray-dark);
}
body .dsg-color-primary {
  color: var(--dsg-color-primary);
}
body .dsg-color-secondary {
  color: var(--dsg-color-secondary);
}
body .dsg-bg-primary {
  background-color: var(--dsg-color-primary);
}
body .dsg-bg-secondary {
  background-color: var(--dsg-color-secondary);
}

.tabs ul.primary li a.is-active {
  background-color: var(--bs-light);
}
.tabs ul.primary li.is-active a {
  background-color: var(--bs-light);
  border-bottom-color: var(--bs-light);
}

#navbar-top {
  background-color: var(--dsg-color-primary);
}
#navbar-top .menu--account a {
  color: var(--bs-light);
}
#navbar-top .menu--account a:hover, #navbar-top .menu--account a:focus {
  color: var(--dsg-color-secondary);
}
#navbar-top .breadcrumb a {
  color: var(--bs-light);
}
#navbar-top .breadcrumb a:hover, #navbar-top .breadcrumb a:focus {
  color: var(--dsg-color-secondary);
}
#navbar-top .breadcrumb .breadcrumb-item:before {
  color: var(--bs-light);
}

#navbar-main {
  background-color: transparent;
  border-bottom: 1px solid var(--bs-gray-300);
}

a,
.link {
  color: var(--dsg-color-primary);
}
a:active, a:hover, a:focus,
.link:active,
.link:hover,
.link:focus {
  color: var(--dsg-color-secondary);
}

.nav-item .dropdown-item.active, .nav-item .dropdown-item:active {
  color: var(--bs-light);
  background-color: var(--dsg-color-primary);
}
.nav-item .dropdown-item a.active {
  color: var(--bs-light);
}

.nav-link {
  color: var(--bs-gray-dark);
}
.nav-link:hover, .nav-link:focus {
  color: var(--dsg-color-primary);
}

.page-item.active .page-link {
  background-color: var(--dsg-color-secondary);
  border-color: var(--dsg-color-secondary);
  color: var(--bs-light);
}
.page-item.active .page-link:hover {
  background-color: var(--dsg-color-secondary);
  border-color: var(--dsg-color-secondary);
  color: var(--bs-light);
}
.page-item .page-link {
  color: var(--dsg-color-primary);
}
.page-item .page-link:hover {
  background-color: var(--dsg-color-primary);
  border-color: var(--dsg-color-primary);
  color: var(--bs-light);
}

.accordion-button:focus {
  box-shadow: none;
}

.btn-primary {
  background-color: var(--dsg-color-primary);
  border-color: var(--dsg-color-primary);
}
.btn-primary:active, .btn-primary:hover, .btn-primary:focus {
  background-color: var(--dsg-color-secondary) !important;
  border-color: var(--dsg-color-secondary) !important;
}

.site-footer {
  background: transparent;
}

blockquote {
  padding-left: var(--dsg-unit-md);
  border-left: var(--dsg-unit-sm) solid var(--dsg-color-primary);
}

mark.marker-yellow {
  background-color: #fdfd77;
}
mark.marker-green {
  background-color: #62f962;
}
mark.marker-pink {
  background-color: #fc7899;
}
mark.marker-blue {
  background-color: #72ccfd;
}
mark.pen-red {
  background-color: transparent;
  color: #e71313;
}
mark.pen-green {
  background-color: transparent;
  color: #128a00;
}

table thead tr th {
  background-color: var(--dsg-color-primary) !important;
  color: var(--bs-light) !important;
}
table thead tr th a:hover, table thead tr th a:focus {
  color: var(--bs-light);
}
.form-control:focus {
  border-color: var(--dsg-color-primary);
  box-shadow: 0 0 0 0.25rem rgba(128, 128, 128, 0.25);
}

.form-select:focus {
  border-color: var(--dsg-color-primary);
  box-shadow: 0 0 0 0.25rem rgba(128, 128, 128, 0.25);
}
.form-select option[selected] {
  color: var(--bs-light);
  background-color: var(--dsg-color-primary);
}

.form-check-input {
  border-color: var(--bs-gray-400);
}
.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(128, 128, 128, 0.25);
  border-color: var(--bs-gray-400);
}
.form-check-input:checked {
  background-color: var(--dsg-color-primary);
  border-color: var(--dsg-color-primary);
}

.form-switch .form-check-input {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-color: var(--bs-gray);
  border-color: var(--bs-gray);
}
.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  box-shadow: 0 0 0 0.25rem rgba(128, 128, 128, 0.25);
  border-color: var(--bs-gray);
}
.form-switch .form-check-input:checked {
  background-color: var(--dsg-color-primary);
  border-color: var(--dsg-color-primary);
}

/* ---------- Color Form ----------- */
[dir=rtl] .color-form .color-palette {
  margin-left: 0;
  margin-right: 20px;
}
[dir=rtl] .color-form .color-palette .lock {
  right: -20px;
  left: 0;
}
[dir=rtl] .color-form .form-item label {
  float: right;
}