html,body {height:100%;margin:0px;padding:0px;color:#333333}

p, div {font-size:16px}
label, .control-label {font-size:14px}
p.fieldnote {font-size:12px}
a {color:#3333ff; text-decoration: none !important;}
a:hover, a:focus, a:active, a:visited {text-decoration: none !important;}

/* overwrite bootstrap */
.navbar-nav>li>a, .navbar-nav>.open>a, .navbar-nav>.open>a:hover, .navbar-nav>.open>a:focus,
.navbar .dropdown-menu>li>a, .navbar .dropdown-menu>li>a:focus {font-size:16px; font-weight:500;}
button.btn {padding:6px 18px}
.btn-group> .btn:not(:last-child) {border-right: solid 2px #FFF}
.has-error .control-label, .has-success .control-label {color:#000}
.datepicker td, .datepicker th{border-radius: 0;}
.datepicker thead tr:first-child th:hover, .datepicker td.day:hover{background-color: #33bacc;}
.datepicker-dropdown { z-index: 10000 !important;}
/* .datepicker td, .datepicker th { width: 30px !important; height: 30px !important } */
.panel-primary {border-color: #0072b3;}
.panel-primary > .panel-heading {background-color:#336e9b; border-color:#0072b3; color:#ffffff;}
.card{margin-bottom: 10px;}
.editable{font-size:14px; border: solid 1px #ccc; padding: 0 8px; width: 40px; margin-right: 8px;}
.editable:focus{background:#ccc; border: #aaa solid 1px;}
.confirm-edit, .reject-edit{color: #008CBA; padding-left: 5px}
.confirm-edit:hover, .reject-edit:hover{text-decoration: none;}
.has-error > select{border-color: #F04124;}
.has-error > input{border-color: #F04124;}
.has-error > textarea{border-color: #F04124;}
.form-control {font-size:16px;color:#000}
.form-inline{display:table-cell; }
.navbar-toggler-icon {}

/* dropdown sub menu --> using dropend for Bootstrap 5 */
.dropend {position:relative;}
@media (min-width: 1200px){
	.dropend:hover > .dropdown-menu {display: block;}
}
.dropend>.dropdown-menu {top:0;left:100%;margin-top:-6px;}
/* dropdown navbar collapse menu */
@media (max-width: 1199px){
	.navbar-collapse {
	  max-height: 350px;
	  overflow-y: auto;
	}
 }

/* tabs */
.nav-tabs>li>a {border:1px solid #bbb}
.nav-tabs>li>a.narrow {width:150px; height:70px}
.nav-tabs>li>a.medium {width:200px; height:70px}
.nav-tabs>li>a.active {background-color:#335d8e !important;color:#fff !important}
.nav-tabs>li.error {border-top:3px solid #f00}
.nav-tabs {border-bottom: 6px solid #335d8e;}

/* Detail forms */
.field-label {
	font-weight: bold;
	padding: 10px;
    border-top: solid #DDD 1px;
}
.field-value{
	padding: 10px;
    border-top: solid #DDD 1px;
}
.sub-header{
	display : flex;
  	align-items : center;
}

/* margins */
.mtop5 {margin-top:5px;}
.mtop10 {margin-top:10px;}
.mtop20 {margin-top:20px;}
.mtop30 {margin-top:30px;}
.mtop50 {margin-top:50px;}
.mbot5 {margin-bottom:5px;}
.mbot10 {margin-bottom:10px;}
.mbot20 {margin-bottom:20px;}
.mbot30 {margin-bottom:30px;}
.mbot50 {margin-bottom:50px;}
/* datetimepicker icon alignment for Bootstrap5 */
/* Per-page datetimepicker alignment/hide rules removed from global CSS.
   Apply page-specific styles in the JSPs as needed to avoid global overrides. */

.mleft5 {margin-left:5px;}
.mleft10 {margin-left:10px;}
.mleft20 {margin-left:20px;}
.mright5 {margin-right:5px;}
.mright10 {margin-right:10px;}

/* padding */
.pad2 {padding:2px;}
.pad5 {padding:5px;}
.pad10 {padding:10px;}
.pad20 {padding:20px;}
.padleft10 {padding-left:10px;}
.padleft20 {padding-left:20px;}
.padleft30 {padding-left:30px;}
.padleft50 {padding-left:50px;}
.padleft0 {padding-left:0px;}
.padright5 {padding-right:5px;}
.padright10 {padding-right:10px;}
.padright20 {padding-right:20px;}
.padright30 {padding-right:30px;}
.padtop10 {padding-top:10px;}
.padtop20 {padding-top:20px;}
.padbot10 {padding-bottom:10px;}
.padbot20 {padding-bottom:20px;}

/* rounding */
.rounded10 {border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-khtml-border-radius:10px;}
.rounded5, div#submenutext a {border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;}
.bordergray {border:1px solid #dadada}
.bordergray3 {border:3px solid #dadada}
.borderorange {border:1px solid #ffbd00}
.borderbottom {border-bottom:1px solid #dadada}

/* general layout and color */
.center {text-align:center;}
.left {text-align:left;}
.right {text-align:right;}
.white {color:#fff;}
.gray {color:#636363;}
.light-gray {color:#999999;}
.navy {color:#3366cc;}
.black {color:#000;}
.size8 {font-size: 8px;}
.size10 {font-size: 10px;}
.size12 {font-size: 12px;}
.size14 {font-size: 14px;line-height:16px;}
.size16 {font-size: 16px;line-height:18px;}
.size18 {font-size: 18px;line-height:20px;}
.size20 {font-size: 20px;line-height:22px;}
.size24 {font-size: 24px;line-height:1.5em;}
.size28 {font-size: 28px;line-height:1.5em;}
.size32 {font-size: 32px;}
.height20 {line-height: 20px;}
.height24 {line-height: 24px;}
.h40 {height:40px}
.w16 {width:16px}
.w100 {width:100px}
.w160 {width:160px}
.w250 {width:250px}
.bold {font-weight:bold}
.plain {font-weight:normal}
.italic {font-style:italic}
.hide {display:none}
.show {display:block}
.required {color:#dd1111; font-size:10px;}
.fullwidth {width:100%}
.maxwidth1k {max-width:1000px}
.maxwidth13 {max-width:1300px}
.up {color:#3f9066; font-weight:bold;}
.down {color:#9d3831; font-weight:bold;}
.animate {-webkit-transition:height 0.2s;-moz-transition:height 0.2s;transition:height 0.2s;}
.fieldnote {color:#8a8a8a;}
.ferrmsg {color:#ff3333;padding-left:10px;font-size:12px;display:none}
.block{display: block;}
.inline{display: inline;}
.inline-block{display:inline-block}

/* unified filter panel layout (applies to all pages using #qfilter/#filter_panel) */
#qfilter #filter_panel > .row {row-gap: 0.45rem;}
#qfilter #filter_panel .form-group.row {align-items: center; margin-bottom: 0;}
#qfilter #filter_panel .form-group.row label {margin-bottom: 0;}
#qfilter #filter_panel .ferrmsg {display: block; width: 100%; margin-top: 0.25rem;}
#qfilter #filter_panel .form-control,
#qfilter #filter_panel .input-group {max-width: 100%;}
#qfilter #filter_panel .btn {margin-right: 0.5rem;}

/* optional spacious mode for pages that need looser row spacing */
#page-filter-div.spacious-filter #qfilter #filter_panel > .row {row-gap: 0.9rem;}

/* compact-plus mode for pages that need a bit more spacing but still tight */
#page-filter-div.tight-gap-filter #qfilter #filter_panel > .row {row-gap: 0.45rem;}


/* keep summary label/input on one line where this helper class is used */
#qfilter #filter_panel .ticket-summary-row {flex-wrap: nowrap;}
#qfilter #filter_panel .ticket-summary-row > label {flex: 0 0 33.3333%; max-width: 33.3333%;}
#qfilter #filter_panel .ticket-summary-row > .col-md-8 {flex: 0 0 66.6667%; max-width: 66.6667%; min-width: 0; padding-right: 0.5rem;}
#qfilter #filter_panel .ticket-summary-row #search-summary {width: 98%;}

/* datepicker wrapper/icon alignment for legacy input-group markup */
#qfilter #filter_panel .input-group.date.datepicker {
	display: flex;
	align-items: stretch;
	padding: 0;
}
#qfilter #filter_panel .input-group.date.datepicker > .form-control {
	flex: 1 1 auto;
	width: 1%;
	height: calc(1.5em + 0.75rem + 2px);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
#qfilter #filter_panel .input-group.date.datepicker > .input-group-text {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: calc(1.5em + 0.75rem + 2px);
	min-width: 2.4rem;
	padding: 0 0.75rem !important;
	line-height: 1 !important;
	margin-left: -1px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

@media (max-width: 767.98px) {
	#qfilter #filter_panel .ticket-summary-row {flex-wrap: wrap;}
	#qfilter #filter_panel .ticket-summary-row > label,
	#qfilter #filter_panel .ticket-summary-row > .col-md-8 {flex: 0 0 100%; max-width: 100%; padding-right: 0;}
	#qfilter #filter_panel .ticket-summary-row #search-summary {width: 100%;}
	#qfilter #filter_panel .form-group.row label {margin-bottom: 0.35rem;}
	#qfilter #filter_panel .btn {margin-bottom: 0.5rem;}
}

/* background colors */
.bgblue {background-color: #ebf2f9}
.bggray {background-color: #f2f2f2}
.bgnavy {background-color:#3366cc;}
.bgred {background-color:#dc3912;}
.bgyellow {background:#ffffdd;}
.bggreen {background-color:#e2fadc;}
.bg-info-light {background-color: #e4f8fb !important;}
table th.bg-info-light {background-color: #e4f8fb !important; -webkit-print-color-adjust: exact; color-adjust: exact;}
.table th.bg-info-light {background-color: #e4f8fb !important;}
table.table th.bg-info-light {background-color: #e4f8fb !important;}
thead th.bg-info-light {background-color: #e4f8fb !important;}

.bg-warning-light {background-color: #fff7de !important;}
th.bg-warning-light {background-color: #fff7de !important}
.bg-secondary-light {background-color: #ececec !important;}
th.bg-secondary-light {background-color: #ececec !important}
.bg-danger-light {background-color: #ffebed !important;}
th.bg-danger-light {background-color: #ffebed !important}
.bg-success-light {background-color: #e4f7e8 !important;}
th.bg-success-light {background-color: #e4f7e8 !important}

/* floating */
.floatleft {float:left}
.floatright {float:right}
.clear {clear:both}

/* box and border */
.box {border:1px solid #e8eeff; background:#f6ffff;}
.boxgray {border:1px solid #ccc}
.table-nested td, .table-nested th {border:none; padding: 0}
.field-last-row {border-bottom: 1px solid #DDD}

/* overflow */
.div-scroll-x {overflow-x: auto}

/* side bar */
.sidebar-left {padding:0 2px 8px 0;vertical-align:top}
.body-container {padding:8px 6px 8px 12px}
.body-container-center50 {padding:8px 6px 8px 12px;width:50%; margin:0 auto}
.center50 {width:50%; margin:0 auto}

/* tooltip */
.tooltip-navy + .tooltip > .tooltip-inner {background-color: #335d8e;}
.tooltip-navy + .tooltip > .tooltip-arrow {border-bottom-color: #335d8e;border-top-color: #335d8e;}

/* popover links */
.popover a { text-decoration: none !important; color: inherit; }

/* flex */
.flex {display:flex}
.fj-between {justify-content:space-between}
.fa-end {align-items: flex-end}
.fa-baseline {align-items: baseline}
.fa-center {align-items: center}

/* tags */
.label{border-radius: 2px; font-size:14px; font-weight:normal}
.label-info { background-color: #C7EFFF; border: solid #abc 1px;}
.label-info-action { background-color: #FFFBBF; border: solid #abc 1px;}
.label-suggestion { background-color: #95ff98; border: solid #abc 1px;}
.tags {padding: 4px 6px;color: #555;border-radius: 4px;max-width: 100%;}
.tags .tag {margin-right: 5px; margin-bottom: 5px;color: #333; float:left;padding:3px;}
.remove-tag { color: #aaa; margin-left: 10px;cursor: pointer;font-weight: bold;}
.remove-tag:after {content: "x";padding: 0px 2px;}
.remove-tag:hover {text-decoration: none;}
.suggestion-tag { color: #aaa; margin-left: 10px;cursor: pointer;font-weight: bold;}
.suggestion-tag:after {content: "✔";padding: 0px 2px;}
.suggestion-tag:hover {text-decoration: none;}

.btn-circle {width:30px;height:30px;text-align:center;padding:6px 0;font-size:12px;line-height:1.428;border-radius:15px;}
.btn-circle .btn-lg {width:50px;height:50px;padding:10px 16px;font-size:18px;line-height:1.33;border-radius:25px;}
.btn-circle .btn-exlg {width:100px;height:100px;padding:10px 16px;font-size:18px;line-height:1.33;border-radius:25px;}

.label-as-badge {border-radius: 1em;}

/* auto-complete */
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 5px 5px; white-space: nowrap; overflow: hidden;}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: bold; color: #3399FF; }

/* file upload button css */
.btn-file {
	position: relative;
	overflow: hidden;
}
.btn-file input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 100%;
	min-height: 100%;
	font-size: 100px;
	text-align: right;
	filter: alpha(opacity=0);
	opacity: 0;
	outline: none;
	background: white;
	cursor: inherit;
	display: block;
}

/* Responsive */
@media(max-width:1495px) {
	#conversion_ratio{display:block; margin-top:15px; margin-left: 40px;}
	.nav-item .fa{display:none}
}
@media(max-width:990px) {
	#conversion_ratio{margin-top:10px; margin-left: 0px; width:auto;}
	.div-scroll-x-small{overflow-x: scroll}
}
@media (max-width: 400px){ 
/* 	#alert-bar-div {width: 50px; overflow-x: scroll} */
	.hint-popup{width: 100% !important; overflow-x: scroll}
}
#body-overlay{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.5;
	z-index: 10;
}

/* datatable */
.dataTables_wrapper .dataTables_filter input {padding:2px;font-size:16px;width:300px;font-weight:normal}
.dataTables_wrapper .dataTables_filter {float:left !important;text-align:left !important;} 
.dataTables_wrapper .dataTables_length {float:right !important;}
.dataTables_wrapper .dataTables_length label {font-size:16px;font-weight:normal}

/* No access blinking */
.blinking{
	animation:blinkingText 1.2s infinite;
}
@keyframes blinkingText{
	0%{	color: #FF0000;}
	49%{ color: #FF0000;}
	50%{ color: transparent;}
	99%{ color: transparent;}
	100%{ color: #FF0000;}
}