/*FONTS*/

@font-face {
    /*Títulos*/
    font-family: "Jockeyone";
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    src: url("../fonts/JockeyOne-Regular.otf");
}

@font-face {
    /*Texto*/
    font-family: "Roboto";
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url("../fonts/Roboto-Regular.ttf");
}

* {
    font-family: "Roboto", sans-serif;
    letter-spacing: 0.07em;
}

h1,
h2 {
    font-family: "Jockeyone", sans-serif;
    letter-spacing: 0.07em;
}

body {
    width: 100%;
    min-height: 100vh;
    padding: 0 !important;
    background-color: #1a1237 !important;
    /* background-color: #121d3a !important; */
    background-image: url("../img/backStars.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top center;
}

body[class="modal-open"] {
    /*padding: 0  !important;*/
    width: 100% !important
}

body,
html {
    text-rendering: optimizeLegibility;
    text-rendering: geometricPrecision;
    font-smooth: always;
    font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
}


/* #description-overlay{display: none;}
#description-overlay.show-pop{
  display: block;
  position: absolute;
  background-color: red;
  z-index: 10;
} */

.text-wrap {
    white-space: normal !important;
}

#menu-adjust {
    height: 56px
}

#main-nav {
    background-color: #1d0d05 !important;
    color: #bf361e;
    border-bottom: 3px solid #b34229
}

#main-nav a {
    color: #dbcfbf;
    font-size: 1.1em;
    text-shadow: 0px 0px 3px #bf361f;
    font-weight: bold;
}

#main-nav a:hover {
    color: #ffde00;
}

#main-nav .navbar-brand img {
    height: 30px;
    margin-top: -10px;
}

.nav-link,
.kros-title {
    font-family: "Jockeyone", sans-serif;
    letter-spacing: 0.07em;
    display: block;
    font-weight: bold;
    color: white;
    width: 100%
}

.kList,
.filters {
    background-color: #1d0d0577;
    border: 10px solid transparent;
    border-radius: 10px 10px 0 0;
    color: #e3c489;
    margin-top: 3em;
}

.row.filters {
    margin-top: 0;
}

.kList a {
    color: #e3c489;
}

.season-title {
    color: white;
    text-shadow: 2px 1px 1px #9b2b19;
    padding: 15px;
    font-size: 1.5em;
    background-color: #ff8400;
    border-radius: 10px 10px 0 0;
    text-transform: uppercase;
    background-image: url("../img/headerRocks.png");
    background-position: top right;
    background-size: 50%;
    background-repeat: no-repeat;
}

.edition-title {
    color: #f3d992;
    text-shadow: 2px 1px 1px #9b2b19;
    font-size: 1.2em;
    padding: 10px;
    padding-left: 15px;
    background-color: #270901;
    cursor: pointer;
    border: 1px solid #1d0d05;
    border-bottom: none;
    background-image: url("../img/headerDarkRocks.jpg");
    background-size: 45% 100%;
    background-position: left;
    background-repeat: no-repeat;
}

.kros-container {
    height: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    transition: all 0.8s;
}

.kros-container-open {
    height: auto;
    padding: 10px 0;
}

.kros-container ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

.kros-container ol li {
    font-weight: bold;
    position: relative;
    border-bottom: 1px solid;
    padding: 10px;
}

.kros-container ol li:first-of-type {
    border-top: 1px solid;
}

.profile-attr {
    position: absolute;
    right: 0;
    top: 2px
}

.p-attr {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /* margin-top: -8px; */
    width: 40px;
    height: 40px;
    color: white;
    font-weight: bolder;
    text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black;
}


/*[PROFILE STYLE]*/

#secretData {
    display: none;
}

.profile-container {
    margin-top: 3em;
    border-radius: 10px;
    background-color: #1d0d0577;
}

#profile {
    position: relative;
    margin: 1em;
    /* background-image: url("../img/cardback.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%; */
    border-radius: 10px;
    border: 8px solid black;
    width: 100%;
    max-width: calc(100vw - 2em);
}

#figurine {
    position: absolute;
    top: 0;
    right: 0;
    max-height: 165px;
    z-index: 2;
    border: 3px solid #415d5f;
    border-radius: 0 0 0 50px;
    background-color: white;
    border-color: linear-gradient(to bottom, rgba(65, 93, 95, 1) 0%, rgba(97, 149, 143, 1) 14%, rgba(97, 149, 143, 1) 85%, rgba(65, 93, 95, 1) 100%);
}

#figurine img {
    max-width: 110px;
}

#KrosLvl {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 3;
    background-image: url("../img/common/icon-lvl.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 40px;
    height: 40px;
}

#KrosLvl span {
    position: absolute;
    color: white;
    font-weight: bolder;
    font-size: 1.2em;
    text-shadow: 0 0 4px #ac4920, 0 0 4px #ac4920, 0 0 4px #ac4920, 0 0 4px #ac4920;
}

#KrosName {
    padding: 10px;
    color: white;
    font-weight: bolder;
    background-color: #61958f;
    background: linear-gradient(to bottom, rgba(65, 93, 95, 1) 0%, rgba(97, 149, 143, 1) 14%, rgba(97, 149, 143, 1) 85%, rgba(65, 93, 95, 1) 100%);
    text-transform: uppercase;
    /* text-shadow: 0 0 4px #415d5f,0 0 4px #415d5f,0 0 4px #415d5f,0 0 4px #415d5f; */
}

#KrosClass {
    padding: 5px 110px 5px 10px;
    color: white;
    font-weight: bolder;
    background-color: white;
    background: linear-gradient(to bottom, rgba(149, 171, 171, 1) 0%, rgba(252, 255, 255, 1) 14%, rgba(252, 255, 255, 1) 85%, rgba(149, 171, 171, 1) 100%);
}

#KrosClass a {
    color: black
}

#KrosClass a::after {
    content: " -"
}

#KrosClass a:last-of-type::after {
    content: ""
}

#attributes {
    position: relative;
    display: flex;
    margin: 20px 110px 20px 0;
}

#attributes #KrosInit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bolder;
    text-shadow: 0 0 4px #ac4920, 0 0 4px #ac4920, 0 0 4px #ac4920, 0 0 4px #ac4920, 0 0 4px #ac4920, 0 0 4px #ac4920;
    background-image: url("../img/common/icon-ini.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 45px;
    height: 45px;
}

#attributes #MP {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bolder;
    text-shadow: 0 0 4px #5c8208, 0 0 4px #5c8208, 0 0 4px #5c8208, 0 0 4px #5c8208, 0 0 4px #5c8208, 0 0 4px #5c8208;
    background-image: url("../img/common/icon-pm.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 70px;
    height: 70px;
    font-size: 2em;
}

#attributes #HP {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bolder;
    text-shadow: 0 0 4px #912c28, 0 0 4px #912c28, 0 0 4px #912c28, 0 0 4px #912c28, 0 0 4px #912c28, 0 0 4px #912c28;
    background-image: url("../img/common/icon-pv.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 70px;
    height: 70px;
    font-size: 2em;
}

#attributes #AP {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bolder;
    text-shadow: 0 0 4px #2d8f9b, 0 0 4px #2d8f9b, 0 0 4px #2d8f9b, 0 0 4px #2d8f9b, 0 0 4px #2d8f9b, 0 0 4px #2d8f9b;
    background-image: url("../img/common/icon-pa.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 70px;
    height: 70px;
    font-size: 2em;
}

#attributes #AP,
#attributes #MP,
#attributes #HP {
    background-size: 90% 90%;
    background-position: center;
}

.spell {
    margin: 5px;
    background-color: #333333;
    color: white;
    border-radius: 0 28px 0 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.spell-type {
    display: inline-flex;
    justify-content: center;
    align-items: flex-end;
    height: min-content;
    position: relative;
}

.spell-type img {
    width: 60px;
}

.spell-type span {
    position: absolute;
    font-weight: bold;
    text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black;
    letter-spacing: 4px;
}

.spell-descr {
    width: -moz-available;
    width: -webkit-fill-available;
    position: relative;
}

.spell-descr .spell-name {
    font-weight: bolder;
    font-family: Jockeyone, sans-serif;
    font-size: 1.2em;
    padding: 0 10px;
    padding-right: 30px;
    border-radius: 0 25px 25px 0;
}

.spell-descr .spell-effects {
    margin: 4px 10px;
}

.spell-descr .spell-costs {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: end;
}

.spell-descr .cost-type {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    font-weight: bolder;
    margin-left: 8px;
    text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black;
}

.spell-descr .cost-type::after {
    content: " + ";
    position: absolute;
    right: -10px;
    z-index: 1;
}

.spell-descr .cost-type:last-of-type::after {
    content: ""
}

.spell-power {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px;
    margin: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spell-power span {
    position: absolute;
    font-size: 2.5em;
    font-weight: bolder;
    text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black;
}

#description {
    margin: 5px;
    background-color: #333333;
    color: white;
    border-radius: 0 28px 0 0;
    padding: 10px;
}

#description span.lore-title {
    float: left;
    width: 100%;
    margin: -10px 0 0 -10px;
    padding-left: 10px;
    font-weight: bolder;
    background-color: black;
    font-family: Jockeyone, sans-serif;
    font-size: 1.2em;
    display: block;
    border-radius: 0 20px 20px 0;
}

#powers {
    margin: 5px;
    background-color: #333333;
    color: white;
    border-radius: 0 28px 0 0;
}

#powers #powers-title,
.extras-head {
    color: white;
    width: 100%;
    padding: 0 10px;
    font-weight: bolder;
    display: block;
    background-color: black;
    font-family: Jockeyone, sans-serif;
    font-size: 1.2em;
}

#powers #powers-title {
    font-weight: bolder;
    background-color: black;
    font-family: Jockeyone, sans-serif;
    font-size: 1.2em;
}

#powers>#powers-title>span {
    display: block;
    padding: 0 10px;
}

#powers>span {
    display: block;
    padding: 0 10px;
}

#extras {
    background-color: #333333 !important;
    width: 100%;
    margin: 1em;
    border-radius: 10px;
}

.imageList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.imageList .extra-image {
    border: 0 solid black;
    border-radius: 15px;
    object-fit: contain;
}

.extra-image,
.summon-image {
    margin: 1em;
    max-width: calc(100vw - 2em);
    max-height: 450px;
}

.t-format {
    display: inline-block;
    width: calc(50% - 3px);
    text-align: center;
    font-weight: bold;
    margin: 10px 0;
}

.row.filters span {
    display: block;
    width: 100%;
    text-align: center;
}

.slider.slider-horizontal {
    width: calc(100% - 2em) !important;
    margin: 0 1em;
}

#eternal-slider {
    width: 50% !important;
}

#filter-cross {
    display: inline !important;
    width: auto !important;
}

#filters form,
#filters #f-results {
    display: none;
}

#filters>.kros-title {
    cursor: pointer;
}

#gridContainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#gridContainer #canvas-container canvas {
    max-width: 100% !important;
    /* max-height: 1400px !important; */
    margin-bottom: 15px;
    border-radius: 15px;
    width: auto !important;
    height: auto !important;
    /* object-fit: fill !important; */
}

.mainP {
    width: calc(100% - 6rem) !important;
    min-height: calc(100vh - 235px) !important;
}

.mainP-content {
    background-color: #1d0d05;
    border-radius: 10px;
    padding: 0 !important;
}

.mainP-content .text-content {
    padding: 1.5em;
    color: #c2b086;
}


/* #profile a{pointer-events: none;} */

#profile a {
    display: inline-block;
}

#main-footer {
    margin-top: 3em;
    color: #dbcfbf;
    background-color: #1d0d05 !important;
    border-top: 3px solid #b34229;
    padding: 1em;
}

#printOverlay {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bolder;
    bottom: 10px;
    right: 10px;
    background-color: #ff8400;
    font-size: 2em;
    color: white;
    border-radius: 100%;
    height: 2em;
    width: 2em;
    box-shadow: inset 3px 3px 3px rgba(255, 255, 255, .4), inset -2px -2px 3px rgba(0, 0, 0, .1), 2px 2px 10px rgba(0, 0, 0, .1);
    cursor: pointer;
}

#canvasParent {
    position: relative;
    display: flex;
    width: 100%;
    padding: 0 20%;
    justify-content: center;
    align-items: center;
    margin-top: 2em;
}

#pageCanv {
    position: relative;
    margin: auto;
}

#pageCanv {
    background-color: white;
    /*background-image: url("../img/loading-elipsis.gif");*/
    background-repeat: no-repeat;
    background-position: center;
}

#canvasParent::after {
    content: "Please Wait";
    position: absolute;
    text-align: center;
    margin: auto;
    color: #1d0d05;
    z-index: 99;
    display: block;
    font-family: "Jockeyone", sans-serif;
    text-shadow: 0px 0px 3px #bf361f;
    font-size: 2.2em;
    margin-top: -100px;
}

#pdfPB {
    position: absolute;
    text-align: center;
    margin: auto;
    color: #1d0d05;
    z-index: 100;
    display: block;
    font-family: "Jockeyone", sans-serif;
    font-size: 2.2em;
    /* margin-top: -100px; */
    width: 50%;
}

#pdfPB>div {
    height: 40px;
    font-size: large;
}

#pdfPB>.progress>.progress-label {
    position: absolute !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 101;
    width: 100%;
    height: 100%;
    text-align: center;
    color: white;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
}

#printOverlay img {
    width: 80%;
}

#printOverlay span {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    bottom: 3px;
    right: 3px;
    color: white;
    background-color: #44444444;
    padding: 0.2em;
    border-radius: 1.1em;
    height: 1em;
    min-width: 1em;
}

#printOverlay.active {
    background-color: #d27816;
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .4), inset 3px 3px 3px rgba(0, 0, 0, .1), 2px 2px 10px rgba(0, 0, 0, .1);
}

#printOverlay.active img {
    opacity: .8;
}

.krosToggle {
    background-color: #1d0d05;
}

.krosToggle .toggle-handle {
    border: 1px solid dimgray;
    background-color: #e3c489;
}

@media (max-width: 768px) {
    .p-attr {
        width: 25px;
        height: 25px;
    }
}