/*---------- Main ----------*/
    body {
        background-color: #696969;
    }

    .box {
        background-color: rgb(255, 255, 255);
        border: 1px solid black;
        border-radius: 25px;
        padding-top: 2em;
        padding-bottom: 2em;
        padding-left: 2em;
        padding-right: 2em;
    }

    .headline {
        font-size: 20px;
    }
    
    .sub-btn {
        border-radius: 10px;
        padding: 6px 20px;
        text-align: center;
        font-size: 25px;
        font: bold;
        transition-duration: 0.3s;
        cursor: pointer;
    }

    .default-btn {
        background-color: rgb(221, 221, 221); 
        color: black; 
        border: 1px solid #000000;
    }
    
    .default-btn:hover {
        background-color: #ffffff;
        color: rgb(0, 0, 0);
    }

    .positiv-btn {
        background-color: #4CAF50; 
        color: black; 
        border: 1px solid #000000;
    }
    
    .positiv-btn:hover {
        background-color: #ffffff;
        color: black;
    }
    
    .negativ-btn {
        background-color: #faa9a3; 
        color: black; 
        border: 1px solid #000000;
    
    }
    
    .negativ-btn:hover {
        background-color: #ffffff;
        color: black;
    }

    a:link, a:visited {
        color: rgb(0, 0, 0);
    }

    table {
        text-align: left;
        margin: 0 auto;
        border: 1px solid rgb(177, 177, 177);
    }
    
    th, td {
        text-align: left;
        padding: 1em;
        border: 1px solid rgb(177, 177, 177);
    }
    
    th {
        font-weight: bold;
        font-size: 15px;
    }
    
    td {
        text-align: center;
        font-size: 12px;
    }
    
    tr:nth-child(even) {
        background-color: #f2f2f2;
    }


/*---------- Header ----------*/
    .header-element {
        padding-top: 1em;
        padding-bottom: 1em;
    }


    .is-current-page {
        border: 2px solid white;
        border-radius: 10px;
    }

    
/*---------- Edit.php ----------*/
    .edit-add-category-btn {
        font-size: 15px;
        border-radius: 5px;
        border: 0.5px solid black;
        margin-left: 10px;
        background-color: #4CAF50;
        min-width: 30px; 
    }

    .edit-del-category-btn {
        font-size: 15px;
        border-radius: 5px;
        border: 0.5px solid black;
        margin-left: 10px;
        background-color: #faa9a3;
        min-width: 30px;
    }

    .edit-upt-category-btn {
        font-size: 15px;
        border-radius: 5px;
        border: 0.5px solid black;
        margin-left: 10px;    
        min-width: 30px;
    }

    .edit-upt-data-btn {
        border: 1px solid black;
        border-radius: 30px;
        padding-left: 6px;
        padding-right: 6px;
        padding-bottom: 5px;
        background-color: rgba(192, 192, 192, 0);
        color: black;
    }
    
    .edit-upt-data-btn:hover {
        background-color: #000000;
        color: rgb(255, 255, 255);
    }

    /* Tree */

        .edit-category-section-ul-div {
            padding-top: 1em;
        }

        li {
            padding-bottom: 10px;
        }

        ul, #edit-category-section-ul {
            list-style-type: none;
            font-size: 22px;
            padding-top: 8px;
        }

        #edit-category-section-ul {
            margin: 0;
            padding: 0;
        }

        .caret {
            cursor: pointer;
            user-select: none;
        }

        .caret::before {
            content: "\22C0";
            font-size: 20px;
            color: black;
            display: inline-block;
            margin-right: 6px;
            transform: rotate(90deg);
        }

        .caret-down::before {
            transform: rotate(180deg);
        }

        .nested {
            display: none;
        }

        .active {
            display: block;
        }

    /* Table */

        .edit-div-scroll {
            max-height: 354px;
            overflow-y: scroll;
            overflow-x: hidden;
        }


/*---------- Report.php ----------*/
    .report-filters {
        margin-bottom: 25px;
        margin-top: 25px;
    }

    .report-buttons {
        margin-bottom: 75px;
        margin-top: 25px;
    }

    .report-filters-headline {
        color: rgb(0, 0, 0);
        font-size: x-large;
        padding-right: 10px;
    }

    .report-datetimeinput {
        width: auto;
    }

    .report-charts {
        margin-bottom: 25px;
    }

    .report-charts-earnings-headline {
        color: rgb(2, 181, 2);
        font-size: x-large;
    }

    .report-charts-spendings-headline {
        color: red;
        font-size: x-large;
    }

    .report-charts-savings-headline {
        color: black;
        font-size: x-large;
    }

    .report-charts-value {
        font-size: larger;
    }

    .report-number-chart {
        margin-bottom: 50px;
    }

    .report-donutchart {
        display: flex;
        justify-content: center;
        align-items: center;
    }


    /*---------- Account.php ----------*/
    .backup-inserts {
        text-align: left;
    }

    .changelog {
        position: relative;
        align-content: center;

        height: 200px;

        padding-left: 20px;
        padding-right: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
        
        border: 2px solid black;
        border-radius: 10px;
        
        overflow-y: scroll;

        word-break: keep-all;
    }