@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

html {
    font-family: 'Nunito', sans-serif;
    background: #000 url('images/background.png') center repeat;
    /*font-family: 'Raleway', sans-serif;
    font-family: 'Titillium Web', sans-serif;*/
}

body {
    padding: 0px;
    padding-bottom: 2.5em;
    color: #EEE;
    background: inherit;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Navbar */
body > .navbar {
    background-color: rgba(30, 30, 30, 0.4);
    margin-bottom: 0.1em;
    margin-bottom: 0.5em;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.table {
    font-size: 0.8em;
    border: 2px solid #222;
}

    .table thead th {
        background-color: #222;
    }

    .table .center {
        text-align: center;
    }

    .table td {
        padding: 0.2em 1em;
    }

input[type=checkbox] {
    width: 4em;
}

table tbody .item td {
    cursor: pointer;
}

table .selected * {
    background-color: #814141;
}

.form-group > :first-child {
    padding-left: 0;
}

.form-group > :last-child {
    padding-right: 0;
}

    .form-group > div:last-child input[type=checkbox] {
        float:right;
    }

.form-control:disabled, .form-control[readonly] {
    background-color: black;
}
/*
    Lists
*/
table td[scope="col"] {
    text-align: center;
}

table.table tr.summary {
    color: grey;
    background-color: #282828 !important;
}

    table.table tr.summary .label {
        text-align: right;
        font-style: italic;
    }

/*
    Billings
*/
.billing tr.item-planned td:not(.value){
    color: grey !important;
    font-style: italic;
}

/*
    Financial liquidity - month details
*/
table.analysis tr.month-row {
    cursor: pointer;
}

.subvalue.planned {
    color: grey;
    font-style: italic;
}

table.month-details {
    font-size: 1em;
}

table.month-details thead td {
    background-color: #222;
    font-weight: 700;
    border-bottom: 2px solid #444;
}

table tr.currentYear td {
    background-color: #222;
}

table tr.currentMonth td {
    background-color: #000;
    font-weight: 700;
    font-size: 1.05em;
}

table td.value {
    text-align: right;
}

    table td.value .subvalue {
        font-size: 0.80em;
    }

    table.month-details td.value .subvalue.planned {
        font-size: 1em !important;
    }

    .show-transfers-label {
        font-weight: normal;
        margin: 0;
        white-space: nowrap;
        cursor: pointer;
    }

    label.show-transfers-label::after {
        content: none !important;
    }

.month-details.loading {
    opacity: 0.4;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

table td.positive,
table td span.positive {
    color: lawngreen;
    font-family: 'Open Sans', 'Poppins', sans-serif;
}

.positive-color {
    color: lawngreen !important;
}

table td.negative,
table td span.negative {
    color: darkorange;
    font-family: 'Poppins', sans-serif;
}

.negative-color {
    color: darkorange !important;
}

table.budget-vs-actual tr.category-row {
    cursor: pointer;
}

.progress-bar.under-budget {
    background-color: lawngreen;
    color: #1a1a1a;
}

.progress-bar.near-budget {
    background-color: darkorange;
}

.progress-bar.over-budget {
    background-color: crimson;
}

footer {
    padding: 0.5em 2em;
    background-color: rgba(0, 0, 0, 0.5);
}

    footer p {
        margin: 0;
        font-size: 0.8em;
    }

/*
    MESSAGES
*/
.msg {
    border-width: 2px;
    border-style: solid;
    color: transparent;
    border-radius: 0.5em;
    background-color: steelblue;
    padding: 1em 2em;
}

.msg-information {
    border-color: steelblue;
    color: white;
}

    .msg-information h4 {
        padding-bottom: 0.4em;
        border-bottom: 2px solid white;
    }

    .msg-information a, .msg-information a:visited {
        background-color: #005580;
    }

    .msg-information a:hover {
        background-color: #EEE;
        color: black;
    }

/*
    CHARTS
*/
#chartModal .chart-modal-content {
    background: #1a1a19;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#chartModal .modal-header {
    border-bottom-color: #2c2c2a;
}

#chartModal .modal-title {
    color: #ffffff;
}

#chartModal .close {
    color: #ffffff;
    text-shadow: none;
    opacity: 0.8;
}

#chartModal .close:hover {
    opacity: 1;
}

#chartModal .chart-empty-message {
    color: #898781;
    text-align: center;
    padding: 3em 0;
}

#chartModalCanvas {
    min-height: 420px;
}

/*
    OTHER
*/
.panel-basic {
    padding: 0.4em 0.3em;
    border: solid 0.05em black;
    border-top-color: #222;
    border-left-color: #222;
    background-color: #333;
    min-width: 20em;
    box-shadow: #555 0em 0em 1em;
}

    .panel-basic ul {
        margin: 0;
        padding: 0;
    }

        .panel-basic ul li {
            list-style-type: none;
            display: block;
            margin: 0.1em;
            border-style: solid;
            border-width: 1px;
            padding: 0.4em 1em;

            border-color: #222;
            border-top-color: #666;
            border-left-color: #666;
        }

        .panel-basic ul a {
            text-decoration: none;
            color: #BBB;
            font-weight: 400;
        }

            .panel-basic ul li:hover {
                background-color: #383838;
                color: #DDD;
                cursor: pointer;
                border-color: #222;
                border-bottom-color: #666;
                border-right-color: #666;
            }


/*
    CONTROLS
*/
input.value {
    text-align: right;
}

button.hidden {
    display: none;
}

.hidden {
    display: none;
}

/*
    BASICS
*/
.bold {
    font-weight: bold;
}

.bolder {
    font-weight: bold;
}

.italics {
    font-style: italic;
}

.panel-form {
    padding: 1em;
    border-radius: 1em;
    background: rgba( 0, 0, 0, 0.4);
    border: 2px solid rgba(100, 100, 100, 0.08);
    max-width: 40%;
    min-width: 24em;
    margin: 1em auto;
}
    .panel-form h3 {
        color: coral;
        text-align: center;
    }

    .panel-form input:not(.btn),
    .panel-form select,
    .panel-form select:focus,
    .panel-form textarea {
        max-width: unset;
        color: rgb(255, 216, 0);
        background-color: #404040;
    }

    .panel-form form {
        margin-top: 1.5em;
    }

.btn-group-toggle .btn-secondary:not(:disabled).active {
    color: #fff;
    background-color: #007bff;
}

.btn-group-toggle .btn-secondary:not(:disabled).focus {
    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 50%);
}