@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');

/* Variables */
:root {
    --primary-color: #39be35;
    --secondary-color: #4fa81c;
    --dark-color:#002240;
    --light-color: #f4f4f4;
    --error-color: #880000;
    --success-color: #209e6e;
}

/* Reset */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* Mein Settings */
body {
    font-family: 'Lato', sans-serif;
    color: #333;
    background-color: #f0f0f0;
    line-height: 1.6;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
    outline: none;
    color: #333;
}

h1, h2 {
    font-weight: 300;
    line-height: 1.2;
    margin: 10px 0;
}

p {
    margin: 10px 0;
}

img {
    width: 100%;
}

h1.logo:hover {
    cursor: pointer;
}

/* Navbar */
.navbar {
    background-color: var(--primary-color);
    color: #fff;
    height: 70px;
}

.navbar ul {
    display: flex;
}

.navbar a {
    color: #fff;
    padding: 10px;
    margin: 0 5px;
}

.navbar a:hover, .navbar li.active a {
    border-bottom: solid 2px #fff;
}

.navbar .flex {
    justify-content: space-between;
}

/* Showcase */
.showcase {
    height: 200px;
    background-color: var(--primary-color);
    color: #fff;
    position: relative;
}

.showcase.login {
    height: 350px;
}

.showcase h1 {
    font-size: 40px;
}

.showcase p {
    margin: 20px 0;
}

.showcase .grid {
    grid-template-columns: 100%;
    margin: 0 auto;
    overflow: visible;
}

.col-3-1 {
    grid-template-columns: 75% 25%;
    display: flex;
    margin: 0 auto;
    overflow: visible;
}

.showcase-form {
    position: relative;
    top: 50px;
    min-height: 300px;
    width: 400px;
    padding: 40px;
    z-index: 100;
}

.showcase-form .form-control {
    margin: 30px 0;
}

.showcase-form input[type="text"], .showcase-form input[type="password"] {
    border: 0;
    border-bottom: 1px solid #b4becb;
    width: 100%;
    padding: 3px;
    font-size: 16px;;
}

.showcase-form input:focus {
    outline: none;
}

.showcase::before, .showcase::after {
    content: '';
    position: absolute;
    height: 100px;
    bottom: -70px;
    right: 0;
    left: 0;
    background: #f0f0f0;
    transform: skewY(-3deg);
    -webkit-transform: skewY(-3deg);
    -moz-transform: skewY(-3deg);
    -ms-transform: skewY(-3deg);
}

.showcase-form .form-alert {
    padding: 5px 15px;
    margin-top: 20px;
    font-size: 0.9em;
    font-weight: bold;
    border-radius: 5px;
    background-color: #f6f6f6;
    border: solid 1px #e0e0e0;
    display: none;
}
.showcase-form .form-alert.error {
    color: var(--error-color);
}
.showcase-form .form-alert.success {
    color: var(--success-color);
}

/* Bestand Übersicht */
.cardbestand {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    color: #555;
}

.cardbestand ul li {
    display: inline;
}

.cardbestand ul.overview-bestand li {
    padding-right: 60px;
}

.cardbestand ul.overview-bestand li span {
    font-weight: bold;
}

.cardbestand .buttonarea {
    padding-left: 210px;
}


/* DataTables */
.tablecard {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
    color: #555;
}

.tablecard .btn {
    padding: 4px 8px 5px 10px;
}

.card .btn i.fas, .card .btn i.fa {
    font-size: 0.7rem;
}

.tablecard input[type="search"]  {
    border: 0;
    border-bottom: 1px solid #b4becb;
    padding: 3px;
    font-size: 16px;
    font-size: 0.8rem;
    color: #555;
    min-width: 200px;
}

.tablecard input:focus {
    outline: none;
}

.table.dataTable {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
    color: #555;
    width:100%;  
}

.dataTables_filter, .dataTables_length {
    margin-bottom: 20px;
}

.dataTables_length {
    margin-right: 20px;
}

button.dt-button, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button, .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #e6e6e6;
    color: #777 !important;
    padding: 5px 10px !important;
    border: solid 1px #d0d0d0;
    border-radius: 5px;
    font-size: 0.8rem;
    line-height: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: var(--secondary-color) !important;
    font-weight: bold;  
    border: solid 1px var(--secondary-color);
}


button.dt-button:hover:not(.disabled), .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover, .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border: solid 1px #ccc;
    background: #e0e0e0;
    color: var(--secondary-color) !important;
}

table.dataTable.no-footer, table.dataTable thead th {
    border-bottom: solid 1px rgba(86,100,196,0.5);
}

table.dataTable thead th {
    text-align: left;
    padding-left: 10px;
}

.dataTables_info, .dataTables_paginate {
    margin-top: 20px;
}

table.dataTable tr.negative td {
    color: var(--error-color);
}

table.dataTable tbody tr.selected, 
table.dataTable.display tbody tr.even.selected>.sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_1, table.dataTable.display tbody tr.odd.selected>.sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_1 {
    background-color: rgba(57, 190, 53, 0.2) !important;
}


/* Main Mask */
.mainmask {
    position: relative;
}

.feedbackwrapper {
    display: none;
}

.feedback {
    position: absolute;
    right: 20px;
    top: 20px;
    padding: 10px 20px;
    display: none;
    background-color: #f6f6f6;
    border-radius: 10px;
    font-weight: bold;
}

.feedback.success {
    display: block;
    color: #209e6e;
    border: dotted 1px #46b68b;
}

.feedback.error {
    display: block;
    color: #900000;
    border: dotted 1px #900000;
}

h2 {
    color: var(--primary-color);
    font-weight: bold;
    margin-bottom: 50px
}

.mainmask-grid {
    margin: 20px;
    display: grid;
    grid-template-columns: 320px 320px 320px;
    grid-template-rows: repeat(4, 90px);
    grid-template-areas: "field1 field8 field8"
                         "field2 field3 field4"
                         "field5 field6 field6"
                         "field7 field7 field7";
}

.field1 {grid-area: field1;}
.field2 {grid-area: field2;}
.field3 {grid-area: field3;}
.field4 {grid-area: field4;}
.field5 {grid-area: field5;}
.field6 {grid-area: field6;}
.field7 {grid-area: field7;}
.field8 {grid-area: field8;}

.form-field {
    margin-bottom: 30px;
} 

.mainmask label {
    display: inline-block;
    width: 100px;
}

.mainmask input {
    border: 0;
    border-bottom: 1px solid #b4becb;
    padding: 3px;
    font-size: 16px;
    color: #333;
}

.mainmask input:focus {
    outline: none;
}

#txtBemerkung {
    width: 87%
}

.maskbuttons .btn {
    padding: 10px 18px;
    min-width: 120px;
    font-weight: bold;
}

.maskbuttons .btn-primary i.fas, .maskbuttons .btn-secondary i.fas {
    padding-right: 7px;
}