/*
SIDEBAR BG BOJA:    #31353D
SIDEBAR TEXT BOJA:  #c4c4c4

SITE BG BOJA:       #282c33
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');

body {
    background-color: #282c33;
    font-family: 'Poppins', sans-serif;
}

.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1 !important;
    /* Ensure the background container is behind other content */
    background-image: url(assets/backgrounds/dark-forest.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(3px);
    /* Initial blur effect */
    transition: filter 1s ease;
    /* Add transition for smooth effect */
}

hr {
    background-color: #44474d;
}

.online-counter {
    position: absolute;
    left: 265px;
    bottom: 10px;
    color: #afafaf;
    width: 100px;
    font-size: 12px;
}

.center {
    text-align: center;
}

.poor {
    color: #9d9d9d !important;
}

.common {
    color: #ffffff !important;
}

.uncommon {
    color: #1eff00 !important;
}

.rare {
    color: #0070dd !important;
}

.epic {
    color: #a335ee !important;
}

.legendary {
    color: #ff8000 !important;
}

.poor-gradient {
    background: rgb(157, 157, 157);
    background: radial-gradient(circle, rgba(157, 157, 157, .7) 0%, rgba(0, 0, 0, 0.15) 100%);
    transition-duration: .3s;
    border: 1px solid #353535;
}

.common-gradient {
    background: rgb(255, 255, 255);
    background: radial-gradient(circle, rgba(255, 255, 255, .7) 0%, rgba(0, 0, 0, 0.15) 100%);
    transition-duration: .3s;
    border: 1px solid #353535;
}

.uncommon-gradient {
    background: rgb(30, 255, 0);
    background: radial-gradient(circle, rgba(30, 255, 0, .7) 0%, rgba(0, 0, 0, 0.15) 100%);
    transition-duration: .3s;
    border: 1px solid #353535;
}

.rare-gradient {
    background: rgb(0, 112, 221);
    background: radial-gradient(circle, rgba(0, 112, 221, .7) 0%, rgba(0, 0, 0, 0.15) 100%);
    transition-duration: .3s;
    border: 1px solid #353535;
}

.epic-gradient {
    background: rgb(163, 53, 238);
    background: radial-gradient(circle, rgba(163, 53, 238, .7) 0%, rgba(0, 0, 0, 0.15) 100%);
    transition-duration: .3s;
    border: 1px solid #353535;
}

.legendary-gradient {
    background: rgb(255, 128, 0);
    background: radial-gradient(circle, rgba(255, 128, 0, .7) 0%, rgba(0, 0, 0, 0.15) 100%);
    transition-duration: .3s;
    border: 1px solid #353535;
}

.poor-gradient:hover {
    border-color: rgb(157, 157, 157);
    background: radial-gradient(circle, rgba(157, 157, 157, 1) 0%, rgba(0, 0, 0, 0.15) 100%);
}

.common-gradient:hover {
    border-color: rgb(255, 255, 255);
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.15) 100%);
}

.uncommon-gradient:hover {
    border-color: rgb(30, 255, 0);
    background: radial-gradient(circle, rgba(30, 255, 0, 1) 0%, rgba(0, 0, 0, 0.15) 100%);
}

.rare-gradient:hover {
    border-color: rgb(0, 112, 221);
    background: radial-gradient(circle, rgba(0, 112, 221, 1) 0%, rgba(0, 0, 0, 0.15) 100%);
}

.epic-gradient:hover {
    border-color: rgb(163, 53, 238);
    background: radial-gradient(circle, rgba(163, 53, 238, 1) 0%, rgba(0, 0, 0, 0.15) 100%);
}

.legendary-gradient:hover {
    border-color: rgb(255, 128, 0);
    background: radial-gradient(circle, rgba(255, 128, 0, 1) 0%, rgba(0, 0, 0, 0.15) 100%);
}

.poor-claimed {
    border-color: rgb(157, 157, 157);
}

.common-claimed {
    border-color: rgb(255, 255, 255);
}

.uncommon-claimed {
    border-color: rgb(30, 255, 0);
}

.rare-claimed {
    border-color: rgb(0, 112, 221);
}

.epic-claimed {
    border-color: rgb(163, 53, 238);
}

.legendary-claimed {
    border-color: rgb(255, 128, 0);
}

.cooking {
    color: #f5a623;
}

.alchemy {
    color: #9b59b6;
}

.inscription {
    color: #cf9c7c;
}


.poor-border {
    border: 5px solid;
    border-color: #9d9d9d !important;
}

.common-border {
    border: 5px solid;
    border-color: #ffffff !important;
}

.uncommon-border {
    border: 5px solid;
    border-color: #1eff00 !important;
}

.rare-border {
    border: 5px solid;
    border-color: #0070dd !important;
}

.epic-border {
    border: 5px solid;
    border-color: #a335ee !important;
}

.legendary-border {
    border: 5px solid;
    border-color: #ff8000 !important;
}

.base {
    color: #14a800;
}

.bonus {
    color: #eeff00;
}

.weapondamage {
    color: #ffffffcc;
    font-weight: bold;
}

.skilldamage {
    color: #ff5b7b;
    font-weight: bold;
}

.agility {
    color: #f5bb3d;
    font-weight: bold;
}

.strength {
    color: #f53d3d;
    font-weight: bold;
}

.intellect {
    color: #0070dd;
    font-weight: bold;
}

.critical {
    color: #ff0000;
    font-weight: bold;
}

.special {
    color: #ffae00;
}

.warning {
    color: #ff0000;
}

@keyframes swing {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(10deg);
    }

    30% {
        transform: rotate(0deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(0deg);
    }

    60% {
        transform: rotate(5deg);
    }

    70% {
        transform: rotate(0deg);
    }

    80% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes sonar {
    0% {
        transform: scale(0.9);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

body {
    font-size: 0.9rem;
}

.page-wrapper .sidebar-wrapper,
.sidebar-wrapper .sidebar-brand>a,
.sidebar-wrapper .sidebar-dropdown>a:after,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before,
.sidebar-wrapper ul li a i,
.page-wrapper .page-content,
.sidebar-wrapper .sidebar-search input.search-menu,
.sidebar-wrapper .sidebar-search .input-group-text,
.sidebar-wrapper .sidebar-menu ul li a,
.map-content,
#show-sidebar,
#close-sidebar {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/*----------------page-wrapper----------------*/

.page-wrapper {
    /*height: 100vh;*/
}

.page-wrapper .theme {
    width: 40px;
    height: 40px;
    display: inline-block;
    border-radius: 4px;
    margin: 2px;
}

.page-wrapper .theme.mmo-theme {
    background: #ff0000;
}

/*----------------toggeled sidebar----------------*/

.page-wrapper.toggled .sidebar-wrapper {
    left: 0px;
}

@media screen and (min-width: 768px) {
    .page-wrapper.toggled .page-content {
        padding-left: 300px;
    }

    .page-wrapper.toggled .map-content {
        padding-left: 260px;
    }
}

/*----------------show sidebar button----------------*/
#show-sidebar {
    position: fixed;
    left: 0;
    top: 10px;
    border-radius: 0 4px 4px 0px;
    width: 35px;
    transition-delay: 0.3s;
}

#show-sidebar img {
    margin-left: -8px;
}

.page-wrapper.toggled #show-sidebar {
    left: -40px;
}

/*----------------sidebar-wrapper----------------*/

.sidebar-wrapper {
    width: 260px;
    height: 100%;
    max-height: 100%;
    position: fixed;
    top: 0;
    left: -300px;
    z-index: 999;
}

.sidebar-wrapper ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sidebar-wrapper a {
    text-decoration: none;
}

/*----------------sidebar-content----------------*/

.sidebar-content {
    max-height: calc(100% - 30px);
    height: calc(100% - 30px);
    overflow-y: auto;
    position: relative;
}

.sidebar-content.desktop {
    overflow-y: hidden;
}

/*--------------------sidebar-brand----------------------*/

.sidebar-wrapper .sidebar-brand {
    padding: 10px 20px;
    display: flex;
    align-items: center;
}

.sidebar-wrapper .sidebar-brand>a {
    text-transform: uppercase;
    font-weight: bold;
    flex-grow: 1;
}

.sidebar-wrapper .sidebar-brand #close-sidebar {
    cursor: pointer;
    font-size: 20px;
}

/*--------------------sidebar-header----------------------*/

.sidebar-wrapper .sidebar-header {
    padding: 20px;
    overflow: hidden;
}

.sidebar-wrapper .sidebar-header .user-pic {
    float: left;
    width: 60px;
    padding: 2px;
    border-radius: 12px;
    margin-right: 15px;
    overflow: hidden;
}

.sidebar-wrapper .sidebar-header .user-pic img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.sidebar-wrapper .sidebar-header .user-info {
    float: left;
    display: block;
    width: 65%;
}

.sidebar-wrapper .sidebar-header .user-info>span {
    display: block;
}

.sidebar-wrapper .sidebar-header .user-info .user-class {
    font-size: 12px;
}

.sidebar-wrapper .sidebar-header .user-info .user-status {
    font-size: 11px;
    margin-top: 4px;
}

.sidebar-wrapper .sidebar-header .user-info .user-status i {
    font-size: 8px;
    margin-right: 4px;
    color: #5cb85c;
}

/*-----------------------sidebar-search------------------------*/

.sidebar-wrapper .sidebar-search>div {
    padding: 10px 20px;
}

/*----------------------sidebar-menu-------------------------*/

.sidebar-wrapper .sidebar-menu {
    padding-bottom: 10px;
}

.sidebar-wrapper .sidebar-menu .header-menu span {
    font-weight: bold;
    font-size: 14px;
    padding: 15px 20px 5px 20px;
    display: inline-block;
}

.sidebar-wrapper .sidebar-menu ul li a {
    display: inline-block;
    width: 100%;
    text-decoration: none;
    position: relative;
    padding: 2px 30px 2px 20px;
}

.sidebar-wrapper .sidebar-menu ul li a i {
    margin-right: 10px;
    font-size: 12px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
}

.sidebar-wrapper .sidebar-menu ul li a:hover>i::before {
    display: inline-block;
    animation: swing ease-in-out 0.5s 1 alternate;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown>a:after {
    font-weight: 900;
    content: "";
    font-style: normal;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    background: 0 0;
    position: absolute;
    right: 15px;
    top: 14px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
    padding: 5px 0;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li {
    padding-left: 25px;
    font-size: 13px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before {
    /*content: "-";*/
    font-weight: 400;
    font-style: normal;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 10px;
    font-size: 8px;
}

.sidebar-wrapper .sidebar-menu ul li a span.label,
.sidebar-wrapper .sidebar-menu ul li a span.badge {
    float: right;
    margin-top: 8px;
    margin-left: 5px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label {
    float: right;
    margin-top: 0px;
}

.sidebar-wrapper .sidebar-menu .sidebar-submenu {
    display: none;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active>a:after {
    transform: rotate(90deg);
    right: 17px;
}

/*--------------------------side-footer------------------------------*/

.sidebar-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
    justify-content: space-evenly;
}

.sidebar-footer>a {
    flex-grow: 1;
    text-align: center;
    height: 30px;
    line-height: 22px;
    position: relative;
}

.badge-sonar {
    display: inline-block;
    background: #980303;
    border-radius: 50%;
    height: 8px;
    width: 8px;
    position: absolute;
    top: 0;
}

.badge-sonar:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid #980303;
    opacity: 0;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    animation: sonar 1.5s infinite;
}

/*--------------------------page-content-----------------------------*/

.page-wrapper .page-content {
    display: inline-block;
    width: 100%;
    padding-left: 0px;
    padding-top: 20px;
    padding-right: 40px;
}

.page-wrapper .page-content>div {
    padding: 20px 40px;
}

.page-wrapper .page-content {
    overflow-x: hidden;
}

/*------scroll bar---------------------*/

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

::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}

::-webkit-scrollbar-thumb {
    background: #525965;
    border: 0px none #ffffff;
    border-radius: 0px;
}

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

::-webkit-scrollbar-thumb:active {
    background: #525965;
}

::-webkit-scrollbar-track {
    background: transparent;
    border: 0px none #ffffff;
    border-radius: 50px;
}

::-webkit-scrollbar-track:hover {
    background: transparent;
}

::-webkit-scrollbar-track:active {
    background: transparent;
}

::-webkit-scrollbar-corner {
    background: transparent;
}


/*-----------------------------mmo-theme-------------------------------------------------*/
/*Boja lijevo sidebara*/
.mmo-theme .sidebar-wrapper {
    background: #31353D;
}

.mmo-theme .sidebar-wrapper .sidebar-header,
.mmo-theme .sidebar-wrapper .sidebar-search,
.mmo-theme .sidebar-wrapper .sidebar-menu {
    border-top: 1px solid #3a3f48;
}

.mmo-theme .sidebar-wrapper .sidebar-search input.search-menu,
.mmo-theme .sidebar-wrapper .sidebar-search .input-group-text {
    border-color: transparent;
    box-shadow: none;
}

/*boja teksta u sidebaru*/
.mmo-theme .sidebar-wrapper .sidebar-header .user-info .user-class,
.mmo-theme .sidebar-wrapper .sidebar-header .user-info .user-status,
.mmo-theme .sidebar-wrapper .sidebar-search input.search-menu,
.mmo-theme .sidebar-wrapper .sidebar-search .input-group-text,
.mmo-theme .sidebar-wrapper .sidebar-brand>a,
.mmo-theme .sidebar-wrapper .sidebar-menu ul li a,
.mmo-theme .sidebar-footer>a {
    color: #c4c4c4;
}

.mmo-theme .sidebar-wrapper .sidebar-menu ul li:hover>a,
.mmo-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active>a,
.mmo-theme .sidebar-wrapper .sidebar-header .user-info,
.mmo-theme .sidebar-wrapper .sidebar-brand>a:hover,
.mmo-theme .sidebar-footer>a:hover i {
    color: #ebebeb;
}

.page-wrapper.mmo-theme.toggled #close-sidebar {
    color: #c4c4c4;
}

.page-wrapper.mmo-theme.toggled #close-sidebar:hover {
    color: #ffffff;
}

.mmo-theme .sidebar-wrapper ul li:hover a i,
.mmo-theme .sidebar-wrapper .sidebar-dropdown .sidebar-submenu li a:hover:before,
.mmo-theme .sidebar-wrapper .sidebar-search input.search-menu:focus+span,
.mmo-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active a i {
    color: #ffe600;
    text-shadow: 0px 0px 10px rgba(232, 255, 22, 0.5);
}

.mmo-theme .sidebar-wrapper .sidebar-menu ul li a i,
.mmo-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown div,
.mmo-theme .sidebar-wrapper .sidebar-search input.search-menu,
.mmo-theme .sidebar-wrapper .sidebar-search .input-group-text {
    background: #3a3f48;
}

.mmo-theme .sidebar-wrapper .sidebar-menu .header-menu span {
    color: #6c7b88;
}

.mmo-theme .sidebar-footer {
    background: #3a3f48;
    box-shadow: 0px -1px 5px #282c33;
    border-top: 1px solid #464a52;
}

.mmo-theme .sidebar-footer>a:first-child {
    border-left: none;
}

.mmo-theme .sidebar-footer>a:last-child {
    border-right: none;
}

.sidebar-menu .selected {
    color: #ffe600;
    text-shadow: 0px 0px 10px rgba(232, 255, 22, 0.5);
}

/*[Stats/Equipment]*/
.index-plyerstats .list-group-item-inventory {
    background-color: unset;
    padding: 2px;
    border-color: #31353D;
}

.index-plyerstats .buff-icon {
    margin-left: .4em;
    margin-right: .4em;
    display: inline-block;
    max-width: 42px;
    max-height: 42px;
}

.unused-skill {
    color: #cfcfcf;
}

.list-group-item:first-child {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.game-menu ul li img {
    width: 24px;
    height: 24px;
}

.game-menu-background {
    padding: 2px;
    border-radius: 4px;
    margin-right: 10px;
    background-color: #3B4047;
    display: inline-block;
}

.game-menu ul li:hover img {
    filter: brightness(1.2);
}

.current .game-menu-background {
    background-color: #4b515a;
}

.current a {
    background-color: #4b515a52;
}

.game-menu ul li:hover .game-menu-background {
    background-color: #4b515a;
    transition-duration: .3s;
}

.character-stats img {
    display: inline-block;
}

.character-stats ul span {
    float: right;
}

.character-stats ul li {
    transition-duration: .1s;
    border-radius: 4px;
}

.character-stats ul li:hover {
    background-color: #3B4047;
}

.character-stats ul li.itemactive {
    background-color: #3B4047;
}

.inventory-item {
    cursor: pointer;
}

.inventory-item img {
    height: 18px;
    width: 18px;
}

/* ---------------------------------- EQUIPPED LAYOUT ------------------------------------*/
.equipped-item {
    display: block;
    background-color: #4b515a;
    height: 64px;
    width: 64px;

    min-width: 64px;
    min-height: 64px;

    transition-duration: .3s;
}

.equipped-item:hover {
    filter: brightness(1.2);
}

.equipped-button:focus,
.equipped-button:active {
    outline: none !important;
    box-shadow: none;
    background-color: #3B4047;
}

.equipped-button {
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    color: #535353;
    font-size: 1em;
    border-radius: 2px;

    border: 2px solid transparent;

}

.equipped-button img {
    height: 48px;
    width: 48px;
    margin: 0 auto;
    margin-top: 8px;
}

.inventory-item-background {
    display: inline-block;
    background-color: #4b515a;
    border-radius: 4px;
    padding: 0 0px 0 4px;
}

.inventory-list {
    padding-right: 0;
    min-height: 45vh;
    /*QQ WAS 40vh */
}

.item-power {
    text-transform: uppercase;
    position: absolute;
    bottom: 0;
    margin-bottom: -14px;
}

.equipped-poor {
    border: 2px solid #9d9d9d !important;
}

.equipped-common {
    border: 2px solid #ffffff !important;
}

.equipped-uncommon {
    border: 2px solid #1eff00 !important;
}

.equipped-rare {
    border: 2px solid #0070dd !important;
}

.equipped-epic {
    border: 2px solid #a335ee !important;
}

.equipped-legendary {
    border: 2px solid#ff8000 !important;
}

.not-equipped {
    filter: grayscale(1);
}

/* ---------------------------------- EQUIPPED LAYOUT ------------------------------------*/

.btn-inventory span {
    margin-top: 6px;
    white-space: nowrap;
    /* eldarx */
}

.btn-inventory {
    font-size: 0.9rem;
    border-radius: 2px;
    width: 100%;
    display: flex;
    justify-content: start;
    padding: 2px;
    color: #535353;
    font-size: 1em;
}

.btn-inventory span {
    margin-left: 4px;
}

.btn-inventory img {
    height: 34px;
    width: 34px;
    margin-right: 4px
}

.btn-inventory:focus,
.btn-inventory:active {
    outline: none !important;
    box-shadow: none;
    background-color: #3B4047;
}

.btn-inventory:hover {
    background-color: #3B4047;
    color: inherit;
}

.btn-inventory .disabled {
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

/*[World Map]*/
.worldmap img {
    width: 100vw;
    height: 100vh;
}

.bigMap {
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
}

.bigMap::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

.map-content {
    padding-left: 0px;
    /* Nula kada se ugasi Sidebar inace 260px */
}

.playerInfo-map {
    position: fixed;
    top: 0;
    left: 0;

    width: 120px;
    height: 140px;
    border-bottom-right-radius: 35%;

    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;

    -webkit-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.75);

    color: #f1f3f7;
}

.playerInfo-map .world-avatar {
    display: block;
    margin: 0 auto;
    margin-top: .3em;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #666666a2;
    border: 1px solid rgba(255, 255, 255, 0.445);
}

.playerInfo-map span {
    font-size: 11px;
}

.playerInfo-map span img {
    height: 16px;
}

.battle-button {
    width: 220px;
}

/* btn-battle */
.btn-battle {
    color: #fff;
    background-color: #1B1F23;
    border-color: #525252;
}

.btn-battle:hover {
    color: #fff;
    background-color: #1B1F23;
    border-color: #8f8f8f;
}

.btn-battle:focus,
.btn-battle.focus {
    color: #fff;
    background-color: #1B1F23;
    border-color: #8f8f8f;
    box-shadow: 0 0 0 0.1rem rgba(128, 128, 128, 0.5);
}

.btn-battle.disabled,
.btn-battle:disabled {
    color: #fff;
    background-color: #1B1F23;
    border-color: #1B1F23;
}

.btn-battle:not(:disabled):not(.disabled):active,
.btn-battle:not(:disabled):not(.disabled).active,
.show>.btn-battle.dropdown-toggle {
    color: #fff;
    background-color: #1B1F23;
    border-color: #1B1F23;
}

.btn-battle:not(:disabled):not(.disabled):active:focus,
.btn-battle:not(:disabled):not(.disabled).active:focus,
.show>.btn-battle.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.1rem rgba(128, 128, 128, 0.5);
}

.battle-divider {
    height: 0;
    margin: 0.1rem 0;
    padding: 0;
    overflow: hidden;
    border-top: 1px solid #444444;
}

.heal-notification {
    animation-name: heal;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    border-radius: 50%;
    cursor: pointer;
}

@keyframes heal {
    0% {
        filter: brightness(1);
        -webkit-filter: brightness(1);
    }

    50% {
        filter: brightness(0.4);
        -webkit-filter: brightness(0.4);
    }

    100% {
        filter: brightness(1);
        -webkit-filter: brightness(1);
    }
}

/*[Bootstrap Edits]*/
.progress {
    border-radius: 15px;
    background-color: hsla(0, 0%, 0%, 0.3);
}

.btn-smol {
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
}

/* END BOOTSTRAP EDITS */

.bg-mmo {
    background-color: #f53d3d;
}

.bg-construction {
    background-color: #c40041;
    font-weight: bold;
    text-shadow: 0px 0px 1px black;
}

.bg-upgrade {
    background-color: #c4004b;
    font-weight: bold;
    text-shadow: 0px 0px 1px black;
}

.health-progress {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.energy-progress {
    height: 12px !important;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.energybar {
    background-color: #f5bb3d;
    color: black;
}

.energybarWarrior {
    background: rgb(255, 149, 0);
    background: linear-gradient(95deg, rgba(255, 149, 0, 1) 0%, rgba(255, 0, 0, 1) 100%);
    background-size: 400% 400%;
}

.energybarAnimation {
    animation: gradientAnimation 5s infinite;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }

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

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

.energybarRogue {
    background-color: #f5bb3d;
}

.energybarWizard {
    background-color: #3d6ef5;
}

.energybar p {
    color: white;
    font-size: 12px;
    text-shadow: 1px 0px 1px rgba(0, 0, 0, 1);

}

.energy-cost {
    font-size: 12px;
    text-align: center;
}

.noEnergy {
    filter: grayscale(100%) !important;
    cursor: not-allowed !important;
}

.dropdown-menu {
    background-color: #31353D;
    font-size: 12px;
    padding: 0;
    border: .2px solid #31353D;
    border-radius: 0;
    background-color: rgba(28, 31, 36, 0.99);
    color: #c4c4c4;
}

.dropdown-item {
    background-color: inherit;
    color: #fff;
    margin: 0;
    padding: 6px;
}

.dropdown-item:hover {
    background-color: rgba(38, 42, 48, 0.99);
    color: #fff;
}

.dropdown-item:focus,
.dropdown-item:active {
    background-color: inherit;
    color: #fff;
}

.small {
    font-size: .6em;
}

.list-group a:hover,
a:link,
a:visited,
a:active {
    text-decoration: none;
    color: unset;
}

.list-group li {
    border: none;
}

.toast-error {
    -webkit-box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 0.45);
    box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 0.45);
}

.toast-success {
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 255, 55, 0.45);
    box-shadow: 0px 0px 5px 0px rgba(0, 255, 55, 0.45);
}

.toast,
.toast-header {
    background-color: #1b1b1b;
}

.toast-header strong {
    color: #fff;
    font-size: 1rem;
}

.toast-header .close {
    color: #fff;
    opacity: 1;
}

.close span {
    border-radius: 4px;
    padding: 0 8px;
    color: red;
    text-shadow: 0 1px 0 #ff0d0d;
}

.toast-header img {
    width: 20px;
    height: 20px;
}

.toast {
    min-width: 340px;
    max-width: 340px;
    max-height: 140px;
}

/*[Tooltip]*/
.tooltip img {
    width: 48px !important;
    height: 48px !important;
}

.tooltip-item-stats {
    margin: 0;
    padding: 4px;
    list-style-type: none;
    font-size: 14px;
    line-height: 1.2rem;
}

.tooltip-item-name {
    font-size: 16px;
    font-weight: 500;
}

.tooltip-item-drop {
    color: #00f000;
}

.tooltip-item-req {
    font-size: 12px;
}

.tooltip-cost {
    font-size: 12px;
    color: yellow;
    text-align: center;
}

.inscription-box {
    display: block;
    text-align: center;
}

.inscription-box img {
    width: 20px;
    height: 20px;
}


.shift {
    display: block;
    width: 24px;
    margin: auto;
}

.tippy-box {
    min-width: 240px;
    border: .2px solid #31353D;
    border-radius: 0;
    background-color: rgba(28, 31, 36, 0.99);

    /*
    border-image-slice:
        31 33 27 27;
    border-image-width:
        14px 14px 14px 14px;
    border-image-outset:
        7px 7px 7px 7px;
    border-image-repeat:
        stretch stretch;
    border-image-source: url('assets/border.png')
    */
}

.tippy-box .icon {
    width: 22px;
    height: 22px;
}

.tippy-gem {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 32px;
    height: 32px;
    background-color: transparent;
    box-shadow: 0px 0px 7px 3px rgba(0, 0, 0, 1) inset;
    -webkit-box-shadow: 0px 0px 7px 3px rgba(0, 0, 0, 1) inset;
    -moz-box-shadow: 0px 0px 7px 3px rgba(0, 0, 0, 1) inset;
}

.tippy-gem img {
    padding: 2px;
}

.tooltip-item-gem {
    font-weight: bold;
    font-size: 12px;
}

.right {
    float: right !important;
}

.left {
    float: left !important;
}

.tooltip-attack-name {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.tooltip-attack-name span {
    position: absolute;
    right: 8px;
    top: 4px;
    font-size: 12px;
    font-weight: normal;
    color: #cfcfcf;
}

.tooltip-attack-description {
    font-size: 12px;
    color: #cfcfcf;
    text-align: center;
}

.attack-calculation {
    margin-top: 4px;
    font-size: 12px;
    display: none;
}

.enemy-actionbar {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    padding: 20px;
    box-shadow: 1px 1px 24px rgba(224, 224, 224, 0.2);
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.enemy-actionbar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90px;
    margin-left: 35px;
    margin-right: 35px;
    margin-top: 20px;
}

.enemy-actionbar-content .button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 6px;
    padding: 0;
    transition-duration: .3s;
    background-color: rgba(0, 0, 0, 0.8);
    flex-direction: column;
    width: 100px;
    max-width: 100px;
    font-size: 12px;

    border-radius: 4px;
    border: 10px solid;
    border-image: url(assets/border.png) 35 35 round;
    border-image-outset: 4px;
}

.enemy-actionbar-content .button img {
    max-width: 48px;
    transition-duration: .3s;
}

.enemy-actionbar-content .button:hover {
    background-color: rgb(0, 0, 0);
}

.topbar {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    padding: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.topbar-content {
    width: 100%;
    text-align: center;
}

.topbar-content .progress {
    height: 24px;
    margin-bottom: 4px;
}

.actionbar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    padding: 20px;
    padding-bottom: 28px;
    padding-top: 4px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(19, 19, 19, 0.9);
    box-shadow: 1px 1px 24px rgba(255, 255, 255, 0.4);
}

.actionbar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 120px;
    margin-left: 35px;
    margin-right: 35px;
    margin-bottom: 20px;
}

.actionbar-content .button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 6px;
    padding: 0;
    transition-duration: .3s;
    background-color: rgba(0, 0, 0, 0.8);
    flex-direction: column;
    width: 100px;
    max-width: 100px;
    font-size: 12px;

    border-radius: 4px;
    border: 10px solid;
    border-image: url(assets/border.png) 35 35 round;
    border-image-outset: 4px;
    outline: 0;
}

.cooldown {
    filter: grayscale(100%);
    /* Convert image to black and white */
    pointer-events: none;
    /* Disable button clicks */
    background-color: red;
}

.actionbar-content .button img {
    max-width: 48px;
    transition-duration: .3s;
}

.actionbar-content .button:hover {
    background-color: rgb(0, 0, 0);
}

.actionbar-content .button:hover img {
    transform: scale(1.1);
    /* Zoom in the image on hover */
}

.proc {
    float: right !important;
    font-size: 13px;
    color: #60b2ff;
    margin: 0;
    padding: 0;
    line-height: 1px;
}

.bleed-tick {
    font-size: 12px;
    color: #a70707;
}

.button .text {
    margin-top: 6px;
    color: white;
}

.bottombar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    padding: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.bottombar-content {
    width: 100%;
    text-align: center;
}

.bottombar-content .progress {
    height: 24px;
    margin-bottom: 4px;
}

.arena-content {
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 4px;
    background-color: #31353D;
}

.arena-content img {
    width: 120px;
}

.fight-log {
    border-left: 1px solid rgba(75, 75, 75, 0.74);
}

.combatlog {
    font-size: 14px;
    line-height: .7em;
    /*background-color: rgba(29, 29, 29, 0.8);*/
    border-radius: 8px;
}

.combatlog hr {
    margin: 0 auto;
    padding: 1px;
    color: rgba(255, 255, 255, 0.7);
    width: 50%;
}

.combat-text {
    height: 150px;
    overflow-y: scroll;
}

.combat-text .list-group-item-inventory {
    background-color: unset;
    padding: 6px;
    border-color: #31353D;
}


/*.combat-text hr {
    background-color: red;
    padding: 0;
    width: 240px;
    margin-top: 1px;
    margin-bottom: 1px;
}*/

.combat-user {
    color: #FFF;
}

.combat-enemy {
    color: #8d8d8d;
}

.monster-card {
    max-width: 500px;
    width: 500px;
    height: 525px;
    max-height: 525px;
    background-color: #000000;
    border-radius: 5px;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.monster-card img {
    transition: all 0.15s linear;
    width: 500px;
    height: 525px;
    transform: scale(1.1);
}

.monster-card .monster-name {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 36px;
    font-weight: bold;
    color: #FFF;
    padding: 15px 20px;
    background: linear-gradient(140deg, rgba(0, 0, 0, 0.4) 50%, rgba(255, 255, 0, 0) 50%);
    transition: all 0.15s linear;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);
}

.monster-card .monster-position {
    position: absolute;
    color: rgb(240, 240, 240);
    left: 30px;
    top: 70px;
    transition: all 0.15s linear;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);
}

.monster-card .monster-overview {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 50%, rgba(255, 255, 0, 0));
    color: #FFF;
    padding: 50px 0px 20px 0px;
    transition: all 0.15s linear;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);
}

.monster-card .monster-text {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);
}

.monster-card .monster-overview h3 {
    font-weight: bold;
}

.monster-card .monster-overview p {
    color: rgba(255, 255, 255, 0.7);
}

.monster-card:hover img {
    filter: brightness(80%);
}

.monster-card:hover .monster-name {
    padding-left: 25px;
    padding-top: 20px;
}

.monster-card:hover .monster-position {
    left: 35px;
}

.monster-card:hover .monster-overview {
    padding-bottom: 25px;
}

.monster-overview .progress {
    margin-bottom: -15px;
    margin-left: 15px;
    margin-right: 15px;
}

/* Ovo je samo text u monster HEALTH BARU */
#enemyHealth {
    color: white;
}

.progress-bar-title {
    position: absolute;
    text-align: center;
    line-height: 20px;
    /* line-height should be equal to bar height */
    overflow: hidden;
    color: #fff;
    right: 0;
    left: 0;
    top: 0;
}

.blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    /* Adjust the opacity as needed */
    backdrop-filter: blur(10px);
    /* Adjust the blur amount as needed */
    z-index: 9998;
    /* Place it below the above-all div */
}

.above-all {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background-color: rgb(0, 0, 0);
    width: 600px;
    height: 600px;
    /* A high value to ensure it appears above other content */
    /* Other styles for the above-all div */

    border-radius: 20%;
    border: 2px solid white;

    background-image: linear-gradient(0deg,
            hsl(0deg 0% 0%) 0%,
            hsl(0deg 100% 9%) 21%,
            hsl(0deg 100% 9%) 30%,
            hsl(0deg 100% 9%) 39%,
            hsl(0deg 100% 9%) 46%,
            hsl(0deg 100% 10%) 54%,
            hsl(358deg 100% 10%) 61%,
            hsl(355deg 100% 10%) 69%,
            hsl(351deg 100% 11%) 79%,
            hsl(348deg 100% 11%) 100%);
}

.above-all img {
    width: 500px;
}

.centered-image {
    position: relative;
    top: -120px;
    /* Adjust this value to move the image up */
    display: block;
    margin: 0 auto;
    /* Additional styles for the image */
}

.centered-text {
    margin-top: -100px;
    color: white;
    text-align: center;
}

.centered-text img {
    width: 140px;
    transition-duration: .4s;
}

.centered-text img:hover {
    filter: drop-shadow(0 0 0.75rem rgb(220, 133, 20));
}

.i24 {
    width: 24px !important;
    height: 24px !important;
}

.clear-span span {
    float: unset !important;
}

.stat-upgrade {
    cursor: pointer;
    border: 1px solid #14a800 !important;
    margin: -1px;
}

.stat-upgrade:hover {
    border-color: yellow !important;
}

.xp-bar-div {
    height: 1.8em;
}

/*.loot-progress {
    height: 6px;
    width: 460px;
    margin: 0 auto;
    background-color: #080808;
    border: 1px solid rgb(78, 78, 78);
}*/

.loot-name {
    position: absolute;
    top: 0;
    left: 0;

    color: white;
    margin: 4px 0 4px 12px;
    text-shadow: 1px 1px 3px #000000;
}

.loot-button {
    color: white;
}

.loot-button:focus,
.loot-button:active {
    outline: none !important;
    box-shadow: none;
}

.loot-button:hover {
    color: white;
    filter: brightness(120%);
}

.loot-progress-bar {
    background-color: #eeeeee;
}

.loot-item {
    position: absolute;
    color: rgb(240, 240, 240);
    margin-left: 4px;
    top: 40px;
    transition: all 0.15s linear;
    text-shadow: 1px 1px 3px #000000;
    font-size: 18px;
    padding: 8px;
}

.loot-item li {
    line-height: 1.5rem;
}

.additional-loot {
    color: #eeeeee;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid #353535;
    border-radius: .2em;
}

.additional-loot-container {
    /*min-height: 14em;*/
    max-height: 14em;
    overflow-y: scroll;
    padding-bottom: .2em;
}

.additional-loot .additional-loot-header {
    display: block;
    width: 100%;
    text-align: center;
    padding-top: .3em;
}

.additional-loot .additional-loot-box {
    border: 1px solid #353535;
    margin: .4em;
    border-radius: .2em;
    background-color: rgba(0, 0, 0, 0.6);
    transition-duration: .3s;
}

.additional-loot .additional-loot-box:hover {
    border: 1px solid #4d4d4d;
}

.card-poor {
    border: 8px solid #9d9d9d !important;
}

.card-common {
    border: 8px solid #ffffff !important;
}

.card-uncommon {
    border: 8px solid #1eff00 !important;
}

.card-rare {
    border: 8px solid #0070dd !important;
}

.card-epic {
    border: 8px solid #a335ee !important;
}

.card-legendary {
    border: 8px solid #ff8000 !important;
}

.border-hide {
    border: 8px solid black !important;
}

.no-loot {
    border: 8px solid black !important;
}

.blur {
    filter: blur(40px);
    transition: filter 3s ease
        /* You can adjust the blur radius */
}

/* Define the animation */
@keyframes fillProgressBar {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

/* Apply the animation to the progress bar */
.loot-progress-bar {
    animation: fillProgressBar 1s linear forwards;
}

.nofilter:hover img {
    filter: blur(60px);
}

.loot-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    padding: 20px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(19, 19, 19, 0.9);
    box-shadow: 1px 1px 24px rgba(255, 255, 255, 0.4);
}

.loot-bar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    margin-left: 35px;
    margin-right: 35px;
}

.loot-bar-content .button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 6px;
    padding: 0;
    transition-duration: .3s;
    background-color: rgba(0, 0, 0, 0.8);
    flex-direction: column;
    width: 100px;
    max-width: 100px;
    font-size: 12px;

    border-radius: 4px;
    border: 10px solid;
    border-image: url(assets/border.png) 35 35 round;
    border-image-outset: 4px;
    outline: 0;
}

.loot-bar-content .button img {
    max-width: 48px;
    transition-duration: .3s;
}

.loot-bar-content .button:hover {
    background-color: rgb(0, 0, 0);
}

.loot-bar-content .button:hover img {
    transform: scale(1.1);
    /* Zoom in the image on hover */
}

.item-value {
    color: rgb(240, 240, 240);
    font-size: inherit;
    font-size: 18px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 1px 1px 3px #000000;
}

.item-value img:hover {
    all: unset !important;
}

.discarded {
    text-decoration: line-through;
    text-decoration-color: red;
    text-decoration-thickness: 4px;
}

/* Initial color */
.xp-bar-div .progress-bar.level-1 {
    background-color: #a57327;
}

/* Second color */
.xp-bar-div .progress-bar.level-2 {
    background-color: #77271e;
}

/* Third color */
.xp-bar-div .progress-bar.level-3 {
    background-color: #176939;
}


.modal-content {
    background-color: #1f1f1f;
    color: #ebebeb;
    border: 1px solid #636363;
    /*border-image-slice:
        80 28 28 19;
    border-image-width:
        20px 20px 20px 20px;
    border-image-outset:
        0px 0px 0px 0px;
    border-image-repeat:
        stretch stretch;
    border-image-source: url('assets/quest-board.jpg');*/

}

.modal-header {
    border-bottom: unset;
}

.modal-footer {
    border-top: unset;
}

.quest-list:hover {
    background-color: #303030;
}

.quest-item {
    cursor: default;
}

.modal-quest {
    min-height: 400px;
}

.collapse {
    background-color: #303030;
    color: #ebebeb;
    padding-bottom: 4px;
}

.broken {
    border-color: red !important;
    animation-name: brkn;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes brkn {
    0% {
        filter: brightness(1);
        filter: contrast(1);
        -webkit-filter: brightness(1);
        -webkit-filter: contrast(1);
    }

    50% {
        filter: brightness(1.4);
        filter: contrast(1.4);
        -webkit-filter: brightness(1.4);
        -webkit-filter: contrast(1.4);
    }

    100% {
        filter: brightness(1);
        filter: contrast(1);
        -webkit-filter: brightness(1);
        -webkit-filter: contrast(1);
    }
}

.btn-equipped {
    transition-duration: .4s;
}

.btn-equipped:active,
.btn-equipped:focus,
.btn-equipped:hover {
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none;
    color: #ebebeb;
}

.btn-accept {
    margin: 0 auto;
    display: block;
    padding: 8px;
    line-height: 12px;
}

.btn-quest {
    color: #ebebeb;
    background-color: #1f1f1f;
    padding: 4px;
    text-align: left;
    border: unset;
    border-radius: 0;
}

.btn-quest:active,
.btn-quest:focus,
.btn-quest:hover {
    background-color: #303030 !important;
    outline: none !important;
    box-shadow: none;
    color: #ebebeb;
    border-radius: 0;
}

.quest-list-box .btn-quest {
    background-color: transparent;
}

.quest-list-box .btn-quest:active,
.btn-quest:focus,
.btn-quest:hover {
    background-color: #3B4047 !important;
    outline: none !important;
    box-shadow: none;
    color: #ebebeb;
    border-radius: 0;
}

.quest-description {
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 6px;
}

.quest-description hr {
    margin: 4px;
    padding: 0;
}

#questMessage {
    height: 32px;
}

.btn-questlogCanvas {
    color: #ebebeb;
    background-color: unset;
    padding: 4px 4px 4px 8px;
    text-align: left;
    border: unset;
    border-radius: 4px !important;
}

.btn-questlogCanvas:active,
.btn-questlogCanvas:focus,
.btn-questlogCanvas:hover {
    background-color: unset !important;
    outline: none !important;
    box-shadow: none;
    color: #ebebeb;
}

.questlogCanvas-description {
    background-color: unset !important;
    margin-top: 0px;
    margin-bottom: 4px;
    padding: 6px;
}

.questlogCanvas-description hr {
    margin: 4px;
    padding: 0;
}

.btn-questlog {
    color: #ebebeb;
    background-color: unset;
    padding: 4px 4px 4px 8px;
    text-align: left;
    border: unset;
    border-radius: 4px !important;
}

.btn-questlog:active,
.btn-questlog:focus,
.btn-questlog:hover {
    background-color: #3B4047 !important;
    outline: none !important;
    box-shadow: none;
    color: #ebebeb;
}

.questlog-description {
    background-color: unset !important;
    margin-top: 0px;
    margin-bottom: 4px;
    padding: 6px;
    border: 1px solid rgb(63, 63, 63);
    border-radius: 8px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.questlog-description hr {
    margin: 4px;
    padding: 0;
}

.btn-complete {
    padding: 2px 4px 2px 4px;
}

.btn-complete:active,
.btn-complete:focus,
.btn-complete:hover {
    outline: none !important;
    box-shadow: none;
}

.professionbar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    padding: 20px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(19, 19, 19, 0.9);
    box-shadow: 1px 1px 24px rgba(255, 255, 255, 0.4);
}

.professionbar .energy-progress {
    border-radius: 2px;
}

.professionbar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 15px;
    margin-left: 35px;
    margin-right: 35px;
    margin-bottom: 20px;
}

.professionbottombar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    padding: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.professionbottombar-content {
    width: 100%;
    text-align: center;
}

.professionbottombar-content .progress {
    height: 24px;
    margin-bottom: 4px;
}

.separator {
    border-right: 1px solid #4d4d4d;
}

.profession-content .collapse {
    background-color: transparent;
}

.profession-content button img {
    width: 128px;
}

.profession-content h3 span:first-of-type {
    margin-top: 1.2em;
}

.profession-content .list-group-item-inventory {
    background-color: unset;
    padding: 6px;
    border-color: #31353D;
}

.profession-button {
    color: white;
    border-radius: 50%;
}

.profession-button:focus,
.profession-button:active {
    outline: none !important;
    box-shadow: 0 0 0 0.1rem rgba(255, 255, 255, 0.25);
}

.profession-form .form-group {
    text-align: center;
    display: block;
    margin: 0 auto;
}

.profession-range {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.profession-inventory span {
    float: right;
}

.profession-inventory li img {
    height: 18px;
    width: 18px;
}

.profession-inventory .inventory-item-background {
    padding: 0 2px 0 2px;
    margin: 0;
}

.profession-inventory li {
    border-bottom: 1px solid rgba(138, 138, 138, 0.2);
}

.profession-option button {
    background-color: unset;
    border: unset;
    padding: 0;
    margin: 0;
}

.profession-option {
    position: absolute;
    right: 4px;
    top: -4px;
    width: 20px;
    height: 20px;
}

.dropleft .dropdown-toggle::after {
    display: none;
    margin-left: 4em;
    vertical-align: 0.255em;
    content: "";
}

.dropleft .dropdown-toggle::after {
    display: none;
}

.dropleft .dropdown-toggle::before {
    display: none;
}

.dropleft .dropdown-toggle:empty::after {
    margin-left: 0;
}

.dropleft .dropdown-toggle::before {
    vertical-align: 0;
}

.success-message {
    font-weight: bold;
}

.custom-range {
    width: 400px;
    /* Set the desired width */
}

.exchange {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

#exchangeCollapse {
    text-align: center;
    display: block;
    margin: 0 auto;
}

.attack-desc {
    text-align: justify;
    background-color: #1b1d1f;
}

/* ATTACK STATS */
.attack-stats li:hover {
    background-color: unset !important;
}

.attack-selected {
    background-color: #3a3f48;
}

.bs-canvas-overlay,
.bs-canvas {
    transition: all .3s ease-out;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    color: white;
}

.bs-canvas {
    top: 0;
    z-index: 1110;
    overflow-x: hidden;
    overflow-y: auto;
    width: 330px;
    background-image: url('assets/ui-elements/quest-panel.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.bs-canvas-right {
    overflow-x: hidden;
    overflow-y: hidden;
    top: 24vh;
    right: 0;
    margin-right: -330px;
    background-color: transparent !important;

}

.expand-button {
    position: absolute;
    right: 0;
    top: 45vh;
    border-top-left-radius: 45%;
    border-bottom-left-radius: 45%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #202020;
    border-color: #ffffff;
    border-right-color: black;
    padding: 6px;
    margin: 0;
}

.expand-button:hover {
    background-color: #0f0f0f;
    border-color: #b9b9b9;
    border-right-color: black;
}

.profile-card-4 {
    max-width: 585px;
    background-color: #FFF;
    border-radius: 5px;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    margin: 10px auto;
}

.profile-card-4 img {
    scale: 1.4;
}

.profile-card-4 .profile-content {
    position: relative;
    padding: 15px;
    background-color: #FFF;
}

.profile-card-4 .profile-name {
    font-weight: 900;
    position: absolute;
    left: 0px;
    right: 0px;
    top: -14px;
    color: #1f1f1f;
    text-shadow: rgb(15, 15, 15) 0px 0px 3px;
    width: 100%;
    margin: 0 auto;
}

.profile-card-4 .profile-name p {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1.5px;
}

.profile-card-4 .profile-description {
    color: #777;
    font-size: 12px;
    padding: 10px;
    margin-top: 4px;
}

.profile-card-4 .profile-description li {
    cursor: pointer;
}

.profile-card-4 .profile-overview {
    padding: 15px 0px;
}

.profile-card-4 .profile-overview p {
    font-size: 10px;
    font-weight: 600;
    color: #777;
}

.profile-card-4 .profile-overview h4 {
    color: #273751;
    font-weight: bold;
}

.profile-card-4 .profile-content::before {
    content: "";
    position: absolute;
    height: 25px;
    top: -15px;
    left: 0px;
    right: 0px;
    background-color: #FFF;
    z-index: 0;
    transform: skewY(2deg);
}

.item-stats-list,
.item-stats-list-gem {
    border-radius: 0 !important;
    margin: 0;
    padding: 4px 8px;
    color: #0f0f0f;
}

.item-stats-list:hover {
    background-color: #cacaca !important;
}

.item-stats-list-gem:hover {
    background-color: unset !important;
}

.loading-screen {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    background-size: cover;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 99999999999;
}

.loading-container {
    width: 100%;
    max-width: 520px;
    text-align: center;
    color: #fff;
    position: relative;
    margin: 0 32px;

    &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: #fff;
        bottom: 0;
        left: 0;
        border-radius: 10px;
        animation: movingLine 2.4s infinite ease-in-out;
    }
}

@keyframes movingLine {
    0% {
        opacity: 0;
        width: 0;
    }

    33.3%,
    66% {
        opacity: 0.8;
        width: 100%;
    }

    85% {
        width: 0;
        left: initial;
        right: 0;
        opacity: 1;
    }

    100% {
        opacity: 0;
        width: 0;
    }
}

.loading-text {
    font-size: 5vw;
    line-height: 64px;
    letter-spacing: 10px;
    margin-bottom: 32px;
    display: flex;
    justify-content: space-evenly;
    font-weight: bolder;
    text-shadow: 2px 2px 2px rgb(0, 0, 0);


    span {
        animation: moveLetters 2.4s infinite ease-in-out;
        transform: translatex(0);
        position: relative;
        display: inline-block;
        opacity: 0;
        text-shadow: 2px 2px 2px rgba(56, 53, 53, 1);
    }
}

@keyframes moveLetters {
    0% {
        transform: translateX(-15vw);
        opacity: 0;
    }

    33.3%,
    66% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(15vw);
        opacity: 0;
    }
}

.poor-item {
    color: #9d9d9d !important;
}

.common-item {
    color: #ffffff !important;
}

.uncommon-item {
    color: #1eff00 !important;
}

.rare-item {
    color: #0070dd !important;
}

.epic-item {
    color: #a335ee !important;
}

.legendary-item {
    color: #ff8000 !important;
}

/*-----------------------------[ LOGIN FORM ]---------------------------------*/
.login-form {
    background-color: rgba(17, 17, 17, 0.7);
    padding: 14px;
    margin-top: 5rem;
}

.login-form p {
    text-align: center !important;
    font-size: 24px;
    margin: 0;
}

.login-form input:active,
input:focus {
    border-color: rgba(239, 165, 104, 0.8) !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 2px rgba(239, 165, 104, 0.6) !important;
    outline: 0 none !important;
}

.update-box {
    padding: 1em;
    background-color: rgba(17, 17, 17, 0.8);
    color: #f1f3f7;
    max-height: 45vh;
    overflow-y: scroll;
}

.update-box hr {
    margin: 0 0 12px 0;
    padding: 0;
    border-color: rgba(241, 243, 247, 0.3);
}

.update-box h5 {
    font-weight: 400;
}

.news-list li {
    list-style-image: url('assets/interface-icons/skull-list.png');
}

.crossfade {
    animation: imageAnimation 30s linear infinite 0s;
    backface-visibility: hidden;
    background-size: cover;
    background-position: center center;
    color: transparent;
    height: 100vh;
    left: 0px;
    /*opacity: 0;*/
    position: absolute;
    top: 0px;
    width: 100vw;
    z-index: 0;
    background-image: url('assets/loading/login-1.jpg');

}

.smol a {
    transition-duration: .2s;
}

.smol a:hover {
    filter: brightness(1.3);
}

/*
.crossfade>figure:nth-child(1) {
    background-image: url('assets/loading/login-1.jpg');
}

.crossfade>figure:nth-child(2) {
    animation-delay: 6s;
    background-image: url('assets/loading/login-2.jpg');
}

.crossfade>figure:nth-child(3) {
    animation-delay: 12s;
    background-image: url('assets/loading/login-3.jpg');
}

.crossfade>figure:nth-child(4) {
    animation-delay: 18s;
    background-image: url('assets/loading/login-4.jpg');
}

.crossfade>figure:nth-child(5) {
    animation-delay: 24s;
    background-image: url('assets/loading/login-5.jpg');
}

@keyframes imageAnimation {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
    }

    8% {
        animation-timing-function: ease-out;
        opacity: 1;
    }

    17% {
        opacity: 1
    }

    25% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}
*/
.skill-box {
    border-radius: 40px;
}

connection {
    border: 4px solid rgba(165, 165, 165, 0.8);
    border-radius: 75px;
}

.gem-list li {
    cursor: pointer;
    margin-top: 1px;
}

.poor-gem {
    border-color: #9d9d9d;
}

.common-gem {
    border-color: #ffffff;
}

.uncommon-gem {
    border-color: #1eff00;
}

.rare-gem {
    border-color: #0070dd;
}

.epic-gem {
    border-color: #a335ee;
}

.legendary-gem {
    border-color: #ff8000;
}

.span-center {
    display: block;
    margin: 0 auto;
    text-align: center;
    margin: 0;
    padding: 0;
    font-weight: bold;
}

.gem-tooltip hr {
    margin: 4px;
    padding: 0;
}

.smol {
    font-size: 12px !important;
    color: #afafaf;
}

.smolish {
    font-size: 14px !important;
    color: #afafaf;
}

.text-normal{
    font-size: 14px !important;
}

.todo {
    font-size: 10px;
    text-align: center;
    color: #ffbb00 !important;
}

.card {
    margin-bottom: 24px;
    box-shadow: 0 2px 3px #e4e8f0;
}

.card-body {
    color: #c4c4c4;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    border-radius: 1rem;
    transition-duration: .2s;
    -webkit-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
}

.card:hover {
    -webkit-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.6);
}

.avatar-md {
    height: 4rem;
    width: 4rem;
}

.rounded-circle {
    border-radius: 50% !important;
}

.img-thumbnail {
    padding: 0.25rem;
    background-color: #f1f3f7;
    border: 1px solid #eff0f2;
    border-radius: 0.75rem;
}

.avatar-title {
    align-items: center;
    background-color: #3b76e1;
    color: #fff;
    display: flex;
    font-weight: 500;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.bg-soft-primary {
    background-color: rgba(59, 118, 225, .25) !important;
}

.badge-soft-danger {
    color: #f56e6e !important;
    background-color: rgba(245, 110, 110, .1);
}

.badge-soft-success {
    color: #63ad6f !important;
    background-color: rgba(99, 173, 111, .1);
}

.badge {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 75%;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.75rem;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}

/* -------------------------------------[CRAFTING CSS]--------------------------------------- */
.recipe-container {
    height: 440px;
    border-radius: 4px;
    border: 2px solid rgba(22, 22, 22, 0.4);
    direction: rtl;
    overflow: auto;

    margin: 0;
    padding: 0;
}

.btn-crafting {
    margin: 0;
    padding: 0;
    border-radius: 0;
    text-align: left;
    transition-duration: .1s;

    background-color: #19212E;
    border-color: black;
}

.btn-crafting:hover {
    background-color: #202a3a;
    border-color: black;
}

.btn-crafting:focus,
.btn-crafting:active {
    outline: none !important;
    box-shadow: none !important;
    background-color: #19212E !important;
    border-color: black !important;
}

.btn-crafting span {
    margin-left: 4px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.1em;
}

.btn-recipe {
    background-color: #1d1d1d;
    border-radius: 0;
    text-align: left;
    margin-top: 0 !important;
}

.btn-recipe:hover {
    background-color: #242424;
}

.btn-recipe:focus,
.btn-recipe:active {
    outline: none !important;
    box-shadow: none !important;
    background-color: #19212e00 !important;
    border-color: transparent !important;
}

.btn-recipe span {
    color: #e4e8f0;
}

/* -------------------------------------[CRAFTING CSS]--------------------------------------- */

/* CHAR SCREEN SKILLS */
.skill-list {
    margin-left: 12px;
}

.skill-button {
    margin: 0 auto;
    height: 94px;
    width: 94px;
    margin: 0;
    padding: 0;
    border: 1px solid black;
    transition-duration: .1s;
}

.skill-modal span {
    display: block;
    margin: 0 auto;
    font-size: 12px;
    color: #f1f3f7;
    margin-bottom: 0;
    padding-bottom: 0;
}

.skill-button:hover {
    filter: drop-shadow(0 0 0.2rem rgba(255, 255, 255, 0.2));
}

.skill-description {
    font-size: .9em;
}

.modal-close-button {
    position: absolute;
    right: 8px;
    top: 8px;
}

.modal-close-button span {
    border-radius: 4px;
    padding: 0 8px;
    color: red;
    text-shadow: 0 1px 0 #ff0d0d;
}

.skill-collapse {
    background-color: unset;
}

.expand {
    position: absolute;
    right: 2em;
}

.expand img {
    width: 18px;
    height: 18px;
}

.btn-outline-info {
    color: #f1f3f7;
}

.btn-outline-success {
    color: #f1f3f7;
}

.crafting-item-box ul li {
    margin-bottom: 2px;
}

.craft-cost {
    float: right;
}

.craft-cost img {
    width: 22px;
}

.craft-warning {
    display: block;
    text-align: center;
    margin: 0 auto;
    margin-top: 2px;
}

.craft-warning img {
    width: 14px;
    height: 14px;
    margin-bottom: 4px;
}

.craft-bar-div {
    height: 1.5em;
}

.craft-bar-div img {
    width: 16px;
}

.admin-craft-form .form-group input,
select,
option,
textarea,
form-control {
    background-color: #1f1f1f !important;
    color: #eeeeee !important;
}

textarea,
textarea:focus,
textarea:active {
    border-color: rgba(255, 174, 0, 0.39) !important;
    box-shadow: 0 1px 1px rgba(255, 187, 0, 0.075) inset, 0 0 8px rgba(255, 187, 0, 0.6) !important;
    outline: 0 none !important;
}

.admin-craft-form .form-group {

    /* Change the white to any color */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px #1f1f1f inset !important;
    }

    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 50px #eeeeee inset;
        /* Change the color to your own background color */
        -webkit-text-fill-color: #eeeeee;
    }

    input:-webkit-autofill:focus {
        -webkit-box-shadow:
            0 0 0 50px #eeeeee inset;
        -webkit-text-fill-color: #eeeeee;
    }
}

.admin-icon-finder img {
    border: 1px solid #353535;
    transition-duration: .3s;
    cursor: pointer;
}

.admin-icon-finder img:hover {
    border: 1px solid #424242;
    border-radius: .4em;
}

.admin-content {
    margin-top: -2em;
}

.admin-content .admin-option {
    text-align: center;
}

.admin-content .admin-option img {
    border: 1px solid #4d4d4d;
    border-radius: .3em;
    padding: .6em;
    transition-duration: .3s;
}

.admin-content .admin-option img:hover {
    border: 1px solid #727272;
    border-radius: 0;
}

.admin-content .list-group-item {
    background-color: transparent;
    border: 1px solid #4d4d4d;
    border-radius: 0;
    color: white;
}

.admin-content .table thead th {
    border-bottom: unset;
}

.admin-content .table thead th {
    border-top: unset;
}

/* LOGIN PROGRESS BAR */
.progress-main {
    height: 18px;
    margin: 0;
    top: 0;
    border-radius: 15px;
}

.progress-value {
    animation: load 0.6s normal forwards;
    box-shadow: 0 10px 40px -10px #fff;
    background: #fff;
    height: 12px;
    width: 0;
    margin-top: 2px;
    border-radius: 15px;
}

.progress-craft {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    padding: 0 5px;
    height: 18px;
    margin-top: 1em;
}

.progress-value-craft {
    animation: load .8s normal forwards;
    box-shadow: 0 10px 40px -10px #fff;
    border-radius: 100px;
    background: #fff;
    height: 16px;
    width: 0;
    margin-top: 3px;
}

@keyframes load {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

/* ACHIEVEMENTS */
.achievements .achibutton {
    background-color: transparent;
    border: unset;
    color: #ffffff;
    transition-duration: .2s;
    padding: 6px 4px;
    border-radius: 4px;
}

.achievements .achibutton:hover {
    background-color: #3B4047;
}

.achievements .achibutton:focus {
    background-color: #3B4047;
}

.achievements .collapse {
    background-color: transparent;
    padding: 0;
}

.achievements .initialize {
    color: rgb(255, 255, 255);
    border: 1px solid orange;
    background-color: transparent;
    transition-duration: .4s;
}

.achievements .initialize:hover {
    color: rgb(255, 255, 255);
    border: 1px solid orange;
    background-color: rgb(17, 17, 17);
}

.achievements form {}

/* TALENTS */
.talents table {
    color: green;
    text-align: center;
    font-weight: 900;
    height: 80vh;
}

.talents table button {
    background-color: unset;
    border: 0;
    border-radius: 50%;
    width: 66px;
    height: 66px;
    transition-duration: .3s;
}

.talents table button:hover {
    filter: drop-shadow(1px 1px 10px #bbbbbb);
}

.talents .table img {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    border: 4px solid transparent;
}

.table .taken {
    border-color: rgba(115, 255, 0, 0.7) !important;
    cursor: default !important;
}

.table .available {
    border-color: rgba(0, 255, 242, 0.7) !important;
}

.table .notavailable {
    border-color: rgba(255, 0, 0, 0.7) !important;
    filter: grayscale(100%) !important;
    cursor: not-allowed;
}

.talents-rogue {
    margin-top: 1em;
    border-radius: 15px;
    background-image: url(assets/backgrounds/talents/rogue.jpg);
    background-size: cover;
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.6));
}

.talents-warrior {
    margin-top: 1em;
    border-radius: 15px;
    background-image: url(assets/backgrounds/talents/warrior.jpg);
    background-size: cover;
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.6));
}

/* active when skills have a special attack for the round */
.procced span {
    color: #ff5100 !important;
}

.debug {
    color: red;
    font-weight: 900;
    text-align: center;
    margin: 0;
    padding: 0;
}

/* AUCTION CSS */
.auction-window {
    border: 1px solid #3a3f48;
    border-radius: 4px;
    padding: 8px;
    background-color: rgba(0, 0, 0, 0.2);
    height: 80vh;
}

.auction-window input,
.auction-window textarea,
.auction-window select,
.auction-window option,
.auction-window input,
.auction-window form-control {
    background-color: #1f1f1f !important;
    color: #eeeeee !important;
}

.sell-modal input,
.sell-modal select,
.sell-modal option,
.sell-modal input,
.sell-modal form-control {
    background-color: #1f1f1f !important;
    color: #eeeeee !important;
}

.mmo-form input,
.mmo-form select,
.mmo-form option,
.mmo-form input,
.mmo-form form-control {
    background-color: #1f1f1f !important;
    color: #eeeeee !important;
}

.sell-modal .form-group img {
    position: absolute;
    top: 58px;
    left: 335px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.auction-window .card:hover {
    -webkit-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.1);
    -moz-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.1);
    box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(136, 136, 136, 0.9);
}

.store-modal .card:hover {
    -webkit-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.1);
    -moz-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.1);
    box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(136, 136, 136, 0.9);
}

.auction-right {
    border-left: 1px solid #3a3f48;
    height: 78vh;
    overflow-y: scroll;
}

.auction-left button {
    width: 98%;
}

.auction-left .selected {
    background-color: #3B4047 !important;
}

.mail-left {
    max-height: 560px;
    overflow-y: scroll;
}

.mail-notification {
    animation-name: mail;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes mail {
    0% {
        filter: brightness(1);
        filter: contrast(1);
        -webkit-filter: brightness(1);
        -webkit-filter: contrast(1);
    }

    50% {
        filter: brightness(0.4);
        filter: contrast(0.4);
        -webkit-filter: brightness(0.4);
        -webkit-filter: contrast(0.4);
    }

    100% {
        filter: brightness(1);
        filter: contrast(1);
        -webkit-filter: brightness(1);
        -webkit-filter: contrast(1);
    }
}

.auction-options {
    border-bottom: 1px solid #3a3f48;
}

.auction-options button {
    margin-top: 1.5em;
    margin-left: 3em;
}

.auction-stack {
    position: absolute;
    margin-left: 34px;
    margin-top: 28px;
    font-size: 10px;
}

.auction-price {
    font-size: 16px;
    color: #e7e7e7;
    margin-top: 4px;
}

.auction-price img {
    margin-bottom: 1px;
}

.bg-item-stats {
    background-color: #19212E;
}

.bg-item-gem {
    background-color: hsla(207, 53%, 37%, 0.6);
}


.avatar-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #000;
    color: #fff;
    font-weight: 700;
}

.avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

.avatar img {
    width: 65%;
    height: 65%;
}

.me-4 {
    margin-right: 1.5rem !important;
}

.nav-item {
    background-color: rgba(0, 0, 0, 0.2);
    margin-left: 2px;
    margin-right: 2px;
    margin-bottom: 4px;
}

.nav .active {
    border-radius: inherit;
    background-color: #3B4047 !important;
}

.index-nav .nav-item {
    background-color: rgba(0, 0, 0, 0.6);
    color: #f1f3f7;
}

.disabled {
    cursor: not-allowed !important;
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    text-decoration: none !important;
}

.disabled-link {
    cursor: not-allowed !important;
}

.unfloat {
    float: unset !important;
}

.notallowed {
    cursor: not-allowed !important;
    color: #646464 !important;
}

.notallowed:hover {
    background-color: unset;
    color: unset;
}

.strong {
    font-weight: bold;
}

/* LEADERBOARD STYLE */
.leaderboard-container {
    border: 1px solid rgba(105, 105, 105, 0.6);
    padding: 0 2px 0 2px;
}

/* ADMIN STYLES */
.all-items span {
    display: block;
    float: right !important;
    border-radius: 0;
}

.all-items span img {
    width: 24px;
    height: 24px;
    border-radius: 0;
}

.all-items .drop-split {
    color: #0070dd;
    font-weight: bold;
    margin: 4px;
    padding: 0;
    font-size: 14px;
}

.all-items table th {
    position: sticky;
    top: 0 !important;
}

.playerInfo li {
    list-style-image: url('assets/interface-icons/skull-list.png');
}

.userList li {
    transition-duration: .1s;
}

.userList li:hover {
    background-color: #1B1F23;
}

/* LOCATION STYLE */
.location-container {
    min-height: 100vh;
    background-size: cover;
}

.location-container h1 {
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}

.location-enemy {
    display: none;
    margin-top: 2em;
    background-color: rgba(29, 29, 29, 0.8);
    border-radius: .4em;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 1);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 1);
}

.location-enemy img {
    border: 1px solid black;
    transition-duration: .2s;
}

.location-enemy img:hover {
    border: 1px solid #b9b9b9;
}

/* Eldar */
.location-enemy span:first-of-type {
    position: absolute;
    right: 8px;
    top: 4px;
}

.location-enemy span img {
    height: 42px;
    border: unset;
}

.location-enemy span img:hover {
    border: unset;
}

.top-hud {
    position: fixed;
    top: 0;
    /* Position at the top of the viewport */
    left: 50%;
    /* Move to the middle horizontally */
    transform: translateX(-50%);
    /* Center the div horizontally */
    width: 445px;
    height: 35px;
    background-color: #1B1F23;
    border: 1px solid #1d1400;
    color: #e9e9e9;
    border-top: none;
    text-align: center;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    line-height: 50px;
    z-index: 2;
    background-image: url(assets/wood-texture.jpg);
    background-size: cover;
}

#leave-settlement {
    background-color: black;
    position: fixed;
    bottom: 0;
    right: 0;
    border-top-left-radius: 50%;
    background-image: url(assets/wood-texture.jpg);
    border: 1px solid #1d1400;
}

#leave-settlement img {
    height: 60px;
    margin-right: 16px;
    margin-bottom: 10px;
    padding-top: 4px;
    padding-left: 14px;
}

.leave {
    cursor: pointer;
}

#expand-container {
    position: relative;
    width: 100%;
    height: 100px;
}

#expand-settlement {
    position: fixed;
    right: 0;
    top: 15%;
    z-index: 999;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    transition-duration: .3s;
    cursor: pointer;
}

#expand-button {
    width: 64px;
    transition-duration: .2s;
}

#expand-button:hover {
    filter: brightness(1.4);
}

#close-settlement {
    position: absolute;
    left: 0;
    top: 0;
    width: 42px;
    height: 42px;
}

#close-settlement img {
    width: 32px;
    border-top-left-radius: 14px;
    transition-duration: .2s;
    cursor: pointer;
}

#close-settlement img:hover {
    filter: brightness(1.4);
}

#expanded-content {
    position: absolute;
    top: 0;
    left: 105px;
    /* Initially outside the screen */
    width: 420px;
    height: 520px;
    background-color: #353535;
    transition: left 0.5s ease;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
    /* Add transition effect for smooth animation */
    cursor: default;
    max-height: 520px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px solid rgba(27, 11, 0, 0.5);


    background-image: url('assets/town-center-small.jpg');
    background-position: center;
    background-attachment: fixed;
}

.building-town {
    border-radius: 50%;
    margin-top: 8px;
}

.building-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 1px 1px 1px rgb(0, 0, 0);
    text-align: center;
}

.building-tippy .building-town,
.building-tippy .building-name {
    transition: transform 0.2s ease;
    cursor: pointer;
    /* Apply the transition even when not hovering */
}

.building-tippy:hover img,
.building-tippy:hover .building-name h4 {
    transform: scale(1.1);
    transition-duration: 0.2s;
    filter: brightness(1.4);
    /* Add a smooth transition effect */
}

#tutorialModal p {
    font-size: 18px;
}

/* TUTORIAL SCREEN */
#tutorialModal .modal-content {
    border-radius: 10px;
    border-image-slice:
        31 33 27 27;
    border-image-width:
        14px 14px 14px 14px;
    border-image-outset:
        7px 7px 7px 7px;
    border-image-repeat:
        stretch stretch;
    border-image-source: url('assets/border.png')
}

.tutbut {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}

.tutbut a {
    width: 100%;
    max-width: 50%;
    padding: 8px;
    font-size: 0.8rem;
    font-weight: 900;
    color: #ff8800;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 0 0 1px inset rgba(255, 255, 255, 0.4);
    position: relative;
}

.tutbut a.white:hover>p {
    color: #ece8e1;
}

.tutbut a.white>p {
    background: #ece8e1;
    color: #0f1923;
}

.tutbut a.white>p span.base {
    border: 1px solid transparent;
}

.tutbut a.transparent:hover>p {
    color: #ece8e1;
}

.tutbut a.transparent:hover>p span.text {
    box-shadow: 0 0 0 1px #ece8e1;
}

.tutbut a.transparent>p {
    background: #0f1923;
    color: #ece8e1;
}

.tutbut a.transparent>p span.base {
    border: 1px solid #ece8e1;
}

.tutbut a p {
    margin: 0;
    height: 54px;
    line-height: 54px;
    box-sizing: border-box;
    z-index: 1;
    left: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.tutbut a p span.base {
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    left: 0;
    border: 1px solid #ff8800;
}

.tutbut a p span.bg {
    right: -5%;
    position: absolute;
    background: #ff8800;
    width: 0;
    height: 100%;
    z-index: 3;
    transition: 0.3s ease-out all;
    transform: skewX(-10deg);
}

.tutbut a p span.text {
    z-index: 4;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.tutbut a:hover {
    color: #0f1923;
}

.tutbut a:hover span.bg {
    width: 110%;
}

.tutbut a:hover span.text:after {
    background: #000000;
}

.tutorial-bg1 {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: black;
    background-image: url('assets/loading/tutorial-4.jpg');
    background-size: cover;
}

.tutorial-bg2 {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: black;
    background-image: url('assets/loading/tutorial-5.jpg');
    background-size: cover;
}

.tutorial-bg3 {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: black;
    background-image: url('assets/loading/tutorial-6.jpg');
    background-size: cover;
}

/* Shepherd js style */

.shepherd-element {
    background-color: #1b1d1f;
    border-radius: 10px;
    border-image-slice:
        31 33 27 27;
    border-image-width:
        14px 14px 14px 14px;
    border-image-outset:
        7px 7px 7px 7px;
    border-image-repeat:
        stretch stretch;
    border-image-source: url('assets/border.png')
}

.shepherd-modal {
    background-color: #080808;
    color: #333333;
    border: 2px solid #cccccc;
}

.shepherd-header {
    background-color: #428bca;
    /* Header background color */
    color: #ffffff;
    /* Header text color */
}

.shepherd-text {
    color: #d3d3d3;
    padding: 20px;
}

.shepherd-button {
    background-color: #1a1a1a;
    border: 1px solid #ffffff65;
    color: #ffffff;
}

.shepherd-button:hover {
    background-color: #00000065 !important;
    color: #ffffff !important;
    border: 1px solid #ffffff;
}

.shepherd-footer {
    justify-content: center;
}

/* MAIL */
.mail-delete {
    right: 14px;
}

.sendgold {
    background-image: url('assets/interface-icons/gold.png');
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

#mailCounter {
    position: absolute;
    bottom: 5px;
    right: 25px;
}

/* CODEX */
.codex {
    min-height: 540px;
    transition-duration: .3s;

    background-color: grey;
    border: 1px solid rgba(255, 255, 255, 0.438);
    margin: 10px;
}

.codex span {
    position: absolute;
    height: 50px;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 2em;
    text-shadow: 1px 1px 1px rgb(0, 0, 0);
    background: linear-gradient(to bottom, transparent 0%, black 100%);
}

#codex-items {
    background-image: url(assets/codex/weapon.jpg);
    background-size: cover;
}

#codex-monsters {
    background-image: url(assets/codex/monsters.jpg);
    background-size: cover;
}

#codex-classes {
    background-image: url(assets/codex/classes.jpg);
    background-size: cover;
}

#codex-quests {
    background-image: url(assets/codex/quests.jpg);
    background-size: cover;
}

#codex-professions {
    background-image: url(assets/codex/updates.jpg);
    background-size: cover;
}

.codex:hover {
    filter: brightness(1.2);
    border: 1px solid rgba(255, 255, 255, 1);
}

.codex img {
    transition-duration: .3s;
    -webkit-box-shadow: 0px 0px 7px 0px #1b1b1b;
    box-shadow: 0px 0px 7px 0px #1b1b1b;
}

.codex img:hover {
    -webkit-box-shadow: 0px 0px 7px 0px #000000;
    box-shadow: 0px 0px 7px 0px #000000;
}

/* TOWN */
/* Add styles for text and other content within the div */
.town-content {
    position: relative;
    /* Ensure content is stacked on top of pseudo-element */
    z-index: 1;
    /* Ensure content is above the pseudo-element */
    color: #ffffff;
    /* Example text color */
    padding: 20px;
}

.town-building {
    border: 1px solid #202020;
    border-radius: 50%;
    min-height: 240px;
    transition-duration: .3s;
    display: none;
}

.town-building:hover {
    border: 1px solid #cecece;
}

.town-building h3 {
    text-align: center;
    padding-top: 90px;
    text-shadow: 1px 1px 1px rgb(0, 0, 0);
}

.town-link {
    border-radius: 50%;
}

/* Post battle - Achievement bar */
.achievement-bar {
    position: fixed;
    right: 0;
    top: 20vh;
    min-height: 360px;
    min-width: 240px;
    width: 240px;

    color: #9d9d9d;

    background-color: #1f1f1f;
    border: 1px solid rgb(102, 102, 102);
    border-right: none;
}

.achievement-bar li {
    display: none;
}

.achievement-bar ul {
    list-style-image: url('assets/interface-icons/skull-list.png');
    padding: 0;
    margin: 0 0 0 32px;
}

/* Gather bar */
.gather-bar {
    position: fixed;
    right: -220px;
    top: 20vh;
    min-height: 360px;
    min-width: 240px;
    width: 240px;

    color: #9d9d9d;

    background-color: #1f1f1f;
    border: 1px solid rgb(102, 102, 102);
    border-right: none;

    transition: right 0.8s ease;
    /* Animation */

}

.gather-bar ul {
    list-style-image: url('assets/interface-icons/skull-list.png');
    padding: 0;
    margin: 0 0 0 32px;
}

.achMessage {
    color: #28a745;
    font-weight: bold;
}

/* STORE */
.store-window {
    min-height: 400px;
    max-height: 400px;
    overflow-y: scroll;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 8px;
    margin: 2px;
}

.ajax-button {
    background-color: unset;
    border: unset;
}

.store-window button {
    transition-duration: .4s;
}

.store-window button:hover {
    filter: brightness(1.2);
}

.class-trainer .collapse {
    background-color: unset;
}

.location-content .collapse {
    background-color: unset;
}

.class-icon {
    border-radius: 50%;
    max-width: 86px;
    max-height: 86px;
    border: 1px solid #afafaf;
}

.store-message img {
    width: 20px;
}

.class-content .list-group-item {
    padding: 0;
    background-color: unset;
}

.class-ability {
    background-color: #19212E;
    border: 1px solid #FFF;
}

.store-button {
    background-color: unset;
    border: unset;
}

.store .collapse {
    padding-bottom: inherit;
    background-color: unset;
}

.store .card-body {
    padding: .6rem;
}

/* REST */
.done {
    text-decoration: line-through !important;
}

.feedbackWindow label {
    display: block;
}

.stretched-link::after {
    border-radius: 50%;
}

.blk {
    display: block !important;
}

.inlin {
    display: inline !important;
}

.circle-progress-value {
    stroke-width: 12px;
    stroke: darkmagenta;
}

.circle-progress-circle {
    stroke: white;
    stroke-width: 11px;
    fill: #666;
}

.circle-progress-text {
    font-family: "Georgia";
    font-size: 13px;
    fill: white;
}

/* Global */
.btn-mmo {
    margin: 0;
    padding: 0;
    border-radius: 0;
    text-align: left;
    transition-duration: .1s;

    border-color: black;
}

.btn-mmo:hover {
    border-color: black;
}

.btn-mmo:focus,
.btn-mmo:active {
    outline: none !important;
    box-shadow: none !important;
    border-color: black !important;
}

.minw {
    min-width: 80px;
}

/* Game settings */
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    float: right;
    margin-bottom: 0;
}

/* Hide default HTML checkbox */
.switch input {
    display: none;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input.default:checked+.slider {
    background-color: #3cff00;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.settings li {
    background-color: unset;
    border-bottom: 1px solid rgb(54, 54, 54);
    border-radius: unset !important;
    font-size: 1.2em;
}

.text-red {
    color: red;
}

.class-content th,
td {
    padding: .25rem !important;
}

.table-dark {
    background-color: unset;
    padding: 1px;
    margin: 0px;
}

/* FOCUS */
.focuspoints .collapse {
    background-color: unset;
}

/* Guild */
.guild-window {}

.guild-window .guild-form {
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
}

.guild-window .guild-form .spinner-border {
    position: absolute;
    right: .3em;
    bottom: .7em;
    display: none;
}

.guild-window .form-group {
    margin: 0;
    padding: 0;
}

.guild-window .form-control {
    border-radius: 0;
    background-color: #282C33;
    color: white;
    border: unset;
    border-top: 1px solid white;
}

.guild-window .form-control::placeholder {
    color: white;
    opacity: 0.5;
}

.guild-window .table img {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    border: 4px solid transparent;
}

.guild-chat textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
    border-color: rgba(239, 165, 104, 0.8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 2px rgba(239, 165, 104, 0.6);
    outline: 0 none;
}

.guild-window .guild-map {
    border-radius: .3rem;
}

.guild-window .table span {
    display: block;
    padding: 0;
    margin: 0;
}

.guild-window .table img {
    padding: 0;
    margin: 0;
    border-radius: unset;
    border: unset;
}

.guild-window .table th {
    padding: 0 0 .4em 0;
    margin: 0;
}

.guild-window .resource-number {
    font-weight: normal;
}

.guild-window .resource-production {
    display: block;
    font-size: 10px;
    color: #d8d8d8;
    cursor: help;
}


.guild-window .guild-name {
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
}

.guild-window .guild-chat {
    background-color: rgba(0, 0, 0, 0.2);
    border: 2px solid #3a3f48;
    padding-right: 1px;
    padding-left: 0;
}

.guild-window .guild-chat #message-left {
    position: absolute;
    right: .3em;
    bottom: 2.4em;
}

.guild-window span {
    float: unset !important;
}

.guild-window .guild-chat ul {
    list-style: none;
    margin: 0 0 0 -10px;
    padding: 0;
    max-height: 75vh;
    overflow-y: scroll;
    width: 100%;
    padding-left: 15px;
}

.guild-modal ul {
    list-style: none;
    margin: 0 0 0 -10px;
    padding: 0;
    max-height: 75vh;
    overflow-y: scroll;
    width: 100%;
    padding-left: 15px;
}

.guild-modal {
    background-color: #212329;
    max-height: 85vh;
    border-radius: .2em;
    border: 1px solid #515363;
}

.guild-modal .form-control {
    background-color: #282C33;
    color: white;
}

.guild-modal .form-group button {
    display: block;
    margin: 0 auto;
}

.guild-modal .empty-slot {
    display: block;
    height: 192px;
    padding: 2px;
    margin: 0;
}

.guild-modal .empty-slot .dropdown-menu strong {
    border-bottom: 1px solid white;
    display: block;
    width: 100%;
}

.guild-modal .empty-slot-button {
    background-color: #0c0c0c;
    border: unset;
    width: 100%;
    height: 100%;
    color: white;
    border-radius: 6px;
    transition-duration: .2s;
    border: 1px solid #0c0c0c;
}

.guild-modal .empty-slot-button:focus {
    background-color: #000000;
    border: 1px solid #333333;
}

.guild-modal .empty-slot-button:hover {
    background-color: #000000;
    border: 1px solid #333333;

}

.guild-modal .building-icon-under-construction {
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.guild-modal .dropdown-item img {
    width: 18px;
    height: 18px;
}

.guild-modal .upgrade-building button {
    position: absolute;
    right: -18px;
    top: -38px;
}

.guild-modal .dropdown-menu hr {
    padding: 0;
    margin: 2px;
}

.guild-modal .building-level {
    display: block;
}

.guild-modal .upgrade-building a {
    font-size: 14px;
}

.guild-modal .upgrade-building button:hover {
    filter: brightness(1.2);
}

.guild-modal .col-building {
    background-color: #0c0c0c;
    border: 1px solid #333333;
}

.guild-modal .collapse {
    background-color: unset;
}

.guild-modal .collapse li {
    border: 1px solid transparent;
    cursor: default;
    border-radius: 2px;
}

.guild-modal .collapse li:hover {
    background-color: #252525;
    border: 1px solid #333333;
}

.guild-modal .workshop-build {
    justify-content: center;
}

.workshop-build .workshop-info {
    position: absolute;
    right: .2em;
    top: 0;
    display: block;
    cursor: help;
}

.workshop-build .workshop-info img {
    height: 14px;
    width: 14px;
}

.guild-modal .workshop-build .workshop-image {
    text-align: center;
}

.game-icon {
    width: 20px;
}

.guild-modal .workshop-build .cost {
    border-top: unset !important;
    font-size: 12px;
}

.guild-modal .workshop-build .ajax-button {
    color: #fff;
    position: absolute;
    right: 1em;
    padding: 0;
    margin: 0;
    transition-duration: .3s;
}

.guild-modal .workshop-build .ajax-button:hover {
    filter: brightness(1.2);
}

.guild-modal .workshop-build .ajax-button img {
    width: 20px;
    height: 20px;
}

/* //QQ MINOR PROFESSIONS STYLE */
.minor-prof-container .minor-prof-column {
    margin-left: .6em;
    margin-right: .6em;
    background-color: #212329;
    border: 1px solid #353535;
    border-radius: .3em;
    transition-duration: .3s;
    overflow-y: scroll;
}

#cooking-column {
    min-height: 420px;
    max-height: 420px;
}

#alchemy-column {
    min-height: 420px;
    max-height: 420px;
}

#inscription-column {
    min-height: 420px;
    max-height: 420px;
}

.minor-prof-container .minor-prof-title {
    padding-top: .2em;
    padding-left: .2em;
    display: block;
    border-bottom: 1px solid #353535;
    transition-duration: .3s;
    position: sticky;
    top: 0;
    background-color: #212329;
    z-index: 10;
}

.minor-prof-container .minor-prof-column:hover .minor-prof-title {
    padding-left: .8em;
    border-bottom: 1px solid #555555;
}

.minor-prof-container .recipe-box {
    border: 1px solid #353535;
    margin: .2em;
    border-radius: .8em;
    transition-duration: .3s;
    max-height: 64px;
    max-width: 64px;
    padding: .4em;
}

.minor-prof-container .minor-prof-column #cooking-prepare {
    display: none;
    color: white;
    border: 1px solid #353535;
    padding: .2em;
    padding-left: .6em;
    padding-right: .6em;
    border-radius: .2em;
    transition-duration: .3s;
}

.minor-prof-container .minor-prof-column #alchemy-prepare {
    display: none;
    color: white;
    border: 1px solid #353535;
    padding: .2em;
    padding-left: .6em;
    padding-right: .6em;
    border-radius: .2em;
    transition-duration: .3s;
}

.minor-prof-container .minor-prof-column #inscription-prepare {
    display: none;
    color: white;
    border: 1px solid #353535;
    padding: .2em;
    padding-left: .6em;
    padding-right: .6em;
    border-radius: .2em;
    transition-duration: .3s;
}

.minor-prof-container .minor-prof-column #cooking-prepare:hover {
    border-color: #4e4e4e;

}

.minor-prof-container .minor-prof-column #alchemy-prepare:hover {
    border-color: #4e4e4e;

}

.minor-prof-container .minor-prof-column #inscription-prepare:hover {
    border-color: #4e4e4e;

}

.minor-prof-container .recipe-box:hover {
    border: 1px solid #4e4e4e;
}

.minor-prof-container input,
.minor-prof-container input:disabled {
    color: white;
    background-color: transparent !important;
    margin-top: 1em;
    border-color: #353535;
    border-radius: .2em;
}

.minor-prof-container input:active,
.minor-prof-container input:focus {
    border-color: rgba(239, 165, 104, 0.2) !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 2px rgba(239, 165, 104, 0.6) !important;
    outline: 0 none !important;
    background-color: transparent !important;
    color: white !important;
}

.minor-prof-container .minor-prof-column .minor-tooltip {
    border: 1px solid #353535;
}

/* //QQ CONSTRUCTION STYLE */

.guild-modal .construction-build .col-lg-3 {
    border: 1px solid #353535;
    border-radius: .2em;
    margin: .4em;
    transition-duration: .3s;
    padding: .1em;
}

.guild-modal .construction-build .col-lg-3:hover {
    border: 1px solid #4b4b4b;
    border-radius: .3em;
}

.guild-modal .construction-price {
    border-top: 1px solid #353535;
    padding-top: .2em;
    font-size: 12px;
}

.guild-modal .construction-price span {
    display: block;
}


.guild-modal .construction-price a {
    /*position: absolute;
    bottom: 4em;
    right: .1em;*/
    display: block;
    border-top: 1px solid #353535;
    transition-duration: .3s;
}

.guild-modal .construction-price a:hover {
    border-top: 1px solid #5c5c5c;
    background-color: #17191d;
}

.guild-modal .construction-price a img {
    width: 18px;
    height: 18px;
}

.guild-modal .wall-health {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -70%);
    font-size: .8em;
    display: block;
    width: 100%;
}

.guild-modal .construction-name {
    display: block;
    border-bottom: 1px solid #353535;
    padding-bottom: .2em;
    font-size: 1em;
}

.guild-research table {
    border-collapse: separate;
    border-spacing: 0 .6em;
    cursor: default;
}

.guild-research button {
    padding: 0;
    margin: 0;
    background-color: #0c0f0c;
    border: 1px solid #2d2f38;
    border-radius: 1.5em;
    transition-duration: .3s;
}

.guild-research button:hover {
    border: 1px solid #424552;
}

.guild-research .guild-research-sub {
    background-color: #0f0f0f;
    border-radius: .9em;
    border: 10px solid #212329;
}

.guild-research .research-sub-title {
    display: block;
    width: 100%;
    border-bottom: 2px solid #2d2f38;
    margin-bottom: 6px;
    font-size: 1.2em;
    transition-duration: .3s;
}

.guild-research-sub:hover .research-sub-title {
    border-bottom: 2px solid #404350;
    padding-left: 4px;
}

.guild-research-sub .perk-level {
    position: absolute;
    bottom: 0;
    background-color: white;
    color: black;
}

.guild-research .button-container {
    position: relative;
    display: inline-block;
    text-align: center;
}

.guild-research .button-text {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -70%);
    white-space: nowrap;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 2px 5px;
    font-size: 12px;
    color: black;
    z-index: 1;
    border-radius: .8em;
}

/* //QQ DAILY STYLE */
.daily-content {
    background-color: #212329;
    border-radius: .2em;
    border: 1px solid #515363;
}

.daily-body {}

.daily-body .flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    overflow: auto;
    flex-direction: row;
}

.daily-body .flex-container div {}

.daily-body .item-box {
    position: relative;
    display: inline-block;
    margin: 10px;
    flex-grow: 1;
    max-width: calc(100% / 7 - 20px);
    width: calc(100% / 7 - 20px);
    box-sizing: border-box;
    padding: .6em;
}

.daily-body .daily-amount {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 4px 8px 2px 8px;
    border-top-left-radius: 1em;
    border-top: 1px solid #353535;
    border-left: 1px solid #353535;
    cursor: default;
}

.daily-body .locked-box {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
}

.daily-body .locked {
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    cursor: not-allowed;
}

.daily-body .claim-message {
    width: 100%;
}

/* //QQ WORKSHOP STYLE */

.guild-modal .workshop-build .col-lg-2 {
    border: 1px solid #353535;
    border-radius: .2em;
    margin: .4em;
    transition-duration: .3s;
    padding: .1em;
}

.guild-modal .workshop-build .col-lg-2 span:first-child {
    border-bottom: 1px solid #353535;
    display: block;
    width: 100%;
    font-weight: 800;
    text-align: center;
}

.guild-modal .workshop-build .workshop-have {
    display: block;
    width: 100%;
}

.guild-modal .barracks-resources {
    position: sticky;
    top: 0px;
    z-index: 100;
    display: block;
    width: 65%;
    background-color: #1b1b1b;
    height: 32px;
    margin: 0 auto;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    border: 1px solid #44474d;
    border-top: unset;
    cursor: default;
}

.guild-modal .barracks-resources span {
    display: block;
    margin: 0 auto;
    text-align: center;
    padding-top: .3em;
}

.guild-modal .barracks-resources wrap {
    border-radius: .4em;
    border: 1px solid #272727;
    padding-left: .2em;
    padding-right: .2em;
    cursor: default;
    transition-duration: .3s;
}

.guild-modal .barracks-resources wrap:hover {
    border-radius: .4em;
    border: 1px solid #333333;
}

.guild-modal .workshop-build .col-lg-2 .workshop-item span {
    border-top: 1px solid #353535;
    border-bottom: unset;
}

.guild-modal .workshop-build .col-lg-2:hover {
    border: 1px solid #4b4b4b;
    border-radius: .3em;
}

.guild-modal .workshop-build .form-control {
    padding: 0;
    margin: 0;
    text-align: center;
    border: 1px solid #353535;
}

.guild-modal .workshop-build .workshop-message {
    font-size: 10px;
    color: #3cff00;
    font-weight: 400;
}


.guild-modal .workshop-build .input-group {
    margin-bottom: .4em;
    padding-left: .6em;
    padding-right: .6em;
}

.guild-modal .workshop-build .input-group button img {
    width: 20px;
    height: 20px;
}

.guild-modal .icon {
    height: 16px;
    width: 16px;
}

.smallest-icon {
    width: 16px;
    height: 16px;
}

.small-icon {
    width: 18px;
    height: 18px;
}

.button-icon {
    width: 24px;
    height: 24px;
}

.medium-icon {
    width: 42px;
    height: 42px;
}

.big-icon {
    width: 64px;
    height: 64px;
}

.guild-window .guild-chat ul li:hover {
    background-color: inherit;
}

.guild-window .guild-chat ul li {
    border-radius: 0;
}

.guild-window .guild-board {
    background-color: rgba(0, 0, 0, 0.2);
    border: 2px solid #3a3f48;
    max-height: 90vh;
    overflow-y: scroll;
}

.guild-window .guild-board hr {
    margin-top: -1em;
}

.guild-window .guild-emblem {
    position: absolute;
    top: 0;
    left: 1rem;
    height: 120px;
    filter: drop-shadow(2px 2px 4px #000000);
}

.guild-board .menu-icon {
    background-color: rgba(212, 0, 0, 0.24);
    border-radius: 50%;
    max-width: 110px;
    max-height: 110px;
    border: 1px solid #afafaf8a;
    transition-duration: .2s;
}

.guild-board .menu-icon:hover {
    background-color: rgba(212, 0, 0, 0.44);
}

.guild-board .menu-button {
    display: block;
    width: 100%;
    height: 4em;
    line-height: 4em;
    border: 1px solid #afafaf8a;
    text-align: center;
    font-size: 1.1em;
    background-color: #31353D;
    margin: 4px 0 4px 0;
    border-radius: 4px;
    transition-duration: .3s;
}

.guild-board .menu-button:hover {
    background-color: #393E46;
}

.guild-board .menu-button img {
    position: absolute;
    right: 1.4em;
    height: 3em;
    width: 3em;
    margin-top: 6px;
}

.guild-board .board-construction {
    font-size: 12.5px;
    margin: .2em;
    padding: .2em;
    transition-duration: .2s;
}

.guild-board .board-construction:hover {
    background-color: #292b33;
}


.guild-window .progress {
    height: 2em;
}

.guild-modal .table th,
.table td {
    padding: 2px 0 2px 0;
}

.guild-card {
    padding: .4em;
    border-radius: 4px;
    background-color: #31353D;
    border: 1px solid #3A3F48;
    margin-bottom: 1em;
    transition-duration: .3s;
}

.guild-card:hover {
    border: 1px solid #404650;
}

.guild-card .guild-emblem {
    position: absolute;
    top: .4rem;
    left: 1.4rem;
    height: 64px;
    filter: drop-shadow(2px 2px 4px #000000);
}

.guild-card .collapse {
    background-color: unset;
}

.guild-card input,
.guild-card select,
.guild-card option,
.guild-card textarea,
.guild-card .form-control {
    background-color: #1f1f1f !important;
    color: #eeeeee !important;
}

.guild-card textarea {
    border-color: unset !important;
    box-shadow: unset !important;
}

.guild-card textarea:active,
textarea:focus {
    border-color: rgba(239, 165, 104, 0.8) !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 2px rgba(239, 165, 104, 0.6) !important;
    outline: 0 none !important;
}

.guild-card {

    /* Change the white to any color */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px #1f1f1f inset !important;
    }

    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 50px #eeeeee inset;
        /* Change the color to your own background color */
        -webkit-text-fill-color: #eeeeee;
    }

    input:-webkit-autofill:focus {
        -webkit-box-shadow:
            0 0 0 50px #eeeeee inset;
        -webkit-text-fill-color: #eeeeee;
    }
}

.btn-outline-game {
    color: #fff;
    border-color: #ced4da;
}

.btn-outline-game:hover {
    color: #fff;
    background-color: #1f1f1f;
    border-color: rgba(239, 165, 104, 0.8) !important;
}

.btn-outline-game:focus,
.btn-outline-game.focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.btn-outline-game.disabled,
.btn-outline-game:disabled {
    color: #fff;
    background-color: transparent;
}

.btn-outline-game:not(:disabled):not(.disabled):active,
.btn-outline-game:not(:disabled):not(.disabled).active,
.show>.btn-outline-game.dropdown-toggle {
    color: #fff;
    background-color: #1f1f1f;
    border-color: #ced4da;
    box-shadow: transparent;
}

.btn-outline-game:not(:disabled):not(.disabled):active:focus,
.btn-outline-game:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-game.dropdown-toggle:focus {
    box-shadow: transparent;
}

.btn-outline-workshop {
    color: #fff;
    border-color: #353535;
}

.btn-outline-workshop:hover {
    color: #fff;
    background-color: #1f1f1f;
    border-color: rgba(239, 165, 104, 0.8) !important;
}

.btn-outline-workshop:focus,
.btn-outline-workshop.focus {
    box-shadow: 0 0 0 0.1rem rgba(255, 193, 7, 0.2);
}

.btn-outline-workshop.disabled,
.btn-outline-workshop:disabled {
    color: #fff;
    background-color: transparent;
    border-color: #ff0000;
    transition-duration: .3s;
}

.btn-outline-workshop:not(:disabled):not(.disabled):active,
.btn-outline-gaworkshopme:not(:disabled):not(.disabled).active,
.show>.btn-outline-workshop.dropdown-toggle {
    color: #fff;
    background-color: #1f1f1f;
    border-color: #353535;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-outline-workshop:not(:disabled):not(.disabled):active:focus,
.btn-outline-workshop:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-workshop.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

/* Overlay image styles */
.overlay-button {
    position: relative;
    pointer-events: none;
    /* Prevent clicks */
}

.overlay-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('assets/interface-icons/spinner.svg') center center no-repeat;
    background-size: contain;
    opacity: 0.6;
    /* Adjust opacity as needed */
    z-index: 10;
}

.btn-cool {
    border: 3px solid #282C33;
}

.btn-cool:hover {
    border: 3px solid #31353D;
}

.drop-splitter {
    font-size: 1.1em;
    padding: 4px;
    color: #ffffff;
    display: grid;
    justify-content: center;
    cursor: default;
}

.h-60 {
    height: 60% !important;
}

.h-65 {
    height: 65% !important;
}

.btn-game {
    color: #fff;
    background-color: #31353D;
    border-color: #afafaf8a;
    transition-duration: .1s;
}

.btn-game:hover {
    color: #fff;
    background-color: #393E46;
}

.btn-game:focus,
.btn-game.focus {
    color: #fff;
    background-color: #31353D;
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0);
}

.btn-game.disabled,
.btn-game:disabled {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-game:not(:disabled):not(.disabled):active,
.btn-game:not(:disabled):not(.disabled).active,
.show>.btn-game.dropdown-toggle {
    color: #fff;
    background-color: #393E46;
    border-color: #eff0f2;
}

.btn-game:not(:disabled):not(.disabled):active:focus,
.btn-game:not(:disabled):not(.disabled).active:focus,
.show>.btn-game.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0);
}

#guild-emblem-picker .col-lg-3 img {
    transition-duration: .2s;
}

#guild-emblem-picker .col-lg-3 img:hover {
    transform: scale(1.1);
    filter: brightness(1.4);
    cursor: pointer;
}

.inspect li {
    cursor: pointer;
}

.inspect li img {
    width: 42px;
    height: 42px;
}

.inspect li span {
    float: unset;
}

.goright {
    position: absolute;
    right: 1.3em;
    bottom: 1.3em;
}

/* Apply Inscription Stlye */
.apply-content .apply-box {
    border: 1px solid #353535;
    border-radius: .2em;
    margin: .4em;
    transition-duration: .3s;
    padding: .1em;
    background-color: #212329;
}

.apply-content .apply-box hr {
    margin: .4em;
}

.apply-content .apply-box h5 {
    text-align: center;
}

.apply-content .apply-box:hover {
    border: 1px solid #4b4b4b;
}

.apply-content .equipped {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 10%);
    color: #fff;
    font-weight: bold;
    border-bottom: 1px solid #353535;
    display: block;
    width: 100%;
}

.apply-content button:hover {
    cursor: url(assets/interface-icons/cursor/rune.png), auto;
}