/** -------------------------- COMMON -------------------------- */
* {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

button {
    outline: 0;
    padding: 2px 6px;
    color: #41acef;
    font-weight: bold;
    border: 1px solid #0f4261;
    border-radius: 3px;
    background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #3D4850), color-stop(4%, #313d45), color-stop(100%, #232B30)); /* webkit */
    cursor: pointer;
}

.button-red {
    color: #ef3b00;
    font-weight: 900;
}

button:hover {
    color: #fff;
    background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #4C5A64), color-stop(4%, #404F5A), color-stop(100%, #2E3940)); /* webkit */
}

button:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    color: #fff;
    background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #20282D), color-stop(51%, #252E34), color-stop(100%, #222A30)); /* webkit */
}

button:disabled {
    color: #8a8a8a;
    border: 1px solid #6c6b6b;
    background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #3D4850), color-stop(4%, #313d45), color-stop(100%, #232B30)); /* webkit */
}

a:link {
    color: #00b6ff;
}

a:visited {
    color: #0056dc;
}

a:hover {
    color: #ff5956;
}

a:active {
    color: hotpink;
}

.glass-panel {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: default;
}

@keyframes buttonBlink {
    0% {
        border-color: #0f4261;
    }
    50% {
        border-color: #FF0000;
    }
    100% {
        border-color: #0f4261;
    }
}

.button-blink {
    animation: buttonBlink 1s ease-in-out infinite;
}

.image-button {
    padding: 1px 6px 0 6px;
}

.make-space-below {
    padding-bottom: 1em;
}

/** -------------------------- COMMON TABLE -------------------------- */
.common-table {
    border-collapse: collapse;
}

.common-table-row:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.09)
}

.common-table-row:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.29)
}

.common-table-cell {
    border: 1px solid rgba(131, 143, 150, 0.51);
}

/** -------------------------- COMMON TABLE ENDS -------------------------- */

/** -------------------------- COMMON ENDS -------------------------- */

/** -------------------------- MAIN -------------------------- */
.main-page {
    position: absolute;
    color: #d8d0d0;
    background-color: black;
    width: 100%;
    height: 100%;
    margin: 0;
    user-select: none;
    overflow: hidden;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
}

/** -------------------------- MAIN ENDS -------------------------- */

/** -------------------------- Cover -------------------------- */
.story-cover-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 10%;
    background-color: black;
}

.story-cover-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 10%;
    background-color: black;
}

.story-cover-text {
    font-size: 200%;
    color: white;
}

.loading-cover {
    position: absolute;
    z-index: 9; /* Edit in com.btxtech.client.cockpit.ZIndexConstants.LOADING_COVER*/
    width: 100%;
    height: 100%;
    background-color: black;
    transition: opacity 2s ease-in-out; /* Edit in com.btxtech.uiservice.cockpit.ScreenCover.FADE_DURATION*/
    opacity: 1;
}

@keyframes loadingAnimation {
    from {
        opacity: 0.2;
    }
}

.inner-loading-center-container {
    left: 50%;
    position: absolute;
    top: 50%;
    font-size: 300%;
    color: #d8d0d0;
    transform: translate(-50%, -50%);
    text-align: center;
}

.inner-loading-text {
    animation: loadingAnimation 0.5s linear infinite alternate;
}

.inner-loading-progress {
    width: 6em;
    height: 15px;
}

.empty-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    transition: opacity 2s ease-in-out; /* Edit in com.btxtech.uiservice.cockpit.ScreenCover.FADE_DURATION*/
    opacity: 0;
}

.empty-cover-opacity {
    opacity: 1.0;
}

/** -------------------------- Cover ENDS-------------------------- */

/** -------------------------- Tip Animation -------------------------- */
@keyframes tip-west-animation {
    0% {
        /* Corresponds to the MOVE_DISTANCE in com.btxtech.client.tip.WestGuiTip*/
        left: 100px;
    }
    100% {
        left: 0;
    }
}

@keyframes tip-south-animation {
    0% {
        /* Corresponds to the MOVE_DISTANCE in com.btxtech.client.tip.SouthGuiTip*/
        top: 0;
    }
    100% {
        top: 100px;
    }
}

.tip-animation-container {
    position: absolute;
}

.tip-west-animation-image {
    position: absolute;
    animation: tip-west-animation 1s ease-out infinite;
    visibility: hidden;
}

.tip-south-animation-image {
    position: absolute;
    animation: tip-south-animation 1s ease-out infinite;
    visibility: hidden;
}

@keyframes splash-south-animation {
    0% {
        transform: scale(0.7);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.7);
    }
}

.tip-splash-animation-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.tip-splash-animation-image {
    animation: splash-south-animation 0.75s ease-out infinite;
}

/** -------------------------- Tip Animation ENDS-------------------------- */

/** -------------------------- COCKPIT -------------------------- */
/** ----- Main ----- */
.main-cockpit {
    color: #d8d0d0;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('images/DialogBackground.png');
    border: 8px solid transparent;
    border-image-source: url('images/Border.png');
    border-image-slice: 8;
    border-image-repeat: repeat;
    box-shadow: 3px 3px 15px 1px #000;
    font-size: 80%;
}

.radarNoPower {
    text-shadow: 0 0 3px #000000;
    background-color: black;
    background-image: url(images/RadarNoEnergy.gif);
    border: 1px solid #FFF;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

/** ----- Top right cockpit ----- */
.top-right-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
}

/** ----- Bot-scene ----- */
@keyframes bot-scene-sidebar-text-animation {
    0% {
        color: #3289bd;
    }
    100% {
        color: #bd907e;
    }
}

.bot-scene-container {
    flex-direction: column;
}

.bot-scene-cockpit {
    width: 300px;
    background-image: url('images/DialogBackground.png');
    border: 8px solid transparent;
    border-image-source: url('images/Border.png');
    border-image-slice: 8;
    border-image-repeat: repeat;
    box-shadow: 3px 3px 15px 1px #000;
    box-sizing: border-box;
    margin-bottom: 3px;
}

.bot-scene-sidebar-text {
    animation: bot-scene-sidebar-text-animation 1s ease-in infinite alternate;
    font-weight: bold;
    font-size: 87%;
    padding-bottom: 10px;
}

.bot-scene-sidebar-mood {
    font-size: 80%;
    color: #d8d0d0;
}

/** ----- Quest ----- */
@keyframes quest-sidebar-background-animation {
    0% {
        background: red;
    }
    100% {
        background: black;
    }
}

.quest-cockpit {
    width: 300px;
    display: table;
    animation: quest-sidebar-background-animation 2s ease-in 1;
    background: url('images/DialogBackground.png');
    border: 8px solid transparent;
    border-image-source: url('images/Border.png');
    border-image-slice: 8;
    border-image-repeat: repeat;
    box-shadow: 3px 3px 15px 1px #000;
    box-sizing: border-box;
}

.quest-sidebar-container {
    display: table-row;
}

.quest-sidebar-title {
    display: table-cell;
    font-weight: bold;
    width: 100%;
    color: #3289bd;
    padding-bottom: 10px;
}

.quest-sidebar-center {
    display: table-cell;
    font-size: 80%;
    width: 100%;
    color: #d8d0d0;
}

.quest-sidebar-bot-bases-description {
    display: inline;
    vertical-align: middle;
    font-size: 85%
}

.quest-sidebar-progress-table {
    border: 1px solid #3289bd5c;
    background-color: #025cff2e;
}

.quest-sidebar-footer {
    display: table-cell;
    width: 100%;
    text-align: center;
    padding-top: 10px;
}

.quest-sidebar-footer-text {
    font-size: 80%;
    color: #d8d0d0;
}

.quest-dialog-item {
    border: 1px solid #3289bd5c;
    background-color: #025cff2e;
    margin-bottom: 10px;
}

.quest-selection-dialog {
    max-height: 500px;
    overflow-y: auto;
}

.quest-selection-dialog-description {
    width: 250px;
}

.quest-selection-dialog-tr-title {
    color: #3289bd;
    font-weight: bold;
}

.quest-selection-dialog-tr-description {
    font-size: 90%;
}

.quest-selection-dialog-tr-reward {
    font-size: 80%;
}

/** ----- Item ----- */
.item-cockpit {
    position: absolute;
    bottom: 0;
    left: 0;
    display: table;
    border: 8px solid transparent;
    background-image: url('images/DialogBackground.png');
    border-image-source: url('images/Border.png');
    border-image-slice: 8;
    border-image-repeat: repeat;
    box-shadow: 3px 3px 15px 1px #000;
}

.item-cockpit-row {
    display: table-row;
}

.item-cockpit-cell {
    display: table-cell;
}

.item-cockpit-hr {
    border-top: 1px solid #989898;
    border-bottom: 0;
    margin: 1px 0 1px 0;
}

.item-cockpit-head-text {
    color: #3289bd;
    font-size: 80%;
    font-weight: bold;
}

.item-cockpit-normal-text {
    color: #d8d0d0;
    font-size: 70%;
}

.item-cockpit-image {
    border: 1px solid aqua;
    background-color: white;
    width: 50px;
    height: 50px;
}

.item-cockpit-arrow-button {
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    background: transparent;
}

.item-cockpit-arrow-button:hover {
    background: rgba(255, 0, 0, 0.3);
    border: none;
}

.item-cockpit-arrow-button:active {
    background: rgb(154, 232, 233) none;
    border: none;
}

.item-cockpit-arrow-button:focus {
    outline: none;
    border: none;
}

.item-cockpit-buildup-button {
    position: relative;
    padding: 2px;
    cursor: pointer;
    z-index: 1;
    background: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 0;
}

.item-cockpit-buildup-button:hover {
    background: rgb(255, 160, 156);
    border: none;
}

.item-cockpit-buildup-button:active {
    background: rgb(144, 255, 255);
    border: none;
}

.item-cockpit-buildup-button:focus {
    outline: none;
    border: none;
}

.item-cockpit-buildup-limit-label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    font-size: 80%;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
}

.item-cockpit-buildup-disable {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    cursor: default;
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
}

.item-cockpit-buildup-price-label {
    font-size: 12px;
    color: #d8d0d0;
    background-color: black;
}

/** ----- chat ----- */
.chat-cockpit {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 280px;
    height: 220px;
    display: flex;
    flex-flow: column;
    background-image: url('images/DialogBackground.png');
    border: 8px solid transparent;
    border-image-source: url('images/Border.png');
    border-image-slice: 8;
    border-image-repeat: repeat;
    box-shadow: 3px 3px 15px 1px #000;
}

.chat-messages-div {
    flex: 1;
    overflow-y: scroll;
    border: 1px solid #3289bd5c;
    background-color: #025cff2e;
}

.chat-user-span {
    font-size: 80%;
}

.chat-text-span {
    font-size: 80%;
    color: #d8d0d0;
}

/** ----- Playback ----- */
.playback-cockpit {
    color: #d8d0d0;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('images/DialogBackground.png');
    border: 8px solid transparent;
    border-image-source: url('images/Border.png');
    border-image-slice: 8;
    border-image-repeat: repeat;
    box-shadow: 3px 3px 15px 1px #000;
    font-size: 80%;
}

.playback-dialog {
    position: absolute;
    background-color: #6c6b6b;
    border: 1px solid #FFF;
}

/** -------------------------- COCKPIT ENDS -------------------------- */

/** -------------------------- DIALOG FRAMEWORK -------------------------- */
.modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-height: 150px;
    min-width: 300px;
    display: table;
    border: 8px solid transparent;
    background-image: url('images/DialogBackground.png');
    border-image-source: url('images/Border.png');
    border-image-slice: 8;
    border-image-repeat: repeat;
    box-shadow: 3px 3px 15px 1px #000;
}

.modal-dialog-row {
    display: table-row;
}

.modal-dialog-cell {
    display: table-cell;
}

.modal-dialog-header-title {
    color: #3289bd;
    font-weight: bold;
}

.modal-dialog-body {
    display: table-cell;
    color: #d8d0d0;
    font-size: 80%;
}

.modal-dialog-footer {
    text-align: center;
    display: table-cell;
}

.modal-dialog-hr {
    border-top: 1px solid #989898;
    border-bottom: 0;
    margin: 5px 0 5px 0;
}

/** -------------------------- DIALOG FRAMEWORK ENDS -------------------------- */
/** -------------------------- DIALOG MESSAGE  -------------------------- */
.message-dialog {
    max-width: 30em;
}

/** -------------------------- DIALOG MESSAGE ENDS -------------------------- */

/** -------------------------- DIALOG QUEST PASSED  -------------------------- */
.quest-passed-dialog {
    max-width: 30em;
}

/** -------------------------- DIALOG QUEST PASSED ENDS -------------------------- */

/** -------------------------- DIALOG REGISTER  -------------------------- */
.register-dialog {
    max-width: 30em;
}

.register-dialog-fb-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 10px;
}

.register-dialog .errorLabel {
    color: red;
    margin: 0;
    font-weight: bolder;
}

.register-dialog .registerGroup {
    border: 1px solid #3289bd5c;
    background-color: #025cff2e;
}

.register-dialog h3 {
    font-size: 15px;
    color: #3289bd;
    margin: 2px 0 15px 2px;
    padding: 0;
}

/** -------------------------- DIALOG REGISTER ENDS -------------------------- */

/** -------------------------- DIALOG UNREGISTERED  -------------------------- */
.unregistered-dialog {
    max-width: 30em;
}

.unregistered-dialog-button-wrapper {
    display: flex;
    justify-content: center;
}

/** -------------------------- DIALOG UNREGISTERED ENDS -------------------------- */

/** -------------------------- DIALOG UNNAMED  -------------------------- */
.unnamed-dialog {
    max-width: 30em;
}

.unnamed-dialog-button-wrapper {
    display: flex;
    justify-content: center;
}

/** -------------------------- DIALOG UNNAMED ENDS -------------------------- */

/** -------------------------- DIALOG SET NAME  -------------------------- */
.set-name-dialog {
    max-width: 30em;
}

.set-name-dialog-error {
    height: 1em;
    margin-bottom: 6px;
    color: red;
    font-size: 85%;
    font-weight: bolder;
}

/** -------------------------- DIALOG SET NAME ENDS -------------------------- */

/** -------------------------- DIALOG INVENTORY  -------------------------- */
.inventory-item-table {

}

.inventory-dialog-crystal {
    padding: 3px 10px 10px 0;
    font-size: 90%;
}

.inventory-item {
    width: 140px;
    height: 80px;
    border: 1px solid #3289bd;
    border-radius: 3px;
    background-color: rgba(12, 38, 47, 0.66);
}

.inventory-item-name {
    color: #3289bd;
    font-weight: bold;
}

.inventory-item-own {
    font-size: 90%;
}

.inventory-item-image {
    background-color: #fbffff;
    width: 50px;
    height: 50px;
    border: 1px solid #000000;
}

/** -------------------------- DIALOG INVENTORY ENDS -------------------------- */

/** -------------------------- DIALOG BOX CONTENT  -------------------------- */
.box-content-inventory-item {
    border: 1px solid #3289bd;
    border-radius: 3px;
    background-color: rgba(12, 38, 47, 0.66);
    display: inline-block
}

/** -------------------------- DIALOG BOX CONTENT ENDS -------------------------- */

/** -------------------------- DIALOG BOX CONTENT  -------------------------- */

.unlock-dialog-text {
    margin-bottom: 10px;
}

.unlock-dialog-crystals {
    font-size: 90%;
    margin-bottom: 10px;
}

.unlock-dialog-item-image-div {
    position: relative;
    width: 40px;
    height: 40px
}

.unlock-dialog-item-image {
    z-index: 1;
    width: 40px;
    height: 40px;
    border: 1px solid aqua;
    background-color: white;
}

.unlock-dialog-item-span {
    position: absolute;
    left: 1px;
    top: 1px;
    z-index: 2;
    color: black;
    font-weight: 900;
    font-size: 12px;
    font-stretch: unset;
    background-color: #00fffff5;
    line-height: 12px;
}

.unlock-dialog-item {
    border: 1px solid #3289bd5c;
    background-color: #025cff2e;
    margin-bottom: 10px;
}

.unlock-dialog-tr-title {
    color: #3289bd;
    font-weight: bold;
}

.unlock-dialog-tr {
    width: 220px;
}

.unlock-dialog-tr-description {
    font-size: 90%;
}

.unlock-dialog-tr-cost {
    font-size: 80%;
}

/** -------------------------- DIALOG BOX CONTENT ENDS -------------------------- */

/** -------------------------- DIALOG BOX CONTENT  -------------------------- */

.scroll-tip-dialog-message {
    margin-bottom: 10px;
}

.scroll-tip-dialog-map-image {
    border: 1px solid #3289bd;
}

/** -------------------------- DIALOG BOX CONTENT ENDS -------------------------- */
/** -------------------------- DIALOG BOX CONTENT  -------------------------- */

.server-restart-dialog {
    width: 20em;
}

.server-restart-dialog-state {
    color: #ff8a82;
    animation: serverRestartBlinker 1s linear infinite;
}

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

/** -------------------------- DIALOG BOX CONTENT ENDS -------------------------- */

/** -------------------------- THANK YOU PAGE -------------------------- */
.center-thank-you {
    position: absolute;
    left: 50%;
    top: 30%;
    white-space: nowrap;
    text-align: center;
    transform: translate(-50%, -30%);
}

/** -------------------------- THANK YOU PAGE END-------------------------- */

/** -------------------------- EDITOR -------------------------- */
/** --- Common --- */
.editor-hint {
    font-size: 75%;
    color: #00ffd2;
}

.editor-table-even-odd:nth-child(even) {
    background: rgba(243, 44, 44, 0.24)
}

.editor-table-even-odd:nth-child(odd) {
    background: rgba(84, 63, 245, 0.24)
}

/** --- Gallery table --- */
.generic-gallery-table {
    /*overflow: hidden;*/
    border-collapse: collapse;
}

.generic-gallery-table-head {
    border: 1px solid #3289bd;
    background-color: #3289bd;
    color: #d8d0d0;
}

.generic-gallery-table-row {
    /* border-width: 15px; */
    /* border-spacing: 0; */
    /* overflow: hidden; */
    /* background-color: #d6d6d6; */
    /* border-collapse: collapse; */
    /* font-size: 75%; */
    /* font-weight: bold; */
}

.generic-gallery-table-cell {
    border: 1px solid #3289bd;
}

.generic-gallery-table-row-selected {
    background-color: #ee0001;
    color: black;
}

.generic-gallery-table-row-not-selected {

}

/** --- Image gallery ---*/
.gallery-parent {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 600px;
    width: 1230px;
}

.gallery-child {
    width: 100px;
    float: left;
    margin: 3px;
}

.gallery-item-table-selected {
    border-color: blue;
}

.gallery-item-table-not-selected {
    border-color: transparent;
}

.gallery-item-table-changed {
    border-color: red;
}

.gallery-item-table-not-changed {
    border-color: transparent;
}

.gallery-item-table {
    border-width: 1px;
    border-spacing: 0;
    border-style: solid;
    overflow: hidden;
    background-color: #d6d6d6;
    border-collapse: collapse;
    font-size: 65%;
    font-weight: bold;
    color: black;
}

.gallery-item-table-nth-child td:nth-child(2) {
    text-align: right;
}

.minButton {
    font-size: 100%;
}

.gallery-item-image {
    width: 100px;
    height: 100px;
    background: url('images/TransparentBg.png');
}

.gallery-item-audio {
    width: 350px;
}

.gallery-widget-table {
    border-spacing: 0;
}

.gallery-widget-table td:nth-child(2) {
    text-align: right;
}

.image-widget {
    border-width: 2px;
    border-spacing: 0;
    overflow: hidden;
    background-color: #d6d6d6;
    border-collapse: collapse;
    font-weight: bold;
    font-size: 80%;
    color: black;
    width: 102px;
}

/** --- Left side bar ---*/
.left-side-bar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    border: 9px solid transparent;
    border-image-source: url('images/Border.png');
    border-image-slice: 9;
    border-image-repeat: repeat;
    color: #d8d0d0;
    overflow-y: auto;
    box-sizing: border-box;
    font-size: 80%;
}

.left-side-bar-table {
    display: table;
    height: 100%;
    /* border: none; */
}

.left-side-bar-content {
    display: table-row;
    height: 100%;
}

.left-side-bar-footer {
    display: table-row;
    border-spacing: 0;
    border-collapse: separate;
}

/** --- CRUD parent ---*/
.crud-parent {
    width: 100%;
    height: 100%;
    display: table;
}

.hr-left-side-bar {
    border-top: 1px solid #989898;
    border-bottom: 0;
}

.crud-parent-selector {
    width: 100%;
    display: table-row;
    border-spacing: 0;
    border-collapse: separate;
}

.crud-parent-content {
    width: 100%;
    height: 100%;
    display: table-row;
}

/** -------------------------- EDITOR ENDS-------------------------- */

/** -------------------------- GENERIC TABLE ENDS -------------------------- */
table.inGameNormalTable {
    font-size: 12px;
    border-collapse: collapse;
}

table.inGameNormalTable > thead > tr > th {
    text-align: left;
    background-color: #3289bd;
    color: black;
    font-weight: bold;
}

table.inGameNormalTable > thead > tr > th, table.inGameNormalTable > tbody > tr > td {
    border: 1px solid #3289bd;
    padding: 3px;
}

table.inGameNormalTable > tbody > tr {
    background-color: #025cff2e
}

/** -------------------------- GENERIC TABLE -------------------------- */