* {
    font-family: "Meiryo";
    font-size: var(--font-size, 11px);
}
body, html {
    margin: 0;
    background-color: transparent;

}
html {
    height: 100%;
}

::-webkit-scrollbar {
    width: 0;
}

/* Table */

table {
    table-layout: fixed;
    width:100%;
    border-collapse: collapse;
}

td, th {
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    padding: 0.2em 0;
    text-align:center;
}

input, button {
    /* Blueish */
    color:#E2EBF5;
    text-shadow: -1px 0 3px #217AA2, 0 1px 3px #217AA2, 1px 0 3px #217AA2, 0 -1px 3px #217AA2;
    font-weight: 300;
    background: rgba(0,0,0,0.4);
    padding: 0 0.2em;
}

h1 {
    font-size: 2em;
    margin: 0 0 0.5em;
}

a,
a:hover,
a:active {
    color:inherit;

    text-decoration: none;
}

/* Glyphicon */

.glyphicon,
.glyphicon:hover,
.glyphicon:active {
    /* Goldish */
    color:#DED7BE;
    text-shadow: -1px 0 2px #795516, 0 1px 2px #795516, 1px 0 2px #795516, 0 -1px 2px #795516;
    font-weight: 300;
    font-size:1.3em;
}

.glyphicon.disabled {
    color:#AAA;
    text-shadow:none;
}

.glyphicon.remove {
    color: #DEBEBE;
    text-shadow: 0 0 2px #791616, 0 0 5px #791616, 0 0 10px #791616, 0 0 15px #791616;
}

.glyphicon.checkbox {
    font-size: 1em;
}

/* Menu */

.menu {
    float:right;
    margin-left:-100%;
}

body:not(.resizable) .menu-item {
	display: none;
}

/* fieldselect */

.field {
    border:1px solid #DED7BE;
    min-width: 3em;
    padding: 0.1em 0.3em;
    margin: 0.1em 0.3em;
    text-align: center;
}

.fieldselect {}

.fieldselect .selected {}

.fieldselect .fields {
    display:none;
    flex-wrap:wrap;
    z-index:100;
}

.fieldselect.expanded .fields {
    display:flex;
    position:absolute;
    background: rgba(0,0,0,0.4);
    padding: 10px;
    border-radius: 10px;
    width: 97%;
    left:1.5%;
}

.fieldselect .fields .field {
    flex: 1 1 auto;
    background: rgba(0,0,0,0.4);
    padding: 0.2em 0.3em;
    margin:0;
    /* Goldish */
    color:#DED7BE;
    text-shadow: -1px 0 2px #795516, 0 1px 2px #795516, 1px 0 2px #795516, 0 -1px 2px #795516;
    font-weight: 300;
}

/* Main */

#container {
    background: rgba(0,0,0,0.4);
    padding: 10px;
    border-radius: 10px;

    overflow: hidden;

    /* Blueish */
    color:#E2EBF5;
    text-shadow: -1px 0 3px #217AA2, 0 1px 3px #217AA2, 1px 0 3px #217AA2, 0 -1px 3px #217AA2;
    font-weight: 300;
}

.expandFromBottom {
    position: absolute;
    bottom: 0;
    width:100%;
}

.resizable {
    background-image: url(../images/handle.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    box-sizing: border-box;
}

/* dpsmeter */

.encounter {}

.encounter .encounter-duration {
    float: left;
    margin-right:-100%;
    padding-top: 3px;
}

.encounter .encounter-encdps {
    text-align:center;
    /* Greenish */
    color: #BEDEC5;
    text-shadow: -1px 0 2px #167930, 0 1px 2px #167930, 1px 0 2px #167930, 0 -1px 2px #167930;
    font-weight: 300;

    font-size:1.3em;
}

.encounter.active .encounter-encdps {
    /* Redish */
    color: #DEBEBE;
    text-shadow: 0 0 2px #791616, 0 0 5px #791616, 0 0 10px #791616, 0 0 15px #791616;
    font-weight: 300;
}

/* combatants */

.combatants  {
    text-align: center;
}

.tableheader {
    border-bottom: 1px solid #DED7BE;
    /* Goldish */
    color:#DED7BE;
    text-shadow: -1px 0 2px #795516, 0 1px 2px #795516, 1px 0 2px #795516, 0 -1px 2px #795516;
    font-weight: 300;
}

.header {
    width:2em;
}
.header.name {
    width:6em;
}

/* combatant */

.combatant {
    line-height: var(--line-height, 1.5rem);
}

.combatant td.job {
    background-size: auto 100%;
    background-repeat: no-repeat;
    padding-left: 2em;
}

/* config */

.config {}

.presets-collection {}

.preset-line {
    display:flex;
}

.controls {
    flex: 0 0 auto;
}

.delete {}

.preview {}

.clone {}

.edit {}

.preset {
    flex: 1 0 auto;
}

.preset.field.selected {
    font-weight: 800;
}
.preset.field.selected:before {
    content:'->';
}
.preset.field.selected:after {
    content:'<-';
}

.add {}

.preset-name {
    display:flex;
}

preset-config {}

.preset-col {
    display: flex;
}

.preset-col-index {}

sorter {}

.sorter-up {}

.sorter-down {}

fieldselect {
    flex: 1 0 30%;
}

.preset-col-label {
    flex: 1 1 auto;
}

.preset-col-template {}


/* Jobs */

tr.combatant,
tr.Error,
tr.Crp,
tr.Bsm,
tr.Arm,
tr.Gsm,
tr.Ltw,
tr.Wvr,
tr.Alc,
tr.Cul,
tr.Min,
tr.Btn,
tr.Fsh {
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.5, rgba(255,255,255,0.5)), color-stop(1, rgba(0,0,0,0.5)));
    background-repeat: no-repeat, repeat;
    background-blend-mode: soft-light;
	transition: background-size 1s ease-out;
}


tr.Gla,
tr.Pld,
tr.Mrd,
tr.War,
tr.Drk,
tr.Gnb {
    /*background-color: rgba(41,112,243,0.2);*/
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0, rgba(41,112,243,0.5)), color-stop(1, rgba(20,56,121,0.5)));
    background-repeat: no-repeat, repeat;
    background-blend-mode: soft-light;
}

tr.Cnj,
tr.Whm,
tr.Sch,
tr.Ast,
tr.Sge {
    /*background-color: rgba(107,240,86,0.2);*/
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0, rgba(107,240,86,0.5)), color-stop(1, rgba(53,120,43,0.5)));
    background-repeat: no-repeat, repeat;
    background-blend-mode: soft-light;
}

tr.Pgl,
tr.Mnk,
tr.Lnc,
tr.Drg,
tr.Rog,
tr.Nin,
tr.Sam,
tr.Rpr,
tr.Arc,
tr.Brd,
tr.Mch,
tr.Dnc,
tr.Thm,
tr.Blm,
tr.Acn,
tr.Smn,
tr.Rdm,
tr.Blu {
    /*background-color: rgba(200,3,8,0.2);*/
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.5, rgba(200,0,0,0.5)), color-stop(1, rgba(100,0,0,0.5)));
    background-repeat: no-repeat, repeat;
    background-blend-mode: soft-light;
}

tr.Limit.Break {
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.5, rgba(128,0,255,0.3)), color-stop(1, rgba(64,0,128,0.3)));
    background-repeat: no-repeat, repeat;
    background-blend-mode: soft-light;
}

tr.Choco {
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.5, rgba(245, 240, 0, 0.3)), color-stop(1, rgba(122, 120, 0, 0.3)));
    background-repeat: no-repeat, repeat;
    background-blend-mode: soft-light;
}


tr.Titan,
tr.Eos,
tr.Selene,
tr.Carbuncle,
tr.Garuda,
tr.Ifrit {
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.5, rgba(153, 0, 245,0.3)),color-stop(1, rgba(76, 0, 122,0.3)));
    background-repeat: no-repeat, repeat;
    background-blend-mode: soft-light;
}


tr.Rdps {
    /*background-color: rgba(107,240,86,0.2);*/
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.5, rgba(220, 0, 6, 0.5)), color-stop(1, rgba(0, 0, 0, 0.5))) !important;
    background-repeat: no-repeat, repeat !important;
    background-blend-mode: soft-light !important;
}

tr.Rdps.Gla,
tr.Rdps.Pld,
tr.Rdps.Mrd,
tr.Rdps.War,
tr.Rdps.Drk,
tr.Rdps.Gnb {
    /*background-color: rgba(107,240,86,0.2);*/
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.5, rgba(220, 0, 6, 0.5)), color-stop(1, rgba(20,56,121,0.5))) !important;
    background-repeat: no-repeat, repeat !important;
    background-blend-mode: soft-light !important;
}


tr.Rdps.Cnj,
tr.Rdps.Whm,
tr.Rdps.Sch,
tr.Rdps.Ast,
tr.Rdps.Sge {
    /*background-color: rgba(107,240,86,0.2);*/
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.5, rgba(220, 0, 6, 0.5)), color-stop(1, rgba(53,120,43,0.5))) !important;
    background-repeat: no-repeat, repeat !important;
    background-blend-mode: soft-light !important;
}


tr.Fdps {
    /*background-color: rgba(107,240,86,0.2);*/
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.5, rgba(100, 0, 0, 0.5)), color-stop(1, rgba(0, 0, 0, 0.5))) !important;
    background-repeat: no-repeat, repeat !important;
    background-blend-mode: soft-light !important;
}