@font-face {
    font-family: 'quesadillafont';
    src: url('quesadillafont.otf') format('opentype');
}

html {
    font-family: Verdana, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    font-weight: normal;
}
select { 
    appearance: none; 
    outline: 0; 
    background: #3a3a3a !important;
    background-image: none; 
    width: 250px; 
    height: 40px; 
    color: #B1B1B1;
    cursor: pointer; 
    border:1px solid black; 
    border-radius:3px; 

    position: relative; 
    display: block; 
    width: 15em; 
    height: 2em; 
    line-height: 3; 
    overflow: hidden; 
    border-radius: .25em; 
    margin:4px;
}   
.w3-content {
    max-width: 1400px;
}

h1, h2, h3, h4, h5, h6, #breadcrumb, button{
     font-family: "quesadillafont", Verdana, sans-serif;
}

h1, h2, h4, h5, h6 {
    font-weight: 400;
    line-height: 1;
    margin: 20px 0;
}
h3{
	margin: 5px 0 15px;
}
.weapons h4, .weapons h5{ margin: 5px 0;}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-weight: inherit;}
h1 {font-size: 36px}
h2 {font-size: 30px}
h3 {font-size: 24px}
h4 {font-size: 20px}
.staff, h5 {font-size: 18px}
h6 {font-size: 16px}

hr {
    height: 0;
    border: 0;
    border-top: 1px solid #eee;
    margin: 20px 0;
}
.hidden { display: none;}
.playerPort {
    height: auto;
    width: 100%;
}
body {
    background: url("https://www.spellbook.com/new-images/dire/ui background.png") center center fixed #151A1E !important;
    background-image: url(https://www.spellbook.com/new-images/dire/map-background-generic.jpg) !important;
    background-repeat: repeat !important;
    background-size: auto !important;
}

.fleft {
    float: left;
}
.fright {
    float: right;
}

#breadcrumb { margin-top: 10px;}
#breadcrumb, #Username, h2 {
    color: #fff;
}
.staff {
    display: inline-block;
}
/* COLORS */
.NotMet {color: #a20000}
.staff {color: #ffd700}
div, p, button, button.w3-button {
   color:  #B1B1B1;
}
button {
    color: #CCCCCC;
}
.statBtn.active,
.StatTimeBtn.active,
.TimeBtn.active {    
    background-color: #B1B1B1!important;
    color: #000 !important;
}
/* rarity colors */
.rank, .w2-row.s2.rank, .stream {
    color: #69A4C6;
    text-decoration: none;
}
.rank a, .stream a{
    text-decoration: none;
}
a.rank:hover,
.stream a:hover{
    color: #FFF;
}
.stream a{overflow-wrap: break-word;}

.Common, .common {color: #c0c0c0;}
.Uncommon, .uncommon {color: #5faf00}
.Rare, .rare {color: #5fafff}
.VeryRare, .veryrare {color: #d75fff}
.Eldritch, .Eldritch, .Unique {color: #d7af00}
.Progress-1{background-color: #505050 !important}
.Progress-2{background-color: #606060 !important}
.Progress-3{background-color: #707070 !important}
.Progress-4{background-color: #808080 !important}
.Progress-5{background-color: #909090 !important}
.Progress-6{background-color: #A0A0A0 !important}
.Progress-7{background-color: #B0B0B0 !important}
.Progress-8{background-color: #C0C0C0 !important}
.Progress-9{background-color: #D0D0D0 !important}
.Progress-10{background-color: #E0E0E0 !important}
.no-border{ border-width: 0;}
.no-shadow {box-shadow: none;}
.no-background-color {
    background-color: rgba(0,0,0,0) !important
}
.w3-row:nth-of-type(even) {
    background-color: rgba(0,0,0,.33) !important;
}
.w3-row.header{	
    line-height: 12px;
}
.w3-theme-d4.w3-row.header{	
    background-color: #3a3a3a !important;
}

.w3-row.header h4{
    margin: 5px 0;
}
.Expiration{line-height: 38px;}

.w3-row.current, .w3-row.current div, .w3-row.current p {
    background-color: #ffc107b3 !important;
    color: #000000 !important;
}

ion-icon {
    padding: 0;
    vertical-align: middle;
}
.icon.ion-trophy.fright {
    width: 8px;
    font-size: 16px;
    margin-top: 1px;
    height: 12px;
}

.rotation-180 {
    transform: rotate(180deg);
    
}
.rank1 {
    color: gold
}

.rank2 {
    color: silver
}

.rank3 {
    color: #cd7f32
}
.paginator {
    display: flex !important;
    justify-content: center;
}

button {
    background: url(https://www.spellbook.com/new-images/dire/button_left.png)no-repeat, url(https://www.spellbook.com/new-images/dire/button_right.png)100% 0 no-repeat, url(https://www.spellbook.com/new-images/dire/button_center.png)repeat;
    background-size: 5px 100%, 5px 100%, 100px 100%;
}
button.active {
    box-shadow: 0 0 50px rgba(0,0,0,1) inset !important;
}

.w3-section {
    border-style: solid;
    border-width: 16px !important;
    border-image: url(https://www.spellbook.com/new-images/dire/Window_Background.png) 60 fill repeat !important;
    border-image-source: url(https://www.spellbook.com/new-images/dire/Window_Background.png) !important;
    border-image-slice: 60 fill !important;
    border-image-width: 1 !important;
    border-image-outset: 0 !important;
    border-image-repeat: repeat !important;
    background: none !important;
}