@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('css/scrollbar.css');

html
{
    min-height:100%;
    height:auto;
}

* 
{
    font-family: "Roboto", Tahoma, Arial, Sans-Serif;
}

body
{
    font-family: "Roboto", Tahoma, Arial, Sans-Serif;
    font-size:24px;
    margin:0px 0px 0px 0px;
    color:#fff;
    text-shadow:1px 1px 0px #000 !important;
    background-color:rgba(41,41,41,1);
}

label
{
    margin-bottom:0px !important;
}

body > div
{
    
}

a, pre
{
    cursor: pointer;
    color:#aaa !important;
    text-decoration:none;
    vertical-align: middle;
}

a:hover
{
    text-decoration:none;
}

div#body
{
    height:100%;
    padding-bottom:0px;
}

div.frame
{
    display:block;
    font-size:20px;
    border-radius: 0px;
    width:auto;
    background: linear-gradient(0deg, rgba(41,41,41,1) 65%, rgba(98,98,98,1) 100%);
    min-height:800px;
    max-height:800px;
}


div.frame div#error,
div.frame div#success,
div.frame div#warning
{
    width:100%;
    padding:10px;
    font-size:20px;
    text-shadow:0px 1px 1px #000;
    margin-top:-1px;
}

div.frame div#error
{
    background: radial-gradient(circle, rgba(255,57,57,0.3) 50%, rgba(156,0,0,0.3) 100%);
    border-bottom:1px solid rgba(156,0,0,0.5);
    box-sizing: border-box;
}

div.frame div#success
{
    background: radial-gradient(circle, rgba(97,255,129,0.3) 50%, rgba(0,156,6,0.3) 100%);
    border-bottom:1px solid rgba(0,156,6,0.5);
    box-sizing: border-box;
}

div.frame div#warning
{
    background: radial-gradient(circle, rgba(255,233,110,0.3) 50%, rgba(156,148,0,0.3) 100%);
    border-bottom:1px solid rgba(156,148,0,0.5);
    box-sizing: border-box;
}

div.frame div#warning a
{
    color:#fff !important;
}

div.frame div#warning > span#cancel
{
    padding:5px;
    background-color:#333;
    border-radius:3px;
    font-size:16px;
    margin-left:5px;
    cursor:pointer;
}

div.frame div#warning span.mdi-close
{
    float:right;
    margin-top:2px;
}

div.frame div#placeholder
{
    height:44px;
}

div.frame div#menu
{
    width:auto;
    display:flex;
    text-align:left;
    font-size:33.4px;
    font-weight:lighter;
    box-shadow:inset 0 -20px 20px -20px rgba(0,0,0,0.3);
    background-color:rgba(45,45,45,1);
    border-bottom:1px solid rgba(85,85,85,1);
    box-sizing:border-box;
    /*
    
    background:url(img/bg_bc.png);
    background-position:center 45%;
    background-size:cover;
    height:300px;
    
    */
}

div.frame div#menu ul.menu
{
    margin: 0 auto;
    width:auto;
    display:block;
    list-style:none none;
    padding:0px;
    white-space: nowrap;
    min-width:1480px;
    padding:50px;
    padding-left:0px;
    padding-right:0px;
}

div.frame div#menu ul.menu > li:not(#logo)
{
    float:right;
    display:flex;
    position:relative;
    transition:background 0.3s ease-in-out;
    border-radius:3px;
    margin-left:10px;
    background:rgba(80, 80, 80,1);
    border-color:rgba(105,105,105,1);
    margin-bottom:0px !important;
}

div.frame div#menu ul.menu > li.login
{
    
}

div.frame div#menu ul.menu > li.join
{
    background:rgba(32, 148, 215,1) !important;
    border-color:rgba(42, 158, 225,1) !important;
}

div.frame div#menu ul.menu > li.create
{
    border-top-left-radius:0px !important;
    border-bottom-left-radius:0px !important;
    margin-left:-2px !important;
    border-left:0px;
}

div.frame div#menu ul.menu > li#logo, div.frame div#menu ul.menu > li#logo:hover
{
    background-color:transparent !important;
    float:left;
    font-weight: 900;
    font-size:40px;
    margin-top:-20px;
    text-shadow:1px 1px 0px #000;
    color:#fff !important;
}

div.frame div#menu ul.menu > li#logo a
{
    background-image:url(img/logo.png);
    background-repeat:no-repeat;
    background-size:auto 66%;
    background-position:left bottom;
    padding-top:10px;
    padding-left:70px;
    color:#fff !important;
    display:block;
    height:55px;
}

div.frame div#menu ul.menu > li#logo > a > span
{
    padding-left:15px;
    padding-right:15px;
}

div.frame div#menu ul.menu > li#logo > a > span.expansion
{
    padding:0px;
    color:#fff !important;
    margin-top:-15px;
}

div.frame div#menu ul.menu > li#logo > a > span.expansion > sub
{
    padding:0px;
    display:block;
    position:absolute;
    font-size:14px;
    float:left;
    margin-top:-5px;
    text-transform:uppercase;
    font-weight:100 !important;
    padding-left:2px;
}

div.frame div#menu ul.menu > li#logo span.pin
{
    padding:0px;
    color:#fff !important;
    padding-left:5px;
    font-size:36px;
}

div.frame div#menu ul.menu > li#logo span.pin.menu
{
    background-color:rgba(66,66,66,1);
    border-radius:3px;
    position:absolute;
    margin-top:7px;
    max-height:43px;
    margin-left:15px;
    overflow:hidden;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    z-index:99;
    max-width:120px;
}

div.frame div#menu ul.menu > li#logo span.pin.menu ul
{
    list-style:none;
    margin:0px;
    padding:0px;
    margin-left:-10px;
}

div.frame div#menu ul.menu > li#logo span.pin.menu ul > li
{
    border-top:1px solid rgba(155,155,155,0.2);
    padding-left:10px;
    background-color:rgba(0,0,0,0.1);
    color:#ccc;
    padding-bottom:5px;
    font-size:36px;
}

div.frame div#menu ul.menu > li#logo span.pin.menu ul > li:hover
{
    background-color:rgba(0,0,0,0.0);
    color:#fff;
}

div.frame div#menu ul.menu > li#logo span.pin.menu ul > li > span
{
    color:rgba(255,255,255,0.7) !important;
    text-shadow:0px 0px 0px;
    font-weight:100;
    font-size:13px;
    display:block;
    margin-top:-4px;
    padding-left:2px;
}

div.frame div#menu ul.menu > li#logo span.pin.menu ul > li > span > span.mdi
{
    display:block;
}

div.frame div#menu ul.menu > li#logo span.pin.menu:hover
{
    max-height:1000px;
}


div.frame div#menu ul.menu > li#logo span.pin > span.mdi
{
    padding:0px;
    color:#ccc !important;
}

div.frame div#menu ul.menu > li#logo a span
{
    color:rgba(52, 168, 235,1) !important;
}


div.frame div#menu ul.menu > li:hover, 
div.frame div#menu ul.menu > li.active
{
    
}

div.frame div#menu > ul.menu > li:hover a, 
div.frame div#menu > ul.menu > li.active a
{
}

div.frame div#menu ul.menu > li:not(#logo) > a
{
    padding:5px;
    padding-left:15px;
    padding-right:15px;
    width:100%;
    white-space:nowrap;
}

div.frame div#menu ul.menu > li.discord > a
{
    padding-left:10px !important;
    padding-right:10px !important;
}

div.frame div#menu ul.menu > li > ul.submenu
{
    margin-top:0px;
    max-height:0px;
    overflow:hidden;
    background-color:rgba(0,0,0,0.5);
    border-top:1px solid rgba(255,255,255,0.2);
    min-width:100%;
    top:53px;
    position:absolute;
    font-size:20px;
    list-style:none none;
    padding:0px;
    white-space: nowrap;
    display:block;
    transition: max-height 0.3s ease-in-out;
    box-shadow:0px 0px 1px rgba(0,0,0,0.5);
}

div.frame div#menu ul.menu > li:hover > ul.submenu
{
    max-height:1000px;
}

div.frame div#menu ul.menu > li > ul.submenu > li
{
    background:transparent;
    display:block;
    width:100%;
}

div.frame div#menu ul.menu > li > ul.submenu > li:hover, div.frame div#menu ul.menu > li > ul.submenu > li.active
{
    background:rgba(255,255,255,0.2);
    transition:background 0.3s ease-in-out;
}

div.frame div#menu ul.menu > li > ul.submenu > li > a
{
    display:block;
    padding:10px;
    padding-left:20px;
    padding-right:20px;
    text-shadow:1px 1px 1px #000;
    color:#fff !important;
}

div.frame div#content
{
    margin-top:30px;
    text-align:left;
    width:100%;
    max-width:1480px;
    display:block;
    height:auto;
    border-radius:5px;
}

div.frame div#content h1
{
    width:auto;
    display:block;
    margin:0px;
    margin-top:-8px;
    margin-bottom:15px;
    font-size:32px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}

div.frame div#content h2
{
    width:auto;
    display:block;
    margin:0px;
    margin-top:-8px;
    margin-bottom:15px;
    font-size:24px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    text-shadow:0px 0x transparent;
}

ul.profession-icons
{
    list-style:none;
    margin-top:0px;
    float:right;
    display:flex;
    padding:0px;
    height:40px;
    margin-right:5px;
}

ul.profession-icons > li.profession-icon
{
    margin-top:-6px;
    width:36px;
    height:100%;
    margin-left:8px;
    background-size:contain;
    background-repeat:no-repeat;
}

/* list */

select
{
    display:block;
    background-color:rgba(55,55,55,1.0);
    box-shadow:0px 0px 8px rgba(0,0,0,0.3);
    border:1px solid rgba(255,255,255,0.2);
    box-sizing:border-box;
    font-size:24px;
    height:50px;
    padding-left:10px;
    padding-right:20px;
    padding-bottom:1px;
    border-radius:5px;
    color:#fff;
}

select > option
{
    font-size:20px;
}



label
{
    
    overflow:hidden;
}

label.search
{
    display:block !important;
}

.element-list .data-element, label.footer, label.title, div.box
{
    box-shadow:0px 0px 0px transparent;
    padding:10px;
}

.element-list .data-element > a
{
    padding-left:25px;
    color:#fff;
    font-weight:bold;
    background-size:contain;
    background-repeat:no-repeat;
}

div#content > form > span > .no-data
{
    font-size:16px;
    padding:10px;
}

ul.characters > li:first-child, div#content > form > div:first-child, div.box, ul#raidlist
{
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}

ul.characters > li:last-child, div#content > form > div:last-of-type, label.footer, div.box
{
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}

/*
ul.characters > li:nth-child(2n), div#content > form > div:nth-child(2n), div#content > form > span label:nth-child(2n), .element-list .data-element:nth-child(2n)
{
    background-color:rgba(65,65,65,1.0);
}*/

div#content > form > span
{
    display:none;
}

div#content > form > span.active
{
    display:block;
}

ul.characters > li > a, div#character > a, h1#character > a, .character > a
{
    display:block;
    background-color:transparent;
    background-repeat:no-repeat;
    background-position:left;
    background-size:auto 80%;
    padding:10px;
    padding-left:4.5%;
    width:100%;
    height:100%;
    white-space:nowrap;
    text-shadow:1px 1px 0px #000;
    vertical-align:bottom;
    box-sizing: border-box;
}

ul.characters > li
{
    padding:5px;
}

h1#character > a
{
    padding-left:6.5%;
}

div#content > form > div:not(.link)
{
    display:block;
    padding:20px;
    font-size:24px;
    width:100%;
    height:100%;
    white-space:nowrap;
    text-shadow:1px 1px 0px #000;
    vertical-align:bottom;
    box-sizing: border-box;
}

div#content > form > div > input:not([type="submit"]), div#content > form > div > select
{
    box-shadow:0px 0px 0px transparent;
    background-color:#222;
}

div#content > form > input:last-of-type:not(#search)
{
    margin-top:20px;
}

input.search
{
    float:none !important;
    border-radius:0px !important;
    border-top-left-radius:5px !important;
    border-top-right-radius:5px !important;
    font-size:14px !important;
    width:100% !important;
    height:auto !important;
    padding:10px !important;
    background-color:#222 !important;
    box-shadow:0px 0px 0px #000 !important;
    border-bottom:0px !important;
}

label.nosearch
{
    display:block;
    border-top-left-radius:5px !important;
    border-top-right-radius:5px !important;
    width:auto;
    height:20px;
    background-color:#222 !important;
    border:1px solid rgba(255,255,255,0.2);
    border-bottom:0px;
}

.info
{
    font-size:14px !important;
    padding:10px !important;
}

.info > select, .info > select > option
{
    height:auto;
    width:auto;
    font-size:14px !important;
    padding:5px !important;
    border:0px;
}

label.footer
{
    border-top-left-radius:0px !important;
    border-top-right-radius:0px !important;
    font-size:14px !important;
    width:100% !important;
    height:auto !important;
    padding:10px !important;
    background-color:#222 !important;
    box-shadow:0px 0px 0px #000 !important;
}

/* tabs */

ul.tab-list
{
    list-style:none;
    margin:0px;
    padding-left:10px;
    display:block;
}

ul.tab-list > li
{
    margin-top:4px;
    display:block;
    float:left;
    background-color:#333;
    padding:8px;
    box-sizing: border-box;
    cursor:pointer;
    padding-left:34px;
    padding-right:10px;
    padding-bottom:6px;
    background-size:auto 24px;
    background-position:left 5px center;
    background-repeat:no-repeat;
    color:#ccc;
}

ul.tab-list > li:first-child:not(.active)
{
    border-top-left-radius:4px;
    border-top:1px solid #444;
    border-left:1px solid #444;
}

ul.tab-list > li:not(.active)
{
    border-top:1px solid #444;
}

ul.tab-list > li:last-child:not(.active)
{
    border-top-right-radius:4px;
    border-top:1px solid #444;
}

ul.tab-list > li.active
{
    box-shadow:0px 0px 10px rgba(0,0,0,0.2);
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    background-color:#444;
    margin-top:0px;
    padding:10px;
    cursor:default;
    border-top:1px solid #555;
    padding-bottom:8px;
    padding-left:34px;
    color:#fff;
}

ul.tab-list > li.tab-add
{
    padding:0px;
    border-left:1px solid rgba(255,255,255,0.1);
}

ul.tab-list > li.tab-add > a
{
    display:block;
    padding:9px;
    padding-bottom:6px;
    padding-left:11px;
    padding-right:12px;
}

ul.tab-list > li:hover
{
    color:#fff;
}

/* pages */

ul.pages
{
    position:relative;
    bottom:0;
    width:100%;
    display:block;
    margin:0px;
    padding:0px;
    list-style:none none;
}

ul.pages > li
{
    float:left;
    margin-right:3px;
    margin-bottom:3px;
    background-color:rgba(0,0,0,0.1);
    border-radius:3px;
}

ul.pages > li:hover, ul.pages > li.active
{
    background-color:rgba(255,255,255,0.1);
}

ul.pages > li > a
{
    display:block;
    padding-top:5px;
    width:40px;
    height:35px;
    text-align:center;
}

/* Character */

div.character
{
    display:flex;
    width:100%;
    height:400px;
    box-shadow:0px 0px 8px rgba(0,0,0,0.3);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
}

div.character > a
{
    display:flex;
    width:100%;
    height:100%;
}

ul.tags
{
    display:block;
    width:100%;
    padding:5px;
    font-size:18px;
    list-style:none none;
    padding:0px;
    margin:0px;
    margin-bottom:10px;
}

ul.tags > li
{
    float:left;
    margin-right:3px;
    margin-bottom:3px;
    background-color:rgba(0,0,0,0.1);
    border-radius:3px;
}

ul.tags:not(#tag_input_remote_list):not(#tag_input_default_list) > li:hover
{
    background-color:rgba(255,255,255,0.1);
}

ul.tags > li > a
{
    display:block;
    padding:12px;
    
}

input.tags
{
    margin-top:20px;
    background-color:rgba(0,0,0,0.1) !important;
    border-bottom:0px !important;
    width:180px;
    cursor:text;
}

/* Input */

div.frame input[type='text']
{
    display:block;
    background-color:rgba(55,55,55,1.0);
    border:1px solid rgba(255,255,255,0.2);
    box-sizing:border-box;
    font-size:24px;
    height:50px;
    padding-left:10px;
    padding-right:20px;
    padding-bottom:1px;
    border-radius:5px;
    color:#fff;
    float:left;
    margin-right:20px;
    width:160px;
}

div.frame label input[type='submit']
{
    display:block;
    background-color:rgba(55,55,55,1.0);
    box-shadow:0px 0px 8px rgba(0,0,0,0.3);
    border:1px solid rgba(255,255,255,0.2);
    box-sizing:border-box;
    font-size:24px;
    padding-left:10px;
    padding-right:20px;
    padding-bottom:1px;
    border-radius:5px;
    color:#fff;
}

div.frame input::placeholder
{
    color:rgba(149,149,149,0.9);
}

div.frame input.submit, .button, label.info input[type="submit"]
{ 
    margin-bottom: 20px;
    background: rgba(255,255,255,0.2);
    border: 0px;
    color: #fff;
    padding: 8px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 4px;
    float: left;
    margin-right: 10px;
    font-size: 14px;
    height: 40px;
    box-shadow: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
}

label.info input[type="submit"]
{
    float:left;
    font-size:16px !important;
    margin:0px;
    padding:5px !important;
    border-radius:3px !important;
    padding-left:8px !important;
    padding-right:8px !important;
    padding-top:2px !important;
    padding-bottom:2px !important;
    margin-right:5px;
}

.button > a
{
    color:#fff !important;
}

.save-top:not(.dkp)
{
    font-size:26px;
    margin-bottom:20px;
}

.save-top.dkp, .save-bottom.dkp, .save-bottom.token
{
    margin-top:20px;
    margin-bottom:20px;
}

.button
{
    float:left;
    margin-right:20px;
    font-size:24px;
    height:50px;
    padding:0px;
    padding-left:20px !important;
}

.button.link
{
    margin-right:0px !important;
    padding:0px !important;
    margin-left:10px !important;
    cursor:pointer;
    float:right;
    width:auto;
    height:auto;
    margin-bottom:20px;
}

input.button.link
{
    margin-left:0px !important;
    margin-top:10px !important;
    border-radius:5px !important;
}

.button.link.prio
{
    margin-top:-65px;
}

.button.link.no-margin
{
    margin-bottom:0px;
}

.button.link > a
{
    display:block;
    color:#fff;
    padding:10px;
    width:auto;
    height:100%;
    padding-left:20px;
    padding-right:20px;
    box-sizing:content-box;
}

.button.link.dropdown
{
    height:40px;
    font-size:12px;
    font-weight:900;
    width:72px;
}

.button.link.dropdown > ul
{
    float:left;
    list-style:none;
    margin:0px;
    padding:0px;
    transition:none;
    width:100%;
}

.button.link.dropdown > ul > li
{
    display:none;
    border-radius:3px !important;
    height:38px;
}

.button.link.dropdown > ul > li > a
{
    display:block;
    width:auto;
    height:100%;
    padding:5px;
    padding-top:13px;
    text-align:center;
}

.button.link.dropdown > ul > li > a > span.mdi
{
    margin-right:-12%;
}

.button.link.dropdown > ul > li.active
{
    display:block;
}

.button.link.dropdown > ul > li:not(.active)
{
    border-radius:0px !important;
    background: rgba(80, 80, 80,1);
}

.button.link.dropdown > ul > li:not(.active):last-of-type
{
    border-bottom-left-radius:3px !important;
    border-bottom-right-radius:3px !important;
    border-top:1px solid rgba(70, 70, 70,1);
}

.button.link.dropdown > ul > li:not(.active):hover
{
    background: rgba(100, 100, 100,1);
}

.button.link.dropdown > ul > li:not(.active):hover > a
{
    color:#fff !important;
}

.button.link.dropdown > ul > li.active > a
{
    color:#fff !important;
}

.button.link.dropdown:hover > ul > li
{
    display:block;
}

.button.link.switch
{
    width:60px;
}

.button.link.switch.small
{
    width:32px;
}

.button.link.switch > ul
{
    padding:0px;
    margin:0px;
    list-style:none;
    width:100%;
}

input[type="submit"]:not([disabled])
{
    cursor:pointer !important;
}

.button.link.switch > ul > li
{
    font-size:12px;
    text-align:center;
    background: rgba(80, 80, 80,1);
}

.button.link.switch > ul > li:first-of-type
{
    border-top-left-radius:3px;
    border-top-right-radius:3px;
}

.button.link.switch > ul > li:last-of-type
{
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
}

.button.link.switch > ul > li > a
{
    color:#fff !important;
    font-weight:900 !important;
    display:block;
    width:100%;
    height:100%;
    padding-top:1.8px;
    padding-bottom:1.8px;
}

.button.link.switch > ul > li.active,
.button.link.dropdown > ul > li.active
{
    margin-left:-1px;
    margin-top:-1px;
    border-radius:2px;
    width:100%;
    background:rgba(32, 148, 215,1) !important;
    border:1px solid rgba(42, 158, 225,1) !important;
    box-shadow:0px 0px 1px rgba(0,0,0,0.5);
    cursor:default !important;
}

.button.link.switch > ul > li:first-of-type
{
    margin-bottom:1px;
}

.button.link.switch > ul > li:not(.active) > a
{
    
}

.button.link.switch > ul > li:not(.active)
{
    cursor:pointer !important;
}

form > .button.link
{
    margin-top:20px;
    margin-left:20px;
}

form label
{
    display:block;
    white-space:nowrap;
}

form label:last-child
{
    margin-bottom:0px;
}

label.data-element
{
    cursor:pointer;
    font-size:16px;
    padding:5px;
}

label.data-element.header
{
    cursor:default;
}

label.data-element input[type="checkbox"]
{
    display:none;
}


label.data-element span.single-checkbox
{
    display:inline-block;
    width:25px;
    height:25px;
    background-color:#222;
    vertical-align:middle;
    margin:3px;
    position:relative;
    border-radius:2px;
    margin-right:5px;
}

label.data-element span.single-checkbox.small
{
    display:inline-block;
    width:18px;
    height:18px;
    background-color:#222;
    vertical-align:middle;
    margin:1px !important;
    position:relative;
    border-radius:2px;
    margin-top:-3px !important;
}

label.data-element :checked + span.single-checkbox:after 
{
    content: '\2714';
    font-size: 20px;
    position: absolute;
    top: -2px;
    left: 5px;
    color: #fff;
}

label.data-element :checked + span.single-checkbox.small:after
{
    content: '\2714';
    font-size: 15px;
    position: absolute;
    top: -2px;
    left: 3px;
    color: #fff;
}

label.data-element > span.checkbox
{
    display:inline-block;
    width:25px;
    height:25px;
    background-color:#222;
    vertical-align:middle;
    margin:3px;
    position:relative;
    border-radius:2px;
    margin-right:5px;
}

label.data-element > span.checkbox.checked:before
{
    content: '\2714';
    font-size: 20px;
    position: absolute;
    top: -2px;
    left: 5px;
    color: #fff;
}

form label > a, form label > a:hover
{
    background-size:auto 100%;
    background-position:left center !important;
    padding-left:0px !important;
}

/* Search */

input.search::placeholder
{
    opacity:1;
}

/* Float Clearing */

.clear
{
    clear:both;
    margin:0px;
}

/* Notifications */

div#notifications
{
    width:100%;
}

div#notifications > div
{
    text-align:center;
    border-radius:0px;
    border-left:0px;
    border-right:0px;
    border-top:0px;
    box-shadow:0px 1px 1px rgba(0,0,0,0.3) !important;
    font-size:16px;
    padding:10px !important;
}

/* search */

div#search-box
{
    
}

div#search-box > input
{
    float:left !important;
    width:79% !important;
    box-sizing:border-box;
    margin:0px !important;
    height:auto !important;
    padding:10px !important;
    font-size:24px !important;
    border-radius:5px !important;
    border-bottom:1px solid rgba(255,255,255,0.2) !important;
}

div#search-box > input[type='submit']
{
    width:20% !important;
    border-radius:5px !important;;
    background-color:#444;
    border-right:1px solid rgba(255,255,255,0.2) !important;
    box-sizing:border-box;
    margin:0px !important;
    margin-left:1% !important;
}

/* reserve */

label.data-element > ul.reserve-characters
{
    display:inline;
    width:auto;
    margin:0px;
    background-color:transparent;
    height:auto;
    list-style:none;
    padding:0px;
    text-align:right;
}

label.data-element > ul.reserve-characters > li
{
    display:inline;
    background-size:contain;
    background-repeat:no-repeat;
    padding-left:24px;
    margin-left:10px;
    float:right;
}

label.data-element > span.boss
{
    display:inline-block;
    margin:0px;
    padding:0px;
    background-color:transparent;
    height:auto;
    width:26%;
    font-weight:bold;
}

label.data-element > span.item
{
    display:inline-block;
    margin:0px;
    padding:0px;
    background-color:transparent;
    height:auto;
    width:24%;
    white-space:nowrap;
}

label.data-element > span.name
{
    display:inline;
    background-size:contain;
    background-repeat:no-repeat;
    padding-left:26px;
}

/* DKP System */

div.element-list.dkp label.data-element
{
    padding:5px;
}

div.element-list.dkp label > span:not(.checkbox)
{
    display:inline-block;
    margin:0px;
    padding:0px;
    background-color:transparent;
    height:auto;
    width:15%;
    white-space:nowrap;
    height:100%;
}

div.element-list.dkp label > span.checkbox
{
    margin-right:2.9%;
}

div.element-list.dkp label.title > span.checkbox
{
    display:inline-block;
    padding-left:0px;
    margin-right:0px;
    width:5%;
}

div.element-list.dkp label:not(.title) > span.startdkp
{
    margin-left:5%;
}

div.element-list.dkp label.title > span.startdkp
{
    margin-left:3.4%;
}


div.element-list.dkp label.title > span.checkbox:first-of-type
{
    padding-left:5px;
}

div.element-list.dkp label > span.name
{
    background-size:contain;
    background-repeat:no-repeat;
    padding-left:26px !important;
}

div.element-list.dkp label > span.startdkp > input
{
    display:block;
    background-color:#222;
    border:1px solid rgba(255,255,255,0.1);
    box-sizing:border-box;
    font-size:14px;
    border-radius:3px;
    color:#fff;
    padding:5px;
    padding-left:10px;
    padding-right:10px;
    width:50px;
    text-align:center;
}

div.element-list.dkp label > span.name
{
    margin-left:-20px;
    width:12%;
}

div.element-list.dkp label:not(.title) > span.name
{
    margin-left:8px;
}

div.element-list.dkp label.title > span.name
{
    margin-right:1%;
}

div.element-list.dkp label > span.points
{
    width:10%;
    font-size:20px;
    font-weight:bold;
}

div.element-list.dkp label:not(.title) > span.points
{
    margin-left:0.62%;
}

div.element-list.dkp label.title > span.points
{
    margin-left:1.8%;
}

div.element-list.dkp label > span.points > a.minus
{
    color:#fff;
    opacity:0.7;
}

.minus
{
    color:#ff0000 !important;
    opacity:0.7;
}

.plus
{
    color:#00ff00 !important;
    opacity:0.7;
}

div.element-list.dkp label > span.item
{
    float:right;
    text-align:right;
    padding-right:5px;
    padding-top:3px;
    width:auto;
    max-width:40%;
    overflow:hidden;
}

div.element-list.dkp label.details
{
    display:none;
    width:100%;
    float:right;
    padding:5px;
    padding-right:25px;
    background-color:rgba(50,50,50,1) !important;
    border-bottom:1px solid rgba(0,0,0,0.1) !important;
}

div.element-list.dkp label.details > ul
{
    list-style:none;
    padding:0px;
    margin:0px;
    float:right;
}

div.element-list.dkp label.details > ul > li
{
    text-align:right;
    padding:2px;
    font-size:13px;
    color:#999;
    font-weight:bolder;
}

div.element-list.dkp label > span.item span.mdi
{
    color:#fff !important;
}

div.element-list.dkp label span.placeholder
{
    display:inline-block;
    width:15px;
}

div.element-list.dkp label > span.item.wide
{
    width:auto !important;
    max-width:inherit !important;
}

div.element-list label.title
{
    padding:2px !important;
    background-color:#222;
    border:1px solid #555;
    border-bottom:0px;
    font-weight:bold;
    color:#888;
    padding-left:5px !important;
}

div.element-list label.title > span
{
    font-size:16px !important;
    font-weight:bold !important;
}

div.element-list label.title > span.item
{
    padding-top:5px;
}

/* DKP entry */



div#search-box
{
    
}

div#dkp-box
{
    border:1px solid rgba(255,255,255,0.1) !important;
}

div#dkp-box > input
{
    box-sizing:border-box;
    margin:0px !important;
    height:auto !important;
    padding:10px !important;
    font-size:24px !important;
    border-radius:5px !important;
    border:1px solid rgba(255,255,255,0.2) !important;
    margin-right:2% !important;
    color:#fff !important;
}

div#dkp-box > input#character
{
    width:16% !important;
}

div#dkp-box > input#item
{
    width:46% !important;
}

div#dkp-box > input#price
{
    width:10% !important;
    text-align:center;
}

div#dkp-box > input[type='submit']
{
    width:20% !important;
    border-radius:5px !important;;
    background-color:#444;
    border-right:1px solid rgba(255,255,255,0.2) !important;
    box-sizing:border-box;
    margin:0px !important;
}

form > div.element-list
{
    padding:0px !important;
    border:0px !important;
    background-color:transparent !important;
}

input.dkp
{
    float:left !important;
}

h1 > span
{
    float:right;
    font-size:40px;
    margin-top:-5px;
}

h1
{
    
}

h2
{
    display:block;
    margin-top:5px !important;
    margin-bottom:5px !important;
}

.marked
{
    background-color:#443b21 !important;
}

.sort
{
    cursor:pointer;
    user-select:none;
}

.box > .button
{
    margin:0px;
    padding:5px;
    border-radius:3px;
}

.box > .button > a
{
    padding-left:8px;
    padding-right:8px;
    padding-top:2px;
    padding-bottom:2px;
    font-size:16px;
}

#dkplist
{
    
}

#dkplist > div
{
    
}

div#raidlist
{
    
}

div#dkplist span.details
{
    display:none;
    width:100%;
    background-color:rgba(200,200,200,0.1);
    margin-top:5px;
    font-size:14px;
    box-sizing:border-box;
}

div#dkplist span.item .mdi
{
    
}

#raidlist
{
    margin:0px;
    padding:0px;
    white-space:nowrap;
    font-size:16px;
}

#raidlist > ul > li
{
    min-width:150px;
    max-width:150px;
    overflow:hidden;
}

#raidlist > ul:not(#title-left)
{
    display:inline-flex;
    margin:0px;
    padding:0px;
    list-style:none;
    border-left:0px !important;
    border-bottom:1px solid #555;
}

#raidlist > ul:not(#title-left) > li
{
    float:left;
    display:block;
    padding:5px;
    border-right:1px solid #555;
    box-sizing:border-box;
}

#raidlist > ul:not(#title-left) > li > span.plus, #raidlist > ul:not(#title-left) > li > span.minus
{
    display:block;
}

#raidlist > ul:not(#title-left) > li > span.price
{
    padding-right:5px;
}

#raidlist > ul:not(#title-left) > li > a
{
    display:block;
    font-size:12px !important;
}

#raidlist > p:last-child
{
    padding-bottom:12px;
}

ul#title-left
{
    display:inline-flex;
    margin:0px;
    padding:0px;
    list-style:none;
    border-left:0px !important;
    border-bottom:1px solid #555;
}

ul#title-left > li
{
    background-size:auto 22px;
    background-repeat:no-repeat;
    background-position:center left;
    float:left;
    display:block;
    overflow:hidden;
    padding:5px;
    border-right:1px solid #555;
    box-sizing:border-box;
}

#raidlist ul > li.title, #raidlist ul > li.header
{
    width:150px;
    max-width:15px;
    font-weight:bold;
}

#raidlist p.clear
{
    
}

ul#title-left > li:last-of-type
{
    border-right:0px;
}

ul#title-left > li > span
{
    background-size:auto 22px;
    background-repeat:no-repeat;
    background-position:center left;
    padding-left:26px !important;
}

ul#title-left > li:only-child
{
    margin:0px;
    padding:0px;
    margin-top:-33px;
    font-size:18px;
}

/* 


#dkplist
{
    
}

#raidlist
{
    display:flex;
    margin:0px;
    padding:0px;
    white-space:nowrap;
}

#raidlist > ul
{
    float:left;
    margin:0px;
    padding:0px;
    padding-top:20px;
    list-style: none;
    margin-bottom:12px !important;
    margin-left:-5px;
    border-left:2px solid #444;
}

#raidlist > ul:last-of-type
{
    border-right:0px;
}

#raidlist > ul > li
{
    color:#ccc;
    font-size:13px;
    height:16px;
    padding-left:20px;
    border-bottom:1px solid #555;
    margin-bottom:2px;
    padding-right:20px;
    padding-bottom:2px;
}

#raidlist > ul > li > span.price:not(:first-of-type)
{
    margin-left:10px;
}

#raidlist > ul > li > span.price
{
    margin-right:3px;
}

#raidlist > ul > li > span
{
    color:#fff;
}

#raidlist li:last-of-type
{
    border-bottom:0px;
    padding-bottom:20px;
}

#raidlist > ul > li.date
{
    color:#fff;
    font-size:16px;
    margin-bottom:10px;
    border-bottom:0px;
    padding-bottom:0px;
}

ul#title-left
{
    float:left;
    display:inline-block;
    padding-top:46px !important;
    margin:0px;
    padding:0px;
    list-style:none;
    border-left:0px !important;
}

ul#title-left > li
{
    background-size:auto 16px;
    background-repeat:no-repeat;
    background-position:top left;
    padding-left:24px !important;
    font-size:13px;
    height:16px;
    padding-right:20px;
    border-bottom:1px solid #555;
    margin-bottom:2px;
    padding-bottom:2px;
    padding-left:20px;
    border-left:5px solid transparent;
}

ul#title-left > li:last-of-type
{
    padding-bottom:20px;
}

ul#title-left > li:only-child
{
    margin:0px;
    padding:0px;
    margin-top:-33px;
    font-size:18px;
}

*/

.button.small
{
    font-size:14px;
}

form.mini div
{
    white-space:nowrap;
}

form.mini input.filler
{
    display:inline-block !important;
}

form.mini input, form.mini select
{
    float:left !important;
    display:inline !important;
    width:auto !important;
    margin:0px !important;
}

form.mini input[type="submit"]
{
    padding-top:6px;
    padding-bottom:6px;
    font-size:24px;
}

form.mini input:not(:first-child), form.mini select:not(:first-child)
{
    margin-left:20px !important;
}

#raiderslist label > span.nickname
{
    display:block;
    font-size:24px;
}

#raiderslist label > span.character
{
    float:left;
    display:inline;
    width:30%;
}

#raiderslist label > span.checkbox
{
    display:inline;
    float:left;
}

#raiderslist label > span.character > a
{
    padding:4px;
    padding-left:30px;
}

#raiderslist label.title > span.chars
{
    width:29.5%;
}


#raiderslist label.title > span.main
{
    width:7%;
}

#raidslist label.title > span.name
{
    
}

#raidslist label:not(.title) > span.name
{
    padding:0px !important;
    display:block;
    font-size:24px;
}

.data-element > span > input:not([type="checkbox"]), .data-element > span > select
{
    font-size:12px;
    float:left !important;
    padding:4px;
    display:inline !important;
    margin:0px !important;
    box-shadow:0px 0px 0px;
    border-radius:0px;
    background-color:#222;;
    height:auto;
    width:100px !important;
    margin-right:10px !important;
}

.data-element > span > input:not([type="checkbox"])
{
    width:200px !important;
}

form div.current-reserve .button
{
    margin:0px !important;
    margin-top:-28px !important;
}

form div#settings .button
{
    margin:0px !important;
    margin-top:-5px !important;
    margin-bottom:0px !important;
}

table#settings form input[type="submit"]
{
    margin-left:0px;
}

div#pin
{
    padding:100px !important;
    text-align:center;
    display:inline-block;
}

div#pin input
{
    float:none;
    margin:0px;
    display:inline;
    font-size:80px;
    height:auto;
    width:140px;
    text-align:center;
    padding:0px;
    border-radius:0px;
    border-right-width:0px;
    vertical-align:middle;
    height:140px;
}

div#pin input:first-of-type
{
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}

div#pin input:last-of-type
{
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
    border-right-width:1px;
}

#priolist-items
{
    margin-bottom:20px;
}

#priolist-items .data-element.search-result
{
    display:flex;
}

#priolist-items .data-element.search-result span.name
{
    display:inline-block;
    width:14%;
    white-space:nowrap;
}

#priolist-items .title span.name, #priolist-items .title span.class
{
    display:inline-block;
}

#priolist-items .title span.class
{
    width:70px !important;
}

#priolist-items .title span.name
{
    width:120px !important;
}

#priolist-items .data-element.search-result span.name
{
    max-height:21px;
}

#priolist-items .title span.name
{
    width:10.7%;
}

#priolist-items .data-element.search-result span.prio, .title span.prio
{
    display:inline-block;
    width:26.5%;
    max-width:26.5%;
}

#priolist-items .title span.prio
{
    display:inline-block;
    width:26%;
    max-width:26%;
}

#priolist-items label:not(.title) span.prio
{
    white-space:normal;
}

#priolist-items .title span.name
{
    padding-left:5px;
    margin-right:-2px;
}

#priolist-items .title
{
    margin:0px;
    padding-top:5px !important;
}

#priolist 
{
    margin-top:20px;
    margin-bottom:20px;
}

#priolist .data-element.form
{
    display:block;
    background-color:rgba(55,55,55,1.0);
    box-shadow:0px 0px 8px rgba(0,0,0,0.3);
    border:1px solid rgba(255,255,255,0.1);
    box-sizing:border-box;
    border-bottom:0px;
}

#priolist label.info > span
{
    width:7%;
    display:inline;
    float:left;
    padding-top:4px;
    margin-right:10px;
    font-weight:bold;
}

#priolist label.info > select, label.info > input:not([type="submit"])
{
    font-size:14px !important;
    padding:5px !important;
    border:0px !important;
    box-shadow:0px 0px 0px !important;
    border-radius:0px !important;
    background-color:#222 !important;
    height:auto !important;
    margin-right:5px  !important;
}

#priolist label.info > input:not([type="submit"])
{
    width:25.9%;
}

#priolist label.info > input[type="submit"]:last-of-type
{
    margin-left:5px;
}

label#itemlist
{
    font-size:15px !important;
    max-height:66px !important;
    padding:0px !important;
    box-sizing:border-box;
    overflow:hidden !important;
    border:1px solid #555 !important;
    border-bottom:0px !important;
    height:auto !important;
    transition:max-height 0.4s ease-in-out;
}

label#itemlist
{
    margin:0px !important;
    padding: 0px !important;
}

label#itemlist.expanded
{
    max-height:202px !important;
}

label#itemlist > div
{
    margin:0px !important;
    padding: 0px !important;
}

label#itemlist ul 
{
    list-style:none;
    padding:0px;
    margin:0px;
}

label#itemlist ul > li
{
    padding:5px !important;
    border-bottom:1px solid rgba(100,100,100,0.3);
}

label#itemlist ul > li:last-of-type
{
    border-bottom:0px solid rgba(100,100,100,0.3);
}

label#itemlist ul > li:hover, label#itemlist ul > li.selected
{
    background-color:rgba(100,100,100,0.3);
}

label#itemlist ul > li > a
{
    display:block;
}

label#itemlist ul > li:hover a
{
    color:#fff !important;
}

#itemlist
{
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}

form .scrollbar-inner
{
    margin:0px !important;
    padding: 0px !important;
}


#priolist > form > label:first-of-type
{
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}

#priolist-items
{
    margin-top:20px;
}

#priolist-items label > a
{
    
}

#priolist-items label span.options
{
    margin-right:3px;
}

#priolist-items label span.options:empty
{
    width:17px;
}

     
form .scrollbar-inner > .scroll-element.scroll-y 
{
    height: 100%;
    right: 1px;
    top: 1px;
    width: 10px;
}
     
form .scrollbar-inner > .scroll-element .scroll-element_outer 
{
    overflow: hidden;
}
     
form .scrollbar-inner > .scroll-element .scroll-element_outer,
form .scrollbar-inner > .scroll-element .scroll-element_track,
form .scrollbar-inner > .scroll-element .scroll-bar 
{
    border-radius:0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

form .scrollbar-inner > .scroll-element .scroll-element_outer
{
    
}

fieldset
{
    margin:0px;
    padding:0px;
    border:0px;
}

span#pin
{
    display:block;
    float:left;
    text-align:left;
    padding-top:10px;
    font-size:15px;
}

span#pin > input
{
    display:inline;
    border:0px;
    border-radius:3px;
    font-size:14px;
    height:auto;
    width:230px;
    padding:8px;
    padding-top:3px;
    padding-bottom:3px;
    margin:0px;
    float:none;
    font-weight:bold;
    margin-top:10px;
    margin-left:5px;
    background-color:#222 !important;
}

label.data-element span.token
{
    width:25.2% !important;
}

label.title span.token
{
    width:27% !important;
}

label.data-element span.neededitems
{
    margin-left:2.2% !important;
}

label.data-element span.done, label.title span.done
{
    float:right;
    text-align:right;
    padding-right:5px !important;
    padding-top:3px !important;
    width:auto;
    overflow:hidden;
}

label.title span.done
{
    padding-top:8px !important;
}

label.data-element.done
{
    background-color:#333;
}

label.data-element.done > *
{
    text-decoration:line-through;
    opacity:0.8;
    filter: brightness(0.8) grayscale(1);
}

label.data-element.done > * a
{
    color:#ccc !important;
}

.class
{
    font-weight:900 !important;
}

.class-0 /* none */
{
    color:#ccc;
}

.class-1 /* Krieger */
{
    color:#C79C6E;
}

.class-2 /* Schurke */
{
    color:#FFF569;
}

.class-3 /* Magier */
{
    color:#69CCF0;
}

.class-4 /* Priester */
{
    color:#FFFFFF;
}

.class-5 /* Druide */
{
    color:#FF7D0A;
}

.class-6 /* Schamane */
{
    color:#0070DE;
}

.class-7 /* Hexenmeister */
{
    color:#9482C9;
}

.class-8 /* Jäger */
{
    color:#ABD473;
}

.class-9 /* Paladin */
{
    color:#F58CBA;
}

.class-10 /* DK */
{
    color:#C41E3A;
}

.classbg-0 /* none */
{
    background-color:#C41F3B;
}

.classbg-1 /* Krieger */
{
    background-color:#C79C6E;
}

.classbg-2 /* Schurke */
{
    background-color:#FFF569;
}

.classbg-3 /* Magier */
{
    background-color:#69CCF0;
}

.classbg-4 /* Priester */
{
    background-color:#FFFFFF;
}

.classbg-5 /* Druide */
{
    background-color:#FF7D0A;
}

.classbg-6 /* Schamane */
{
    background-color:#0070DE;
}

.classbg-7 /* Hexenmeister */
{
    background-color:#9482C9;
}

.classbg-8 /* Jäger */
{
    background-color:#ABD473;
}

.classbg-9 /* Paladin */
{
    background-color:#F58CBA;
}

.classbg-10 /* DK */
{
    background-color:#C41E3A;
}

.neutral
{
    color:#ccc !important;
}

.white
{
    color:#fff !important;
}

table.list
{
    border-spacing:0px;
    width:100%;
    border-collapse:separate;
    background-color:rgba(55,55,55,1.0);
    border:1px solid #555;
    box-sizing:border-box;
    border-radius:5px;
    border-top-left-radius:0px;
    border-top-right-radius:0px;
    box-shadow:none;
}

table.list#polls tr:not(.done) td > a
{
    color:#fff !important;
}



table.list > thead
{
    font-size:17px;
}

table.list > thead > tr
{
    border-bottom:2px solid rgba(255,255,255,0.2);
    background-color:rgba(255,255,255,0.1);
}

table.list > tbody
{
    font-size:17px;
}

table.list > * > tr
{
    
}

table.list > * > tr > *
{
    padding:5px;
}

table.list > * > tr:not(:last-of-type)
{
    
}

table.list > * > tr:not(:last-of-type) > td
{
    border-bottom:1px solid #444;
}

table.list > * > * > th:not(:last-of-type)
{
    border-right:1px solid #555;
}

table.list > * > * > td:not(:last-of-type)
{
    border-right:1px solid #444;
}

table.list > * > tr > td.item, table.list > * > tr > th.item,
table.list > * > tr > td.class, table.list > * > tr > th.class
{
    text-align:right;
}

table.list > * > tr > td.item
{
    font-size:16px;
    cursor:pointer;
}

table.list > * > tr > td.penalty
{
    cursor:pointer;
    text-align:right;
}

table.list > * > tr > th.penalty
{
    width:90px;
    text-align:right;
}

table.list > * > tr > td.item > a > span.mdi
{
    color:#fff !important;
}

table.list > * > tr.done
{
    text-decoration:line-through;
    filter: grayscale(1);
}

table.list > * > tr.done > td
{
    color:#aaa !important;
    text-decoration:line-through;
    filter: brightness(0.8);
    border-color:#555;
}

table.list > * > tr.done > td > a
{
    color:#aaa !important;
}

table.list > * > * > .checkbox
{
    max-width:40px;
}

table.list > * > * > .checkbox.right
{
    max-width:60px;
    text-align:right;
}

table.list > * > * > .name
{
    text-align:left;
    width:120px;
}

table.list > * > * > .question > a
{
    color:#fff !important;
    font-weight: 900;
}

table.list#polls > tbody > tr:not(.done):hover > td:not(.green):not(.red)
{
    background-color:rgba(63,63,63,1);
}

table.list#polls > tbody > tr > td > a
{
    display:block;
    width:100%;
    height:100%;
}

table.list > * > * > *.class
{
    text-align:right;
    width:80px;
}

table.list > * > * > *.attendance
{
    width:110px;
}

table.list#polls > * > * > *.attendance
{
    width:auto;
}

table.list > * > * > *.points
{
    min-width:60px;
    text-align:right;
    font-weight: 900;
}

table.list > * > * > *.date
{
    width:200px;
    text-align:left;
}

table.list#polls > * > * > *.date
{
    width:140px;
    text-align:left;
}

table.list#item > * > * > *.points
{
    text-align:left;
    font-weight: 900;
}

table.list > tbody > * > *.points, table.list > tbody > tr.marked > td
{
    background-color:rgba(63,63,63,1);
}

table.list > * > * > *.class > div
{
    display:block;
    width:100%;
    height:24px;
    background-size:auto 100%;
    background-repeat:no-repeat;
    background-position:center right;
    border-right:5px solid transparent;
}

table.list > * > * > td > span.checkbox > input[type="checkbox"]
{
    display:none;
}

table.list > * > * > td > span.checkbox
{
    display:inline-block;
    width:20px;
    height:21px;
    background-color:#222;
    vertical-align:middle;
    margin:3px;
    position:relative;
    border-radius:2px;
    margin-right:5px;
    border:1px solid rgba(255,255,255,0.2);
    box-sizing:border-box;
    box-shadow:1px 1px 0px #000;
}

table.list > * > * > td > span.checkbox.checked:before
{
    content: '\2715';
    font-family:Arial;
    font-size: 20px;
    position: absolute;
    top: -2px;
    left: 1px;
    color: #fff;
    font-weight:900;
}

table.list > * > tr.details 
{
    display:none;
}

table.list > * > tr.details > td
{
    
}

table.list > * > tr.details > td > ul
{
    list-style:none;
    padding:0px;
    margin:0px;
}

table.list > * > tr.details > td > ul
{
    list-style:none;
    padding:0px;
    margin:0px;
}

table.list > * > tr.details > td > ul > li
{
    font-size:14px;
    margin-right:14px;
    text-align:right;
    padding:3px;
}

table.list > tfoot > tr > td
{
    font-size:14px;
    padding:10px;
    background-color:#222;
}

table.list > thead > tr > td.heading
{
    background-color:rgba(70,70,70,1);
    font-size:20px;
}

/* prio */

table.list#prio
{
    
}

table.list#prio > thead > tr > th.prio
{
    min-width:300px;
}

table.list#prio > tbody > tr > td.name
{
    font-size:17px;
    white-space:nowrap;
}

table.list#prio > tbody > tr > td.prio
{
    font-size:16px;
}

table.list > tbody > tr > td.penalty > a.comment
{
    font-size:12px;
}

table.list#prio > tbody > tr > td.prio > a
{
    
}

.red
{
    background-image:none !important;
    background-color:rgba(255, 92, 92,0.15) !important;
}

.green
{
    background-image:none !important;
    background-color:rgba(97, 255, 129,0.15) !important;
}

.yellow
{
    background-image:none !important;
    background-color:rgba(255, 233, 110,0.15) !important;
}

span.red
{
    background-color:transparent !important;
    color:rgba(255, 92, 92,1);
}

span.green
{
    background-color:transparent !important;
    color:rgba(97, 255, 129,1);
}

span.yellow
{
    background-color:transparent !important;
    color:rgba(255, 233, 110,1);
}

span.red.warning
{
    display:block;
    padding-bottom:10px;
}

table.list#raids,
table.list#settings
{
    border-radius:5px;
    margin-top:10px;
    margin-bottom:20px;
}

table.list#raids > * > tr > .checkbox, table.list#settings > * > tr > .checkbox
{
    vertical-align:top;
}

table.list#raids > tbody > tr > td
{
    padding:10px;
    font-size:24px;
}

table.list#raids > tbody > tr > td.name
{
    padding-top:12px;
}

table.list#raids > tbody > tr > td > table
{
    margin-top:10px;
    border-radius:0px;
    border:0px;
}

table.list#raids > tbody > tr > td > table.bosses > tbody > tr > td
{
    background-color:rgba(50, 50, 50, 1);
    display:inline-table;
    width:16.8% !important;
    max-width:none !important;
    margin-bottom:10px;
    overflow:hidden;
    padding:10px;
    font-size:15px;
    height:90px;
    background-size:110% auto;
    background-position:top;
    text-align:left;
    filter: grayscale(40%);
    border:1px solid #555 !important;
    box-shadow:inset 0px 0px 1px rgba(0, 0, 0, 1);
}

table.list#raids > tbody > tr > td > table.bosses > tbody > tr > td > span.name
{
    margin-top:10px;
    display:block;
    width:100%;
    font-weight:900;
    text-shadow:1px 1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000, -1px -1px 0px #000;
}

table.list#settings > tbody > tr > td
{
    vertical-align:top;
}

table.list#settings > tbody > tr > td > form > select:not(:last-of-type)
{
    margin-bottom:10px;
}

table.list#settings > tbody > tr > td.items
{
    padding:0px;
    min-width:730px;
}

table.list#settings > tbody > tr > td.items div
{
    padding:0px !important;
}

table.list#settings > tbody > tr > td div.itemlist-filters
{
    background-color:#444;
    padding:5px !important;
}

table.list#settings > tbody > tr > td div.itemlist-filters > span
{
    float:left;
    border-radius: 2px;
    background-color: rgba(0,0,0,0.2);
    border: 1px solid #555;
    margin-right:5px;
    padding-left:5px;
}

table.list#settings > tbody > tr > td div.itemlist-filters > span#refresh
{
    cursor:pointer;
    padding:2px;
    padding-top:3px;
    padding-left:4px;
    padding-right:4px;
    font-size:15px;
}

table.list#settings > tbody > tr > td div.itemlist-filters > span > label
{
    padding-top:2px;
    display:block;
    float:left;
}

table.list#settings > tbody > tr > td div.itemlist-filters > span > select
{
    margin-left:5px;
    float:left;
    font-size:14px;
    height:auto;
    border-radius:0px;
    border:0px solid;
    background-color:#111;
    box-shadow:0px 0px 0px transparent;
    border-top-right-radius:1px;
    border-bottom-right-radius:1px;
    padding-top:4px;
    padding-bottom:3px;
    padding-left:4px;
}

table.list#settings > tbody > tr > td div.itemlist-filters > span > select > option
{
    font-size:16px;
    background-color:#111;
    box-shadow:0px 0px 0px transparent;
}

table.list#settings > tbody > tr > td div#itemlist
{
    font-size:16px !important;
    padding:0px !important;
    box-sizing:border-box;
    overflow:hidden !important;
    height:auto !important;
    transition:max-height 0.4s ease-in-out;
    margin:0px !important;
    padding: 0px !important;
}

table.list#settings > tbody > tr > td div#itemlist.expanded
{
    min-height:395px !important;
    max-height:395px;
    
    /* 40px pro setting / 50px pro button */
}

table.list#settings > tbody > tr > td div#itemlist button
{
    margin:5px;
    padding-top:5px;
    padding-bottom:5px;
    background-color:transparent;
    border-radius:2px;
    background-color:rgba(0,0,0,0.2);
    border:1px solid #555;
}

table.list#settings > tbody > tr > td div#itemlist button:hover
{
    
}

table.list#settings > tbody > tr > td div#itemlist button:not(:first-of-type)
{
    margin-left:0px;
}

table.list#settings > tbody > tr > td div#itemlist ul 
{
    list-style:none;
    padding:0px;
    margin:0px;
    margin-bottom:10px;
    border-top:1px solid rgba(100,100,100,0.3);
}

table.list#settings > tbody > tr > td div#itemlist ul > li
{
    padding:5px !important;
    border-bottom:1px solid rgba(100,100,100,0.3);
}

table.list#settings > tbody > tr > td div#itemlist ul > li.locked
{
    user-select: none;
    cursor:default !important;
    filter:grayscale(1.0);
    background-color:rgba(0,0,0,0.1) !important;
}

table.list#settings > tbody > tr > td div#itemlist ul > li.locked > a
{
    color:#999 !important;
    cursor:default !important;
}

table.list#settings > tbody > tr > td div#itemlist ul > li.locked:hover > a
{
    color:#999 !important;
}

table.list#settings > tbody > tr > td div#itemlist ul > li > span.mdi.lock
{
    float:right;
    margin-right:10px;
    display:none;
    cursor:pointer !important;
    color:#fff !important;
    margin-right:10px;
}

table.list#settings > tbody > tr > td div#itemlist ul > li.locked > span.mdi.lock
{
    display:inline;
}

table.list#settings > tbody > tr > td div#itemlist ul > li > span.mdi.fav
{
    float:right;
    display:none;
    cursor:pointer !important;
    color:#fff !important;
    margin-right:10px;
}

table.list#settings > tbody > tr > td div#itemlist ul > li > span.players
{
    font-size:11px;
    border-radius:4px;
    background-color:#444;
    border-bottom:1px solid #222;
    padding:1px;
    padding-left:5px;
    padding-right:5px;
    margin-left:5px;
}

table.list#settings > tbody > tr > td div#itemlist ul > li > span.faction
{
    font-size:11px;
    border-radius:4px;
    background-color:#444;
    border-bottom:1px solid #222;
    padding:1px;
    padding-left:8px;
    padding-right:8px;
    margin-left:10px;
    background-repeat:no-repeat;
    background-position-x:center;
    background-position-y:1px;
    background-size:auto 80%;
}

table.list#settings > tbody > tr > td div#itemlist ul > li > span.faction-1
{
    background-image:url('../../../../icon/faction_1.png');
    background-position-y:2px;
}

table.list#settings > tbody > tr > td div#itemlist ul > li > span.faction-2
{
    background-image:url('../../../../icon/faction_2.png');
}

table.list#settings > tbody > tr > td div#itemlist ul > li > span.mdi.link
{
    float:right;
    display:inline;
    cursor:pointer !important;
    color:#fff !important;
    margin-right:10px;
}

table.list#settings > tbody > tr > td div#itemlist ul > li.faved
{
    background-color:rgba(255,255,133,0.03) !important;
}

table.list#settings > tbody > tr > td div#itemlist ul > li.faved > span.mdi.fav
{
    display:inline;
}

table.list#settings > tbody > tr > td div#itemlist ul > li:last-of-type
{
    border-bottom:0px solid rgba(100,100,100,0.3);
}

table.list#settings > tbody > tr > td div#itemlist ul > li:hover, table.list#settings > tbody > tr > td div#itemlist ul > li.selected
{
    background-color:rgba(100,100,100,0.3);
}

table.list#settings > tbody > tr > td.closed div#itemlist ul > li
{
    background-color:transparent;
}

table.list#settings > tbody > tr > td div#itemlist ul > li > a
{
    display:inline;
}

table.list#settings > tbody > tr > td div#itemlist ul > li > span.mdi.reward
{
    margin-left:5px;
}

table.list#settings > tbody > tr > td div#itemlist ul > li > span.mdi.reward:before
{
    
}

table.list#settings > tbody > tr > td div#itemlist ul > li > span.mdi.reward > a
{
    color:currentColor !important;
}

table.list#settings > tbody > tr > td div#itemlist ul > li:hover > span.mdi.reward > a
{
    color:currentColor !important;
}

table.list#settings > tbody > tr > td div#itemlist ul > li span.mdi-lock,
table.list#settings > tbody > tr > td div#itemlist ul > li span.mdi-star,
table.list#settings > tbody > tr > td div#itemlist ul > li span.mdi-link
{
    
}

table.list#settings > tbody > tr > td div#itemlist ul > li:hover a
{
    color:#fff !important;
}

table.list#settings .scrollbar-inner > .scroll-element.scroll-y
{
    top:0px;
    right:0px;
}

table.list#settings td .scrollbar-inner > .scroll-element .scroll-element_outer,
table.list#settings td .scrollbar-inner > .scroll-element .scroll-element_track,
table.list#settings td .scrollbar-inner > .scroll-element .scroll-bar 
{
    border-radius:0px !important;
}

table.list#settings td:last-of-type .scrollbar-inner > .scroll-element .scroll-element_outer,
table.list#settings td:last-of-type .scrollbar-inner > .scroll-element .scroll-element_track,
table.list#settings td:last-of-type .scrollbar-inner > .scroll-element .scroll-bar
{
    border-top-right-radius:3px !important;
    border-bottom-right-radius:3px !important;
}

table.list#settings > tbody > tr > td.form
{
    width:338px;
}

table.list#settings > tbody > tr > td.form div
{
    padding:10px;
}

table.list#settings > tbody > tr > td.form div > h2
{
    display:block;
    margin:0px;
    font-size:18px;
    padding-bottom:10px;
}

table.list#settings > tbody > tr > td.form div > h2 > a
{
    margin-top:-2px;
}

table.list#settings > tbody > tr > td.form div > h2
{
    color:#777 !important;
}

table.list#settings > tbody > tr > td.form div > h2 > a.active
{
    color:#fff !important;
    cursor:default;
}

table.list#settings > tbody > tr > td.form div > h2 > a:not(.active)
{
    color:#777 !important;
}

table.list#settings > tbody > tr > td.form div > span#form_character_create
{
    display:none;
}

table.list#settings > tbody > tr > td.form div input,
table.list#settings > tbody > tr > td.form div select,
table.list#settings > tbody > tr > td.form div select > option
{
    float:left;
    margin-right:5px;
    font-size:14px;
    padding:3px !important;
    padding-left:10px !important;
    box-shadow:none;
    background-color:#222;
    border-radius:5px;
    color:#fff;
    border:1px solid #444;
}

table.list#settings > tbody > tr > td.settings form div#faction
{
    display:block;
    width:80px;
    float:right;
    margin-right:2px;
    margin-top:-40px;
    border:1px solid #555;
    border-radius:3px;
    height:30px;
    margin-bottom:10px;
    box-shadow:0px 1px 0px rgba(0,0,0,0.5);
}

table.list#settings > tbody > tr > td.settings form div#faction > span
{
    display:block;
    width:50%;
    float:left;
    border-radius:2px;
    height:100%;
    background-position:center;
    background-repeat:no-repeat;
    background-color:#333;
    box-sizing:border-box;
    filter:grayscale(50%);
}

table.list#settings > tbody > tr > td.settings form div#faction > span > input[type="checkbox"]
{
    width:20px;
    height:20px;
    margin:0px;
    padding:0px;
    display:none;
}

table.list#settings > tbody > tr > td.settings form div#faction > span.faction-1
{    
    background-image:url('../../../../icon/faction_1.png');
    border-top-right-radius:0px;
    border-bottom-right-radius:0px;
}

table.list#settings > tbody > tr > td.settings form div#faction > span.faction-2
{
    background-image:url('../../../../icon/faction_2.png');
    border-top-left-radius:0px;
    border-bottom-left-radius:0px;
    border-left:1px solid #555;
}

table.list#settings > tbody > tr > td.settings form div#faction > span.checked
{
    background-color:#444;
    filter:grayscale(0%);
}

table.list#settings > tbody > tr > td.form div select
{
    margin-right:0px;
    width:150px !important;
}

table.list#settings > tbody > tr > td.form div input
{
    padding-left:10px !important;
    box-sizing:border-box;
}

table.list#settings > tbody > tr > td.form div input[type="submit"]
{
    background-color:#444;
    padding-right:10px !important;
}

table.list#settings > tbody > tr > td.form div input[type="submit"]#addcharacter
{
    margin-left:10px;
}

table.list#settings > tbody > tr > td.form div.form > input,
table.list#settings > tbody > tr > td.form div.form > select
{
    width:100%;
    display:block;
    float:none;
}

table.list#settings > tbody > tr > td.form div.form > input[type="submit"]
{
    text-align:left;
}
 
table.list#settings > tbody > tr > td.form div.form > input:not(:first-of-type):not(:last-of-type):not([name="prio3"]),
table.list#settings > tbody > tr > td.form div.form > select
{
    border-bottom:none;
    border-radius:0px;
}

table.list#settings > tbody > tr > td.form div.form > input:first-of-type
{
    border-bottom:none;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
}

table.list#settings > tbody > tr > td.form div.form > input:last-of-type,
table.list#settings > tbody > tr > td.form div.form > input[name="prio3"]
{
    border-top-left-radius:0px;
    border-top-right-radius:0px;
}

table.list#settings > tbody > tr > td.form input#item,
table.list#settings > tbody > tr > td.form input#note
{
    width:70%;
    float:left;
    margin-right:0px;
}

table.list#settings > tbody > tr > td.form input#price,
table.list#settings > tbody > tr > td.form input#penalty
{
    width:30%;
    border-left:0px;
    float:left;
    margin-right:0px;
}

table.list#settings > tbody > tr > td.settings 
{
    padding:15px;
    min-width:370px;
    width:auto;
}

table.list#settings > tbody > tr > td.settings > h2
{
    display:block;
    margin:0px;
    font-size:18px;
    padding-bottom:10px;
}

table.list#settings > tbody > tr > td.settings > h2.tab
{
    float:left;
    color:#777;
}

table.list#settings > tbody > tr > td.settings > h2.tab:not(:last-of-type)
{
    margin-right:16px;
}

table.list#settings > tbody > tr > td.settings > h2.tab.active
{
    color:#fff;
}

table.list#settings > tbody > tr > td.settings > h2.tab:not(.active)
{
    cursor:pointer;
}

table.list#settings > tbody > tr > td.settings > form > div.tab-content
{
    display:none;
}

table.list#settings > tbody > tr > td.settings > form > div.tab-content.active
{
    display:block;
}

table.list#settings > tbody > tr > td.settings > form div.info
{
    font-size:14px;
    padding:10px !important;
    box-shadow:none;
    background-color:#222 !important;
    border:1px solid #444;
    border-bottom:0px;
    color:#fff;
    padding-left:15px !important;
    box-sizing:border-box;
}

table.list#settings > tbody > tr > td.settings > form div.info > ul
{
    list-style:none;
    padding:0px;
    font-size:12px;
    margin:0px;
}

table.list#settings > tbody > tr > td.settings > form div.info > ul > li:not(:last-of-type)
{
    padding-bottom:5px;
}


form input[type="submit"]
{
    font-weight:bold;
}

td.settings form input,
td.settings div.button.link,
td.settings button,
td.settings form select,
td.settings form select > option
{
    float:left;
    margin-right:10px;
    font-size:14px;
    padding:3px !important;
    height:40px;
    box-shadow:none;
    background-color:#222 !important;
    border-radius:5px;
    color:#fff;
    border:1px solid #444;
    padding-left:10px !important;
    box-sizing:border-box;
}

table.list#settings > tbody > tr > td.settings > form input[type="submit"],
table.list#settings > tbody > tr > td.settings div.button.link,
table.list#settings > tbody > tr > td.settings > button
{
    float:none !important;
    margin:0px !important;
    padding:0px !important;
    background:#444;
    padding-left:10px !important;
    padding-right:10px !important;
    width:100%;
    box-sizing:border-box;
}

table.list#settings > tbody > tr > td.settings input.submit
{
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

/* save preset nini form */

table.list#settings > tbody > tr > td.settings > form#savepreset 
{
    margin-top:10px;
}

table.list#settings > tbody > tr > td.settings > form#savepreset > input
{
    width:50% !important;
    float:left;
    margin:0px !important;
    border-top-right-radius:0px;
    border-bottom-right-radius:0px;
    font-size:14px;
    height:40px;
}

table.list#settings > tbody > tr > td.settings > form#savepreset > div.button
{
    float:left !important;
    color:#fff !important;
    width:50% !important;
    border-top-left-radius:0px;
    border-bottom-left-radius:0px;
    border-left:0px;
    background-color:#555 !important;
}

table.list#settings > tbody > tr > td.settings > div.button.link, input.button.link
{
    margin-top:10px !important;
    background-color:rgba(255, 92, 92,0.7) !important;
}

table.list#settings > tbody > tr > td.settings div.button.link
{
    float:left !important;
    width:calc((50%) - (5px));
}

table.list#settings > tbody > tr > td.settings div.button.link:nth-of-type(2n)
{
    margin-left:10px !important;
    width:calc((50%) - (5px));
}

.button.link.blue, input.button.link.blue, button.link.blue
{
    background-color:rgba(52, 168, 235,0.7) !important;
}

table.list#settings > tbody > tr > td.settings div.button.link.blue, input.button.link.blue, .button.link.blue
{
    background-color:rgba(52, 168, 235,0.7) !important;
}

table.list#settings > tbody > tr > td.settings div.button.link.red, input.button.link.red, .button.link.red
{
    background-color:rgba(196, 43, 43,0.7) !important;
}

table.list#settings > tbody > tr > td.settings div.button.link.green, input.button.link.green, .button.link.green
{
    background-color:rgba(80, 195, 85,0.7) !important;
}

table.list#settings > tbody > tr > td.settings div.button.link.disabled, input.button.link.disabled,
table.list#settings > tbody > tr > td.settings div.button.link.disabled > a, input.button.link.disabled > a
{
    filter:grayscale(100%) opacity(50%);
    cursor:default !important;
}

table.list#settings > tbody > tr > td.settings div.button.link:first-child
{
    margin-top:0px !important;
}

table.list#settings > tbody > tr > td.settings > div.button.link:last-of-type
{
    margin-bottom:-5px !important;
}

table.list#settings > tbody > tr > td.settings > form select,
table.list#settings > tbody > tr > td.settings > form input,
table.list#settings > tbody > tr > td.settings div.button.link > a
{
    width:100%;
    display:block;
    float:none;
}

table.list#settings > tbody > tr > td.settings div.button.link
{
    text-align:center;
}

table.list#settings > tbody > tr > td.settings div.button.link > a
{
    width:auto !important;
    padding:11px !important;
    margin:0px !important;
    box-sizing:border-box;
    text-align:center;
}

table.list#settings > tbody > tr > td.settings > form input[type="submit"]
{
    text-align:left;
}

table.list#settings > tbody > tr > td.settings > form select:not(:first-of-type)
{
    border-bottom:none;
    border-radius:0px;
}

table.list#settings > tbody > tr > td.settings > form select:first-of-type
{
    border-bottom:none;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
}

table.list#settings > tbody > tr > td.settings > form input[type="submit"]
{
    border-top-left-radius:0px;
    border-top-right-radius:0px;
}

.closed
{
    opacity:0.5 !important;
    cursor:default !important;
    filter: grayscale(1);
    user-select: none;
}

ul.poll
{
    list-style:none;
    padding:0px;
    margin:0px;
}

ul.poll > li
{
    font-size:24px;
    border:1px solid #444;
    background-color:rgba(44,44,44,1.0);
    padding:10px;
    padding-left:20px;
    padding-right:20px;
    box-sizing: border-box;
    border-bottom-width:0px;
}

ul.poll li:not(.heading)
{
    user-select: none;
    cursor:pointer;
}

ul.poll > li.heading
{
    font-weight: 900;
    font-size:28px;
    background-color:rgba(77,77,77,1.0);
}

ul.poll > li:first-of-type
{
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}

ul.poll > li:last-of-type
{
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    border-bottom-width:1px;
}

ul.poll > li.heading
{
    display:block;
}

ul.poll > li:not(.heading):hover
{
    background-color:rgba(50,50,50,1.0);
}

ul.poll > li:not(.heading).checked
{
    background-color:rgba(66,66,66,1.0);
}

ul.poll > li:not(.heading).checked > span
{
    padding-right:10px;
}

ul.poll > li:not(.heading) > input[type="checkbox"]
{
    display:none;
}

ul.poll-result
{
    display:block;
    width:100%;
    border-radius:5px;
    background-color:rgba(44,44,44,1.0);
    clear:both;
    border:1px solid #444;
    padding:0px;
    list-style:none;
    height:240px;
    margin-bottom:20px;
}

ul.poll-result > li
{
    display:table;
    height:100%;
    float:left;
    text-align:center;
    box-sizing:border-box;
    position:relative;
    padding-top:10px;
    font-size:80%;
}

ul.poll-result > li:not(:last-of-type)
{
    border-right:1px solid #444;
}

ul.poll-result > li:first-of-type > span
{
    border-bottom-left-radius:5px;
}

ul.poll-result > li:last-of-type > span
{
    border-bottom-right-radius:5px;
}

ul.poll-result > li > span
{
    width:100%;
    display:table;
    bottom:0px;
    position:absolute;
    padding-top:5px;
    font-size:14px;
    text-shadow:0px 0px 0px transparent;
}

ul.poll-result > li > span > span
{
    width:100%;
    display:table;
    top:-20px;
    position:absolute;
}

/* Buttons */

button
{
    margin-bottom:20px;
    background:rgba(255,255,255,0.2);
    border:0px;
    color:#fff;
    padding:8px;
    padding-left:10px;
    padding-right:10px;
    border-radius:4px;
    cursor:pointer;
}

footer
{
    height:30px;
}

/* Tabs */

ul.tabs
{
    list-style:none;
    padding:0px;
    margin:0px;
    margin-top:-34px;
}

ul.tabs > li.tab
{
    list-style:none;
    margin:0px;
    padding:0px;
    float:right;
    padding-left:10px;
    cursor:default;
}

ul.tabs > li.tab:not(.active)
{
    color:rgba(255,255,255,0.4);
    cursor:pointer;
}

.tab-content
{
    display:none;
}

.tab-content.active
{
    display:table-cell;
}

/* Logs */

td.logs 
{
    padding:0px !important;
    width:100%;
    display:block;
}

td.logs > ul
{
    list-style:none;
    margin:0px;
    padding:0px;
    display:block;
}

td.logs > ul > li
{
    display:block;
    list-style:none;
    margin:0px;
    padding:10px;
    border-bottom:1px solid #444;
}

td.logs > ul > li:last-of-type
{
    border-bottom:0px solid #444;
}

td.logs > ul > li > span.time
{
    color:rgba(255,255,255,1);
    font-weight:900;
    margin-right:10px;
}

td.logs > ul > li > span.message
{
    color:rgba(255,255,255,0.8);
    font-weight:lighter;
}

td.logs > ul > li > span.name
{
    background-repeat:no-repeat;
    background-size:auto 90%;
    background-position:left center;
    padding-left:23px;
}

table.list#profile-characters 
{
    margin-bottom:20px;
}

table.list#profile-characters tbody:not(.not-draggable) tr
{
    cursor:move;
}

table.list#profile-characters tr .class,
table.list#profile-favs tr .class
{
    max-width:6% !important;
    width:6% !important;
}

table.list#profile-favs tr .character
{
    max-width:10% !important;
    width:10% !important;
}

table.list#profile-characters tr .name
{
    max-width:92%;
    width:92%;
}

table.list#profile-presets tr .preset
{
    max-width:30%;
    width:30%;
}

table.list#profile-favs tr .name,
table.list#profile-favs tr .instance,
table.list#profile-favs tr .boss
{
    width:auto;
}

table.list#profile-characters tr td.name
{
    font-size:20px;
}

table.list tr .options
{
    width:2%;
    max-width:2%;
    text-align:center;
}

table.list#profile-runs tr .pin
{
    width:4%;
    max-width:4%;
    font-weight:bolder;
}

table.list#profile-runs tr .date
{
    text-align:right;
    width:10%;
}

table.list#profile-runs
{
    margin-bottom:20px;
    table-layout:fixed;
}

table.list#profile-runs > tbody > tr > td
{
    padding:20px;
}

table.list#profile-runs > tbody > tr > td > div
{
    width:100% !important;
    text-align:center !important;
    max-width:inherit !important;
    color:#ccc !important;
    margin-bottom:3px;
}

table.list#profile-runs > tbody > tr > td > div.pin
{
    padding-left:1px;
}

table.list#profile-runs > tbody > tr > td > div.pin > a
{
    font-size:44px;
    color:#fff !important;
}

table.list#profile-runs > tbody > tr > td > a.option
{
    float:right;
    font-size:18px;
    margin-top:-15px;
    margin-right:-15px;
}

table.list#profile-runs > tbody > tr > td > div.instance
{
    white-space:nowrap;
}

table.list#profile-runs > tbody > tr > td > div.date
{
    font-size:14px;
}

table.list#profile-runs > tbody > tr > td > div.players
{
    font-size:20px;
    font-weight:900;
    margin-top:10px;
}

table.list#profile-presets
{
    margin-bottom:20px;
    
}

tr.no-data > td
{
    padding:15px;
    font-size:18px;
}

div.info-box
{
    padding:20px;
    padding-bottom:20px;
    margin-bottom:20px;
    
    background-color: rgba(55,55,55,1.0);
    border: 1px solid #555;
    box-sizing: border-box;
    border-radius: 5px;
}

div.info-box ul
{
    list-style-type:circle;
}

div.info-box ul > li
{
    padding-bottom:10px;
    line-height:28px;
}

div.info-box ul > li.more
{
    list-style-type:none;
    font-size:16px;
}

div.info-box ul > li > summary
{
    font-size:14px;
    color:#ddd;
}

div.info-box ul > li > span.mdi-tools,
div.info-box ul > li > span.mdi-alert
{
    border: 1px solid #555;
    box-sizing: border-box;
    border-radius: 5px;
    padding:3px;
    padding-left:8px;
    padding-right:8px;
    font-size:18px;
    margin-right:5px;
}

div.info-box ul > li > img
{
    height:140px;
    border: 1px solid #555;
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow:0px 0px 25px rgba(0,0,0,0.3);
    margin-right:20px;
    margin-top:20px;
}

div.info-box ul > li.button
{
    list-style:none;
    float:left;
    margin:0px !important;
    margin-top:20px !important;
    margin-bottom:20px !important;
}

div.info-box ul > li.button > a
{
    padding-top:5px;
    padding-bottom:5px;
    padding-left:15px;
    padding-right:15px;
}

.button.link > a 
{
    white-space:nowrap !important;
}

table.two-cols
{
    width:100%;
}

table.two-cols > tbody > tr > td
{
    margin:0px;
    vertical-align:top;
}

table.two-cols > tbody > tr > td.settings
{
    padding-left:20px !important;
    width:400px;
}

table.two-cols > * > * > td td
{
    width:auto !important;
}

table.two-cols > tbody > tr > td.settings td
{
    padding:20px;
}

table.two-cols > tbody > tr > td.settings td form > *
{
    width:100%;
    margin:0px;
    margin-top:10px;
}

table.two-cols > tbody > tr > td.settings td form:not(#savepreset) > input[type="submit"]
{
    padding-top:10px !important;
    padding-bottom:10px !important;
    text-shadow:1px 1px 1px #000;
    background: rgba(255,255,255,0.2) !important;
}

form#managesettings > table.two-cols > tbody > tr > td:first-child
{
    width:65%;
    padding-right:20px;
}

td.textarea
{
    padding:8px !important;
}

textarea
{
    border:1px solid #444;
    display:inline-block;
    background-color:#222;
    border-radius:2px;
    width:100%;
    box-sizing:border-box;
    resize:vertical;
    min-height:166px;
    color:#fff;
    padding:6px;
    line-height:20px;
}

table.list#raids > * > tr > *.checkbox,
table.list#settings > * > tr > *.checkbox
{
    width:30px !important;
}

table.list#settings > * > tr > *.option
{
    padding-top:8px;
}

/* new export window */

div#exportWindow
{
    display:none;
    z-index:100;
    position:fixed;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    backdrop-filter:blur(2px);
    background-color:rgba(0,0,0,0.5);
}

div#exportWindow > table#exportTable
{
    width:800px;
    border-radius:5px !important;
    margin-top:200px;
    box-shadow:0px 0px 25px rgba(0,0,0,0.3);
}

div#exportWindow > table#exportTable > tbody > tr > td
{
    width:33.3%;
    padding:20px;
    vertical-align:top;
}

div#exportWindow > table#exportTable > tbody > tr > td > span
{
    font-size:18px;
    font-weight:900;
    display:block;
}

div#exportWindow > table#exportTable > tbody > tr > td > span.info
{
    margin-top:10px;
    padding:0px !important;
    height:auto;
}

div#exportWindow > table#exportTable > tbody > tr > td > a
{
    font-size:14px;
    margin-top:10px;
    margin-bottom:10px;
    display:block;
}

div#exportWindow > table#exportTable > tbody > tr > td div.button
{
    width:240px;
    font-size:18px;
    text-align:center;
    margin:0px !important;
}

div#exportWindow > table#exportTable > thead > tr > td
{
    text-align:right;
    font-size:24px;
    padding:0px;
}

div#exportWindow > table#exportTable > thead > tr > td > span#exportClose
{
    cursor:pointer;
}

.infotext
{
    padding:10px;
    color:rgba(255, 92, 92, 1);
    border-radius:5px;
    border:1px solid rgba(255, 92, 92, 0.4) !important;
    margin-bottom:10px;
    font-size:18px;
    line-height:24px;
    background-color:rgba(165, 22, 22, 0.1);
    box-shadow:0px 1px 0px rgba(0,0,0,0.6) !important;
}

.infotext > a > span#accept
{
    padding:4px;
    background-color:#333;
    border-radius:3px;
    font-size:18px;
    cursor:pointer;
    float:right;
    padding-left:10px !important;
    padding-right:10px !important;
    margin-top:-5px !important;
    margin-right:-4px !important;
    border:1px solid;
    margin:0px;
    height:auto !important;
    background-color:rgba(97, 255, 129,0.15) !important;
}