/*
* Name           : Modern
* Author         : Encoral Digital Solutions Sdn Bhd
* Version        : 2.0
*/

/*--GENERAL--*/
body{
	font-family: "Open Sans",Lucida Grande,Tahoma,sans-serif !important;
	font-size: 12px;
	background-color: #f5f5f5;
    background: url(images/background.jpg) no-repeat center center fixed; 
    background-size: cover;
    z-index: 0;
}
table{
	border-collapse: collapse;
}
a{ color: blue; }
select{ border: 1px solid #B9B9B9; }
input,textarea,select {     
    font-family: inherit;
    font-size: 10pt;
    border-radius: 3px;
    border: 1px solid rgba(128,128,128,0.56);
    padding: 3px 5px; }

/*--HEADER--*/
#header{
    background-color: rgba(255,255,255,0.5);
    height: 50px !important;
    border-bottom: 4px solid #181c4e;
}
#hide-sidebar,
#hide-topbar{
	position: absolute;
    top: 0;
    left: 0;
    padding: 0px 16px;
    line-height: 54px;
    height: 50px;
    background: url('images/hide_sidebar_icon.png') no-repeat center center;
    cursor: pointer;
    border-bottom: 4px solid #181c4e;
}
#hide-sidebar:hover,
.topMenuDiv:hover{
    background-color: rgba(192,58,43,0.75);
    border-bottom: 4px solid #ffffff;
    color: white !important;
    cursor: pointer;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
#logo{
	background: url('images/MyPay.svg?a') no-repeat;
	width: 100px;
	height: 36px;
	position: absolute;
	top: 8px;
	left: 43px;
}
.topMenuDiv{
	text-align: center;
    position: absolute;
    height: 38px;
    padding: 6px 10px;
    top: 0;
    border-bottom: 4px solid #181c4e;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
.topIcon{
	background-image: url('images/top_icons.png');
	background-repeat: no-repeat;
	width: 37px;
	height:38px;
}
#topLogoutLinkIcon{ background-position: -74px 0px; }
#topHomeLinkIcon  { background-position: 0px 0px; }
#topDateIcon      { background-position: -37px 0px; float:right;}
#topLogoutLink{
	right: 0;
	background-position: center right;
}
#topHomeLink{
	right: 57px;
	border-right: 1px solid #3B7692;
}
#topTime{
	right: 115px;
	border-right: 1px solid #3B7692;
}

/*--SIDEBAR--*/
#sidebar{
	background-color: rgba(230,230,230,0.5);
    max-width: 250px;
    border-radius: 0 0 3px 0;
}

/*Profile Block*/
#profileBlock{
	padding-right: 16px;
    background-color: rgba(192,58,43,0.5);
    float: left;
    width: 234px;
}
#sidebar .profileImageBlock{
	float: left;
    padding-right: 10px;
}

/*search*/
#sidebar .searchMenuBlock{
	clear: both;
    padding: 9px;
    background-color: rgba(211,211,211,0.5);
    text-align: center;
}
#sidebar .searchMenuBlock input{
    border: none;
    padding: 5px;
    width: 219px;
    font-family: inherit;
    background: rgba(255,255,255,0.9) url('images/search-icon.png') no-repeat right center;
    font-size: 11px;
    border-right: 3px solid rgba(255,255,255,0.1);
    border-radius: 3px;

}
#menu_suggestions{
	max-width: 400px !important;
	margin-left: 0 !important;
	border: 3px solid #B6BABE;
	box-shadow: #888 0px 3px 4px !important;
	-webkit-box-shadow: #888 0px 3px 4px !important;
	-moz-box-shadow: #888 0px 3px 4px !important;
	z-index: 99;
}
#menu_suggestions table{
	width: 100%;
	text-align: left !important;
}
#menu_suggestions table th,
#menu_suggestions table td{
	padding: 5px;
}
#menu_suggestions table th.listingHead{
	background-color: #E7E7E7;
}
#menu_suggestions a{
	font-size: 11px;
	text-decoration: none;
	color: #333;
	display: block;
	border-bottom: 1px dotted #DADADA;
}
#menu_suggestions a:hover{
	color: #FFF;
	background-color: #428BCE;
}

/*side menu list*/
ul.sideMenuList{
	padding: 0;
	list-style-type: none;
	margin: 0;
}
ul.sideMenuList li a{
	display: block;
	padding: 8px;
	color: #2b2b2b;
	text-decoration: none;
}
ul.sideMenuList li a.noChild.menuActive{
	font-weight: bold;
    background: rgba(247,148,33,0.5);
    color: #181c4e;
    padding-left: 51px;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 30px 7px;
    background-image: url('images/icon_default_file.png');
}
ul.menuLevel3 li a.noChild.menuActive{
    font-weight: bold;
    background: rgba(192,58,43,0.25);
    color: #181c4e;
    padding-left: 71px !important;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 50px 7px !important;
    background-image: url('images/icon_default_file.png');
}
ul.sideMenuList li a.hasChild{
	font-weight: bold;
}
ul.sideMenuList.menuLevel1 > li > a.hasChild{
    background-color: rgba(218,218,218,0.5);
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
ul.sideMenuList.menuLevel1 > li > a.hasChild:hover{
    color: #181c4e;
    padding-left: 30px;
    background: rgba(192,58,43,0.75);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 8px 7px;
    background-image: url('images/icon_default_folder.png');
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
ul.sideMenuList.menuLevel1{
	max-width: 250px;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
ul.sideMenuList.menuLevel1 a:hover{
	text-decoration: none;
}
ul.sideMenuList.menuLevel2 li a.noChild:hover{
	color: #181c4e;
    padding-left: 51px;
    background: rgba(192,58,43,0.75);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 30px 7px;
    background-image: url('images/icon_default_file.png');
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
ul.sideMenuList.menuLevel3 li a.noChild:hover{
	color: #181c4e;
    padding-left: 71px !important;
    background: rgba(192,58,43,0.75);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 50px 7px !important;
    background-image: url('images/icon_default_file.png');
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

/* side menu icons*/
ul.sideMenuList.menuLevel1 li > a{ padding-left: 30px; background-position: 8px 7px; }
ul.sideMenuList.menuLevel2 li > a{ padding-left: 51px; background-position: 30px 7px; }
ul.sideMenuList.menuLevel3 li > a{ padding-left: 71px; background-position: 50px 7px; }
ul.sideMenuList.menuLevel4 li > a{ padding-left: 91px; background-position: 70px 7px; }
ul.sideMenuList.menuLevel5 li > a{ padding-left: 111px; background-position: 90px 7px; }
ul.sideMenuList.menuLevel6 li > a{ padding-left: 131px; background-position: 110px 7px; }
ul.sideMenuList.menuLevel7 li > a{ padding-left: 151px; background-position: 130px 7px; }
ul.sideMenuList.menuLevel8 li > a{ padding-left: 171px; background-position: 150px 7px; }
ul.sideMenuList.menuLevel9 li > a{ padding-left: 191px; background-position: 170px 7px; }
ul.sideMenuList.menuLevel10 li > a{ padding-left: 211px; background-position: 190px 7px; }

/*--TOPMENU--*/
#topMenuBar{
	background-color: #DFDFDF;
	height: 35px;
}
/*search*/
#topMenuBar .searchMenuBlock{
	float: right;
	padding: 4px;
	position: relative;
}
#topMenuBar .searchMenuBlock input{
	padding: 5px;
	font-family: inherit;
	background: #ffffff url('images/search-icon.png') no-repeat right center;
	border: none;
	width: 200px;
	font-size:11px;
	border-right: 3px solid #ffffff;
}
#topMenuBar .searchMenuBlock #menu_suggestions{
	height: 300px;
	width: 250px;
}
/*profile*/
#topMenuBar #profileName{
	height: 35px;
	line-height: 35px;
	padding: 0 10px 0 26px;
	float:right;
	background: #CACACA url('images/usericon.png') no-repeat 5px center;
	cursor: pointer;
}
#topMenuBar #profileBlock{
	position: absolute;
	z-index: 100;
	right: 0;
	top: 89px;
}
ul.topMenuList ul{display: none;}
ul.topMenuList li:hover > ul{display: block;}
ul.topMenuList ul{position: absolute; left:-1px; top:98%; background-color: #DFDFDF; z-index: 1000; border: 1px solid #b4b4b4; box-shadow:0px 0px 2px #b4b4b4;}
ul.topMenuList ul ul{position: absolute;left:98%;top:0;}

ul.topMenuList,
ul.topMenuList ul {
	margin: 0;
	list-style:none;
	padding: 0;
	float: left;
}
ul.topMenuList ul{
	min-width: 180px;
}
ul.topMenuList li{
	display:block;
	float: left;
}
ul.topMenuList.menuLevel1 > li > a{
	border-right: 1px solid #CACACA;
	line-height: 35px;
	padding: 11px 8px 11px 28px;
}
ul.topMenuList li a{
	color: #333333;
	text-decoration: none;
	white-space: nowrap;
	padding: 7px 8px 7px 28px;
}
ul.topMenuList ul li{
	float: none;
	/*border-bottom: 1px dotted #33618B;*/
}
ul.topMenuList li:hover{
	position:relative;
}
ul.topMenuList li a:hover{
	position:relative;
	background-color: #D3D3D3;
}
ul.topMenuList ul li a{
	display: block;
}

/* top menu icons*/
ul.topMenuList.menuLevel1 > li > a{
	background-position: 8px 9px;
}
ul.topMenuList ul a{
	background-position: 8px 6px;
}



/*--CONTENT--*/
#content.withSideBarLeft{
	margin-left: 250px;
	padding: 15px;
}
#content.withSideBarRight{
	margin-right: 250px;
	padding: 15px;
}
#content.withTopMenu{
	padding: 15px;
}
#content.pageBorderEnabled{
    border: none;
    background-color: rgba(253,253,253,0.5);
    border-radius: 3px;
}
#content.withSideBarLeft.pageBorderEnabled{
	margin: 10px 10px 10px 260px;
}
#content.withSideBarRight.pageBorderEnabled{
	margin: 10px 260px 10px 10px;
}
#content.withTopMenu.pageBorderEnabled{
	margin: 10px 10px 10px 10px;
	padding: 10px;
}
#breadcrumbs{
    background-color: rgba(255,255,255,0.5);
    padding: 7px;
    color: #6B6B6B;
    border-radius: 3px;
}
#sideLeftContent{
	width:235px;
	margin: 10px auto 0 auto;
	overflow: auto;
}

#content > h1{
	font-family: Arial,sans-serif;
	font-weight: lighter;
	font-size: 25px;
}
#content .tableContent, #sideLeftContent .tableContent{
    width: 100%;
    background-color: rgba(255,255,255,0.75);
    border-radius: 0px 0px 3px 3px;
    border: 1px solid rgba(128,128,128,0.75);
}
#content .tableContent th, #sideLeftContent .tableContent th{
    background-color: rgb(24, 28, 78);
    padding: 8px;
    text-align: left;
    color: #EEE;
    font-size: 12px;
}
#content .tableContent th.listingHead, #sideLeftContent .tableContent th.listingHead{
	background-color: #608EB3;
	border: 1px solid #215B88;
}
#content .tableContent td, #sideLeftContent .tableContent td{
    padding: 7px;
    border: 1px rgba(128, 128, 128, 0.5) solid;
}
#content .tableContent td.inputLabel{
	/*background-color:#F7F7F7;
	font-weight:bold;
	*/
	max-width:160px;
	width:150px;

}

#content .tab
{
	/*border: 1px solid #215B88 !important;*/

}

#content .tab .componentArea td
{
	padding:4px;
	color:#000;
	background-color: #ffffff;
}

#content .tab td.tabHead
{
	/*border: 1px solid #cccccc;*/
	border-bottom:none;
	background-color: #4681AA;
	padding:8px 17px 8px 17px;
	color:#fff;
	/*border-top:5px solid #ffffff;*/
	border-radius: 5px 5px 0px 0px; 
	cursor:pointer; 
}
#content .tab .componentArea
{
	border: 1px solid #cccccc;
	background-color: #ffffff;
	padding:10px ;
	color:#fff;
}


#content .tab td.active
{
/*border-top:5px solid #4681AA;*/
background-color:#7DAED1;
}

.contentButtonFooter{
	text-align: right;
}

#content iframe.sysadmin{
	border:1px solid #CCCCCC;
}


/*--OTHERS--*/
.inputButton{
    border: none;
    background-color: #181c4e;
    padding: 5px 10px;
    color: #FFF;
    font-family: inherit;
    font-size: 11px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
.inputButton:hover{
	background-color: rgba(192,58,43,0.75);
    color: #181c4e;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
#content.lov{
	position: static !important;
}
.notification{
	position: fixed;
	right: 15px;
}
.notificationInfo{
   padding: 10px;
   background-color: #C9FFC7;
   border-bottom: 2px solid #A6D8A1;
}
.notificationError{
	padding: 10px;
	background-color: #FFC7C7;
	border-bottom: 2px solid #DA9A9A;
}
#bottom{
	clear: both;
}
#footer{
    width: 100%;
    text-align: center;
    color: #ffffff;
    margin: 10px 0;
    font-size: 10px;
    padding-bottom: 20px;

}
#pageProperties{
    border-bottom: 1px dotted #fff;
    padding: 5px;
    text-align: right;
    color: #fff;
    display: none;
}
#hide-header{
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
}
#languageSelector{
	display: inline-block;
	padding: 0 10px;
}
#languageName{
	font-size: 7pt;
	margin-right: 5px;
}
#languageName:hover{
	cursor: pointer;
	text-decoration: underline;
}
#languageSelector img{
	vertical-align: middle;
}
#zoomSelector{
	display: inline-block;
	padding: 0 10px;
}

.tableContent .labelNote{
	font-family:"Trebuchet MS", Verdana, Arial;
	font-size: 10px;
	color:blue;
}

.tableContent .labelMandatory{
	font-family:"Trebuchet MS", Verdana, Arial;
	font-size: 10px;
	color:red;
	vertical-align:top;
}

/* ================================================================================= */

/*REPORT*/
#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img {vertical-align:middle; }
#report ul {width:100%;}
#report li {padding:10px;width:100%;}
#report th { background:#3B6C8E; color:#fff; padding:7px 15px; text-align:left;}
#report td { background:#FFF none repeat-x scroll center left;border:1px solid #8cbae8; }
#report tr.odd td { background:#FFF;border-bottom:1px solid #CCC; cursor:pointer;padding:7px; }
#report div.arrow { background:transparent url(../../img/icon/arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}
#report .tableContents{ border:0px solid none;padding:4px;}
#report .textBold{    
	color: #5c5c5c;
	font-weight: bold;
	text-align: left;
	text-transform: uppercase;
}
.Table
{
	display: table;
	width : 100%;
}
.Title
{
	display: table-caption;
	text-align: center;
	font-weight: bold;
	font-size: larger;
}
.Heading
{
	display: table-row;
	font-weight: bold;
	text-align: center;
}
.Row{
	display: table-row;
	width:100%;
}
.Cell
{
	display: table-cell;
	border: none;
	border-width: thin;
	padding: 6px 5px 6px 5px;
}

.alignText{
	text-align:right;
}

.controlPanel {
    background-color: #e6e6e6;
    height: 28px;
    padding-bottom: 0;
    padding-left: 10px;
    padding-right: 3px;
    padding-top: 3px;
}

#exportas td {
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #aaa;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
}

#popupSave, #showQuery{
width:100%;
height:100%;
/*opacity:.95;*/
top:0;
left:0;
display:none;
position:fixed;
/*background-color:#313131;*/
overflow:auto
}
img#close {
position:absolute;
right:-14px;
top:-14px;
cursor:pointer
}
div#popupForm, div#popupQuery{
position:fixed;
left:40%;
top:40%;
/*margin-left:-150px;*/
max-width:300px;
min-width:250px;
padding:10px 50px;
border:2px solid gray;
border-radius:5px;
background-color:#fff
}

#popupForm  h2, #popupQuery h2 {
background-color:#608eb3;
padding:10px 35px;
margin:-10px -50px;
text-align:center;
border-radius:3px 3px 0 0
}
#popupForm hr, #popupQuery hr {
margin:10px -50px;
border:0;
border-top:1px solid #ccc;
color : #fff;
}

/* ================================================================================= */

div#topTime > div {
    color: #181c4e !important;
}
div#topTime > div:hover{
    color: white !important;
}
.profileLabel {
    font-size: 11px;
    font-weight: bold;
    color: #382829;
}
.profileValue {
    font-size: 11px;
    font-weight: Normal;
    color: #181c4e;
}
.profileTextBlock {
    padding-top: 5px;
}
ul.menuLevel2 a.hasChild:hover {
    color: #181c4e;
    padding-left: 51px;
    background: rgba(192,58,43,0.75);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 30px 7px;
    background-image: url('images/icon_default_folder.png');
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
.topMenuDiv:hover .topIcon {
    background-image: url('images/top_icons_2.png');
}