/* =================================================================================================
	Autocomplete
   ============================================================================================== */
body .ui-fluid .ui-autocomplete .ui-autocomplete-input.ui-autocomplete-dd-input {
    width: calc(100% - 2.243em);
}

body .ui-autocomplete .ui-autocomplete-multiple-container .ui-autocomplete-token {
	margin-bottom: 1px;
}

/* =================================================================================================
	Button
   ============================================================================================== */
body .ui-button {
    margin-right: 1px;
}

/* =================================================================================================
	Checkbox
   ============================================================================================== */

body .ui-chkbox .ui-chkbox-box{
	background:#fff;
	border:1px solid #d3d3d3;
}

body .ui-chkbox {
    width: auto;
}

body .ui-chkbox .ui-chkbox-box{
   margin-right: 5px;
}

/* =================================================================================================
	Containers
   ============================================================================================== */
.Container100{ width:100%;  float:left;}
.Container96{ width:96%;  float:left;}
.Container90{ width:90%;  float:left;}
.Container85{ width:85%;  float:left;}
.Container80{ width:80%;  float:left;}
.Container75{ width:75%;  float:left;}
.Container70{ width:70%;  float:left;}
.Container60{ width:60%;  float:left;}
.Container50{ width:50%;  float:left;}
.Container40{ width:40%;  float:left;}
.Container33{ width:33.3%;  float:left;}
.Container30{ width:30%;  float:left;}
.Container25{ width:25%;  float:left;}
.Container20{ width:20%;  float:left;}
.Container10{ width:10%;  float:left;}
.Container5{ width:5%;  float:left;}

/* =================================================================================================
	Datatable
   ============================================================================================== */

body .ui-datatable .ui-datatable-footer{
	border: 1px solid #e0e0e0;
	border-top: 0;
	background-color: transparent;
	color: unset;
}

body .ui-datatable thead th{
	padding: 10px;
	box-sizing: content-box;
}

body .ui-datatable .ui-datatable-data > tr > td{
	padding: 6px 10px;
}

body .ui-datatable .ui-paginator.ui-paginator-bottom {
    padding: 5px 0px 5px 0px;
}

.ui-datatable .ui-column-filter{
	display:inline-block !important;
	margin-left:5px !important;
}

.ui-datatable-empty-message{
	text-align: center;
}

@media (max-width: 640px){
	.ui-datatable.ui-datatable-reflow td{
		width: 100% !important;
		text-align: left !important;
	}
}

/* =================================================================================================
	Datepicker-calendar
   ============================================================================================== */

body .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a{
	background-color: #bdbdbd;
}

/* =================================================================================================
	Display
   ============================================================================================== */
.DispBlock{ display:block;}
.DispTable{ display:table; vertical-align:middle;}
.DispTableCell{ display:table-cell; vertical-align:middle;}
.DispNone{ display:none;}
.DispInlBlock{display:inline-block;}

/* =================================================================================================
	Fileupload
   ============================================================================================== */

body .ui-fileupload .ui-fileupload-buttonbar{
	border: none;
	background-color: transparent;
	padding: 0px;
}

body .ui-fileupload .ui-fileupload-content{
	border: none;
}

body .ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-state-disabled {
    display: table;
}

/* =================================================================================================
	Font Awesome Icon
   ============================================================================================== */
.fa.red {
    color: #CE2246;
}

.fa.orange {
    color: #FBB040;
}

/* =================================================================================================
	Font Size
   ============================================================================================== */
.Fs9{font-size:9px !important;} 
.Fs10{font-size:10px !important;} 
.Fs11{font-size:11px !important;} 
.Fs12{font-size:12px !important;} 
.Fs13{font-size:13px !important;} 
.Fs14{font-size:13px !important;} 
.Fs15{font-size:14px !important;} 
.Fs16{font-size:15px !important;} 
.Fs17{font-size:16px !important;} 
.Fs18{font-size:16px !important;} 
.Fs19{font-size:16px !important;} 
.Fs20{font-size:18px !important;} 
.Fs21{font-size:18px !important;} 
.Fs22{font-size:20px !important;} 
.Fs23{font-size:20px !important;} 
.Fs24{font-size:22px !important;} 
.Fs25{font-size:22px !important;} 
.Fs26{font-size:24px !important;} 
.Fs27{font-size:24px !important;} 
.Fs28{font-size:26px !important;} 
.Fs29{font-size:26px !important;} 
.Fs30{font-size:28px !important;}
.Fs40{font-size:30px !important;}
.Fs50{font-size:35px !important;}
.Fs60{font-size:40px !important;}
.Fs100{font-size:60px !important;}
.Fs130{font-size:70px !important;}

@media (min-width:481px) and (max-width: 767px) {	
	.Fs12{font-size:12px !important;} 
	.Fs13{font-size:12px !important;} 
	.Fs14{font-size:13px !important;} 
	.Fs15{font-size:13px !important;} 
	.Fs16{font-size:13px !important;} 
	.Fs17{font-size:14px !important;} 
	.Fs18{font-size:15px !important;} 
	.Fs19{font-size:17px !important;} 
	.Fs20{font-size:17px !important;} 
	.Fs21{font-size:18px !important;} 
	.Fs22{font-size:18px !important;} 
	.Fs23{font-size:20px !important;} 
	.Fs24{font-size:21px !important;} 
	.Fs25{font-size:22px !important;} 
	.Fs26{font-size:23px !important;} 
	.Fs27{font-size:23px !important;} 
	.Fs28{font-size:25px !important;} 
	.Fs29{font-size:25px !important;} 
	.Fs30{font-size:26px !important;}
	.Fs40{font-size:30px !important;}
	.Fs50{font-size:32px !important;}
	.Fs60{font-size:35px !important;}
	.Fs100{font-size:40px !important;}
	.Fs130{font-size:50px !important;}	
}

@media (min-width:320px) and (max-width: 480px) {
	.Fs12{font-size:12px !important;} 
	.Fs13{font-size:12px !important;} 
	.Fs14{font-size:13px !important;} 
	.Fs15{font-size:13px !important;} 
	.Fs16{font-size:13px !important;} 
	.Fs17{font-size:14px !important;} 
	.Fs18{font-size:15px !important;} 
	.Fs19{font-size:17px !important;} 
	.Fs20{font-size:17px !important;} 
	.Fs21{font-size:18px !important;} 
	.Fs22{font-size:18px !important;} 
	.Fs23{font-size:20px !important;} 
	.Fs24{font-size:21px !important;} 
	.Fs25{font-size:22px !important;} 
	.Fs26{font-size:23px !important;} 
	.Fs27{font-size:23px !important;} 
	.Fs28{font-size:25px !important;} 
	.Fs29{font-size:25px !important;} 
	.Fs30{font-size:25px !important;}
	.Fs40{font-size:28px !important;}
	.Fs50{font-size:30px !important;}
	.Fs60{font-size:32px !important;}
	.Fs100{font-size:35px !important;}
	.Fs130{font-size:40px !important;}
}


/* =================================================================================================
	Font Color
   ============================================================================================== */
.grayblue{color:#A7B8C1;}
.red{color:#CE2246;}
.navyblue{color:#003D50;}
.softgray{color:#E8E8E8;}
.white{color:#ffffff;}
.blue{color:#1C75BC;}
.orange{color:#FBB040;}
.green{color:#2BB673;}
.leaden{color:#778D9B;}

/* =================================================================================================
	Floating
   ============================================================================================== */
.Fleft{ float:left;}
.Fright{ float:right;}
.Fnone{ float:none !important;}


/* =================================================================================================
	Inputfield
   ============================================================================================== */

body .ui-inputfield{
	background:#fff;
	border:1px solid #d3d3d3;
}

/* =================================================================================================
	Inputfield Disable
   ============================================================================================== */

.ui-state-disabled .ui-inputfield,.ui-inputfield.ui-state-disabled {
	background-color:#dedede;
	color: #000;
}

/* =================================================================================================
	Margins
   ============================================================================================== */
.MarTopPerc5{ margin-top:5%;}
.MarTopPerc10{ margin-top:10%;}
.MarTopPerc20{ margin-top:20%;}
.MarTopPerc30{ margin-top:30%;}
.MarTopPerc40{ margin-top:40%;}
.MarTopPerc50{ margin-top:50%;}

.MarAuto{ margin-left:auto; margin-right:auto;}

.MarTop5{ margin-top:5px;}
.MarTop10{ margin-top:10px;}
.MarTop20{ margin-top:20px;}
.MarTop30{ margin-top:30px;}
.MarTop40{ margin-top:40px;}
.MarTop50{ margin-top:50px;}

.MarTopQuarter{ margin-top:25%;}
.MarTopHalf{ margin-top:50%;}

.MarBot10{ margin-bottom:10px !important;}
.MarRight10{ margin-right:10px !important;}
.MarRight20{ margin-right:20px !important;}

/* =================================================================================================
	Menu
   ============================================================================================== */

@media screen and (min-width: 897px) and (max-width: 1366px){
	
	.layout-wrapper.layout-horizontal .layout-menu-container .layout-menu > li > a  {
		padding: 8px 5px;
	}
}

@media screen and (min-width: 897px) and (max-width: 1300px){
	
	.layout-wrapper.layout-horizontal .layout-menu-container .layout-menu > li > a  {
		font-size: 13px;
	}
	
	.layout-wrapper.layout-horizontal .layout-menu-container .layout-menu > li > ul > li a {
	    font-size: 13px;
	}
}

/* =================================================================================================
	Message
   ============================================================================================== */
/* Fix close button disappear */
body .ui-messages .ui-messages-close:before {
    display: block !important;
}

/* =================================================================================================
	Output Label
   ============================================================================================== */

.ui-outputlabel, .ui-selectmanycheckbox label, .ui-selectoneradio label {
	line-height: 30px;
}

span.ui-outputlabel-rfi {
    color: #ff0000 !important;
}

/* =================================================================================================
	Overflows
   ============================================================================================== */
.OvHidden{ overflow:hidden;}
.OvScroll{ overflow:scroll;}
.OvAuto{ overflow:auto;}
.OvVisible{ overflow:visible;}
.OvXScroll{ overflow-x:scroll;}
.OvYScroll{ overflow-y:scroll;}
.OvXHidden{ overflow-x:hidden;}
.OvYHidden{ overflow-y:hidden;}

/* =================================================================================================
	Position
   ============================================================================================== */
.PosFixed{position:fixed;}
.PosAbsolute{position:absolute;}
.PosRelative{ position:relative;}
.PosStatic{position:static;}


/* =================================================================================================
	Radio
   ============================================================================================== */

body .ui-radiobutton .ui-radiobutton-box{
	background:#fff;
	border:1px solid #d3d3d3;
}

/* =================================================================================================
	seperator line
   ============================================================================================== */
.Seperator {
	border-bottom: solid 1px #003D50;
	width: 100%;
	overflow: hidden;
	height: 0px;
	margin: 7px 0px 15px 0px;
	float: left;
}

.SeperatorWhite {
	border-bottom: solid 1px #ffffff;
	width: 100%;
	overflow: hidden;
	height: 0px;
	margin: 15px 0px;
	float: left;
}

/* =================================================================================================
	Text Aligns
   ============================================================================================== */
.TexAlCenter{ text-align:center;}
.TexAlLeft{ text-align:left;}
.TexAlRight{ text-align:right !important;}

/* =================================================================================================
	Toolbar
   ============================================================================================== */
body .ui-toolbar {
	margin-top: 10px;
	border: 1px solid #e0e0e0;
    background-color: #ffffff;
	padding: 7px;
}

body .fixed-bottom{
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	width: calc(100% - 40px);
	z-index: 999;
}