body {
background-color: #181128;
background-color:#181128;

/*background-color: #181128;*/
/*background-color: #242641;*/
font-family: "Open Sans", sans-serif;
font-size: 16px;
color: #ACB2BE;
height: 100vh;
margin: 0;
}

a:link {
color: #3478FF;
background-color: transparent;
text-decoration: none;
}

a:visited {
color: #3478FF;
background-color: transparent;
text-decoration: none;
}

a:hover {
color: #3478FF;
background-color: transparent;
text-decoration: underline;
}

a:active {
color: #3478FF;
background-color: transparent;
text-decoration: underline;
}

.sshots-container {
display: flex;
flex-wrap: wrap;
/*background-color: DodgerBlue;*/
}

.sshots-container > div {
/*background-color: #f1f1f1;*/
width: 100%;
margin: 0px;
margin-bottom:40px;
text-align: left;
line-height: 75px;
font-size: 20px;
padding-right:10px;
}


.blink_anim {
animation: blinker .70s linear 4;

}


.blink_anim_temp {
animation: blinker .70s linear 3;
animation: colorer .70s 3 alternate linear;
}

.color_anim {
animation: colorer .50s 6 alternate linear;
}

@keyframes blinker {
50% { opacity: 0; }
}

@keyframes colorer {
to {
color: rgb(255, 255, 255);
}
}


/* OV UI  START //////////////////////////////////////////////////////////////////////////////////////////////////// */
.consortiumUI {
background-color: #181128!important; /* -- rad purple!*/
// background-color: #271106!important;
}

.consortium_image {
background-color:#23252B;
text-align: center;

}

.consortium_cancel {
color:#EA9739;
cursor:pointer;

}
.consortium_trend {
background-color:#271106;


}

.consortium_trend_buttons{
font-size:12px;
}

.consortium_td {
padding-right:10px;
}

.starpanel {
/*background-color: #181128!important; -- rad purple!*/

background-color: #181128!important;
}

.site_content {
padding:10px;

}

.ov_button {
box-shadow: 0 0 0 1pt #666666;
border-radius: 2pt;
outline: none;
height:45px;
padding: 0;
margin: 0;
cursor:pointer;

}

.ov_button_cta {
box-shadow: 0 0 0 1pt #666666;
background-color: #0B1720;
border-radius: 3pt;
color:#ffffff;
outline: none;
height:45px;
padding: 0;
margin: 0;
cursor:pointer;

}

.ov_highlight {
color: #FFFC8C;
}


.conContainer {
outline: 0px solid #e9e9e9;
height:50px;
margin-left:8px;
margin-top:5px;
color:#ACB2BE;
background-color: #181128;
}


.conHeader {
position: absolute;
top: 5;
left: 5px;
font-size: 10px;
color:#ffffff;
margin-left: 0px;
}

.emphasis_blue {
background-color: #212160;
}

.emphasis_red {
background-color: #6E282C;
}


.map_grid_label {
font-size: 10px;

}

.map_grid {
border-radius: 10%;
width:4px;
height:4px;
margin-left:-2px;
margin-top:-2px;
background-color: #aaa;

}

.map_grid_selected {
width:4px;
height:4px;
margin-left:-2px;
margin-top:-2px;
background-color: #ffff;
}

.map_grid_2x {
border-radius: 10%;
width:8px;
height:8px;
margin-left:-2px;
margin-top:-2px;
background-color: #aaa;

}

.map_grid_2x:hover {
background-color: blue;
}

.map_grid_selected_2x {
width:8px;
height:8px;
margin-left:-2px;
margin-top:-2px;
background-color: #ffff;
}

.map_grid:hover {
background-color: blue;
}



.map_grid_selected:hover {
background-color: blue;
}

.map_grid_selected_2x:hover {
background-color: blue;
}

#uiMap {
border-radius: 10px;

overflow: visible;
z-index: 1;
position: absolute;
left: 0%;
bottom: 25%;



}

#mapRender1 {
overflow: visible;
margin-top: -300px;
margin-left: 300px;
}

/* OV UI  END   //////////////////////////////////////////////////////////////////////////////////////////////////// */

.spellItem {

outline: 0px solid #e9e9e9;
background-color: #23252B;
height:50px;
margin-left:8px;
margin-top:5px;

font-family: "Concert One", sans-serif;
font-size: 22px;
color:#B281D3;

}


.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}


.textWindow {
/*
margin-left: 100px;
margin-right: 100px;
*/

/*border:1px dotted #00f;*/

bottom:0; position:absolute; z-index:10;
margin-left:27%;
width:46%;
margin-bottom: 25px;
background-color: rgba(0, 0, 0, .8);
/*border: 3px solid #ADB3BD;*/
border: 3px solid #ADB3BD;
outline: 3px solid #000000;
border-radius:15px;
box-shadow: 2px 3px rgb(0 0 0 / 0.6);
display: none;

opacity: 1;
-webkit-transition: opacity 3s ease-in;
-moz-transition: opacity 3s ease-in;
-ms-transition: opacity 3s ease-in;
-o-transition: opacity 3s ease-in;
transition: opacity 3s ease-in;


}

.textWindow_fade {
opacity: 0;
}



.gameWindow_header {
margin:10px;
padding-top:0px;
margin-left:20px;
margin-bottom:10px;
font-family: "Concert One", sans-serif;
font-size: 18px;
color:#B281D3
}

.gameWindow_nav {

position: absolute;
bottom: -60;
right:0;

margin:10px;
margin-top:0px;
padding-top:0px;
margin-left:20px;
margin-bottom:10px;
font-family: "Concert One", sans-serif;
font-size: 24px;
color:#B281D3
z-index:10;



}


.textWindow_header {
margin:10px;
padding-top:20px;
margin-left:20px;
margin-bottom:10px;
font-family: "Concert One", sans-serif;
font-size: 30px;
color:#B281D3
}

.inventoryWindow_paragraph {
margin:10px;
margin-bottom:10px;
margin-left:0px;
font-family: "Sen", sans-serif;
font-size: 18px;
text-shadow: 2px 2px 0px rgba(11,11,11, 0.1);
}

.textWindow_paragraph {
margin:10px;
margin-bottom:10px;
margin-left:20px;
font-family: "Sen", sans-serif;
font-size: 24px;
text-shadow: 2px 2px 0px rgba(11,11,11, 0.1);
}


.sendButton {
border-radius: 5px;
background: #a4a4a4;
padding: 2px;
width: 40px;
height: 20px;
color: #ffffff;
margin-top:0px;
font-size: 12px;
text-align: center;
}



.actionActor {
color: #B281D3;
}



#progressBar {
width: 1%;
height: 30px;
/*background-color: green;*/
background-color: #F74BFF;
}


.actionPane {

visibility:visible;

background-color: rgba(51,86,102,0.9);
z-index: 9;
padding: 0px;
overflow: auto;

height: 45px;
width: 240px;
position: absolute;
left: 0px;

color: #e9e9e9;
box-shadow: 3px 4px 6px 0px rgba(0,0,0,0.14)

font-size: 14px;
font-family: "Concert One", sans-serif;
text-align: left;
padding-left:5px;
padding-right:5px;

border-radius: 5px;


}

#actionPanel {

background: #8AC007;
background: rgba(40, 40, 40, 0.9);
padding: 0px;
overflow: auto;
z-index: 9;
height: 200px;
width: 265px;
position: absolute;
left: 5%;
top: 15%;
text-align: left;
overflow:hidden;


}


.term_paragragh {
margin:0px;

margin-bottom:10px;
font-size: 14px;
text-shadow: 1px 1px 0px rgba(25,25,25, 0.2)

}


#termWindow {


background: rgba(18, 19, 32, 0.5);
padding: 0px;
overflow: auto;
z-index: 9;
height: 225px;
width: 200px;
position: absolute;
left: 40px;
top: 20%;
border-radius: 5px;
resize: both;



}

#termWindowheader {
padding: 10px;
margin:-4px;
cursor: move;
z-index: 10;

background: rgba(40, 40, 40, 0.4);
}


.sendButton{
user-select: none;
color: #666666;
cursor: pointer;
float: right;
font-size:10px;
margin-right:5px;
height:17px;
width:30px;
background: #6DB3D5;
}


#uiObjectSelector, #uiTerrainEditor {
border-radius: 10px;
background: #8AC007;
background: rgba(40, 40, 40, 0.9);
padding: 5px;
overflow: auto;
z-index: 9;
height: 300px;
width: 250px;
position: absolute;
left: 40px;
top: 5%;

}


.editor_input{
border-radius: 0px;
border-color: #000000;
font-size: 16px;
line-height: 26.666666667px;
padding: 0px;
width: 100%;

/* scale down by 12/16 = 75% */
transform: scale(1.0);
transform-origin: left top;

/* remove extra white space */
margin-bottom: 0px;
margin-right: 0px!important;
background: #1B1D22;
color: #ACB2BE;
}



.slidecontainer {
width: 75%;
}

.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}

.slider:hover {
opacity: 1;
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #40454E;
cursor: pointer;
}

.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #04AA6D;
cursor: pointer;
}

.textBox2{
display: none;
}

hr.solid {
border-top: 1px solid #bbb;
}

.selector {
display: none; /* Hidden by default */
position: absolute; /* Stay in place */
z-index: 1; /* Sit on top */
width: 250px;
max-height:310px;
min-height:70px;
border: 2px solid #ADB3BD;
border-radius:5%;
background-color: #181128;
overflow: scroll;
margin-left:8px;
margin-top:15px;
margin-bottom:20px;
color:#ACB2BE;

}

/* Hide scrollbar for Chrome, Safari and Opera */
.selector::-webkit-scrollbar {
display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.selector {
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
}

.selectorHeader {
background-color: #43253E;
padding-top:0px;
padding-bottom:0px;
padding-left:5px;
height:45px;
color: #A97DC8;
font-family: "Concert One", sans-serif;
font-size: 22px;
/*text-shadow: 2px 2px 0px rgba(11,11,11, 0.1)*/

}

.inventoryHeader {
padding-top:0px;
padding-bottom:0px;
padding-left:5px;
height:45px;
color: #A97DC8;
font-family: "Concert One", sans-serif;
font-size: 22px;

}

.inventorySelectorRow {
border-bottom: 2px solid #43253E;
vertical-align:middle;
}


.selectorItem {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */

outline: 0px solid #e9e9e9;
background-color: #181128;
height:50px;
width: 245px;
padding-left:8px;
padding-top:5px;
color:#D2D9E8;
cursor:pointer;
font-family: "Concert One", sans-serif;
font-size: 22px;



}


.modal_progress {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 10px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

.modal2 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
/*    Location of the box */
padding-top: 125px;
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

.center {
border: 0px solid;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
}

.center_zero {
border: 0px solid;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);

}


.heading3 {
/*font-family: Roboto-Black;*/
font-size:18px;
text-shadow: 1px 1px 6px #000000;
/*color:#ffffff;*/
padding:0;
margin-left:-15px;
}


.modal-about {

position: absolute;
top: 50%;
height:80%;

display: none; /* Hidden by default */

z-index: 2; /* Sit on top */

overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(18,19,32,0.79);

/* background-color: #23252B; */



width: 400px;

border: 0px solid #888;


box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.4);

padding:0;

}

.modal-share {

position: absolute;
top: 30%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
height:400px;

display: none; /* Hidden by default */

z-index: 2; /* Sit on top */

overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(18,19,32,0.99);

/* background-color: #23252B; */



width: 600px;

border: 0px solid #888;


box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.4);


}



/* Modal Content */
.modal-content {
background-color: #23252B;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 300px;
}

/* Modal Content 2 -- lag */
.modal-content2 {
/* background-color: #23252B; */
background-color: rgba(0,0,0,0);
background-image: url('../images/spinner_anim.gif');;
background-repeat:no-repeat;
background-size:100%;
margin: auto;
padding: 0px;
border: 0px solid #888;
width: 400px;
height: 400px;
}



.modal-contentProgress {
background-color: #23252B;
margin: auto;
padding: 0px;
border: 0px solid #888;
width: 50%;
vertical-align: middle;
margin-top:250px;

}




.arrow-left {
width: 0;
height: 0;
cursor: pointer;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;

border-right:15px solid #3F454F;
}

.info-msg {
display: block;
margin: 30px 0px 0px 0px;
background: #2D313B;
color: #C99B6E;
font-size: 12px;
padding: 9px 15px;
border-radius: 2px 2px;
-moz-border-radius: 2px 2px;
line-height: 140%;
}

.error-msg {
display: block;
margin: 30px 0px 15px 0px;
background: #c1462e;
color: #ffffff;
font-size: 12px;
padding: 9px 15px;
border-radius: 2px 2px;
-moz-border-radius: 2px 2px;
line-height: 140%;
}

.warning-msg{
display: block;
margin: 30px 0px 15px 0px;
background: #AF833C;
color: #fff;
font-size: 12px;
padding: 9px 15px;
border-radius: 2px 2px;
-moz-border-radius: 2px 2px;
line-height: 140%;
}

input[type=submit], input[type=button] {
display: inline-block;
background: #f5f5f5;
border: 0px;

-moz-border-radius: 2px;
border-radius: 2px;

padding: 10px 19px;
cursor: pointer;

font-size: 12px;
line-height: 120%;
font-weight: bold;
color: #7e7e7e;
-moz-transition: all 0.1s;
-webkit-transition: all 0.1s;
-o-transition: all 0.1s;
}

input.button-action {


background: #F74FFF;
border: 0px;

border-radius: 3px;

padding: 10px 19px;
cursor: pointer;

font-size: 16px;
line-height: 120%;
font-weight: bold;
color: #ffffff;
-moz-transition: all 0.1s;
-webkit-transition: all 0.1s;
-o-transition: all 0.1s;
}

input.button-disabled {
display: inline-block;
background: #f5f5f5;
border: 0px;
border-top: 1px solid rgba(255,255,255,0.8);
-moz-border-radius: 2px;
border-radius: 2px;

padding: 10px 19px;
cursor: pointer;
text-shadow: 0px 1px 0px #fff;
font-size: 12px;
line-height: 120%;
font-weight: bold;
color: #cecece;
-moz-transition: all 0.1s;
-webkit-transition: all 0.1s;
-o-transition: all 0.1s;
}



input.button-action-disabled {

background: #8b99aa;
border: 0px;
border-top: 0px solid rgba(255,255,255,0.8);
border-radius: 2px;
box-shadow: 0px 0px 0px 1px #d3d3d3, inset 0px -8px 14px 0px rgba(0,0,0,0.04);
padding: 10px 19px;
cursor: pointer;
text-shadow: 0px 0px 0px #0f0f0f;
font-size: 12px;
line-height: 120%;
font-weight: bold;
color: #cecece;
-moz-transition: all 0.1s;
-webkit-transition: all 0.1s;
-o-transition: all 0.1s;
}

textarea {
resize: vertical; /* user can resize vertically, but width is fixed */
background-color: #1B1D22;
color: #ACB2BE;
border-color: #000000;
font-family: "Open Sans", sans-serif;
}

input[type="text"] {
/* enlarge by 16/12 = 133.33% */
border-radius: 6.666666667px;
border-color: #000000;
font-size: 16px;
line-height: 26.666666667px;
padding: 6.666666667px;
width: 133.333333333%;

/* scale down by 12/16 = 75% */
transform: scale(0.75);
transform-origin: left top;

/* remove extra white space */
margin-bottom: -10px;
margin-right: -33.333333333%;
background: #1B1D22;
color: #ACB2BE;
}


input[type="password"] {
/* enlarge by 16/12 = 133.33% */
border-radius: 6.666666667px;
border-color: #000000;
font-size: 16px;
line-height: 26.666666667px;
padding: 6.666666667px;
width: 133.333333333%;

/* scale down by 12/16 = 75% */
transform: scale(0.75);
transform-origin: left top;

/* remove extra white space */
margin-bottom: -10px;
margin-right: -33.333333333%;
background: #1B1D22;
color: #ACB2BE;
}


.pn {
color: #C89B6E;
}

.roomlabel {
background-color: #2D313B;
background-image: linear-gradient(to right, #2D313B , #23252B);
color: #BB7ED8;
margin-left:11px;
margin-right:15px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 4px;

}

.tooltip_bottom {
position: relative;
display: inline-block;
border-bottom: 0px dotted black;
}

.tooltip_bottom .tooltiptext_bottom {
visibility: hidden;
width: 120px;
background-color: #4E829A;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}

.tooltip_bottom .tooltiptext_bottom::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #4E829A transparent transparent transparent;
}

.tooltip_bottom:hover .tooltiptext_bottom {
visibility: visible;
}


.tooltip {
position: relative;
display: inline-block;
border-bottom: 0px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #4E829A;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 5px;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}

.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #4E829A transparent;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

.box {
display: flex;
flex-flow: column;
height: 100%;
}

.box .row {
border: 0px dotted grey;
}

.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}

.box .row.text {
display: flex;
flex: 1 1 auto;
flex-direction: column;
overflow-y: scroll;
height:100px;

}

.box .row.footer {
flex: 0 1 40px;
}



.chatStatus {
font-size: 10px;
margin-left: 10px;
margin-top: -5px;
}

.inventoryItem {

outline: 0px solid #e9e9e9;
background-color: #181128;
height:50px;
margin-left:8px;
margin-top:5px;
color:#ACB2BE;

}

.inventoryPanel {
display:none;
outline: 0px solid #e9e9e9;
background-color: #181128;
overflow: hidden;
margin-left:8px;
margin-top:5px;
color:#ACB2BE;
}

.inventoryItem_h {

outline: 0px solid #e9e9e9;
background-color: #181128;
height:50px;
margin-left:8px;
margin-top:5px;
color:#ACB2BE;

}

.menuItem_h {

outline: 0px solid #e9e9e9;
background-color: #181128;
height:50px;
margin-left:8px;
margin-top:5px;
color:#ACB2BE;

}



.inventoryItem_c {

outline: 0px solid #e9e9e9;
background-color: #181128;
height:100%;


color:#ACB2BE;

}

.inventoryContainer {
outline: 0px solid #e9e9e9;
background-color: #181128;
height:50px;
margin-left:8px;
margin-top:5px;
color:#ACB2BE;
}


.gameContextButton {
outline: 0px solid #e9e9e9;
background-color: #e9e9e9;
height:70px;
margin-left:8px;
margin-top:5px;
color:#ACB2BE;
}

.inventoryContextButton {
outline: 0px solid #e9e9e9;
background-color: #e9e9e9;
height:50px;
margin-left:8px;
margin-top:5px;
color:#ACB2BE;
}


.inventoryImage {
width: 50px;
height: 50px;
outline: 0px solid #e9e9e9;
cursor: pointer;
}

.gameImage {
width: 65px;
height: 50px;
outline: 0px solid #e9e9e9;
cursor: pointer;
}

.gameImageL {
width: 300px;
height: 150px;
outline: 0px solid #e9e9e9;
cursor: pointer;
}

.inventoryImageL {
width: 25%;
height: 25%;
outline: 0px solid #e9e9e9;
cursor: pointer;
}

.inventoryTD {
text-align:left;
word-wrap:break-word;
width:200px;
padding-left:10px;
cursor: pointer;
}

.inventoryContext {
padding-left:10px;
width:30px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}

.label {
margin-left:7px;
}

/*
img {
width: 100%;

height: auto;
}
*/

.colorPicker {
border:3px solid #888888;
background-color: #ff00ff;
height: 30px;
width: 30px;
outline: 5px solid transparent;
cursor: pointer;
}

.colorPickerMenu {
z-index: 1;
position: absolute;
left: 70;
right: 0;
top: 170;
margin-top: 0px;
display: none;
padding: 8px;

width: 220px;

background-color: #000;
color: white;
}

.colorPickerHair {
z-index: 1;
position: absolute;
left: 50;
right: 0;
top: 190;
margin-top: 0px;
display: none;
padding: 8px;

width: 180px;

background-color: #000;
color: white;
}

.colorPickerSkin {
z-index: 1;
position: absolute;
left: 50;
right: 0;
top: 160;
margin-top: 0px;
display: none;
padding: 8px;

width: 180px;

background-color: #000;
color: white;
}

.colorPickerPants {
z-index: 1;
position: absolute;
left: 50;
right: 0;
top: 200;
margin-top: 0px;
display: none;
padding: 8px;

width: 180px;

background-color: #000;
color: white;
}

.colorPickerShirt {
z-index: 1;
position: absolute;
left: 50;
right: 0;
top: 200;
margin-top: 0px;
display: none;
padding: 8px;

width: 180px;

background-color: #000;
color: white;
}

.colorPickerSleeves {
z-index: 1;
position: absolute;
left: 50;
right: 0;
top: 200;
margin-top: 0px;
display: none;
padding: 8px;

width: 180px;

background-color: #000;
color: white;
}

.colorPickerBelt {
z-index: 1;
position: absolute;
left: 50;
right: 0;
top: 200;
margin-top: 0px;
display: none;
padding: 8px;

width: 180px;

background-color: #000;
color: white;
}

.colorPickerShoes {
z-index: 1;
position: absolute;
left: 50;
right: 0;
top: 200;
margin-top: 0px;
display: none;
padding: 8px;

width: 180px;

background-color: #000;
color: white;
}

.colorPickerFace {
z-index: 1;
position: absolute;
left: 50;
right: 0;
top: 200;
margin-top: 0px;
display: none;
padding: 8px;

width: 180px;

background-color: #000;
color: white;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}


.btnBookActive {
color: #4A72AF;
cursor: pointer;
}

.btnBookInactive {
color: #23252B;
}


.book{
height: 100%;
width: 600px!important;
color: #CCCCCC;



}

.stupid{
height: 500px;
width: 800px;
position:absolute;
z-index: 9;
top: 0;

background-color: #fff;
border: 1px solid #e9e9e9;

margin: auto 1.5em;
display: inline-block;
}

.sidePanelContainer{
background: #000000;
}


.sidepanel {
height: 100%;
width: 0;
float: right;
z-index: 10;
top: 0;
right: 0;
background-color: #181128;

color: #ACB2BE;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
border-top: 1px solid #e9e9e9;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
position: absolute;
display:none;
}


.sideheader {
position: absolute;
top: 5;
left: 5px;
font-size: 26px;
margin-left: 0px;
}

.sidepanel .closebtn {
cursor:pointer;
color:#6EB3D6;
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

.triangle-up {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid red;
}

.roomClass {
background-color: #e9e9e9;
font-family: "Open Sans", sans-serif;
color: #000000;

padding:7px;
border-radius: 3px;
margin-bottom: -30px;
margin-top: 30px;

}

.locationClass {
background-color: #e9e9e9;
font-family: "Open Sans", sans-serif;
color: #000000;

padding:7px;
margin-left: 20px;
margin-right: 20px;
border-radius: 3px;
margin-bottom: -0px;
margin-top: 0px;

}

p {
margin-left: 0px;
}

#play {
border-radius: 10px;
background: #f4f4f4;
padding: 0px;
width: 330px;
height: 550px;
overflow: auto;
}

/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #e5e5e5;
}

/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}

.tab button2 {
background-color: #FF0000;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}


.btnDisplayText{
background-color: #48658A;
text-align: center;
font-size: 24px;
height:40px;
color: #ffffff;
border-radius: 5px;
margin-top:10px;
margin-left:20px;
margin-right:20px;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
cursor: pointer;
}


.btnGameMenu{
text-align: center;

color: #ACB2BE;
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
margin-left:10px;
padding-top: 5px;
padding-bottom: 5px;
cursor: pointer;
}

.btnGameMenuCTA{
text-align: center;
background-color: #6EB3D6;
color: #2E3239;
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
cursor: pointer;
}

.btnCTA {
background-color: #6EB3D6;
color: #2E3239;
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px;
cursor: pointer;
}

.btnGameMenu{
text-align: center;
background-color: #3F454F;
color: #ACB2BE;
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
cursor: pointer;
}

.btn {
background-color: #3F454F;
color: #ACB2BE;
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px;
cursor: pointer;
}

.aboutClass {
background-color: #1D4562;
font-family: "Open Sans", sans-serif;
color: #ffffff;
padding:15px;
border-radius: 3px;

}

.aboutClassLight {
background-color: #ffffff;
font-family: "Open Sans", sans-serif;
color: #111111;
padding:15px;
border-radius: 3px;
margin-top: -15px;

}



.scoreClass {
background-color: #FFE89F;
font-family: "Open Sans", sans-serif;
color: #000000;
padding:15px;
border-radius: 3px;

}

.scoreClassUp {
background-color: #AAFBD1;
font-family: "Open Sans", sans-serif;
color: #000000;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
border-radius: 5px;

}

.scoreClassDown {
background-color: #A66C6D;
font-family: "Open Sans", sans-serif;
color: #ffffff;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
border-radius: 5px;

}





#toast {
visibility: hidden; /* Hidden by default. Visible on click */
min-width: 250px; /* Set a default minimum width */
margin-left: -125px; /* Divide value of min-width by 2 */
background-color: #333; /* Black background color */
color: #fff; /* White text color */
text-align: center; /* Centered text */
border-radius: 2px; /* Rounded borders */
padding: 16px; /* Padding */

z-index: 1; /* Add a z-index if needed */
left: 50%; /* Center the toast */
bottom: 30px; /* 30px from the bottom */
position: fixed; /* Sit on top of the screen */
}

/* Show the toast when clicking on a button (class added with JavaScript) */
#toast.show {
visibility: visible; /* Show the toast */
/* Add animation: Take 0.5 seconds to fade in and out the toast.
However, delay the fade out process for 2.5 seconds */
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the toast in and out */
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}


/* NEW NAVIGATION MENU */

.mnavbar {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f5f5f5;
font-size: 17px;
font-family: "Open Sans", sans-serif;

}


.mnavitem {
display: inline-block;
color: black !important;
text-align: center;
padding: 14px 16px;
text-decoration: none !important;
}


.mnavitem:hover, .mnavdropdownitem:hover {
background-color: #ddd;
cursor: pointer; cursor: hand;
text-decoration: none;
color: black;

}

.mnavdropdown {
display: inline-block;
}

.mnavdropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 12;
margin-right: 42px;
}



.mnavdropbtn {
background-color: #f5f5f5;
color: white;
padding: 16px;
font-size: 17px;
font-family: "Open Sans", sans-serif;
border: none;
cursor: pointer;
color: #000000;
}

.mnavdropbtn:hover {
background-color: #ddd;
}

.mnavdropdownitem {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
text-align: left;
width: 100%;
}



.mnavdropdown-content a:hover {background-color: #ddd}

.mnavdropdown:hover .mnavdropdown-content {
display: block;
}

/*NAV END */


.flex-item:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
background-color: #2a73b9;
}

#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 8px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 6px 6px 8px 40px;
border: 1px solid #ddd;
margin-bottom: 4px;
}

img {
border-radius: 5px 5px 0 0;
}

.cardcontainer {
padding: 12px 12px;
overflow: hidden;
color: #000000;
word-break:break-all;
margin-top: -15px;
}
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
height: 100%;
background-color: #23252B;
word-break:break-all;
}

.flex-item {
background-color: #23252B;
width: 200px;
height: 245px;
margin: 20px;
box-shadow: 0 4px 4px 0 rgba(0,0,0,0.05);
transition: 0.3s;
word-break:break-all;
border-radius: 5px;
}









#main {
width: 100%;
height: 100%;
position: relative;
overflow: scroll;


}

#mainbody {

background-color: #ff0000;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color:    #999999;
font-style: italic;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:    #999999;
opacity:  1;
font-style: italic;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:    #999999;
opacity:  1;
font-style: italic;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color:    #999999;
font-style: italic;
}
::-ms-input-placeholder { /* Microsoft Edge */
color:    #999999;
font-style: italic;
}

#login {
border-radius: 0px;
background: #ddd;
margin-right: 35px;
display: float;
float:right;
position:absolute;
z-index: 1;
right: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

#createAccount {
border-radius: 10px;
background: #f1f1f1;
}

#accountContent {
margin-left:15px;
padding-right:25px;
}

#login_old {
border-radius: 10px;
background: #8AC007;
background: rgba(40, 40, 40, 0.2);
padding: 110px;
width: 200px;
height: 150px;
z-index: 10;
position: absolute;
right: 0;
}

#txtOutput {
overflow: auto;
}
#txtOutput:hover {
overflow-y:scroll;
}

#uiActions {
border-radius: 10px;
background: #8AC007;
background: rgba(40, 40, 40, 0.0);
padding: 10px;
width: 64;
height: 150px;
overflow: auto;
z-index: 10;
position: absolute;
left: 0;
top: 15%;
}

#uiInventory {
border-radius: 10px;
background: #8AC007;
background: rgba(40, 40, 40, 0.5);
padding: 10px;
width: 64;
height: 150px;
overflow: auto;
z-index: 10;
position: absolute;
left: 40px;
top: 15%;
}

#uiInventory1 {

background: #8AC007;
background: rgba(40, 40, 40, 0.5);
opacity: 0.6;

width: 260px;
height: 260px;
margin: 20;
float: left;






overflow: hidden;
border-radius:300px;
z-index: 10;
position: absolute;
left: 40px;
top: 5%;
}


#uiTerminal:hover {
background: rgba(40, 40, 40, .8);
}

.term-color0 {color: #000000;}
.term-color1 {color: #ffffff;}
.term-color2 {color: #68372b;}
.term-color3 {color: #70A4B2;}
.term-color4 {color: #6F3D86;}
.term-color5 {color: #588D43;}
.term-color6 {color: #352879;}
.term-color7 {color: #B8C76F;}
.term-color8 {color: #6F4F25;}
.term-color9 {color: #433900;}
.term-colora {color: #9A6759;}
.term-colorb {color: #444444;}
.term-colorc {color: #6C6C6C;}
.term-colord {color: #9AD284;}
.term-colore {color: #6C5EB5;}
.term-colorf {color: #959595;}

div#cc-container {
width: 55%;
float: left;
height: 450px;
margin: auto;
padding: 0px;
}
div#cc-main {

height: 450px;
float: left;
}
div#cc-info {

margin-top: 0px;
margin-left: 350px;
width: 210px;
height: 450px;

}




.doc-msg {
display: block;
height: 100%;
margin: 15px 10px 0px 0px;
background: #cfeffe;
color: #665723;
font-size: 10px;
padding: 9px 15px, 9px, 15px;

border-radius: 10px;
-moz-border-radius: 2px 2px;
line-height: 140%;
}

.doc-helpfile {
margin: 10px 0px 0px 0px;
background: #e5e5e5;
font-size: 12px;


}

.label-text {
display: block;
float: left;
line-height: 31px!important;
margin-right: 18px;
text-align: right;
color: #8c8c8c;
white-space: nowrap;
}











input[type=text],
input[type=password] {

}

.fade-out {
animation: fadeOut ease 10s;
-webkit-animation: fadeOut ease 10s;
-moz-animation: fadeOut ease 10s;
-o-animation: fadeOut ease 10s;
-ms-animation: fadeOut ease 10s;
}
@keyframes fadeOut {
0% {
opacity:1;
}
100% {
opacity:0;
}
}

@-moz-keyframes fadeOut {
0% {
opacity:1;
}
100% {
opacity:0;
}
}

@-webkit-keyframes fadeOut {
0% {
opacity:1;
}
100% {
opacity:0;
}
}

@-o-keyframes fadeOut {
0% {
opacity:1;
}
100% {
opacity:0;
}
}

@-ms-keyframes fadeOut {
0% {
opacity:1;
}
100% {
opacity:0;
}
}