/* --- FONTS -------------------------------------------------------------------- */
@font-face{
    font-family: RobotoCondensed;
    src: url('../fonts/RobotoCondensed-Regular.ttf');
}
@font-face{
    font-family: RobotoCondensed;
    src: url('../fonts/RobotoCondensed-Italic.ttf');
    font-style: italic;
}
@font-face{
    font-family: RobotoCondensed;
    src: url('../fonts/RobotoCondensed-Bold.ttf');
    font-weight: 700;
}
/* --- BASIC -------------------------------------------------------------------- */
body, .popover, .tooltip{
    font-family: RobotoCondensed;
}
.bg-navy{
	background-color: #323377;
}
.btn-outline-navy{
	color: #323377;
    background-color: transparent;
    background-image: none;
    border-color: #323377;
}
.btn-outline-navy:not(:disabled):not(.disabled).active,
.btn-outline-navy:not(:disabled):not(.disabled):active{
	color: #fff;
	background-color: #323377;
	border-color: #323377;
}
/* --- LOGIN -------------------------------------------------------------------- */
.login-page{
	position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
	background:  url('../img/login-bg.jpg') center;
	background-size: cover;
	overflow: auto;
	
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	padding-top: 40px;
	padding-bottom: 40px;
}
.login-form{
	max-width: 400px;
	margin: auto;
}
.login-form img{
	max-width: 96px;
}
/* --- NAVBAR -------------------------------------------------------------------- */
.navbar{
	background-color: #323377;
}
.navbar-brand{
	padding-top: .75rem;
	padding-bottom: .75rem;
	font-size: 1rem;
	background-color: rgba(0, 0, 0, .25);
	box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}
/* --- SIDEBAR -------------------------------------------------------------------- */
.sidebar{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 100; /* Behind the navbar */
	padding: 48px 0 0; /* Height of navbar */
	box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
.sidebar-sticky{
	position: relative;
	top: 0;
	height: calc(100vh - 48px);
	padding-top: .5rem;
	overflow-x: hidden;
	overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
@supports ((position: -webkit-sticky) or (position: sticky)) {
	.sidebar-sticky {
		position: -webkit-sticky;
		position: sticky;
	}
}
.sidebar .nav-link{
	color: #333;
}
.sidebar .nav-link .fa{
	color: #666;
	margin-right: 4px;
}
.sidebar .nav-link.active{
	font-weight: 700;
	color: #323377;
}
.sidebar .nav-link:hover .fa,
.sidebar .nav-link.active .fa{
	color: inherit;
}
/* --- PROFILE IMAGES -------------------------------------------------------------------- */
.navbar .profile-image, .table .profile-image{
	width: 36px;
	height: 36px;
}
.popover-body .profile-image, .notice-sub .profile-image{
	width: 24px;
	height: 24px;
}
.form-group .profile-image{
	width: 70px;
	height: 70px;
}
/* --- NOTICES -------------------------------------------------------------------- */
.notice-bell{
	position: relative;
}
.notice-bell .shake{
	animation: shake 0.3s;
	animation-iteration-count: infinite;
}
.notice-bell .ripple{
	background-color: #0c5460;
	position:absolute;
	width:160px;
	height:160px;
	left:50%;
	top:50%;
	opacity:0;
	margin:-80px 0 0 -80px;
	border-radius:100px;
	animation:ripple 1.8s infinite
}
.notice-bell .ripple:nth-child(2){
    animation-delay:.3s;
}
.notice-bell .ripple:nth-child(3){
    animation-delay:.6s;
}
@keyframes shake{
	0%   {transform: translate(0px, 0px) rotate(0deg); }
	33%  {transform: translate(3px, 0px) rotate(-20deg); }
	66%  {transform: translate(0px, 0px) rotate(0deg); }
	100% {transform: translate(-3px, 0px) rotate(20deg); }
}
@keyframes ripple{
    0%{opacity:0.3; transform:scale(0.3);}
    100%{opacity:0; transform:scale(1);}
}
/* --- CALENDAR -------------------------------------------------------------------- */
#calendar .meeting{
	position: relative;
}
#calendar .meeting > .ripple{
	position:absolute;
	width:100px;
	height:100px;
	left:50%;
	top:50%;
	opacity:0;
	margin:-50px 0 0 -50px;
	border-radius:100px;
	animation:ripple 1.8s infinite
}
#calendar .meeting > .ripple:nth-child(2){
    animation-delay:.3s;
}
#calendar .meeting > .ripple:nth-child(3){
    animation-delay:.6s;
}
/* --- INFO -------------------------------------------------------------------- */
.info-image{
	max-height: 85px;
}