
:root {
    /* 
        DEFAULT THEME COLOURS
        These value are replaced in code to set client colours.
        DO NOT CHANGE without updating the corresponding keys in web.config 
    */
    --primary-bg-colour: #6e6962;
    --primary-bg-colour-50: #6e6962AA;
    --secondary-bg-colour: #968f8a;
    --tertiary-bg-colour: #f1f2f1;
    --primary-fg-colour: #ffffff;
    --secondary-fg-colour: #000000;
    --tertiary-fg-colour: #000000;
    /* END OF DEFAULT THEME COLOURS */

    --btn-disabled-colour: #6c757d;
    --btn-disabled-background-colour: #e9ecef;
    --btn-disabled-border-colour: #6c757d;
}

body {
}

dialog {
    border-color: var(--primary-bg-colour);
    color: var(--primary-bg-colour);
}


h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--primary-bg-colour);
}


.btn-primary {
    background-color: var(--primary-bg-colour);
    border-color: var(--primary-bg-colour);
    color: var(--primary-fg-colour);
}

    .btn-primary:hover {
        background-color: var(--primary-bg-colour);
        opacity: 0.8;
        border-color: var(--primary-bg-colour);
        color: var(--primary-fg-colour);
    }

    .btn-primary:focus, .btn-primary.focus {
        background-color: var(--primary-bg-colour);
        box-shadow: 0 0 0 0.2rem var(--primary-bg-colour-50);
        border-color: var(--primary-bg-colour);
    }

    .btn-primary.disabled, .btn-primary:disabled, .nav-link.tab-link.disabled, .nav-link.tab-link:disabled {
        background-color: var(--btn-disabled-background-colour, #e9ecef);
        border-color: var(--btn-disabled-border-colour, #6c757d);
        color: var(--btn-disabled-border-colour, #6c757d);
    }

    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        background-color: var(--primary-bg-colour);
        border-color: var(--primary-bg-colour);
    }


.btn-outline-success, .btn-next, .btn-previous {
    background-color: none;
    border-color: var(--primary-bg-colour);
    color: var(--primary-bg-colour);
}

    .btn-outline-success:not(:disabled):not(.disabled):hover,
    .btn-next:not(:disabled):not(.disabled):hover,
    .btn-previous:not(:disabled):not(.disabled):hover {
        background-color: var(--primary-bg-colour);
        border-color: var(--primary-bg-colour);
        color: var(--primary-fg-colour);
        opacity: 0.8;
    }

    .btn-outline-success:focus,
    .btn-outline-success:not(:disabled):not(.disabled):active:focus,
    .btn-outline-success:not(:disabled):not(.disabled).active:focus,
    .show > .btn-outline-success.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem var(--primary-bg-colour-50);
    }

    .btn-outline-success:not(:disabled):not(.disabled):active,
    .btn-outline-success:not(:disabled):not(.disabled).active,
    .show > .btn-outline-success.dropdown-toggle {
        background-color: var(--primary-bg-colour);
        border-color: var(--primary-bg-colour);
        color: var(--primary-fg-colour);
        opacity: 0.8;
    }

    .btn-outline-success:hover .glyphicons,
    .btn-next:hover .glyphicons,
    .btn-previous:hover .glyphicons {
        color: var(--primary-fg-colour) !important;
    }

    .btn-outline-success.fileinput-button span {
        display: inline-block;
        padding-top: 2px;
    }


.navbar-light .navbar-nav .nav-link {
    color: var(--primary-bg-colour);
}

    .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
        color: var(--primary-bg-colour);
    }

    .navbar-light .navbar-nav .nav-link.disabled {
    }

    .navbar-light .navbar-nav .show > .nav-link,
    .navbar-light .navbar-nav .active > .nav-link,
    .navbar-light .navbar-nav .nav-link.show,
    .navbar-light .navbar-nav .nav-link.active {
        color: var(--primary-bg-colour);
    }

.navbar-light .navbar-text {
    color: var(--primary-bg-colour);
}

    .navbar-light .navbar-text a {
        color: var(--primary-bg-colour);
    }

        .navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus {
            color: var(--primary-bg-colour);
        }


.bg-tenant-primary {
    background-color: var(--primary-bg-colour) !important;
}

.bg-tenant-secondary {
    background-color: var(--secondary-bg-colour) !important;
}

.watermarked {
    position: relative;
    overflow: hidden;
    display: contents;
}

    .watermarked::before {
        position: absolute;
        top: -75%;
        left: -75%;
        display: block;
        width: 150%;
        height: 150%;
        transform: rotate(-45deg);
        content: attr(data-watermark);
        opacity: 0.7;
        line-height: 3em;
        letter-spacing: 2px;
        color: #fff;
    }


.bg-tenant-tertiary {
    background-color: var(--tertiary-bg-colour) !important;
}


.border-tenant-primary {
    border-color: var(--primary-bg-colour) !important;
}

.border-tenant-secondary {
    border-color: var(--secondary-bg-colour) !important;
}

.border-tenant-tertiary {
    border-color: var(--tertiary-bg-colour) !important;
}


.text-tenant-primary {
    color: var(--primary-bg-colour) !important;
}

.text-tenant-secondary {
    color: var(--secondary-bg-colour) !important;
}

.text-tenant-tertiary {
    color: var(--tertiary-bg-colour) !important;
}


.glyphicons:not(.text-info), .glyphicons:not(.text-warning) {
    color: var(--primary-bg-colour) !important;
}

table.tablesorter thead tr th a, table.tablesorter tfoot tr th a {
    color: var(--primary-bg-colour) !important;
}

.table-pager > td > a {
    color: var(--primary-bg-colour) !important;
}

table.grid tr.header, table.grid thead tr {
    color: var(--primary-fg-colour) !important;
    background-color: var(--primary-bg-colour) !important;
}

table.grid tr td {
    border-color: var(--primary-bg-colour) !important;
}

table.grid tr.header td, table.grid thead tr th {
    border-right-color: var(--primary-fg-colour) !important;
}

tbody.collapsible-row {
    border-top: 2px solid var(--primary-bg-colour) !important;
    border-bottom: 3px solid var(--primary-bg-colour) !important;
}

    tbody.collapsible-row td.prescription-info {
        background-color: #fff;
        border: 1px solid var(--primary-bg-colour)
    }


