.topBarContainer {
    display: none;
}

.boxContainer {
    max-height: 340px;
    overflow-x: hidden;
    overflow-y: auto;
}

.box {
    display: block;
    position: relative;
    left: -125px;
    border: 5px solid #090c0d;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    background-color: #272d2f;
    width: 300px;
    font-family: 'lato';
    box-shadow: 3px 3px 10px #000;
    -moz-box-shadow: 3px 3px 10px #000;
    -webkit-box-shadow: 3px 3px 10px #000;
    margin-top: 15px;
}
.box:after, .box:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    z-index: -1;
}
.box:after {
    border-color: rgba(0, 0, 0, 0);
    border-bottom-color: #000000;
    border-width: 15px;
    left: 50%;
    margin-left: -15px;
}
.box:before {
    border-color: rgba(0, 0, 0, 0);
    border-bottom-color: #000000;
    border-width: 21px;
    left: 50%;
    margin-left: -21px;
}

.boxSeperator {
    width: 100%;
    background-color: #333a3e;
    height: 1px;
}
.boxContainerHeader {
    color: #fff;
    width: 100%;
    text-align: center;
    background-color: #090c0d;
}

.boxHeaderTitle {
    margin: 0 auto;
    font-family: 'hopfer_hornbookregular';
    letter-spacing: 1px;
    font-size: 13px;
    font-weight: bold;
}

.boxHeaderImage {
    vertical-align: middle;
    width: 50px;
    height: 49px;
}

.boxItem {
    color: #fff;
    background-color: #272d2f;
    min-height: 30px;
    padding: 5px;
    text-align: center;
}

.boxItemEvent {
    color: #fff;
    background-color: #272d2f;
    min-height: 30px;
    padding: 10px;
    font-size: 14px;
}

.boxItemApparate, .boxItemHogfriend, .boxItemOwl {
    color: #fff;
    background-color: #272d2f;
    min-height: 20px;
    padding: 5px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

.boxItemEvent:hover,.boxItemApparate:hover,.boxItemHogfriend:hover, .boxItemOwl:hover {
    background-color: #385352;
    color: #fff;
}
.boxItemEvent:active,.boxItemApparate:active,.boxItemHogfriend:active {
    background-color: #15191a;
    color: #fff;
}

.boxItemHogfriendG {
    background-color: #621919;
}

.boxItemHogfriendG:hover {
    background-color: #7c3737;
}

.boxItemHogfriendG:active {
    background-color: #310d0d;
}

.boxItemHogfriendH {
    background-color: #5b5c1b;
}

.boxItemHogfriendH:hover {
    background-color: #76773a;
}

.boxItemHogfriendH:active {
    background-color: #2e2e0e;
}

.boxItemHogfriendR {
    background-color: #0d1a28;
}

.boxItemHogfriendR:hover {
    background-color: #303c49;
}

.boxItemHogfriendR:active {
    background-color: #070d14;
}

.boxItemHogfriendS {
    background-color: #21351e;
}

.boxItemHogfriendS:hover {
    background-color: #41543f;
}

.boxItemHogfriendS:active {
    background-color: #111b0f;
}

.boxItemHogfriendN {
    background-color: #703c1b;
}

.boxItemHogfriendN:hover {
    background-color: #895839;
}

.boxItemHogfriendN:active {
    background-color: #381e0e;
}

.boxItemEventContainer {
    padding-left: 25px;
}

.boxItemImage {
    margin-right: 5px;
    margin-bottom: 5px;
    float: left;
    display: block;
    height: 20px;
}

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

.boxBlank {
    color: #fff;
    background-color: #272d2f;
    padding: 5px;
    text-align: center;
}

#topIcons {
    float:right;
    width: 170px;
    padding-top: 1px;
}

#topIconsLO {
    float:right;
    width: 200px;
    padding-top: 1px;
}

#eventsIcon {
    float:left;
    clear:right;
    width: 50px;
    height: 49px;
    background: url('https://img.hexrpg.com/images/eventsOff-1.png');
    margin-right: -10px;
}

.eventsIcon-hover {
    background: url('https://img.hexrpg.com/images/eventsOn-1.png') !important;
}

.eventsIcon-new {
    background: url('https://img.hexrpg.com/images/eventsNew-1.png') !important;
}

#owlsIcon {
    float:left;
    clear:right;
    width: 50px;
    height: 49px;
    background: url('https://img.hexrpg.com/images/owlOff.png');
    margin-right: -10px;
}

.owlsIcon-hover {
    background: url('https://img.hexrpg.com/images/owlOn.png') !important;
}

.eventsIcon-new {
    background: url('https://img.hexrpg.com/images/owlsNew.png') !important;
}

#apparateIcon {
    float:left;
    clear:right;
    width: 50px;
    height: 49px;
    background: url('https://img.hexrpg.com/images/apparateOff.png');
    margin-right: -10px;
}

#apparateIcon:hover {
    width: 50px;
    height: 49px;
    background: url('https://img.hexrpg.com/images/apparateOn.png');
}

#hogfriendsIcon {
    float:left;
    clear:right;
    width: 50px;
    height: 49px;
    background: url('https://img.hexrpg.com/images/hogfriendsOff.png');
    margin-right: -10px;
}

#hogfriendsIcon:hover {
    width: 50px;
    height: 49px;
    background: url('https://img.hexrpg.com/images/hogfriendsOn.png');
    color: #c87d06;
}

#eventsNumber {
    float: right;
    margin-top: 30px;
    margin-right: 10px;
    font-weight: bold;
    font-size: 8pt;
    color: #dfdeca;
}

#owlsNumber {
    float: right;
    margin-top: 30px;
    margin-right: 10px;
    font-weight: bold;
    font-size: 8pt;
    color: #dfdeca;
}

#apparationNumber {
    float: right;
    margin-top: 30px;
    margin-right: 10px;
    font-weight: bold;
    font-size: 8pt;
    color: #dfdeca;
}


#hogfriendsNumber {
    float: right;
    margin-top: 30px;
    margin-right: 10px;
    font-weight: bold;
    font-size: 8pt;
    color: #dfdeca;
}

#myHexNavMenuIcon {
    float:left;
    clear:right;
    width: 30px;
    height: 30px;
    background: url('https://img.hexrpg.com/images/myHexIconOff.png');
    background-size: 30px 30px;
    background-repeat: no-repeat;
    vertical-align:middle;
    margin-right:5px;
    margin-left:5px;
}

#inventoryNavMenuIcon {
    float:left;
    clear:right;
    width: 30px;
    height: 30px;
    background: url('https://i.imgur.com/YSMTPaE.png');
    background-size: 30px 30px;
    background-repeat: no-repeat;
    vertical-align:middle;
    margin-right:5px;
    margin-left:5px;
}

#petsNavMenuIcon {
    float:left;
    clear:right;
    width: 30px;
    height: 30px;
    background: url('https://i.imgur.com/W1IrPkO.png');
    background-size: 30px 30px;
    background-repeat: no-repeat;
    vertical-align:middle;
    margin-right:5px;
    margin-left:5px;
}

#storeNavMenuIcon {
    float:left;
    clear:right;
    width: 30px;
    height: 30px;
    background: url('https://img.hexrpg.com/Xeneixian/Store.png');
    background-size: 30px 30px;
    background-repeat: no-repeat;
    margin-right: -10px;
    vertical-align:middle;
    margin-right:5px;
    margin-left:5px;
}

#wizardCardsNavMenuIcon {
    float:left;
    clear:right;
    width: 30px;
    height: 30px;
    background: url('https://img.hexrpg.com/Xeneixian/WizardCard.png');
    background-size: 30px 30px;
    background-repeat: no-repeat;
    vertical-align:middle;
    margin-right:5px;
    margin-left:5px;
}

#hogfriendsNavMenuIcon {
    float:left;
    clear:right;
    width: 30px;
    height: 30px;
    background: url('https://img.hexrpg.com/images/hogfriendsOff.png');
    background-size: 30px 30px;
    background-repeat: no-repeat;
    vertical-align:middle;
    margin-right:5px;
    margin-left:5px;
}

.steven-test {
    color: red;
}

.boxItemEvent > .boxItemImage .ui-icon,
.boxItemEvent > .boxItemImage > .toggleLock,
.boxItemEvent:hover > .boxItemImage > img,
.boxItemEvent:hover > .boxItemImage > object,
.boxItemEvent:hover > .boxItemImage > .lockedEvent {
    display: none;
}

path.career, rect.career, ellipse.career {
    fill: #78B2B0;
    stroke: #78B2B0 !important;
    stroke-width: 0px;
}

.boxItemEvent:hover > .boxItemImage .ui-icon {
    display: inline-block;
    cursor: pointer;
}
.boxItemEvent:hover > .boxItemImage > .toggleLock {
    display: block;
    cursor: pointer;
}

path.curseBreaker {
    shape-rendering: geometricPrecision;
}

path.magicalLawEnforcement {
    shape-rendering: geometricPrecision;
}

path.professonialQuidditchPlayer {
    shape-rendering: geometricPrecision;
}

path.healer, ellipse.healer {
    shape-rendering: geometricPrecision;
}

.boxItemEventContainer ul.m_l_eVictims {
    display: block !important;
    list-style-type: disc;
    padding-left: 1.5em;
}

.boxItemEventContainer ul.m_l_eVictims li {
    display: list-item !important;
}

.boxItemEventContainer > .boxItemImage > .toggleLock {
    width: 16px;
    text-align: center;
    color: #49918d;
    font-size: 115%;
}

.lockedEvent {
    background: #2e525f;
}

.lockedEvent:hover {
    background: #254450;
}
