#tavernWrapper{ margin-top: -5px; }
.eb{ border-radius: 50%; }

@media (min-width: 768px){ #page{ width: 100%; } }
@media (min-width: 992px){ #page{ width: 100%; } }
#page{ min-width: 1019px; }

/* dark mode */
html.dark .tavernRow.head > span{ background: #181818; color: #fff; }

.commanderFilter > div { width: 53px; margin: 0; float: left; text-align: center; }
.commanderFilter > div:first-child { line-height: 37px; }
.commanderFilter img{ margin: 0.5em 0 !important; }
#saveProgress{ display: inline-block; position: fixed; top: 17px; left: 11px; right: 11px; z-index: 100; }
html:NOT(.onlycontent) #saveProgress{ top: 77px; }
html:NOT(.dark) #saveProgress > .preloader{ background: #fff !important; }

.tavernRow.head{ font-weight: bold; color: #000;  line-height: 32px; padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid #ccc; }
.tavernRow.head > span{ height: 32px; }
.tavernRow > span{ display: inline-block; text-align: center; border-left: 1px solid #ccc; height: 30px; line-height: 30px; float: left; }
/*.tavernRow > span:first-child{ border-left: none; }*/

.tavernRow:NOT(.head){ border-bottom: 1px solid #ccc; }
.tavernRow:NOT(.head) > span:last-child{ border-right: 1px solid #ccc; }
.tavernRow > span:nth-child(1){ width: 50px; }
.tavernRow > span:nth-child(2){ width: 310px; }
.tavernRow > span:nth-child(4){ width: 90px; }
.tavernRow > span:nth-child(6),
.tavernRow > span:nth-child(7){ width: 100px; }
.tavernRow > span{ width: 80px; }
.tavernRow > span > button{ margin: 0; margin-top: -4px; padding: .4em .6em .32em !important; }
.tavernRow > span.name{ position: relative; text-align: left; padding-left: 5px; color: #000; text-shadow: 0px 0px 5px #ffffff; font-weight: bold; }

.tavernRow > span:nth-child(1) input[type="number"]{ width: 35px; }
.tavernRow input[type="number"]{ width: 30px; text-align: center; margin-top: -5px; }

/* show level info */
.tavIn + span > i{ min-width: 32px; margin-left: 5px; text-shadow: 0px 0px 3px #ffffff;}
.tavIn + span > i.fa-arrow-up{ color: green;  }
.tavIn + span > i.fa-minus{ color: red; font-size: 20px; }

/* gift-type */
.skills{ display: inline-block; background: #000; position: absolute; top: 2px; right: 6px; padding-left: 5px; border-radius: 12px; overflow: hidden; border: 1px solid #f1f1f1; -webkit-box-shadow: 1px 0px 3px 1px #fb9803; box-shadow: 1px 0px 3px 1px #fb9803; }
i[data-skill]{ display: inline-block; float: left; width: 42px; height: 24px; line-height: 24px; padding-left: 26px; color: #fff; background-repeat: no-repeat; }
i[data-skill="1"]{ background-position-y: 1px; }
i[data-skill="2"]{ background-position-y: -30px; }
i[data-skill="3"]{ background-position-y: -59px; }
i[data-skill="4"]{ background-position-y: -89px; }
i[data-skill="5"]{ background-position-y: -119px; }

/* active gift-button */
.ui-state-highlight, .ui-state-highlight:hover{
    border: 1px solid #dad55e;
    color: #000;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fefcea+0,f1da36+100;Gold+3D */
background: rgb(254,252,234); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */

}

/* colors */
#tavernWrapper *[data-color="1"]{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eeeeee+0,cccccc+100;Gren+3D */
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */

}
#tavernWrapper *[data-color="2"]{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b4e391+0,61c419+50,b4e391+100;Green+3D */
background: #b4e391; /* Old browsers */
background: -moz-linear-gradient(top,  #b4e391 0%, #61c419 50%, #b4e391 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #b4e391 0%,#61c419 50%,#b4e391 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #b4e391 0%,#61c419 50%,#b4e391 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=0 ); /* IE6-9 */

}
#tavernWrapper *[data-color="3"]{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b2e1ff+0,66b6fc+100;Blue+3D+%236 */
background: #b2e1ff; /* Old browsers */
background: -moz-linear-gradient(top,  #b2e1ff 0%, #66b6fc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #b2e1ff 0%,#66b6fc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #b2e1ff 0%,#66b6fc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1ff', endColorstr='#66b6fc',GradientType=0 ); /* IE6-9 */

}
#tavernWrapper *[data-color="4"]{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e570e7+0,c85ec7+47,a849a3+100;Pink+3D+%233 */
background: #e570e7; /* Old browsers */
background: -moz-linear-gradient(top,  #e570e7 0%, #c85ec7 47%, #a849a3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 ); /* IE6-9 */

}
#tavernWrapper *[data-color="5"]{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fefcea+0,f1da36+100;Gold+3D */
background: #fefcea; /* Old browsers */
background: -moz-linear-gradient(top,  #fefcea 0%, #f1da36 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #fefcea 0%,#f1da36 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */

}
#tavernWrapper *[data-color="6"]{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#efc5ca+0,d24b5a+50,ba2737+51,f18e99+100;Red+Gloss+%233 */
background: rgb(239,197,202); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(239,197,202,1) 0%, rgba(210,75,90,1) 50%, rgba(186,39,55,1) 51%, rgba(241,142,153,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(239,197,202,1) 0%,rgba(210,75,90,1) 50%,rgba(186,39,55,1) 51%,rgba(241,142,153,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(239,197,202,1) 0%,rgba(210,75,90,1) 50%,rgba(186,39,55,1) 51%,rgba(241,142,153,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efc5ca', endColorstr='#f18e99',GradientType=0 ); /* IE6-9 */
}

#saveCommander{ margin-left: 15px; }