:root {
    --bg-theme-color: #eee;
    --bg-dd-theme-color: #eee;
    --placeholder-theme-color: #ddd;
    --text-dd-theme-color: #666;
    --text-theme-color: #000000;
    --text-alt-theme-color: #3EA3B4;
    --bg2-theme-color: #a1b1b4;
    --text2-theme-color: #fff47f;
    /* subsystem */
    --bg-subtheme-color: #1d82c7;
    
    /* btn */
    --btn-theme-color: #52A136 ;
    --btn-text-theme-color:  #ffffff;
    --btn-hover-theme-color: #6dc44f ;
    --btn-text-hover-theme-color:  #ffffcc;
}

.bg-system {
    background-color: var(--btn-theme-color);
    color: var(--text-dd-theme-color);
}

.bg-system::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--placeholder-theme-color);
  opacity: 1; /* Firefox */
}

.btn-sys-primary {
    background-color: var(--btn-theme-color);
    color: var(--btn-text-theme-color);
}
.btn-sys-primary:hover {
    background-color: var(--btn-hover-theme-color);
    color: var(--btn-text-hover-theme-color);
}
.border-sys {
    border-color: #666 !important;
}
.form-signin {
    color: #666;
}

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

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

@media all and (min-width: 992px) {
    .navbar .nav-item .dropdown-menu{ display: none; }
    .navbar .nav-item:hover .nav-link{   }
    .navbar .nav-item:hover .dropdown-menu{ display: block; }
    .navbar .nav-item .dropdown-menu{ margin-top:0; }
}