* {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

input {
    -webkit-user-select: initial;
    -webkit-touch-callout: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial;
}

@keyframes scroll-left {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

html,body {
    height: 100%;
    width: 100%;
	margin: 0px;
	padding: 0px;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
}

.glassBlur {
    background-color: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter: blur(24px) saturate(1.4);
    color: #000000;
    transition: 0.2s;
}

.adlDark .glassBlur {
    background-color: rgba(0,0,0,0.7);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter: blur(24px) saturate(1.4);
    color: #ffffff;
}

.dozermode .glassBlur {
    color: #ffffff;
    background-color: rgba(255,0,0,0.75);
}

#wrapper {
	position: fixed;
	height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#titleAndPlayHolder {
    display: none;
    position: absolute;
	height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
}

#scroll3dHolder {
    position: absolute;
	height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
}

#scroll3dCanvas {
    position: absolute;
	height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
}

#titleScreen {
    display: none;
    position: absolute;
	height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    color: #ffffff;
    text-shadow: 
        1px 1px 0px #000000,
        1px -1px 0px #000000,
        -1px 1px 0px #000000,
        -1px -1px 0px #000000,
        2px 2px 0px #000000;
}

#titleScreenInner {
    position: absolute;
	height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

#titleTopBar {
    padding: 24px;
    margin-top: var(--sait);
    margin-left: var(--sail);
    margin-right: var(--sair);
    grid-row: 1;
    display: grid;
    grid-template-columns: auto 1fr auto auto auto auto auto;
    align-items: start;
    gap: 24px;
}

#titleFullscreenButton {
    grid-column: 4;
}

.titleBiggerButtons {
    cursor: pointer;
    transition: 0.2s;
    font-size: 30px;
    font-family: fluent;
    text-shadow: 
        1px 1px 0px #000000,
        -1px 1px 0px #000000,
        1px -1px 0px #000000,
        -1px -1px 0px #000000,
        2px 2px 0px #000000;
}

.titleButtonLabel {
    color: #ffffff;
    position: relative;
    top: -9px;
    font-size: 18px;
    transition: 0.2s;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
;
}

.titleBiggerButtons:hover .titleButtonLabel {
    color: #FF9800;
}

#titleShopHolder {
    grid-column: 5;
}

#titleFileHolder {
    grid-column: 6;
}


#titleSettingsHolder {
    grid-column: 7;
}

#titleSignInArea {
    grid-column: 3;
    cursor: pointer;
    transform: 0.2s;
    font-weight: bold;
    font-size: 22px;
}

.titleBiggerButtons:hover, #titleSignInArea:hover, #titleScreenPrev:hover, #titleScreenNext:hover {
    color: #FF9800 !important;
}

.titleBiggerButtons:active, #titleSignInArea:active, #titleScreenPrev:active, #titleScreenNext:active {
    opacity: 0.6;
}



#imTitleLogo {
    display: block;
    margin: auto;
    grid-column: 1;
    max-height: 160px;
}

.titleMenuOption {
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.titleMenuOption:hover {
    color: #FF9800;
}

#titleFooter {
    grid-row: 3;
    padding: 24px;
    margin-bottom: var(--saib);
    margin-left: var(--sail);
    margin-right: var(--sair);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-content: end;
}

#titleFooterCopyrightHolder {
    grid-column: 1;
    text-align: left;
}

#titleFooterVersionInfo {
    font-size: 12px;
}

#titleFooterCopyrightArea {
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
}

#titleFooterButtonsHolder {
    grid-column: 3;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto;
}

#titleFooterButtonsHolder .titleBiggerButtons {
    margin-left: 24px;
}

#titleNewGame {
    grid-column: 4;
}

#titleFriends {
    grid-column: 5;
}

#titleWorldOptions {
    grid-column: 6;
}

#titlePlayGame {
    grid-column: 7;
    color: #4CAF50;
}

#titleScreen .gamepadHighlighted {
    color: #FF9800 !important;
    text-shadow: 
        1px 1px 0px #FF9800,
        -1px 1px 0px #FF9800,
        1px -1px 0px #FF9800,
        -1px -1px 0px #FF9800;
}

#titleScreen img.gamepadHighlighted {
    outline: 4px solid #FF9800;
}

#titleMenuHolder {
    grid-row: 2;
    overflow: auto;
    text-align: center;
    align-content: center;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr auto 1fr;
    margin-left: var(--sail);
    margin-right: var(--sair);
}

#titleScreenPrev {
    grid-row: 2;
    grid-column: 1;
    align-self: center;
    text-align: left;
    font-size: 38px;
    margin: 8px;
    transition: 0.2s;
    cursor: pointer;
    font-family: fluent;
    text-shadow: 
        1px 1px 0px #000000,
        -1px 1px 0px #000000,
        1px -1px 0px #000000,
        -1px -1px 0px #000000,
        2px 2px 0px #000000;
}

#titleScreenNext {
    grid-row: 2;
    grid-column: 3;
    align-self: center;
    text-align: right;
    font-size: 38px;
    margin: 8px;
    transition: 0.2s;
    cursor: pointer;
    font-family: fluent;
    text-shadow: 
        1px 1px 0px #000000,
        -1px 1px 0px #000000,
        1px -1px 0px #000000,
        -1px -1px 0px #000000,
        2px 2px 0px #000000;
}

#titleMenuGameInfoHold {
    grid-row: 3;
    grid-column: 2;
    align-self: end;
    text-align: left;
}

#titleMenuGameType {
    font-size: 14px;
}

.gameTypeOnlineServer {
    color: #4CAF50;
}

.gameTypeLocalSave {
    color: #2196F3;
}

#titleMenuGameName {
    font-size: 28px;
}

#titleMenuExtraInfo {
    font-size: 14px;
    
}

.titleGameDedicated{
    color: #009688;
}

.onlineServerTitleInfo {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    gap: 4px;
}

.onlineServerTitleInfoIcon {
    font-family: "fluent";
}

.onlineServerTitleInfoPlayerInd {
    grid-column: 1;
}

.onlineServerTitleInfoPlayerReadout {
    grid-column: 2;
}

.onlineServerTitleInfoPingInd {
    grid-column: 4;
}

.onlineServerTitleInfoPingReadout {
    grid-column: 5;
}

#titleAccountIcon {
    height: 28px;
    width: 28px;
    border-radius: 28px;
    border: 2px solid #000000;
}

#gameEditor {
    position: absolute;
	height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    display: none;
    color: #000000;
    background-color: #ffffff;
    grid-template-columns: auto 1fr;
}

.adlDark #gameEditor {
    color: #ffffff;
    background-color: #222222;
}

#playScreen {
    position: absolute;
	height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    display: none;
    pointer-events: none;
    color: #ffffff;
}


#gameEditorSidebar,.gameSubsectionSidebar {
    background-color: rgba(0,0,0,0.05);
    border-right: 1px solid #cccccc;
    width: 180px;
    height: 100%;
    overflow: auto;
    grid-column: 1;
}

.gameEditorSidebarItem {
    font-weight: bold;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
}

.gameEditorSidebarItem:hover {
    background-color: rgba(130,130,130,0.1);
}

.gameEditorSidebarItem:active {
    opacity: 0.5;
}

#gameEditorMain,.gameSubsectionMainArea {
    grid-column: 2;
    overflow: hidden;
}

.gameSubsectionMainArea {
    overflow: auto;
    padding: 12px;
}

.gameEditorMainSection {
    display: none;
    height: 100%;
    grid-template-columns: auto 1fr;
}

.gameEditorSidebarSeparator {
    margin: 2px 12px;
    border-bottom: 1px solid #aaaaaa;
}

.gameSubsectionMainArea table {
    width: 100%;
}

.editorIconPreview {
    height: 48px;
    width: auto;
    border: 1px solid #aaaaaa;
    background-color: rgba(0,0,0,0.05);
    background-position: center;
    background-size: contain;
}

#gameSelectionScreen, #modShopScreen, #manageModsScreen {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    display: none;
}

.delObjEditorBtn {
    color: #ffffff !important;
    background: #f44336 !important;
}

.bottomRightIndicator {
    margin-right: 6px;
    height: 16px;
    width: 16px;
    cursor: pointer;
    position: relative;
    top: 2px;
}

 
.inputTypetouch .bottomRightIndicator {
    margin-right: 12px;
}

.encdonateOptsBox {
    margin-top: 12px;
}

.encdonateOptsBox button {
    margin-right: 8px;
}

.apeCoinDonateButton {
    color: #000000 !important;
    background-color: #FFA000 !important;
}

#curChunkReadout {
    display: inline-block;
}

#gameImportantMessageReadout {
    display: inline-block;
    margin: 0px 6px;
    cursor: pointer;
    display:  none;
}


#chatInputHolder {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    max-width: 90%;
    border-radius: 8px;
    border: 1px solid #999999;
    padding: 6px 12px;
    display: none;
}

#chatInput {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: #000000;
}

.adlDark #chatInput {
    color: #ffffff;
}

.chatMessage {
    display: grid;
    grid-template-columns: auto 1fr;
    position: relative;
    margin: 4px 0px;
    align-items: center;
    transition: 0.4s;
}

.chatMessageIcon {
    height: 18px;
    width: 18px;
    border-radius: 18px;
    grid-column: 1;
    margin-right: 8px;
    position: relative;
    top: 1px;
}

.chatMessageSubIcon {
    height: 12px;
    width: 12px;
    grid-column: 1;
    position: absolute;
    bottom: 0px;
    left: 10px;
}

.chatMessageText {
    grid-column: 2;
    font-size: 16px;
    font-weight: bold;
    align-self: center;
    text-shadow:
       2px 2px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}

.talkingIndicatorIcon {
    font-family: "fluent";
    position: relative;
    top: 3px;
}

#gameUIHolder {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    grid-template-rows: auto 1fr auto auto auto;
    pointer-events: none;
}

#topBar {
    grid-row: 1;
    grid-column: 1 / span 5;
    padding: max(8px,var(--sait)) max(12px,var(--sair)) 4px max(12px,var(--sail));
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
}

#topLeftArea {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
}

#btnSettings {
    grid-column: 1;
    height: 36px;
    width: 36px;
    cursor: pointer;
    transition: 0.2s;
    align-self: center;
}

#btnSettings:active {
    opacity: 0.4;
}

#cityNameHolder {
    grid-column: 2;
    display: grid;
    grid-template-rows: 1fr 1fr;
    max-width: 160px;
    grid-template-columns: auto 1fr;
}

#planetNameDiv {
    font-size: 14px;
    grid-row: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-column: 1;
    align-self: start;
}

#regionNameDiv {
    grid-row: 1;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-column: 1 / span 2;
    align-self: end;
}

#resourceReadoutDisplay {
    display: grid;
    grid-template-rows: 1fr auto;
    font-size: 14px;
}

#resourceReadoutTopArea {
    grid-row: 1;
}

#resourceReadoutDisplayResourcesHolder {
    grid-row: 2;
    overflow: hidden;
}

#resourceReadoutDisplayResources.scrolling {
    animation: scroll-left 20s linear infinite;
    white-space: nowrap;
}

.resReadoutCard {
    display: inline-block;
    position: relative;
    top: -2px;
    margin-right: 6px;
}

.resReadoutCardIcon {
    height: 16px;
    width: 16px;
    position: relative;
    top: 3px;
}

.resReadoutCardReadout {
    font-weight: bold;
    margin: 0px 6px;
}

.resReadoutCardChange {
    opacity: 0.8;
    font-size: 12px;
}

.resReadoutCardChangeNegative {
    color: #F44336;
}

#utilityReadoutArea {
    display: contents;
}

#toolbox {
    transition: 0.2s;
    align-self: center;
}

.toolBall {
    height: 36px;
    width: 36px;
    cursor: pointer;
    margin-left: 6px;
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    transition: 0.2s;
    display: inline-block;
}

.toolBall:hover {
    opacity: 0.8;
}

.toolBall:active {
    opacity: 0.6;
}

.toolBallSelected {
    background-color: #C8E6C9;
}

#apeChatHolder {
    grid-column: 5;
    grid-row: 2 / span 4;
    transition: 0.2s;
    width: 0px;
    height: 100%;
    pointer-events: auto;
    overflow: hidden;
    display: grid;
}

.chatOpen #apeChatHolder {
    width: 290px;
    padding-right: var(--sair);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
}

#chatHolderFrame {
    display: grid;
}

#chatHolderFrame iframe {
    border: none;
    display: block;
    height: 100%;
    width: 100%;
}

#chatBottomPad {
    padding-bottom: var(--saib);
}

#mainSidebar {
    grid-column: 4;
    grid-row: 2 / span 4;
    transition: 0.2s;
    width: 0px;
    height: 100%;
    pointer-events: auto;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    
}

#mainSidebar.open {
    width: 280px;
    padding-right: var(--sair);
}

.chatOpen #mainSidebar.open {
    width: 280px;
    padding-right: initial;
}

.compactSidebarMode #mainSidebar.open {
    width: 140px;
}

#toolBuildMenu {
    background-image: url("images/ind-buildmenu.png");
}

#talkingIndicatorArea {
    grid-column: 2 / span 2;
    grid-row: 2;
    text-align: right;
    pointer-events: none;
    padding: 12px;
    font-weight: bold;
    text-shadow:
       2px 2px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}

.talkingIndicator {
    display: grid;
    grid-template-columns: 1fr auto;
    margin-bottom: 6px;
    gap: 0px 8px;
}

#bottomRightInfobox {
    grid-column: 3;
    grid-row: 3;
    font-weight: bold;
    border-top-left-radius: 4px;
    padding: 6px max(12px,var(--sair)) 6px 12px;
    transition: 0.2s;
    pointer-events: auto;
}

#bottomRightInfobox.sidebarOpen {
    padding: 6px 12px;
}

#gameChatArea {
    padding: 12px 12px 12px max(12px,var(--sail));
    grid-row: 2 / span 2;
    grid-column: 1 / span 2;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-end;
}

.nointerface #playCanvasHolder {
    cursor: none;
}

.nointerface #gameUIHolder {
    display: none;
}

.nointerface #unitOptionsPopup {
    display: none;
}

.nointerface #gameChatArea {
    display: none;
}

#manageGameDataWindow {
    display: none;
    border: 1px solid #999999;
    border-radius: 8px;
    padding: 24px;
    overflow: hidden;
    width: calc(100% - 72px);
    height: calc(100% - 72px);
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    grid-template-rows: auto auto 1fr auto;
}

.gameDataSubhead {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 16px;
}

.gameDataCard {
    border: 1px solid #999999;
    border-radius: 3px;
    padding: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    user-select: none;
}

.gameDataCardType {
    font-size: 12px;
    font-style: italic;
}

.gameDataCardName {
    font-weight: bold;
}

.gameDataCardRev {
    font-size: 12px;
    opacity: 0.7;
}

#manageGameDataWindowTitle {
    grid-column: 1 / span 2;
}

.manageGameDataWindowCol {
    border: 1px solid #999999;
    overflow: auto;
    background-color: rgba(130,130,130,0.15);
    border-radius: 4px;
    padding: 12px;
}

#manageWindowButtonsArea {
    grid-row: 4;
    grid-column: 1 / span 2;
    text-align: right;
}

#newGameWindow {
    display: none;
    border: 1px solid #999999;
    border-radius: 8px;
    padding: 24px;
    grid-template-rows: auto 1fr auto;
    max-height: 80%;
    overflow: hidden;
}

.newGameModItem {
    display: inline-block;
    margin: 6px;
}

.modIconAdd {
    position: relative;
    top: 1px;
    color: #4CAF50;
    margin-right: 8px;
}

.modIconRemove {
    position: relative;
    top: 1px;
    color: #f44336;
    margin-right: 8px;
}

#gameModificationsReadout {
    font-size: 12px;
    margin: 12px 0px;
    font-weight: bold;
}

#newGameWindowButtonsArea {
    text-align: right;
}

#newGameCustomizeAreaButtons {
    text-align: center;
}

#newGameWindowInner {
    overflow: auto;
}

.centerPopupWindow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 12px;
}

#manageModsWindow {
    display: grid;
    height: 80%;
    width: 80%;
    max-height: 600px;
    max-width: 600px;
    border: 1px solid #999999;
    border-radius: 8px;
    padding: 24px;
    gap: 16px;
    overflow: hidden;
    grid-template-rows: auto 1fr auto;
}

#installedModsWindowListing {
    overflow: auto;
}

#modShopWindow {
    display: grid;
    height: 80%;
    width: 80%;
    max-height: 600px;
    max-width: 660px;
    border: 1px solid #999999;
    border-radius: 8px;
    padding: 24px;
    gap: 16px;
    overflow: hidden;
    grid-template-rows: auto auto 1fr auto;
}

#modShopBetaInfo {
    grid-row: 2;
    font-weight: bold;
    color: #E53935;
}

#modShopListingArea {
    grid-row: 3;
    overflow: auto;
}

#modShopWindowBottomHold {
    grid-row: 4;
    text-align: right;
}

#manageModsWindowBottomHold {
    text-align: right;
}

#gameSelectionWindow {
    display: grid;
    height: 80%;
    width: 80%;
    max-height: 600px;
    max-width: 600px;
    border: 1px solid #999999;
    border-radius: 8px;
    padding: 24px;
    gap: 16px;
    grid-template-rows: auto auto 1fr auto;
}

#manageModsWindowTitle, #gameSelectionWindowTitle, #newGameWindowTitle, #manageGameDataWindowTitle, #modShopWindowTitle {
    grid-row: 1;
    font-size: 17px;
    font-weight: bold;
}

#modShopTopArea {
    grid-row: 1;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 6px;
    align-items: center;
}

#modShopWindowTitle {
    grid-column: 1;
}

#modShopTitleCoinPic {
    height: 22px;
    width: 22px;
    grid-column: 2;
    cursor: pointer;
}

#modShopWindowCoinBalance {
    grid-column: 3;
    font-size: 14px;
    cursor: pointer;
}

#newGameWindowTitle {
    margin-bottom: 12px;
}

#gameSelectionWindowTopbar {
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.gameSelectionWindowPrimary {
    grid-row: 3;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#gameSelectionWindowButtonsArea {
    text-align: right;
    grid-row: 4;
}

.gameSelectionWindowTopbarItem {
    text-align: center;
    font-weight: bold;
    padding: 8px;
    cursor: pointer;
}

.gameSelectionCard {
    display: grid;
    margin: 8px;
    background-color: rgba(130,130,130,0.1);
    padding: 8px;
    border-radius: 8px;
    transition: 0.2s;
    cursor: pointer;
    grid-template-columns: auto 1fr auto auto;
}

.gameSelectionCardIcon {
    grid-row: 1 / span 2;
    grid-column: 1;
    height: 48px;
    width: 48px;
    margin-right: 8px;
}

.gameSelectionCardIconCustom {
    grid-row: 1 / span 2;
    grid-column: 1;
    font-size: 48px;
    color: #1E88E5;
    margin-right: 8px;
}

.newGameCardTitle {
    font-weight: bold;
    font-size: 16px;
    grid-row: 1;
    grid-column: 2;
}

.gameSelectionCardHost {
    grid-row: 2;
    grid-column: 2;
    font-style: italic;
}

.gameSelectionCardPlayers {
    font-size: 12px;
    grid-row: 1;
    grid-column: 3;
    text-align: right;
}

.gameSelectionCardPing {
    font-size: 12px;
    font-weight: bold;
    grid-row: 2;
    grid-column: 3;
    text-align: right;
}

.gameSelectionCardSettingsBtn {
    grid-row: 1 / span 2;
    grid-column: 4;
    height: 48px;
    width: 48px;
    margin-left: 8px;
}

.gameSelectionCard:hover {
    background-color: rgba(130,130,130,0.15);
}

.gameSelectionCard:active {
    opacity: 0.25;
}

#dedicatedServerConsoleHolder {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    display: none;
}

#dedicatedServerWindow {
    display: grid;
    height: calc(100% - 74px);
    width: calc(100% - 74px);
    border-radius: 8px;
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 24px;
    gap: 16px;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr auto;
}

#dedicatedServerWindowTitle {
    grid-row: 1;
    grid-column: 1;
    font-size: 17px;
    font-weight: bold;
}

#dedicatedServerWindowButtonHolder {
    grid-row: 1;
    grid-column: 2;
    text-align: right;
}

#dedicatedServerConsoleReadoutHolder {
    grid-row: 2;
    grid-column: 1;
    display: grid;
    border-radius: 8px;
    border: 1px solid #999999;
    grid-template-rows: 1fr auto;
    overflow: hidden;
}

#dedicatedServerLogReadout {
    grid-row: 1;
    overflow: auto;
}

#dedicatedServerLogReadout .chatMessage {
    margin: 6px;
}

#dedicatedRightSidebarHolder {
    grid-row: 2;
    grid-column: 2;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    min-width: 220px;
    gap: 8px;
    overflow: hidden;
}

#dedicatedServerPlayersListing,#dedicatedServerStatusArea {
    border-radius: 8px;
    border: 1px solid #999999;
}

#dedicatedServerPlayersListing {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#dedicatedServerInputBox {
    width: calc(100% - 16px);
    background: transparent;
    border: none;
    outline: none;
    font-size: 15px;
    padding: 8px;
    border-top: 1px solid #999999;
}

.dedicatedScreenHeader {
    font-weight: bold;
}

.dedicatedServerStatusItem {
    font-size: 14px;
    margin: 6px;
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr auto;
}

.ex-disc {
    font-style: italic;
}

.dedicatedScreenSubHeader {
    font-weight: bold;
}

.dedicatedPlayerListHeader {
    font-weight: bold;
    margin: 6px;
}

.dedicatedScreenSubReadout {
    font-weight: bold;
    opacity: 0.8;
    text-align: right;
}

#dedicatedServerStatusTCPIPRemoteReadoutWarning {
    cursor: pointer;
    color: #d32f2f;
}

.dedServerPlayerCard {
    display: grid;
    padding: 6px;
    gap: 6px;
    margin: 6px;
    grid-template-columns: auto 1fr auto;
    border-radius: 8px;
    background-color: rgba(130,130,130,0.15);
    cursor: pointer;
}

.dedServerPlayerCardAdmin .dedServerPlayerCardName {
    color: #E53935;
}

.dedServerPlayerCardModerator .dedServerPlayerCardName {
    color: #1E88E5;
}

.dedServerPlayerCardBanned .dedServerPlayerCardName {
    opacity: 0.5;
    text-decoration: line-through;
}

.dedServerPlayerCardImage {
    height: 18px;
    width: 18px;
    border-radius: 18px;
    grid-row: 1;
    grid-column: 1;
    position: relative;
    top: 2px;
}

.dedServerPlayerCardName {
    font-weight: bold;
    grid-row: 1;
    grid-column: 2;
}

.dedServerPlayerCardConnection {
    font-size: 12px;
    grid-row: 2;
    grid-column: 2;
}

.dedServerPlayerCardPing {
    font-size: 12px;
    grid-row: 2;
    grid-column: 3;
}

#mainSidebarTopArea {
    grid-row: 1;
}

#radarHolder {
    overflow: hidden;
    height: 0px;
    transition: 0.2s;
    position: relative;
}

.radarMode #radarHolder {
    height: 280px;
}

.radarMode.compactSidebarMode #radarHolder {
    height: 140px;
}

#radarCanvas {
    height: 0px;
    overflow: hidden;
    background-color: #000000;
    width: 100%;
    transition: 0.2s;
    height: 280px;
}

#radarTools {
    position: absolute;
    top: 6px;
    left: 6px;
}

.radarTool {
    font-family: "fluent";
    cursor: pointer;
    color: #ffffff;
    font-weight: bold;
    text-shadow:
       2px 2px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
    font-size: 17px;
    padding: 6px;
    background-color: rgba(0,0,0,0.25);
    margin-bottom: 6px;
    border-radius: 4px;
}

.compactSidebarMode #radarCanvas {
    height: 140px;
}

.radarMode #radarCanvas {
    height: 280px;
}

.radarMode.compactSidebarMode #radarCanvas {
    height: 140px;
}

#mainSidebarTopAreaTools {
    text-align: center;
}

#constructionFilter {
    background-color: rgba(130, 130, 130, 0.2);
    border: none;
    border-radius: 8px;
    display: block;
    width: calc(100% - 12px);
    margin: 0px 6px;
    padding: 8px;
    font-size: 16px;
    outline: none;
    font-weight: 500;
    margin-bottom: 6px;
}

.compactSidebarMode #constructionFilter {
    display: none;
}

#buildOptions {
    max-height: 100%;
    overflow: auto;
    grid-row: 2;
}

#iptBuildFilter {
    grid-row: 3;
    margin: 8px;
    width: calc(100% - 34px);
}

.playermode #gameUIHolder {
    display: none;
}

.playermode #unitOptionsPopup {
    display: none;
}

#playerModeUIButtons {
    display: none;
}

.playermode #playerModeUIButtons {
    display: block;
    position: absolute;
    top: calc(12px + var(--sait));
    left: calc(12px + var(--sail));
    pointer-events: all;
}

.playerModeUIBtn {
    height: 36px;
    width: 36px;
    cursor: pointer;
    transition: 0.2s;
    display: inline-block;
    margin-right: 8px;
}

.playerModeUIBtn:active {
    opacity: 0.4;
}

#buildOptionsPopup {
    position: absolute;
    width: 220px;
    right: calc(298px + var(--sair));
    border-radius: 4px;
    padding: 6px;
    display: none;
    user-select: none;
}

.compactSidebarMode #buildOptionsPopup {
    right: calc(158px + var(--sair));
}

.chatOpen #buildOptionsPopup {
    right: calc(588px + var(--sair));
}

.chatOpen.compactSidebarMode #buildOptionsPopup {
    right: calc(448px + var(--sair));
}

#buildOptionsPopupName,#resBarInfoPopupTitle {
    font-weight: bold;
}
#buildOptionsPopupDesc,#resBarInfoPopupData {
    font-size: 12px;
}

#resBarInfoPopup {
    display: none;
    user-select: none;
    border-radius: 4px;
    padding: 6px;
    position: absolute;
    grid-template-columns: auto auto;
}

#resBarInfoPopupBarHolder {
    grid-row: 1 / span 2;
    grid-column: 1;
    height: 100%;
    min-height: 40px;
    width: 10px;
    background-color: rgba(130,130,130,0.25);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    margin-right: 6px;
}

#resBarInfoPopupBar {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: seagreen;
}

#resBarInfoPopupTitle {
    grid-row: 1;
    grid-column: 2;
}

#resBarInfoPopupData {
    grid-row: 2;
    grid-column: 2;
}

.buildOptionCost {
    display: grid;
    gap: 6px;
    grid-template-columns: auto auto auto 1fr;
    user-select: none;
    font-size: 14px;
    font-weight: bold;
}

.buildOptionCost img {
    height: 18px;
    width: auto;
    position: relative;
}

#constructionConfirmMinibarReadout .buildOptionCost {
    display: inline-grid;
    margin-right: 12px;
}

#unitOptionsPopup,#structureOptionsPopup {
    position: absolute;
    bottom: 44px;
    left: max(12px,var(--sail));
    border-radius: 4px;
    padding: 6px;
    display: none;
    grid-template-columns: auto 1fr;
    gap: 0px 8px;
    pointer-events: all;
}

#gameFPSReadout {
    position: absolute;
    left: max(12px,var(--sail));
    top: 64px;
    font-weight: bold;
    color: #ffffff;
    font-size: 14px;
    text-shadow: 
        1px 1px 0px #000000,
        1px -1px 0px #000000,
        -1px 1px 0px #000000,
        -1px -1px 0px #000000;
}

.playermode #gameFPSReadout {
    left: initial;
    right: max(12px,var(--sair));
}

.nointerface #gameFPSReadout {
    display: none;
}

#sellConfirmPopup {
    position: absolute;
    left: max(12px,var(--sail));
    border-radius: 4px;
    padding: 6px;
    display: none;
    pointer-events: all;
}

#hoverTextPopup {
    display: none;
    position: absolute;
    padding: 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    max-width: 140px;
    text-align: center;
    transform: translate(-50%, -125%);
    pointer-events: none;
}

#unitOptionsPopupIcon,#structureOptionsPopupIcon {
    grid-row: 1 / span 3;
    grid-column: 1;
    height: 48px;
    width: 48px;
    align-self: center;
}

#unitOptionsPopupName,#structureOptionsPopupName {
    font-weight: bold;
    grid-row: 1;
    grid-column: 2;
}

.structurePopupSignText {
    font-size: 12px;
    font-weight: lighter;
    opacity: 0.8;
    margin-right: 6px;
    max-width: 200px;
}

#structureOptionsHealthBar, #unitOptionsHealthBar {
    grid-row: 2;
    grid-column: 2;
    background-color: rgba(130,130,130,.25);
    height: 4px;
    border-radius: 1px;
    width: 100%;
    position: relative;
    margin: 4px 0px;
}

#unitOptionsHealthBarInner, #structureOptionsHealthBarInner {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 22%;
    background-color: #E53935;
}

#unitOptionsPopupCommands,#structureOptionsPopupCommands {
    grid-row: 3;
    grid-column: 2;
}

#structureOptionsPopupStatsHolder {
    grid-column: 1 / span 2;
    grid-row: 4;
    display: none;
}

.popupCommand {
    height: 20px;
    width: 20px;
    margin: 4px 4px 0px 0px;
    cursor: pointer;
    transition: 0.3s;
}

.buildOption {
    position: relative;
    display: inline-block;
    height: 100px;
    width: calc(50% - 14px);
    margin: 6px;
    background-position: 50% 35%;
    background-repeat: no-repeat;
    background-color: rgba(0,0,0,0.1);
    border-radius: 8px;
    border: 1px solid #222222;
    cursor: pointer;
    overflow: hidden;
}

.adlDark .buildOption {
    background-color: rgba(255,255,255,0.1);
    border: 1px solid #666666;
}

.buildOptionLabel {
    position: absolute;
    bottom: 0px;
    background-color: rgba(0,0,0,0.75);
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 3px 4px;
    width: calc(100% - 8px);
    text-align: center;
    pointer-events: none;
}

.buildOptionCount {
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: rgba(0,0,0,0.75);
    color: #ffffff;
    font-size: 10px;
    border-bottom-left-radius: 8px;
    padding: 3px 4px;
    pointer-events: none;
}

.buildOptionLocked {
    display: none;
}

.buildOptionExpensive {
    background-color: rgba(244,67,54 ,0.75);
}

.buildOptionPremium {
    background-color: rgb(255, 179, 0, 0.75);
}

.compactSidebarMode .buildOption {
    width: calc(50% - 6px);
    background-position: center;
    background-size: 70%;
    height: 48px;
    border-radius: 3px;
    margin: 2px;
}

.compactSidebarMode .buildOptionLabel {
    display: none;
}

#newsScrollerBar {
    grid-row: 4;
    grid-column: 1 / span 3;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px;
    pointer-events: auto;
}

#newsScrollerTopLineNeededDiv {
    display: none;
}

#newsScrollerNetwork {
    cursor: pointer;
    padding: 6px;
    padding-left: max(6px,var(--sail));
    font-weight: bold;
    color: #ff0000;
    background-color: #ff0000;
    text-shadow: 
        1px 1px 0px #ffffff,
        1px -1px 0px #ffffff,
        -1px 1px 0px #ffffff,
        -1px -1px 0px #ffffff
}

#newsScrollerItemsHolder {
    overflow: hidden;
    padding: 6px;
}

#newsScrollerItems {
    position: relative;
    width: 500%;
}

#newsScrollerItems span {
    position: absolute;
    padding-right: 24px;
    display: inline-block;
}

#newsScrollerItems span.withCallback:hover {
    text-decoration: underline;
    cursor: pointer;
}

#constructionConfirmMinibar {
    padding-left: var(--sail);
    padding-right: var(--sair);
    grid-template-columns: 1fr auto auto auto auto;
    gap: 6px 8px;
    transition: 0.2s;
    pointer-events: auto;
    height: 0px;
    grid-row: 5;
    grid-column: 1 / span 4;
    display: grid;
}

.inputTypetouch #constructionConfirmMinibar {
    gap: 6px 12px;
}

#constructionConfirmMinibarTitleHolder {
    grid-row: 1;
    grid-column: 1;
    margin: 8px 0px 0px 8px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-self: end;
}

#constructionConfirmMinibarTitle {
    font-weight: bold;
    grid-column: 1;
}

#constructionConfirmSizeReadout {
    grid-column: 2;
    gap: 6px;
    display: grid;
    grid-template-columns: auto 1fr;
}

#constructionConfirmSizeReadoutIcon {
    height: 18px;
    width: auto;
}

#constructionConfirmMinibarReadout {
    font-size: 14px;
    grid-row: 2;
    grid-column: 1 / span 4;
    margin: 0px 0px 8px 8px;
}

.constructionConfirmMinibarIconbutton {
    height: 24px;
    width: 24px;
    cursor: pointer;
}

#constructionConfirmMinibarRotate {
    grid-row: 1;
    grid-column: 2;
    margin-top: 8px;
}

#constructionConfirmMinibarChain {
    grid-row: 1;
    grid-column: 3;
    margin-top: 8px;
}

#constructionConfirmMinibarCoinPurchase {
    grid-row: 1;
    grid-column: 4;
    margin-top: 8px;
}

#constructionConfirmMinibarConfirm {
    grid-row: 1;
    grid-column: 5;
    margin: 8px 8px 0px 0px;
}

#constructionConfirmMinibarDismiss {
    grid-row: 2;
    grid-column: 5;
    margin: 0px 8px 8px 0px;
}

.gameEditorCostItem {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 6px;
    align-items: center;
    margin: 6px 0px;
}

.gameEditorAbundanceSlider {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto;
    gap: 6px;
}

.gameEditorAbundanceSliderTitle {
    font-weight: bold;
}

.gameEditorAbundanceSliderRange {
    width: 100%;
}

.editRemoveItem {
    color: #f44336;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    margin-right: 8px;
}

#engineSettingsWindow,#encyclopediaWindow,#statsWindow,#skinSelectionWindow {
    height: 90%;
    width: 90%;
    max-width: 900px;
    max-height: 500px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 180px 1fr;
    overflow: hidden;
    display: none;
    border-radius: 12px;
}

#engineSettingsWindowTitle,#encyclopediaWindowTitle,#statsWindowTitle,#skinSelectionWindowTitle {
    grid-row: 1;
    grid-column: 1 / span 2;
    margin: 8px;
    font-size: 16px;
    font-weight: bold;
}

#engineSettingsSidebar,#encyclopediaSidebar,#statsWindowSidebar {
    grid-row: 2;
    grid-column: 1;
}

.engineSettingSidebarItem {
    display: grid;
    grid-template-columns: auto 1fr;
    font-weight: bold;
    gap: 8px;
    padding: 8px;
    cursor: pointer;
    user-select: none;
    transition: 0.2s;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    margin-right: 6px;
    align-items: center;
}

.engineSettingSidebarItem:hover {
    background-color: rgba(130,130,130,0.25);
}

.engineSettingSidebarItem:active {
    opacity: 0.5;
}

.engineSettingSidebarItemIcon {
    font-family: fluent;
    font-weight: normal;
}

.engineSettingSidebarItem ion-icon {
    position: relative;
    top: 2px;
}

#engineSettingsMainArea,#encyclopediaMainArea,#statsWindowMainArea {
    grid-row: 2;
    grid-column: 2;
    overflow: auto;
}

#statsWindowMainArea {
    overflow: hidden;
    display: grid;
}

#encyclopediaMainArea h2 {
    margin-top: 0px;
}

.engineSettingsMainAreaSection {
    display: none;
    padding-right: 12px;
}

#statsWindowMainArea .engineSettingsMainAreaSection {
    overflow: auto;
}

#skinSelectionMainArea {
    overflow: auto;
    grid-row: 2;
    grid-column: 1 / span 2;
}

#engineSettingsDismiss,#encyclopediaDismiss,#statsWindowDismiss,#skinSelectionWindowDismiss {
    grid-row: 3;
    grid-column: 2;
    margin: 8px 8px 8px auto;
}

.engineSettingSection {
    cursor: pointer;
    user-select: none;
}

.engineSettingSectionHeader {
    font-size: 16px;
    font-weight: bold;
}

.engineSettingSectionStatus {
    font-weight: bold;
}

.engineSettingSectionReqRestart {
    font-style: italic;
    font-size: 12px;
    color: #FB8C00;
    font-weight: bold;
}

#worldNameInput {
    margin-bottom: 12px;
}

#worldTypeDiv {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    margin-bottom: 12px;
}

#worldPreviewIcon {
    height: 36px;
    width: 36px;
}

#worldPreviewName {
    display: grid;
    grid-template-rows: auto auto;
}

#worldPreviewNameTop {
    font-weight: bold;
}

#worldPreviewNameTBottom {
    font-size: 12px;
}

#gameTypeArea, #privacyArea, #newGameCustomizeArea {
    margin-bottom: 12px;
}

.statSectionHeaderIconSub {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0px 12px;
}

.statSectionHeaderIconSubIcon {
    grid-row: 1 / span 2;
    grid-column: 1;
    height: 48px;
    width: 48px;
    align-self: center;
    
}

.statSectionHeaderIconSubTitle {
    grid-row: 1;
    grid-column: 2;
    font-weight: bold;
    font-size: 20px;
}

.statSectionHeaderIconSubSubTitle {
    grid-row: 2;
    grid-column: 2;
}

.newWorldSubheader {
    font-weight: bold;
    margin-bottom: 8px;
}

.contributorCard {
    font-weight: bold;
    cursor: pointer;
}

#gameCreditsReadout h3, .engineSettingsMainAreaSection h3 {
    margin-bottom: 3px;
}

#gameCreditsReadout h4 {
    margin-bottom: 0px;
    margin-top: 14px;
    font-size: 16px;
    font-weight: normal;
}

.marginedCreditInfo {
    margin: 8px 0px;
}

.coloredLinkItem {
    font-weight: bold;
    cursor: pointer;
}

.coloredLinkItem:hover {
    text-decoration: underline;
}

.coloredLinkItem:active {
    opacity: 0.5;
}

.encyclopediaCardItem {
    display: inline-grid;
    margin: 0px 4px 6px 4px;
    width: calc(50% - 22px);
    border-radius: 4px;
    background-color: rgba(130,130,130,0.25);
    grid-template-columns: auto 1fr;
    gap: 6px;
    cursor: pointer;
    padding: 6px
}

.encyclopediaCardIcon {
    height: 18px;
    width: 18px;
}

.encyclopediaCardTitle {
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.statSectionMinor {
    display: inline-block;
    background-color: rgba(130,130,130,0.25);
    border-radius: 4px;
    padding: 6px 8px;
    text-align: center;
    margin: 8px 8px 0px 0px;
    text-align: center;
}

.statSectionMinorTitle {
    font-weight: bold;
    font-size: 14px;
}

.statSectionMinorData {
    font-size: 18px;
}

.statSectionMinorWithCallback {
    cursor: pointer;
}

.statSectionMinorWithCallback:hover {
    outline: 2px solid rgba(130,130,130,0.5);
}

.universeWorldCard {
    background-color: rgba(130,130,130,0.25);
    border-radius: 4px;
    padding: 6px 8px;
    margin-bottom: 8px;
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    gap: 0px 12px;
    cursor: pointer;
    position: relative;
}

.universeWorldCardIcon {
    grid-row: 1 / span 2;
    grid-column: 1;
    height: 48px;
    width: 48px;
    align-self: center;
}

.universalWorldCardName {
    grid-row: 1;
    grid-column: 2 / span 3;
    font-weight: bold;
}

.universeWorldCardRank {
    grid-row: 1 / span 2;
    grid-column: 1;
    color: #ffffff;
    font-weight: bold;
    text-shadow:
       2px 2px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
    font-size: 12px;
    user-select: none;
    pointer-events: none;
    height: auto;
    width: auto;
    text-align: right;
    align-self: end;
}

.universalWorldGDPHeader {
    grid-column: 2;
    grid-row: 2;
    font-size: 14px;
}

.universalWorldGDP {
    grid-column: 3;
    grid-row: 2;
    font-size: 14px;
}

.universalWorldPopHeader {
    grid-column: 4;
    grid-row: 2;
    text-align: right;
    font-size: 14px;
}

.universalWorldPop {
    grid-column: 5;
    grid-row: 2;
    text-align: right;
    font-size: 14px;
}

.universalWorldOnlineStatus {
    grid-column: 5;
    grid-row: 1;
    text-align: right;
}

.settlementCard {
    background-color: rgba(130,130,130,0.25);
    border-radius: 4px;
    padding: 6px 8px;
    margin-bottom: 8px;
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    gap: 0px 12px;
    cursor: pointer;
}

.settlementCardName {
    grid-row: 1;
    grid-column: 2;
    font-weight: bold;
}

.settlementCard:hover .settlementCardName {
    color: #FF9800;
}

.settlementCard:active {
    opacity: 0.5;
}

.settlementCardIcon, .settlementCardColor, .settlementCardLevel {
    grid-row: 1 / span 2;
    grid-column: 1;
    height: 48px;
    width: 48px;
    align-self: center;
}

.settlementCardLevel {
    color: #ffffff;
    font-weight: bold;
    text-shadow:
       2px 2px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
    text-align: center;
    font-size: 18px;
    user-select: none;
    height: auto;
    width: auto;
    pointer-events: none;
}

.settlementCardColor {
    border-radius: 48px;
}

.settlementCardIndClickable {
    cursor: pointer;
}

.settlementCardIndClickable:hover {
    outline: 2px solid #FF9800;
}

.settlementCardIndClickable:active {
    opacity: 0.5;
}

.settlementCardGoto {
    grid-row: 1 / span 2;
    grid-column: 5;
    height: 28px;
    width: 28px;
    align-self: center;
    cursor: pointer;
}

.settlementCardGift {
    grid-row: 1 / span 2;
    grid-column: 4;
    height: 28px;
    width: 28px;
    align-self: center;
    cursor: pointer;
}

.settlementCardPopHolder {
    grid-row: 1;
    grid-column: 3;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0px 6px;
    font-size: 14px;
}

.settlementCardOwnerHolder {
    grid-row: 2;
    grid-column: 2;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0px 6px;
    font-size: 14px;
}

.settlemenetCardOwnerIcon {
    height: 18px;
    width: 18px;
    border-radius: 18px;
}

.onlineSettlementCard {
    background-color: rgba(130,130,130,0.25);
    border-radius: 4px;
    padding: 6px 8px;
    margin-bottom: 8px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0px 12px;
    cursor: pointer;
    position: relative;
}

.onlineSettlementCardName {
    grid-row: 1;
    grid-column: 2;
    font-weight: bold;
}

.onlineSettlementCard:hover .onlineSettlementCardName {
    color: #FF9800;
}

.onlineSettlementCard:active {
    opacity: 0.5;
}

.onlineSettlementCardIcon, .onlineSettlementCardColor, .onlineSettlementCardColorLevel {
    grid-row: 1 / span 2;
    grid-column: 1;
    height: 48px;
    width: 48px;
    align-self: center;
}

.onlineSettlementCardColorLevel {
    color: #ffffff;
    font-weight: bold;
    text-shadow:
       2px 2px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
    text-align: center;
    font-size: 18px;
    user-select: none;
    height: auto;
    width: auto;
    pointer-events: none;
}

.onlineSettlementCardColor {
    border-radius: 48px;
}

.onlineSettlementCardRank {
    grid-row: 1 / span 2;
    grid-column: 1;
    color: #ffffff;
    font-weight: bold;
    text-shadow:
       2px 2px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
    font-size: 12px;
    user-select: none;
    pointer-events: none;
    height: auto;
    width: auto;
    text-align: right;
    align-self: end;
}

.onlineSettlementCardPopHold {
    grid-row: 1;
    grid-column: 3;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 4px;
    align-items: center;
}

.onlineSettlementCardPopIndicator {
    grid-column: 2;
}

.onlineSettlementCardPopulation {
    grid-column: 3;
}

.onlineSettlementCardWorldHold {
    grid-row: 2;
    grid-column: 3;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px;
}

.onlineSettlementCardWorldHoldIcon {
    grid-column: 1;
    height: 24px;
    width: 24px;
    align-self: center;
}

.onlineSettlementCardWorldHoldName {
    grid-column: 2;
    font-size: 12px;
}

#statsSettlementsSub {
    text-align: center;
}

#statsSettlementsSubMayorHolder {
    margin-top: 12px;
    font-weight: bold;
}

#statsSettlementsSubLevel {
    font-weight: bold;
}

#statsSettlementsSubMayorHolderImg {
    height: 18px;
    width: 18px;
    border-radius: 18px;
    position: relative;
    top: 3px;
}

#statsSettlementsSubName {
    font-weight: bold;
    font-size: 18px;
}

#statsSettlementsSubFounded {
    font-size: 16px;
    margin-bottom: 8px;
}


.settlementRatingBarHold {
    height: 24px;
    width: 100%;
    position: relative;
    border-radius: 4px;
    margin: 6px 0px;
    background-color: rgba(130,130,130,0.25);
    overflow: hidden;
}

.settlementRatingBarHoldInner {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    background-color: seagreen;
}

.settlementRatingBarLabel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
    text-shadow:
       2px 2px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}

#statsSettlementLevelUpButtonHolder {
    text-align: center;
}

#statsSettlementLevelUpForAreaDetails {
    font-size: 12px;
    font-style: italic;
}

.settlementRatingBarLabel img {
    height: 18px;
    width: 18px;
    position: relative;
    top: 1px;
}

.settlementCardPopIndicator {
    position: relative;
    top: 2px;
}

.settleSubhead {
    font-size: 16px;
    font-weight: bold;
    margin-top: 12px;
}

.settlementCardSize {
    grid-row: 2;
    grid-column: 3;
    font-size: 14px;
    text-align: right;
}

#editorExportAllHdr {
    grid-column: 1;
    grid-row: 2;
    font-weight: bold;
}

#editorExportBundHdr {
    grid-column: 2;
    grid-row: 2;
    font-weight: bold;
}

.statSubSectionArea {
    margin: 12px auto;
}

.statSubSectionArea input {
    margin: 12px 0px 6px 0px;
}

#universeHeader {
    font-size: 19px;
    font-weight: bold;
    margin-bottom: 24px;
}

#universeServerInfo {
    font-size: 14px;
    margin-bottom: 22px;
}

.universeKeyInputHold {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
}

#statsPlanet .statSubSectionArea {
    background-color: rgba(130,130,130,.25);
    border-radius: 4px;
    padding: 6px 8px;
    margin: 8px 0px;
}

.statSubSectionAreaHeader {
    font-size: 14px;
    margin-bottom: 2px;
}

.statSubSectionAreaReadout {
    font-size: 22px;
}

.allowSelectDesc .statSubSectionAreaHeader {
    -webkit-user-select: text;
    user-select: text;
}

#editorExportTitle {
    font-weight: bold;
    font-size: 16px;
    grid-row: 1;
    grid-column: 1 / span 2;
}

.editorBundlerItem {
    margin: 4px 6px;
    user-select: none;
    cursor: pointer;
}

.editorBundlerItem:hover {
    background-color: rgba(130,130,130,0.1);
}

.editorBundlerItem:active {
    opacity: 0.5;
}

#buttonsAreaLeftExportEd {
    grid-row: 4;
    grid-column: 1;
}

#buttonsAreaRightExportEd {
    grid-row: 4;
    grid-column: 2;
}

#editorExportBundler {
    display: none;
    height: 80%;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    gap: 6px 8px;
    border: 1px solid;
    border-radius: 8px;
}

#editorExportBundlerAll {
    grid-column: 1;
    grid-row: 3;
    overflow: auto;
    border: 1px solid #999999;
    border-radius: 4px;
}

#editorExportBundlerBundle {
    grid-column: 2;
    grid-row: 3;
    overflow: auto;
    border: 1px solid #999999;
    border-radius: 4px;
}

.statPlayerCard {
    background-color: rgba(130,130,130,0.25);
    border-radius: 4px;
    padding: 6px 8px;
    margin-bottom: 8px;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 0px 12px;
    cursor: pointer;
}

.statPlayerCardImage {
    grid-row: 1 / span 2;
    grid-column: 1;
    height: 48px;
    width: 48px;
    align-self: center;
    border-radius: 48px;
}

.statPlayerCardLevel {
    grid-row: 2;
    grid-column: 1;
    align-self: end;
    text-align: right;
    font-weight: bold;
    text-shadow:
       2px 2px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
    color: #ffffff;
    user-select: none;
    pointer-events: none;
    font-size: 16px;
}

.statPlayerCardName {
    grid-row: 1;
    grid-column: 2 / span 2;
    font-weight: bold;
}

.statPlayerCardOnline {
    grid-row: 1;
    grid-column: 4;
    font-size: 14px;
    text-align: right;
}

.onlineNow {
    font-weight: bold;
    color: #4CAF50;
}

.statPlayerCardColor {
    grid-row: 2;
    grid-column: 2;
    font-size: 12px;
    padding: 3px 8px;
    font-weight: bold;
    align-self: center;
    border-radius: 3px;
}

.statPlayerCardJoined {
    font-size: 14px;
    grid-row: 2;
    grid-column: 4;
}

.statPlayerCardAdmin .statPlayerCardName {
    color: #E53935;
}

.statPlayerCardModerator .statPlayerCardName {
    color: #1E88E5;
}

.statPlayerCardBanned .statPlayerCardName {
    color: #666666;
    text-decoration: line-through;
}

#encReadoutHead {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    gap: 0px 8px;
}

#encReadoutHeadIcon {
    height: 64px;
    width: 64px;
    grid-row: 1 / span 2;
    grid-column: 1;
    border-radius: 4px;
}

#encReadoutHeadName {
    grid-row: 1;
    font-weight: bold;
    font-size: 18px;
}

#encReadoutHeadDesc {
    grid-row: 2;
}

.encReadoutListHdr {
    font-weight: bold;
    margin-right: 6px;
}

.encReadoutListHdrCstAmt {
    margin-left: 4px;
}

.miniStatGraph {
    display: grid;
    margin: 6px;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 6px
}

.miniStatGrphIcon {
    height: 20px;
    width: 20px;
}

.miniStatGraphBarHolder {
    position: relative;
    height: 20px;
    background-color: #333333;
    border: 1px solid #000000;
    border-radius: 3px;
    overflow: hidden;
}

.miniStatGraphBar {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}

.miniStatGraphReadout {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
    text-shadow:
       2px 2px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}

.miniSidebarHeader {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    margin: 10px 0px 2px 0px;
}

.conProdCard {
    display: grid;
    grid-template-columns: 1fr auto auto auto 1fr;
    gap: 6px;
    align-items: center;
    font-size: 14px;
}

.conProdCardIcon {
    height: 20px;
    width: 20px;
    grid-column: 2;
}

.conProdCardTitle {
    grid-column: 3;
    font-weight: bold;
}

.conProdCardData {
    grid-column: 4;
}

.modShopCard {
    position: relative;
    display: inline-grid;
    margin: 6px;
    height: 260px;
    width: 200px;
    border: 1px solid #666666;
    border-radius: 3px;
    overflow: hidden;
    background-color: rgba(130,130,130,.25);
    cursor: pointer;
    user-select: none;
    transition: 0.2s;
    grid-template-rows: auto auto 1fr auto;
}

.modShopCardImage {
    width: 100%;
    height: 100px;
    background-position: center;
    background-size: cover;
    border-bottom: 1px solid #666666;
}

.modShopCardName {
    font-weight: bold;
    margin: 4px;
}

.modShopCardDesc {
    font-size: 12px;
    opacity: 0.6;
    margin: 4px;
    overflow: hidden;
}

.modCardBottomDiv {
    display: grid;
    align-items: center;
    font-size: 14px;
    grid-template-columns: auto auto 1fr auto auto;
    margin: 4px;
    gap: 4px;
}

.modShopCoinInd {
    grid-column: 1;
    height: 18px;
    width: 18px;
}

.modCardCost {
    grid-column: 2;
    font-weight: bold;
}

.modCardStar {
    font-family: "fluent";
    grid-column: 4;
}

.modCardRating {
    grid-column: 5;
}

.manageModCard {
    margin: 6px;
    border: 1px solid #666666;
    position: relative;
    padding: 8px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-radius: 4px;
}

.manageModCardName {
    grid-column: 1;
    grid-row: 1;
    font-weight: bold;
}

.manageModCardFilename {
    grid-column: 1;
    grid-row: 2;
    font-size: 12px;
    opacity: 0.7;
}

.manageModCardDelete{
    grid-column: 2;
    grid-row: 1 / span 3;
    font-family: "fluent";
    cursor: pointer;
    font-size: 18px;
    color: #E53935;
    font-weight: bold;
}

.manageModCardRevision {
    grid-column: 1;
    grid-row: 3;
}

.scriptActionCard {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
}

.scriptActionCardDelete {
    cursor: pointer;
    grid-column: 2;
    font-family: "fluent";
    font-size: 18px;
    color: #E53935;
    font-weight: bold;
}

.scriptActionCardDetails {
    grid-column: 1;
}

.scriptActionCardDetailsHeader {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 8px;
}

#scriptMessageArea {
    position: absolute;
    bottom: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 600px;
    background-color: rgba(0,0,0,0.75);
    padding: 24px;
    border-radius: 4px;
    user-select: none;
    transition: 0.2s;
}

.scriptMessageBlock {
    color: #ffffff;
    font-size: 17px;
}

.scriptMessageBlockOptions {
    margin-top: 18px;
    font-size: 17px;
    text-align: right;
    font-weight: bold;
}

.scriptMessageBlockOptionsButton {
    margin-left: 12px;
    cursor: pointer;
}

.scriptEditorReadoutBox {
    margin-bottom: 12px;
}

.gbtPriceCard {
    position: relative;
    width: 200px;
    max-width: 90%;
    margin: 8px;
    padding: 6px;
    background-color: rgba(130,130,130,.25);
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    display: grid;
    display: inline-grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 8px;
}

.gbtPriceCardIcon {
    grid-row: 1 / span 2;
    height: 40px;
    width: 40px;
    grid-column: 1;
}

.gbtPriceCardTitle {
    font-weight: bold;
    grid-column: 2;
    grid-row: 1;
}

.gbtPriceCardPrice {
    grid-column: 2;
    grid-row: 2;
    font-size: 12px;
}

.statReadoutPoolCard {
    position: relative;
    width: 200px;
    max-width: 90%;
    margin: 8px;
    padding: 6px;
    background-color: rgba(130,130,130,.25);
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    display: grid;
    display: inline-grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 8px;
}

.statReadoutPoolCardIcon {
    grid-row: 1 / span 3;
    height: 40px;
    width: 40px;
    grid-column: 1;
}

.statReadoutPoolCardTitle {
    font-weight: bold;
    grid-column: 2;
    grid-row: 1;
}

.statReadoutPoolCardInflowHolder {
    grid-column: 2;
    grid-row: 2;
}

.statReadoutPoolCardOutflowHolder {
    grid-column: 2;
    grid-row: 3;
}

.statReadoutPoolCardInflowHolder, .statReadoutPoolCardOutflowHolder {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: center;
}

.inflowsUp {
    color: #4CAF50;
}

.inflowsDown {
    color: #F44336;
}

.statReadoutPoolCardOutflowHolderNegative .statReadoutPoolCardOutflowAmount {
    color: #F44336;
}

.resStatSubsectionTitle {
    text-align: center;
    font-weight: bold;
    font-size: 17px;
}

.resStatSubsectionSubtitle {
    font-weight: bold;
    font-size: 16px;
    margin-top: 12px;
}

.settlementRatingBarPretitle {
    margin-top: 6px;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: -6px;
}

.resStatSubsectionFooter {
    text-align: right;
    font-weight: bold;
}

.gbtResHeaderHold {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 8px;
}

.gbtResHeaderHoldIcon {
    height: 22px;
    width: 22px;
    grid-column: 1;
}

.gbtResHeaderHoldTitle {
    font-weight: bold;
    grid-column: 2;
    grid-row: 1;
}

.gbtResourceTradeCard {
    grid-row: 2;
    grid-column: 1 / span 2;
}

.gbtResTradeIntro {
    font-size: 12px;
    font-weight: bold;
}

.gbtContractCard {
    position: relative;
    margin: 8px 0px;
    align-items: center;
    padding: 6px;
    background-color: rgba(130,130,130,.25);
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    display: grid;
    font-size: 14px;
    gap: 2px 8px;
    grid-template-columns: 1fr auto auto;
}

.gbtContractCardIcon {
    height: 22px;
    width: 22px;
}

.gbtContractCardDetails {
    font-weight: normal;
}

.gbtContractCardSubDetails {
    font-weight: bold;
}

.gbtContractCardMyOwn {
    opacity: 0.4;
}

.gbtContractCardCantAfford {
    color: #ff0000;
}

.gbtSellCard {
    display: grid;
    grid-template-columns: auto 1fr auto;
    margin-top: 12px;
    align-items: center;
    font-size: 14px;
    gap: 2px 6px;
}

#skinSelectionWindowInfo {
    font-style: italic;
    padding: 8px;
    cursor: pointer;
}

#skinSelectionListing {
    text-align: center;
}

.tokenSkinCard {
    margin: 8px;
    overflow: hidden;
    border-radius: 6px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 64px;
    width: 64px;
    display: inline-block;
}

#statsUniverse {
    grid-template-rows: auto auto 1fr;
    overflow: hidden;
}

#universeHeader {
    grid-row: 1;
}

#universeInputArea {
    grid-row: 2;
}

#universeTabsArea {
    grid-row: 2;
}

#currentUniverseListing {
    grid-row: 3;
    overflow: auto;
}

/* larger "desktop" mode, 1280x720 or larger */
@media screen and (min-width: 1280px) and (min-height: 720px) {

    #gameUIHolder {
        padding: 6px;
        height: calc(100% - 12px);
        width: calc(100% - 12px);
        padding-top: max(6px, var(--sait));
        padding-bottom: max(6px, var(--saib));
        padding-left: max(6px, var(--sail));
        padding-right: max(6px, var(--sair));
        height: calc(100% - calc(max(6px, var(--sait)) + max(6px, var(--saib))));
        width: calc(100% - calc(max(6px, var(--sail)) + max(6px, var(--sair))));
    }

    #topBar {
        padding: 8px 12px;
        margin: 6px 6px 0px 6px;
        border-radius: 4px;
        border: 1px solid #000000;
    }

    #gameFPSReadout {
        padding-top: 8px;
    }

    #mainSidebar {
        margin: 6px 6px 6px 0px;
        border-radius: 4px;
        height: initial;
    }

    #mainSidebar.open {
        margin-left: 6px;
        border: 1px solid #000000;
    }

    .chatOpen #mainSidebar.open {
        margin-right: 0px;
    }
    
    .chatOpen #apeChatHolder {
        margin: 6px;
        height: initial;
        border-radius: 4px;
        border: 1px solid #000000;
    }

    #bottomRightInfobox {
        border-top-right-radius: 4px;
        border-top: 1px solid #000000;
        border-right: 1px solid #000000;
        border-left: 1px solid #000000;
    }

    #newsScrollerBar {
        margin: 0px 0px 6px 6px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        overflow: hidden;
        border-right: 1px solid #000000;
        border-left: 1px solid #000000;
        border-bottom: 1px solid #000000;
    }

    #newsScrollerTopLineNeededDiv {
        grid-row: 4;
        grid-column: 2;
        border-top: 1px solid #000000;
        border-top-left-radius: 4px;
        margin-left: 6px;
        pointer-events: none;
        display: initial;
        z-index: 1;
    }

    #buildOptionsPopup {
        border: 1px solid #000000;
    }

    .centerPopupWindow {
        border: 1px solid #000000;
    }

    #unitOptionsPopup,#structureOptionsPopup {
        border: 1px solid #000000;
        bottom: 50px;
    }

    #sellConfirmPopup {
        border: 1px solid #000000;
    }

    #chatInputHolder {
        border: 1px solid #000000;
    }

    #constructionConfirmMinibar {
        grid-column: 1 / span 3;
        border: 1px solid #000000;
        border-radius: 4px;
        margin-bottom: 6px;
    }
}

@media screen and (max-width: 840px) {
    .toolBall, #btnSettings {
        height: 28px;
        width: 28px;
    }

    #regionNameDiv {
        font-size: 14px;
    }

    #planetNameDiv {
        font-size: 12px;
    }

    #scriptMessageArea {
        font-size: 14px;
    }
}

@media screen and (max-width: 700px) {
    #regionNameDiv {
        display: none;
    }

    #planetNameDiv {
        display: none;
    }

    #scriptMessageArea {
        font-size: 12px;
    }
}

@media screen and (max-width: 600px) {
    .toolBall,#btnSettings {
        height: 24px;
        width: 24px;
    }

    #scriptMessageArea {
        font-size: 12px;
    }
}

@media (max-height: 560px) {
    #imTitleLogo {
        max-height: 120px;
    }

    #newsScrollerBar {
        font-size: 12px;
    }
}

@media (max-height: 480px) {
    .titleMenuOption {
        font-size: 26px;
    }

    #imTitleLogo {
        max-height: 100px;
    }
}

@media (max-height: 360px) {
    .titleMenuOption {
        font-size: 20px;
    }

    #titleFooter {
        font-size: 16px;
        padding: 12px
    }

    #titleTopBar {
        padding: 12px 12px 6px 12px;
    }

    #imTitleLogo {
        max-height: 80px;
    }
}