.tradevaluestable {
    border-collapse: collapse;
    text-align: left;
    margin: auto;
    font-size: inherit;
    margin-bottom: 1em;
    width: 100%;
}

    .tradevaluestable th, .tradevaluestable td span {
        padding: 5px;
    }

        .tradevaluestable th:nth-child(1), .tradevaluestable td:nth-child(1) {
            width: 20px;
            border: 0;
            padding: 0 !important;
        }

        .tradevaluestable th.r {
            text-align: right;
        }

    .tradevaluestable .tv_amount {
        text-align: right;
    }

    .tradevaluestable tr:hover {
        background-color: #FFA;
    }

    .tradevaluestable td, .tradevaluestable th {
        border: dotted 1px #CCC;
    }

        .tradevaluestable td.tv_name, .tradevaluestable td.tv_itemnumber, .tradevaluestable td.tv_payclause, .tradevaluestable td.tv_cell {
            border: solid 1px #999;
            background-color: rgba(255, 252, 128, 0.3);
        }

        .tradevaluestable td.tv_comment {
            background-color: rgba(255, 252, 128, 0.3);
        }

        .tradevaluestable td.tv_name input, .tradevaluestable td.tv_itemnumber input, .tradevaluestable td.tv_payclause input {
            padding: 5px;
            border: 0px solid transparent;
            border-bottom: 3px solid transparent;
            background-color: transparent;
            transition: border-color 0.5s;
            font-family: inherit;
            font-size: inherit;
            width: 100%;
        }

        .tradevaluestable td.tv_cell input {
            padding: 5px;
            font-family: inherit;
            font-size: inherit;
            border: 0px solid transparent;
            border-bottom: 3px solid transparent;
            background-color: transparent;
            text-align: right;
            transition: border-color 0.5s;
            text-align: right;
            width: 100%;
        }

        .tradevaluestable td.tv_comment {
        }

    .tradevaluestable th {
    }

    .tradevaluestable td.tv_comment input {
        padding: 5px;
        font-family: 'Open Sans', Arial, sans-serif;
        border: 0px solid transparent;
        border-bottom: 3px solid transparent;
        background-color: transparent;
        transition: border-color 0.5s;
        font-family: inherit;
        font-size: inherit;
        width: 100%;
    }
.jobcard details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;
    margin-bottom: .5em;
}

.jobcard summary {
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
}

.jobcard details[open] {
    padding: .5em;
}

    .jobcard details[open] summary {
        border-bottom: 1px solid #aaa;
        margin-bottom: .5em;
    }

.timesheettable {
    background-color: #FFF;
    width: 100%;
    text-align: left;
}

    .timesheettable tr:nth-child(odd) {
        background-color: #DDD;
    }

    .timesheettable input {
        width: 60px;
        padding: 3px;
        text-align: center;
        font-family: inherit;
        font-size: inherit;
    }


.BottomPopup {
    position: fixed;
    width: 380px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    border: solid 1px cornflowerblue;
    padding: 6px;
    background-color: white;
}

    .BottomPopup textarea {
        display: block;
        margin-bottom: 6px;
        width: 100%;
        height: 300px;
    }

    .BottomPopup input[type=submit] {
        padding: 6px 12px;
        background-color: cornflowerblue;
        color: white;
        border: 0;
    }

        .BottomPopup input[type=submit]:not(:last-child) {
            margin-right: 3px;
        }

.ZoomOnHover {
    transition: transform .7s ease-in-out;
}
    .ZoomOnHover:hover {
        transform: /*rotate(360deg) */ scale(1.5);
    }

.ShowOnHover {
    opacity: 5%;
}
tr:hover svg.ShowOnHover {
    opacity: 100%;
}

.fullwidthbtn {
    display: block;
    padding: 2ch;
    background-color: #6e0086;
    color: white;
    margin-bottom: 2px;
    text-align:center;

}