@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,500,700&display=swap" rel="stylesheet');
@import url('https://fonts.googleapis.com/css?family=K2D:400,700&display=swap');

/*remove #temp-block from bottom of page*/



html, body{
    margin: 0;
    padding: 0 0 40px;
    font-family: 'Nunito', sans-serif;
    background: #fff;
}


/*  HIDE NAV LEFT MENU   */

#loader{position: fixed; top: 45%; left: 50%; transform: translate(-50%, -50%); font-weight: 300; font-size: 18px; text-shadow: 0 1px 1px rgba(0,0,0,.02); color: #333;}
.nav-left, .nav-alt-left, .nav-right{display: none;}
.main-content{position: relative; display: none; animation: fadeIn .5s;}
.content-standard{
    display: block;
    box-sizing: border-box;
    margin: 50px auto;
    width: 82.5%;
    text-align: left;
    position: relative;
}

.icon-box{position: absolute; top: 0; right: 10px;}
.n-icon{position: relative; opacity: .5; background: #d8d8d8; border: 1px solid #ccc; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: .12s; display: inline-block; margin: 10px;}
.n-icon i{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#i-A, #i-B{width: 45px; height: 45px; border-radius: 45px; font-size: 20px;}
#i-C{width: 40px; height: 40px; border-radius: 40px; font-size: 22px; position: fixed; top: -4.5px; right: 15px; z-index: 3;}
.n-icon:hover{opacity: .7; cursor: pointer;}
.n-icon:active{transform: scale(.92);}

.content-standard h1{
    font-weight: 700;
    font-size: 24px;
    color: #818181;
    margin: 0;
    text-shadow: 0 2px 3px rgba(0,0,0,0.05);
}

h1 i{opacity: .35; font-size: 20px; margin-right: 7px; text-shadow: 0 2px 3px rgba(0,0,0,0.1);}

.filter-name{
    padding: 8px 10px 8px 15px;
    margin: 15px 0 5px;
    background: #f9f9f9;
    box-sizing: border-box;
    width: 250px;
    font-size: 17px;
    opacity: .92;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    outline: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.02);
    transition: .15s;
}

.filter-name:focus{box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid #269DE0; opacity: 1;}

.filter-dept{
    display: block;
    font-weight: 300;
    font-size: 18.5px;
    color: #269DE0;
    margin: 5px 0 25px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.03);
}

.filter-dept:hover{cursor: pointer;}

.dept{animation: fadeIn .25s; display: inline-block; margin: 5px; font-size: 14px; background: #f3f3f3; text-align: center; padding: 5px 8px; box-sizing: border-box; font-weight: 300; transition: .1s;}
.dept:hover{background: #efefef; cursor: pointer; box-shadow: 0 1px 1px rgba(0,0,0,.03);}
.dept:active{opacity: .5;}
#clear{background: #269DE0; color: #fff; opacity: .7;}
#clear:hover{opacity: .85;}
#clear:active{opacity: .3;}

.content-stats{
    display: block;
    padding: 0;
    text-align: center;
}

.content-stats h2{
    font-style: normal;
    margin-top: 50px;
    font-weight: 700;
    font-size: 24px;
    color: #555;
    text-shadow: 0 2px 3px rgba(0,0,0,.07);
}

.info-box{
    background: #fafafa; border: 1px solid #d8d8d8; border-radius: 10px;
    padding: 12px 35px; box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0,0,0,.02);
    animation: fadeIn .25s;
}

.info-box p{font-size: 17px; line-height: 30px; font-weight: 300;}

.results-container{
    padding: 0 0 50px;
    text-align: center;
    position: relative;
}


@keyframes fadeIn{
    from{opacity: 0;}
    to{opacity: 1;}
}
.result-box{animation: fadeIn .25s;}

.table-stats{
    text-align: left;
    position: relative;
    font-size: 15.5px;
    width: 82.5%;
    margin: 25px auto 0;
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    border-collapse: collapse;
    border: 1px solid #ccc;
    box-shadow: 0 2px 3px 1px rgba(0,0,0,0.07);
    text-shadow: 0 1px 1px rgba(0,0,0,.02);
    z-index: 1;
}

#firstRow{position: fixed; top: 0; width: 100%;}
.test{overflow: scroll;}
.table-stats tr:nth-child(even){background: #F0FAF4;}

.table-stats th, td{color: #525252;}
.table-stats th{font-weight: 700; padding: 10px 0; text-align: center; border-bottom: 1px solid #ccc;}
.table-stats i{margin-left: 10px; opacity: .35; transition: .2s;}
.table-stats i:hover{color: #269DE0; opacity: .75; cursor: pointer;}
.table-stats td{padding: 3px 0;}
#fixed-nav{position: fixed; top: 0; width: 100%; border: none; margin: 0 auto; z-index: 2; background: #fff;}
#fixed-nav th{padding: 15px 0; font-size: 16px;}

.p-col{width: 2.5%;}.p-col-op{width: 5%;}
.cell-name{width: 15%; font-weight: 500;  text-align: left;} 
.cell-dept{width: 15%;  text-align: left;}
.cell-title{width: 21%;  text-align: left;}
.cell-data-A, .cell-data-B{width: 12%; text-align: center;}
.col-A, .col-B{width: 15%;}.col-C{width: 21%;}.col-D, .col-E{width: 12%;}

@media (max-width: 1050px) {

.content-standard{margin: 35px auto;}
.content-standard, .table-stats{width: 90%;}
.icon-box{right: 25px;}
.col-D, .m-total, .cell-data-A{display: none;}
}

@media (max-width: 800px) {
    
  
.content-standard{margin: 25px auto;}  
H1, H2{font-size: 22.5px;}
h1 i{font-size: 18.5px;}
html, body{padding: 0;}
.icon-box{right: 50px;}
.content-standard, .table-stats{width: 95%;}

}


@media (max-width: 740px) {

.content-standard h1, .content-stats h2{font-size: 22px;}
h1 i{font-size: 18px;}
.col-B, .cell-dept, .n-icon, .filter-dept{display: none;}
.table-stats{font-size: 15px;}

}


@media (max-width: 650px) {

.content-standard h1, .content-stats h2{font-size: 20px;}
.table-stats{font-size: 14px;}

}

@media (max-width: 550px) {

.content-standard{margin: 15px auto;} 
.content-standard h1, .content-stats h2{font-size: 18px;}
h1 i{font-size: 17px;}
.table-stats{width: 100%; border-left: none; border-right: none;}
.p-col{width: 2%;}
    
}

@media (max-width: 450px) {
    
.content-standard h1, .content-stats h2{font-size: 18px;}
.table-stats{font-size: 15px;}
.p-col{width: 2.5%;}
.col-C, .cell-title{display: none;}
    
}