.navbar-nav .show .dropdown-menu {
	margin-top: 10px;
	border-top: 1px solid var(--gray-1);
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	float: left;
	min-width: 160px;
	list-style: none;
	background:var(--element-background);
	box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .2);
}
/* added margin-top in order to fix non-necessary free space WD-1552 on mobile */
.navbar-nav.ml-auto .show .dropdown-menu {
	margin-top: 0;
	/* top: 54px; */
	right: 0;
	left: auto;
}

@media ( max-width :1048px) {
	
	.content.content-full-width .breadcrumb {
		margin: 20px;
	}
	
	
	.form-bordered .form-group>div:first-child{
		/* padding: 10px 15px 0px; */
	}
	
/* changed margin-right because of UX improvement
 *  so on small devices like iPhone 4 screen all menu items are fit 
 * (WD-1552)*/
 	
	.navbar-user img {
		margin: -5px 3px 0 0!important;
	}
	.navbar.fixed-top {
		margin: 0;
		position: fixed;
	}
	.navbar-nav {
		margin: 0;
	}
	
	.ml-auto {
		float: right;
	}
	
	.mr-auto, navbar-nav>li {
		float: left;
	}
	
	.navbar-nav .show .dropdown-menu>li>a {
		padding: 5px 15px
	}
	.navbar-light .navbar-nav .show .dropdown-menu>li>a:focus,
		.navbar-light .navbar-nav .show .dropdown-menu>li>a:hover {
		background: var(--gray-1)
	}

	.card-body {
		padding: 10px;
	}
	.cbp-spmenu-left {
		left: -500px;
	
	}
.breadcrumb {
	float: none !important
}

.footer {
	margin: 0 20px
}

    .table-responsive .table>tbody>tr>td, 
    .table-responsive .table>tbody>tr>th,
    .table-responsive .table>tfoot>tr>td, 
    .table-responsive .table>tfoot>tr>th,
    .table-responsive .table>thead>tr>td, 
    .table-responsive .table>thead>tr>th {
		white-space: nowrap;
	}
	
.width-sm {
	width: 100% !important
}
.dataTables_wrapper {
	padding: 0;
	
}

.vertical-box, .vertical-box .vertical-column {
	display: block !important
}

.fc-event .fc-event-title small {
	display: none !important
}

.calendar {
	display: block;
	width: 100% !important;
	margin-left: 0 !important
}

.fc-button-today {
	float: left !important
}

.fc-header-center, .fc-header-left, .fc-header-right {
	text-align: center !important;
	width: 100% !important;
	display: table !important
}

.calendar-event .external-event {
	width: 100% !important
}

.fc-header-left {
	text-align: right !important
}

.fc-header-center {
	margin-top: -46px !important
}

.fc-header-center h2 {
	font-size: 18px !important
}

.calendar-event .external-event i, .calendar-event .external-event p,
	.fc-event .fc-event-icons, .fc-header-left .fc-header-space {
	display: none !important
}

.calendar-event .external-event h5 {
	margin: 0 !important
}
.nav-tabs.nav-justified.nav-justified-mobile>li {
	display: table-cell;
	width: 1%
}

.nav-tabs.nav-justified.nav-justified-mobile>li>a {
	margin-bottom: 0
}

}
@media ( max-width :480px) {
	.media.media-lg .pull-left {
		float: none !important;
		margin-right: 0
	}
	.media.media-lg .media-object {
		width: 100%;
		margin-bottom: 10px
	}
/* new media added for responsive year calendar */
	.dayName {
		/**	JL 10.6.2016 WD-3062 !important rule was causing when .dayName had inline style dislay:none	
		 *  it was anyway shown. I Removed !important from this rule. It is too general rule to have !important. 
		 *  Please let me know if is needed 
		 * 
		 *  - its needed in calandar view to see calendar days
		 * */		 
		display:inline-block; 
				
	}
	
	/* JL 25.7.2016 WD-3259 To see in calendar day names we have to oeverwrite inline style , do not remove IMPORTANT */
	.wd-page-ta-get-calendar .dayName {
		display:inline-block !important; 
		min-width: 100px; /* to align group event icons, becasue days are not same width and days are styles as inline-block */	
	}
	
	
	/* long should be shown only on mobile phone because is too long */
	.longAbsenceDescription {
		display: block!important
	}
	.shortAbsenceDescription {
		display:none!important
	}

	
	.cbp-spmenu-left {
		left: -500px;
	
	}
	/* styles for login and reset password views for small screens */
	.login, .reset {
		margin:50px 0!important;
		width: 100%!important;
	}
	.login .login-header, .login-content, .reset .reset-header, .reset-content {
		width: 100%!important;
	}
	.outer {
		background: #71828A!important;
		right: 0;
	}
	.dataTables_scrollBody {
		/* overflow-x: hidden!important; JL: TODO: REMOVE OTHERS TOO*/
	}
	
}