/*

VARIABLES

*/

:root 
{   
    /* 
    
    BASE COLORS 
    
    */   
    --oviato-color-bg-page: #111621;
    --oviato-color-bg-input: #000000;
    --oviato-color-bg-headers: #171E2D;
    
    --oviato-color-text-page: #9fc5e8;
    
    --oviato-color-border-core: #000000;
    --oviato-color-btc-orange: #ef8e19;
    
    --oviato-btn-primary-bg: #5b10ff;
    --oviato-btn-primary-border: #757575;
    --oviato-btn-primary-text: #FFF;
    
    --oviato-btn-primary-bg-hover: #4716b2;
    --oviato-btn-primary-border-hover: #000;
    --oviato-btn-primary-text-hover: #FFF999;
    
    --oviato-alert-danger-border: #f8d7da;
    --oviato-alert-success-border: #d1e7dd;

    /*
    
    BASE SETTINGS
    
    */
    
    --oviato-padding-basic: 6px;
    --oviato-line-table: 2.6rem;
    --oviato-margin-table: 15px;
    
    /*
    
    SVG
    
    */
    
    --oviato-svg-fill: #687287;
    --oviato-svg-fill-active: #00A3FF;
}

/*

-----------------------------------------------------
BELOW THESE VARIABLES ARE ATTRIBUTES THAT USE COLOURS
-----------------------------------------------------

BACKGROUNDS

*/

html, body,
html body.loading::after,
html body .modal,
html body .section.below,
html body,
html body .nav-tabs .nav-link.active, 
html body .card-body .nav-tabs .nav-link.active,
html body .nav-tabs .nav-item.show .nav-link,
html body .modal-content,
html body .modal-content .modal-body,
html body .card,
html body .card .toolbar,
html body .card .toolbar select,
html body .card .card-body
{
    background-color: var(--oviato-color-bg-page);
}

html body .card-body .nav-tabs .nav-link,
html body .btn.btn-outline-light:hover,
html body .section,
html body .form-control:disabled, 
html body .form-control[readonly],
html body alert.alert-info,
html body alert.alert-danger,
html body alert.alert-success,
html body .modal-content .modal-header,
html body .card .card-header
{
    background-color: var(--oviato-color-bg-headers);
}

html body .btn.btn-primary
{
    background-color: var(--oviato-btn-primary-bg);
}

html body .btn.btn-primary:hover,
html body .btn.btn-primary:focus
{
    background-color: var(--oviato-btn-primary-bg-hover);
}

html body form .form-control::file-selector-button,
html body form .form-control,
html body form .form-control:active,
html body form .form-control:focus,
html body form .form-control:focus-within,
html body .dataTables_wrapper .dataTables_length select,
html body .dataTables_wrapper .dataTables_filter input, 
html body .dataTables_wrapper .dataTables_filter input:focus, 
html body .dataTables_wrapper .dataTables_filter input:active, 
html body .dataTables_wrapper .dataTables_filter input:focus-within 
{
    background-color: var(--oviato-color-bg-input);
}

/*

BORDERS

*/

html body .card-body .nav-tabs,
html body .card-body .nav-tabs .nav-link,
html body .card-body .nav-tabs .nav-link:hover,
html body .modal-content .modal-header,
html body .card .card-header
{
    border-color: var(--oviato-color-border-core);
}

html body .btn.btn-primary
{
    border-color: var(--oviato-btn-primary-border);
}
html body .card-body .nav-tabs .nav-link.active
{
    border-bottom-color: transparent;
}

html body .modal-content .modal-header,
html body .card .card-header,
html body .nav-tabs .nav-link.active, 
html body .nav-tabs .nav-item.show .nav-link,
html body .modal-content,
html body .modal-content .modal-body,
html body .card,
html body .card .toolbar,
html body .card .toolbar select,
html body .card .card-body,
html body .btn.btn-outline-light:hover,
html body .section,
html body .form-control:disabled, 
html body .form-control[readonly],
html body alert.alert-info,
html body alert.alert-danger,
html body alert.alert-success,
html body .btn.btn-primary:hover,
html body .btn.btn-primary:focus
{
    border-color: var(--oviato-btn-primary-border-hover);
}

html body .btn.btn-outline-light
{
    border-color: var(--oviato-color-text-page);
}
html body form .form-control::file-selector-button,
html body form .form-control,
html body .dataTables_wrapper .dataTables_length select,
html body .dataTables_wrapper .dataTables_filter input 
{
    border-color: var(--oviato-color-bg-page);
}


/*

TEXT

*/

html body .fold h1 b,
html body .copy a:hover,
html body .copy a:focus,
html body .fold a:hover,
html body .fold a:focus,
html body .section a:hover,
html body .section a:focus,
html body .nav-tabs .nav-link:hover, 
html body .navbar-light .navbar-nav .nav-link,
html body .nav-tabs .nav-link:focus,
html body alert small i.highlight,
html body .accordion-button,
html body .btn.btn-primary
{
    color: var(--oviato-btn-primary-text);
}

html body .copy a,
html body .fold h2,
html body .fold h3,
html body .fold h4,
html body .fold h5,
html body .fold h6,
html body .section h4,
html body .section h5,
html body .section h6,
html body .fold a,
html body .section a,
html body .nav-tabs .nav-link,
html body alert.alert-info strong small a,
html body alert.alert-danger a,
html body alert.alert-success a,
html body .sado-markdown ul li strong code,
html body .navbar-light .navbar-nav .nav-link:hover, 
html body .navbar-light .navbar-nav .nav-link:focus,
html body form .form-control::file-selector-button,
html body .modal-content .modal-header,
html body .card .card-header,
html body .highlight,
html body .modal .modal-body a,
html body .btn.btn-primary:hover,
html body .btn.btn-primary:focus
{
    color: var(--oviato-btn-primary-text-hover);
}

html body.loading::after,
html body .nav-tabs .nav-link.active, 
html body .nav-tabs .nav-item.show .nav-link,
html body .modal-content,
html body .modal-content .modal-body,
html body .card,
html body .card .toolbar,
html body .card .toolbar select,
html body .card .card-body,
html body form .form-control::file-selector-button,
html body form .form-control,
html body form .form-control:active,
html body form .form-control:focus,
html body form .form-control:focus-within,
html body .dataTables_wrapper .dataTables_length select,
html body .dataTables_wrapper .dataTables_filter input, 
html body .dataTables_wrapper .dataTables_filter input:focus, 
html body .dataTables_wrapper .dataTables_filter input:active, 
html body .dataTables_wrapper .dataTables_filter input:focus-within 
html body .btn.btn-outline-light:hover,
html body .section,
html body .form-control:disabled, 
html body .form-control[readonly],
html body alert.alert-info,
html body alert.alert-danger,
html body alert.alert-success,
html body .fold h1,
html body .section h2,
html body .section h3,
html body .special,
html body .copy a.special,
html body nav.navbar.bg-dark,
html body nav.navbar.bg-dark.navbar-light .navbar-brand,
html body alert.alert-info h1,
html body alert.alert-info small
{
    color: var(--oviato-color-text-page);
}

html body .copy,
html body .fold,
html body .nav-tabs .nav-link.active, 
html body .navbar-light .navbar-nav .nav-link.active,
html body .nav-tabs .nav-item.show .nav-link
{
    color: var(--oviato-btn-primary-border);
}

html body .accordion-button:after
{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
html body .accordion-button:hover
{
    opacity: 0.75;
}

/*

FILLS

*/

svg
{
    fill: var(--oviato-svg-fill);
}
button.active svg path,
button:hover svg path,
svg:hover
{
    fill: var(--oviato-svg-fill-active);
}