/* Aizat - V6 */

/*@import "https://code.highcharts.com/css/highcharts.css";*/


/* Login v6 */

.oms-login-v6 {
	background-image: url(../images/bg-login-2024.png);
	background-size: cover;
	background-position: center;
	/*background-color: #2196F3;*/
}

.darken {
	position: absolute;
	/*box-shadow: inset 2000px 0 0 0 rgb(0 0 0 / 75%);*/
}

.login {
	align-items: center;
	background-color: #2196F300 !important;
	display: flex;
	height: 100%;
	position: fixed;
	text-align: center;
	width: 100%;
	min-height: 0vh;
}

.check-box{
	width: 45px;
	height: 45px;
	border-radius: 2px;
	box-shadow: 0 0 12px -2px rgba(0,0,0,0.5);
	background-color: #4caf50;
	/*border: 1px solid #0ed900;*/
	position: absolute;
	top: 15px;
	right: -40px;
	opacity: 0;
}

.check-box svg{
	width: 40px;
	margin: 3px;
}

svg path{
	stroke-width: 3;
	stroke: #fff;
	stroke-dasharray: 34;
	stroke-dashoffset: 34;
	stroke-linecap: round;
}

.logmasuk-active{
	background: #33308a;
	transition: 1s;
}

.logmasuk-active .check-box{
	right: 15px;
	opacity: 1;
	transition: 1s;
}

.logmasuk-active span{
	margin-right: 45px;
	transition: 1s;
}

.logmasuk-active svg path{
	stroke-dashoffset: 0;
	transition: 1s;
	transition-delay: 1s;
}

/* login MPM - 2024 */

.login-card.auth-body {
    width: 380px;
}

.auth-box {
    background-color: #43434330;
    border-radius: 10px;
    margin: 0;
    padding: 20px;
    box-shadow: 0 2px 18px -2px #000;
}

.outline-login {
	border: 1px solid #ffffff91;
	border-radius: 10px;
    padding: 35px;
}

.form-control {
    border-radius: 8px !important;
    padding: 0.7rem 0.75rem;
}

#outer {
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}
#home-top-video:before {
  content:"";
  position: absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  z-index:1;
  background:linear-gradient(to right,rgb(19 4 62 / 40%),rgb(11 5 68 / 89%));
}

#home-top-video {
  left: 0%;
  top: 0%;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: -1;
}

/* Aizat - Side Menu V6 */

.pcoded .pcoded-navbar[active-item-theme="theme10"] .pcoded-item>li.active>a {
	background: #cbedf9;
	color: #fff;
}

.pcoded[nav-type="st2"] .pcoded-item.pcoded-left-item>li>a>.pcoded-micon:active {
	color: #fff!important;
}

.pcoded[nav-type="st2"] .pcoded-item.pcoded-left-item>li>a>.pcoded-mtext:active {
	color: #fff!important;
}

.pcoded .pcoded-navbar[active-item-theme="theme10"] .pcoded-item>li.active>a:before {
	border-left-color: #33308a;
}

.pcoded .pcoded-navbar .pcoded-item>li>a>.pcoded-micon {
	padding: 5px;
	margin-right: 7px;
}

.pcoded .pcoded-navbar[active-item-theme="theme10"] .pcoded-item li:hover>a {
	color: #fff !important;
	background-color: #33308a;
}

.pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li.pcoded-trigger>a {
	background: #7cc3dc;
}

.pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li.pcoded-trigger ul li.active {
	background: rgb(64, 153, 255);
	padding-left: 25px;
	height: 60px;
}

.pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li.pcoded-trigger ul li {
	padding-left: 25px;
	height: 60px;
}

.pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li.pcoded-trigger ul li .pcoded-micon {
	padding-right: 10px;
}

/*.pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li>a {*/
	/*background: rgb(64, 153, 255);*/
/*}*/

.pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li ul li.active {
	background: #9abff0;
	padding-left: 25px;
	height: 40px;
}

.pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li ul li {
	padding-left: 25px;
	height: 60px;
}

.pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li ul {
	background-color: #8cd5ef;
}

.pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li ul li:hover {
	background-color: #a7cbd8;
	height: 60px;
}

.pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li ul li .pcoded-micon {
	padding-right: 10px;
}

.pcoded .pcoded-navbar[active-item-theme="theme10"] .pcoded-item li .pcoded-submenu li.active>a, .pcoded .pcoded-navbar[active-item-theme="theme10"] .pcoded-item li .pcoded-submenu li:hover>a {
	color: #fff !important;
	background-color: unset;
	position: relative;
	top: 30%;
	transform: translate(0%, -50%);
}

.pcoded .pcoded-navbar[active-item-theme="theme10"] .pcoded-item li .pcoded-submenu li.active>a, .pcoded .pcoded-navbar[active-item-theme="theme10"] .pcoded-item li .pcoded-submenu li>a {
	color: #222 !important;
	background-color: unset;
	position: relative;
	top: 30%;
	transform: translate(0%, -50%);
}

.pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li ul li .pcoded-mtext {
	position: absolute;
	top: 50%;
	transform: translate(0%, -50%);
	width: 125px;
}

/* Label Pada Senarai Table */

/*.label-primary {*/
	/*background-color: #f9b343 !important;*/
/*}*/

/*.label-success {*/
	/*background: #4db6ac !important;*/
/*}*/

/*.label-warning {*/
	/*background-color: #f9484a !important;*/
/*}*/

/*.label-normal {*/
	/*background-color: #7986cb !important;*/
/*}*/


/* Countdown New */

.pos-timer {
	position: fixed;
	top:0;
	left: 45%;
}

.s1-txt1 {
	font-size: 12px;
	font-weight: 500;
	color: #000;
	text-shadow: 0 0 0 #000;
	line-height: 1;
	text-transform: uppercase;
}

.l1-txt3 {
	font-size: 24px;
	font-weight: 600;
	color: #000;
	text-shadow: 0 0 0 #000;
	line-height: 1;
	margin-top: 8px;
}

.size1 {
	width: 100%;
	min-height: 100vh;
}

.size2 {
	width: calc((100% - 3px) / 1);
	height: 70px;
}

.size3 {
	width: 280px;
	max-width: calc(100% - 20px);
	height: 50px;
}

.wsize1 {
	max-width: 100%;
	width: 360px;
}

.wsize2 {
	max-width: 526px;
}

.number-clock {
	display: grid;
	text-align: center;
}

.p-b-7 {
	padding-bottom: 7px;
}

.bg0 {
	/*background-color: #000000;*/
	/*background-image: linear-gradient(315deg, #000000 0%, #414141 74%);*/
	background-color: #fec84e;
	background-image: linear-gradient(360deg, #fec84e 0%, #ffdea8 74%);
}

.bor1 {
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	overflow: hidden;
}

.bor2 {
	border-right: 1px solid #e6e6e6;
}

.flex-w,
.flex-l,
.flex-r,
.flex-c,
.flex-sa,
.flex-sb,
.flex-t,
.flex-b,
.flex-m,
.flex-str,
.flex-c-m,
.flex-c-t,
.flex-c-b,
.flex-c-str,
.flex-l-m,
.flex-r-m,
.flex-sa-m,
.flex-sb-m,
.flex-col-l,
.flex-col-r,
.flex-col-c,
.flex-col-str,
.flex-col-t,
.flex-col-b,
.flex-col-m,
.flex-col-sb,
.flex-col-sa,
.flex-col-c-m,
.flex-col-l-m,
.flex-col-r-m,
.flex-col-str-m,
.flex-col-c-t,
.flex-col-c-b,
.flex-col-c-sb,
.flex-col-c-sa,
.flex-row,
.flex-row-rev,
.flex-col,
.flex-col-rev,
.dis-flex {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
}

div.card {
	margin-top: 0!important;
}

.main-body .page-wrapper-v6 {
	width: 100%;
	padding: 60px 20px 0 20px;
	transition: all ease-in 0.3s;
}

.pcoded-inner-content-v6 {
	padding: 0 0 10px 0;
	background-color: #ebebeb;
}

div.card .card-header {
	border-bottom: 1px solid #cdcdcd !important;
	padding-bottom: 10px!important;
	background: none !important;
	margin: 25px 25px !important;
}

.bg-announcement {
	top: 55px;
	z-index: 1 !important;
	min-height: 35px;
}

.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item>li>a .pcoded-mtext {
	opacity: 1;
	visibility: visible;
	position: absolute;
	top: 50%;
	transform: translate(0%, -50%);
	color: #343434;
	text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
}

.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item>li>a .pcoded-mtext:hover {
	color: #fff;
}

/* Dashboard V6 Pie Chart */

.highcharts-figure,
.highcharts-data-table table {
	min-width: 320px;
	max-width: 660px;
	margin: auto;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #ebebeb;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}

.highcharts-data-table caption {
	padding: 1em 0;
	font-size: 1.2em;
	color: #555;
}

.highcharts-data-table th {
	font-weight: 600;
	padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
	padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
	background: #f8f8f8;
}

.highcharts-data-table tr:hover {
	background: #f1f7ff;
}

.highcharts-pie-series .highcharts-point {
	stroke: #ede;
	stroke-width: 2px;
}

.highcharts-pie-series .highcharts-data-label-connector {
	stroke: silver;
	stroke-dasharray: 2, 2;
	stroke-width: 2px;
}

/* BUTTON STATUS RALAT */

.btn-ralat {
	position: relative;
	border-width: 1px;
	border-radius: 0 40px 0 40px;
	text-shadow: 1px 1px 1px rgb(0 0 0 / 37%);
}

.btn .icon.icon-round {
	border-radius: 50%;
}

.btn .icon {
	position: absolute;
	top: -13px;
	left: -6px;
	width: 60px;
	height: 60px;
	bottom: 0;
	text-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
}

.btn .icon-round span {
	font-size: 18px;
	font-weight: 600;
	margin-right: 0;
	color: #444444;
}

.circle-primary {
	background: #fff;
	border: 2px solid #73b4ff;
}

.circle-warning {
	background: #fff;
	border: 2px solid #FFB64D;
}
.circle-danger {
	background: #fff;
	border: 2px solid #FF5370;
}
.circle-success {
	background: #fff;
	border: 2px solid #02bf99;
}

@media (max-width: 1200px) {
	.wsize1 {
		width: 280px;
	}

	.m-0-xl {
		margin: 0;
	}

	.m-lr-0-xl {
		margin-left: 0;
		margin-right: 0;
	}

	.m-lr-15-xl {
		margin-left: 15px;
		margin-right: 15px;
	}

	.m-l-0-xl {
		margin-left: 0;
	}

	.m-r-0-xl {
		margin-right: 0;
	}

	.m-l-15-xl {
		margin-left: 15px;
	}

	.m-r-15-xl {
		margin-right: 15px;
	}

	.p-0-xl {
		padding: 0;
	}

	.p-lr-0-xl {
		padding-left: 0;
		padding-right: 0;
	}

	.p-lr-15-xl {
		padding-left: 15px;
		padding-right: 15px;
	}

	.p-l-0-xl {
		padding-left: 0;
	}

	.p-r-0-xl {
		padding-right: 0;
	}

	.p-l-15-xl {
		padding-left: 15px;
	}

	.p-r-15-xl {
		padding-right: 15px;
	}

	.w-full-xl {
		width: 100%;
	}

	/*---------------------------------------------*/

}

@media (max-width: 1222px) {

	.header-navbar .navbar-wrapper .navbar-logo {
		justify-content: center
	}

	.header-navbar .navbar-wrapper .navbar-logo {
		width: 100% !important
	}

	.header-navbar .navbar-wrapper .navbar-container {
		margin-left: 0;
	}

	.header-navbar .navbar-container .nav-left, .header-navbar .navbar-wrapper .navbar-container .nav-right {
		display: none;
	}

	.header-navbar {
		position: fixed !important;
		z-index: 1209;
	}

	.header-navbar .navbar-wrapper .navbar-logo .mobile-menu {
		display: block;
		position: absolute;
		left: 20px;
		top: 0;
		right: auto;
	}

	.header-navbar .navbar-wrapper .navbar-logo .mobile-options {
		display: block;
		position: absolute;
		right: 30px;
	}

	.bar-minimize-surih {
		width: 75% !important;
	}

}


/*//////////////////////////////////////////////////////////////////
[ LG ]*/
@media (max-width: 992px) {
	.m-0-lg {margin: 0;}
	.m-lr-0-lg {margin-left: 0; margin-right: 0;}
	.m-lr-15-lg {margin-left: 15px; margin-right: 15px;}
	.m-l-0-lg {margin-left: 0;}
	.m-r-0-lg {margin-right: 0;}
	.m-l-15-lg {margin-left: 15px;}
	.m-r-15-lg {margin-right: 15px;}

	.p-0-lg {padding: 0;}
	.p-lr-0-lg {padding-left: 0; padding-right: 0;}
	.p-lr-15-lg {padding-left: 15px; padding-right: 15px;}
	.p-l-0-lg {padding-left: 0;}
	.p-r-0-lg{padding-right: 0;}
	.p-l-15-lg {padding-left: 15px;}
	.p-r-15-lg {padding-right: 15px;}

	.w-full-lg {width: 100%;}

	/*---------------------------------------------*/

	#sidebar-wrapper {
		width: 40px !important;
	}

	.menu, .menu-surih {
		width: 40px !important;
	}

	.menu li a {
		height: 40px !important;
		width: 40px !important;
	}

	.button-bawah {
		width: 40px !important;
		height: 40px;
	}

	.button-bawah li a {
		height: 40px !important;
		width: 40px !important;
	}

	.three-button {
		bottom:0 !important;
		left: 40px !important;
	}

	.three-button.open {
		height: 40px !important;
	}

	.btn-bawah-small {
		padding: 12px 10px;
		font-size: 14px;
		line-height: 0;
	}

	.ralat-zooning {
		width: 40px !important;
	}

	.ralat-zooning .m-l-5 {
		margin-left: 0 !important;
	}

	.ralat-zooning .m-r-5 {
		margin-right: 0 !important;
	}

	.ralat-zooning .btn-sm {
		padding: 6px 12px !important;
		font-size: 14px !important;
	}

	.menu-bar {
		left: 40px !important;
	}

	.menu-surih.open {
		width: auto !important;
		padding: 10px 10px 10px 50px !important;
	}

	.open {
		width:297px !important;
	}

	.markah-div {
		height: calc(100% - 185px) !important;
	}

	.zoom-paper {
		right: 20vw !important;
	}

	.bar-minimize-surih {
		width: 75% !important;
	}
}


/*//////////////////////////////////////////////////////////////////
[ MD ]*/
@media (max-width: 768px) {
	.m-0-md {margin: 0;}
	.m-lr-0-md {margin-left: 0; margin-right: 0;}
	.m-lr-15-md {margin-left: 15px; margin-right: 15px;}
	.m-l-0-md {margin-left: 0;}
	.m-r-0-md {margin-right: 0;}
	.m-l-15-md {margin-left: 15px;}
	.m-r-15-md {margin-right: 15px;}

	.p-0-md {padding: 0;}
	.p-lr-0-md {padding-left: 0; padding-right: 0;}
	.p-lr-15-md {padding-left: 15px; padding-right: 15px;}
	.p-l-0-md {padding-left: 0;}
	.p-r-0-md{padding-right: 0;}
	.p-l-15-md {padding-left: 15px;}
	.p-r-15-md {padding-right: 15px;}

	.w-full-md {width: 100%;}
	/*---------------------------------------------*/

	.bar-minimize-surih {
		width: 70% !important;
	}
}


/*//////////////////////////////////////////////////////////////////
[ SM ]*/
@media (max-width: 576px) {
	.m-0-sm {margin: 0;}
	.m-lr-0-sm {margin-left: 0; margin-right: 0;}
	.m-lr-15-sm {margin-left: 15px; margin-right: 15px;}
	.m-l-0-sm {margin-left: 0;}
	.m-r-0-sm {margin-right: 0;}
	.m-l-15-sm {margin-left: 15px;}
	.m-r-15-sm {margin-right: 15px;}

	.p-0-sm {padding: 0;}
	.p-lr-0-sm {padding-left: 0; padding-right: 0;}
	.p-lr-15-sm {padding-left: 15px; padding-right: 15px;}
	.p-l-0-sm {padding-left: 0;}
	.p-r-0-sm{padding-right: 0;}
	.p-l-15-sm {padding-left: 15px;}
	.p-r-15-sm {padding-right: 15px;}

	.w-full-sm {width: 100%;}

	/*---------------------------------------------*/
	.respon1 {
		padding-top: 35px;
	}

}


/*//////////////////////////////////////////////////////////////////
[ SSM ]*/
@media (max-width: 480px) {
	.m-0-ssm {margin: 0;}
	.m-lr-0-ssm {margin-left: 0; margin-right: 0;}
	.m-lr-15-ssm {margin-left: 15px; margin-right: 15px;}
	.m-l-0-ssm {margin-left: 0;}
	.m-r-0-ssm {margin-right: 0;}
	.m-l-15-ssm {margin-left: 15px;}
	.m-r-15-ssm {margin-right: 15px;}

	.p-0-ssm {padding: 0;}
	.p-lr-0-ssm {padding-left: 0; padding-right: 0;}
	.p-lr-15-ssm {padding-left: 15px; padding-right: 15px;}
	.p-l-0-ssm {padding-left: 0;}
	.p-r-0-ssm{padding-right: 0;}
	.p-l-15-ssm {padding-left: 15px;}
	.p-r-15-ssm {padding-right: 15px;}

	.w-full-ssm {width: 100%;}
	/*---------------------------------------------*/

}