*{
    font-family:Roboto;
    font-style:normal;
    font-weight:100 !important;
}

.isitraceday{
    /*font-size:200%;*/
    text-align:center;
    height:unset !important;
}

.singleChamp{
    height:unset !important;
}

/*Offset for the fixed sidebar on fullscreen view per https://materializecss.com/sidenav.html#!*/
header, #main, footer, nav, #title{
    /*padding-left:300px*/ /*No longer needed for everything as the sidebar is being set to appear underneath the title bar*/
}

    
.isitraceday.card h1{
    margin-top:0rem;
}

.isitraceday .card-image{
    display:none;
}

nav{
    /*border-bottom-color:#212121;
    border-bottom-style:solid;
    border-bottom-width:2px;*/
}

.navbar-fixed, nav{
    /*height:122px;*/
    height:84px;
    line-height: 84px;
}

nav .nav-wrapper {
    height: 50%;
}

/*https://stackoverflow.com/questions/43076209/changing-materialize-css-navbar-active-color*/
.navbar-fixed .nav-wrapper > ul > li:hover {
  /*background-color: #9e9e9e;*/
}

/*Have the sidenav trigger on the same side as the sidenav*/
nav .sidenav-trigger{
    float:right;
}

/*For some reason the stock materialize code truncates the sidebar, so it won't scroll to show all elements. This seems to fix that:*/
/*The entire title bar is 64px deep*/
.sidenav{
    height:calc(100% - 84px) !important;
}

/*Alter the sidenav so that it appears below the website title*/
.sidenav{
    top:initial;
    z-index: 996;
}

/*By bringing the sidenav behind the navbar, it also falls behind the sidebar-overlay, so that needs to be adjusted too*/
.sidenav-overlay{
}

/*Offset the content so that it does not overlap with the sidebar*/
#main, #title{
    /*padding-left:300px;*/
    padding-right:300px;
}

#title{
    font-size:3rem;
}

.tabs{
    background-color:transparent;
    height:56px;
}

nav ul li.active, .sidenav li.active{
    background-color:rgba(0,0,0,0.2);
}

nav ul li.active a, .sidenav li.active a{
    outline:none;
}

::-webkit-scrollbar{
    display:none;
}

/*Copied from the logo css!*/
.forceCenter{
    position:absolute;
    left:0;
    right:0;
    text-align:center;
}

/*Set monthCard card height. Let it expand over as many lines as it needs if the date is too long for the given screen width*/
.monthCard{
    /*height:2.5em !important;*/
    margin-bottom:0.5rem !important;
}

.monthCard .card-title{
    padding-left:10px;
}

/*Prevent text from clipping if too many lines of text in the content box*/
.card.small .card-image + .card-content, .card.medium .card-image + .card-content, .card.large .card-image + .card-content {
    max-height: 100%;
}

.card .card-image img{
    padding:5px;
    padding-bottom:0;
}

/*On a small screen, the races are set to display a single column. In this case there is no need for:*/
/*- the cards to be of a fixed height, since they are never displayed side-by-side*/
/*- the championship logo when it is a single championship, indicated by the "single" class*/
@media only screen and (max-width:600px){
    .isitraceday.card, .card.medium{
        height:unset; /*https://stackoverflow.com/questions/5218679/how-can-i-nullify-css-property*/
    }
    
    /*Display the championship logo on the isitraceday card...*/ 
    .isitraceday .singleChamp.card-image{
        display:block;
    }
    
    /*...but not on the race cards*/
    .card-image.singleChamp {
        display:none;
    }
}

@media only screen and (max-width: 992px){
    .forceCenter{
        position:absolute;
        left:0 !important;
        right:0 !important;
        text-align:center;
        transform:translateX(0%) !important;
    }
    
    /*Offset for the fixed sidebar on mobile view per https://materializecss.com/sidenav.html#!*/
    header, #main, footer, nav, #title{
        /*padding-left:0;*/
        padding-right:0;
    }
    
    /*On the mobiel view we want the sidebar to overlay everything else*/    
    .sidenav{
        z-index:998;
        height:calc(100%) !important;
        top:0;
    }
    
    /*Have the sidenav trigger on the same side as the sidenav*/
    nav a.sidenav-trigger i{
        line-height:84px !important;
    }
}