@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
    font-size: 2em;
}
.fa {
    position: relative;
    display: table-cell;
    width: 50px;
    height: 36px;
    text-align: center;
    vertical-align: middle;
    font-size:20px;
}


.main-menu:hover,nav.main-menu.expanded {
    width:250px;
    overflow:visible;

}

.h1-relative {
    position: relative;
}

.update {
    position: absolute;
    right: -13px;
    padding: 0px;
    top: -5px;
}

.updateSpecial {
    right: -40px;
    top: -15px;
    padding: 15px 0;
}

.info {
    font-size: 12px;
}

.main-menu {
    background: var(--blackMenu);
    border-right:1px solid #e5e5e5;
    position:fixed;
    top: 60px;
    bottom:0;
    left:0;
    width: 50px;
    overflow:hidden;
    -webkit-transition:width .05s linear;
    transition:width .05s linear;
    -webkit-transform:translateZ(0) scale(1,1);
    z-index:2;
}

.arrow {
    display: block;
    margin: 15px 25px 0 15px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    transform: rotate(135deg);
}

.main-menu:hover .arrow {
    border-top: 2px solid #2f2f30;
    border-left: 2px solid #2f2f30;
}

.main-menu>ul {
    margin:5px 0;
}

.main-menu li {
    position:relative;
    display:block;
    width:250px;
    left: -40px;
}

.main-menu li>div {
    position:relative;
    display:table;
    border-collapse:collapse;
    border-spacing:0;
    color:#999;
    font-family: arial;
    font-size: 14px;
    text-decoration:none;
    -webkit-transform:translateZ(0) scale(1,1);
    -webkit-transition:all .1s linear;
    transition:all .1s linear;

}

.main-menu li a {
    border-spacing: 0;
    color: #ffffff;
    font-family: arial;
    font-size: 14px;
    text-decoration: none;
    display: contents;
}


.main-menu .nav-icon {
    position:relative;
    display:table-cell;
    width:60px;
    height:36px;
    text-align:center;
    vertical-align:middle;
    font-size:18px;
}

.main-menu .nav-text {
    position:relative;
    display:table-cell;
    vertical-align:middle;
    width:190px;
    font-family: 'Titillium Web', sans-serif;
}

.main-menu>ul.logout {
    position:absolute;
    left:0;
    bottom:0;
}

.no-touch .scrollable.hover {
    overflow-y:hidden;
}

.no-touch .scrollable.hover:hover {
    overflow-y:auto;
    overflow:visible;
}

.creer {
    display: none;

}

.supprimer {
    display: none;

}

.modifier {
    display: none;

}

.creer .nav-text, .modifier .nav-text, .supprimer .nav-text {
    padding-left: 5px;
}

.creerClasses .nav-text, .creerRaces .nav-text, .creerMagies .nav-text, .creerEquipements .nav-text, .creerAventures .nav-text, .creerMJs .nav-text, .creerGenerateurs .nav-text,
.modifierClasses .nav-text, .modifierRaces .nav-text, .modifierMagies .nav-text, .modifierEquipements .nav-text, .modifierAventures .nav-text, .modifierMJs .nav-text, .modifierGenerateurs .nav-text,
.supprimerClasses .nav-text, .supprimerRaces .nav-text, .supprimerMagies .nav-text, .supprimerEquipements .nav-text, .supprimerAventures .nav-text, .supprimerMJs .nav-text, .supprimerGenerateurs .nav-text {
    padding-left: 10px;
}

.area {
    float: left;
    background: #e2e2e2;
    width: 100%;
    height: 100%;
}
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(https://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}

@media screen and (max-width: 1024px) {
    .card-page-account, .card-page-account h3 {
        text-align: left;
        min-width: 300px;
        max-width: 300px;
    }
    .main-menu {
        background: #2f2f30;
        width: 25px;
        top: 50px;
    }

    .arrow {
        margin: 15px 35px 0 5px;
    }
}