html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video,input,textarea,select,button { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; font-weight:normal; outline:0; -webkit-tap-highlight-color:transparent; } button:focus{ outline:0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } textarea{ resize: none; } button{ margin:0; } th{ text-align:left; } a{ text-decoration:none; } .clear{ clear:both; display:block; visibility: hidden; height: 0px; line-height:0px; } input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; } fieldset { -moz-margin-end: 0; -moz-margin-start: 0; -moz-padding-end: 0; -moz-padding-start:0; border: none; } select > option { padding-block-end: 0; padding-block-start: 0; padding-inline-end: 0; padding-inline-start: 0; min-block-size: 0; } .errorMessage{ position: fixed; right: 20px; top: 20px; padding: 10px; background-color: darkred; border-radius: 3px; } :root { --main-bg-color: #242424; --light-bg-color: #efefef; --main-color: #d5d5d5; --main-color-input: #fAfAfA; --hover-bg-color:rgb(255 255 255 / 30%); --hover-bg-color-marker:#af4747b3; --select-bg-color:#111; --inp-bg:rgb(128 128 128 / 15%); --main-invert-color: #242424; --rot:#B92D00; --gruen:#E2FFB1; --grau_auf_hell:#212121; --grau_auf_dunkel:#d5d5d5; --invert:invert(1); --invalid:#FF6E6E; } .theme_light { --main-bg-color: #fafafa; --light-bg-color: #fff; --main-color: #000; --hover-bg-color:rgba(100, 100, 100, .3); --hover-bg-color-marker:#ff3434b3; --select-bg-color:#eee; --inp-bg:rgb(128 128 128 / 15%); --gruen:#50770d; --rot:#bc5151; --main-color-input: #000; --invert:invert(0); --invalid:#bc5151; --main-invert-color: #242424; } .invert{ filter: invert(1); } .theme_light .invert{ filter: invert(0); } *, *:before, *:after { box-sizing: border-box; } .line { height: 1px; background-color: red; position: absolute; left: 0; right: 0; top: 101px; display: none; } html, body { background-color: var(--main-bg-color); color: var(--main-color); font-family: "Open Sans", sans-serif; height: 100%; font-size: 18px; } body { display: flex; flex-direction: column; flex-wrap: nowrap; } a { color: var(--main-color); } nav { display: flex; flex-direction: row; flex-wrap: nowrap; } nav ul { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-evenly; flex: 1; } nav li { border-right: 1px solid var(--main-color); width: 100%; } nav li:first-child { border-left: 1px solid var(--main-color); } nav a { width: 100%; display: block; text-align: center; padding: 20px 0; } nav a:hover { background-color: var(--hover-bg-color); } small{ font-size: .75rem; } #main_wrap { display: flex; flex-direction: row; flex-wrap: nowrap; padding: 20px 10vw; } #main_wrap { flex-direction: column; } .head_wrap { margin-top: 20px; margin-bottom: 30px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; } .head_wrap h1 { display: inline-block; font-size: 26px; } .content_wrap { display: flex; flex-direction: row; flex-wrap: nowrap; } main { width: 80vw; } aside { width: 10vw; } aside.ar { } aside.al { } b { font-weight: bold; } .row { display: flex; flex-direction: row; flex-wrap: nowrap; margin-top: 10px; margin-bottom: 10px; column-gap: 5px; } [class^="col-"] { position: relative; } [class^="col-"]:first-child { } [class^="col-"]:last-child { } .col-12 { flex: 12; } .col-11 { flex: 11; } .col-10 { flex: 10; } .col-9 { flex: 9; } .col-8 { flex: 8; } .col-7 { flex: 7; } .col-6 { flex: 6; } .col-5 { flex: 5; } .col-4 { flex: 4; } .col-3 { flex: 3; } .col-2_5 { flex: 2.5; } .col-2 { flex: 2; } .col-1_5 { flex: 1.5; } .col-1 { flex: 1; } button { cursor: pointer; } .overlay { background-color: rgba(0, 0, 0, .7); position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: none; z-index: 10; } .overlay_tr { background-color: rgba(0, 0, 0, 0); } .modal { position: fixed; background-color: var(--main-bg-color); min-width: 30%; min-height: 40%; max-height: 85%; left: 50%; transform: translateX(-50%); top: 130px; display: none; flex-direction: column; flex-wrap: nowrap; border: 1px solid var(--main-color); z-index: 100; max-width: 70%; } .modal_head { padding: 15px; border-bottom: 1px solid var(--main-color); display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; } .modal_head_button { user-select: none; } .modal_head_titel { color: var(--main-color); } .modal_content { flex: 1; padding: 15px; color: var(--main-color); overflow-y: auto; } .modal_content label { display: block; margin-bottom: 5px; } .modal_content .label_name { display: inline-block; width: auto; vertical-align: top; font-size: 14px; margin-top: 2px; } .modal_content input[type='checkbox'] { margin-top: 5px; width: auto; } .modal_foot { border-top: 1px solid var(--main-color); padding: 10px 15px; text-align: right; } .show-flex { display: flex !important; } .show-tr { display: table-row !important; } .show { display: block !important; } .hide { display: none; } .disabled { pointer-events: none; color: grey !important; border-color: grey !important; } tr[class*="hide_"] { display: none; } .img_button { height: 19px; width: auto; cursor: pointer; margin-top: 1px; } .logout_button { margin: auto; width: 30px; transform: translate(50%, 50%); height: auto; filter: invert(54%) sepia(95%) saturate(1365%) hue-rotate(317deg) brightness(101%) contrast(107%); } .black_white { margin: auto; width: 30px; transform: translate(-30%, 50%); height: auto; } .aside_right { text-align: right; } .black_white:hover { transform: translate(-30%, 50%) rotate(180deg); } input, .inp { background-color: var(--inp-bg); border-bottom: 1px solid var(--main-color); display: block; color: var(--main-color-input); width: 100%; padding: 10px 0 0 2px; height: 35px; } input[type="checkbox"] { height: auto; } input:focus, .inp:focus { border-bottom: 1px solid var(--gruen) !important; } button.save, button.add { padding: 10px 30px; color: var(--gruen); border: 1px solid var(--gruen); border-radius: 4px; background-color: var(--main-bg-color); } .pointer { cursor: pointer; } table { width: 100%; margin: 0; border: 1px solid var(--main-color); } table * { font-size: 16px; } td, th { padding: 11px 5px; vertical-align: top; line-height: 20px; } th { font-weight: bold; } tbody tr:nth-of-type(odd) { background-color: rgba(100, 100, 100, .3); } tbody tr:hover { background-color: var(--hover-bg-color) !important; color: var(--main-color); } tbody tr.marker:hover { background-color: var(--hover-bg-color-marker) !important; color: var(--main-color); } div.info { position: fixed; top: 10vh; left: 50%; transform: translateX(-50%); border: 1px solid var(--gruen); background-color: var(--main-bg-color); color: var(--gruen); padding: 25px 25px; border-radius: 4px; font-size: 26px; } .login_wrap { position: fixed; top: 50%; width: 400px; left: 50%; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); transform: translate(-50%, -70%); background-color: var(--main-bg-color); border: 1px solid #b1a06e; } .login_wrap form{ padding:20px; } .login_wrap header{ font-weight: bold; padding: 20px 20px 10px; } .login_wrap input{ padding: 10px 0; margin-bottom: 10px; } .login_wrap button{ margin-top: 10px; width: 100%; padding: 5px; }