/* Variables */

:root {
    --main-color: #6B6E70;
    --secondary-color: #474B4F;
    --body-color: #e2e7e9;
    --panel-color: #bfccb3;
    --button-color: #809966;
    --link-color: #9cd1e2;
    --icon-color: #409fbf;
    --brand-color: #cc7a66;
    --user-color: #e66b4c;
    --number-color: #0d5973;
    --opacity: 0.95;
}

/* Body */

body {
    padding-top: 50px; /* some space for toolbar */
    overflow: hidden;
    font-family: Georgia, "Times New Roman", Times, serif;
    background-image: url("stone.jpg");
    /* background-image: linear-gradient(var(--button-color), var(--link-color), var(--icon-color)); */
}

/* Sidebar */

#sidebar {
    position: fixed;
    width: 250px;
    height: calc(100% - 50px);
    background-color: var(--secondary-color);
    opacity: var(--opacity);
}

#content {
    margin-left: 250px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
}

/* Toolbar */

.navbar-brand {
    width: 250px;
}

.dropdown-menu.pull-left {
    left: 0px; /* ajust dropdown menu width to the button */
}

.navbar-nav>li:hover {
    background-color: var(--secondary-color);
    color: black;
}

/* Buttons */

button {
    background-color: var(--button-color);
}

/* Card and Dialog */

.card {
    margin: 10px;
}

.card-header,
.card-body,
.card-footer {
    height: 50px;
    padding: 10px;
    display: flex;
    align-items: center;
}

.quick-access > h4,
.card-header > h4,
.card-footer > h4 {
    margin-top: 0px;
    margin-bottom: 0px;
}

.modal-body,
.card-body {
    background-color: var(--main-color);
}

.card-body {
    border-style: solid;
    border-top-width: 3px;
    border-bottom-width: 3px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-color: var(--body-color);
    display:block;
    height: calc(100vh - 170px);
    color: white;
    opacity: var(--opacity);
}

.modal-header,
.modal-footer,
.card-footer,
.card-header {
    background-color: var(--secondary-color);
    color: white;
}

.card-header {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.card-footer {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Footer elements */

.pagination,
.form-group {
    margin: 0px;
}

.right {
    margin-left: auto;
}

.center {
    text-align: center;
    margin: auto;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    color: white;
    background-color: var(--button-color);
    border-color: var(--button-color);
}

/* Colors */

.white {
    color: white;
}

.black {
    color: black;
}

.icon-color {
    color: var(--icon-color);
}

.brand-color {
    color: var(--brand-color);
}

.user-color {
    color: var(--user-color);
}

/* Labels */

h5 span.label {
    float: right;
    margin-right: 2px;
    margin-left: 2px;
    width: 70px;
}

a.list-group-item > h5   {
    margin-top: 0px;
    margin-bottom: 0px;
}

/* Badges */

.badge.delete-payment {
    cursor: pointer;
    background-color: var(--button-color);
}

.number {
    color: var(--number-color);
}

/* Text */

.cursor-default {
    cursor: default;
}

input,
.form-control,
.panel-body {
    color: black;
    background-color: var(--body-color);
}

/* Panels */

.panel-heading,
.list-group-item {
    background-color: var(--panel-color);
    border-color: white;
}

/* Editable fields */

.editable-click, a.editable-click, a.editable-click:hover {
    border: none;
    color: var(--link-color);
}

.editableform textarea.form-control {
    width: 50ch;
}

.popover-content {
    color: black;
}

/* Dashboard */

.quick-access {
    padding: 5px;
}

.quick-access > hr {
    margin-top: 5px;
    margin-bottom: 5px;
}

.quick-access > h4 {
    padding-left: 25px;
}

.quick-access-row {
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.quick-access-row > h3 {
    color: var(--body-color);
    text-align: center;
}

/* Input size for money app */

input[name="amount"].form-control {
    width: 80px;
}

select[name="category"].form-control {
    width: 120px;
}

input[name="date"].form-control {
    width: 160px;
}

/* Adjust tables */

.start-column {
    width: 20ch;
}

.amount-column {
    width: 5ch;
}

.date-column {
    width: 12ch;
}

.month-column {
    width: 8ch;
}

.sum-column {
    width: 8ch;
}

/* Linked dashboard */

a {
    color: white;
}

a:hover {
    color: black;
    text-decoration: none;
}

a:hover hr {
    border-color: black;
}

a:hover div.quick-access {
    background-color: var(--panel-color);
}

.quick-access-row > hr {
    border-width: 2px;
}

/* Tooltips */

.header-tooltip {
    cursor: pointer;
    color: var(--link-color);
    text-decoration: underline;
}