/***************************************************************************************************************************/ 
/* Aug 31 2018, AG. Added below from cdtsfixes.css file in order to make transactional template work with v4.0.28.1.
/* Test removing it after then next WET stable release upgrade.
/********** CDTS fixes START **********/
/********** Follow the correct format and link to Github issue for info **********/
/********** https://ssl-templates.services.gc.ca/app/cls/WET/gcweb/v4_0_28/cdts/samples/transactional-en.shtml **********/
/********** AJOUTÉ PAR NICK LE 2017/08/31 **********/
/********** Date modified/Screen identifier/Version **********/
#wb-dtmd dt, #wb-dtmd dd {
	float: left
}
#wb-dtmd dt {
	clear: both
}
#wb-dtmd dd {
	margin-left: 5px
}
.pagedetails .row {
	clear: both;
}
/********** AJOUTÉ PAR NICK LE 2017/08/25 **********/
/********** Barre bleue qui remplace le menu en transactional et espace gris avant le footer **********/
#wb-sm {
	min-height: 55px;
}
#transactFooter {
	min-height: 75px;
}
/********** CDTS fixes END **********/

/********** CDTS noscript file START **********/
/********** Follow the correct format and link to Github issue for info **********/
/********** MODIFIÃ‰ PAR NICK LE 2017/08/29 **********/
/*Secure application templates: Custom CSS (noscript)*/
@media screen and (max-width: 767px){
	/*Mobile app bar + search overlay - Hide them.*/
	.app-list-main, #app-srch-mb{
		display: none !important;
	}
}
/********** CDTS noscript file END **********/
/********** CDTS Change to theme.min.css START **********/
#wb-sm{background:#335075;min-height: 55px;}
/********** CDTS Change to theme.min.css END **********/
/***************************************************************************************************************************/ 

/* APC_CUSTOM.css has been modified for Jira SITTAPC-31 Update for Wet4 application template. 
A.Grossmann Aug 17 2017.
*/ 
TH.header {
	BACKGROUND-COLOR: grey !important; COLOR: white; FONT-FAMILY: Tahoma, Arial, Helvetica; FONT-SIZE: 10pt
}
div.header {
	background-color: #808080; color: #FFFFFF; font-family: tahoma, arial, helvetica; font-size: 10pt
}
TABLE.data {
	BACKGROUND-COLOR: white;
	width:100%;
}
TD.data, .data td, .data th {
	BACKGROUND-COLOR: silver; /*FONT-SIZE: 10pt*/
  /*B.Rickey added below to give more padding in cells*/
  padding-top:2px;
  padding-bottom:2px;
  padding-right:2px;
  padding-left:2px;
}
/*Use same font for label than data elements*/
.data td, .data th, TD.data, .data label{
font-family:Tahoma,Arial,Helvetica;
}
TD.actions {
	FONT-FAMILY: Tahoma, Arial, Helvetica; FONT-SIZE: 10pt
}

SPAN.pagefont {
	FONT-FAMILY: Tahoma, Arial, Helvetica; /*FONT-SIZE: 10pt*/
}
H1.pagefont {
	FONT-FAMILY: Tahoma, Arial, Helvetica; FONT-SIZE: 16pt
}

.alphaContentBold {
	FONT: bold 10pt Arial, sans-serif
}

/* Added Oct. 11, 2000, CMB */
.small {
	FONT-FAMILY: MS Sans Serif, Helvetica; FONT-SIZE: 10px
}

.DATAHEAD {
	font-family: verdana;
	color: #FFFFFF;
	background-color: #808080 !important;
	font-size: 10pt;
	font-weight: bold;
	}
/*keep this as a copy of DATAHEAD until they all match*/	
.datahead {
	font-family: verdana;
	color: #FFFFFF;
	background-color: #808080 !important;
	font-size: 10pt;
	font-weight: bold;
	}

.label {
	font-family: Arial, sans-serif;
	background-color: #C0C0C0;
	font-size: 10pt;
	font-weight: bold;
	}

.labelbold {
	font-family: Arial, sans-serif !important;
	color: #FFFFFF;
	background-color: #AAAAAA !important; 
	font-size: 10pt;
	font-weight: bold;
	}
	/*keep this as a copy of DATAHEAD until they all match*/	
	.LABELBOLD {
	font-family: Arial, sans-serif !important;
	color: #FFFFFF;
	background-color: #AAAAAA !important; 
	font-size: 10pt;
	font-weight: bold;
	}

.value {
	font-family: Arial, sans-serif;
	background-color: #C0C0C0;
	font-size: 10pt;
	}

.dvalue {
	font-family: Arial, sans-serif;
	background-color: #C0C0C0;
	font-size: 10pt;
	font-style: italic;
	color: blue;
	}

.inTable{
        border-bottom:1px white solid; 
        margin:-1px 0 -1px 0 !important; 
        background-color:silver;
        width:100%
}

.inTable td{
        border-left:1px white solid;
        border-top:1px white solid

}
.inTable .leftData{
        border-left:0px white solid;

	
}

.inTable .firstRight{
    width:45%;
    text-align:left
}
.center .center .subbanner{
				visibility: hidden
}
 .navig{

  font-size:x-small;

	font-family: "MS Sans Serif", Helvetica;

	height: 30px;

}
div.section{

			background: #336699;
			color: #ffffff;
			background-image: none;
			/*padding:2px;*/
			/*this is a hack for IE 6, since it does not render the above padding correctly. 
			In future IE version, this would no longer be supported, but since the box model is improved, it should not be needed anymore*/			
/*		  _padding: 0px;*/ 
			margin-left:0px;
			margin-right:0px;
			/*Not the best to set a fixed height, but easier to make it work in IE and elements will fit in container...*/
			height: 20px;
			/*This will not be rendered by IE, which is what we want since the height is not computed the same way in IE and Firefox.
			This will be the real height in Firefox, but IE real height will be the above*/
			min-height: 22px;
}

div.section h2{

			font-weight: bolder;
			font-size: 100%;
			margin: 0px;
			padding: 0px;
			color: #ffffff;
			line-height:1.5em
	}

/* 	Commenting out because it doesn't seem necessary. AG. Aug 7 2018.
.sdContent{
			width:99%;
			text-align: left;
}
*/
.sdContent .section *{
			margin: 0px;
			vertical-align:middle;
}
.sdContent hr{
	 margin:0px;
}
.sdContent form{
	 margin:0px;
}

/* Space before buttons */
.margin0{
	margin-top: 0px;
	margin-bottom: 10px;
}
/* Alignment of buttons */
.alignRight{
	text-align: right;
}

.SDhighlight{
				color: #990000;
				font-style: italic;
				font-weight: bolder;
}

div.data{
				 background:#ffffff;
				 color: #000000;
				 margin-bottom: 30px;
}

div.data div div{
				 margin:1px 0px 0px 1px;
				 background:#C0C0C0;
				 color: #000000;
				 background-image: none;
				 height: 33px;
				 width: 49.93%
				 
}
.data .row{
			width:100% ;
}
/*need to add padding to DATAHEAD, but be specific in the class definition so it does not interfere with other pages*/
.data .row.DATAHEAD {
				padding:2px;
				width: 99.5%;
}

.data{
			margin:0px;
}

/*For some reason, we have to had the .row at the beginning to have ie apply the rule, the specificity seems to be different than Firefox...*/
.row div.cols2.bold{
						margin-left: 0px;

}
.data th {
			width:33%;
			text-align: left;
			font-family: verdana;
			padding-top: 5px;
			padding-bottom: 5px
}
/*Added th.readonlylabel so that font is the same for read-only fields as it is for enterable fields that use the <label> tag
  Padding added so that text has same left indent as label tag text*/
.data th.readonlylabel {
			font-family: Tahoma,Arial,Helvetica;
      padding-left: 5px;
}
.data caption{
			text-align:left;
			margin-top: 0px;
			margin-bottom: 0px;
}
.msgSuccess{
	font-family: Tahoma, Arial, Helvetica;
	color:#336699;
	font-weight: bolder;
}
.msgWarning{
	color:#ff4040;
	font-size:larger;
	font-style: italic;
}
.msgError{
	color:#000000; /* B.Rickey Defect 26792: Update LAF/Accessibility of error messages */
	font-weight: bolder;
}
.msgErrorQuery{
	color:#ff4040;
	font-weight: bolder;
}

.msgException{
	color:#ff4040;
	font-weight: bolder;
	font-size:larger;
}

.errorBox{ /* B.Rickey Defect 26792: Update LAF/Accessibility of error messages */
	background:#ffcccc; /* pale red */
	color:#000000; 
	border:solid #ff0000 1px; /* red */
	padding: 2px;
}
.errorBox *{
	vertical-align: middle;
}

.messageBox{ /* B.Rickey: For non-error messages, so they stand out for the user to read. */
	background:#e2f0ff; /* very pale blue */
	color:#000000; /* black */
	border:solid #336699 1px; /* blue like IC colour scheme (dark greyish) */
	padding: 2px;
}
.messageBox *{
	vertical-align: middle;
}

.tableSection th{
							width:30%;
}

.tableSection .row{
							height: 30px; 
}

.tableSection .row.top{
							border-bottom:1px solid white;
}


.tableSection .cols2,.tableSection .cols3 { 
							height:100%;
}

.tableSection .leftCol{
							border-right:1px solid white; 
							width:30%;
}



.lines2.tableSection .row{
							height: 45px; 
}

.lines3.tableSection .row{
							height: 60px; 
}

td.DISCLAIMER, div.DISCLAIMER{
            background-color:#FFFFF0;
            background-image:none;
            border:1px outset black;
            border-bottom-width:1px;
            padding:5px;
}
div.DISCLAIMER{
						padding-top:30px;
						padding-bottom:30px;
}
.comment{
				 font-weight:normal;
}

div.row .cols2.width33 {
        width:33%;
        border-left:white solid 1px;
}
div.row .cols2.width66 {
        width:66%;
        padding-right:3px;
}
.data th.header{
			font-size:small;
			width:auto;
}

.sdContent .heading h1{
width:auto
}
.sdContent ul{
				 margin:20px;
}

.sdContent br {
					 margin:0px;
}
/*This will be overriden in the full page setting...*/
.childBigSelect select {
font-size: 12px;
height:22px;
width:477px;
}
.childBigSelect * {
margin:0;
padding:0;
}
.font15px * {
					font-size:14px;
}

.font13px * {
					font-size:13px;
}
.font12px * {
					font-size:12px;
}

div.data div div.width30 {
width:29.958%;
}
div.data div div.width70 {
width:69.902%;
}

/* APC: added for instruction text to appear below a section header
        and above data entry fields */
table.unlined td.instructions {
  border-top: 1px #999999 solid;
  border-bottom: 1px #999999 solid;
  background-color:#EEEEEE;
  padding:3px;
}
/* APC: added for disclaimer text to appear below a section header
        and above data entry fields */
table.unlined td.disclaimer {
  border-top: 1px #999999 solid;
  border-bottom: 1px #999999 solid;
  background-color:#FFFFF0;
  padding:5px;
}

/* 
 * APC: ADDED FOLLOWING ENTRIES for form component layout, WCAG 2.0 (instead of using tables)
 */
/* Jira SITTAPC-31 Update for Wet4. Increased width. A.G. /* 
/* Designed for form items, this div is the container for the input item and its label */
div.apcItem {
  clear: left;
  padding: 0px 0 15px 0;
  width: 100%;
}
/* Jira SITTAPC-31 Update for Wet4. Increased width. A.G. /* 
/* Use this like apcItem but when you don't want a border. */
div.apcItemNoBorder {
  border-top: none; /* NO border */
  clear: left;
  padding: 0px 0 8px 0;
  width: 100%;
}

/* Designed for forms, this should be used for text instructions related to data-entry in a form component */
div.instructions {
  border: 0;
}
div.instructionsBorderTop {
  border-top: 1px dashed gray !important;
  padding-top: 15px;
}
/* Designed for forms, this should be used for text instructions related to data-entry in a form component */
div.apcDisclaimer {
  border-top: 1px #999999 solid;
  border-bottom: 1px #999999 solid;
  background-color: #FFFFF0;
  padding: 5px;
  margin-bottom: 5px;
}

/* Designed for forms, apcHeader should be used for all section headers in APC forms
                       except for the first header, which should use apcFirstHeader */
h2.apcHeader {
  clear:both;
  margin-top: 20px !important; /* margin used to separate the header from items above it */
  margin-bottom: 20px; /* margin used to separate the header from items below it */
} /* confirmed AG Aug 3 2018 */

h2.apcFirstHeader {
  clear:both;
  margin-top: 0px !important;
  margin-bottom: 1em; 
}

/* MKS Defect 26142: This prevents textarea from being resized by the user: Firefox, Safari, Chrome */
textarea {
  resize:none;
}

/* Currently not used */
div.apcClear {
  clear:both;
}

/* Start Jira SITTAPC-31 Update for Wet4. Used old Wet class name with Wet4 style. A.G./* 
/* IC-CLF2 theme Lined tables */
table.unlined {margin-top: 25px;}
table.lined, table.unlined {border-spacing: 0px; border-collapse: collapse; border: 1px solid #CCC;}
table.lined caption {padding: 6px 3px 6px 3px; margin:0px; text-align:left; background: #335075; color:#FFF; font-weight:bold; border:1px solid #666; font-family:Arial; font-size: 120%;}
table.lined th {padding:3px 3px; margin:0px; text-align:left; background-color: #EEE; color:#333; border:1px solid #CCC; border-top:0px;}
table.lined tfoot td {border-top:3px #CCC solid; background-color:#EEE; color:#333; padding:3px; margin:0px;}
table.lined th.alignCenter, table.unlined th.alignCenter { text-align:center; }
#cn-centre-col-inner table.lined caption a:link, #cn-centre-col-inner table.unlined caption a:link { color: #FFF; }
#cn-centre-col-inner table.lined caption a:visited, #cn-centre-col-inner table.unlined caption a:visited { color: #FFF; }

/* Remove Rounded corners on tables */
table.lined, table.unlined {border: none; border-collapse: separate;}
table.lined td, table.lined th {border: solid #CCC; border-width: 0 1px 1px 0;}
table.lined td:first-child, table.lined th:first-child {border-left: 1px solid #CCC;}
table.lined tr:first-child td, table.lined tr:first-child th {border-top: 1px solid #CCC;}
table.lined thead ~ tbody tr:first-child td, table.lined thead ~ tbody tr:first-child th {border-top: none;}
table.lined {border-radius: 0;}
table.lined caption {border-radius: 0;}
table.lined thead tr:first-child th:first-child, table.lined thead tr:first-child td:first-child, /* 1st td/th of 1st row of thead */
table.lined tbody tr:first-child th:first-child, table.lined tbody tr:first-child td:first-child  /* 1st td/th of 1st row of tbody */
{border-top-left-radius: 0;}
table.lined tbody tr:first-child th:last-child, table.lined tbody tr:first-child td:last-child, /* last td/th of 1st row of tbody */
table.lined thead tr:first-child th:last-child, table.lined thead tr:first-child td:last-child  /* last td/th of 1st row of thead */
{border-top-right-radius: 0;}
table.lined tbody tr:last-child th:first-child, table.lined tbody tr:last-child td:first-child,  /* 1st td/th of last row of tbody */
table.lined tfoot tr:last-child td:first-child, table.lined tfoot tr:last-child th:first-child   /* 1st td/th of last row of tfoot */
{border-bottom-left-radius: 0;}
table.lined tbody tr:last-child th:last-child, table.lined tbody tr:last-child td:last-child, /* last td/th of last row of tbody */
table.lined tfoot tr:last-child td:last-child , table.lined tfoot tr:last-child th:last-child /* last td/th of last row of tfoot */
{border-bottom-right-radius: 0;}
table.lined tfoot ~ tbody tr:last-child th, table.lined tfoot ~ tbody tr:last-child  td,       /* Don't apply round corners in last row of tbody if a tfoot is present */
table.lined thead ~ tbody tr:first-child th, table.lined thead ~ tbody tr:first-child td,      /* Don't apply round corners in 1st row of tbody if thead is present */
table.lined caption ~ tbody tr:first-child th, table.lined caption ~ tbody tr:first-child td,  /* Don't apply round corners in first row of thead/tbody if a caption is present */
table.lined caption ~ thead tr:first-child th, table.lined caption ~ thead tr:first-child td
{border-radius: 0 !important;}


/* IC-CLF2 theme Unlined tables */
table.unlined {border-spacing: 0px; border-collapse: collapse; border: 1px solid #CCC;}
table.unlined caption {padding: 6px 3px 6px 3px; margin:0px; text-align:left; background: #335075; color:#FFF; font-weight:bold; border:1px solid #666; font-family:Arial; font-size: 120%;}
table.unlined th {padding:1px 3px; margin:0px; text-align:left; background-color: #EEE; color:#333; border:1px solid #CCC; border-top:0px;}
table.unlined td {padding:1px 3px; border-bottom:1px solid #CCC; border-right:1px solid #CCC;}
table.unlined tfoot td {border-top:3px #CCC solid; background-color:#EEE; color:#333; padding:3px; margin:0px;}
table.unlined th.alignCenter, table.unlined th.alignCenter { text-align:center; }
#cn-centre-col-inner table.unlined caption a:link, #cn-centre-col-inner table.unlined caption a:link { color: #FFF; }
#cn-centre-col-inner table.unlined caption a:visited, #cn-centre-col-inner table.unlined caption a:visited { color: #FFF; }
  
/* Remove Rounded corners on tables via Border-Radius:0 */
table.unlined {border: none; border-collapse: separate;}
table.unlined td, table.unlined th {border: solid #CCC; border-width: 0 1px 1px 0;}
table.unlined td:first-child, table.unlined th:first-child {border-left: 1px solid #CCC;}
table.unlined tr:first-child td, table.unlined tr:first-child th {border-top: 1px solid #CCC;}
table.unlined thead ~ tbody tr:first-child td, table.unlined thead ~ tbody tr:first-child th {border-top: none;}
table.unlined {border-radius: 0;}
table.unlined caption {border-radius: 0;}
table.unlined thead tr:first-child th:first-child, table.unlined thead tr:first-child td:first-child, /* 1st td/th of 1st row of thead */
table.unlined tbody tr:first-child th:first-child, table.unlined tbody tr:first-child td:first-child  /* 1st td/th of 1st row of tbody */
{border-top-left-radius: 0;}
table.unlined tbody tr:first-child th:last-child, table.unlined tbody tr:first-child td:last-child, /* last td/th of 1st row of tbody */
table.unlined thead tr:first-child th:last-child, table.unlined thead tr:first-child td:last-child  /* last td/th of 1st row of thead */
{border-top-right-radius: 0;}
table.unlined tbody tr:last-child th:first-child, table.unlined tbody tr:last-child td:first-child,  /* 1st td/th of last row of tbody */
table.unlined tfoot tr:last-child td:first-child, table.unlined tfoot tr:last-child th:first-child   /* 1st td/th of last row of tfoot */
{border-bottom-left-radius: 0;}
table.unlined tbody tr:last-child th:last-child, table.unlined tbody tr:last-child td:last-child, /* last td/th of last row of tbody */
table.unlined tfoot tr:last-child td:last-child , table.unlined tfoot tr:last-child th:last-child /* last td/th of last row of tfoot */
{border-bottom-right-radius: 0;}
table.unlined tfoot ~ tbody tr:last-child th, table.unlined tfoot ~ tbody tr:last-child  td,       /* Don't apply round corners in last row of tbody if a tfoot is present */
table.unlined thead ~ tbody tr:first-child th, table.unlined thead ~ tbody tr:first-child td,      /* Don't apply round corners in 1st row of tbody if thead is present */
table.unlined caption ~ tbody tr:first-child th, table.unlined caption ~ tbody tr:first-child td,  /* Don't apply round corners in first row of thead/tbody if a caption is present */
table.unlined caption ~ thead tr:first-child th, table.unlined caption ~ thead tr:first-child td
{border-radius: 0 !important;}

table.widthfull, table.widthFull  {width:100%;}
.widthfull, .widthFull {width: 99.8%;}

/* Makes the dropdown boxes the same size as input fields.
   Overrides the inline style size="1".  */
select[multiple], select[size], select, input[type='text'], input[type='password'] {
   height: 28px;
}
#p_go_to {
	width: 32px;
}
/* Makes input buttons more like Canada.ca's new theme - Aug 3 2018 AG.  */
html input[type='button'], input[type='reset'], input[type='submit'] {
    -webkit-appearance: button;
    cursor: pointer;
	color: #335075;
	height: auto;
	width: auto;
    min-height: 36px;
    min-width: 36px;
    white-space: normal;
    background-color: #eaebed;
    border-color: #dcdee1;
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    background-image: none;
    padding: 6px 12px;
    font-size: 16px;
    line-height: normal;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: border-box;	
    margin-bottom: 5px;

}

/* Hides input buttons with id=Clear or Effacer */
#Clear, #Effacer {
	display: none;
}
/* Reduces the space before and after Date Modified: */
.pagedetails {
    padding-bottom: 1em;
    padding-top: 1em;
}

/* Add alerts to APEG - no info icon, using old class. */
/* APEG - Mimics the ic_info blue alert. No icon/close. */
div.ic_info {
	padding: 15px;
    border-style: solid;
    border-width: 0 0 0 4px;
    background: #d7faff;
    border-color: #269abc;	
    color: #000;
	width: 102%;
}
/* APEG - Mimics the ic_alert red alert. No icon.
   Class is used for error messages at the top and in the table of Study/Practice Exam tool. Use orignial widths only. 
   Used in div and span tags. Span tag, in Error message for Official Exam Login for example, won't work without display: block;   
*/
.errorMessageSpan {
	display: block !important;
	padding: 15px;
    border-style: solid;
    border-width: 0 0 0 4px;
	background: #f3e9e8;
    border-color: #d3080c;
    color: #000;
    margin-top: 3px;
    margin-bottom: 3px;
	width: 100%;
	min-width: 100%;
}
div.ic_warning {
	padding: 15px;
    border-style: solid;
    border-width: 0 0 0 4px;
    background: #f9f4d4;
    border-color: #f90;
    color: #000;
    margin-top: 3px;
    margin-bottom: 3px;
	width: 100%;
	min-width: 100%;
}
/* APEG - Mimics the ic_success green alert. No icon. */
div.ic_success {
	padding: 15px;
    border-style: solid;
    border-width: 0 0 0 4px;
	background: #d8eeca;
    border-color: #278400;
    color: #000;
    margin-top: 3px;
    margin-bottom: 3px;	
}
/* APEG - table caption formatting */
.icBgB {
	background-color: #335075;
    color: #fff;
    margin-top: 23px;	
    margin-bottom: 23px;
}

/* APEG - table formatting for study tool. */
table {    
	margin-left: 20px;
	margin-bottom: 23px;
	border-bottom: 1px solid grey;
}
/* APEG - table header formatting */
th {
	padding-top: 7px;
	padding-bottom: 7px;
}
/* APEG - table header & data formatting */
td, th {
	padding-right: 20px;
	padding-left: 20px;
}
/* APEG - Use coded padding for formatting. */
.padding20 {
	padding: 20px;
}
/* APEG - Use coded padding for formatting ic_info alert.  
   Added 15px for the Question Choices. */
.paddingLeft20 {
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 20px;
}
/* APEG - Must add space between Radio Button and Text Question. */
input[type=radio] {
    margin-right: 10px;
}
/* APEG - Question Choices should not be bold. */
label {
	font-weight: normal;
}
/* Want to make checkboxes bigger - used in things like privacy statements etc. Can't get it to work. */


/* Below div makes APC label/input fields in the majority of service pages align, and resize with mobiles, witout affecting APEG (tested). */
/* Designed for form items, this will ensure that the label floats evenly to the left of the form component it represents.
   with enough space to the right so as not to croud the input box, and enough space at the bottom for readability between labels. */
div.apcItem label, div.apcItemNoBorder label, .apcLabel {
    float: left !important;
    width: 270px;
    padding-right: 20px;
}