/*
Read G:...\HardyAcerD\IT-Tools\SFDC-CSS-Javascript\ccncssimplementation.doc also stored in
     ccnus.org/various/resources/ccncssimplementation.docx to understand how css stylesheets works with one another.
	 Last revision on 20210406 on Acer64.D.TMP, not copied over G not the server.
Choice of colors:
rgb(230,230,230) = lighter than lightGrey used everywhere as:
- OK for text on white,
- OK as background for h1/h2 color Caribbean blue,
- OK in table to distinct row odd/even,
*/
/* below used for ratings*/
@font-face{
font-family:'Glyphicons Halflings';
src:url('https://www.ccnus.org/various/qualityindex/fonts/glyphicons-halflings-regular.eot');
src:url('https://www.ccnus.org/various/qualityindex/fonts/glyphicons-halflings-regular.eot') format('embedded-opentype'),
url('https://www.ccnus.org/various/qualityindex/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('https://www.ccnus.org/various/qualityindex/fonts/glyphicons-halflings-regular.ttf') format('truetype')
}
@page{
margin:0;  /* different margins applies to .letWra, .labWra, .badWra, .... below in this css */
}
/* @page works only for margin, orphans, page break */
/* size:217mm 279mm; Does not work. Not supported in browser*/
/* .por .lan portrait/landscape defined in CCNCUSTOMER.css as depends us/letter vs fr/A4 format. Default is us07ccnsit*/
/************************* Applies to Media print  ******************************************/
@media print{ /*below visible in browser print preview */
@page{      /* the size of page is defined by the size and landscape/Portrait of the paper page used when printing */
margin:0;   /* different margins applied in .letWra, .labWra, .badWra, ... in this css  */
}
/*padding:0;  /* COMMENTED as trigger CSS warning. class such as .letWra/.letCon define how the content fits in the page */
body{
padding:0;
margin:0;
font-size:10pt;
border:none;
-webkit-print-color-adjust:exact !important;
}
/*background:none; /* COMMENTED as prevent to display tra.OptionColor*/
body.letter{
font-size:11pt;  /*applies to elements in Component through inherit if fonSiz is not defined, but not to elements for which font-size is set*/
                 /*also defined in CCNCustomer.css*/
line-height:120%;
border:none;
}
/*font-family:Times; /*defined in CCNCUSTOMER.css, which is mostly us07ccnsit.css as used to print letters in CNSenEmaTemCpmCom/ */
/*a:link{color:rgb(255, 0, 0) !important;background:transparent;text-decoration:none;} #0066c0 = rgb(0, 102, 192) = amazon blue for link. before #0000EE*/
input{
border:0.5mm solid rgb(230,230,230);
border-radius:0mm;
}
/* Below the 3 components in any Auw page */
.wrapperAuw{  /* other styling defined in Generic section */
width:100%;
}
#CNCusMemHeaAuwComHeaRow1Tab{ /* Hides the header */
display:none !important; /* important to overrule the page useProNam condition */
}
.picBac{
display:none !important; /*similar to responsive design phone*/
}
.comRig{
display:none !important; /*similar to responsive design phone*/
}
.CNFooAuwComDiv{ /* Hides the footer */
display:none !important;  /* important to overrule the page useProNam condition */
}
#CNSelEveComSelEveWra{  /* page with large picture as background */
height:150mm;
}
#CNSelEveCommap-canvas{ /* Google maps */
height:150mm;
}
#CNLisEveAuwCommap-canvas{ /* Google maps */
height:150mm;
}
#CNLogoutAuwAuwComDiv{
height:150mm;
}
.message {
border-width:0.5mm;  /*overrides 1px which is not printed*/
}
.bor1{
border-width:0.5mm;  /*overrides 1px which is not printed*/
}
.letWra{     /* letter table wrapping each letter templates in the paper page. Not used for label, badges, .. @page is set with margin and passing = 0*/
width:100%;  /* so that it takes all @page */
padding:20mm;/*Does not work I think. Replaced by .letCon*/
}
.letCon{     /*letter table content*/
margin:20mm;
}
.vehDatSheWraTab{ /* table wrapping each vehicle data sheet in the paper page. To be replaced by CCNVehDatSheWraTab? */
border:2px solid lightGrey;
margin-top:10mm;
margin-right:10mm;
margin-bottom:10mm;
margin-left:10mm;
}
/*width:259mm;  /*defined in orgShort.css / us07ccnsit.css as letter vs A4 format*/
/*height:197mm; /*defined in orgShort.css / us07ccnsit.css as letter vs A4 format*/
/* Below just for test
.vehDatSheWraTab > tbody > tr > td{
height:100%;
}
*/
.letLanTab, .CCNDipWraTab, .CCNVehDatSheWraTab, .CCNFordVehDatSheWraTab{  /*US-Letter Landscape. .CCNDipWraTab, .CCNVehDatSheWraTab, .CCNFordVehDatSheWraTab to be replaced in pages by .letLanTab = generic*/
                                                     /*table wrapping each diploma / CCN datasheet in the paper page.*/
width:279mm;  /*default value = letter 8.5x11. Maybe overridden in orgShort.css/us07ccnsit as letter vs A4 format*/
height:216mm; /*default value. Maybe overridden in orgShort.css/us07ccnsit as letter vs A4 format*/
border:none;   /*none because no border on print*/
margin-top:auto;   /*centers the preview only*/
margin-right:auto;
margin-bottom:auto;
margin-left:auto;
}
.CCNDipWraTab{
/* no background image as printed on Gartner36001 printed diploma frame*/
}
.CCNVehDatSheWraTab{ /*Set also in ccnusorgnoie.css as displayed for all devices but mobile phone*/
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;
}
.CCNVehDatSheWraTabImg{ /*Set also in ccnusorgnoie.css as displayed for all devices but mobile phone*/
background-image:url('https://ccnus.org/stylesheet/various/CCNDatSheWraTab-9x12L.jpg'); /*exact same ratio as Letter 8.5/11 = 1.291*/
}
.CCNFordVehDatSheWraTabImg{ /*Set also in ccnusorgnoie.css as displayed for all devices but mobile phone*/
background-image:url('https://ccnus.org/stylesheet/various/CCNFordDatSheWraTab-9x12L.jpg'); /*exact same ratio as Letter 8.5/11 = 1.291*/
}
.CCNPorscheVehDatSheWraTabImg{ /*Set also in ccnusorgnoie.css as displayed for all devices but mobile phone*/
background-image:url('https://ccnus.org/stylesheet/various/CCNPorscheDatSheWraTab-9x12L.jpg'); /*exact same ratio as Letter 8.5/11 = 1.291*/
}
.CCNVehDatSheWraTabtd{
padding:20mm;
}
.CCNDipWraTabtd{
padding:25mm;
}
.CCNVehDatSheTabTd{
height:100%;
}
.CCNVehDatSheQRCodtr{
display:table-row;
}
.vehDatSheMaiQRCodtab{
display:table;
}
/* Below are elements used in Components, named as ComponentName+Element name */
.CNOrgPic1OrgPic1{  /* Used in CNOrgPic1. TBR by picOrgLogS */
height:15pt;
/*max-height:25mm;  /* do not work in pdf Prod 25mm */
/*max-width:60mm;    /* Prod 60mm */
}
/*read not about .pic?? in mediascreen*/
.picFRXXS{height:4mm;}
.picFRXS{height:10mm;}  /*+6*/
.picFRS{height:18mm;}   /*+8*/
.picFRSM{height:28mm;}  /*+10*/
.picFRM{height:41mm;}   /*+13*/
.picFRL{height:58mm;}   /*+17*/
.picFRXL{height:80mm;}  /*+22*/
.picVRXXS{max-height:4mm;max-width:8mm;}
.picVRXS{max-height:10mm;max-width:20mm;}
.picVRS{max-height:18mm;max-width:32mm;}
.picVRSM{max-height:28mm;max-width:56mm;}
.picVRM{max-height:41mm;max-width:82mm;}
.picVRL{max-height:58mm;max-width:116mm;}
.picVRXL{max-height:80mm;max-width:160mm;}
.picBilEve{  /*variable ratio. Used in CNUpdEveAuwCom, CNManEveAuwCom*/
max-height:50mm;
max-width:50mm;
}
.orgLogEvePic{
max-height:20mm; /*must be same as picOrgLogS*/
max-width:40mm; /*must be same as picOrgLogS*/
}
/*below used in labels, badges, ....*/
.labWra{       /* table wrapping each labels pages templates only, inside the page that has no margin*/
margin-top:11mm;
margin-right:3mm;
margin-bottom:0;
margin-left:3mm;   /* page width = 217mm for letter @page defined with 0 margin */
padding:0;
border:0.5mm solid white; /* white in prod, purple in test; To see how table position in wrapper */
}
.labWraCom{    /* table in .labWra, wrapping the labels but not the table footer */
height:255mm;  /* to position the footer at the bottom of the page*/
width:211mm;   /* 217-3-3 required so that 33.3% below has a reference to match */
border:0.5mm solid white; /* white in prod, red test only; To see how table position in this wrapper */
}
.env912WraTab{
width:305mm;
height:229mm;
border:none;
}
#env912td1{
font-size:8pt;
padding-top:10mm;
padding-left:20mm;
}
#env912td2{
font-size:8pt;
padding-left:20mm;
}
#env912td3{
font-size:15pt;
padding-top:80mm;
padding-left:150mm;
border:0pt solid red;
}
body.label .bPageBlock .detailList .dataCol{
width:33.3%;    /* % works as long as container has a defined size */
padding-top:0mm;     /* this is padding of content of td / td. no need as vertical-align=middle*/
padding-right:5mm;
padding-bottom:0mm; /* no need as vertical-align=middle*/
padding-left:5mm;
margin:0;
border-radius:3mm;       /* test only to see width as inspector does not work in Print mode*/
border:0.5mm solid white;  /* color rgb(230,230,230) test only to see width as inspector does not work in Print mode. no border = height+1mm */
}
.labWra td{   /* Each td in table in Component */
font-size:9pt;
height:24mm;
padding:0mm;   /* this is padding of td / its container. no padding top/bottom requited as align=middle */
margin:0;
}
.labWra tr{
margin:0;
padding:0;
}
.labFoo{  /* labels/badges / pages footers to identify which page of labels/badges it is */
font-size:6pt;
margin-left:5mm;
}
body.badge{ /*used CNParBad*/
padding:7mm;
/*border:2px solid pink; commented in prod*/
}
.badWra{      /*Applied to table wrapping each badge pages templates only, inside the @page that has no margin*/
width:100%;   /*100% so that is uses 100% of body.badge*/
padding:0;
margin:0;
/*border:1mm solid red; /*commented in prod, red test only; To see how table position in this wrapper */
}
.badWraCom{   /*Applied to table wrapping the badges but not the table footer */
height:248mm;/*248mm = USLetter.h279-31 = space for footer*/
width:100%;
padding:0;
margin:0;
/*border:1mm solid purple; /*commented in Prod, purple test only; To see how table position in this wrapper */
}
body.badge .bPageBlock .detailList .dataCol{
width:50%;
padding-top:2mm;    /* padding of the content of each badge */
padding-right:2mm;
padding-bottom:2mm;
padding-left:2mm;
border:0.5mm solid white;   /* white in prod. Grey Test only: to visualize each badge on screen. */
border-radius:2mm;
}
body.badge .aopCom{
max-width:101mm;  /* =202/2. used only for when there is just one badge */
/*border:1px solid pink;  USed only for test*/
}
.badWraCom td{      /* td in table that embed the component*/
font-size:9pt;
height:72mm;
}
body.badge .badTab{  /* space between each individual table - per data, org data, veh data in each badge */
margin-top:2mm;
}
body.ticket{ /*used CNOrdIndTra*/
padding:7mm;
/*border:2px solid pink; commented in prod*/
}
.ticWra{      /*Applied to table wrapping each badge pages templates only, inside the @page that has no margin*/
width:100%;   /*100% so that is uses 100% of body.ticket*/
padding:0;
margin:0;
border:1mm solid red; /*commented in prod, red test only; To see how table position in this wrapper */
}
.ticWraCom{     /*Applied to table wrapping the tickets but not the table footer */
height:248mm;   /*248=279-31 = space for footer*/
width:100%;
padding:0;
margin:0;
border:0.5mm solid purple; /*commented in Prod, purple test only; To see how table position in this wrapper */
}
.td01{ /*USXXCCNUSLParVehDatSh3GraPri*/
height:10mm;
}
.td02{
height:20mm;
}
.td03{
height:30mm;
}
.td05{
height:50mm;
}
.td75{
height:75mm;
}
.td10{
height:100mm;
}
#vehLoctd{ /*USXXCCNUSLParVehDatSh3GraPri*/
min-width:50mm;
}
} /* END Applies to media print */
/**** BELOW media screen related to mass generated HTML letters, labels, badges, ....  */
@media screen{
body.letter{
background:rgb(230,230,230);
font-size:11px;  /*so that it looks about the same as default media print=11pt.*/
                 /*Maybe also defined in CCNCustomer.css so that it is aligned with CCNCustmer.css media print if not Std*/
}
.letWra{       /* table wrapping each letter templates = preview */
width:532px;   /* same height/width ratio as a 210*297mm=1.41 portrait page */
height:750px;  /* 750px = upper limit on 1440*768 so that letter appears complete on screen*/
margin-top:10px; /*Leave a 5px margin-bottom on 1440*768*/
margin-left:auto;
margin-right:auto;
background:white;
padding:50px;  /*Does not work on table. Applied to l.etCon  50px = about same as 1" on paper visually. Different for label pages / badge pages */
}
.letCon{     /*letter table content*/
margin:50px;
}
.letLanTab{  /*US-Letter Landscape. Do not use body.letter. See print in us07ccnsit. Used in USXXCCNCUSVehDatShe001GraPri */
border-spacing:0;  /*replaces cellspacing and cellpadding*/
border-collapse:collapse;
font-family:Arial, Helvetica, sans-serif;
background:white;
border:1px solid lightGrey;  /*so that border is visible on screen, but not when printed*/
}
/*margin-right:auto; /* COMMENTED as domToImage messes-up with it. so that is is centered in body*/
/*margin-left:auto;  /* COMMENTED as domToImage messes-up with it. so that is is centered in body*/
.letLanTab > tbody > tr > td{
padding:0px;
vertical-align:top;
}
.CCNVehDatSheQRCodtr{
display:none;  /*so that the QR-Code allowing dynamic access to the vehicle datasheet is not visible as no point*/
}
.vehDatSheMaiQRCodtab{
display:none;
}
/*.letLanTab also set in ccnusorgnoie.css for screen dimensions*/
.env912WraTab{
margin-top:20px;
width:700px; /*same ratio as 9*12*/
height:525px;/*same ratio as 9*12*/
background:white;
margin-left:auto;
margin-right:auto;
}
.CCNDipWraTab{ /*complements .letLanTab: adds background. table wrapping each diploma sheet = preview. Must be printed on CCNGartner36001*/
            /*not set in ccnusorgnoie.css as not meant to be displayed on mobile phone*/
background-image:url('https://ccnus.org/stylesheet/various/CCNGartner36001-9x12L.jpg'); /*exact same ratio as Letter 8.5/11 = 1.291*/
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;
}
.bor1{
border-width:1px;  /*overrides 1px which is not printed*/
}
/*picFR?? is used 1)when picture is a known ratio, 2)when picture is variable ratio, but no need to enforce surface as in VR*/
.picFRXXS{height:10px;}
.picFRXS{height:30px;} /*CNCusMemHeaPerPic 25 too small*/
.picFRS{height:47px;}
.picFRSM{height:74px;}
.picFRM{height:105px;} /*means width=157.5*/
.picFRL{height:150px;}
.picFRXL{height:220px;}
/*.picVR?? below limits both max-height and max-width so that logo have roughly the same surface/importance */
/*this may lead to the image to be distorted if its original ratio is > 1.5. Eg:  brand logo in CNEveParAuw */
/*ratio height/width = 2 is a average. Logo very long (Sports Car Market/Aston-Martin) looks small than tall ones (Ackmermann/Honda)*/
/*if ratio = 1.2, Aston-Martin looks small. If 4, Honda looks small*/
/*the logo that looks the bigger is the one with a 2 ratio (Hagerty) as it uses 100% of height and 100% of width*/
/*max-height must match the FR when 2 images are side to side*/
.picVRXXS{max-height:10px;max-width:20px;} /*Logarithmic scale*/
.picVRXS{max-height:30px;max-width:50px;}  /*+20*/
.picVRS{max-height:47px;max-width:94px;}   /*+22*/
.picVRSM{max-height:74px;max-width:146px !important;}  /*+27 !important to override .gm-style img in CNSelEveCom/CNLisEveAuwCom*/
.picVRM{max-height:105px;max-width:210px;} /*+31*/
.picVRL{max-height:150px;max-width:300px;} /*+45*/
.picVRXL{max-height:220px;max-width:440px;}
.picBilEve{  /*variable ratio. Used in CNUpdEveAuwCom, CNManEveAuwCom*/
max-height:130px;
max-width:80px;
}
.picModHel{ /*Modal help. CNPosHel*/
width:720px;
}
/*
.picThiCom{ pic with width 1/3 of the component width. Eg: CNUpdEveAuwHel, cnfreaskque
width:250px;
}
*/
.orgLogEvePic{ /*orgLog in left-up corner of evePic. CNLisEveAuw, CNSelEve */
max-height:60px; /*must be same as picOrgLogS*/
max-width:120px; /*must be same as picOrgLogS*/
}
.labWra{       /* table wrapping each labels pages templates including footer table = preview */
width:500px;   /* same height/width ratio as a 21*29mm page */
height:690px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
background:white;
padding:5px;    /* different for letters */
/*border:1px solid purple; /*Commented in prod, purple in test; To see how table position in wrapper */
}
.labWraCom{       /* table wrapping each labels pages templates not including footer table = preview */
height:670px;     /* % do not work here; Why ?? used to display table footer at the end. Height = 10 rows of labels  */
border:1px solid white; /* white in prod, Pink in test;  */
}
#env912td3{
font-size:20px;
padding:150px 0 0 200px;
}
/*Below used in CNPosLab*/
body.label .bPageBlock .detailList .dataCol{
width:33.3%;
padding-top:0px;         /* vertical-align:middle */
padding-right:10px;      /* this is padding of content of td / td */
padding-bottom:0px;      /* vertical-align:middle */
padding-left:10px;       /* this is padding of content of td / td */
border:1px solid Grey;   /* Always grey. To visualize each label on screen. Not display in media print */
border-radius:0px;       /* To visualize each label on screen. Not display in media print */
}
.labWra td{      /* table that embed the component*/
font-size:9px;
height:50px;    /* should allow 10 rows to be visible in the preview page */
padding:0;     /* this is the padding of the td / its container,  NOT its content */
}
.labFoo{  /* labels / badges / pages footers to identify which page of labels/badges it is */
font-size:5px;
margin-left:5px;
}
body.badge{
padding:10px 20px 10px 20px;
/*border:2px solid pink;*/
}
body.badge *{
font-size:8px;  /*so that the preview matches the layout of the print */
line-height:100%;
}
.badWra{        /*Applied to table wrapping each badge pages templates only, inside the @page that has no margin*/
width:500px;    /*same height/width ratio as a USLetter279*216mm page*/
height:646px;
margin-top:10px;
margin-left:auto; /*centered in body.badge*/
margin-right:auto;
/*margin-bottom:10px; not required as height set the size*/
background:white;
border:1px solid rgb(230,230,230);
}
.badWraCom{   /*Applied to table wrapping the badges but not the table footer */
width:100%;
height:97%;
/*border:1px solid blue; /*commented in prod*/
}
body.badge .bPageBlock .detailList .dataCol{
width:50%;     /* not required when component empty as applied auto. But required to enforce 50% when stuff in component ?????*/
padding:5px;
border:1px solid Grey;   /* To visualize each badge on screen. Not display in media print */
border-radius:6px;       /* To visualize each badge on screen. Not display in media print */
}
body.badge .aopCom{
max-width:236px;  /* =472/2. used only for when there is just one badge */
/*border:1px solid pink;*/
}
.badWraCom td{      /* table that embed the component*/
font-size:9px;
height:200px;    /* Allows 3 rows to be visible in the preview page */
}
body.badge .badTab{
margin-top:3px;
}
body.ticket{
padding:10px 20px 10px 20px;
/*border:2px solid pink;*/
}
body.ticket *{
font-size:8px;  /*so that the preview matches the layout of the print */
line-height:100%;
}
.ticWra{        /*Applied to table wrapping each ticket pages templates only, inside the @page that has no margin*/
width:500px;    /*same height/width ratio as a USLetter279*216mm page*/
height:646px;
margin-top:10px;
margin-left:auto; /*centered in body.ticket*/
margin-right:auto;
/*margin-bottom:10px; not required as height set the size*/
background:white;
border:1px solid rgb(230,230,230);
}
.ticWraCom{   /*Applied to table wrapping the tickets but not the table footer */
width:100%;
height:97%;
border:1px solid blue; /*commented in prod*/
}
.td01{ /*USXXCCNUSLParVehDatSh3GraPri, but format should be changed using USXXCCNCUSVehDatShe001GraPri responsive design logic*/
height:20px;
}
.td02{
height:40px;
}
.td03{
height:130px;
}
.td05{
height:100px;
}
.td75{
height:150px;
}
.td10{
height:400px; /*600px COMMENTED so that page takes minimum height */
}
#vehLoctd{ /*USXXCCNUSLParVehDatSh3GraPri*/
min-width:200px;
}
}
/**************END media screen *********/
/*************** GENERIC *****************/
/*************** GENERIC *****************/
html{
overflow-y:scroll;  /*enforces the right scrollbar to be always visible even if not necessary so that pages are all the same width BUT on CNSelEve*/
overflow:-moz-scrollbars-vertical; /*Mozilla*/
/*overflow:auto !important; overrides the inlineedit in inputTextArea that jQuery html.overflow.hidden which modify layout by hidding scrollbar*/
}
body{ /*to be replaced by CCNbod*/
background-color:white;
font-family:Arial, Helvetica, sans-serif;  /*Lato, */
color:rgb(72, 72, 72) !important;     /* AirBnB grey */
margin:0;   /*otherwise browsers set a >0 value*/
padding:0;
border:0;
outline:0;
user-select: none;          /*Prevents cut and paste. Standard*/
-webkit-user-select: none;  /* Chrome all / Safari all. To avoid copy and paste */
-moz-user-select: none;     /* Firefox all */
-ms-user-select: none;      /* IE 10+ */
-webkit-touch-callout:none;
}
.CCNbod{  /*as CP-UI/ALF-UI remove this class, CCN pages in CP-UI uses SFDC default. OK*/
background-color:white;
font-family:Arial, Helvetica, sans-serif;  /*Lato, */
color:rgb(72, 72, 72) !important;     /* AirBnB grey */
margin:0;   /*otherwise browsers set a >0 value*/
padding:0;
border:0;
outline:0;
user-select: none;          /*Prevents cut and paste. Standard*/
-webkit-user-select: none;  /* Chrome all / Safari all. To avoid copy and paste */
-moz-user-select: none;     /* Firefox all */
-ms-user-select: none;      /* IE 10+ */
-webkit-touch-callout:none; /*Required. Prevents the pop-up 'share' when pressing on a picture on iPhone*/
}
/*font-size:100%; set in RD*/
/*color, font-family defined in ccnusorgauw.css*/
*{
-webkit-text-size-adjust:none; /*overrides mobile device minimum font-size in iMail (gmail, aol, ...). Does not work in remote css.*/
}
::-webkit-scrollbar { /*Custom scrollbar not supported in Firefox nor Edge*/
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;  /*Track*/
}
::-webkit-scrollbar-thumb {
background: #888;  /*Handle*/
}
::-webkit-scrollbar-thumb:hover {
background: #555;  /*Handle on hover */
}
/*Below no good on '*' as hides the checkbox/select list/.... Must be applied on each element. See btn below.
*{
-webkit-appearance:none; remove Safari CSS
-moz-appearance:none;    remove Mozilla CSS
}
*/
/***Below HTML element related, in alphabetical order, but html and body*/
.com .btn, .btn{    /*applied automatically to all apex:commandButton by SFDC. overrides common/extended.css*/
display:inline;
font-family: Arial, Helvetica, sans-serif !important;  /*overrides SFDC common.css*/
text-transform:initial;
color:white;
font-size:100%;  /* not !important as must be dynamically updated in loadpiccpm.php */
font-weight:400;
min-width:80px;
border:none;
text-align:center;
border:none;
border-radius:15px;
margin:0.3em;
padding:4px 15px 4px 15px;
background-color:rgb(66, 192, 251); /*Caribbean blue*/
background-image:none;  /*overrides SFDC common.css*/
background-repeat:no-repeat;    /*overrides common.css*/
background-position:inherit;    /*overrides common.css*/
-webkit-appearance:none; /*remove Safari CSS*/
-moz-appearance:none;    /*remove Mozilla CSS*/
outline:none; /*Hides the browser introduced outline  */
text-decoration:none;
text-transform:initial;
}
.hidBtn, .com .hidBtn{
display:none;
}
.com .btn:hover{
background-color:rgb(36, 223, 252); /*one shade lighter than CB*/
}
.com .btn:active{
background-color:rgb(36, 223, 252); /*one shade lighter than CB*/
}
.btn.buy{
background-color:DarkOrange;
}
.btn.buy:hover{
background-color:Orange;
}
.btn.buy:active{
background-color:Orange;
}
.com .btnDisabled{  /*.btn style do not apply defacto. Below all the same as .btn but background-color*/
font-family: Arial, Helvetica, sans-serif;  /*overrides SFDC common.css*/
text-transform:initial;
color:white;
font-size:100%;  /* not !important as must be dynamically updated in loadpiccpm.php */
font-weight:400;
min-width:5em;
border:none;
text-align:center;
border-radius:15px;
margin:0.3em;
padding:4px 15px 4px 15px;
background-color:darkGrey;
background-image:none;  /*overrides SFDC common.css*/
background-repeat:no-repeat;  /*overrides common.css*/
-webkit-appearance:none; /*remove Safari CSS*/
-moz-appearance:none;    /*remove Mozilla CSS*/
outline:none; /*Hides the browser introduced outline  */
text-decoration:none;
text-transform:initial;
}
.com .btnDisabled:hover{
background-color:darkGrey; /*same as btnDisabled; Being disabled, the button does not need to change*/
}
.com .btnDisabled:active{
background-color:darkGrey; /*same as btnDisabled; Being disabled, the button does not need to change*/
}
.com .btn.search{
background-color:red;
}
.com h1, .com h2, .com h3, .com h4{   /*h4 used in SFDC Std error message but hidden*/
display:inline;  /*common.css uses also inline for CP-UI*/
font-family:Lato, Arial, Helvetica, sans-serif;  /*ExoLight;exoThin, ExoLight*/
text-transform:initial;
font-weight:700;
margin:0;
padding:0;
-webkit-margin-before:0;
-webkit-margin-after:0;
-webkit-margin-start:0;
-webkit-margin-end:0;
}
.h1, .h2, .h3, .h4{ /*.h1 .h2 passed as component attributes*/
font-family:Lato, Arial, Helvetica, sans-serif;  /*ExoLight;exoThin, ExoLight*/
/*color:rgb(62, 125, 154); /* blue will be set to rgb(72, 72, 72)*/
text-transform:initial;
font-weight:700;
margin:0;
padding:0;
-webkit-margin-before:0;
-webkit-margin-after:0;
-webkit-margin-start:0;
-webkit-margin-end:0;
}
.com h1, .com h2, .com h3{
line-height:100%;
}
.com h2, .com h3{
color:rgb(66, 192, 251);	
}
.com h2{
padding:6px 0px 6px 0px;
}
.h2{  /*applied when class passed as component attribute. Must be the same as h2*/
display:inline;
font-size: 125%;
line-height:100%;
padding:6px 0px 6px 0px;
color:rgb(66, 192, 251);
}
.h3{
display:inline;
font-size:105%;
line-height:100%;
padding:6px 0px 6px 0px;
color:rgb(66,192,251);
}
.pri{   /* prices */
font-size:110%;
font-weight:700;
color:DarkOrange; 
}
.pri h2, .pri h3, .pri p{
color:DarkOrange; 
}
.h1VehDatShe{ /*Title in USXXCCNUSLParVehDatSh3GraPri */
font-size:125%;
color:rgb(66,192,251) !important;  /*important overrides tab0 td. Carribean Blue of the icons*/
font-weight:700;
}
.h2VehDatShe{ /*Title in USXXCCNUSLParVehDatSh3GraPri */
font-size:110%;
color:rgb(66, 192, 251) !important;  /*Carribean Blue of the icons*/
font-weight:400;
}
/* p related***/
.com p{  /*default value to overrides browser/SFDC setting. Used by CKE. In CCN, must be complemented by a class CCNp, CCNp2, ...*/
display:block;
margin:0.5em 0 0 0;
line-height:110%;
text-align:justify;
-webkit-margin-before:0px;   /*overrides user agent in richTextFormat does not work*/
-webkit-margin-after:0px;    /*overrides user agent*/
}
p.CCNp{ /*applies to p. required to override .com p  .CCNp p does not work*/
line-height:150%;
} 
p.CCNp2{ /*applied to p class='CCNp2' */
margin:0.3em 0 0 0;
line-height:120%;
}
.CCNp2 p{  /*applied to td or any other element which contains p, such as a SFDC label with p*/
margin:0.3em 0 0 0;
line-height:120%;
}
p.CCNp3{  /*applied to p. Used for p inserted by custom CKEditor so that it is on same line as title. Eg1: CNModDes1*/
display:inline;
margin:0.3em 0 0 0;
line-height:120%;
}
.aotAopLev1{  /*to be replaced by pLev1*/
}
.pLev1{       /* replaces .aotAopLev1 */
font-size:95%;
margin-left:2em;
margin-right:2em;
text-indent:-1em;
}
.pLev2{
font-size:90%;
margin-left:4em;
margin-right:4em;
text-indent:-1em;
}
.com ol{
margin:0px;
padding:0.5em;	
}
.com ul{
list-style-type:none;
margin:0.1em;
padding:3px;
}
.com li{
list-style-image: url('../icon/CNLiCB6.png');
list-style-position: inside;
margin:0.4em 1em 0.4em 2em;
text-indent:-0.8em;
padding-left:0;
}
/*select related*/
select.qua{  /*VF select lists for Quantity as in all the stores */
font-size:120%;
font-weight:700;
}
select.cnseleve{  /*VF select lists as in CNSelEve */
font-size:120%;
margin:3px;
}
select:disabled{
color:rgb(102, 102, 102);
}
.selAll{                   /*allows user to select text. Used in CNUpdModDes.DataRAW*/
-webkit-user-select: all;  /* Chrome all / Safari all. To avoid copy and paste */
-moz-user-select: all;     /* Firefox all */
-ms-user-select: all;      /* IE 10+ */	
}
/* replaced by .com li
.lic{
list-style-image: url('../icon/CNLiCB6.png');
list-style-position: inside;
margin:0.4em 1em 0.4em 1em;
padding-left:0;
}
*/
.CCNTexAliCen{    /*required because text-align:center; does not work on Safari/iPhone*/
text-align:center;
text-align:-moz-center;
text-align:-webkit-center;
}
.CCNTexAliRig{    /*required because text-align:right; does not work on Safari/iPhone*/
text-align:right;
text-align:-moz-right;
text-align:-webkit-right;
}
/*below selects input[type="radio"] only if inside an element of class CCNRad. Eg: CNSelEve.
  Applies to <apex:selectRadio styleClass="CCNRad ... which generated a html table of class CCNRad, while the input inside the table
  have no class.*/
.CCNRad input[type="radio"]{
display:none;
}
.CCNRad > tbody > tr > td{
vertical-align:middle;  /*CNUpdRefEve. Does not work*/
white-space:nowrap;     /*Forces apex:selectOption.label to stay on one line, which forces the apex:selectRadio to take all the required width*/
}
.CCNRadWra > tbody > tr > td{
white-space:normal;  /*Allows SelectOption to wrap on a multi-line. Eg: CNUpdRefEveCom.refEveMasSOList*/
padding-left:1.5em;  /*required because of indent*/
text-indent:-1.5em;
}
.CCNRad.CCNRadTyp5 > tbody > tr > td{
padding:3px 4px 3px 4px;  /* so that it is same size as inpTexTyp5*/
}
/* IMPORTANT .CCNRad  must NOT be reRender once checked/unchecked, otherwise the label moves on space to the left for unknown reason*/
/*Below displays the rules before the label placed immediately after the input[type=radio] of class CCNRad*/
.CCNRad input[type=radio] + label::before{
content:'';  /*required otherwise not visible*/
display:inline-flex;  /*before inline-block. Flex allows to be centered in td*/
height:11px;
width:11px;
background-color:white;
border:2px solid rgb(66,192,251);
border-radius:2px;
margin:0 3px 0 0;
padding:0;
}
.CCNRad input[type="radio"]:checked + label::before{
background-color:rgb(66,192,251);
}
.CCNRad input[type="radio"]:disabled + label::before{
background-color:White;
border:2px solid darkGrey;
}
/* Below CCNRadInv (invisible) where the checkbox is not displayed, used for selectRadio to look like selectList
   Requires: <apex:outputPanel layout="block" styleClass="CCNRadInv bor1" style="height:200px;background-color:white;overflow:auto;" >
             <apex:selectRadio value="{!ModSel}" layout="pageDirection" styleClass="CCNRadInv" id="aslModSel" >
*/
div.CCNRadInv1{  /*CCNRadInv1 complements CCNRadInv when CCNRadInv is not in a div.Flex. Otherwise, border is on the div.flex.CCNRadInv.container*/
border:2px solid rgb(215,215,215);
border-radius:0.3em;
}
div.CCNRadInv1:hover{
border:2px solid rgb(66,192,251);
}
.CCNRadInv > fieldset{
}
/*width:80%; /*COMMENTED as fieldset.display=block does it. Extends the selected option background to all the space available in container, BUT may trigger the horizontal scroll*/
/*otherwise, the selected option background = option width*/
.CCNRadInv table{ /*applies to the table automatically generated by the SelectRadio*/
white-space:nowrap; /*required so that horizontal scroll when option is longer than container*/
width:100%;    /*display=block does not do it. So that the selected option background stretches to 100% of the fieldset.width set above*/
}
.CCNRadInv input[type="radio"]:checked+label{ /*applies only on the CNSelMod.modSOList*/
display:block;
background-color:rgb(66,192,251);
color:white;
padding:1px;
width:100%;
}
.CCNRadInv input[type="radio"]{
display:none;
}
.com fieldset{  /* used by apex:selectRadio. overrides browser user agent*/
display:block;
margin:1px;
padding:0;
min-width:10px;
border:none;
-webkit-margin-start:1px;
-webkit-margin-end:1px;
-webkit-padding-before:0.2em;
-webkit-padding-start:0.2em;
-webkit-padding-end:0.2em;
-webkit-padding-after:0.2em;
-webkit-padding-before:0.2em;
margin-inline-start:2px;
margin-inline-end:2px;
padding-block-start:0.1em;
padding-block-end:0.1em;
padding-inline-start:0.1em;
padding-inline-end:0.1em;
}
.CCNRadLar input[type=radio] + label::before{ /*Complement CCNRad. Used to display larger checkbox. Not used*/
height:20px;
width:20px;
}
.CCNRadHid input[type="radio"]{  /* Hides checkbox. CNReaRefAuw.OptColSOList*/
display:none;
}
.CCNRadOptCol{
display:inline-block;
height:20px;
width:20px;
margin:0px 5px 0px 0px;
}
/* commented as messes-up
*:disabled{
background-color:transparent;      overrides user agent
}
*/
.com th{ /*applies to all th, regular table,apex:repeat, apex:pageBlockTable. Overrides user agent and SFDC*/
font-family:Lato, Arial, Helvetica, sans-serif !important; /*important required to override SFDC Std css*/
vertical-align:middle !important;
color:rgb(72, 72, 72) !important;
font-weight:400 !important;
background-color:rgb(215, 215, 215) !important;
}
.com th:empty, td:empty{
border:0;
}
.list .headerRow th{ /*applies to SFDC apex:pageTable.apex:facet*/
font-family:Lato, Arial, Helvetica, sans-serif !important;
border-bottom:0px !important; /*overrides common.css*/
border-bottom-color:transparent !important; /*portal.css */
vertical-align:top !important;
color:rgb(72, 72, 72) !important;
font-weight:400; /*overrides common.css and user agent*/
background-color:rgb(230, 230, 230);
}
/*padding:10px 5px 10px 5px !important; COMMENTED as affect apbt with not header*/

/*inputRelated*/
.com input{          /*applies to input, select, ...*/
font-size:100%;
color:rgb(72,72,72);
background-color:white;
margin:0;
border-radius:0;
box-shadow:none;
outline:none;
box-sizing:border-box;
-webkit-appearance:none; /*overrides user agent*/
}
.com input[type="text"], .com input[type="password"]{  /*Aligned with select*/
padding:0.2em 0.3em 0.2em 0.3em; /*Left4px aligned with select & selectOption Left:4px. overrides user agent. important not required*/
border:2px solid rgb(215,215,215); /* overrides 1)user agent 2)border added by SFDC.ininlineedit. May merge with background color*/
box-sizing:border-box;
}
.com input[type="text"].inpTexTyp4, .com textarea.inpTexTyp4{  /*Used for input. Overrides style defined in input[type="text"]. important not required*/
padding:0.3em;
border-radius:0.3em;
}
/*font-size in RD*/
/*margin-right:6px; /*COMMENTED as messes-up flex computation. when there is a date picker value on right*/
.com input[type="text"].inpTexTyp5{  /*Used for input.text when aside a inputSelect.selTyp4. Eg: CNUpdRefEveCom. Overrides style defined in input[type=text]. important not required*/
padding:0.2em 1em 0.2em 0.3em;  /*same size as class selTyp5. right.1em to leave space for arrow.select*/
border-radius:0.3em;
}
/*font-size in RD*/
/*margin-right:0.3em; /*Will require a specific class. when there is a date picker value on right*/
.com input[type="text"]:disabled{
background:rgba(255,255,255,1);
-webkit-text-fill-color:rgb(102, 102, 102); /* Override iOS / Android font color change */
-webkit-opacity:1;   /* Override iOS opacity change affecting text & background color */
}
input[type="password"].inpTexTyp5{  /* Used for */
/*no font-size as dot dot dot*/
padding:0.2em 1em 0.2em 0.3em;  /*same as type.text.inpTexTyp5*/
border-radius:0.3em;
border:2px solid rgb(215,215,215); /* overrides 1)user agent 2)border added by SFDC.ininlineedit. May merge with background color. 2px because inlEditSup(4)*/
}
.com input[type="text"]:focus,.com input[type="password"]:focus, .com input[type="select"]:focus{  /*Does not apply to button. Must be AFTER the other .com input border.styling*/
border:2px solid rgb(66,192,251);
}
.com input:autofill{
background-color:rgb(66,192,251) !important;  /*works with any color on Acer64.Firefox, but white. Must NOT use a light color such as rgba(203,230,239,1) as browser pale yellow takes over. no effect in Chrome because https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill*/
background-image:none !important; /*works in safari*/
color:rgb(72,72,72) !important;  /*works on Acer64.Firefox.*/
}
input:-webkit-autofill{ /*below console might say that it is applied but it is not in reality*/
background-color:rgb(66,192,251) !important;  /*a pale lightBlue. No effect in Chrome because https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill*/
background-image:none !important; /*works in safari*/
color:rgb(72,72,72) !important;   /*No effect on Chrome*/
}
/*below style selects all input[type="checkbox"] only if in the class CCNCheBox. Eg: CNGatAuw/Adm*/
/*There are special CCNCheBoxQui defined in CNPlaQui1AuwCom*/
input[type="checkbox"].CCNCheBox{
-webkit-appearance:none;
height:15px;
width:15px;
background-color:white;
border:2px solid rgb(66, 192, 251); /*On big screen on acer1, user agent form.css overrides this. important no effect*/
box-shadow:none;
padding:1px;
border-radius:3px;
display:inline-flex;  /*before inline-block. Flex allows to be centered in td*/
margin:0px 5px 0px 0px; /*overrides user agent. Same as CCNRad input[type=radio] + label:before*/
}
input[type="checkbox"]:checked.CCNCheBox{
background-color:rgb(66, 192, 251);
}
input[type="checkbox"]:disabled.CCNCheBox{
border:2px solid darkGrey;
background-color:white; /* does not set background on iPad*/
}
.com input[type="text"].selSiz1{  /*Used for inputDate to suggest datePicker*/
/*below background adds the 2 customs arrows*. Because the background below is applied to all cases, all styling must be removed for all browsers*/
/*sometimes requires to defined a hardset width to the input field. Eg; CNUpeEveAuw.CNRainDate*/
background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 90% 50%;
padding:3px 1em 3px 0.3em; /*same as top/bottom/right as selTypTyp5  right=1em because arrow select top-down*/
}
.inpTyp4Hig{  /*used by inlEdiSup4*/
border:2px solid rgb(66, 192, 251) !important; /*important required to override input[type="text"]*/
}
#Name{
visibility:hidden; /*Hides the SFDC Layout required Sobject.record Name in Edit mode*/
}
.com label[for=Name]{
visibility:hidden; /*Hides the SFDC Layout required Sobject.record Name in Edit mode*/
}
.com input[type="text"].inpFloLab, .com input[type="password"].inpFloLab{
height:3em;
padding-top:1em; /*required for input to be at bottom of input field. Works on all device/browsers*/
}
/*line-height:3.5em; /*required for input to be at bottom of input field. Does not work on Safari. Display big cursor/text*/
.floLab{
position:relative;
}
.floLab label{
color:rgb(100, 100, 100);
position:absolute;
left:1em;  /*related to / not equal to padding-left of inpFloLab 8/2*/
top:1.2em; /*40% of .inpFloLab.height*/
-webkit-transition:all 50ms ease-out;
transition:all 50ms ease-out;
pointer-events:none;
overflow:hidden;
text-overflow:ellipsis;
max-width:calc(100% - 2em);
white-space:nowrap;
}
/*z-index:20;  /*required for label to be visible above the light yellow background with some browser.autofill, BUT Commented
                 because as the detection of whether there is autofill or not does not work, it is better to keep the label hidden
				 when field is populated by autofill
*/
.floLab.notEmp label{
font-size:80%;
top:0.5em; 
}
.inpFie50{
width:50%
}
.inpFie75{
width:75%
}
.inpFie95{
width:95%
}
.bodPhpiFr{   /*body of iFrame in PHP pages. cnfoophpifr.html, ...*/
min-height:0px;   /*Overwrites 'general' body element above*/
background:none;  /*Overwrites body element above*/
}
.forCur{ /*Foreign Currency - in Store tables; When user.currency != CCNCustomer.currency */
font-weight:400;
font-size:80%;
font-style:italic;
}
.aopNul{
font-size:90%; /* for long aop to be visible*/
min-height:20px;
background:white;
}
.mesMod{ /*pop-up message./CNManOrgAuw.del.org.Confirm; pictures/CNHomHel. Does NOT apply to Wait GIF. 'modal' is used in qualityindex/bootstrap.min-JS.css*/
background-color:white;
position:absolute;
display:none;
z-index:30; /* must be > to .wraDis=20 */
}
.mesSav{
font-size:90%;
}
.waitM3 .msgIcon{ /*Not used. Displays the loader in the JsmMDiv with message Please wait*/
background-image:url('https://www.ccnus.org/various/tmp/loader-24.gif');
background-position: 0 0;
background-repeat:no-repeat;
width:24px;
height:24px;
}
.waiMod{  /*loader modal associated with all buttons. Display the 24px-gif on the left of the button*/
display:none;       /*made block by opeMod()*/
position:absolute;  /*Fixed does not work as does not work on scroll*/
z-index:15;         /*must be sup to 5*/
/*height:24px;  useless as increasing size of div as no impact on size of GIF*/
/*width:24px; */
}
.waiMod60{  /*loader modal associated with links embedded in pictures. Display the 60px-gif on the center of the picture*/
display:none;        /*made inline-block by opeMod60()*/
position:absolute;   /*Fixed does not work as does not work on scroll*/
z-index:15;
/*height:60px;*/
/*width:60px;*/
}
.req{   /*Required  field. Displays the blue star right of the field. Not used to control field in ccnusorg.js.inpFie(...)/inpFieInlEdi(...) */
background: url(https://www.ccnus.org/stylesheet/icon/CNReq8.png) no-repeat;  /*CNReq12.png also available*/
background-position: right 3px bottom 8px;  /* right 3px bottom 4px with CNReq12*/
padding-right:15px;
}
.aotReqFie{ /*applied to RequiredField to use in ccnusorg.js. Must not be visibility:hidden*/
color:rgb(72, 72, 73) !important;
}
/*font-size:80%;*/
.loc{   /*Locked  field can not be updated */
background: url(https://www.ccnus.org/stylesheet/icon/CNLocDO16.png) no-repeat;
background-position: right -3px bottom 0px;
padding-right:15px;
}
:focus{outline:none;} /*remove the dotted line in older version of firefox. No need for selector*/
::-moz-focus-inner{border:0;} /*remove the dotted line in older version of firefox. No need for selector*/
select:disabled{
color:rgb(102, 102, 102);
background:rgba(255, 255, 255, 1);
-webkit-text-fill-color:rgb(102, 102, 102); /* Override iOS / Android font color change */
-webkit-opacity: 1;   /* Override iOS opacity change affecting text & background color */
}
/* below are style applies to translated custom labels and more as inline style does not work with renderAs=pdf */
.colHea2L{     /* column header in facets on 2 lines; This is not print only. Required for renderAs=PDF to work */
text-align:center;
/*color:red !important;  /* just for test */
}
/*below applies to apex:commandLink and all the <a value= help messages with orange ?. It removes the normal a behaviour.*/
/*Below overrides browser default behavior. a element are styled through custom classes such as .link1, .linkP, .... below */
a{background:transparent;text-decoration:none;}
a:link{color:rgb(0,102,192);}     /* #0066c0 = rgb(0,102,192) = amazon blue for link*/
a:visited {color:rgb(0,102,192);} /*no difference with not visited*/
a:hover{font-weight:400;color:rgb(0,102,192) !important;background:transparent;text-decoration:underline;}
a:active{font-weight:400;color:rgb(0,102,192);background:transparent;text-decoration:underline;}
.helLef{ /*orange/blue ? for help on left side of text*/
margin-right:5px;
}
.helLefL{ /* */
margin-right:20px;
}
.helRig{ /*orange/blue ? for help on left side of text*/
margin-left:5px;
}
.helRigL{ /*CNManPosCom */
margin-left:20px;
}
.linkHelp{  /* Used in help pages. Underline so that the word is clearly visible as a link */
color:rgb(0,102,192) !important;
cursor: pointer;
text-decoration:underline !important;
}
.linP{ /*Links in labels. Eg: CNSubEvePubComaotaopWel. Value ??????*/
cursor:pointer;
text-decoration:underline;
color:rgb(0,102,192); /*rgb(0, 0, 238)=blue std web link; rgb(37, 59, 86) = same as heaTabTex = no good as footer white background*/
display:inline !important; /*because otherwise becomes block after open and mouseover header ?????*/
}
.link1{  /*applied to <a> with href, div, ...  */
font-weight:400;
cursor:pointer;
color:rgb(0,102,192); /*required for element that are not <a> with href. amazon blue for links */
background:transparent;
text-decoration:none;
}
/*Below :hover works even if element is not an <a> with href, but :link and :visited works only on <a> with href, not on opeWin() because
  browser does not compute :visited on opeWin */
.link1:link {color:rgb(0,102,192);}     /*required even if done through .link1*/
.link1:visited {color:rgb(0,102,192);}  /*overrides a:visited. no difference with not visited*/
.link1:hover{color:rgb(0,102,192);text-decoration:underline}
.link1:active {color:red;text-decoration:underline}
.link1 h3:hover{color:rgb(66, 192, 251);text-decoration:underline} /*used in back links*/

.mesDiv{
min-height:60px;
margin:15px 0px 5px 0px;        /*to be overriden in ccnusorgauwnoie.css responsive design*/
border:1px solid transparent;   /*Prevents flicking. not clear why but validated in CNUpdParAuwCom*/
/*box-sizing:border-box; /* Commented as no good. so that the 1px transparent has no impact whether mesDiv display or not*/
}
#divMesMaiEdi{  /*Main Edit: the entire header for CN update pages. Replaces, does not complement mesDiv*/
min-height:60px;  /*same min-height as CNCusMemHeaEmpAuwComConConDiv as sits on top of it*/
position:fixed;
top:0;
left:0;
margin-top:0px;
width:100%;
box-sizing:border-box;
z-index:10; /*must be > .wrapperAuw=1, < .waiMod=15  */
background:white; /*rgb(230,230,230) white required so that CNCusMemHeaEmpAuw does not appear below when update*/
border-bottom:1px solid lightGrey;   /*Prevents flicking. not clear why but validated in CNUpdParAuwCom*/
}
/*position:absolute; position at 0/0 in component. Wait gif is visible, position relative to componentContainer*/
/*position:fixed; position at 0/0 in browser window. modal=Wait gif not visible as positioned relative to componentContainer, even if 
  #divMesMaiEdi is outside of it. Solution would be for the modal to be outside of componentContainer*/
[id*=aotMesSav]{ /*message in mesDivEdi3 with last saved date*/
font-size:90%;
line-height:31px; /*not 35px because too much when message and save button in column mode = no more than 60px. for text-align:middle*/
color:rgb(150,150,150);
white-space:nowrap;
}
/* textarea related*/
textarea{
padding:2px; /*L2px aligned with input.text/select/selectOption Left:2px. overrides user agent. important not required*/
box-sizing:border-box;
}
textarea:disabled.inpTexTyp5{ /*rtf=false*/
background:white;  /*same as input.type=text.inpTexTyp5*/
border-radius:4px; /*same as input.type=text.inpTexTyp5*/
border:2px solid rgb(215,215,215); /*same as input.type=text.inpTexTyp5*/
box-sizing:border-box;
}
.butInApbt{ /* button in apex:pageBlockTable to remove the border*/
border:none !important;  /*overrides sfdc css*/
}
.bPageBlock{             /* must be kept as it is not possible to avoid apex:pageBlock */
margin:0px !important;
padding:0px !important;
background:transparent !important;
}
.bPageBlock .brandSecondaryBrd .apexDefaultPageBlock .secondaryPalette {  /* remove border of PageBlock as I cannot control color in Portal */
border:none !important;  /* must be kept as it is not possible to avoid apex:pageBlock */
}
.secondaryPalette{       /* remove border of PageBlock as I cannot control color in Portal */
border:none !important;
}
.individualPalette .bPageBlock{ /* remove border of PageBlock as I cannot control color in Portal */
border:none !important;
}
.bPageBlock .pbBody{  /*Used in CNSelEveCom around map. must be kept as it is not possible to avoid apex:pageBlock */
margin-top:0px !important;
margin-right:0px !important;
margin-bottom:0px !important;
margin-left:0px !important;
padding:0px !important;
}
.pbBody td{
color:rgb(72, 72, 72) !important; /*overrides SFDC portal.css in all tables*/
}
select{
/* on iOs/iPad, the options are a pop-up that cannot be styled in css*/
-moz-appearance:none; 
-webkit-appearance:none;
background-color:white !important; /*required to keep the option background white; Does not override background above. !important required for when field in table/odd/even*/
padding:2px 6em 2px 4px; /*Overrides user agent. left.4px aligned with input.margin and .inpFloLab.padding. 20px = space between option and custom arrows*/
margin:0;              /*overrides user agent*/
border-radius:0.3em;     /*same as .inpTexTyp4*/
border:2px solid rgb(215,215,215); /*overrides the border added by SFDC.inlineedit. same width as inlEdiSup4(). Same color as .inpTexTyp4. May merge with background color*/
box-sizing:border-box;
}
/*font-size in RD*/
select:focus{
border:2px solid rgb(66, 192, 251);
}
select.selSiz1{ /*applies only to apex:inputField/SelectList where size='1'. Prevents double-arrows to show on select where list is opened*/
/*below background adds the 2 customs arrows*. Because the background below is applied to all cases, all styling must be removed for all browsers*/
background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat right top;
padding-right:1em; /*same as top/bottom/right as selTypTyp5/Typ4  right=1em because arrow select top-down*/
}
.selTyp{ /*used when element is not a select but needs to look like it. */
-moz-appearance:none; 
-webkit-appearance:none;
background-color:white;
margin:0;
border-radius:0.3em;
border:2px solid rgb(215,215,215);
box-sizing:border-box;
}
/*padding set by selTyp4/5*/
.selTyp1{
border:2px solid transparent; /*so that size does not change on focus*/
}
.selTyp:hover, .selTyp1:hover{  /*when .selTyp applies to a div*/
border:2px solid rgb(66, 192, 251); /*same as select:focus*/
}
.selTyp1 label{ /*replaces selTyp CNUdModAuwCom*/
margin-right:0.3em;
}
.selTyp4{ /*when select used with inlEdiSup4()*/
padding:0.3em 1em 0.3em 0.3em;   /*same as top/bottom/right as inpTexTyp4*/
}
/*font-size in RD*/
select.selTyp4:focus{
border:2px solid rgb(66, 192, 251);
}
.selTyp5{ /*Applies to selectList but also apex:outputText value="{0,date, EEE, MMM d yyyy}" style="width:7em;" styleClass="selTyp5" to mimic disabled inputField*/
padding:3px 0.3em 3px 0.3em; /*same as inpTexTyp5 */
}
/*font-size in RD*/
/* does not work. > tbody > .. required
.ticWra{   
vertical-align:top;
}
*/
.ticWra > tbody > tr > td{
vertical-align:top;
}
.ticWraCom > tbody > tr > td{
vertical-align:top;
}
.quizDiv{  /* surrounding apex:pageBlock to get border */
padding: 0px 0px 3px 0px;
}
/* Below are the 3 components at the Auw page level. Device specific styling in Device section */
.CNCusMemHeaAuwComDiv{   /* Not an Id as the Div has a specific Id in each page used by CCNCustomer.css */
padding:0;
margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
border:none;
box-sizing: border-box;
}
.wrapperAuw{  /* in all Auw Pages (not component). Surrounds all .wrapperAuwCon (Container). Style also device specific */
/*width defined in ccnusorgauw.css and ccnusorgcpm.css based on device */
padding:0;        /*must be 0. see comCon to control component position left/right*/
margin-top:0;     /*must be 0. see comCon to control component position top*/
margin-right:auto;
margin-bottom:0;  /*must be 0. see comCon to control component position bottom*/
margin-left:auto;
box-sizing:border-box;
z-index:1;
}
.wraDis{   /*wrapper disable. Used when pop-up */
position:absolute;
top:0;
left:0;
background-color:rgba(0, 0, 0, 0.6);
z-index:20; /* must be < mesMod=30, > #divMesMaiEdi()   */
width:100%;
/*height:2500px;  /*100% does not work as does not all wrapperDiv if scrolling. 2500px does not work as cannot remove scrollbar ???*/
/*overflow:hidden;/*does not work reason while it is done though body in disMesMod()*/
transition:opacity 10s;
}

/* START OF CNFOOAUWCOM. Not in ccnusorgauw.css as also used in php pages (Eg:cninsnotcom.php) in CP-UI */
#CNFooAuwComComConDiv{     /* Defined in CNFooAuwCom */
width:100%;
box-sizing:border-box;
-webkit-tap-highlight-color: transparent;  /*Required to avoid the flicking of iPad on mouEntWraF()*/
background:white;
border-top: 1px solid rgb(230,230,230);
border-top-left-radius:0;
border-top-right-radius:0;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
margin: 0;
padding:4px 12px 4px 12px;
overflow:hidden !important;  /*for PHP page when cnfoophpifr.html is embedded */
-webkit-overflow-scrolling:touch !important;   /*for iPad, PHP page when cnfoophpifr.html is embedded */
}
/* END OF CNFOOAUWCOM */
.CNFooAuwComDiv{  /* Not an Id as the Div has a specific Id in each page used for jQuery component sizing in page*/
/*width implemented in ccnusorgauwnoie.css responsive design*/
padding:0;
margin-top:3px; /*3px required for blank space between main component and footer*/
margin-right:auto;
margin-bottom:0;
margin-left:auto;
box-sizing:border-box;
}
/* End are the 3 components at the Auw page level. Not used 
  below positioning on components in Auw pages, inside .wrapperAuw 
.wrapperAuwConCon{     in all Auw Pages (not component). Surrounds all .con (Component); Required to use width=auto when 2 columns  ???????????
margin: 0px 1px 0px 0px;
padding:0px 1px 0px 0px;
}
*/
.com{  /*Component in auw Pages. Always embedded in wrapperAuw. Applies to picture on right side of page*/
padding:0;
margin:0;
border-radius:0;
-webkit-overflow-scrolling:touch !important;  /* for Ipad Scrol bar*/
}
.comLef{ /*component on the left side of the page*/
}
.comRig{ /*component on the right side of the page*/
border-left:1px solid rgb(230,230,230);
}
/* END positioning on components in Auw pages, inside .wrapperAuw */
/* Below positioning object division inside component */
.componentContainer{   /*to be replaced by comCon*/
-webkit-tap-highlight-color: transparent;  /*Required to avoid the flicking of iPad on mouEntWraF() */
position:static;  /*relative before. absolute no good. Required as positioning of 1)all Wait GIF based on this upper left corner, 2)modal*/
                  /*static overwritten by relative in CNUpdParAuwCom because issue position messages middle picture*/
                  /*There must be NO OTHER element position:relative in the Component, otherwise GIF uses corner of this element*/
margin:0;
background:white;
border-radius:0;
}
.comCon{  /*component container*/
-webkit-tap-highlight-color: transparent;  /*Required to avoid the flicking of iPad on mouEntWraF() */
position:static;  /*relative before. absolute no good. Required as positioning of 1)all Wait GIF based on this upper left corner, 2)modal*/
                  /*static overwritten by relative in CNUpdParAuwCom because issue position messages middle picture*/
                  /*There must be NO OTHER element position:relative in the Component, otherwise GIF uses corner of this element*/
margin:0;
background:white;
border-radius:0;
}
.componentHeader{ /*to be replaced by .tabComHea*/
padding-top:25px;
}
.componentHeader h1{ /*to be replaced by .tabComHea. all h1 inside a div of class componentHeader.*/
/*font-size in ccnusorgnoie.css*/
display:inline-block;
color:rgb(66,192,251); /*better than 72, 72, 72 as same color as CB logo*/
margin:0px 5px 0px 5px;
}
.tabComHea h1{ /*all h1 inside a div of class componentHeader.*/
/*font-size in ccnusorgnoie.css*/
display:inline-block;
color:rgb(66,192,251); /*better than 72, 72, 72 as same color as CB logo*/
margin:0;
}
.h12L{
color:rgb(66,192,251);
}
.comHeaTyp2{  /* to be replaced by componentHeader h1*/
color:#244a5b;  /*25% of blue related to button*/
font-size:1.2em;
line-height:1.6em;
font-weight:700;
}
.componentHeader h3{  /*to be replaced by .tabComHea  all h3 inside a div of class componentHeader */
color:rgb(66, 192, 251);
font-size:90%;
}
.tabComHea h3{  /*to be replaced by .tabComHea  all h3 inside a div of class componentHeader */
color:rgb(66, 192, 251);
font-size:90%;
}

.tdComHeaTit{
width:100%;
}
.componentHeaderIconTitleButtons{
overflow:hidden; /*sol2*/
}
.componentHeaderIcon{ /*to be removed. applies to either div or td*/
display:inline-block;
width:32px;
}
.componentHeaderButtons{
display:inline;
margin:5px 10px 0px 10px;
text-align:center;
}
/*overflow:hidden;  sol2*/
/*float:right;  sol1*/
.componentHeaderHelp{  /* the orange ? right of component header */
float:right;
margin-left:5px;
}
/* END positioning object division inside component */
/* Below used in Auw Component message */
.com .message{   /* SFDC class. Used by CCN JS pop-up message */
border-color:rgb(230,230,230); /*overrides SFDC.css for all messages INFO/CONFIRM/WARNING/ERROR */
background:rgb(230, 230, 230); /*important not required. overrides SFDC std message*/
margin:3px 0px 3px 0px;        /*overrides SFDC std message. 0px on side to align with content*/
min-height:35px;               /*complement the SFDC Std message class*/
}

.messageText{ /*SFDC class*/
color:rgb(72,72,72); /*complement SFDC std message. important not required*/
}
.message .messageText{
margin-left:4px; /*overrides SFDC*/
}
.messageText h4{  /*SFDC class*/
display:none !important; /*hides the Success / Info / Error SFDC Std work in apm message*/
}
.mes{  /*CCN class*/
margin:5px;
padding:5px;
border:1px solid DarkOrange;
color:DarkOrange; 
}
.messageTable{
}
/* Reminiscent of SFDC-Std style; Everywhere  but not styled*/
/* NOT USED in CNUpdParAuw as messes-up CNUpdParAuw.AssTab. */
.messageCell{ /*so that take 100% of space. Not the case by default?*/
}
/*width:100%; COMMENTED 20210320*/
/* Reminiscent of SFDC-Std style; Everywhere  but not styled*/
.messageHelp{
border-color: #E7E7E7 !important;
}
/* border:none no good as changes dimension */
.bPageBlock .message{  /* overrides element.css */
margin:3px;
}
.icoHeaS{  /* icon for CNCusMemHeaAuwCom Your profile/Help/Saved options*/
width:18px;
height:18px;
margin:5px 5px 0px 0px;
}
.icoHeaL{  /* icon for CNCusMemHeaAuwCom main menu*/
width:24px;
height:24px;
}
.icoHeaRD600{  /* icon in place of menu name for CNCusMemHeaAuwCom main menu*/
display:none; /*overriden by ccnusorgnoie.css*/
}
.icoHeaRD812{  /* icon in place of menu name for CNCusMemHeaAuwCom main menu*/
display:none; /*overriden by ccnusorgnoie.css*/
}
.ico24{  /* replaced by icoHeaS. Keep for now. icon for CNCusMemHeaAuwCom Your profile/Help/Saved options*/
width:18px;
height:18px;
margin:5px 5px 0px 0px;
}
.menHeaRD600{  /* menu name in place of icon for CNCusMemHeaAuwCom main menu*/
display:inline; /*overriden by ccnusorgnoie.css*/
}
.menHeaRD812{  /* menu name in place of icon for CNCusMemHeaAuwCom main menu*/
display:inline; /*overriden by ccnusorgnoie.css*/
}
.evePic1Gal{
padding:0px;
vertical-align:top;
margin:0px;
box-sizing:border-box;
border: 1px solid rgb(230,230,230);
}
.picVehS{
position:relative; /*required for icoPer*/
}
.picPer{  /*CNUpdProAuwCom*/
border-radius:50% !important; /*important required to override .pic*/
}
.orgLogEvePic{
position:absolute;
top:2px;
left:2px;
z-index:3;
}
.vehDefModPic{ /*background text 'Model picture' CNEveParAuw */
position:absolute;
padding:0px;
top:0px;
left:0px;
z-index:3;
}
.picAutoResize{ /* all pictures. Used in CNPicGalAuw, CNPlaQui1Auw, ... */
width:100%;
}
.picBac{  /*Background in pages. Must be complemented by picBacLT, picBacCC, picBacRB, ...*/
background-size:cover;
background-repeat:no-repeat;
background-origin:border-box;
}
.picBac2{  /*Background in body. Eg: CNLogoutAuw, CNSelEve, ...Must be complemented by picBacLT, picBacCC, picBacRB, ...*/
           /*Cannot use .picBac as .picbac used in Responsive design display none */
background-size:cover;
background-repeat:no-repeat;
background-origin:border-box;
}
.picBacLT{ /*Background in pages*/
background-position:left top;
}
.picBacCC{ /*Background in pages*/
background-position:center center;
}
.picBacRB{ /*Background in pages*/
background-position:right bottom;
}
.picBelRig{ /*picture below right component Quiz/Enc/Testi*/
margin:0px 0px 0px 0px;
}
.picBelMai{ /*picture below main component*/
margin:0px 0px 0px 0px;
}
.picBor{ /*Picture of no record. CNPosHel*/
border:1px solid rgb(150, 150, 150);
}
.picEve2{ /*used in CNSelEve, CNLisEve. Do not replace by picXXXXX*/
min-height:150px;  /*required so that eveStaPos() can position button in middle*/
width:100%;
top:76px; /*default value; Overridden by eveStaPos()*/
border-bottom-left-radius: 0px !important; /* overrides .pic */
border-bottom-right-radius: 0px !important;
}
.eveTypIcoEvePic{ /*Background icon even type in right-up corner of evePic. CNLisEveAuw, CNSelEve*/
position:absolute;/*this uses special icons with background - https://www.ccnus.org/stylesheet/icon/evetyppicbgstajudxxx.png */
width:100px;      /*which are not required. See below eveVirIcoEvePic working fine with simple icons */
height:100px;
padding:0px;
top:0px;
right:0px;
z-index:2;
}
.eveTypIcoEvePic2{ /*Background icon even type in right-up corner of evePic. CNUpdParAuw*/
position:absolute;/*this uses special icons with background - https://www.ccnus.org/stylesheet/icon/evetyppicbgstajudxxx.png */
width:100px;      /*which are not required. See below eveVirIcoEvePic working fine with simple icons */
height:100px;
padding:0px;
top:40px;
right:0px;
z-index:2;
}
.eveVirIcoEvePic{ /*Background icon virtual even in right-bottom corner of evePic. CNLisEveAuw, CNSelEve, CNEveParAuw*/
position:absolute;
width:32px;
height:32px;
padding:0px;
bottom:10px;
right:10px;
z-index:2;
}
.eveSta{
position:absolute; /*works in regards to the first positionned parent*/
width:100px;       /*100px means centered*/
z-index:3;
}
.eveSta1{
top:70px;  /*default value. Computed in eveStaPos() based on size of actual evePic2*/
left:65px; /*default value. Computed in eveStaPos() based on size of actual evePic2*/
}
.eveSta2{
top:102px;  /*default value. Computed in eveStaPos() based on size of actual evePic2*/
left:65px; /*default value. Computed in eveStaPos() based on size of actual evePic2*/
}
.icoPerPic{  /*24px Icon for 'contact' in person picture. Not used any more*/
position:absolute;
margin-left:-32px;
margin-top:10px;
}
.eveTypSOIco{
vertical-align:middle !important;
height:24px;
margin: 5px 5px 0px 5px;
}
.gooMapLegTexTd{
font-size:80%;
vertical-align:middle !important;
color:white !important;
}
.gooMapIcoTd{ /*CNLisEveAuw, CNSelEve */
text-align:center;
vertical-align:middle !important;
}
.gooMapLegIco{ /*CNLisEveAuw, CNSelEve */
vertical-align:middle !important;
height:24px;
margin: 5px 3px 5px 3px;
}
.gooMapSvgArr{ 
float:right;
margin:0px 0.4em 0px 0.4em;
height:16px;
width:16px;
display:inline;
fill:rgb(255, 255, 255);
}
.gooConDiv{  /*CNLisEveAuw, CNSelEve */
margin:0px;
padding:0px;
width:170px;  /*To fit picFRM. 360px OK. More is no good. OK for all devices */
}
.inpFieCouDiv{  /*html input field counter div*/
float:right;
font-size:80%;
text-align:center; 
}
.com .inpFieCou{
color:blue;    /*rgb(66, 192, 251); too light*/
font-size:110%;
font-weight:700;
border:none;  /*1px solid rgb(230,230,230); /*disappears in background when highlighted*/
}
.inpFieCou2{
width:2em; /*Up to 99*/
}
.inpFieCou3{
width:3em; /*Up to 999*/ 
}
.inpFieCou4{
width:4em; /*Up to 9999. Used by testArea with > 1000*/
}
.helBelFie{ /*Text below input field usually displaying Egx custom label. See CNUpdMod*/
font-size:90%;
color:green; /*green Ok on either white or lightGey background*/
}
.ideTex{       /*Text in the right column with the bulb. For idea rather than help. Eg: CNUpdMod*/
font-size:110%;
color:green;
}
.helCom{      /*Text to the left of the orange ? in component header. Always on a white background. Eg: About registration*/
font-family:Lato, Arial, Helvetica, sans-serif;
font-size:120%;
color:rgb(23, 151, 192);  /*DarkOrange. rgb(23, 151, 192)=sfdc dark blue*/
}
a.button{
text-decoration: none;
}
a.helpCom:hover:after{
/*padding:4px; class="helpCom" can be removed as replaced by plain a.value / a.valueLeft just below */
margin-left:-20em; 
border-radius:0px;
padding:4px;
}
/* Use for field help with pop-up on right when value is a custom label not containing embedded HTML.*/
a[value]:hover:after{
text-transform:none;
content: attr(value);
text-decoration:none;
display: inline-block;
position:absolute;
width: 20em;
z-index:12;
background: #E7E7E7;
border: 1px solid rgb(66, 192, 251); /*Orange. rgb(207, 238, 248) = sfdc light blue*/
text-align: left;
white-space: normal;
line-height:120%;
font-weight: 400;
font-family: Arial, Helvetica, sans-serif;
color: #2E2E2E;
border-radius:0;
padding:8px;
margin:1.5em 0em 0em 0em;  /*Displays box on the right */
}
/* Use for component header and field help with pop-up on left when value is a custom label not containing embedded HTML.
<a valueLeft="{!$Label.CNDeletingThisItemWillDeleteAllRelatedItems}" >
<img src="{!URLFOR($Resource.SFDCTHEME3IconsGen, 'help_orange.png')}" /></a>
*/
a[valueLeft]:hover:after{ /**/
text-transform:none;
content:attr(valueLeft);
text-decoration:none;
display:inline-block;
position:absolute;
z-index:12;
background:#E7E7E7;
border:1px solid rgb(66, 192, 251); /*Orange; rgb(207, 238, 248)=sfdc light blue;  rgb(66,192,251) = carribean blue*/
text-align:left;
white-space:normal;
line-height:120%;
font-weight:400;
font-family:Arial, Helvetica, sans-serif;
color:#2E2E2E;
border-radius:0;
padding:0.5em;
}
a[valueTLeft]:hover:after { /*same as valueLeft but displays on Top of ? for fields at  bottom of component*/
text-transform:none;
content:attr(valueLeft);
text-decoration: none;
display:inline-block;
position:absolute;
z-index:12;
background:#E7E7E7;
border:1px solid rgb(207, 238, 248) !important; /*Orange. rgb(207, 238, 248)=sfdc light blue*/
text-align:left;
white-space:normal;
line-height:120%;
font-weight:400;
font-family:Arial, Helvetica, sans-serif;
color:#2E2E2E;
border-radius:0;
padding:0.5em;
}
.helPopRight{  /*Use for help when custom labels contains embedded HTML; See below example with helPopLeft*/
text-decoration: none;   /* remove the link as the do not work outside the glossary*/
display: inline;
position:absolute;
z-index: 12;
background: #E7E7E7;
border: 1px solid rgb(66, 192, 251);  /*Orange rgb(207, 238, 248)=sfdc light blue*/
text-align: left;
white-space: normal;
font-weight: 400;
font-family: Arial, Helvetica, sans-serif;
color: #2E2E2E;
border-radius:0;
padding:0.5em;
}
.helPopLRight{  /*Use for help when custom labels contains embedded HTML; Large*/
text-decoration: none;   /* remove the link as the do not work outside the glossary*/
display: inline;
position:absolute;
z-index:12;
background: #E7E7E7;
border: 1px solid rgb(207, 238, 248);  /*Orange rgb(207, 238, 248)=sfdc light blue*/
text-align: left;
white-space: normal;
font-weight: 400;
font-family: Arial, Helvetica, sans-serif;
color: #2E2E2E;
border-radius:0;
padding:0.5em;
}
.helPopTRight{ /*Use for help when custom labels contains embedded HTML and at bottom of component so that pop is on top. Eg:CNInsNotComhelaot1*/
text-decoration:none;   /* remove the link as the do not work outside the glossary*/
display:inline;
position:absolute;
z-index:99;
background:#E7E7E7;
border:1px solid rgb(66, 192, 251);  /*Orange rgb(207, 238, 248)=sfdc light blue*/
text-align:left;
white-space:normal;
font-weight:400;
font-family:Arial, Helvetica, sans-serif;
color:#2E2E2E;
border-radius:0;
padding:0.5em;
}
/* Below example using helPopLeft; Use this when the help message={!$Label.CNClickToLoadHelpPage} contains embedded HML
Otherwise, use simply value/valueLeft. Below requires the onmouseover/out mechanism
a href="/cnsubevepubhel" target="_blank" class="helpCom" 
img src="{!URLFOR($Resource.SFDCTHEME3IconsGen, 'help_orange.png')}" class="link1" 
onmouseover="j$('[id*=CNSubEvePubComHelComHea]').css('display', 'inline');" //a
apex:outputText value="{!$Label.CNClickToLoadHelpPage}" escape="false" style="display:none;" styleClass="helPopLeft" 
id="CNSubEvePubComHelComHea" //div
Note1:done this way because 1)<a target="_blank" valueLeft="<apex:outputText value='toto' /" does
compile, but returns VF error, 2)valueLeft="<apex:outputText value="toto" /" does not compile,
3)valueLeft='<apex:outputText value="toto" />' compiles but returns <apex:outputText...
Note2: you cannot have something like *.helPopLeft:hover:after{ (similar to a. above) as the aot text to be displayed in not
visible. The event acts on the orange ?, which does not contain the text / value (as in a.)
*/
.helPopLeft{  /*used for fields help. Works with custom labels containing embedded HTML*/
text-decoration:none;   /* remove the link as the do not work outside the glossary*/
display:inline;         /* not block as moves the box all the way to the left */
position:absolute;
z-index:12;
background:#E7E7E7;
border:1px solid rgb(66, 192, 251); /*Orange. rgb(207, 238, 248)=sfdc light blue*/
text-align:left;
white-space:normal;
font-weight:400;
font-family:Arial, Helvetica, sans-serif;
color:#2E2E2E;
border-radius:0;
padding:0.5em;
}
/*same as helPopLeft but Large for when there is more than one label help*/
.helPopLLeft{  /*used for fields help. Works with custom labels containing embedded HTML. Large*/
text-decoration:none; /* remove the link as the do not work outside the glossary*/
display:inline;       /*not block as moves the box all the way to the left */
position:absolute;    /*absolute*/
z-index:12;
background: #E7E7E7;
border:1px solid rgb(66, 192, 251); /*Orange. rgb(207, 238, 248)=sfdc light blue*/
text-align:left;
white-space:normal;
font-weight:400;
font-family:Arial, Helvetica, sans-serif;
color: #2E2E2E;
border-radius:0;
padding:0.5em;
margin-top:1em;
margin-bottom:0;
}
/*margin-right/left in ccnusorgnoie.css*/
.comTabDiv{  /*Used in CNUpdPar, used by SITE, ALA, CPM profiles. width is computed with jQuery in component*/
margin:0 0 3px 0; /*left and right 0px required because box sizing*/
padding:0;
float:left;
text-align:center;
border-bottom:3px solid transparent;
box-sizing:border-box;
}
.secBacCol1{
background: rgba(207, 238, 248, 1); /*SFDC Std lightBlue. Eg:CNUpdParAuw-Tab Description */
/*background-image: url('/img/alohaSkin/sidebar_sprite.png') -209px top no-repeat;    #cde8f4; /*7 level of shade of rgb(90, 180, 220)*/
}
.secBacCol2{
background:#96d0e9; /*Darker blue. Eg:CNUpdParAuw-Tab Pricing */
}
.secBacCol3{
background:#e6e6e6;  /*Darker grey: Eg:CNUpdParAuw-Tab Associates */
}
.secBacCol4{
background:rgb(230,230,230); /*Eg:CNUpdParAuw-Tab Billboard */
}
.secBacCol5{
background:rgb(220, 251, 220);   /*SFDC Std lightGreen of recycle bin. Eg: CNUpdMod. Help pop-up*/  
}
/***** START used by CNGloHel, CNPriHel, CNSubEvePubComHel, and all help pages and components  */
.gloTab{
margin-top:10px;
}
.gloTab th{
border-bottom:2px solid Grey;
background-color:rgb(230,230,230);
}
.gloTab td{
height:20px;
border-bottom:2px solid rgb(230,230,230);
}
.gloTab tr:target{    /* table:target does not work*/
background-color:lightBlue; /*overrides generic :target. rgb(230,230,230):lighter grey than light grey. No good as confused with header*/
}
:target{
background-color:lightBlue; /*rgb(230,230,230):lighter grey than light grey. No good as confused with header*/
}
.gloTab .OnlRegPlaFee:target{ /*used in CNSubEvePubPriAuwCom. Does not work in regards to target multiple Ids */
background-color:lightBlue; /*rgb(230,230,230):lighter grey than light grey. No good as confused with header*/
}
.gloCol1{
width:15%;
}
.gloCol2{
width:55%;
}
/**** END used by CNGloHelCom, CPriHel, CNSubEvePubHelCom, and all help pages and components  */
.divFleEve:nth-child(even){  /*See CNLisTraRefPubEveCom*/
background-color:rgb(230, 230, 230); /*same as .trEve tr:nth-child(even)*/
}
.divFleSep{ /* separator used in apex:repeat*/
flex-grow:1;
width:100%;
height:1px;
box-sizing:border-box;
background-color:rgb(66,192,251);
}
.tabpbHeader{ /*DNU. Replace by tabTyp2. Used in CNLisParEveCpmCom*/
background:rgb(194, 228, 254);  /*CP-UI SFDC Std blue. Designed to look like SFDC.CP-UI*/
}
.trEve tr:nth-child(even){  /*Applies to apex:dataTable. even so that th.240,240,240 does not mixed up with first even row*/
background-color:rgb(230, 230, 230);
}
tr:nth-child(even).dataRow{  /*Same as above but applies to overrides SFDC Std css for apex:PageBlockTable */
background-color:rgb(230, 230, 230);
}
.tabInlEdi.trEve tr:nth-child(even){ /*same as above but with apex:dataTable which does not populate tr.dataRow. CNUpdRefEveCom.shiList*/
background-color:rgb(230, 230, 230);
}
table{
white-space: normal; /*all below to override user agent*/
line-height: normal;
font-weight: 400;
font-size: 100%;
font-variant: normal;
font-style: normal;
color: rgb(72, 72, 72);
text-align: start;
border-collapse:collapse;
}
.td15{
width:15%;
}
.td20{
width:20%;
}
.td25{
width:25%;
}
.td30{
width:30%;
}
.td33{
width:33%;
}
.td40{
width:40%;
}
.td50{
width:50%;
}
.td60{
width:60%;
}
/* th defined in ccnusorgauwsb.css*/
.tab0{
width:100%;
border-spacing:0;  /*replaces cellspacing and cellpadding*/
border-collapse:collapse;
border:none;
}
.tab0 th{
padding:0.5em 0 0.5em 0.1em;
background-color:rgb(66,192,251);
color:white;
}
/* below no good as applies to all and everything
.tab0 *{
color:rgb(72, 72, 72);  required. Does not work if only in tab0. tab0 th td does not work. important not required
}
*/
.tab0 td{
color:rgb(72, 72, 72);  /*required. Does not work if only in tab0. tab0 th td does not work. important not required*/
}
.tab1{ /*used in CKEditor.custom. Eg1: CNUpdModOprRtfCom*/
border:0.1em solid rgb(66,192,251);
}
.tab1 th{
border:0.1em solid rgb(66,192,251);
}
.tab1 td{
border:0.1em solid rgb(66,192,251);
}
.tabTyp1{ /*used CNSubEvePub, CNReqInv, all table headers*/
padding:10px;
}
.tabTyp1 > tbody > tr > td{
padding:3px;
vertical-align:middle;
}
.tabTyp1 > tbody > tr > th{
padding:3px;
vertical-align:middle;
}
.tabTyp2{ /*same as tabTyp1 but allows to propagate td.vertical-align:top below; CNFreAskQue, CNAboCCN, */
padding:10px;
}
.tabTyp2 > tbody > tr > td{
padding:0px 5px 5px 5px;
vertical-align:top;
}
.tabTyp3{ /*same as tabTyp1 padding 0px. CNFooAuwCom, CNReaModAuw, */
padding:0px;
}
.tabTyp3 > tbody > tr > td{
padding:5px;
vertical-align:top;
}
.tabTyp3 > tbody > tr > th{
padding:5px;
text-align:center;
}
.tabTyp4{ /*same as tabTyp1 padding td=0px. CNManTraAuwCom */
padding:0px;
}
.tabTyp4 > tbody > tr{
padding:2px;
vertical-align:top;
}
.tabTyp4 > tbody > tr > td{
padding:2px;
vertical-align:top;
}
.tabTyp5{ /* */
padding:0px;
}
.tabTyp5 > thead > tr > th{ /*sometimes th are in thead, other in tbody ???*/
padding:4px 4px 4px 4px;
vertical-align:middle;
}
.tabTyp5 > tbody > tr > th{ /*sometimes th are in thead, other in tbody ???*/
padding:4px 4px 4px 4px;
vertical-align:middle;
}
.tabTyp5 > tbody > tr > td{
padding:2px 4px 2px 4px;
vertical-align:middle;
}
.tabTyp6{ /*same as tabTyp4 but vertical-align:middle. CNCusMemHeaAuwCom */
padding:0px;
}
.tabTyp6 > tbody > tr > th{
padding:0px;
vertical-align:top;
font-weight:normal;  /*overides SFDC common.css*/
}
.tabTyp6 > tbody > tr > td{
padding:0px;
vertical-align:middle;
}
.com .list td{  /*overrides SFDC portal.css for apex:column */
padding:0px 5px 0px 5px;
border:none;
}
.bor1{      /*used in many components. Set by attribute claBor. Applies to td element. border-width set be media print / display*/
border-style:solid;
border-color:rgb(215,215,215);
}
.tabBor1{  /*applies to table element along with tab0 tabTypx. Propagate to td*/
border:1px solid rgb(215,215,215);
}
.tabBor1 > tbody > tr > td{
border:1px solid rgb(215,215,215);
}
.tabBor2{
border:1px solid rgb(215,215,215);
}
.tabBor2 > tbody > tr > td{
border-top:none;
border-right:1px solid rgb(215,215,215);
border-bottom:none;
border-left:none;
}
.tabInlEdi{ /*Must NOT be tab0. table containing inlEdiSup2EveHan() fields (not inlEdiSup4EveHan()), and either single or in apex:dataTable. Eg: CNUpdRefEve*/
width:100%;
border-collapse:separate; /*required otherwise adjacent transparent border overrides Blue*/
border-spacing:0px;
}
/*.tabInlEdi tr{
border:2px solid blue; Does not work if table is border-collapse:separate.
}*/
.tabInlEdi td{ /*applies to all td in the table but not the table itself, not the tr*/
border:2px solid transparent; /* transparent so that when trHig/inlineedit, content does not move*/
}
.tabInlEdi textarea{  /*inputTextArea.rtf=false. Always in td.notHigCketd used for highlighting apex:inputTextArea*/
font-size:110%;     /*.inpTexTyp4=120%*/
border:2px solid rgb(215,215,215); /*same as .inpTexTyp4.*/
border-radius:0.3em;
padding:0.3em; /*same as .inpTexTyp4*/
box-sizing:border-box; /*so that width=100% works by filling the containing td regardless of padding/border*/
}
.tabInlEdi textarea:focus{
border:2px solid rgb(66, 192, 251);
}
/* not used anymore
.ccnCke textarea{ inputTextArea.rtf=true/false. Always in td.notHigCketd used for highlighting apex:inputTextArea
border:none;  border applied by .tabInlEdi .notHigCketd
}
.tabInlEdi .notHigCketd{
border:2px solid rgb(215,215,215); border of the td just around the inputTextArea.rtf=true. Aligned with .tabInlEdi textarea
border-radius:0.3em;
}
.tabInlEdi .cke_1{
border:none; 2px solid rgb(215,215,215); /*overrides SFDC.CKE style
}
*/
.cke_1{
border:2px solid rgb(215,215,215); /*Overrides CKEditor.css*/
border-radius:0.3em;
}
.cke_1:focus{  /*Used to work; Replaced by .cke_focus*/
border:2px solid rgb(66, 192, 251) !important;
}
.cke_focus{ /*required. Overrides user.css. Replaces .cke_1:focus*/
border:2px solid rgb(66, 192, 251) !important;
}
.tdVerTop{
vertical-align:top !important;
}
.trTop{   /*Used in CNSubEvePubCom. the top row of a input/output element*/
background:rgb(215,215,215);
}
.trBot{  /*the bottom row of a input/output element*/
height:30px;
}
.trTop > td{   /* all td in a trTop class */
padding:10px 6px 10px 6px !important; /* important required. Overrides tbody>tr>td */
border-radius:0;
}
.trBot td{   /* all td in a trBot class */
padding:3px 6px 3px 6px;
}
.colSecTit{  /* Collapsible section title. CNUpdModCom */
font-size:120%;
font-weight:700;
color:DimGrey;
line-height:125%;
}
.overlayDialog{   /*Set the width for inputtextArea*/
max-width:600px !important; /*Large screens: overrides the element style limited to 500px; 600 because width HDX Kindle Portrait*/
width:100%;       /* */
}
.com .proAct > *{  /*process active.  Applied to td. Must be in tabTyp1 so that vertical-align=middle*/
color:rgb(66,192,251); /*important required to override whatever the element color in the td  */
}
.com .proPas > *{  /*process passive. Applied to td*/
color:rgb(215,215,215); /*important required to override whatever the element color in the td  */
}
.trHig{ /*inline edit. When a tr/td is highlighted. Used by inlineedit*/
background:rgb(215,215,215);
border:2px solid rgb(66, 192, 251) !important;
border-radius:0.3em;
}
.trNotHig{ /*inlineedit not in .tabInlEdi. When a tr/td is cancelled from highlighted. Used by inlineedit. Used also directly in element*/
background:white;
border:2px solid transparent; /* required to avoid element to shift 1px when .trHig*/
}
.inlEdiOut{ /*inline Edit Output field*/
font-weight:700;
}
.inlineEditWrite{ /*overrides CKE Editor css*/
/*border:0px solid blue;  COMMENTED as not visible*/
padding:0px 0px 0px 0px !important; /*For pencil to be always visible on iPad, 24px OK,*/
margin:0px 0px 0px 0px !important;
background: url(https://www.ccnus.org/stylesheet/icon/CNEdi16.png) no-repeat !important;
background-position: bottom right !important;  /*position the pencil in bottom right corner both when field in edit and non edit mode*/
} 
.inlineEditDiv input[type='text']{ /*overrides SFDC css. Text so that it does not apply to checkbox*/
color:blue !important;
width:80%;   /*Default value. Must not be important. May be overriden by perCenXX below*/
}
.perCen90 > span > span > div > input[type='text']{ /*Applied to td holding inlineEdit field. CNUpdRefEveCom*/
width:90%;   /*required for entire field to not take more space */
}
.perCen80 > span > span > div > input[type='text']{
width:80%;
}
.perCen60 > span > span > div > input[type='text']{ 
width:60%; 
}
.inlineEditDiv select{ /*overrides SFDC css*/
width:80%; /*Default value. Must not be important. May be overriden by perCenXX below*/
color:blue !important;
padding:2px;  /*overrides select: 2px = left:2px in all other class*/
}
.perCen90 > span > span > div > span > select{ /*Applied to td holding inlineEdit field. CNUpdRefEveCom*/
width:90%;   /*required for entire field to not take more space */
}
.perCen80 > span > span > div > span > select{
width:80%;
}
.perCen60 > span > span > div > span > select{
width:60%;
}
.inlineEditCompoundDiv textarea{  /*Used for inline edit. Sets the width for inputtextArea*/
width:100%;       /*important not required*/
color:blue; /*important not required*/
}
.overlayDialog .topLeft h2{
color:DarkOrange; /*overrides SFDC CKE-Editor*/
}
.overlayDialog .topRight{
background:rgb(215,215,215); /*overrides SFDC CKE-Editor*/
border-top:1px solid rgb(57,58,60);  /* same color as rest of borders*/
border-right:1px solid rgb(57,58,60);
border-bottom:1px solid rgb(57,58,60);
}
.overlayDialog .topLeft{
background:rgb(215,215,215); /*overrides SFDC CKE-Editor*/
border-left:1px solid rgb(57,58,60);  /* same color as rest of borders*/
}
.cssDialog{
/*left:13%;     /* applies on android only. Otherwise messed-up everythng */
}
.eveFinDivWra{  /* wrapper of each eveFinDiv */
float:left;
width:16.66%;     /*100 / 6*/
padding:0; /*4px 8px 8px 8px;*/
box-sizing:border-box;
}
.eveFinDiv{  /*Event selection div*/
margin:0px;
padding:5px 2px 0px 10px;
height:50px;      /* required for text to be vertically-centered in Div*/
line-height:24px; /* required for text to be vertically-centered in Div. Mini=27 because height of View events button*/
min-height:24px;  /* to avoid flicking*/
border-top:none;
border-left:1px solid rgb(215,215,215);
border-bottom:1px solid rgb(215,215,215);
border-radius:0;
cursor:pointer;
background:white;
}
.aotTabTit{ /*First line in the selection = Date, Region, Host, Marque Or the selected value = August 2018, France, ...*/
margin:0px 2px 0px 8px;
font-weight:700;
font-size:105%;
color:rgb(72, 72, 72);
}
.aotTabSubTit{ /*Second line in the selection = Any or the selected value '', Normandy, */
margin:0px 2px 0px 8px;
font-weight:700;
font-size:100%;
color:rgb(100, 100, 100);
}
/*svgTabArrDow: Source: airBnB: <svg viewBox="0 0 18 18" role="presentation" aria-hidden="true" focusable="false" 
class="svgTabArrDowSma link1" >
<path d="m16.29 4.3a1 1 0 1 1 1.41 1.42l-8 8a1 1 0 0 1 -1.41 0l-8-8a1 1 0 1 1 1.41-1.42l7.29 7.29z" fill-rule="evenodd">
</path></svg>   used in CNSelEve selection menu 1-5*/ 
.svgTabArrDow{
float:right;
margin:0px 0.4em 0px 0.4em;
height:16px;
width:16px;
display:inline;
fill:rgb(100, 100, 100);
}
.svgTabArrDowSma{ /*Source: airBnB. CNEveParAuw*/
margin:0px 3px 0px 10%;
height:8px;
width:8px;
display:inline;
fill:rgb(100, 100, 100);
}
/* svgMesArrRig: Source: //iconmonstr.com/
://iconmonstr.com/arrow-25-svg/ - Used in CNSelEve.label. Left in label, but down in JGSB Auction ??
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svgMesArrRig" >
<path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/>
//iconmonstr.com/arrow-63-svg/ - Right but displays down in JGSB Auction ??
<path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z"/>
://iconmonstr.com/arrow-64-svg/ - Left 
<path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/>
://iconmonstr.com/arrow-65-svg/ - Down but displays Left in JGSB Auction ??
<path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/>
://iconmonstr.com/arrow-66-svg/ - Up but displays Right in in JGSB Auction ??
<path d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z"/>
  */
.svgMesArrLef{
margin:0px 20px 0px 3px;
height:24px;
width:24px;
display:inline;
fill:White;
}
.svgMesArrRig{
margin:0px 3px 0px 20px;
height:24px;
width:24px;
display:inline;
fill:White;
}
/***************************************************************************************************************/
/*Below styles that are component specific through their ID or class name, in alphabetical order ***************/
/***************************************************************************************************************/

/*  BELOW FOR CNCUSMEMHEAUW */
.CNCusMemHeaAuwComLogTd{ /* logo top left corner of all pages; Either CCN or CCNCustomer. Class as also used in #mesDivMaiEdi */
height:35px; /*same for all device*/
padding:10px 5px 10px 5px !important; /*important required*/
max-width:180px;
}
#CNCusMemHeaAuwComLinksDiv{ /* links such as Help, Login, Logout and the Cart icon */
margin:0px 5px 0px 5px;
}
.CNCusMemHeaAuwComLogPic{  /*logo top left corner of all pages. Either CCN or CCNCustomer. Class as also used in #mesDivMaiEdi*/
max-width:225px;
max-height:30px;
margin-left:5px;
}
.CNCusMemHeaAuwComCNConnectingNoLogo{   /* CCN/Connecting enthusiasts picture/logo behind CCN/Customer logo */
height:25px;
}
.menWitPop{
/*Used in menPosF() to style menu with popup vs menu without popup*/
}
.heaTabDiv{     /* individual tabs such as Event Finder, Classified, ..in Component header. Must be div as span.style.width does not work */
display:table-cell;  /*not inline*/
float:left;            /*required*/
box-sizing:border-box; /*required for width computation to be accurate*/
height:50px;  /*avoid flicking; Same of all profile and regardless of # of tab displayed. Should be overriden if > 5 tabs*/
width:33.3%;  /*Do not comment. default value overriden by CNCusMemHeaAuwCom*/
margin:0px;  /*margin left & right must be set to 0 for % to be accurate*/
text-align:center;
}
.tabHeaDiv{ /*required to apply border-radius as not possible in table, therefore cannot be applied on tabHea */
/*display:table-cell;  COMMENTED AS MESSES-UP; not inline*/
margin:0px 4px 0px 4px; /*overriden for tabs on extreme left or right */
border-bottom:3px solid transparent; /*changed to blue on mouse over*/
/*border-radius:0.3em;  border-radius does not work on table/tr. Works on td*/
cursor: pointer;
padding:8px;
background:white;
}
.tabHea{
margin:auto;  /*required for the table to be centered in tab0*/
border-spacing:0px; /*replaces cellspacing and cellpadding*/
border-collapse:collapse;
}
.heaTabLin:link{color:rgb(37, 59, 86);}  /* text-decoration:none;cancels the default apex:commandLink format */
.heaTabLin:visited{color:rgb(37, 59, 86);}  /* not using purple*/
.heaTabLin:hover{color:rgb(37, 59, 86);} 
.heaTabLin:active{color:rgb(37, 59, 86);}
.heaTabLinTex{text-decoration:none;}
.heaTabLinTex:link{color:rgb(37, 59, 86)}  /* text-decoration:none;cancels the default apex:commandLink format */
.heaTabLinTex:visited{color:rgb(37, 59, 86)} /* not using purple */
.heaTabLinTex:hover{color:rgb(37, 59, 86)} 
.heaTabLinTex:active{color:rgb(37, 59, 86)}
.heaTabTex{
text-transform:uppercase;
margin:0px 2px 0px 4px;
font-size:18px; /* same height as icons */
font-weight:400;
color:rgb(66,192,251);  /*Carribean Blue of the icons*/
}
.iconNavDiv{ /*used in CNCusMemHeaAuwCom*/
font-family:Lato, Arial, Helvetica, sans-serif;
font-weight:400;
height:40px; /*so that pop-up and 3px border is aligned across all menu*/
text-transform:initial; /*set first letter of first work only to uppercase*/
white-space:nowrap;
font-size:100%;
display:inline-block;
padding:2px;
cursor: pointer;
border-right:1px solid transparent;   /* required to match pop-up */
border-left:1px solid transparent;    /* required to match pop-up */
border-bottom:3px solid transparent; /* changed to Carribean blue when mouse over*/
border-radius:0;  /*corrected with lower set to 0 by jQuery when onmouseover */
vertical-align:bottom; /*required so that cart picture and profile picture are aligned to bottom*/
}
/*margin:0px 8px 0px 8px; set in RD*/
.popUpOpt{
color:rgb(72, 72, 72); /*body.color. Required. important required to override commandLink*/
text-transform:initial; /*set first letter of first work only to uppercase*/
}
#picNamMenTd{
width:100%;
vertical-align:bottom;
text-align:right;
padding:10px 15px 3px 5px;
}
#CNCusMemHeaAuwComUseGreTd{
width:100%;
/*min-width:250px; so that it appears below the upper link in Kindle portrait*/
text-align:center;
padding:6px;
margin:0px;   /* overrides browser*/
}
#userGreetingMessageTd{
text-align:left;
padding:0px;  /* overrides browser*/
margin:0px;   /* overrides browser*/
}
#CNCusMemHeaAuwComUseGreM3Div{
padding:1px 1vw 0px 1px;
}
.CNCusMemHeaAuwComHeaWra{ /* Defined in CNCusMemHeaAuwCom */
width:100%;               /* required for the header to take all the available space */
background:white;
padding:0px;
-webkit-tap-highlight-color: transparent; /*Required to avoid the flicking of iPad on event*/
}
#CNCusMemHeaAuwComHeaRow1Tab{ /* */
/*width:70%;  responsive design based on device*/
padding:0px;
margin-top:0px;  /*required, otherwise, introduces space between top of screen and CNCusMemHea*/
margin-right:auto;
margin-bottom:0px; /*required, otherwise, introduces space between top of screen and CNCusMemHea*/
margin-left:auto;
}
#CNCusMemHeaAuwComHeaRow2WraDiv{  /* Wrapper. Required for CNCusMemHeaAuwComHeaRow2Tab.margin-left:auto to work */
width:100%;
padding:5px 0px 5px 0px;
margin:0px;
background:rgb(230, 230, 230);
} 
#CNCusMemHeaAuwComHeaRow2Tab{  /* tabs such as Event Finder, Classified, Quiz */
/*width defined in responsive design*/
padding:0px;
margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
}
#CNCusMemHeaAuwComHeaRow2Tab td{ 
vertical-align:middle;
}
.menDivPopUp{  /*by default, positioned below the menu actuating it, based on id*/
display:none;  /*becomes visible through ccnusorgauw.js.menPosF(eleP)*/
position:absolute;  /* so that it is removed from flow*/
z-index:5;          /* so that it steps on top of google maps */
border-top:none;
border-left:1px solid rgb(230,230,230); /* Caribbean blue=rgb(66, 192, 251)*/
border-bottom:1px solid rgb(230,230,230);
border-right:1px solid rgb(230,230,230);
border-radius:0;
margin-top:30px;
margin-right:0;
margin-bottom:0;
margin-left:-2px; /*set for the row1 Profile, Help, .... Recent items pop-up has element based value below */ 
padding:10px;
background:white;
/*background:linear-gradient(rgb(66, 192, 251), white, white, white);   Commented because messes-up firefox recent item. OK otherwise*/
/*background:-webkit-linear-gradient(rgb(66, 192, 251), white, white, white);*/
text-align:left;
}
#CNCusMemHeaAuwComMenHelDivPopUp{
}
/*min-width:250px; COMMENTED as not required*/
/*margin-left defined in ccnusornoie.css*/
#CNCusMemHeaAuwComMenProDivPopUp{
min-width:250px;
}
#CNCusMemHeaAuwComRecRecDivPopUp{
min-width:340px;
}
/*margin-left defined in ccnusornoie.css*/
/* END OF CNCUSMEMHEAUW */

.CNFooAuwComLin{  /* element with class CNFooAuwComLin must not have .link1*/
cursor:pointer;
background:transparent !important; /*important required to override a:hover*/
text-decoration:none !important;   /*important required to override a:hover*/
color:rgb(120,120,120);  /*lighter than regular text*/
font-size:100%;
width:100px;
margin:0.5em 0 0.5em 0; /*overridden by ccnusorgnoie.css for some device*/
}
.CNFooAuwComLin:link{color:rgb(120,120,120) !important;}
.CNFooAuwComLin:visited{color:rgb(120,120,120) !important;}
.CNFooAuwComLin:hover{color:rgb(71,71,71) !important;}  /*no text-decoration:underline but darker color*/
.CNFooAuwComLin:active{color:rgb(71,71,71) !important;}

#CNGatsObjectDiv{  /*to be removed*/
width:70% !important;
margin-left:auto;
margin-right:auto;
}
.tabCNGat > tbody > tr > td{
width:200px;
}

#CNLisEveAuwCommap-canvas{
width:100%;
padding:0px;
margin:0px;
border-bottom-right-radius:0px;
}
#CNLisEveAuwComEveNoMap{
width:100%;
padding:0px;
margin:0px;
border-bottom-right-radius:0px;
}
.CNReaPicGalFraDiv{  /* the iFrame in the iFrame container in CNCCNMisCom, CNReaOrgAuwCom, ...*/
-webkit-overflow-scrolling:touch !important;
overflow-x:auto !important ;
overflow-y:hidden !important;
}
/*height: set in .CNRecPicGalFraiFraWit2LinLeg*/
.CNRecPicGalFraiFra{ /* iFrame container for sObject pictures with legend not displayed*/
height:90px;       /*required to overrides default browser 150px*/
min-height:93px;   /*required*/
width:100%;
border:none;
}
.CNRecPicGalFraiFraWitLeg{ /* iFrame container for sObject pictures with 1 line of legend*/
height:100px;     /*required to overrides default browser 150px. Default value. May be overridden in component based on legend.height*/
min-height:103px; /*required*/
width:100%;
border:none;
}
.CNRecPicGalFraiFraWit2LinLeg{ /* iFrame container for sObject pictures with 2 lines of legend*/
height:130px;     /*required to overrides default browser 150px. Default value. Allow height for horizontal scrollbar even if not displayed*/
min-height:130px; /*required*/
width:100%;
border:none;
}
/***CNSelEve*********/
.aopEveFinOpt{ /*Event selection options/criteria for Date, Region, Host, Marque. Color = body.color*/
display:none;
width:200%;
margin:6px 0px 6px -10px;
position:relative;
background:white;
border: 1px solid rgb(215,215,215);
border-radius:0px;
line-height:18px;
text-align:left;
font-size:90%;
z-index:4;
}
.aopEveFinOptOveFlo{
margin-bottom:6px;
overflow-y:auto;
}
/*max-height:350px; Must be commented otherwise takes priority over ccnusorgnoie.css*/
.cleFilDiv{
margin:6px;
}
.eveOrgLog{ /* Related to google maps*/
max-width:120px;
max-height:60px;
}
#CNSelEveComVieEveEveFinDiv{
background:rgb(66, 192, 251);
border-bottom-right-radius:4px;
}
#CNSelEveComMesDiv{ /*the large message 1-3 'Become a contributor..' in Event Finder*/
position:relative;
margin:80px 0px 0px 0px;
padding:10px;
color:white;
background:rgb(66, 192, 251);
text-align:left;
border-top-right-radius:6px;
border-bottom-right-radius:6px;
font-family:'Times New Roman', Times, serif;
text-decoration:none;
text-transform:uppercase;
z-index:1;
font-size:4vh;
}
.CNSelEveComEveHosLogCal{
margin:5px 5px 0px 3px;
}
.CNSelEveComEveTitL1{  /*Used in left column of google map. Event title */
text-transform:uppercase;
color:rgb(72, 72, 72); /*overrides blue link commandLink*/
font-family:Lato, Arial, Helvetica, sans-serif;
font-weight:700;
}
/*font-size in ccnusorgnoie.css*/
.CNSelEveComEveDurL1{  /*Used in left column of google map. Event duration */
color:rgb(77,122,179);
font-weight:400;
}
/*font-size in ccnusorgnoie.css*/
.CNSelEveComEveHosL1{
color:rgb(77,122,179);
font-weight:400;
}
/*font-size in ccnusorgnoie.css*/
#CNSelEveCommap-canvas{
height:50px; /* overwritten by Javasctipt in page*/
width:100%;
padding:0px;
margin:0px;
border-bottom-right-radius:0px;
}
#CNSelEveAuwComEveNoMap{
height:50px; /* overwritten by Javasctipt in page*/
width:100%;
padding:0px;
margin:0px;
border-bottom-right-radius:0px;
}
#CNSelEveComPlaHolDiv{
height:100px; /* Required. Overriddden by Javascript in page*/
}
#gooMapIcoTab{
background:rgb(163, 204, 255); /*same color as google map ocean*/
margin:0px 0px 0px 0px;
padding:0px;
border-top-left-radius:0px;
border-top-right-radius:0px;
}
#gooMapLegTab{
background:rgb(8, 135, 186); /*CB dark so that white text is visible*/
margin:0px 0px 0px 0px;
padding:0px;
border-top-left-radius:0px;
border-top-right-radius:0px;
}
.aopParEveSta{ /*CNUpdParAuwCom for aopEveSta and aopParSta*/
position:absolute;
text-align:center;
margin:0px;
padding:40px 0px 5px 0px;
z-index:1;
border-radius:0px;
}
/*
/width computed CNUpdParAuwCom.comFooDesTop() by  so that Div in middle of picture
position:absolute;
left:24px;    so that aop aligned with picture 
top:60px;     so that it is just below the heart savod/savedNot
*/
.parEveStaDiv{ /*CNUpdParAuwCom for aopEveSta and aopParSta*/
display:inline-block;
background:rgba(211, 211, 211, 0.8);
padding:10px;
width:80%;
margin-left:auto;
margin-right:auto;
}
.parEveStaMes{ /*CNUpdParAuwCom for aopEveStaMes and aopParStaMes*/
text-transform:uppercase;
font-weight:700;
color:white;
}
.CNPlaQui1AuwComacbPla{  /*Play button in CNPlaQui1AuwCom/CNPlaQui1LAuwCom, complemented by .btnlar*/
position:absolute;
z-index:5;
top:calc(100%/2 - 15px);
left:calc(100%/2 - 57px);  /*45 based on width:100px*/
width:100px;
height:40px;
font-size:130% !important;
border:1px solid white !important;
}
.CNUpdAddGooMap{  /*a class, not an id, as may be multiple CNUpdAddGooMap in one page. Eg: CNUpdEveAuw*/
min-height:200px; /*when CNUpdAddCom used not in CNUpdAdd. Overridden by CNUpdAdd.CNUpdAddMapHei()*/
width:100%;
padding:0px;
margin:0px;
border-radius:0px;
border-bottom:2px solid rgb(215,215,215);
}
#CNUpdParAuwComDesH1td{
color:rgb(66, 192, 251);
}
.CNUpdVehAuwComdivFleSel{
flex-grow:1;
background-color:white;
margin:0 0.3em 0 0;
padding:0.3em;
border-radius:0.3em;
border: 2px solid rgb(215,215,215);
box-sizing: border-box;
-webkit-appearance:none;
}
/*********************************************************************************/
/************** applies to mass generated HTML letters not labels nor badges, ....*/
body.letter *{
font-weight:400;
line-height:120%;
vertical-align:top;
/*font-family:Comic Sans MS, Comic Sans MS5, cursive, monospace; /*works. Overrides body.common.css*/
}
body.badge * {  /* applies to mass generated badges, ....*/
font-weight:400;
vertical-align:top;
}
.letWraCom td{
vertical-align:middle;
}
.labWra{            /*table that embbed the component */
border-spacing: 0;  /* overrides user agent */
}
.labWra td{
vertical-align:top;
}
body.label .bPageBlock .detailList tr td{  /*inside the component*/
vertical-align:middle;
line-height:100%;
border:none;   /* overrides SFDC - Works fine. space between .label and .bPageBlock required*/
}
body.label .empty{  /* overrides SFDC when there are empty columns - works fine - required */
display:none;
}
body.badge .empty{  /* overrides SFDC when there are empty columns - works fine - required */
display:none;
}
.badWra{
border-spacing: 0;  /* overrides user agent */
}
body.badge .aopCom td{ /*Inside the component. Space required between badge and .com */
height:0;   /* overrides the 200px/67mm height in .badWra td{*/
}
body.badge .badTab{ /* each individual table within a component*/
width:100%;
}
/**** END related to mass generated HTML letters, labels, badges, ... */
/**** Applies to vehicle datasheets ****/
.vehDatSheWraTab{
border-spacing:0;  /*replaces cellspacing and cellpadding*/
border-collapse:collapse;
margin-left:auto;  /* so that is is centered in body*/
margin-right:auto; /* so that is is centered in body*/
background:white;
}
/**** END Applies to vehicle datasheets ****/