body {
    font-family: 'Open Sans', sans-serif;
    font-size: .875rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}
h1 {
    color: var(--h1-font-color);
    font-weight: 400;
    font-size: 2rem;
    line-height: 2rem;
}
h2 {
    font-size: 1.75rem;
    line-height: 1.75rem;
}
h3 {
    color: var(--h3-font-color);
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 1.375rem;
}
h4 {
    font-size: 1.125rem;
    line-height: 1.125rem;
}
h5 {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1rem;
}
h6 {
    font-size: .875rem;
    line-height: .875rem;
}

a {
    color: var(--anchor-font-color);
    font-weight: 600;
}
a:hover {
    color: #233741;
    text-decoration: none;
}

a.blue-link {
    color: #337ab7;
    font-weight: 600;
}
a.blue-link:hover {
    color: #233741;
    text-decoration: none;
}

.text-underline {
    text-decoration: underline;
}

.text-primary {
    color: var(--text-primary) !important;
}

.text-negative {
    color: var(--text-negative);
}

.btn-primary {
    background-color: var(--button-primary-background-color);
    border-color: var(--button-primary-border-color);
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:hover {
    background-color: var(--button-primary-background-color);
    border-color: var(--button-primary-border-color);
}

.btn-group-xs > .btn, .btn-xs {
    padding: .25rem .25rem;
    font-size: .875rem;
    line-height: .75;
    border-radius: .2rem;
}

.btn-outline-form-control {
    color: #495057;
    background-color: #ffffff;
    border: 1px solid #ced4da;
}

table.table > thead > tr {
    background-color: #c0c0c0;
}

table.table > tbody > .subhead {
    background-color: #d3d3d3;
    font-weight: bold;
}

.header-logo {
    height: 50px;
}

.dev-logo {
    height: 25px;
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100; /* Behind the navbar */
    padding: 0;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
    width:200px;
}

.sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 48px; /* Height of navbar */
    height: calc(100vh - 48px);
    padding-top: .5rem;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
    font-weight: 500;
    color: #333;
}

.sidebar .nav-item {
    margin-top:5px;
    margin-left:15px;
    margin-right:15px;
    background-color: #cccccc;
}

.sidebar .nav-item.active {
    background-color: #bce4d1;
}

.sidebar .nav-item.active a {
    color: #000000;
}

.sidebar .nav-item a {
    color: #565656;
    font-size: 12px;
}

.sidebar-heading {
    font-size: .75rem;
    text-transform: uppercase;
}

.navbar-brand {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, .25);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .form-control {
    padding: .75rem 1rem;
    border-width: 0;
    border-radius: 0;
}

.form-control-dark {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }

.bg-secondary {
    background-color: #cccccc !important;
}

#promotions-by-level-chart,
#promotions-by-manager-chart {
    padding-top: 95px;
    width: 350px;
    height: 250px;
}

.bg-dark {
    background-color: #000000 !important;
}

.header a {
    margin-left: 15px;
    margin-right: 15px;
    padding:13px !important;
    color: #ffffff !important;
    height: 50px;
}

.header a.active  {
    background-color: var(--header-anchor-active-background);
    font-weight: bold;
}

.dropdown-item {
    font-size: .875rem;
}

.dropdown-item a  {
    color: #000000;
    font-weight: 400;
}

.table-text-extra-info {
    font-size: 80%;
    color: #a6a6a6;
}

.discretion-util-table td {
    border: #ffffff solid 2px !important;
    width: 200px;
    height: 200px;
    font-size: 40px;
}

.discretion-util-table thead td {
    height: 50px;
}

.list-title {
    margin-bottom: 5px;
}

.footer {
    width: 95%;
    text-align: right;
    border-top: #dee2e6 solid .5px;
    color: #a5b4be;
    margin: 5px 25px 0 25px;
}

.border-3 {
    border-width:3px !important;
}

.btn-100px-mw {
    min-width: 100px;
}

table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after {
    display:none;
}

table.dataTable thead .sorting {
    background-image: url("/cat-core/images/icons/arrow-up-down.svg");
    background-repeat: no-repeat;
    background-position: center right;
    min-width: 14px;
}

table.dataTable thead .sorting_asc {
    background-image: url("/cat-core/images/icons/arrow-up.svg");
    background-repeat: no-repeat;
    background-position: center right;
}

table.dataTable thead .sorting_desc {
    background-image: url("/cat-core/images/icons/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: center right;
}

.btn-circle.btn-sm {
    width: 20px;
    height: 20px;
    padding: 0 0;
    border-radius: 15px;
    font-size: 9px;
    text-align: center;
    font-weight: bold;
}

.page-link {
    color: var(--page-link-color);
}

.page-link:hover {
    color: var(--page-link-color-hover);
}

.page-item.active .page-link {
    background-color: var(--page-link-background-color);
    border-color: var(--page-link-border-color);
}

.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td{
    padding: 2px;
}


.permission_matrix {margin-top: 125px;}
.permission_matrix.perms {margin-top: 25px;}
.permission_matrix thead th div {
    width: 25px;
    white-space: nowrap;
    -webkit-transform: rotate(300deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    top: -5px;
    position: relative;
    text-decoration-line: underline;
}
.permission_matrix thead th:first-child div {
    left:20px;
}

/*.permission_matrix tbody tr td:nth-of-type(even) {*/
/*    background-color: rgba(0, 0, 0, 0.10);*/
/*}*/
.permission_matrix tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.10);
}
.permission_matrix.perms tbody tr td:nth-of-type(even) {
    background-color: initial;
}

.permission_matrix tbody tr#effective_permission{
    background-color: #0036ff2e;
}
/*.permission_matrix.perms tbody tr:last-child {*/
/*    background-color: initial;*/
/*}*/
.permission_matrix tbody tr td input[type="checkbox" i] {
    -webkit-appearance: none;
    background-color: #fafafa;
    border: 1px solid #cacece;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 6px;
    height: 20px;
    width: 20px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    outline: none;
    top: 4px;
    left: 2px;
}
.permission_matrix tbody tr td input[type="checkbox" i]:after {
    content: '\2800';
    font-size: 14px;
    padding-left: 4px;
    height: 23px;
    width: 23px;
    position: relative;
    top: -7px;
    left: -7px;
    color: transparent;
}

.permission_matrix tbody tr td input[type="checkbox" i]:checked:after {
    content: '\2714';
    font-size: 14px;
    padding-left: 4px;
    height: 23px;
    width: 23px;
    position: relative;
    top: -7px;
    left: -7px;
    color: #00a300;
    cursor: pointer;
}

.permission_matrix tbody tr td input[type="checkbox" i]:disabled:checked:after {
    content: '\2714';
    font-size: 14px;
    padding-left: 4px;
    padding-right: 4px;
    background-color:#EEEEEE;
    height: 23px;
    width: 23px;
    position: relative;
    top: -7px;
    left: -7px;
    color: rgba(24, 61, 247, 0.62);
    cursor: not-allowed;
}
.permission_matrix tbody tr td:first-of-type {
    padding-right: 41px;
    float: left;
    position: relative;
    padding-left: 7px;
    left: auto;
    display: inline-flex;
}

.permission_matrix.perms tbody tr td.description {
    width: 75%;
}
.permission_matrix.perms tbody tr td.description input {
    width: 100%;
}
.permission_matrix.perms tbody tr td input:disabled {
    background-color: rgba(250, 250, 250, .4);
    border-color: rgba(200, 200, 200, .5);
    border-radius: 3px;
    border-width: 0.1px;
}
.permission_matrix.perms tbody tr td input {
    background-color: rgba(255, 255, 255, .9);
    border-color: rgba(200, 200, 200, .5);
    border-radius: 3px;
    border-width: 0.1px;
}

#perm_map_management DD {
    display: inline-grid;
    width: 120px;
}

#perm_map_management DT {
    display: inline-grid;
}
#perm_map_management DT INPUT {
    width:300px;
}

/*-----------*/
.no_role:after {
    content: '\2800';
    font-size: 14px;
    padding-left: 4px;
    height: 23px;
    width: 23px;
    position: relative;
    top: -7px;
    left: -7px;
    color: transparent;
}

.remove_role:after {
    content: '\2800';
    font-size: 14px;
    padding-left: 4px;
    height: 23px;
    width: 23px;
    position: relative;
    top: -7px;
    left: -7px;
    color: transparent;
}

.remove_role:after {
    content: '\2718';
    font-size: 14px;
    padding-left: 4px;
    height: 23px;
    width: 23px;
    position: relative;
    top: 0px;
    left: -3px;
    color: #a30000;
    cursor: pointer;
}

.permission_matrix thead tr th.peven,
.permission_matrix tbody tr td.peven {
    background-color: #fcff5f73;
}
.permission_matrix thead tr th.podd,
.permission_matrix tbody tr td.podd {
    background-color: #8b8c713b;
}


/*.permission_matrix.roles thead tr:nth-of-type(2) th:nth-of-type(odd)  {*/
/*    background-color: #a8a8a8;*/
/*}*/
/*.permission_matrix.roles thead tr:nth-of-type(2) th:nth-of-type(even)  {*/
/*    background-color: #dbdbdb;*/
/*}*/

.permission_matrix.roles thead tr:nth-of-type(2) th  {
    text-align: center;
}


/* Bootstrap Overrides */
.dropdown-menu {
  z-index: 1100;
}

.dropdown-item:hover, .dropdown-item:focus {
  color: #fff;
  background-color: var(--dropdown-item-background-color-hover);
}

.container-fluid-max {
    width: 100%;
    overflow: hidden;
}

.table-primary,
.table-primary > th,
.table-primary > td {
    background-color: var(----table-primary-td-background-color);
    color: #ffffff;
}
.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody + tbody {
    background-color: var(--table-primary-tbody-background-color);
}
.table-hover .table-primary:hover {
    background-color: var(--table-primary-tbody-background-color);
}
.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
    background-color: var(--table-primary-tbody-background-color);
}

.table-secondary,
.table-secondary > th,
.table-secondary > td {
    background-color: #7b7b7b;
    color: #ffffff;
}
.table-secondary th,
.table-secondary td,
.table-secondary thead th,
.table-secondary tbody + tbody {
    background-color: #7b7b7b;
}
.table-hover .table-secondary:hover {
  background-color: #7b7b7b;
}
.table-hover .table-secondary:hover > td,
.table-hover .table-secondary:hover > th {
  background-color: #7b7b7b;
}

/* Typeahead */
/* ---------- */
.found_more {
    padding: 3px 20px;
    line-height: 24px;
    color: #a3a1a1;
    font-style: italic;
}
.tt-custom-name {
    /*display: inline-block;*/
    font-size: 10pt;
    padding-right: 0px;
    padding-left: 15px;

}
.tt-custom-info {
    /*display: inline-block;*/
    font-size: 8pt;
    padding-right: 0px;
    padding-left: 5px;

}
.typeahead,
.tt-query,
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    top: 1px;
    line-height: 30px;
    outline: none;
}

.typeahead {
    background-color: #fff;
}

.typeahead:focus {
    border: 2px solid #0097cf;
}

.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999
}

.tt-suggestion:hover .tt-highlight, .tt-cursor .tt-highlight {
    color: #666;
}
.tt-highlight {
    background-color: #fbfb66;
}

.tt-menu {
    width: 396px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 15px;
    line-height: 24px;
    margin-right: 0px;
    margin-left: 0px;
    padding-left: 5px;
}

.tt-suggestion:hover {
    cursor: pointer;
    color: #fff;
    background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
    color: #fff;
    background-color: #0097cf;

}

.tt-suggestion p {
    margin: 0;
}


/* example specific styles */
/* ----------------------- */


#scrollable-dropdown-menu .tt-menu {
    max-height: 150px;
    overflow-y: auto;
}


hr {
    scroll-margin-top: calc(50px + 1rem);
}

/*--- CKEditor Generated Text ---*/
.ckeditor_text table th,
.ckeditor_text table td,
.ck-editor__main table th,
.ck-editor__main table td {
    vertical-align: middle;
    border-top: 0px;
}
.ckeditor_text .table thead th {
    border-bottom: none;
}
.ckeditor_text table > thead > tr,
.ck-editor__main table > thead > tr {
    background-color: #c0c0c0;
}