

/*primary menu*/
.top-header {
	width: 86px;
	float: left;
	margin: 10px 62px;
}
.top-header img { width:100%;
}
.primary-menu {
	float: right;
	width: 84%;
}

	.primary-menu .navbar .navbar-nav .nav-item {
		width: 100%;
	}

.date-report {
	width: 100%;
	padding: 0;
	background-color: #4e4e4e;
	padding: 0.5em 0.85em;
	color: #ffffff;
	margin-right: 0;
	font-size: 14px;
}

.primary-menu .navbar .navbar-nav a.nav-link {
	display: flex;
	align-items: center;
	justify-content: start;
	gap: 0.5rem;
	font-size: 16px;
	border-radius: 0;
	padding: 0.25rem 1rem;
	margin: 2px 0rem;
	border-bottom: 1px solid #e3e3e3;
	color: #ffffff;
}


	.primary-menu .navbar .navbar-nav a.nav-link:first-child {
		margin-left: 0;
	}

	.primary-menu .navbar .navbar-nav a.nav-link:last-child {
		margin-right: 0;
	}


	.primary-menu .navbar .navbar-nav a.nav-link:active,
	.primary-menu .navbar .navbar-nav a.nav-link:focus {
		color: #ffffff;
		background-color: #008cff;
	}


	.primary-menu .navbar .navbar-nav a.nav-link:hover {
		color: #32393f;
		background-color: #f5f6f7;
	}




	.primary-menu .navbar .navbar-nav a.nav-link.active:hover,
	.primary-menu .navbar .navbar-nav a.nav-link.active {
		color: #ffffff;
		background-color: #008cff;
	}

ul.scroll-menu {
	overflow-x: auto;
	height: auto;
	max-height: 450px;
}

.primary-menu .navbar .navbar-nav .dropend a.dropdown-toggle:after {
	content: "\e409";
	position: absolute;
	right: 4px;
	border: 0;
	font-size: 20px;
	display: inline-block;
	font-family: 'Material Icons Outlined';
}


.primary-menu .navbar .navbar-nav .dropdown-menu {
	transform-origin: top center;
	animation: rotateX 200ms ease-in forwards;
	box-shadow: none !important;
	padding: 0.5rem;
	margin: 0;
}

.primary-menu .navbar .navbar-nav .dropend .dropdown-menu {
	padding-left: 1rem;
}



@keyframes rotateX {
	0% {
		opacity: 0;
		transform: rotateX(-90deg);
	}

	50% {
		transform: rotateX(-20deg);
	}

	100% {
		opacity: 1;
		transform: rotateX(0deg);
	}
}



.primary-menu .navbar .navbar-nav .dropdown-menu .dropdown-item {
	font-size: 14px;
	flex-shrink: 0;
	border-radius: 0;
	display: flex;
	align-items: center;
}

	.primary-menu .navbar .navbar-nav .dropdown-menu .dropdown-item i {
		margin-right: 10px;
		font-size: 20px;
		line-height: 1;
	}


.primary-menu .navbar .navbar-nav a .parent-icon {
	font-size: 20px;
	line-height: 1;
}

.primary-menu .navbar .navbar-nav a .menu-title i {
	font-size: 20px;
}

.welcome {
	float: right;
	width: auto;
}

	.welcome p {
		font-size: 1em;
		float: left;
		padding: 0px 12px 0px 0;
		margin: 0;
		color:#ffffff; 
	}

.date-report .date {
	display: inline-block;
	vertical-align: text-bottom;
}

.flag1, .flag2, .flag3 {
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.78em;
}

@media screen and (min-width:640px) {

	.primary-menu .navbar .navbar-nav a.nav-link {
		border-radius: 0;
		margin: 0px 0.5rem;
		border: 0px solid #e3e3e3;
		padding: 0.5em 1.87em 0.5em 0.62em;
	}

	.primary-menu .navbar .navbar-nav .dropdown-menu .dropdown-item {
		border-radius: 6px;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.primary-menu .navbar .navbar-nav .dropdown-menu {
		transform-origin: top center;
		animation: rotateX 300ms ease-in-out forwards;
		-webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15) !important;
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15) !important;
	}

	@keyframes rotateX {
		0% {
			opacity: 0;
			transform: rotateX(-90deg);
		}

		50% {
			transform: rotateX(-20deg);
		}

		100% {
			opacity: 1;
			transform: rotateX(0deg);
		}
	}



	.primary-menu .navbar .navbar-nav .dropend .dropdown-menu {
		padding-left: 0.5rem;
	}

	.primary-menu .navbar {
		z-index: 10;
		border-bottom: 0px solid #e4e4e4;
		box-shadow: 0 0 .25rem rgba(0, 0, 0, 0) !important;
		background: #ce1010;
		padding: 0 1.5rem;
		width: 100%;
	}



		.primary-menu .navbar .navbar-nav .dropdown-menu {
			width: 17rem;
			border-radius: 0;
		}


		.primary-menu .navbar .navbar-nav .nav-item {
			width: auto;
		}

		.primary-menu .navbar .navbar-nav .dropdown:hover .dropdown-menu {
			display: block;
			position: absolute;
			width: 17rem;	 		
		} 

		.primary-menu .navbar .navbar-nav .dropdown:hover > .dropdown-menu,
		.primary-menu .navbar .navbar-nav .dropend:hover > .dropdown-menu {
			display: block;
		}

		.primary-menu .navbar .navbar-nav .dropdown .dropdown-menu li {
			float: left;
			background-color: #fff;
			width:100%;
			padding:0;
			margin:0;
		}
		.primary-menu .navbar .navbar-nav .dropdown .dropdown-menu li a {
			width:100%;
			padding:8px 10px;
			margin:0;
			color:#000;
		}
			.primary-menu .navbar .navbar-nav .dropend:hover > .dropdown-menu {
			position: absolute;
			top: 0;
			left: 100%;
		}
}

.btn-toggle { display:none; }
.logo-header {
	display: block !important;
} 

@media screen and (max-width: 1200px) {
	.top-header {
		width: 11%;
		float: left;
		margin: 28px 23px;
	}

		.top-header .img {
			width: 100%;
			float: left;
		}
	.logo-header {   display:block !important;	} 
}
	@media screen and (max-width: 950px) {
		.top-header {
			width: 85px;
			float: left;
			margin: 6px 10px;
		}

			.top-header .img {
				width: 100%;
				float: left;
			}
		.logo-header {
			display: block !important;
		} 
	}

@media screen and (max-width: 790px) {
	.primary-menu {
		float: right;
		width: 79%;
	}
}
@media screen and (max-width: 640px) {
	.top-header {
		width: 80%;
		float: left;
		margin: 0;
	}

		.top-header img {
			width: 80px;
		}

	.btn-toggle {
		width: 48px;
		float: left;
		background: #ce1010;
		height: 48px;
		display: block;
	}

		.btn-toggle .material-icons-outlined {
			color: #ffffff;
		}

	.welcome p {
		display: none;
	}

	.logo-main-hm {
		width: 82%;
		float: left;
		margin: 15px 0;
		background-color: #ffffff;
	}

	.logo-icon {
		margin: 0 auto;
		display: table;
	}

	.primary-menu {
		float: right;
		width: 20%;
	}

	.date-report {
		float: right;
		width: 75px;
		text-align: center;
		background: #ce1010;
		height: 48px;
	}

		.date-report .date {
			display: none;
		}

		.date-report .flag1 {
			display: none;
		}

		.date-report .flag2 {
			display: none;
		}

		.date-report .flag3 {
			display: none;
		}

	.primary-menu .navbar .navbar-nav a.nav-link {
		color: #fff;
	}

	.logout-right {
		margin: 0 0 0 0;
	}

	.main-wrapper .main-content .breadcrumb-title {
		width: auto;
		float: left;
	}

	.main-wrapper .main-content .page-breadcrumb .breadcrumb li.breadcrumb-item {
		padding-top: 3px;
	}

	.page-footer {
		position: fixed;
	}

	.primary-menu .navbar .navbar-nav .nav-item {
		background: #ce1010;
	}

	.mobi-logout .nav-item {
		background: #ce1010;
		padding: 13px 0 15px;
		text-align: left;
		margin: 0 0 0 0;
		width: 87px !important;
		text-align:center;
	}

	[data-bs-theme=bodered-theme] body .primary-menu .navbar {
		border-bottom: 0 !important;
		box-shadow: none !important;
		margin: 0;
		padding: 0;
		float: right;
	}
	.logout-right {
		width: 87px;
		float: right;
		border: 0;
		margin: 0;
	}
}
