.title {
    color: black;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode',
        Geneva, Verdana, sans-serif;
}

#title2 {
    color: white;
}

body.dmode .title {
    color: white;
}

body.dmode #title2 {
    color: black;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}
button{
    cursor: pointer;
    padding: .7rem;
    border-radius: 10px;
    border: 3px solid black;
    background-color: rgb(246, 195, 100);
}

button:hover{
    border-color: chartreuse;
}

body.dmode button{
    background-color: darkgray;
    color: white;
}

body.dmode button:hover{
    border-color: rgb(79, 124, 208);

}



body {
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: beige;
}

body.dmode {
    background-color: rgb(77, 76, 76);
    color: white;
}

header {
    height: 10vh;
    background-color: orange;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem 0 1rem;
    box-shadow: 10px 5px 5px black;
}

body.dmode header {
    background-color: rgb(102, 113, 124);
}

.burger-menu {
    display: block;
    cursor: pointer;
}

.burger-menu::before {
    content: '\2630'; /* Unicode-Zeichen für Burger-Menü (Hamburger) */
    font-size: 30px;
}

.burger-menu.close::before {
    content: '\2716'; /* Unicode-Zeichen für "X" */
}
.burger-menu.close {
    scale: 1 !important;
}

.sidebar {
    display: none;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: orange;
    position: absolute;
    top: 10vh;
    width: 30%;
    right: 0px;
    height: 30%;
    box-shadow: 5px 5px 5px black;
    border-radius: 0 0 0 10px;
}
.sidebar.show {
    display: flex;
}

.sidebar-link {
    font-size: 1.5rem;
    border-radius: 25px;
    text-decoration: none;
}

.sidebar-link:hover {
    color: rgb(79, 124, 208);
;
}

body.dmode .sidebar {
    background-color: rgb(102, 113, 124);
}

.course-wrapper {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.course {
    border: 3px black solid;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    width: 25%;
    box-sizing: border-box;
}

main {
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.semester-select {
    margin: 1rem;
}

#course-add .course-add-plus,
#timeentry-add .course-add-plus {
    font-size: 3rem;
}
#course-add,
#timeentry-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#course-add .course-main {
    display: flex;
    justify-content: center;
    align-items: center;
}

dialog {
    padding: 0;

    border-radius: 10px;
}

.dialog-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}


#suche {
    padding: 0.5rem;
    font-size: 1.3rem;
    border-radius: 25px;
    border: 3px #999 solid;
    outline: none;
    padding-left: 2.5rem;
    width: calc(100% - 3rem);
}
.suchelement {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #999;
    height: 25px;
}

#suche:focus {
    border-color: black;
}

.suche {
    width: 25%;
    
    position: relative;
}

.suche-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
}

.dialog-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    align-items: center;
    border-bottom: 1px solid lightgray;
}
.dialog-main {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    flex-direction: column;
    gap: 0.3rem;
    text-align: left;
}
dialog hr {
    opacity: 0.2;
    margin: 0;
}

.dialog-footer {
    justify-content: flex-end;
    display: flex;
    align-items: center;
    padding: 1rem;
    border-top: 1px solid lightgray;
}

.dialog-close {
    cursor: pointer;
}

.dialog-main input, .dialog-main select {
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    border: 1px solid #b7bdc2;
    background-color: white;
    display: block;
    box-sizing: border-box;
}

.dialog-main select{
    margin-top: 1rem;
    margin-bottom: .25rem;
}

.loesch-centered{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    width: 100%;
}

.loesch-centered button{
    width: 100%;
    
}

.dialog-main button {
    width: 100%;
    margin-top: .25rem;
}

.create-new-course-dialog-input input {
    width: 50%;
}

.kurs-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1rem;
}
.kurs-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
@media screen and (max-width: 768px) {
    .sidebar {
        width: 100%;
    }
    .course {
        width: 80%;
    }
    .suche {
        width: 90%;
    }
    .semester-select{
        width: 90%;
    }
}

table thead th {
    border-bottom: 2px solid #dee2e6;
}

table {
    width: 99%;
    margin-bottom: 1rem;
    max-width: 100%;
    border-collapse: collapse;
    text-align: center;
}

td,
th {
    padding: 0.75rem;
    border-top: 1px solid #dee2e6;
}

th {
    cursor: pointer;
}

th.asc {
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"%3E%3Cpath d="M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"%3E%3C/path%3E%3C/svg%3E')
        no-repeat center right;
}

th.desc {
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"%3E%3Cpath d="M182.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128z"%3E%3C/path%3E%3C/svg%3E')
        no-repeat center right;
}

th:not(.asc):not(.desc) {
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"%3E%3Cpath d="M137.4 41.4c12.5-12.5 32.8-12.5 45.3 0l128 128c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9l128-128zm0 429.3l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128c-12.5 12.5-32.8 12.5-45.3 0z"%3E%3C/path%3E%3C/svg%3E')
        no-repeat center right;
}

th.nosymbol {
    background: none !important;
}

#next-page {
    visibility: hidden;
}
#previous-page {
    visibility: hidden;
}

.pagination-links {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.chart {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.semester {
    display: flex;
    align-items: center;
    padding: 1rem;
    gap: .3rem;
}

#semester-select {
    height: 50px;
    width: 100%;
    align-items: center;
    box-shadow: 5px 5px 5px black;
    border-radius: 10px;
    font-size: large;
}

#semester-select:hover {
    border-color: chartreuse;
    border-radius: 10px;
    cursor: pointer;
}

body.dmode #semester-select {
    color: white;
    background-color: darkgray;
}

body.dmode #semester-select:hover {
    border-color: rgb(79, 124, 208);
}

.canvas {
    max-width: 90%;
}

.table-scrollable {
    width: 100%;
    overflow-y: auto;
    margin: 0 0 1em;
}

.table-scrollable::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
}


body.dmode dialog{
    background-color: rgb(77, 76, 76);
    color: white;
    border-color: black;
}

.table-scrollable::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 3px solid #fff;
    background-color: rgba(0, 0, 0, 0.3);
}

.pbar-rumpf {
    width: 300px;

    border: 5px;
    border-color: black;
}

.pbar {
    width: 300px;
    height: 70px;
    border: 3px solid black;
}

.pbar::-webkit-progress-bar {
    background-color: lawngreen;
}
.pbar::-moz-progress-bar {
    background-color: lawngreen;
}

#toggleDarkmode:hover {
    cursor: pointer;
    color: black;
}

body.dmode #toggleDarkmode:hover {
    color: white;
}

#timeentry-add {
    background-color: rgb(246, 195, 100);
}

#timeentry-add:hover {
    border-color: chartreuse;
    border-radius: 10px;
    cursor: pointer;
}

body.dmode #timeentry-add {
    background-color: darkgray;
}

body.dmode #timeentry-add:hover {
    border-color: rgb(79, 124, 208);
}

#course-open-settings-dialog {
    
    border-radius: 10px;
    border: 3px solid black;
    background-color: rgb(246, 195, 100);
}

#course-open-settings-dialog:hover {
    border-color: chartreuse;
    cursor: pointer;
}

body.dmode #course-open-settings-dialog {
    background-color: darkgray;
    color: white;
}

body.dmode #course-open-settings-dialog:hover {
    border-color: rgb(79, 124, 208);
}

.course {
    background-color: rgb(246, 195, 100);
    color: black;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.course:hover {
    border-color: chartreuse;
    border-radius: 10px;
    cursor: pointer;
}

body.dmode .course {
    background-color: darkgray;
    color: white;
}

body.dmode .course:hover {
    border-color: rgb(79, 124, 208);
}

#open-course-delete-dialog {
    height: 2cm;
    width: 4cm;
}

#open-course-update-dialog {
    height: 2cm;
    width: 4cm;
}

#open-course-delete-dialog:hover {
    border-color: chartreuse;
    border-radius: 10px;
    cursor: pointer;
}

#open-course-update-dialog:hover {
    border-color: chartreuse;
    border-radius: 10px;
    cursor: pointer;
}

body.dmode #open-course-delete-dialog {
    background-color: darkgray;
    color: white;
}

body.dmode #open-course-update-dialog {
    background-color: darkgray;
    color: white;
}

body.dmode #open-course-delete-dialog:hover {
    border-color: rgb(79, 124, 208);
}

body.dmode #open-course-update-dialog:hover {
    border-color: rgb(79, 124, 208);
}

body.dmode #course-settings {
    background-color: rgb(77, 76, 76);
    color: white;
    border-color: black;
}


.kurs-remaining{
    text-align: center;
}

#selected-category,
#selected-update-category {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
}

.category-show {
    background-color: rgb(49, 49, 228);
    border-radius: 5px;
    color: white;
    padding: 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    display: inline-block;
}

.selectedCategory, .editCategory {
    background-color: rgb(49, 49, 228);
    border-radius: 5px;
    color: white;
    padding: 10px;
    cursor: pointer;
} 

.category-row{
    word-wrap: break-word;
}

.category-setting-obj{
    cursor: pointer;

}

#index-kategorien, #semester-setting-wrapper{
    width: 100%;
    text-align: center;
}

 #semester-setting-wrapper button{
    margin-bottom: 5px;
 }





.dbbutton{
    height: 1cm;
    width: 2cm;
    margin: 3px;

}

#saveDetails {
    height: 1cm;
    margin: 3px;
    
}

.dbinput {
    margin: 3px;
}