:root {
    --url-color: #F5CF87;
}
body {
    background: #454d55 url('../image/bg2.jpg') repeat-x top left;
}

.dark-mode .content-wrapper {
    background-color: transparent;
}

.navbar-dark {
    background-color: #343a408a;
    border-color: #4b545c8a;
}


.st-arr span, .st-mid span {
    margin-bottom: 10px;
    display:block;
}

.st-arr:before {
    content:'';
    position: relative;
    top: 0;
    display: block;
    width: 20px;
    margin: 0 auto 0 auto;
    color: steelblue;
    background: url(../image/bottom-arrow.png) no-repeat center -10px;
    height: 16px;
    opacity:0.4;
}

.st-col-left .st-arr:before, .st-col-left .st-arr span {
    padding-right: 10px;
}

.st-col-right .st-arr:before, .st-col-right .st-arr span  {
    padding-left: 10px;
}

.st-mid:after {
    content:'|';
    position: relative;
    bottom: 0;
    display: block;
    width: 20px;
    margin: -14px auto -3px auto;
    color: #707377;
}

.st-line-25-50-25 {
    border-bottom: 1px solid pink;
    border-image: linear-gradient( 90deg, transparent, transparent 25%, #707377 25%, #707377 75%, transparent 75%) 10;
}

.st-line-17-66-17 {
    border-bottom: 1px solid pink;
    border-image: linear-gradient( 90deg, transparent, transparent 17%, #707377 17%, #707377 83%, transparent 83%) 10;
}

.timeline > div .fas {
    top:4px;
}

.timeline .time-label {
    margin-top: 60px;
}

.sticky-top .timeline::before {
    display: none;
}

#skill-list {
    margin-top: -143px;
}

#skill-list .timeline-body .row:nth-child(2){
    background-color: #424445;
}

#skill-list .timeline-body .row {
    margin: 2px 0;
    padding-bottom: 3px;
}

.skill-tree .btn {
    min-width: 125px;

}

.skill-tree .btn.btn-outline-secondary {
    color: #808C96;
}

.skill-tree .btn.btn-outline-secondary img {
    width: 50px;
    min-height: 50px;
}

#map {
    position: absolute;
    top: calc(3.5rem + 9px);
    bottom: calc(3.5rem + -9px);
    right: 444px;
    left:0;
    background: transparent;
}

.img_border {
    border: 1px solid #FFC46E;
    padding:0;
    margin:0;
}

.td_icon {
    padding:0;
}

.control-sidebar {
    position: fixed;
    overflow-y: scroll;
    top: calc(3.5rem + 9px);
    bottom: calc(3.5rem + -9px);
    width: 100%;
    max-width: 444px;
}


.control-sidebar:before {
    display:none;
}


.search-img {
    float: left;
    margin: 5px 8px 0 0;
}

.npc_table .table-sm .search-img {
    margin: 5px 8px 0 0;
    width: 16px;
}

.npc_table, .npc_table .table-sm th {
    background-color: #3a4047;
    border-top-color: #3a4047;
}


.npc_table .table-sm {
    background-color: #4F5D7366;
}

.npc_table .table-sm td {
    border-top-color: var(--gray-dark);
}


/* COLORS */

.grade-ng {
    color: var(--gray);
}
.grade-d {
    color: var(--blue);
}
.grade-c {
    color: var(--green);
}
.grade-b {
    color: var(--yellow);
}
.grade-a {
    color: var(--orange);
}
.grade-s {
    color: var(--red);
}

.grade-rb {
    color: var(--purple);
}

.bg-grade-ng {
    background-color: var(--gray);
}
.bg-grade-d {
    background-color: var(--blue);
}
.bg-grade-c {
    background-color: var(--green);
}
.bg-grade-b {
    background-color: var(--yellow);
}
.bg-grade-a {
    background-color: var(--orange);
}
.bg-grade-s {
    background-color: var(--red);
}

.bg-grade-rb {
    color: var(--purple);
}
.badge.bg-grade-ng,
.badge.bg-grade-d,
.badge.bg-grade-c,
.badge.bg-grade-b,
.badge.bg-grade-a,
.badge.bg-grade-s {
    text-shadow: black 0 1px 4px;
}

.badge.badge-grade {
    color: #FFF;
    background-color: #000;
    border-top-color: #AAA;
    border-right-color: #CCC;
    border-width: 1px;
    border-style: solid;
    border-bottom-color: #555;
    border-left-color: #777;
    font-weight:normal;
    font-size:8px;
    vertical-align: text-top;
}

#map path.drop {
    stroke-width:1;
}

#map path.spoil {
    stroke-width:1;
    opacity: 0.5;
    stroke: lightgray;
}

#map .grade-ng {
    fill: var(--gray);
    stroke: var(--gray);
    opacity: 0.85;
}
#map .grade-d {
    fill: var(--blue);
    stroke: var(--blue);
    opacity: 0.85;
}
#map .grade-c {
    fill: var(--green);
    stroke: var(--green);
    opacity: 0.85;
}
#map .grade-b {
    fill: var(--yellow);
    stroke: var(--yellow);
    opacity: 0.85;
}
#map .grade-a {
    fill: var(--orange);
    stroke: var(--orange);
    opacity: 0.85;
}
#map .grade-s {
    fill: var(--red);
    stroke: var(--red);
    opacity: 0.85;
}
#map .grade-rb {
    fill: var(--purple);
}



.dark-mode .nav-tabs .nav-link.active {
    background-color: #343a40;
    border-color: #56606a #56606a #343a40 #56606a;
    color: #fff;
    border-width: 1px;
    border-style: solid;
}

.control-sidebar-dark .nav-tabs .nav-item {
    margin-bottom: -1px;
    margin-left: 10px;
}

.dark-mode .nav-tabs {
    background-color: #343a40;
    border-bottom: 1px solid #56606a;
    border-image-source: linear-gradient(90deg, rgba(86,96,106,1) 0%, rgba(86,96,106,1) 55%, rgba(52,58,64,1) 95%);
    border-image-slice: 1;
}



.leaflet-bar a, .leaflet-bar a:hover, .leaflet-control-layers {
    background-color: #666;
}

.leaflet-bar a.leaflet-disabled {
    background-color: #444;
}

.leaflet-bottom.leaflet-right {
    left:0;
    right: initial;
}

.leaflet-control-layers-base > label > div > span {
    color: #fff;
}

.btn-hide-map, .btn-show-map {
    display:none;
}

@media (max-width: 800px) {

    .control-sidebar {
        max-width: initial;
    }

    .footer-hide {
        display:none;
    }

    #map {
        right: 0;
        transition: 3ms;
    }

    .btn-hide-map, .btn-show-map {
        display:initial;
    }

    .btn-hide-map {
        z-index: 570;
        position: fixed;
        right: 70px;
        padding: 9px;
        top: 77px;
    }
}



@media (min-width: 801px) {
    .control-sidebar {
        display: block!important;
        right: 0!important;
    }
}

.hide {
    display:none;
}

.sidebar-search-results .list-group-item {
    cursor:pointer;
}

.search-list-item {
    cursor:pointer;
}

#chars tr[data-status="im"] {
    background-color:#222;
    opacity:0.2;
}


#chars tr[data-status="cl"] td.char_name {
    color:#EECE3D;
}

#chars div.class_img {
    width:32px;
    margin-right:24px;
    position:relative;
}

#chars div.class_img>.badge {
    font-size: 11px;
    font-weight: 400;
    position: absolute;
    right: -10px;
    top: -3px;
}

#chars td.char_name .badge.not-noble {
    text-decoration: line-through;
}

#chars .toggle-wishlist .item_img {
    display:inline-block;
}

#chars .jewelry img:not(.clan-item, .owned, .have-access) {
    filter:grayscale(100%) opacity(0.2);
}

#chars .jewelry .item_img {
    display:inline-block;
}

#chars .jewelry img.clan-item {
    opacity: 1;
}

#chars .jewelry img.owned {
    outline:1px solid #5c7791;
}

#chars .jewelry img.have-access {
    opacity: 0.4;
    outline: 1px dashed #a3c5f5;
}

#chars .books img:not(.clan-item, .owned, .have-access) {
    filter:grayscale(100%) opacity(0.2);
}

#chars .books img.owned {
    outline:1px solid #5c7791;
}


#chars div.item_img {
    width:32px;
    position:relative;
    margin-right:4px;
}

#chars div.item_img>.badge {
    font-size: 8px;
    font-weight: 400;
    position: absolute;
    right: 1px;
    top: 1px;
}



#chars .filter-grayscale {
    filter: brightness(50%);
}

#chars .books.jewelry.combine img.toggle-book:not(.clan-item ) {
    display:none;
}

#chars .books.jewelry.combine .item_img.toggle-jewelry:has(img:not(.clan-item) ) {
    display:none;
}

#chars .books.jewelry.combine img:is(.clan-item, .owned) {
    float:left;
    margin-right:1px;
}

:nth-child(1 of table#chars .books.jewelry:not(.combine) img.book) {
    margin-left:30px;
}

:nth-child(1 of table#chars .books.jewelry:not(.combine) .item_img.weapon) {
    margin-left:30px;
}

.filter-by-class-archetypes label.dropdown-item {
    margin-top:5px;
    margin-bottom:0;
    padding-right: 8px;
    padding-left: 8px;
}

.filter-by-class-archetypes .filter-grayscale {
    filter: brightness(70%);
}

.filter-by-class-archetypes img.filter-by-class-item {
    width:26px;
    filter: brightness(70%);
    margin-left: 5px;
}

.filter-by-class-archetypes img.filter-by-class-item.selected {
    border:1px solid #F5CF87;
    filter: brightness(100%);
}

/* Filter Wishlist */

.filter-by-wishlist label.dropdown-item, .filter-by-item label.dropdown-item {
    margin-top:5px;
    margin-bottom:0;
    padding-right: 8px;
    padding-left: 8px;
}


.filter-by-wishlist img.filter-by-item, .filter-by-item img.filter-by-item {
    width:26px;
    filter: brightness(70%);
    margin-left: 5px;
    margin-bottom:5px;
}

.filter-by-wishlist img.filter-by-item.selected, .filter-by-item img.filter-by-item.selected {
    border:1px solid #F5CF87;
    filter: brightness(100%);
}

.bg-level {
    background-color: #1f2d3d!important;
    color: #F5CF87!important;
    border: 1px solid #AF8F54;
}

.bg-level.level-80 {
    background-color: #F5CF87!important;
    color: #1f2d3d!important;
    font-weight:700 !important;
}

.bg-level.level-81, .bg-level.level-82 {
    background-color: #efbb5a!important;
    color: #1f2d3d!important;
    font-weight:700 !important;
}

.bg-level.level-83, .bg-level.level-84, .bg-level.level-85   {
    background-color: #ffa600!important;
    color: #1f2d3d!important;
    font-weight:700 !important;
}

.todo-list .user-image, .project-users .user-image {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-left: 8px;
}

.filter-element {
    display:inline-block;
    border:1px solid #5db8c6;
    border-radius:5px;
    margin:8px;
    padding:8px;
}

.dropdown-menu .filter-element {
    display:inline-block;
    border:none;
    margin:0;
    padding:0;
}

/* tri-state-toggle */
.tri-state-toggle input {
    height: 16px;
    width: 16px;
    appearance: none;
    background-color: #222;
    border-radius: 50%;
    opacity: 0;
}
.tri-state-toggle input:hover {
    cursor: pointer;
}

.tri-state-toggle {
    display: flex;
    justify-content: center;
    border: 3px solid #222;
    border-radius: 50px;
    width:48px;
}

.tri-state-toggle.toggle-hide {
    background-color:red;
}
.tri-state-toggle.toggle-show {
    background-color:green;
}

.tri-state-toggle.toggle-hide input.button[value="hide"] {
    opacity: 1;
}
.tri-state-toggle.toggle-na input.button[value="na"] {
    opacity: 1;
}
.tri-state-toggle.toggle-show input.button[value="show"] {
    opacity: 1;
}

/* Filter Jewelry Toggle (By image) */

.filter-by-item img[data-class="filter-toggle"], .filter-by-skill img[data-class="filter-toggle"] {
    width:26px;
    filter: brightness(70%);
    margin-left: 5px;
    margin-bottom:5px;
}

.filter-by-item img[data-class="filter-toggle"][data-toggle="show"], .filter-by-skill img[data-class="filter-toggle"][data-toggle="show"] {
    filter:grayscale(0%);
    outline:1px solid green;
}

.filter-by-item img[data-class="filter-toggle"][data-toggle="hide"], .filter-by-skill img[data-class="filter-toggle"][data-toggle="hide"] {
    filter:inherit;
    outline:1px solid red;
}



img[data-class="toggle-status"] {
    filter:grayscale(100%) opacity(0.2);
    margin:2px;
    border-radius:4px;
}

[data-id="char_edit_form"] h4 {
    margin-top:20px;
}

[data-id="char_edit_form"] img[data-class="toggle-status"] {
    cursor: pointer;
}

img[data-class="toggle-status"][data-toggle="clan"] {
    opacity: 1;
    filter:grayscale(0%);
}

img[data-class="toggle-status"][data-toggle="access"] {
    opacity: 0.4;
    filter:grayscale(0%);
    outline: 1px dashed #a3c5f5;
}

img[data-class="toggle-status"][data-toggle="owned"] {
    outline: 1px solid #5c7791;
    filter:grayscale(0%);
}

/* double-state-toggle */
.double-state-toggle input {
    height: 12px;
    width: 12px;
    appearance: none;
    background-color: #222;
    border-radius: 50%;
    opacity: 0;
}
.double-state-toggle input:hover {
    cursor: pointer;
}

.double-state-toggle {
    display: flex;
    justify-content: center;
    border: 3px solid #222;
    border-radius: 50px;
    width:30px;
}

.double-state-toggle.toggle-hide {
    background-color:red;
}
.double-state-toggle.toggle-show {
    background-color:green;
}

.double-state-toggle.toggle-hide input.button[value="hide"] {
    opacity: 1;
}
.double-state-toggle.toggle-show input.button[value="show"] {
    opacity: 1;
}
/*
.filter-by-jewelry .dropdown-item:active, .filter-by-skill .dropdown-item:active {
 background-color: #3f474e;;
 color: inherit;
}
*/
.dark-mode .dropdown-menu {
    background-color: #222;
}

.fade-out {
    opacity: 1;
    transition: color 4s;
}

.hidden {
    color:red!important;
}

.l2c--clan-img {
    display: inline-block;
    width: 25px;
    height: 14px;
    background-repeat: no-repeat;
    padding-right: 5px;
}

.memberlist-combined table caption {
    caption-side: top;
}

.memberlist-combined {
    margin-bottom:26px;
}memberlist-

table.memberlist tr:first-of-type th {
    border-top:none;
}

.pull-left {
    float:left!important;
}

#formJewelry datalist.range {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    writing-mode: vertical-lr;
    width: 80px;
}

#formJewelry input[type="range"] {
    width: 80px;
    margin: 0;
}

#formBooks datalist.range {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    writing-mode: vertical-lr;
    width: 60px;
}

#formBooks input[type="range"] {
    width: 60px;
    margin: 0;
}

#formJewelry option, #formBooks option {
    padding: 0;
}

.wishlist-picker .dropzone {
    cursor: pointer;
}

.dropzone {
    border: 3px #999 dashed;
    border-radius: 10px;
    height:94px;
    width:100%;
    font-weight:bold;
    font-size:24px;
    color:#999;
    text-align:center;
}

.dropzone .dropzone-item {
    font-size:12px;
}

.dropzone .dropzone-item img {
    border-radius:4px;
}

label.priority_picker input[type="radio"] {
    appearance: none;
}

label.priority_picker {
    cursor:pointer;
    display:block;
    font-weight:normal!important;
    padding: .25rem 0rem;
    margin-bottom:0;
}

.wishlist-picker h5 {
    margin-top:10px;
    color:#AAA;
}

.dark-mode label.priority_picker:hover {
    color: #3395ff;
    background-color: #3f474e;
}



label.priority_picker:has(input[type="radio"]:checked) {
    color: #3395ff;
    background-color: #3f474e;
}

.dark-mode .btn-primary {
    color: #fff;
    background-color: #3f6791;
    border-color: #3f6791;
    box-shadow: none;
}

@media (min-width:1600px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width:1440px
    }
}

.memberlist-group-header {
    position: sticky;
    top: 160px;
    z-index: 350;
    background-color: inherit;
}

/* Range Slider */

.memberlist-filters .filter-by-level {


    .range_container {
        display: flex;
        flex-direction: column;
        width: 80%;
        margin: 0 auto 15px;
    }

    .sliders_control {
        position: relative;
        margin-top:24px;
    }

    .form_control {
        position: relative;
        display: flex;
        justify-content: space-between;
        /* font-size: 24px; */
        color: #635a5a;
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        pointer-events: all;
        width: 16px;
        height: 16px;
        background-color: #343a40;
        border-radius: 50%;
        box-shadow: 0 0 0 1px #5db8c6;
        cursor: pointer;
    }

    input[type=range]::-moz-range-thumb {
        -webkit-appearance: none;
        pointer-events: all;
        width: 16px;
        height: 16px;
        background-color: #C6C6C6;
        border-radius: 50%;
        color:#5db8c6;
        cursor: pointer;
    }

    input[type=range]::-webkit-slider-thumb:hover {
        background: #f7f7f7;
    }

    input[type=range]::-webkit-slider-thumb:active {
        box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
        -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
    }

    input[type="number"] {
        color: #8a8383;
        width: 40px;
        font-size: 18px;
        border: none;
        background-color:inherit;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        opacity:1;
    }

    input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        height: 2px;
        width: 100%;
        position: absolute;
        background-color: #C6C6C6;
        pointer-events: none;
    }

    #fromSlider {
        height: 0;
        z-index: 1;
    }
}

.memberlist-filters .btn-block {
    margin:10px;
}

.popover {
    border:none;
    background-color:#191c1f;
}

.bs-popover-top > .arrow::after {
    border-top-color: #191c1f;
}
.bs-popover-top > .arrow::before {
    border-top-color: #191c1f;
}

.l1db-armors ul.navbar-nav {
    flex-direction:row;
}

.l1db-armors li .nav-link {
    padding-left:1rem;
    padding-right:1rem;
}

.item-type-title:first-letter {
    text-transform: uppercase;
}

.badge-success {
    color: #fff;
    background-color: #28a745;
}

.items-db .stat-title {
    /*background-color: #454D55;*/
    /*font-weight:bold;*/
    color:#CCC;
}

.items-db .stat-value {
    color:#F5CF87;
}

.items-db .stat-value.highlight, .items-db .stat-title.highlight {
    font-weight:bold;
}

.badge-golden {
    background-color:#F5CF87;
    color:#000;
}

.icon_boss {
    width:50px;
    height:5px;
    border-radius:50%;
    background-color: red;
}

.filters .nav-item label {
    padding-right:1rem;
    padding-left:1rem;
    color:var(--url-color);
    font-weight:normal;
    cursor:pointer;
}