@import "https://fonts.googleapis.com/css?family=Montserrat:400,500,700,800";
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

body {
    background: url(http://wallup.net/wp-content/uploads/2016/04/10/159459-fantasy_art.jpg) black;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    padding: 5px;
    max-width: 600px;
    margin: auto;
    color: black;
    font-family: sans-serif;
    font-size: 12px;
    opacity: 0.95;
    scroll-behavior: smooth;
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}


.logo{
    max-width: 300px;
    border-radius: 3px;
    border: 3px double black;
    border-image: linear-gradient(to bottom, #131313, #457184, #131313) 1 5%;
    border-radius: 20px;
    box-shadow: 2px 2px 5px 2px #00000059;
    margin-top: 10px;
}

.update-border-box {
    border: 8px solid transparent;
    /* border-image-source: url(https://www.freeiconspng.com/uploads/decorative-gold-border-png-image-20.png); */
    border-image-slice: 380;
    border-image-repeat: stretch;
    border-image-width: 12;
    padding:5px;
}
.update-border-box h3{
    color: #dcac54;
    /* text-shadow: 0px 0px 8px #dac538a6; */
}

.form-container {
    /* border: 1px solid #29b5df3b; */
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px;
    margin: 2px;
    background-size: cover;
    background-blend-mode: multiply;
    /* box-shadow: inset 0 0 15px 20px #ffffff0f; */
}
.form-container.login-form{
    background: radial-gradient(#002b43b0, #00aaffcf), url(../images/background/login-main-scenery.gif);
    background-size: cover;

}
.form-container.registration-form {
    background: radial-gradient(#002b43b0, #00aaffcf), url(https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/1815340/extras/Jivana_BeautyShot_V2.gif?t=1642936696);
    background-size: cover;
    background-position: center;
}
.form-container input {
    background: #ffffff33;
    border: 0px;
    margin: 8px 0;
    max-width: unset;
    width: 100%;
    display: block;
    color: #f1f1f1;
    border:1px solid transparent;
}

.form-container input::placeholder {
    color: rgba(255, 255, 255, 0.671);
    opacity: 1; 
}
  
.form-container input::-ms-input-placeholder { 
    color: rgba(255, 255, 255, 0.671);
}

.form-container input[type="submit"] {
    background: #c4b46dc7;
    color: #efebeb;
    transition: .5s;
}
.form-container input[type="submit"]:hover {
    background: #e6ce67c7;
    color: white;
    text-shadow: 0 0 5px #ffffffcf;
    box-shadow: inset -2px -2px 4px 0px #0000006b;
}
.form-container input.errorI {
    border:1px solid red;
}
#recaptcha.errorI {
    border:1px solid red;
    border-radius: 4px;
}
.form-container .error{
    color:red !important;
    background: none !important;
    font-weight: 600 !important;
    padding:2px !important;
}
.print-error{
    color: red;
    /* background: #00000066; */
    padding: 2px;
    font-weight: 600;
    width: max-content;
}
.print-success{
    color:lightgreen;
    font-weight: 600;
    padding:2px;
}
.select-method-panel {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: -2px;
}
a.panel {
    background: #1d4057;
    padding: 8px;
    border-radius: 7px 0 0 0;
    width: 150px;
    text-align: center;
    border: 1px solid transparent;
    border-right: 1px solid white;
    border-bottom: 0;
}
a.panel:nth-last-child(1){
    border-left:0 !important;
    border-radius: 0 7px 0 0;
    border-right:0;
}
a.panel.active {
    background: none;
    border: 1px solid #ffffff7d;
    border-bottom: 0;
    pointer-events: none;
    box-shadow: 0px -2px 6px 1px #ffffff29;
}
.label-form {
    width: max-content;
    text-align: center;
    border-bottom: 1px solid #ffffffdb;
    margin: 8px auto;
    color: #ffffffdb;
}
.status-info {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.status-info div {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0;
    /* border-bottom: 1px dashed #ffffff0a; */
    background: #00000014;
    padding: 6px;
    border-radius: 5px;
}
conter {
    color: #f7cf58;
    font-weight: bold;
    margin-left: 5px;
    font-size: 14px;
}

.inventory {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.item {
    border-radius: 10px;
    background: #ceb4ac7a;
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position:relative;
    border:2px solid;
}
.item-count {
    position: absolute;
    bottom: -1px;
    right: -1px;
    background: #2f2c2c96;
    padding: 2px 5px;
    border-radius: 50px;
    font-size: 10px;
    font-family: monospace;
    color: #fdfdfcc2;
}

.tooltip {

}

.item-info {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    max-width: 300px;
    height: max-content;
    max-height: 350px;
    background: #11222b;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    border-radius: 10px;
    border: 2px solid #5a899b14;
    z-index: 9999;
}
span.item-info-header {
    font-size: 14px;
    padding: 10px;
    background: #0000001c;
    display: block;
    width: 100%;
    text-align: center;
    font-weight: bold;
    position: absolute;
    top: 0;
    border-radius: 6px 6px 0 0;
    /* border-bottom: 2px solid #ffffff36; */
    color: navajowhite;
}
.item-holder {
    width: 45px;
    height: 45px;
    background: linear-gradient(to bottom, #061a19, #163b38);
    background: #5b58489c;
    border-radius: 6px;
    /* border: 2px solid #28897757; */
    margin: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #fffcfc26;
    box-shadow: 3px 3px 4px 2px #00000061;
}
.helmet{
    background-image: url(../images/inventory/helmet.jpg);
    background-size: 40px;
}
.armor{
    background-image: url(../images/inventory/armor.jpg);
    background-size: 40px;
}
.sword {
    background-image: url(../images/inventory/sword.jpg);
    background-size: 40px;
}
.leggings{
    background-image: url(../images/inventory/leggings.jpg);
    background-size: 40px;
}
.necklace {
    background-image: url(../images/inventory/necklace.jpg);
    background-size: 42px;
}
.ring {
    background-image: url(../images/inventory/ring.jpg);
    background-size: 40px;
}
.shield {
    background-image: url(../images/inventory/shield.jpg);
    background-size: 40px;
}
.boots {
    background-image: url(../images/inventory/boots.jpg);
    background-size: 40px;
}
.empty {
    background-image: url(../images/inventory/empty.jpg);
    background-size: 40px;
}
.table {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.table .row {
    flex: 1 0 30%;
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    min-height: 212px;
}
.table-x {
    display: flex;
    
}
.table-x .row-x{
    flex:1 0 50%;

}
.table-x.missions .row-x{
    flex: 1 1 50%;
    padding: 10px 5px;
    margin: 10px 0px;
}
.table-x.missions .row-x:first-child{
    border-right: 1px solid  #0973a870;
}
.t-heading{
    border-bottom: 1px solid #0973a870;
    margin-bottom: 6px;
    font-family: 'Montserrat';
    background: linear-gradient(to right, #008fff, #1bff00);
    -webkit-background-clip: text;
    color: transparent;
    display: block;
}
.group-buttons {
    display: flex;
    width: 96%;
    gap: 4px;
    margin-top: 20px;
    justify-content: center;
    margin-bottom: 10px;
}

.group-buttons a.inventory-btn {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 3px;
    -webkit-transition: background-color .25s ease-out, color .25s ease-out;
    transition: background-color .25s ease-out, color .25s ease-out;
    font-family: inherit;
    -webkit-appearance: none;
    line-height: 0;
    text-align: center;
    cursor: pointer;
    background-color: #6e7f91;
    color: #fefefe;
    font-family: 'Montserrat';
    font-weight: 400;
    font-size: 12px;
    text-decoration: none;
    padding: 20px 8px;
    border-radius: 91% 9% 80% 8% / 25% 80% 14% 42%;
    text-shadow: 2px 2px 1px black;
    border: 0;
    text-shadow: 0 0 5px rgba(0, 0, 0, .25);
    background: #0e2937;
    background-image: linear-gradient(to right, #0c2837, #205457, #215f65, #0d2734);
    background-size: 300% 100%;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    width:50%;
}

.group-buttons a.inventory-btn:hover {
background-position: 100% 0;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.item-summary {
    display: flex;
    margin-top: 15px;
    flex-direction: column;
    flex-wrap: wrap;
}
.item-summary span {
    display: flex;
    background: #06060673;
    width: 250px;
    border-radius: 3px;
    margin: 3px;
    padding: 6px;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat';
    color: #e9e770;
}
.item-info img.item-img {
    box-sizing: unset;
    background: radial-gradient(#20b2e9, transparent);
    border: 4px double #ffffff33;
    border-radius: 3px;
    padding: 6px;
    margin-top: 30px;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}


.fishing-equipment b {
    display: contents;
    color: #ffb300;
}

.fishing-equipment {
    border-bottom: 1px solid #ffffff26;
    border-radius: 4px;
    padding: 6px;
    margin: 4px 0;
    background: #27aded2e;
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: 'montserrat';
}

.fishing-item, .chop-item {
    display: inline-block;
    background: #101010;
    padding: 3px;
    border-radius: 7px;
    margin: 3px 3px;
    border: 3px double #ffffff1a;
    position: relative;
    transition:1s;
}
.fishing-item:hover, .chop-item:hover {
    background: #181814;
}
.fishing-item .count, .chop-item .count {
    position: absolute;
    right: 1px;
    bottom: -2px;
    font-size: 10px;
    font-family: 'Montserrat';
    color: navajowhite;
    font-style: normal;
}
.count.counter-time {
    bottom: -14px;
    left: -11px;
    right: 0;
    width: 60px;
    margin: auto;
    font-size: 11px;
    text-align: center;
}
.go-fishing {
    display: flex;
    background: #154056;
    padding: 6px;
    width: 150px;
    margin: 6px auto;
    color: navajowhite;
    border-radius: 4px;
    border: 1px solid #ffffff24;
    justify-content: center;
    align-items: center;
    gap: 5px;
    transition:1s;
}
.go-fishing:hover {
    color: white;
    text-decoration: none;
    background: #1d5673;
    border-bottom: 1px solid white;
}

.float{
    position: absolute;
    left: 0;
    bottom: 29px;
    right: 0;
    margin: auto;
    max-width: 50px;
    animation-delay:-2s;
    animation: float-forever 7s cubic-bezier(.55, .5, .45, .5) infinite;
    transform: translate(0px, 40px);
    user-select:none;
}
.floater{
    width: 60px;
    height: 60px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.floater.hooked{
    animation:hooked 1s infinite forwards;
}

.hook-notification {
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    font-weight: bold;
    font-family: 'Montserrat';
    font-size: 16px;
    color: #f1c51a;
    animation: scale 1s infinite forwards;
}
@keyframes scale {
    0%{
        scale:1;
    }
    50%{
        scale:1.2;
    }
    100%{
        scale:1;
    }
}

@keyframes hooked{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(12px);
    }
    100%{
        transform: translateY(0);
    }
}
@keyframes float-forever {
    0% {
        transform: translate(-20px, 0px) rotate(20deg);
    }

    30%{
        transform: translate(5px, 25px) rotate(35deg);
    }
    60%{
        transform: translate(-30px, -20px) rotate(-30deg);
    }
    75% {
        transform: translate(-40px, -20px) rotate(-5deg);
    }
    90%{
        transform: translate(-30px, -10px) rotate(-20deg);
    }
    100%{
        transform: translate(-20px, 0px) rotate(20deg);
    }
}
/* bangų animacija */
.hero_area {
    position: relative;
    height: 200px;
    background-color: #37353540;
    border-radius: 6px;
    overflow: hidden;
    background: url(https://www.pixground.com/wp-content/uploads/2023/08/Sky-Meets-The-Sea-AI-Generated-4K-Wallpaper-jpg.webp);
    background-size: cover;
}

.waves {
    position: absolute;
    width: 100%;
    height: 100px;
    min-height: 100px;
    max-height: 150px;
    bottom: 0;
    left: 0;
}

.parallax>use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax>use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}

.parallax>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}

.parallax>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}

.parallax>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

    100% {
        transform: translate3d(85px, 0, 0);
    }
}


.fish-frame{
    background: url(../images/inventory/fish/bg.png);
    background-size: contain !important;
    background-repeat: no-repeat;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 170px;
    display: flex;
    background-size: cover;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.fish-name {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 230px;
    text-align: center;
    font-family: 'Montserrat';
    font-size: 22px;
    font-weight: bold;
    color: #d99e14;
    padding: 15px;
}
.fishing-reward {
    font-size: 15px;
    position: absolute;
    top: 305px;
    font-family: 'Montserrat';
}
.fishing-alerts {
    flex: 0 0 100%;
        */ width: 90%;
        position: absolute;
        top: 324px;
        /* display: none; */
        font-size: 14px;
        padding: 6px;
        color: #df7636;
        display: flex;
        align-items: center;
        gap: 8px;
        /* max-width: 201px; */
        flex-wrap: wrap;
        background: #0000004a;
        text-align: center;
        margin: 5px;
        /* border: 1px solid #ff3b008c; */
        border-left: 0;
        border-right: 0;
        border-radius: 4px;
        font-family: 'Montserrat';
}
.fishing-alerts div {
    flex: 1 0 48%;
}
body.no-shadow img, body.no-shadow .versus .fighter{
    filter:unset !important;
}
* {
    scroll-behavior: smooth;
    box-sizing: border-box;
}


img.filler{
    max-width: 250px;
    border-radius: 6px;
    box-shadow: 1px 1px 4px 2px #0000007d;
    border: 1px solid black;
    margin: 6px;
}
.line {
    height: 1px;
    background: #8f8f8f26;
}
.inner {
    border: 2px solid red;
}

/*
	table, td, th {
		border: 1px solid black;
	} */
td.border-left {
    border-left: dashed 1px rgb(66 66 62);
}

td.border-bottom {
    border: 0;
    border-bottom: dashed 1px rgb(98 97 92 / 69%);
}

table {
    border-collapse: collapse;
    width: 100%;
}

/*progress bars made by wopy.eu*/
.progreso-cont-contas {
    border: 1px solid #000;
    background-color: #61bbdc;
}

.progreso-cont {
    margin-top: 2px;
    margin-left: 30px;
    width: 80%;
    height: 1.0em;
    position: relative;
    border: 1px solid #000;
    background-color: #a5a17a
}

.hp-progress {
    text-align: left;
    color: black;
    background-color: #dc6161;
    height: 100%;
    position: absolute;
    line-height: inherit
}

.mp-progress {
    text-align: left;
    color: black;
    background-color: #61bbdc;
    height: 100%;
    position: absolute;
    line-height: inherit
}

.xp-progress {
    text-align: left;
    color: black;
    text-overflow: clip;
    background-color: #dcca61;
    height: 100%;
    position: absolute;
    line-height: inherit
}

.round {
    border-radius: 5px !important
}

.tekstasinbar {
    width: 130px;
}

/*---------------------------------------------------------*/
/* .inn{
    margin-bottom: 100px;
} */
.main {
    display: block;
    text-decoration: none;
    padding: 20px 8px;
    background-color: rgb(12 12 11 / 83%);
    border: 1px solid #0f679980;
    border-radius: 0px;
    color: #c5c5c5;
    overflow: hidden;
    border-radius: 0;
    border-top: 0;
}

.div {
    display: block;
    text-decoration: none;
    padding: 12px;
    background: none repeat scroll 0% 0% rgb(18 106 149 / 26%);
    /* border: 1px solid rgb(42 42 41 / 58%); */
    border-radius: 5px;
    color: #fffefeb5;
    overflow: hidden;
    margin: 11px auto;
    text-align: center;
}
.filler img {
    border-radius: 3px;
    border: 2px solid #ffffff4a;
}
.textDiv {
    background: #00253178;
    padding: 8px;
    border: 2px solid #253d4938;
    color: #dfd3a2;
    font-family: 'Montserrat';
    font-size: 14px;
    display: flex;
    gap: 3px;
    justify-content: center;
    align-items: center;
}
.textDiv.logoDiv{
    background: url(../images/banneris.jpg);
    background-size: cover;
    aspect-ratio: 1.77 / 1;
    border-radius: 5px;
    border: 2px solid #2c6793a1;
    box-shadow: inset 0 0 20px 8px #021c2aa3;
}
.textDiv.noFlex{
    display:block !important;
}
bold {
    /* display: block; */
    flex: none;
    color: #c53838;
    font-weight: bold;
}
.head {
    background: none repeat scroll 0% 0% rgb(0 18 32 / 48%);
    display: block;
    text-decoration: none;
    padding: 8px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    /* font-size: 14px; */
    color: #ffffffbf;
    overflow: hidden;
    text-align: center;
    border: 1px solid #0f679980;
    border-bottom: 0;
    backdrop-filter: blur(11px);
}

.foot {
    display: block;
    text-decoration: none;
    padding: 9px;
    background: none repeat scroll 0% 0% #09313161;
    border: 1px solid #0c374d;
    border-top: 0;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
    color: #95928e;
    overflow: hidden;
    text-align: center;
    padding: 20px;
    /* position: fixed; */
    bottom: 0;
    width: 100%;
    left: 0;
}

.wartown {
    margin: 0px;
    padding: 10px;
    border-radius: 4px;
    background: #111616;
    align-items: center;
    line-height: 30px;
}
.wartown a{
    vertical-align: middle;
    color: #a3a3a3 !important;
    font-weight: normal !important;
    padding: 2px 0;
    transition:.5s;

}
.wartown a:hover{
    text-decoration: none !important;
    color: #e5e3e3 !important;
}

a:link,
a:visited,
a:active {
    color: #c0c6c9;
    text-decoration: none;
    font-family: arial;
    font-weight: 600;
    font-style: italic;
}

a:hover {
    color: #189585;
    font-style: italic;
    text-decoration: line-through;
    text-decoration-color: initial;
}

input,
textarea,
select,
button {
    font-size: 14px;
    padding: 5px 8px;
    color: #217a6f;
    margin: 5px 0;
    background-color: #000000;
    border-radius: 3px;
    border: 1px solid #102120;
    -khtml-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    outline: none;
    width: 200px;
    padding: 10px;
    position: relative;
}

/* button:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    background: #0a0a0a;
    top: 33%;
    left: -2.79%;
    /* z-index: -1; */
    padding: inherit;
    transform: rotate(45deg);
    padding-right: .1%;
    padding-bottom: .1%;
    border: 1px solid #bb950a;
} */

input[type=submit],
input[type=button] {
    padding: 10px;
    margin-top: 4px;
    margin-bottom: 1px;
    background-color: #ffffff;
    border-radius: 3px;
    border: 1px solid #183a38;
    /* font-weight: bold; */
    color: #161616;
    font-size: 12px;
    font-weight: 700;
    width: 200px;
}
input[type="radio" i] {
        -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    margin: 0;
    width: 12px;
    padding: 0px;
    margin: 8px 4px;
    background: white;
    height: 12px;
    /* border: 4px solid #00ff89; */
    /* box-shadow: 0px 0px 4px 2px #00ff6678; */
    border-radius: 15px;
    vertical-align: middle;
    transition: .4s;
}
input[type="radio"]:checked {
    border: 4px solid #00ff89;
    box-shadow: 0px 0px 4px 2px #00ff6678;
}
.submit-btn {
    background: #ffffff1a !important;
    border: 1px solid #71757969 !important;
    padding: 6px !important;
    margin: 6px !important;
    width: 100px;
    font-size: 13px !important;
    color: #94989b !important;
}

.submit-btn:hover {
    background: #7f7f7f1a !important;
    padding: 7px !important;
    color: white !important;
    text-shadow: 0 0 7px #ffffff69;
    width: 102px !important;
}

.linija {
    padding-bottom: 1px;
    background: linear-gradient(45deg, transparent, #d7dee2, transparent);
    margin: 7px 0;
    box-shadow: 0px 0px 4px 1px #ffffff14;
}
img.filler-img{
    border-radius: 8px;
    border: 2px solid #00000054;
    box-shadow: 3px 3px 4px 1px #00000061;
}
.error {
    background-color: #c51031b3;
    color: #f5f5f5;
    text-align: center;
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.warning {
    background-color: #ddc01fb3;
    color: #f5f5f5;
    text-align: center;
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.warning a {
    color: #2d1d00;
}
.success {
    background-color: #22c510b3;
    color: #f5f5f5;
    text-align: center;
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.answer {
    border: solid 1px #ffc80059;
    background: #a6ba0e29 !important;
}

.flexbox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.row {
    flex: 1 0 40%;
}

.prev,
.next {
    position: fixed;
    z-index: 9999;
    left: 0;
    right: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    background: #00000057;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    color: white;
    font-size: 28px;
}

.prev:hover,
.next:hover {
    text-decoration: none;
    font-size: 25px;
    color: #ffbc2d;
}

.bottom- {
    top: unset;
    bottom: 8%;
}

.top- {
    bottom: unset;
    top: 8%;
}

.emptyblob {
    margin-bottom: 50px;
}

a.classselect {
    border: 1px solid #00ffab;
    padding: 16px;
    background: #111211c7;
    margin: 5px;
    border-radius: 4px;
    font-family: monospace;
    letter-spacing: -0.5px;
    min-width: 225px;
    font-weight: normal;
    display: block;

}

a.classselect:hover {
    color: white;
    text-decoration: none;
    background: radial-gradient(#00000040, transparent);
    border: 1px solid #00a36e;
}

.classselect .header {
    border-right: 1px solid #02c08247;
    padding: 10px;
    margin-right: 14px;
    text-align: center;
}

.classselect .header h3 {
    margin: 0;
    border-bottom: 1px solid #00f3a4a1;
    text-align: left;
    padding: 4px 5px;
}

.classselect .contents {
    padding: 8px 0px;
    box-sizing: border-box;
    margin: 8px 0;
    border-top: 0;
}

ul.good li,
ul.bad li {
    list-style: malayalam;
    margin: 8px 0;
}

li.bad {
    color: white !important;
}

.whychoose li {
    list-style: upper-roman;
    margin: 10px 0;
    text-align: left !important;
    color: #ffeb3b;
}

.classselect .description {
    /*border-left: 1px solid #01d992; */
    /* border-right: 1px solid #01d992; */
    padding: 15px 0;
    position: relative;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.description:before {
    position: absolute;
    content: "";
    border: 4px double #01d992;
    width: 4px;
    height: 4px;
    top: 4px;
    left: 8px;
    transform: rotate(45deg);
}

.description:after {
    position: absolute;
    content: "";
    border: 4px double #01d992;
    width: 4px;
    height: 4px;
    bottom: 4px;
    right: 8px;
    transform: rotate(45deg);
}

.classselect p {
    line-height: 7px;
    position: relative;
    padding: 10px;
    padding-left: 25px;
    background: linear-gradient(to right, #183f4485, transparent);
    margin: 4px 0px;
    text-align: left;
}

.classselect p::after {
    content: "";
    width: 5px;
    height: 5px;
    border: 2px solid;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 6px;
    transform: rotate(45deg);
    border-left: 0;
    border-bottom: 0;
}

.classselect p:before {
    content: "";
    width: 5px;
    height: 5px;
    border: 2px solid;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    transform: rotate(45deg);
    border-left: 0;
    border-bottom: 0;
}

.classselect p img {
    position: absolute;
    right: 3px;
    top: 0;
    bottom: 0;
    margin: auto;
    max-width: 20px;
    /* background: linear-gradient(45deg, black, transparent); */
    border-radius: 50%;
    padding: 2px;
}

.classdescription {
    background: #05261f8c;
    padding: 15px;
    margin: 5px;
    border: 1px solid #00ff9e;
    border-radius: 3px;
    font-size: 13px;
    font-family: monospace;
    color: lightgoldenrodyellow;
}

.s2a {
    display: block;
    text-decoration: none;
    padding: 6px;
    background: linear-gradient(45deg, #1b2f3a8a, #041c2400, #1b2f3a8a);
    border: 1px solid #202a2d4f;
    border-radius: 0px;
    color: #469ead;
    text-shadow: 0 0 2px black;
    overflow: hidden;
    text-align: center;
    margin: 6px -6px;
}

/*rainbow text made by wopy.eu*/
.rainbowText {
    animation: color-change 10s infinite;
    display: inline-block;
    font-size: 14px;
}

@keyframes color-change {
    0% {
        color: red;
    }

    15% {
        color: orange;
    }

    30% {
        color: yellow;
    }

    45% {
        color: green;
    }

    60% {
        color: blue;
    }

    75% {
        color: indigo;
    }

    90% {
        color: violet;
    }

    100% {
        color: red;
    }
}

/*
  #msg {
	display:none;
	padding: 50px;
	background: red;
	color: white;
  }
*/
.c {
    text-align: center;
}
.left {
    text-align: left !important;
}

.center {
    text-align: center !important;
}

.right {
    text-align: right !important;
}
.add-tile {
    transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
    margin: 10px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: .5s;
    padding: 2px;
    flex: 1 0 10%;
    width: 32px;
    height: 32px;
}
.add-tile.active{
    border: 1px solid #0f8764;
    max-width: 30px !important;
    padding: 2px;
    transform: initial;
}
.add-tile:hover {
    border: 1px solid #0f8764;
    filter: brightness(1.5) !important;
    /* margin-bottom: 14px; */
    max-width: 30px !important;
    transform: initial;
    padding: 2px;
}
.add-object {
    margin: 10px;
    cursor: pointer;
    transition: .5s;
    flex: 1 0 10%;
    border: 1px solid transparent;
    padding: 2px;
}
.add-object.active{
    border: 1px solid #0f8764;
    max-width: 30px !important;
    padding: 2px;
    transform: initial;
}
.add-object:hover {
    border: 1px solid #0f8764;
    filter: brightness(1.5) !important;
    padding: 2px;
}
.tabs-list {
    display: flex;
    width: 100%;
    justify-content: center;
}
.tab-nav {
    background: #137b6d;
    margin: 0 4px;
    padding: 5px;
    border-radius: 3px;
}
.tab-nav.active{
    background: transparent;
    border: 1px solid #137b6d;
    color: #137b6d;
}
.container {
    box-sizing: border-box;
    padding: 10px;
    border-radius: 5px;
    background: url(https://global.discourse-cdn.com/mcneel/uploads/default/optimized/3X/1/4/143029f…_2_500x500.png) rgb(4 86 71 / 15%);
    background-size: 100px;
    border: 1px solid #133942c9;
    margin: 6px 0;
    color: #cbc7c7;
}

.rank-desc{
    background: #2c534a24;
    background-size: cover;
    margin: 3px 0;
    border-radius: 3px;
    padding: 6px;
    display: flex;
    align-items: center;
}
.rank-desc span{
    vertical-align: middle;
    color: #ffffffad;
    font-size: 14px;
    font-weight: 600;
}
.rank-desc img.rank{
    vertical-align: middle;
    margin: 3px 15px;
    filter: drop-shadow(-4px 4px 3px rgba(0,0,0, 0.5));
}
.rank-desc small {
    font-size: 11px;
    color: #e9d042;
    display: flex;
    align-items: center;
}
.rank-desc small img {
    filter: drop-shadow(-4px 4px 3px rgba(0, 0, 0, 0.5));
    margin: 0 4px;
}
span.sumsup {
    font-size: 9px;
    margin-top: -3px;
    display: inline-block;
}

.select-flex{
    display:block;
}
div#tiles-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
div#objects-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
#arrow-indicator{
    display: inline-block;
    padding: 5px;
    font-size: 15px;
    background: rgb(3, 245, 147);
    border-radius: 14px 14px 0px 0px;
    color: black;
    margin: 0 8px;
}
a.rotate-tile {
    font-size: 18px;
    padding: 5px;
    color: #00ff8c;
}
a.deleteTile {
    color: red;
    padding: 14px;
    font-size: 18px;
}
.delete-cursor, .delete-cursor a{
    cursor: url("../images/icons/delete_cursor.png"), auto;
}

.location-pic {
    flex: 1 0 45%;
    padding: 60px;
    margin: 3px;
    background-size: 340px !important;
    width: 200px;
    height: 140px;
    position: relative;
    border-radius: 8px;
    border: 2px solid #d5d4d23b;
    background-position-y: 160px !important;
}
@media (max-width: 500px) {
    .location-pic {
        flex: 1 0 100%;
        background-size: 430px !important;
        background-position-y: 190px !important;
    }
    a.skill-btn {
        width:50px !important;
    }
    vmob{
        display:block !important;
    }
    vpc{
        display:none;
    }
    .table-x {
        display: flex;
        flex-direction: column;
    }
    .table-x.missions .row-x {
        border-right: 1px solid transparent !important;
    }
    .menu.link{
        flex: 1 1 35% !important;
    }
}
.location-wrap{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #0808088c;
    border-radius: 8px;
    padding: 8px;
    transition:1s;
}
.location-wrap:hover{
    background:#69e8e924;
}
.location-list {
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}
a.teleport-btn {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    text-align: center;
    width: 50%;
    margin: auto;
    /* background: #ffffff45; */
    padding: 5px;
    border-radius: 5px;
    color: #ffffffcf;
    transition: 1s;
    border: 1px solid transparent;
    font-style: unset;
    border-bottom-color: #ff990d;
    border-radius: 0;
}
a.teleport-btn:hover {
    text-decoration: none;
    background: none;
    border: 1px solid #ffffffa3;
    color: white;
    text-shadow: 0px 0px 5px black;
    border-radius: 5px;
}
.location-name {
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    text-align: center;
    font-size: 16px;
    font-family: 'Montserrat';
    /* color: #fdfdfdd1; */
    font-weight: bold;
    text-shadow: 0 0 2px black;
}
.alert {
    padding: 7px;
    margin: 5px 0;
    border-radius: 4px;
    color: #ffffff;
    position: relative;
    text-align: center;
}
.alert.other {
    background: #4e9ac11c;
    border: 0;
    padding: 20px;
    color: #ffffffeb;
    border: 1px solid #21353d;
    font-family: 'Montserrat';
}
.alert.error {
    background: #e22436;
    border: 1px solid #b11221;
    font-weight: bold;
}

.alert.error::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f00d";
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 65%;
}

.alert.success {
    background: #b7e154;
    border: 1px solid #b2df47;
    color: black;
    font-weight: bold;
}

.alert.success::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f00c";
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 65%;
}


.alert.warning {
    background: #fffa5c;
    border: 1px solid #a39f28;
    color: black;
    font-weight: bold;
}

.alert.warning::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\21";
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 65%;
}

.alert.info {
    background: #0cc7ff;
    border: 1px solid #379acf;
    color:black;
    font-weight: bold;
}

.alert.info::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f129";
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 65%;
    
}

.container.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

a.menu.link {
    display: block;
    flex: 1 1 30%;
    background: #040607b0;
    padding: 30px;
    display: flex;
    box-sizing: border-box;
    margin: 5px;
    justify-content: center;
    align-items: center;
    border: 1px solid #2e78d07d;
    border-radius: 4px;
    flex-direction: column;
    color: white;
    font-family: system-ui;
    transition: 0.3s;
    position:relative;
    height:150px;
    background-size: 350px !important;
}

a.menu.link:hover {
   background: #080c0eb0;
    border: 1px solid #1b7eac;
    color: #ffffff7a;
    /* text-shadow: 1px 1px 2px #ffffffad; */
    text-decoration: none;
    filter: brightness(2);
    box-shadow: inset 0px 0px 16px 8px #000000c7;
    border: 1px solid #800aeb63;
}

a.menu.link:hover {
    animation-play-state: paused;
}
a.menu.link:hover {
    animation-play-state: paused;
    animation: scrollBackground 1s cubic-bezier(0.42, 0, 0.58, 1) forwards;
}

a.menu.link:not(:hover) {
    animation: scrollBackgroundBack 1s cubic-bezier(0.42, 0, 0.58, 1) forwards;
}

.link-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 148px;
    background: #000000bf;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    text-align: center;
}
@keyframes scrollBackground {
    0% {
        background-position: 50% 50%;
    }

    100% {
        background-position: 25% 25%;
    }
}
@keyframes scrollBackgroundBack {
    0% {
        background-position: 25% 25%;
    }

    100% {
        background-position: 50% 50%;
    }
}
/* a.menu.link i {
    display: block;
    font-size: 30px;
    margin: 5px auto;
    color: #1b82b2;
} */

a.chat-tool {
    margin: 1px;
}

a.open-chat {
    position: fixed;
}

div#chat-container {
    max-height: 325px;
    overflow-y: scroll;
}

.message {
    background: #0b0f10;
    padding: 10px;
    margin: 2px;
    border-radius: 3px;
    font-size: 11px;
    font-family: monospace;
    color: #a7a7a7;
    /* border: 1px solid #102d2b; */
    box-shadow: 2px 4px 3px 2px #00000033;
    transition: 0.3s;
}
.message img.rank{
    max-width:14px !important;
}
.message.replying {
    border: 1px solid #1aae69;
    background: #0f181a;
}

.message:hover {
    background: #060b0c;
}

small.answer-- {
    margin-left: 10px;
    margin-bottom: -10px;
    display: block;
    font-size: 8.5px;
    /* width: max-content; */
    /* background: #051d1b; */
    padding: 5px;
    border-radius: 5px;
    max-width: 97%;
    height: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #ffffff6b;
}

.title {
    width: 102.3%;
    background: linear-gradient(90deg, transparent 5%, #0c2927 15%, transparent 95%);
    padding: 10px;
    margin: 3px 0;
    margin-top: -13px;
    margin-left: -14px;
    text-align: center;
    font-size: 11px;
    /* border-bottom: 2px solid #d09e62; */
    color: #0f7868;
    font-weight: bold;
    font-family: monospace;
    position: relative;
}

.chat-options {
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    align-items: center;
    width: 50px;
}

.chat-options a {
    color: #d8d5d5;
    flex: 1 1 50%;
}

.chat-options a:hover {
    color: #e7d17d;
    text-shadow: 0px 0px 5px #ffaf00;
}

alert {
    font-size: 11px;
    background: #0f2929eb;
    width: 160px;
    display: block;
    position: absolute;
    bottom: 0px;
    left: 28%;
    text-align: center;
    border-radius: 4px;
    z-index: 9;
    padding: 10px;
    box-sizing: border-box;
}

alert:before {
    content: "";
    background: linear-gradient(45deg, transparent 50%, #0f2929eb 50%);
    width: 28px;
    height: 28px;
    position: absolute;
    right: 0;
    left: 0;
    bottom: -11px;
    /* top: 0; */
    margin: auto;
    transform: rotate(58deg);
    z-index: 8;
}

.popup {
    position: relative;
}

.chat-box input[type="submit"] {
    background: #133631;
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 11px;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(16, 46, 42, 1) 0%, rgb(13 39 35) 94%, rgb(8 26 23) 96%);
    border: 0;
}

input[type="submit"]:hover {
    background: linear-gradient(180deg, rgb(24 83 75) 0%, rgba(19, 54, 49, 1) 94%, rgba(16, 46, 42, 1) 96%);
}

textarea#message {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 50px;
    height: 50px !important;
    background: #00000078;
    color: #a9a7a7;
    font-size: 11px;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #0a181700;
}

::-webkit-scrollbar-thumb {
    background: #0e3937;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #104946;
}

a.open-chat:before {
    content: "";
    height: 24px;
    width: 24px;
    background: linear-gradient(138deg, #010100, #0c1c1c, #0e2f1c);
    position: absolute;
    z-index: 998;
    left: -12.7px;
    transform: rotate(45deg);
    top: -0.1px;
    bottom: 0;
    margin: auto;
    border: 1px solid;
    border-right: 0;
    border-top: 0;
}

a.open-chat::after {
    content: "\f075";
    font: var(--fa-font-regular);
    position: absolute;
    left: 3px;
    z-index: 999;
    color: white;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

a.open-chat {
    position: fixed;
    bottom: 10px;
    right: 0;
    background: linear-gradient(#010100, #0c1c1c, #0e2f1c);
    padding: 10px;
    width: 100px;
    text-align: center;
    border: 1px solid white;
    border-right: 0;
    border-left: 0;
    color: white;
    z-index: 999;
}

a.open-chat:hover {
    background: linear-gradient(#01100b, #142f2f, #103821);
    text-decoration: none;
    text-shadow: 1px 1px 4px #ffffff7a;

}

a.open-chat:hover:before {
    background: linear-gradient(138deg, #01100b, #142f2f, #103821);
}

.box {
    background: #0b1c1b;
    width: 100%;
    max-width: 400px;
    position: fixed;
    right: 0px;
    bottom: 10px;
    box-sizing: border-box;
    padding: 5px;
    border: 12px solid transparent;
    border-image: url(https://i.ibb.co/2t8LYqR/frame2.png) 52 stretch;
    border-radius: 5px;
    /* min-width:350px; */
    z-index: 1000;
}

.tileset {
    display: flex;
    flex-wrap: wrap;
    max-width: 225px;
    max-height: 225px;
    margin: auto;
    transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
    border-bottom: 9px solid #8c6741;
    border-left: 9px solid #4e341b;
    border-top-left-radius: 12px;
    /* box-shadow: -2px 2px 3px 1px #493013; */
    position: relative;
    overflow: hidden;
}

@keyframes day-night {
    0% {
        background-color: #030303bf;
    }

    5% {
        background-color: #171c0aab;
    }

    10% {
        background-color: #2a32119c;
    }

    15% {
        background-color: #484e1869;
    }

    20% {
        background-color: #6d6e1b5c;
    }

    25% {
        background-color: #999b1f4a;
    }

    30% {
        background-color: #b6b9182e;
    }

    35% {
        background-color: #ddc4113b;
    }

    40% {
        background-color: #f3d60a36;
    }

    45% {
        background-color: #ffd30030;
    }

    50% {
        background-color: #ffbc002e;
    }

    52.5% {
        background-color: #ff6f003b;
    }

    55% {
        background-color: #d9990940;
    }

    57.5% {
        background-color: #c1870640;
    }

    60% {
        background-color: #8d61015e;
    }

    62.5% {
        background-color: #8d550161;
    }

    65% {
        background-color: #643d027d;
    }

    67.5% {
        background-color: #642f028a;
    }

    70% {
        background-color: #4c19018c;
    }

    72.5% {
        background-color: #301001a1;
    }

    75% {
        background-color: #1e0a01ad;
    }

    80% {
        background-color: #030303bf;
    }

    100% {
        background-color: #030303bf;
    }
}


.modal-body.map:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #05000000;
    animation: day-night 86400s linear infinite;
    transition: all 0s;
}
.day-nigh-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #05000000;
    top: 0;
    left: 0;
    z-index: 99;
    animation: day-night 86400s linear infinite;

    /* animation-play-state: paused;
    animation-fill-mode: forwards; */
    transition: all 0s;
    pointer-events: none;
}
.cave-layer{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #030303b5;
    top: 0;
    left: 0;
    z-index: 99;
    
    transition: all 0s;
    pointer-events: none;
}

.test-torch {
    text-align: center;
    background: #0000007d;
    margin: 5px auto;
    border-radius: 4px;
}

button#torch {
    cursor: pointer;
    background: #0e1416;
    color: #ffc215ad;
    border: 0;
    padding: 9px;
}

button#torch2 {
    cursor: pointer;
    background: #0e1416;
    color: #ffc215ad;
    border: 0;
    padding: 9px;
}

/* .tileset:after {
    content: "";
    width: 55px;
    height: 55px;
    background: #ffea522e;
    z-index: 100;
    position: absolute;
    top: -17px;
    left: 0px;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0 0 12px 18px white;
    mix-blend-mode: overlay;
    background: linear-gradient(white 50%, white 50%);
} */
.tileset.torch:after {
    content: "";
    width: 55px;
    height: 55px;
    background: #ffea522e;
    z-index: 100;
    position: absolute;
    top: -17px;
    left: 0px;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0 0 13px 11px #dbc49696;
    mix-blend-mode: color-dodge;
    background: radial-gradient(#dbc496b8 50%, #dbc49696 90%);
    animation: flicker 3s infinite;
}

@keyframes flicker {
    0% {
        opacity: 0.7;
        transform: scale(0.85);
    }

    5% {
        opacity: 0.95;
        transform: scale(0.99);
    }

    10% {
        opacity: 0.8;
        transform: scale(0.92);
    }

    15% {
        opacity: 1;
        transform: scale(1);
    }

    20% {
        opacity: 0.9;
        transform: scale(0.98);
    }

    25% {
        opacity: 0.95;
        transform: scale(0.99);

    }

    30% {
        opacity: 0.85;
        transform: scale(0.95);
    }

    35% {
        opacity: 0.95;
        transform: scale(0.99);
    }

    40% {
        opacity: 0.95;
        transform: scale(0.99);
    }

    45% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(0.94);
    }

    55% {
        opacity: 1;
        transform: scale(1);
    }

    60% {
        opacity: 0.9;
        transform: scale(0.97);
    }

    65% {
        opacity: 1;
        transform: scale(1);
    }

    70% {
        opacity: 0.9;
        transform: scale(0.97);
    }

    75% {
        opacity: 0.95;
        transform: scale(0.98);
    }

    80% {
        opacity: 0.8;
        transform: scale(0.96);
    }

    85% {
        opacity: 1;
        transform: scale(1);
    }

    90% {
        opacity: 0.9;
        transform: scale(0.97);
    }

    95% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0.8;
        transform: scale(0.96);
    }
}

.tileset.torch.stronger:after {
    width: 100px;
    height: 100px;
}


.tileset.edit .tile:hover {
    filter: brightness(1.5);
    border: 1px solid white;
}
.tileset.edit .hero img {
    transition: opacity 0.3s ease;
}
.tileset.edit .tile:hover .hero img {
    opacity: 0.3;
}
.opacity-filter {
    opacity: 0.3;
}
.tileset.edit .tile {
    border: 1px solid #00000036;
}

.sat {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: black;
    filter: brightness(1.5);
    z-index: 99;
    opacity: 0.3;
}

.note{
    color: #f3f732;
    font-size: 14px;
    border-top: 1px solid #fff7002e;
    margin-top: 10px;
    padding: 5px;
    background: #00000029;
    border-radius: 3px;
    position: relative;
}

.notifications {
    position: fixed;
    top: 6px;
    left: 0;
    background: linear-gradient(45deg, black, transparent);
    z-index:1000;
}

.notifications p {
    background: #00000059;
    width: 231px;
    margin: 0px;
    text-align: center;
    padding: 5px;
    font-weight: bold;
    text-shadow: 0 0 2px black;
    line-height: 20px;
    font-size: 12px;
}

.notificationwrap {
    position: relative;
    background: linear-gradient(to right, #04e5ff52, #032c3300);
    padding-top: 2px;
    margin: 8px 0;
}

.resources {
    background: #0b1316a3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    color: white;
    border: 1px solid #0f679980;
    /* border-bottom: 0; */
    border-top:0;
    padding: 4px;
}

.resource {
    display: flex;
    align-items: center;
    background: #404f6473;
    margin: 6px 12px;
    flex: 1 1 33%;
    border-radius: 3px;
    text-align: center;
    position: relative;
}

.resource .icon {
    max-width: 24px;
    max-height: 24px;
}

.resource .icon img {
    max-width: 24px;
    max-height: 24px;
    border-radius: 4px 0 0 4px;
}

.resource p {
    margin: 0;
    /* text-align: center; */
    /* width: 100%; */
    margin-left: 10px;
}
.open-shop{
    display: flex;
    position: absolute;
    right: 0px;
    top: 0px;
    background: #1a1c1b;
    width: 24px;
    height: 24px;
    border-radius: 0 3px 3px 0;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat';
    font-size: 15px;
}

.tile img.tile-image {
    display: block;
    max-width: 24px;
}

.tileset .tile {
    flex: 1 0 11.11%;
    position: relative;
    width: 24px;
    height: 24px;
    background-size: 24px !important;

}
.tile.fresh{
    opacity:0;
    animation: freshTile .5s cubic-bezier(0.23, 1, 0.320, 1) forwards;
    animation-iteration-count: 1;
    -webkit-animation: freshTile .5s cubic-bezier(0.23, 1, 0.320, 1) forwards;
    -webkit-animation-iteration-count: 1;
    -moz-animation: freshTile .5s cubic-bezier(0.23, 1, 0.320, 1) forwards;
    -moz-animation-iteration-count: 1;
    scale: 0%;
}
.delay-1 { animation-delay: 0.1s !important; }
.delay-2 { animation-delay: 0.2s !important; }
.delay-3 { animation-delay: 0.3s !important; }
.delay-4 { animation-delay: .4s !important; }
.delay-5 { animation-delay: .5s !important; }
.delay-6 { animation-delay: .6s !important; }
.delay-7 { animation-delay: .7s !important; }
.delay-8 { animation-delay: .8s !important; }
.delay-9 { animation-delay: .9s !important; }

@keyframes freshTile{
    0%{
        opacity:0;
        scale: 0%;
    }
    100%{
        opacity:1;
        scale: 100%;
    }
}

.custom-caption {
    font-weight: bold;
    text-align: center;
    font-size: 13px;
    color: #dadd93;
}
.wartown input, .wartown select, .wartown textarea {
    background: transparent;
    border: 1px solid #439cbc33;
    padding: 6px;
    /* color: #b8d2e38f; */
}
.camera_icon {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #00000036;
    background-position: center center;
    width: max-content;
    max-height: 200px;
    max-width: 200px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    margin: auto;
}
.tile.standing{
    border: 2px solid #f9dc4b;
}
.tile .rotate {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    transform-origin: center;
    background-size: 24px !important;
}

.building {
    max-width: 200px;
    max-height: 200px;
    position: absolute;
    top: -50%;
    left: -50%;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(45deg) scaleY(1.9);
    z-index: 9;
}
.hero {
    position: absolute;
    height: 30px;
    width: 20px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 10px;
    margin: auto;
    color: white;
    z-index: 3;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(45deg);
    pointer-events: none;
}
.hero .me{
    z-index:8 !important;
}

.hero img {
    transform: scale3d(0.6, 1.1, 1);
    filter: drop-shadow(-5px -9px 3px rgba(0, 0, 0, 0.3));

}

.hero.inWater img{
    transform: translateY(15px) scale3d(0.6, 1.1, 1);
}
.sm-ent {
    top: 94% !important;
}

.sm-ent::before {
    top: 7px !important;
    left: 0px !important;
    height: 2px !important;
    width: 13px !important;
    transform: rotate(120deg) !important;
}

sbutton {
    width: 20px;
    height: 20px;
    background: white;
    color: #000000cf;
    display: inline-flex;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    box-shadow: inset 0px 0px 2px 2px #000000a6;
    font-style: normal;
    font-family: monospace;
}

.row.entity:before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: linear-gradient(45deg, #99ab3038 50%, transparent 50%);
    transform: rotate(45deg);
    /* border: 1px solid #d9f72869; */
    border-top: 0;
    border-right: 0;
    padding: 0px;
}

.row.entity {
    flex: 1 0 32.3%;
    padding: 12px;
    box-sizing: border-box;
    background: rgb(79 104 17 / 12%);
    border: 1px solid #99ab3038;
    margin: 2px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #b6cf2e;
    font-weight: 500;
    position: relative;
    cursor:pointer;
}

.row.entity img {
    max-width: 20px !important;
}

.row.entity i {
    font-size: 16px;
}

/* a.row.entity{
    flex: 1 0 32.3%;
    padding: 15px;
    box-sizing: border-box;
    background: rgb(0 0 0 / 57%);
    border: 1px solid #0f2024c9;
    margin: 2px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #1ba15d;

} */


a.player-interaction {
    flex: 1 0 100%;
    /* border: 1px solid #ffffff1a; */
    padding: 8px;
    background: #0a0c0178;
    color: #c2c3a5;
    margin: 2px;
    border-radius: 4px;
    font-weight: 100;
    font-size: 11px;
    transition: 0.7s;
}
a.player-interaction:hover {
    color: #c1c507;
    background: #2e312178;
    text-decoration: none;
    padding: 8px 17px;
}
.player-action {
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.player-interaction i {
    font-size: 12px !important;
    width: 30px;
    padding: 0 5px;
    border-right: 1px solid #f9f202;
    margin: 0 5px;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    color: #f9f202;
}
.map-player {
    position: absolute;
    top: -100px;
    right: 0;
    left: 0;
}
#loadingScreen {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #101010;
    z-index: 9999;

}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #9370DB;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
}

#loader span {
    color: white;
    display: block;
    margin-top: 0;
    width: 50px;
    transform: rotate(35deg);
    margin-right: 45px;
    color: #fd91ff;
    font-size: 15px;
}

#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #BA55D3;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}

#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #FF00FF;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
.pressAlert {
    position: absolute;
    bottom: 22%;
    text-align: center;
    /* z-index: 99999; */
    color: #efefef;
    width: 100%;
    font-size: 15px;
    font-family: monospace;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.action-modal {
    margin: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 600px;
    max-height: 80dvh;
    /* background: #00ffc46e; */
    /* border: 2px solid white;*/
    z-index: 999;
}
.lvl-up .modal-body{
    background: url(https://i.pinimg.com/736x/0b/5f/b9/0b5fb9e8deeb0f6bd6a9fb6a3649ccfa--mobile-backgrounds-desktop-backgrounds.jpg);
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.lvl-up .modal-body:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000c7;
}
.lvl-up .modal-header {
    display: none;
}
.top-layer{
    z-index:7;
    width: 40%;
    height: 40%;
}
.new-rank {
    max-width: 60px;
    height: 60px;
    margin: auto;
    background: radial-gradient(#3d3d3d, #000000);
    border: 4px solid #ffffffb0;
    border-radius: 50%;
    padding: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px auto;
    box-shadow: 0px 0px 10px 7px #0572cf80;
    position: relative;
}
.ray {
    width: 200px;
    background: linear-gradient(45deg, #1d8dcf59, transparent);
    position: absolute;
    height: 200px;
    left: 0;
    top: 0;
    bottom:0;
    right:0;
    margin:auto;
    background: url(https://devforum-uploads.s3.dualstack.us-east-2.amazonaws.com/uploads/original/4X/1/c/7/1c73bf1bc10d40fca4363f125f8d5a5c54da0a3f.png);
    background-size: cover;
    filter: hue-rotate(135deg);
    opacity: 0.1;
    animation: rotate 30s linear infinite forwards;
}
.rank-show-off {
    position: relative;
}
.star{
    background: white;
    border-radius: 50%;
    box-shadow: 0px 0px 6px 2px #0ca3c5a3;
    position:absolute;
}
.lvl-up button.close-modal {
    background: #ffffff14;
    margin: 14px;
    position: absolute;
    left: 0;
    bottom: 5%;
    right: 0;
    margin: auto;
}
.reward img {
    vertical-align: middle;
    margin: -10px 0;
}
.rewards {
    display: flex;
    justify-content: center;
    gap: 30px;
    align-items: center;
    /* background: #00000061; */
    width: max-content;
    margin: auto;
    padding: 8px;
    font-family: math;
}
.lvl-txt {
    position: absolute;
    top: 15%;
    font-size: 25px;
    font-family: monospace;
    text-shadow: 0 0 9px #1286d9;
    font-weight: 900;
}
@keyframes rotate {
    0% {

        transform:rotate(0deg);
    }


    100% {

        transform: rotate(360deg);
    }
}
@media (max-width: 600px) {
    .versus {
        min-width: unset !important;
        min-height: unset !important;
    }
    .top-layer{
        width:75%;
    }
}

@media (max-height: 600px) {

    .action-modal {
        margin-top: unset;
    }

    button.close-modal,
    button.start-fight {
        width: 100px !important;
    }

    .modal-header {
        padding: 12px;
        font-size: 12px;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 9;
        background: #26425a7a;
    }
}

.modal-header {
    text-align: center;
    border-radius: 3px 3px 0 0;
    background: #26425a;
    padding: 12px;
    font-size: 14px;
    letter-spacing: 2px;
    color: white;
}

.modal-body {
    background: #0a1414;
    width: 100%;
    height: 470px;
    color: white;
    padding: 30px;
    border-radius: 0 0 3px 3px;
    position: relative;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    /* background-image: url(https://img.freepik.com/premium-vector/vector-horizontal-seamless-illustration-forest-magical-mist_284645-954.jpg); */
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: center;
    background-size: cover !important;
}

.modal-buttons {
    text-align: center;
    background: #040907f7;
    border-radius: 0 0 4px 4px;
    padding: 3px;
}

button.close-modal,
button.start-fight {
    cursor: pointer;
    color: white;
    border: 0;
    padding: 10px;
    width: 200px;
}

.modal-body .row {
    display: flex;
    margin-bottom: -120px;
    justify-content: center;
    max-width: 100%;

}

.row.hp {
    margin-bottom: 0;
    margin-bottom: -10px;
}

.row.status-table {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-bottom: -76px;
}

.status {
    background: #1328266b;
    padding: 15px;
    border-radius: 4px;
    color: #f7e7c2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 0px 0px 5px 4px #00000033;
    margin: 0 28px;
}

.status div {
    display: flex;
    align-items: center;
    flex: 1 1 100%;
    font-size: 12px;
    font-family: monospace;
    gap: 6px;
    margin: 4px;
    border-bottom: 1px dashed#ffffff2e;
    color: #fddf8c;
}

.versus {
    border-radius: 3px;
    flex: 1 1 33%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #64625c00;
    border: 2px solid #2e2a2a00;
    margin: 2px;
    padding: 10px;
    max-width: 150px;
    max-height: 150px;
    min-height: 150px;
    min-width: 150px;
    border-radius: 5px;
    /* box-shadow: 1px 1px 8px 0px #020202ad; */
    position: relative;
    flex-wrap: wrap;
}
.versus.boss {
    max-height: 250px;
    align-content: center;
}
.boss-fighter{
    max-width: 200px !important;
    max-height: 185px !important;
    margin-top: 0px !important;
    margin-bottom: 30px !important;
}
.versus.myhero.inBossFight {
    margin-top: 65px;
}
.versus .fighter {
    /* width: 120px;
    height: 120px;
    margin: auto;
    margin-top: 20px;
    text-align: center; */
    margin: auto;
    filter: drop-shadow(4px -30px 4px rgba(0, 0, 0, 0.5));
}

.versus.vs {
    font-size: 28px;
    font-weight: bold;
    color: #d53c3c;
}

.vs-text {
    background: linear-gradient(45deg, #f70000, #f3ab09);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 2px 3px #00000052;
}

.versus.criticalUI {
    background: #64625c00;
    animation-name: criticalUI;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    box-shadow: inset 0px 0px 10px 3px rgba(255, 0, 0, 0);
}

@keyframes criticalUI {
    0% {

        box-shadow: inset 0px 0px 10px 3px rgba(255, 0, 0, 0);
    }

    50% {

        box-shadow: inset 0px 0px 10px 3px red;
    }

    100% {

        box-shadow: inset 0px 0px 10px 3px rgba(255, 0, 0, 0);
    }
}

.versus.attack img {
    animation-name: attack;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    margin-top: 0px;
    transform: translateY(0px);
}

.versus.mob.attack img {
    animation-name: attack-mob;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    margin-top: 0px;
    transform: translateY(0px);
}

.versus.defence img {
    animation-name: defence;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    margin-left: 0px;
    margin-bottom: 0;
}

.versus.defence-crit img {
    animation-name: defence-crit;
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
    margin-left: 0px;
    margin-bottom: 0;
}

.versus.myhero.defence img {
    animation-name: player-defence;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    margin-right: 0px;
    margin-bottom: 0;
}

.versus.myhero.defence-crit img {
    animation-name: player-defence-crit;
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
    margin-right: 0px;
    margin-bottom: 0;
    transform: translateY(0px);

}

@keyframes attack-mob {
    0% {
        transform: translateY(0px);
    }

    60% {
        transform: translateY(-30px);
    }

    100% {
        transform: translateY(0px);

    }
}

@keyframes attack {
    0% {
        transform: translateY(0px);
        /* margin-top:0; */
    }

    60% {
        transform: translateY(-30px);
        /* margin-top:-55px; */
    }

    100% {
        transform: translateY(0px);
        /* margin-top:0; */

    }
}

@keyframes defence {
    0% {
        margin-left: 0;
        margin-bottom: 0;
    }

    50% {
        margin-left: -20px;
        margin-bottom: -25px;
    }

    100% {
        margin-left: 0;
        margin-bottom: 0;
    }
}

@keyframes defence-crit {
    0% {
        margin-left: 0;
        margin-bottom: 0;
    }

    50% {
        margin-left: -40px;
        margin-bottom: -45px;
    }

    100% {
        margin-left: 0;
        margin-bottom: 0;
    }
}

@keyframes player-defence {
    0% {
        margin-right: 0;
        margin-bottom: 0;
    }

    50% {
        margin-right: -20px;
        margin-bottom: -25px;
    }

    100% {
        margin-right: 0;
        margin-bottom: 0;
    }
}

@keyframes player-defence-crit {
    0% {
        margin-right: 0;
        margin-bottom: 0;
    }

    50% {
        margin-right: -40px;
        margin-bottom: -45px;
    }

    100% {
        margin-right: 0;
        margin-bottom: 0;
    }
}

.hp-bar {
    background: red;
    height: 5px;
    border-radius: 3px;
    max-width: 100%;
}

.hp_block {
    margin: 3px;
    flex: 1 0 33%;
    max-width: 28%;
}

.fight-bar {
    width: 100%;
    height: 5px;
    background: #3e3838;
    display: block;
    border-radius: 3px;

}
.fight-bar.profile-bar{
    max-width: 200px;
    margin: auto;
    margin-top: -10px;
    border: 2px solid #ac8e60;
    height: 9px;
    border-radius: 6px;
    background: #ac8e60;
    box-shadow: 3px 3px 4px 2px #00000061;
}

.hp-left {
    text-align: center;
    margin-bottom: -14px;
    padding: 4px;
    color: white;
    background: #00000063;
    margin-top: 6px;
    border-radius: 4px;
    font-family: math;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
}

@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap');

.tookDamage {
    /* background: url(https://cdn-icons-png.flaticon.com/512/616/616500.png);
        */
    background-size: cover;
    width: max-content;
    height: 15px;
    color: white;
    position: absolute;
    padding: 5px;
    display: flex;
    /* left: 0; */
    /* text-shadow: 0px 0px 4px BLACK; */
    top: 0;
    left: 15px;
    right: 0;
    margin: auto;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 16px;
    color: #ffffff;
    font-weight: bold;
    font-stretch: semi-condensed;
    opacity: 0;
    font-family: 'Metal Mania', cursive;
}

.tookDamage.hero- {
    left: 0;
    right: 15px;
}

.tookDamage.strike {
    animation-name: strike;
    animation-duration: 1.5s;
    animation-delay: 0.3s;
    margin-top: 0;
    animation-fill-mode: forwards;
    opacity:0;
    /* display:flex; */
    /* opacity:0; */
}
.skill-shot {
    width: max-content;
    height: max-content;
    position: absolute;
    padding: 5px;
    display: flex;
    bottom: 160px;
    left: 15px;
    right: 0;
    margin: auto;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #00ff74;
    font-stretch: semi-condensed;
    opacity: 0;
    font-family: 'Montserrat';
    /* background: #0000008c; */
    border-radius: 4px;
    flex-wrap: wrap;
    flex-direction: column;
    text-shadow: 0 0 3px black;
}
.skill-shot.strike {
    animation-name: strike;
    animation-duration: 4.5s;
    animation-delay: 1s;
    margin-top: 0;
    animation-fill-mode: forwards;
    opacity:1;
    /* display:flex; */
    /* opacity:0; */
}
.healed {
    width: max-content;
    height: max-content;
    position: absolute;
    padding: 5px;
    display: flex;
    bottom: 125px;
    left: 15px;
    right: 0;
    margin: auto;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #00ff74;
    font-stretch: semi-condensed;
    opacity: 0;
    font-family: 'Montserrat';
    /* background: #0000008c; */
    border-radius: 4px;
    flex-wrap: wrap;
    flex-direction: column;
    text-shadow: 0 0 3px black;
}
/* .healed.strike {
    animation-name: heal;
    animation-duration: 2.5s;
    animation-delay: .5s;
    margin-top: 0;
    animation-fill-mode: forwards;

    opacity:0;
} */
.miss-dmg {
    color: #00f3ff;
    font-style: italic;
    transform: rotate(10deg);
    opacity:1;
}

.crit-dmg {
    color: #ff1b1b;
    color:#ffb300;
    font-weight: 900;
    font-size: 17px;
    font-style: italic;
    transform: rotate(4deg);
    opacity:1;
}

.heal{
    color:#8bfc49;
    font-weight: 600;
    font-size: 16px;
    font-style: italic;
    animation-name: heal;
    animation-duration: 1.8s;
    animation-delay: .5s;
    margin-bottom: 0;
    animation-fill-mode: forwards;
    /* display:flex; */
    opacity:0;
    text-shadow: 0 0 2px #91ff62;
    /* transform: rotate(4deg); */
    /* animation-name: strike;
    animation-duration: .1s;
    opacity:1; */
}
@keyframes strike {
    0% {
        margin-top: 0;
        opacity: 1;
        /* display:flex !important; */
    }


    100% {
        margin-top: -20px;
        opacity: 0;
        /* display:none !important; */
    }
}
@keyframes heal {
    0% {
        margin-bottom: 0;
        opacity: 1;
        /* display:flex !important; */
    }


    100% {
        margin-bottom: 30px;
        opacity: 0;
        /* display:none !important; */
    }
}
.deathScreen {
    width: 100%;
    height: 100%;
    background: #2c2c32;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    flex-direction: column;
    gap: 40px;
    font-size: 23px;
    color: #ff5656;
}

.winningScreen {
    width: 100%;
    height: 100%;
    background: #18191a;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    flex-direction: column;
    gap: 15px;
    font-size: 18px;
    color: #f1bd10;
}

.drops {
    color: white;
    font-size: 12px;
    text-align: center;
    font-style: italic;
}

.drops p {
    background: #39576540;
    margin: 0px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    justify-content: space-between;
    width: 270px;
}

.drops p img {
    max-width: 22px;
    background: #3a5466;
    border-radius: 50%;
    display: block;
    float: right;
    clear: both;
}

.drops p:last-child {
    border-radius: 0 0 4px 4px;
}

.drops p:first-child {
    border-radius: 4px 4px 0 0;
    font-weight: bold;
    border-bottom: 1px dashed #ffe35a3d;
    color: #f7e45a;
    justify-content: center;
    padding: 10px;
}

.bar {
    background: #0f679940;
    color: white;
    border: 1px solid #0f679980;
    border-top: 0;
    border-bottom: 0;
    position:relative;
}

.xp-bar {
    padding: 2px 0;
    position: relative;
    background: #ffdc2ffc;
    /* background:#d9dd13fc; */
    color: #000000c9;
    font-size: 10px;
    height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    font-style: italic;
    font-weight: bold;
    max-width: 100%;
    box-shadow: inset 0px -3px 7px 0px #0000007a;
}
.bar-values{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    width: max-content;
    color: #fffcfc;
    font-size: 10px;
    background: #00000061;
    padding: 0 6px;
    border-radius: 5px;
}
a.user-link {
    display: inline-flex;
    align-items: center;
}
.level {
    flex: 1 0 10%;
    text-align: center;
    background: #ff000000;
    max-width: max-content;
    max-height: max-content;
    padding: 0 5px;
    margin-right: -20px;
    z-index: 8;

}
.level img {
    filter: drop-shadow(-4px 4px 3px rgba(0, 0, 0, 0.5));
}
.flex-l {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
    border: 1px solid #0f679980;
    background: #0f679940;
}
.bar.fl{
    flex: 1 0 90%;
}
.map {
    display: flex;
}

.map-screen {
    flex: 1 0 50%;
    display: flex;
}
.map-screen:first-child {
    flex: 1 0 148px;
}
.map-info {
    background: #0000004d;
    height: 100%;
    text-align: center;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 8px;
    /* border: 3px solid #56b7f51f; */
    color: #d2c999;
    /* box-shadow: 1px 1px 8px 0px #0000002e; */
    width: max-content;
    width: 100%;
    /* position: absolute;*/
}

.map-info b {
    font-family: cursive;
    font-style: italic;
    color: #bf1029;
}

.map-controls {
    position: relative;
    MAX-WIDTH: max-content;
    margin: auto;
}

.map-controls a {
    position: absolute;
    padding: 5px;
    transition: 0.5s linear;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.map-controls a:hover {
    filter:brightness(1.5)
}
.mid {
    position: absolute;
    top: 42px;
    left: -8px;
    border: 3px solid #104d65;
    border-radius: 50%;
    padding: 0px;
    width: 26px;
    height: 26px;
}
.map-controls a.S {
    top: 75px;
    left: 0;
    right: 0;
    margin: auto;
    width: 0;
    height: 0;
    transform: rotate(180deg);
}

.map-controls a.N {
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0;
    height: 0;
    top: 30px;
}

.map-controls a.W {
    top: 55px;
    bottom: 0;
    right: 15px;
    margin: auto;
    width: 0;
    height: 0;
    transform: rotate(270deg);
}

.map-controls a.E {
    top: 55px;
    bottom: 0;
    left: 25px;
    margin: auto;
    width: 0;
    height: 0;
    transform: rotate(90deg);
}




.rainbow {
    text-align: center;
    font-family: monospace;
    letter-spacing: 2px;
}

/* .rainbow_text_animated {
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 6s ease-in-out infinite;
    background-size: 400% 100%;
} */
.rainbow_text_animated {
    background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #ff3333, #edff33, #33ff8c, #6666ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 8s ease-in-out infinite;
    background-size: 500% 200%;
}

@keyframes rainbow_animation {

    0%,
    100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}

@media screen and (max-width: 501px) {
    .map-controls img {
        max-width: 125px;
    }
    span.coordinates {
        position: absolute;
        top: -130px;
        left: 27px;
        right: 0;
        z-index: 9;
        margin: auto;
        text-align: center;
        width: 100%;
    }
    .map-info {
        position: absolute;
        top: 472px;
        left: -5%;
        /* right: 0; */
        margin: auto;
        background: transparent;
        border: none;
        height: 147px;
        box-shadow: none;
        width: 100%;
        margin-top: 9px;
        max-width: 147px;
    }

    .map {
        flex-wrap: wrap;
    }

    .map-screen {
        min-width: 300px;
    }

    .map-controls {
        position: relative;
        MAX-WIDTH: 200px;
        height: 115px;
    }

    .map-controls a.N {
        top: -47px;
        width: 30px;
        height: 30px;
        right: 0;
    }

    .map-controls a.S {
        bottom: 27px;
        width: 30px;
        height: 30px;
    }

    .map-controls a.E {
        top: 1px;
        bottom: 0;
        right: 0;
        left: 50px;
        margin: auto;
        width: 30px;
        height: 30px;
    }

    .map-controls a.W {
        top: 1px;
        bottom: 0;
        left: 0;
        right: 47px;
        margin: auto;
        width: 30px;
        height: 30px;
    }
    .mid {
        position: absolute;
        top: 44px;
        left: 53px;
        border: 3px solid #104d65;
        border-radius: 50%;
        padding: 0px;
        width: 26px;
        height: 26px;
    }
}


/*                        *\

    Shadows for entities

\*                        */


.hero:before {
    /* content: ""; */
    background: linear-gradient(272deg, #ff000000, #00000059 16%, #ff000000 93%);
    background: #00000036;
    height: 16px;
    width: 9px;
    position: absolute;
    top: 8px;
    left: 3px;
    transform: rotate(319deg);
    border-radius: 20px;
    z-index: -1;

}
.hero.tree{
    width:40px;
    height:40px;
}

.tree:before {
    /* content: ""; */
    background: #00000036;
    height: 26px;
    width: 11px;
    position: absolute;
    top: 17px;
    left: 2px;
    transform: rotate(322deg);
    border-radius: 20px;
    z-index: -1;
}
.craft-item{
    background: #0b191ab3;
    border-radius: 3px;
    padding: 5px;
    margin: 3px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position:relative;
    margin-bottom: 8px;
    font-style: unset !important;
    font-weight: normal !important;
    border: 1px solid transparent;

}
.craft-item:hover {
    background: #0f2325b3;
    text-decoration: none;
    border: 1px solid #ffffff26;
}
.item-icon{
    background: #00000069;
    padding: 5px;
    box-sizing: unset;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: 3px double #ffffff14;
}
.item-price {
    position: absolute;
    right: 5px;
    top: 22px;
    font-weight: bold;
    font-family: 'Montserrat';
    color: #e5bc39;
    display: flex;
    justify-content: center;
    align-items: center;
}
.items-required{
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #b8b979;
    font-family: 'Montserrat';
    font-style: italic;
    margin-top: 8px;
    border-top: 1px solid #b51f1f8a;
    padding: 3px;
}
.crafting-item-name{
    padding: 10px;
    color: #9fa26b;
    font-size: 14px;
    font-family: 'Montserrat';
}

span.stat-number {
    color: #f7c633;
    font-weight: bold;
    font-family: 'Montserrat';
}
.menu-list {
    background: #0a0a0afa;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ffaf36;
    border-radius: 4px;
    gap: 10px;
    font-family: 'Montserrat';
}
.skill-display {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 0 100%;
    padding: 2px;
    justify-content: space-between;
    position:relative;
}

.skill-info {
    display: flex;
    align-items: center;
    gap: 8px;
}
.skill-info img {
    border-radius: 5px;
    border: 1px solid #f2a835fc;
}
a.skill-btn {
    background: rgba(255, 0, 0, 0);
    display: inline-block;
    padding: 6px;
    margin: 3px;
    width: 85px;
    border-radius: 4px;
    text-align: center;
    color: white;
    font-weight: normal;
    text-shadow: 0 0 3px black;
}
.skill-description {
    position: absolute;
    background: #121212;
    bottom: 42px;
    max-width: 350px;
    border-radius: 4px;
    padding: 10px;
    right: 0;
    border: 1px solid #ffffff59;
    color: #e3e1e1;
}
.skill-description::after {
    content: "";
    width: 20px;
    height: 20px;
    bottom: -10.5px;
    background: #121212;
    position: absolute;
    z-index: 2;
    transform: rotate(45deg);
    right: 38px;
    border: 1px solid #ffffff59;
    border-left: 0;
    border-top: 0;
}
.skill-description::after{

}
a.skill-btn:hover{
    filter: brightness(1.2);
    text-decoration: none;
}
.skill-btn.use{
    background: #7b7243;
}
.skill-btn.cancel{
    background: #b45252;
}
.skill-btn.info{
    background: #567b79;
}

.snowflake {
	position: absolute;
	display: block;
	position: absolute;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	background-image: -webkit-radial-gradient(
		center,
		circle farthest-corner,
		rgba(255, 255, 255, 1) 40%,
		rgba(255, 255, 255, 0) 100%
	);
	background-image: -moz-radial-gradient(
		center,
		circle farthest-corner,
		rgba(255, 255, 255, 1) 40%,
		rgba(255, 255, 255, 0) 100%
	);
	background-image: -ms-radial-gradient(
		center,
		circle farthest-corner,
		rgba(255, 255, 255, 1) 40%,
		rgba(255, 255, 255, 0) 100%
	);
	background-image: radial-gradient(
		center,
		circle farthest-corner,
		rgba(255, 255, 255, 1) 40%,
		rgba(255, 255, 255, 0) 100%
	);
}

#snow {
	position: absolute;
	width: 100%;
	height: 100%;
}

a.btn {
    background: #108b5f;
    padding: 3px;
    display: block;
    max-width: 200px;
    border-radius: 6px;
    color: white !important;
    transition: .5s;
    font-size: 12px;
    font-family: Montserrat;
    letter-spacing: 1.2px;
    font-style: normal;
}
.btn:hover{
    background: #117551;
}
.btn.disabled{
    pointer-events:none;
    background: #6d6b6b;
}


.div.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.potion-row {
    flex: 1 1 31%;
    background: #06191f;
    margin: 5px;
    padding: 9px;
    border-radius: 3px;
    line-height: 20px;
}
.potion-row b {
    text-align: center;
    display: block;
    color: #d6a321;
    font-family: 'Montserrat';
    letter-spacing: -.2px;
}

.buy-dmd {
    display: flex;
    justify-content: center;
}
.dmd-section:first-child {
    border-right: 1px solid #ffffff42;
}
.dmd-section {
    flex: 1 0 50%;
    text-align: center;
    /* border: 1px solid #ffffff0f; */
    border-right: 0;
    border-left: 0;
    padding: 0px;
    font-family: 'Montserrat';
}
a.buy-dmd-btn {
    color: snow;
    background: #0a2b37;
    padding: 5px 10px;
    border-radius: 3px;
    font-weight: normal;
    font-family: 'Montserrat';
}
.dmd-display {
    text-align: justify;
    padding: 30px 20px;
    margin: 8px;
    background: #1f384b;
    color: white;
    border-radius: 6px;
    border: 3px double #182c3b;
    box-shadow: inset -1px -5px 7px 0px #1c2c38;
    background: url(../images/fillers/dmd-shop-bg.png);
    background-size: 1200px;
}

.item-description {
    text-align: left;
    border-top: 1px dashed #ffffff33;
    padding-top: 10px;
    color: #94cddb;
    font-family: 'Montserrat';
    font-weight: bold;
}
.item-name {
    font-size: 16px;
    color: #b7adff;
    border-bottom: 1px dashed #ffffff2b;
    padding-bottom: 10px;
}
.buy-btn {
    background: #4dc36b00;
    border: solid 1px #4d79c3;
    color: #4981ba;
    font-family: 'Montserrat';
    font-weight: bold;
    cursor: pointer;
    transition: .5s;
}

.buy-btn:hover {
    background:#4b77be3d !important;
}

.npc-item {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    background: #ffffff14;
    padding: 8px;
    border-radius: 3px;
    color: #ffe9b3;
}

.npc-item-info {
    font-size: 16px;
    text-align: center;
    flex: 1 0 100%;
}

.npc-item-price {
    flex: 1 0 50%;
    display: flex;
    align-items: center;
    gap: 3px;
}

.npc-items-left {
    background: #b72e27;
    border-radius: 4px;
    padding: 4px;
    color: white;
    letter-spacing: 1.3px;
}

.npc-item-price a {
    background: #a78619;
    padding: 3px 10px;
    border-radius: 3px;
    color: white !important;
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: bold !important;
    text-shadow: 1px 1px 3px BLACK;
    transition:.3s;
}

.npc-item-price a:hover {
    background:#786113;
    margin-bottom:-10px;
}
input#buy-amm {
    background: transparent;
    border: 1px solid #4b76bd;
    color: #4b76bd;
    font-weight: bold;
    padding: 11px;
}
.cant-afford{
    color:red !important;
}


.faction-select{
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1f1e1e99;
    padding: 8px;
    border-radius: 6px;
    margin: 0 0;
    border: 1px solid #ffffff2b; 
    margin: 5px 0;
}
.faction-select a{
    background: #3e7263c7;
    padding: 10px;
    border-radius: 2px;
    flex: 0 0 20%;
    text-align: center;
    font-weight: normal;
    text-decoration: none !important;
    justify-items: end;
    margin-left: auto;
    margin-right: 20px;
    transition: .5s;
}
.faction-select a:hover{
    color: white;
    background: #3e7263;
    box-shadow: inset 0 0 4px 1px #000000b8;
}
.faction-select a.disabled {
    color: #bbbbbb !important;
    background: #121212ab !important;
    pointer-events: none !important;
}



.list-container {
    background: #5554544d;
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* width: 80%; */
    /* max-width: 400px; */
    padding: 20px;
    text-align: center;
    margin: 15px;
}

.list-title {
    font-size: 1em;
    color: #f4f3f3;
    margin-bottom: 10px;
    text-align: left;
    font-style: italic;
    padding-left: 15px;
}
.news ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news li {
    background: #313232;
    margin: 5px 0;
    padding: 15px;
    border-radius: 3px;
    transition: background 0.6s ease;
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex-flow: row wrap;
}

.news li:hover {
    background: #474848d4;
}

.news li::before {
    content: "♦";
    color: #bcc6ca;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-right: 0.5em;
}
.news-elem{
    flex-grow: 1;
}
.flex-break{    
    flex: 0 0 83%;
    text-align: left;
}
.update-v{
    flex: 0 0 50px;
}
small.news-elem {
    flex: 1 0 100%;
    text-align: left;
    margin-top: 6px;
    border-top: 1px dashed #ffffff3d;
    padding: 5px;
    padding-bottom: 0;
}
.paginator{
    padding: 2px 15px;
    text-align: center;
}
.paginator a{
    pointer-events: none;
    display: inline-flex;
    width: 25px;
    height: 25px;
    background: #1b5772;
    color: #d6d1d1;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border-radius: 3px;
}
.paginator a:hover{
    text-decoration: none;
    font-style: normal;
    background: #20698a;
    box-shadow: inset 0 0 2px 2px #00000085;
}
.paginator .page{
    pointer-events:all;
}
.paginator .active{
    background: #042432;
}
.paginator .seperator{
    background: #042432;
}
/*
.tile{ destroyable
    padding: 12px 5px;
    background: azure;
    color: black;
    margin: 3px;
    text-align: center;
    flex: 0 0 9.11%;
}
.tileset{
    max-width:max-content !important;
}

body{
    max-width:unset;
}

.map::first-child{
    flex: 1 0 20%;
}
.tileset .tile{
    flex: 0 0 7.5%;
    border-radius: 4px;
} */