body {
    font-family: "Poppins", sans-serif;
    user-select: none;
}

body, html {
    height: 100%;
}

.hidden {
    display: none;
}

.magic-area > canvas {
    border: 1px solid black;
}

.h-30 {
    width: 30px;
    height: 30px;
}

#content {
    width: 700px;
    height: 700px;
}

.icon-percent {
    width: 110px;
}

#droparea {
    width: 100%;
    height: 100%;
    font-size: 18px;
}

#droparea > div {
    margin-bottom: 5px;
}

.form-group {
    width: 300px;
    border: 1px solid;
}

.border-all-round {
    border-radius: 0 !important;
}

/*DarkMode*/
@media (prefers-color-scheme: dark) {
    /* CSS Code wenn Dark Mode aktiv */
    body {
        background-color: #292929;
        color: #c7c5c7;
    }
    .dark-nav {
        background-color: #1d1d1d !important;
    }
    .navbar-brand-dark {
        color: #c7c5c7 !important;
    }
    .form-control-dark, .form-control-dark:focus {
        background-color: #333333;
        border-color: #89888d;
        color: #89888d;
    }
    .input-dark {
        background-color: #2c2c2c !important;
        color: #c7c5c7 !important;
        border-color: #89888d;
    }
}