/* General Style (Common for both Mobile and Desktop) */
.navbar-sidebar
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2001;
	background: rgba(0, 0, 0, 0.5);
	display: none;
}

body.page-caseStory .panels-container
{
	overflow-y: hidden;
	min-height: unset !important;
	height: calc(100vh - 100px) !important;
}

body.page-caseStory .panels-container::-webkit-scrollbar
{
	width: 15px;
	height: 15px;
}

body.page-caseStory .panels-container::-webkit-scrollbar-track
{
	background: rgba(0, 0, 0, 0.1);
}

body.page-caseStory .panels-container::-webkit-scrollbar-thumb
{
	background: var(--primaryColor);
	border-radius: 10px;
}

body.page-caseStory .panels-container::-webkit-scrollbar-thumb:hover
{
	background: var(--themeDarkColor);
}

body.page-caseStory .panel-card .task-container
{
	max-height: calc(100vh - 200px) !important;
}

body.page-caseStory .panel-card
{
	max-height: 100%;
	height: auto;
}
/* General Style (Common for both Mobile and Desktop) */

/* Desktop styles */
@media only screen and (min-width: 992px)
{
	/* Dashboard */
	.margin-on-mobile-only[class*="mb-"]
	{
		margin: unset !important;
	}
	/* Dashboard */

	/* DataTables */
	div.dataTables_wrapper div.dataTables_info
	{
		padding-top: 0.55em !important;
	}

	.dataTables_wrapper > .dataTables_info
	{
		float: left;
	}
	/* DataTables */
}
/* Desktop styles */

/* Mobile styles */
@media only screen and (max-width: 991px)
{
	.hide-on-mobile
	{
		display: none;
	}

	.show-only-on-mobile
	{
		display: inline-block;
	}

	/* Case Overview */
	.modal .modal-full-height
	{
		width: unset !important;
	}

	.modal .cardBodyScroll
	{
		height: unset !important;
	}
	/* Case Overview */

	/* Case Story */
	body.page-caseStory > main > .container-fluid
	{
		margin-top: 0.5rem !important;
	}

	body.page-caseStory .panels-container
	{
		max-height: unset !important;
		height: calc(100vh - 110px) !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
	}

	body.page-caseStory .panels-container > div[class*="col-"]
	{
		display: inline-block;
		float: left;
	}

	.horizontal-list > .li-parent-case-abbr::before
	{
		content: unset !important;
	}

	body.page-caseStory .panel-card .task-container
	{
		max-height: calc(100vh - 180px) !important;
		height: auto !important;
	}
	/* Case Story */

	/* Menu (Package) */
	nav.navbar ul.navbar-nav > .nav-item:nth-child(even)
	{
		margin: unset !important;
	}

	.navbar .nav-flex-icons
	{
		flex-direction: column;
	}

	nav.navbar .nav-item .nav-link
	{
		color: var(--themeTextColor) !important;
		background: unset;
	}

	.navbar.navbar-light .navbar-toggler
	{
		color: var(--themeTextColor);
	}

	.toggle-sidebar
	{
		padding: 10px;
		color: var(--themeTextColor) !important;
	}

	.navbar-sidebar.show
	{
		display: block;
	}

	.navbar-sidebar > .navbar-sidebar-content
	{
		height: 100%;
		width: 60%;
		max-width: 180px;
		position: relative;
		padding-top: 20px;
		background: var(--themeGradient);
		color: var(--themeTextColor);
		z-index: 2001;
		animation-duration: 0.3s;
	}

	.navbar-sidebar > .navbar-sidebar-content > .navbar-sidebar-controls
	{
		position: absolute;
		top: 0;
		right: 0;
		font-size: 20px;
	}

	.navbar-sidebar .nav-link
	{
		color: var(--themeTextColor);
		width: 100%;
		font-size: 15px;
	}
	/* Menu (Package) */

	/* DataTable */
	.dataTables_wrapper > .dataTables_info
	{
		text-align: right !important;
	}
	/* DataTable */
}

/* Landscape view (works when the device is rotated to landscape view) */
@media only screen and (max-width: 991px) and (orientation: landscape)
{
	/**/
}

@media only screen and (max-width: 768px)
{
	.col-10.sortablePanels
	{
		flex: 0 0 35% !important;
	}
}

@media only screen and (max-width: 640px)
{
	/* For Medium size Mobiles */
	/* Responsive Tab */
	.card.responsive-tab > .card-header
	{
		padding: 0 !important;
		margin: 0 !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		background: #fff !important;
	}

	.card.responsive-tab .nav-tab-navigation, .card.responsive-tab  .nav-tab-navigation > .nav.nav-tabs
	{
		width: 100%;
	}

	.card.responsive-tab .nav-tabs > .nav-item
	{
		width: 100%;
		order: 0;
		box-shadow: 0px -3px 8px -3px #000;
		transform: translateY(-5px);
	}

	.card.responsive-tab .nav-tabs > .nav-item > .nav-link
	{
		padding: 8px 0 !important;
	}

	.card.responsive-tab .nav-tabs .nav-link:not(.active):hover
	{
		color: var(--themeDarkColor) !important;
	}

	.card.responsive-tab .nav-tabs > .nav-item.active-item
	{
		background: var(--themeGradient) !important;
		order: 1;
		box-shadow: 0px -4px 10px -6px #000;
	}

	.card.responsive-tab .nav-tabs > .nav-item.active-item > .nav-link
	{
		padding: 5px 0 !important;
	}

	/*.card.responsive-tab .nav.nav-tabs
	{
		flex-wrap: nowrap !important;
	}*/
	/* Responsive Tab */

	/* DataTable */
	.dataTables_wrapper > .dataTables_info
	{
		text-align: right !important;
	}
	/* DataTable */

	.col-10.sortablePanels {
	    flex: 0 0 45% !important;
	    max-width: 83% !important;
	}

}

@media only screen and (max-width: 578px)
{
	.col-10.sortablePanels {
	    flex: 0 0 45% !important;
	}
}

@media only screen and (max-width: 480px)
{
	.col-10.sortablePanels
	{
		flex: 0 0 55% !important;
	}
}

@media only screen and (max-width: 450px)
{
	.notifications-container
	{
		width: calc(100vw - 50px) !important;
	}

	.col-10.sortablePanels
	{
		flex: 0 0 60% !important;
	}
}

@media only screen and (max-width: 320px)
{
	.col-10.sortablePanels
	{
		flex: 0 0 70% !important;
	}
}
/* Mobile styles */