@keyframes openModal30x300 {
    0% {
        opacity: 1;
        width: 0;
        height: 30px;
        position: absolute;
        left: 35%;
        overflow-x: hidden;
        top: 40%;
    }

    50% {
        opacity: 1;
        width: 30%;
        height: 30px;
        left: 50%;
        top: 40%;
        overflow-x: hidden;
    }

    100% {
        opacity: 1;
        width: 30%;
        height: 300px;
        left: 50%;
    }
}

@keyframes openCalendar {
    0% {
        opacity: 1;
        width: 0;
        height: 32px;
        position: absolute;
        left: 25%;
        overflow-x: hidden;
        top: 24.4%;
    }

    50% {
        opacity: 1;
        width: 1280px;
        height: 32px;
        left: 50%;
        overflow-x: hidden;
        top: 24.4%
    }

    100% {
        opacity: 1;
        width: 1280px;
        height: 720px;
        left: 50%;
    }
}

@keyframes closeModal30x300 {
    0% {
        width: 30%;
        height: 300px;
        left: 50%;
        top: 39.5%;
        overflow-x: hidden;
    }

    50% {
        width: 30%;
        height: 30px;
        left: 50%;
        top: 38%;
        overflow-x: hidden;
    }

    100% {
        width: 0;
        height: 30px;
        left: 35%;
        top: 38%;
        overflow-x: hidden;
    }
}

@keyframes closeCalendar {
    0% {
        width: 1280px;
        height: 720px;
        left: 50%;
        top: 23%;
        overflow-x: hidden;
    }

    50% {
        width: 1280px;
        height: 32px;
        left: 50%;
        top: 23%;
        overflow-x: hidden;
    }

    100% {
        width: 0;
        height: 32px;
        left: 25%;
        top: 23%;
        overflow-x: hidden;
    }
}

@keyframes addAlpha {
    0% {
        background-color: rgba(0, 0, 0, 0);
    }

    25% {
        background-color: rgba(0, 0, 0, 0.9);
    }

    100% {
        background-color: rgba(0, 0, 0, 0.9);
    }
}

@keyframes removeAlpha {
    0% {
        background-color: rgba(0, 0, 0, 0.9);
    }

    75% {
        background-color: rgba(0, 0, 0, 0.9);
    }

    100% {
        background-color: rgba(0, 0, 0, 0);
    }
}

@keyframes hoverFadeMMO {
    0% {
        -webkit-box-shadow: 0px 0 5px 5px rgb(177 52 15 / 50%);
    }

    50% {
        -webkit-box-shadow: 0px 0 20px 10px rgb(255 177 128 / 80%);
    }

    100% {
        -webkit-box-shadow: 0px 0 5px 5px rgb(177 52 15 / 50%);
    }
}

@keyframes hoverFadeEIC {
    0% {
        -webkit-box-shadow: 0px 0 5px 5px rgb(160 242 255 / 50%);
    }

    50% {
        -webkit-box-shadow: 0px 0 20px 10px rgb(26 220 251 / 80%);
    }

    100% {
        -webkit-box-shadow: 0px 0 5px 5px rgb(160 242 255 / 50%);
    }
}

@keyframes hoverFadeVRU {
    0% {
        -webkit-box-shadow: 0px 0 5px 5px rgb(178 255 168 / 50%);
    }

    50% {
        -webkit-box-shadow: 0px 0 20px 10px rgb(27 255 0 / 80%);
    }

    100% {
        -webkit-box-shadow: 0px 0 5px 5px rgb(178 255 168 / 50%);
    }
}

@keyframes notificationPulse {
    0% {
        background: #ff6700;
    }

    50% {
        background: #ff2c00;
    }

    100% {
        background: #ff6700;
    }
}

@keyframes notificationPulseBlue {
    0% {
        background: #2196F3;
    }

    50% {
        background: #0965ae;
    }

    100% {
        background: #2196F3;
    }
}

#app {
    width: 100%;
}

.accountUntrustedStatus {
	background-color: rgba(206,1,0,1);
	color: #dbdbdb;
	height: 22.5pt;
	width: 100%;
	font-family: "Open Sans",sans-serif;
	font-size: 14px;
    line-height: 1.42857143;
	display: block;
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-text-size-adjust: 100%;
}

.accountUntrustedStatus .status {
	font-size: 1pc;
	font-weight: bold;
	line-height: 22.5pt;
	height: 0.3125in;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	display: block;
}

.head .userInfo {
    position: absolute;
    top: 50px;
    left: 50px;
	user-select: none;
}

.head .userInfo .avatar {
    border-radius: 10px;
    width: 128px;
    height: 128px;
    z-index: 2;
    position: relative;
}

.head.mmo .userInfo .avatar {
    -webkit-box-shadow: 0 0 25px 10px rgb(177 52 15 / 50%);
}

.head.eic .userInfo .avatar {
    -webkit-box-shadow: 0 0 25px 10px rgb(26 220 251 / 50%);
}

.head.vru .userInfo .avatar {
    -webkit-box-shadow: 0 0 25px 10px rgb(4 255 0 / 50%);
}

.head .userInfo .avatar .uploadAvatar {
    font-size: 18px;
    font-weight: bold;
    position: relative;
    top: -20px;
}

.head.mmo .userInfo .avatar .uploadAvatar {
    color: #ff0000;
}

.head.mmo .userInfo .avatar .uploadAvatar:hover {
    color: #ffffff;
    -webkit-text-stroke: 2px #ff3b0080;
}

.head.eic .userInfo .avatar .uploadAvatar {
    color: #00aaff;
}

.head.eic .userInfo .avatar .uploadAvatar:hover {
    color: #ffffff;
    -webkit-text-stroke: 2px #00b8ffa6;
}

.head.vru .userInfo .avatar .uploadAvatar {
    color: #aaff00;
}

.head.vru .userInfo .avatar .uploadAvatar:hover {
    color: #ffffff;
    -webkit-text-stroke: 2px #51d30080;
}

.head .userInfo .username {
    font-size: 25px;
    position: absolute;
    top: -10px;
    left: 160px;
    width: 800px;
}

.head.mmo .userInfo .username {
    color: rgb(255 80 0 / 50%);
}

.head.eic .userInfo .username {
    color: rgb(26 220 251 / 50%);
}

.head.vru .userInfo .username {
    color: rgb(4 255 0 / 50%);
}


.head .userInfo .infoBox {
    position: absolute;
    top: 35px;
    left: 160px;
    width: 300px;
    color: #ffffff;
}

.head .userInfo .infoBox .premium .expireTime {
    margin-top: -5px;
    margin-bottom: 0px;
}

.head .userInfo .infoBox .level .expBar {
    display: inline-block;
    vertical-align: middle;
    font-size: 75%;
    text-align: center;
    height: 15px;
    width: 190px;
    margin: 0 5px;
    border: 0px solid;
    border-radius: 10px;
    vertical-align: middle;
}

.head.mmo .userInfo .infoBox .level .expBar {
    -webkit-box-shadow: 0 0 5px 5px rgb(177 52 15 / 50%);
}

.head.eic .userInfo .infoBox .level .expBar {
    -webkit-box-shadow: 0 0 5px 5px rgb(26 220 251 / 50%);
}

.head.vru .userInfo .infoBox .level .expBar {
    -webkit-box-shadow: 0 0 5px 5px rgb(4 255 0 / 50%);
}

.head .userInfo .infoBox .level .expBar .expProgress {
    width: 50%;
    height: 16px;
    border-radius: 10px;
    position: relative;
    top: -22px;

}

.head.mmo .userInfo .infoBox .level .expBar .expProgress {
    background: rgb(155 30 0 / 75%)
}

.head.eic .userInfo .infoBox .level .expBar .expProgress {
    background: rgb(10 210 255 / 75%)
}

.head.vru .userInfo .infoBox .level .expBar .expProgress {
    background: rgb(0 190 30 / 75%);
}

.head .userInfo .infoBox .level .expText {
	position: relative;
	z-index: 5;
}

.head .userInfo .infoBox .company {
    float: right;
    color: #ffffff;
}

.head .userInfo .infoBox .company .changeCompany {
    vertical-align: middle;
    position: relative;
    z-index: 5;
}

.head.mmo .userInfo .infoBox .company .changeCompany {
    color: rgb(200 100 100 /75%);
}

.head.eic .userInfo .infoBox .company .changeCompany {
    color: rgb(170 230 230 /75%);
}

.head.vru .userInfo .infoBox .company .changeCompany {
    color: rgb(170 255 170 /75%);
}

.head.mmo .userInfo .infoBox .company .changeCompany:hover {
    color: rgb(255 0 0 / 50%);
}

.head.eic .userInfo .infoBox .company .changeCompany:hover {
    color: rgb(4 200 255 / 50%);
}

.head.vru .userInfo .infoBox .company .changeCompany:hover {
    color: rgb(4 255 0 / 50%);
}

.head .userInfo .infoBox .premium {
    float: right;
    color: #ffffff;
}

.easteregg {
    position: absolute;
    transform: scale(0.5) rotate(-25deg);
    z-index: 0;
    left: -200px;
    top: 26px;
    cursor: pointer;
    user-select: none;
}

.imgLink {
    width: 610px;
    margin-left: auto;
    margin-right: auto;
    user-select: none;
}

.head.mmo .imgLink .logo {
    filter: hue-rotate(30deg) brightness(1.5);
}

.head.eic .imgLink .logo {
    filter: hue-rotate(187deg) brightness(1.5);
}

.head.vru .imgLink .logo {
    filter: hue-rotate(100deg) brightness(1.5);
}

.system {
    float: right;
    position: relative;
    top: -235px;
    right: 10px;
}

.system .sysBtn {
    color: #ffffff;
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    margin: 5px;
}

.system.mmo .sysBtn {
    background-color: #3a0b04c2 !important;
    background-image: linear-gradient(-45deg,#d1400d73, #ffff0000);
    -webkit-box-shadow: 0 0 5px 5px rgb(177 52 15 / 50%);
    border-radius: 10px;
}

.system.eic .sysBtn {
    background-color: #071636c2 !important;
    background-image: linear-gradient(-45deg,#02c9ff66, #ffff0000);
    -webkit-box-shadow: 0 0 5px 5px rgb(26 220 251 / 50%);
}

.system.vru .sysBtn {
    background-color: rgb(12 58 3 / 50%) !important;
    background-image: linear-gradient(-45deg,#0bab157d, #ffff0000);
    -webkit-box-shadow: 0 0 5px 5px rgb(4 255 0 / 50%);
}

.system.mmo .sysBtn:hover {
    animation: hoverFadeMMO 1s infinite;
}

.system.eic .sysBtn:hover {
    animation: hoverFadeEIC 1s infinite;
}

.system.vru .sysBtn:hover {
    animation: hoverFadeVRU 1s infinite;
}

.system .sysBtn .sysIcon {
    vertical-align: middle;
    margin: 10px;
    font-size: 30px;
}

.menu {
    width: 100%;
    height: 50px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    position: relative;
    top: -60px;
}

.menu.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

.menu.mmo {
    background-color: #3a0b04c2 !important;
    background-image: linear-gradient(-45deg,#d1400d73, #ffff0000);
    -webkit-box-shadow: 0 0 5px 5px rgb(177 52 15 / 50%);
}

.menu.eic {
    background-color: #071636c2 !important;
    background-image: linear-gradient(-45deg,#02c9ff66, #ffff0000);
    -webkit-box-shadow: 0 0 5px 5px rgb(26 220 251 / 50%);
}

.menu.vru {
    background-color: rgb(12 58 3 / 50%) !important;
    background-image: linear-gradient(-45deg,#0bab157d, #ffff0000);
    -webkit-box-shadow: 0 0 5px 5px rgb(4 255 0 / 50%);
}

.menu .menubar {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.mmo .menubar {

}

.eic .menubar {

}

.vru .menubar {

}

.menu .menubar .notifications {
    height: 20px;
    width: 100%;
    position: absolute;
    top: 40px;
    pointer-events: none;
}

.menu .menubar .notifications .craftingNotification {
    width: 25px;
    position: absolute;
    left: 5px;
    top: -12px;
    display: block;
}

.menu .menubar .notifications .newApplication {
    width: 25px;
    position: absolute;
    left: 5px;
    top: -12px;
    display: block;
}

.menu .menubar .notifications .newDiplomacy {
    width: 25px;
    position: absolute;
    left: 55px;
    top: -12px;
    display: block;
}

.menu .menubar .notifications .availableDonations {
    width: 25px;
    position: absolute;
    left: 105px;
    top: -12px;
    display: block;
}

.menu .menubar .notifications .notifyIcon {
    height: 25px;
    width: 25px;
    background: #ff6700;
    margin: 0 auto;
    border-radius: 50%;
    z-index: 10000001;
    position: relative;
    animation: notificationPulse 2s infinite;
}

.menu .menubar .notifications .notifyIcon.blueNotif {
    background: #2196F3;
    z-index: 10000001;
    position: relative;
    animation: notificationPulseBlue 2s infinite;
}

.menu .menubar .notifications .notificationsAmount {
    width: 40px;
    background: #ff6700;
    position: absolute;
    height: 15px;
    top: 19px;
    left: 14px;
    z-index: 10000000;
    line-height: 15px;
    font-size: 15px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-left: 5px;
    animation: notificationPulse 2s infinite;
}

.menu .menubar .notifications .notificationsAmount.blueNotif {
    background: #2196F3;
    animation: notificationPulseBlue 2s infinite;
    z-index: 10000000;
}

.menu .menubar li {
    display: inline;
    -webkit-transition: color .5s ease, background-color .5s ease;
    transition: color .5s ease, background-color .5s ease;
    width: 150px;
    text-align: center;
    font-size: 20px;
    color: #ffffff;
    height: 100%;
    line-height: 50px;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.menu .menubar li a {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
    padding: 15px;
    line-height: 20px;
    color: #ffffff;
}

.menu .menubar .dropdownContent {
    display: none;
}

.menu .menubar .dropdownContent.show {
    display: grid;
    z-index: 999999;
    position: absolute;
}

.menu .menubar .dropdownContent2 {
    display: none;
}

.menu .menubar .dropdownContent2.show {
    display: grid;
    z-index: 999999;
    position: absolute;
}

.menu .menubar .dropdownContent3 {
    display: none;
}

.menu .menubar .dropdownContent3.show {
    display: grid;
    z-index: 999999;
    position: absolute;
}

.mmo .menubar .dropdownContent.show,
.mmo .menubar .dropdownContent2.show,
.mmo .menubar .dropdownContent3.show {
    background-color: rgb(120 25 1) !important;
    background-image: linear-gradient(-45deg,#00000099, #ffff0000);
}

.eic .menubar .dropdownContent.show,
.eic .menubar .dropdownContent2.show,
.eic .menubar .dropdownContent3.show {
    background-color: rgb(8 27 54) !important;
    background-image: linear-gradient(-45deg,#00000099, #ffff0000);
}


.vru .menubar .dropdownContent.show,
.vru .menubar .dropdownContent2.show,
.vru .menubar .dropdownContent3.show {
    background-color: rgb(12 58 3 / 90%) !important;
    background-image: linear-gradient(-45deg,#00000099, #ffff0000);
}

.mmo .menubar li:hover {
    background-color: #e334003d;
}

.eic .menubar li:hover {
    background-color: #00b9e33d;
}

.vru .menubar li:hover {
    background-color: #23e3003d;
}

.vru .menubar .dropdownMenu:hover {
    background-color: #23e3003d;
    background-image: linear-gradient(-45deg,#0bab157d, #ffff0000);
}

.data {
    width: fit-content;
    height: 40px;
    margin: 0 auto;
    position: relative;
    top: -40px;
    border-radius: 20px;
}

.data.mmo {
    background-color: #3a0b04c2 !important;
    background-image: linear-gradient(-45deg,#d1400d73, #ffff0000);
    -webkit-box-shadow: 0 0 5px 5px rgb(177 52 15 / 50%);
}

.data.eic {
    background-color: #071636c2 !important;
    background-image: linear-gradient(-45deg,#02c9ff66, #ffff0000);
    -webkit-box-shadow: 0 0 5px 5px rgb(26 220 251 / 50%);
}

.data.vru {
    background-color: rgb(12 58 3 / 50%) !important;
    background-image: linear-gradient(-45deg,#0bab157d, #ffff0000);
    -webkit-box-shadow: 0 0 5px 5px rgb(4 255 0 / 50%);
}

.data .databar {
    display: flex;
    justify-content: center;
}

.data .databar li {
    display: inline-block;
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    line-height: 36px;
    padding: 0 20px;
}

.data .databar .dataIcon {
    width: 30px;
    vertical-align: text-top;
}

.data.mmo .databar .dataIcon {
    filter: hue-rotate(180deg);
}

.data.eic .databar .dataIcon {
    filter: hue-rotate(0deg);
}

.data.vru .databar .dataIcon {
    filter: hue-rotate(265deg);
}

.data .databar .dataIcon.greenkey {
    filter: hue-rotate(0deg);
}

.data .databar .dataIcon.redkey {
    filter: hue-rotate(230deg);
}

.data .databar .dataIcon.bluekey {
    filter: hue-rotate(95deg);
}


#modalMain {
    display: none;
}

#modalMain.active {
    background-color: rgba(0, 0, 0, 0.9);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 1000;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: block;
    animation: addAlpha .75s ease-out;
}

#modalMain .changeAvatar {
    display: none;
}

#modalMain .changeAvatar.active {
    width: 30%;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0px solid #553a00c2;
    border-radius: 10px;
    animation: openModal30x300 .75s ease-out;
    user-select: none;
    overflow: hidden;
    display: block;
}

#modalMain.closing {
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-radius: 10px;
    animation: removeAlpha 0.75s ease-in;
    display: block;
    z-index: 100;
}

#modalMain .changeAvatar.closing {
    border-radius: 10px;
    position: absolute;
    top: 500px;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    height: 300px;
    overflow-y: hidden;
    display: block;
    animation: closeModal30x300 .75s ease-out;
    z-index: 1000;
}

#modalMain.mmo .mWindow {
    background-color: #3a0b04c2 !important;
    background-image: linear-gradient(-45deg,#d1400d73, #ffff0000);
    -webkit-box-shadow: 0 0 5px 5px rgb(177 52 15 / 50%);
}

#modalMain.eic .mWindow{
    background-color: #071636c2 !important;
    background-image: linear-gradient(-45deg,#02c9ff66, #ffff0000);
    -webkit-box-shadow: 0 0 5px 5px rgb(26 220 251 / 50%);
}

#modalMain.vru .mWindow {
    background-color: rgb(12 58 3 / 50%) !important;
    background-image: linear-gradient(-45deg,#0bab157d, #ffff0000);
    -webkit-box-shadow: 0 0 5px 5px rgb(4 255 0 / 50%);
    border-radius: 10px;
}

#modalMain .modalHead {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
    height: 30px;
}

#modalMain.mmo .modalHead {
    background-color: rgb(125 35 0 / 75%);
}

#modalMain.eic .modalHead {
    background-color: rgb(0 106 189 / 75%);
}

#modalMain.vru .modalHead {
    background-color: rgb(30 110 0 / 0.75);
}

#modalMain .modalHead .modalHeadText {
    text-align: center;
    color: #ffffff;
    font-size: 25px;
    line-height: 25px;
    font-weight: 700;
}

#modalMain .modalHead .closeBtn {
    color: #ffffff;
    float: right;
    background: darkred;
    padding: 3px 10px;
    border-top-right-radius: 10px;
    user-select: none;
    cursor: pointer;
    height:30px;
    width: 30px;
}

#modalMain .modalHead .closeBtn:hover {
    color: #ff0000;
    float: right;
    background: orange;
    padding: 3px 10px;
    border-top-right-radius: 10px;
    user-select: none;
    cursor: pointer;
}

#modalMain .modalContent {
    width: 90%;
    margin: 20px 5%;
}

.customRadio {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding-left: 30px; 
    line-height: 22px;
    font-size: 20px;
    margin: 0 60px;
}

.customRadio input {
    position: absolute;
    opacity: 0; /* Verstecke den echten Radiobutton */
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 50%;
}

.customRadio input:checked + .checkmark:after {
    content: '';
    position: absolute;
    /*top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

#modalMain .avatarInput {
    width: 90%;
    margin: 0 auto;
}

#modalMain .prefix {
    color: #ffffff;
}

#modalMain .avatarURL {
    user-select: none;
    width: 90%;
    height: 30px;
    color: #ffffff;
}

#modalMain label {
    user-select: none;
}


#modalMain.mmo .customRadio input:checked + .checkmark:after {
    background: rgb(241 102 24 / 75%);
}

#modalMain.eic .customRadio input:checked + .checkmark:after {
    background: #2679a6;
}

#modalMain.vru .customRadio input:checked + .checkmark:after {
    background: rgb(178 255 0 / 75%);
}


#modalMain .modalContent .btnArea {
    display: flex;
    justify-content: space-around;
    color: #ffffff;
    text-align: center;
}


#modalMain .modalContent .btnArea .modalBtn {
    display: inline-block;
    width: 200px;
    height: 50px;
    color: #fff;
    user-select: none;
    -moz-user-select: none;
    margin: 20px 10px;
    text-align: center;
    font-size: 20px;
    line-height: 45px;
    border-radius: 10px;
    cursor: pointer;
}

#modalMain.mmo .modalContent .btnArea .modalBtn {
    background-color: #3a0b04c2 !important;
    background-image: linear-gradient(-45deg,#ff42007a, #ffff0000);
    -webkit-box-shadow: 0 0 5px 5px rgb(177 52 15 / 50%);
}

#modalMain.eic .modalContent .btnArea .modalBtn {
    background-color: #024a6cbf !important;
    background-image: linear-gradient(-45deg,#02c9ff66, #ffff0000);
    -webkit-box-shadow: 0 0 5px 5px rgb(26 220 251 / 50%);
}

#modalMain.vru .modalContent .btnArea .modalBtn {
    background-color: rgb(12 58 3 / 50%) !important;
    background-image: linear-gradient(-45deg,#0bab157d, #ffff0000);
    -webkit-box-shadow: 0 0 5px 5px rgb(4 255 0 / 50%);
}

#modalMain .modalContent .btnArea .modalBtn .material-icons {
    vertical-align: sub;
    padding: 5px;
}

#modalMain.mmo .modalContent .btnArea .modalBtn:hover {
    animation: hoverFadeMMO 1s infinite;
}

#modalMain.eic .modalContent .btnArea .modalBtn:hover {
    animation: hoverFadeEIC 1s infinite;
}

#modalMain.vru .modalContent .btnArea .modalBtn:hover {
    animation: hoverFadeVRU 1s infinite;
}

/*force_rename*/

#modalMain .forceRename {
    display: none;
}

#modalMain .forceRename.active {
    width: 30%;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0px solid #553a00c2;
    border-radius: 10px;
    animation: openModal30x300 .75s ease-out;
    user-select: none;
    overflow: hidden;
    display: block;
}

#modalMain .forceRename.closing {
    border-radius: 10px;
    position: absolute;
    top: 500px;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    height: 300px;
    overflow-y: hidden;
    display: block;
    animation: closeModal30x300 .75s ease-out;
    z-index: 1000;
}

#modalMain.mmo .forceRename {
    background-color: #3a0b04c2 !important;
    background-image: linear-gradient(-45deg,#d1400d73, #ffff0000);
    -webkit-box-shadow: 0 0 5px 5px rgb(177 52 15 / 50%);
}

#modalMain.eic .forceRename {
    background-color: #071636c2 !important;
    background-image: linear-gradient(-45deg,#02c9ff66, #ffff0000);
    -webkit-box-shadow: 0 0 5px 5px rgb(26 220 251 / 50%);
}

#modalMain.vru .forceRename {
    background-color: rgb(12 58 3 / 50%) !important;
    background-image: linear-gradient(-45deg,#0bab157d, #ffff0000);
    -webkit-box-shadow: 0 0 5px 5px rgb(4 255 0 / 50%);
    border-radius: 10px;
}



/*XMAS*/

#modalMain .xmas {
    display: none;
}

#modalMain .xmas.active {
    width: 1280px;
    height: 720px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border: 0px solid #553a00c2;
    border-radius: 10px;
    animation: openCalendar 1s ease-out;
    user-select: none;
    overflow: hidden;
    display: block;
    z-index: 1001;
    -webkit-box-shadow: 0 0 5px 5px rgb(0 200 255 / 0.5);
}

#modalMain .xmas.closing {
    border-radius: 10px;
    position: absolute;
    top: 500px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 300px;
    overflow-y: hidden;
    display: block;
    -webkit-box-shadow: 0 0 5px 5px rgb(0 200 255 / 0.5);
    animation: closeCalendar .75s ease-out;
    z-index: 1000;
}


#modalMain .xmas .modalHead {
    height: 32px;
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
    background: url(http://coalescence.online/img/lights.png);
    background-color: rgb(0 70 125 / 75%);
    background-repeat: repeat-x;
    background-position: center;
    background-size: contain;
    border: 1px solid #553a00c2;
    text-align: center;
}

#modalMain .xmas .modalHead .modalHeadText {
    color: #2272d5;
    font-size: 25px;
    line-height: 25px;
    font-weight: 900;
    text-shadow: 0 0px 10px #03f7f9;
    -webkit-text-stroke: 2px #11c7ed;
}

#modalMain .xmas .modalHead .closeBtn {
    color: #ffffff;
    float: right;
    background: darkred;
    padding: 3px 10px;
    border-top-right-radius: 10px;
    user-select: none;
    cursor: pointer;
}

#modalMain .xmas .modalHead .closeBtn:hover {
    color: #ff0000;
    float: right;
    background: orange;
    padding: 3px 10px;
    border-top-right-radius: 10px;
    user-select: none;
    cursor: pointer;
}


#modalMain .xmas .modalContent {
    background: url(http://coalescence.online/img/bg/xmas-new-bg.png);
    width: 100%;
    height: 100%;
    background-size: cover;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    column-gap: 100px;
}

#modalMain .xmas .modalContent .door {
    width: 100px;
    height: 100px;
    border: 2px solid #00e5ff;
    border-right: 1px dashed #00e5ff;
    border-radius: 5px;
    display: inline-block;
    background: #00000055;
    user-select: none;
    color: #2272d5;
    font-size: 25px;
    line-height: 25px;
    font-weight: 900;
    text-shadow: 0 0px 10px #03f7f9;
    -webkit-text-stroke: 2px #11c7ed;
}

#modalMain .xmas .modalContent .door .number {
    font-size: 60px;
    line-height: 20px;
    font-weight: 900;
    color: #2293d5;
    text-shadow: 0 0px 10px #03f7f9;
    -webkit-text-stroke: 2px #11c7ed;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70%);
}



#modalMain .xmas .modalContent label {
    perspective: 1000px;
    transform-style: preserve-3d;
    cursor: pointer;
    display: flex;
    min-height: 100%;
    width: 100%;
    height: 100%;
    position: relative;
}

#modalMain .xmas .modalContent .door input {
    display: none;
}

#modalMain .xmas .modalContent .doorcontent {
    transform-style: preserve-3d;
    transition: all 300ms;
    transform-origin: 100% 50%;
    width: 100%;
    height: 100%;
}

#modalMain .xmas .modalContent .door input:checked + .doorcontent {
    transform: rotateY(180deg);
    cursor: default;
}

#modalMain .xmas .modalContent .doorcontent div {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#modalMain .xmas .modalContent .doorcontent .back {
    background: linear-gradient(to right, #006ca2, #008bc7);
    transform: rotateY(180deg);
    border-left: 2px dashed #00e5ff;
    border: 1px solid #00e5ff;
    border-radius: 5px;
}

#modalMain .xmas .modalContent .door .inside {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 300ms ease-in-out;
}

#modalMain .xmas .modalContent .door :checked ~ .inside {
    opacity: 1;
}

#modalMain .xmas .modalContent .door .inside.claimed .rewardText {
    font-size: 25px;
    text-align: center;
    color: #d54d22;
    line-height: 105px;
    font-weight: 900;
    text-shadow: 0 0px 10px #f90303;
    -webkit-text-stroke: 2px #ed8b11;
    position: relative;
    top: 38px;
}

#modalMain .xmas .modalContent .door .inside.expired .rewardText {
    font-size: 25px;
    text-align: center;
    color: #d52222;
    line-height: 105px;
    font-weight: 900;
    text-shadow: 0 0px 10px #310000;
    -webkit-text-stroke: 2px #000000;
    position: relative;
    top: 38px;
}






#modalMain .xmas .modalContent .door.opened {
    border: 1px dotted #00e5ff;
}

#modalMain .xmas .modalContent .door.expired {
    /*border: 1px solid red;*/
    background: #000000cc;
    position: relative;
    z-index: 2;
    cursor: not-allowed;
}


#modalMain .xmas .modalContent .door .reward {
    position: relative;
    top: -10px;
}

#modalMain .xmas .modalContent .door .reward.expired {
    filter: brightness(0.5);
}

#modalMain .xmas .modalContent .door .reward.claimed .rewardText {
    font-size: 25px;
    text-align: center;
    line-height: 105px;
    color: #2272d5;
    font-size: 25px;
    font-weight: 900;
    text-shadow: 0 0px 10px #03f7f9;
    -webkit-text-stroke: 2px #11c7ed;
    position: relative;
    top: 38px;
    display: block;
}

#modalMain .xmas .modalContent .door .reward.expired .rewardText {
    font-size: 25px;
    text-align: center;
    color: #006696;
    line-height: 105px;
    font-weight: 900;
    text-shadow: 0 0px 10px #000000;
    -webkit-text-stroke: 2px #691616;
    position: relative;
    top: 38px;
}


#mcb50 {
    background-image: url('http://coalescence.online/do_img/global/items/ammunition/laser/mcb-50_100x100.png');
    width: 100px;
    height: 100px;
}

#sab50 {
    background-image: url('http://coalescence.online/do_img/global/items/ammunition/laser/sab-50_100x100.png');
    width: 100px;
    height: 100px;
}

#ucb100 {
    background-image: url('http://coalescence.online/do_img/global/items/ammunition/laser/ucb-100_100x100.png');
    width: 100px;
    height: 100px;
}

#rsb75 {
    background-image: url('http://coalescence.online/do_img/global/items/ammunition/laser/rsb-75_100x100.png');
    width: 100px;
    height: 100px;
}

#plt2021 {
    background-image: url('http://coalescence.online/do_img/global/items/ammunition/rocket/plt-2021_100x100.png');
    width: 100px;
    height: 100px;
}

#plt3030 {
    background-image: url('http://coalescence.online/do_img/global/items/ammunition/rocket/plt-3030_100x100.png');
    width: 100px;
    height: 100px;
}

#wizx {
    background-image: url('http://coalescence.online/do_img/global/items/ammunition/specialammo/wiz-x_100x100.png');
    width: 100px;
    height: 100px;
}

#sg3nb02 {
    background-image: url('http://coalescence.online/do_img/global/items/equipment/generator/shield/sg3n-b02_100x100.png');
    width: 100px;
    height: 100px;
}

#sg3nb03 {
    background-image: url('http://coalescence.online/do_img/global/items/equipment/generator/shield/sg3n-b03_100x100.png');
    width: 100px;
    height: 100px;
}

#lf3 {
    background-image: url('http://coalescence.online/do_img/global/items/equipment/weapon/laser/lf-3_100x100.png');
    width: 100px;
    height: 100px;
}

#lf4 {
    background-image: url('http://coalescence.online/do_img/global/items/equipment/weapon/laser/lf-4_100x100.png');
    width: 100px;
    height: 100px;
}

#prl {
    background-image: url('http://coalescence.online/do_img/global/items/equipment/weapon/laser/pr-l_100x100.png');
    width: 100px;
    height: 100px;
}

#ee {
    background-image: url('http://coalescence.online/do_img/global/items/resource/extra-energy_100x100.png');
    width: 100px;
    height: 100px;
}

#premium {
    background-image: url('http://coalescence.online/do_img/global/items/resource/premium-days-3_100x100.png');
    width: 100px;
    height: 100px;
}

#eco10 {
    background-image: url('http://coalescence.online/do_img/global/items/ammunition/rocketlauncher/eco-10_100x100.png');
    width: 100px;
    height: 100px;
}

#hps {
    background-image: url('http://coalescence.online/do_img/global/items/resource/prismatic-socket_100x100.png');
    width: 100px;
    height: 100px;
}

#hhfc {
    background-image: url('http://coalescence.online/do_img/global/items/resource/high-frequency-cable_100x100.png');
    width: 100px;
    height: 100px;
}

#hnco {
    background-image: url('http://coalescence.online/do_img/global/items/resource/nano-condenser_100x100.png');
    width: 100px;
    height: 100px;
}

#hmt {
    background-image: url('http://coalescence.online/do_img/global/items/resource/micro-transistors_100x100.png');
    width: 100px;
    height: 100px;
}

#hhp {
    background-image: url('http://coalescence.online/do_img/global/items/resource/hybrid-processor_100x100.png');
    width: 100px;
    height: 100px;
}

#hnca {
    background-image: url('http://coalescence.online/do_img/global/items/resource/nano-case_100x100.png');
    width: 100px;
    height: 100px;
}

#lgf {
    background-image: url('http://coalescence.online/do_img/global/items/resource/logfile_100x100.png');
    width: 100px;
    height: 100px;
}

#alloy {
    background-image: url('http://coalescence.online/do_img/global/items/resource/collectable/hybrid-alloy_100x100.png');
    width: 100px;
    height: 100px;
}

#schism {
    background-image: url('http://coalescence.online/do_img/global/items/resource/collectable/schism_100x100.png');
    width: 100px;
    height: 100px;
}

#design {
    background-image: url('http://coalescence.online/do_img/global/items/ship/g-coalescence/design/g-coalescence-xmas_100x100.png');
    width: 100px;
    height: 100px;
}


/*----------Low Budget Screen----------*/
@media only screen and (max-width: 1500px) {
    .head .userInfo {
        top: 30px;
        left: 30px;
    }

    .head .userInfo .avatar .uploadAvatar {
        position: absolute;
        top: 124px;
    }

    .head .userInfo .username {
        top: 0px;
    }

    .imgLink {
        width: 400px;
        margin-left: auto;
        margin-right: auto;
        user-select: none;
        height: 220px;
    }

    .imgLink .logo {
        transform: scale(0.7);
        position: relative;
        top: -25px;
    }

    .system {
        top: -210px;
    }

    .system .sysBtn {
        width: 40px;
        height: 40px;
    }

    .system .sysBtn .sysIcon {
        font-size: 25px;
        margin: 7.5px;
    }

    .menu {
        top: -80px;
        height: 32px;
    }

    .menu .menubar {
        height: 32px;
    }

    .menu .menubar li a {
        line-height: 32px;
        color: #ffffff;
        vertical-align: middle;
        padding: 0;
    }

}

    /* width */
    ::-webkit-scrollbar {
        width: 5px;
        background-image: linear-gradient(-45deg,#80808066, #ffff0000);
        border-radius: 5px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background-color: transparent !important;
        border-radius: 5px;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: grey;
        border-radius: 5px;
    }

        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #000000;
        }