.commonmenu
{
    display : flex;
	flex-direction: column;
	justify-content : center;
	height : 100%;

}
.commonmenulinks
{
    display : flex;
	flex-direction: row;
	justify-content : center;
	width : 100%;
}
.commonmenuitem
{
    padding-left : 1em;
	padding-right : 1em;
    text-decoration: none;
	font-weight : bold;
	color : gray;
}
.commonmenuitem:hover
{
    padding-left : 1em;
	padding-right : 1em;
    text-decoration: none;
	font-weight : bold;
}
.commonlogin
{
	display : flex;
	flex-direction: column;
	justify-content : center;
	height : 100%;
}
.commonloginholder
{
	display : flex;
	flex-direction: row;
	justify-content : center;
	width : 100%;	
}
.commonbtn
{
	display : flex;
	flex-direction: column;
	justify-content : center;
	height : 100%;
}
.commonbtnholder
{
	display : flex;
	flex-direction: row;
	justify-content : center;
	width : 100%;	
}
.menuburger
{
	font-weight: bold;
	font-size: 1.1em;
}
.commonbanner
{
	background-image: url("../images/bannerbg.jpg");
	background-position: center;
	background-size: cover;
	width : 100%;
	height : 420px;
	display : flex;
	flex-direction: column;
	justify-content : center;
}
.commonbannerutility
{
	color : #ffffff;
}
.commonlogoimg
{
	width : 60%;
	height : auto;
	padding-top : 1em;
	padding-bottom : 1em;
}

@media (min-width: 768px) {  
.commonbanner
{
	height : 420px;
}
.commonlogoimg
{
	width : 60%;
	height : auto;
	padding-top : 0px;
	padding-bottom: 0px;
}
}

@media (min-width: 992px) { 
	.commonbanner
	{
		height : 350px;
	}
	.commonlogoimg
{
	width : 100%;
	height : auto;
	padding-top : 0.3em;
	padding-bottom: 0.3em;
}
}
.centertext
{
	text-align: center;
}
.commontopribbon
{
	padding-top : 0.2em;
	padding-bottom : 0.2em;
	background-color: #e5e6ec;
	font-weight: bold;
	color : gray;
}



.ff1
{
	font-family: 'Roboto', sans-serif;

}
.ff2
{
	font-family: 'Be Vietnam', sans-serif;

}
.ff3
{
	font-family: 'Big Shoulders Text', cursive;

}
.ff4
{
	font-family: 'Titillium Web', sans-serif;

}
.ff5
{
	font-family: 'Fira Sans', sans-serif;

}
.ff6
{
	font-family: 'Heebo', sans-serif;

}
.ff7
{
	font-family: 'Manjari', sans-serif;

}
.ff8
{
	font-family: 'Anton', sans-serif;

}

.cursor-pointer
{
	cursor : pointer;
}



.footer
{
	background-color : #edf2ee;
	color : #7a827c;
}

.footer-tile
{
	padding : 1.2em;
	
}

.footer-tile-decorator
{
	padding-bottom : 0.6em;
}
.footer-tile-content
{
	font-size : 0.85em;
}

.footer-anchor
{
	text-decoration : none;
	display : block;
	color : inherit;
}

.footer-anchor-sm
{
	font-size : 1.2rem;
	text-decoration : none;
	padding : 0.2em;	
	color : inherit;
	transition : 0.5s ease all;
	
}
.footer-anchor-sm:hover
{
	font-size : 1.2rem;
	text-decoration : none;
	padding : 0.2em;	
	color : #5f5fde;
	transition : 0.5s ease all;
}


.center-text
{
	text-align : center;
}
.footer2
{
	padding : 0.75em;
	background-color : #c8cfca;
	color : #7a827c;
	font-size : 0.85em;
}


.logincards
{
	width : 100%;
	height : auto;
}
.logincards > button
{
	width : 49%;
	height : auto;
	padding : 8px;
	text-align : center;
	display : inline-block;
	border : none;
	margin : none;
	cursor : pointer;
	margin-right : 0px !important;
}

.highletercard
{
	background-color : #3949ab;
	color : #ffffff;
}





/* sidenav section */

.sidenavx
{
	 height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 14; /* Stay on top */
    top: 0; /* Stay at the top */
    right: 0;
    background-color: rgba(0, 0, 0, 0.6); 
	color : #8f8f8f;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 10px; /* Place content 60px from the top */
    /* 0.5 second transition effect to slide in the sidenav */
}

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 15; /* Stay on top */
    top: 0; /* Stay at the top */
    right: 0;
    background-color: #ffffff; 
	color : #8f8f8f;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 10px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav > a {
    padding: 8px 8px 8px 18px;
    text-decoration: none;
    font-size: 1em;
    color: #8f8f8f;
    display: block;
    transition: 0.3s;
	border-bottom : 1px dotted #099e48;
	
}

/* When you mouse over the navigation links, change their color */
.sidenav > a:hover {
    color: #f1f1f1;
	background-color : #212429;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top : 0;
    right: 25px;
    font-size: 1rem;
    margin-top: 7px;
    margin-left: 25px;
	background-color : red;
	
	border-radius : 50%;
}




/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}


.sidenav-drop
{
	display : none;
}
.sidenav-drop-anchor
{
	font-size : 0.85em;
	font-weight : bold;
	 padding: 8px 8px 8px 50px;
    text-decoration: none;
    
    color: #000000;
    display: block;
    transition: 0.3s;
	border-bottom : 1px dotted #f78c00;
}
.sidenav-drop-anchor:hover
{
	font-size : 0.85em;
	font-weight : bold;
	 padding: 8px 8px 8px 50px;
    text-decoration: none;
    
    color: #000000;
    display: block;
    transition: 0.3s;
	border-bottom : 1px dotted #f78c00;
}


.sidenav-logo-holder
{
	box-shadow : 0px 4px 2px 0px #c1c3c9;
	padding-bottom : 10px;
}

.tandb-margin
{
	margin-top : 10px;
	margin-bottom : 10px;
	display : block;
}
.bottom-shadow
{
	padding-bottom : 1px;
	box-shadow : 0px 4px 2px 0px #c1c3c9;
}
.panel
{
	border : 1px solid #cbcbd4;
	border-radius : 0.35em;
	color : #49494d;
	margin-bottom : 1em;
}
.panel-header
{
	background-color : #dad3e6;
	padding-top : 0.4em;
	padding-right : 0.5em;
	padding-bottom : 0.4em;
	padding-left : 0.5em;
	font-weight : bold;
	font-size : 0.85em;
}
.panel-content
{
	padding : 0.5em;
}
.panel-footer
{
	padding : 0.2em;
	border-top : 1px solid #cbcbd4;
	font-size : 0.75em
}
.panel-profile-img
{
	width : 35%;
	margin-left : auto;
	margin-right : auto;
	height : auto;
	display : block;
}
.username
{
	font-size : 1.2em;
	text-align : center;
	margin-bottom : 0.6em;
}