test_space / monstermaker.css
gstaff's picture
Add card formatting
1a5a832
.alert > :last-child {
margin-bottom: 0; }
.alert-default {
border: 4px solid #dee2e6;
border-radius: 1em; }
.app {
display: grid;
min-height: 100vh;
min-width: 300px;
grid-template-rows: 1fr auto;
grid-template-columns: 100%; }
.app .app-container {
max-width: 1200px;
margin: 0 auto; }
.app .app-body {
background: #666f7f;
margin-top: 6.25rem;
display: flex;
flex-direction: column; }
.app .app-body .app-container {
padding: 0.5rem 10px;
width: 100%;
flex-grow: 1; }
.app .app-header {
position: fixed;
top: 0;
width: 100%;
z-index: 2;
box-shadow: 0 0.25rem 0.75rem 0 #505762; }
@media screen and (min-width: 801px) {
.app .app-header .app-header-navbar {
display: none; } }
.app .app-header .app-header-heading {
background: #22252a; }
.app .app-header .app-header-heading .app-container {
padding: 0.625rem 10px;
display: grid;
grid-template-columns: auto repeat(8, 2rem);
grid-column-gap: 0.25rem;
align-items: end; }
@media screen and (max-width: 800px) {
.app .app-header .app-header-heading .app-container {
grid-template-columns: auto repeat(2, 2rem); }
.app .app-header .app-header-heading .app-container .btn:not(.btn-patreon):not(.btn-menu) {
display: none; } }
@media screen and (min-width: 801px) {
.app .app-header .app-header-heading .app-container .btn-menu {
display: none; } }
.app .app-header .app-header-heading h1 {
text-transform: uppercase;
font-weight: bold;
display: flex;
flex-direction: row;
line-height: 1;
margin: 0; }
.app .app-header .app-header-heading h1 img {
height: 2.5rem;
width: 2.5rem;
border: 2px solid #666f7f;
padding: 2px;
box-sizing: border-box;
border-radius: 100%;
margin-right: 0.325rem; }
.app .app-header .app-header-heading h1 a {
display: flex;
flex-direction: column; }
.app .app-header .app-header-heading h1 a span:first-of-type {
font-size: 0.95rem;
color: #da3737;
letter-spacing: 1px; }
.app .app-header .app-header-heading h1 a span:last-of-type {
color: #FFFFFF;
font-size: 1.9rem;
margin-bottom: -0.35rem; }
.app .app-header .app-header-heading h1 a:hover {
text-decoration: none; }
.app .app-header .app-header-heading h1 a:hover span:last-of-type {
text-decoration: underline;
text-decoration-color: #da3737; }
.app .app-header .app-header-heading .btn {
height: 2rem;
border-radius: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
background-color: #666f7f;
border-color: #666f7f;
line-height: 1;
padding: 0; }
.app .app-header .app-header-heading .btn .fas,
.app .app-header .app-header-heading .btn .fab {
background: none;
padding: 0;
margin: 0; }
.app .app-header .app-header-heading .btn:hover {
background: #da3737;
border-color: #da3737; }
.app .app-header .app-header-heading .btn.btn-patreon {
background-color: #e85b46;
border-color: #e85b46; }
.app .app-header .app-header-heading .btn.btn-patreon:hover {
color: #e85b46;
background-color: #FFFFFF;
border-color: #FFFFFF; }
.app .app-header .app-header-navbar {
background: #22252a; }
.app .app-header .app-header-navbar .navbar {
padding: 0; }
.app .app-header .app-header-navbar .navbar .nav-item {
padding-left: 0.625rem;
padding-right: 0.625rem; }
.app .app-header .app-header-navbar .navbar .nav-item + .nav-item {
border-top: 1px dotted #444a54; }
.app .app-header .app-header-navbar .navbar .nav-item a {
color: white;
font-weight: bold; }
.app .app-header .app-header-navbar .navbar .nav-item a:hover {
color: #da3737; }
.app .app-header .app-header-navbar .navbar .nav-item button {
padding: 0;
color: white;
font-weight: bold;
display: block;
padding: 0.5rem 0;
background: none;
border: none;
box-shadow: none;
width: 100%;
text-align: left; }
.app .app-header .app-header-navbar .navbar .nav-item button:hover {
color: #da3737;
cursor: pointer; }
.app .app-header .app-header-navbar .navbar .nav-item .fab,
.app .app-header .app-header-navbar .navbar .nav-item .fas {
width: 2.5rem;
text-align: center;
margin-right: 0.325rem; }
.app .app-header .app-header-navbar .navbar .nav-item:first-child {
border-top: 1px solid #444a54; }
.app .app-header .app-header-navbar .navbar .nav-item:last-child {
border-bottom: 1px solid #444a54; }
.app .app-header .app-header-navbar .navbar .nav-item .nav-link-detail {
color: #666f7f; }
.app .app-header .app-header-navigation {
background: #2d3138; }
.app .app-header .app-header-navigation .app-container {
padding: 0 10px; }
.app .app-header .app-header-navigation .nav {
display: grid;
grid-template-columns: repeat(2, 1fr); }
.app .app-header .app-header-navigation .nav .nav-item {
text-align: center;
font-weight: bold; }
.app .app-header .app-header-navigation .nav .nav-item .nav-link {
color: #666f7f;
padding: 0.5rem 0.5rem 0.25rem;
border-radius: 0;
border-bottom: 0.25rem solid #22252a; }
.app .app-header .app-header-navigation .nav .nav-item .nav-link .badge {
background: rgba(102, 111, 127, 0.5); }
.app .app-header .app-header-navigation .nav .nav-item .nav-link:not(.active):hover {
border-bottom: 0.25rem solid rgba(218, 55, 55, 0.5);
color: rgba(255, 255, 255, 0.5); }
.app .app-header .app-header-navigation .nav .nav-item .nav-link:not(.active):hover .fas,
.app .app-header .app-header-navigation .nav .nav-item .nav-link:not(.active):hover .fab {
color: rgba(218, 55, 55, 0.5); }
@media screen and (max-width: 800px) {
.app .app-header .app-header-navigation .nav .nav-item .nav-link .nav-link-text,
.app .app-header .app-header-navigation .nav .nav-item .nav-link .badge {
display: none; } }
.app .app-header .app-header-navigation .nav .nav-item .active {
background: none;
border-radius: 0;
border-bottom: 0.25rem solid #da3737;
color: white; }
.app .app-header .app-header-navigation .nav .nav-item .active .badge {
background: #666f7f; }
.app .app-header .app-header-navigation .nav .nav-item .active .fas,
.app .app-header .app-header-navigation .nav .nav-item .active .fab {
color: #da3737; }
.app .app-header .app-header-navigation .nav .nav-item .fas,
.app .app-header .app-header-navigation .nav .nav-item .fab {
margin-right: 0.325rem; }
.app .app-header .app-header-navigation .nav .nav-item .badge {
border-radius: 1cm;
font-size: inherit;
padding: 0.1625rem 0.325rem; }
.app .app-footer {
background: #565e6b;
text-align: center; }
.app .app-footer .app-container {
padding: 1.25rem 10px;
display: grid;
grid-template-columns: 1fr 1fr 2fr;
text-align: left; }
@media screen and (max-width: 800px) {
.app .app-footer .app-container {
grid-template-columns: 1fr;
grid-row-gap: 0.5rem;
text-align: center; }
.app .app-footer .app-container p {
text-align: center; } }
.app .app-footer a {
color: inherit;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
text-decoration: none;
display: inline-block; }
.app .app-footer a:hover {
color: #da3737; }
.app .app-footer p {
text-align: right;
margin: 0;
color: #f1f2f3;
font-size: 0.9rem; }
.app .app-footer p a:not(:first-of-type) {
margin-left: 0.75rem; }
.app .app-footer p .fab {
font-size: 2rem;
color: #9ca3af;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
.app .app-footer p .fab:hover {
color: #da3737; }
.app .app-footer ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0.9rem;
color: #f1f2f3; }
.app .app-footer h5 {
color: #9ca3af;
font-size: 0.75rem;
text-transform: uppercase;
font-weight: bold; }
.app .app-footer .links > :not(:last-child) {
margin-bottom: 0.5rem; }
html {
font-size: 16px; }
@media screen and (max-width: 400px) {
html {
font-size: 12px; } }
body {
font-family: 'Roboto', sans-serif;
background: #666f7f; }
a {
color: #da3737; }
a:hover {
color: #da3737; }
.breadcrumbs {
background: #565e6b;
margin-top: 0.5rem;
color: #dee2e6;
font-size: 0.9em; }
@media screen and (max-width: 800px) {
.breadcrumbs {
display: none; } }
.breadcrumbs .app-container {
padding: 0.5rem 10px;
max-width: 1200px;
margin: 0 auto; }
.breadcrumbs .divider,
.breadcrumbs .fas {
margin: 0 0.25rem;
color: #dee2e6; }
.breadcrumbs a {
color: inherit; }
.breadcrumbs a:hover {
color: white; }
.btn {
border-radius: 2rem;
padding: 0 0.75rem 0 0; }
.btn .fas,
.btn .fab {
background: #da3737;
padding: 0.325rem;
line-height: inherit;
border-radius: 2rem;
margin: 0 0.325rem 0 0; }
.btn .fas:before,
.btn .fab:before {
min-width: 1.5rem;
display: block;
text-align: center; }
.btn.icon-only .fas,
.btn.icon-only .fab {
margin-right: -0.75rem; }
.btn.btn-sm {
padding: 0 0.5rem 0 0; }
.btn.btn-sm .fas,
.btn.btn-sm .fab {
padding: 0;
margin: 0 0.25rem 0 0; }
.btn.btn-sm .fas::before,
.btn.btn-sm .fab::before {
min-width: 1.3rem; }
.btn.btn-sm.icon-only {
padding-right: 0; }
.btn.btn-sm.icon-only .fas,
.btn.btn-sm.icon-only .fab {
margin-right: 0; }
.btn-primary {
color: #FFFFFF;
background-color: #2d3138;
border-color: #2d3138;
font-weight: bold; }
.btn-primary.icon-only:not(.icon-border) {
border-color: #da3737; }
.btn-secondary {
color: #FFFFFF;
background-color: #666f7f;
border-color: #666f7f;
font-weight: bold; }
.btn-secondary.icon-only:not(.icon-border) {
border-color: #da3737; }
.btn-primary,
.btn-secondary {
display: inline-flex;
align-items: center;
border-width: 2px; }
.btn-primary:hover, .btn-primary:not(:disabled):not(:disabled):active, .btn-primary.dropdown-toggle[aria-expanded="true"],
.btn-secondary:hover,
.btn-secondary:not(:disabled):not(:disabled):active,
.btn-secondary.dropdown-toggle[aria-expanded="true"] {
background-color: #da3737;
border-color: #da3737; }
.btn-primary:not(:disabled):not(:disabled):focus, .btn-primary:not(:disabled):not(:disabled):active:focus, .btn-primary.dropdown-toggle[aria-expanded="true"],
.btn-secondary:not(:disabled):not(:disabled):focus,
.btn-secondary:not(:disabled):not(:disabled):active:focus,
.btn-secondary.dropdown-toggle[aria-expanded="true"] {
box-shadow: 0 0 0 0.2rem rgba(218, 55, 55, 0.5); }
.card {
border: 0;
background: none; }
.card .card-header {
background: #dee2e6;
border: 0;
color: #22252a;
font-size: larger;
font-weight: bold;
border-bottom: 4px solid #ccd1d6;
border-radius: 0.5rem 0.5rem 0 0;
font-size: 1.4rem; }
@media screen and (max-width: 400px) {
.card .card-header {
font-size: 1.35rem; } }
.card .card-header .card-icon {
background: #da3737;
padding: 0.325rem 0.75em 0.325rem 0.325em;
border-radius: 0 1cm 1cm 0;
line-height: inherit;
margin: -0.325rem 0 -0.325rem -1.25rem;
color: white; }
.card .card-header .card-icon::before {
min-width: 1.75rem;
text-align: center;
display: block; }
.card .card-header .divider {
color: #da3737; }
.card .card-header .subtitle {
font-weight: normal;
font-size: 0.8em; }
.card .card-body {
background: #FFFFFF; }
.card .card-footer {
background: #dee2e6;
border: 0;
border-radius: 0 0 0.5rem 0.5rem; }
.dropdown {
display: inline-block; }
.dropdown .dropdown-item {
padding-left: 0.75rem;
padding-right: 0.75rem; }
.dropdown .dropdown-item .fas {
margin-right: 0.75rem; }
.dropdown .icon-only::after {
display: none; }
.dropdown-menu {
border: 1px solid #2d3138;
border-radius: .5rem;
box-shadow: 0px 2px 5px 0px #505762bf; }
.dropdown-menu button:hover {
cursor: pointer;
background: rgba(218, 55, 55, 0.15); }
.dropdown-menu button:hover .fas,
.dropdown-menu button:hover .fab {
color: #da3737; }
.dropdown-menu .dropdown-item .fas {
min-width: 1.1rem;
text-align: center; }
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
background: #da3737;
color: #FFFFFF; }
.dropdown-menu .dropdown-item.active .fas,
.dropdown-menu .dropdown-item.active .fab,
.dropdown-menu .dropdown-item:active .fas,
.dropdown-menu .dropdown-item:active .fab {
color: inherit; }
.error {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
flex-direction: column; }
.error .box {
color: #9ca3af;
border-radius: 1rem;
text-align: center;
padding: 1.25rem;
background: #565e6b; }
.error .box > :last-child {
margin-bottom: 0; }
.error .fas {
font-size: 4rem;
margin-bottom: 1rem; }
.laboratory > .card-body {
padding: 0;
display: grid;
grid-template-columns: 380px 1fr; }
@media screen and (max-width: 840px) {
.laboratory > .card-body {
grid-template-columns: 344px 1fr; } }
@media screen and (max-width: 800px) {
.laboratory > .card-body {
grid-template-columns: 1fr;
grid-template-rows: auto auto; } }
.laboratory #laboratory-import-file {
display: none; }
.laboratory .laboratory-blueprint {
background: #dee2e6; }
.blueprint-form {
background: #dee2e6; }
.blueprint-form .btn-help {
color: #b1b7bd;
box-shadow: none;
margin-right: -0.25em; }
.blueprint-form .btn-help:hover {
color: #da3737; }
.blueprint-form .btn-help .fas {
background: none; }
.blueprint-form .card {
overflow: visible; }
.blueprint-form .card-body {
padding: 0;
overflow: visible; }
.blueprint-form .card-body .card-header {
border-bottom: 1px solid #ccd1d6; }
.blueprint-form form {
background: #FFFFFF; }
.blueprint-form form[data-method="quickstart"] .manual-only {
display: none; }
.blueprint-form form[data-method="manual"] .quickstart-only {
display: none; }
.blueprint-form form:not([data-rank="solo"]) .solo-only {
display: none; }
.blueprint-form .form-group {
margin: 0;
display: flex; }
.blueprint-form .form-group.hidden {
display: none; }
.blueprint-form .form-group:not(:last-child) {
border-bottom: 1px solid #dee2e6; }
.blueprint-form .form-group > label {
width: 7.5rem;
flex-shrink: 0;
margin: 0;
font-weight: bold;
padding: 0.325rem 0.75rem;
box-sizing: border-box;
display: flex;
text-align: right;
justify-content: flex-end;
border-right: 1px solid #dee2e6;
background: rgba(222, 226, 230, 0.5);
line-height: calc(2.375rem - 0.75rem); }
.blueprint-form .form-group input,
.blueprint-form .form-group select {
border: 0;
background: none; }
.blueprint-form .form-group input::placeholder {
color: rgba(102, 111, 127, 0.5); }
.blueprint-form .form-group select {
padding-left: 0.5rem; }
.blueprint-form .form-group textarea {
padding: .375rem .75rem;
border: 0;
width: 100%;
box-sizing: border-box;
resize: vertical;
color: #495057;
min-height: 2.375rem;
font-size: 0.8em; }
.blueprint-form .form-group > :last-child {
margin-bottom: 0; }
.blueprint-form .form-group.section-end {
border-bottom: 2px solid #dee2e6; }
.blueprint-form .form-group .flex-input {
width: 100%;
display: flex; }
.blueprint-form .form-group .flex-input span {
opacity: 0.5;
padding: 0 0.5em;
display: flex;
align-items: center;
color: #b2b7c9; }
.blueprint-form .form-radio-list {
width: 100%;
display: flex;
padding: .375rem .75rem; }
.blueprint-form .form-radio-list .form-check-input:checked ~ * {
background: #da3737;
color: #FFFFFF;
font-weight: bold; }
.blueprint-form .form-radio-list .form-check-input {
display: none; }
.blueprint-form .form-radio-list .form-check {
flex-grow: 1;
margin: 0;
flex-shrink: 0;
width: 50%; }
.blueprint-form .form-radio-list .form-check:first-child .form-check-label {
border-radius: 4px 0 0 4px; }
.blueprint-form .form-radio-list .form-check:last-child .form-check-label {
border-radius: 0 4px 4px 0; }
.blueprint-form .form-radio-list .form-check-label {
flex-grow: 1;
text-align: center;
background: #dee2e6;
text-transform: uppercase;
font-size: 0.75rem;
color: #666f7f; }
.blueprint-form .form-radio-list .form-check-label:hover {
cursor: pointer; }
.blueprint-form .repeatable-section .card-footer {
background: #eef0f2;
padding-left: 0.75rem;
padding-right: 0.75rem; }
.blueprint-form .repeatable-item {
border-bottom: 2px solid #dee2e6;
position: relative; }
.blueprint-form .repeatable-item .dropdown-options {
position: absolute;
top: 0.325rem;
right: 0.75rem; }
.blueprint-form .repeatable-item .dropdown-options .btn {
border-color: #da3737; }
.blueprint-form .repeatable-item .dropdown-toggle {
opacity: .1; }
.blueprint-form .repeatable-item .dropdown-toggle:disabled {
display: none; }
.blueprint-form .repeatable-item .dropdown-toggle:hover, .blueprint-form .repeatable-item .dropdown-toggle[aria-expanded="true"] {
opacity: 1; }
.blueprint-form .accordion .card {
border-radius: 0; }
.blueprint-form .accordion .card .card-header {
padding: 0;
border-radius: 0;
display: flex;
border-bottom: 1px solid #ccd1d6;
margin-bottom: 0; }
.blueprint-form .accordion .card .card-header button {
background: #dee2e6;
display: block;
text-align: left;
font-weight: bold;
width: 100%;
color: #2d3138;
text-decoration: none;
padding: 0;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
border-radius: 0;
border: 0;
display: flex;
align-items: center;
padding: 0.1875rem 0; }
.blueprint-form .accordion .card .card-header button .title {
flex-grow: 1;
margin-left: 0.325rem; }
.blueprint-form .accordion .card .card-header button:hover, .blueprint-form .accordion .card .card-header button[aria-expanded="true"] {
background: #da3737;
color: #FFFFFF; }
.blueprint-form .accordion .card .card-header button:hover .badge, .blueprint-form .accordion .card .card-header button[aria-expanded="true"] .badge {
background: #FFFFFF;
color: #da3737; }
.blueprint-form .accordion .card .card-header button .fa-chevron-right::before {
position: relative;
left: 1px; }
.blueprint-form .accordion .card .card-header button[aria-expanded="true"] .fa-chevron-right::before {
transform: rotate(90deg); }
.blueprint-form .accordion .card .card-header .badge {
background-color: #b1b7bd;
border-radius: 1cm;
padding: 0 0.325rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
color: white;
float: right;
margin-right: 0.75rem;
line-height: 1.5; }
.blueprint-form .accordion .card .card-header .fas {
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
color: white;
border-radius: 1cm;
margin: 0 0 0 0.325rem;
width: 1.5rem;
height: 1.5rem;
padding: 0;
display: flex;
justify-content: center;
align-items: center; }
.blueprint-form .accordion .card .card-header .fas::before {
transition: transform .15s ease-in-out; }
.blueprint-form .accordion .card .card-footer {
border-radius: 0; }
.blueprint-form .accordion .card .collapse.show {
border-bottom: 1px solid #ccd1d6; }
.blueprint-form > .card-footer {
padding-left: 0.75rem;
padding-right: 0.75rem; }
#modal-blueprint-traits .modal-body:not([filter='any']) .trait.any, #modal-blueprint-traits .modal-body:not([filter='controller']) .trait.controller, #modal-blueprint-traits .modal-body:not([filter='defender']) .trait.defender, #modal-blueprint-traits .modal-body:not([filter='lurker']) .trait.lurker, #modal-blueprint-traits .modal-body:not([filter='striker']) .trait.striker, #modal-blueprint-traits .modal-body:not([filter='supporter']) .trait.supporter, #modal-blueprint-traits .modal-body:not([filter='sniper']) .trait.sniper, #modal-blueprint-traits .modal-body:not([filter='scout']) .trait.scout {
display: none; }
#modal-blueprint-traits .modal-body select {
margin-bottom: 1.25rem; }
#modal-blueprint-traits .modal-body ul {
list-style: none;
padding-left: 0; }
#modal-blueprint-traits .modal-body ul .title {
margin: 0; }
#modal-blueprint-traits .modal-body ul .description {
font-size: small;
margin: 0; }
#modal-blueprint-traits .modal-body .form-check:hover {
background: #eef0f2;
margin-left: -1.25rem;
margin-right: -1.25rem;
padding-left: 2.5rem;
padding-right: 1.25rem; }
#modal-blueprint-traits .modal-body .form-check-label {
cursor: pointer;
padding-top: 0.325rem;
padding-bottom: 0.325rem;
width: 100%; }
#modal-blueprint-traits .modal-body .form-check-input {
top: 0.325rem; }
#modal-blueprint-traits .modal-body .form-check-input:checked ~ label {
color: #da3737; }
#modal-markdown .accordion-markdown-help table {
background: #dee2e659;
overflow: hidden;
border-radius: 0.5em;
border: none; }
#modal-markdown .accordion-markdown-help table td {
border: none; }
#modal-markdown .accordion-markdown-help .card:not(:first-child) {
margin-top: 1rem; }
#modal-markdown .accordion-markdown-help .collapse.show {
border-bottom: none; }
#modal-markdown .accordion-markdown-help .card-header {
border: none;
background: none;
margin-left: -0.25em;
margin-right: -1em; }
#modal-markdown .accordion-markdown-help .card-header button {
background: #da3737;
color: #FFFFFF;
font-weight: bold;
padding-left: 0.1875rem;
padding-right: 0.5em;
border-radius: 1em 0 0 1em; }
#modal-markdown .accordion-markdown-help .card-header button::before {
content: "\f054";
transition: transform .15s ease-in-out;
font-family: "Font Awesome 5 Free";
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
text-rendering: auto;
margin-right: 0.5em;
transform: rotate(90deg);
background: #da3737;
color: white;
width: 1.5em;
border-radius: 1em;
text-align: center; }
#modal-markdown .accordion-markdown-help .card-header button.collapsed::before {
transform: rotate(0deg); }
#modal-markdown .accordion-markdown-help .card-header button.collapsed:not(:hover) {
background: #dee2e6;
color: inherit; }
#modal-markdown .accordion-markdown-help .card-body {
padding: 1rem 0 0; }
#modal-markdown .accordion-markdown-help .card-body > :last-child {
margin-bottom: 0; }
.monster-preview {
background-color: #ccd1d6;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 1.25rem 10px;
background-image: linear-gradient(45deg, #ccd1d6 25%, #c6ccd1 25%, #c6ccd1 50%, #ccd1d6 50%, #ccd1d6 75%, #c6ccd1 75%, #c6ccd1 100%);
background-size: 10px 10px; }
.monster-preview .btn-png {
margin-top: 1.25rem;
box-shadow: 0px 5px 10px 0px #50576240; }
.monster-preview .btn-png .fas {
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
.monster-preview .btn-png:not(:hover) {
background: #FFFFFF;
border-color: #FFFFFF;
color: #666f7f; }
.monster-preview .btn-png:not(:hover) .fas {
color: #FFFFFF; }
.monster-preview .btn-columns {
margin-top: 1.25rem;
box-shadow: 0px 5px 10px 0px #50576240; }
.monster-preview .btn-columns .fas {
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
.monster-preview .btn-columns:not(:hover) {
background: #FFFFFF;
border-color: #FFFFFF; }
.monster-preview .btn-columns:not(:hover) .fas {
color: #da3737;
background: none; }
.modal-backdrop.show {
opacity: 0.75; }
.modal .modal-header {
background: #22252a;
color: white;
border-bottom: 0;
border-radius: 0;
padding: 0.75rem 1.25rem;
border-bottom: 4px solid #dee2e6; }
.modal .modal-header .card-icon {
background: #da3737;
padding: 0.325rem 0.75rem 0.325rem 0.325rem;
border-radius: 0 1cm 1cm 0;
line-height: inherit;
margin: -0.325rem 0 -0.325rem -1.25rem; }
.modal .modal-header .card-icon::before {
min-width: 1.75rem;
text-align: center;
display: block; }
.modal .modal-header .modal-title {
font-weight: bold; }
.modal .modal-header .close {
opacity: 1;
color: #2d3138;
text-shadow: none;
margin: -0.75rem -1.25rem -0.75rem auto;
padding: 0.9rem 1.25rem; }
.modal .modal-header .close span {
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
.modal .modal-header .close:hover, .modal .modal-header .close:focus {
color: white;
outline: none;
opacity: 1; }
.modal .modal-header .close:hover span, .modal .modal-header .close:focus span {
background: #da3737; }
.modal .modal-header .close span {
background: #666f7f;
display: block;
border-radius: 1cm 0 0 1cm;
padding: 0 0.75rem 0 0.75rem;
margin-right: -1.25rem; }
.modal .modal-content {
border: 1px solid transparent;
background: none;
overflow: hidden;
border: 2px solid #da3737;
border-radius: 0.75rem; }
.modal .modal-body {
background: white;
padding: 1.25rem; }
.modal .modal-body > :last-child {
margin-bottom: 0; }
.modal .modal-footer {
background: #dee2e6;
border-top: 0;
padding: 0.75rem 1.25rem; }
#modal-settings .settings {
border: 4px solid #dee2e6;
border-radius: 1rem; }
#modal-settings .setting .btn {
margin-left: 0.5rem; }
#modal-settings .setting .content {
display: flex;
align-items: center;
padding: 0.75rem 1.25rem; }
#modal-settings .setting .confirmation {
display: none;
color: #da3737;
padding: 0.75rem 1.25rem; }
#modal-settings .setting .confirmed {
display: none;
color: green;
padding: 0.75rem 1.25rem; }
#modal-settings .setting .confirmed .fa-check-circle {
font-size: 2.5em; }
#modal-settings .setting select.form-control {
width: auto;
margin-left: 1em;
cursor: pointer; }
#modal-settings .setting.confirm .content,
#modal-settings .setting.confirm .confirmed {
display: none; }
#modal-settings .setting.confirm .confirmation {
display: flex;
align-items: center; }
#modal-settings .setting.confirmed .content,
#modal-settings .setting.confirmed .confirmation {
display: none; }
#modal-settings .setting.confirmed .confirmed {
display: flex;
align-items: center; }
#modal-settings .setting + .setting {
border-top: 2px solid #dee2e6; }
#modal-settings .setting .description {
flex-grow: 1; }
#modal-settings .setting .description .title {
font-weight: bold;
margin: 0;
text-transform: uppercase;
font-size: 0.9rem; }
#modal-settings .setting .description > :last-child {
margin-bottom: 0; }
#modal-gmbinder .modal-body {
white-space: pre-line;
font-family: monospace;
font-size: small; }
.monster {
font-size: 0.875rem;
position: relative;
width: 28.6em;
box-shadow: 0px 5px 10px 0px #50576240;
display: flex;
flex-direction: column; }
.monster > :first-child {
margin-top: 0; }
.monster > :last-child {
margin-bottom: 0; }
.monster .monster-contents {
width: 100%; }
.monster .monster-contents .monster-contents-body {
padding: 1.42em;
background: white; }
.monster.quickstart:not(.rank-solo) .solo-only {
display: none; }
.monster.quickstart .monster-header .monster-quickstart {
font-size: 0.8em;
font-weight: bold;
text-align: right;
margin-left: 0.8em;
flex-shrink: 0; }
.monster .monster-image.inline + * {
margin-top: 1.42em; }
.monster .monster-image img {
width: 100%;
border-radius: 0.25em; }
.monster .monster-image.banner {
width: 100%; }
.monster .monster-image.banner img {
border-radius: 0; }
.monster .monster-core > :last-child {
margin-bottom: 0; }
.monster .monster-core + * {
margin-top: 0.57em; }
.monster .monster-header {
display: inline-flex;
width: 100%;
justify-content: space-between;
align-items: flex-end; }
.monster .monster-header h4 {
font-weight: bold;
color: #9a1515;
margin: 0;
line-height: 1;
font-size: 2em;
font-family: "Alegreya Sans SC", sans-serif;
margin-top: -0.1em; }
.monster .monster-header p {
margin: 0; }
.monster .monster-header .monster-description {
font-style: italic;
font-size: 0.8em; }
.monster .monster-header .monster-description span:first-of-type {
display: inline-block; }
.monster .monster-header .monster-description span:first-of-type::first-letter {
text-transform: uppercase; }
.monster .monster-header .monster-description span + span::before {
content: " "; }
.monster .monster-header .monster-description * + .alignment::before {
content: ", "; }
.monster .monster-ac,
.monster .monster-hp,
.monster .monster-speed,
.monster .monster-saves,
.monster .monster-skills,
.monster .monster-languages,
.monster .monster-senses,
.monster .monster-immunities,
.monster .monster-vulnerabilities,
.monster .monster-resistances,
.monster .monster-conditions,
.monster .monster-challenge {
display: flex;
flex-wrap: wrap; }
.monster h5 {
font-weight: bold;
color: #9a1515;
font-family: "Alegreya Sans SC", sans-serif;
display: inline-block;
width: 100%;
margin-bottom: 0;
font-size: 1.45em;
margin-top: 0.36em !important; }
.monster h5 + * {
margin-top: 0.52em; }
.monster hr {
margin: 0.285em 0 0;
width: 100%;
min-height: 1px;
height: 0.143em;
border: 0;
background: linear-gradient(to right, rgba(154, 21, 21, 0.75), rgba(154, 21, 21, 0));
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid; }
.monster hr:first-of-type, .monster hr:last-of-type {
height: 0.2143em;
background: linear-gradient(to right, #9a1515, rgba(154, 21, 21, 0)); }
.monster hr + * {
margin-top: 0.285em; }
.monster hr:last-of-type + * {
margin-top: 0.57em; }
.monster .label {
font-weight: bold; }
.monster .monster-abilities {
display: inline-grid;
width: 100%;
grid-template-columns: repeat(6, 1fr);
text-align: center;
line-height: 1.4; }
.monster .monster-abilities .label {
color: #9a1515;
display: block;
text-transform: uppercase; }
.monster ul {
list-style: none;
padding: 0;
margin-bottom: 0; }
.monster ul .label {
color: #9a1515; }
.monster ul li > p {
margin: 0; }
.monster p {
margin-bottom: 0; }
.monster p + * {
margin-top: 0.57em; }
.monster .monster-trait + *,
.monster .monster-action + *,
.monster .monster-reaction + *,
.monster .monster-legendary-action + *,
.monster .monster-lair-action + * {
margin-top: 0.57em; }
.monster .monster-trait p + *,
.monster .monster-action p + *,
.monster .monster-reaction p + *,
.monster .monster-legendary-action p + *,
.monster .monster-lair-action p + * {
margin-top: 0.57em; }
.monster .monster-trait .name,
.monster .monster-action .name,
.monster .monster-reaction .name,
.monster .monster-legendary-action .name,
.monster .monster-lair-action .name {
font-weight: bold;
font-style: italic; }
.monster .monster-trait > :last-child,
.monster .monster-action > :last-child,
.monster .monster-reaction > :last-child,
.monster .monster-legendary-action > :last-child,
.monster .monster-lair-action > :last-child {
margin-bottom: 0; }
.monster .lair-initiative,
.monster .legendary-per-round,
.monster .paragon-actions {
font-size: 0.8em;
font-style: italic; }
.monster .monster-notes + * {
margin-top: 0.57em; }
.monster hr + .h5-border {
display: none; }
.monster .monster-footer {
font-style: italic;
opacity: 0.5;
font-size: 0.8em; }
.monster .line-break {
display: block;
height: 0.57em; }
.monster .h5-border {
min-height: 1px;
height: 0.0714em;
background: linear-gradient(to right, rgba(154, 21, 21, 0.75), rgba(154, 21, 21, 0));
display: block;
margin-top: 0;
margin-bottom: 0.52em; }
.monster .h5-border.notes {
margin-top: 0.52em;
height: 0.2143em; }
@media screen and (max-width: 459px) {
.monster.columns-1 {
font-size: 0.75rem; } }
.monster.columns-2 {
width: 55em;
font-size: 0.85rem; }
@media screen and (max-width: 1200px) {
.monster.columns-2 {
font-size: 0.75rem; } }
@media screen and (max-width: 1095px) {
.monster.columns-2 {
font-size: 0.6rem; } }
@media screen and (max-width: 980px) {
.monster.columns-2 {
font-size: 0.5rem; } }
@media screen and (max-width: 880px) {
.monster.columns-2 {
font-size: 0.45rem; } }
@media screen and (max-width: 800px) {
.monster.columns-2 {
font-size: 0.7rem; } }
@media screen and (max-width: 680px) {
.monster.columns-2 {
font-size: 0.6rem; } }
@media screen and (max-width: 580px) {
.monster.columns-2 {
font-size: 0.5rem; } }
@media screen and (max-width: 490px) {
.monster.columns-2 {
font-size: 0.4rem; } }
@media screen and (max-width: 410px) {
.monster.columns-2 {
font-size: 0.35rem; } }
@media screen and (max-width: 400px) {
.monster.columns-2 {
font-size: 0.5rem; } }
@media screen and (max-width: 380px) {
.monster.columns-2 {
font-size: 0.45rem; } }
@media screen and (max-width: 350px) {
.monster.columns-2 {
font-size: 0.38rem; } }
.monster.columns-2 .monster-contents-body {
column-count: 2;
column-gap: 1.42em; }
.monster .h5-traits {
display: none; }
.monster .h5-traits + .h5-border {
display: none; }
.monster .h5-traits + .h5-border + .monster-trait {
margin-top: 0.57em; }
.monster.theme-5e .monster-contents-body {
background: url("https://i.imgur.com/wAhINL9.jpg"); }
.monster.theme-5e .monster-contents-header,
.monster.theme-5e .monster-contents-footer {
height: 0.4em;
min-height: 3px;
background: #bd9b4c;
border: 1px solid black;
border-left: 0;
border-right: 0;
width: 100%;
background-image: linear-gradient(45deg, #bd9b4c 25%, #b38720 25%, #b38720 50%, #bd9b4c 50%, #bd9b4c 75%, #b38720 75%, #b38720 100%);
background-size: 5px 5px; }
.monster.theme-transparent {
box-shadow: none; }
.monster.theme-transparent .monster-contents-body {
background: none; }
.monster.theme-giffyglyph {
box-shadow: none; }
.monster.theme-giffyglyph .h5-traits {
display: block; }
.monster.theme-giffyglyph ul {
padding: 0 !important;
margin-left: 1em;
margin-right: 1em;
border-radius: 0.5em;
flex-direction: column;
width: calc(100% - 2em);
border: 1px dotted rgba(88, 24, 13, 0.1);
overflow: hidden; }
.monster.theme-giffyglyph ul li {
display: flex;
width: 100%; }
.monster.theme-giffyglyph ul li:not(:last-child) {
border-bottom: 1px dotted rgba(88, 24, 13, 0.1); }
.monster.theme-giffyglyph ul li p {
width: 100%;
display: inline-flex; }
.monster.theme-giffyglyph ul li p .label {
font-family: "Alegreya Sans SC", sans-serif;
margin-right: 0.5em;
text-align: right;
display: inline-block;
width: 10.75em;
flex-shrink: 0;
font-size: 0.8em;
line-height: 1.9;
background: rgba(88, 24, 13, 0.05);
padding-right: 0.5em; }
.monster.theme-giffyglyph ul li p .label + span {
display: inline-block;
width: 100%;
padding-right: 0.5em; }
.monster.theme-giffyglyph hr {
display: none; }
.monster.theme-giffyglyph hr + * {
margin-top: 0.5em; }
.monster.theme-giffyglyph hr:first-of-type + * {
margin-top: 1em; }
.monster.theme-giffyglyph .quickstart-helpers {
margin-top: 0.5em; }
.monster.theme-giffyglyph .monster-contents-body {
padding: 0;
border-radius: 1em;
overflow: hidden;
box-shadow: 0px 5px 10px 0px #50576240; }
.monster.theme-giffyglyph .monster-contents-body .monster-header {
background: #58180d;
color: #FFFFFF;
padding: 0.75em 1em 0.5em; }
.monster.theme-giffyglyph .monster-contents-body .monster-header > * {
z-index: 1;
position: relative; }
.monster.theme-giffyglyph .monster-contents-body .monster-header h4 {
color: #FFFFFF; }
.monster.theme-giffyglyph .monster-contents-body > * {
padding-left: 1em;
padding-right: 1em; }
.monster.theme-giffyglyph .monster-abilities {
column-gap: 0.25em;
margin-top: 0.5em;
margin-bottom: 0; }
.monster.theme-giffyglyph .monster-stats + hr + *:not(.quickstart-helpers) {
margin-top: 0.5em !important; }
.monster.theme-giffyglyph .h5-border {
display: none; }
.monster.theme-giffyglyph .quickstart-helpers li {
display: flex; }
.monster.theme-giffyglyph h5 {
content: "Traits";
background: rgba(88, 24, 13, 0.1);
display: block;
margin: 0 0.65em 0.3em;
font-weight: bold;
color: #9a1515;
font-family: "Alegreya Sans SC", sans-serif;
display: inline-block;
width: calc(100% - 1.3em);
padding: 0 0.5em !important;
border-radius: 0.3em;
line-height: 1.5; }
.monster.theme-giffyglyph h5 > * {
font-size: 1.45em; }
.monster.theme-giffyglyph .monster-ability {
background: rgba(88, 24, 13, 0.1);
padding: 0.4em 0;
border-radius: 0.5em; }
.monster.theme-giffyglyph .monster-footer {
padding-bottom: 1.4em; }
.monster.theme-giffyglyph .monster-image.banner {
background: #FFFFFF;
border-radius: 0.5em 0.5em 0 0;
overflow: hidden;
border-bottom: 0;
z-index: 1; }
.monster.theme-giffyglyph .monster-image.banner + .monster-contents .monster-contents-body {
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0; }
.monster.theme-giffyglyph.columns-2 .monster-contents-body {
padding-top: 1em;
padding-bottom: 1em;
column-gap: 0; }
.monster.theme-giffyglyph.columns-2 .monster-header {
border-radius: 0.5em;
margin-left: 1em;
width: calc(100% - 2em); }
.monster.theme-giffyglyph.columns-2 .monster-footer {
padding-bottom: 0; }
.monster.theme-giffyglyph.columns-2 hr:first-of-type + * {
margin-top: 0.5em; }
.panel {
box-shadow: 0px 5px 10px 0px #505762; }
.vault > .card-header {
padding-right: 0.75rem; }
.vault > .card-body {
padding: 0; }
.vault > .card-footer {
padding-left: 0.75rem;
padding-right: 0.75rem; }
.vault #vault-import-file,
.vault #vault-import-srd {
display: none; }
.vault .dataTables_wrapper {
display: flex;
flex-direction: column; }
.vault .dataTables_wrapper .top {
display: flex;
justify-content: space-between;
padding: 0.325rem 0.75rem;
background: #eef0f2;
border-radius: 0;
border-bottom: 0.25rem solid #da3737; }
.vault .dataTables_wrapper .top .dataTables_length {
min-width: 7rem;
margin-right: 0.75rem; }
.vault .dataTables_wrapper .top label {
margin: 0;
position: relative;
width: 100%; }
.vault .dataTables_wrapper .top label input {
padding-right: 1.6rem; }
.vault .dataTables_wrapper .top label input,
.vault .dataTables_wrapper .top label select {
border-radius: 1cm;
font-size: inherit;
line-height: inherit;
padding-top: 0;
padding-bottom: 0;
height: auto;
width: 100%;
box-sizing: border-box;
margin: 0; }
.vault .dataTables_wrapper .top .dataTables_filter {
flex-grow: 1;
margin-right: 0;
text-align: right; }
.vault .dataTables_wrapper .top .dataTables_filter label {
max-width: 16rem; }
.vault .dataTables_wrapper .top .dataTables_filter label::after {
font-family: "Font Awesome 5 Free";
content: "\f002";
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
position: absolute;
right: 0.75rem;
font-weight: 900;
color: #666f7f;
line-height: inherit; }
.vault .dataTables_wrapper .content {
overflow: hidden; }
.vault .dataTables_wrapper table {
margin: 0 !important;
width: 100% !important;
table-layout: fixed; }
.vault .dataTables_wrapper table tbody tr:hover {
background: #eef0f2;
cursor: pointer; }
.vault .dataTables_wrapper table td,
.vault .dataTables_wrapper table th {
box-sizing: border-box; }
.vault .dataTables_wrapper table td {
padding: 0; }
.vault .dataTables_wrapper table th {
background: #eef0f2;
padding-top: 0.325rem;
padding-bottom: 0.325rem; }
.vault .dataTables_wrapper table th:not(:first-child) {
border-left: 1px solid #dee2e6; }
.vault .dataTables_wrapper table th::before, .vault .dataTables_wrapper table th::after {
bottom: 0.4em;
right: 0.5em;
font-family: "Font Awesome 5 Free";
color: #da3737; }
@media screen and (max-width: 400px) {
.vault .dataTables_wrapper table th::before, .vault .dataTables_wrapper table th::after {
bottom: 0.25em; } }
.vault .dataTables_wrapper table th::before {
content: "\f884"; }
.vault .dataTables_wrapper table th::after {
content: "\f160"; }
.vault .dataTables_wrapper table .sorting::after,
.vault .dataTables_wrapper table .sorting_asc::after,
.vault .dataTables_wrapper table .sorting_desc::before {
opacity: 0; }
.vault .dataTables_wrapper table .sorting::before {
opacity: 0.1;
color: inherit; }
.vault .dataTables_wrapper table .col-id {
width: 4rem;
text-align: center; }
.vault .dataTables_wrapper table .col-ac {
width: 4rem;
text-align: center; }
.vault .dataTables_wrapper table .col-hp {
width: 5rem;
text-align: center; }
.vault .dataTables_wrapper table .col-level {
width: 4rem;
text-align: center; }
.vault .dataTables_wrapper table .col-role {
width: 6rem; }
.vault .dataTables_wrapper table .col-rank {
width: 5.75rem; }
.vault .dataTables_wrapper table .col-cr {
width: 4rem;
text-align: center; }
.vault .dataTables_wrapper table .col-description,
.vault .dataTables_wrapper table .col-role-rank,
.vault .dataTables_wrapper table .col-ac-hp {
overflow: hidden;
width: 0; }
.vault .dataTables_wrapper table .dataTables_empty {
padding: 0.5rem 0.75rem; }
@media screen and (max-width: 800px) {
.vault .dataTables_wrapper table .col-ac,
.vault .dataTables_wrapper table .col-hp,
.vault .dataTables_wrapper table .col-role,
.vault .dataTables_wrapper table .col-rank {
overflow: hidden !important;
width: 0;
padding: 0 !important;
border-right: none !important; } }
.vault .dataTables_wrapper table .table-card {
display: flex;
flex-direction: row; }
.vault .dataTables_wrapper table .table-card .col-id {
text-align: center;
flex-shrink: 0;
font-weight: bold; }
.vault .dataTables_wrapper table .table-card .col-name {
white-space: normal;
flex-grow: 1; }
.vault .dataTables_wrapper table .table-card .col-name .name {
margin: 0;
font-weight: bold; }
.vault .dataTables_wrapper table .table-card .col-name .role {
font-size: 0.7em;
font-style: italic;
opacity: .75;
margin: 0.25em 0 0; }
.vault .dataTables_wrapper table .table-card .col-name .role .fas {
opacity: .5; }
.vault .dataTables_wrapper table .table-card .col-name .role:not(.rank-solo) .players {
display: none; }
.vault .dataTables_wrapper table .table-card .col-name .details,
.vault .dataTables_wrapper table .table-card .col-name .stats {
font-size: 0.7em;
font-style: italic;
opacity: .75;
margin: 0; }
.vault .dataTables_wrapper table .table-card .col-hp::after {
font-family: "Font Awesome 5 Free";
content: " \f004";
color: #da3737; }
.vault .dataTables_wrapper table .table-card .col-id,
.vault .dataTables_wrapper table .table-card .col-name,
.vault .dataTables_wrapper table .table-card .col-ac,
.vault .dataTables_wrapper table .table-card .col-hp,
.vault .dataTables_wrapper table .table-card .col-level,
.vault .dataTables_wrapper table .table-card .col-role,
.vault .dataTables_wrapper table .table-card .col-rank,
.vault .dataTables_wrapper table .table-card .col-cr {
padding: 0.5rem 0.75rem;
overflow: hidden;
text-overflow: ellipsis; }
.vault .dataTables_wrapper table .table-card .col-id:not(:last-child),
.vault .dataTables_wrapper table .table-card .col-name:not(:last-child),
.vault .dataTables_wrapper table .table-card .col-ac:not(:last-child),
.vault .dataTables_wrapper table .table-card .col-hp:not(:last-child),
.vault .dataTables_wrapper table .table-card .col-level:not(:last-child),
.vault .dataTables_wrapper table .table-card .col-role:not(:last-child),
.vault .dataTables_wrapper table .table-card .col-rank:not(:last-child),
.vault .dataTables_wrapper table .table-card .col-cr:not(:last-child) {
border-right: 1px dotted #eef0f2; }
.vault .dataTables_wrapper table .table-card .col-description,
.vault .dataTables_wrapper table .table-card .col-role-rank,
.vault .dataTables_wrapper table .table-card .col-ac-hp {
overflow: hidden;
width: 0; }
.vault .dataTables_wrapper table .table-card .col-ac,
.vault .dataTables_wrapper table .table-card .col-hp,
.vault .dataTables_wrapper table .table-card .col-level,
.vault .dataTables_wrapper table .table-card .col-role,
.vault .dataTables_wrapper table .table-card .col-rank,
.vault .dataTables_wrapper table .table-card .col-cr {
flex-shrink: 0; }
.vault .dataTables_wrapper table .table-card .col-rank:not(.rank-solo) .players {
display: none; }
.vault .dataTables_wrapper table .table-card.method-manual .role {
display: none; }
@media screen and (min-width: 801px) {
.vault .dataTables_wrapper table .table-card .role {
display: none; } }
.vault .dataTables_wrapper .bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.325rem 0.75rem;
background: #eef0f2;
border-radius: 0;
border-top: 0.25rem solid #da3737; }
.vault .dataTables_wrapper .bottom .dataTables_info {
padding: 0;
text-overflow: ellipsis;
overflow: hidden;
margin-right: 0.75rem;
white-space: normal; }
.vault .dataTables_wrapper .bottom .pagination {
margin: 0; }
@media screen and (max-width: 800px) {
.vault .dataTables_wrapper .bottom {
flex-direction: column; }
.vault .dataTables_wrapper .bottom .dataTables_info {
margin-bottom: 0.25rem;
margin-right: 0; } }
.vault .dataTables_wrapper .page-link {
color: #da3737;
background-color: white;
border: 1px solid white;
border: none;
border-radius: 1cm;
min-width: 2.2rem;
line-height: 1.2;
text-align: center;
font-weight: bold; }
.vault .dataTables_wrapper .page-item.active .page-link {
background-color: #da3737;
border-color: #da3737;
color: #FFFFFF; }
.vault .dataTables_wrapper .page-item.disabled .page-link {
color: rgba(0, 0, 0, 0.25);
background: #dee2e6;
border: 1px solid #dee2e6; }
.vault .dataTables_wrapper .page-item:not(:first-child) .page-link {
margin-left: 2px; }
.vault .dataTables_wrapper .page-item:first-child .page-link, .vault .dataTables_wrapper .page-item:last-child .page-link {
border-radius: 100%; }
.vault.edit > .card-body {
padding: 0;
display: grid;
grid-template-columns: 1fr 380px; }
@media screen and (max-width: 840px) {
.vault.edit > .card-body {
grid-template-columns: 1fr 344px; } }
@media screen and (max-width: 800px) {
.vault.edit > .card-body {
grid-template-columns: 1fr;
grid-template-rows: auto auto; } }
.vault.edit > .card-footer {
display: flex;
justify-content: space-between; }
.vault.edit #monster-import-file {
display: none; }
.vault.edit .monster-blueprint {
background: #dee2e6; }
/*# sourceMappingURL=monstermaker.1.0.3.3.css.map */