* {
  font-family: Arial, Helvetica, PMingLiU, MingLiU_HKSCS, sans-serif;
}

body {
  font-size:0.935em;
}

h1, h2, h3, h4, h5, h6 {	
	font-size: 0.935em;
	font-weight: bold;
	margin-bottom: 0;
	margin-top: 0;
}

.mainheader2 {
	color: #cc4c02;
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: 0;
	margin-top: 0;
}

a span:hover {
    text-decoration: underline;
}

[role=button] {
  cursor: pointer;
}

button {
	border: 0;
}


button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}
.hidden {
  display:none;  
}
.important {
  color: #CC0000;
}

em {
  font-weight: bold;
  font-style: normal;
}

a {
  color:#003399;
/*  font-weight:normal;*/
  text-decoration:none;
}

a:hover {
  text-decoration: underline;
}

.restricted {
  color: #c00;
  padding-left: 5px;
  margin: 10px 0;
}

#Language button {
    color: #754C28;
    text-decoration: none;
    padding: 0;
}

#Language button span {
	padding-right: 7px;
	padding-left: 7px;
	border-right: 1px solid #744c28
}

#SignOut {
	color: #00a;
}

#Header .welcome {
  color: #008000;
}

#Header button {
  font-size: 15px;
}
#Header button:hover {
  text-decoration: underline;
}
#Header button {
  background: transparent;
}


#hidden_action_ {
  position: absolute; 
  left: -100; 
  top: -100; 
  width: 0px; 
  height: 0px; 
  border: 0px;  
}


.submit-button {
  border: 0 none;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

#MainMenu .menuItem.disabled span {
  color: #A0A0A0;
  font-weight: bold;
  text-decoration: none;
  padding: 7px 13px 7px 10px;
  border: 1px solid #D0D0D0;
  display: block;
  width: 100%;
  cursor: not-allowed;
}

#MainMenu {
  text-align:left;
  background-color: #fff;
  margin-bottom:1px;
  width: 100%;
}

.menuItem {
  background-color: #fff;
  margin-bottom:1px;
  border-bottom: 1px #fff solid;
  width: 100%;
}

#MainMenu .menuItemSelectedGroup {
  border:1px solid #E8E3CD;  
  margin-bottom:5px;
  width: 100%;
}

#MainMenu .menuItem a.menuAnchor {
  color: #1A1A1A;
  font-weight:bold;  
  text-decoration: none;
  padding: 17px 17px 17px 17px; 
  border:1px solid #E8E3CD;
  width: 100%;
  display: block;
}

 #MainMenu .menuItem a.submenuAnchor {
  font-weight:bold;
  text-decoration: none;
  padding: 7px 11px 7px 10px; 
  border:1px solid #E8E3CD;
  width: 100%;
  min-height: 44px;
  display: block;
}

#MainMenu .menuItem  a.menuAnchor:hover, #MainMenu .menuItem  a.submenuAnchor:hover { 
/*#MainMenu .menuItem a:hover { */
  border:1px solid #E8E3CD;
}

#MainMenu .menuItem .menuItemImage {
  color: #1A1A1A;
  display: block;
  padding: 7px 11px 7px 10px; 
  border:1px solid #E8E3CD;
}

#MainMenu .menuItem .menuItemImage img {
  width: 112px;
}

#MainMenu .menuItemSelectedGroup a.menuAnchor, #MainMenu .menuItemSelectedGroup span.menuText {
  color: #1A1A1A;
  font-weight:bold;  
  text-decoration: none;
  padding: 7px 11px 7px 10px; 
  display:flex;
  width: 137px; 
  min-height: 44px;
  align-items: center;
}

#MainMenu .menuItemSelectedGroup a:hover {
}

#MainMenu .menuItemSelectedGroup .submenuItem a.submenuAnchor, #MainMenu .menuItemSelectedGroup .submenuItem span.submenuText {
  color: #4D4D4D;
  padding: 7px 11px 7px 10px; 
  width: 100%;
  font-weight:normal;
  min-height: 44px;
  display: flex;
  align-items: center;
}

#MainMenu .menuItemSelectedGroup .submenuItemSelected a.submenuAnchor, #MainMenu .menuItemSelectedGroup .submenuItemSelected span.submenuText {
  color: #FFFFFF;
  padding: 7px 11px 7px 10px; 
  width: 100%;
  font-weight:normal;
  min-height: 44px;
  display: flex;
  align-items: center;
}


#MainMenu .menuItemSelected {
  margin-bottom:5px;
  width: 100%;
}

#MainMenu .menuItemSelected a.menuAnchor, #MainMenu .menuItemSelected span.menuText { 
  font-weight:bold;  
  text-decoration: none;
  display: block;
  padding: 7px 11px 7px 10px; 
  border-left: 1px solid #cc4c02;
  border-left-width: 8px;
  display:flex;
  width: 100%;
  min-height: 44px;
  align-items: center; 
}

#MainMenu .menuItemSelected a.menuAnchor:hover { 
  border:1px solid #CCCCCC;
}

#MainMenu .menuItemSelected .menuItemImage {
  color: #1A1A1A;
  display: block;
  padding: 7px 11px 7px 10px; 
  border:1px solid #E8E3CD;
}

#MainMenu .menuItem .no-bottom-border a, #MainMenu .menuItem .no-bottom-border a:hover {
  border-bottom: none;
}

#Footer {
	font-size: 10pt;
}


#Footer a, #Footer a:active, #Footer a:link {
  color: #333333;
}

#Footer a:visited{
  color: #6B5B9A;
}

iframe.cover {
  z-index: 9000;
  opacity: 0.4;
  filter: alpha(opacity = 40);
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border: none;
  transition: none;
}

iframe.child {
  z-index: 9001;
  position: absolute;
  border: 1px Solid #666666;
  width: 0;
  height: 0;
}

.portletPanel .panelHeader, .portletPanel .panelFooter {
    color: #1A1A1A;
    padding-top: 7px;
    padding-right: 5px;
    padding-bottom: 10px;
    padding-left: 10px;
}

.portletPanel {
    border-bottom: 4px #cc4c02 solid;
}

.panelHeaderText {
  margin-left: 10px;
  padding-top: 10px;
}

/*** BUTTONS ***/
input.td {
}

input.th {
}

input.normalButton, button.normalButton {
  text-align: center;
  font-size:1em;
  cursor:pointer;
  height:44px;
  min-width: 70px;
  font-weight: bold;  
  margin: 0px;
  padding: 0 0.5em;
}

input.normalGridButton, button.normalGridButton {
  text-align: center;
  font-size:1em;
  cursor:pointer;
  height:30px;
  font-weight: bold;  
  margin: 0px;
  padding: 0px;
  width: 65px;  
  button-radius: 4px;
}

input.tiny {
  height: auto;
  width: 60px;
}

.ui-clickable {
  cursor: pointer;
}

a {
  cursor: pointer;
}

.ui-state-default {
  color: #4D4D4D;
  border: 1px solid #E8E8E8;
}

.ui-state-active {
  color: #FFFFFF;              
  border: none;        
}

input.grayButton {
  background: none repeat scroll 0 0 #F2F2F2;
  border: 1px solid #CCCCCC;
  color: #4D4D4D;
  cursor: pointer;
  font-weight: bold;
  width: auto;
  margin-right: 10px;
  margin-bottom: 10px;
  height: 44px;
}

input.ui-state-disabled {
  color: #CCCCCC;
}

/*** CONTENT ***/
#Content { 
  background-color:#ffffff;
}

#ContentHeaderCaption .main-caption-text {
  font-weight:bold;
  color:#4D4D4D;  
}

#ContentHeaderCaption .sub-caption {
  color:#FFFFFF;
}

#ContentHeaderCaption .mandatory-notice {
	color: #565656;
	font-size: 13px;
	align-self: center;
	margin-left: 0.5em;
  display: inline-block;
}

.mandatory-notice {
  color: #363636;
  font-size:13px;  
  display: inline-block;
}


/*** FORMS ***/

.noIcon img{
  display:none;
}

.static {
  color: #000000;
  opacity: 1;
}

textarea {
  font-family:Arial;
  font-size:12px;
}

.ui-widget-content {
  #border: 1px solid #3C7DBF;
}

input.calendar {
  cursor:pointer;
}

.MandatoryAsterisk {
  color:#cc0000;
  font-family:monospace;
  font-weight: normal;
}

.note {
  color:#565656;
  font-size:12px; 
}

.grid_note {
  font-size:11px;
}


/*** MODAL ***/
body.child .content-header {
  border-top:1px solid #999999 !important;
  border-bottom:1px solid #999999 !important;    
}

body.child .content-header-title-lc {
  border-left:1px solid #999999;
}

body.child .content-header-title-rc {
  border-right:1px solid #999999;
}

.child #msgDivContainer_ {
  background-color: #FFFFFF;
  #border-left:1px solid #999999;
  #border-right:1px solid #999999;
}

.child #Notice{
  color:#333333;
  border:1px solid #999999;
  font-weight:normal;
  background:WHITE !important;
}

/*** NOTICE ***/
#Notice{
  color:#333333;
  border-bottom:1px solid #999999;
  background:none;
  font-weight:normal;
  background:rgb(255,255,215);
}

#Note {
  color:#333333;
  font-weight:normal;
}

body.child #Note {
  border-left:1px solid #002470;
  border-right:1px solid #002470;
  background:WHITE;
}

body.child #Note {
  border-left:1px solid #999999;
  border-right:1px solid #999999;
}

body.child .portletPanel #Note {
  border-left:0px !important;
  border-right:0px !important;
}

body.child #Notice {
  border-bottom:none !important;
  border-top:none !important;  
}

body.child .noticeSection {
  color: #999999;
  font-size: 10px;
}

.ui-state-error-box {
  border:1px solid #CC0000;
}

.genError.error-link:hover {
	text-decoration: underline;
	cursor: pointer;
}

.ui-state-error-box .error {
  color:#CC0000;
  padding-left: 10px; 
  font-weight: bold;  
  line-height: 19px;
}

.ui-state-error-box ul {
  color:#CC0000;
}

#MESSAGE_ .info {
  color: #bf5829;
  border:1px solid #bf5829;
  font-weight: bold;  
  /*line-height: 19px;*/
}

#MESSAGE_ ul {
  margin-top: 5px;
  margin-bottom: 1em;
  padding-left: 2em;
}

body.child .portletPanel {
  #border-right:1px solid #999999 !important;
  #border-left:1px solid #999999 !important;
  #border-bottom:1px solid #999999 !important;
}




/*** CALENDAR ***/

div.calendar .ui-state-default, div.calendar .ui-widget-header {
  background: #A6D3FF;
  color: #333333;
}

div.calendar .ui-state-hover {
  background: #8ec7ff;
}

.calendar ui-state-default, .calendar ui-state-hover {
  border:none !important;  
}
/*** GRID ***/
#paging_PARENT_GRID a.BtnPrev, #paging_PARENT_GRID a.BtnNext {
  font-size:1em;
  background-color:#A74128;
  border:none;
  cursor:pointer;
  width:75px; 
  height: 1.5em;
  color:white;  
  padding: 2px;
}

#paging_PARENT_GRID a.BtnPrev:hover, #paging_PARENT_GRID a.BtnNext:hover {
  font-size:1em;
  background-color:#C15629;
  border:none;
  cursor:pointer;
  width:75px; 
  height: 1.5em;
  color:white;  
  padding: 2px;
}

div.grid_container {
}

body.child div.grid_container {

}

div.grid_container th {
  font-weight: bold;
  text-align: center;	
}

div.grid_container thead th {
  background: #666666;
  color:#FFFFFF;
}

.gridHeader {
  color:#333333;
}

.gridHeader .notitle a {
  color: #66ccff;
}
table.grid .left {
  text-align: left;
}

table.grid .right {
  text-align: right;
}

table.grid .center {
  text-align: center;
}

table.grid .image {
  text-align: center;
}

table.grid {
  font-size: 14px;
  border:1px solid #D9D9D9;
}

table.grid tr { 
  vertical-align: top;
}

table.grid tr.unread {
  font-weight: bold;
}

table.grid tr.odd {
  background-color: #ffffff !important;
}

table.grid tr.even {
  background-color: #f2f2f2 !important;
}

table.grid td.norows {
  background-color: white;
  text-align: center;
  color: #607B91;
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
}

table.grid td.norows a {
  color: #cc0000;
}

table.grid tr.norowsgrid td {
  text-align: center;
}

table.grid th {
  text-align: left;
  vertical-align: top;
  padding: 1px 1px 2px 2px;
}

table.grid th.first {
}

table.grid td.ui-widget-content, table.grid tr.ui-widget-content {
  background:none; 
  border:none;
}

.gridHeader .ui-state-default {
  background:none; 
  border:none;
}

table.grid th.last {
  border: none;
  padding-right: 2px;
}

table.grid th.tray {
  text-align: center;
}

table.grid th.sort {
  cursor: pointer;
  color: #0000ff;
}

table.grid th.sel {
  #border-left: 1px solid #7bb8ff;
  #color: white!important;
}

table.grid th span.desc {
  display: block;
  height: 11px;
  width: 15px;
  font-size: 10px;
  float: right !important;
}

table.grid th span.asc {
  display: block;
  height: 11px;
  width: 15px;
  font-size: 10px;
  float: right !important;
}

table.grid th a {
  text-decoration: none;
  color: Black;
}

table.grid th a:hover {
  text-decoration: underline;
}

table.grid td, table.grid tfoot th {
  padding: 2px 1px 1px 2px;
  border-top: 1px solid #D9D9D9;
}

table.grid td.last {
  border-right: none !important;
  padding-right: 2px;
}

table.grid a {
  text-decoration: none !important;
  color: #3366ff;
}

table.grid a:hover {
  text-decoration: underline !important;
}

table.grid th.nbr,table.grid td.nbr {
  border-right: none;
}

span.loading {
  font-family: Arial;
  color: #666666;
}

td.GridTitle {
  color: White;
  height: 26px;
  font-weight: bold;
  font-size: 14px;
}

/*** ALIGNMENTS ***/
.fright {
  position: relative;
  float: right;
  text-align:right;
  margin-right:10px;
  margin-top:8px;
}

.fleft { 
  position: relative;
  left: 0px;
  float: left;
}

xml {
  display:none;
}

fieldset {	
    border: 0;
    margin: 0;
}
    
.iamsmart-text {
  color: #2b7367;
}

.progressbar-wrapper {
      background: #fff;
      width: 100%;
      padding-top: 10px;
      padding-bottom: 5px;
}

.progressbar li {
      list-style-type: none;
      width: 50%;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      color: #7d7d7d;
}
.progressbar li:after {
    width: 40px;
    height: 40px;
    content: "";
    line-height: 40px;
    border: 2px solid #7d7d7d;
    display: block;
    text-align: center;
    margin: 10px auto 0px auto;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    background-color: #fff;
}
.progressbar li:before {
     width: 100%;
     height: 2px;
     content: '';
     position: absolute;
     background-color: #55b776;
     top: 44px;
     left: -50%;
     z-index: 0;
}
.progressbar li:first-child:before {
     content: none;
}
.progressbar li.active {
    color: #2b7367;
    font-weight: bold;  
}
.progressbar li.active:after {
    border-color: #2b7367;
    background: #2b7367;
 }

 .anchor-button {
   font-size: 15px;
   background:transparent;
   color: #00a;
}
 
.anchor-button:hover {
  text-decoration: underline;
}
 
.button-bar.in-panel {
    margin: 8px;
}
* {
  font-family: Arial, Helvetica, PMingLiU, MingLiU_HKSCS, sans-serif;
  transition: all .2s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
}

.inline-block {
	display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}


img {
  max-width: 100%;
}

#Header {
  background-color: #fff;
  padding-bottom: .5em;
  padding-top: 0em;
}

.header-button-panel .row {
	align-items: center
}

.headerBG{
	width: 200vw; 
	left: -100vw; 
	top:0em; 
	height: 9.5%; 
	min-height: 89.66px;
	float: left; 
	position:absolute; 
	z-index: -1; 
	background-color: #fff;
}

@media(min-width: 576px) {
  #Header {
    background-color: #fff;
    padding-top: 2em;
  }
  
}


@media(max-width: 575px) {
	ul, ol {
	  padding-left: 1em;
	  margin: 0;
	}
	
	
}

#Mainbody {
  margin: auto;
  max-width: 1040px;
  width: 100%;
}

.aria-invisible  {
	height: 0;
	position: absolute;
	left: -10000px;
}

.start-content-link {
  display: block;
  line-height:0;
  height: 0;
  overflow: hidden;
}


.list-item {
  display: flex;
  padding-bottom: 0.1em;
  width: 100%;
}
 
.list-item-number {
  width: 28px;
  flex: 0 0 auto;
}
 


/*** BANNER ***/
#Banner {   
  width:100%;
  font-size:20px;
  text-align:left; 
  margin-bottom: 8px;
  overflow: hidden;
	padding-top: 10px;
	padding-bottom: 10px;
}

#BannerMenuButton {
	  color: white;
    background-color: #f9a61a;
    border: none;
    height: 44px;
    width: 100%;
    font-size: 16pt;
}
#BannerMenuButton:hover {
  box-shadow: inset 0 0 100px 100px rgba(255, 255, 200, 0.2);	
}

body.sidepanel-shown #BannerMenuButton {
	display: none;
}

#Banner h1 {
  font-size: 15pt;
  font-weight: bold;
}

#Banner .logo-border {
  width:46px;
  min-height:44px;  
  background-color:#f9a61a;
  align-self: stretch;
}
      
#Banner .logo-icon {
  left: 67px;
}

#Banner .logo-icon img{
}

#Banner .site-header {
  left: 121px;
  flex: 1;
  display: flex;
  align-items: center;
}

#Banner .site-header-caption {
  color: #4D4D4D;
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

#Footer {
  padding-top: 25px;
}

.footer-link {
  text-align: center;
  line-height: 2em;
}

/*Sidepanel + Content */
div.nav-container {
  flex: 0 0 auto;
  z-index: 4000;
}
  
#SidePanelCover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, .6);
  z-index: 3000;
}

#SidePanelCover.sidepanel-hidden {
  display: none;
}

#SidePanelCover.side-panel-shown {
  display: auto;
}

.panelHeader h3, .panelHeader h2, .panelHeader h1, .panelHeader h4 {
    display: inline;
}
.menu-close-button {
  display: none;	
}

.content-container {
  background-color: #e9e9e9;
}

@media not all and (max-width: 991px) {
	nav {
    margin-top: 10px;
  }
}
@media (max-width: 991px) {
  body.sidepanel-shown {
    overflow: hidden;
  }
  
  .content-container {
	  display: block;
	}
  nav {
    max-height: calc(100vh - 50px);
    height: calc(100vh - 50px);
    margin-top: 50px;
    overflow-y: auto;
  }
  .menu-close-container {
		position: fixed;
		top: 0;
		overflow: auto;
		left: 0;
		background: white;
		display: block;
		z-index: 9999;
		width: 100%;
		height: 50px;
	}
  .sidepanel-shown .menu-close-container {
    display: block;
  }
  .sidepanel-hidden .menu-close-container {
    display: none;
  }
  .menu-close-button {
    display: initial;
	  color: white;
		background-color: #F5A61C;
		border: none;
		height: 44px;
		width: 46px;
		padding-top: 3px;
		font-size: 16pt;
  }
  
  #SidePanel.sidepanel-shown {
    transform: translateX(0);
  }
  #SidePanel.sidepanel-hidden {
    transform: translateX(-100%);
  }
    
  #SidePanel {
    min-width: 190px;
    width: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    overflow-y: hidden;
    overflow-x: hidden;
  }
  
  #Panel {
    background-color: #e9e9e9;
    width: 100%;
  }
  
}

@media (min-width: 992px) {
	.menu-close-container {
	  display: none;
	}
	
  .content-container {
    display: flex;
  }
	
  div.nav-container {
    width: 265px;
    background: #fff;
  }
  
  #BannerMenuButton {
    display: none;
  }
  
  #SidePanelCover {
    display: none;
  }
}


#Content {
  padding-bottom: 5px;
}

#Panel {
  background-color: #e9e9e9;
  width: auto;
  flex: 1;
}

.panel-item, .msgContainer {
  margin: 8px;
  flex: 1;
}

.group-row .panel-item{
	margin-left: 0px;
	margin-right: 0px;
}

.group-row  {
  display: flex;
  padding: 7px 10px 10px;
  flex-wrap: wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.group-col {
	flex: 1 0 1%;
}

.group-col.col-auto {
	flex: 0 0 auto;
}

.group-col p:first-child {
  margin-top: 0;
}
.group-col p:last-child {
  margin-bottom: 0;
}

#ContentHeaderCaption {
  display: flex;
  margin: 8px;
  flex-wrap: wrap;
  border: 1px solid  #ccc;
}

.sub-caption {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  width: auto;
  align-items: center;
  padding: .5em .7em;
}

.main-caption {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 0;
  width: auto;
  align-items: center;
  padding-left: 12px;
  min-height: 1px;
}

@media (max-width:375px) {
  
}

.group-row > p {
  flex: 0 0 auto;
  width: 100%;
}

.button-bar {
  display: flex;
  justify-content: flex-end;
}

.btninpanel {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	row-gap: 4px;
}

.btninpanel > * {
	margin-left: 4px;
}

.button-wrapper {
	display: flex;
}

@media (max-width:575px) {
	.button-wrapper {
	  flex: 1;
	}
	.btninpanel > * {
    margin-left: 0px;
  }
  
  .btninpanel {
    gap: 4px;
  }
	
	input.normalButton {
	  flex: 1;
	  height: 42px;
	}
	
  input[type=button] {
	  font-size: 12pt;
		min-height: 40px;
		min-width: 60px;
  }
}

.backToTop {
  padding: 0 10px;
  text-align: right;
  justify-content: flex-end;
  align-items: center;
  min-height: 44px;
}

/* MESSAGE */
.ui-state-error-box .error {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

#MESSAGE_ {
  word-break: break-word;
}

select {
	text-overflow:ellipsis;
	overflow: hidden;
}

select.full-width {
	width: 100%;
	flex: 0 0 100%;
}

.data-item-lookup {
	width: 100%;
}

input[type=text][size="48"],  input[type=password][size="48"]{
  max-width: 360px;
  width: 100%;
}

input[type=text][size="40"], input[type=password][size="40"] {
  max-width: 300px;
  width: 100%;
}

input[type=text][size="64"], input[type=password][size="64"] {	
	max-width: 471px;
	width: 100%;
}

input[type=text][size="50"], input[type=password][size="50"] {
  max-width: 360px;
  width: 100%;
}

input[type=text][size="30"], input[type=password][size="30"] {
  max-width: 233px;
  width: 100%;
}
input[type=text][size="32"], input[type=password][size="32"] {
  max-width: 245px;
  width: 100%;
}
input[type=text][size="25"], input[type=password][size="25"] {
  max-width: 200px;
  width: 100%;
}


/** FORMS **/

button.calendar {
	padding: 0;
	height: 23px;
  align-self: center;
  margin-left: 3px;
}

.input-group.no-break-between-options {
	display: flex;
	flex-wrap: wrap;
}

.date-tag {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.date-tag .note {
	padding-left: 4px;
}

.rangeContainer > div{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.group-row fieldset {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}  

.grid-paging {
	flex: 1;
}


.grid_container fieldset {
	min-width: 0px;
}

.group-row legend {
  float: left;
}  

@media (max-width: 575px) {
  .group-row fieldset legend {
    width: 100%;
    flex: 0 0 100%;
  }
}


@media  (max-width: 575px) {
  .isweb-ui.lbl {
    line-height: 1.5em;
    text-align: left;
  }
  
  input[type=text].ui-widget-content, select.ui-widget-content, input[type=password].ui-widget-content {
    height: 2em;
  }
  
  .group-col.label {
    width: 100%;
    flex: 0 0 auto;
    padding-right: 0px;
    text-align: left;
  }
  select {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .static {
    font-weight: bold;
  }
  
  .option-group-item {
    width: 100% !important;
    line-height: 1.5em;
  }
}



.data-item {
	display: inline-flex;
}


.tridateContainer {
  display: flex;
}

.tridateContainer .data-item.data-item-lookup {
    display: initial;
    width: auto;
}

.alert-img {
	display: none;
}

.alert-img.errorLbl {
	width: 16px;
	height: 14px;
	align-self: center;
	display: initial;
}

.group-col.label {
	flex: 0 0 auto;
	padding-right: 1em;
}

/** GRID **/

.grid-fieldset {
	min-width: 0px;
	display: block;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
}

.grid-pagination {
	display: flex;
	justify-content: flex-end;
	padding-bottom: 8px;
}

.grid-pagination > * {
  padding-left:6px;
}

.grid_container {
  flex: 0 0 auto;
  width: 100%;
}

.col-label {
  display: none;
}

tr.norowsgrid {
  flex: 0 0 100%;
}

tr.norowsgrid td {
	justify-content: center;
	text-align: center;
}

th, .col-value {
  word-break: initial;
}


.grid .note2 {
  margin-left: 5px;
}

button.img-button {
	background: transparent;
}

.grid button.img-button {
	background: transparent;
	height: 36px;
	padding: 0;
}

.note2 {
  display: inline-block;
	
}

@media  (max-width: 575px) {
	
	table {
	  display: block;
	  border: 0;
	  word-break: normal;
	  width: 100%;
	}
	
	.grid_container {
	  overflow: auto;
	}
	
  .grid_responsive tr {
    padding: 2px 8px;
  }
  
  .grid_responsive table.grid .left {
    text-align: left;
	}
	
	.grid_responsive table.grid .right {
	  text-align: left;
	}
	
	.grid_responsive table.grid .center {
	  text-align: left;
	}
	
	.grid_responsive table.grid .image {
	  text-align: left;
	}
	  

  .grid_responsive tr:not(:first-child) {
    
    border-top: 1px solid #d9d9d9 !important
  }

  .grid_responsive td {
    border: none !important;
    display: flex;
    flex-wrap: wrap;
  }

  .grid_responsive td .col-row {
    display : flex;
    flex-wrap: wrap;
    width: 100%;
    flex: 0 0 auto;
  }
  .grid_responsive td .col-label {
    width: 50%;
    font-weight: bold;
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .grid_responsive .col-row > *, td > *{
    flex: 1;
  }

 
  .grid_responsive table,  .grid_responsive tr, .grid_responsive tbody{
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 100%;
  }
  .grid_responsive td {
    width: 100%;
    text-align: left;
    flex: 0 0 auto;
  }
  
  .grid_responsive thead {
    display: none;
  }
}

@media (max-width: 360px) {
   .grid_responsive td .col-label {
     width: 100%;
     font-weight: bold;
     flex: 0 0 auto;
     display: flex;
   }
   .grid_responsive td .col-value {
	    width: 100%;
	    flex: 0 0 auto;
	    display: flex;
   }
   
   
   
}

@media (max-width: 575px) {
   .header-content {
     flex-direction: column-reverse;
   }
	
}


/*FOLDER TAG*/
.folder-toggle {
	background: transparent;
	width: 16px;
	padding: 0;
}


.grid_note {
	display: inline-block;
}


/* modal */
.modal .content-header {
	display: flex;
	margin-bottom: -8px;
}

.iframe-modal {
	box-shadow: rgb(0, 0, 0) 0px 0px 50px;
}



.portletPanel .panelHeader, .portletPanel .panelFooter {
  display: flex;
  flex-wrap: wrap;
}

@media (min-width: 992px) {
	.collapsible .collapse-icon {
	  display: none;
	  text-align:right;
	}
}

@media (max-width: 991px)  {
		
	.collapsible .collapse-icon button {
	  background-color: transparent;
	  color: #666;
	  font-weight: bold;
	}
	
	.collapsible .panelHeaderText {
	  flex: 1;
	}
	
	.collapsible .collBody {
		overflow: hidden;
	}
	
	.collapsible.collapsed .collBody {
		max-height: 0px !important;
	}

}

 
button.normalButton.iamsmart-button {
   background: #2b7367;  
   border-radius: 1em;
   color: #fff;
   font-family: 'Noto Sans SC', Arial, Helvetica, "Sans-serif";
   border: 0;
   padding: 1em;
   height: auto;
   display: inline-flex;
   align-items: center;
}
 
button.normalButton.iamsmart-button:hover {
 background-color: #2b7367dd;
}
    
button.normalButton.iamsmart-button  img {
  max-height: 20px;
}

button.normalButton.iamsmart-button .iamsmart-button-text {
  margin-left: 1em;
}

.text-negative {
  color: #CC0000;
}

.iamsmart-button-container {
  display: flex;
  justify-content: center;
  flex: 100%;
}

a.external-link:not(.image-link)::after, button.external-link::after {
  background-image: url('../../images/icons/external-window-icon.png');
  background-size: 12px;
  background-repeat: no-repeat;
  margin-left: 2px;
  content: "　";  
  display: inline-block;
  color: #0000;
  width: 12px;
  height: 12px;
  vertical-align: top;  
}


button.external-link::after {
	  background-image: url('../../images/icons/external-window-icon-white.png');
}

#ENS0109_BODY .content-header-title-rc button {
	background-color: white;
}