[data-theme="dark"] html{
  background-color: #303030 !important;
  color: #ccc;
}

[data-theme="dark"] {
  background-color: #303030 !important;
  color: #ccc;
}

[data-theme="dark"] a,
[data-theme="dark"] .uk-navbar-nav>li.uk-active>a  {
  color: #4da9f9;
}

[data-theme="dark"] a:hover, 
[data-theme="dark"] a:focus,
[data-theme="dark"] .uk-navbar-nav>li.uk-active>a:hover {
  color: #497296;
}

[data-theme="dark"] .uk-card{
  background-color: #202020 !important;
  color: #ccc;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .uk-select,
[data-theme="dark"] .uk-input{
  border-color: #666;
  color: #ccc;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .uk-card-title, 
[data-theme="dark"] .uk-form-label, 
[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6{
  color: #ccc !important;
}

[data-theme="dark"] .uk-button-default{
  color: #ccc !important;
}

[data-theme="dark"] .uk-modal-dialog, 
[data-theme="dark"] .uk-modal-header, 
[data-theme="dark"] .uk-modal-body, 
[data-theme="dark"] .uk-modal-footer{
  background-color: #202020 !important;
  color: #ccc;
}

[data-theme="dark"] .uk-text-lead
{
  color: #ccc;
}

/* Colors
 ========================================================================== */
 [data-theme="dark"] *{
  --inactive-bg-color:#bcbdc0;
  --inactive-color:#f8f8f8;
 }
 
 [data-theme="dark"] .leaf-green{
   --bg-color: #75b022;
   --color: #c6eec0;
   background-color: #75b022;
   color: #c6eec0;
 }
 [data-theme="dark"] .leaf-turquoise{
   --bg-color: #22b0b0;
   --color: #c0eeec;
   background-color: #22b0b0;
   color: #c0eeec;
 }
 [data-theme="dark"] .leaf-blue{
   --bg-color: #45829b;
   --color: #c7eafc;
   background-color: #45829b;
   color: #c7eafc;
 }
 [data-theme="dark"] .leaf-red{
   --bg-color: #c92a2a;
   --color: #f8c9c9;
   background-color: #c92a2a;
   color: #f8c9c9;
 }
 [data-theme="dark"] .leaf-orange{
   --bg-color: #e68a00;
   --color: #f8e0c9;
   background-color: #e68a00;
   color: #f8e0c9;
 }
 [data-theme="dark"] .leaf-yellow{
   --bg-color: #c4c411;
   --color: #f8f8c9;
   background-color: #c4c411;
   color: #f8f8c9;
 }
 [data-theme="dark"] .leaf-purple{
   --bg-color: #8a2ae6;
   --color: #e0c9f8;
   background-color: #8a2ae6;
   color: #e0c9f8;
 }
 [data-theme="dark"] .leaf-pink{
   --bg-color: #e68ac9;
   --color: #f8c9e0;
   background-color: #e68ac9;
   color: #f8c9e0;
 }
 [data-theme="dark"] .leaf-brown{
   --bg-color: #8a4b2a;
   --color: #e6d9c9;
   background-color: #8a4b2a;
   color: #e6d9c9;
 }
 [data-theme="dark"] .leaf-grey{
   --bg-color: #6c6d70;
   --color: #e6e6e6;
   background-color: #6c6d70;
   color: #e6e6e6;
 }

 /* Button
 ========================================================================== */
 [data-theme="dark"] .leaf-button {
  color: var(--inactive-color);
  background-color: var(--inactive-bg-color);
}

[data-theme="dark"] .leaf-button:hover {
  color: var(--color);
}

[data-theme="dark"] .leaf-button:active {
  background-color: var(--bg-color);
  color: var(--color);
}

/* Radio Button
 ========================================================================== */
 [data-theme="dark"] .leaf-radio-button label {
  color: var(--inactive-color);
  background-color: var(--inactive-bg-color);
}

[data-theme="dark"] .leaf-radio-button label:hover {
  color: var(--color);
}

[data-theme="dark"] .leaf-radio-button input[type="radio"]:checked + label {
    background-color: var(--bg-color);
    color: var(--color);
}

/* Checkbox
 ========================================================================== */
 [data-theme="dark"] .leaf-checkbox label {
  color: var(--inactive-color);
  background-color: var(--inactive-bg-color);
}

[data-theme="dark"] .leaf-checkbox label:hover {
  color: var(--color);
}

[data-theme="dark"] .leaf-checkbox input[type="checkbox"]:checked + label {
    background-color: var(--bg-color);
    color: var(--color);
}

[data-theme="dark"] .leaf-checkbox input[type="checkbox"]:checked + label:hover {
  color: var(--inactive-color);
}