body {
    font-family: Tahoma,Verdana,Arial,Helvetica;
    padding: 10px;
    margin: 0;
    background-color: #000;
    font-size: 8pt;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
}

.main-page {
    background-color: #94c9ef;
}

.disabled,
button:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

button,
input,
textarea,
select {
    font-family: Tahoma,Verdana,Arial,Helvetica;
    font-size: 8pt;
}

textarea {
    resize: vertical;
}

#ulImportSnapshots input,
#dlgBodies td input,
#dlgEditItem input[type="text"], #dlgEditItem textarea, #dlgEditItem select,
#dlgUploadFileEx input[type=text], #dlgUploadFileEx textarea, #dlgUploadFileEx select,
#dlgNewRuleset input,
#dlgRenameRuleset input,
#dlgPickImageUrl input,
#txtStripperConfigRequiredTags {
    width: 100%;
    box-sizing: border-box;
}

.fill-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.fill-row input[type="text"] {
    flex: 1;
    min-width: 0;
}

.ui-tabs {
    border: none !important;
}

.ui-tabs .ui-tabs-panel {
    padding: 10px;
}

.ui-tabs .ui-tabs-nav {
    margin: -12px -12px 0;
}

a {
    cursor: pointer !important;
}

p {
    line-height: 1.4;
}

[title] {
    text-decoration: underline dotted;
}

td {
    font-size:8pt;
    font-weight:500;
    color: #000;
    vertical-align: top;
}

:not(td).align-middle {
    display: inline-block;
    vertical-align: middle;
}

td.align-middle {
    vertical-align: middle !important;
}

td.left {
    border-left:1px solid #277bd2;
    border-bottom:1px solid #277bd2;
    background-color: #fff;
}

td.middle {
    border-bottom:1px solid #277bd2;
    padding-bottom: 16px;
    background-color: #fff;
}

td.right {
    border-right:1px solid #277bd2;
    border-bottom:1px solid #277bd2;
    background-color: #fff;
}

td.spacer {
    width:8px;
}

td.spacersml {
    width:2px;
}

.ui-widget-content {
    background: #fff;
}

.ui-accordion-content {
    padding: 10px !important;
}

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

.pell-button {
    height: 16px;
    width: 16px;
    padding: 0;
    margin-right: 1px;
    color: #2879aa;
    background-color: #d7ebf9;
    border: none;
    text-decoration: none;
    cursor: pointer;
}

.pell-button:first-child {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;    
}

.pell-button:last-child {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.pell-button:hover,
.pell-button.pell-button-selected {
    color: #fff;
    background-color: #77c3eb;
}

.pell-button svg {
    width: 10px;
    height: 10px;
    fill: #2879aa;
}

.pell-content {
    position: relative;
    flex: 1;
    min-height: 40px;
    padding: 4px;
    margin-top: 1px;
    background-color: #d7ebf9;
    border: 1px solid #a1c8e2;
    border-radius: 2px;
    box-sizing: border-box;
    overflow-y: auto;
    resize: vertical;
}

.pell-content.disabled::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.pell-content a {
    color: #3583b9;
}

.pell-content hr {
    background-color: #3583b9;
}

.pell-content ul {
    margin: 0;
}

.pell-container {
    display: flex;
    flex-direction: column;
}

td.tags {
    vertical-align:top;
    width:15%;
}

td.tagsbar {
    font-size:10pt;
    color: #3583b9;
    border: 1px dotted #3583b9;
}

.tagsbarinner {
    font-size: 10pt;
    color: #2879aa;
    vertical-align: middle;
}

.tagsrecent {
    color: #3583b9 !important;
}

td.searchbar {
    font-size:10pt;
    color: #3583b9;
}

td.item {
    font-size:8pt;
    border: 1px dotted #8ab7e7;
    width:200px;
}

td.item_noborder {
    width:200px;
}

td.form {
    vertical-align:bottom;
}

h1 {
    font-size:14pt;
    font-weight:500;
    color: #fff;
}

h2 {
    font-size:10pt;
    font-weight:bold;
    color: #000;
}

h3 {
    margin: 20px 0 5px;
    font-size: 10pt;
    font-weight: bold;
}

h4 {
    margin: 20px 0 5px;
}

h4:first-child {
    margin-top: 0;
}

td.caption {
    font-size:10pt;
    font-weight:bold;
    color: #000;
}

.tags,
.brand,
.remarks,
.subfolders,
.date {
    font-size: 8pt;
}

.tags a {
    color: #3583b9 !important;
}

ol {
    padding-left: 1em;
}

ol > li {
    margin: 5px 0;
}

.tags {
    margin-left: 1px;
    margin-top: 4px;
}

.remarks,
.brand,
.subfolders {
    color: #000;
    margin-left: 1px;
    margin-top: 4px;
    overflow: hidden;
}

.brand + .brand {
    margin-top: 0;
}

.brand img {
    width: 12px !important;
    height: 12px !important;
    min-width: 0 !important;
    margin-right: 0 !important;
}

.subfolders svg {
    width: 10px;
    height: 10px;
}

.brandname {
    font-weight: bold;
}

.date {
    color: #888;
}

.date table td {
    color: currentColor;
    padding: 0;
}

hr {
    color: #d7ebf9;
    background-color: #d7ebf9;
    height: 1px;
    margin: 0;
    border: 0;
}

a {
    color: #3583b9;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a.navig {
    color: #556;
    text-decoration: none;
}

a.navig:hover {
    color: #3583b9;
    text-decoration: underline;
}

a.is-selected {
    color: #ff3366 !important;
    font-weight: bold;
}

a.button {
    padding: 4px;
    color: #3e6997;
    background-color: #e2edf9;
    border: 1px solid #3e6997;
    vertical-align: middle;
}

a.button:hover {
    color: #ffffff;
    background-color: #92adcb;
}

img {
    border:0px solid #000;
}

input[type=text],
input[type=password],
input[type=url],
textarea {
    width: 300px;
    height: 26px;
    font-size: 8pt;
    box-sizing: border-box;
}

.ui-dialog input[type=text],
.ui-dialog input[type=url],
.ui-dialog input[type=number] {
    font-size: 9pt;
}

form {
    padding: 0;
    margin: 0;
}

table.button {
    padding: 2px;
    color: #3e6997;
    background-color: #e2edf9;
    border: 1px outset #3e6997;
    vertical-align: middle;
}

table.button_selected {
    padding: 2px;
    color: #92adcb;
    background-color: #92adcb;
    border: 1px inset #3e6997;
    vertical-align: middle;
}

table.button_selected tbody tr td a {
    color: #fff;
}

td.button {
    vertical-align: middle;
    color: #fff;
}

div.autocomplete {
    margin: 0;
    padding: 0;
    width: 250px;
    background: #fff;
    border: 1px solid #888;
    position: absolute;
}

div.autocomplete ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

div.autocomplete ul li.selected {
  background-color:#ffb;
}

div.autocomplete ul li {
    margin:0;
    padding:2px;
    height:32px;
    display:block;
    list-style-type:none;
    cursor:pointer;
}

td.pmoverview {
    width: 240px;
    border: 1px solid #3583b9;
    font-size: 10pt;
    border-radius: 10px;
}

span.filter {
    position: relative;
    padding: 0;
    float: right;
}

span.filter input {
    width: 200px;
    height: 18px;
    padding: 4px 20px 4px 4px;
    margin: 2px 0 0;
    border: none;
    border-radius: 2px;
    box-sizing: content-box;
}

#filter-items input {
    width: 180px;
    padding-right: 40px;
}

span.filter a {
    position: absolute;
    right: 4px;
    top: 8px;
    width: 12px;
    height: 12px;
    background-image: url(../imgs/looking_glass-blue.png);
    background-size: contain;
}

#filter-items .apply-filter {
    right: 24px;
}

span.filter.has-content a {
    background-image: url(../imgs/remove.png);
}

span.filter.is-loading a {
    background-image: url(../imgs/loading.gif);
}

#daterange-picker {
    right: 6px;
    background-image: url(../imgs/clock.png);
}

.hidden {
    position:absolute;
    top:0;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}

#divFavTags {
    line-height: 2;
    padding-top: 3px;
}

#divFavTags > div {
    display: inline-block;
}

#divFavTags span.tag a svg {
    vertical-align: text-top;
}

#divFavTags .tagsbarinner {
    line-height: 1;
}

#ulItems li.ui-selecting,
#ulItems li.ui-selected,
.itemlist li.ui-selecting,
.itemlist li.ui-selected {
    background-color: #cde5f0;
}

.itemimage > div {
    display: flex;
    margin-top: 2px;
}

.itemimage .img {
    width: 200px;
    height: 200px;
    margin: 0 1px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.itemimage .img[data-image-index] {
    width: 65px;
    height: 65px;
}

#ulItems li.ui-selecting a.itemimage .img,
#ulItems li.ui-selected a.itemimage .img,
.itemlist li.ui-selecting a.itemimage .img,
.itemlist li.ui-selected a.itemimage .img {
    border: 1px solid transparent;
    opacity: 0.5;
}

#ulItems a.itemimage img.ui-selecting,
#ulItems a.itemimage img.ui-selected,
.itemlist a.itemimage img.ui-selecting,
.itemlist a.itemimage img.ui-selected {
    border: 1px solid transparent;
}

#ulItems li.ui-selecting .itemtitle,
#ulItems li.ui-selected .itemtitle,
.itemlist li.ui-selecting .itemtitle,
.itemlist li.ui-selected .itemtitle {
    color: #fff;
}

ul.items,
#ulBaseOutfits,
#ulLinkSelectedItems {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.baseoutfit2 {
    position: relative;
    float: left;
    width: 100px;
    height: 24px;
    margin-top: 2px;
    margin-right: 2px;
    background-color: #fff;
    border-radius: 2px;
    overflow: hidden;
}

.baseoutfit2 .put-on-base-outfit {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0 !important;
    text-decoration: none;
}

.baseoutfit2 .put-on-base-outfit img {
    width: 24px;
    height: 24px;
    border-radius: 2px;
}

.baseoutfit2 .put-on-base-outfit span {
    overflow: hidden;
    max-height: 24px;
    margin-left: 2px;
    font-size: 10px;
    font-weight: normal;
}

.baseoutfit2 .take-off-base-outfit {
    position: absolute;
    display: none;
    right: 2px;
    top: 0;
}

#ulBaseOutfits:not(.is-editing) .baseoutfit2:hover .take-off-base-outfit {
    display: block;
}

.baseoutfit2 .remove-base-outfit {
    position: absolute;
    display: none;
    right: 1px;
    top: 1px;
    margin: 0 !important;
}

#ulBaseOutfits.is-editing .baseoutfit2 .remove-base-outfit,
#dlgCreateLink .baseoutfit2 .remove-base-outfit {
    display: block;
}

.baseoutfit2 > :not(.put-on-base-outfit) img {
    width: 12px;
    height: 12px;
}

#ulItems,
.itemlist {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#ulItems {
    margin: 0;
    padding: 1px;    
}

.itemlist {
    padding: 0;
    margin: 0 -1px;
}

li.item {
    position: relative;
    width: 202px;
    margin: 1px;
    padding: 1px;
    border-radius: 2px;
    overflow: hidden;
}

li.item .itemimage img {
    width: 100%;
}

.itemicons,
.ranking {
    text-align: right;
    z-index: 2;
}

.ranking svg {
    width: 11px;
    height: 11px;
    margin-right: 1px;
    fill: #ffc107;
}

.itemicons:empty + .ranking {
    top: 2px;
}

.itemicons a.icon svg,
#tableLinks .actions svg {
    width: 14px;
    height: 14px;
    padding: 1px;
}

.itemtitle {
    /*overflow-y: visible;*/
    font-weight: bold;
    font-size: 12px;
    z-index: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    line-height: 1.2;
}

.itemlist .itemtitle {
    cursor: context-menu;    
}

.itemtitle svg {
    width: 12px;
    height: 12px;
    margin-right: 3px;
}

.outfit .itemtitle {
    color: #3583b9;
}

.outfit.is-current .itemtitle {
    color: #ff3366;
}

.outfit .itemtitle svg {
    fill: #3583b9;
}

.outfit.is-current .itemtitle svg {
    fill: #ff3366;
}

div.itemheading {
    position: relative;
    height: 50px;
}

div.itemiconswrapper {
    float: right;
}

.no-item-controls .itemheading {
    height: 30px;
}

/*
.no-item-controls .itemtitle {
    width: 100%;
}*/

.no-item-controls .itemimage {
    margin-top: 35px;
}

li.gift {
    width: 202px;
    height: 300px;
    padding: 1px;
    margin: 3px;
    float: left;
    background-color: rgba(255, 255, 255, 0.5) !important;
    background-image: none !important;
}

.giftitemtitle {
    width: 190px;
    height: 2.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    font-size:10pt;
    font-weight:bold;
    margin-bottom: 5px;
}

ul li a,
.item a {
    color: #3583b9;
}

a.blue,
#dlgAlert a {
    color: #3583b9 !important;
}

div.partright {
    position: absolute;
    left: -30px;
    text-align: right;
    width: 100px;
}
div.partright2 {
    position: absolute;
    left: -30px;
    text-align: left;
    width: 100px;
}
div.partcenter {
    position: absolute;
    left: 75px;
    text-align: center;
    width: 100px;
}
div.partcenter2 {
    position: absolute;
    left: 75px;
    text-align: left;
    width: 100px;
}
div.partleft {
    position: absolute;
    left: 180px;
    text-align: left;
    width: 100px;
}
div.partclothing {
    position: absolute;
    left: 300px;
    text-align: left;
    width: 200px;
}
div.parthuds {
    position: absolute;
    left: 420px;
    text-align: left;
    width: 100px;
}

#tableLinks tbody tr td,
#tableLinks tr td,
#tableClothingTypeToTagMapping td,
#dlgPreferences table td {
    vertical-align: middle;
}

#tableLinks td {
    padding: 0 5px;
}

#tableLinks tbody tr:nth-child(6n+4),
#tableLinks tbody tr:nth-child(6n+5),
#tableLinks tbody tr:nth-child(6n+6) {
    background-color: #f7f7f7;
}

#tableLinks.scrollable-table thead th:first-child {
    border-bottom: 1px solid #ddd;
}

.permissions td:first-child,
.permissions td:nth-child(2) {
    text-align: left;
}

.linkurl td,
.customboardkey td {
    font-size: 7pt !important;
    color: #888;
    text-align: left !important;
}

.linkurl svg,
.customboardkey svg {
    fill: #888 !important;
}

.customboardkey {
    border-bottom: 1px solid #ccc;
    padding-bottom: 3px;
}

td.expired {
    color: #c00;
    text-align: left !important;
    font-size: 7pt !important;
}

#tableLinks svg {
    width: 12px;
    height: 12px;
    fill: #206594;
}

li.baseoutfit {
    width: 102px;
    margin: 2px 1px 0 0;
    padding: 0;
    float: left;
}

li.wornoutfit {
    margin-left: 0;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 0;
}

div.unknownworn {
    width: 160px;
    height: 160px;
    min-width: 160px;
    margin-right: 5px;
    font-size: 48px;
    color: #c2e4f2;
    background-color: #c2e4f230;
    text-align: center;
    line-height: 160px;
}

div.unknowninv {
    width: 200px;
    height: 200px;
    font-size: 80px;
    color: #fff;
    background-color: #d7ebf9;
    text-align: center;
    line-height: 190px;
}

table.baseoutfit {
    background: #fff !important;
    width: 100px;
    border: 1px solid #ccc;
}

table.baseoutfit td:first-child {
    padding: 1px;
}

table.baseoutfit td:nth-child(2) {
    width: 60px;
}

table.wornoutfit {
    background: #fff !important;
    width: 100%;
    border: 1px solid #ccc;
}

table.wornoutfit td {
    width:102px;
    padding:1px;
}

div.baseoutfititemtitle {
    width: 60px;
    height: 28px;
    overflow: hidden;
    color: #000;
}

#divHeader {
    overflow: hidden;
    color: #fff;
    text-align: center;
    vertical-align: bottom;
    font-size: 12pt;
    text-shadow: #000 1px 1px 3px;
}

#divHeader .actions {
    position: fixed;
    right: 8px;
    top: 8px;
}

#divHeader .actions svg {
    width: 16px;
    height: 16px;
    margin-left: 5px;
    fill: #206594;
}

#divHeader .actions .textual {
    display: inline-block;
    font-size: 11px;
    color: #1f6694;
    font-family: 'Arial Narrow', sans-serif;
    line-height: 17px;
    height: 24px;
    margin-top: 0;
    vertical-align: middle;
    text-decoration: none;
    margin-left: 2px;
}

a.treetag {
    color: #000 !important;
    padding: 0 0 0 0;
}

#tabsTags {
    padding: 2px 2px 2px 2px;
    background: none;
    border-width: 0;
}

#tabsTags .ui-tabs-nav {
    padding-left: 0;
    background: transparent;
    border-width: 0 0 1px 0;
    border-radius: 0;
}

#tabsTags .ui-tabs-panel {
    border-width: 0 1px 1px 1px;
    padding: 0;
}

.rlvproblemsok {
    list-style-image: url(../imgs/success.png);
}
.rlvproblemswarn {
    padding-left: 20px;
    margin-top: 0;
    list-style-image: url(../imgs/warning.png);
}

#ulRLVProblems li {
    margin-bottom: 8px;
}

.invbrowser {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 2px;
}

.invworn {
    font-weight: bold;
}

.vsplitbar {
    width: 5px;
    background: #cab;
}

.ui-progressbar .ui-progressbar-value {
    background-image: url(../imgs/pbar-ani.gif);
}

#divMain {
    position: absolute;
    width: 100vw;
    height: calc(100vh - 30px);
    top: 30px;
}

#divTagsContainer,
#divBrandsContainer {
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 2px;
}

#divTags,
#divBrands,
.tagslist {
    flex: 1;
    margin-top: 5px;
    padding-left: 5px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#divItemsContainer {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: none;
    border-radius: 2px;
}

#divItemsContainer > div.bar,
#divTagsContainer > div.bar {
    padding: 0 2px 2px 2px;
    margin: 2px 0 0;
    box-sizing: border-box;
}

#divItemsContainer > div.bar:first-child,
#divTagsContainer > div.bar:first-child {
    margin-top: 0;
}

#divItemsContainer > div.bar button,
#divItemsContainer > div.bar label,
#divItemsContainer > div.bar a,
#divTagsContainer > div.bar button,
#divTagsContainer > div.bar label,
#divTagsContainer > div.bar a {
    margin-top: 2px;
}

#divItemsContainer .toolbar {
    padding-bottom: 0 !important;
}

#divArchivesBar {
    padding-right: 1px !important;
}

.toolbar {
    vertical-align: top;
}

button {
    margin-left: 0;
}

#ulImportSnapshotsThumbnails img {
    width: 160px;
}

#ulImportSnapshotsThumbnails li {
    width: 160px;
    height: 160px;
}

.unassigned-snapshot {
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    background-color: rgba(128,128,128,0.2);
}

#imgRequest-0, #imgRequest-1, #imgRequest-2, #imgRequest-3, #imgRequest-4 {
    visibility: hidden;
}

#divContent {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.ui-dialog {
    box-shadow: 0 0 30px #444;
}

@media screen and (max-width: 512px) {
    .no-small {
        display: none !important;
    }

    body, td {
        font-size: 7pt;
    }

    .bar .ui-button-text {
        padding: .4em !important;
        font-weight: bold;
        font-size: 7pt;
    }

    .bar .ui-button-text-icon-primary .ui-button-text {
        padding-left: 1.8em !important;
    }

    .bar .ui-button-text-icon-primary .ui-button-icon-primary, .bar .ui-button-text-icons .ui-button-icon-primary, .bar .ui-button-icons-only .ui-button-icon-primary {
        left: 0;
    }

    #divHeader {
        top: 0 !important;
        height: 20px !important;
        line-height: 20px;
        font-size: 9pt;
    }

    #divTagsContainer .filter {
        float: right;
        padding: 1px 0;
    }

    #divTagsContainer .filter input {
        width: 32px !important;
        height: 13px;
        font-size: 7pt;
    }

    #divTagsContainer .filter a,
    #filter-items a {
        right: 4px;
        margin-top: -1px !important;
    }

    #filter-items input {
        width: 70px !important;
        height: 13px;
        margin: 1px 0 0;
        padding-right: 20px;
        font-size: 7pt;        
    }

    #filter-items .apply-filter {
        right: 4px;
        margin-top: -2px !important;
    }

    #divTags,
    .tagslist {
        font-size: 7pt !important;
    }

    .tags-container > div a:not(:first-child) {
        display: none;
    }

    #spanSelectedTags .tag {
        font-size: 7pt;
        font-weight: normal;
        padding: 2px;
    }

    #spanSelectedTags .tag img {
        width: 8px;
        height: 8px;
    }

    #tdBaseOutfits {
        display: none !important;
    }

    .itemlist {
        padding: 2px;
    }

    li.item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 112px;
        min-height: 124px !important;
        margin: 0 1px 1px 0;
        padding: 1px;
        overflow: hidden;
    }

    .itemheading {
        height: auto !important;
    }

    .itemtitle {
        font-size: 7pt !important;
    }

    .itemicons .icon-wear-ex, .itemicons .icon-access {
        display: none;
    }

    .itemicons img {
        width: 12px !important;
        height: 12px !important;
    }

    .item .ranking, .item .tags, .item .remarks, .item .subfolders, .item .date, .item .brand {
        display: none;
    }

    .itemimage {
        margin-top: 26px !important;
    }

    .itemimage .img {
        width: 110px;
        height: 110px;
    }

    .itemimage .img[data-image-index] {
        width: 35px;
        height: 35px;
    }

    .ui-dialog-titlebar-close {
        right: 3px !important;
        top: 13px !important;
        width: 14px !important;
        height: 14px !important;
    }


    /* undress dialog */

    [aria-describedby="dlgUndress"] {
        width: 390px !important;
    }

    .undress-attachment-points {
        top: 160px !important;
        zoom: 60%;
        font-size: 15px;
    }

    #dlgUndress {
        height: 400px !important;
    }


    /* edit dialog */

    [aria-describedby="dlgEditItem"] {
        width: 480px !important;
    }

    #dlgEditItem {
        font-size: 8pt;
        height: 400px !important;
        padding: 0 !important;
    }

    #dlgEditItem h2 {
        display: none;
    }

    #dlgEditItem table {
        border-spacing: 6px !important;
    }

    #dlgEditItem td {
        font-size: 8pt;
    }

    #dlgEditItem td.label {
        width: 70px;
    }

    #dlgEditItem input[type="text"], #dlgEditItem textarea {
        font-size: 8pt;
    }

    #divArchivesBar {
        display: none !important;
    }

    button.button,
    a.button {
        height: 22px !important;
        font-size: 11px !important;
    }

    button.button svg, a.button svg {
        width: 14px !important;
        height: 14px !important;
    }

    .itemicons a.icon svg {
        width: 10px;
        height: 10px;
        padding: 0 1px 0 0;
    }

    #title-current-body {
        font-size: 10px !important;
    }
}

#divHeader {
    position: absolute;
    left: 0;
    top: 5px;
    width: 100%;
    height: 20px;
    text-shadow: none;
    color: #206594;
    font-weight: bold;
}

.ui-button {
    font-size: 9pt !important;
    font-weight: normal !important;
}

.ui-dialog-titlebar {
    background-color: #3583b9 !important;
    background-image: none !important;
    border: none !important;
    color: #FFF !important;
}

.ui-dialog .ui-dialog-buttonpane {
    display: flex;
    align-items: center;
    width: 100%;
    padding-left: 1em;
    box-sizing: border-box;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset:only-child {
    flex: 1;
    text-align: right;
}

#tdBaseOutfits table {
    border: none !important;
}

#tdBaseOutfits #ulBaseOutfits.is-editing table {
    border-top-right-radius: 10px;
}

#tdBaseOutfits.ui-state-highlight .baseoutfit:hover {
    margin-right: 100px;
}

span.tag {
    position: relative;
    color: #fff;
    background-color: #3583b9;
    border: none;
    padding: 3px;
    border-radius: 3px;
    font-weight: bold;
    white-space: nowrap;
}

span.tag.missing {
    background-color: #f44336;
}

span.tag svg {
    display: inline-block;
    margin-right: 1px;
    vertical-align: bottom;
}

.category {
    position: relative;
    background-color: #9acef5;
    border: none;
    padding: 3px;
    border-radius: 3px;
    margin-right: 3px;
    cursor: pointer;
}

.category a {
    font-weight: bold;
    color: #fff !important;
}

.category a svg {
    vertical-align: text-top;
}

.category-tag-presence,
.category-tag-mode {
    cursor: pointer;
}

.selected.category {
    background-color: #3583b9;
}

span.tag a {
    color: #fff;
}

a[data-tag] {
    display: inline-block;
    color: #fff;
    background-color: #3583b9;
    border: none;
    padding: 3px;
    margin: 2px 2px 0 0;
    border-radius: 3px;
    font-size: 10px;
    white-space: nowrap;
}

#dlgImportSnapshots a[data-tag] {
    padding: 2px;
    font-size: 8px;
}

#spanSelectedTags {
    display: block;
    max-height: 64px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    line-height: 1.1;
}

#spanSelectedTags .tag {
    display: inline-block;
    margin: 1px 3px 1px 0;
    line-height: 1.2;
}

/*depr*/
.menu {
    display: none;
    position: absolute;
    background-color: #fff;
    padding: 0 0 3px 2px;
    z-index:9999;
}

/*depr*/
.menu button {
    text-align: left;
}

.tagsrecent {
    font-weight: normal;
}

div[id^=dlg] input[type=text],
div[id^=dlg] input[type=search],
div[id^=dlg] input[type=password],
div[id^=dlg] input[type=number],
div[id^=dlg] input[type=url],
div[id^=dlg] textarea,
div[id^=dlg] select {
    padding: 4px;
    border: 1px solid #A1C8E3;
    background-color: #D7EBF9;
    border-radius: 2px;
}

#divImportSnapshotsList, #divImportSnapshotsUploading {
    position: absolute;
    left: 8px;
    top: 8px;
    right: 8px;
    bottom: 222px;
    overflow: auto;
    padding: 4px;
}

#divImportSnapshotsImages {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    height: 200px;
    overflow: auto;
    text-align: center;
    padding: 4px;
}

#ulImportSnapshotsThumbnails {
    text-align: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#ulImportSnapshotsThumbnails li {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 2px;
    padding: 0;
    float: left;
}

#ulImportSnapshots {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#ulImportSnapshots label {
    font-size: 90%;
    font-weight: bold;
    margin-top: 3px;
}

#ulImportSnapshots .snapshot {
    width: 200px;
    height: 200px;
    border: 1px solid #eee;
}

.delete-snapshot svg {
    width: 16px;
    height: 16px;
}

.drop-files {
    position: absolute;
    left: 0;
    width: 100%;
    color: #aaa;
    z-index: 0;
    margin-top: 40px;
    padding: 0 100px;
    box-sizing: border-box;
}

.drop-files h1 {
    color: #aaa;
}

#divImportSnapshotsProgress {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 100%;
    box-sizing: border-box;
}

.overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #ddd;
    opacity: 0.85;
}

.progress-info {
    position: relative;
    width: 75%;
    margin-left: 12%;
    margin-top: 16px;
}

#divImportShapshotsUploadingProgressBar, #divImportSnapshotsProgressBar {
    margin-top: 80px;
    z-index: 1;
}

.add-snapshot {
    position: relative;
    width: 202px;
    height: 312px;
    margin: 3px;
    padding: 1px;
    float: left;
}

#btnAddSnapshot {
    position: absolute;
    bottom: 0;
}

.ui-dialog .ui-dialog-content {
    padding: 1em !important;
}

.ui-dialog-content h2 {
    margin: 0;
}

.ui-dialog-content td {
    font-size: 9pt;
}

.ui-dialog-content td:not(.label) {
    padding: 3px 0;
}

.ui-dialog-content select {
    width: 310px;
}

.ui-dialog-content textarea + small,
.ui-dialog-content input[type=text] + small,
.ui-dialog-content input[type=password] + small,
.ui-dialog-content input[type=number] + small {
    display: block;
}

[type=text]:disabled,
[type=url]:disabled,
[type=number]:disabled,
[type=password]:disabled,
textarea:disabled,
select:disabled,
.pell-content.disabled {
    background-color: #ddd !important;
    border: 1px solid #bbb !important;
    opacity: 1;
}

input[type=number] {
    height: 26px;
    box-sizing: border-box;
}

td.label {
    width: 130px;
    padding-top: 8px;
    font-weight: bold;
    text-align: right;
}

td.label.top {
    padding-top: 0;
}

#trEditWearingLayersToRemove .label.top {
    padding-top: 3px !important;
}

td span.label {
    padding-top: 0.5em;
}

#tabClosetStyle img {
    width: 120px;
    height: 138px;
}

#tabsPosestandBackdrop {
    height: 85%;
}

#tabPosestandColor .colors {
    margin-top: 40px;
    text-align: center;
}

#tabPosestandColor .colors > div {
    display: inline-block;
    position: relative;
    width: 100px;
    height: 100px;
    margin: 20px;
}

#tabPosestandColor .colors .clr-field {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    cursor: pointer;
}

#tabPosestandColor .colors .clr-field button {
    border-radius: 50%;
}

#tabPosestandColor .colors .clr-field input {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 24px !important;
    height: 24px;
    opacity: 0;
}

#tabPosestandColor .colors svg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    pointer-events: none;
    fill: #2879aa;
}

#tabPosestandTexture {
    height: 90%;
    box-sizing: border-box;
}

#divBackdropTags {
    width: 20%;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#divBackdropImages {
    width: 78%;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#divBackdropImages span {
    position: relative;
    display: inline-block;
}

#divBackdropImages .button {
    position: absolute;
    right: 0;
    top: 0;
}

#divBackdropImages svg {
    width: 12px;
    height: 12px;
}

#divBackdropImages img {
    margin: 2px;
    width: 100px;
    height: 100px;
}

.backdrop-tag {
    display: block;
    padding: 2px 2px;
    border-radius: 2px;
    background-color: #9acef5 !important;
}

.backdrop-tag.active {
    background-color: #3583b9 !important;
}

.ui-tooltip {
    font-size: 12px !important;
    line-height: 1.4;
    box-shadow: 0 0 10px #444 !important;
    border: none !important;
    pointer-events: none;
    z-index: 1000000;
}

.ui-tooltip ul {
    padding: 0 1.5em;
}

.ui-tooltip svg {
    width: 12px;
    height: 12px;
    fill: #3583b9;
}

#divTags .group,
.tagslist .group {
    margin-left: 5px;
}

#divTags .group > .tag-wrapper > a.ui-icon,
.tagslist .group > .tag-wrapper > a.ui-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: -10px;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

#divTags .group.is-collapsed > .tag-wrapper > a,
.tagslist .group.is-collapsed > .tag-wrapper > a {
    transform: rotate(-90deg);
}

#divTags .group.is-collapsed .tags-container,
.tagslist .group.is-collapsed .tags-container  {
    display: none;
}

#divTags .tags-container,
.tagslist .tags-container {
    margin-left: 5px;
}

.tag-wrapper .tag-action {
    visibility: hidden;
}

.tag-wrapper:hover > .tag-action {
    visibility: visible;
}

.tag-wrapper img,
.tag-wrapper svg {
    width: 10px;
    height: 10px;
}

.ui-autocomplete {
    /*max-width: 300px;*/
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: 1000000 !important;
}

.ui-autocomplete .ui-state-focus {
    font-weight: normal;
}

body.error {
    background-color: #fff;
    display: table;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 0;
    font-size: 20px;
}

body.error > div {
    display: table-cell;
    vertical-align: middle;
}

body.error h1 {
    color: #000;
    font-size: 28px;
}

.error-message {
    color: #b70000;
}

#dlgEditItem.multi-edit td.label {
    text-align: left;
    width: 180px;
    padding-top: 0;
    white-space: nowrap;
}

#dlgEditItem td.label,
#dlgUploadFileEx td.label {
    padding-top: 8px;
}

#dlgEditItem td.label input[type="checkbox"] {
    display: none;
}
#dlgEditItem.multi-edit td.label input[type="checkbox"] {
    display: inline-block;
}

#dlgEditItem .multi-edit {
    display: none;
}
#dlgEditItem.multi-edit span.single-edit {
    display: none;
}
#dlgEditItem.multi-edit span.multi-edit {
    display: inline;
}
#dlgEditItem.multi-edit div.multi-edit,
#dlgEditItem.multi-edit h2.multi-edit {
    display: block;
}
#dlgEditItem span.multi-edit select {
    width: auto;
    border: none;
    background-color: #fff;
    font-weight: bold;
    padding: 0;
    font-size: 12px;
    margin-left: -4px;
}

#dlgEditItem textarea,
#dlgUploadFileEx textarea {
    height: 40px;
}

#selLinkExpiresUnit {
    width: 100px;
}

.image-action {
    text-decoration: none !important;
    white-space: nowrap;
}

.image-action img {
    display: inline-block;
    vertical-align: bottom;
}

.image-action span {
    display: inline-block;
    margin-left: 2px;
    vertical-align: bottom;
}

.image-action svg {
    width: 12px;
    height: 12px;
    vertical-align: bottom;
    fill: #888;
}

.image-action.is-active {
    color: #ff3366;
    font-weight: bold;
}

.image-action.is-active svg {
    fill: #ff3366;
}

.is-editing .image-action svg {
    fill: #ff9800;
}

#dlgCreateCategory th {
    text-align: right;
}
#dlgCreateCategory td {
    padding: 4px;
}

img.hint {
    width: 16px;
    height: 16px;
    float: left;
    margin-right: 8px;
}

#tdUploadRating,
#tdEditRating {
    text-align: left;
}

#tdUploadRating span,
#tdEditRating span {
    cursor: pointer;
}

.tokenfield {
    padding: 4px 2px;
    border: 1px solid #A1C8E3;
    background-color: #D7EBF9;
    border-radius: 3px;
}

.tokenfield.disabled {
    background-color: #bbb;
    border: 1px solid #777;
}

.tokenfield input,
.tokenfield input:disabled {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

.tokenfield .token {
    background-color: #fff;
    border: 1px solid #A1C8E3;
}

.tokenfield .token span {
    line-height: 20px;
}

.tokenfield .token img {
    height: 20px;
}

.edit-image {
    position: relative;
    display: inline-block;
    width: 180px;
    height: 180px;
    margin-bottom: 1px;
    border: 1px solid #A1C8E3;
    border-radius: 2px;
    box-sizing: border-box;
}

.single-image .edit-image {
    width: 200px;
    height: 200px;
}

.single-image .edit-image:not(:first-child) {
    display: none;
}

.edit-image > span,
.edit-image > img,
.edit-image > :not(.cropper-container) span,
.edit-image > :not(.cropper-container) img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.edit-image img[src=""] {
    display: none;
}

.edit-image > span,
.edit-image > :not(.cropper-container) span {
    text-align: center;
    line-height: 180px;
}

.single-image .edit-image > span,
.single-image .edit-image > :not(.cropper-container) span {
    line-height: 200px;
}

.edit-image form,
.edit-image input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    opacity: 0;
}

.edit-image .buttons {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.edit-image .buttons button,
.edit-image .buttons .delete-snapshot,
#divUpload2Drop button {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: 1px;
    margin-bottom: 0;
    float: left;
    color: #2779aa;
    background-color: rgba(200, 200, 200, 0.5);
    font-weight: normal;
    font-size: 10px;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.edit-image .buttons input {
    position: relative;
    top: -24px;
    width: 24px !important;
    height: 24px !important;
    float: left;
    margin: 0 0 0 1px;
    border: none !important;
    border-radius: 0 !important;
    font-size: 0;
    cursor: pointer;
}

.edit-image .buttons button:hover,
.edit-image .drag-handle:hover {
    background-color: #D7EBF9;
}

.edit-image .buttons .delete-snapshot {
    right: initial;
    top: initial;
    padding-top: 4px;
    margin-top: 2px;
    text-align: center;
    box-sizing: border-box;
}

.edit-image .drag-handle {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background-color: rgba(200, 200, 200, 0.5);
    background-image: url(../imgs/move.png);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: 4px 4px;
    cursor: move;
    z-index: 10;
}

.single-image .edit-image .drag-handle {
    display: none;
}

.edit-image .url {
    position: absolute;
    bottom: -24px;
    width: 100% !important;
    width: calc(100% + 2px) !important;
    margin-left: -1px;
    box-sizing: border-box;
}

.edit-image .warning {
    color: #f44336;
}

.edit-image img[src*="loading.gif"] {
    width: 16px;
    height: 16px;
    left: 50%;
    top: 50%;
    margin: -8px 0 0 -8px;
}

.single-image .buttons .btn-remove-image {
    display: none;
}

.edit-image button img {
    left: 4px !important;
    top: 4px !important;
    width: 16px !important;
    height: 16px !important;
}

#divMultiImageSlide0, #divMultiImageSlide1 {
    width: 1024px;
    max-width: 100%;
    background: transparent;
}

#divMultiImageSlide0 img, #divMultiImageSlide1 img {
    display: inline-block;
    width: 480px;
    max-width: 45%;
    height: auto;
}

#ulImportSnapshots .item {
    display: flex;
    flex-direction: column;
    padding-bottom: 1px;
}

#ulImportSnapshots .item [data-image-index]:first-child {
    width: 200px;
    height: 200px;
    margin: 0;
    border: 1px solid #eee;
}

#ulImportSnapshots .item .secondary-images {
    margin-top: 3px;
}

#ulImportSnapshots .item .secondary-images [data-image-index],
#ulImportSnapshots .item [data-image-index]:not(:first-child) {
    display: inline-block;
    width: 66px;
    height: 66px;
    margin: 0 1px 0 0;
    border: 1px solid #eee;
}

#ulImportSnapshots .item .secondary-images [data-image-index] .drag-handle,
#ulImportSnapshots .item [data-image-index]:not(:first-child) .drag-handle {
    width: 12px;
    height: 12px;
    background-size: 10px;
    background-position: 1px;
}

#ulImportSnapshots .item .tags-mru {
    flex: 1;
}

body > li.ui-draggable-dragging {
    list-style-type: none;
}

body > li:not(.item).ui-draggable-dragging img {
    width: 64px;
    height: 64px;
}

#dlgUploadFileEx {
    display: flex;
    box-sizing: border-box;
    padding: 5px 10px !important;
}

#dlgUploadFileEx .drop-area,
#dlgUploadFileEx .edit-area {
    position: relative;
    left: initial;
    top: initial;
    width: initial;
    height: 100%;
    box-sizing: border-box;
}

#dlgUploadFileEx .drop-area {
    flex: 0 0 130px;
    margin-right: 10px;
}

#dlgUploadFileEx .edit-area {
    flex: 1;
    padding-right: 10px;
}

#dlgUploadFileEx .edit-image {
    margin-bottom: 2px;
}

#dlgUploadFileEx td.label {
    width: 95px;
}

#dlgUploadFileEx .single-image .edit-image input[type="file"] {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

#divUpload2Drop {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 120px;
    height: 300px;
    overflow: auto;
    text-align: center;
    padding: 4px;
}

#divUpload2Drop button {
    width: 16px;
    height: 16px;
    padding: 0;
    background-color: rgba(255,255,255,0.7);
    box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

#btnUpload2AddImage {
    position: absolute !important;
    top: 4px;
    right: 21px;
}

#btnUpload2DiscardImage {
    position: absolute !important;
    top: 4px;
    right: 4px;
}

td.label small {
    display: block;
    margin-top: 5px;
    font-weight: normal;
    line-height: 1.3;
}

.edit-image.is-highlighted {
    border: 1px solid #ffef8f !important;
}

.is-locked {
    color: #aaa;
}

#txtTagSuggestions,
#txtBrandSuggestions {
    width: 50px;
}

#mnuImport button {
    display: block;
    width: 190px;
    margin-top: 2px;
}

#mnuTools button {
    display: block;
    width: 150px;
    margin-top: 2px;
}

#mnuItemAvailability button {
    display: block;
    width: 300px;
    margin-top: 2px;
}

#divItems {
    flex: 1;
    position: relative;
    margin-top: 1px;
    overflow-x: hidden;
    overflow-y: auto;
    border: none;
    -webkit-overflow-scrolling: touch;
}

#dlgDeleteTag #spanDeleteTagName,
#dlgEditTag #spanOldTag {
    padding: 0 3px;
    background-color: #ddd;
    border: 1px solid #888;
    border-radius: 3px;
}

#dlgEditTag div {
    margin: 10px 0;
}

#dlgDeleteItem #imgDeleteItem {
    width: 200px;
    height: 200px;
    border: 1px solid #ddd;
    border-radius: 2px;
}

.drop-image-files {
    font-size:180%;
    color:#aaa;
    margin:20px 0;
}

.drop-image-files-more-options {
    display: block;
    padding: 0 5px;
    margin-top: 20px;
    font-size: 11px;
    line-height: 1.2;
    text-align: left;
}

.drop-image-files-more-options ul {
    margin: 0;
    padding: 2px 0 0 1rem;
}

#dlgLink #divNewLink,
#dlgLink #divNewLinkCustomBoardToken {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 3px;
    background-color: #eee;
    border: 1px solid #ccc;
    text-align: center;
    border-radius: 2px;
}

#dlgLink #divNewLink > span,
#dlgLink #divNewLinkCustomBoardToken > span {
    flex: 1;
}

#dlgLink svg {
    width: 14px;
    height: 14px;
    fill: #206594;
}

#dlgLink #divNewLinkCustomBoardToken {
    margin-top:5px;
    background-image:url("../imgs/Key-icon.png");
    background-position:2px 2px;
    background-repeat:no-repeat;
}

#dlgConfigCloset #divClosetInfo {
    margin-top:10px;
}

#dlgGifts {
    background-image:url("../imgs/gifts.jpg");
    background-size:100%
}

#dlgGifts h1 {
    text-align:center;
    font-size:240%;
    font-weight:bold;
    color:#c9515d;
    text-shadow:#fff 1px 1px 5px;
}

#dlgGifts .intro {
    text-align:center;
    color:#664c33;
    padding-top:4px;
    padding-bottom:4px;
    border-top:1px solid #d9a16c;
    border-bottom:1px solid #d9a16c;
}

#dlgRulebook {
    display: flex;
    flex-direction: column;
    padding-bottom: 0 !important;
}

#dlgRulebook #divRuleSets {
    display: flex;
    margin: 0 0 16px;
}

#dlgRulebook #divRuleSets select {
    flex: 1;
}

#dlgRulebook #divRuleSets :not(:last-child) {
    margin: 0 8px 0 0;
}

#dlgRulebook #divRules {
    flex: 1;
    margin: 0 0 16px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#dlgRulebook #divRulesJSON {
    flex: 1;
    margin: 0 0 16px 0;
}

#dlgRulebook #divRulesJSON textarea {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    font-family: monospace;
    resize: none;
}

#dlgRulebook #divRules .rule {
    position: relative;
    background-color: #D7EBF9;
    font-size: 13px;
    padding: 8px 30px 8px 8px;
    margin-bottom: 4px;
    min-height: 44px;
    border-left: 3px solid #3583b9;
    border-radius: 3px;
}

#dlgRulebook #divRules input {
    box-sizing: border-box;
    padding: 0;
    border: none;
    background-color: #e7f5ff;
    font-size: 13px;
    line-height: 1;
}

#dlgRulebook #divRules input[type="text"] {
    flex: 1;
    width: 50px;
    color: forestgreen;
}

#dlgRulebook #divRules .token-label,
#dlgRulebook .multi.avatar-uuid input + div {
    color: forestgreen;    
}

#dlgRulebook #divRules input[type="number"] {
    width: 50px;
    text-align: center;
    color: purple;
}

#dlgRulebook #divRules select {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 18px;
    background-color: transparent;
    border: none;
    outline: none;
}

#dlgRulebook #divRules select + div {
    position: relative;
    background-color: #D7EBF9;
    pointer-events: none;
    height: 100%;
}

#dlgRulebook #divRules select + div::after {
    content: "▼";
    position: relative;
    margin-left: 2px;
    font-size: 60%;
    color: #aaa;
}

#dlgRulebook .keyword {
    color: royalblue;
}

#dlgRulebook .condition,
#dlgRulebook .action {
    display: flex;
    align-items: center;
    margin: 3px 0;
}

#dlgRulebook .action {
    margin-left: 30px;
}

#dlgRulebook .condition > div,
#dlgRulebook .action > div,
#dlgRulebook [data-param-type] > * {
    position: relative;
    display: inline-block;
    height: 18px !important;
    margin: 0 4px;
    vertical-align: middle;
}

#dlgRulebook [data-param-type] {
    margin: 0 !important;
}

#dlgRulebook .condition [data-param-type],
#dlgRulebook .action [data-param-type],
#dlgRulebook .avatar-uuid {
    display: flex;
    flex: 1;    
}

#dlgRulebook .delete-rule {
    position: absolute;
    right: 8px;
    top: 8px;
}

#dlgRulebook .delete-rule img,
#dlgRulebook .add-action img {
    width: 16px;
    height: 16px;
}

#dlgRulebook .add-action {
    position: absolute;
    right: 8px;
    bottom: 8px;
}

#dlgRulebook .tokenfield {
    flex: 1;
    min-height: 0;
    border: none;
    padding: 0;
    background-color: #e7f5ff;
    border-radius: 0;
}

#dlgRulebook .tokenfield input {
    width: auto !important;
    height: 18px;
}

#dlgRulebook .tokenfield .token {
    background: transparent;
    border: none;
}

#dlgRulebook .btn-menu {
    width: 10px;
    height: 10px;
}

#dlgRulebook .action .menu {
    min-width: 100px;
    padding: 0;
    margin: 0;
    list-style-type: none;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#dlgRulebook .action .menu li {
    padding: 5px 10px;
    font-size: 9pt;
    cursor: pointer;
}

#dlgRulebook .action .menu li:hover {
    color: #fff;
    background-color: #8ab7e7;
}

#dlgRulebook .avatar-uuid img {
    width: 16px;
    height: 16px;
    margin-right: 3px;
    border-radius: 2px;
    vertical-align: bottom;
}

#dlgRulebook .avatar-uuid img:not(:first-child) {
    margin-left: 3px;
}

#dlgRulebook .avatar-uuid input {
    vertical-align: top;
    height: 18px;
}

#dlgRulebook .multi.avatar-uuid input + div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #e7f5ff;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#dlgRulebook .multi.avatar-uuid input:focus + div,
#dlgRulebook .multi.avatar-uuid input:placeholder-shown + div {
    opacity: 0;
}

#dlgRulebook .ui-sortable .btn-menu {
    cursor: row-resize;
}

#dlgRulebook .multi.avatar-uuid input + div span {
    margin: 0 10px 0 0;
}

#dlgArchive .ui-buttonset .ui-button {
    margin: 0 0 4px 0;
}

#dlgArchive #divArchives {
    margin-bottom: 25px;
}

/* = .ui-state-active */
/* TODO! re-enable
.is-active {
    border: 1px solid #A1C8E3 !important;
    background: #fff !important;
    color: #3583b9 !important;
}
*/

.archive {
    display: none;
}

body.is-archive-active .archive {
    display: inline;
}

.drawer {
    float: left;
    max-width: 120px;
    margin: 5px 8px;
    cursor: pointer;
}

.drawer input[type="radio"] {
    position: absolute;
    visibility: hidden;
}

.drawer .drawer-icon,
.drawer .box-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    background-size: cover;    
}

.drawer .drawer-icon {
    background-image: url("../imgs/drawer.png");
}

.drawer .box-icon {
    background-image: url("../imgs/box_small.png");
}

.drawer input[type="radio"]:checked ~ .drawer-icon {
    background-image: url("../imgs/drawer-selected.png");
}

.drawer input[type="radio"]:checked ~ .box-icon {
    background-image: url("../imgs/box_small-selected.png");
}

.drawer .drawer-name {
    padding: 2px 0;
    margin-top: 2px;
    text-align: center;
    font-weight: bold;
    border-radius: 3px;
}

.drawer .drawer-name.warning {
    background-color: #ffb0aa;
}

.drawer input[type="radio"]:checked ~ .drawer-name {
    background-color: #3583b9;
    color: #fff;    
}

.drawer input[type="radio"]:checked ~ .drawer-name.warning {
    background-color: #f44336;
}

.archive-location {
    clear: both;
    padding: 15px 0 0 10px;
    margin: 0;
}

.archive-category {
    width: 100%;
    padding: 2px 0 2px 3px;
    margin: 10px 4px 5px;
    color: #3583b9;
    font-size: 12px;
    letter-spacing: 0.4px;
    border-bottom: 1px solid #3583b9;
    border-left: 5px solid #3583b9;
}

#mnuArchives {
    padding: 2px;
    width: 300px;
}

#mnuArchives .archive-list {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

#mnuArchives .archive-list li {
    padding: 5px;
}

#mnuArchives .archive-list li:not(:last-child) {
    border-bottom: 1px solid #d8ecf9;
}

#mnuArchives .archive-list li:hover {
    background-color: #d8ecf9;
}

#mnuArchives .archive-list h1 {
    color: #000;
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: bold;
}

#mnuArchives .archive-list .drawer {
    display: inline-block;
    float: none;
    padding: 2px 3px;
    margin: 5px 2px 0 0;
    background-color: #3583b9;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
}

#btnItemAvailability .ui-state-hover,
#btnItemAvailability .ui-state-focus {
    border: none;
    color: #2779aa;
    background: #d7ebf9;
}

#btnItemAvailability .ui-state-active {
    border: 1px solid #A1C8E3 !important;
    background: #fff !important;
    color: #3583b9 !important;
}

#txtImportTexUUID2,
#txtImportTexUUID3,
#txtImportTexUUID4 {
    width: 32.667%;
    margin-top: 3px;
    margin-bottom: 1px;
    float: left;
    box-sizing: border-box;
}

#txtImportTexUUID2,
#txtImportTexUUID3 {
    margin-right: 1%;
}

#dlgEditBrand table {
    width: 100%;
    table-layout: fixed;
}

#dlgEditBrand td:nth-child(3) {
    width: 55px;
}

#dlgEditBrand input[type="text"],
#dlgEditBrand input[type="url"],
#dlgEditBrand textarea,
#txtWearSubfolders {
    width: 100%;
}

#dlgEditBrand textarea {
    height: 100px;
}

#dlgShowBrands {
    display: flex;
    flex-direction: column;
}

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

#dlgShowBrands th,
#dlgShowBrands td {
    padding: 3px 5px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#dlgShowBrands tr.odd {
    background-color: #f7f7f7;
}

#dlgShowBrands td.bold {
    font-weight: bold;
}

#dlgShowBrands td.small {
    font-size: 8px !important;
}

.dataTables_filter {
    margin-bottom: 10px;
}

.dataTables_filter input {
    height: 27px;
    display: inline-block;
    box-sizing: border-box;
    padding: 3px 5px;
    margin: 0 !important;
    border: 1px solid #ddd;
    vertical-align: top;
    margin-right: 5px;
    border-radius: 3px;
}

div.DTS div.dataTables_scrollBody {
    background: transparent;
}

input[type="text"].invalid,
input[type="number"].invalid,
input[type="url"].invalid,
textarea.invalid {
    border: 1px solid #f44336 !important;
    background-color: #ffb0aa !important;
}

.invalid-message,
.creator-noinfo {
    display: none;
    font-size: 10px;
    color: #f44336;
}

.invalid-message {
    margin: 3px 0;
}

.creator-noinfo {
    margin-top: 5px;
}

.creator-noinfo a {
    color: #3583b9 !important;
}

.creator-inexistent {
    color: #f44336;
}

.creator-inexistent + .creator-noinfo {
    display: block;
}

.input-info,
.reset-link {
    font-size: 10px;
    margin: 3px 0;
}

.reset-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unreviewed {
    color: #ccc;
    font-style: italic;
}

.private,
.private td,
.private a {
    color: #2779aa !important;
}

#dlgLocks #tabLocksFolders input[type="checkbox"] {
    position: relative;
    top: 2px;
    margin-right: 5px;
}

#divLocksInfo {
    margin-top: 10px;
}

#spanItemsCount {
    font-weight: bold;
}

#divUpload2Edit {
    position: absolute;
    left: 144px;
    top: 8px;
    width: 300px;
    height: 300px;
    overflow: auto;
    padding: 4px 4px 4px 4px;
    border-radius: 2px;
}

.display-info {
    margin: 2px 0 0;
    border: none !important;
    border-radius: 2px;
}

.sort-by {
    display: flex;
    justify-content: end;
    white-space: nowrap;
}

.sort-by a {
    padding-left: 2px;
}

.sort-by a:not(:last-child) {
    padding-right: 2px;
    border-right: 1px solid #222;
}

.sort-by a.is-selected::before {
    content: "↓ ";
    position: relative;
    display: inline-block;
    top: -2px;
    margin-right: 2px;
}

.sort-by a.is-selected.is-descending::before {
    content: "↑ ";
}

#divSkins label > input {
    float: left;
}

#divSkins label > div {
    margin: 0 0 8px 24px;
}

body > li.item.ui-draggable-dragging {
    pointer-events: none;
}

.progress-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.progress-list li {
    position: relative;
    padding-left: 20px;
    margin: 4px 0;
}

.progress-list .is-current,
.progress-list .is-success,
.progress-list .is-error {
    position: absolute;
    display: none;
    left: 0;
    top: 0;
}

.progress-list li.current {
    font-weight: bold;
}

.progress-list li.current .is-current,
.progress-list li.success .is-success,
.progress-list li.error .is-error {
    display: inline-block;
}

.progress-list li svg {
    width: 14px;
    height: 14px;
}

.progress-list svg circle {
    stroke-width: 2px;
    fill: transparent;
    transform: rotate(-90deg);
    transform-origin: 50%;
}

.progress-list svg circle.background {
    stroke: #ccc;
}

.progress-list svg circle.progress {
    stroke: #000;
}

#dlgNewVersion ul {
    padding: 0 20px 0 16px;
}

#dlgNewVersion li {
    margin: 10px 0;
}

#divSuggestions {
    margin-top: -1em;
}

.suggestion {
    padding: 2em 0;
    border-bottom: 1px solid #d7ebf9;
}

.suggestion:last-child {
    padding-bottom: 0;
    border: none;
}

.suggestion address {
    font-style: normal;
    font-size: 0.65rem;
    color: #888;
    margin: 1em 0;
    line-height: 1.4;
}

.suggestion > div > * {
    display: inline-block;
    vertical-align: middle;
}

.suggestion p {
    line-height: 1.4;
}

.suggestion img {
    width: 16px;
    height: 16px
}

#divSuggestion {
    margin: 2em 0;
}

#divSuggestion input,
#divSuggestion textarea {
    width: 100%;
    margin: 0.5em 0;
    box-sizing: border-box;
}

#divSuggestion textarea {
    height: 10em;
    margin-bottom: 1em;
    resize: vertical;
}

#divCompletedSuggestions {
    position: relative;
}

.cropper-crop-box {
    z-index: 1;
}

label.toggle {
    margin: 30px 0 0 0;
    border-top: 2px solid #d7ebf9;
    font-size: 120%;
    font-weight: bold;
    display: block;
    padding: 30px 0 0 15px;
    cursor: pointer;
}

label.toggle + input {
    position: relative;
    visibility: hidden;
    width: 0;
    height: 0;
}

label.toggle + input ~ div {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

label.toggle + input ~ div::before {
    content: "▶";
    position: absolute;
    left: 0;
    top: 35px;
    font-size: 80%;
    transition: transform 0.2s ease;
}

label.toggle + input:checked ~ div {
    max-height: 10000px;
    transition: max-height 1s ease;
}

label.toggle + input:checked ~ div::before {
    transform: rotate(90deg);
}

.scrollable-table-view {
    position: relative;
    height: 100%;
}

.scrollable-table-wrapper {
    overflow: auto;
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-sizing: border-box;
}

.scrollable-table-view .legend {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 80px;
    height: 70px;
    padding: 3px;
    background-color: #d7ebf9;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    box-sizing: border-box;
    font-size: 10px;
}

.scrollable-table {
    width: 0;
    border-spacing: 0;
    table-layout: fixed;
}

.scrollable-table .is-hovered {
    background-color: #d7ebf9;
}

.scrollable-table th {
    white-space: nowrap;
}

.scrollable-table td {
    height: 24px;
    padding: 0;
    text-align: center;
}

.scrollable-table td input {
    margin: 5px 0;
}

.scrollable-table thead th {
    width: 24px;
    height: 70px;
    text-align: left;
    position: sticky;
    top: 0;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
}

.scrollable-table thead th:first-child {
    width: 80px;
    border: none;
}

.scrollable-table thead th div {
    transform: translate(2px, 20px) rotate(315deg);
    width: 24px;
}

.scrollable-table thead th div span {
    padding: 2px 5px;
    background-color: #fff;
}

.scrollable-table thead th.wide {
    width: 100px;
}

.scrollable-table thead th.wide div {
    transform: translate(15px, -8px) rotate(315deg);
    width: 100px;
}

.scrollable-table thead th.actions {
    width: 60px;
}

.scrollable-table tbody tr th {
    position: sticky;
    left: 0;
    padding-right: 4px;
    background-color: #fff;
    border-right: 1px solid #ddd;
    text-align: right;
}

.scrollable-table .cover {
    position: fixed;
    background-color: #fff;
}

.step {
    display: none;
    height: 100%;
}

.step.is-step-active {
    display: flex;
    flex-direction: column;
}

article {
    max-width: 400px;
    margin: auto;
    line-height: 1.5;
}

article.is-left {
    margin-left: 0;
    max-width: initial;
}

input.switch {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-block;
    width: 30px;
    height: 18px;
    margin: 0;
    background-color: #fff;
    border: 1px solid #888;
    border-radius: 9px;
    vertical-align: bottom;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

input.switch:checked {
    background-color: #59b959;
}

input.switch::after {
    position: absolute;
    width: 12px;
    height: 12px;
    content: '';
    background-color: #fff;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.1s ease;
}

input.switch:checked::after {
    transform: translate(12px, 0);
}

#tableClothingTypeToTagMapping {
    width: 100%;
    box-sizing: border-box;
    border-collapse: collapse;
}

#tableClothingTypeToTagMapping thead th {
    position: sticky;
    top: 0;
    padding-top: 6px;
    padding-bottom: 8px;
    background-color: #fff;
    text-align: left;
    box-shadow: inset 0 -1px 0 0 #ddd;
}

#tableClothingTypeToTagMapping tbody {
    border-top: 5px solid transparent;
}

#tableClothingTypeToTagMapping td:first-child,
#tableClothingTypeToTagMapping th:first-child {
    width: 130px;
    padding-right: 5px;
    text-align: right;
}

#tableClothingTypeToTagMapping td:last-child {
    padding-right: 5px;
}

#tableClothingTypeToTagMapping td:last-child input {
    width: 100%;
    margin: 1px 0;
    box-sizing: border-box;
}

.is-clothing-type {
    display: inline-block;
    padding: 1px 3px;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}

.has-color {
    display: inline-block;
    padding: 1px 3px;
    border-radius: 2px;
}

button.button,
a.button {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    height: 26px;
    padding: 0 5px;
    vertical-align: top;
    border: none;
    background-color: transparent;
    color: #3583b9;
    cursor: pointer;
    font-size: 9pt;
    font-weight: normal;
    text-decoration: none;
    /*transition: background-color 0.1s ease;*/
    border-radius: 2px;
}

button.button:hover,
a.button:hover,
.dropdown-menu-button:hover > .button,
.dropdown-menu:hover + .button,
#divInvItemDisplay button:hover {
    color: #fff;
    background-color: #77c3eb !important;
}

button.button svg,
a.button svg {
    width: 16px;
    height: 16px;
}

button.button svg + span,
a.button svg + span {
    margin-left: 4px;
}

button.button:hover svg,
a.button:hover svg,
.dropdown-menu-button:hover > .button svg,
.dropdown-menu:hover + .button svg {
    fill: #fff;
}

.dropdown-menu-button {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.dropdown-menu-button > .button {
    padding-right: 20px;
}

.dropdown-menu-button > .button::after,
.dropdown-button::after,
.collapsible-title::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    right: 7px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #3583b9;
}

.dropdown-menu-button > .button:hover::after,
.dropdown-menu-button:hover > .button::after,
.dropdown-menu:hover + .button::after,
.dropdown-menu-button > .button.is-active::after {
    border-top-color: #fff;
}

.dropdown-menu-button > .button.no-arrow {
    padding-left: 8px;
    padding-right: 8px;
}

.dropdown-menu-button > .button.no-arrow::after {
    border: none !important;    
}

.dropdown-menu {
    position: absolute;
    display: none;
    top: 100%;
    flex-direction: column;
    border: 1px solid #A1C8E3;
    border-radius: 2px;
    z-index: 9999999;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.dropdown-menu.right,
.dropdown-menu.is-right {
    right: 0;
    margin-right: 0 !important;
}

.dropdown-menu-button:hover .dropdown-menu,
.dropdown-menu:hover {
    display: flex;
}

.dropdown-menu button,
.dropdown-menu > div,
.dropdown-menu > a {
    background-color: #fff;
    margin: 0 !important;
    border: none;
    text-align: left;
    padding: 5px 10px;
    white-space: nowrap;
    color: #2879aa;
    cursor: pointer;
    font-size: 9pt;
    font-weight: normal;
    text-decoration: none;
}

.dropdown-menu button:disabled {
    color: #9bcef5;
    opacity: 1;
}

.dropdown-menu button:hover,
.dropdown-menu > div:hover,
.dropdown-menu > a:hover {
    color: #fff;
    background-color: #77c3eb;
}

.dropdown-menu svg {
    position: relative;
    width: 12px;
    height: 12px;
    top: 1px;
    fill: #3583b9 !important;    
}

.dropdown-menu button:hover svg,
.dropdown-menu > div:hover svg {
    fill: #fff !important;
}

.dropdown-menu .check svg {
    visibility: hidden;
}

.dropdown-menu .is-active .check svg {
    visibility: visible;
}

.dropdown-menu button:hover svg,
.dropdown-menu > div:hover svg {
    fill: #fff;
}

.dropdown {
    display: flex;
    flex: 1;
    background-color: #D7EBF9;
    border: 1px solid #A1C8E3;
    border-radius: 3px;
    overflow: hidden;
}

.dropdown input {
    flex: 1;
    border: none !important;
}

.dropdown .dropdown-button {
    position: relative;
    border: none;
    cursor: pointer;
    width: 24px;
    background: transparent !important;
    outline: none;
}

.dropdown-button::after {
    top: 10px;
}

@keyframes turn {
    0%   { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}

.is-refreshing svg {
    animation: turn 1s infinite linear;
}

.list-item {
    position: relative;
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;
    border: 1px solid #dddddd;
    border-radius: 2px;
}

.list-item img {
    width: 160px;
    height: 160px;
    min-width: 160px;
    margin-right: 5px;
}

.list-item h1 {
    margin: 5px 0;
    color: #000;
    font-size: 9pt;
}

.list-item time {
    display: block;
    margin: 5px 0;
    font-size: 8pt;
}

.list-item .actions {
    margin-top: 10px;
}

.list-item .actions a {
    display: block;
    margin: 2px 0;
    text-decoration: none;
}

span.icon {
    color: #2879aa;    
}

a.icon svg,
span.icon svg {
    width: 12px;
    height: 12px;
    padding: 0 1px;
    fill: #2879aa;
    /*transition: fill 0.2s ease;*/
}

a.icon:hover svg {
    fill: #31a1e4;
}

.is-hidden {
    display: none !important;
}

.horizontal-flex-pane {
    display: flex;
    flex-direction: row;
}

.vertical-flex-pane {
    display: flex;
    flex-direction: column;
}

.main-pane {
    flex: 1;
    overflow: hidden;
}

.scrollable-main-pane {
    flex: 1;
    overflow: auto;
}

.horizontal-flex-pane > .main-pane:not(:first-child),
.horizontal-flex-pane > .scrollable-main-pane:not(:first-child) {
    margin-left: 5px;
}

.horizontal-flex-pane > .main-pane:not(:last-child),
.horizontal-flex-pane > .scrollable-main-pane:not(:last-child) {
    margin-right: 5px;
}

.vertical-flex-pane > .main-pane:not(:first-child),
.vertical-flex-pane > .scrollable-main-pane:not(:first-child) {
    margin-top: 5px;
}

.vertical-flex-pane > .main-pane:not(:last-child),
.vertical-flex-pane > .scrollable-main-pane:not(:last-child) {
    margin-bottom: 5px;
}

#tabHUDSettings table td {
    vertical-align: top !important;
    padding-bottom: 10px;
}

#tabHUDSettings table td:first-child label {
    display: inline-block;
    padding-top: 4px;
}

.status-message {
    flex: 1;
    margin-right: 10px;
}

.status-message svg {
    width: 16px;
    height: 16px;
}

.status-message.success svg,
.is-success svg {
    fill: #4caf50;
}

.status-message.warning svg,
.is-error svg {
    fill: #ffc107;
}

.subfolders svg,
.delete-snapshot svg,
.tag-wrapper svg,
button.button svg,
a.button svg {
    fill: #3583b9;
}

.subfolders a:hover svg,
.delete-snapshot:hover svg,
.tag-wrapper a:hover svg {
    fill: #55a1d6;
}

span.tag svg,
.category a svg {
    width: 12px;
    height: 12px;
    fill: #fff;
}

body:not(.os-mac) .is-mac,
body.os-mac .is-not-mac {
    display: none;
}

#ulUpload2Thumbnails .is-loading {
    display: block;
    width: 100%;
    height: 120px;
    padding: 10px;
    background-color: rgba(128,128,128,0.2);
    box-sizing: border-box;
    border-radius: 3px;
}

#ulUpload2Thumbnails .is-loading svg {
    display: block;
    width: 24px;
    height: 24px;
    margin: 10px auto;
}

#dlgBodies table {
    width: 100%;
}

#dlgBodies th {
    text-align: left;
}

#dlgBodies select {
    width: 100%;
}

#dlgBodies td {
    vertical-align: middle;
}

#dlgBodies table tbody td:first-child {
    cursor: row-resize;
}

#title-current-body {
    font-weight: normal;
    font-size: 12px;
}

body.is-locked.main-page {
    background-color: #001423;
}

body.is-locked #divHeader {
    color: #9bcef5;
}

body.is-locked #divHeader .actions svg {
    fill: #9bcef5;
}

body.is-locked #divHeader .actions .textual {
    color: #9bcef5;
}

body.is-locked .action-wear,
body.is-locked .action-lock {
    display: none !important;
}

.lock {
    display: flex;
    align-items: center;
    position: absolute;
    left: 5px;
    top: 0;
    height: 100%;
    padding: 0 6px;
    color: #fff;
    background-color: #3583b9;
    font-weight: normal;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
}

.lock svg {
    width: 10px;
    height: 10px;
    fill: #fff;
    margin-right: 3px;
}

.subfolder-suggestions .is-loading svg {
    width: 10px;
    height: 10px;
}

.stats-header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
}

.stats-header button {
    background: transparent;
    border: none;
}

.stats-header button svg {
    width: 16px;
    height: 16px;
}

.stats-header > div {
    flex: 1;
    text-align: center;
}

.stats-header > div > div {
    padding: 5px 0;
}

#statsYear {
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}

.gachaxchange svg {
    fill: #459eb6 !important;
}

.toolbar .spacer {
    display: inline-block;
    width: 1px;
    height: 26px;
    margin: 2px 3px 0;
    background-color: #9ec7e4;
}

.toolbar .spacer:first-child {
    display: none;
}

small svg {
    width: 10px;
    height: 10px;
}

.input-with-buttons {
    display: flex;
    align-items: center;
    gap: 2px;
}

.input-with-buttons label {
    margin-right: 10px;
    white-space: nowrap;
}

.input-with-buttons input {
    height: 26px;
    box-sizing: border-box;
}

.input-with-buttons .button {
    display: inline-block;
    min-width: 26px;
    padding: 0 5px;
    margin: 0 !important;
    background-color: #d7ebf9;
    text-align: center;
}

.input-with-buttons a.button {
    position: relative;
    padding: 0;
}

.input-with-buttons a.button svg {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 16px;
    height: 16px;
}

.bar.no-bottom-padding {
    padding-bottom: 0 !important;
}

.bar table {
    width: 100%;
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

.bar .tagsbarinner {
    width: 120px;
}

.bar .taglist {
    padding-top: 2px;
    vertical-align: bottom;
    line-height: 2;
}

#divInvItemDisplay button {
    padding: 0 10px;
    margin-top: 10px;
    background-color: #d7ebf9;
}

#msgUpload2Title {
    margin-top: 5px;
}

#msgUpload2Title svg {
    width: 12px;
    height: 12px;
    fill: #ffc107;
}

#dlgPremium ul {
    padding: 0 2em 0 1em;
    list-style-type: none;
    line-height: 1.4;
}

#dlgPremium ul li {
    margin: 0;
    padding: 5px 0 5px 25px;
    list-style: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='m20.434 360.502h470.715l-1.36 13.65c-4.21 33.683-28.158 53.35-52.496 53.35h-363.003c-27.506 0-49.037-23.681-52.466-53.1-.038-.306.151 1.56-1.39-13.9z' fill='%23ffc107'/%3E%3Cpath d='m511.677 154.802-17.529 175.7h-476.694l-17.118-171.97c-4.582-40.327 38.915-58.966 58.996-35.89 48.313 55.708 53.485 66.705 69.715 64.77 6.1-.742 10.459-3.475 14.079-6.81 98.363-94.37 91.93-88.259 92.943-89.06 13.238-10.184 30.263-8.504 40.237-.2 99.389 83.514 94.784 79.836 97.003 81.1 9.28 5.333 20.224 4.654 29.578-4.52 55.234-54.272 51.731-50.89 52.756-51.71 25.266-19.672 60.078 3.188 56.034 38.59z' fill='%23ffc107'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 5px;
    background-size: 16px;
}

.remove-subfolder,
.add-subfolder {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 408 408'%3E%3Cpath d='M372,88.661H206.32l-33-39.24c-0.985-1.184-2.461-1.848-4-1.8H36c-19.956,0.198-36.023,16.443-36,36.4v240 c-0.001,19.941,16.06,36.163,36,36.36h336c19.94-0.197,36.001-16.419,36-36.36v-199C408.001,105.08,391.94,88.859,372,88.661z' fill='%233583b9'/%3E%3C/svg%3E");
}

.remove-subfolder:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M500.197,251.673l10.278-198.094l-41.894-2.17L458.488,245.99c-35.691-1.768-87.737,2.175-128.834,32.011 c-42.434,30.806-56.53,85.094-61.085,122.649h-21.713c-4.561-37.555-18.651-91.842-61.085-122.649 c-41.102-29.841-93.155-33.779-128.846-32.011L41.828,51.415L0,54.658l15.271,196.835c-1.93,6.953-35.062,129.391,18.766,173.682 c76.44,62.889,193.257,24.261,212.1,17.423h23.152c18.843,6.839,135.661,45.466,212.1-17.423 C534.82,381.197,502.564,260.196,500.197,251.673z' fill='%233583b9'/%3E%3C/svg%3E");
}

#dlgSuggestionBox {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#divSuggestionsFilter {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
}

#divSuggestionsFilter input[type="search"] {
    flex: 1;
    margin-right: 10px;
}

#divSuggestionsPanel {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
}

#divSuggestionCategories {
    width: 120px;
    margin-right: 15px;
}

#divSuggestionCategories button {
    width: 100%;
    text-align: left;
    white-space: nowrap;
    background-color: #d7ebf9;
    margin-bottom: 1px;
}

#divSuggestionCategories button.is-active {
    border: 1px solid #94c9ef;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color: #3583b9;
    background: #fff;
}

#divSuggestionsContainer {
    overflow-y: auto;
}

#divFolders {
    text-align: left;
    margin-top: 10px;
}

#divFolders .subfolder {
    margin-bottom: 5px;
}

#divFolders .subfolder span {
    display: inline-block;
    vertical-align: top;
    margin: 1px 0 0 5px;
}

#dlgWornOutfits,
#dlgWearHistory {
    display: flex;
    flex-direction: column;
}

#dlgWornOutfits .search-bar,
#dlgWearHistory .search-bar {
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;
}

#dlgWornOutfits .search-bar input,
#dlgWearHistory .search-bar input {
    flex: 1;
    margin-right: 10px;
}

#dlgWornOutfits .sort-by,
#dlgWearHistory .sort-by {
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #d7ebf8;
    font-size: 8pt;
    justify-content: start;
}

#dlgWornOutfits .sort-by a,
#dlgWearHistory .sort-by a {
    padding-left: 2px;
}

#dlgWornOutfits .content,
#dlgWearHistory .content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#dlgWornOutfits .brandname,
#dlgWearHistory .brandname {
    font-size: 10px;
}

#dlgWornOutfits .brand img,
#dlgWearHistory .brand img {
    display: none;
}

#dlgWornOutfits .date table td,
#dlgWearHistory .date table td {
    font-size: 10px;
    padding: 0;
}

:not(.toolbar) > .button.is-active {
    color: #fff;
    background-color: #3583b9;
}

:not(.toolbar) > .button.is-active svg {
    fill: #fff;
}

#ulWornOutfits.compact .list-item,
#ulWearHistory.compact .list-item {
    border-top: none;
    border-left: none;
    border-right: none;
    margin-bottom: 0;
    padding-bottom: 3px;
}

#ulWornOutfits.compact .list-item img,
#ulWornOutfits.compact .list-item .unknownworn,
#ulWearHistory.compact .list-item img {
    display: none;
}

#ulWornOutfits.compact .list-item .actions,
#ulWearHistory.compact .list-item .actions {
    position: absolute;
    top: 0;
    right: 5px;
    margin: 5px 0 0;
}

#ulWornOutfits.compact .list-item .actions a,
#ulWearHistory.compact .list-item .actions a {
    display: inline-block;
}

#ulWornOutfits.compact .list-item .actions a span,
#ulWearHistory.compact .list-item .actions a span {
    display: none;
}

#ulWornOutfits.only-wardrobe-items .no-wardrdobe-item {
    display: none;
}

.access-list-container {
    margin-top: 30px;
}

.access-list-container p {
    margin: 0 0 15px;
}

.access-list {
    margin: 10px 0;
    padding: 0;
}

.access-list > span {
    display: inline-block;
    height: 32px;
    margin-right: 5px;
    background-color: #77c3eb;
    border-radius: 3px;
    color: #fff;
    vertical-align: middle;
}

.access-list img {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 3px;
    vertical-align: middle;
}

.access-list .name {
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
    font-weight: bold;
    line-height: 32px;
}

.access-list a {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
}

.access-list svg {
    width: 14px;
    height: 14px;
    fill: #fff;
}

#tabStripMe label {
    display: block;
    margin: 15px 0 3px;
    font-weight: bold;
}

#mnuFilters {
    float: right;
    margin-right: 3px;
}

.load-more {
    padding: 15px 0;
    text-align: center;
}

.icon-copy {
    display: none;
}

body.copy-items .icon-copy {
    display: inline;
}

#txtImportItems {
    width: 100%;
    height: 176px;
    margin-bottom: 10px;
    box-sizing: border-box;
    font-family: monospace;
    font-size: 8px;
}

.secondary-ui-dialog-titlebar-button {
    position: absolute;
    right: 25px;
    top: 50%;
    width: 18px !important;
    height: 18px;
    margin-top: -10px;
    text-decoration: none;
    font-weight: bold !important;
    line-height: 18px;
}

.is-dragover .tokenfield {
    border: 1px solid #ffef8f;
    background: #ffef8f url(images/ui-bg_flat_25_ffef8f_40x100.png) 50% 50% repeat-x;
}

.ui-widget button {
    margin: 2px 0;
}

/* dockspawn */

.panel-element-content-container .ui-dialog {
    display: flex !important;
    flex-direction: column;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    box-shadow: none;
    box-sizing: border-box;
    border: none;
    padding: 0;
}

.panel-element-content-container .ui-resizable-handle,
.panel-element-content-container .ui-dialog-titlebar,
.panel-titlebar-button-close::after {
    display: none;
}

.panel-element-content-container .ui-dialog-content {
    height: initial !important;
    flex: 1;
}

.panel-base {
    box-sizing: border-box;
}

.panel-titlebar {
    pointer-events: auto;
    width: 100% !important;
    height: 20px;
    color: #fff;
    box-sizing: border-box;
    background-color: #94c9ef;
    cursor: move;
}

.dockspan-panel-titlebar-text-active {
    color: #3583b9;
}

.dialog-floating .panel-titlebar {
    height: 26px;
    color: #fff;
    background-color: #fff;
}

.panel-titlebar-text {
    width: 100%;
    height: 20px;
    padding-top: 0;
    padding-left: 8px;
    font-weight: bold;
    font-size: 1.1em;
    line-height: 20px;    
    color: #fff;
    background-color: #3583b9;
    box-sizing: border-box;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.dialog-floating .panel-titlebar-text {
    line-height: 25px;
    height: 25px;
}

.panel-titlebar-button-close {
    top: 0;
}

.panel-titlebar-button-close:hover {
    color: red;
}

.panel-titlebar-button-close::after,
.dockspan-tab-handle-close-button::after {
    content: "✕";
    display: block;
    font-size: 10px;
    line-height: 20px;
}

.dialog-floating .panel-titlebar-button-close {
    background-image: url(wardrobe2/images/ui-icons_3d80b3_256x240.png);
    background-position: -94px -126px;
    background-color: #d7ebf9;
    border-radius: 3px;
    width: 20px;
    height: 20px;
    right: 3px;
    top: 2px;
    cursor: pointer;
}

.dialog-floating .panel-titlebar-button-close:hover {
    background-image: url(wardrobe2/images/ui-icons_fff_256x240.png);
    background-color: #77c3eb;
}

.dialog-floating .panel-titlebar-button-close::after {
    display: none;
}

.dialog-floating {
    box-shadow: 0 0 30px #444;
    border-radius: 2px;
    overflow: hidden;
    pointer-events: none;
}

.dialog-floating .panel-titlebar {
    display: block;
    height: 32px;
    padding: 3px;
}

.dialog-floating .panel-titlebar-text {
    border-radius: 2px;
}

.dialog-floating .panel-titlebar-button-close {
    right: 6px;
    top: 5px;
}

.draggable-dragging-active {
    opacity: 0.95;
}

.resize-handle,
.resize-handle-corner {
    pointer-events: auto;
}

.dock-container {
    background-color: #888;
}

.document-manager {
    background-color: #666;
}

.splitbar-horizontal,
.splitbar-vertical {
    position: relative;
    z-index: 1;
}

.splitbar-horizontal,
.splitbar-vertical,
.splitbar-horizontal:active,
.splitbar-vertical:active {
    background-color: #94c9ef;
}

.splitbar-vertical:hover,
.splitbar-horizontal:hover {
    background-color: #3583b9;
}

.splitbar-horizontal {
    height: 2px;
    cursor: ns-resize;
}

.splitbar-vertical {
    width: 2px;
    cursor: ew-resize;
}

.dockspan-tab-host {
    background-color: #fff;
}

.dockspan-tab-content {
    background-color: #fff;
}

.dockspan-tab-handle {
    height: 20px;
    line-height: 20px;
    font-size: 1.1em;
    font-weight: bold;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    background-color: #3583b9;
    color: #fff;
    margin-right: 1px;
}

.dockspan-tab-handle:hover {
    color: #3583b9;
    background-color: #d7ebf8;
}

.dockspan-tab-handle-selected,
.dockspan-tab-handle-active {
    background-color: #d7ebf8;
    color: #3583b9;
}

.dockspan-tab-handle-text {
    margin-top: 0;
    line-height: 20px;
    text-decoration: none;
}

.dockspan-tab-handle-close-button:hover {
    color: red;
}

.dockspan-tab-handle-list-container {
    height: 20px;
    background-color: #94c9ef;
}

.dialog-floating .dockspan-tab-handle-list-container {
    height: 25px;
}

.dockspan-tab-handle-content-seperator,
.dockspan-tab-handle-content-seperator-active {
    display: none;
}

.dockspan-tab-handle-list-container:first-child .dockspan-tab-handle {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.panel-element-content-container .ui-tabs {
    padding: 0;
    border: none;
}

/* jQuery upgrade */
/*
.ui-button {
    background-color: #d7ebf9;
    border: none;
    padding: 7px 12px;
    color: #2779aa;
}
.ui-button:hover {
    background-color: #77c3eb;
    color: #fff;
}
.ui-tooltip {
    opacity: 1;
    background-color: #fff;
}

.ui-autocomplete .ui-menu-item {
    padding: 0;
}

.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper {
    padding: 4px 8px;
    margin: 0;
    border: none;
    font-weight: normal;
}

.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background: #77c3eb;
    color: #fff;
}

.ui-dialog .ui-dialog-titlebar-close {
    text-indent: -9999px;
}

.ui-widget-header .ui-icon {
    background-image: url(css/wardrobe2/images/ui-icons_3d80b3_256x240.png);
}

.ui-widget-header .ui-button:hover .ui-icon {
    background-image: url(css/wardrobe2/images/ui-icons_fff_256x240.png);
}
*/

#dlgAutoImport article {
    max-width: initial;
    padding: 0 20px;
    margin: 0;
}

#dlgAutoImport h2 {
    margin: 10px 0 5px;
}

#dlgAutoImport svg {
    width: 12px;
    height: 12px;
}

#divAutoImportPreview {
    display: flex;
    flex-direction: row;
}

#divAutoImportPreview .item {
    margin: 0;
}

#divAutoImportPreview .tags-container {
    width: 150px;
    margin-right: 5px;
}

#divAutoImportPreview h3 {
    margin: 0 0 10px;
    font-size: 12px;
}

#divAutoImportPreview .item-date-added td {
    font-size: 8pt;
}

#ulAutoImportSubfolders {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

#ulAutoImportSubfolders li {
    width: 25%;
}

.auto-import-generate-subfolders svg {
    width: 12px;
    height: 12px;
}

#dlgAutoImport a.icon,
#dlgAutoImport .tag-wrapper a {
    pointer-events: none;
}

#dlgAutoImport .step {
    height: initial;
}

#divAutoImportExampleStructure > ul {
    float: left;
    font-size: 9px;
    padding: 0 20px 0 10px !important;
    margin: 0;
    white-space: nowrap;
}

#divAutoImportExampleStructure ul {
    padding: 0 0 0 16px;
    list-style-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><path d="M372,88.661H206.32l-33-39.24c-0.985-1.184-2.461-1.848-4-1.8H36c-19.956,0.198-36.023,16.443-36,36.4v240 c-0.001,19.941,16.06,36.163,36,36.36h336c19.94-0.197,36.001-16.419,36-36.36v-199C408.001,105.08,391.94,88.859,372,88.661z" fill="%23888"/></svg>');
}

.auto-import-method-selection article > div {
    margin: 20px 0;
}

.auto-import-method-selection input {
    margin-left: 0;
}

.auto-import-method-selection article label > div {
    margin-left: 20px;
}

.auto-import-file-upload {
    height: 100% !important;
}

.auto-import-file-upload > article {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.auto-import-file-upload table td {
    padding: 0 !important;
}

.auto-import-login-credentials .base-folder {
    color: #3683b9;
}

.auto-import-login-credentials .outfit {
    color: #f25bae;
}

#divAutoImportReadFileProgressBar {
    margin: 10px 0;
}

#divAutoImportExampleDescription p {
    margin: 0 0 5px;
}

#divAutoImportExampleDescription ul {
    padding: 0 12px;
    margin: 5px 0;
}

.collapsible-title {
    position: relative;
    font-weight: bold;
    padding: 10px 0 10px 15px;
    cursor: pointer;
}

.collapsible-title::before {
    left: 0;
    right: initial;
    top: 16px;
    transition: transform 0.2s ease;
}

.collapsible.is-collapsed .collapsible-content {
    display: none;
}

.collapsible.is-collapsed .collapsible-title::before {
    transform: rotate(-90deg);
}

.disclaimer {
    font-size: 9px;
}

.toast-message {
    position: fixed;
    top: 5px;
    right: 5px;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    font-size: 12px;
}

#txtPrefCustomSuggestedTags {
    width: 100%;
    height: 50px;
}

#dlgOutfitCreator .outfit-metadata {
    margin-bottom: 20px;
}

#dlgOutfitCreator .outfit-name {
    display: flex;
    margin-bottom: 3px;
}

#dlgOutfitCreator .outfit-name input {
    flex: 1;
    width: 100%;
    margin-right: 3px;
    font-weight: bold;
}

#dlgOutfitCreator .edit-image {
    margin-bottom: 0;
}

#btnAddOutfitImage {
    height: 26px;
    margin: 0;
    white-space: nowrap;
}

#dlgOutfitCreator .outfit-tags {
    margin-bottom: 3px;
}

#txtOutfitTags {
    width: 100%;
    height: 40px;
}

#txtOutfitRemarks {
    width: 100%;
}

.layer {
    position: relative;
    margin-bottom: 10px;
    color: #3583b9;
    border: 1px solid #A1C8E3;
}

.layer .header {
    position: relative;
    display: flex;
    align-items: center;
    padding: 2px 2px 2px 20px;
    background-color: #d7ebf9;
}

.layer .header::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 4px;
    width: 10px;
    height: 10px;
    background-image: url(../imgs/menu.png);
    background-repeat: no-repeat;
    background-size: 10px 10px;
    cursor: ns-resize;
}

.layer .header label {
    margin-right: 3px;
    margin-top: -1px;
    font-weight: bold;
}

.layer .header input {
    flex: 1;
    width: 100%;
    height: 16px;
    padding: 0 !important;
    margin-top: -1.5px;
    color: #3583b9;
    background: transparent !important;
    border: none !important;
    font-weight: bold;
}

.layer .item-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    min-height: 30px;
    padding: 2px;
    border: none !important;
}

.layer .item-container:empty::after {
    content: "Drop items here";
    width: 100%;
    font-size: 12pt;
    line-height: 30px;
    text-align: center;
    color: #aaa;
}

#layer-container .actions {
    display: flex;
}

.item.from-outfit {
    position: relative;
    width: 100px;
    padding: 2px 2px 122px 2px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
}

.item.from-outfit .itemimage {
    position: absolute;
    left: 2px;
    bottom: 20px;
    width: 100px;
    height: 100px;
}

.item.from-outfit .img {
    width: 100px;
    height: 100px;
}

.item.from-outfit .item-actions {
    position: absolute;
    top: 2px;
    right: 1px;
}

.item.from-outfit .item-actions a {
    position: relative;
    top: initial;
    right: initial;
}

.item.from-outfit .item-actions svg {
    width: 12px;
    height: 12px;
    fill: #2879aa;
    border-radius: 50%;
}

.item.from-outfit .item-actions .dropdown-menu-button:hover svg {
    fill: #fff;
    background-color: #2879aa;
}

.item.from-outfit .item-actions .dropdown-menu a {
    display: block;
}

.item.from-outfit .itemtitle {
    padding-right: 24px;
    font-size: 10px;
    line-height: 1.1;
}

.item.from-outfit input[type="text"] {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 20px;
    padding: 0 2px;
    background-color: #fff;
    border: none;
    border-top: 1px solid #ddd;
    font-size: 10px;
}

.default-layer .default-active,
.default-layer.is-active .default-inactive {
    display: none;
}

.default-layer .default-inactive,
.default-layer.is-active .default-active {
    display: inline;
}

.multi-image-container {
    display: flex;
    flex-wrap: wrap;
    width: 200px;
    height: 200px;
}

#dlgWearHistory .multi-image-container {
    width: 160px;
    height: 160px;
}

.multi-image-container > div {
    background-position: 0;
    background-size: 100%;
    background-repeat: no-repeat;
}

#spanPremium svg {
    fill: none !important;
    stroke: #206594;
}

.expires-soon svg {
    stroke: red !important;
}

#btnTypeFilter {
    float: right;
    display: flex;
}

#btnTypeFilter > *:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#btnTypeFilter > *:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.help {
    width: 14px;
    height: 14px;
    margin: 12px 0 0 2px;
    line-height: 14px;
    text-align: center;
    background-color: #d7ebf9;
    color: #2779aa;
    border-radius: 50%;
    cursor: help;
}

.radios {
    margin: 15px 0;
}

.radios label {
    margin: 5px 0 0 !important;
    font-weight: normal !important;
}

.radios .region-list {
    padding-left: 25px;
    margin-top: 5px;
}

#outfit-item-subfolder-list {
    position: absolute;
    display: none;
    width: 100px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    box-sizing: border-box;
}

.test-action button {
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.test-action svg {
    width: 14px;
    height: 14px;
}

#test-log ul {
    padding-left: 12px;
}

#test-log li {
    min-height: 24px;
}

#test-log .tag {
    padding: 2px 4px;
    background-color: #888;
    font-weight: normal;
    line-height: 2;
}

#test-log .tag.add {
    background-color: green;
}

#test-log .tag.remove {
    background-color: red;
}

#test-log svg {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    fill: red;
}

#filter-items .apply-filter {
    right: 42px;
}

#daterange-picker {
    right: 25px;
}

#search-settings {
    right: 4px;
}

#search-settings a {
    padding-bottom: 10px;
    background: none;
}

#search-settings svg {
    width: 12px;
    height: 12px;
    fill: #73a9d0;
}

#search-settings .dropdown-menu {
    background: #fff;
    top: 30px;
    right: -2px;
    padding: 5px 10px;
}

#search-settings ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    font-weight: normal;
}

#search-settings input {
    width: auto;
    padding: 0;
    box-sizing: border-box;
}

#search-settings label > * {
    vertical-align: middle;
}

#tag-colors > div {
    display: flex;
    flex-direction: row;
    gap: 5px;
    margin-bottom: 5px;
}

#tag-colors .color-tags {
    flex: 1;
}

#tag-colors .btn-remove-color {
    margin: 0;
}

.subfolders .is-item-subfolder {
    font-weight: bold;
}

.subfolders .is-body-subfolder:not(.matches-body) {
    display: none;
}

.subfolders.show-all .is-body-subfolder:not(.matches-body) {
    display: inline;
}

.subfolders.show-all .is-body-subfolder.matches-body {
    display: none;
}

[data-action="toggle-subfolders"] {
    cursor: pointer;
}

#dlgPickSubfolders .subfolder-suggestions {
    margin-top: 5px;
}

#dlgPickSubfolders .wear-mode {
    margin-top: 20px;
}

#dlgPickSubfolders .wear-mode label {
    display: flex;
    align-items: flex-start;
    gap: 3px;
    margin-top: 10px;
}

#dlgPickSubfolders .wear-mode input {
    margin: 0;
}

.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

details > div {
    padding-left: 9px;
}

details summary {
    font-weight: bold;
    cursor: pointer;
}

details summary::marker {
    color: #72a7cf;
}

#divQuickStartContainer {
    padding: 10px;
    box-sizing: border-box;
}

#divQuickStartContainer h1 {
    font-size: 10pt;
    color: #3583b9;
    font-weight: bold;
}

#divQuickStartContainer ul {
    padding: 0;
    margin:  0;
    list-style-type: none;
}

#divQuickStartContainer li {
    margin: 8px 0;
}

#divQuickStartContainer li div:not(:first-child) {
    margin-top: 8px;
}

#divQuickStartContainer a {
    color: #3583b9;
}

#divQuickStartContainer p {
    margin-top: 20px;
}

#divQuickStartContainer img {
    display: block;
    max-width: 100%;
    margin: 10px 0;
}

#divQuickStartContainer svg {
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: bottom;
}

#divQuickStartContainer .icon-premium svg {
    fill: none !important;
    stroke: #206594;    
}

#divQuickStartContainer .next-step {
    margin-bottom: 10px;
}

#divQuickStartContainer [data-action="next"] {
    font-weight: bold;
}

@keyframes pulse {
    0%   { opacity: 0.1; }
    50%  { opacity: 0.3; }
    100% { opacity: 0.1; }
}

.highlight-overlay {
    animation: pulse 2s infinite;
    position: absolute;
    background: yellow;
    opacity: 0.4;
    pointer-events: none;
    z-index: 99999999;
}

.waiting {
    color: #aaa;
    font-style: italic;
}

.clr-field {
    width: 100px;
}

[data-coloris] {
    width: 100px !important;
    border: none !important;
    cursor: pointer;
}

.clr-field button {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 3px;
}

.edit-image .buttons .clr-field {
    width: 24px;
    height: 24px;
    float: left;
}

.edit-image .buttons .clr-field > button {
    margin-top: 2px;
}

.edit-image .buttons input {
    background-color: unset !important;
}

.edit-image .buttons button svg {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    fill: #2779aa;
}

.fullscreen-overlay {
    position:fixed;
    display: flex;
    justify-content: center;
    align-items:center;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 50px;
    z-index: 10000000;
    font-size: 16px; 
}

#rembg-progress-overlay {
    background: rgba(255, 255, 255, 0.85);
    color: #555;
}

#txtNewTagName {
    display: block;
    width: 100%;
    margin: 10px 0;
}

/* For testing new title/icons layout */
div.itemiconswrapper {
    float: none;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

#divInventoryFolders .tree-label > span {
    display: flex;
    align-items: center;
}

#divInventoryFolders .tree-label > span > svg {
    width: 12px;
    height: 12px;
    margin-right: 5px;
    fill: #94c9ef;
}

#divInventoryFolders .tree-label .icons {
    margin-left: 10px;
}

#divInventoryFolders [data-action="remove"] {
    display: none;
}

#divInventoryFolders .invworn [data-action="remove"] {
    display: inline;
}

#divAutoImportCacheFile {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#txtFilterImportFolders {
    width: 100%;
    margin-top: 10px;
}

#pAutoImportCacheFile small {
    display: block;
    line-height: 1.2;
}