:root { /* 700+ should white text, less is black. 500&600 can vary */
    --white: #ffffff;
    --gray50: #fafafa;
    --gray100: #f1f1f1;
    --gray200: #e7e7e7;
    --gray300: #d4d4d4;
    --gray400: #adadad;
    --gray500: #7f7f7f;
    --gray600: #545454;
    --gray700: #373737;
    --gray800: #202020;
    --gray900: #191919;
    --blue50: #f3f6fa;
    --blue100: #d4dfec;
    --blue200: #b4c7df;
    --blue300: #92aed0;
    --blue400: #7296c2;
    --blue500: #5681b6;
    --blue600: #396baa;
    --blue700: #1b5193;
    --blue800: #164278;
    --blue900: #123662;
    --red50: #fbf6f6;
    --red100: #efdcdb;
    --red200: #e2bdbb;
    --red300: #d19794;
    --red400: #c8827e;
    --red500: #bb6460;
    --red600: #af4944;
    --red700: #a02621;
    --red800: #891e19;
    --red900: #641612;
    --orange50: #fcfaf8;
    --orange100: #f3ece3;
    --orange200: #e6d6c4;
    --orange300: #d2b897;
    --orange400: #c19c6e;
    --orange500: #b1834a;
    --orange600: #a16a25;
    --orange700: #835318;
    --orange800: #674113;
    --orange900: #553610;
    --primary50: #f1f9f9;
    --primary100: #c8e6e7;
    --primary200: #98cfd3;
    --primary300: #5ab3b8;
    --primary400: #36a3a9;
    --primary500: #1b8a90;
    --primary600: #16757a;
    --primary700: #125e62;
    --primary800: #0f4f53;
    --primary900: #0b393c;
    --primary: #16757a;
}

html { background-color:#fff; font-family: system-ui, sans-serif; }
/*html body { background-color: #f5f6fa; font-family: system-ui, sans-serif;  }*/
    html a,
    html a:visited,
    html a.btn.btn-link,
    html a.btn.btn-outline-info { color:var(--primary); text-decoration: none; }
        html a:hover { color: var(--primary800); }
        html a.btn,
        html a.btn:visited { color:var(--gray50); }
            html a.btn:hover { color:var(--gray200); }
/* Typography Items */
h1, h1.title, h2, h3, h4, h5, h6, .title { font-weight: 300; margin: 1rem 0; }
    h1, h1.title, .title { font-size: 2rem; }

/* Main Structure */
.container { max-width: 1400px; background: var(--white); }
    .container.container-edit { max-width: 900px }
.box {  border-radius: .5rem; } /* box-shadow: 0 7px 14px 0 rgba(65, 69, 88, 0.1); */
main { /*margin-top: 4rem;*/ }
.navbar-brand { padding-bottom: 0; padding-top:0; /* background: #343a40; width: 100%; */ }
    .navbar-brand a { padding: 1rem; }
    .navbar a.nav-link { color:var(--gray900) !important; border-color:var(--white); border-style:solid; border-width:0 0 2px 0; font-weight: 500; }
    .navbar a.nav-link:hover { color:var(--primary) !important; border-color:var(--primary); }

/* Components */
/* Tables */
table { margin-top: 1rem; }
    table a { text-decoration: none; }
    table thead.thead-dark th { background:var(--gray700); color:var(--white); }
    table.tablesorter tbody tr.odd td, table.tablesorter tbody tr.odd.tablesorter-childRow td { background:var(--white); }
    table.tablesorter tbody tr.even td, table.tablesorter tbody tr.even.tablesorter-childRow td { background:var(--gray50); }
    table.tablesorter tbody tr.tablesorter-childRow td:first-child { padding-left: 2rem; }
    table.tablesorter .filtered { display: none; }
    table.click td { padding: 0; margin: 0 }
    table.click td { vertical-align: middle; }
        table.click td a { display: block; padding: .5rem; width: 100%; text-align: left; }

/* Cards */
.card { margin-bottom: 1rem; box-shadow: 0 7px 14px 0 rgba(65, 69, 88, 0.1), 0 3px 6px 0 rgba(0,0,0,.1) }
    .card .card-title { padding-left: 1rem; font-size: 1.5rem; font-weight: lighter; }
    .card .alert { margin: 0; }
.card-top-color { position: absolute; top: 0; right: 0; left: 0; height: 5px; border-radius: 5px 5px 0 0; background-color:var(--gray500) }
.card-left-color { position: absolute; right: auto; bottom: 0; height: 100%; width: 5px; border-radius: 5px 0 0 5px; background-color:var(--primary400) }
.card-bottom-color { position: absolute; bottom: 0; right: 0; left: 0; height: 5px; border-radius: 0 0 5px 5px; background-color:var(--gray500) }
.card-bottom-color-flip { position: absolute; bottom: 0; right: 0; left: 0; height: 5px; border-radius: 5px 5px 0 0; background-color:var(--gray500) }
.card-right-color { position: absolute; left: auto; right: 0; bottom: 0; height: 100%; width: 5px; border-radius: 0 5px 5px 0; background-color:var(--primary400) }

/* HR with Label */
.hr-label { display: flex; align-items: center; margin: 1rem 0; font-size: .875em; color:var(--gray500) }
    .hr-label::after { content: ""; margin-left: 2rem; }
    .hr-label::after, .hr-label::before { flex: 1 1 auto; height: 1px; background-color:var(--gray500) }
    .hr-label::before { content: ""; margin-right: 2rem; }
    .hr-label.hr-label-right::after { content: none; }
    .hr-label.hr-label-left::before { content: none; }

/* Dropdowns */
.dropdown .dropdown-menu a, .dropdown .dropdown-menu a:visited { color:var(--primary400); padding:.5rem; }
    .dropdown .dropdown-menu a:hover { color:var(--white); background:var(--primary); }
    .dropdown .dropdown-menu a.color-danger:hover, .dropdown .dropdown-menu a.color-danger:active { background:var(--red200); }
        
/* Cosmetics */
.bg-dark { background-color: #343a40; }
    .bg-dark .nav-item a { color: var(--gray400); }
        .bg-dark .nav-item a:hover { color:var(--white); }
.inactive { text-decoration: line-through; color:var(--gray100); }

/* Colors */
.bg-color-primary { background-color:var(--primary) !important; }
.bg-color-secondary, .btn.btn-outline-secondary, .btn.btn-outline-secondary:visited { background-color:var(--blue700) !important; }
.bg-color-success { background-color:var(--blue800) !important; }
.bg-color-danger { background-color:var(--red700) !important; }
.bg-color-warning { background-color:var(--orange700) !important; }

.color-primary { color:var(--primary) !important; }
.color-secondary { color:var(--blue700) !important; }
.color-success { color:var(--blue800) !important; }
.color-danger { color:var(--red700) !important; }
.color-warning { color:var(--orange700) !important; }

/* Buttons */
 html body .btn-primary,  html body .btn-primary:visited { background-color:var(--primary); border-color:var(--primary); color:var(--white); }
     html body .btn-primary:hover,  html body .btn-primary:active,  html body .btn-primary:focus-visible { background-color:var(--primary800); border-color:var(--primary800); color:var(--white); }
 html body .btn-outline-primary,  html body .btn-outline-primary:visited { color:var(--primary); border-color:var(--primary); background-color:var(--white)}
     html body .btn-outline-primary:hover,  html body .btn-outline-primary:active,  html body .btn-outline-primary:focus-visible { background-color:var(--gray100); border-color:var(--primary800); color:var(--primary800); }
 html body .btn-danger,  html body .btn-danger:visited { background-color:var(--red700); border-color:var(--red700); color:var(--white); }
     html body .btn-danger:hover,  html body .btn-danger:active,  html body .btn-danger:focus-visible { background-color:var(--red800); border-color:var(--red800); color:var(--white); }
 html body .btn-outline-danger,  html body .btn-outline-danger:visited { color:var(--red700); border-color:var(--red700); background-color:var(--white); }
     html body .btn-outline-danger:hover,  html body .btn-outline-danger:active { background-color:var(--gray100); border-color:var(--red800); color:var(--red800); }

 html body .btn-primary:focus-visible,  html body .btn-outline-primary:focus-visible,  html body .btn-primary:focus-visible { box-shadow:0 0 0 0.25rem var(--primary); }
 html body .btn-danger:focus-visible,  html body .btn-outline-danger:focus-visible { box-shadow:0 0 0 0.25rem var(--red700); }

/* Forms */
html body .form-control:focus { box-shadow:0 0 0 0.25rem var(--primary); }
textarea { height: 160px; }

#menuList .list-group-item:hover, #menuList .list-group-item:focus { background-color:var(--gray100); }