/*

    ▗▄▄▖  ▗▄▖  ▗▄▖▗▄▄▄▖      
    ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌ █        
    ▐▛▀▚▖▐▌ ▐▌▐▌ ▐▌ █        
    ▐▙▄▞▘▝▚▄▞▘▝▚▄▞▘ █        
     ▗▄▄▖▗▄▄▄▖▗▄▄▖  ▗▄▖ ▗▄▄▖ 
    ▐▌     █  ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌
     ▝▀▚▖  █  ▐▛▀▚▖▐▛▀▜▌▐▛▀▘ 
    ▗▄▄▞▘  █  ▐▌ ▐▌▐▌ ▐▌▐▌   
                            
    Overwrites things such as bootstrap colours and element styles, for example: bg-primary text-primary card

*/

/*

PRIMARY
- link text is also included

*/

.text-primary, a {
    color: var(--primary) !important;
}

.btn-primary, .bg-primary, .nav-pills .nav-link.active, .badge-primary, .alert-primary {
    background-color: var(--primary) !important;
    color: var(--light) !important;
    border-color: var(--border) !important;
}

.progress-bar {
    background-color: var(--primary);
}

.btn-outline-primary {
    border-color: var(--primary) !important;
}

.btn-outline-primary:hover {
  color: var(--light) !important;
  background-color: var(--primary);
  border-color: var(--primary) !important;
}

.page-item.active .page-link {
    background-color: var(--primary) !important;
    color: var(--light);
}

/*

SECONDARY

*/

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

.btn-secondary, .bg-secondary, .badge-secondary, .alert-secondary {
    background-color: var(--secondary) !important;
    color: var(--text) !important;
}

.btn-outline-secondary {
    border-color: var(--secondary) !important;
}

.btn-outline-secondary:hover {
  color: var(--light) !important;
  background-color: var(--secondary);
  border-color: var(--secondary) !important;
}





/*

SUCCESS

*/

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

.btn-success, .bg-success, .badge-success, .alert-success {
    background-color: var(--success) !important;
    color: var(--light) !important;
}

.btn-outline-success {
    border-color: var(--success) !important;
}

.btn-outline-success:hover {
  color: var(--light) !important;
  background-color: var(--success);
  border-color: var(--success) !important;
}





/*

WARNING

*/

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

.btn-warning, .bg-warning, .badge-warning, .alert-warning {
    background-color: var(--warning) !important;
    color: var(--light) !important;
}

.btn-outline-warning {
    border-color: var(--warning) !important;
}

.btn-outline-warning:hover {
  color: var(--light) !important;
  background-color: var(--warning);
  border-color: var(--warning) !important;
}





/*

DANGER

*/

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

.btn-danger, .bg-danger, .badge-danger, .alert-danger {
    background-color: var(--danger) !important;
    color: var(--light) !important;
}

.btn-outline-danger {
    border-color: var(--danger) !important;
}

.btn-outline-danger:hover {
  color: var(--light) !important;
  background-color: var(--danger);
  border-color: var(--danger) !important;
}





/*

INFO

*/

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

.btn-info, .bg-info, .badge-info, .alert-info {
    background-color: var(--info) !important;
    color: var(--light) !important;
}

.btn-outline-info {
    border-color: var(--info) !important;
}

.btn-outline-info:hover {
  color: var(--light) !important;
  background-color: var(--info);
  border-color: var(--info) !important;
}





/*

FADED

*/

.btn-faded, .bg-faded, .badge-faded, .alert-faded {
    background-color: var(--faded) !important;
}

.btn-outline-faded {
    border-color: var(--faded);
}

.btn-outline-faded:hover {
  background-color: var(--faded);
  border-color: var(--faded) !important;
}





/*

LIGHT

*/

.btn-light, .bg-light, .badge-light, .alert-light {
    background-color: var(--light) !important;
}

.btn-outline-light {
    border-color: var(--light);
}

.btn-outline-light:hover {
  background-color: var(--light);
  border-color: var(--light) !important;
}





/*

DARK

*/

.btn-dark, .bg-dark, .badge-dark, .alert-dark {
    background-color: var(--dark) !important;
}

.btn-outline-dark {
    border-color: var(--dark) !important;
}

.btn-outline-dark:hover {
  background-color: var(--dark);
  border-color: var(--dark) !important;
}

/*

MISC. BOOTSTRAP

*/

.card, .card-block, .modal-content {
    border-color: var(--ib) !important;
    outline: 2px solid var(--ob);
    background-color: var(--faded);
    border-radius: var(--radius) !important;
    border-radius: .25rem;
}

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

.btn-default {
    background-color: var(--deep) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.btn-default:hover {
    border-color: transparent !important;
}

.badge-default {
    background-color: var(--bg2);
}

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

.thumb-character-stat {
  color: var(--muted);
}

.thumb-character-stat.favorited, .thumb-character-stat.favorited:hover {
  color: var(--warning);
}

.thumb-character-stat:hover {
  color: var(--muted);
}

.link-panel::before {
  border-color: var(--faded);
}

.fr-spoiler {
    background-color: var(--deep);
    border-color: var(--border) !important;
    max-width: 100% !important;
}

.fr-spoiler:not(.fr-command)::before {
  background-color: var(--faded);
  opacity: .75;
}

.fr-spoiler:not(.fr-command):hover::before {
  background-color: var(--faded);
  opacity: 1;
}

.characters-filters *, .btn {
    border-color: var(--border) !important;
}

.comment .forum-post-post .forum-post-footer .forum-post-time, .forum-post .forum-post-post .forum-post-footer .forum-post-time {
  color: var(--muted);
}

.custom-control-indicator {
  background-color: var(--primary) !important;
  opacity: .5;
}

.custom-control-input:checked ~ .custom-control-indicator {
  color: var(--content) !important;
  background-color: var(--primary) !important;
  opacity: 1;
}

.alert-success, .alert-danger, .alert-warning, .alert-info {
    border-color: var(--border) !important;
}

/* IC selection */

#user-character-selector .user-character-selector-left .user-character-selector-header .user-character-selector-title, #user-character-selector .user-character-selector-left.user-character-selector-header .user-character-selector-title {
  color: var(--text);
}

#user-character-selector * {
  border-color: var(--border) !important;
}

#user-character-selector .user-character-selector-right, .pagination .page-jumper, #user-character-selector .user-character-selector-body, #user-character-selector .user-character-selector-sidebar, #user-character-selector .user-character-selector-sidebar .user-character-selector-folder-list > .list-group-item {
  background-color: var(--faded);
}

#user-character-selector .user-character-selector-sidebar .user-character-selector-folder-list > .list-group-item {
    background: none !important;
    border-top: none;
}

#user-character-selector .user-character-selector-sidebar {
    background: var(--bg1);
}

#user-character-selector .user-character-selector-sidebar .user-character-selector-folder-list > .list-group-item.active > a {
  background-color: var(--faded);
}

/* --- */


.btn-outline-secondary {
    color: var(--text) !important;
}

.btn.focus, .btn:focus {
  box-shadow: 0 0 0 2px var(--color2) !important;
}

.gallery-thumb .thumb-image > a:hover {
  box-shadow: 0 0 3px var(--color2) !important;
}

.dropdown-item.hover, .dropdown-item:hover {
  color: var(--light) !important;
  background-color: var(--color2) !important;
}

.dropdown-item.active, .dropdown-item:active {
  color: var(--light) !important;
  background-color: var(--color1) !important;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--content);
}

body * {
    ::-webkit-scrollbar-track {
        background: transparent;
    }
}

::-webkit-scrollbar-thumb {
  background: var(--color1);
}

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