﻿/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
*
{
    -webkit-text-size-adjust:none;
    margin: 0;
    padding: 0;
}
a
{
    color: #045faa;
    text-decoration: underline;
    cursor: pointer;
}
a:active { color: #FF0000; }
a.siteUrl { color: #045faa !important; }
a.siteUrl:active { color: #FF0000 !important; }
html, /*body,*/ /*#page,*/ #printpage {
    height: 100%;
}
body
{
    background: url("images/header_gradient.png") repeat-x scroll left top #FFFFFF;
    font-family: myriad,arial,helvetica,sans-serif;
    font-size: 8pt;
	/*-----------------------------------------------
	BEG SR013654 - AES - Video Link for TRN
	-----------------------------------------------*/
    line-height: 1.3;
	/*-----------------------------------------------
	END SR013654 - AES - Video Link for TRN
	-----------------------------------------------*/	
}

.unstyle
{
    visibility:hidden;
    /* using display: none in IE8 will cause bug when expand/collapse accordion*/
    /*display: none;*/ 
}
h1 {font-size:300%;}
h2 {font-size:260%;}
h3 {font-size:220%;}
h4 {font-size:180%;}
h5 {font-size:140%;}
h6 {font-size:100%;}
h5.Blue {
    color: #045faa;
}
/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/
/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
#page
{
    /*margin: 0 auto 60px auto;*/
    margin: 0 auto;
    max-width: 1600px;
    min-width: 960px;
    padding: 0 10px;
    width: auto;
}
#printpage
{
    margin: 0 auto 60px auto;
    min-width: 960px;
    max-width: 2200px;
    padding: 0 10px;
    width: auto;
}
/*----------------------------------------------------------
Top Menu
----------------------------------------------------------*/
ul#topMenu, table#topMenu td
{
    font-size: 12px;
    padding: 3px;
    text-align: right;
    list-style: none outside none;
    margin: 0;
    
}
ul#topMenu li, table#topMenu td
{
    border-right: 1px solid #FFFFFF;
    color: #FFFFFF;
    display: inline;
    padding: 0 10px;
}
ul#topMenu li a, #footer, #footer a, table#topMenu td a, #footer_high, #footer_high a
{
    color: #FFFFFF;
    font-size: 11px;
}
ul#topMenu li a, table#topMenu td a
{
    color: #FFFFFF;
    font-size: 12px;
}
/*----------------------------------------------------------
Header
----------------------------------------------------------*/
#header
{
    padding: 0;
    padding-top: 6px;
    float: left;
    margin-bottom: 0px;
    color: #5E5B54;
    width: 100%;
}
#header h1
{
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    border: none;
    line-height: 2em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px !important;
}
#logindisplay4
{
    font-size: 11px;
    padding: 3px;
    text-align: right;
    list-style: none outside none;    
    margin: 0;
}
#logindisplay
{
    /*font-size: 1.1em;*/
    font-size: 12px;
    display: block;
    text-align: right;
    margin: 5px;
    line-height: 20px;
    float:right;
}
#logindisplay a{color: #000000;}
#logindisplay a:link{text-decoration: underline;}
#logindisplay a:visited{text-decoration: underline;}
#logindisplay a:hover{text-decoration: none;}
/*----------------------------------------------------------
MiddleContent
----------------------------------------------------------*/
#MiddleContent
{
    float: left;
    width: 100%;
    padding: 0px 0px 30px 0px;
    height: 80%;
}
/*----------------------------------------------------------
Menu
----------------------------------------------------------*/
#menu
{
    float: left;
    width: 200px;
    padding-bottom: 30px;
}
/*----------------------------------------------------------
Main Content
----------------------------------------------------------*/
#MainContent
{
    margin-left: 0px;
    margin-right: auto;
    padding: 0px 0px 0px 0px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscore */
}
/*----------------------------------------------------------
Footer
----------------------------------------------------------*/
#footerWrapper  
{
    width: 730px; 
    margin-left: auto; 
    margin-right: auto; 
    border: none; 
    padding: 0 20px; 
    margin-top: 20px; 
    margin-bottom: 40px; 
}
#footer
{
    background: url("images/footer_gradient.png") repeat-x scroll left top #FFFFFF;
    min-width: 980px;
    /*max-width: 1600px;*/
    clear: both;
    position: relative;
    z-index: 10;
    height: 25px;
    margin-top: -25px;    
}
.footer-padded
{
    padding-bottom: 50px;
}
@media print {
    #bottom-dock { display: none; }
}
@media screen {
    #bottom-dock
    {
        /*alt color: #BBDEFA, 336699 */
        background: #BBDEFA; /* for non-css3 browsers */
        background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#BBDEFA));
        background: -moz-linear-gradient(top,  #FFFFFF,  #BBDEFA);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#BBDEFA');
        width:100%;
        min-width: 980px;
        /*max-width: 1600px;*/
        clear: both;
        position: fixed;
        z-index: 2000000;
        height: 50px;
        bottom:0px;
        left:0px;    
    }
}
#footer span, #footer_high span
{
    position:absolute;
    bottom:5px;
    left:200px;
}
/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/
fieldset
{
    margin: 1em 0;
    padding: 1em;
    border: 1px solid #CCC;
}
fieldset p, fieldset .tableP
{
    margin: 2px 12px 10px 10px;
}
legend
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}
input[type="text"], input[type="password"]
{
    border: 1px solid #CCC;
}
select
{
    /*border: 1px solid #CCC;*/
}
/*----------------------------------------------------------
TABLE Grid
----------------------------------------------------------*/
table.TableGrid
{
    width: 100%;
    border-collapse: collapse;
    border: 0px;
}
table.TableGrid tr.AltRow
{
    background-color: #D6D6D6;
}
table.TableGrid td
{
    padding: 1px;
    vertical-align:middle;
}
table.TableGrid td.FieldName
{
    text-align: left;    
    font-weight: bold;
    vertical-align:top;
    /*font-size: 10pt;*/
}
table.TableGrid td.FieldMandatory
{
    color: #CC3300;
    padding-left : 12px;
	background-image : url("images/mandatory.gif");
	background-repeat : no-repeat;
	background-position: left top;
	/*font-size: 10pt;*/
}
table.TableGrid td.FieldValue, table.TableGrid tr.FieldValues td
{
    text-align: left;   
    vertical-align:top;
    /*font-size: 10pt;*/
}
table.TableGrid td.ChangeInfoFieldValue
{
    color: #8B4513;
}
table.TableGrid a.FieldLink
{
    color: #045faa;
    text-decoration: underline;
    cursor: hand;
}
table.TableGrid a.FieldLink:active { color: #FF0000; }
table.TableGrid td a.NoLineRed
{
    color: #045FAA;
    text-decoration: none;    
}
table.TableGrid td a.NoLineRed:hover
{
    color:red;
}
table.TableGrid td a.NoLineRed:active { color: #FF0000; }
table.TableGrid td.RemarkHeader
{
    text-align: left;
    vertical-align: top;
    font-weight: bold;
}
table.TableGrid td.RemarkDetail
{
    text-align: left;
    vertical-align: top;
}
table.TableGrid td.NormalText
{
    text-align: left;
    vertical-align: middle;
}
table.TableGrid td.BlueTitle
{
    text-align: left;
    vertical-align: middle;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px; 
    color: #045faa;
}
table.TableGrid td.List
{
    text-align: left;
    vertical-align: top;
}
table.TableGrid td.FieldAlignRight
{
    text-align: right;
}
table.TableGrid td.FieldAlignCenter
{
    text-align: center;
}
/*----------------------------------------------------------
TABLE List
----------------------------------------------------------*/
table.TableList
{
    border: solid 0px #F2F5F7;
    border-spacing: 2px;     
    width: 100%;
    border-collapse: separate;
}
table.TableList td
{
    padding: 1px 2px;
    border: solid 0px #F2F5F7;
    color:#000000;    
    vertical-align:top;
}
table.TableList td.SubCell
{
    padding: 1px 2px;
    background-color: #F2F5F7;           
}
table.TableList td.SubCell tr
{
    page-break-inside: avoid; /* SR11779 Brian Choi 20140204 add*/
}
table.TableList td a
{
    color: #045FAA;
    text-decoration: underline;    
}
table.TableList td a:active { color: #FF0000; }
table.TableList td a.NoLineRed
{
    color: #045FAA;
    text-decoration: none;    
}
table.TableList td a.NoLineRed:hover
{
    color:red;
}
table.TableList td a.NoLineRed:active { color: #FF0000; }
table.TableList tr
{
    background-color: #DFEBF7;    
}
table.TableList tr.RemoveStyle
{
    background-color: inherit;
}
table.TableList td.RemoveStyle, table.TableList th.RemoveStyle
{
    background-color: transparent;
    border: none;
    color: #000000;
}
table.TableList td.NoWrap, table.TableList th.NoWrap
{
    white-space: nowrap;
}
table.TableList td.FieldAlignRight, table.TableList td.GridNumber, table.TableList th.GridNumber, table.TableList td.FAR
{    
    text-align: right;    
}
table.TableList td.FieldAlignLeft
{    
    text-align: left;    
}
table.TableList td.FieldAlignCenter, table.TableList td.FAC
{    
    text-align: center;    
}
table.TableList td.expandable
{    
    cursor: pointer;
}
table.TableList tr.AltRow
{
    background-color: #F7F7F7;
}
table.TableList tr.Highlight
{
    background-color: #CCCCFF;
    color: #000066;
}
table.TableList th
{
    padding: 3px 2px;
    text-align: left;
    background-color: #045FAA;
    border: solid 0px #F2F5F7;
    color: #ffffff;      
    vertical-align:top;     
}
table.TableList th.FieldAlignRight, table.TableList th.FAR
{    
    text-align: right;    
}
table.TableList th.FieldAlignCenter, table.TableList th.FAC
{    
    text-align: center;
}
table.TableList th.sortable
{    
    background-image: url(images/sort_unsort.png);     
    cursor: pointer;     
    background-repeat: no-repeat; 
    background-position: 97% 50%;     
    margin-left: -1px;     
    padding-right:15px;
}
table.TableList th.asc, table.TableList th.DESC
{    
    background-image: url(images/sort_asc.png);  
}
table.TableList th.desc, table.TableList th.ASC
{  
    background-image: url(images/sort_desc.png);       
}
table.TableList th.sorting
{
    background-color:#04467D
}
table.TableListWP th
{
    background-color: #5DA4DE;
}
/*----------------------------------------------------------
TABLE
----------------------------------------------------------*/
td a.NoLineRed
{
    color: #045FAA;
    text-decoration: none;    
}
td a.NoLineRed:hover
{
    color:red;
}
/* MISC  
----------------------------------------------------------*/
.clear
{
    clear: both;
}
.error
{
    color: Red;
}
div#title
{
    display: block;
    float: left;
    text-align: left;
}
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}
.field-validation-valid
{
    display: none;
}
.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}
.validation-summary-errors
{
    list-style-image: none !important;
    list-style-type: none !important;
    font-weight: normal;
    color: #F00;
}
.validation-summary-errors-en
{
    list-style-image: none !important;
    list-style-type: none !important;
    font-weight: bold;
    color: #FF0;
}
.validation-summary-errors-ct
{
    list-style-image: none !important;
    list-style-type: none !important;
    font-weight: normal;
    color: #FF0;
}
.validation-summary-errors li, .validation-summary-errors-en li, .validation-summary-errors-ct li
{
    display: block;
}
.validation-summary-errors a, .validation-summary-errors-en a, .validation-summary-errors-ct a
{
    color: white;
    text-decoration: underline;
}
.validation-summary-valid
{
    display: none;
}
/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label, .editor-label, .display-field, .editor-field
{
    margin: 0.5em 0;
}
.text-box
{
    width: 30em;
}
.text-box.multi-line
{
    height: 6.5em;
}
.tri-state
{
    width: 6em;
}
.blue_text_small_b	{color: #0045aa; vertical-align: bottom; font-weight: bold;}
.blue_text_medium_b	{color: #0045aa; vertical-align: bottom; font-weight: bold;}
.blue_text_large_b	{color: #0045aa; font-size: 12pt; vertical-align: bottom; font-weight: bold;}
                                     
.dblue_text_large_b	{color: #023467; font-size: 12pt; vertical-align: bottom; font-weight: bold;}
                                     
.blue_link_small	{color: #045faa; vertical-align: bottom; cursor: hand; text-decoration: underline;}
.blue_link_small:active	{color: #ff0000; }
.blue_link_medium	{color: #0045aa; vertical-align: bottom; cursor: hand; text-decoration: underline;}
.blue_link_medium_b	{color: #0045aa; vertical-align: bottom; font-weight: bold; cursor: hand; text-decoration: underline;}
.red_text_small		{color: #ff0000; vertical-align: bottom;}
.black_text_small	{color: #000000; vertical-align: bottom;}
.black_text_small_b	{color: #000000; vertical-align: bottom; font-weight: bold;}
.white_text_small	{color: #ffffff; vertical-align: bottom;}
.white_text_small_b	{color: #ffffff; vertical-align: bottom; font-weight: bold;}
.white_text_large_b	{color: #ffffff; font-size: 12pt; vertical-align: bottom; font-weight: bold;}
/* style for commonpage */
.fontDesc_s             { color:black; vertical-align : top; padding-left: 10px; }
.fontDesc_m_b           { color:black; vertical-align : top; padding-left: 10px; font-weight: bold; }
.fontDesc_l_b           { color:black; vertical-align : top; padding-left: 10px; font-weight: bold; }
.fontError_s             { color:red; vertical-align : middle; }
.fontError_m_b           { color:red; vertical-align : middle; font-weight: bold; }
.fontLimitBrokerAccess_s { color:green; vertical-align : middle; }
.fontXLetterGeneralRemark_s { color:black; vertical-align : middle; }
.fontChiDesc            { font-family: /*細明體_HKSCS,*/細明體; }
.hidden                 { display: none; }
.visible				{ visibility: visible; }
.invisible              { visibility: hidden; }
/* Styles for Workflow */
.workflow_fill_bg
{
    background: url("images/workflow/bg_slice.jpg") repeat-x;
}
span.lapse-dn-prod-dtl-rmk
{
    color:Green;
    font-weight:bolder;
    font-size:1.2em;
}
.largeTextbox
{            
width:85px;
}    
/* Styles for Ecard System
-----------------------------------------------------------*/
.entree_section
{
	BORDER-BOTTOM: 1px solid #CCCCCC;
	FONT-FAMILY: "Verdana", "Arial", "Helvetica", "sans-serif";
	FONT-SIZE: 16px;
	color: #DAA520;
	font-weight: 800;
	padding-top : 5px;
	padding-left : 15px;
	background : url(images/tabselected.gif) no-repeat left bottom;			/*	Mod By PP01417 */
} 
.readonly_field
{
    color: #8B4513;
}
/* Styles for Webparts
-----------------------------------------------------------*/
.column
{
    width: 320px;
    float: left;
    padding-bottom: 100px;
}
.portlet
{
    margin: 0 1em 1em 0;
}
.portlet-header
{
    margin: 0.3em;
    padding: 4px;
    cursor:move;
}
.portlet-header .ui-icon
{
    float: right;
    cursor: pointer;
}
.portlet-content
{
    overflow: auto;
    padding: 4px;
    position:relative;
}
.ui-sortable-placeholder
{
    border: 1px dotted black;
    visibility: visible !important;
    height: 50px !important;
    margin: 0 1em 1em 0;
}
.ui-sortable-placeholder *
{
    visibility: hidden;
}
.dialogContent
{
    z-index: inherit;
}
/* Styles for Hierarchy Control
-----------------------------------------------------------*/
table.HierCtrlList                                  { width: 100%; /*border-collapse: collapse; border: 0px;*/ }
table.HierCtrlList td span                          { padding-left:18px;cursor: pointer; }
table.HierCtrlList td span.HierListSpanOrphan       { padding-left:18px;cursor: default; }
table.HierCtrlList td span.HierListSpanExpand       { background-image: url("jqTreeTable/images/toggle-expand-dark.png");background-repeat : no-repeat; }
table.HierCtrlList td span.HierListSpanCollapse     { background-image: url("jqTreeTable/images/toggle-collapse-dark.png");background-repeat : no-repeat; }
table.HierCtrlList td span.HierListSpanMSN          { background-image: url("images/icon_hier.png");background-repeat : no-repeat;/*background-image:url("jstree/themes/classic/d.png"); background-position:-55px -19px;background-repeat : no-repeat;*/ }
table.HierCtrlList td a                             { text-decoration: none; color: #000000 }
table.HierCtrlTable                                 { width: 100%; /*border-collapse: collapse; border: 0px;*/ }
table.HierCtrlTable td span                         { /*margin-left:-19px;*/ padding-left:19px;cursor: pointer; }
table.HierCtrlTable td span.HierTableSpanOrphan     { padding-left:19px;cursor: default; }
table.HierCtrlTable td span.HierTableSpanExpand     { background-image: url("jqTreeTable/images/toggle-expand-dark.png");background-repeat : no-repeat; }
table.HierCtrlTable td span.HierTableSpanCollapse   { background-image: url("jqTreeTable/images/toggle-collapse-dark.png");background-repeat : no-repeat; }
/* Styles for POS Update 
-----------------------------------------------------------*/
.nowrap     { white-space: nowrap; }
/* Styles for Finance 
-----------------------------------------------------------*/
.athdr
{
	font-family: Arial, Helvetica, sans-serif;
	background: #e0e2e4;
	color: black;
	font-size: 8pt;
}
.athdr2
{
    font-family: Arial, Helvetica, sans-serif;
	background: #ddeac1;
	color: black;
	font-size: 8pt;
}
.atdtl
{
    font-family: Arial, Helvetica, sans-serif;
	background: whitesmoke;
	color: black;
	font-size: 8pt;
}
/* Styles for Toolbar Display 
-----------------------------------------------------------*/
a.toolbar-icon
{
    padding-left:2px;padding-right:2px; text-decoration:none;
}
img.toolbar-img
{
    border-width:0px;
}


/*----------------------
For AES Mobile - START
-----------------------*/
.notebar 
{
    height: 300px; 
    position: absolute;     
    z-index: 101;     
    top: -278px;     
    left: 0;     
    right: 0;     
    /* background: #456F9A; */     
    text-align: center;        
    overflow: hidden;     
    -webkit-box-shadow: 0 0 5px black;     
    -moz-box-shadow:    0 0 5px black;     
    box-shadow:         0 0 5px black;  
    -webkit-transform: translateZ(0); 
}

/*#divNoteBarInboxWrapper*/
.noteBarInboxWrapper
{
	position:relative; 
	z-index:1;
	/* height:230px; */
	height:220px;
	left:0;
	width:100%;
	background:#FFFFFF;
	overflow:visible;
	color: black;
	text-shadow: 0 0 0;
}

/*#divNoteBarInboxScroller*/
.noteBarInboxScroller
{
	position:relative; 
	z-index:1;
    /* -webkit-touch-callout:none; */
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:100%;
	padding:0;
}

/*#divNoteBarInboxScroller ul*/ 
.noteBarInboxScroller ul
{
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
}

/*#divNoteBarInboxScroller li*/
.noteBarInboxScroller li
{
	padding:0 10px;
	height:40px;
	line-height:40px;
	border-bottom:1px solid #ccc;
	border-top:1px solid #fff;
	background-color:#fafafa;
	font-size:14px;
}

a.mobileListSubMenu {
    color: #000000;
    text-decoration: none;
}
/*----------------------
For AES Mobile - END
-----------------------*/

/*-----------------------------------------------
For SR10968 - AES Document Upload Center - START
-----------------------------------------------*/
.doccenter-highlight 
{
    background-color: Yellow !important; 
}

.doccenter-dim
{
   /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)" !important;

  /* IE 5-7 */
  filter: alpha(opacity=30) !important;

  /* Netscape */
  -moz-opacity: 0.3 !important;

  /* Safari 1.x */
  -khtml-opacity: 0.3 !important;

  /* Good browsers */
  opacity: 0.3 !important;
}
/*-----------------------------------------------
For SR10968 - AES Document Upload Center - END
-----------------------------------------------*/

/*-----------------------------------------------
For SR11250 - AES - Client Search - Fund List - START
-----------------------------------------------*/
.DialogButtonSetFloatToLeft .ui-dialog-buttonset
{
    width: 100% !important;
    float: left !important;
}
.DialogButtonFloatToLeft
{
    float: left !important;
}
.DialogButtonFloatToRight
{
    float: right !important;
}

.DialogButtonIncreaseMargin button
{
    margin: 5px !important;
}
/*-----------------------------------------------
For SR11250 - AES - Client Search - Fund List - END
-----------------------------------------------*/

/*-----------------------------------------------
For SR11250 - AES - Highlight Birthday Today! - START
-----------------------------------------------*/
tr.birthday-today, tr.birthday-today td
{
    font-weight: bold;
    color: #cd0a0a !important;
}
/*-----------------------------------------------
For SR11250 - AES - Highlight Birthday Today! - END
-----------------------------------------------*/

/*-----------------------------------------------
For Global Search - AES - search bar css & overlay - END
-----------------------------------------------*/
.global-search-trigger {
    display: flex;
    margin: 10px 10px;
    padding: 5px 10px;
}

.go-go-search-logo-background {
    height: 43px;
    background: linear-gradient(261deg, #0367AD 0%, #00B9F2 74.48%);
    color: #FFF;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.go-go-search-logo-text {
    color: #FFF;
    font-size: 14px;
    font-style: italic;
    font-weight: 600;
    align-self: center;
    position: relative;
    padding: 8px;
    margin-left: 5px;
    margin-right: 5px;
}
.go-go-search-logo-top-right-tri{
    position: absolute;
    top: 0;
    right: 0;
}

.go-go-search-bar {
    flex: 1;
    height: 41px;
    border: 1px solid #DDD;
    background: #FFF;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-right: 0px;
    border-left: 0px;
}

.go-go-search-bar-placeholder {
    flex: 1;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: #979797;
    padding: 5px;
}

.go-go-search-button {
    width: 56px;
    height: 43px;
    background: #0367AD;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.global-search-overlay-hidden {
    visibility:hidden
}

.global-search-iframe {
    border: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

.global-search-container {
    z-index: 9999;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.global-search-wrapper {
    width: 80%;
    height: 85%;
}

.freeze-body {
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100%;
}

.ui-widget-overlay.fixedFullScreen {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.bg-white {
    background: #fff !important;
}

.flex-important {
    display: flex !important;
}

.block-important {
    display: block !important;
}