.login-page {
	background-image: url("../../images/login_mobile1.jpg"); /* The image used */

	background-color: #cccccc; /* Used if the image is unavailable */

	height: 300px; /* You must set a specified height */

	background-position: center; /* Center the image */

	background-repeat: no-repeat; /* Do not repeat the image */

	background-size:cover;
}

.footer-menu {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: rgb(255, 255, 255);
	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.52);
	display: none;
	justify-content: space-around;
	align-items: center;
	padding: 10px 0;
	border-top: 2px solid #e0e0e0;
}

.footer-menu a {
	text-decoration: none;
	text-align: center;
	color: #333;
	font-size: 14px;
	flex: 1;
}

.footer-menu a:hover {
	color: #0049ff;
}

.footer-menu a div {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 10pt;
}

.footer-menu a i {
	color: #0049ff;
	width: 24px;
	height: 24px;
	margin-bottom: 5px;
	font-size: 24px;
}

@media (max-width: 820px) {
	.footer-menu {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: rgb(255, 255, 255);
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.52);
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 10px 0;
		border-top: 2px solid #e0e0e0;
	}
}
@media (max-width: 780px) {
	.login-page {
		background-image: url("../../images/mobile_page.jpg"); /* The image used */
		background-position: center; /* Center the image */
		background-repeat: no-repeat; /* Do not repeat the image */
		background-size: cover;
	}
}

@media (max-width: 520px) {
	.login-page {
		background-image: url("../../images/mobile_page.jpg"); /* The image used */
		background-position: center; /* Center the image */
		background-repeat: no-repeat; /* Do not repeat the image */
		background-size: cover;
	}
}

.mtext {
	font-size: 13px;
}

.child1 :hoover {
	background-color: rgba(221, 221, 221, 0.836);
}

.sidebar-light .sidebar-menu .dropdown-toggle:hover,
ul.submenu.child2 .dropdown-toggle:hover,
.sidebar-light .sidebar-menu .dropdown.child2 .dropdown-toggle:hover,
.sidebar-light .sidebar-menu .menu.child2 :hover,
.sidebar-light .sidebar-menu .child2 .dropdown-toggle:hover,
.sidebar-light .sidebar-menu .child2.show > .dropdown-toggle {
	color: #fff;

	font-weight: 800;

	/* background-color: #01a3fd, */
	background-image: linear-gradient(to left, #0049ff, #02123000);
}

.sidebar-light .sidebar-menu .submenu .child li a.active,
.sidebar-light .sidebar-menu .submenu .child li a:hover {
	color: #fff;

	font-weight: 800;
	background-image: linear-gradient(to left, #0049ff, #02123000);
}

.sidebar-light .sidebar-menu .submenu.child2 .menu :hover,
.sidebar-light .sidebar-menu .child2 .dropdown-toggle:hover,
.sidebar-light .sidebar-menu .dropdown-toggle:hover,
.sidebar-light .sidebar-menu .child1.show > .dropdown-toggle,
.sidebar-light .sidebar-menu .submenu .child1 li a.active,
.sidebar-light .sidebar-menu .submenu .child1 li a:hover {
	color: rgb(255, 255, 255);
	font-weight: 800;
	background-color: #0049ff;
}

ul .submenu.child.child2 {
	color: rgb(0, 0, 0);
}

.loginproses {
	font-size: 18px;

	animation: typing 5s steps(22) 1s infinite alternate;

	animation-name: example;

	animation-duration: 5s;
}

.TextLogin {
	font-size: 18px;
}

@keyframes example {
	0% {
		color: #0049ff;
	}

	50% {
		color: #242424;
	}

	100% {
		color: #01a3fd;
	}
}

.TableButtosPrimary {
	background-color: #0049ff;

	color: #fff;
}

thead {
	color: #fff;

	background-color: #0049ff;
}

span.micon {
	color: #0049ff;
}

th.sorting_asc {
	font-size: 12px;
}

.h4-notif {
	text-align: center;
}

td {
	font-size: 12pt;
}

th {
	font-size: 12pt;
}

@media (max-width: 1200px) {
	.menudashboard {
		font-size: 12px;

		font-weight: 800;
	}
}

@media (max-width: 768px) {
	.menudashboard {
		font-size: 10px;

		font-weight: 800;
	}

	.btn-m {
		font-size: 13px;
	}

	.dt-buttons {
		float: right;
	}
}

@media (max-width: 500px) {
	.menudashboard {
		font-size: 10px;

		font-weight: 800;
	}

	.btn-m {
		font-size: 13px;
	}

	.dt-buttons {
		float: right;
	}
}

.menudashboard-icon {
	font-size: 32px;

	color: #01a3fd;
}

.col-3 > a > div.w-100.align-items-center > div > {
	background-color: #fff;
}

.col-3 > a > div.w-100.align-items-center > div > div:hover,
.col-3 > a > div.w-100.align-items-center > div > div > span:hover {
	background-color: #e6f2c4;

	color: #fff;
}

.dataTables_filter {
	float: right;
}

.select2-search__field {
	z-index: 99999999;
}

.modal {
	overflow: auto;
}

.modal-body {
	overflow: visible;
}

.datepicker-container {
	position: fixed;
	opacity: 0;
}

.help-block {
	font-size: 12px;

	color: #0049ff;
}

/*//////////////////////////////////////*/

/*//////////////////////////////////////*/

/*//////////////////////////////////////*/

/*

    Wizard

*/

.wizard > .steps > ul {
	display: flex;
}

.wizard > .steps > ul > li {
	font-size: 10px;

	max-width: 20%;
}

.wizard > .steps > ul > li > a {
	width: auto;
}

.wizard > .steps > ul > li > a > span.step {
	font-size: 12px;
}

.wizard > .steps a,
.wizard > .steps a:hover,
.wizard > .steps a:active {
	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	border-radius: 5px;
}

.wizard > .steps .error a:hover,
.wizard > .steps .error a:active {
	background: #0049ff;

	color: #fff;
}

.actions.clearfix {
	margin-top: 20px;
}

.cabang-top {
	color: #0049ff;
	font-size: 13px;
	font-weight: 500;
	margin-left: 30px;
	margin-bottom: 20px;
	border-top: 2px solid #0a0a0a;
}

#radioBtn .notActive {
	color: #0049ff;

	background-color: #fff;
}

#radioBtn .absensi_set {
	font-size: 12px;
}

/*////////////////////////////////////*/

/*////////////////////////////////////*/

.switch-lable {
	margin-left: 5px;

	font-weight: 500;
}

/*////////////////////////////////////*/

/*////////////////////////////////////*/

.loader {
	position: fixed;

	left: 50%;

	top: 40%;

	z-index: 9999999999;

	width: 100px;

	height: 100px;

	border-radius: 50%;

	border: 10px solid #00ff00;

	display: flex;
}

.m-load {
	left: 35%;
}

.loader::after {
	content: "";

	width: 80px;

	height: 80px;

	border-radius: 50%;

	border: 8px solid transparent;

	border-top: 8px solid #0049ff;

	animation: rotate 1.3s linear infinite;
}

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

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

/*////////////////////////////////////*/

/*////////////////////////////////////*/