.container {
    height: 100vh;
}

.line-button {
    margin-right: 1em;
}

h2.subtitle {
    font-size: smaller;
    font-style: italic;
    margin-top: -1em;
    margin-bottom: 2em;
}

div.line-disabled input {
    border-color:red;
    background-color: darkred !important;
    border-color: red;
}

div.line-disabled > div > select {
    border-color:red;
    background-color: darkred !important;
    border-color: red;
}

div.line-disabled > div > select > option {
    border-color:red;
    background-color: darkred !important;
}

div.line-disabled > div > div.vue-treeselect > div {
    background-color: darkred;
}

div.line-enabled > div > select {
    background-color: grey !important;
    color: white;
}

div.line-enabled > div > select > option {
    background-color: grey;
    color: white;
}

.round-number input {
    width: 3em;
    margin-left: 1em;
}

div.round-number > div > button {
    margin-left: 1em;
    margin-top: -.4rem;
}

div.round-number > div > input {
    margin-top: -.4rem;
}

div.round-number > div > span {
    min-width: 1.2em;
    margin-top: -.25rem;
    text-align: right;
}

body.about {
    width: 80%;
    margin: 0 auto;
}

body.tutorial {
    width: 80%;
    margin: 0 auto;
}

div.table-header {
    text-align: center;
    font-weight: bold;
    margin-top: 2em;
}

textarea.data-import-export {
    width: 100%;
    margin-top: 1em;
}

.error-message {
    font-weight: bold;
    color: darkred;
}

section.navbar-section a {
    margin-right: 2em;
}

.kbd-nav {
    padding-left: 1.5em;
}

body.lightmode {
    background-color: white;
    color: black;
}

body.lightmode input,button {
    background-color: white;
    color: #5755d9;
}

body.darkmode div.dropdown {
    background-color: white;
}

body.darkmode div.dropdown ul.menu {
    background-color: darkgray;
}

body.darkmode {
    background-color: black;
    color: white;
}

body.darkmode {
    background-color: black;
    color: white;
}

body.darkmode input {
    background-color: grey;
    color: white;
    border-color: darkgray;
}

body.darkmode button {
    background-color: grey;
    color: white;
    border-color: darkgray;
}

body.darkmode i {
    color: white;
}

body.darkmode button:hover {
    background-color: lightgray;
    color: black !important;
}

body.darkmode button:hover i {
    color:  white;
}

body.darkmode button:focus {
    background-color: grey;
}

body.darkmode button:focus i {
    color: white;
}

body.darkmode select.session-chooser {
    background-color: grey !important;
    color: black !important;
}

body.darkmode select {
    background-color: grey !important;
}

body.darkmode section.navbar-section > a {
    color: lightgray;
}

body.darkmode div.modal-container {
    background-color: black;
}

body.darkmode div.modal-title {
    color: lightgray;
}

body.darkmode textarea {
    color: white;
    background-color: black;
}

body.darkmode div.modal-header a {
    color: lightgray;
}

div.darkmode a.btn {
    background-color: black;
    border-color: transparent;
}

body.darkmode .btn.btn-link.active, .btn.btn-link:active, .btn.btn-link:focus, .btn.btn-link:hover {
    border-color: transparent !important;
}

body.darkmode div.dropdown {
    background-color: black;
}

body.darkmode div.dropdown ul.menu {
    background-color: darkgray;
}

div.encounter-name select {
    width: 80%;
}

div.encounter-name input {
    width: 80%;
}

.small-num {
    display: inline-flex;
}

.ac-num {
    width: 47%;
    display: inline-flex;
}

div.weapon-details {
    justify-content: center;
}

span.weapon-properties {
    font-style: italic;
}

div.weapon-details-edit label {
    margin-right: 2em;
}

div.weapon-details-edit input {
    width: 50%;
}

body.darkmode .vue_treeselect {
    background-color: black;
}

body.darkmode .vue-treeselect__menu-container {
    background-color: black;
}

body.darkmode .vue-treeselect__menu {
    background-color: black;
}

body.darkmode .vue-treeselect__menu * {
    background-color: black;
}

body.darkmode .vue-treeselect__control {
    background-color: black;
}

body.lightmode .vue_treeselect {
    background-color: white;
}

body.lightmode .vue-treeselect__menu-container {
    background-color: white;
}

body.lightmode .vue-treeselect__menu {
    background-color: white;
}

body.lightmode .vue-treeselect__menu * {
    background-color: white;
}

body.lightmode .vue-treeselect__control {
    background-color: white;
}

.vue-treeselect__multi-value {
    max-height: 29px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.weapon-details {
    display: inline;
    margin-right: 2em;
}

.init-num {
    width: 46%;
}
.ac-num {
    width: 30%;
}

.hp-num {
    width: 30%;
}

.th-num {
    width: 30%;
}

.btn.edit-weapons {
    float: right;
}

label.form-checkbox {
    text-align:center;
}