/**
 * VARIABLES
 */
:root
{
	--background-color: black;
	--font-size: 11px;
	--font-family: verdana;
	--font-color: #CCCCCC;
	--font-color-alt: steelblue;
	--font-color-bright: orange;
	--font-grey: grey;
	--link-color: lightblue;
	--link-color-alt: steelblue;
	--border-color: blue;
	--border-color-alt: steelblue;
	--bright-color: cyan;
	--alert-color: red;
	--highlight-color: rgb(10,13,16);
}

/**
 * GLOBAL STYLE
 */
* { outline:none !important; }
body { background-color:var(--background-color);color:var(--font-color);font-size:var(--font-size);font-family:var(--font-family);line-height:1.25em;overflow-y:scroll; }
textarea { font-family:var(--font-family);font-size:var(--font-size);color:var(--font-color); }
hr { border:none;border-bottom:1px solid var(--border-color); }
a { color:var(--link-color); }
a:hover { color:var(--link-color-alt);text-decoration:none; }
p { margin-bottom:10px;padding:0px;display:block; }
li { line-height:1.5em; }
li::marker { color:var(--font-color-alt); }
strong { font-weight:bold;text-decoration:underline;display:block;margin-bottom:5px; }
small { color:grey; }
.no-select, .tab { -webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none; }

/**
 * LAYOUT
 */
.container { max-width:100%;margin:0px; }
.layout-col { padding:2px; }
.nav { margin-bottom:5px; }
td .nav { margin-bottom:0px; }
.nav { height:25px;line-height:25px;white-space:nowrap;min-width:200px;text-align:left; }
.nav.no-img { padding-left:30px; }
.nav img {
	text-align: right;
	vertical-align: middle;
	margin-right: 5px;
	float: left;
	width: 25px;
	height: 25px;
	object-fit: contain;
}
.content { padding:20px; }
.box-wrapper .box-light { border:2px solid var(--border-color-alt);padding:2px 5px;margin-top:10px; }
.box-wrapper:first-of-type .box-light { margin-top:0px; }
.box-wrapper .box-dark { border:2px solid var(--border-color);padding:2px 5px;margin-bottom:10px; }
fieldset { border:1px solid var(--border-color-alt);margin-bottom:10px;padding-bottom:10px; }
fieldset legend { padding:0px 5px; }
.left-box { width:250px; }
.middle-box { width:800px;max-width:calc(100% - 250px); }
.main-box { padding:20px !important; }
.right-box { width:250px; }
.left-box p, .right-box p { margin:10px; }
.right-box .nav:hover { background-color:rgba(255,255,255,0.1); }
.right-box .box-dark > div { max-height:300px;overflow-y:auto;padding-top:5px; }
@media only screen and (max-width:767px)
{
	.left-box, .middle-box, .right-box { width:100% !important;max-width:none; }
	.box-wrapper:first-of-type .box-light { margin-top:10px; }
	.box-wrapper .box-dark { margin-bottom:0px; }
	.layout-col { padding:0px; }
}
@media only screen and (min-width:2000px)
{
	
}

/**
 * FORMS
 */
.input { border-radius:0px;margin-bottom:10px;padding:10px 10px 7px 10px;width:100%;display:block; }
.input, input { border:1px solid var(--border-color-alt);background-color:transparent;color:var(--font-color-alt);font-size:var(--font-size); }
.input:focus, .button:hover { color:var(--font-color);border:1px solid var(--border-color); }
.button { color:var(--font-color);padding:10px 25px;cursor:pointer; }
.button, .checkbox .input, .checkboxes .input, .radio .input, .radios .input { width:auto;display:inline-block;margin:5px 10px 0px 10px; }
.checkbox .input, .radio .input { float:left;margin-top:0px;transform:scale(1.3); }
.checkbox, .checkbox * { cursor:pointer; }
.checkbox:hover .checked, .checkbox:hover .unchecked { color:var(--border-color); }
.checkbox.unchecked .checked { visibility:hidden; }
.checkbox.checked .unchecked { visibility:hidden; }
label { padding-left:1px;color:var(--font-color); }
.textbox-label { margin-bottom:-1px;margin-top:10px; }
form .textbox-label:first-of-type { margin-top:0px; }
.checkbox-label, .ratio-label { margin-bottom:0px; }
form .button { margin-top:1.1em; }
.button-wrapper { text-align:center; }
.text-right .button-wrapper { text-align:right; }
.text-left .button-wrapper { text-align:left; }
.panel-body.form div:first-of-type { margin-top:-5px; }
textarea, .ace_editor { height:100px;min-height:50px;resize:vertical; }
.ace_editor { min-height:300px; }

.dropdown-wrapper { margin-bottom:10px; }
.dropdown-wrapper .input { margin-bottom:0px; }
.dropdown-options { margin-top:-1px;padding:0px;position:absolute;border-radius:0px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;display:none;z-index:999; }
.dropdown-options { background-color:black;border:1px solid var(--border-color); }
.dropdown-option { padding:7px 15px 7px 15px; }
.dropdown-option, .dropdown-option { cursor:pointer; }
.dropdown-option:hover { background-color:var(--border-color-alt);color:var(--font-color); }
.dropdown-wrapper .empty { display:none;padding:10px;font-style:italic;color:var(--font-color-alt); }
.dropdown:focus { border-bottom-left-radius:0px;border-bottom-right-radius:0px; }

/**
 * TABLES
 */
.datatable { white-space:nowrap; }
.datatable > thead > tr > th { text-align:right;padding:5px 20px;padding-bottom:0px;font-weight:normal;border-bottom:1px solid var(--border-color-alt); }
.datatable > thead > tr > th:last-of-type { padding-left:20px;width:100%;text-align:left; }
.datatable > thead > tr:nth-of-type(2) > th { padding:0px;padding-left:0px; }
.datatable > tbody > tr:hover { background-color:var(--highlight-color); }
.datatable > tbody > tr > td { text-align:right;vertical-align:middle;padding:5px 20px; }
.datatable > tbody > tr > td:last-of-type { padding-left:20px;width:100%;text-align:left; }
.datatable.has-input > tbody > tr > td.has-input { padding:0px;width:auto; }
.datatable label { display:none; }
.datatable hr { margin:0px;margin-bottom:5px;width:100%; }
.datatable input, .datatable input:focus { border:1px solid transparent;margin:0px;padding:5px 10px; }
.datatable button { margin:0px; }
.datatable .deleted { color:red; }
.pretty { width:100%; }
.pretty > thead { color:silver; }
.pretty > thead > tr > th { padding:5px 20px;padding-bottom:0px;font-weight:normal;border-bottom:1px solid var(--border-color-alt); }
.pretty > tbody > tr:hover { background-color:var(--highlight-color); }
.pretty > tbody > tr > td { vertical-align:middle;padding:5px 20px; }
.pretty input[type=checkbox] { margin:0px; }
.pretty .dropdown-wrapper { margin-bottom:0px; }
.pretty.tracker td { text-align:right; }
.pretty.tracker td:first-of-type { width:65%; }
.hq-table { width:100%; }
.hq-table td:first-of-type { text-align:right;width:50%;padding-right:4px; }
.armory td:first-of-type { text-align:right;padding-right:5px; }
.caerleon { border-collapse:collapse; }
.caerleon td { padding:0px;line-height:0; }
.caerleon img { width:80px;height:80px;margin:0px; }
.attribute input { color:white; }
.attribute-defaulted input, .new-attribute input { color:grey;font-style:italic; }
.overflow-x { overflow-x:auto; }

/**
 * DIVS
 */
.flash { cursor:pointer;margin-bottom:20px;color:lime; }
.flash.error { border-color:red;color:red; }
.flash:hover { border-color:var(--border-color); }
.padded { padding:10px 20px; }
.tabs > .tab { display:table-cell;border:1px solid var(--background-color);cursor:pointer;padding:5px 10px;margin-right:-5px;color:var(--font-grey);background-color:rgb(0,0,50); }
.tabs > .tab:hover { color:white; }
.tabs > .tab.selected { border-color:var(--border-color-alt);color:white;border-bottom:1px solid var(--background-color);z-index:100;background-color:var(--background-color); }
.tabs > .tab-content { border:1px solid var(--border-color-alt);display:none;padding:10px;max-width:100%;overflow-x:auto; }
.tabs > .tab-content.selected { display:block;margin-top:-1px;z-index:1; }
.convo { border-radius:5px;padding:10px;margin:10px;width:70%;background-color:transparent; }
.convo-in { margin-right:25%;border:1px solid var(--border-color); }
.convo-out { margin-left:25%;border:1px solid var(--border-color-alt); }
.message p { margin-top:5px;padding-top:0px;padding-bottom:0px; }
.message p:last-of-type { margin-bottom:10px; }
#chat-room-lg { height:50vh;overflow-y:auto; }
#chat-room-sm { height:300px;overflow-y:auto; }
.chat-message.new-day { border-top:1px solid var(--border-color-alt); }
.chat-message { border-bottom:1px solid #222222;padding:3px 20px; }
.chat-message:last-of-type { border-color:transparent; }
.chat-message:hover { background-color:rgba(255,255,255,0.1); }
.chat-message .message p { margin:0px; }
.chat-message .row > div { padding:0px; }
#chat-room-sm .message { display:inline-block; }
#chat-room-sm .chat-message { padding:3px; }
#chat-form-sm .message { margin-top:5px;margin-bottom:3px; }
#event-log { max-height:125px; }
#event-log b { font-weight:normal;color:white; }
#event-log hr { border-color:#222222;margin:2px; }
.delete-chat { color:red; }
.panel { border:1px solid var(--background-color); }
.panel > .panel-heading { background-color:var(--background-color);border:1px solid var(--border-color-alt); }
.panel > .panel-body { background-color:var(--background-color);border:1px solid var(--border-color); }
.tooltip { cursor:pointer; }
#tooltip { position:absolute;background-color:var(--background-color);border:1px solid var(--border-color);line-height:1em;padding:3px 5px;box-shadow:5px 5px 10px -5px black;color:var(--font-color); }
.pre { white-space:pre-wrap; }

/**
 * TEXT
 */
.text-light { color:var(--link-color); }
.text-dark { color:var(--border-color); }
.text-bright { color:var(--bright-color); }
.text-white { color:white; }
.text-grey, #nav small { color:var(--font-grey); }
.text-strike { text-decoration:line-through; }
.no-wrap { white-space:nowrap; }
p.quote { margin:25px;position:relative;color:white; }
p.quote > quote:first-of-type {
	position:absolute;font-size:8px;color:grey;
	top:-3px;
	left:-15px;
	-webkit-transform:rotateY(180deg);
	-moz-transform:rotateY(180deg);
	-o-transform:rotateY(180deg);
	-ms-transform:rotateY(180deg);
	unicode-bidi:bidi-override;
	direction:rtl;
}
p.quote > quote:last-of-type { position:absolute;font-size:8px;color:grey;margin-top:-2px;margin-left:5px; }
.red { color:red; }
.grey { color:grey; }
.silver { color:silver; }
.green { color:green; }
.lime { color:lime; }
.gold { color:gold; }
.yellow { color:yellow; }
.crystals { color:aqua; }
.diamonds { color:pink; }
.algameth { color:fuchsia; }
.etherium { color:green; }
.moldavite, .talisman, .iridium, .ushabtis, .scrolls { color:tan; }
.artifacts, .soulstones { color:#FFB07C; }
.eggs { color:teal; }
.gourds { color:saddlebrown; }
.mana { color:green; }
.rewards { color:orange; }
.reputation { color:red; }
.soulstone-effect { color:#FFB07C;font-style:italic; }
span[class^="gray_"][class$="_soulstone"] { color:silver; }
span[class^="blue_"][class$="_soulstone"] { color:dodgerblue; }
span[class^="green_"][class$="_soulstone"] { color:green; }
span[class^="purple_"][class$="_soulstone"] { color:darkviolet; }
span[class^="gold_"][class$="_soulstone"] { color:gold; }
/* small.decimal { position:absolute; } */

/**
 * IMAGES
 */
img { max-width:100%; }
img.main-img { margin-top:50px;margin-bottom:25px; }
img.main-img:not(.large) { max-width:100px;height:100px; }

/**
 * MISC SPECIFICS
 */
.tiny-tokebag { display:inline-block;width:auto;margin:0px;padding-top:10px;padding-bottom:4px; }
.tiny-tokebag > span { padding:5px 10px;background-color:#0f0f0f;display:inline-block;margin-bottom:5px; }
.tiny-tokebag > legend { color:orange; }