@CHARSET "UTF-8";

/*
  DFB GMBH colors:
  
  NAME         | RGB         | HEX
  
  primary ----------------------------
  green        |   0/150/ 90 | #00965a
  light green  |  32/174/128 | #20ae80
  grey         | 135/135/135 | #878787
  
  secondary --------------------------
  light green  | 155/220/200/45% | rgba  (#d2efe6 = no alpha, white bg)
  light grey   | 210/210/210 | #d2d2d2
  blue         |  32/117/182 | #2075b6   (previous #004187)  
  light blue   | 165/210/240 | #a5d2f0
  red          | 230/  0/  0 | #e60000
  yellow       | 255/204/  0 | #ffcc00
*/

FORM {
    margin: 0px;
    padding: 0px;
}

body.container > .row {
    position: relative;
    height: initial;
    min-height: 100%;
    background-color: #FFF;
    padding-left: 0;
    padding-right: 0;
    line-height: inherit;
}

.scrolltop {
    position: fixed;
    bottom: -100%;
    right: 20px;
    background-color: black;
    color: white;
    width: 50px;
    height: 50px;
    display: flex;
    opacity: 0;
    align-items: center;
    border: 2px solid #FFFFFF;
    border-radius: 25px;
    cursor: pointer;
    z-index: 1100;
    transition: opacity .4s 0s, bottom 0s .5s;
}
body.scroller .scrolltop {
    transition: opacity .4s .2s, bottom 0s;
    bottom: 45px;
    opacity: 1;
}
body.scroller.bottom-fix .scrolltop {
    bottom: 80px;
}

.scrolltop span, .scrolltop i {
    margin: auto;
}
.popover {
    font-family: DFBSansWeb,sans-serif;
    text-rendering: optimizeLegibility;
}
.page-head {
    clear: both;
    width: 100%;
    height: 90px;
    position: relative;
    top: 0px;
    left: 0px;
    border-bottom: 2px solid #24ad80;
}
.admin .page-head, .user .page-head {
    position: absolute;
    margin-right: auto;
    margin-left: auto;
    background-color: #ffffff;
    z-index: 500;
}
.page-head .logo {
    position: absolute;
    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
}
.page-head .logo.dfbnet {
    top: 10px;
    left: 15px;
    width: 140px;
    height: 70px;
    background-image: url(../../images/dfbnet3a.png);
}
.page-head .logo.sm {
    top: 25px;
    left: auto;
    right: 15px;
    width: 160px;
    height: 40px;
    background-image: url(../../images/sm_logo7b.png);
}

.menu-top {
    position: absolute;
    top: 90px;
    width: 100%;
    min-height: 45px;
    background-color: #F0F0F0;
    z-index: 9900;
}
.menu-fix .menu-top {
    position: fixed;
    top: 0;
    box-shadow: 0 1px 9px -2px rgba(0,0,0, 0.5);
}
.menu-top .logo.sm {
    position: absolute;
    top: 1px;
    left: 10px;
    right: 15px;
    width: 160px;
    height: 40px;
    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    background-image: url(../../images/sm_logo7b.png);
    transition: opacity .3s;
    opacity: 0;
    pointer-events: none;
}
.menu-fix .menu-top .logo.sm {
    opacity: 1;
    pointer-events: auto;
}
.menu-top .menu-btn, .menu-top .menu-btn:focus,
.menu-top .menu-btn:active:focus, .menu-top .menu-btn:active:hover {
    color: #999999;
    left: auto;
    right: 0;
}
.menu-container.menu-open {
    z-index: 10600;
}
.fa-stack > .fa-stack-1x {
    font-size: inherit;
}
.fa-stack.fa-stack-xs {
    font-size: 0.7em;
}

/* ############################# */
/* DATEPICKER */
.datepicker {
    z-index: 11000;
    margin-bottom: 20px;
}
.dropdown-menu.datepicker-dropdown {
    overflow-y: visible;
    margin-top: 5px;
}
.datepicker table tr td, .datepicker table tr th,
.datepicker table tr td span {
    border-radius: 0;
}
.datepicker table tr td.today {
    color: #FFFFFF;
    border-color: #549c85;
    background-color: #b0b3b2;
}
.datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:active {
    background-color: #d1d3d2;
}
.datepicker table tr td.today:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:active:hover {
    color: #FFFFFF;
    border-color: #1f926c;
    background-color: #1f926c;
}
.datepicker table tr td.highlighted.disabled,
.datepicker table tr td.highlighted.disabled:active,
.datepicker table tr td.highlighted {
    border-color: #E5E5E5;
    background-color: #F0F0F0;
}
.datepicker table tr td.highlighted.active,
.datepicker table tr td.highlighted:active,
.datepicker table tr td.highlighted:active:focus,
.datepicker table tr td.highlighted:active:hover,
.datepicker table tr td.highlighted:hover {
    border-color: #E0E0E0;
    background-color: #E0E0E0;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover,
.datepicker table tr td.highlighted.disabled,
.datepicker table tr td.highlighted.disabled:active {
    color: #AAAAAA;
}
.datepicker table tr td span.active.active, .datepicker table tr td span.active.active:hover,
.datepicker table tr td span.active:hover.active:hover, .datepicker table tr td span.active:hover.active:focus,
.datepicker table tr td span.active:hover:active:hover,
.datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active,
.datepicker table tr td.active.highlighted:active, .datepicker table tr td.active:active,
.datepicker table tr td.active.active.focus, .datepicker table tr td.active.active:focus,
.datepicker table tr td.active.active:hover, .datepicker table tr td.active.highlighted.active.focus,
.datepicker table tr td.active.highlighted.active:focus, .datepicker table tr td.active.highlighted.active:hover,
.datepicker table tr td.active.highlighted:active.focus, .datepicker table tr td.active.highlighted:active:focus,
.datepicker table tr td.active.highlighted:active:hover, .datepicker table tr td.active:active.focus,
.datepicker table tr td.active:active:focus, .datepicker table tr td.active:active:hover {
    color: #FFFFFF;
    border-color: #24ad80;
    background-color: #24ad80;
    text-shadow: none;
}

/* ############################# */
input.has-datepicker, input.has-timepicker {
    cursor: pointer;
}
.clockpicker-popover {
    border-radius: 0;
    margin-top: 5px !important;
}
.clockpicker-popover.popover>.arrow {
    border-width: 7px;
}
.clockpicker-popover.popover>.arrow:after {
    border-width: 6px;
}
.clockpicker-popover.clockpicker-align-left.popover>.arrow {
    left: 18px;
}
.clockpicker-popover.popover.bottom>.arrow {
    top: -14px;
}
.clockpicker-popover.popover.bottom>.arrow:after {
    top: -5px;
    margin-left: -6px;
}
.clockpicker-popover .popover-title {
    padding: 14px;
    background-color: #24ad80;
    border-radius: 0;
}
.clockpicker-popover .popover-title div:first-child {
    font-size: 32px;
    font-weight: normal;
}
.clockpicker-plate {
    background-color: #F5F5F5;
}
.clockpicker-tick.inner {
    font-size: 12px;
}
.clockpicker-tick,
.clockpicker-minutes .clockpicker-tick.inner {
    color: #333;
    font-size: 14px;
}
.clockpicker-tick.active,
.clockpicker-tick:hover:not(.disabled) {
    background-color: #24ad80;
    color: #fff !important;
}
/* SVG values */
.clockpicker-svg .clockpicker-canvas-bearing,
.clockpicker-svg .clockpicker-canvas-fg {
    fill: none;
}
.clockpicker-canvas line {
    stroke: #24ad80;
}
.clockpicker-canvas-bg {
    fill: #24ad80;
}

div.smbox .container-fluid .row {
    margin-right: -5px;
    margin-left: -5px;
}

div.smbox .container-fluid {
    padding-left: 5px;
    padding-right: 5px;
}

div.smbox .form-group, .sm-panel .form-group {
    margin-right: 0px;
    margin-left: 0px;
}
.form-group {
    position: relative;
}

.smbox [class*="col-lg-"], .smbox [class*="col-md-"], .smbox [class*="col-sm-"], .smbox [class*="col-xs-"],
.sm-panel [class*="col-lg-"], .sm-panel [class*="col-md-"], .sm-panel [class*="col-sm-"], .sm-panel [class*="col-xs-"] {
    padding-right: 5px;
    padding-left: 5px;
}

.row.clean-row {
    margin-right: inherit;
    margin-left: inherit;
}

/* EXPERIMENTAL */
.row.equal-cols {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.row.equal-cols:before,
.row.equal-cols:after {
  display: block;
}
.row.equal-cols > [class*='col-'] {
  display: flex;
  flex-direction: column;
  align-self: center;
}
.row.equal-cols > [class*='col-'] > * {
  
}
.row.equal-cols .sm-btn, .row.equal-cols .sm-btn-icon {
    align-self: center;
    position: relative;
}
.row.equal-cols .sm-btn-icon:not(.sm-btn) .fas,
.row.equal-cols .sm-btn-icon:not(.sm-btn) .far {
    position: relative;
    bottom: -1px;
}
/**/

.form-group.single-row, .form-group.single-check-row {
    margin-bottom: 0;
}
.form-horizontal .single-check-row .radio,
.form-horizontal .single-check-row .checkbox,
.form-horizontal .single-check-row .radio-inline,
.form-horizontal .single-check-row .checkbox-inline {
    padding-bottom: 7px;
}
.checkbox.single-check {
    padding-top: 0;
}

.glyphicon-question-sign, .fa-question-circle {
    color: gray;
}

.glyphicon.cell_help, .fas.cell_help, .far.cell_help {
    margin-left: 8px;
}

.form-group-xs .form-control,
.form-group-xs .form-control-static {
    height: 25px;
    padding: 3px 8px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 0;
}
.form-group-xs .form-control-static {
    padding: 4px 8px;
    min-height: 32px;
}

.form-group-xs select.form-control {
    padding: 4px 5px;
}

.select-wrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.select-wrapper select::-ms-expand {
    display: none;
}
.select-wrapper {
    position: relative;
}
.select-wrapper::before {
    content: '\f0dd';
    font-family: Font Awesome\ 5 Free !important;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    display: inline-block;
    position: absolute;
    right: 7px;
    top: 3px;
    pointer-events: none;
    z-index: 1;
}
.input-group-btn > .select-wrapper::before {
    color: #FFFFFF;
    top: 1px;
}
.input-group-btn > .select-wrapper:hover::before {
    color: #24ad80;
}
.form-horizontal .select-wrapper select.form-control {
    line-height: 17px;
}
    
.input-group-addon.has-select {
    padding: 0;
    border: 0;
}

.input-group-addon.has-select select {
    font-size: 12px;
    padding: 5px 12px;
    background-color: #eee;
    border: 1px solid #ccc;
    height: 30px;
    line-height: 30px;
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

#menu {
    top: 0;
    bottom: 40px;
    left: auto;
    right: auto;
    max-height: 100%;
    overflow: auto;
}

div#menubody {
    margin-top: 140px;
    margin-bottom: 100px;
}

.bodyNavi.selector-visible {
    min-height: 660px;
}

.menu-btn {
    border-color: #ddd;
    text-shadow: none;
    background-image: none;
    height: 45px;
    width: 60px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: auto;
    left: auto;
    border: none;
    box-shadow: none;
    background-color: transparent !important;
    border-radius: 0;
    outline: none;
}
.menu-btn:focus, .menu-btn:active, .menu-btn:active:focus {
    outline: none;
    box-shadow: none;
}
.menu-btn .fas,
.menu-btn .far {
    font-size: 1.5em;
}
.bodyNavi .menu-btn {
    margin-top: 13px;
}

.bodyNavi #logout .infoLabel {
    width: 85px;
}

.bodyNavi .bottomInfo {
    margin-top: 30px;
}

div.siteTitle {
    width: 100%;
    height: 50px;
    padding-top: 10px;
}

h1,h2,h3,h4,h5,h6 {
    font-family: DFBSansWeb, Verdana, Arial, sans-serif;
    text-transform: uppercase;
}
.siteTitle h3, .modal .modal-header h3 {
    text-transform: none;
}

.smbox h6 {
    margin-left: 5px;
    font-size: 14px;
}

.smbox h1 span.glyphicon, .smbox h2 span.glyphicon, .smbox h3 span.glyphicon,
.smbox h4 span.glyphicon, .smbox h5 span.glyphicon, .smbox h6 span.glyphicon {
    font-size: 11px;
}

h3 {
  margin: 0px;
  font-size: 18px;
}

.siteTitle h3 {
    font-size: 28px;
}

h4 {
  font-size: 16px;
}

h5 {
  margin: 0px;
  font-size: 14px;
}
.subtitle {
    color: #777777;
}
h1+.subtitle, h2+.subtitle, h4+.subtitle, h6+.subtitle {
    margin-top: -7px;
    margin-bottom: 7px;
}
h1.green, h2.green, h3.green, h4.green, h5.green, h6.green {
    padding: 10px;
    background: #4EDAAE;
}

input:not([type]):not(.form-control), input[type=text]:not(.form-control), input[type="password"]:not(.form-control),
input[type=date]:not(.form-control), input[type="datetime"]:not(.form-control), input[type=datetime-local]:not(.form-control),
input[type="email"]:not(.form-control), input[type=month]:not(.form-control), input[type="number"]:not(.form-control),
input[type=search]:not(.form-control), input[type="tel"]:not(.form-control), input[type=time]:not(.form-control),
input[type="week"]:not(.form-control), input[type="url"]:not(.form-control), textarea:not(.form-control) {
    border-radius: 0;
    padding: 3px 4px;
    border: 1px solid rgba(0,0,0,0.2);
    box-sizing: border-box;
}

input.checkbox {
    float: left;
    height: 16px;
    width: 15px;
    margin: 1px 3px;
}

/* ############################# */
/* ANIMATIONS */
@keyframes anim-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-30px); }
    60% { transform: translateY(-15px); }
}
@keyframes anim-jump {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
}
.bouncing, .bouncing-fast {
    animation-name: anim-bounce;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
}
.bouncing-fast {
    animation-duration: 1s;
}
.jumping, .jumping-fast {
    animation-name: anim-jump;
    animation-iteration-count: infinite;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
}
.jumping-fast {
    animation-duration: .5s;
}

/* ############################# */
/* TOGGLE-STRIKE-ICONS */
[data-toggle-strike] i {
    position: relative;
}
[data-toggle-strike] i:after {
    content: "";
    display: block;
    position: absolute;
    top: calc(100% + 0px);
    left: 0;
    width: 0;
    height: 2px;
    border-radius: 5px;
    background-color: #FFFFFF;              /* override color to fit your needs, defaults to sm-btn */
    box-shadow: 0px -1.5px 0px 1px #20ae80; /* override color to fit your needs, defaults to sm-btn */
    transform: rotate(-40deg);
    transform-origin: bottom left;
    transition: width .2s linear;
    animation: toggle-strike-in .2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
[data-toggle-strike=lower] i:after {
    top: calc(100% + 2px);
}
[data-toggle-strike]:hover i:after {
    background-color: #20ae80;
    box-shadow: 0px -2px 0px 0px #FFFFFF; /* override color to fit your needs, defaults to sm-btn */
}
[data-toggle-strike].strike-active i:after {
/*     width: 23px; */
    animation: toggle-strike-out .2s cubic-bezier(0.65, 0.05, 0.36, 1) 1 both;
}
@keyframes toggle-strike-in {
    0%  { width: 0;    opacity: 0; }
    1%  { width: 0;    opacity: 1; }
    100%{ width: 23px; opacity: 1; }
}
@keyframes toggle-strike-out {
    0%  { width: 23px; opacity: 1; }
    99% { width: 0;    opacity: 1; }
    100%{ width: 0;    opacity: 0; }
}

/* ############################# */
/* CUSTOM CHECKBOX within labels */
/* .nt = no-transform            */
/* label.t = transform */

.radio label.t, .checkbox label.t,
label.t.radio-inline, label.t.checkbox-inline {
    padding-left: 0;
    white-space: nowrap;
}
label.t {
    position: relative;
}
label.t input[type=checkbox]:not(.nt),
label.t input[type=radio]:not(.nt) {
/*    display: none; */
    opacity: 0;
    position: absolute !important;
    z-index: 1;
    width: 16px;
    height: 16px;
    margin-left: 0;
    margin-top: 2px !important;
    top: auto !important;
    cursor: pointer;
}

label.t input[type=checkbox]:not(.nt):checked,
label.t input[type=radio]:not(.nt):checked,
label.t input[type=checkbox]:not(.nt):focus,
label.t input[type=radio]:not(.nt):focus {
    outline: none !important;
}

label.t input[type=checkbox]:not(.nt)+.lbl,
label.t input[type=radio]:not(.nt)+.lbl {
    position: relative;
    z-index: 11;
    display: inline-block;
    margin: 0;
    line-height: 20px;
    min-height: 14px;
    min-width: 14px;
    font-weight: normal;
    cursor: pointer;
    padding-left: 23px;
    padding-right: 4px;
    white-space: normal;
}
label.t input[type=checkbox][disabled]:not(.nt)+.lbl,
label.t input[type=radio][disabled]:not(.nt)+.lbl {
    pointer-events: none;
}

label.t input[type=checkbox]:not(.nt)+.lbl:before,
label.t input[type=radio]:not(.nt)+.lbl:before {
    font-family: Font Awesome\ 5 Free;
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    color: #000000;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    height: 12px; /* 10 */
    width: 12px; /* 10 */
    line-height: 14px; /* 9 */
    margin-right: 8px;
    margin-top: -5px; /* -2 */
    margin-left: -20px;
    background-color: #FFFFFF;
}

/* checkbox NOT CHECKED */
label.t input[type=checkbox]:not(.nt):not(:checked)+.lbl:before {
    content: "\f0C8";
}
/* checkbox CHECKED */
label.t input[type=checkbox]:not(.nt):checked+.lbl:before {
    content: '\f14a';
    font-weight: 900;
}
/* radio DEFAULT */
label.t input[type=radio]:not(.nt)+.lbl:before {
    content: '\f111';
}
/* radio NOT CHECKED */
label.t input[type=radio]:not(.nt):not(:checked)+.lbl::before {
    font-weight: normal;
}
/* radio CHECKED */
label.t input[type=radio]:not(.nt):checked+.lbl:before {
    font-weight: 900;
}
label.t input[type=checkbox]:not(.nt):disabled+.lbl:before,
label.t input[type=radio]:not(.nt):disabled+.lbl:before,
*[disabled] label.t input[type=checkbox]:not(.nt)+.lbl:before,
*[disabled] label.t input[type=radio]:not(.nt)+.lbl:before,
.disabled label.t input[type=checkbox]:not(.nt)+.lbl:before,
.disabled label.t input[type=radio]:not(.nt)+.lbl:before {
    color: #999999;
    background-color: #EEEEEE;
}
.has-error > label.t input[type=checkbox]:not(.nt)+.lbl,
.has-error > label.t input[type=radio]:not(.nt)+.lbl,
.has-error > label.t input[type=checkbox]:not(.nt)+.lbl:before,
.has-error > label.t input[type=radio]:not(.nt)+.lbl:before {
    color: #F00;
}
 
/* big */
label.t.big input[type=checkbox]:not(.nt)+.lbl:before,
label.t.big input[type=radio]:not(.nt)+.lbl:before {
    font-size: 21px;
    width: 17px;
    height: 17px;
    line-height: 17px;
}

/* single */
label.t.single input[type=checkbox]:not(.nt)+.lbl,
label.t.single input[type=radio]:not(.nt)+.lbl {
    padding-right: 0;
}

label.t.single input[type=checkbox]:not(.nt)+.lbl:before,
label.t.single input[type=radio]:not(.nt)+.lbl:before {
    margin-right: 0;
    margin-left: -23px;
}
label.t.big.single input[type=checkbox]:not(.nt)+.lbl:before,
label.t.big.single input[type=radio]:not(.nt)+.lbl:before {
    position: relative;
    top: 1px;
}

/* ############################# */

.form-control.sm-control {
    padding: 14px 12px 0px 12px;
    height: 40px;
}
.form-control.sm-control ~ .sm-control-label {
    position: absolute;
    left: 13px;
    top: 13px;
    margin: 0;
    color: #777777;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: .1em;
    pointer-events: none;
    transform: scale(1) translateY(0px);
    transform-origin: bottom left;
    transition: all .3s cubic-bezier(0.4,0,0.2,1);
    transition-property: color,bottom,transform;
}

.form-horizontal .form-group .form-control.sm-control ~ .sm-control-label {
    left: 28px;
}

.form-control.sm-control:-webkit-autofill ~ .sm-control-label {
    transform: scale(0.75) translateY(-16px);
}
.form-control.sm-control:focus ~ .sm-control-label,
.form-control.sm-control.smcf ~ .sm-control-label {
    transform: scale(0.75) translateY(-16px);
}

.alert {
    border-radius: 0;
}

.empty-hint, .empty-hint-low {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 104px;
    margin: 10px auto;
    font-style: italic;
}
.empty-hint-low {
    min-height: 0;
    margin: 10px auto;
}
.empty-hint .fas.bouncing, .empty-hint .far.bouncing {
    position: absolute;
    left: 50px;
    bottom: -20px;
    font-size: 40px;
    color: #CCC;
}

label {
    line-height: 16px;
    font-weight: normal;
}

.sm-label, .sm-toggle, .sm-pointer, .sm-check-trash, label[for] {
    cursor: pointer;
}

label[for] > span.glyphicon.glyphicon-question-sign {
    cursor: default;
}

input:not([type=submit]):not(.sm-control), .form-control:not(.sm-control), .form-control-static {
    font-size: 12px;
}

.form-horizontal .control-label {
    line-height: inherit;
}

.form-horizontal .form-group-sm .control-label {
    font-size: inherit;
}

.form-horizontal input:not([type=submit]):not(.sm-control), .form-horizontal .form-control:not(.sm-control), .form-horizontal .form-control-static {
    font-size: 12px;
}
.form-horizontal select.form-control {
    padding: 6px;
    font-size: 12px;
}

.btn-group>.btn {
    border-radius: 0;
}

.sm-form-btn-group .control-label {
    margin-top: 9px;
    padding-top: 0px;
}

.form-group-sm .form-control, .form-group-sm .form-control-static {
    padding: 5px 10px;
}
.form-group-sm .form-control-static {
    padding: 5px 10px;
}

.form-group-sm .input-group-sm > .form-control, .form-group-sm .input-group-sm > .input-group-addon, .form-group-sm .input-group-sm > .input-group-btn > .btn {
    line-height: 1;
}

.form-group-sm .form-control-feedback {
    height: 30px;
    width: 30px;
    line-height: 30px;
}

.form-middle {
    display: flex;
    justify-content: flex-start;
}

.form-middle div {
    align-self: center;
}

.form-group.form-middle {
    margin-bottom: -3px;
}

input.form-control:not([disabled]):not([readonly]), textarea.form-control:not([disabled]):not([readonly]) {
    color: #333333;
}
input.form-control:-ms-input-placeholder {
    color: #999999 !important;
}
.form-control, input, select, textarea {
    background-color: #F5F5F5;
    border: 1px solid #E5E5E5;
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* remove autofill color of chrome */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: #F5F5F5 !important;
    color: #333333 !important;
    box-shadow: 0 0 0 50px #F5F5F5 inset !important;
    -webkit-text-fill-color: #333333 !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: #24ad80;
}
.input-group-addon {
    border-radius: 0 !important;
    border-color: #E5E5E5;
}
input.form-control[data-edit-invisible=true] {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}
input.form-control[data-edit-invisible] {
    font-size: inherit;
    font-family: inherit !important;
    font-weight: inherit !important;
    text-overflow: ellipsis;
    transition: all .3s;
}
input.form-control[data-edit-invisible]+.form-control-feedback,
input.form-control[data-edit-invisible]+span+.form-control-feedback {
    top: 4px;
    opacity: 0.7;
    transition: all .2s;
}
input.form-control[data-edit-invisible=edit]+.form-control-feedback,
input.form-control[data-edit-invisible=edit]+span+.form-control-feedback {
    opacity: 0;
}
select.form-control.text-hint:not([disabled]):not([readonly]) {
    color: #999999;
}
.form-control[readonly]:not([disabled]), .form-control[readonly]:not([disabled]):focus,
.form-control[readonly].sm-readonly, .form-control[readonly].sm-readonly:focus {
    background-color: #E5E5E5;
    border-color: #DDDDDD;
    outline: none;
}
input.form-control[readonly]:-webkit-autofill, textarea.form-control[readonly]:-webkit-autofill, select.form-control[readonly]:-webkit-autofill {
    background-color: #E5E5E5 !important;
    box-shadow: 0 0 0 50px #E5E5E5 inset !important;
    -webkit-text-fill-color: #555555 !important;
    color: #555555 !important;
}
.form-control[disabled], .form-control[disabled]:focus {
    background-color: #BBBBBB;
    border-color: #AAAAAA;
    color: #FFFFFF !important;
    outline: none;
}
input.form-control[disabled]:-webkit-autofill, textarea.form-control[disabled]:-webkit-autofill, select.form-control[disabled]:-webkit-autofill {
    background-color: #BBBBBB !important;
    box-shadow: 0 0 0 50px #BBBBBB inset !important;
    -webkit-text-fill-color: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* TODO: extend to radio, checkbox, textarea, ... */
.removed .form-control {
    border-color: red;
    background-color: transparent;
    box-shadow: none;
    text-decoration: line-through;
    pointer-events: none;
}
.template-editor input[type=text], .template-editor textarea {
    font-size: 1.05em !important;
    font-family: Monospace !important;
}

.control-label.low {
    padding-top: 7px;
}

.control-label.very-low {
    padding-top: 6px;
}

.form-horizontal input[type=checkbox], .form-horizontal input[type=radio] {
    margin-top: 1px;
}

.form-group input[type=checkbox], .form-group input[type=radio] {
    margin-top: 2px;
}

.form-control-static.sm-icon {
    font-size: 14px;
}

.sm-form-label {
    white-space: nowrap;
    box-shadow: none;
    background-color: #eee;
}

.sm-short-group > *:not(:first-child) {
    border-left: 0;
}

.sm-short-group > *:not(:last-child) {
    border-right: 1px solid #ccc;
}

.has-error .control-label {
    font-weight: bold;
}

.select-wrapper select.form-control {
    padding-right: 20px;
}

.has-feedback:not(.feedback-left):not(.has-error) .form-control {
    padding-right: 30px;
}

.has-feedback.has-error:not(.feedback-left) .form-control:not([data-no-erroricon="true"]) {
    padding-left: 30px;
}

.has-feedback:not(.feedback-left) div[class*="col-"] .form-control-feedback,
div[class*="col-"].has-feedback:not(.feedback-left) .form-control-feedback {
    right: 5px;
}
.has-feedback:not(.feedback-left) input:not(.disabled):not([disabled]) ~ .form-control-feedback[title] {
    pointer-events: auto;
}
.has-feedback:not(.feedback-left) div[class*="col-"] select.form-control + .form-control-feedback {
    right: 15px;
}

/* tglEF = toggleErrorFields */
.has-feedback.has-error:not(.feedback-left) .form-control-feedback.tglEF,
.has-feedback.has-error:not(.feedback-left) .form-control-feedback.tglEF {
    right: auto;
}
.has-feedback input[data-date-picker] + .tglEF + .form-control-feedback,
.has-feedback input[data-time-picker] + .tglEF + .form-control-feedback {
    display: none;
}
.has-feedback.has-error input[data-date-picker],
.has-feedback.has-error input[data-time-picker] {
    border-color: #a94442;
}

.has-feedback.feedback-left .form-control {
    padding-left: 30px;
}

.has-feedback.feedback-left .form-control-feedback {
    right: auto;
/*     left: 5px; */
}

.input-group-form-control {
    position: relative;
    display: table;
    border-collapse: separate;
    width: 100%;
}

.input-group-form-control .form-control {
    display: table-cell;
}

.input-group-form-control .form-control {
    position: relative;
    z-index: 2;
    float: left;
    margin-bottom: 0;
}

.input-group-form-control .form-control:first-child, .input-group-form-control .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-form-control .form-control:last-child, .input-group-form-control .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-form-control.col-1-2 .form-control:first-child {
    width: 33.33333333%;
}

.input-group-form-control.col-1-2 .form-control:last-child {
    width: 66.66666666%;
}

.input-group-form-control.col-2-1 .form-control:first-child {
    width: 66.66666666%;
}

.input-group-form-control.col-2-1 .form-control:last-child {
    width: 33.33333333%;
}

.form-control ~ .form-control-badge {
    position: absolute;
    display: inline-block;
    top: -8px;
    right: 15px;
    color: #999;
    padding: 2px 2px 2px 4px;
    font-size: 0.6em;
    letter-spacing: 0.2em;
    background-color: #F5F5F5;
    border-radius: 0;
    border: 1px solid #E0E0E0;
    border-bottom: 0;
    transition: all .15s ease-in;
    opacity: 0;
}
.form-control:not(.nohover):hover ~ .form-control-badge,
.form-control:not(.nofocus):focus ~ .form-control-badge {
    opacity: 1;
}
.form-control:focus ~ .form-control-badge {
    border-color: #24ad80;
}
.form-control[readonly]:not([disabled]) ~ .form-control-badge {
    background-color: #E5E5E5;
    border-color: #DDDDDD;
}
.form-control[disabled] ~ .form-control-badge {
    border-color: #CCCCCC;
}
.form-control ~ .form-control-copy {
    position: absolute;
    display: inline-block;
    top: 5px;
    right: 6px;
    letter-spacing: 0.2em;
    color: #333333;
    background-color: #F5F5F5;
    border-radius: 0;
    border-top: 0;
    border-right: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding: 3px 2px 3px 5px;
    cursor: pointer;
    opacity: 0;
}
.form-control[readonly] ~ .form-control-copy {
    background-color: #E5E5E5;
}
.form-control[disabled] ~ .form-control-copy {
    background-color: #BBBBBB;
    color: #FFFFFF;
}

div#globalMsgAdminBig {
    background-color: #FFFF00;
    font-size: 18px;
    font-weight: bold;
    padding: 20px 0;
}

@media print {
    div#globalMsgAdminBig {
      display: none;
    }
    #details-modal, .modal-backdrop {
        display: none;
    }
}

select, textarea, input {
    font-family: Arial, Geneva, Helvetica, sans-serif !important;
    font-size: 1em;
    font-weight: normal;
    color: #000000;
}
.input {
  font-family: Arial, Geneva, Helvetica, sans-serif;
  font-size : 1em;
  font-weight : normal;
  background: #D9E1E8;
}
.dfb-element {
    background-color: white;
    border: 1px solid silver;
    color: black;
    float: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 8pt;
    font-weight: normal;
    padding-left: 2px;
    text-align: left;
}
.error {
  padding: 2px;
  font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: bold;
  color: #FFFFFF;
  background: #FF0000;
}
a, a:link, a:hover, a:focus, a:active, a:visited {
/*   font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; */
  font-weight: normal;
  text-decoration: none;
  color: inherit;
}

/* ################# */
/* MENU / INFO boxes */
/* ################# */
ul.sm-menu, ul.technavi {
    list-style-type: none;
    padding: 3px 0;
    margin: 0;
}

ul.technavi {
    display: none;
}

ul.sm-menu li a.menu:hover, ul.technavi li a.menu:hover,
ul.sm-menu li a.menu:focus, ul.technavi li a.menu:focus,
ul.sm-menu li.active a, ul.technavi li.active a {
    background-color: #EEEEEE;
}

ul.sm-menu li.menu-spacer, ul.technavi li.menu-spacer {
    height: 1px;
    margin: 10px 5px;
    border-radius: 0;
    background-color: #EEEEEE;
}

.menu-block-spacer,
ul.sm-menu li.menu-spacer {
    height: 1px;
    background-color: #f0f0f0;
    margin: 10px 20px;
}

ul.sm-menu a, ul.technavi a {
    text-decoration: none;
    padding-left: 5px;
}

a.menu > .fas, a.menu > .far,
a.login > .fas, a.login > .far,
.menuInfo>li>div>.fas,
.menuInfo>li>div>.far {
    width: 1.28571429em;
    margin-left: 3px;
    margin-right: 6px;
    text-align: center;
}
a.menu > .icon-right {
    float: right;
    margin-right: 0;
    line-height: 50px;
}
.menu-title, #techbutton {
    padding: 3px 0 3px 5px;
    font-family: DFBSansWeb, Verdana, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}

#techbutton {
    cursor: pointer;
    position: relative;
    margin-top: 10px;
}
#techbutton>.sm-pointer-btn {
    position: absolute;
    top: 50%;
    right: 20px;
    left: auto;
    display: block;
    margin-top: -9px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#techbutton>.sm-pointer-btn>i {
    position: absolute;
    top: 40%;
    left: 20%;
    margin-top: -3px;
    font-size: 0.8em;
}
#techbutton>.sm-pointer-btn>i:last-child {
    margin-top: -4px;
}
#techbutton:hover>.sm-pointer-btn {
    background-color: #ccc;
}
#techbutton .lock {
    opacity: 0.2;
    margin-left: 6px;
}

/* ########################### */

.sm-menu .sm-menu-sub a {
    padding-left: 20px;
}

.userInfo {
    display: none;
    list-style-type: none;
}
.admin .userInfo li.customer {
    display: none;
}

.menuInfo {
    list-style-type: none;
    background-color: #24ad80;
    padding: 10px 0 !important;
    margin: 0;
}

.menuInfo>li.user {
    font-size: 1.2em;
}
.menuInfo>li {
    margin-bottom: 0;
    padding: 7px 23px 7px 16px;
    color: #FFFFFF;
}
.menuInfo>li.user .user-icon {
    margin: 3px 10px 3px 1px;
    position: relative;
    top: 2px;
}
.menuInfo>li.customer .fas, .menuInfo>li.customer .far {
    margin: 0px 9px 0px 4px;
}
    
    
.menuInfo>li>.sub-menu-logout {
    min-width: 1.28571429em;
    text-align: center;
}
.menuInfo>li.user>.username, .menuInfo>li.customer>.customername {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

a.menu, a.menu:link, a.menu:visited,
a.menu:hover, a.menu:active {
    display: block;
    padding: 0 10px 0 25px;
    line-height: 50px;
    height: auto;
    text-transform: none;
    font-size: initial;
    cursor: pointer;
}

a.sm-nav:link { text-decoration: none; color: #000000; }
a.sm-nav:visited { text-decoration: none; color: #000000; }
a.sm-nav:hover { text-decoration: underline; color: #000000; }

div.spacer {
    display: block;
    height: 15px;
}
.ui-tabs + .spacer {
    height: 7px;
}
.odd {
    background-color: #f0f0f0;
}
.highlightClickRow {
    background-color: rgba(210, 210, 210, 0.15);
}

.lighton:not(table):hover, table.lighton>tbody>tr:hover {
    background-color: rgba(210, 210, 210, 0.15);
}

/* Tooltip */
.ui-widget-content.ui-tooltip, .ui-widget-content.ui-tooltip .arrow:after {
    background: black;
    border: none;
}
.ui-tooltip {
    padding: 6px 20px 6px 20px;
    color: white;
    border-radius: 5px;
    box-shadow: 0 0 7px 0 rgba(0,0,0,0.7);
    max-width: 250px;
    z-index: 11120;
}
.ui-tooltip td {
    color: white;
}
.tooltipWide {
    max-width: 350px;
}
.tooltipUWide {
    max-width: 480px;
}
.ui-tooltip-content:after {
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
}
div.tooltipTop .ui-tooltip-content:after {
    bottom: -8px;
    left: 50%;
    right: auto;
    margin-left: -10px;
    border-color: #000000 transparent;
    border-width: 10px 10px 0;
}
div.tooltipTop.top .ui-tooltip-content:after {
    bottom: auto;
    top: -10px;
    border-width: 0 10px 10px;
}
div.tooltipRight .ui-tooltip-content:after {
    top: 50%;
    bottom: auto;
    margin-top: -10px;
    left: -6px;
    border-color: transparent #000000;
    border-width: 10px 10px 10px 0;
}
div.tooltipLeft .ui-tooltip-content:after {
    top: 50%;
    bottom: auto;
    margin-top: -10px;
    right: -6px;
    border-color: transparent #000000;
    border-width: 10px 0 10px 10px;
}
.ui-tooltip-content ul {
    padding-left: 25px;
}
.ui-tooltip table.tiptable2 td {
    padding: 0 2px;
}
.ui-tooltip table th, .ui-tooltip table td {
    vertical-align: top;
}
.ui-tooltip table.tiptable2 tr:nth-child(even) {
    background-color: rgba(100,100,100,0.5);
}

dl.sm-legend-table {
    display: block;
    margin-bottom: 10px;
    margin-left: -10px;
    margin-right: -10px;
    font-size: 0.9em;
}
dl.sm-legend-table:before {
    content: " ";
    display: table;
    box-sizing: border-box;
}
dl.sm-legend-table:after {
    clear: both;
    box-sizing: border-box;
}
dl.sm-legend-table > dt {
    text-align: center;
}
dl.sm-legend-table > * {
    padding: 8px;
    line-height: 1.42857143;
    border-top: 1px solid #ddd;
    float: left;
    height: 34px;
}

/* TECH FORM / MENU */
.techform {
    margin: 8px 3px 0 3px;
}
.techform .form-group {
    margin-bottom: 7px;
    margin-left: 0;
    margin-right: 0;
}
.techform .form-group label.control-label {
    padding-right: 0;
}
div.techform_show {
    padding-left: 5px;
}

/* *************************** */
/* CrossBrowser Fieldset-Emulation */

.fieldset {
    display: block;
    position: relative;
    padding: 3px 3px 3px 3px;
    margin: 0px;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 0;
    border: 1px solid #DDDDDD;
}

div.fieldset_level_5 {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

/* *************************** */
.dropdown-menu {
    border-radius: 0;
    max-height: 500px;
    overflow-y: auto;
}
.sm-dropdown .dropdown-back {
    display: none;
    position: fixed;
    top: 0;
    right: 1000px;
    bottom: -1000px;
    left: 0;
    background: rgba(0,0,0,0.6);
}
.sm-dropdown .fas, .sm-dropdown .far {
    font-size: inherit;
}
.sm-dropdown .dropdown-menu li {
    padding: 3px 10px;
    cursor: pointer;
}
.sm-dropdown .dropdown-menu li.selected {
    display: none;
}
.sm-dropdown li .fas, .sm-dropdown li .far {
    margin-right: 10px;
}


/* *************************** */
.fieldset.err-fieldset {
    margin-top: 50px;
    max-width: 100%;
}
.fieldset.err-fieldset>.fieldset_level_5 {
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
}

.sbmsg {
    font-size: 14px;
}
.sccsb-w {
    position: absolute;
    top: -100px;
    height: 1px;
}
.successbar-wrapper {
    background-color: #404040; /* #20ae80 || #323232; */
    box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.2);
    color: #fff;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: 55px;
    transform: translate(0,-100%);
    transition: transform .1s ease-in, opacity .1s .1s;
    opacity: 0;
    z-index: 99999;
}
.successbar-wrapper.active {
    transition: all .1s ease-out;
    transform: translate(0,0);
    opacity: 1;
}
.successbar-wrapper>div {
    box-align: center;
    align-items: center;
    align-content: center;
    display: flex;
    flex-direction: row;
    min-height: inherit;
    padding: 0;
}
.successbar-wrapper .successbar_message {
    box-flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    line-height: normal;
    overflow: hidden;
    padding: 14px 24px;
    text-overflow: ellipsis;
    word-break: break-word;
}
.messagebar-wrapper {
    min-height: 29px;
    margin: 10px 0;
}
.messagebar-wrapper, .messagebar {
    transition: all .4s ease-in, width 0s, padding 0s;
    border-radius: 0;
    border-color: transparent;
}
.user .messagebar:not(.bg-danger):not(.bg-warning):not(.bg-success),
.admin .messagebar:not(.bg-danger):not(.bg-warning):not(.bg-success) {
    background-color: #FFFFFF;
}
.messagebar-wrapper.toggleBar {
    overflow: hidden;
    max-height: 200px;
    padding: 10px 0;
    opacity: 1;
    transition: all .5s ease-out;
}
.messagebar-wrapper.toggleBar.toggleBarOff {
    max-height: 0;
    padding: 0;
    opacity: 0;
}
.messagebar-wrapper.toggleBar > .sbmsg {
    margin: 0;
}
.messagebar-wrapper.sticky.has-messages .messagebar {
    position: fixed;
    margin: auto;
    top: 0px;
    z-index: 10100;
    border-radius: 0;
    padding: 10px;
    left: 0;
    right: 0;
}

.sbmsg > .fieldset_level_5,
.sbmsg .messagebar_message > div > div {
    display: flex;
    align-items: flex-start;
    vertical-align: top;
}
.sbmsg span.glyphicon, .sbmsg .msg-icon {
    position: relative;
    top: 2px;
    margin-right: 5px;
    font-size: 16px;
    min-width: 16px;
    text-align: center;
}

.messagebar_message {
    position: relative;
    vertical-align: top;
    margin: auto 0;
    width: 100%;
    min-height: 21px;
}
.smbar-close {
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.3;
    filter: alpha(opacity=30);
    padding: 3px 8px 0 6px;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 5;
}
.messagebar_message div {
    border: 0px solid;
    position: relative;
}
.messagebar_message div.error {
    border: 0px solid red;
    color: red;
    font-weight: bold;
    background-color: transparent;
}
.messagebar_message div.warning {
    border: 0px solid;
    font-weight: bold;
    background-color: transparent;
}
.messagebar_message div.success {
    border: 0px solid;
    font-weight: normal;
    background-color: transparent;
    color: darkgreen;
}

/* success within error field */
.sbmsg.bg-danger .text-success .fas, .sbmsg.bg-danger .text-success .far {
    color: #00AD00;
}
/* warning within error field */
.sbmsg.bg-danger .text-warning .fas, .sbmsg.bg-danger .text-warning .far {
    color: #FFFF00;
}
.messagebar_message div > .progress {
    position: absolute;
    top: 1px;
    left: -24px;
    margin-bottom: 0;
    height: 19px;
    width: 100%;
    max-width: 20px;
    border-radius: 0;
    background-image: none;
    background-color: rgba(0,0,0,0.10);
    box-shadow: inset 1px 1px 1px rgba(0,0,0,.3);
    box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,0.1);
    background-color: transparent;
    z-index: 1;
}
.messagebar_message div > .progress > .progress-bar {
    width: 100%;
    height: 140%;
    top: -2px;
    transition-timing-function: linear;
    background-image: none;
    background-color: rgba(0,0,0,0.10);
}
.messagebar_message div > .progress.start > .progress-bar {
    width: 0%;
}

.sm-warning-line {
    padding: 5px 7px;
    color: #8a6d3b;
    background-color: #fcf8e3;
    margin: 5px 0;
    border-radius: 0;
    border: 1px solid #DDDDDD;
}

.messagebar .page-id {
    color: silver;
    font-size: 10px;
    text-align: right;
    margin-right: 5px;
    margin-left: auto;
    min-width: 40px;
    min-height: 18px;
    margin-top: 2px;
}
div.messageCenter {
  text-align: center;
}

div.messageTall {
    padding: 25px 2px;
}

.system-messages {
    margin: 0;
}
.system-messages .panel.sm-panel {
    margin-bottom: 0;
    border: none;
}
.system-messages > .sm-panel > .panel-heading {
    border-bottom-color: transparent;
}
.system-messages > .sm-panel > .panel-body {
    padding-left: 0;
}
.system-messages .smessage {
    margin-left: 5px;
    border-left: 4px solid #4EDAAE;
    padding: 15px 20px;
    box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.1), 0px 0px 4px 0px rgba(0,0,0,0.07);
    opacity: 0;
    transition: opacity .2s;
}
.system-messages .is-open .smessage {
    opacity: 1;
}
.system-messages .smessage+.smessage {
    margin-top: 20px;
}
.system-messages .smessage h3,
#smessages .message-content h3,
.login-messages .trumbowyg-editor h3,
.default-fixed h3 {
    margin: 10px 0 10px !important;
    font-size: 24px !important;
    letter-spacing: 0 !important;
    border-bottom: none !important;
}
.default-fixed h3:after {
    display: none;
}
.default-fixed h1, .default-fixed h2,
.default-fixed h3, .default-fixed h4, .default-fixed h5 {
    font-weight: 400;
}
.login-messages .trumbowyg-editor h1:first-child,
.login-messages .trumbowyg-editor h2:first-child,
.login-messages .trumbowyg-editor h3:first-child,
.login-messages .trumbowyg-editor h4:first-child,
.login-messages .trumbowyg-editor h5:first-child,
.default-fixed .messagebar_message h1:first-child,
.default-fixed .messagebar_message h2:first-child,
.default-fixed .messagebar_message h3:first-child,
.default-fixed .messagebar_message h4:first-child,
.default-fixed .messagebar_message h5:first-child {
    margin-top: 5px;
}
.system-messages .smessage > *:first-child {
    margin-top: 0;
}
.system-messages .smessage > *:last-child {
    margin-bottom: 0;
}

/* contextbar */
.contextbar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 10101;
}
.ctx_colors {
    color: #FFFFFF;
/*     background-color: #004187 !important; */
    background-color: #2075b6 !important;
}
.contextbar-wrapper > div {
    margin: 0;
    border-radius: 0;
    padding: 10px;
    border: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
.contextbar_close {
    display: flex;
    margin-right: 10px;
    align-self: flex-start;
    position: relative;
    top: 6px;
}
.contextbar_close .ctx_close {
    padding: 5px;
    margin: 0;
    float: none;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: #FFFFFF;
    text-shadow: none;
    opacity: 1;
    cursor: pointer;
    z-index: 1;
    outline: 0;
    -webkit-appearance: none;
}
.contextbar_close .ctx_close:after {
    content: "\0000D7";
    display: block;
    width: 24px;
    height: 24px;
    font-family: "Times New Roman", Helvetica;
    font-size: 40px;
    font-weight: normal;
    line-height: 0.6;
    overflow: hidden;
}
.contextbar_content, .contextbar_content>.cont, .contextbar_content>.conb {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-grow: 1;
    align-items: center;
}
.contextbar_content {
    flex-direction: column;
}
.contextbar_content>.cont, .contextbar_content>.conb {
    width: 100%;
}
.contextbar_content>.cont {
    min-height: 45px;
    font-size: 24px;
}
.contextbar_content>.conb>.conl {
    font-size: 0.9em;
    line-height: 1.1;
}
.contextbar_content>.conb>.conr {
    min-width: fit-content;
    align-self: flex-end;
    margin-bottom: -10px;
}
.contextbar_content>.cont button:active,
.contextbar_content>.conb button:active,
.contextbar_content>.cont button:focus,
.contextbar_content>.conb button:focus,
.contextbar_content>.cont button:hover,
.contextbar_content>.conb button:hover {
    color: #FFFFFF;
}
.contextbar_content>.cont button {
    background: none;
    border: none;
    padding: 0 12px;
    border-radius: 25px;
    min-width: 44px;
    min-height: 44px;
    font-size: 0.9em;
    outline: 0;
}
.contextbar_close .ctx_close:hover,
.contextbar_content>.cont button:hover {
    background-color: rgba(255,255,255,.2);
}
.contextbar_content>.cont button[disabled],
.contextbar_content>.cont button.disabled {
    cursor: default;
    pointer-events: none;
    opacity: 0.4;
}
.contextbar_content>.cont button .fas, .contextbar_content>.cont button .far {
    font-size: 0.9em;
    position: relative;
    top: -1px;
    left: -1px;
}
.contextbar_content>.conb button {
    background: none;
    border: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    outline: 0;
}
.contextbar_content>.conb button:hover,
.contextbar_content>.conb .btn-group.open .dropdown-toggle {
    background-color: rgba(255,255,255,.2);
    box-shadow: none;
}
.contextbar_content>.conb button[disabled],
.contextbar_content>.conb button.disabled {
    cursor: default;
    pointer-events: none;
    opacity: 0.4;
}
.contextbar_content>.conb button .fas, .contextbar_content>.conb button .far {
    position: relative;
    top: 1px;
}

/* actionbar */
.actionbar {
    margin-top: 50px;
    margin-bottom: 20px;
    border-radius: 0;
    border: none;
    padding: 0;
}
.actionbar > div {
    display: flex;
    justify-content: space-between;
}
.ui-tabs-panel .actionbar {
    margin-top: 30px;
    margin-bottom: 0;
}
ul.actionbar_buttons {
    display: flex;
    justify-content: flex-start;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
ul.actionbar_buttons.save {
    display: flex;
    justify-content: flex-end;
}
ul.actionbar_buttons>li {
    margin: 5px;
    display: inline-block;
    order: 5;
}
ul.actionbar_buttons>li:first-child {
    margin-left: 0;
}
ul.actionbar_buttons>li:last-child {
    margin-right: 0;
}
ul.actionbar_buttons>li.del {
    order: 1;
}
ul.actionbar_buttons>li.save {
    order: 99;
}

/* **************************** */
/* SM-Panels */
.sm-panel, .panel.sm-default {
    margin-bottom: 25px;
    border-radius: 0;
    box-shadow: none;
}
.sm-panel:last-child {
    margin-bottom: 20px;
}
.sm-panel > .panel-heading {
    border: none;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    padding: 7px 10px 2px 0px;
    display: flex;
    align-items: center;
    border-radius: 0;
}
.sm-panel > .panel-heading,
.system-messages > .sm-panel > .panel-heading:hover,
.system-messages > .sm-panel > .panel-heading.smtoggle-opened {
    border-bottom-color: #4EDAAE;
}

.sm-panel > .panel-heading > .panel-button {
    border: none;
    padding: 0 0px;
    position: relative;
    top: -6px;
    right: -14px;
    height: 32px;
    margin-bottom: -11px;
    width: 46px;
    border-radius: 0;
    background: transparent;
    font-size: 12px;
}
.sm-panel>.panel-heading>.panel-button:focus {
    outline: none;
}
.sm-panel>.panel-heading>.panel-button:hover {
    background-color: #fff;
    color: #20ae80;
}
.sm-panel>.panel-heading>.panel-button>i {
    position: relative;
    top: 1px;
}
.sm-panel > .panel-heading > .panel-title {
    flex-grow: 2;
}
.sm-panel.panel-info {
    border: none;
    background: transparent;
    color: #555;
    margin-top: 10px;
}
.sm-panel.panel-info > .panel-heading {
    color: #2075b6;
    background-color: transparent;
    border-bottom: 2px solid #a5d2f0;
}
.sm-panel.panel-info > .panel-heading > .panel-title > .fas,
.sm-panel.panel-info > .panel-heading > .panel-title > .far {
    margin-right: 5px;
}

.panel-hsub li, .panel-vsub li {
    padding: 10px !important;
    background: transparent;
    border-radius: 0 !important;
    border: 0;
}
.sm-panel.has-subs .panel-hsub li + li {
    border-left: 1px solid #E5E5E5;
    border-radius: 0 !important;
}
.sm-panel.has-subs .panel-hsub + .panel-vsub li,
.sm-panel.has-subs .panel-vsub li + li,
.sm-panel.has-subs .panel-vsub + .panel-hsub,
.sm-panel.has-subs .panel-hsub + .panel-hsub {
}
.sm-panel .panel-body {
    padding: 10px;
    background: transparent;
}

.sm-panel .panel-body h3 {
    padding: 0px;
    margin: 5px 10px 20px 10px;
    font-size: 1em;
    letter-spacing: 0.15em;
    border-bottom: 1px solid #4EDAAE;
}
    
.sm-panel.has-subs {
    padding: 0px;
}
.sm-panel.has-subs .panel-hsub {
    display: flex;
}
.sm-panel.has-subs .panel-hsub, .sm-panel.has-subs .panel-vsub {
    box-shadow: none;
    border-radius: 0;
}
.sm-panel.has-subs .panel-vsub:before, .sm-panel.has-subs .panel-vsub:after,
.sm-panel.has-subs .panel-vsub li:before, .sm-panel.has-subs .panel-vsub li:after {
    display: table;
    content: "";
    line-height: 0;
}
.sm-panel.has-subs .panel-vsub:after, .sm-panel.has-subs .panel-vsub li:after {
    clear: both;
}

/* **************************** */
.btn.sm-btn-on, .btn.sm-btn-off {
    min-width: 50px;
}

*[disabled], .disabled, select[readonly], select.readonly {
    pointer-events: none;
}
.disabled, *[disabled] .form-control,
.disabled .form-control, .form-control[disabled],
.disabled a, a.disabled {
    color: #999999;
}

/* ########################### */
/*       Tabs overriding       */
#tabs.ui-tabs.sm-tabs {
    padding: 0;
    margin-top: 30px;
}
#tabs, #tabs.ui-tabs.sm-tabs:first-child {
    margin-top: 20px;
}
.ui-tabs .ui-tabs-nav {
    background: #ffffff;
    border-color: transparent;
}
.ui-tabs .ui-tabs-panel {
    padding: 0px;
    background: #ffffff;
}
.ui-widget-content {
    border: 0px;
    background: transparent;
}
.ui-tabs.sm-tabs ul.ui-tabs-nav {
    background: none;
    border-color: transparent;
    background-color: transparent;
    margin-left: 20px;
    margin-bottom: 2px !important;
    padding: 0;
}
.ui-tabs.sm-tabs ul.ui-tabs-nav li {
    border-radius: 0;
    margin: 0px;
/*     padding: 3px 5px; */
    padding: 0;
    border: 1px solid #4ec49f;
    box-shadow: inset 0px -1px 3px rgba(0,0,0,0.1);
    color: #FFFFFF;
}
.ui-tabs.sm-tabs ul.ui-tabs-nav li+li {
    margin-left: -1px;
}
.ui-tabs.sm-tabs ul.ui-tabs-nav li:first-child {
    border-top-left-radius: 0;
}
.ui-tabs.sm-tabs ul.ui-tabs-nav li:last-child {
    border-top-right-radius: 0;
}
.ui-tabs.sm-tabs .ui-tabs-nav li:hover, .ui-tabs.sm-tabs .ui-tabs-nav li.ui-state-hover,
.ui-tabs.sm-tabs .ui-tabs-nav li:focus, .ui-tabs.sm-tabs .ui-tabs-nav li.ui-state-focus {
    background-color: #4ec49f;
    background-image: none;
}
.ui-tabs.sm-tabs ul.ui-tabs-nav li.ui-state-active+li {
    box-shadow: inset 2px -1px 3px rgba(0,0,0,0.1);
}
.ui-tabs.sm-tabs ul.ui-tabs-nav li.ui-tabs-active {
    border-bottom-color: transparent;
    background: #FFFFFF;
    color: #000000;
    padding-bottom: 3px;
    box-shadow: none;
}
.ui-tabs.sm-tabs ul.ui-tabs-nav li.ui-tabs-active a {
    pointer-events: none;
}
.ui-tabs.sm-tabs .ui-state-active a, .ui-tabs.sm-tabs .ui-state-active a:link, .ui-tabs.sm-tabs .ui-state-active a:visited,
.ui-tabs.sm-tabs .ui-state-hover a:visited, .ui-tabs.sm-tabs .ui-state-focus a, .ui-tabs.sm-tabs .ui-state-focus a:hover,
.ui-tabs.sm-tabs .ui-state-focus a:link, .ui-tabs.sm-tabs .ui-state-focus a:visited {
    color: #000000;
    outline: none;
}
.ui-tabs.sm-tabs .ui-tabs-nav + .ui-tabs-nav {
    position: absolute;
    right: 20px;
    top: 3px;
}
.ui-tabs.sm-tabs .ui-tabs-nav + .ui-tabs-nav,
.ui-tabs.sm-tabs .ui-tabs-nav + .ui-tabs-nav li {
    border-radius: 0 !important;
}

#season-tabs .smbox {
    background: #ffffff;
}
.ui-tabs.sm-tabs .ui-tabs-panel .smbox {
    margin-top: -4px;
    padding: 20px 0 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid #ccc;
    box-shadow: none;
}
#tabs:not(.sm-tabs) .smbox {
    border-radius: 0;
    border-width: 0;
    padding: 0;
    box-shadow: none;
    background: transparent;
}
.sm-tabs .sm-changed-sign {
    position: absolute;
    top: 3px;
    right: 3px;
    opacity: 0.6;
    font-size: 0.8em;
    color: red;
    display: none;
}
.sm-tabs .smbox .sm-panel:last-child {
    margin-bottom: 5px;
}
.sm-tabs .hidden-on-tabs {
    display: none;
}
.space-bottom {
    padding-bottom: 8px;
}

/* ########################### */
/*      Dialog overriding      */
.ui-dialog {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-clip: padding-box;
    padding: 0;
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.2);
}
.ui-dialog .ui-dialog-titlebar {
    padding: .4em 1em;
    position: relative;
    background-color: transparent;
    background-image: none;
    border: none;
    padding: 12px 12px 11px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
}
.ui-dialog .ui-dialog-titlebar-close {
    right: 0.8em;
}
body.container.modal-open {
    padding-right: 15px !important;
}
.modal.modal-middle {
    padding-top: 20px;
    padding-bottom: 20px;
}
body.modal-open .modal.modal-middle {
    display: flex;
}
.modal-dialog {
    top: 250px;
}
.modal-content {
    border-radius: 3px;
    border: none;
}
.modal.modal-middle .modal-dialog {
    top: auto;
    margin-top: auto;
    margin-bottom: auto;
}
.modal-header, .modal-body, .modal-footer {
    position: relative;
    padding: 10px 24px;
}
.modal-footer {
    padding: 10px 15px 15px;
}
.modal-body #message :first-child {
    margin-top: 0;
}
.modal-footer {
    border-top: 0;
    background-color: #ffffff;
    border-radius: 0 0 6px 6px;
}
.modal {
    z-index: 11050;
}
.modal-backdrop {
    z-index: 11040;
}
#save-popup-popup>.modal {
    z-index: 11080;
}
.modal-header .close {
    margin-top: 0px;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 24px;
    height: 24px;
    text-shadow: none;
    z-index: 1;
}
.modal-header .close:after {
    content: "\0000D7";
    display: block;
    width: 24px;
    height: 24px;
    font-family: "Times New Roman", Helvetica;
    font-size: 40px;
    font-weight: normal;
    line-height: 0.6;
    overflow: hidden;
}
.modal-header .close > span {
    display: none;
}
#dialog-message, #dialog-confirm {
    z-index: 11070;
}
.modal-backdrop+.modal-backdrop {
    z-index: 11060;
}
.modal-content.shadow, .modal-content.shadow .modal-body {
    z-index: -1;
}
.modal-content.shadow .modal-header {
    box-shadow: 0 0 0 0 rgba(0,0,0,0.5), 0 1px 5px 0 rgba(0,0,0,0.5);
}
.modal-content.shadow .modal-footer {
    box-shadow: 0 -1px 5px 0 rgba(0,0,0,0.5), 0 0 0 0 rgba(0,0,0,0.5);
}
.smbackdrop {
    z-index: 3040;
}
.smbackdrop.trans {
    background: transparent;
}
/* ########################### */

.sm-control-container {
    border: 1px solid #E5E5E5;
    height: auto !important;
    min-height: 55px;
    padding: 5px 10px 5px 5px !important;
    overflow-y: auto;
    
    /* form-control*/
    color: #555;
    background-color: #F5F5F5;
    background-image: none;
    box-shadow: none;
    font-size: 1em;
}
.has-error .sm-control-container {
    border-color: #a94442;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}
.sm-control-container > div {
    min-height: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
}
.sm-control-container > div.checkbox label,
.sm-control-container > div.radio label {
    display: block;
    padding: 4px !important;
}
.sm-control-container > div.checkbox label .lbl,
.sm-control-container > div.radio label .lbl {
    
}

/* ########################### */
.footer-wrapper {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
    padding: 10px 0px;
    background-color: #101010;
    color: #FFFFFF;
    font-size: 12px !important;
}
.footer-wrapper a, .footer-wrapper a.menu,
.footer-wrapper a:hover, .footer-wrapper a.menu:hover,
.footer-wrapper ul.sm-menu a.menu:focus,
.footer-wrapper a:focus, .footer-wrapper a.menu:focus,
.footer-wrapper a:hover:focus, .footer-wrapper a.menu:hover:focus {
    font-size: 12px !important;
    background-color: transparent;
    text-transform: uppercase;
}
.footer-wrapper .active {
    background-color: transparent !important;
}
.footer-wrapper > .dfblogo > a {
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
}
.footer-wrapper > .dfblogo > a > img {
    margin-right: 5px;
}
.footer-wrapper > .dfblogo img {
    height: 50px;
    width: 136px;
    background: transparent url(../../images/dfb-gmbh-wt.png) center no-repeat;
}
.footer .sm-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.footer .sm-menu a.menu {
    color: #FFFFFF;
    height: initial !important;
    line-height: 1.5em !important;
    padding: 0 5px;
    letter-spacing: 1px;
}
.footer .active a.menu {
    color: #00965a;
}
.footer ul.sm-menu li a.menu:hover,
.footer .sm-menu li.active a.menu {
    background-color: transparent !important;
}
.footer .sm-menu li.menu-spacer {
    width: 1px;
    margin: 2px 3px 1px 4px !important;
    height: initial;
}

/* ########################### */
.sm-content-filter-container {
    padding: 5px 10px 0 5px;
    margin-bottom: 10px;
}
.sm-content-filter {
    position: relative;
    font-size: 18px;
    padding-top: 0;
    margin-bottom: 10px;
    border-radius: 18px;
    padding: 0 !important;
    border-top: none;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    transition: height .3s ease-in,
                border .3s ease-out;
}
.sm-content-filter.msgbox-visible {
    border-right-color: #CCCCCC;
    border-left-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    transition: height .3s ease-out,
                border .3s ease-out .1s;
}
.sm-content-filter .sm-filter-msgbox {
    position: relative;
    height: 0;
    display: block;
    padding: 0 12px 0;
    overflow: hidden;
    opacity: 0;
    font-size: 14px;
    transition: all .3s ease-out;
}
.sm-content-filter .sm-filter-msgbox span {
    padding-left: 4px;
}
.sm-content-filter .sm-filter-msgbox.show {
    height: auto;
    opacity: 1;
    padding-top: 7px;
    padding-bottom: 5px;
}
.sm-content-filter .sm-filter-badge,
.sm-content-filter > .clear-filter,
.sm-content-filter.filter-button > .sm-filter-button {
    transition: all .3s ease-out;
    opacity: 0;
    visibility: hidden;
}
.sm-content-filter > label {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 14px;
    padding: 10px 8px 11px 12px;
    margin: 0;
    border-top-left-radius: 23px;
    border-bottom-left-radius: 23px;
}
.sm-content-filter > input.sm-filter {
    padding-left: 33px !important;
    padding-right: 13px !important;
    border-radius: 23px !important;
}
.sm-content-filter .sm-filter-badge {
    position: absolute;
    top: 0;
    right: 34px;
    margin: 8px 0px;
    background-color: transparent;
    color: #b3b3b3;
}
.sm-content-filter > .clear-filter {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 12px 10px 10px;
    text-decoration: none;
    color: #b3b3b3;
    font-weight: 900;
    font-size: 14px;
}
.sm-content-filter.filtered > input.sm-filter {
    padding-right: 33px;
}
.sm-content-filter.filtered .sm-filter-badge {
    opacity: 1;
    visibility: visible;
}
.sm-content-filter.filtered > .clear-filter {
    opacity: 1;
    visibility: visible;
}
.sm-content-filter > button.sm-filter-button {
    position: absolute;
    display: none;
    top: 0;
    right: 0;
    width: 70px;
    padding: 8px 0 7px 0;
    border: 1px solid #24ad80;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 23px;
    border-bottom-right-radius: 23px;
}
.sm-content-filter.filter-button > button.sm-filter-button {
    display: block;
}
.sm-content-filter.filter-button .sm-filter-badge {
    right: 104px;
}
.sm-content-filter.filter-button > .clear-filter {
    right: 70px;
}
.sm-content-filter.filter-button.filtered > input.sm-filter {
    padding-right: 145px;
}
.sm-content-filter.filter-button.filtered > button.sm-filter-button {
    opacity: 1;
    visibility: visible;
}
.sm-content-filter.filter-button.filtered > button.sm-filter-button[disabled] {
    opacity: 0.65;
}

/* ########################### */
.timers .checkbox-inline {
    padding-left: 5px;
    min-width: 56px;
}

/* Subscription -> Overview -> Settings */
.settings-area {
    display: block;
    position: absolute;
    right: 10px;
    top: 42px;
    left: auto;
    margin-left: auto;
    font-size: 0.8em;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    transform: translate(0,-1000px);
    transition: transform 0s .2s, opacity .15s linear;
    z-index: 11045;
}
.settings-area.in {
    transform: translate(0,0);
    transition: transform 0s, opacity .15s linear;
}
.settings-area.popover.bottom>.arrow {
    left: 88%;
}
#divisionCounter {
    position: absolute;
    top: 14px;
    right: 24px;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.area-content .top-info .total.badge {
    margin-right: 20px;
    background-color: transparent;
    border-radius: 0;
    color: #4ec49f;
    min-width: 50px;
    margin-left: auto;
    flex-grow: 0;
    font-size: 1em;
    padding: 1px 4px;
}

/* lists */
.area-content .list {
    padding-left: 25px;
    display: none;
}
.area-content .list.list-1 {
    display: none;
    padding-right: 20px;
    padding-left: 20px;
}
.area-content .list .list-row .r-side.badge {
    font-size: 0.9em;
    background-color: transparent;
    color: #4ec49f;
    border: none;
    border-radius: 0;
    margin-left: auto;
    max-height: 20px;
    min-width: 60px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.area-content .list .list-row > .desc {
    display: flex;
    align-items: center;
    padding: 5px 4px 5px 7px;
}
.area-content .list .list-row > .desc > .l-side {
    display: flex;
    align-items: flex-start;
}
.area-content .list.list-3>.list-row>.desc .l-side {
    margin-right: 10px;
}
.area-content .list.list-3>.list-row>.desc .r-side.badge {
    margin-top: 2px;
}
.area-content .list.list-4 {
    margin-bottom: 15px;
    padding-left: 35px;
}
.unit-defaults .area-content .list.list-4 .unit[data-state-teamed] + .unit {
    margin-top: 5px;
}
.area-content .list.list-4 .l-side {
    flex-direction: column;
    padding-left: 20px;
    margin-right: 10px;
}
.area-content .list.list-4 .list-row > .desc {
    padding: 3px 4px 0px 7px;
    align-items: center;
}
.area-content .r-side.popup-buttons .p-btn {
    display: inline-block;
    margin-left: 10px;
    width: 25px;
    height: 25px;
    text-align: center;
    background: #eee;
    border: 1px solid #000;
    cursor: pointer;
}
.area-content .list .l-side .toggle-btn {
    cursor: pointer;
    margin-right: 5px;
    position: relative;
    top: -1px;
    height: auto;
    line-height: 20px;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: rotate(0deg);
}
.area-content .list .l-side .toggle-btn.fa-minus-square {
    transform: rotate(180deg);
}
.area-content .list .title {
    padding-left: 5px;
    line-height: inherit;
    margin-bottom: 0;
    word-break: break-word;
}
.area-content.no-check .list .title {
    padding-left: 0;
}
.area-content .list.list-4 .title.unit-defaults {
    display: none;
}
.unit-defaults .area-content .list.list-4 .unit[data-state-teamed] .title.unit-defaults {
    display: block;
}
.area-content .list.list-4 .title.unit-defaults .dv-name {
    color: #555555;
}
.area-content .list.list-4 .title .dv-identifier {
    font-style: italic;
    color: #777777;
}
.area-content .unit[data-state-blocked] .dv-name,
.area-content .unit[data-state-blocked] .dv-identifier {
    text-decoration: line-through;
}
.area-content .unit.division-finished .dv-name,
.area-content .unit.division-finished .dv-identifier {
    opacity: .7;
}
.area-content .list .dv-team-marker {
    font-size: 0.9em;
    position: relative;
    top: -4px;
    opacity: 0.5;
    margin-left: 3px;
    display: none;
}
.area-content .unit[data-state-teamed] .dv-team-marker {
    display: inline-block;
}
.area-content .list.list-4 .r-side { /* buttons */
    margin-left: auto;
    display: flex;
}
.area-content .list.list-4 .r-side .state-icons,
.area-content .list.list-4 .r-side .abo-icons {
    margin-right: 25px;
    align-self: center;
    font-size: 1em;
    white-space: nowrap;
}
.area-content .list.list-4 .r-side .abo-icons .fas:first-child,
.area-content .list.list-4 .r-side .abo-icons .far:first-child {
    margin-right: 5px;
}
.area-content .list.list-4 .r-side .abo-icons .fas,
.area-content .list.list-4 .r-side .abo-icons .far {
    opacity: 0;
}
.area-content .list.list-4 [data-state-dv] .r-side .abo-icons .fa-th-list,
.area-content .list.list-4 [data-state-mr] .r-side .abo-icons .fa-list {
    opacity: 0.5;
}
.area-content .state-icons,
.area-content .state-icons .state-play,
.area-content .state-icons .state-hint,
.area-content .state-icons .state-reported,
.area-content .state-icons .state-final {
    display: none;
}
.area-content .unit[data-state-blocked] .state-icons,
.area-content .state-icons[data-state-week-scheduled],
.area-content .state-icons[data-state-day-reported],
.area-content .state-icons[data-state-week-reported] {
    display: block;
}
.area-content .state-icons[data-state-week-scheduled] .state-play,
.area-content .state-icons[data-state-day-reported] .state-play {
    display: inline-block;
    opacity: .7;
}
.area-content .state-icons[data-state-day-reported] .state-reported {
    display: inline-block;
}
.area-content .state-icons[data-state-week-reported] .state-play {
    display: none;
}
.area-content .state-icons[data-state-week-reported] .state-final {
    display: inline-block;
}
.area-content .unit[data-state-blocked-part] .state-icons[data-state-week-scheduled] .state-play,
.area-content .unit[data-state-blocked-part] .state-icons[data-state-week-scheduled] .state-final {
}
.popover.popinfo .state-hint,
.area-content .unit[data-state-blocked] .state-icons .state-hint,
.area-content .unit[data-state-blocked-part] .state-icons[data-state-week-scheduled] .state-hint {
    display: inline-block;
    color: #FF0000;
}

.area-content .list.list-4 .r-side .btn-group,
.area-content .list.list-4 .r-side label.sbrCheckProd {
    display: flex;
    min-width: 74px;
    min-height: 28px;
    white-space: nowrap;
}
.area-content .list.list-4 .r-side label.sbrCheckProd {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    min-height: 28px;
}
.area-content .list.list-4 .r-side label.sbrCheckProd > span {
    top: 2px;
}
.area-content .list.list-4 .r-side .btn-group button {
    width: 35px;
}
.area-content .unit[data-state-blocked] .btn-group button,
.area-content .unit[data-state-blocked] .sbrCheckProd * {
    display: none !important;
    pointer-events: none;
}
.filtered .list-row:not(.visible-filtered):not(.visible-filtered-child):not(.unit) {
    display: none;
}
.filtered .list-row.visible-filtered-child .list-row:not(.competition-hint) {
    display: block !important;
}

/* popup */
.custom-modal .err-fieldset:not(.srverr) {
    border: none;
}
.custom-modal .err-fieldset.srverr>.fieldset_level_5>div:first-child {
    display: none;
}

.custom-modal .successbar-wrapper {
    top: 110px;
}
.custom-modal .modal-dialog {
    top: 0;
    overflow: hidden;
}
.custom-modal .modal-dialog .modal-body {
    overflow-x: hidden;
    overflow-y: auto;
}
.custom-modal .modal-header {
    border: none;
    border-radius: 0;
    padding-right: 35px;
    min-height: 105px;
}
.custom-modal .modal-header:not(.ctx_colors), .custom-modal .modal-footer {
    background-color: #FFFFFF;
}
.custom-modal .modal-footer {
    border-radius: 0;
}
#details-modal .modal-header.prod-active {
    display: flex;
    padding-right: 15px;
}

.custom-modal .popupTitle {
    margin-top: 5px;
}
.custom-modal .popupTitle h2 {
    margin-top: 10px;
}
.custom-modal .popupTitle h3 {
    margin-bottom: 0;
}
.custom-modal .header-img {
    margin-top: 20px;
}
.custom-modal .header-img p {
    margin-bottom: 0;
}
#details-modal .modal-header:not(.prod-active) .default-row {
    display: block;
}
#details-modal .modal-header:not(.prod-active) .prod-row,
#details-modal .modal-header.prod-active .default-row,
#details-modal .modal-header.prod-active .close {
    display: none;
}
#details-modal .modal-header.prod-active .prod-row {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    padding: 0 5px;
}
#details-modal .modal-header .prod-counter {
    font-size: 1.5em;
    white-space: nowrap;
}
#details-modal .modal-header .prod-counter > .prod-num {
    font-weight: bold;
}
#details-modal .modal-header .contextbar_close {
    align-self: center;
    top: auto;
}
#details-modal .modal-division-header {
    padding: 8px 40px 4px 10px;
    margin-bottom: 3px;
    border: 1px solid #e5e5e5;
    border-radius: 0;
}
#details-modal .modal-division-header-hint {
    font-size: 80%;
    font-style: italic;
}
#details-modal .headClosed .modal-division-header-hint {
    display: none;
}
#details-modal .modal-division-prod {
    padding: 8px 40px 4px 10px;
    margin-top: 0px;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    transition: margin .4s cubic-bezier(.25, 0, .6, 1);
}
#details-modal .headClosed.prodClosed .modal-division-prod {
    margin-top: 0px;
}
#details-modal .modal-body #modal-division-header-toggler {
    position: absolute;
    top: 15px;
    right: 20px;
    transition: right .2s cubic-bezier(.25, 0, .6, 1) .1s,
                top .2s cubic-bezier(.25, 0, .6, 1);
}
#details-modal .modal-body.prodClosed #modal-division-header-toggler {
    right: 20px;
    top: 15px;
}
#details-modal .modal-body.headClosed.prodClosed:not(.noprod) #modal-division-header-toggler {
    right: 55px;
    top: 15px;
    transition: right .2s cubic-bezier(.25, 0, .6, 1),
                top .2s cubic-bezier(.25, 0, .6, 1) .1s;
}
#details-modal .modal-body.long-trans #modal-division-header-toggler {
    transition-duration: .7s;
}
#details-modal .modal-body #modal-division-prod-toggler {
    position: absolute;
    top: 147px;
    right: 20px;
    transition: top .3s cubic-bezier(.25, 0, .6, 1);
}
#details-modal .modal-body.long-trans #modal-division-prod-toggler {
    transition-duration: .9s;
}
#details-modal .modal-body.headClosed #modal-division-prod-toggler,
#details-modal .modal-body.headClosed.prodClosed #modal-division-prod-toggler {
    top: 15px;
}
#details-modal .noprod #modal-division-prod-toggler {
    display: none;
}
#details-modal #modal-division-header-toggler > button,
#details-modal #modal-division-prod-toggler > button {
    width: 30px;
    height: 20px;
    font-size: 14px !important;
}
#details-modal .partially-disabled-hint {
    margin-top: 25px;
    margin-bottom: 0;
    transition: .2s margin cubic-bezier(.25, 0, .6, 1);
}
#details-modal .headClosed .partially-disabled-hint {
    margin-top: 35px;
    margin-bottom: -20px;
}
#details-modal .modal-division-content {
    padding: 15px;
}
.custom-modal .pageId {
    padding-right: 7px;
    text-align: right;
    font-size: 10px;
    color: #999999;
}
.custom-modal .smLogo {
    display: block;
    margin-left: auto;
    background: transparent url(../../images/sm_logo7a.png) center bottom no-repeat;
    width: 40px;
    height: 40px;
}
#details-modal .modal-division-content h3 {
    margin: 20px 0 5px;
}
#details-modal .modal-division-content h3.green {
    margin: 30px -15px 10px;
    transition: margin .1s cubic-bezier(.25, 0, .6, 1) .1s;
}
#details-modal .modal-division-content h3.green {
    margin-top: 50px;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
    font-size: 1.2em;
    font-weight: bold;
    letter-spacing: 1px;
    background-color: transparent;
    padding: 0;
}
#details-modal .modal-division-content h3.green:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    right: 0;
    margin: auto;
    background: #24ad80;
    height: 2px;
}
#details-modal .long-trans .modal-division-content h3.green {
    transition-duration: .7s;
}
#details-modal .modal-division-content h3+.subtitle {
    margin: -7px 0 7px;
}
#details-modal .match-head .match-time {
    padding-right: 17px !important;
}
#details-modal .nomr .match-reportlink {
    display: none !important;
}
#details-modal .match {
    min-height: 34px;
}
#details-modal .match-time {
    flex-direction: row !important;
    justify-content: flex-end;
    padding-right: 5px !important;
}
#details-modal .match .winner {
    font-weight: bold;
}
#details-modal .matches .row > div,
#details-modal .tablerows .row > div,
#details-modal .ratings .row > div,
#details-modal .teams .row > div {
    padding-top: 6px;
    padding-bottom: 6px;
}
#details-modal .match-head > div,
#details-modal .table-head > div,
#details-modal .rating-head > div,
#details-modal .table-row > .table-rank,
#details-modal .table-row > .table-points {
    font-weight: bold;
}
#details-modal .matches .row > div,
#details-modal .table-head > div,
#details-modal .table-row > div,
#details-modal .rating-head > div:not(.rating-name),
#details-modal .rating > div:not(.rating-name) {
    padding-right: 0;
    padding-left: 5px;
}
#details-modal .match-head > .match-result,
#details-modal .match > .match-result,
#details-modal .table-head > .table-rank,
#details-modal .table-row > .table-rank {
    padding-left: 0;
    padding-right: 5px;
    justify-content: center;
}
#details-modal .matches .row > .match-result,
#details-modal .tablerows .row > .table-points {
    padding-top: 0;
    padding-bottom: 0;
}
#details-modal .match .results {
    font-weight: bold;
}
#details-modal .match .result-info {
    font-size: .9em;
    opacity: 0.7;
}
#details-modal .table-rank .fas, #details-modal .table-rank .far {
    right: 40px;
    position: absolute;
}
#details-modal .hiddenTrend .table-rank .fas, #details-modal .hiddenTrend .table-rank .far {
    visibility: hidden;
}
#details-modal .table-rank .fas.table-icon-up, #details-modal .table-rank .far.table-icon-up {
    transform: rotate(-45deg);
}
#details-modal .table-rank .fas.table-icon-down, #details-modal .table-rank .far.table-icon-down {
    transform: rotate(45deg);
}
#details-modal .promotionTeam .table-rank {
    background-color: #A7DE39;
    color: #FFF;
}
#details-modal .promotionPlayoffTeam .table-rank,
#details-modal .relegationPlayoffTeam .table-rank {
    background-color: #FFC90E;
    color: #FFF;
}
#details-modal .relegationTeam .table-rank {
    background-color: #D72020;
    color: #FFF;
}
#details-modal .teams .team-name {
    padding-left: 40px;
}
#details-modal .sbrCheckProd {
    margin: 1px 0 1px -3px;
}
#details-modal label.t.sbrCheckProd:not(.nt) input[type=checkbox] {
    left: 50%;
    margin-left: -7px;
}
#details-modal label.t.sbrCheckProd:not(.nt) input[type=checkbox]+.lbl {
    padding-left: 30px;
}


#details-modal .teamed-division {
    margin-bottom: 20px;
}
#details-modal .teamed-division > .header, #details-modal .team-ed > .header {
    font-weight: bold;
}
#details-modal .team-ed .team {
    vertical-align: middle;
    margin-top: 10px;
}
#details-modal .teamed .row > div {
    padding: 4px 5px;
}
#details-modal .teamed .row .team-name,
#details-modal .teamed .row .club-name {
    display: flex;
    justify-content: center;
    flex-direction: column;
    min-height: 38px;
}
#details-modal .teamed .row .club-name {
    line-height: 1.1em;
}
#details-modal .form-control ~ .form-control-badge {
    top: -5px;
}
#details-modal .teamed .club-name {
    color: #666666;
}
#details-modal .teamed .ted-bar {
    display: flex;
    position: absolute;
    right: 6px;
    top: -4px;
    width: auto;
    padding-left: 10px;
    height: auto;
    opacity: 0;
    text-align: center;
    color: #666666;
    background-color: #f8f8f8;
    cursor: pointer;
}
#details-modal .teamed .division .ted-bar {
    top: 3px;
}
#details-modal .teamed .ted-bar>div {
    width: 30px;
    line-height: 30px;
    border-radius: 50%;
}
#details-modal .teamed .ted-bar>.ted-copy {
    transform: rotate(90deg);
}
#details-modal .teamed .ted-bar>div:hover {
    background-color: #e3e3e3;
    color: #333;
}
#details-modal .teamed .ted-bar>div>i {
    position: relative;
    top: 1px;
}
#details-modal .teamed .row:hover .ted-bar {
    opacity: 1;
}

/* popinfo */
.popover.popinfo {
    max-width: 400px;
    border-radius: 3px;
    padding: 0px;
}
.popover.popinfo.popover-wide {
    max-width: 600px;
}
.popover.popinfo .popover-title {
    border-radius: 3px;
    display: flex;
}
.popover.popinfo .popover-title > .raw {
    margin-left: auto;
    margin-right: 0;
    font-size: 13px;
    text-transform: uppercase;
    font-family: monospace;
    opacity: 0.5;
}
.popover.popinfo .popover-content {
    background-color: #fff;
}
.popover.popinfo .popinfo-content {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
.popover.popinfo .popinfo-row  {
    position: relative;
    display: table-row;
}
.popover.popinfo .popinfo-label,
.popover.popinfo .popinfo-value,
.popover.popinfo .popinfo-spacer {
    line-height: 1.4;
    flex-grow: 1;
    width: 100%;
    word-break: break-word;
}
.popover.popinfo .popinfo-label {
    position: relative;
    width: 45%;
    padding: 4px 15px 0 0;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.75em;
    text-align: right;
}
.popover.popinfo .popinfo-label.popinfo-nolabel {
    display: none;
}
.popover.popinfo .popinfo-value {
    position: relative;
    width: 55%;
    min-height: 21px;
    min-width: min-content;
}
.popover.popinfo .popinfo-value .state-play,
.popover.popinfo .popinfo-value .state-reported,
.popover.popinfo .popinfo-value .state-final {
    left: auto;
    right: 20px;
    position: absolute;
    top: 3px;
}
.popover.popinfo .popinfo-value .state-play {
    opacity: .7;
}
.popover.popinfo .popinfo-label.popinfo-id {
    width: 30%;
}
.popover.popinfo .popinfo-value.popinfo-id {
    width: 70%;
    font-size: 13px;
    padding-top: 2px;
    text-transform: uppercase;
    font-family: monospace;
}
.popover.popinfo .popinfo-label.popinfo-nolabel+.popinfo-value {
    width: 100%;
}
.popover.popinfo .popinfo-head {
    text-transform: uppercase;
    font-size: 1em;
    border-bottom: 2px solid #4EDAAE;
    margin-top: 10px;
    margin-bottom: 5px;
    font-family: DFBSansWeb, Verdana, Arial, sans-serif;
    min-height: 15px;
    line-height: 1.2;
}
.popover.popinfo .popinfo-head:nth-child(2) {
    margin-top: 5px;
}
.popover.popinfo .popinfo-label.popinfo-nolabel,
.popover.popinfo .popinfo-value.popinfo-small {
    font-size: 12px;
}
.popover.popinfo .popinfo-spacer {
    border-bottom: 1px solid #f0f0f0;
    margin: 10px 0px;
}

/* contact */
#contacts .contact-list-header,
#contacts .contact-list {
    margin-bottom: 5px;
}
#contacts .contact-list .input-group-addon {
    padding: 6px 8px;
}
#contacts .contact-primary,
#contacts .contact-notification {
    height: 34px;
    padding: 0;
    min-width: 11px;
}
#contacts .primary-content,
#contacts .notification-content {
    height: 100%;
    width: 20px;
    line-height: 34px;
}
#contacts .primary-content {
    color: #AA0000;
}

#reminder #pwdForm label {
    text-align: right;
    margin-top: 8px;
}
#reminder .row {
    margin-bottom: 5px;
}
#notes .notes-list {
    min-height: 114px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#notes .note-content {
    margin-bottom: 20px;
    width: 100%;
}
#notes .note-content .note-date {
    color: #606060;
    font-size: 0.9em; 
}
#smessages .messages-list {
    min-height: 114px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#smessages .message-content {
    margin-bottom: 20px;
    width: 100%;
}
#save-popup .savebar_buttons{
    float: none;
}
#ftpForm #ssh{
    margin-top: 40px;
}
#ftpForm .ftp-activation{
    width: 100%;
}
#ftpForm .ftp-active{
    border: 1px solid #4ec49f;
    background: #4EDAAE;
}
#ftpForm .ftp-locked{
    background-color: #E3B1AF;
}
#profile-form .targets label.stop span.lbl {
    color: #BBBB00;
}
#profile-form .targets label.disa span.lbl {
    color: #FF3333;
}
.connection-list > .sm-panel > .panel-heading > .panel-title > .fas {
    display: none;
}
.connection-list > .sm-panel > .panel-heading.acti > .panel-title > .fa-play,
.connection-list > .sm-panel > .panel-heading.stop > .panel-title > .fa-pause,
.connection-list > .sm-panel > .panel-heading.disa > .panel-title > .fa-stop {
    display: inline-block;
    margin-right: 5px;
}
.connection-list .panel-heading.acti > .panel-title > i {
    color: #24ad80;
}
.connection-list .panel-heading.stop > .panel-title > i {
    color: #D8D800;
}
.connection-list .panel-heading.disa > .panel-title > i {
    color: #F18C89;
}

.deliveryPlans .timer-mode, .deliveryPlans .add-button {
    padding-top: 15px;
}
.deliveryPlans .timer-mode {
    padding-bottom: 15px;
}
.deliveryPlans .time-row .remove-wrapper {
    padding-right: 0
}

#season-tabs .empty-sub .fas.empty-sub, #season-tabs .empty-sub .far.empty-sub {
    color: rgba(0,0,0,0.3);
    margin-left: 5px;
}

#season-tabs li.current a {
    font-weight: bold;
}

/* ########################### */
/* QUEUE */
.queue-list .list {
    position: relative;
}
.queue-list .list-1>.create,
.queue-list .list-1>.state {
    font-weight: bold;
}
.queue-list .list-1>.create,
.queue-list .list-2>.osubject {
    padding-left: 25px;
}
.queue-list .list-1>.toggle-btn {
    position: absolute;
    top: 2px;
    left: 0;
}
.queue-list .oitems {
    padding-left: 0;
    padding-right: 0;
}
.queue-list .list-3,
.queue-list .list-4 {
    margin-left: 0;
    margin-right: 0;
}
.queue-list .list-4 {
    margin-bottom: 15px;
}


/* ########################### */
/* SPIELBERICHT */
.sbrLabel {
    font-weight: bold;
}
.sbrNum, .sbrPlace, .sbrTime, .sbrSchiri {
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid #009C6B;
}
.sbrSchiri > .fas, .sbrSchiri > .far {
    float: left;
}
.sbrSchiri div {
    line-height: 20px;
    padding-left: 15px;
    float: left;
    margin-right: -7px;
}
.sbrSchiri div:nth-of-type(1) {
    padding-left: 6px;
}

.sbrMatchStart, .sbrMatchEnd {
    max-width: 200px;
    margin: 0 auto 20px;
    text-align: center;
}
.sbrMatchEnd {
    margin: 20px auto 0;
}
.sbrMatchStart > div:first-child,
.sbrMatchEnd > div:first-child {
    font-size: 1.7em;
    font-weight: bold;
}
.sbrMatchStart > div:last-child,
.sbrMatchEnd > div:last-child {
    font-size: 1.4em;
}

.sbrBigTime {
    font-size: 3em;
    font-weight: bold;
    margin: 0 -15px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
}
.sbrRowEvent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
    height: 80px;
    border-bottom: 1px solid #ddd;
    margin-left: -15px;
    margin-right: -15px;
}
.sbrRowEvent .sbrMinute > div {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: flex-start;
    width: 40px;
    height: 40px;
    padding-left: 2px;
    margin: 2px 0px;
    text-align: center;
    color: #FFFFFF;
    font-size: 1.2em;
    line-height: 0.8em;
    border-radius: 0;
    background-color: #000000;
}
.sbrRowEvent:nth-child(2) {
    border-top: 1px solid #ddd;
}
.sbrRowEvent.sbrEventRight {
    flex-direction: row-reverse;
}
.sbrRowEvent .sbrMinute, .sbrRowEvent .sbrEvent {
    width: 20%;
}
.sbrRowEvent .sbrTeamPlayer {
    width: 60%;
}
.sbrRowEvent.sbrEventLeft .sbrTeamPlayer {
    margin-right: 0;
    text-align: left;
}
.sbrRowEvent.sbrEventLeft .sbrEvent, .sbrRowEvent.sbrEventRight .sbrEvent {
    margin-right: 0;
    text-align: center;
}
.sbrRowEvent.sbrEventLeft .sbrMinute {
    display: flex;
    justify-content: flex-end;
}
.sbrRowEvent.sbrEventRight .sbrTeamPlayer {
    margin-right: 0;
    text-align: right;
}
.sbrRowEvent.sbrEventRight .sbrMinute {
    display: flex;
    justify-content: flex-start;
}
.sbrEvent {
    display: flex;
    flex-direction: column-reverse;
}
.sbrEvent .sbrEventLabel {
    font-size: 0.7em;
    margin-top: -7px;
}
.sbrEvent .sbrEventGoals {
    font-size: 1.6em;
    font-weight: bold;
}
.sbrTeamPlayer .sbrEventLabel {
    font-size: 1.1em;
    font-weight: bold;
}
.sbrTeamPlayer .sbrEventPlayer1, .sbrTeamPlayer .sbrEventPlayer2 {
    font-size: 0.9em;
}
.sbrEvent-7 .sbrTeamPlayer .sbrEventPlayer1,
.sbrEvent-8 .sbrTeamPlayer .sbrEventPlayer1,
.sbrEvent-9 .sbrTeamPlayer .sbrEventPlayer1,
.sbrEvent-10 .sbrTeamPlayer .sbrEventPlayer1 {
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
}

.sbrEvent-7 .sbrMinute > div, .sbrEvent-9 .sbrMinute > div, .sbrEvent-10 .sbrMinute > div {
  background-color: #009C6B;
}
.sbrEvent-8 .sbrMinute > div {
  background-color: #FF4444;
}
.sbrEvent-7 .sbrEvent .sbrEventLabel, .sbrEvent-10 .sbrEvent .sbrEventLabel {
    display: none;
}
.sbrEventDescription {
    display: inline-block;
    margin-left: 10px;
    line-height: 13px;
}
.sbrEventIcon {
    position: relative;
}
.sbrCard {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 25px;
    margin-left: -8px;
    margin-top: -13px;
    border-radius: 3px;
    transform: rotate(12deg);
}
.sbrEvent-2 .sbrCard, .sbrEvent-4 .sbrCard:first-child {
    background-color: #FFC90E;
}
.sbrEvent-3 .sbrCard, .sbrEvent-4 .sbrCard:last-child {
    background-color: #DC0000;
}
.sbrEvent-2 .sbrCard:last-child, .sbrEvent-3 .sbrCard:last-child {
    display: none;
}
.sbrEvent-4 .sbrCard:first-child {
    margin-left: -13px;
}
.sbrEvent-4 .sbrCard:last-child {
    margin-left: -7px;
    margin-top: -16px;
    border-radius: 6px;
    border: 3px solid white;
    box-sizing: content-box;
}
.sbrEvent-4.lighton:hover .sbrCard:last-child {
    border-color: #ecf4e5;
}
.sbrEvent-1 .sbrEventIcon {
    background: transparent url(../images/icon_substitution.png) center no-repeat;
    width: 22px;
    height: 22px;
    margin: auto;
}

.sbrAufstellung .row, .sbrAufstellungReserve .row,
.sbrBetreuer .row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}
.sbrAufstellung .row > div, .sbrAufstellungReserve .row > div,
.sbrBetreuer .row > div {
    padding: 0 3px;
}
.sbrJerseyNum {
    display: flex;
    justify-content: space-around;
    justify-content: space-evenly;
    align-items: center;
    min-width: fit-content;
}
.sbrJerseyNum .sbrSpacer {
    min-width: 5px;
}
.sbrJerseyNum .sbrHome, .sbrJerseyNum .sbrAway {
    width: 30px;
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
}

.sbrJerseyNum .sbrHome div, .sbrJerseyNum .sbrAway div {
    border-radius: 15px;
    background-color: #000000;
    color: #FFFFFF;
    width: 30px;
    height: 30px;
    margin: 2px auto;
    line-height: 30px;
}
.sbrHomeK .sbrJerseyNum .sbrHome div, .sbrHomeC .sbrJerseyNum .sbrHome div,
.sbrAwayK .sbrJerseyNum .sbrAway div, .sbrAwayC .sbrJerseyNum .sbrAway div {
    background-color: #009C6B;
}
.sbrJerseyNum .sbrHome div.empty, .sbrJerseyNum .sbrAway div.empty {
    opacity: 0;
}

.sbrBetreuer .row {
    padding: 3px 0;
}
.sbrBetreuer .sbrLabel div {
    padding: 3px 3px;
    overflow: hidden;
}

.sbrPaarung {
    margin-bottom: 10px;
}
.sbrPaarungHeim, .sbrPaarungGast {
    text-align: center;
    padding: 7px;
    font-size: 1.6em;
    align-self: flex-start !important;
}
.sbrPaarungErg {
    text-align: center;
    padding: 7px;
}
.sbrFinalResult {
    font-size: 1.8em;
    font-weight: bold;
}
.sbrHalftimeResult {
    font-size: 1.2em;
}

/* ########################### */

/* trumbowyg editor customs */
.trumbowyg-box.small,
.trumbowyg-box.small .trumbowyg-editor,
.trumbowyg-box.small .trumbowyg-textarea {
    min-height: 150px;
}
.trumbowyg-box.small {
    margin-top: 0;
}

/* ########################### */
/* Wizzard-Layouts */
/* NAVI */
.sm-wizard {
    padding: 0 !important;
}
.sm-wizard .modal-dialog {
    height: calc(100% - 60px);
}
.sm-wizard .modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.sm-wizard .modal-header,
.sm-wizard .modal-footer {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    flex-grow: 0;
    flex-shrink: 0;
}
.sm-wizard .modal-body {
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0;
}

.sm-wizard .wizard-navi {
    display: flex;
    justify-content: center;
    height: 29px;
    padding: 0;
    margin: 30px 0 0;
    list-style: none;
}
.sm-wizard .wizard-navi > li {
    position: relative;
    min-width: calc(33.3333% - 6px);
    margin: 0 3px;
    padding-top: 7px;
    font-size: 0.75em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #AAAAAA;
    transition: all .3s ease-in;
}
.sm-wizard .wizard-navi > li:before,
.sm-wizard .wizard-navi > li:after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    border-radius: 5px;
    background-color: #CCCCCC;
    transform-origin: left;
}
.sm-wizard .wizard-navi > li:after {
    background-color: #2075b6; /* #20AE80; */
    transform: scaleX(0);
    transition: all .2s ease-in;
}
.sm-wizard .wizard-navi > li.active:after,
.sm-wizard .wizard-navi > li.completed:after {
    transform: scaleX(1);
}
.sm-wizard .wizard-navi > li.active.now:after,
.sm-wizard .wizard-navi > li.completed.now:after {
    transition: none;
}
.sm-wizard .wizard-navi > li.active {
    color: inherit;
    font-size: 1em;
}
.sm-wizard .wizard-navi > li.completed {
    color: #2075b6; /* #20AE80; */
}
.sm-wizard .wizard-navi > li.completed:before {
    background-color: #20AE80;
}
/* SLIDER */
.sm-wizard .wizard-slider {
    position: relative !important;
    top: 0 !important;
    bottom: 0 !important;
    padding-left: 0;
    padding-right: 0;
    overflow-y: hidden !important;
}
.sm-wizard .wizard-slider.init > .wizard-pages {
    display: none;
}
.sm-wizard .wizard-pages {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
.sm-wizard .wizard-pages .wizard-scroller-wrapper {
    display: flex;
    flex-direction: column;
}
.sm-wizard .wizard-pages .wizard-scroller-wrapper > *:not(.wizard-scroller) {
    flex-grow: 0;
    flex-shrink: 0;
}
.sm-wizard .wizard-pages .wizard-scroller {
    flex-grow: 1;
    flex-shrink: 1;
    margin-right: -5px;
    overflow-y: scroll;
}
.sm-wizard .wizard-pages > li {
    position: relative;
    float: left;
    height: 100%;
    padding: 20px 24px 0 24px;
}
.sm-wizard .wizard-pages > li h2 {
    margin-top: 0;
}
.sm-wizard .futile-wrapper {
    display: none;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #BBBBBB;
}
.sm-wizard .error-wrapper {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #BBBBBB;
}
.sm-wizard .page-1 h3 {
    margin-bottom: 10px;
}
.sm-wizard .page-1 p + h3,
.sm-wizard .page-1 ol + h3,
.sm-wizard .page-1 ul + h3 {
    margin-top: 20px;
}
.sm-wizard .page-1 ol,
.sm-wizard .page-1 ul {
    margin-bottom: 30px;
}
.sm-wizard .page-1 ol>li,
.sm-wizard .page-1 ul>li {
    margin-bottom: 10px;
}
.sm-wizard .page-1 ol.icon-columns {
    list-style: none;
}
.sm-wizard .page-1 ol.icon-columns > li {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.sm-wizard .page-1 ol.icon-columns > li > div {
    flex-grow: 1;
    flex-shrink: 0;
}
.sm-wizard .page-1 ol.icon-columns > li > div:not(:first-child) {
    max-width: calc(100% - 70px);
}
.sm-wizard .page-1 ol.icon-columns > li > div:first-child {
    flex: 0 1 60px;
    margin-top: 3px;
}
.sm-wizard .selection-buttons {
    padding-bottom: 10px;
}
.sm-wizard .selection-buttons {
    max-width: 100%;
}
.sm-wizard .selection-buttons,
.sm-wizard .selection-buttons>div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
.sm-wizard .selection-buttons .sm-btn,
.sm-wizard .selection-buttons .sm-btn-icon {
    font-size: 14px;
}
.sm-wizard .selection-buttons .tw-show {
    margin-left: 0;
    margin-right: auto;
}
.sm-wizard .selection-buttons .tw-mark {
    margin-left: 20px;
}
.sm-wizard .selection-buttons .tw-mark:last-child {
    margin-right: -5px;
}
.sm-wizard .selection-buttons .tw-show > button:first-child,
.sm-wizard .selection-buttons .tw-mark > button:first-child {
    margin-right: 5px;
}
.sm-wizard .selection-buttons .tw-mark > button:last-child {
    margin-left: 5px;
}
.sm-wizard .selection-buttons .btn-group button:first-of-type {
    padding: 5px 8px;
}
.sm-wizard .selection-buttons .btn-group.open .dropdown-toggle {
    box-shadow: none;
}
.sm-wizard .selection-buttons .btn-group .dropdown-menu {
    right: 0;
    left: auto;
}
.sm-wizard .wizard-ignore-first {
    margin: 20px 0 0;
}

.sm-wizard .prob-token.hight {
    background-color: #00DD00;
}
.sm-wizard .prob-token.medium {
    background-color: #FFFF00;
}
.sm-wizard .prob-token.low {
    background-color: #FFBB00;
}
.sm-wizard .r-side[data-check-state=false] .prob-token {
    background-color: transparent;
}

.sm-wizard .area-content .season-hints,
.sm-wizard .area-content .list.list-3 .r-side {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}
.sm-wizard .area-content .season-hints {
    justify-content: flex-end;
    font-size: .9em;
}
.sm-wizard .list .unit[data-state-subscribed] .title {
    color: #777777;
}
.sm-wizard .tw-checks label {
    margin-bottom: 0;
}
.sm-wizard .to-season,
.sm-wizard .from-season,
.sm-wizard .tw-checks,
.sm-wizard .tw-season-checks {
    width: 40px;
    margin-right: 10px;
    line-height: 20px;
    text-align: center;
}
.sm-wizard .tw-mark .prob-token,
.sm-wizard .r-side .check-icon {
    font-size: 1.3em;
    line-height: 16px;
}
.sm-wizard .tw-mark .prob-token,
.sm-wizard .tw-checks .check-icon,
.sm-wizard .tw-season-checks .check-icon {
    position: relative;
    top: 2px;
    left: .5px;
}

.sm-wizard .prob-token.dull {
    color: #737373;
}
.sm-wizard .competition-hint.disabled .tw-checks .check-icon {
    background-color: #EEEEEE;
}
.sm-wizard .competition-hint .l-side {
    flex-direction: row !important;
}

.sm-wizard .takeoverDetails .value {
    font-weight: bold;
}

.sm-wizard .empty-msg ul li {
    margin-bottom: 10px;
}
.sm-wizard .empty-msg ul li.no-style {
    list-style: none;
    font-style: italic;
}

.sm-wizard .tw-hidden-comp-subscribedicon,
.sm-wizard .tw-hidden-comp-noteicon {
    cursor: pointer;
}
.sm-wizard .tw-hidden-comp-subscribedicon i:after {
    background-color: #20AE80;
    box-shadow: 0px -1.5px 0px 1px #FFFFFF;
}
.sm-wizard .tw-hidden-comp-subscribedicon {
    color: #20AE80;
    margin-left: 10px;
}
.sm-wizard .tw-hidden-comp-noteicon i:after {
    background-color: #CCCC00;
    box-shadow: 0px -1.5px 0px 1px #FFFFFF;
}
.sm-wizard .tw-hidden-comp-noteicon,
.sm-wizard .tw-hidden-noteicon {
    color: #CCCC00;
    margin-left: 10px;
    transition: opacity .5s ease-in;
}
.sm-wizard .tw-hidden-comp-subscribedicon,
.sm-wizard .tw-hidden-comp-noteicon {
    display: none;
}
.sm-wizard [data-state-hidden],
.sm-wizard [data-state-subscribed] {
    display: block;
    max-height: 0;
    opacity: 0;
    transition: max-height .5s ease-out, opacity .5s ease-out;
}
.sm-wizard .competition[data-has-state-subscribed] .tw-hidden-comp-subscribedicon,
.sm-wizard .competition[data-has-state-hidden] .tw-hidden-comp-noteicon {
    display: inline-block;
}
.sm-wizard .areas.state-subscribed-visible .tw-hidden-comp-subscribedicon,
.sm-wizard .areas.state-hidden-visible .tw-hidden-comp-noteicon {
    opacity: .5;
    pointer-events: none;
    cursor: default;
}
.sm-wizard .competition[data-show-state-hidden] .tw-hidden-comp-noteicon {
    opacity: 0;
    pointer-events: none;
    cursor: default;
}
.sm-wizard .competition[data-show-state-hidden] [data-state-hidden],
.sm-wizard .competition[data-show-state-subscribed] [data-state-subscribed] {
    display: block;
}
.sm-wizard .competition[data-show-state-hidden] [data-state-hidden],
.sm-wizard .state-hidden-visible [data-state-hidden],
.sm-wizard .state-subscribed-visible [data-state-subscribed] {
    max-height: 100px;
    opacity: 1;
    transition: max-height .5s ease-in, opacity .5s ease-in;
}

.sm-wizard .tw-compact-rowhead,
.sm-wizard .tw-compact-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 30px;
    grid-template-columns: auto 30px;
}
.sm-wizard .tw-compact-row {
    margin-top: 10px;
}
.sm-wizard .tw-compact-row.tw-unit:not(.tw-area):not(.tw-suba):not(.tw-team):not(.tw-comp) {
    margin-top: 0;
}
.sm-wizard .tw-compact-rowhead {
    display: none;
    margin-top: 20px;
    font-weight: bold;
}
.sm-wizard .tw-c-area, .sm-wizard .tw-c-suba, .sm-wizard .tw-c-team {
    flex: 0 0 20%;
}
.sm-wizard .tw-c-area {
    -ms-grid-row: 1;
    -ms-grid-column-span: 1;
    grid-row: 1;
    grid-column: span 2;
}
.sm-wizard .tw-c-suba {
    -ms-grid-row: 2;
    -ms-grid-column-span: 1;
    grid-row: 2;
    grid-column: span 2;
}
.sm-wizard .tw-c-team {
    flex: 0 0 15%;

    -ms-grid-row: 3;
    -ms-grid-column-span: 1;
    grid-row: 3;
    grid-column: span 2;
    padding-left: 25px;
}
.sm-wizard .tw-c-comp {
    flex: 0 0 45%;
    
    -ms-grid-row: 4;
    -ms-grid-column: 1;
    grid-row: 4;
    grid-column: 1;
    padding-left: 40px;
}
.sm-wizard .tw-c-ccheck {
    -ms-grid-row: 4;
    -ms-grid-column: 2;
    grid-row: 4;
    grid-column: 2;
}
.sm-wizard .tw-c-unit {
    flex: 0 0 35%;

    position: relative;
    -ms-grid-row: 5;
    -ms-grid-column: 1;
    grid-row: 5;
    grid-column: 1;
    padding-left: 10px;
}
.sm-wizard .tw-c-ucheck {
    -ms-grid-row: 5;
    -ms-grid-column: 2;
    grid-row: 5;
    grid-column: 2;
}
.sm-wizard .tw-area .tw-c-area {
    margin-bottom: 5px;
    margin-top: 15px;
    font-size: 1.2em;
    text-transform: uppercase;
    border-bottom: 2px solid #4EDAAE;
}
.sm-wizard .tw-suba .tw-c-suba,
.sm-wizard .tw-team .tw-c-team,
.sm-wizard .tw-comp .tw-c-comp,
.sm-wizard .tw-unit .tw-c-unit {
    margin-top: 3px;
    margin-bottom: 3px;
}
.sm-wizard .tw-compact-rowhead .tw-c-comp {
    flex: 0 0 10%;
    padding-right: 5px;
}
.sm-wizard .tw-comp-checked .tw-c-ucheck {
    color: #999999;
}
.sm-wizard .tw-c-comp:hover,
.sm-wizard .tw-c-comp:hover + .tw-c-ccheck,
.sm-wizard .tw-c-unit:hover,
.sm-wizard .tw-c-unit:hover + .tw-c-ucheck {
    background-color: rgba(210, 210, 210, 0.15);
}
.sm-wizard .tw-c-unit:before,
.sm-wizard .tw-c-unit:after {
    content: " ";
    display: none;
    position: absolute;
}
.sm-wizard .tw-c-unit:before {
    width: 20px;
    height: 8px;
    top: 3px;
    left: 13px;
    border: 3px solid #BBBBBB;
    border-top: 0;
    border-right: 0;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}
.sm-wizard .tw-c-unit:after {
    left: 30px;
    top: 9px;
    border: solid transparent;
    height: 0;
    width: 0;
    pointer-events: none;
    border-color: rgba(204, 204, 204, 0);
    border-left-color: #BBBBBB;
    border-width: 5.5px;
    margin-top: -5px;
    border-radius: 3px;
}

.sm-wizard .progress-wrapper {
    padding: 0 50px;
    transition: margin .2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sm-wizard .progress-wrapper:not(.ready) {
    margin-top: 50px;
    transition: none;
}
.sm-wizard .progress-wrapper .progress {
    transition: none;
}
.sm-wizard .progress-wrapper.ready .progress {
    height: 0;
    margin: 0;
    transition: margin .2s cubic-bezier(0.22, 0.61, 0.36, 1), height .2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sm-wizard .progress-stat {
    text-align: center;
    max-height: 100px;
    overflow: hidden;
}
.sm-wizard .ready .progress-stat {
    color: #888888;
    max-height: 0;
    opacity: 0;
    transition: max-height .2s cubic-bezier(0.22, 0.61, 0.36, 1) 4s, opacity .2s cubic-bezier(0.22, 0.61, 0.36, 1) 4s;
}
.sm-wizard .progress-timeouts {
    text-align: center;
    font-size: 1.2em;
    margin-top: 20px;
}
.sm-wizard .progress-timeouts.waiting {
    margin-top: 70px;
}
.sm-wizard .ready .progress-timeouts,
.sm-wizard .ready .progress-val {
    display: none;
}