:root{
    --colorbgbodylight: {{ app.session.get('colorbgbodylight')|raw }};
    --colorbgbodydark: {{ app.session.get('colorbgbodydark')|raw }};
    --colorfttitlelight: {{ app.session.get('colorfttitlelight')|raw }};
    --colorfttitledark: {{ app.session.get('colorfttitledark')|raw }};   
    --colorftbodylight: {{ app.session.get('colorftbodylight')|raw }};
    --colorftbodydark: {{ app.session.get('colorftbodydark')|raw }};       
    --fontbody: "{{ app.session.get('fontbody')|raw }}";
    --fonttitle: "{{ app.session.get('fonttitle')|raw }}";
    --fontsizeh1: {{ app.session.get('fontsizeh1')~"px"|raw }};
    --fontsizeh2: {{ app.session.get('fontsizeh2')~"px"|raw }};
    --fontsizeh3: {{ app.session.get('fontsizeh3')~"px"|raw }};
    --fontsizeh4: {{ app.session.get('fontsizeh4')~"px"|raw }};

    --colorbgbodylight-darker: {{ app.session.get('colorbgbodylight-darker')|raw }};
    --colorbgbodydark-darker: {{ app.session.get('colorbgbodydark-darker')|raw }};
    --colorfttitlelight-darker: {{ app.session.get('colorfttitlelight-darker')|raw }};
}

/* COLOR BODY  */

body {
    background-color: var(--colorbgbodylight);
    color:  var(--colorftbodylight);
}

body .navbar.bg-dark {
    background-color: var(--colorbgbodydark)!important;
}

body #sidebar {
    background-color: var(--colorbgbodydark);
}

body #sidebar .title {
    color: var(--colorfttitledark); 
}

body #sidebar .nav a {
    color: var(--colorfttitledark); 
}

body #sidebar .nav .last {
    border-color: var(--colorfttitledark); 
}

body h1, body h2, body h3, body .modal-header h4 {
    color: var(--colorfttitlelight); 
}

body a, body .btn-link {
    color: var(--colorfttitlelight); 
}

body a:hover, body .btn-link:hover {
    color: var(--colorfttitlelight-darker);
}

body .nav a{
    color: var(--colorfttitledark); 
}

body .table {
    color: var(--colorftbodylight);
}

body .card {
    background-color: var(--colorbgbodylight);
}

body .card-header {
    background-color: var(--colorbgbodylight-darker);
    color: var(--colorfttitlelight);
    font-size: 120%;
}

body .card-header .custom-control {
    color:  var(--colorftbodylight);
    font-size: 80%;
}

body .page-item.active .page-link,
body .page-item.active .page-link:hover {
    background-color: var(--colorfttitlelight); 
    border-color: var(--colorfttitlelight); 
}

body .btn-primary {
    background-color:  var(--colorbgbodydark);
    border-color: var(--colorbgbodydark); 
}
body .btn-primary:hover {
    background-color:  var(--colorbgbodydark-darker);
    border-color: var(--colorbgbodydark-darker); 
}

body .modal-title {

}

/* COLOR BODY HOME */

body.monocolor {
    background-color: var(--colorbgbodydark);
    color:  var(--colorftbodydark);
}

body.monocolor .navbar.bg-dark {
    background-color: var(--colorbgbodydark)!important;
}

body.monocolor #sidebar {
    background-color: var(--colorbgbodydark);
}

body.monocolor #sidebar .title {
    color: var(--colorfttitledark); 
}

body.monocolor #sidebar .nav a {
    color: var(--colorfttitledark); 
}

body.monocolor h1, body.monocolor h2, body.monocolor h3, body.monocolor .modal-header h4 {
    color: var(--colorfttitledark); 
}

body.monocolor a, body.monocolor .btn-link {
    color: var(--colorfttitledark); 
}

body.monocolor .nav a{
    color: var(--colorfttitledark); 
}

body.monocolor .card {
    background-color: var(--colorbgbodydark);
}

body.monocolor .card-header {
    background-color: var(--colorbgbodydark);
    color: var(--colorfttitledark);
    font-size: 120%;
}

body.monocolor .card-header .custom-control {
    color:  var(--colorftbodydark);
    font-size: 80%;
}

body.monocolor .btn-primary {
    background-color:  var(--colorbgbodylight);
    border-color: var(--colorbgbodylight); 
}
body.monocolor .btn-primary:hover {
    background-color:  var(--colorbgbodylight-darker);
    border-color: var(--colorbgbodylight-darker); 
}

/* FONT */
body {
    font-family: var(--fontbody); 
}

h1,h2,h3, .navbar-brand, .card-header, .modal-header h4 {
    font-family:  var(--fonttitle); 
}

h1 { font-size: var(--fontsizeh1); }
h2 { font-size: var(--fontsizeh2); }
h3 { font-size: var(--fontsizeh3); }
h4 { font-size: var(--fontsizeh4); }

.card-header .custom-control {
    font-family:  var(--fontbody);
}

{% if not useheader is defined or not useheader %}
#main {
    padding:0px;
}
{% else %}
#main {
    margin-bottom: 100px;
}
{%endif%}

.ui-timepicker-standard a, .timepicker_wrap a { color : var(--dark) !important }