:root {
    --f7-theme-color: #c2e988;
    --f7-theme-color-rgb: 194, 233, 136;
    --f7-theme-color-shade: #b0e366;
    --f7-theme-color-tint: #d4efaa;
}

.pcicon {
    line-height: 40pt;
    font-size: 20pt;
    text-align: center;
    width: 100%;
}

.price {
    color: #c2e988;
    display: block;
}

/* HEX FIELDS */
.hex_grid_container {
    /*display:flex;*/
    --s: 50px;
    --m: 1px;
    --f: calc(1.732 * var(--s) + 4 * var(--m) - 1px);
    overflow: scroll;
    height: 100%;
    margin: 10px 2px;
    display: block;
    scrollbar-width: none;
    padding-bottom: var(--f7-tabbar-labels-height);
}

.hex_grid {
    font-size: 0; /*disable white space between inline block element */
    /*max-width: 365px;
    min-width: 365px;*/
    margin: 0 auto;
    overflow: auto;
    width: 990px;
    height: 730px;
}

.hex_grid div {
    width: var(--s);
    margin: var(--m);
    height: calc(var(--s)*1.1547);
    display: inline-block;
    font-size:initial;
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
    background: #2a423d;
    margin-bottom: calc(var(--m) - var(--s)*0.2885);
}

.hex_grid::before {
    content: "";
    width: calc(var(--s)/2 + var(--m));
    float: left;
    height: 120%;
    shape-outside: repeating-linear-gradient(
            #0000 0 calc(var(--f) - 3px),
            #000  0 var(--f));
}

.hex::before{
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.hex.active-state {
    background: #669e76;
}

.hex.visited {
    background: #669e76;
}

.clickable::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f128";
    color: #669e76;
    display: table;
    margin: 14px auto;
    font-size: 17px;
}
.hex.clickable {
    background: #2a423d;
}

.hex.hidden {
    background: #121212;
}

.failed::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00d";
    color: #460000;
    display: table;
    margin: 15px auto;
    font-size: 17px;
}
.hex.failed {
    background: #111c11;
}

.blocked::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f05e";
    color: #f13f00;
    display: table;
    margin: 15px auto;
    font-size: 17px;
}
.hex.blocked {
    background: #460000;
}

.hex_inner {
    color: #fff;
    text-align: center;
    width: var(--s);
    font-size: 9px;
    font-family: "Lucida Console";
    font-weight: 100;
    background-color: black;
    margin: -6px auto;
    display: table;
    height: 22px;
}

.hex.linknode {
    background: #669e76;
}

.destroyed::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f057";
    color: #460000;
    display: table;
    margin: 14px auto;
    font-size: 17px;
}
.hex.destroyed {
    background: #9e6666;
}

.entry::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f796";
    color: black;
    display: table;
    margin: 0px auto;
    font-size: 30px;
}
.entry::after {
    font-family: "Lucida Console";
    font-weight: 900;
    content: "NET";
    color: #ffffff;
    display: table;
    margin: -6px auto;
    font-size: 8px;
    background-color: black;
    width: 100%;
    text-align: center;
    padding-bottom: 8px;
}
.hex.entry {
    background: #669e76;
}

.core::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f2db";
    color: black;
    display: table;
    margin: 0px auto;
    font-size: 30px;
}
.core::after {
    font-family: "Lucida Console";
    font-weight: 900;
    content: "CORE";
    color: #ffffff;
    display: table;
    margin: -6px auto;
    font-size: 8px;
    background-color: black;
    width: 100%;
    text-align: center;
    padding-bottom: 8px;
}
.hex.core {
    background: #f13f00;
}

.firewall::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f3ed";
    color: black;
    display: table;
    margin: 0px auto;
    font-size: 30px;
}
.firewall::after {
    font-family: "Lucida Console";
    font-weight: 900;
    content: "FIREW.";
    color: #ffffff;
    display: table;
    margin: -6px auto;
    font-size: 8px;
    background-color: black;
    width: 100%;
    text-align: center;
    padding-bottom: 8px;
}
.hex.firewall {
    background: #9a4224;
}

.miner::before {
    font-family: "Font Awesome 5 Brands";
    font-weight: 900;
    content: "\f379";
    color: black;
    display: table;
    margin: 0px auto;
    font-size: 30px;
}
.miner::after {
    font-family: "Lucida Console";
    font-weight: 900;
    content: "MINER";
    color: #ffffff;
    display: table;
    margin: -6px auto;
    font-size: 8px;
    background-color: black;
    width: 100%;
    text-align: center;
    padding-bottom: 8px;
}
.hex.miner {
    background: #e3aa0f;
}

.antivirus::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\e06c";
    color: black;
    display: table;
    margin: 0px auto;
    font-size: 30px;
}
.antivirus::after {
    font-family: "Lucida Console";
    font-weight: 900;
    content: "ANTIVIR";
    color: #ffffff;
    display: table;
    margin: -6px auto;
    font-size: 8px;
    background-color: black;
    width: 100%;
    text-align: center;
    padding-bottom: 8px;
}
.hex.antivirus {
    background: #862300;
}

.vpn::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f505";
    color: black;
    display: table;
    margin: 0px auto;
    font-size: 30px;
}
.vpn::after {
    font-family: "Lucida Console";
    font-weight: 900;
    content: "VPN";
    color: #ffffff;
    display: table;
    margin: -6px auto;
    font-size: 8px;
    background-color: black;
    width: 100%;
    text-align: center;
    padding-bottom: 8px;
}
.hex.vpn {
    background: #51a800;
}

.ids::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f06a";
    color: black;
    display: table;
    margin: 0px auto;
    font-size: 30px;
}
.ids::after {
    font-family: "Lucida Console";
    font-weight: 900;
    content: "IDS";
    color: #ffffff;
    display: table;
    margin: -6px auto;
    font-size: 8px;
    background-color: black;
    width: 100%;
    text-align: center;
    padding-bottom: 8px;
}
.hex.ids {
    background: #006a7c;
}

/*.blocked::before {*/
/*    font-family: "Font Awesome 5 Free";*/
/*    font-weight: 900;*/
/*    content: "\f2db";*/
/*    color: black;*/
/*    display: table;*/
/*    margin: 5px auto;*/
/*    font-size: 30px;*/
/*}*/
.hex.blocked {
    background: #9a4224;
}