[v-cloak] > * { display: none !important; }
[v-cloak]::before { content: "Loading..."; }

#top-nav.navbar {top:0;position:relative;border-left:0;padding-left:5px;}

body.full-screen header {display:block;}

#sign-up-nudge {display:none;}

#god-roll { display: table; }
#god-roll-container {display:table-row;}

html,
body {overflow-y:hidden;overflow-x:hidden;}

#sidebar a:active,
#sidebar a:focus,
#sidebar a:visited {color:#fff;}
#sidebar a {text-decoration:none;}

#sidebar { bottom:0px; -webkit-transform: translate3d(0,0,0); -webkit-transition: width 0.5s; /* Safari */ transition: width 0.5s; 
           transition-timing-function: ease-out; display: table-cell; vertical-align: top; background-color: #333; position: fixed; top: 110px; left: 0px; 
           width: 175px; z-index: 15; overflow-y: auto; padding-bottom: 40px; overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#999 #333;transform:translate3d(0,0,0);color:#aaa;
           background-image:linear-gradient(to right,#222 0%, #111 100%);

}
#sidebar i.fa-times.pull-right {display:block;margin-right:10px;margin-top:10px;font-size:25px;box-shadow:1px 0px 1px #0008;}

#sidebar-expander {font-size:20px;text-align:left;padding:10px;}
#sidebar-expander strong {font-size:16px;position:relative;top:-5px;text-align:left;}
#sidebar-expander i:hover{color:#fff;cursor:pointer;}
#sidebar > div.weapon-types >a> div.weapon-type {cursor:pointer;position:relative;}
#sidebar > div.weapon-types >a> div > img {display:block;margin-bottom:-5px;width:100px;transition: width 0.25s;transition-timing-function: linear;opacity:0.5;margin-left:auto;margin-right:auto;left:-2px;position:relative;}
#sidebar > div.weapon-types >a> div > i {color:#f70; position:absolute; top:30%;font-size:12px;left:7px;}

#sidebar > div.weapon-types >a> div:hover > img,
#sidebar > div.weapon-types >a> div.active > img {opacity:1;}
#sidebar > div.weapon-types >a> div.sidearm > img {height:47px;width:auto;}
#sidebar > div.weapon-types >a> div > strong {visibility:hidden;white-space:nowrap;font-size:0px;opacity:0;transition: opacity 0.5s;transition-timing-function: ease-out;text-align:center;display:block;}
#sidebar > div.weapon-types >a> div:hover > strong,
#sidebar > div.weapon-types >a> div.active > strong {color:#fff;}

#sidebar > div.weapon-types > div.roll-counts {font-weight:bold;position:relative;width:141px;padding-left:0px;margin:auto;}
#sidebar.active > div.weapon-types >a> div.roll-counts {margin:0px auto;left:14px;}

#sidebar > div.weapon-types > div.roll-counts > span { float:left; transform:skew(-30deg);background-color:#666;
                                                       display:inline-block;margin-right:1px;color:#fff;text-shadow:1px 1px 1px #333;
                                                       filter:drop-shadow(1px 1px 0px #000);width:calc(50% - 15px);
}
#sidebar > div.weapon-types > div.roll-counts > ins {color:#fff;text-shadow:1px 1px 1px #333;}
#sidebar > div.weapon-types > div.roll-counts > span > span {transform:skew(30deg);display:inline-block;margin-left:-5px;padding:2px 10px;padding-left:7px;padding-right:5px;width:35px;text-align:center;}
#sidebar > div.weapon-types > div.roll-counts > span.front {border-top-left-radius:12px;transform:skew(0deg);width:15px;height:24px;margin-right:-8px;position:relative;z-index:15;border-right:0px;filter:none;}
#sidebar > div.weapon-types > div.roll-counts > span.all > span {padding-left:0px;}
#sidebar > div.weapon-types > div.roll-counts > ins.front-count {width:40%;position:absolute;left:0px;top:0px;height:24px;z-index:20;text-decoration:none;text-align:center;padding-top:2px;padding-left:5px;}

#sidebar > div.weapon-types > div.roll-counts > span.pvp {background-color:#922;}
#sidebar > div.weapon-types > div.roll-counts > span.pve {background-color:#229;}

#sidebar > div.weapon-types > div.roll-counts > span.end {border-bottom-right-radius:12px;background-color:#444;transform:skew(0deg);width:15px;height:24px;margin-left:-8px;position:relative;z-index:15;border-left:0px;}
#sidebar > div.weapon-types > div.roll-counts > span.god {background-color:#444;margin-right:0px;}
#sidebar > div.weapon-types > div.roll-counts > span.god > span {padding-left:0px;padding-right:0px;}
#sidebar > div.weapon-types > div.roll-counts > ins.god-count {width:60%;position:absolute;right:0px;top:0px;height:24px;z-index:20;text-decoration:none;text-align:center;padding-top:2px;padding-right:5px;}



#sidebar.active { width: 225px; -webkit-transition: width 0.5s; /* Safari */ transition: width 0.5s; transition-timing-function: ease-in; }

#sidebar.active > div.weapon-types >a> div > img {visibility:visible;width:150px;}
#sidebar.active > div.weapon-types >a> div.sidearm > img{height:83px;width:auto;}
#sidebar.active > div.weapon-types >a> div > strong {visibility:visible;opacity:1;font-size:20px;color:#fff;}

#toggle-all-types {width:105px;margin:0px auto;display:block;}


#sidebar::-webkit-scrollbar { width: 5px; height: 5px; background-color: transparent; margin-top: 10px; }
#sidebar::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 2.5px; }

#possible-rolls::-webkit-scrollbar { width: 5px; height: 5px; background-color: transparent; margin-top: 10px; }
#possible-rolls::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 2.5px; }

#roll-list::-webkit-scrollbar { width: 5px; height: 5px; background-color: transparent; margin-top: 10px; }
#roll-list::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 2.5px; }

#filters-list::-webkit-scrollbar { width: 5px; height: 5px; background-color: transparent; margin-top: 10px; }
#filters-list::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 2.5px; }

#perk-list::-webkit-scrollbar { width: 5px; height: 5px; background-color: transparent; margin-top: 10px; }
#perk-list::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 2.5px; }

#favorite-container::-webkit-scrollbar { width: 5px; height: 5px; background-color: transparent; margin-top: 10px; }
#favorite-container::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 2.5px; }

#loading {display:table-cell;position:fixed;top:0px;height:45px;z-index:10;left:175px;right:0;background-color:#999d;padding:10px;color:#fff;font-weight:bold;text-shadow:1px 1px 1px #0008;}
#loading.active { top:110px; }

#perk-selector { position:sticky;top:41px;left:0;max-width:500px;bottom:0;min-width:400px; }
#perk-list {scrollbar-width:thin;scrollbar-color:#999 #333;-webkit-transform:translate3d(0,0,0);height:580px;overflow-y:auto; border:1px solid #aaa;margin:10px;margin-top:0px;}
body.dark #perk-list {border:1px solid #222;}

#perk-list:not(.ready) {animation-duration: 1.8s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: transparent;
    background: linear-gradient(to right, #1110 8%, #123 38%, #1110 54%);
    background-size: 1000px 640px;
    
    position: relative;}
#roll-container:not(.ready) {animation-duration: 1.8s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: transparent;
    background: linear-gradient(to right, #1110 8%, #123 38%, #1110 54%);
    background-size: 1000px 640px;
    }


@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}
.gradient {
    
    
}

@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}


#perk-list div.perk-type > div {padding:10px;}
#perk-list h3 {}

#perk-list h3 {font-weight:bold;cursor:pointer;padding:10px 10px;margin:0px;margin-bottom:1px;border-bottom:1px solid #999;color:#333;background-color:#bbb;user-select:none;text-shadow:1px 1px 1px #fff;}
body.dark #perk-list h3 {background-color:#444;text-shadow:1px 1px 1px #000;color:#eee;border-bottom-color:#555;}
#perk-list h3:hover {font-weight:bold; opacity:0.75;}

#perk-filters-bar {position:sticky;top:2px;z-index:100;background-color:#f0f0f0;border-bottom:1px solid #999;left:0;right:0;width:100%;display:grid;grid-template-areas:"bar clear filters";grid-template-columns:1fr 45px 85px;height:41px;}
#perk-filters-bar input {font-size:20px;border:0;outline:0;padding:2px 5px;background-color:#f0f0f0;border: 1px solid #ccc;margin:3px;max-width:unset;display:inline-block;width:100%;grid-area:bar;height:35px;}
#perk-filters-bar > i {font-size:20px;display:inline-block;cursor:pointer;grid-area:clear;line-height:40px;text-align:center;}
#perk-filters-bar > i:hover {opacity:0.75;}
#perk-filters-bar > button {grid-area:filters;height:30px;margin-top:5px;margin-right:5px;vertical-align:center;}
body.dark #perk-filters-bar {background-color:#222;border-color:#333;}
body.dark #perk-filters-bar input {background-color:#222;border:1px solid #333;color:#eee;}

#perk-buttons {margin-top:10px;}

#perk-selector #clear-selections,
#perk-selector #add-perk-group,
#perk-selector .right-link { font-size: 14px; margin-left: 10px; }

#perk-selector a i {margin-right:5px;}

#perk-selector-header {padding:10px;}
#perk-selector-header h3 {margin-top:5px;}

#selected-perk-container { display: flex; flex-direction: row; flex-wrap: wrap; }

#perk-selector div.perk-group { padding-right: 10px; flex-grow: 1; }
#perk-selector div.perk-group:last-of-type { padding-right: 0px; }

#perk-selector div.perk-group h4 {}
#perk-selector div.perk-group h4 i.fa-times-circle {display: inline-block; text-shadow: 1px 1px 0px #fff, -1px 1px 0px #fff, 1px -1px 0px #fff,-1px -1px 0px #fff;
                                                           background-color:#fff;border-radius:7px;cursor:pointer;font-size:12px;color:#f00;position:relative;top:-2px; }

#perk-selector div.perk-group-destination { min-height: 60px; border: 1px dashed #aaa; }
body.dark #perk-selector div.perk-group-destination { border-color:#333; }
#perk-selector div.perk-group-destination > div.sortable-ghost > div > div { display: none; }

#perk-selector div.perk-type-container div.pull-left {margin-right:5px;position:relative;}

#perk-selector div.perk-type-container div.pull-left > i { display: none; position: absolute; text-shadow: 1px 1px 0px #fff, -1px 1px 0px #fff, 1px -1px 0px #fff,-1px -1px 0px #fff;
                                                           background-color:#fff;border-radius:7px;cursor:pointer;right:-2px;top:3px;z-index:25;font-size:20px;
}

#perk-selector div.perk-type-container div.pull-left > i { background-color:#fff;}

#perk-list div.perk-type > div > div { display: flex; flex-direction: row; flex-wrap: nowrap; margin-bottom: 5px; cursor: pointer; }
#perk-list div.perk-type > div > div > img { flex-basis: 60px; width: 60px; height: 60px; }
#perk-list div.perk-type > div > div > div { flex-basis: calc(100% - 70px); }

#perk-selector img.item { background-color: #999; border: 1px solid #777; }
body.dark #perk-selector img.item { background-color: #666; border-color: #444; }

#perk-selector div.perk-type-container img {width:60px;}

#perk-list img.item { margin-right: 10px; margin-bottom: 10px; width: 60px; }

#perk-list div.drag-perk > div {display:grid;grid-template-areas:"icon desc";grid-template-columns: 60px 1fr;}
#perk-list div.drag-perk > div > img {grid-area:icon;}
#perk-list div.drag-perk > div > div {grid-area:desc;margin-left:10px;}

#main-content { display: table-cell; vertical-align: top; position: fixed; top: 110px; left: 175px; bottom: 0px; right: 0px; overflow-y: hidden; 
                overflow-x: hidden;scrollbar-width:thin;scrollbar-color:#999 #333;-webkit-transform:translate3d(0,0,0); }

#god-roll .btn-xs {padding: 1px 5px;}

/*#main-content {padding-left:25px;}*/

#roll-container {position:absolute;top:41px;left:500px;right:0;bottom:0;padding-right:5px;}
#roll-container > div {border:1px solid #aaa;}
body.dark #roll-container > div {border:1px solid #333;}
#roll-container > #roll-list-picker {border:0px;margin-top:5px;display:flex;flex-direction:row;position:relative;top:2px;z-index:5;}

#roll-container > #roll-list-buttons {border:0px;padding:5px;background-color:#444;position:relative;top:1px;background-image:linear-gradient(to top,#bbb,#ccc);border:1px solid #aaa;border-bottom-width:0px;}
body.dark #roll-container > #roll-list-buttons {background-color:#444;background-image:linear-gradient(to top,#444,#333);border-color:#333;}

#roll-container > #roll-list-picker > div {flex-grow:1;flex-basis:50%;text-align:center;font-size:25px;font-weight:bold;padding:5px 10px;color:#333;border:1px solid transparent;user-select:none;cursor:pointer;text-shadow:1px 1px 0px #fff;}
body.dark #roll-container > #roll-list-picker > div {text-shadow:1px 1px 0px #111;}
#roll-container > #roll-list-picker > div:hover,
#roll-container > #roll-list-picker > div.active {color:#fff;border:1px solid #aaa;border-bottom-color:#ccc;background-image:linear-gradient(to top,#ccc,#fff);
                                                  text-shadow:1px 1px 0px #666,
                                                      -1px 1px 0px #666,
                                                      1px -1px 0px #666,
                                                      -1px -1px 0px #666;}
body.dark #roll-container > #roll-list-picker > div:hover,
body.dark #roll-container > #roll-list-picker > div.active {border-bottom-color:#333;background-image:linear-gradient(to top,#333,#222);border-color:#333;}

#possible-rolls,
#roll-list {position: absolute;top: 86px;left: 0;right: 5px;bottom: 5px;overflow-y: auto;border-top: 0 !important;}

#roll-container div.weapon-type-container h2 {font-weight:bold;cursor:pointer;padding:10px 10px;margin:0px;margin-bottom:1px;border-bottom:1px solid #999;color:#333;background-color:#bbb;user-select:none;text-shadow:1px 1px 1px #fff;}
body.dark #roll-container div.weapon-type-container h2 {background-color:#444;text-shadow:1px 1px 1px #000;color:#eee;border-bottom-color:#555;}
#roll-container div.weapon-type-container h2:hover {font-weight:bold; opacity:0.75;}

#roll-container div.weapon-type {display:flex;flex-direction:row;flex-wrap:wrap;}

#roll-container div.matched-perks-container { padding-right: 10px; display: flex; flex-direction: row; justify-content: flex-start; }
#roll-container div.matched-perks-container div.perk-column { width: 50px; margin-left: 5px; min-height: 50px;padding-top:3px; }
#roll-container div.matched-perks-container div.perk-column div.perk { border-radius: 25px; width: 50px; height: 50px; margin-bottom: 5px; padding: 2px;position:relative; }
#roll-container div.matched-perks-container div.perk-column div.perk.random { background-color: #339; }
#roll-container div.matched-perks-container div.perk-column div.perk.curated { background-color: #933; }
#roll-container div.matched-perks-container div.perk-column div.perk.actual { background-color: #666; }
#roll-container div.matched-perks-container div.perk-column div.perk img {position:relative;top:-2px;left:-2px;}
#roll-container div.matched-perks-container div.perk-column div.perk i {position:absolute;top:0px;right:0px;text-shadow:-1px 1px 1px #000, 1px -1px 1px #000;color:#fff;z-index:5;}
#roll-container div.matched-perks-container div.perk-column div.perk span.retired {position:absolute;top:0px;left:-2px;text-shadow:1px 1px 1px #000, 1px -1px 1px #000;color:#fff;z-index:5;}
body.dark #roll-container div.matched-perks-container div.perk-column div.perk i {color:#fff;text-shadow:-2px 2px 1px #000, 2px -2px 1px #000;}
#roll-container div.matched-perks-container div.perk-column div.no-perk-square { border: 1px solid #ccc; height: 50px; width: 50px; }
body.dark #roll-container div.matched-perks-container div.perk-column div.no-perk-square {border-color:#333;}

#god-roll img.retired {width:18px;height:18px;}

div.roll {border:1px solid #aaa;margin:2px;display:grid;grid-template-areas: "itemicon header" "location perks";
                                     grid-template-columns: 51px 1fr;grid-template-rows:50px 1fr;flex: 0 0 calc(33.3333333333% - 4px);min-width:340px; cursor:pointer;}
body.dark div.roll {border: 1px solid #333;}
div.roll img {width:50px;}

div.roll div.item-icon > div.filter > span { position: absolute; left: 2px; bottom: -2px;    font-size: 1.05em;
    font-weight: bold;
    color: #0cf;
    text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000; }
div.roll div.item-icon > div.filter > img.quality {height:54px !important;position:absolute;right:-12px;top:-5px;filter:drop-shadow(-2px 2px 0px #0008);}

div.roll div.item-icon img {width:50px;}
div.roll div.item-icon {grid-area:itemicon;border-right:1px solid #333;height:50px;position:relative;}
div.roll div.item-icon > div.filter {position:absolute;left:0;right:0;top:0;bottom:0;}
div.roll div.item-icon.masterwork > div.filter {box-shadow: inset 0 0 20px #fc0;}
div.roll div.item-icon > div.filter > span { position: absolute; right: 2px; bottom: -2px;    font-size: 1.05em;
    font-weight: bold;
    color: #0cf;
    text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000; }

div.roll div.item-icon > div.filter > ins.quality {text-decoration:none;}
div.roll div.item-icon > div.filter > ins.quality i{text-shadow:
                                    1px 1px 1px #000,
                                -1px 1px 1px #000,
                                1px -1px 1px #000,
                                -1px -1px 1px #000;}
div.roll div.item-icon > div.filter > ins.quality span{color:#fff;text-shadow:
                                    1px 1px 0px #0008,
                                -1px 1px 0px #0008,
                                1px -1px 0px #0008,
                                -1px -1px 0px #0008;}
div.roll div.item-icon > div.filter > ins.quality-S strong {color:#0f0;}
div.roll div.item-icon > div.filter > ins.quality-A strong {color:#3f6;}
div.roll div.item-icon > div.filter > ins.quality-B strong {color:#cf3;}
div.roll div.item-icon > div.filter > ins.quality-C strong {color:#fa3;}
div.roll div.item-icon > div.filter > ins.quality-D strong {color:#f63;}
div.roll div.item-icon > div.filter > ins.quality-F strong {color:#f00;}
div.roll div.item-icon > div.filter > ins {position:relative;font-size:25px;text-align:center;float:left;left:25px;}
div.roll div.item-icon > div.filter > ins i {position:absolute;}
div.roll div.item-icon > div.filter > ins span {position:absolute;z-index:1;font-size:17px;width:25px;line-height:25px;}

div.roll div.item-icon img {width:50px;}

div.roll div.item-title {grid-area:header;color:#fff;padding-left:5px;white-space:nowrap;overflow-x:hidden;user-select:none;}
div.roll div.item-title.tier-6 { background-color: #ceae33;color:#eee; }
div.roll div.item-title.tier-5{ background-color: #522f65;color:#eee; }
div.roll div.item-title.tier-4 { background-color: #5076a3;color:#eee; }
div.roll div.item-title.tier-3 { background-color: #366f42;color:#eee; }
div.roll div.item-title.tier-2,
div.roll div.item-title.tier-1,
div.roll div.item-title.tier-0,
div.roll div.item-title { background-color: #aaa;color:#333;text-shadow:1px 1px 1px #000; }
div.roll div.item-title strong {font-size:18px;display:block;text-transform:uppercase;text-wrap:none;white-space:nowrap;text-overflow:ellipsis;}
div.roll div.item-title strong i {margin-top:3px;margin-right:3px;font-size:15px;color:#fff;}
div.roll div.item-title strong i.fa-lock {color:#aaffaa;}
div.roll div.item-title {grid-area:header;}
div.roll div.item-title ins {font-size:12px;font-weight:bold;background-color:#666;border-radius:10px;padding:2px 5px;text-decoration:none;box-shadow:1px 1px 1px #0008;cursor:help;}
div.roll div.item-title ins.pve { background-color: #229;}
div.roll div.item-title ins.pvp { background-color: #922;}
div.roll div.item-title ins.god { background-color:#fc0; }
div.roll div.item-title ins.damage-type img{filter:grayscale(100%) brightness(1000%) drop-shadow(1px 1px 0px #0004) drop-shadow(-1px 1px 0px #0004) drop-shadow(1px -1px 0px #0004) drop-shadow(-1px -1px 0px #0004);width:15px;margin-right:-3px;}
div.roll div.item-title ins.ammo-type img{filter:/*grayscale(100%)*/ brightness(1000%) drop-shadow(1px 1px 0px #0008);width:18px;position:relative;top:-2px;margin-right:-3px;}
div.roll div.item-title ins.ammo-type.heavy img {top:-1px;}
div.roll div.item-title ins.arc {background-color:#3af;color:#fff !important;}
div.roll div.item-title ins.void {background-color:#737;color:#fff !important;}
div.roll div.item-title ins.solar {background-color:#f73;color:#fff !important;}
div.roll div.item-title ins.stasis {background-color:#33415f;color:#fff !important;}
div.roll div.item-title ins.strand {background-color:#38da65;color:#fff !important;}
div.roll div.item-title ins.kinetic {background-color:#999;color:#fff !important;}

div.roll div.item-title ins.primary {background-color:#ddd;color:#fff !important;}
div.roll div.item-title ins.secondary {background-color:#7af48b;color:#fff !important;}
div.roll div.item-title ins.heavy {background-color:#b286ff;color:#fff !important;}
div.roll div.item-title ins:hover i,
div.roll div.item-title ins:hover img { margin-right:3px;}
div.roll div.item-title ins img {width:12px;filter:drop-shadow(1px 1px #0008);}
div.roll div.item-title ins.pve img,
div.roll div.item-title ins.pvp img {filter:drop-shadow(1px 1px 0px #fff4) drop-shadow(-1px 1px 0px #fff4) drop-shadow(1px -1px 0px #fff4) drop-shadow(-1px -1px 0px #fff4);}
/*div.roll div.item-title ins.kinetic img {filter:drop-shadow(1px 1px 0px #0004) drop-shadow(-1px 1px 0px #0004) drop-shadow(1px -1px 0px #0004) drop-shadow(-1px -1px 0px #0004)
                                         brightness(200%);}*/
div.roll div.item-title ins img {filter:drop-shadow(1px 1px 0px #0004) drop-shadow(-1px 1px 0px #0004) drop-shadow(1px -1px 0px #0004) drop-shadow(-1px -1px 0px #0004);position:relative;top:-1px;margin-right:0px;left:1px;}
div.roll div.item-title ins.pvp img {position:relative;top:-1px;}
div.roll div.item-title ins span {width:0px;font-size:0px;transition:width 0.5s;overflow-x:hidden;}
div.roll div.item-title ins:hover span {width:auto;font-size:inherit;}

div.roll div.location {grid-area:location;font-size:10px;text-align:center;}
div.roll div.location.vault img {filter:brightness(50%)}
div.roll div.location img {width:49px;}
div.roll div.location span {display:block;}
div.roll div.location span.power-cap {font-weight:bold;margin-top:0px;}

div.roll div.perks {grid-area:perks;}
div.roll div.perks ul {margin:0;}
div.roll div.perks li {position:relative; border: 1px solid transparent;padding:3px;}
div.roll div.perks li.equipped{border-color:#fc08;}
div.roll div.perks li.masterwork{padding:0px;margin-left:-3px;}
div.roll div.perks li.masterwork img {width:41px;filter:brightness(100%);}
div.roll div.perks li img {filter:brightness(50%);width:35px;}
body.dark div.roll div.perks li img {filter:brightness(100%)}

div.roll div.perks li.pref img {filter:brightness(100%);}
div.roll div.perks ul.list-inline {vertical-align:top;}
div.roll div.perks ul.list-inline li {vertical-align:top;margin-right:-3px;}

div.roll div.perks ul li.pref.toggled {margin-bottom:0px;}
div.roll div.perks ul li.pref i {position:absolute;top:2px;right:2px;text-align:center;font-size:10px;color:#fc0;z-index:10;padding-left:2px;text-shadow:-1px 1px 1px #000;}
div.roll div.perks ul li.prefpve i {color:#33f;}
div.roll div.perks ul li.prefpvp i {color:#f33;}
div.roll div.perks ul li.pref i.hidden {bottom:0px;}
div.roll div.perks ul li.pref div.pref-bg {width:45px;height:45px;border-radius:32.5px;position:absolute;left:-2px;top:-2px;background-image:radial-gradient(rgba(255,192,0,0.6),rgba(255,192,0,0) 60%);}
div.roll div.perks ul li.pref div.pref-icon {position:absolute;top:2px;right:0px;width:15px;height:15px;z-index:5;background-size:15px;}
div.roll div.perks ul li.prefpve div.pref-icon {background-image:url(/content/images/pve-icon.png);}
div.roll div.perks ul li.prefpvp div.pref-icon {background-image:url(/content/images/pvp-icon.png);}
div.roll div.perks ul li.pref img {filter:drop-shadow(0px 0px 2px rgba(0,0,0,0.75)) brightness(1) !important;}
div.roll div.perks ul li.pref.toggled img {filter:brightness(0.6) !important;}
div.roll div.perks ul li.prefpve div.pref-bg {background-image:radial-gradient(rgba(32,32,255,0.9),rgba(32,32,255,0) 60%);}
div.roll div.perks ul li.prefpvp div.pref-bg {background-image:radial-gradient(rgba(255,48,48,0.75),rgba(255,48,48,0) 60%);}

#filters-bar {position:sticky;top:2px;z-index:100;background-color:#f0f0f0;border-bottom:1px solid #999;left:0;right:0;width:100%;display:grid;grid-template-areas:"bar clear filters";grid-template-columns:1fr 45px 85px;}
body.dark #filters-bar {border-bottom-color:#ccc;}
#filters-bar input {font-size:20px;border:0;outline:0;padding:2px 5px;background-color:#f0f0f0;border: 1px solid #ccc;margin:3px;max-width:unset;display:inline-block;width:100%;grid-area:bar;}
#filters-bar > i {font-size:20px;display:inline-block;cursor:pointer;grid-area:clear;line-height:50px;text-align:center;}
#filters-bar > i:hover {opacity:0.75;}
#filters-bar > button {grid-area:filters;height:30px;margin-top:5px;margin-right:5px;vertical-align:center;}
body.dark #filters-bar {background-color:#222;border-bottom-color:#333;}
body.dark #filters-bar input {background-color:#222;border:1px solid #333;color:#eee;}

#filters-list { bottom:0; -webkit-transform: translate3d(0,0,0); -webkit-transition: width 0.5s; /* Safari */ transition: width 0.5s; -webkit-transition: right 0.5s; /* Safari */ transition: right 0.5s; 
           transition-timing-function: ease-out; display: table-cell; vertical-align: top; background-color: #333; position: fixed; top: 110px; right: -250px; 
           width: 250px; z-index: 1500; overflow-y: auto; overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#999 #333;transform:translate3d(0,0,0);color:#aaa;padding:15px;
           box-shadow:-1px 1px 1px #0008;padding-bottom:65px;

}
#filters-list.active {right:0px;}

#filters-list > div >  i { cursor:pointer;font-size:25px;}
#filters-list > div { font-size:25px;}
#filters-list li {cursor:pointer;user-select:none;font-weight:bold;font-size:16px;}
#filters-list li i.fa-fw {color:#f70;}
#filters-list li i.fa-level-up-alt {width:16px;display:inline-block;text-align:center;}
#filters-list li img {height:16px;position:relative;top:-2px;}

#filters-list ul li ul {margin-left:15px;}
#filters-list >ul >li > div {border-bottom:1px solid #444;padding:5px 15px;margin-bottom:5px;cursor:pointer;}
#filters-list >ul >li > div:hover {background-color:#fff1;}
#filters-list >ul li > div i.fa-fw {float:right;color:#eee;font-size:15px;line-height:23px;}

#filters-list ul {margin:0px -15px;}

#filters-list button.btn-lg {display:block;width:100%;margin-bottom:50px;}
#filters-list li.double-range-selector {max-width:220px;padding-bottom:20px;}
#filters-list li.double-range-selector input:nth-of-type(2) {}
#filters-list li.double-range-selector span {font-size:12px;}
#filters-list li.double-range-selector span.max-disp {float:right;}



.bg-success {background-color:#6f9 !important;}
.bg-danger {background-color:#f99 !important;}
.progress-bar {background-color:#999;}
body.dark .text-success{color:#3f3 !important;font-weight:bold;}
body.dark .text-danger{color:#f33 !important;font-weight:bold;}


#favorites {position:absolute;width:70px;height:70px;background-color:#eee;border-bottom-right-radius:35px;bottom:10%;right:5%;transition: width ease-out 0.5s, height ease-out 0.5s;
            border-radius:35px;transform:translate3d(0,0,0);}
body.dark #favorites {background-color:#4a4a60;}
#favorites h3 {font-size:0px;transition: font-size ease-out 0.1s;}
#favorites img {width:0px;}
#favorites.active{width:250px;z-index:500;height:350px;/*border:2px solid #f33;*/border-radius:5px 5px 35px 5px;box-shadow:#0008 2px 2px;color:#666;overflow:hidden;}
#favorites.active h3 {font-size:initial;/*background-color:#f33;*/font-size:25px;padding:5px 10px;font-weight:bold;margin:0px;border-radius:5px;height:40px;
                      border-bottom-left-radius:0px;border-bottom-right-radius:0px;
                      transition: font-size ease-out 0.5s;border-bottom:1px solid #fff;
}

#favorites.active h3 i:hover {color:#ddd;cursor:pointer;}
#favorites.active img.perk-icon {width:30px;filter:brightness(60%);}
body.dark #favorites.active img.perk-icon {filter:brightness(100%);}

body.dark #favorites.active h3 {color:#fff;border-color:#1a1a20;background-color:#0004;}

#favorites #favorite-container {opacity:0;display:none;}

#favorites.active #favorite-container {overflow-y:auto;opacity:1;max-height:290px;overflow-x:hidden;}
#favorites.active #favorite-container div.favorite {padding:5px;border-bottom:1px solid #fff;display:flex;flex-direction:row;flex-wrap:wrap;}
body.dark #favorites.active #favorite-container div.favorite {border-color:#1a1a20;}
#favorites.active #favorite-container div.favorite:hover,
#favorites.active #favorite-container div.favorite.active{background-color:#0001;cursor:pointer;}
body.dark #favorites.active #favorite-container div.favorite:hover,
body.dark #favorites.active #favorite-container div.favorite.active {background-color:#fff1;}

#favorites.active #favorite-container div.favorite > div {padding:2px;border:1px solid #aaa;margin-right:2px;}
body.dark #favorites.active #favorite-container div.favorite > div {border-color:#333;}
#favorites.active #favorite-container div.favorite > div:last-child {margin-right:0px;}
#favorites.active #favorite-container div.favorite > div.filter-settings {width:100%;border:0px;padding-top:10px;display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;}
#favorites.active #favorite-container div.favorite > div.filter-settings img {width:20px;margin-right:5px;filter:drop-shadow(1px 1px 0px #0008);}
#favorites.active #favorite-container div.favorite > div.filter-settings span {color:#444;text-shadow:1px 1px 0px #000a;font-weight:bold;white-space:nowrap;}
#favorites.active #favorite-container div.favorite > div.filter-settings span.power-cap ~ span.power-cap {display:none;}
#favorites.active #favorite-container div.favorite > div.filter-settings span.rpm ~ span.rpm {display:none;}
#favorites.active #favorite-container div.favorite > div.filter-settings span i {color:#fff;}
body.dark #favorites.active #favorite-container div.favorite > div.filter-settings span {color:#fff;}

/*#favorites.active #favorite-container div.favorite:nth-child(odd) {background-color:#0001;}*/
#favorites-button {z-index:501;position:absolute;bottom:10%;right:5%;color:#e55;width:70px;height:70px;border-radius:35px;border:3px solid #eee;background-color:#eee;font-size:45px;
                   text-align:center;line-height:70px;box-shadow:#0004 2px 2px;cursor:pointer;}
#favorites-button:hover {color:#f33;}
body.dark #favorites-button {background-color:#4a4a60;border-color:#4a4a60;}

#favorites-button span {position:absolute;right:-10px;top:-10px;color:#fff;background-color:#f33;box-shadow:#0008 -1px 1px;font-size:20px;width:30px;border-radius:15px;padding:5px;font-weight:bold;height:30px;line-height:20px;}

#previous-filters {position:absolute;top:50px;background-color:#f70e;color:#fff;text-shadow:1px 1px 0px #0008;font-weight:bold;z-index:5;right:0px;left:175px;padding:7px 20px;padding-bottom:0px;height:42px;font-size:20px;}
#previous-filters i {margin-left:10px;cursor:pointer;}
#previous-filters i.fa-times:hover {color:#f00;}
#previous-filters i.fa-check:hover {color:#3f3;}

#mobile-swapper {display:none;position:absolute;top:5px;left:5px;right:5px;height:40px;flex-direction:row;flex-wrap:nowrap;z-index:600;}
#mobile-swapper > div {font-size:25px;font-weight:bold;color:#f70;border:1px solid #f70;flex-grow:1;flex-basis:33.33333333333%;text-align:center;border-left-width:0px;}
#mobile-swapper > div:first-child {border-left-width:1px;}
#mobile-swapper > div.active,
#mobile-swapper > div:hover {background-color:#f70;color:#fff;}

/*#trash-perk {display:none;}*/
#perk-selector #trash-perk.perk-group div.pull-left {text-align:center;width:100%;}
#perk-selector #trash-perk.perk-group div.pull-left > i {display:block;color:#999;position:unset;font-size:40px;margin:0px auto;background:none;text-shadow:none;margin-top:7px;}
#perk-selector #trash-perk.perk-group div.perk-group-destination div.sortable-ghost {display:none;}
#perk-selector #trash-perk.perk-group div.perk-group-destination div.sortable-ghost ~ div i,
#perk-selector #trash-perk.perk-group div.perk-group-destination div:not(:last-child):first-child i {color:#f004;}
#trash-perk:hover i {color:#f004;}
@media screen and (max-width:1160px) {
    #main-content {left:0px;}
    
    #loading {left:0px;}
    #previous-filters{left:0px;}
    
}

@media screen and (max-width:1000px) {
    #roll-list-picker > div > span {display:none;}
}

@media screen and (max-width:860px) {
    #perk-selector {max-width:380px;}
    #roll-container {left:400px;}
}
@media screen and (max-width:815px) {
    #sidebar, #main-content, #loading.active, #filters-list {top: 100px;}
    #sidebar {display:none;}
}

@media screen and (max-width:760px) {
    #main-content {position:absolute;}
    #mobile-swapper {display:flex;}
    #roll-container,
    #perk-selector {left:5px;right:0px;max-width:unset;width:100%;display:none;min-width:unset;}
    #roll-container {padding-top:0px;}
    #roll-container.active,
    #perk-selector.active {display:block;}
    #perk-selector.active {padding-top:91px;top:0px;position:absolute;}
    #perk-filters-bar {display:none;top:50px;}
    #perk-filters-bar.active {display:grid;border-top:1px solid #999;}
    #perk-list {padding-bottom:500px;}
    
    body.dark #perk-list {background-color:#1a1a20;}
    /*#possible-rolls, #roll-list {top:136px;}*/
    #trash-perk {display:block;}
}


@media screen and (max-width:650px) {
    #main-content {left:0px;}
    #loading {left:0px;}
}

@media screen and (max-width:570px) {
    div.roll {flex-grow:1;}
    #perk-list {transition:top ease-in 0.5s;position:absolute;background-color:#fff;}
    #perk-list.move-up {top:50px;}
}