:root {
    --accent-brush: #cf9934;
    --body-font-brush: #666666;
    --dark-btn-brush: #34495e;
    --dark-lemon-brush: #c3eeee00;
    --dark-highlight-brush: #757575;
    --dark-panel-brush: #2c2c2c;
    --header-font-brush: #575757;
    --highlight-brush: #1976d2;
    --light-panel-brush: #e0e0e0;
    --mouse-over-brush: #1e88e5;
    --textbox-border-brush: rgb(80, 95, 121);
    --header-font-size: 1.75rem;
    --large-font-size: 1.4rem;
    --medium-font-size: 1.2rem;
    --normal-font-size: 1rem;
    --small-font-size: .8rem;
    --xsmall-font-size: .6rem;
}


/*Site Settings*/
.main {
    flex: 1;
    padding: 1rem 1rem;
}

.content {
    padding-top: 1.1rem;
}

div[disabled] {
    pointer-events: none;
    opacity: 0.7;
}


/*Foreground Color Classes*/
.text-wc-accent {
    color: var(--accent-brush) !important;
}

.text-wc-highlight {
    color: var(--highlight-brush) !important;
}

.text-wc-header-font {
    color: var(--header-font-brush) !important;
}

.text-wc-body-font {
    color: var(--body-font-brush) !important;
}

.text-wc-white {
    color: white !important;
}

.text-wc-light-panel {
    color: var(--light-panel-brush) !important;
}

.text-wc-whitesmoke {
    color: whitesmoke !important;
}

.text-wc-light {
    color: #e9ecef !important;
}

.text-wc-transparent {
    color: transparent !important;
}


/*Background Color Classes*/
.bg-wc-accent {
    background-color: var(--accent-brush) !important;
}

.bg-wc-highlight {
    background-color: var(--highlight-brush) !important;
}

.bg-wc-header-font {
    background-color: var(--header-font-brush) !important;
}

.bg-wc-body-font {
    background-color: var(--body-font-brush) !important;
}

.bg-wc-white {
    background-color: white !important;
}

.bg-wc-light-panel {
    background-color: var(--light-panel-brush) !important;
}

.bg-wc-whitesmoke {
    background-color: whitesmoke !important;
}

.bg-wc-light {
    background-color: #e9ecef !important;
}

.bg-wc-transparent {
    background-color: transparent !important;
}


/*Font Size Classes*/
.wc-fs-header {
    font-size: var(--header-font-size);
}

.wc-fs-large {
    font-size: var(--large-font-size);
}

.wc-fs-medium {
    font-size: var(--medium-font-size);
}

.wc-fs-normal {
    font-size: var(--normal-font-size);
}

.wc-fs-small {
    font-size: var(--small-font-size);
}

.wc-fs-xsmall {
    font-size: var(--xsmall-font-size);
}


/*Font Weight*/
.wc-fw-bold {
    font-weight: bold;
}

.wc-fw-semibold {
    font-weight: 600;
}

.wc-fw-normal {
    font-weight: normal;
}

.wc-fw-light {
    font-weight: 300;
}

.wc-fw-thin {
    font-weight: 100;
}


/*Margins*/
.wc-ml-auto,
.wc-mx-auto {
    margin-left: auto;
}

.wc-mr-auto,
.wc-mx-auto {
    margin-right: auto;
}

.wc-mt-auto,
.wc-my-auto {
    margin-top: auto;
}

.wc-mb-auto,
.wc-my-auto {
    margin-bottom: auto;
}




/*Overflow*/
.wc-of-auto {
    overflow: auto;
}

.wc-of-hidden {
    overflow: hidden;
}

.wc-of-x-auto {
    overflow-x: auto;
}

.wc-of-x-hidden {
    overflow-x: hidden;
}

.wc-of-y-auto {
    overflow-y: auto;
}

.wc-of-y-hidden {
    overflow-y: hidden;
}


/*Display*/
.wc-display-flex {
    display: flex;
    flex-direction: row;
}

.wc-display-flex-col {
    display: flex;
    flex-direction: column;
}

.wc-display-grid {
    display: grid;
}

.wc-display-block {
    display: block;
}

.wc-display-none {
    display: none;
}


/*Visible*/
.wc-visibility-hidden {
    visibility: hidden;
}

.wc-visibility-visible {
    visibility: visible;
}


/*Tooltip*/
.wc-tooltip {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .wc-tooltip .tooltip-text {
        font-size: var(--small-font-size);
        visibility: hidden;
        min-width: 50px;
        width: auto;
        background-color: var(--body-font-brush);
        color: white;
        text-align: center;
        padding: 5px 10px;
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        top: 90%;
    }

    .wc-tooltip:hover .tooltip-text {
        visibility: visible;
    }


/*Override: bootstrap-float-label*/
.has-float-label label, .has-float-label > span {
    opacity: .9;
}

.has-float-label .form-control:placeholder-shown:not(:focus) + * {
    font-size: 100%;
    opacity: .8;
    top: 0.75rem;
}


/*Button Style*/
.btn-wc-link {
    border: unset;
    background-color: transparent;
    padding: 0;
    margin: 0;
    color: var(--highlight-brush);
    text-decoration: none;
}

    .btn-wc-link:hover,
    .btn-wc-link:focus,
    .btn-wc-link.focus {
        color: #0056b3;
        text-decoration: none;
    }

.btn-wc-light {
    color: var(--header-font-brush);
    background-color: #e9ecef;
    border-color: #ced4da;
}

    .btn-wc-light:hover {
        color: var(--header-font-brush);
        background-color: #eeeeee;
        border-color: #ced4da;
    }

    .btn-wc-light:focus, .btn-wc-light.focus {
        color: var(--header-font-brush);
        background-color: #eeeeee;
        border-color: #ced4da;
        box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.25);
    }

    .btn-wc-light.disabled, .btn-wc-light:disabled {
        color: var(--header-font-brush);
        background-color: #f5f5f5;
        border-color: #ced4da;
    }

    .btn-wc-light:not(:disabled):not(.disabled):active,
    .btn-wc-light:not(:disabled):not(.disabled).active,
    .show > .btn-wc-light.dropdown-toggle {
        color: var(--header-font-brush);
        background-color: #e9ecef;
        border-color: #ced4da;
    }

        .btn-wc-light:not(:disabled):not(.disabled):active:focus,
        .btn-wc-light:not(:disabled):not(.disabled).active:focus,
        .show > .btn-wc-light.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.25);
        }


/* Shadow Box Focus*/
textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus {
    box-shadow: inset 0 -1px 0 transparent;
}

.btn-wc-link:focus,
.btn-wc-link.focus,
.btn-wc-link:not(:disabled):not(.disabled):active:focus,
.btn-wc-link:not(:disabled):not(.disabled).active:focus,
.show > .btn-wc-link.dropdown-toggle:focus {
    box-shadow: inset 0 -1px 0 transparent;
}

.btn-no-shadow-focus:focus,
.btn-no-shadow-focus.focus,
.btn-no-shadow-focus:not(:disabled):not(.disabled):active:focus,
.btn-no-shadow-focus:not(:disabled):not(.disabled).active:focus {
    box-shadow: inset 0 -1px 0 transparent;
}

/*ComboBox Style*/
.combobox {
    border-radius: 0.25rem;
}

select.form-control.combobox.valid.modified:not([type=checkbox]) {
    outline: none;
}


/*CurrencyBox*/
.numericbox {
    text-align: right;
}

.numericbox-left {
    text-align: left;
}

input.form-control.numericbox.valid.modified:not([type=checkbox]),
input.form-control.numericbox-left.valid.modified:not([type=checkbox]) {
    outline: none;
}


/*DatePicker Style*/
.datepicker {
    border-radius: 0.25rem;
}


/*EditBox & PasswordBox*/
.editbox {
    text-align: left;
}


[type="text"],
[type="password"],
[type="date"] {
    outline-offset: -2px;
    -webkit-appearance: none;
}

/*MemoBox*/
.memobox {
    min-height: 60px; /*Irrelevant*/
}

textarea.form-control.memobox:focus {
    box-shadow: inset 0 -1px 0 transparent;
}


/*TimePicker Style*/
.timepicker {
    border-radius: 0.25rem;
}


/* SearchBox */
.search-box {
    display: grid;
    grid-template-columns: 1fr auto;
    width: 25rem;
}

.search-btn {
    margin: 0;
    border: 0;
    border-top-right-radius: 40%;
    border-bottom-right-radius: 40%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-color: transparent;
    color: white;
    background-color: var(--highlight-brush);
}

.searchbox-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}


/*Sidebar Style*/
.wc-sidebar-main {
    margin-left: 50px; /*width of the menu bar*/
    padding: 0;
}


/*
    Scrollbar
    Note: Scrollbar styling is only available to the following browsers.
    https://caniuse.com/css-scrollbar
*/
*::-webkit-scrollbar {
    width: 0.25rem;
}

*:hover::-webkit-scrollbar {
    width: .5rem;
}

*::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,.125);
}

*::-webkit-scrollbar-thumb {
    background-color: #808080;
}


/*Table: Wincollect Style*/
.wc-table {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-gap: 0;
    width: 100%;
}

.wc-table-header {
    font-weight: bold;
    border-bottom: 2px solid rgba(0,0,0,.125);
}

.wc-table-body {
    position: relative;
    display: grid;
    overflow-y: auto;
    height: 100%;
    width: 100%;
}

    .wc-table-body .table {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

.wc-table-row {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(0,0,0,.125);
    display: grid;
}

/* Used by GridView.razor */
.wc-table-row-flex {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(0,0,0,.125);
    display: flex;
    flex-direction: row;
}


/*
    Table: Fixed Header
    Reference: https://bootstrapious.com/p/bootstrap-table-with-a-fixed-header
    Sample: https://jsfiddle.net/bootstrapious/dmp7tr4g
*/
.table-fixed tbody {
    /*height: 300px;*/
    overflow-y: auto;
    width: 100%;
}

.table-fixed td,
.table-fixed th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
    display: block;
}

    .table-fixed tbody td,
    .table-fixed tbody th,
    .table-fixed thead > tr > th {
        float: left;
        position: relative;
    }

        .table-fixed tbody td::after,
        .table-fixed tbody th::after,
        .table-fixed thead > tr > th::after {
            content: '';
            clear: both;
            display: block;
        }


/* Loaders */
/* Ring Loader*/
.lds-ring {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}

.ring-sm {
    width: 32px;
    height: 32px;
}

.ring-xs {
    width: 16px;
    height: 16px;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    border: 8px solid #757575;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #757575 transparent transparent transparent;
}

.lds-ring.ring-sm div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 32px;
    height: 32px;
    border: 4px solid #757575;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #757575 transparent transparent transparent;
}

.lds-ring.ring-xs div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #757575;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #757575 transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* Wincollect Report Viewer */
.wc-report {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: var(--medium-font-size);
    line-height: 1.42857143;
    background-color: #eeeeee;
}

    .wc-report .rpt-page {
        /*width: 210mm*/
        width: 900px;
        padding: 24px;
        margin: 38px auto;
        border: 1px #D3D3D3 solid;
        border-radius: 5px;
        background: white;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

        .wc-report .rpt-page .rpt-content {
            padding: 0;
            /*min-height: 297mm;*/
            min-height: 1030px;
            display: grid;
            grid-template-areas: "phead" "rhead" "rbody" "rfoot" "pfoot";
            grid-template-rows: auto auto 1fr auto auto;
        }

            .wc-report .rpt-page .rpt-content .rpt-page-header {
                grid-area: phead;
            }

            .wc-report .rpt-page .rpt-content .rpt-header {
                grid-area: rhead;
            }

            .wc-report .rpt-page .rpt-content .rpt-body {
                grid-area: rbody;
            }

            .wc-report .rpt-page .rpt-content .rpt-footer {
                grid-area: rfoot;
            }

            .wc-report .rpt-page .rpt-content .rpt-page-footer {
                grid-area: pfoot;
            }

    .wc-report.pos-fixed {
        position: fixed;
        top: 40px;
        left: 0;
        right: 0;
        bottom: 0px;
        overflow-y: auto;
    }

    /* Wincollect Report Viewer Landscape */

    .wc-report .rpt-page-landscape {
        width: 1030px;
        padding: 24px;
        margin: 38px auto;
        border: 1px #D3D3D3 solid;
        border-radius: 5px;
        background: white;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

        .wc-report .rpt-page-landscape .rpt-content {
            padding: 0;
            height: 700px;
            display: grid;
            grid-template-areas: "phead" "rhead" "rbody" "rfoot" "pfoot";
            grid-template-rows: auto auto 1fr auto auto;
        }

            .wc-report .rpt-page-landscape .rpt-content .rpt-page-header {
                grid-area: phead;
            }

            .wc-report .rpt-page-landscape .rpt-content .rpt-header {
                grid-area: rhead;
            }

            .wc-report .rpt-page-landscape .rpt-content .rpt-body {
                grid-area: rbody;
            }

            .wc-report .rpt-page-landscape .rpt-content .rpt-footer {
                grid-area: rfoot;
            }

            .wc-report .rpt-page-landscape .rpt-content .rpt-page-footer {
                grid-area: pfoot;
            }

/* Print Style Sheet
    https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/
    http://jsfiddle.net/mturjak/2wk6Q/1949/
*/

@page {
    size: A4;
    margin: 0;
}

@media print {
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    * {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    html, body {
        font-size: 16px;
    }

    .mainbody {
        padding-top: 0;
    }

    .main {
        flex: none;
        padding: 0;
    }

    .navbar {
        display: none
    }

    .navheader {
        display: none
    }

    .wc-report .rpt-page {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: 100%;
        height: 100%;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }

    .wc-report .rpt-page-landscape {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: 100%;
        height: 100%;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }

    .wc-report.pos-fixed {
        top: 0;
        overflow-y: hidden;
        position: initial;
    }
}


/* Large Screens */
@media only screen and (min-width: 600px) {
}


/* Small Screens */
@media only screen and (max-width: 600px) {
    .wcpanel-left,
    .wcpanel-right {
        width: 100%;
    }
}