/** Some of the CSS is in the materialize library. Some of the things are being overwritten here **/
		.side-nav {
			/** calculate height becasue default is 100%. And will not show OVERFLOW SCROLL **/
			height: calc(100vh - 0px - 0px);
			top: calc(0px + 0px); /** added pixel is about the gap between sidebar and topbar **/
         
			/** It has box-shadow. Nullify it for sharper image. **/
			box-shadow: none;
			
			/** border **/
			border-right: thin #ddd solid;
            
			<!-- display: flex; -->
			flex-direction: column;
			justify-content: center;
			/** We are keeping height of navbar as 70px. **/
			/** MENUS can have different color, when implemented **/
			
			overflow-y:auto;
            overflow-x:hidden;
            height:100%;
            padding-bottom:0px;
            
            
			width:  !important;

		}
        
        

		.sidebar {
            background-color: #222;
            opacity: 1;
            /*z-index = -9999;*/	/** do mind the z-index. Else it will come on top of the window stack, in case of overlap. **/
								/** check materialize for more. **/

            /*Emergency hack to put menu inmiddle. Something'sweirdy wrong */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
		
        .menu{
			
			// to add a scroll whenever it reaches the max-screen height.
            min-height: 70%;
            height: auto;
            padding: 5px;
           /* max-height: 100vh;
            overflow-y: auto; */
            margin-top: 5%;
            
            /** same as margin in search-wrapper **/
        }
        
        .button-box {}
        
        .button-box .button-head {}
        
        .button-box .button-clickable-wrapper {
           
            /** clickable-buttons are horizontally aligned **/
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: wrap;
            
            /** If it exceeds the first line, move to second **/
            /* border-left: 3px darkorange solid; */
            padding: 1px;
        }
        
        .button-box .button-clickable-wrapper .button-clickable {
            margin: 3px;
            padding-left: 5px;
            cursor: pointer;
        }
           
             
         
      
        /** theme for Menu and Buttons  **/
        
        .button-box {
            margin: 5px;
        }
        
        .button-head {
            font-size:  calc(10px + .2vw + .1vh);
            color: darkorange;
            font-weight: 500;
            letter-spacing: 2;
            font-family: "Ubuntu";
            font-variant-caps: small-caps;
        }
        
        .button-clickable {
            font-size: calc(10px + .1vw + .1vh);
            color: white;
            letter-spacing: 1;
            // font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;           
            border-left: thin darkorange solid;
        }
		
		.button-clickable a {
			color: #fff;
		}
		
		.clickable a {
			color: darkorange;
			cursor:pointer;
        }
        
        
        .cselogo{
            display: block;
            align-content: center;
            
        }

        #front-page-logo{
            width: 150px;
            padding: 5px;
            height: 150px;
            margin-left: 25%;
            margin-right: 25%;  
   
        }
        .logo1{
            width=10px;
            margin-left:35%;
        
        }
        .logo1 img{
            width:80px;
            height:80px;
        }
    html {
    overflow: scroll;
    overflow-x: hidden;
}

    #footer-container {
      height: 17%;
      font-size: 12px;
      padding: 5px;
      color: #AAA;
      text-align: center;
      width: inherit;
      margin-top: 5%;
      
    }

    #crossButton{
        height:10%;
        height: 64px;
        line-height: 64px;
    }
    
    ::-webkit-scrollbar {
    width:2px;  /* remove scrollbar space */
    /* <!-- height:2px; --> */
}

/* optional: show position indicator in red 
::-webkit-scrollbar-thumb {
    background: #f15a22;
}
*/

#DeptName{
            font-size: 15px;
            font-weight: bold;
        }



a.currentLink {
	color: darkorange;
}