body {
    font-family: "Arial";
    background: #FFF;
    margin: 0;
    padding: 0;
}

nav#navtop {
    padding-top: 0.3rem !important;
}

nav a {
    margin-left: 0.3em;
    margin-right: 0.3em;
    color: #CCCCCC;
}

nav a:not(a.active) {
color: #CCCC;
}
nav a:not(a.active):hover {
color: #FF8800;
}



nav .active.dropdown-toggle {
    cursor: pointer;
}
nav .dropdown-menu.dropdown-menu-right {
    padding: 10px;
    margin-top: 1px;
    border-top:0;
    right: 0.3rem;
    left: unset;
}

ul.nav {
    margin-bottom:-9px;
    width: 100%;
}

footer {
    color: #CCCCCC;
    font-size: 14px;
    margin-bottom:0;
}

footer nav {
    /* class? */
    justify-content:center !important;
}

a:hover {
    color: #FF8800;
}

nav .logo {
    font-size: 24px;
    color: #FF8800 !important;
    padding-bottom: 0px;
    padding-top: 0px;
}

.psilicium {
    color: #888888;
}
.psilicium .i {
    color: #FF8800;
}
.psilicium .i:before {
    content: "ı";
    position: absolute; 
    color: #888888;
}

main {
/*    height: calc(100vh - 1rem - 1px - 1.5 * 24px);*/
}

.tab-pane {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100vw !important;
    max-width: 100vw !important;
    margin-top: calc(1rem + 1px + 1.5 * 24px);
    min-height: calc(100vh - 1rem - 1px - 1.5 * 24px);

}

section#home {
    overflow-x: hidden;
    overflow-y:auto; /*custom scroller*/
    width: calc(var(--cell-dimension) * 18 + var(--cell-spacing) * 20) !important;
    margin-bottom: 30px;
}