body {
    background-color: #f2f2f2;
}

table, tr, th, td {
    border:none;
}

.container-fluid {
    margin-top: 0.7em;
}

.container {
    max-width: 100%;
}

.jumbotron.inspeya {
    margin:auto;
    text-align: center;
}

.jumbotron.inspeya img {
    max-width: 700px;
}

ul.us_menu.horizontal {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    box-shadow: 0px 0px 6px 0px #ccc;
}

ul.us_menu .dropdown-divider {
    border:none;
    margin: 1rem 0;
}

.left-submenu-item {
    font-size: smaller;
    /* padding-left: 0.5em; */
}

.left-menu-box {
    background-color: #fff;
}

.us_menu.vertical {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: var(--bs-card-border-radius);
}

li.active {
    background: #eee;
}

li.no-active-style {
    background: #fff;
}

.form-control::placeholder {
    color: #ddd;
}

.content-box {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 1em;
    border-radius: var(--bs-card-border-radius);
    margin-bottom:1.5em;
}

.content-frame {
    padding: 1em;
    margin-bottom:1.5em;
}

.chart-box {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 1em;
    border-radius: var(--bs-card-border-radius);
    margin-bottom:1.5em;
}

.head-stats {
    margin-bottom: 1.5em;
}

.head-stats .card-body {
    margin: 24px 0px 0px;
    color: #fff;
}

.head-stats .card.logo {
    margin: 0px 0px;
    padding:15px;
}

span.round-box {
    background-color: #ffffffdd;
    color: #666;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    display: block;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    float: left;
    margin-right: 6%;
}

.head-stats-logo {
    height: 100px;
}

.stats-card-footer {
    height: 24px;
    font-size:0.8em;
    text-align: right;
    padding: 0px 12px;
    color: #fff;
}

.stats-card-footer a {
    text-decoration: none;
    color: inherit;
}

table#cases-table, table#corporations-table, table#corporations-access-table {
    border: transparent;
    border-collapse: collapse;
    font-size:0.8em;
}

table#cases-table td, table#corporations-table td, table#corporations-access-table td {
    padding: 3px 10px;
    border-collapse: collapse;
}

table#cases-table td .btn.btn-sm, table#corporations-table td .btn.btn-sm, table#corporations-access-table td .btn.btn-sm {
    font-size: 0.8em;
}

table#cases-table tbody, table#corporations-table tbody, table#corporations-access-table tbody {
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    margin: 5px 0px;
}

.filter-control {
    padding: 5px;
}

table#cases-table thead th .th-inner, table#corporations-table thead th .th-inner, table#corporations-access-table thead th .th-inner {
    padding: 0.75rem;
}

span.tag {
    display: inline-block;
    border:1px solid rgba(0, 0, 0, 0.175);
    border-radius:4px;
    font-size: 0.7em;
    padding: 0px 5px;
    margin: 0px 2px;
    color:#fff;
}

span.tag-new {
    background-color: rgb(13, 202, 240);
}
span.tag-alert {
    background-color: rgb(185, 8, 8);
}

span.tag-unassigned {
    background-color: rgb(255, 253, 207);
    color:#333;
}

span.tag-priority-niedrig {
    background-color: rgb(4, 114, 17);
}
span.tag-priority-mittel {
    background-color: rgb(221, 140, 8);
}
span.tag-priority-hoch {
    background-color: rgb(240, 13, 13);
}
span.tag-priority-risiko {
    background-color: rgb(240, 13, 172);
}

span.tag-status-offen {
    background-color: rgb(13, 202, 240);
}
span.tag-status-geschlossen {
    background-color: rgb(0, 0, 0);
}
span.tag-status-bearbeitung {
    background-color: rgb(25, 135, 84);
}
span.tag-status-partnerbearbeitung {
    background-color: rgb(25, 40, 135);
}
span.tag-status-externbearbeitung {
    background-color: rgb(87, 25, 135);
}
span.tag-status-wartenaufdaten {
    background-color: rgb(135, 25, 36);
}
span.tag-status-geparkt {
    background-color: rgb(92, 90, 94);
}
span.tag-status-live {
    background-color: rgb(34, 135, 25);
}

span.tag-csize-1 {
    background-color: rgb(95, 160, 198);
}
span.tag-csize-10 {
    background-color: rgb(196, 198, 95);
}
span.tag-csize-50 {
    background-color: rgb(97, 198, 95);
}
span.tag-csize-100 {
    background-color: rgb(95, 121, 198);
}
span.tag-csize-500 {
    background-color: rgb(210, 112, 64);
}
span.tag-csize-1000 {
    background-color: rgb(198, 95, 165);
}

span.tag-right {
    display: block;
    float: right;
}

span.rtag-agent {
    color: #fff;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.175);
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background-color: #018c10;
    line-height: 22px;
    text-align: center;
    padding: 0px;
    font-size: 0.6rem;
}

span.tag-xl-permission {
    background-color: #d40c0c;
    font-size: 0.9em;
    font-weight: 300;
    margin:0px 5px;
}

span.tag-changer {
    cursor:pointer;
}

span.tag-big {
    margin: 0.4em;
    font-size: 1em;
}

h6.permission, h6.mailto {
    float: left;
    margin-right: 20px;
    line-height: 29px;
}

.thread-icon {
    float: left;
    width: 60px;
    height: 60px;
    margin-top: 30px;
    text-align: center;
}

.thread-icon img {
    position: relative;
    z-index: 99;
}

.thread-icon-line {
    background-color: #a2a2a2;
    background-image: url('/usersc/templates/hgss/assets/images/line_bg.png');
    background-repeat: repeat-y;
    position: absolute;
    width: 2px;
    height: 100%;
    margin-left: -112px;
    margin-top: 36px;
}

.thread-box {
    position: relative;
    border: 1px solid #707070;
    border-radius: 8px;
    margin-top: 30px;
    margin-left: 100px;
    padding: 20px 40px;
    line-height: normal;
    box-shadow: 0px 2px 5px #ddd;
}

.thread-box-header {
    font-size: 0.8em;
    margin-bottom: 1.5em;
}

span.thread-box-header-date {
    margin-right:10px;
    letter-spacing: -0.009dvb;
}

span.permission-tag {
    display:inline-block;
    padding:1px 4px;
    border:1px solid #707070;
    border-radius: 3px;
    margin:0px 2px;
    font-size:0.9em;
}

span.file-attachment {
    width: 30px;
    height: 30px;
    float: right;
    border: 1px solid #707070;
    border-radius: 4px;
}

span.file-attachment:hover {
    border-color:#684c4c;
    box-shadow: 0px 0px 6px 0px #684c4c;
    cursor:pointer;
}

span.h-spacer {
    font-weight: normal;
    color: #666;
    margin-right: 20px;
}

span.hlabel {
    font-weight: 600;
    color: #666;
    display: inline-block;
    width: 150px;
}

.tox-tinymce {
    border: 1px solid #707070 !important;
    box-shadow: 0px 2px 5px #ddd !important;
}

.tox:not(.tox-tinymce-inline) .tox-editor-header {
    box-shadow: none !important;
    border-bottom: 1px solid #707070 !important;
}

.phase-h {
    display: inline-block;
    position: relative;
    top: 2px;
    margin-right: 25px;
}

.phase-status .btn-outline-secondary:hover {
    text-decoration: none;
    background-color: inherit;
    color: inherit;
}

.phase-status .btn {
    cursor:default;
}

.h-dash {
    display: inline-flex;
    width: 25px;
    height: 2px;
    background-image: url('/usersc/templates/hgss/assets/images/line_hz_bg.png');
    background-repeat: repeat-x;
    position: relative;
    top: -3px;
}

.btn-link.small-link {
    text-decoration: none;
    padding:0px;
}

.type-radio-box {
    background-color: #fff;
    border: 1px solid #ccc;
    border-bottom: none;
}

.type-radio-box label.btn-outline-success {
    padding: 0px 20px;
    border: none;
    border-radius: 0;
    color: #333;
}

.radio-img {
    display: inline-block;
    width:50px;
    height:50px;
    padding:5px;
}

.content-box.permission, .content-box.mailto {
    padding: 0.4em 1em;
    height: 45px;
}

.content-box.permission label.btn {
    padding: 0px 10px;
    margin-top: 2px;
    font-size: 0.9em;
}

.content-box.mailto select#mailto {
    display: inline-block;
    width:auto;
}

.message-submit {
    margin-top: 1em;
    text-align: right;
}

select#next_phase {
    display: inline-block;
    width: auto;
}

.row.input-row {
    border:1px solid #666;
    border-radius:8px;
    margin: 0.5em 0.1em 0.7em;
}
.row.input-row div {
    padding:0em;
    margin: 0.4em 1em;
}


/* file-upload */
.content-box.drag-file {
    margin-top: 1.5em;
}

.file-upload {
    margin: 0 auto;
}

.file-upload-btn {
    width: 100%;
    margin: 0;
    border: none;
    padding: 10px;
    border-radius: 4px;
    transition: all .2s ease;
    outline: none;
}

.file-upload-btn:hover {
    /* background: #1AA059; */
    color: #ffffff;
    transition: all .2s ease;
    cursor: pointer;
}

.file-upload-btn:active {
    border: 0;
    transition: all .2s ease;
}

.file-upload-content {
    display: none;
    text-align: center;
}

.file-upload-input {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

.image-upload-wrap {
    margin-top: 20px;
    border: 2px dashed #d6d6d6;
    position: relative;
}

.image-dropping,
.image-upload-wrap:hover {
    background-color: #d6d6d6;
    border: 2px dashed #d6d6d6;
}

.image-title-wrap {
    padding: 0 15px 15px 15px;
    color: #222;
}

.image-title {
    font-weight: bold;
}

.drag-text {
    text-align: center;
}

.drag-text h3 {
    font-weight: 100;
    padding: 60px 0;
    font-size:20px;
}

.file-upload-image {
    max-height: 400px;
    max-width: 300px;
    margin: auto;
    padding: 20px;
}

.remove-image {
    margin: 0;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 4px;
    transition: all .2s ease;
    outline: none;
    text-transform: none;
    background: #6c6c6c;
}

.remove-image:hover {
    transition: all .2s ease;
    cursor: pointer;
}

.remove-image:active {
    border: 0;
    transition: all .2s ease;
}
/*  */

.process-chart img {
    max-width: 100%;
}

.small-sub {
    font-size: 0.6em;
    margin: 0em;
    margin-top: -5px;
    display: inherit;
    margin-bottom: 10px;
    font-weight: 200;
}

.quellen-chart {
    min-height: 12em;
}

.quellen-chart-row {
    font-size: 0.8em;
    padding: 0.3em 0.1em;
}

span.quellen-badge {
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 4px;
    font-size: 0.7em;
    padding: 0px 5px;
    color: #fff;
    background-color: #018c10;
    margin-right: 1em;
    min-width: 24px;
    text-align: center;
}

.react-chart {
    min-height: 12em;
}

.react-chart-row {
    text-align: center;
}

.react-chart-row img.dash {
    max-height: 190px;
    position: relative;
}

.fullsize-chart .react-chart-row img.dash {
    max-height: 400px;
    position: relative;
}

.fullsize-chart canvas, .fullsize-chart div {
    max-height: 400px;
}

#assign-agent {
    padding: 0em 0.5em;
}

h4.contact-h4 {
    margin-top: 0.5em;
    margin-bottom: 1em;
}

#accordion-plan .accordion-button, #accordion-branch .accordion-button {
    padding-left: 50px;
}

#accordion-plan .accordion-body, #accordion-branch .accordion-body {
    font-size:0.75em;
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
}

.form-check-input.me-1 {
    position: absolute;
    z-index: 999;
    width: 25px;
    height: 25px;
    margin-top: 13px;
    margin-left: 10px;
}

.small-thin {
    letter-spacing: -0.009dvb;
    font-weight: 100;
    line-height: 1.2em;
    font-size: 0.9em;
}

h5.corp-h5 {
    padding: 1em;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin: 1.2em 0;
}

.accordion-button:focus {
    outline: none;
    box-shadow: none;
    border-color: transparent;
}

.template-area {
    font-family:monospace;
    font-size: 0.7em;
}

.jsoned {
    width: 100%;
    height: auto;
    min-height: 100px;
    font-size: 0.7em;
    padding:1em;
    border-radius: 4px;
}

.jsoned-error {
    background-color: #6f0000;
}

.json-error {
    color:red;
    font-weight: bold;
}