@page {
    margin: 0;
}

/* DIN A4, portrait (210mm x 292mm) */
@page portrait-page {
    size: A4 portrait;
}

@page landscape-page {
    size: A4 landscape;
}

@media print {
    html, body {
        overflow: auto;
        height: auto;
        page-break-after: avoid;
    }

    .print-din-a4-portrait-page {
        /* Din-A4: 210x297, but reduced to avoid page breaks caused by print margins */
        width: 210mm;
        height: 285mm;
        margin: 0;
        padding: 0;
        box-sizing: content-box;
        overflow: hidden;
    }

    * {
        print-color-adjust: exact !important;
    }

    #nav,
    #footer,
    .test-system,
    .angular-tooltip,
    .alert {
        display: none !important;
    }

    #content {
        padding: 0;
    }

    .hide-on-print {
        display: none !important;
    }

    .show-on-print {
        display: block !important;
    }
}

@media screen {
    html, body {
        height: 100%;
        overflow: hidden;
    }

    body {
        position: relative;
        background: #F8F8F8;
    }

    #content {
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0;
        /* skip the nav bar */
        position: absolute;
        top: 44px;
        left: 0;
        right: 0;
        bottom: 0;
    }

    #content.fullscreen {
        top: 0;
    }
}

/* copied from bootstrap.css for scoresheet pdf generation */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Arial Black';
    src: url('/app/fonts/ariblk.ttf');
}

/**************************************************************************/
/*** colors                                                             ***/
/**************************************************************************/
:root {
    --appointment-match-color: #347C98;
    --appointment-duty-color: #FC600A;
    --appointment-single-color: #8601AF;
    --appointment-counter-color: #66B032;
}

/**************************************************************************/
/*** HTML elements                                                      ***/
/**************************************************************************/

html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.43;
}

a {
    text-decoration: none;
}

h3,
.h3 {
    margin-top: 0;
}

h4,
.h4 {
    font-weight: 400;
}

label.col-form-label {
    font-weight: 700;
    padding-top: 0;
    padding-bottom: 5px;
}

th.scrollbar-buffer {
    width: 17px;
}

td.scrollbar-buffer {
    width: 0;
    padding: 0 !important; /* important to override bootstrap style */
}

div.pre-loader {
    display: block !important;
    visibility: hidden;
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    font-size: 3em;
    text-align: center;
}

div.pre-loader:not([ng-cloak]) {
    display: none !important;
}

div.pre-loader i {
    font-size: 4em;
    margin-top: 50px;
}

.test-system {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: orangered;
    color: ghostwhite;
    border-radius: 5px 5px 0 0;
    z-index: 1100;
    padding: 4px 6px 0 6px;
}

/*
.ui-widget-content {
  background-color: #343a40 !important;
}
*/
@media (min-width: 1650px) {
    #nav {
        font-size: 1.2rem !important;
    }
}

@media (min-width: 1800px) {
    #nav {
        font-size: 1.3rem !important;
    }
}

@media (min-width: 2000px) {
    #nav {
        font-size: 1.5rem !important;
    }

    #nav .navbar-left .nav-item .nav-link {
        padding-left: 10px;
        padding-right: 10px;
    }

    #content:not(.fullscreen) {
        top: 44px !important;
    }
}

#nav {
    height: 44px;
    font-size: 1.1rem;
    padding: 0;
}

#nav .navbar-brand {
    font-size: 1.5rem;
}

#navbar .dropdown-menu-dark {
    font-size: 0.9em;
}

#navbar-brand-dropdown {
    left: 6px;
    min-width: 12rem;
}

#nav .dropdown-menu-dark {
    background-color: #343a40;
    color: #dee2e6;
}

#nav .dropdown-item {
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
}

#nav.navbar-expand-lg .navbar-nav.navbar-left .nav-link {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}

#navbar .dropdown-menu-dark .dropdown-item.active,
#navbar .dropdown-menu-dark .dropdown-item:active,
#nav .navbar-nav .nav-item .nav-link.active {
    color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity));
    background-color: #BEBEBE;
}

#nav .navbar-text,
#nav .nav-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#nav .nav-item .nav-link:hover:not(.active) {
    color: var(--bs-navbar-active-color);
}

:root {
    --bs-dropdown-header-color: #6c757d;
    --bs-body-font-family: Arial, sans-serif;
}

.nav-tabs .nav-link {
    color: var(--bs-body-color);
}

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff;
    background-color: #7a93ad;
    border-color: #7a93ad;
}

.btn-primary:hover {
    color: #fff;
    background-color: #62809e;
    border-color: #5d7997;
}

.table-primary {
    --bs-table-bg: #d0d8e2;
    --bs-table-striped-bg: #d0d8e2;
    --bs-table-hover-bg: #c0ccd8;
}

.nav.nav-sidebar {
    display: block;
}

.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus,
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
    color: #fff !important;
    background-color: #7a93ad;
}

.nav-sidebar .nav-item:hover {
    color: #fff;
    background-color: #eee;
}

.form-group {
    margin-bottom: 1rem;
}

ul.nav-sidebar > li.nav-item:not(.active) > a.nav-link,
ul.nav-sidebar > li.nav-item:not(.active) > a.nav-link:hover {
    color: var(--bs-body-color);
}

button.close {
    float: right;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0;
    line-height: 1;
}

div.text.pre-format,
pre.text {
    display: block;
    height: 100%;
}

div.text.pre-format {
    white-space: pre;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.9em;
    overflow: auto;
    padding: 10px;
}

pre.text {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#content.fullscreen {
    height: 100%;
    margin-top: 0;
}

button[disabled=disabled],
button:disabled {
    color: #808080;
}

.btn.btn-default.disabled,
.btn.btn-default:disabled,
fieldset:disabled .btn.btn-default {
    border-color: #ccc;
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-default:focus {
    color: #333;
    background-color: #e6e6e6;
    border-color: #8c8c8c;
}

.btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.btn-default.active {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.btn-warning {
    color: white !important;
    background-color: #f0ad4e;
}

*:focus {
    outline: 0 !important;
}

.nav,
.navbar-brand,
.pagination,
.carousel,
.panel-title a {
    cursor: pointer;
}

.navbar-text a:visited {
    color: inherit;
}

.navbar-text a,
.navbar-text a:hover {
    text-decoration: none;
}

.modal-dialog {
    max-width: 80vw;
}

.flex-button-row {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.left-icon {
    display: inline-block;
    margin-right: 6px;
}

#footer {
    position: absolute;
    right: 20px;
    bottom: 4px;
    font-size: 0.8em;
}

.angular-tooltip {
    text-align: center;
    white-space: nowrap;
    max-width: unset;
    padding-left: 10px;
    padding-right: 10px;
}

/* hack for the tooltip on the app-title */
.info-icon-tooltip.angular-tooltip {
    transform: translate(-75px, 20px);
}

.info-icon-tooltip.angular-tooltip.angular-tooltip-bottom:before,
.info-icon-tooltip.angular-tooltip.angular-tooltip-bottom:after {
    left: 95%;
}

.tooltip-inner {
    width: max-content;
    max-width: 100%;
}

.tooltip-title {
    font-size: 1.2em;
    font-weight: bold;
    border-bottom: 1px solid gray;
    margin-bottom: 4px;
}

.app-info-user {
    cursor: default;
    margin-left: 10px;
    margin-right: 10px;
}

.tooltip-description {
    padding-bottom: 4px;
    border-bottom: 1px solid gray;
    margin-bottom: 4px;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    background-color: #fbfbfb !important;
}

/* enable absolute positioning */
.inner-addon {
    position: relative;
}

/* style icon */
.inner-addon i.fa {
    position: absolute;
    top: 0;
    padding: 10px;
    pointer-events: none;
}

/* align icon */
.left-addon i.fa {
    left: 0px;
}

.right-addon i.fa {
    right: 0px;
}

/* add padding  */
/*.left-addon input  { padding-left:  30px; }*/
/*.right-addon input { padding-right: 30px; }*/

.fc-today {
    background-color: #eee;
}

.sb-hide {
    visibility: hidden;
}

div.clear {
    clear: both;
    text-align: center;
}

div.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9000;
}

div.overlay .dialog {
    margin-top: 150px;
    width: 300px;
    border: solid #000 1px;
    padding: 10px;
    display: inline-block;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 1);
}

.modal-dialog {
    width: 790px;
}

/* jqGrid */
.ui-jqgrid {
    border-width: 0;
}

.ui-jqgrid tr.jqgrow td,
.ui-jqgrid th {
    font-size: 1.2em;
    height: 24px !important;
    cursor: pointer;
}

.ui-jqgrid .ui-jqgrid-htable .ui-th-div {
    height: 20px !important;
}

.ui-jqgrid .ui-state-default {
    background: #F79A2E !important;
}

th.ui-th-column,
th.ui-th-ltr,
th.ui-th-rtl {
    border-color: transparent !important;
}

.ui-jqgrid tr.ui-search-toolbar th {
    border-top-width: 0 !important;
}

.ui-jqgrid-bdiv {
    overflow-x: hidden !important;
}

.ui-jqgrid .ui-jqgrid-titlebar {
    height: 26px !important;
}

label,
legend {
    color: black;
}

fieldset.FormInput input {
    font-size: 10pt !important;
}

/* missing in bootstrap.css ? (from 	forms.scss?) */
.form-row > .col,
.form-row > [class*=col-] {
    padding-right: 5px;
    padding-left: 5px;
}

.form-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}

/* a fixed width column of 200px */
.flex-fixed-width-200 {
    flex: 0 0 200px;
    /* to compensate the margin of the above form-row class */
    padding-left: 5px;
    padding-right: 5px;
}

.invisible {
    visibility: hidden !important;
}

.hidden {
    display: none !important;
}

.italic {
    font-style: italic;
}

.icon-button {
    border: none;
    background: none;
}

.fa-grip-vertical:hover {
    color: #337ab7;
    cursor: grab;
}

.fa-grip-vertical[disabled] {
    color: gray;
    cursor: default;
}

table.layout {
  border-collapse: collapse;
  border-spacing: 0;
}

table.layout td {
  padding-left: 5px;
}

/********************************************/
/* bootstrap modal                          */
/********************************************/

.modal-backdrop {
    display: none;
}

.modal {
    background: rgba(0, 0, 0, 0.5);
}

/********************************************/
/* bootstrap table with fixed column header */
/********************************************/

.table-fixedheader {
    height: 100%;
}

.table-fixedheader tbody {
    display: block;
    overflow-y: scroll;
    height: calc(100% - 33px);
}

.table-fixedheader thead,
.table-fixedheader tr {
    display: table;
    table-layout: fixed;
}

:not(.table-responsive) > .table-fixedheader thead,
:not(.table-responsive) > .table-fixedheader tr {
    width: 100%;
}

.table-responsive {
    overflow: auto !important;
}

.table-responsive .table > thead {
    position: sticky;
    top: 0;
    background-color: #fbfbfb;
}

/********************************************/
/* bootstrap table condensed                */
/********************************************/

.table-condensed > tbody > tr {
    height: 2.6em;
}

.table-condensed td,
.table-condensed th {
    padding: 2px 4px;
    border: none;
    vertical-align: middle;
}

.table-condensed.table-small select,
.table-condensed.table-small input[type='text'] {
    padding: 3px 6px;
    height: auto;
}

/********************************************/
/* bootstrap table striped                */
/********************************************/

/*
.table-striped>tbody>tr:nth-of-type(odd):not(:hover)>* {
  --bs-table-accent-bg: rgba(246, 246, 246, 0.05) !important;
}
*/
.table {
    --bs-table-striped-bg: #f0f2f4;
}

.table th.last-col-dummy {
    width: 17px;
}

.table td.last-col-dummy {
    width: 0px;
    padding: 0;
}

.table tr.odd {
    background-color: #f0f2f4;
}

/**************************/
/* jqgrid-titlbar-buttons */
/**************************/
.ui-jqgrid-titlebar .btn-group {
    float: right;
    margin-right: 3px;
    margin-bottom: 4px;
}

.ui-jqgrid-titlebar .btn-group button {
    color: gray;
    padding: 0 5px;
    font-weight: bold;
}

.ui-jqgrid-titlebar .btn-group button.active {
    color: black !important;
}

/************************/
/* Club & Ticker Dialog */
/************************/

ul.menu-list {
    padding: 0;
    font-size: 1.2em;
}

ul.menu-list li {
    list-style: none;
}

ul.menu-list li.dropdown-header {
    padding: 8px 0 2px 5px;
    font-size: 1em;
}

ul.menu-list.ticker-tables li.menu-item:hover a,
ul.menu-list li.menu-item:hover a {
    background-color: #7a93ad;
    color: white;
}

ul.menu-list li.menu-item a {
    text-decoration: none;
    display: block;
    cursor: pointer;
    padding: 6px;
}

ul.menu-list.ticker-tables li.menu-item a {
    color: var(--bs-body-color);
}

/************************/
/* Bootstrap notify     */
/************************/
div.alert {
    padding: 4px;
    width: auto;
    min-width: 100px;
    max-width: 600px;
    font-size: 1.2em;
    z-index: 9999 !important;
    /* important to override the element style which is set by JavaScript */
}

div.alert span[data-notify='message'] {
    margin-left: 4px;
    margin-right: 8px;
}

.alert-table td {
    padding: 2px 5px;
}

.alert-title {
    display: inline-block;
    font-size: 1.2em;
    font-weight: bold;
    margin-right: 10px;
    margin-bottom: 10px;
}

/************************/
/* Bootstrap blockUI    */
/************************/
.blockUI.blockOverlay {
    z-index: 1151 !important;
}

.blockUI.blockMsg {
    opacity: 1 !important;
    z-index: 1152 !important;
    padding-left: 55px !important;
}

/************************/
/* Flex splitter        */
/************************/

/**
 * Vertical flex container to split the content in a left and a right part.
 * The container has a 100% height and width, the left part has a fixed width and the right fills the rest.
 */
.flex-vertical {
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    height: 100%;
}

.flex-vertical .flex-left {
    flex: 0 0 auto;
    position: relative;
}

.flex-vertical .flex-right {
    flex: 1;
    position: relative;
    min-width: 0;
    min-height: 0;
}

.flex-vertical .flex-left-dynamic {
    flex: 1;
    position: relative;
    min-width: 0;
    min-height: 0;
}

.flex-vertical .flex-right-fixed {
    flex: 0 0 auto;
    position: relative;
}

/**
 * Horizontal flex container to split the content in a top and a bottom part.
 * The container has a 100% height and width, the top part has a fixed height and the bottom fills the rest.
 */
.flex-horizontal {
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.flex-horizontal .flex-top {
    flex: 0 0 auto;
    position: relative;
}

.flex-horizontal .flex-bottom {
    flex: 1;
    position: relative;
    min-width: 0;
    min-height: 0;
}

.flex-horizontal .flex-top-dynamic {
    flex: 1;
    position: relative;
    min-width: 0;
    min-height: 0;
}

.flex-horizontal .flex-bottom-fixed {
    flex: 0 0 auto;
    position: relative;
}


/************************/
/* ellipsis             */
/************************/
.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/************************/
/* JQuery UI Keyboard   */
/************************/
.ui-keyboard {
    font-size: 1.5em;
}

/*********************************/
/* table for selection dialogs   */
/*********************************/

.select-table {
    width: 100%;
}

.select-table tbody {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    height: 500px;
}

.select-table thead,
.select-table tr {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.select-table td,
.select-table th {
    padding: 4px 6px;
}

.select-table tr.selected,
.select-table tr:hover {
    background-color: #337ab7;
    color: white;
    cursor: pointer;
}

/*********************************/
/* dropdown with columns         */
/*********************************/

.select-with-columns span {
    padding: 0 6px;
}

/*********************************/
/* angular bootstrap toggle      */
/*********************************/

.slow .toggle-group {
    transition: left 0.7s;
    -webkit-transition: left 0.7s;
}

.fast .toggle-group {
    transition: left 0.1s;
    -webkit-transition: left 0.1s;
}

.quick .toggle-group {
    transition: none;
    -webkit-transition: none;
}

toggle.disabled {
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    opacity: 0.65;
}

/*********************************/
/* loader                        */
/*********************************/
/* HTML: <div class="loader"></div> */
.loader {
    margin: 70px auto;
    width: 150px;
    height: 60px;
    border: 4px solid;
    box-sizing: border-box;
    border-radius: 50%;
    display: grid;
    animation: l2 2s infinite linear;
}

.loader:before,
.loader:after {
    content: "";
    grid-area: 1/1;
    border: inherit;
    border-radius: 50%;
    animation: inherit;
    animation-duration: 3s;
}

.loader:after {
    --s: -1;
}

@keyframes l2 {
    100% {
        transform: rotate(calc(var(--s, 1) * 1turn))
    }
}