/* Base palette variables 
    (Think of these as your "paint buckets.") 
    Every theme overrides these values — nothing else
*/
:root {
    /* main page */
    --color-bg: #f3f3f4;
    --color-bg-text: #676a6c;
    /* sidebar menu */
    --color-sb: #f3f3f4;
    --color-sb-text: #676a6c;
    /* title bar */
    --color-titlebar: #f3f3f4;
    --color-titlebar-text: #676a6c;
    --color-titlebar-border: #dee2e6;
    /* page header */
    --color-header: #ffffff;
    --color-header-text: #676a6c;
    --color-header-text-active: #6c757d;
    --color-header-border: #dee2e6;
    /* Controls */
    --color-surface: #ffffff;
    --color-surface-text: #676a6c;
    --color-surface-border: #e5e6e7;
    --color-surface-border-focus: #1ab394;
    --color-surface-border-disabled: #e5e6e7;
    --color-surface-select: cornflowerblue;
    --color-surface-select-text: #fff;
    --color-surface-hover: darkgray;
    --color-surface-hover-text: #3F4142;
    --color-surface-disabled: #FBFBFB;
    --color-surface-disabled-text: #676a6c;
    --color-surface-button: lightgray;
    --color-surface-button-text: #676a6c;
    --color-surface-button-hover: #C4C4C4;
    --color-surface-button-hover-text: #5F6263;
    --color-surface-check: #1AB394;
    --color-surface-text-secondary: #1c84c6;
    /* tabs */
    --color-tab-bg: #f3f3f4;
    --color-tab: #ffffff;
    --color-tab-text: #676a6c;
    --color-tab-border: #e5e6e7;
    --color-tab-focus: #f3f3f4;
    --color-tab-focus-text: #676a6c;
    --color-tab-hover: #FBFBFC;
    /* lists / groups */
    --color-list-bg: #fff;
    --color-list-border: #e5e6e7;
    --color-list-border-focus: #1ab394;
    --color-list-text: #676a6c;
    --color-list-item-border: #e5e6e7;
    --color-list-select: cornflowerblue;
    --color-list-select-text: #fff;
    --color-list-hover: lightgray;
    --color-list-hover-text: #676a6c;
    --color-list-header: #f3f3f4;
    --color-list-header-text: #676a6c;
    --color-list-header-border: #e5e6e7;
    --color-list-secondary: #d1dade;
    --color-list-secondary-text: #676a6c;
    /* toolbars */
    --color-toolbar-bg: #fff;
    --color-toolbar-bg-border: #E5E6E7;
    --color-toolbar: #fff;
    --color-toolbar-border: #fff;
    --color-toolbar-text: #676a6c;
    --color-toolbar-hover: #BEE7F1;
    --color-toolbar-hover-text: #fff;
    --color-toolbar-hover-border: #A9A9A9;
    /* info panel */
    --color-infopanel-bg: cornsilk;
    --color-infopanel-border: #e5e6e7;
    --color-infopanel-text: green;
    --color-infopanel-select: cornflowerblue;
    --color-infopanel-select-text: #fff;
    --color-infopanel-select-text-danger: #fff;
    /* hyperlinks */
    --color-hyperlink: #007bff;
    --color-hyperlink-hover: #0a58ca;
    --color-hyperlink-visited: #551A8B;
    --color-hyperlink-visited-hover: #8C5CC0;
    /* others */
    --color-primary: #1ab394;
    --color-primary-text: #ffffff;
    --color-primary-border: #1ab394;
    --color-primary-hover: #18a689;
    --color-secondary: #cccccc;
    --color-secondary-text: #000000;
    --color-secondary-border: #cccccc;
    --color-secondary-hover: #cccccc;
    --color-accent: #ff8800;
    --color-accent-text: #ffffff;
    --color-accent-border: #ff8800;
    --color-accent-hover: #ff8800;
    --color-danger: #ed5565;
    --color-danger-text: #ffffff;
    --color-danger-border: #ed5565;
    --color-danger-hover: #ed5565;
    --color-success: #1c84c6;
    --color-success-text: #ffffff;
    --color-success-border: #1c84c6;
    --color-success-hover: #1c84c6;
    --color-info: #21b9bb;
    --color-info-text: #ffffff;
    --color-info-border: #21b9bb;
    --color-info-hover: #18a689;
    --color-warning: #ffaa00;
    --color-warning-text: #ffffff;
    --color-warning-border: #ffaa00;
    --color-warning-hover: #ffaa00;
    --color-default: #DDDDDD;
    --color-default-text: #676a6c;
    --color-default-border: #c4c4c4;
    --color-default-hover: #B8B8B8;
    --color-tertiary: #d63384;
    --color-tertiary-text: #ffffff;
    --color-tertiary-border: #d63384;
    --color-tertiary-hover: #d63384;
}

/* Semantic UI variables 
    These map your palette to UI concepts
    Web pages only ever use these
*/
:root {
    /* Backgrounds */
    --bg-main: var(--color-bg);
    --bg-surface: var(--color-surface);
    /* Text */
    --text-main: var(--color-text);
    --text-muted: rgba(var(--color-text), 0.7);
    /* Buttons */
    --btn-primary-bg: var(--color-primary);
    --btn-primary-text: var(--color-primary-text);
    --btn-secondary-bg: var(--color-secondary);
    --btn-secondary-text: var(--color-secondary-text);
    /* Inputs */
    --input-bg: var(--color-surface);
    --input-border: var(--color-secondary);
    --input-text: var(--color-text);
    /* Tabs */
    --tab-bg: var(--color-surface);
    --tab-active-bg: var(--color-primary);
    --tab-active-text: var(--color-primary-text);
    /* Alerts */
    --alert-danger-bg: var(--color-danger);
    --alert-success-bg: var(--color-success);
    --alert-warning-bg: var(--color-warning);
}

/* override elements / controls that do not have there own css */
.titlebar {
    background-color: var(--color-titlebar) !important;
    color: var(--color-titlebar-text) !important;
    border-bottom: 1px solid var(--color-titlebar-border) !important;
}

.page-heading {
    background: var(--color-header) !important;
    color: var(--color-header-text) !important;
    border-bottom: 1px solid var(--color-header-border) !important;
}

.breadcrumb {
    background-color: var(--color-header) !important;
    color: var(--color-header-text) !important;
}
.breadcrumb-item.active {
    color: var(--color-header-text-active);
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--color-header-text);
}

/* textbox */
input[type="text"].form-control,
input[type="password"].form-control {
    background-color: var(--color-surface);
    color: var(--color-surface-text);
    border-color: var(--color-surface-border);
}

    input[type="text"].form-control:disabled,
    input[type="password"].form-control:disabled {
        background: var(--color-surface-disabled);
        color: var(--color-surface-disabled-text);
        border-color: var(--color-surface-border-disabled);
    }
    input[type="text"].form-control:read-only,
    input[type="password"].form-control:read-only {
        background: var(--color-surface-disabled);
        color: var(--color-surface-disabled-text);
        border-color: var(--color-surface-border-disabled);
    }

    input[type="text"].form-control::selection,
    input[type="password"].form-control::selection {
        background: var(--color-surface-select);
        color: var(--color-surface-select-text);
    }

    input[type="text"].form-control::-moz-selection,
    input[type="password"].form-control::-moz-selection {
        background: var(--color-surface-select);
        color: var(--color-surface-select-text);
    }

    input[type="text"].form-control:focus,
    input[type="password"].form-control:focus {
        border: solid 1px var(--color-surface-border-focus);
    }

/* textarea */
textarea.form-control {
    background-color: var(--color-surface);
    color: var(--color-surface-text);
    border-color: var(--color-surface-border);
}

    textarea.form-control:focus {
        background-color: var(--color-surface);
        color: var(--color-surface-text);
        border: solid 1px var(--color-surface-border-focus);
    }

    textarea.form-control:disabled {
        background-color: var(--color-surface-disabled);
        color: var(--color-surface-disabled-text);
        border-color: var(--color-surface-border-disabled);
    }

    textarea.form-control:read-only {
        background-color: var(--color-surface-disabled);
        color: var(--color-surface-disabled-text);
        border-color: var(--color-surface-border-disabled);
    }

    textarea.form-control[readonly]:focus {
        background-color: var(--color-surface-disabled);
        color: var(--color-surface-disabled-text);
        border-color: var(--color-surface-border-disabled);
    }

    textarea.form-control::selection {
        background: var(--color-surface-select);
        color: var(--color-surface-select-text);
    }

    textarea.form-control::-moz-selection {
        background: var(--color-surface-select);
        color: var(--color-surface-select-text);
    }


/* Hyperlinks */
a {
    color: var(--color-hyperlink);
    text-decoration: none;
}
a:hover {
    color: var(--color-hyperlink-hover);
    text-decoration: none
}
a:visited {
    color: var(--color-hyperlink-visited);
    text-decoration: none
}
    a:visited:hover {
        color: var(--color-hyperlink-visited-hover);
        text-decoration: none
    }

.naturallink {
    color: var(--color-hyperlink) !important;
    text-decoration: underline !important;
    cursor: pointer;
}

/* Hyperlinks allow no-visited class to stop visited coloring  */
a.no-visited:visited,
td a:visited {
    color: var(--color-hyperlink);
    text-decoration: none;
}
    a.no-visited:visited:hover,
    td a:visited:hover {
        color: var(--color-hyperlink-hover);
        text-decoration: none
    }

/* Hyperlinks (HTML editor styles links they are always in <p> tags so use important if they are found */
p a {
    color: var(--color-hyperlink) !important;
}
    p a:hover {
        color: var(--color-hyperlink-hover) !important;
    }
    p a:visited {
        color: var(--color-hyperlink-visited) !important;
    }
        p a:visited:hover {
            color: var(--color-hyperlink-visited-hover) !important;
        }


/* panels */
.panel {
    background-color: var(--color-surface);
}

.card {
    color: var(--color-surface-text) !important; /* these are a elements stop hyperlinks text color*/
    background-color: var(--color-surface);
    border-color: var(--color-surface-border);
}

   /* .card:hover {
        color: var(--color-surface-hover-text) !important;
        background-color: var(--color-surface-hover);
        border-color: var(--color-surface-border);
    }*/

.list-group-item {
    color: var(--color-surface-text) !important; /* these are a elements stop hyperlinks text color*/
    background-color: var(--color-surface);
    border-color: var(--color-surface-border);
}

a.list-group-item:hover {
    color: var(--color-surface-hover-text);
    background-color: var(--color-surface-hover);
    border-color: var(--color-surface-border);
}

.ibox {
    color: var(--color-surface-text);
}
.ibox-title {
    background-color: var(--color-tab);
    border-color: var(--color-tab-border);
}
.ibox-tools > a {
    color: var(--color-tab-text) !important;
}
.ibox-content {
    background-color: var(--color-list-bg);
    color: var(--color-list-text);
    border-color: var(--color-list-border) !important;
}

.accordianBody {
    background-color: var(--color-list-bg);
    color: var(--color-list-text);
}

.panel.panel-success {
    border-color: var(--color-success-border);
}
.panel-success > .panel-heading {
    background-color: var(--color-success);
    border-color: var(--color-success-border);
    color: var(--color-success-text);
}

.panel.panel-primary {
    border-color: var(--color-primary-border);
}

.panel-primary > .panel-heading {
    background-color: var(--color-primary);
    border-color: var(--color-primary-border);
    color: var(--color-primary-text);
}

.panel.panel-default {
    border-color: var(--color-default-border);
}
.panel-default > .panel-heading {
    background-color: var(--color-default);
    border-color: var(--color-default-border);
    color: var(--color-default-text);
}

.btn.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary-border);
    color: var(--color-primary-text);
}

    .btn.btn-primary:hover {
        background-color: var(--color-primary-hover);
        border-color: var(--color-primary-border);
    }

    .btn.btn-primary:focus {
        box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary-hover) 50%, transparent);
    }

.btn.btn-gray {
    background-color: var(--color-default);
    border-color: var(--color-default-border);
    color: var(--color-default-text);
}
    .btn.btn-gray:hover {
        background-color: var(--color-default-hover);
        border-color: var(--color-default-border);
    }

    .btn.btn-gray:focus {
        box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-default-hover) 50%, transparent);
    }

.btn.btn-white {
    background-color: var(--color-surface-button);
    border-color: var(--color-surface-border);
    color: var(--color-surface-button-text);
}

    .btn.btn-white:hover {
        background-color: var(--color-surface-button-hover);
        border-color: var(--color-surface-button-hover-text);
    }

    .btn.btn-white:focus {
        box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-surface-button-hover) 50%, transparent);
    }

/*tri-choice*/
.btn.chk-primary {
    border-color: var(--color-primary-border);
    background-color: color-mix(in srgb, var(--color-primary) 05%, white);
    /*color: var(--color-primary-text);*/
}

    .btn.chk-primary:hover {
        background-color: color-mix(in srgb, var(--color-primary-hover) 60%, white);
        border-color: var(--color-primary-border);
        /*color: var(--color-primary-text);*/
    }

    .btn.chk-primary.active {
        border-color: var(--color-primary-border);
        background-color: var(--color-primary);
    }

        .btn.chk-primary.active:hover {
            border-color: var(--color-primary-border);
            background-color: var(--color-primary-hover);
        }


/*.btn.chk-primary.bichoice {
    border-color: var(--color-primary-border);*/
    /*color: var(--color-primary-text);*/
/*}
    .btn.chk-primary.bichoice.active {
        border-color: var(--color-primary-border);
        background-color: var(--color-primary);
    }*/