:root {
    --darker-color: #101010;
    --dark-color: #212121;
    --light-color: #303030;
    --lighter-color: #434343;
    --lightest-color: #9e9e9e;
    --main-contrast-color: #d83f87;
    --main-success-color: #94d036;
}
body {
    background-color: var(--dark-color);
}
.navbar-default {
    background-color: transparent;
    border: none;
}
.navbar-header {
    float: left;
    padding: 15px;
    text-align: center;
    width: 100%;
}
.navbar-brand {
    float:none;
}
.navbar-brand>img {
    float:none;
    display:inline;
}

.habit-item {
    border: 1px solid var(--light-color);
    background-color: var(--light-color);
    padding-top: 5px;
    padding-bottom: 5px;
    color: white; /* Change this to VAR */
    margin-bottom: 2px;
    justify-content: flex-start;
    display: flex;
    align-items: center;
}

.habit-item:hover {
    border: 1px solid white;
}

.gu-mirror {
    background-color: var(--lighter-color);
}

.btn-habit-progress {
    background: transparent;
    border: none;
    width: 40px;
    padding: 6px 12px;
    color: white; /* Change this to VAR */
}

.habit-list-title {
    justify-content: flex-start;
    display: flex;
    align-items: center;   
    margin-bottom: 10px;
    color: var(--lightest-color);
    padding-right: 0px;
}
.habit-item-name {
    line-height: 22px;
    max-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
.habit-date {
    display: inline-block;
    width: 40px;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
}

.habit-text {
    min-width: 200px;
    width: 300px;
    display: flex;
    align-items: center;
}

.btn-habit-menu {
    background: none;
    border: none;
    display: flex;
}

.tooltip>.tooltip-inner {
    background-color: white; 
    color: black; 
}

.tooltip.top .tooltip-arrow {
    border-top-color: white;
}

.tooltip.right .tooltip-arrow {
    border-right-color: white;
}

.tooltip.left .tooltip-arrow {
    border-left-color: white;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: white;
}

.habit-list {
    background-color: var(--dark-color);
    min-height: 40px;
    padding: 2px;
    padding-bottom: 0px;
}
@keyframes rotate360 {
    to { 
        transform: rotate(360deg); 
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
.fa.fa-circle-o-notch{
    animation: 2s rotate360 infinite linear;
}
.habit-message {
    color: var(--main-success-color);
}
.habit-progress-cont .fa-remove,.fa-implicit {
    color: var(--lighter-color);
}

/* Footer */
#footer {
    margin-top: 70px;
    background-color: black;
    margin-bottom: 0px;
    padding-top: 110px;
    padding-bottom: 110px;
}
#footer a {
    color: white;
}
#footer a:hover, #footer a:focus {
    color: #25c5c5;
    text-decoration: none;
}
/* End Footer */

#side-menus {
    position: fixed;
    top: 20px;
    right: 0px;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}

.side-btn-create {
    background: #2777ef;
    color: white;
}

.side-btn-default {
    background: var(--light-color);
    color: white;
}

.side-btn-primary {
    background: var(--main-contrast-color);
    color: white;
}
.side-btn-primary:hover, .side-btn-primary:active, .side-btn-primary:focus {
    color: white;
    text-decoration: none;
}

.side-btn {
    padding: 15px 20px;
    border: none;
    width: 52px;
}

.span-habit-progress {
    height: 34px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.habit-progress-cont {
    display: flex;
    align-items: center;
}

#btn-logout {
    color: white;
}
#btn-logout:hover, #btn-logout:active, #btn-logout:focus {
    color: #2777ef;
    text-decoration: none;
}
#cal-heatmap .subdomain-text {
    fill: var(--main-light-color);
}

/* Modal */
.modal-content {
    background: var(--dark-color); 
}
.modal-title {
    color: var(--lightest-color);
}
.modal-body .control-label {
    color: var(--lightest-color);
}
.modal-body .checkbox>label {
    color: #9b9b9b;
    font-weight: 700;
}
.modal-body-row {
    background: var(--light-color);
    margin-bottom: 5px;
    padding-top: 5px;
    padding-bottom: 25px;
}
.modal-body-row h5 {
    font-size: 1.2em;
    margin-bottom: 25px;
}
.modal-header {
    border-bottom: 1px solid var(--light-color);
}
.modal-body {
    color: var(--lightest-color);
}
.modal-body a {
    color: var(--lightest-color);
    text-decoration: underline;
}
.modal-body a:hover, .modal-body a:focus {
    color: var(--main-contrast-color);
    text-decoration: underline;
}
.modal-footer {
    border-top: 1px solid var(--light-color);
}

.overview-text p {
    margin-bottom: 0px;
}
.overview-text {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: flex-end;
    height: 53px;
}
.overview-text-top {
    font-size: 1.1em;
    font-weight: bold;
}
.overview-text-bottom {
    color: var(--lightest-color);
    font-size: 1.2em;
    font-weight: bold;
}
.button-default {
    background: transparent;
    border: 1px solid var(--lightest-color);
    color: var(--lightest-color);
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.6;
    border-radius: 4px;
}
.button-default:hover, .button-default:focus {
    background: var(--main-contrast-color);
    border-color: var(--main-contrast-color);
    color: white
}
.button-primary {
    background: var(--lightest-color);
    border: 1px solid var(--lightest-color);
    color: white;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.6;
    border-radius: 4px;
}
.button-primary:hover, .button-primary:focus, .button-primary:active {
    background: var(--main-contrast-color);
    border: var(--main-contrast-color);
    color: white;
}
.close {
    color: var(--lightest-color);
    text-shadow: none;
    opacity: 1;
}
.close:focus, .close:hover, .close:active {
    color: var(--main-contrast-color);
    opacity: 1;
}
#cal-heatmap .graph-rect {
    fill: var(--lighter-color);
}
#cal-heatmap rect.now {
    stroke: white;
}
#cal-heatmap text.highlight-now {
    fill: white;
}
.m-row-buttons {
    width: -webkit-fill-available;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px 30px;
}
.button:disabled,
.button[disabled]{
  opacity: 0.2;
}
.button:disabled:hover,.button:disabled:active
.button[disabled]:hover,.button[disabled]:active{
    background: transparent;
    border: 1px solid var(--lightest-color);
    color: var(--lightest-color); 
}
.loading-icon {
    display: none;
    animation: 2s rotate360 infinite linear;
}

.streak-item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2px;
}
.streak-item-count {
    margin: 0px 10px;
    background-color: rgb(105, 240, 174);
    color: black;
    padding: 3px 160px;
    font-size: 1.3em;
    opacity: 0.6;
}
.streak-item-start, .streak-item-end {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}
.streak-item-count-max {
    opacity: 1;
}