@CHARSET "UTF-8";

.text-center {
    text-align: center !important;
}
.text-left {
    text-align: left !important;
}
.text-right {
    text-align: right !important;
}
.pull-none {
    float: none !important;
}
.sm-full {
    width: 100%;
}
.sm-inline-xxs > div {
    width: auto;
}
.break-all {
    word-break: break-all;
}
code {
    white-space: pre;
    overflow-y: scroll;
    display: block;
}
.tabswrapper {
    padding: 0;
    margin: 0 5px;
    width: auto;
    overflow: hidden;
    min-height: 0.01%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    overflow-x: auto;
}
.tabswrapper::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.tabswrapper::-moz-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.ui-tabs.sm-tabs .tabswrapper ul.ui-tabs-nav {
    display: table;
    width: auto;
    margin-left: 0;
}
.ui-tabs.sm-tabs .tabswrapper ul.ui-tabs-nav li {
    float: none;
    display: table-cell;
}
.ui-tabs.sm-tabs .tabswrapper.arrows .ui-tabs-nav + .ui-tabs-nav {
    display: none;
}
#tabs .slider-left, #tabs .slider-right {
    display: none;
}
.sm-tabs .slider-left, .sm-tabs .slider-right {
    padding: 6px 2px;
    font-size: 14px;
    margin: 6px 1px;
    border-radius: 0;
    float: left;
    cursor: pointer;
    display: inline !important;
    visibility: hidden;
    pointer-events: none;
}
.sm-tabs .slider-right {
    float: right;
    margin-left: 4px !important;
}
.sm-tabs .slider-left.active, .sm-tabs .slider-right.active {
    visibility: visible;
    pointer-events: auto;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: 0.8em 1.2em 0.5em 1.2em;
}
.ui-tabs.sm-tabs .ui-tabs-nav + .ui-tabs-nav .ui-tabs-anchor {
    padding: 0.8em 0.9em 0.8em 0.9em;
}

.form-group-mixed {
    display: flex;
}
.form-group-mixed .form-control {
    width: auto;
}
.form-group-mixed .mixed-2 {
    flex-grow: 2;
}
.form-group-mixed .mixed-3 {
    flex-grow: 3;
}
.form-group-mixed .mixed-4 {
    flex-grow: 4;
}
.form-group-mixed .mixed-5 {
    flex-grow: 5;
}

@media (min-width: 1200px) {
    .text-lg-center {
        text-align: center !important;
    }
    .text-lg-left {
        text-align: left !important;
    }
    .text-lg-right {
        text-align: right !important;
    }
    .pull-lg-left {
        float: left !important;
    }
    .pull-lg-right {
        float: right !important;
    }
    .pull-lg-none {
        float: none !important;
    }
    .sm-lg-full {
        width: 100%;
    }
    .row-lg-margin .row {
        margin-bottom: 10px;
    }
    .row-lg-margin-sm .row {
        margin-bottom: 3px;
    }
    .break-lg-all {
        word-break: break-all;
    }
    .fa-lg-lg /* fa-lg */ {
        font-size: 1.33333333em;
        line-height: .75em;
        vertical-align: -15%;
    }
    .sm-inline-lg > div {
        width: auto;
    }
    .messagebar-wrapper.sticky.has-messages .messagebar {
        width: 1170px;
        padding-left: 320px;
    }
    .contextbar-wrapper {
        width: 1170px;
    }
    .menuInfo>li.user>.username, .menuInfo>li.customer>.customername {
        max-width: 185px;
    }
}

@media (max-width: 1199px) {
    .messagebar-wrapper.sticky.has-messages .messagebar {
        width: 970px;
        padding-left: 260px;
    }
    .contextbar-wrapper {
        width: 970px;
    }
    .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
        padding: 0.8em 1em 0.5em 1em;
    }
    .ui-tabs.sm-tabs ul.ui-tabs-nav {
        margin-left: 3px;
    }
    .ui-tabs.sm-tabs .tabswrapper ul.ui-tabs-nav {
        margin-left: 0;
    }
    #workflow .top-bottom .left-line {
        width: 24%;
    }
    .menuInfo>li.user>.username, .menuInfo>li.customer>.customername {
        max-width: 170px;
    }
}

@media (min-width: 992px) {
    .system-messages > .sm-panel > .panel-body {
        padding-left: 10px;
    }
    .system-messages .smessage {
        margin-left: 0;
    }
    .contextbar_content>.conb {
        margin-top: 6px;
    }
    .sm-inline-md > div {
        width: auto;
    }
    .form-group-sm .input-group-btn button.sm-btn-icon {
        line-height: 1.3;
    }
    .area-content .list .list-row .r-side.badge {
        max-height: 17px;
    }
    .area-content .list.list-4 .l-side {
        padding-left: 10px;
    }
    .settings-area {
        top: 40px;
        min-width: 270px; 
    }
    #details-modal h3.green:first-child {
        margin-top: 0px;
    }
    #details-modal .headClosed h3:first-child,
    #details-modal .prodClosed:not(.noprod) h3:first-child,
    #details-modal .headClosed.prodClosed h3:first-child {
        margin-top: 22px;
    }
    #details-modal .match .results,
    #details-modal .table-row > .table-rank,
    #details-modal .table-row > .table-points {
        font-size: 1.2em;
        letter-spacing: 0.1em;
        font-weight: bold;
    }
    #details-modal .table-row > .table-rank {
        padding-top: 4px !important;
        padding-bottom: 5px !important;
    }
    #details-modal .match-time {
        width: 24%; /* 25% default */
    }
    #details-modal .match-num {
        width: 4%; /* 8.3333333% default */
    }
    #details-modal .match-reportlink {
        width: 5%; /* 8.3333333% default */
    }
    .sbrRowEvent .sbrMinute > div {
        font-size: 1.4em;
    }
    .sbrRowEvent .sbrEvent .sbrEventGoals {
        font-size: 2em;
    }
    .sbrRowEvent .sbrEvent .sbrEventLabel {
        font-size: 1em;
    }
    .sbrEvent-7 .sbrTeamPlayer .sbrEventPlayer1, .sbrEvent-8 .sbrTeamPlayer .sbrEventPlayer1,
    .sbrEvent-9 .sbrTeamPlayer .sbrEventPlayer1, .sbrEvent-10 .sbrTeamPlayer .sbrEventPlayer1 {
        font-size: 1.1em;
    }
}
@media (max-width: 991px) {
    body.sm-bigger, .sm-bigger td, .sm-bigger .ui-widget, .sm-bigger a.menu, .sm-bigger a.menu:link,
    .sm-bigger a.menu:visited, .sm-bigger a.menu:hover, .sm-bigger a.menu:active,
    .sm-bigger .form-horizontal input:not([type=submit]),
    .sm-bigger .form-horizontal .form-control, .sm-bigger .form-horizontal .form-control-static {
        font-size: 16px;
    }
    .sm-bigger .panel-title, .smbox h6 {
        font-size: 18px;
    }
    .sm-bigger h2 {
        font-size: 26px;
    }
    .sm-bigger h3 {
        font-size: 20px;
    }
    .sm-bigger h3 {
        font-size: 20px;
    }
    .sm-bigger .siteTitle h3 {
        font-size: 30px;
    }
    .sm-bigger h4 {
        font-size: 18px;
    }
    .sm-bigger h5 {
        font-size: 16px;
    }
    .sm-bigger .form-control:not(textarea):not(.form-control-xs):not(.form-control-sm),
    .sm-bigger .form-control-static:not(textarea):not(.form-control-xs):not(.form-control-sm),
    .sm-bigger .input-group-btn select {
        height: 36px;
    }
    .sm-bigger .form-group-sm .form-control:not(textarea),
    .sm-bigger .form-group-sm .form-control-static:not(textarea) {
        height: 33px;
    }
    .sm-bigger .form-group-sm .form-control,
    .sm-bigger .form-group-sm .form-control-static {
        font-size: 16px;
    }
    .sm-bigger .form-group-xs .form-control,
    .sm-bigger .form-group-xs .form-control-static {
        font-size: 14px;
    }
    .messagebar .page-id {
        padding-top: 2px;
    }
    .messagebar-wrapper.sticky.has-messages .messagebar {
        width: 750px;
        padding-left: 10px;
    }
    .contextbar-wrapper {
        width: 750px;
    }
    .menuInfo>li.user>.username, .menuInfo>li.customer>.customername {
        max-width: 215px;
    }
    .form-group-sm .form-control + .form-control-feedback {
        width: 36px;
        height: 36px;
        line-height: 36px;
    }
    .has-feedback:not(.feedback-left):not(.has-error) .form-control {
        padding-right: 36px;
    }
    .form-horizontal input[type=checkbox], .form-horizontal input[type=radio],
    .form-group input[type=checkbox], .form-group input[type=radio] {
        position: relative;
        top: -2px;
        margin-top: -1px;
        margin-right: 2px;
        width: 13px;
        height: 13px;
        padding: 0;
        vertical-align: bottom;
        *overflow: hidden;
    }
    .sm-bigger label.t input[type=checkbox]:not(.nt)+.lbl::before,
    .sm-bigger label.t input[type=radio]:not(.nt)+.lbl::before {
        font-size: 17px;
    }
    .sm-bigger label.t input[type=checkbox]:not(.nt):not(:checked)+.lbl::before {
        font-size: 17px;
    }
    .sm-bigger label.t.big input[type=checkbox]:not(.nt)+.lbl::before,
    .sm-bigger label.t.big input[type=radio]:not(.nt)+.lbl::before {
        font-size: 21px;
    }
    #pageId2 {
        top: 54px;
        right: 105px;
    }
    #pageId3 {
        top: -15px;
    }
    .siteTitle h3 {
        margin: 2px 0;
        display: flex;
    }
    .siteTitle.has-subTitle h3 {
        padding-bottom: 12px;
    }
    .siteTitle.has-subTitle h5 {
        display: flex;
        align-items: center;
        margin-top: -17px;
        height: 28px;
    }
    div.siteTitle h3>span, div.siteTitle h5>span {
        padding-top: 3px;
    }
    .menu-header .sticky-xs {
        position: relative;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        background-color: #FFFFFF;
        z-index: 1500;
        box-shadow: none;
    }
    .menu-container {
        position: absolute;
        display: block;
        padding: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    
    #menu, div.bodyNavi {
        width: 100%;
    }
    #menu {
        max-height: initial;
        overflow: visible;
    }
    div.siteLogo {
        width: 230px;
        margin: 0 auto;
    }
    
    ul.sm-menu li.menu-spacer {
        margin: 10px 10px 10px 60px !important;
    }
    
    #menubody .sticky-xs {
        display: none;
    }
    a.menu {
        height: 40px !important;
        line-height: 40px !important;
    }
    a.menu > .icon-right {
        line-height: 38px !important;
    }
    .menu-container {
        padding: 0;
    }
    .menu-container .menu-block-spacer {
        display: none;
    }
    .menu-container .techspacer {
        display: block;
        height: 10px;
    }
    .menu-container .fieldset.menu {
        border-radius: 0;
        border: 0;
        padding: 0;
        margin: 0;
    }
    .menu-container ul {
        padding: 0;
    }
    .menu-container ul.sm-menu {
        border-top: 0;
        border-bottom: 1px solid #ccc;
        background-color: #FFFFFF;
        padding: 10px 0;
    }
    .menu-container ul li {
        border-radius: 0;
        border: 0;
    }
    .menu-container ul li.menu-title, #techbutton {
        font-size: 1.1em;
        font-style: normal;
        font-weight: normal;
        text-transform: uppercase;
        margin-left: 5%;
    }
    .menu-container ul li.sm-menu-sub a {
        padding-left: 17%;
    }
    .menu-back {
        position: fixed;
        opacity: 0;
        top: 0;
        right: 1000px;
        bottom: -1000px;
        left: 0;
        background: rgba(0,0,0,0.6);
        transition: opacity 0.2s linear;
        z-index: 10100;
    }
    #menu {
        position: fixed;
        display: block;
        top: 0;
        left: -350px;
        width: 75%;
        max-width: 350px;
        background-color: #fff;
        height: 100%;
        transition-property: transform;
        transition-duration: 0.3s;
        transform: translateX(0);
        z-index: 10101;
    }
    body.dev-mode #menu {
        padding-bottom: 40px;
    }
    .menu-open #menu {
        transform: translateX(350px);
        box-shadow: 0 10px 14px 0 rgba(0,0,0,0.5);
    }
    .bodyNavi {
        padding-top: 0;
        background-color: #FFFFFF;
        height: 100%;
        overflow-y: scroll;
        margin-top: 0;
    }
    .bodyNavi::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .bodyNavi .menu-close {
        position: relative;
        top: 0;
        height: 55px;
        display: flex !important;
        align-items: center;
        background-color: #24ad80;
        border-bottom: 1px solid #FFFFFF;
        color: #FFFFFF;
        text-transform: uppercase;
        padding: 0 0 0 15px;
        cursor: pointer;
    }
    .bodyNavi .menu-close h3 {
        font-weight: bold;
        letter-spacing: 1px;
    }
    .bodyNavi .menu-close button {
        margin-right: 10px;
        margin-left: auto;
        padding: 15px;
        background: transparent;
        border: none;
        font-size: .75em;
        line-height: 0.9em;
    }
    .bodyNavi .info {
        background-color: #FFFFFF;
        padding: 6px 0;
        list-style-type: none;
        margin: 0;
    }
    .bodyNavi .info li {
        color: #B0B0B0;
        padding: 6px 0 0;
        font-size: 0.8em;
        margin: 0;
    }
    .bodyNavi .info>li>div {
        padding-left: 5%;
    }
    .bodyNavi .info>li .fas, .bodyNavi .info>li .far {
        margin-left: 5px;
        margin-right: 5px;
        
    }
    a.menu, a.menu:link {
        padding-left: 5%;
        line-height: 40px;
    }
    a.menu, a.menu:link {
        line-height: 50px;
        font-size: 1.1em;
        color: #666666;
    }
    a.menu .fas, a.menu .far {
        margin-right: 15px;
        color: #808080;
        font-size: 1.33333333em;
        position: relative;
        top: 1px;
    }
    #techbutton {
        display: flex;
        align-items: center;
    }
    #techbutton .fas, #techbutton .far {
        right: 2em;
        font-size: 0.9em;
    }
    #technavi {
        padding-top: 0;
        border-bottom: 0;
    }
    
    .ui-tooltip {
/*         z-index: 10501; */
    }
    .area-content .list {
        padding-left: 15px;
        margin-bottom: 20px;
    }
    .area-content .list.list-1 {
        padding-left: 5px;
        padding-right: 5px;
    }
    .area-content .list .l-side label input[type=checkbox] {
        position: relative;
        top: 2px;
    }
    .area-content .list .l-side .toggle-btn {
        font-size: 1.2em;
        top: 1px !important;
    }
    .area-content .list.list-4 .r-side label.sbrCheckProd {
        min-height: 28px;
    }
    .sm-dropdown .dropdown-menu li {
        padding: 10px 10px;
    }
    
    #workflow .top-bottom .left-text, #workflow .top-bottom .left-line {
        width: 44%;
    }
    #workflow .top-bottom .auto-manual,
    #workflow .top-bottom .horizontal-line.middle-line {
        width: 28%;
    }
    #workflow .middle{
        margin-right: 35%;
    }
    #workflow .top-right-line {
        height: 209px;
    }
    #details-modal h3.green:first-child {
        margin-top: 15px;
    }
    #details-modal .modal-header .prod-counter {
        margin-top: 33px;
    }
    #details-modal .headClosed.prodClosed h3:first-child {
        margin-top: 35px;
    }
    #details-modal .headClosed h3:first-child,
    #details-modal .prodClosed:not(.noprod) h3:first-child {
        margin-top: 35px;
    }
    #details-modal .modal-body.headClosed:not(.noprod) #modal-division-header-toggler {
        top: 139px;
    }
    #details-modal .modal-body #modal-division-prod-toggler {
        top: 272px;
    }
    #details-modal .match-subhead {
        border: 1px solid #dddddd;
        border-left: none;
        border-right: none;
    }
    #details-modal .match-head + .match-subhead {
        margin-top: 30px;
        margin-bottom: 0;
        border-top: none;
    }
    #details-modal .match-subhead .match-date {
        text-align: center;
        font-size: 1.2em;
        text-transform: uppercase;
        padding: 10px 0 !important;
    }
    #details-modal .modal-division-content {
        padding: 0 15px;
    }
    #details-modal .table-rank .fas, #details-modal .table-rank .far {
        font-size: 1.2em;
    }
    #details-modal .match-num, #details-modal .match-time,
    #details-modal .match-info, #details-modal .match-reportlink {
        opacity: 0.7;
        font-size: 0.9em;
        align-self: flex-end;
    }
    #details-modal .matches .row > div {
        padding-top: 0;
        padding-bottom: 0;
    }
    #details-modal .matches .match {
        padding: 10px 0;
    }
    #modal-division-header-toggler > button,
    #modal-division-prod-toggler > button {
        height: 23px;
    }
    #details-modal .match .results.special {
        font-size: 0.8em;
    }
    #details-modal .match .match-reportlink {
        display: block;
        opacity: 1;
        top: -5px;
    }
    #details-modal .sbrJerseyNum .sbrHome,
    #details-modal .sbrJerseyNum .sbrAway {
        font-size: 1.1em;
    }
    #details-modal .sbrBetreuer .row {
        display: block;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .text-md-center {
        text-align: center !important;
    }
    .text-md-left {
        text-align: left !important;
    }
    .text-md-right {
        text-align: right !important;
    }
    .pull-md-left {
        float: left !important;
    }
    .pull-md-right {
        float: right !important;
    }
    .pull-md-none {
        float: none !important;
    }
    .sm-md-full {
        width: 100%;
    }
    .row-md-margin .row {
        margin-bottom: 10px;
    }
    .row-md-margin-sm .row {
        margin-bottom: 3px;
    }
    .break-md-all {
        word-break: break-all;
    }
    .fa-md-lg /* fa-lg */ {
        font-size: 1.33333333em;
        line-height: .75em;
        vertical-align: -15%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .text-sm-center {
        text-align: center !important;
    }
    .text-sm-left {
        text-align: left !important;
    }
    .text-sm-right {
        text-align: right !important;
    }
    .pull-sm-left {
        float: left !important;
    }
    .pull-sm-right {
        float: right !important;
    }
    .pull-sm-none {
        float: none !important;
    }
    .sm-sm-full {
        width: 100%;
    }
    .row-sm-margin .row {
        margin-bottom: 10px;
    }
    .row-sm-margin-sm .row {
        margin-bottom: 3px;
    }
    .break-sm-all {
        word-break: break-all;
    }
    .fa-sm-lg /* fa-lg */ {
        font-size: 1.33333333em;
        line-height: .75em;
        vertical-align: -15%;
    }
    .modal-sm {
        width: 350px;
    }
    .custom-modal .modal-dialog {
        width: auto;
        margin: 30px 10px;
    }
}

@media (min-width: 768px) {
    .scrolltop {
        right: 50px;
    }
    body.scroller .scrolltop {
        bottom: 55px;
    }
    .successbar-wrapper {
        left: 50%;
        transform: translate(-50%,-100%);
        right: auto;
        min-width: 320px;
        max-width: 568px;
        min-height: 48px;
        border-radius: 0 0 2px 2px;
    }
    .successbar-wrapper.active {
        transform: translate(-50%,0);
    }
    .form-horizontal .control-label:not(.very-low) {
        margin-top: 9px;
        padding-top: 0px;
    }
    .form-horizontal .form-group-sm .control-label:not(.very-low) {
        margin-top: 7px;
        padding-top: 0px;
    }
    .smbox .form-group-sm:not(.single-row):not(.single-check-row) {
        margin-bottom: 5px;
    }
    .form-xs-group {
        margin-bottom: 0;
    }
    .sm-inline-sm > div {
        width: auto;
    }
    .contextbar-wrapper > div {
        padding: 10px 20px;
    }
    .contextbar_close {
        margin-right: 15px;
    }
    .ui-tabs.sm-tabs .ui-tabs-nav + .ui-tabs-nav {
        top: 3px;
    }
    dl.sm-legend-table > *:nth-child(4n-3),
    dl.sm-legend-table > *:nth-child(4n-1) {
        width: 8.33333333%;
    }
    dl.sm-legend-table > *:nth-child(4n-2),
    dl.sm-legend-table > *:nth-child(4n) {
        width: 41.66666667%;
    }
    dl.sm-legend-table > dt:nth-of-type(4n+2),
    dl.sm-legend-table > dt:nth-of-type(4n-3),
    dl.sm-legend-table > dd:nth-of-type(4n+2),
    dl.sm-legend-table > dd:nth-of-type(4n-3) {
        background-color: #f9f9f9;
    }
    dl.sm-legend-table > *:nth-last-child(4),
    dl.sm-legend-table > *:nth-last-child(3),
    dl.sm-legend-table > *:nth-last-child(2),
    dl.sm-legend-table > *:last-child {
        border-bottom: 1px solid #ddd;
    }
    .sbrRowEvent {
        flex-direction: row-reverse;
        height: 60px;
    }
    .sbrRowEvent, .sbrRowEvent:nth-child(2), .sbrBigTime {
        border: none;
    }
    .sbrRowEvent.sbrEventRight {
        flex-direction: row;
    }
    .sbrRowEvent .sbrMinute, .sbrRowEvent .sbrEvent {
        width: 16.66667%;
    }
    .sbrRowEvent .sbrTeamPlayer {
        width: 25%;
    }
    .sbrRowEvent.sbrEventLeft .sbrMinute {
        margin-right: 41.66667%;
        justify-content: center;
    }
    .sbrRowEvent.sbrEventRight .sbrMinute {
        margin-left: 41.66667%;
        justify-content: center;
    }
    .sbrRowEvent.sbrEventLeft .sbrTeamPlayer {
        text-align: right;
    }
    .sbrRowEvent.sbrEventRight .sbrTeamPlayer {
        text-align: left;
    }
    #details-modal .team-ed .team {
        margin-top: 5px;
    }
    .area-content .list.list-4 .r-side .btn-group,
    .area-content .list.list-4 .r-side label.sbrCheckProd {
        min-width: 137px;
    }
    #sysmsg-toggle {
        position: absolute;
        top: 14px;
        right: 24px;
    }
    .has-sysmsg #divisionCounter {
        right: 80px;
    }
}

@media (max-width: 767px) {
    .text-xs-center {
        text-align: center !important;
    }
    .text-xs-left {
        text-align: left !important;
    }
    .text-xs-right {
        text-align: right !important;
    }
    .pull-xs-left {
        float: left !important;
    }
    .pull-xs-right {
        float: right !important;
    }
    .pull-xs-none {
        float: none !important;
    }
    .smbox .form-group-sm:not(.single-row):not(.single-check-row) {
        margin-bottom: 10px;
    }
    .sm-xs-full {
        width: 100%;
    }
    .row-xs-margin .row {
        margin-bottom: 10px;
    }
    .row-xs-margin-sm .row {
        margin-bottom: 3px;
    }
    .col-xs-margin [class*="col-"] {
        margin-bottom: 5px;
    }
    .break-xs-all {
        word-break: break-all;
    }
    .fa-xs-lg /* fa-lg */ {
        font-size: 1.33333333em;
        line-height: .75em;
        vertical-align: -15%;
    }
    .form-mixed .form-group {
        margin-bottom: 0;
    }
    .form-mixed .form-group .form-control, .form-mixed .form-group .checkbox,
    .form-mixed .input-group-btn .btn {
        margin-bottom: 15px;
    }
    .form-mixed .form-group .checkbox {
        margin-top: 10px;
    }
    .menu-btn {
        left: 5px;
    }
    .menu-btn:active:hover, .menu-btn.active:hover {
        box-shadow: none;
    }
    .messagebar-wrapper.sticky.has-messages .messagebar {
        width: 100%;
        top: 45px;
    }
    .contextbar-wrapper {
        width: 100%;
    }
    .contextbar_content {
        min-height: 35px;
    }
    .contextbar_content>.cont button {
        min-width: 34px;
        min-height: 34px;
    }
    .footer-wrapper .footer {
        height: 45px;
    }
    .footer-wrapper>div {
        display: flex;
        align-items: stretch;
        justify-content: center;
    }
    .footer-wrapper li {
        display: flex;
        align-items: stretch;
    }
    .footer-wrapper li>a {
        display: flex !important;
        align-items: center;
        flex-direction: row;
    }
    .footer-wrapper .version {
        margin-top: 20px;
        text-align: right;
        justify-content: flex-end;
    }
    .form-horizontal .control-label:not(.very-low) {
        padding-top: 9px;
    }
    .dfb-loader .dfb-modal {
        background-color: black;
    }
    .dfb-loader .bounce1, .dfb-loader .bounce2, .dfb-loader .bounce3 {
        background-color: white;
    }
    .sm-tabs.ui-tabs ul.ui-tabs-nav {
        width: auto;
        display: table;
    }
    .sm-tabs.ui-tabs ul.ui-tabs-nav li {
        display: table-cell;
    }
    .sm-tabs .smbox {
        border-radius: 0;
        border-width: 1px 0 0 0;
        padding: 10px 0 0 0;
        box-shadow: none;
    }
    .actionbar {
        margin-bottom: 60px;
    }
    .sm-dropdown > ul {
        top: 80px;
        position: fixed;
        overflow: auto;
        bottom: 100px;
        left: 30px;
        right: 30px;
        border-radius: 0;
    }
    .sm-dropdown .dropdown-menu li {
        padding: 20px 30px;
        border-top: 1px solid #EEEEEE;
        font-size: 1.3em;
    }
    .sm-dropdown .dropdown-menu li:first-child {
        border: none;
    }
    .sm-dropdown.open {
        z-index: 100;
    }
    .sm-dropdown.open .dropdown-back {
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
    }
    .sm-dropdown.open #dropdown-cancel {
        display: block !important;
        visibility: visible;
        position: fixed;
        bottom: 37px;
        left: 31px;
        right: 31px;
        background: #FFFFFF;
        text-align: right;
        border-top: 1px solid #ccc;
        padding: 15px;
        margin-top: 10px;
        z-index: 1001;
    }
    
    .modal-dialog {
        top: 150px;
    }
    
    #techfrm {
        padding: 0 30px;
    }
    
    /* popup header */
    .custom-modal .popupTitle {
        margin-top: 5px;
        padding-right: 0;
    }
    .custom-modal .header-img {
        padding-left: 0;
        max-width: 60px;
    }
    #details-modal .modal-header .prod-counter {
        font-size: 1.2em;
    }
    
    #details-modal .team-ed .team.odd {
        background-color: transparent;
    }
    #details-modal .teamed-division .division:not(.header) .team-name,
    #details-modal .team-ed .team:not(.header) .team-name,
    #details-modal .team-ed .team:not(.header) .club-name {
        min-height: 0;
    }
    #details-modal .teams .row > div, #details-modal .teamed-division .row > div {
        padding-top: 2px;
        padding-bottom: 6px;
    }
    #details-modal .teams .row > div:first-child, #details-modal .teamed-division .row > div:first-child {
        padding-top: 6px;
    }
    
    #details-modal .sbrPaarung {
        flex-direction: column;
    }
    #details-modal .sbrPaarungHeim,
    #details-modal .sbrPaarungGast {
        width: 70%;
        font-size: 1.4em;
        line-height: 1.1em;
    }
    #details-modal .sbrPaarungHeim {
        padding-bottom: 0;
        text-align: left;
    }
    #details-modal .sbrPaarungGast {
        align-self: flex-end !important;
        text-align: right;
        padding-top: 0;
    }
    #details-modal .sbrPaarungErg {
        line-height: 1;
        padding: 15px 0;
    }
    
    .area-content .list .list-row > .desc {
        padding: 7px 0 7px;
    }
    .area-content .list.list-4 .list-row > .desc {
        padding: 3px 0 3px;
    }
    .area-content .list.list-4 {
        padding-left: 0px;
        margin-left: -30px;
        margin-top: 10px;
    }
    .area-content .list.list-4 .l-side {
        padding-left: 0px;
    }
    .support-wrapper {
        margin: 20px 0 30px 0px;
    }
    .support-number span {
        white-space: nowrap;
    }
    dl.sm-legend-table > dt {
        width: 16.66666667%;
    }
    dl.sm-legend-table > dd {
        width: 83.33333333%;
    }
    dl.sm-legend-table > dt:nth-of-type(2n-1),
    dl.sm-legend-table > dd:nth-of-type(2n-1) {
        background-color: #f9f9f9;
    }
    dl.sm-legend-table > *:nth-last-child(2),
    dl.sm-legend-table > *:last-child {
        border-bottom: 1px solid #ddd;
    }
}

@media (min-width: 481px) {
    .sm-inline-xs > div {
        width: auto;
    }
    .custom-modal .successbar-wrapper {
        top: 105px;
    }
}
@media (max-width: 480px) {
    .contactimg {
        margin-bottom: 10px;
    }
    .content-wrapper .contactrow:nth-child(4) .contactphone {
        display: none;
    }
    .menuInfo>li.user>.username, .menuInfo>li.customer>.customername {
        max-width: calc(100% - 115px);
    }
    .menu-container ul li.sm-menu-sub a {
        padding-left: 10%;
    }
    div#menubody {
        margin-bottom: 180px !important;
    }
    .footer-wrapper {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: space-around;
    }
    .footer-wrapper > div {
        margin-left: auto;
        margin-right: auto;
        min-width: 90%;
    }
    .footer .sm-menu {
        justify-content: center;
        align-items: stretch;
    }
    .support-number span {
        white-space: normal;
    }
    
    /* modal fullscreen */
    .custom-modal .modal {
        padding: 0 !important;
        margin: 0 !important;
    }
    .custom-modal .modal-dialog {
        position: fixed;
        margin: 0;
        width: 100%;
        height: 100%;
        padding: 0;
    }
    .custom-modal .modal-content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    .custom-modal .modal-header {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 110px;
        min-height: auto;
        border: 0;
        border-radius: 0;
    }
    .custom-modal .modal-footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 53px;
    }
    .custom-modal .modal-body {
        position: absolute;
        top: 110px;
        bottom: 53px;
        width: 100%;
        overflow: auto;
    }
    .custom-modal .smLogo {
        height: 50px;
    }
    .custom-modal .modal-header h2 {
        margin-top: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .custom-modal .modal-header h3 {
        margin-bottom: 0;
        max-height: 2.2em;
        overflow: hidden;
    }
    .custom-modal .modal-dialog .modal-body {
        overflow-y: overlay;
    }
    #details-modal .modal-division-content {
        padding: 0 10px;
    }
    #details-modal .tablerows .row {
        padding-left: 5px;
        padding-right: 5px;
    }
    #details-modal .modal-header .prod-counter {
        margin-top: 3px;
    }
}





/* the right way of responsive: MOBILE FIRST */
@media (max-width: 480px) {
    body.scroller.bottom-fix .scrolltop {
        bottom: 125px;
    }
}
@media (min-width: 481px) {}
@media (max-width: 767px) {}
@media (min-width: 768px) {
    ::-webkit-scrollbar {
        width: 15px;
        height: 15px;
    }
    .page-head, .menu-top {
        width: 750px;
        left: calc(50% - 375px);
    }
    .footer-wrapper {
        display: flex;
        align-items: center;
        height: 80px;
    }
    .footer-wrapper .version {
        padding-top: 0;
        text-align: right;
    }
    body.scroller.bottom-fix .scrolltop {
        bottom: 55px;
    }
    .form-horizontal .form-group-sm .form-control-static {
        padding-top: 6px;
    }
    .custom-modal .header-img {
        margin-top: 12px;
    }
    .custom-modal .smLogo {
        background: transparent url(../../images/sm_logo7.png) center bottom no-repeat;
        width: 220px;
        height: 55px;
    }
    #details-modal .teamed .ted-bar {
        top: 7px;
        right: 0;
    }
    #details-modal .teamed .ted-bar>.ted-copy {
        transform: rotate(0deg);
    }
    .area-content .list.list-4 .r-side label.sbrCheckProd {
        margin-left: 62px;
    }
    .sm-wizard .wizard-navi > li,
    .sm-wizard .wizard-navi > li.active {
        min-width: 22%;
        font-size: 1.15em;
        margin: 0;
    }
    .sm-wizard .wizard-navi > li:first-child {
        margin-right: 20px;
    }
    .sm-wizard .wizard-navi > li:last-child {
        margin-left: 20px;
    }
    .sm-wizard .wizard-pages .wizard-scroller {
        margin-right: -15px;
    }
    .sm-wizard .page-1 ol.icon-columns > li {
        align-items: center;
    }
    .sm-wizard .page-1 ol.icon-columns > li > div:first-child {
        margin-top: 0;
    }
    .sm-wizard .to-season,
    .sm-wizard .from-season,
    .sm-wizard .tw-checks,
    .sm-wizard .tw-season-checks {
        width: 50px;
        margin-right: 50px;
    }
    .sm-wizard .tw-compact-rowhead {
        display: -ms-grid;
        display: grid;
    }
    .sm-wizard .tw-compact-rowhead, .sm-wizard .tw-compact-row {
        -ms-grid-columns:  17% 17% 15% 1fr 30px;
        grid-template-columns: 17% 17% 15% auto 30px;
    }
    .sm-wizard .tw-c-area {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-row-span: 2;
    }
    .sm-wizard .tw-c-suba {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
        -ms-grid-row-span: 2;
    }
    .sm-wizard .tw-c-team {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
        -ms-grid-row-span: 2;
    }
    .sm-wizard .tw-c-area,
    .sm-wizard .tw-c-suba,
    .sm-wizard .tw-c-team {
        -ms-grid-column-span: 1;
        grid-row: 1 / 3;
        grid-column: auto;
        padding-right: 5px;
        padding-left: 0;
    }
    .sm-wizard .tw-area .tw-c-area {
        margin: 0;
        border: none;
        font-size: inherit;
        text-transform: none;
    }
    .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: 0;
    }
    .sm-wizard .tw-c-comp {
        -ms-grid-row: 1;
        -ms-grid-column: 4;
        grid-row: 1;
        grid-column: auto;
        padding-left: 0;
    }
    .sm-wizard .tw-c-ccheck {
        -ms-grid-row: 1;
        -ms-grid-column: 5;
        grid-row: 1;
        grid-column: auto;
    }
    .sm-wizard .tw-c-unit {
        -ms-grid-row: 2;
        -ms-grid-column: 4;
        grid-row: 2;
        grid-column: auto;
        padding-left: 45px;
    }
    .sm-wizard .tw-c-ucheck {
        -ms-grid-row: 2;
        -ms-grid-column: 5;
        grid-row: 2;
        grid-column: auto;
    }
    .sm-wizard .tw-c-unit:before, .sm-wizard .tw-c-unit:after {
        display: block;
    }
    .sm-wizard .r-side .check-icon {
        font-size: 1.4em;
    }
    .sm-wizard .selection-buttons .tw-mark:last-child {
        margin-right: 60px;
    }
    .sm-wizard .selection-buttons .tw-show > button:first-child,
    .sm-wizard .selection-buttons .tw-mark > button:first-child {
        margin-right: 10px;
    }
    .sm-wizard .selection-buttons .tw-mark > button:last-child {
        margin-left: 10px;
    }
    .sm-wizard .progress-timeouts.waiting {
        margin-top: 20px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {}
@media (max-width: 991px) {}
@media (min-width: 992px) {
    .page-head {
        width: 970px;
        left: calc(50% - 485px);
    }
    .page-head .logo.sm {
        right: auto;
        left: 200px;
    }
    .menu-container {
        position: absolute;
        top: 90px;
        bottom: 0;
        height: auto;
        width: 245px;
        padding-left: 0px !important;
        padding-right: 0px !important;
        border-right: 2px solid #24ad80;
    }
    .menu-fix .menu-container {
        position: fixed;
        top: 0;
    }
    #menu {
        width: 100%;
        padding-bottom: 100px;
    }
    div#menubody {
        margin-top: 100px;
        margin-left: 245px;
    }
    .user .sm-menu-sub a {
        padding-left: 40px;
        font-size: 1em;
    }
    .menuInfo {
        padding: 0px 1px !important;
        margin: 20px 0;
        background-color: transparent;
        color: #888;
    }
    .menuInfo>li {
        padding: 2px 0px;
        color: #888;
    }
    .menuInfo>li>div {
        padding: 0 10px 0 25px;
        font-size: 12px;
        line-height: 20px;
        height: auto;
    }
    .userInfo {
        display: inline-block;
        position: absolute;
        top: 10px;
        left: auto;
        right: 50px;
        margin-bottom: 0;
        color: #666666;
    }
    .userInfo li:not(:last-child) {
        margin-bottom: 8px;
    }
    .userInfo a.menu, .userInfo div {
        padding: 0;
        line-height: normal;
        font-size: 14px;
    }
    .userInfo div>.fa-fw, .userInfo a>.fa-fw {
        width: 20px !important;
        margin: 0 8px 0 0;
    }
    .admin .userInfo {
        top: 20px;
    }
    .admin .userInfo .user div {
        font-size: 1.2em;
    }
    .admin .userInfo .user-logout {
        padding-left: 1.5px;
    }
    .menu-title, #techbutton {
        padding: 0;
        margin: 23px 0 3px 20px;
    }
    .footer .sm-menu a.menu {
        padding: 0 20px;
    }
    .form-horizontal .form-group-sm .form-control-static {
        padding-top: 8px;
    }
    #details-modal .teamed .ted-bar {
        top: 4px;
    }
    .sm-wizard .r-side .check-icon {
        font-size: 1.5em;
    }
    .sm-wizard .progress-stat {
        overflow: visible;
    }
    .sm-wizard .ready .progress-stat {
        margin-top: -4px;
        opacity: 1;
        transition: max-height .2s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .sm-wizard .selection-buttons .tw-mark:last-child {
        margin-right: 83px;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {}
@media (max-width: 1199px) {}
@media (min-width: 1200px) {
    code {
        white-space: pre;
        overflow-y: scroll;
        display: block;
    }
    .page-head {
        width: 1170px;
        left: calc(50% - 585px);
    }
    .menu-container {
        width: 260px;
    }
    div#menubody {
        margin-left: 265px;
        width: 900px;
    }
    .scrolltop {
        right: calc(50% - 550px);
    }
}