:root {
    --main-color: #000000;
    --brand-color: #d3a121;
    --power-color: #cd1719;
    --vital-color: #3ea535;
    --diet-color: #752182;
    --detox-color: #009fe3;
    --link-color: #8D5F7B;
    --error-color: #cc0000;
}

.no-mobile { display: block; }
.mobile { display: none; }

a { color: var(--link-color); }
a.logout { color: var(--brand-color) !important; }
a.logout:hover { color: var(--link-color) !important; }
footer { background-color: #fff; padding-bottom: 10px; }
footer p { font-size: 12px; padding-left: 20px; }

h4 { line-height: 90px; }
h5 { padding-top: 10px; }
h1 span,
h5 span { color: var(--link-color) }
h6 { font-size: 1rem; font-weight: bold; }

hr { margin-top: 0; }

.container-main { padding-bottom: 180px; }
.content-box { padding-bottom: 10px; }

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

/* header */
.navbar { height: 50px; }
.navbar .logo { height: 20px; }
.navi.shadow-sm { padding-top: 0; padding-bottom: 0; }
.navbar { background-color: var(--main-color); }

/*
* navigation
*/
.navi { min-height: 100vh; font-size: large; }
.navi .navi-header { height: 50px; text-align: center; background-color: var(--link-color); color: #ffffff; font-size: 12px; padding-top: 5px; }
.navi a { color: var(--main-color2); text-decoration: none; }
.navi a:hover { color: var(--brand-color); }
.navi-content .nav-list .active { font-weight: bold; }
.navi-content .nav-list { width: 100%; padding: 0; margin: 0; }
.navi-content .nav-list li { display: block; width: 100%; border-bottom: 1px solid #ccc; }
.navi-content .nav-list li a,
.navi-content .nav-list li span.top-item { padding-top: 10px; padding-bottom: 10px; padding-left: 10px; display: block; width: 100%; }
.navi-content .nav-list li a:hover { background: #aaa; color: var(--main-color1); }
/* 2nd level navi */
.navi-content .nav-list li ul { margin: 0; padding: 0 0 0 20px; }
.navi-content .nav-list li ul li { display: block width: 100%; border: none; padding-left: 10px; }
.navi-content .nav-list li ul li a { font-size: 12px; padding-top: 5px; padding-bottom: 5px;  }
.navi-content .nav-list .active ul li { font-weight: normal; }
.navi-content .nav-list .active ul li.active { font-weight: bold; }

.admin-logo { margin: 5px 0 5px 10px; }

.sidebar { height: 100vh; position: fixed; background-color: #ffffff; z-index: 1000; }

.table thead tr,
.table tfoot tr { background-color: #efefef !important; }
.table tbody tr { }

table.table-inner
table.table-inner tr,
table.table-inner tr td { padding: 0; margin: 0; }

/* individual sites */
.news-content { min-height: 400px; }
.create-link { font-size: 22px; }
.media-remove { position: absolute; top: 28px; right: 9px; }


/* order */
.edit-data { position: absolute; top: 15px; right: 25px; z-index: 1000; cursor: pointer; }

/* meals */
.bgRed img, img.bgRed { border: 3px solid var(--power-color) }
.bgGreen img, img.bgGreen { border: 3px solid var(--vital-color) }
.bgPurple img, img.bgPurple { border: 3px solid var(--diet-color) }
.bgBlue img, img.bgBlue { border: 3px solid var(--detox-color) }

span.meal-cal {}
span.meal-protein { color: #CF014B; }
span.meal-fat { color: #E6EA22; }
span.meal-carbs { color: #23F51F; }

/* sort list */
.sortable .sort-item { cursor: grab; }
.sortable-placeholder { display: block; width: 100%; border-top: 1px solid #000; }

/* error messages */
.err-msg,
.err-msg ul { padding: 0; margin: 0; list-style-type: none; }
.err-msg ul li { color: var(--error-color) }
.custom-file ul { display: block; position: absolute; top: 40px; z-index: 1000; left: -40px; }
.custom-file ul li { display: inline-block; padding: 0; margin: 0; list-style-type: none; color: var(--error-color) }


/* form elements */
.form-checkbox-input { margin-left: 20px; margin-right: 5px; }


@media (max-width: 768px) {
    .mobile { display: block; }
    .no-mobile { display: none; }
}