/***
    Category UI elements
 */

/* start toggle-switch */
toggle-switch {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #333;
    margin: -1px 3px 3px 3px;
    position: relative;
    border-radius: 50px;
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);

    /* if different size is needed adjust this */
    width: 60px;
    height: 19px;
}

toggle-switch::after {
    content: "OFF";
    color: #000;
    position: absolute;
    z-index: 0 !important;
    font-weight: bold;
    text-shadow: 1px 1px 0px rgba(255,255,255,.15);
    text-transform: uppercase;

    /* if different size is needed adjust this */
    font: 11px/22px Arial, sans-serif;
    right: 5px;
}

toggle-switch::before {
    content: "ON";
    color: #27ae60;
    position: absolute;
    z-index: 0 !important;
    font-weight: bold;
    text-transform: uppercase;

    /* if different size is needed adjust this */
    left: 5px;
    font: 11px/22px Arial, sans-serif;
 }

toggle-switch > label {
    display: block;
    cursor: pointer;
    position: absolute;
    z-index: 1 !important;
    background: rgb(252,255,244);
    background: linear-gradient(180deg, rgba(252,255,244,1) 0%, rgba(223,229,215,1) 40%, rgba(179,190,173,1) 100%);
    border-radius: 50px;
    transition: all 0.4s ease;
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);

    /* if different size is needed adjust this */
    width: 27px;
    height: 13px;
    top: 4px;
    left: 3px;
}

toggle-switch > input[type=checkbox] {
    visibility: hidden;
}

toggle-switch > input[type=checkbox]:checked + label {
    /* if different size is needed adjust this */
    left: 30px;
}
/* end toggle-switch */

/* start square-checkbox*/
square-checkbox {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: rgba(252,255,244,1);
    background: linear-gradient(180deg, rgba(252,255,244,1) 0%, rgba(223,229,215,1) 40%, rgba(179,190,173,1) 100%);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);

    /* if different size is needed adjust this */
    width: 20px;
    height: 20px;
}

square-checkbox > label {
    position: absolute;
    cursor: pointer;
    background: rgb(34,34,34);
    background: linear-gradient(180deg, rgba(34,34,34,1) 0%, rgba(69,72,77,1) 100%);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

    /* if different size is needed adjust this */
    width: 16px;
    height: 16px;
    top: 2px;
    left: 2px;
}

square-checkbox > label::after {
    content: '';
    position: absolute;
    background: rgb(46,173,65);
    background: linear-gradient(180deg, rgba(46,173,65,1) 0%, rgba(20,91,50,1) 100%);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    opacity: 0;

    /* if different size is needed adjust this */
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
}

square-checkbox > label:hover::after {
    opacity: 0.3;
}

square-checkbox > input[type=checkbox] {
    visibility: hidden;
}

square-checkbox > input[type=checkbox]:checked + label:after {
    opacity: 1;
}
/* end square-checkbox */

/* start round-radiobox */
round-radiobox {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: #fcfff4;
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    border-radius: 50px;

    /* if different size is needed adjust this */
    width: 20px;
    height: 20px;
}
round-radiobox > label {
    position: absolute;
    cursor: pointer;
    background: rgb(34,34,34);
    background: linear-gradient(top, #222 0%, #45484d 100%);
    border-radius: 50px;
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

    /* if different size is needed adjust this */
    width: 16px;
    height: 16px;
    top: 2px;
    left: 2px;
}
round-radiobox > label::after {
    content: '';
    position: absolute;
    background: rgb(46,173,65);
    background: linear-gradient(180deg, rgba(46,173,65,1) 0%, rgba(20,91,50,1) 100%);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    opacity: 0;
    border-radius: 50px;

    /* if different size is needed adjust this */
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
}
round-radiobox > label:hover::after {
    opacity: 0.3;
}

round-radiobox > input[type=radio] {
    visibility: hidden;
}

round-radiobox > input[type=radio]:checked + label:after {
    opacity: 1;
}
/* end round-radiobox */

/***
    Category icons
 */

.menu-toggler:checked ~ ul > .menu-item {
        opacity: 1;
}

/* start characterclass-icon */
characterclass-icon {
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    cursor: pointer;
}

characterclass-icon[explorer][sq20]   {
    background-image: url(//gf3.geo.gfsrv.net/cdn84/0361a8c680334eb802f0f35676a66c.png);
}
characterclass-icon[explorer][sq28]   {
    background-image: url(//gf1.geo.gfsrv.net/cdn9c/1433cc4b84f60df3034379f69f238a.png);
    background-size: cover;
}
characterclass-icon[explorer][sq40]   {
    background-image: url(//gf1.geo.gfsrv.net/cdn9c/1433cc4b84f60df3034379f69f238a.png);
}
characterclass-icon[explorer][sq100]   {
    background-image: url(//gf3.geo.gfsrv.net/cdnb6/6b04d094b1eaec68f470760db4c6ca.png);
}
characterclass-icon[explorer][sq200]   {
    background-image: url(//gf3.geo.gfsrv.net/cdn58/a7226db4268e3c22d65a3fbd936975.png);
}
characterclass-icon[miner][sq20] {
    background-image: url(//gf1.geo.gfsrv.net/cdnfd/d8fef22d14bb70419405c4dceb5d3d.png);
}
characterclass-icon[miner][sq28] {
    background-image: url(//gf2.geo.gfsrv.net/cdnd7/f5b7a5620b23b5290ee5954f07d160.png);
    background-size: cover;
}
characterclass-icon[miner][sq40] {
    background-image: url(//gf2.geo.gfsrv.net/cdnd7/f5b7a5620b23b5290ee5954f07d160.png);
}
characterclass-icon[miner][sq100] {
    background-image: url(//gf3.geo.gfsrv.net/cdn87/d31422123848b21d1fe5f877cbf23a.png);
}
characterclass-icon[miner][sq200] {
    background-image: url(//gf3.geo.gfsrv.net/cdn87/ebadb2179a145168f234a9287786c1.png);
}
characterclass-icon[neutral][sq20] {
    background-image: url(//gf1.geo.gfsrv.net/cdnc4/b093c16b9d703f67b4959d0e1110c5.png);
}
characterclass-icon[neutral][sq40] {
    background-image: url(//gf1.geo.gfsrv.net/cdn67/ca50f93455a3c6894f0c5ae03e665f.png);
}
characterclass-icon[neutral][sq100] {
    background-image: url(//gf1.geo.gfsrv.net/cdn33/058a0dd0c45a1d05e8c52657c6c54f.png);
}
characterclass-icon[neutral][sq200] {
    background-image: url(//gf3.geo.gfsrv.net/cdn89/7924c98af4dc3dc0def79275ebcd7f.png);
}
characterclass-icon[warrior][sq20] {
    background-image: url(//gf3.geo.gfsrv.net/cdne6/a1f541e196f249a658175a40e9945a.png);
}
characterclass-icon[warrior][sq28] {
    background-image: url(//gf2.geo.gfsrv.net/cdna9/c9a66d4b358353d42d503ca99388b6.png);
    background-size: cover;
}
characterclass-icon[warrior][sq40] {
    background-image: url(//gf2.geo.gfsrv.net/cdna9/c9a66d4b358353d42d503ca99388b6.png);
}
characterclass-icon[warrior][sq100] {
    background-image: url(//gf3.geo.gfsrv.net/cdnb3/5484c3b846afe9be9c0a75abbf45d7.png);
}
characterclass-icon[warrior][sq200] {
    background-image: url(//gf3.geo.gfsrv.net/cdn2b/4820e3768f76849d1faa718d57b09e.png);
}
/* end characterclass-icon */

/* start allianceclass-icon */
allianceclass-icon {
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    cursor: pointer;
}

allianceclass-icon[explorer][sq20]   {
    background-image: url(//gf1.geo.gfsrv.net/cdn62/bb0ff2146d93887ff9bf2a14a25a45.png);
}
allianceclass-icon[explorer][sq40]   {
    background-image: url(//gf3.geo.gfsrv.net/cdn56/eaa936531415467b959dfcd67bfcf9.png);
}
allianceclass-icon[explorer][sq100]   {
    background-image: url(//gf2.geo.gfsrv.net/cdn19/fd0da2a874d163d64bcbe0189819ce.png);
}
allianceclass-icon[explorer][sq200]   {
    background-image: url(//gf2.geo.gfsrv.net/cdn4b/58ca35abbdfaf080563fe67fc08a6d.png);
}
allianceclass-icon[trader][sq20] {
    background-image: url(//gf1.geo.gfsrv.net/cdn01/02614bfe12340c2d8f89ce58ad83c7.png);
}
allianceclass-icon[trader][sq40] {
    background-image: url(//gf3.geo.gfsrv.net/cdn5a/32c89f02522a44b46ca3dc359fe1e2.png);
}
allianceclass-icon[trader][sq100] {
    background-image: url(//gf1.geo.gfsrv.net/cdn35/4c2481811140db89100f0bc2e7118a.png);
}
allianceclass-icon[trader][sq200] {
    background-image: url(//gf2.geo.gfsrv.net/cdn49/dc5d139f79fa745594db047e57b26e.png);
}
allianceclass-icon[neutral][sq20] {
    background-image: url(//gf2.geo.gfsrv.net/cdn4d/91f4cdf171328d7cef3443860cd063.png);
}
allianceclass-icon[neutral][sq40] {
    background-image: url(//gf1.geo.gfsrv.net/cdn69/17c83524ca049ab09fc5dee53e2004.png);
}
allianceclass-icon[neutral][sq100] {
    background-image: url(//gf2.geo.gfsrv.net/cdn15/be2d91117e545679cb3aaa73e22af2.png);
}
allianceclass-icon[neutral][sq200] {
    background-image: url(//gf3.geo.gfsrv.net/cdn89/7924c98af4dc3dc0def79275ebcd7f.png);
}
allianceclass-icon[warrior][sq20] {
    background-image: url(//gf2.geo.gfsrv.net/cdnaa/f2435fcc1304b0d181323254d3d3ec.png);
}
allianceclass-icon[warrior][sq40] {
    background-image: url(//gf1.geo.gfsrv.net/cdn0a/10ca470f74ddd86449c6b4c85f331c.png);
}
allianceclass-icon[warrior][sq100] {
    background-image: url(//gf1.geo.gfsrv.net/cdn36/ee056f72d77c0bb3d511e51f1a693c.png);
}
allianceclass-icon[warrior][sq200] {
    background-image: url(//gf2.geo.gfsrv.net/cdn48/c6136ea39904df0239a3d5eaa24bb8.png);
}
/* end allianceclass-icon */

/* start thick-headline for fleet-content */
thick-headline {
    display: flex;
    flex-direction: row;
    width: 100%;
    position: relative;
}
thick-headline-header {
    background: url(//gf1.geo.gfsrv.net/cdnce/0a5ba5507cb9bfae1b615cd72fc051.png) repeat-x 0 0;
    height: 35px;
    min-width: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2 !important;
}
thick-headline-header::before {
    background: url(//gf1.geo.gfsrv.net/cdn6f/ecbdb336ee6ce8112e2875e389bbf9.png) no-repeat 0 0;
    content: "";
    height: 35px;
    width: 3px;
}
thick-headline-header::after {
    background: url(//gf3.geo.gfsrv.net/cdn23/56f8d5a932238db6b779e17bf9a9f8.png) no-repeat 0 0;
    content: "";
    height: 35px;
    position: absolute;
    width: 26px;
    right: -26px;
}

thick-headline-header p {
    font-size: 18px;
    font-weight: 700;
    padding-left: 10px;
}
thick-headline-background {
    background: url(//gf2.geo.gfsrv.net/cdn10/0721fd07d84834abab94b85b6e7303.gif) repeat-x;
    height: 35px;
    /* flex-grow: 1; */
    display: flex;
    justify-content: flex-end;
    width: calc(100% - 25px);
    position: relative;
    --current-width: 350;
    align-items: center;
    gap: 4px;
}

thick-headline-background::after {
    background: url(//gf3.geo.gfsrv.net/cdn84/a43a0c46b4446617d53d9fd8249402.png) no-repeat 0 0;
    content: "";
    height: 35px;
    width: 25px;
    display: block;
    position: absolute;
    right: -25px;
}
/* end thick-headline for fleet-content */

/* start fleet-content for displaying fleetinformation in combatsim */
fleet-content {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    position: relative;
    box-sizing: border-box;
    flex-wrap: wrap;
    width: 100%;
    border: 2px solid #000;
    margin: 0 auto 7px;
    padding: 0 5px 5px;
    background: linear-gradient(to bottom, #1f2630 0%,#111921 100%);
    min-height:50px;
}

fleet-content::before {
    position: absolute;
    left: -9px;
    top: -2px;
    width: calc(100% + 18px);
    height: 28px;
    background: url(//gf3.geo.gfsrv.net/cdn53/f333e15eb738b8ec692340f507e1ae.png) bottom left no-repeat, url(//gf2.geo.gfsrv.net/cdnd5/66551209db14e23b3001901b996cc6.png) bottom right no-repeat;
    content: "";
}

fleet-content::after {
    position: absolute;
    left: -9px;
    bottom: -5px;
    width: calc(100% + 18px);
    height: 50px;
    background: url(//gf3.geo.gfsrv.net/cdnea/0330abcdca0d125d35a0ebace4b584.png) bottom left no-repeat, url(//gf1.geo.gfsrv.net/cdn9b/8003a40825bc96919c5fec01b018b8.png) bottom right no-repeat;
    content: "";
}
/* end fleet-content for displaying fleetinformation in combatsim */

/* start combatsim-section fir displaying a section in combatsim */
combatsim-section {
    display:flex;
    flex-direction: column;
    width:360px;
}
combatsim-section[show-lifeform="1"] {
    width:720px;
}
simulation-overview {
    width: 100%;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
simulation-overview combatsim-section {
    width:990px !important;
}

/* end combatsim-section fir displaying a section in combatsim */

/* start gradient-button */
gradient-button {
    display: flex;
    justify-content: center;
    align-items: center;
}
gradient-button .custom_btn {
    width: 100%;
    height: 100%;
    border: 1px outset #696666 !important;
    border-radius: 4px;
    cursor: pointer;
    color: #bbb;
    font-size: 17px;
    background: linear-gradient(160deg, rgba(54,77,99,1) 0%, rgba(40,57,72,1) 33%, rgba(20,30,38,1) 66%, rgba(18,26,33,1) 100%);
    box-shadow: 0px 2px 3px 1px #0000008c;
    outline: none;
    transition: 300ms;
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 0;
    padding-inline: 0;
    box-sizing: border-box;
}

gradient-button .custom_btn.send {
    font-size: 11px;
    font-weight: 700;
}

gradient-button .custom_btn.green,
gradient-button .custom_btn.active {
    border: 1px outset #66B817 !important;
    background: linear-gradient(160deg, rgba(55, 99, 54, 1) 0%, rgba(40, 72, 40, 1) 33%, rgba(26, 38, 20, 1) 66%, rgba(24, 33, 18, 1) 100%);
}

gradient-button .custom_btn.red {
    border: 1px outset rgb(161, 36, 36) !important;
    background: linear-gradient(160deg, rgba(161, 36, 36, 1) 0%, rgba(144, 29, 29, 1) 33%, rgba(29, 18, 17, 1) 66%, rgba(33, 18, 18, 1) 100%);
}

gradient-button button:not(:disabled).selected {
    border: 1px outset #dee3d8 !important;
    background: linear-gradient(160deg, rgba(67,107,145,1) 0%, rgba(52,76,97,1) 33%, rgba(40,58,71,1) 66%, rgba(20,26,32,1) 100%);
    box-shadow: 0px 0px 0px 0px transparent;
}

.achievementOverviewTierSelectionContainer gradient-button button:not(:disabled).selected,
.achievementOverviewTierSelectionContainer gradient-button button:not(:disabled).selected {
    box-shadow: 0px 2px 3px 1px #0000008c;
}

gradient-button button:not(:disabled):hover {
    background: linear-gradient(160deg, rgba(67,107,145,1) 0%, rgba(52,76,97,1) 33%, rgba(40,58,71,1) 66%, rgba(20,26,32,1) 100%);
    box-shadow: 0px 0px 0px 0px transparent;
}

gradient-button button:not(:disabled).green.selected,
gradient-button button:not(:disabled).active.selected {
    border: 1px outset #dee3d8 !important;
    background: linear-gradient(160deg, rgb(68, 121, 67) 0%, rgb(49, 87, 49) 33%, rgb(35, 52, 28) 66%, rgb(35, 49, 27) 100%);
}
gradient-button button:not(:disabled).green:hover,
gradient-button button:not(:disabled).active:hover {
    border: 1px outset #66B817 !important;
    background: linear-gradient(160deg, rgb(68, 121, 67) 0%, rgb(49, 87, 49) 33%, rgb(35, 52, 28) 66%, rgb(35, 49, 27) 100%);
}
gradient-button button:not(:disabled).red:hover {
    border: 1px outset #cb2323 !important;
    background: linear-gradient(160deg, rgba(203, 35, 35, 1) 0%, rgba(200, 31, 31, 1) 33%, rgba(38, 21, 20, 1) 66%, rgba(33, 18, 18, 1) 100%);
}

gradient-button button:disabled,
gradient-button button[disabled] {
    border: 1px solid #999999 !important;
    opacity: 0.3;
    cursor: not-allowed;
}
/* end gradient-button */

/* start group title */
group-title {
    display: flex;
    justify-content: center;
    background: url(//gf3.geo.gfsrv.net/cdneb/f5f81e8302aaad56c958c033677fb8.png) -143px -162px no-repeat;
    height: 25px;
    width: 231px;
    font-size: 11px;
    line-height: 25px;
    margin: 8px 0 5px -12px;
    position: relative;
}
group-title > group-title-label {
    display: block;
    color: #9c0;
    text-decoration: none;
}
.fullrow-title group-title {
    margin: 8px -14px 5px 0;
}
group-title.group-title-left {
    margin: 8px 0 5px -12px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}
group-title.group-title-left > group-title-label {
    display: block;
    color: #9c0;
    text-decoration: none;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
.fullrow-title {
    display: flex;
    justify-content: end;
    flex-grow: 1;
    height: 40px;
}
#combatSimReport group-title.group-title-left {
    margin: 8px 0 5px -7px;
}
group-title > group-title-icon {
    position: absolute;
    left: 5px;
    cursor: pointer;
    width: 25px;
    height: 25px;
    font-size: 15px;
    text-align: center;
    filter: grayscale(0.7);
}
group-title > group-title-icon:hover {
    filter: grayscale(0);
}
group-title > group-title-icon.emoji {
    left: 2px;
    top: 3px;
}
/* end group title */

/******************************************
 ******** TECHNOLOGY SPRITE IMAGES ********
 ******************************************/
/* There is no need at all to change anything in this complete section */
technology-icon {
    background-repeat: no-repeat;
    display: inline-block;
    width: 30px;
    height: 30px;
    --var-width: 30;
    --var-height: 30;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

technology-icon[regular] {
    background-image: url(//gf3.geo.gfsrv.net/cdn53/7a9861be0c38bf7de05a57c56d73cf.jpg) !important;
    background-size: calc(4000px * var(--var-width) * 0.005) calc(6000px * var(--var-height) * 0.005);
}

technology-icon[lifeform] {
    background-image: url(//gf3.geo.gfsrv.net/cdne7/2d828476bacc6b1e6bbfaf2a9fb041.jpg) !important;
    background-size: calc(3600px * var(--var-width) * 0.005) calc(5920px * var(--var-height) * 0.005);
}
server-settings-icon[bordered],
resource-icon[bordered],
technology-icon[bordered] {
    border: 1px outset #ccc!important;
}

/* ~~~~~ BUILDINGS ~~~~~ */
technology-icon[metalmine] {
    background-position: 0 0;
}
technology-icon[crystalmine] {
    background-position: 5.25% 0;
}
technology-icon[deuteriumsynthesizer] {
    background-position: 10.52% 0;
}
technology-icon[solarplant] {
    background-position: 15.78% 0;
}
technology-icon[fusionplant] {
    background-position: 21.05% 0;
}
technology-icon[roboticsfactory] {
    background-position: 0 17.24%;
}
technology-icon[nanitefactory] {
    background-position: 26.31% 17.24%;
}
technology-icon[shipyard] {
    background-position: 5.25% 17.24%;
}
technology-icon[metalstorage] {
    background-position: 31.57% 0;
}
technology-icon[crystalstorage] {
    background-position: 36.84% 0;
}
technology-icon[deuteriumstorage] {
    background-position: 42.1% 0;
}
technology-icon[researchlaboratory] {
    background-position: 10.52% 17.24%;
}
technology-icon[terraformer] {
    background-position: 31.57% 17.24%;
}
technology-icon[alliancedepot] {
    background-position: 15.78% 17.24%;
}
technology-icon[moonbase] {
    background-position: 36.85% 17.24%;
}
technology-icon[sensorphalanx] {
    background-position: 42.1% 17.24%;
}
technology-icon[jumpgate] {
    background-position: 47.36% 17.24%;
}
technology-icon[missilesilo] {
    background-position: 21.05% 17.24%;
}
technology-icon[repairdock] {
    background-position: 52.62% 17.24%;
}
/* ~~~~~ RESEARCHES ~~~~~ */
/* ~~ BASICS ~~ */
technology-icon[energytechnology] {
    background-position: 0 68.96%;
}
technology-icon[lasertechnology] {
    background-position: 5.25% 68.96%;
}
technology-icon[iontechnology] {
    background-position: 10.52% 68.96%;
}
technology-icon[hyperspacetechnology] {
    background-position: 15.78% 68.96%;
}
technology-icon[plasmatechnology] {
    background-position: 21.05% 68.96%;
}
/* ~~ DRIVES ~~ */
technology-icon[combustiondrivetechnology] {
    background-position: 26.31% 68.96%;
}
technology-icon[impulsedrivetechnology] {
    background-position: 31.57% 68.96%;
}
technology-icon[hyperspacedrivetechnology] {
    background-position: 36.84% 68.96%;
}
/* ~~ ADVANCED~~ */
technology-icon[espionagetechnology] {
    background-position: 42.1% 68.96%;
}
technology-icon[computertechnology] {
    background-position: 47.36% 68.96%;
}
technology-icon[astrophysicstechnology] {
    background-position: 52.62% 68.96%;
}
technology-icon[researchnetworktechnology] {
    background-position: 57.88% 68.96%;
}
technology-icon[gravitontechnology] {
    background-position: 63.15% 68.96%;
}
/* ~~ COMBAT ~~ */
technology-icon[weaponstechnology] {
    background-position: 73.68% 68.96%;
}
technology-icon[shieldingtechnology] {
    background-position: 78.94% 68.96%;
}
technology-icon[armortechnology] {
    background-position: 68.42% 68.96%;
}
/* ~~~~~ SHIPS ~~~~~ */
/* ~~ CIVIL ~~ */
technology-icon[transportersmall] {
    background-position: 42.1% 51.72%;
}
technology-icon[transporterlarge] {
    background-position: 47.36% 51.72%;
}
technology-icon[colonyship] {
    background-position: 52.62% 51.72%;
}
technology-icon[recycler] {
    background-position: 57.89% 51.72%;
}
technology-icon[espionageprobe] {
    background-position: 63.15% 51.72%;
}
technology-icon[solarsatellite] {
    background-position: 26.31% 0;
}
/* ~~ MILITARY ~~ */
technology-icon[fighterlight] {
    background-position: 0 51.72%;
}
technology-icon[fighterheavy] {
    background-position: 5.25% 51.72%;
}
technology-icon[cruiser] {
    background-position: 10.53% 51.72%;
}
technology-icon[battleship] {
    background-position: 15.78% 51.72%;
}
technology-icon[interceptor] {
    background-position: 21.05% 51.72%;
}
technology-icon[bomber] {
    background-position: 26.31% 51.72%;
}
technology-icon[destroyer] {
    background-position: 31.57% 51.72%;
}
technology-icon[deathstar] {
    background-position: 36.84% 51.72%;
}
technology-icon[resbuggy] {
    background-position: 84.20% 51.72%;
}
technology-icon[explorer] {
    background-position: 78.94% 51.72%;
}
technology-icon[reaper] {
    background-position: 73.68% 51.72%;
}
/* ~~~~~ DEFENSES ~~~~~ */
technology-icon[rocketlauncher] {
    background-position: 0 34.48%;
}
technology-icon[lasercannonlight] {
    background-position: 5.25% 34.48%;
}
technology-icon[lasercannonheavy] {
    background-position: 10.52% 34.48%;
}
technology-icon[gausscannon] {
    background-position: 15.78% 34.48%;
}
technology-icon[ioncannon] {
    background-position: 21.05% 34.48%;
}
technology-icon[plasmacannon] {
    background-position: 26.31% 34.48%;
}
technology-icon[shielddomesmall] {
    background-position: 31.57% 34.48%;
}
technology-icon[shielddomelarge] {
    background-position: 36.84% 34.48%;
}
/* ~~~~~ MISSILES ~~~~~ */
technology-icon[missileinterceptor] {
    background-position: 42.1% 34.48%;
}
technology-icon[missileinterplanetary] {
    background-position: 47.36% 34.48%;
}
/**** LIFEFORM TECHNOLOGY IMAGES ****/
/* ~~~~~ BUILDINGS ~~~~~ */
technology-icon[lifeformtech11101],
technology-icon[lifeformtech11102],
technology-icon[lifeformtech11103],
technology-icon[lifeformtech11104],
technology-icon[lifeformtech11105],
technology-icon[lifeformtech11106],
technology-icon[lifeformtech11107],
technology-icon[lifeformtech11108],
technology-icon[lifeformtech11109],
technology-icon[lifeformtech11110],
technology-icon[lifeformtech11111],
technology-icon[lifeformtech11112]
{
    background-position-y: 0;
}
technology-icon[lifeformtech12101],
technology-icon[lifeformtech12102],
technology-icon[lifeformtech12103],
technology-icon[lifeformtech12104],
technology-icon[lifeformtech12105],
technology-icon[lifeformtech12106],
technology-icon[lifeformtech12107],
technology-icon[lifeformtech12108],
technology-icon[lifeformtech12109],
technology-icon[lifeformtech12110],
technology-icon[lifeformtech12111],
technology-icon[lifeformtech12112]
{
    background-position-y: 25.87%;
}
technology-icon[lifeformtech13101],
technology-icon[lifeformtech13102],
technology-icon[lifeformtech13103],
technology-icon[lifeformtech13104],
technology-icon[lifeformtech13105],
technology-icon[lifeformtech13106],
technology-icon[lifeformtech13107],
technology-icon[lifeformtech13108],
technology-icon[lifeformtech13109],
technology-icon[lifeformtech13110],
technology-icon[lifeformtech13111],
technology-icon[lifeformtech13112]
{
    background-position-y: 51.74%;
}
technology-icon[lifeformtech14101],
technology-icon[lifeformtech14102],
technology-icon[lifeformtech14103],
technology-icon[lifeformtech14104],
technology-icon[lifeformtech14105],
technology-icon[lifeformtech14106],
technology-icon[lifeformtech14107],
technology-icon[lifeformtech14108],
technology-icon[lifeformtech14109],
technology-icon[lifeformtech14110],
technology-icon[lifeformtech14111],
technology-icon[lifeformtech14112]
{
    background-position-y: 77.62%;
}

technology-icon[lifeformtech11101],
technology-icon[lifeformtech12101],
technology-icon[lifeformtech13101],
technology-icon[lifeformtech14101]
{
    background-position-x: 0;
}
technology-icon[lifeformtech11102],
technology-icon[lifeformtech12102],
technology-icon[lifeformtech13102],
technology-icon[lifeformtech14102]
{
    background-position-x: 5.88%;
}
technology-icon[lifeformtech11103],
technology-icon[lifeformtech12103],
technology-icon[lifeformtech13103],
technology-icon[lifeformtech14103]
{
    background-position-x: 11.76%;
}
technology-icon[lifeformtech11104],
technology-icon[lifeformtech12104],
technology-icon[lifeformtech13104],
technology-icon[lifeformtech14104]
{
    background-position-x: 17.65%;
}
technology-icon[lifeformtech11105],
technology-icon[lifeformtech12105],
technology-icon[lifeformtech13105],
technology-icon[lifeformtech14105]
{
    background-position-x: 23.53%;
}
technology-icon[lifeformtech11106],
technology-icon[lifeformtech12106],
technology-icon[lifeformtech13106],
technology-icon[lifeformtech14106]
{
    background-position-x: 29.42%;
}
technology-icon[lifeformtech11107],
technology-icon[lifeformtech12107],
technology-icon[lifeformtech13107],
technology-icon[lifeformtech14107]
{
    background-position-x: 35.29%;
}
technology-icon[lifeformtech11108],
technology-icon[lifeformtech12108],
technology-icon[lifeformtech13108],
technology-icon[lifeformtech14108]
{
    background-position-x: 41.17%;
}
technology-icon[lifeformtech11109],
technology-icon[lifeformtech12109],
technology-icon[lifeformtech13109],
technology-icon[lifeformtech14109]
{
    background-position-x: 47.06%;
}
technology-icon[lifeformtech11110],
technology-icon[lifeformtech12110],
technology-icon[lifeformtech13110],
technology-icon[lifeformtech14110]
{
    background-position-x: 52.94%;
}
technology-icon[lifeformtech11111],
technology-icon[lifeformtech12111],
technology-icon[lifeformtech13111],
technology-icon[lifeformtech14111]
{
    background-position-x: 58.82%;
}
technology-icon[lifeformtech11112],
technology-icon[lifeformtech12112],
technology-icon[lifeformtech13112],
technology-icon[lifeformtech14112]
{
    background-position-x: 64.70%;
}
/* ~~~~~ Researches ~~~~~ */
technology-icon[lifeformtech11201],
technology-icon[lifeformtech11202],
technology-icon[lifeformtech11203],
technology-icon[lifeformtech11204],
technology-icon[lifeformtech11205],
technology-icon[lifeformtech11206],
technology-icon[lifeformtech11207],
technology-icon[lifeformtech11208],
technology-icon[lifeformtech11209],
technology-icon[lifeformtech11210],
technology-icon[lifeformtech11211],
technology-icon[lifeformtech11212],
technology-icon[lifeformtech11213],
technology-icon[lifeformtech11214],
technology-icon[lifeformtech11215],
technology-icon[lifeformtech11216],
technology-icon[lifeformtech11217],
technology-icon[lifeformtech11218]
{
    background-position-y: 12.93%;
}
technology-icon[lifeformtech12201],
technology-icon[lifeformtech12202],
technology-icon[lifeformtech12203],
technology-icon[lifeformtech12204],
technology-icon[lifeformtech12205],
technology-icon[lifeformtech12206],
technology-icon[lifeformtech12207],
technology-icon[lifeformtech12208],
technology-icon[lifeformtech12209],
technology-icon[lifeformtech12210],
technology-icon[lifeformtech12211],
technology-icon[lifeformtech12212],
technology-icon[lifeformtech12213],
technology-icon[lifeformtech12214],
technology-icon[lifeformtech12215],
technology-icon[lifeformtech12216],
technology-icon[lifeformtech12217],
technology-icon[lifeformtech12218]
{
    background-position-y: 38.81%;
}
technology-icon[lifeformtech13201],
technology-icon[lifeformtech13202],
technology-icon[lifeformtech13203],
technology-icon[lifeformtech13204],
technology-icon[lifeformtech13205],
technology-icon[lifeformtech13206],
technology-icon[lifeformtech13207],
technology-icon[lifeformtech13208],
technology-icon[lifeformtech13209],
technology-icon[lifeformtech13210],
technology-icon[lifeformtech13211],
technology-icon[lifeformtech13212],
technology-icon[lifeformtech13213],
technology-icon[lifeformtech13214],
technology-icon[lifeformtech13215],
technology-icon[lifeformtech13216],
technology-icon[lifeformtech13217],
technology-icon[lifeformtech13218]
{
    background-position-y: 64.69%;
}
technology-icon[lifeformtech14201],
technology-icon[lifeformtech14202],
technology-icon[lifeformtech14203],
technology-icon[lifeformtech14204],
technology-icon[lifeformtech14205],
technology-icon[lifeformtech14206],
technology-icon[lifeformtech14207],
technology-icon[lifeformtech14208],
technology-icon[lifeformtech14209],
technology-icon[lifeformtech14210],
technology-icon[lifeformtech14211],
technology-icon[lifeformtech14212],
technology-icon[lifeformtech14213],
technology-icon[lifeformtech14214],
technology-icon[lifeformtech14215],
technology-icon[lifeformtech14216],
technology-icon[lifeformtech14217],
technology-icon[lifeformtech14218]
{
    background-position-y: 90.56%;
}
technology-icon[lifeformtech11201],
technology-icon[lifeformtech12201],
technology-icon[lifeformtech13201],
technology-icon[lifeformtech14201]
{
    background-position-x: 0;
}
technology-icon[lifeformtech11202],
technology-icon[lifeformtech12202],
technology-icon[lifeformtech13202],
technology-icon[lifeformtech14202]
{
    background-position-x: 5.88%;
}
technology-icon[lifeformtech11203],
technology-icon[lifeformtech12203],
technology-icon[lifeformtech13203],
technology-icon[lifeformtech14203]
{
    background-position-x: 11.76%;
}
technology-icon[lifeformtech11204],
technology-icon[lifeformtech12204],
technology-icon[lifeformtech13204],
technology-icon[lifeformtech14204]
{
    background-position-x: 17.65%;
}
technology-icon[lifeformtech11205],
technology-icon[lifeformtech12205],
technology-icon[lifeformtech13205],
technology-icon[lifeformtech14205]
{
    background-position-x: 23.53%;
}
technology-icon[lifeformtech11206],
technology-icon[lifeformtech12206],
technology-icon[lifeformtech13206],
technology-icon[lifeformtech14206]
{
    background-position-x: 29.41%;
}
technology-icon[lifeformtech11207],
technology-icon[lifeformtech12207],
technology-icon[lifeformtech13207],
technology-icon[lifeformtech14207]
{
    background-position-x: 35.29%;
}
technology-icon[lifeformtech11208],
technology-icon[lifeformtech12208],
technology-icon[lifeformtech13208],
technology-icon[lifeformtech14208]
{
    background-position-x: 41.17%;
}
technology-icon[lifeformtech11209],
technology-icon[lifeformtech12209],
technology-icon[lifeformtech13209],
technology-icon[lifeformtech14209]
{
    background-position-x: 47.06%;
}
technology-icon[lifeformtech11210],
technology-icon[lifeformtech12210],
technology-icon[lifeformtech13210],
technology-icon[lifeformtech14210]
{
    background-position-x: 52.94%;
}
technology-icon[lifeformtech11211],
technology-icon[lifeformtech12211],
technology-icon[lifeformtech13211],
technology-icon[lifeformtech14211]
{
    background-position-x: 58.82%;
}
technology-icon[lifeformtech11212],
technology-icon[lifeformtech12212],
technology-icon[lifeformtech13212],
technology-icon[lifeformtech14212]

{
    background-position-x: 64.70%;
}
technology-icon[lifeformtech11213],
technology-icon[lifeformtech12213],
technology-icon[lifeformtech13213],
technology-icon[lifeformtech14213]
{
    background-position-x: 70.58%;
}
technology-icon[lifeformtech11214],
technology-icon[lifeformtech12214],
technology-icon[lifeformtech13214],
technology-icon[lifeformtech14214]
{
    background-position-x: 76.46%;
}
technology-icon[lifeformtech11215],
technology-icon[lifeformtech12215],
technology-icon[lifeformtech13215],
technology-icon[lifeformtech14215]
{
    background-position-x: 82.35%;
}
technology-icon[lifeformtech11216],
technology-icon[lifeformtech12216],
technology-icon[lifeformtech13216],
technology-icon[lifeformtech14216]
{
    background-position-x: 88.23%;
}
technology-icon[lifeformtech11217],
technology-icon[lifeformtech12217],
technology-icon[lifeformtech13217],
technology-icon[lifeformtech14217]
{
    background-position-x: 94.11%;
}
technology-icon[lifeformtech11218],
technology-icon[lifeformtech12218],
technology-icon[lifeformtech13218],
technology-icon[lifeformtech14218]
{
    background-position-x: 100%;
}

technology-icon .amount {
    right: 0;
    bottom: 0;
    border-top-left-radius: 15px;
    background: linear-gradient(rgba(14, 17, 23, 0.8), rgba(27, 34, 45, 0.8));
    color: #ff9600;
    display: inline-block;
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    padding: 0 5px;
    text-align: right;
    font-size: 10px;
    line-height: 15px;
    z-index: 2;
}
/******************************************
 ****** END TECHNOLOGY SPRITE IMAGES ******
 ******************************************/

/* start resource icons */
/* for resizing use a seperate class or an attribute sq20/sq28/... don't touch anything below */
resource-icon-container {
    position: relative;
    display: flex;
    justify-content: center;
}
resource-icon-container.withAmount {
    min-width: 65px;
}
resource-icon {
    width: 512px;
    height: 512px;
    background-repeat: no-repeat;
    display: inline-block;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}
resource-icon.metal {
    background-image: url(//gf2.geo.gfsrv.net/cdn1c/4230ff01e100a38a72dadfa7de0661.png) !important;
    background-size: contain;
}
resource-icon.crystal {
    background-image: url(//gf1.geo.gfsrv.net/cdn65/596ba85baa74145390e04f7428d93e.png) !important;
    background-size: contain;
}
resource-icon.deuterium {
    background-image: url(//gf1.geo.gfsrv.net/cdnc0/7a7bf2b8edcd74ebafe31dfbae14aa.png) !important;
    background-size: contain;
}
resource-icon.energy {
    background-image: url(//gf1.geo.gfsrv.net/cdn0a/9e2afdb81e238e0c0968f9cd0d9ca4.png) !important;
    background-size: contain;
}
resource-icon.darkmatter {
    background-image: url(//gf2.geo.gfsrv.net/cdna3/4de426cb95e11af9cdabb901dfe802.png) !important;
    background-size: contain;
}
resource-icon.food {
    background-image: url(//gf2.geo.gfsrv.net/cdna9/c1e0f3a58ccc09677455f19d8792a1.png) !important;
    background-size: contain;
}
resource-icon.population {
    background-image: url(//gf1.geo.gfsrv.net/cdn64/9e6c01dbcd3acd2e1fb3b5d0a02fba.png) !important;
    background-size: contain;
}

resource-icon-container .amount {
    right: 0;
    bottom: 0;
    border-top-left-radius: 15px;
    background: linear-gradient(rgba(14, 17, 23, 0.8), rgba(27, 34, 45, 0.8));
    color: #ff9600;
    display: inline-block;
    position: absolute;
    box-sizing: border-box;
    padding: 0 5px;
    text-align: right;
    font-size: 10px;
    line-height: 15px;
    z-index: 2;
    width: 100%;
}
/* end ressource icons */

/* start shopitem icon */
/* for resizing use a seperate class or an attribute sq20/sq28/... don't touch anything below */
/* the background url needs to be set in the attribute of each shopitem-icon tag since they need to be dynamically loaded based on uuid */
shopitem-icon {
    width: 512px;
    height: 512px;
    background-repeat: no-repeat;
    display: inline-block;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    background-size: contain;
}

shopitem-icon a {
    display: block;
    width: 100%;
    height: 100%;
}

shopitem-icon .amount {
    right: 0;
    bottom: 0;
    border-top-left-radius: 15px;
    background: linear-gradient(rgba(14, 17, 23, 0.8), rgba(27, 34, 45, 0.8));
    color: #ff9600;
    display: inline-block;
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    padding: 0 5px;
    text-align: right;
    font-size: 10px;
    line-height: 15px;
    z-index: 2;
}
/* end shopitem icon */

/* start server settings icons */
/* for resizing use a seperate class or an attribute sq20/sq28/... don't touch anything below */
server-settings-icon {
    width: 52px;
    height: 52px;
    background-repeat: no-repeat;
    display: inline-block;
    border-radius: 5px;
    box-sizing: border-box;
}
server-settings-icon.acs_active {
    background-image: url(//gf2.geo.gfsrv.net/cdna6/bba367fbf3e7613a914f57d22e5abd.png) !important;
    background-size: contain;
}
server-settings-icon.darkmatter_bonus {
    background-image: url(//gf1.geo.gfsrv.net/cdn0b/9e5b03f98d1c4c8e14e5845a2a3f68.png) !important;
    background-size: contain;
}
server-settings-icon.debris_defense {
    background-image: url(//gf1.geo.gfsrv.net/cdn90/312addcee32380091e0e5a75682993.png) !important;
    background-size: contain;
}
server-settings-icon.debris_fleet {
    background-image: url(//gf1.geo.gfsrv.net/cdn3c/cc4a9fba32f0aded9d723f7ae433fa.png) !important;
    background-size: contain;
}
server-settings-icon.debris_deuterium {
    background-image: url(//gf2.geo.gfsrv.net/cdn17/da952f61e88f03853d2fcd6a7d12f7.png) !important;
    background-size: contain;
}
server-settings-icon.deuterium_save {
    background-image: url(//gf3.geo.gfsrv.net/cdne5/9ef61a360aa80295751971aa90867d.png) !important;
    background-size: contain;
}
server-settings-icon.fleetspeed_holding {
    background-image: url(//gf2.geo.gfsrv.net/cdn41/ea2d90bb5d0e29194a13b05d5acf82.png) !important;
    background-size: contain;
}
server-settings-icon.fleetspeed_peace {
    background-image: url(//gf2.geo.gfsrv.net/cdndc/7191f3633561f7ba3a0922186b268d.png) !important;
    background-size: contain;
}
server-settings-icon.fleetspeed_war {
    background-image: url(//gf3.geo.gfsrv.net/cdnbd/dfa174a8875044e7b3ab080264e18a.png) !important;
    background-size: contain;
}
server-settings-icon.ignore_empty {
    background-image: url(//gf1.geo.gfsrv.net/cdn0e/025c93acb8b7550a42a02c0517ddbf.png) !important;
    background-size: contain;
}
server-settings-icon.ignore_inactive {
    background-image: url(//gf1.geo.gfsrv.net/cdn6c/f3f46bd8e55815109eeb33078d63ee.png) !important;
    background-size: contain;
}
server-settings-icon.lifetime {
    background-image: url(//gf2.geo.gfsrv.net/cdn12/481c443464ea6f39dd9b16f868dec9.png) !important;
    background-size: contain;
}
server-settings-icon.number_galaxies {
    background-image: url(//gf3.geo.gfsrv.net/cdn8e/8dc157e3f067cd311f7f6639f4ff9d.png) !important;
    background-size: contain;
}
server-settings-icon.planetfield_bonus {
    background-image: url(//gf2.geo.gfsrv.net/cdna8/1995d3be4ec69ecd07333ce75ceb51.png) !important;
    background-size: contain;
}
server-settings-icon.speedfactor {
    background-image: url(//gf2.geo.gfsrv.net/cdn11/1ad7545bd6e855e8aee5cc3a7542c0.png) !important;
    background-size: contain;
}
server-settings-icon.speedfactor_research {
    background-image: url(//gf1.geo.gfsrv.net/cdnfb/4ac3e1a16a2592451996c7223582b1.png) !important;
    background-size: contain;
}
/* end server settings icons */


/* start class selection in radial menu */
class-selection {
    display: inline-block;
    height: 40px;
    width: 40px;
    z-index:5 !important;
    position: relative;
}
class-selection .classselection-menu {
    position: absolute;
    display: block;
    top:0;
    bottom:0;
    right:0;
    left:0;
    width:40px;
    height:40px;
    z-index:4 !important;
    opacity:0;
    cursor:pointer;
}
class-selection .classselection-menu + label {
    width: 40px;
    height: 40px;
    display: block;
    z-index: 3 !important;
    border-radius: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

class-selection .classselection-menu.characterClass[data-class-id="0"] + label {
    background-image: url(//gf1.geo.gfsrv.net/cdn67/ca50f93455a3c6894f0c5ae03e665f.png);
}
class-selection .classselection-menu.characterClass[data-class-id="1"] + label {
    background-image: url(//gf2.geo.gfsrv.net/cdnd7/f5b7a5620b23b5290ee5954f07d160.png);
}
class-selection .classselection-menu.characterClass[data-class-id="2"] + label {
    background-image: url(//gf2.geo.gfsrv.net/cdna9/c9a66d4b358353d42d503ca99388b6.png);
}
class-selection .classselection-menu.characterClass[data-class-id="3"] + label {
    background-image: url(//gf1.geo.gfsrv.net/cdn9c/1433cc4b84f60df3034379f69f238a.png);
}
class-selection .classselection-menu.allianceClass[data-class-id="0"] + label {
    background-image: url(//gf1.geo.gfsrv.net/cdn69/17c83524ca049ab09fc5dee53e2004.png);
}
class-selection .classselection-menu.allianceClass[data-class-id="1"] + label {
    background-image: url(//gf1.geo.gfsrv.net/cdn0a/10ca470f74ddd86449c6b4c85f331c.png);
}
class-selection .classselection-menu.allianceClass[data-class-id="2"] + label {
    background-image: url(//gf3.geo.gfsrv.net/cdn5a/32c89f02522a44b46ca3dc359fe1e2.png);
}
class-selection .classselection-menu.allianceClass[data-class-id="3"] + label {
    background-image: url(//gf3.geo.gfsrv.net/cdn56/eaa936531415467b959dfcd67bfcf9.png);
}

class-selection .classselection-menu:hover + label {
    filter: brightness(150%);
}

class-selection .classselection-menu:checked ~ ul .menu-item {
    opacity: 1;
    pointer-events: all;
}
class-selection .classselection-menu:checked ~ ul .menu-item:nth-child(1) {
    transform: rotate(30deg) translate(-55px);
}
class-selection .classselection-menu:checked ~ ul .menu-item:nth-child(2) {
    transform: rotate(90deg) translateX(-55px);
}
class-selection .classselection-menu:checked ~ ul .menu-item:nth-child(3) {
    transform: rotate(150deg) translateX(-55px);
}
class-selection .classselection-menu:checked ~ ul .menu-item:nth-child(4) {
    transform: rotate(210deg) translateX(-55px);
}
class-selection .menu-item {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 40px;
    height: 40px;
    opacity: 0;
    transition: 0.5s;
    z-index: 2 !important;
    pointer-events: none;
}
class-selection .menu-item:after {
    z-index: -1 !important;
}
class-selection .menu-item characterclass-icon:hover,
class-selection .menu-item allianceclass-icon:hover {
    filter: brightness(150%);
}
class-selection ul .menu-item:nth-child(1) characterclass-icon {
    transform: rotate(-30deg);
}
class-selection ul .menu-item:nth-child(2) characterclass-icon {
    transform: rotate(-90deg);
}
class-selection ul .menu-item:nth-child(3) characterclass-icon {
    transform: rotate(-150deg);
}
class-selection ul .menu-item:nth-child(4) characterclass-icon {
    transform: rotate(-210deg);
}
class-selection ul .menu-item:nth-child(1) allianceclass-icon {
    transform: rotate(-30deg);
}
class-selection ul .menu-item:nth-child(2) allianceclass-icon {
    transform: rotate(-90deg);
}
class-selection ul .menu-item:nth-child(3) allianceclass-icon {
    transform: rotate(-150deg);
}
class-selection ul .menu-item:nth-child(4) allianceclass-icon {
    transform: rotate(-210deg);
}
/* end class selection in radial menu */

/* selected language styling start */
selected-language-icon {
    display: inline-block;
    width: 16px;
    height: 11px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/* selected language styling end */

/* fleet speed bar start */
fleetspeed-section {
    width: 334px;
    height: 18px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
fleetspeed-section .speed {
    height: 100%;
    width: 100%;
    padding: 2px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    z-index: 1 !important;
}
fleetspeed-section .speed-bar {
    height: 16px;
    border-radius: 4px;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    -webkit-transition: 0.3s linear;
    -moz-transition: 0.3s linear;
    -o-transition: 0.3s linear;
    transition: 0.3s linear;
    -webkit-transition-property: width, background-color;
    -moz-transition-property: width, background-color;
    -o-transition-property: width, background-color;
    transition-property: width, background-color;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
    margin-top:-16px;
}
fleetspeed-section .radio {
    display: none;
}
fleetspeed-section .label {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #666;
    text-shadow: 0 1px black;
    border-radius: 3px;
    cursor: pointer;
    height: 16px;
    width: calc(100% / 10);

}
fleetspeed-section.fineGranulation .label {
    width: calc(100% / 19);
    font-size: 10px;
}
fleet-content:not([style*="display: none"]) fleetspeed-section .radio[data-attack-type="1"]:checked + .label,
fleet-content:not([style*="display: none"]) fleetspeed-section .radio[data-attack-type="2"]:checked + .label {
    color: white;
    background: rgba(0, 0, 0, 0.25);
}
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="1"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="1"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 5.2%;
    background-color: #f63a0f;
}
fleet-content:not([style*="display: none"]) fleetspeed-section:not(.fineGranulation) > .speed > input[value="1"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section:not(.fineGranulation) > .speed > input[value="1"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 10%;
}
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="1.5"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="1.5"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 10.52%;
    background-color: #f63a0f;
}
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="2"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="2"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 15.78%;
    background-color: #f54810;
}
fleet-content:not([style*="display: none"]) fleetspeed-section:not(.fineGranulation) > .speed > input[value="2"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section:not(.fineGranulation) > .speed > input[value="2"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 20%;
}
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="2.5"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="2.5"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 21.05%;
    background-color: #f54810;
}
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="3"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="3"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 26.31%;
    background-color: #f36311;
}
fleet-content:not([style*="display: none"]) fleetspeed-section:not(.fineGranulation) > .speed > input[value="3"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section:not(.fineGranulation) > .speed > input[value="3"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 30%;
}
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="3.5"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="3.5"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 31.57%;
    background-color: #f36311;
}
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="4"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="4"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 36.84%;
    background-color: #f27d14;
}
fleet-content:not([style*="display: none"]) fleetspeed-section:not(.fineGranulation) > .speed > input[value="4"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section:not(.fineGranulation) > .speed > input[value="4"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 40%;
}
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="4.5"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="4.5"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 42.10%;
    background-color: #f27d14;
}
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="5"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="5"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 47.36%;
    background-color: #f2b01e;
}
fleet-content:not([style*="display: none"]) fleetspeed-section:not(.fineGranulation) > .speed > input[value="5"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section:not(.fineGranulation) > .speed > input[value="5"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 50%;
}
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="5.5"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="5.5"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 52.63%;
    background-color: #f2b01e;
}
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="6"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="6"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 57.89%;
    background-color: #f2be1d;
}
fleet-content:not([style*="display: none"]) fleetspeed-section:not(.fineGranulation) > .speed > input[value="6"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section:not(.fineGranulation) > .speed > input[value="6"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 60%;
}
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="6.5"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="6.5"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 63.15%;
    background-color: #f2be1d;
}
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="7"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="7"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 68.42%;
    background-color: #f2cc1c;
}
fleet-content:not([style*="display: none"]) fleetspeed-section:not(.fineGranulation) > .speed > input[value="7"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section:not(.fineGranulation) > .speed > input[value="7"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 70%;
}
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="7.5"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="7.5"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 73.68%;
    background-color: #f2cc1c;
}
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="8"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="8"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 78.94%;
    background-color: #dcd61c;
}
fleet-content:not([style*="display: none"]) fleetspeed-section:not(.fineGranulation) > .speed > input[value="8"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section:not(.fineGranulation) > .speed > input[value="8"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 80%;
}
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="8.5"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="8.5"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 84.21%;
    background-color: #dcd61c;
}
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="9"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="9"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 89.47%;
    background-color: #b1db1d;
}
fleet-content:not([style*="display: none"]) fleetspeed-section:not(.fineGranulation) > .speed > input[value="9"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section:not(.fineGranulation) > .speed > input[value="9"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 90%;
}
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="9.5"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="9.5"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 94.73%;
    background-color: #b1db1d;
}
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="10"][data-attack-type="1"]:checked ~ .speed-bar,
fleet-content:not([style*="display: none"]) fleetspeed-section > .speed > input[value="10"][data-attack-type="2"]:checked ~ .speed-bar {
    width: 100%;
    background-color: #86e01e;
}

fleet-content:not([style*="display: none"]) fleetspeed-section:not(.fineGranulation) > .speed > input.fineGranulation,
fleet-content:not([style*="display: none"]) fleetspeed-section:not(.fineGranulation) > .speed > label.fineGranulation {
    display: none;
}

/* fleet speed bar end */


/* notification box start */
body#standalonepage {
    position: relative !important;
}

notification-container {
    position: fixed;
    top: 10px;
    right: 10px;
    min-width: 10px;
    min-height: 10px;
    z-index: 9999 !important;
    display: flex;
    justify-content: flex-end;
    align-items: normal;
    flex-direction: column-reverse;
    row-gap: 5px;
    overflow: hidden;
}
notification {
    border-radius: 5px;
    background: #fff;
    padding: 5px 25px 5px 5px;
    box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transform: translateX(calc(100% + 30px));
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
    position: relative;
}
notification.active {
    transform: translateX(0%);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}
notification notification-close {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 5px;
    cursor: pointer;
    font-weight: bolder;
    opacity: 0.7;
    color: #fff;
}
notification notification-close:hover {
    opacity: 1;
}
notification notification-container {
    display: flex;
    align-items: flex-start;
}
notification {
    background: #3d576d;
}
notification-content {
    display: flex;
    gap: 5px;
    padding: 3px;
}

notification-content notification-message {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
    max-width: 160px;
}
notification-content notification-message span {
    font-size: 11px;
    font-weight: 400;
    color: #fff;
}
notification-content notification-message span.headline {
    font-weight: 600;
    color: #fff;
    font-size: 14px;
    height: 16px;
    line-height: 16px;
}

notification notification-sign {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    min-width: 16px;
    color: #fff;
    font-size: 12px;
    border-radius: 50%;
}
notification.notification-error::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: #ffdddd !important;
}
notification.notification-info:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: #ddffff !important;
}
notification.notification-success:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: #ddffdd !important;
}
notification.notification-warning:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: #ffffcc !important;
}
notification.notification-error notification-sign {
    background-color: #830F07 !important
}
notification.notification-info notification-sign {
    background-color: #064374 !important
}
notification.notification-success notification-sign {
    background-color: #214A22 !important;
}
notification.notification-warning notification-sign {
    background-color: #ffeb3b !important;
    color: #000;
}
notification notification-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
}
notification notification-progress:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: #647ab7;
}
notification notification-progress.active:before {
    animation: notification-progress-animation 5s linear forwards;
}
@keyframes notification-progress-animation {
    100% {
        right: 100%;
    }
}

/* notification box end */

/* input radio selection start */
.shipyardSelection .radioShipyardSelection {
    -webkit-appearance: none; /* remove default */
    display: block;
    margin: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    vertical-align: middle;
    box-shadow: hsla(0,0%,100%,.15) 0 1px 1px, inset hsl(226.47deg 32.08% 64.28% / 50%) 0 0 0 1px;
    background-color: hsla(0,0%,0%,.2);
    background-image: -webkit-radial-gradient( hsla(200,100%,90%,1) 0%, hsla(200,100%,70%,1) 15%, hsla(200,100%,60%,.3) 28%, hsla(200,100%,30%,0) 70% );
    background-repeat: no-repeat;
    -webkit-transition: background-position .15s cubic-bezier(.8, 0, 1, 1),
    -webkit-transform .25s cubic-bezier(.8, 0, 1, 1);
    outline: none;
}

.shipyardSelection .radioShipyardSelection:checked {
    -webkit-transition: background-position .2s .15s cubic-bezier(0, 0, .2, 1),
    -webkit-transform .25s cubic-bezier(0, 0, .2, 1);
}
.shipyardSelection .radioShipyardSelection:active {
    -webkit-transform: scale(1.5);
    -webkit-transition: -webkit-transform .1s cubic-bezier(0, 0, .2, 1);
}

.shipyardSelection input,
.shipyardSelection input:active {
    background-position: 0 24px;
}
.shipyardSelection input:checked {
    background-position: 0 0;
}
.shipyardSelection input:checked ~ input,
.shipyardSelection input:checked ~ input:active {
    background-position: 0 -24px;
}
.shipyardSelection {
    width: 50%;
    display: grid;
    grid-template-columns: 20px 150px;
    grid-row: auto;
    grid-column-gap: 5px;
    grid-row-gap: 2px;
    align-items: center;
}
.shipyardSelection label {
    cursor: pointer;
    color: #848484 !important;
}

/* input radio selection end */

message-footer-delete {
    display: flex;
    padding-right: 5px;
    gap: 4px;
}

weapon-icon {
    background: url("//gf1.geo.gfsrv.net/cdn35/3dac46b58d42e2b9dd24b3173ed6bc.png");
    background-size: contain;
}

shield-icon {
    background: url("//gf3.geo.gfsrv.net/cdn8f/889df7e44004ab002079d4eb02171e.png");
    background-size: contain;
}

armor-icon {
    background: url("//gf3.geo.gfsrv.net/cdn82/cd660cca0a44fe853c7bb717943fb7.png");
    background-size: contain;
}

cargo-icon {
    background: url("//gf3.geo.gfsrv.net/cdnba/8b50b66ce6e5a68fbc80149dcf8eba.png");
    background-size: contain;
}

speed-icon {
    background: url("//gf1.geo.gfsrv.net/cdnf6/aa1c3eb3681a7f05a3a11fdd0676e7.png");
    background-size: contain;
}

fuel-icon {
    background: url("//gf2.geo.gfsrv.net/cdn75/a096745e2e4822b8a9249a0c702992.png");
    background-size: contain;
}

cost-reduction-icon {
    background: url("//gf2.geo.gfsrv.net/cdnd1/28a655c1a63e16d7da2e42acba48f6.png");
    background-size: contain;
}

time-reduction-icon {
    background: url("//gf2.geo.gfsrv.net/cdna9/886794df2c7c9a917d63ac6b49e448.png");
    background-size: contain;
}

phalanx-icon {
    background: url("//gf1.geo.gfsrv.net/cdn33/0ff64469efe01b88171dc229ac90a9.png");
    background-size: contain;
}

energy-icon {
    background: url("//gf3.geo.gfsrv.net/cdn5f/afcace9d3d84b1ae6e76603f9316e7.png");
    background-size: contain;
}

edit-icon {
    background: url("//gf3.geo.gfsrv.net/cdn8c/20c72d45345ef0d54748e6760537b3.png");
    background-size: contain;
}

/* avatars start */
profile-picture {
    display: inline-flex;
    height: 50px;
    width: 50px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url("//gf2.geo.gfsrv.net/cdn1e/e7eca98a47726ae2c85a595b29dd82.png");
    /*border: 1px outset #696666 !important;*/
    border-radius: 4px;
}
/* TODO: (AVATAR CHANGES) files has to be named like in these classes */
profile-picture.default {
    background-image: url("//gf2.geo.gfsrv.net/cdn1e/e7eca98a47726ae2c85a595b29dd82.png");
}

profile-picture.A1_T2_Ava_ID1 {
    background-image: url("//gf3.geo.gfsrv.net/cdn8e/739c9c914293370237c0abd7bf5cad.jpg");
}

profile-picture.A2_T2_Ava_ID2 {
    background-image: url("//gf2.geo.gfsrv.net/cdndd/ec54bf561be2caa858f30e678e9948.jpg");
}

profile-picture.A2_T5_Ava_ID3 {
    background-image: url("//gf1.geo.gfsrv.net/cdn60/f406ab85f30a915c11e1ecc6846919.jpg");
}

profile-picture.A3_T1_Ava_ID4 {
    background-image: url("//gf1.geo.gfsrv.net/cdnc4/e206fce318551c7cbd74836f6defd9.jpg");
}

profile-picture.A3_T2_Ava_ID5 {
    background-image: url("//gf3.geo.gfsrv.net/cdnee/e2f7058ae914a93d4685bfb3fbb683.jpg");
}

profile-picture.A3_T3_Ava_ID6 {
    background-image: url("//gf1.geo.gfsrv.net/cdn6b/5682f601e5d5f1f23c1028fa1ea9ec.jpg");
}

profile-picture.A4_T2_Ava_ID7 {
    background-image: url("//gf2.geo.gfsrv.net/cdnad/69a6d14ae7ab9d1979aa11a21016cb.jpg");
}

profile-picture.A4_T4_Ava_ID8 {
    background-image: url("//gf3.geo.gfsrv.net/cdne7/9a47c5d64f23efab2ee1bff0914cb3.jpg");
}

profile-picture.A5_T5_Ava_ID9 {
    background-image: url("//gf1.geo.gfsrv.net/cdn06/c2312de98343b4da6a79a0f9f24b84.jpg");
}

profile-picture.A6_T4_Ava_ID10 {
    background-image: url("//gf2.geo.gfsrv.net/cdn14/f744b991f125737f658165b06ee8cb.jpg");
}

profile-picture.A7_T5_Ava_ID11 {
    background-image: url("//gf2.geo.gfsrv.net/cdn7a/0f9e737643d668e30a58074b7d15d8.jpg");
}

profile-picture.A8_T5_Ava_ID12 {
    background-image: url("//gf1.geo.gfsrv.net/cdn0f/91090be1d4f6d5f2cd5e8575cf8e3a.jpg");
}

profile-picture.A9_T4_Ava_ID13 {
    background-image: url("//gf1.geo.gfsrv.net/cdn05/f8153230a05cbcf94a96961514c810.jpg");
}

profile-picture.A10_T4_Ava_ID14 {
    background-image: url("//gf1.geo.gfsrv.net/cdn96/064c23f96c69d5173b9c2430658436.jpg");
}

profile-picture.A11_T1_Ava_ID15 {
    background-image: url("//gf1.geo.gfsrv.net/cdn03/9b9723adc313a5390449bf3f3e326f.jpg");
}

profile-picture.A11_T2_Ava_ID16 {
    background-image: url("//gf3.geo.gfsrv.net/cdn54/30d46cfa72700f89c147e6cb919ebc.jpg");
}

profile-picture.A11_T3_Ava_ID17 {
    background-image: url("//gf1.geo.gfsrv.net/cdn6f/8f476e56b3b3d2cb3c2d9df12b2a6b.jpg");
}

profile-picture.A12_T4_Ava_ID18 {
    background-image: url("//gf2.geo.gfsrv.net/cdn4c/463a087be7a8927b9e0be52fd8c2d0.jpg");
}

profile-picture.A13_T5_Ava_ID19 {
    background-image: url("//gf2.geo.gfsrv.net/cdna9/ee894b9b8449a66588478ca32bada0.jpg");
}

profile-picture.A16_T3_Ava_ID20 {
    background-image: url("//gf2.geo.gfsrv.net/cdnd9/9b07faabe14bfc3e64367678bcfbf1.jpg");
}

profile-picture.A18_T5_Ava_ID21 {
    background-image: url("//gf2.geo.gfsrv.net/cdn76/b9c99f75769a26b07f5594d84730c9.jpg");
}

profile-picture.A19_T2_Ava_ID22 {
    background-image: url("//gf3.geo.gfsrv.net/cdn8e/fb76e0c68b84124ca517f2f4574c0c.jpg");
}

profile-picture.A20_T4_Ava_ID23 {
    background-image: url("//gf3.geo.gfsrv.net/cdn23/fbd1236cafc7cbaf5f9bdd6e613beb.jpg");
}

profile-picture.A21_T5_Ava_ID24 {
    background-image: url("//gf2.geo.gfsrv.net/cdna7/cc3750cb0d6da4c04f838706d33833.jpg");
}

profile-picture.A22_T3_Ava_ID25 {
    background-image: url("//gf1.geo.gfsrv.net/cdn33/0da1f3e04bfc2b0666d69d6c06373f.jpg");
}

profile-picture.A23_T5_Ava_ID26 {
    background-image: url("//gf3.geo.gfsrv.net/cdne8/2d5348ce0a807a21e2c333e0fba022.jpg");
}

profile-picture.A24_T4_Ava_ID27 {
    background-image: url("//gf2.geo.gfsrv.net/cdnd3/e83ca31e5ddb200059e0832283fc82.jpg");
}

profile-picture.A25_T3_Ava_ID28 {
    background-image: url("//gf2.geo.gfsrv.net/cdna7/84b8880153f82f0c996f10ad9cf734.jpg");
}

profile-picture.A26_T4_Ava_ID29 {
    background-image: url("//gf1.geo.gfsrv.net/cdn9a/f524e39ae6d4f9f1789ceac4eeacf6.jpg");
}

profile-picture.A27_T4_Ava_ID30 {
    background-image: url("//gf1.geo.gfsrv.net/cdn02/1aafe5b6f2b13170e554164fd5655d.jpg");
}

profile-picture.A29_T5_Ava_ID31 {
    background-image: url("//gf1.geo.gfsrv.net/cdn0b/a551dc553024232e4ba587deee77e6.jpg");
}

profile-picture.A30_T3_Ava_ID32 {
    background-image: url("//gf3.geo.gfsrv.net/cdn21/9ae01830652674e599086fbf050877.jpg");
}

profile-picture.A32_T4_Ava_ID33 {
    background-image: url("//gf3.geo.gfsrv.net/cdne0/07bada2b2f34500db471cc856c49e7.jpg");
}

profile-picture.A33_T5_Ava_ID34 {
    background-image: url("//gf3.geo.gfsrv.net/cdne6/0a0775c9629c374ff9209c648edda0.jpg");
}

profile-picture.A34_T4_Ava_ID35 {
    background-image: url("//gf2.geo.gfsrv.net/cdn77/4a0a2e43f141f04038b771e7fe11da.jpg");
}

profile-picture.A35_T5_Ava_ID36 {
    background-image: url("//gf1.geo.gfsrv.net/cdn38/ea519a80c9d5fe4e6e5289d76dddee.jpg");
}

profile-picture.A36_T4_Ava_ID37 {
    background-image: url("//gf3.geo.gfsrv.net/cdn50/aae55f4b38af30f05bdac4fd73fc57.jpg");
}

profile-picture.A38_T5_Ava_ID38 {
    background-image: url("//gf3.geo.gfsrv.net/cdnbc/a87605bc2dd70ff350d3a0d8d2d056.jpg");
}

profile-picture.A39_T3_Ava_ID39 {
    background-image: url("//gf1.geo.gfsrv.net/cdnf8/6ad9aa877ca1f6655a03e52bea12b0.jpg");
}

profile-picture.A40_T5_Ava_ID40 {
    background-image: url("//gf3.geo.gfsrv.net/cdn51/f8de31fb2b446a3715e9a00da4ad9b.jpg");
}

profile-picture.A43_T4_Ava_ID41 {
    background-image: url("//gf1.geo.gfsrv.net/cdn6d/26c6b6cd4ea4e347a2176ec8d7137e.jpg");
}

profile-picture.A45_T3_Ava_ID42 {
    background-image: url("//gf1.geo.gfsrv.net/cdnf5/ae25e09c2b9b9f68a96191811ba724.jpg");
}

profile-picture.A46_T4_Ava_ID43 {
    background-image: url("//gf1.geo.gfsrv.net/cdn3c/4628d454847f576f354ca2cc9d7b64.jpg");
}

profile-picture.A47_T5_Ava_ID44 {
    background-image: url("//gf1.geo.gfsrv.net/cdnf2/298757742e87a07371c80fdacd733e.jpg");
}

profile-picture.A50_T1_Ava_ID45 {
    background-image: url("//gf3.geo.gfsrv.net/cdn54/3dc37a7c96916321d392b465f6dbd0.jpg");
}

profile-picture.A50_T2_Ava_ID46 {
    background-image: url("//gf1.geo.gfsrv.net/cdnf0/99b144c589983185c1dcef1a15e80e.jpg");
}

profile-picture.A50_T3_Ava_ID47 {
    background-image: url("//gf1.geo.gfsrv.net/cdn36/aeca6ce4012504f77eca7d8fbf35e6.jpg");
}

profile-picture.A50_T4_Ava_ID48 {
    background-image: url("//gf1.geo.gfsrv.net/cdnf4/4af862e139f36c1f16f46bb6ca73c9.jpg");
}

profile-picture.A51_T1_Ava_ID49 {
    background-image: url("//gf1.geo.gfsrv.net/cdnc6/7126bf18393519bbf478e55ecb4ab2.jpg");
}

profile-picture.A51_T2_Ava_ID50 {
    background-image: url("//gf2.geo.gfsrv.net/cdn44/d6eb6446474f67336b0665ec6be7af.jpg");
}

profile-picture.A51_T4_Ava_ID51 {
    background-image: url("//gf3.geo.gfsrv.net/cdn56/ec0394e916873f118f31c356ade5ea.jpg");
}

profile-picture.S1_A1_T5_Ava_ID1 {
    background-image: url("//gf3.geo.gfsrv.net/cdnb5/cecc6815e2fc417ccc663cb1a4172f.jpg");
}

profile-picture.S1_A2_T4_Ava_ID2 {
    background-image: url("//gf2.geo.gfsrv.net/cdnde/33fe2a5b35854e6f744a7899d9ef2d.jpg");
}

profile-picture.S1_A3_T5_Ava_ID3 {
    background-image: url("//gf3.geo.gfsrv.net/cdnee/48728449e827fca96b6ac7d52534fe.jpg");
}

profile-picture.S1_A10_T5_Ava_ID4 {
    background-image: url("//gf2.geo.gfsrv.net/cdn74/0aacfc3b2902c092e9d3c67b285132.jpg");
}

profile-picture.S1_A13_T5_Ava_ID5 {
    background-image: url("//gf1.geo.gfsrv.net/cdn32/68c0adf25989faa945e83463ca3916.jpg");
}

profile-picture.S1_A15_T5_Ava_ID6 {
    background-image: url("//gf1.geo.gfsrv.net/cdnf8/2a92ba6c164dd5b4b982416e926685.jpg");
}

profile-picture.S2_A1_T5_Ava_ID1 {
    background-image: url("//gf1.geo.gfsrv.net/cdnf6/6515f9de6a244300c28017a29acafa.jpg");
}

profile-picture.S2_A2_T5_Ava_ID2 {
    background-image: url("//gf3.geo.gfsrv.net/cdnb1/510611fc7e6eed2ddf8789b05a4553.jpg");
}

profile-picture.S2_A3_T5_Ava_ID3 {
    background-image: url("//gf3.geo.gfsrv.net/cdn55/40a6270dc81a6cd64cdc0f31989c20.jpg");
}

profile-picture.S2_A10_T5_Ava_ID4 {
    background-image: url("//gf2.geo.gfsrv.net/cdn14/905fb1d0a70fc87857cb8bde831895.jpg");
}

profile-picture.S2_A13_T5_Ava_ID5 {
    background-image: url("//gf3.geo.gfsrv.net/cdn8c/54ed07776b0fb518d1f853b08320b7.jpg");
}

profile-picture.S2_A15_T5_Ava_ID6 {
    background-image: url("//gf1.geo.gfsrv.net/cdn96/61cd52f5dc26c66f87071cbadf9f1c.jpg");
}

profile-picture.S3_A1_T5_Ava_ID1 {
    background-image: url("//gf3.geo.gfsrv.net/cdne4/497bd8572944cc7405a0fe6f7ad7cd.jpg");
}

profile-picture.S3_A2_T4_Ava_ID2 {
    background-image: url("//gf1.geo.gfsrv.net/cdn67/b14bb45717dc0d35b4e3888c3214a6.jpg");
}

profile-picture.S3_A3_T5_Ava_ID3 {
    background-image: url("//gf1.geo.gfsrv.net/cdn96/bf11fc58061c3b92601edde0989b29.jpg");
}

profile-picture.S3_A9_T5_Ava_ID4 {
    background-image: url("//gf2.geo.gfsrv.net/cdnd9/55ae6c707174f3a0706956708f04e3.jpg");
}

profile-picture.S3_A13_T5_Ava_ID5 {
    background-image: url("//gf2.geo.gfsrv.net/cdndd/02db698a03aa5e22388a3eb21f29c1.jpg");
}

profile-picture.S3_A15_T5_Ava_ID6 {
    background-image: url("//gf3.geo.gfsrv.net/cdne0/250cd306f2fa2c5f32bfd48690b451.jpg");
}

profile-picture.S4_A1_T5_Ava_ID1 {
    background-image: url("//gf2.geo.gfsrv.net/cdn77/711a0bc6b644b99d4198826bd29591.jpg");
}

profile-picture.S4_A2_T5_Ava_ID2 {
    background-image: url("//gf3.geo.gfsrv.net/cdn21/01c65c8b7808fadb9b6ee7ab70a824.jpg");
}

profile-picture.S4_A3_T5_Ava_ID3 {
    background-image: url("//gf2.geo.gfsrv.net/cdn1d/1497abff268822de5fb205c01384ba.jpg");
}

profile-picture.S4_A10_T5_Ava_ID4 {
    background-image: url("//gf1.geo.gfsrv.net/cdn90/28638be7286b6d8b0e1f3a7c578a2c.jpg");
}

profile-picture.S4_A13_T5_Ava_ID5 {
    background-image: url("//gf2.geo.gfsrv.net/cdn7f/32a5fb047154723cb1cdd582b1aab6.jpg");
}

profile-picture.S4_A15_T5_Ava_ID6 {
    background-image: url("//gf1.geo.gfsrv.net/cdn98/f0f86ed8ef1423e4481bcbf5121c27.jpg");
}

profile-picture.A5_T2_Ava_ID52 {
    background-image: url("//gf3.geo.gfsrv.net/cdn29/ae1547491bd50e0c044511ff661e84.jpg");
}

profile-picture.A12_T2_Ava_ID60 {
    background-image: url("//gf3.geo.gfsrv.net/cdnba/cd58489332e76f18e8b775addea115.jpg");
}

profile-picture.A32_T2_Ava_ID54 {
    background-image: url("//gf1.geo.gfsrv.net/cdnc7/7aa0e0ed8822be4f2c415cee14f7e7.jpg");
}

profile-picture.A33_T2_Ava_ID55 {
    background-image: url("//gf1.geo.gfsrv.net/cdn64/e6443550bed6804d9774eb012d8396.jpg");
}

profile-picture.A34_T2_Ava_ID56 {
    background-image: url("//gf2.geo.gfsrv.net/cdna0/a91b65796556f953816787ed5c4023.jpg");
}

profile-picture.A43_T3_Ava_ID57 {
    background-image: url("//gf2.geo.gfsrv.net/cdn4f/7af11c1b2c7f40031680ba46dfe41a.jpg");
}

profile-picture.A41_T3_Ava_ID59 {
    background-image: url("//gf1.geo.gfsrv.net/cdn62/060309867c639acaef2677ca6aa39a.jpg");
}

profile-picture.S6_A1_T5_Ava_ID1 {
    background-image: url("//gf2.geo.gfsrv.net/cdnab/8344250ee2c97e8409a701f75838fb.webp");
}

profile-picture.S6_A2_T5_Ava_ID2 {
    background-image: url("//gf1.geo.gfsrv.net/cdn32/443db7b03fd44acc8e491ff592a414.jpg");
}

profile-picture.S6_A3_T5_Ava_ID3 {
    background-image: url("//gf2.geo.gfsrv.net/cdn1f/c727dcf39d8926f7079891bb54baea.jpg");
}

profile-picture.S6_A10_T5_Ava_ID4 {
    background-image: url("//gf2.geo.gfsrv.net/cdnab/a4e5193497cd28ee43ce6f4f3f93d7.jpg");
}

profile-picture.S6_A13_T5_Ava_ID5 {
    background-image: url("//gf2.geo.gfsrv.net/cdn4d/685bc9ff531b6d3c3ff140bb2d3702.jpg");
}

profile-picture.S6_A15_T5_Ava_ID6 {
    background-image: url("//gf2.geo.gfsrv.net/cdn11/b99fc5032c96233463b2e54f0a5000.jpg");
}
/* avatars end */

/* space object skins */
space-object-skin {
    display: inline-block;
    height: 50px;
    width: 50px;
    border-radius: 4px;
}

space-object-skin img {
    display: inline-flex;
    height: 100%;
    width: 100%;
    border-radius: 4px;
}
/* space object skins */