@import 'open-iconic-bootstrap.min.css';

html, body {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

app {
	position: relative;
	display: flex;
	flex-direction: column;
}

.top-row {
	height: 3.5rem;
	display: flex;
	align-items: center;
}

.main {
	flex: 1;
}

	.main .top-row {
		background-color: #e6e6e6;
		border-bottom: 1px solid #d6d5d5;
	}

.sidebar {
	background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

	.sidebar .top-row {
		background-color: rgba(0,0,0,0.4);
	}

	.sidebar .navbar-brand {
		font-size: 1.1rem;
	}

	.sidebar .oi {
		width: 2rem;
		font-size: 1.1rem;
		vertical-align: text-top;
		top: -2px;
	}

.nav-item {
	font-size: 0.9rem;
	padding-bottom: 0.5rem;
}

	.nav-item:first-of-type {
		padding-top: 1rem;
	}

	.nav-item:last-of-type {
		padding-bottom: 1rem;
	}

	.nav-item a {
		color: #d7d7d7;
		border-radius: 4px;
		height: 3rem;
		display: flex;
		align-items: center;
		line-height: 3rem;
	}

		.nav-item a.active {
			background-color: rgba(255,255,255,0.25);
			color: white;
		}

		.nav-item a:hover {
			background-color: rgba(255,255,255,0.1);
			color: white;
		}

.content {
	padding-top: 1.1rem;
}

.navbar-toggler {
	background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 767.98px) {
	.main .top-row {
		display: none;
	}
}

@media (min-width: 768px) {
	app {
		flex-direction: row;
	}

	.sidebar {
		width: 250px;
		height: 100vh;
		position: sticky;
		top: 0;
	}

	.main .top-row {
		position: sticky;
		top: 0;
	}

	.main > div {
		padding-left: 2rem !important;
		padding-right: 1.5rem !important;
	}

	.navbar-toggler {
		display: none;
	}

	.sidebar .collapse {
		/* Never collapse the sidebar for wide screens */
		display: block;
	}
}

.loader-container {
	display: flex;	
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 5;
	background-color: rgba(256, 256, 256, 0.5);
}

.loader {
	border: 16px solid #f3f3f3; /* Light grey */
	border-top: 16px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
	margin: auto;	
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.border-2 {
	border-width: 2px !important;
}

.border-3 {
	border-width: 3px !important;
}

.ovf-table-body {
	display: block;
	height: inherit;
	overflow-y: scroll;
	width: auto;
	table-layout: inherit;
}

.ovf-table-tr {
	display: table;
	width: 100%;
	table-layout: inherit;	
}

@media (min-width: 1200px) {

	.display-desktop	{
		
	}

	.dropdown-width-100-mob{

	}

	.modal-popup-editor {
		width: 33vw;
		min-width:600px;
	}

	.display-mobile {
		display: none !important;
		width: 0px !important;
		height: 0px !important;
	}

	.col-mobile {
		
	}

	.font-data{
		font-size:1.1rem;
	}

	.grid-font{

	}
}

@media (max-width: 1199.99px) {

	.display-desktop {
		display: none !important;
		width: 0px !important;
		height: 0px !important;
	}

	.display-mobile {
		
	}

	.modal-popup-editor {
		width: 80vw;
		max-height:85vh;
		overflow-y:auto;
	}

	.col-mobile {
		-ms-flex-preferred-size: 0;
		flex-basis: 0;
		-ms-flex-positive: 1;
		flex-grow: 1;
		max-width: 100%;
	}

	.p-font {
		font-size:0.75rem;
	}

	.grid-font {
		font-size: small;
	}
}