/********************************************************************
'/\/\/\/\/\/\/\/\/\/\/\/\/\/\*  Program MAINTENANCE Log
'Copyright (c) 2002, by ULTRADATA AUSTRALIA PTY LTD
'Rel    byWhom  When              ReviewedBy When
'---    ------  ----              ---------- ----
'4.6    YFWong      01Nov17     WKcheah     01Nov17
'       [Case # 5072115]
'       Added CSS Style for textarea.PayeeMessage.
'4.4    YFWong      10Jan17
'       [PD3139.34 # 5059974]
'       Modified payeeMessageConfirm to use word-break: break-all.
'4.4    YFWong      06Nov16
'       [PD3139.34 # 5058236]
'       Revised CSS Style as design requirement.
'4.4    YFWong      25Nov16
'       [PD3139.34 # 5057412]
'       Revised CSS Style as per design change requirement.
'4.4    YPGan       23Nov16
'       [PD3139.34 case 5057990]
'       Added IntlDiallingCode style to ensure dropdown control width display correctly in Safari
'4.4    YFWong      07Sep16
        [PD3139.34 # 5053488]
        Added style for div#accountIdentifiersSection.
'4.4    YFWong      05Sep16
        [PD3139.34 # 5054454]
        Added IntlDiallingCode class to adjust the height of the international dialling code dropdown control.
'4.4    WKcheah 20Jul16
    '       [PD3139.34]
    '       Removed the width setting for class payeeTypeOptionDesc. Just let the text wrap into next line.
    '       The width defined is insufficient to contain the additional Organisation alias text.
'4.4	vtran	14Jul16
'		UI button set hover behaviour
'4.4	vtran	11Jul16
'		Various UI tweaks in response to design's review
  '4.4    GKrish  31MAY16
'       [PD3139.6]
'       Removed some 80% styles that were needlessly duplicated. Having a containing element with 80% will do.
        Set border-color for textbox.
        Remove highlight for alias registration details
        Removed styles that were identical in media queries.
    4.4    GKrish    25May16
        [PD3139]
        Tweaks to receipient type buttons.
  4.4    GKrish    09May16
        [PD3139]
        Added .payeeTypeOptionDesc to allow control over long descriptions.
        [PD3139]
    4.4    GKrish    28Apr16  
        [PD3139]
        style tweaks.
  4.4    GKrish    22Apr16  
        [PD3139]
        Style fixes to ensure combobox autocomplete use our mutlSel styles.
    4.4    GKrish
        [PD3139]
        Added back to top styles for this page.
'4.4    GKrish  24Mar16
'       [PD3139]
'       Updated and sorted stylesheet. media queries are at bottom.
'4.4    GKrish  22Mar16
'       [PD3139]
'       Added confirm view styles.
'4.4    GKrish  21Mar16
'       [PD3139]
'       Added span.multSel cascades to style uda drop downs and comboboxes for this page.
'4.4    GKrish  17Mar16
'       [PD3139]
'       Added styles for timing control fields.
'4.4    GKrish  11Mar16
'       [PD3139]
'       Made input fields 80% width. 
'4.4    GKrish  03Mar16
'       [PD3139]
'       Renamed to just 'transferfunds.css'. This is to be used as a pseudo-global, unscoped stylesheet for tranferfunds pages, so any pages that use this styles will work.
'       If there are specific rules to be applied to specific page, create a separate style sheet and add scoped styles only for styles that need to be overridden by the page.
'4.4    GKrish  03Mar16
'       [PD3139]
'       Created. Loosely based on WUIInternationalTransfer stylesheet.
'********************************************************************/

div.trflabel {
    display: block;
    /*width: 250px;*/
    
    vertical-align: top;
    padding-top: 10px;
    padding-bottom: 3px;
}
.ui-buttonset label.payeeTypeOption {
    border-top-color:#4b92ca;
    border-bottom-color:#4b92ca;
    vertical-align: middle;
    margin-right: 15px;
    margin-left: -5px;
    border-left-style: none;
    border-right-style: none;
	height: 66px;
    border-radius: 0px;
}

.ui-buttonset label.payeeTypeOption > span.ui-button-text{
    margin:2px 0px 2px 0px;
	height: 34px;
	overflow: hidden;
}
.payeeTypeOptionDesc{
    /*width:260px;*/
    overflow:hidden;
    text-overflow:ellipsis;
}

.payeeTypeOptionDesc > span.dim {
    color:#8f8f8f;
}

#RecipientType label.ui-state-default {
    background-color:transparent;
}
.ui-buttonset label:hover > span.ui-button-text {
    background-color: #A9D8FD;	
}

.ui-buttonset label:hover .ui-button-text, 
.ui-buttonset label:hover .ui-button-text .stText, 
.ui-buttonset label:hover .ui-button-text .stTextBold,
.ui-buttonset label:hover .ui-button-text .dim {
	color: #fff;
}

div.trflabel > span {
    color: #1b75bb;
    font-size: 14px;
    font-style: normal;
}

div.trflabel > span.stTextSmall {
    font-size: 12px;
}

.trflabel .sub-label {
	font-size: 12px;
}

div.trflabel > span.dim {
    color: #666666;
}
.ui-buttonset span.dim {
    font-size: 11px;
    font-style: normal;
}
div.trflabel .ui-state-active span {
    color: #ffffff;
}

.ui-buttonset .ui-state-active span.dim  {
    color: #d2d2d2;
}
div.trfentry {
    width: 100%;
    margin-top: 1px;
    margin-bottom: 1px;
    padding-top: 5px;
    padding-bottom: 1px;
}
div.trfentry .stText, div.trfentry .stTextBold, .trfentry.stText {
    font-size: 12px;
}
div.trfentry select,
div.trfentry span.multSel {
    height: 26px;
    /*width: 100%;*/
    background-color: White;
}
div.trfentry span.multSel {
    background-color: White;
    font-size: 20px;
}
div.trfentry select,
div.trfentry input[type='text'], div.trfentry input[type='textarea'] {
    display: inline-block;
}

span.multSelItem, li.multSelItem, ul.ui-autocomplete > li.ui-menu-item {
    font-size: 12px;
}
div.trfentry input {
    vertical-align: middle;
}
tr[align=center] td {
    text-align: left;
}
.trfinfo {
    margin-left: 3px;
}
.radioButton label {
    font-weight: bold;
    vertical-align: super;
}
div.trfsectionnb,
div.trfsection {
    margin-bottom: 5px;
    padding-bottom: 5px;
    background-color: #eef5ff;
}
div.trfentry .watermark {
    /*The wateMark css class in general.css completely messes up the textbox layout on standards compliant page.*/
    
    color: #a2a2a2;
}
div.confirmNotes .notes {
    padding: 5px 20px 20px 20px;
    background-color: White;
}
div.confirmNotes {
    padding: 5px;
}
div.trfconfirmsection {
    display: table-row;
    vertical-align: top;
    padding-top: 10px;
}
div.trfsection div.trfconfirmsection:first-child {
    display: table-row-group;
}
div.trfconfirmsection > div:first-child {
    display: table-cell;
    padding-right: 10px;
    font-weight: bold;
    /*font-size: 10pt;*/
    padding-top: 20px;
}
div.trfconfirmsection > div:last-child {
    display: table-cell;
}
.payeeMessageConfirm {
    max-width: 250px;
    word-break: break-all;
}

.trfTimingConfirmation {
    padding-top: 10px;
}

div#trfBackToTopContainer
{
    padding-top:5px;
    width:100%;
    text-align:right;
    margin-top:3px;
}
div#trfBackToTopContainer .backToTop{
    bottom:40px;
    right:5px;
}

.aliasRegistrationDetails{
    margin-top:10px;
    padding:5px;
}
div#NewRecipientSection > .newPayeeContent{
    width:80%;
}

div.trfbuttons {
    padding-left:0px;
    padding-right:0px;
}
div.transferDetailContent{
    width:80%;
}

div.trfentry input[type='text'],
div.trfentry span.multSel input[type='text'] {
    width: 100%;
    height: 26px;
    font-size: 12px;
	padding-top: 0;
	padding-bottom: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.trfentry td.IntlDiallingCode span.multSel {
    height: 22px;  
    width: 51px;
}

div.trfentry td.IntlDiallingCode span.multSel input[type='text'] {
    width: 36px !important;
}

div.trfentry td.IntlDiallingCode span.multSel img {
    top: -2px;
    right: 4px;
}

div.trfentry textarea {
    width: 100%;
    font-size: 12px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    white-space: pre;
}

div.trfentry textarea.payeeMessage {
    white-space: normal;    
}

div#accountIdentifiersSection {
    white-space: nowrap;
}

div#accountIdentifiersSection label {
    min-width: 90px;
    width: auto !important;
}

div#accountIdentifiersSection label:first-of-type{
    margin: 0px;
}


/* ----- SMALL-MEDIUM SCREENS ----- */
@media only screen and (max-width: 767px) {
    div.trfcontainer {
        width: 100%;
        /*don't take up the entire width */
        
        margin: 0px;
        /* ensure content fits in the center of the container */
    }
    div.trfsectionnb,
    div.trfsection {
        padding-left: 0px;
        padding-right: 0px;
    }
    div.confirmDetails{
        width: 100%;
        display: block;
        border-top:3px solid #1B76BD;
    }
    div.confirmNotes {
        width: 100%;
        display: block;
        background-color: White;
    }
    .payeeTypeOptionDesc{
        width:400px;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .timingConfirmDate {
        display: block;
    }
    div#NewRecipientSection > .newPayeeContent{
        width:100%;
    }
    div#trfBackToTopContainer .backToTop{
        bottom:0px;
        right:0px;
    }
    div.trfbuttons {
        padding-left:0px;
        padding-right:10px;
    }
    div.trfconfirmbuttons {
        padding-left:0px;
        padding-right:0px;
    }

}
/* ----- MEDIUM-WIDE SCREENS ----- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    div.trfcontainer {
        width: 80%;
        /*don't take up the entire width */
        
        margin: 0px auto;
        /* ensure content fits in the center of the container */
    }
    div.trfsectionnb,
    div.trfsection {
        padding-left: 5%;
        padding-right: 5%;
    }
    div.confirmDetails {
        border-top:3px solid #1B76BD;
        width: 50%;
        display: table-cell;
        vertical-align: top;
        padding: 10px;
    }
    div.confirmNotes {
        border-top:3px solid #1B76BD;
        width: 50%;
        display: table-cell;
        vertical-align: top;
        padding: 5px;
    }
    .ui-buttonset label.payeeTypeOption {
       
    }
    .timingConfirmDate {
        display: inline-block;
    }
}
/* ----- WIDE AND WIDER SCREENS ----- */
@media only screen and (min-width: 992px) {
    div.trfcontainer {
        width: 80%;
        /*don't take up the entire width */
        
        margin: 0px auto;
        /* ensure content fits in the center of the container */
    }
    div.trfsectionnb,
    div.trfsection {
        padding-left: 16.89%;
        padding-right: 16.89%;
    }
    div.confirmDetails {
        border-top:3px solid #1B76BD;
        width: 50%;
        display: table-cell;
        vertical-align: top;
        padding: 10px;
    }
    div.confirmNotes {
        border-top:3px solid #1B76BD;
        width: 50%;
        display: table-cell;
        vertical-align: top;
        padding: 5px;
    }
    .timingConfirmDate {
        display: inline-block;
    }

}
div.trfconfirmbuttons {
    padding-left:0px;
    padding-right:0px;
}

.confirmDetails .trfconfirmsection div:first-child {
	width: 35%;
}