:root {
    --lv-color: #F0D2C4;
    --lv-highlight: #dcf1fd;
    --lv-gradient: #c8d6e1;

    --lv-btn-color: #fff;
    --lv-generic: #7d898c;
    --lv-generic-focus: #5a6369;
    --lv-generic-active: #596a70;
    --lv-generic-disable: #709094;
    --lv-generic-selected: #899898;

    --lv-body-color: #e6e6e6;
    --lv-body-bg: #363636;
    --lv-border-color: #808080;
    --lv-side-nav-bg: #e6e6e6;
    --lv-nav: #414141;
    --lv-nav-link-color: #fff;
    --lv-login-color: #daeeff;
    --lv-form-bg: #363636;
    --lv-form-border: #808080;

    --lv-popup-body-bg: #c7c7c7;

    --lv-color-accepted: darkgreen;
    --lv-color-unaccepted: coral;
    --lv-color-requested: orange;
    --lv-color-declined: orangered;

    --lv-trace: #079413;
    --lv-debug: #be9011;
    --lv-info: #0b5ed7;
    --lv-warn: #d26841;
    --lv-error: #620e07;
    --lv-fatal: #d0210a;
}

body {
    min-width: 340px;
    font-size: 1.15rem;
    background-color: var(--lv-body-bg);
    color: var(--lv-body-color);
}

dialog {
    background-color: var(--lv-body-bg);
}

a {
    color: var(--lv-body-color);
}


#app {
    position: fixed;
    top: 0;
    bottom: 3.25rem;
    left: 0;
    right: 0;
    margin: 0.25rem;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: scroll;
    overflow-scrolling: auto;
}

#appNav {
    position: fixed;
    bottom: 2px;
    left: 2px;
    right: 2px;
    border: black .1em solid;
    background-color: var(--lv-nav);
    border-radius: 5px;
    line-height: 3rem;
    padding: 0;
    margin: 0;
    z-index: 100;
}

#appNav img {
    margin: 0;
    vertical-align: middle;
}

#appNav ul {
    list-style: none;
    margin: 0 0 0 0;
    display: inline-block;
    padding: 0;
    vertical-align: middle;
}

#appNav li {
    display: inline-block;
    padding-left: 6px;
    padding-right: 6px;
}

#appProgress {
    position: fixed;
    top: 2px;
    left: 2px;
    right: 2px;
    width: calc(100vw - 8px);
    height: 0.4rem;
    border: black .1em solid;
    border-radius: 5px;
    padding: 0;
    margin: 0;
    z-index: 120;
}
progress::-webkit-progress-bar {
    background-color: var(--lv-nav);
}
progress::-webkit-progress-value {
    background-color: var(--lv-color);
}

#calendar {
    height: calc(100vh - 85px);
}

/* Nav Bar */

.nav__links {
    display: flex;
    flex-direction: row;
}

.nav__button {
    flex-grow: 1;
    text-align: center;
    background-color: var(--lv-nav);
}

.nav__hide {
    /*visibility: hidden;*/
    display: none;
}

.nav__icon {
    font-size: 1.5rem;
    font-weight: bold;
}

.nav__button-menu {
    text-align: center;
}

.nav__menu {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 1.5rem;
    font-weight: bold;
}

.nav__link {
    color: var(--lv-nav-link-color);
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
}

.app__link {
    color: var(--lv-body-color);
    text-decoration: none;
}

.app__menu {
    position: fixed;
    bottom: 3.5rem;
    right: 2px;
    border: black .1em solid;
    background-color: var(--lv-nav);
    border-radius: 5px;
    padding: 0;
    margin: 0;
    z-index: 110;
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 400ms, visibility 600ms;
    transition: opacity 400ms, visibility 600ms;
}

.menu__hide {
    opacity: 0;
    visibility: hidden;
}

#appMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

#appMenu li {
    padding:  0.3rem 0.8rem 0.3rem 0.8rem;
    line-height: 2rem;
}

#appMenu li:not(:last-child) {
    border-bottom: black .1em solid;
}

.module__hide {
    display: none;
}

/* Form Fields */
/* ----------- */
.form-content {
    width: 100%;
}

.form-group-row {
    width: calc(100% - 28px);
    display: flex;
    flex-direction: row;
    padding: 0.25rem;
}

.form-group-col {
    width: calc(100% - 28px);
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
}

.form-control {
    display: block;
    width: calc(100% - 27px);
    padding: 0.375rem 0.75rem;
    margin: 0.25rem 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-clip: padding-box;
    border: 1px solid var(--lv-border-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .form-control {
        transition: none;
    }
}
.form-control[type=file] {
    overflow: hidden;
}
.form-control:focus {
    color: var(--lv-body-color);
    background-color: var(--lv-form-bg);
    border-color: var(--lv-form-border);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Buttons */
/* ------- */

.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: var(--lv-body-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}
.btn:hover {
    color: var(--lv-body-color);
}
.btn-check:focus + .btn, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
    pointer-events: none;
    opacity: 0.65;
}

.btn-sm, .btn-group-sm > .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.2rem;
}

.btn-generic {
    color: var(--lv-body-color);
    border: 1px solid var(--lv-border-color);
    background-color: var(--lv-body-bg);
}

.btn-space {
    margin-right: 0.2rem;
    margin-left: 0.2rem;
}

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

.generic-icon {
    color: var(--lv-body-color);
}

.selectable-image {
    display: inline-flex;
    cursor: pointer;
    border: 1px solid var(--lv-form-border);
    border-radius: 0.25rem;
    height: 2rem;
    width: 2rem;
}

.removable-image {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 1rem;
    color: red;
}

/* Settings */
.settings__container {
    width: calc(100% - 5px);
    border: 2px solid var(--lv-border-color);
    border-radius: 0.25rem;
    margin: 0;
    padding-right: 0;
}

.settings__container-label {
    display: inline-block;
    width: 30%;
    border-right: 2px solid var(--lv-border-color);
    font-size: 1.15rem;
    margin: 0.25rem;
    padding: 0;
}

.settings__container-field {
    display: inline-block;
    width: 60%;
    font-size: 1rem;
    margin: 0.25rem;
    padding: 0;
}

.form__popup {
    position: fixed;
    top: 0;
    bottom: 3.4rem;
    left: 0;
    right: 0;
    vertical-align: middle;
    background-color: rgba(199, 199, 199, 0.5);
    z-index: 101;
}

.form__popup-content {
    position: absolute;
    top: 50%;
    margin: 0;
    width: calc(100% - .35rem);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: var(--lv-popup-body-bg);
    border: 2px solid var(--lv-border-color);
    border-radius: 0.25rem;
}

.form-control {
    display: block;
    width: calc(100% - 27px);
    padding: 0.375rem 0.75rem;
    margin: 0.25rem 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-clip: padding-box;
    border: 1px solid var(--lv-border-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .form-control {
        transition: none;
    }
}

.form-control[type=file] {
    overflow: hidden;
}


.form-check {
    position: relative;
    display: block;
    padding-left: 1.25rem;
}

.form-check-input {
    position: absolute;
    margin-top: 0.3rem;
    margin-left: -1.25rem;
}

.form-check-input:disabled ~ .form-check-label {
    color: #6c757d;
}

.form-check-label {
    margin-bottom: 0;
}

.form__box {
    border: 2px solid var(--lv-border-color);
    border-radius: 5px;
    padding: 5px;
}

.form__row {
    display: flex;
    flex-direction: row;
}

.form__col-label {
    width: 33%;
}

.form__col-control {
    width: 66%;
}

.card__box {
}

.bordered {
    border: 2px solid var(--lv-border-color);
    border-radius: 5px;
}

.card__row {
    padding: 3px 0;
    display: flex;
    flex-direction: row;
}

.card__title {
    flex-grow: 1;
}

.card__buttons {
    // flex-grow: 1;
}

.btn-new {
    border-color: var(--lv-color-accepted);
    background-color: var(--lv-trace);
}

.calEvent__no-wrap {
    white-space: nowrap;
}

.btn-accept {
    border-color: var(--lv-color-accepted);
    color: var(--lv-color-accepted);
}

.btn-decline {
    border-color: var(--lv-color-declined);
    color: var(--lv-color-declined);
}

.btn-edit {
    border-color: var(--lv-info);
    color: var(--lv-info);
}


.colorClass_green {
    color: var(--lv-trace);
}

.colorClass_red {
    color: var(--lv-error);
}

.System {
    /* system default */
}

.accepted {
    color: var(--lv-color-accepted);
}

.unaccepted {
    color: var(--lv-color-unaccepted);
}

.requested {
    color: var(--lv-color-requested);
}

.declined {
    color: var(--lv-color-declined);
}

.Trace {
    color: var(--lv-trace);
}

.Debug {
    color: var(--lv-debug);
}

.Info {
    color: var(--lv-info);
}

.Warn {
    color: var(--lv-warn);
}

.Error {
    color: var(--lv-error);
}

.Fatal {
    color: var(--lv-fatal);
}