/*
See ccnus.org/stylesheet/ccnus/viewport.html & viewportRD.css for RD criteria.
    Read CNPlaQuiLev1AuwComCon about ResponsiveDesign implementation in CCN
	Notes:
	1. For every Id/class, ccnusorgnoiesb.css explicit only the attributes that are customized based on device to keep the
	   stylesheet as short/easy to understand as possible.
	   Attributes such as 'display:flex;' are in the element embedded style as they never change.
***/
/* 1 ***********************************************************************************************************************************/
@media screen and (min-width:1441px){
.CCNbod{font-size:100%;}  /*must be in % only. 100% because ...*/
/* was !important because issue reRender when Acer2.CNGatAuw.Next which enforced portal.Css.body.75%*/
h1{font-size:200%;}
h2{font-size:125%;}
h3{font-size:105%;}
h4{font-size:100%;font-weight:700;}
.componentHeader h1{font-size:150%;}
.componentHeader h1.h12L{font-size:130%;}  /*required as .h12L does not apply*/
.h12L{font-size:130%;}  /*for when h12L is used outside of compopnentHeader*/

/* Below the 3 components in any Auw page */
/* .CNCusMemHeaAuwComDiv width set to 100% in all cases. May be set to 70% in some components when used for recording video. Eg: CNConQui*/
.wrapperAuw{  /* other styling defined in Generic section */
width:70%;
}
/*border: 1px solid lightBlue;  /* same color as viewportRD.css */
.CNFooAuwComDiv{   /* Not an Id as the Div has a specific Id in each page used by CCNCustomer.css */
width:100%;
}
/* END the 3 components in any Auw page */
.letLanTab{    /*applies to all pages in US-Letter landscape format. Eg1: USXXCCNCUSVehDatShe001GraPri*/
font-size:10px;
width:968px;   /* same height/width ratio as a US-letter landscape format 216*279mm. Not in orgShort.css/us07ccnsit was work also for A4 as just for preview */
height:750px;  /* 750px = upper limit on 1440*768 so that letter/diploma/vehicle datasheet appears complete on screen*/
margin-top:10px; /*Leave a 5px margin-bottom on 1440*768*/
/*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*/
padding:25px;    /* 25px = about same as 1/2" on paper visually. Different for label pages / badge pages */
}
.CCNVehDatSheWraTab{ /*complements .letLanTab: adds background. table wrapping each CCN datasheet. Must be printed on high quality paper. Eg: */
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;
}
.CCNVehDatSheWraTabImg{ /*complements .letLanTab .CCNVehDatSheWraTab: adds background. table wrapping each CCN datasheet. Must be printed on high quality paper. Eg: */
background-image:url('https://ccnus.org/stylesheet/various/CCNDatSheWraTab-9x12L.jpg'); /*exact same ratio as Letter 8.5/11 = 1.291*/
}
.CCNFordVehDatSheWraTabImg{ /*complements .letLanTab .CCNVehDatSheWraTab: adds background. table wrapping each CCN datasheet. Must be printed on high quality paper. Eg: */
background-image:url('https://ccnus.org/stylesheet/various/CCNFordDatSheWraTab-9x12L.jpg'); /*exact same ratio as Letter 8.5/11 = 1.291*/
}
.CCNPorscheVehDatSheWraTabImg{ /*complements .letLanTab .CCNVehDatSheWraTab: adds background. table wrapping each CCN datasheet. Must be printed on high quality paper. Eg: */
background-image:url('https://ccnus.org/stylesheet/various/CCNPorscheDatSheWraTab-9x12L.jpg'); /*exact same ratio as Letter 8.5/11 = 1.291*/
}
.CCNVehDatSheTabTd{
height:100%;  /*so that when layout is standard, the component height is 100% = fills the entire page*/
}
.comLef .componentContainer{ /*to be replaced by comCon*/
min-height:400px;
}
.comLef .comCon{ 
min-height:400px;
}
#CNCusMemHeaAuwComHeaRow1Tab{
width:100%;
}
.comMinHei{ /*Forces the right scrollbar to be always visible, even if component height < avaHei*/
min-height:1000px; /*Prevents the toggling scrollbar/no scrollbar in CNUpdXXX when user toggles View*/
}           /*Set to px so that scrollbar just visible but no more that 10px scrolling available*/
.picModLar{  /*picture modal Large. CNHomHel */
width:500px;
}
.picModSma{  /*picture modal Small. CNHomHel */
width:250px;
}
.aopEveFinOptOveFlo{
max-height:450px;
}
/****  CNPlaQui1AuwComdivFleTitApm below applies to both CNPlaQui1AuwComdivFleTitApm in CNUpdParAuwComCon and Component.rightColumn*/
#CNPlaQui1AuwComdivFleTitApm{
flex-direction:column;
justify-content:center;
}
#CNPlaQui1AuwComdivFlePicQueCheAns{
flex-direction:column;
}
#CNPlaQui1AuwComdivFleTit{
flex-grow:1;
max-width:2500px;  /* > 1441 so that it can take all the width*/
}
#CNPlaQui1AuwComdivFleApm{
flex-grow:1;
max-width:2500px;  /* > 1441 so that it can take all the width*/
}
#CNPlaQui1AuwComdivFlePic{
flex-grow:1;
max-width:310px; /*same as CNUpdParAuwComdivFleQuiRul*/
}
#CNPlaQui1AuwComdivFleQueCheAns{
flex-grow:1;
max-width:310px; /*same as CNUpdParAuwComdivFleCNPlaQuiLev1*/
}
#CNReaRefAuwComdivFlePicSupRefDat{
display:flex;
flex-direction:row;
justify-content:center;
flex-wrap:nowrap;
box-sizing:border-box;
}
#CNReaRefAuwComdivFleMaiPicSup{  /*Flex Main picture+Supplier*/
flex-grow:1;
flex-shrink:1;
flex-basis:25%;
}
#CNReaRefAuwComdivFlePicSup{  /*flex inside CNReaRefAuwComdivFleMaiPicSup*/
display:flex;
flex-direction:column;
flex-wrap:nowrap;
box-sizing:border-box;
}
#CNReaRefAuwComdivFlePic{
flex-grow:1;
box-sizing:border-box;
}
#CNReaRefAuwComdivFleSup{
flex-grow:1;
box-sizing:border-box;
}
#CNReaRefAuwComdivFleRefDat{
flex-grow:1;
flex-shrink:1;
flex-basis:75%;
padding-left:10px;
}
/*** CNSelEve ****************************/
#CNSelEveComvieEvetd{
font-size:120%;
}
#CNSelEveComZooimg{
height:24px;
}

#CNUpdParAuwComdivFleEveDat{
display:flex;
flex-direction:row;
justify-content:space-between;
flex-wrap:nowrap;
box-sizing:border-box;
}
#CNUpdParAuwComdivFleEveHos{
flex-grow:1;
flex-shrink:1;
flex-basis:26%;
box-sizing:border-box;
}
#CNUpdParAuwComdivFleEveDes{
flex-grow:1;
flex-shrink:1;
flex-basis:50%;
box-sizing:border-box;
}
#CNUpdParAuwComdivFleEveAdd{
flex-grow:1;
flex-shrink:1;
flex-basis:24%;
box-sizing:border-box;
}
#CNUpdParAuwComdivFleQuiRulScoCNPlaQuiLev1{
display:flex;
flex-direction:row;
justify-content:center;
flex-wrap:nowrap; /*enforces nowrap so that CNUpdParAuwComdivFleQuiMaiRulSco or CNUpdParAuwComdivFleCNPlaQuiLev1 shrink if not enough width*/
}
/* As a result of CNUpdParAuwComdivFleQuiMaiRulSco and CNUpdParAuwComdivFleCNPlaQuiLev1, total width cannot exceed 660px
   If screen allows much more, CNUpdParAuwComdivFleQuiRulScoCNPlaQuiLev1 is justify-content:center; in component.left.column*/
#CNUpdParAuwComdivFleQuiMaiRulSco{
flex-grow:0;  /*not allowing to grow over 330px as result would increase width/reduce height = no point*/
max-width:310px; /*310=(device.width*0.70*0.74)= xxx - 330.NUpdParAuwComdivFleCNPlaQuiLev1 - margin/padding*/
}
#CNUpdParAuwComdivFleCNPlaQuiLev1{
flex-grow:0;  /*not allowing to grow so that the pic in CNPlaQuiLev1 remains small enough for screen*/
max-width:330px; 
width:330px;  /*330px in all cases a CNPlaQuiLev1.picture must not be too big = all columns*/
}
#CNUpdParAuwComdivFleQuiRulSco{
flex-direction:column;
}
/******* USXX... / US07... pages matching VF email templates ***/
.VFEmaTemVieInBro{
width:600px; /*Applies to main div only, ...*/
}
}
/*******************************************************************************************************************************/
/* 2 */
@media screen and (max-width:1440px){
.CCNbod{font-size:85%;}
.com h1{font-size:200%;}  /*so that h1 not modified for CP-UI.h1 when CCN page embedded in CP-UI/ALF-UI*/
.com h2{font-size:125%;}
.com h3{font-size:105%;}
.com h4{font-size:100%;}
.componentHeader h1{font-size:150%;} /*to be replaced by tabComHea*/
.tabComHea h1{font-size:150%;}
.componentHeader h1.h12L{font-size:120%;} /*to be replaced by tabComHea*/
.tabComHea h1.h12L{font-size:120%;}
.h12L{font-size:130%;}
input[type="text"].inpTexTyp4{
font-size:120%;
}
input[type="text"].inpTexTyp5{
font-size:120%;
}
.selTyp4{
font-size:120%; /*same as .inpTexTyp4*/
}
.selTyp5{
font-size:120%; /* Same as inpTexTyp5 */
}
/* Below the 3 components in any Auw page */
/* .CNCusMemHeaAuwComDiv width set to 100% in all cases but when below is not COMMENTED for recording video in YouTube format
.CNCusMemHeaAuwComDiv{
width:70%;
}
*/
.wrapperAuw{  /* other styling defined in Generic section */
width:70%;
}
/*border: 1px solid green;  /* same color as viewportRD.css */
.CNFooAuwComDiv{   /* Not an Id as the Div has a specific Id in each page used by CCNCustomer.css */
width:70%;   /*100% normal,  70% when recording video. Not overriden by ccnusorgdid.css as no good when recording*/
}
/* END the 3 components in any Auw page */
.letLanTab{ /*applies to all document to be printed in US-Letter landscape format*/
width:968px;   /* same height/width ratio as a US-letter landscape format 216*279mm. Not in orgShort.css/us07ccnsit was work also for A4 as just for preview */
height:750px;  /* 750px = upper limit on 1440*768 so that letter/diploma/vehicle datasheet appears complete on screen*/
margin-top:10px; /*Leave a 5px margin-bottom on 1440*768*/
}
/*font-size:10px;*/
.CCNVehDatSheWraTab{ /*complements .letLanTab: adds background. table wrapping each CCN datasheet. Must be printed on high quality paper. Eg: */
                  /*on device with large screens, this background is displayed, not on mobile phone*/
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;
}
.CCNVehDatSheWraTabImg{ /*complements .letLanTab .CCNVehDatSheWraTab: adds background. table wrapping each CCN datasheet. Must be printed on high quality paper. Eg: */
background-image:url('https://ccnus.org/stylesheet/various/CCNDatSheWraTab-9x12L.jpg'); /*exact same ratio as Letter 8.5/11 = 1.291*/
}
.CCNFordVehDatSheWraTabImg{ /*complements .letLanTab .CCNVehDatSheWraTab: adds background. table wrapping each CCN datasheet. Must be printed on high quality paper. Eg: */
background-image:url('https://ccnus.org/stylesheet/various/CCNFordDatSheWraTab-9x12L.jpg'); /*exact same ratio as Letter 8.5/11 = 1.291*/
}
.CCNPorscheVehDatSheWraTabImg{ /*complements .letLanTab .CCNVehDatSheWraTab: adds background. table wrapping each CCN datasheet. Must be printed on high quality paper. Eg: */
background-image:url('https://ccnus.org/stylesheet/various/CCNPorscheDatSheWraTab-9x12L.jpg'); /*exact same ratio as Letter 8.5/11 = 1.291*/
}
.CCNVehDatSheTabTd{
height:100%;
}
.componentContainer{ /*to be replaced by comCon*/
min-height:300px;
padding:6px;
}
.comCon{
min-height:300px;
padding-top:0.5em;
padding-right:0.5em;
padding-bottom:0.5em;
padding-left:0.5em;
}
.comLef .componentContainer{ /*to be replaced by comCon Select all element of class componentContainer inside an element of class comLef*/
padding-right:2em;
padding-left:2em;
/* min-height defined in ccnusorgnoie.css so that picBelMai does  not appear */
}
.comLef .comCon{ /*Select all element of class componentContainer inside an element of class comLef*/
padding-right:2em;
padding-left:2em;
/* min-height defined in ccnusorgnoie.css so that picBelMai does  not appear */
}
.comRig .componentContainer{ /*to be replaced by comCon Select all element of class componentContainer inside an element of class comRig*/
padding-right:0;  /*required when CNPlaQuiLev1AuwCom is in right column*/
padding-left:0;
}
.comRig .comCon{ /*to be replaced by comCon Select all element of class componentContainer inside an element of class comRig*/
padding-right:0;  /*required when CNPlaQuiLev1AuwCom is in right column*/
padding-left:0;
}
.colLefRD{
margin-top:0.3em;
padding-right:0.2em;
}
.colRigRD{
margin-top:0.3em;
padding-left:0.2em;
}
a[valueLeft]:hover:after{ /**/
width:19em;
margin:0 0 0 -23em;   /*Displays box same level and on left of ?*/
}
a[valueTLeft]:hover:after {
width:19em;
margin:-5em 0 0 -23em;  /*Displays box on top and on left of ?*/
}
.helPopRight{
width: 19em;
margin:1.5em 0 0 0.2em;  /*Displays box below and on right of ?*/
}
.helPopTRight{
width:19em;
margin:-9em 0 0 0.2em; /*Displays box on top and on right of ?*/
}
.helPopLeft{
width:19em;
margin:0.5em 0 0 -23em;  /*Displays box below and on left of ?*/
}
.helPopLLeft{
width:44em;            /*44em=best value=fits in half a CP-UI.record.pageDetail*/
margin:1em 0 0 -46em;  /*-46=best value. Displays box below and on left of ?*/
}
.comMinHei{
min-height:800px;
}
.rating-uni{  /*set before in star-rating.min.css */
font-size:1.2em;
margin-top:-5px
}
.picModLar{  /*picture modal Large . CNHomHel */
width:500px;
}
.picModSma{  /*picture modal Small. CNHomHel */
width:250px;
}
.aopEveFinOptOveFlo{
max-height:350px;
}
.com .btnLar{  /*large. Used in CNUpdParAuwCom*/
font-size:150%; 
min-width:12em;
border-radius:0.3em;
padding:0.4em;
}
.tabComHea{
margin-top:25px;
}
#divMesMaiEdi{
flex-wrap:nowrap;
}
#divMesEdi1{
flex-grow:0;
padding-top:0.3em;
padding-right:0.3em;
}
#divMesEdi2{
flex-basis:10%;
min-width:250px;
}
.sObjectDiv{  /*to be replaced by divMaiCom. In all Auw/Cpm components, starts below componentHeader, ends at the end of component. RD applies */
padding:1.2em 1.2em 0.8em 1.2em;
margin:0;
}
.divMaiCom{  /*In all Auw/Cpm components, starts below <table class="tab0 tabTyp1 tabComHea , ends at the end of component. RD applies */
width:100%;  /*Used by components that needs all the available width*/
padding:1.2em 1.2em 0.8em 1.2em;
margin:0;
box-sizing:border-box;
}
.widRed{   /*width reduced. replaces .aopTab, .CNGatAuwComaopTab, #CNGatsObjectDiv. */
width:70%; /*Complements .divMaiCom, tab0, ... for components where left column = 75% with content centered in the reduced space*/
margin-right:auto;  /*Used in CNSigInCom, CNSubEveCom, CNSubConCom, ...*/
margin-left:auto;
padding:0;
box-sizing:border-box;
}
.widRed2{   /*width reduced2. replaces .aopTab, .CNGatAuwComaopTab, #CNGatsObjectDiv. */
width:85%; /*Complements .divMaiCom, tab0, ... for components where left column = 50% with content centered in the reduced space*/
margin-right:auto;  /*Used in CNGatAuwCom, CNGatAdmCom, ...*/
margin-left:auto;
padding:0;
box-sizing:border-box;
}
.divFle1{
margin-top:0.3em;
padding-left:0.1em;
padding-right:0.1em;
}
.divFleRig{
border-left:2px solid rgb(66,192,251);	
}
.sec{ /*sec is used for aop/div/table/td are used and */
border:1px solid rgb(215,215,215); /*important required to override tab0*/
margin-top:1em; /*R&L=0px so aligned with mesDiv*/
padding:0.8em;
}
.inSec{
margin:0px 3px 3px 3px;
padding:5px 3px 5px 3px;
}
.sec2{ /*sec2 is used for ...  Used CNUpdOrgAuwCom.Zone.Picklists*/
border:1px solid rgb(215,215,215); /*important required to override tab0*/
margin-top:0; /*R&L=0px so aligned with mesDiv*/
padding:0;
}
#CNCusMemHeaAuwComHeaRow1Tab{ /*to be remove*/
width:100%;   /*100% normal,  70% when recording video. Not overriden by ccnusorgdid.css as no good when recording*/
}
.CNCusMemHeaAuwComDevDiv{ /*device div: 1)rotate landscape, 2)use desktop*/
margin:0px;
padding:30px 5px 30px 5px;
width:100%;
height:600px;
font-size:200%;
font-weight:700;
color:rgb(66, 192, 251);
text-align:center;
line-height:200%;
vertical-align:middle;
background:rgb(230,230,230);
border:none;
border-radius:0;
}
#CNCusMemHeaAuwComMenHelDivPopUp{
margin-left:-243px;  /*Overrides .menDivPopUp. Displays pop-up on the left*/
}
.menDivPopUpMenProDivPopUp1{ /*.menDivPopUp when pic not there*/
margin-top:15px;
margin-left:-190px;  /*Overrides Displays pop-up on the left.*/
}
.menDivPopUpMenProDivPopUp2{ /*.menDivPopUp when pic there*/
margin-top:15px;
margin-left:-239px;  /*Overrides . Displays pop-up on the left.*/
}
#CNCusMemHeaAuwComRecRecDivPopUp{
margin-left:-335px; /*Overrides .menDivPopUp. Displays pop-up on the left*/
}
.iconNavDiv{
margin:0 0.6em 0 0.6em;	
}
/*display:managed by ccnusorg.js.rotLan()*/
.CNEveParAuwComRD{
display:table-row;
}
.CNEveParAuwComRD2{
display:inline;
}
/* COMMENTED as set in CNEvePic2/CNEvePic2CCN
.CNEvePic2Pic{
width:600px;
}
*/
#CNFacQuidivFlePicQuiDat{
flex-direction:row;	
}
#CNFacQuidivFlePic{
flex-grow:0;
flex-shrink:0;
flex-basis:65%;
min-height:436px;  /*Required so that 1)picture fills the space, 2) CNFacQuidivFlePicQuiDat remains constant when user checks answer*/
                   /*436=(1440*0.70.Wrapper*0.65.CNFacQui)/1.5 = 436 = optimized for device with width = 1440*/
}
#CNFacQuidivFleQuiDat{
flex-grow:1;
flex-shrink:1;
}
/*flex-basis:35%; no required as takes all the available space*/
.CNFacQuiaotpicAns{
font-size:100%;
}
/*
[id*=CNPlaQui1AuwComaopSco]{
font-size:84% !important; overrides element style. Used just when recording video
}
*/
/****  CNPlaQui1AuwComdivFleTitApm below applies to both CNPlaQui1AuwComdivFleTitApm in CNUpdParAuwComCon and Component.rightColumn*/
#CNPlaQui1AuwComdivFleTitApm{
flex-direction:column;
justify-content:center;
}
#CNPlaQui1AuwComdivFlePicQueCheAns{
flex-direction:column;
}
#CNPlaQui1AuwComdivFleTit{
flex-grow:1;
max-width:1500px;  /* > 1440 so that it can take all the width*/
}
#CNPlaQui1AuwComdivFleApm{
flex-grow:1;
max-width:1500px;  /* > 1440 so that it can take all the width*/
}
#CNPlaQui1AuwComdivFlePic{
flex-grow:1;
max-width:310px; /*same as CNUpdParAuwComdivFleQuiRul*/
}
#CNPlaQui1AuwComdivFleQueCheAns{
flex-grow:1;
max-width:310px; /*same as CNUpdParAuwComdivFleCNPlaQuiLev1*/
}
#CNReaModAuwComdivFleModDes .tabComHea{
margin-top:0;
}
#CNReaModAuwComdivFleModSpeLefCol{
min-width:300px;
}
#CNReaModAuwComdivFleModSpeRigCol{
min-width:450px;
}
#CNReaModAuwComdivFlerefModOpt{
flex-direction:row;
}
.CNReaModAuwComdivFlerefModOptChi{
flex-basis:33.3%;
}
#CNReaOrgAuwComdivFleorgDat{
min-width:550px;  /*550px = OK*/
}
#CNReaRefAuwComdivFlePicSupRefDat{
display:flex;
flex-direction:row;
justify-content:center;
flex-wrap:nowrap;
box-sizing:border-box;
}
#CNReaRefAuwComdivFleMaiPicSup{  /*Flex Main picture+Supplier*/
flex-grow:1;
flex-shrink:1;
flex-basis:25%;
}
#CNReaRefAuwComdivFlePicSup{  /*flex inside CNReaRefAuwComdivFleMaiPicSup*/
display:flex;
flex-direction:column;
flex-wrap:nowrap;
box-sizing:border-box;
}
#CNReaRefAuwComdivFlePic{
flex-grow:1;
box-sizing:border-box;
}
#CNReaRefAuwComdivFleSup{
flex-grow:1;
box-sizing:border-box;
}
#CNReaRefAuwComdivFleRefDat{
flex-grow:1;
flex-shrink:1;
flex-basis:75%;
padding-left:10px;
}
/*** CNSelEve **********************/
.CNSelEveComEveTitL1{
font-size:110%;
}
.CNSelEveComEveDurL1{
font-size:85%;
}
.CNSelEveComEveHosL1{
font-size:85%;
}
#CNSelEveComvieEvetd{
font-size:100%; /*overrides above*/
}
#CNSelEveComZooimg{
height:24px;   /*overrides above*/
}

#socMeddivMaiLef{ /*the Main Left Div that contains the social picture + inputFields below*/
flex-basis:65%;
min-width:1030px;    /*so that socMeddivMaiRig does not shift to the left from FB.post to IG.post*/
}
#socMeddivMaiRig{ /*the Main Right Div that contains buttons, GB/IG links ..*/
flex-basis:15%;
}
#CNSubConComdivFlePicWanYou{
flex-direction:column;	
}
#CNSubEvePubPriComdivFleMai{
flex-direction:row;
flex-wrap:nowrap;
}
.CNSubEvePubPriComdivFleChi{
flex-basis:33.3%;
flex-grow:0;
box-sizing:border-box;
}
.CNUpdAddGooMap{
display:block;
}
.CNUpdAddComdivFleChi{
flex-grow:1;
min-width:8em;
padding:0.3em 0.3em 0 0;
box-sizing:border-box;
}
.CNUpdAddComdivFleChiait{
display:inline-block;
width:100%;
}
#CNUpdNotComdivFleNotMaiPosDat{
display:flex;
flex-direction:row;
justify-content:space-between;
flex-wrap:nowrap;
box-sizing:border-box;
}
#CNUpdNotComdivFleNot{
flex-basis:75%;
flex-grow:1;
box-sizing:border-box;
vertical-align:top;
}
#CNUpdNotComdivFleMaiPosDat{ /*Main posDat*/
flex-basis:25%;
flex-grow:1;
box-sizing:border-box;
text-align:center;
vertical-align:top;
}
#CNUpdNotComdivFlePosDat{
display:flex;
flex-direction:column;
flex-wrap:nowrap;
box-sizing:border-box;
}
#CNUpdNotComdivFlePosDat1{
flex-grow:1;
box-sizing:border-box;
}
#CNUpdNotComdivFlePosDat2{
flex-grow:1;
box-sizing:border-box;
}
#CNUpdOrdAuwComdivFlerefDat{
min-width:500px;
}
.CNUpdParAuwComxxxDiv{
padding:1em 0.8em 0.2em 0.8em;
}
#CNUpdParAuwComdivFleEveDat{
display:flex;
flex-direction:row;
justify-content:space-between;
flex-wrap:nowrap;
box-sizing:border-box;
}
#CNUpdParAuwComdivFleEveHos{
flex-grow:1;
flex-shrink:1;
flex-basis:26%;
box-sizing:border-box;
}
#CNUpdParAuwComdivFleEveDes{
flex-grow:1;
flex-shrink:1;
flex-basis:50%;
box-sizing:border-box;
}
#CNUpdParAuwComdivFleEveAdd{
flex-grow:1;
flex-shrink:1;
flex-basis:24%;
box-sizing:border-box;
}
#CNUpdParAuwComdivFleQuiRulScoCNPlaQuiLev1{
flex-direction:row;
justify-content:center;
flex-wrap:nowrap;  /*enforces nowrap so that CNUpdParAuwComdivFleQuiMaiRulSco or CNUpdParAuwComdivFleCNPlaQuiLev1 shrink if not enough width*/
}
/* As a result of CNUpdParAuwComdivFleQuiMaiRulSco and CNUpdParAuwComdivFleCNPlaQuiLev1, total width cannot exceed 620px
   If screen allows much more, CNUpdParAuwComdivFleQuiRulScoCNPlaQuiLev1 is justify-content:center; in component.left.column*/
#CNUpdParAuwComdivFleQuiMaiRulSco{
flex-grow:0;  /*not allowing to grow over 310px as result would increase width/reduce height = no point*/
max-width:200px; /*200=(device.width*0.70*0.74)= xxx - 335.NUpdParAuwComdivFleCNPlaQuiLev1 - margin/padding*/
}
#CNUpdParAuwComdivFleCNPlaQuiLev1{
flex-grow:0;  /*not allowing to grow so that the pic in CNPlaQuiLev1 remains small enough for screen*/
max-width:335px; 
width:335px;  /*335px in all cases a CNPlaQuiLev1.picture must not be too big = all columns*/
}
#CNUpdParAuwComdivFleQuiRulSco{
flex-direction:column;
}
.parEveStaMes{
font-size:140%;
line-height:140%;
}
#CNUpdVehAuwComdivFleDisBraMilSerModPic{
flex-direction:row;
justify-content:space-between;
}
.CNUpdVehAuwComdivFlepicMod{
max-width:150px;
min-width:150px;
}
#CNUpdVehAuwComdivFlevehKeyPoi{
flex-direction:row;
flex-wrap:nowrap;	
}
.CNUpdVehAuwComdivFlevehKeyPoi{
flex-basis:33.3%;
flex-shrink:1;
box-sizing:border-box;
}
/****************************************/
.VFEmaTemVieInBro{
width:600px;
}
/******** USXXCCNCUSVehDatShe001GraPri *****/
.CCNVehDatSheWraTabtd{
padding:5em !important; /*important required to overwrite .letLanTab>tbody>tr/td. Applies here for all devices*/
}
/******** USXXCCNCUSParDipxxx001GraPri *****/
.CCNDipWraTabtd{
padding:6em !important; /*important required to overwrite .letLanTab>tbody>tr/td. Applies here for all devices*/
}
}
/******************************************************************************************************************************/
/* 3 */
@media screen and (max-width:1284px){
.CCNbod{font-size:100%;}  /*100% reference*/

.comRig .componentContainer{ /*to be replaced by comCon Select all element of class componentContainer inside an element of class comRig*/
padding-right:0.3em;  /*Not 0 as to close to device screen border. required when CNPlaQuiLev1AuwCom is in right column*/
}
.comRig .comCon{ /*to be replaced by comCon Select all element of class componentContainer inside an element of class comRig*/
padding-right:0.3em;  /*required when CNPlaQuiLev1AuwCom is in right column*/
}
/* Below the 3 components in any Auw page */
.wrapperAuw{  /* other styling defined in Generic section */
width:100%;
/*border:1px solid red; */ /* same color as viewportRD.css */
}
.CNFooAuwComDiv{   /* Not an Id as the Div has a specific Id in each page used by CCNCustomer.css */
width:100%;
}
/* END the 3 components in any Auw page */
.picModLar{  /*picture modal Large . CNHomHel */
width:500px;
}
.picModSma{  /*picture modal Small. CNHomHel */
width:250px;
}
.aopEveFinOptOveFlo{
max-height:350px;
}
.helPopLLeft{
width:34em;            /*34em=best value=fits in half a CP-UI.record.pageDetail*/
margin:1em 0 0 -36em;  /*-36=best value. Displays box below and on left of ?*/
}
/********* CNCusMemHeaAuwCom  ****/
#CNCusMemHeaAuwComHeaRow1Tab{
width:100%;  /* must match .wrapperAuw.width */
}
#CNFacQuidivFlePic{
min-height:499px;  /* 499 = 1152*1.0.Wrapper*0.65.CNFacQui)/1.5 = compromised between macBook.width=1280 and iPad.landscape.Width=1024*/
}

#CNUpdParAuwComdivFleQuiMaiRulSco{
max-width:270px; /*270=(device.width*1.00*0.74)= xxx - 330.NUpdParAuwComdivFleCNPlaQuiLev1 - margin/padding*/
}
}
/*****************************************************************************************************************/
/* 4 */
@media screen and (max-width : 960px){
.wrapperAuw{  /* other styling defined in Generic section */
/*border:2px solid pink;*/
}
/*border: 1px solid pink;  /* same color as viewportRD.css */
.comRig{ /* hides right Component*/
display:none !important;
}
/* END the 3 components in any Auw page */
.sObjectDiv{  /*to be replaced by divMaiCom. In all Auw/Cpm components, starts below componentHeader, ends at the end of component */
padding:0 0 0.8em 0;
}
.divMaiCom{
padding:0 0 0.8em 0;  /*0 left and right as aligned with tabComHea*/
}
.picModLar{  /*picture modal Large . CNHomHel */
width:250px;
}
.picModSma{  /*picture modal Small. CNHomHel */
width:125px;
}
.sidebarModuleBody li{  /*CP-UI Home page component with links. This stylesheet is loaded */
margin-top:1em !important;  /*in CNHomHel page, the first one loaded after CP-UI login*/
}                          /*It does not work if css.page loaded in CNUseCom page = dynamic portal header*/

#CNFacQuidivFlePic{
min-height:416px;  /*416 = (960*0.65)/1.5: optimized for device with width=960*/
}
.CNFacQuiaotpicAns{
font-size:70%;  /*70% required in row mode*/
}
#CNUpdParAuwComdivFleQuiMaiRulSco{
max-width:320px; /*320=(device.width*1.00*0.74)= xxx - 310.NUpdParAuwComdivFleCNPlaQuiLev1 - margin/padding*/
}
/********** CNSelEve ***************/
#CNSelEveComvieEvetd{
font-size:80%;
}
#gooMapLegDiv{
font-size:80%;
}
.aopEveFinOptOveFlo{
max-height:300px;
}
/**********/
#tdCNUpdModComCNUpdModModSelSecHel{
display:none;
}
} 
/***********************************************************************************************************************************/
/* 5 */
@media screen and (max-width:812px){ /*812 not 768 so that it includes iPhoneXS*/
.CCNbod{
font-size:104%;  /*104% OK despite device = small mobile.phone.landscape*/
}
.letLanTab{ /*applies to all pages in US-Letter landscape format. Eg1: USXXCCNCUSVehDatShe001GraPri*/
width:auto;   /*Override above. No ratio required*/
height:auto;  /*Override above. No ratio required */
margin-top:0px; /*Override above*/
padding:5px;    /*Override above*/
border:none;   /*overwrite ccnusorg.css*/
}
/* below commented as too generic. Whas it for CNUpdVeh ??
.com select{
font-size:70%;
}
*/
.comLef .componentContainer { /*to be replaced by comCon*/
padding-right:0.5em;
padding-left:0.5em;
}
.comLef .comCon{
padding-right:0.5em;
padding-left:0.5em;
}
.componentContainer{ /*to be replaced by comCon*/
padding-top:0px;
padding-right:0.5em;
padding-bottom:0;
padding-left:0.5em;
}
.comCon{
padding-top:0;
padding-right:0.5em;
padding-bottom:0;
padding-left:0.5em;
}
.widRed{
width:100%;
}
.widRed2{
width:100%;
}
.divFleRig{
border-left:none;	
}
.RD812Hid{ /*applied to element that must be hidden when device.width < 812*/
display:none !important; /*important required to overrides style in element*/
}
.mesDiv{
margin:0;
}
.sidebarModuleBody li{  /*CP-UI Home page component with links.*/
margin-top:1em !important;
}
.sec{ /*sec is used for aop/div/table/td are used and */
border:none; /*important required to override tab0*/
margin-top:1em; /*R&L=0px so aligned with mesDiv*/
padding:0.5em;
}
.com .helPopRight, .helPopLRight, .helPopTRight, .helPopLeft, .helPopLLeft{ /*In small tablet/phone, the pop-up is positioned in the middle of the screen*/
left:calc((100% - (100% - 100px))/2);  /*equivalent to margin-left/right:auto*/
width:calc(100% - 100px);
margin-right:0; /*required to overrides above*/
margin-left:0;  /*required to overrides above*/
}
/*No top means below the actuating ele*/
/*margin-right:auto;   no impact*/
/*margin-left:auto;   no impact*/
/******* Below component page specific in alphabetical order *****/
/******* CNCCNMisCom *************/
#CNCCNMisComPicModImg{
max-height:300px !important;	
}
/******* CNCusMemHeaAuwCom *******/
.CNCusMemHeaAuwComCNConnectingNoLogo{
display:none !important;  /*overrides ccnusorgauw.css because not enough space */
}
#CNCusMemHeaAuwComMenHelDivPopUp{
margin-top:22px;
margin-left:auto; /*overrides above*/
left:calc((100% - (100% - 100px))/2);  /*equivalent to margin-left/right:auto*/
width:calc(100% - 100px);
}
.menDivPopUpMenProDivPopUp1{
margin-top:22px;  /*always a picture as either the picture or the CNper128.png*/
margin-left:auto; /*overrides above*/
left:calc((100% - (100% - 100px))/2);  /*equivalent to margin-left/right:auto*/
width:calc(100% - 100px);
}
.menDivPopUpMenProDivPopUp2{
margin-left:auto; /*overrides above*/
left:calc((100% - (100% - 100px))/2);  /*equivalent to margin-left/right:auto*/
width:calc(100% - 100px);
}
#CNCusMemHeaAuwComRecRecDivPopUp{
margin-left:auto; /*overrides above*/
left:calc((100% - (100% - 100px))/2);  /*equivalent to margin-left/right:auto*/
width:calc(100% - 100px);
}
.icoHeaRD812{
display:inline;
}
.menHeaRD812{
display:none;
}
#CNFacQuidivFlePic{
min-height:351px;  /*351 = (812*0.65)/1.5 = optimized for device with width = 812*/
}
.CNFacQuiaotpicAns{
font-size:60%;  /*so that Quiz can be played in mobile.phone.landscape without scrolling*/
}
/***** CNFooAuwCom ****/
.CNFooAuwComaotCooDisMes{
font-size:8px !important;
}
/***** CNGatAuwCom/CNGatAdmCom/CNParReqInvCom/CNSigInCom *****/
#CNGatsObjectDiv{  /*to be replaced by redWid*/
width:550px;	
}
#CNGatsObjectDiv .tabTyp3 > tbody > tr> td {  /*to be replaced by tapTy6*/
padding:0px;  /*overrides ccnusorg.css for all tables inside CNGatsObjectDiv */
}
.tabCNGat{
margin-top:2px !important;
}
/************ CNHomHel ***********/
.picModSma{  /*picture modal Small*/
width:125px;
}
.picModLar{  /*picture modal Large*/
width:250px;
}
/****** CNPlaQui1AuwCom ************/
#tdTimSco{
padding-right:10px;
}
#CNPlaQui1AuwComdivFleTitApm {
flex-wrap:nowrap;
flex-direction:row;
}
#CNPlaQui1AuwComdivFleTit{
flex-grow:0; /*overrides above*/
max-width:1000px; /*required to overrides mediaQuery above*/
width:300px;  /*enforces 300px so that divFlePic aligns perfectly with divFleTit*/
}
#CNPlaQui1AuwComdivFleApm{
flex-grow:1; /*overrides above*/
max-width:345px;  /*380=768px-300px.CNPlaQui1AuwComdivFleTit - margin/padding, applies to iPhone.landscape*/
width:345px; /*required to avoid CNPlaQui1AuwComdivFleApm to expand based on length of apm/jsm message. Allows width to be < 345px*/
}
#CNPlaQui1AuwComdivFlePicQueCheAns {
flex-direction:row;
}
#CNPlaQui1AuwComdivFlePic{
flex-grow:0; /*overrides above*/
max-width:1000px; /*required to overrides mediaQuery above*/
width:300px;  /*Same as CNPlaQui1AuwComdivFleTit. 300px so that pic is always the same size*/
}
#CNPlaQui1AuwComdivFleQueCheAns{
flex-grow:1; /*overrides above*/
max-width:345px;  /*same as CNPlaQui1AuwComdivFleApm*/
width:345px; /*same as CNPlaQui1AuwComdivFleApm*/
}
/********* CNUpdModCom ******/
#tdCNUpdModComCNUpdModModSelSecHel{
display:none;
}
#CNReaModAuwComdivFlerefModOpt{
flex-direction:column;
}
.CNReaModAuwComdivFlerefModOptChi{
flex-basis:auto;
}
#CNReaRefAuwComdivFlePicSupRefDat{
flex-direction:column;
}
#CNReaRefAuwComdivFleMaiPicSup{
flex-basis:auto; /*overrides above*/
}
#CNReaRefAuwComdivFlePicSup{ 
flex-direction:row;
}
#CNReaRefAuwComdivFleRefDat{
flex-basis:auto; /*overrides above*/
}
/********** CNSelEve ***************/
#gooMapLegDiv{
font-size:70%;
}
.CNSelEveComEveTitL1{
font-size:85%;
}
.CNSelEveComEveDurL1{
font-size:75%;
}
.CNSelEveComEveHosL1{
font-size:75%;
}
#CNSelEveComvieEvetd{
font-size:70%; /*overrides above*/
}
#CNSelEveComZooimg{
height:18px;   /*overrides above*/
}
.aopEveFinOptOveFlo{
max-height:250px;
}
.svgTabArrDow{ /* the arrow down*/
display:none;
}
[id*=CNUpdEveAuwComavaParLisFie]{
font-size:75%;
}
[id*=CNUpdEveAuwComavaParLisFie] li{
padding-top:0.5em !important;
}
[id*=CNUpdEveAuwComselParLisFie]{
font-size:75%;
}
[id*=CNUpdEveAuwComselParLisFie] li{
padding-top:0.5em !important;
}
#CNUpdOrdAuwComdivFlerefDat{
min-width:350px;
}
#CNUpdParAuwComdivFleEveDat{
flex-direction:column;
justify-content:center;
}
#CNUpdParAuwComdivFleEveHos{
flex-basis:auto; /*overrides above*/
}
#CNUpdParAuwComdivFleEveDes{
flex-basis:auto; /*overrides above*/
}
#CNUpdParAuwComdivFleEveAdd{
flex-basis:auto; /*overrides above*/
}
#CNUpdParAuwComDesTab{
font-size:85% !important; /*overrides all text in table. important required*/
}
#CNUpdParAuwComdivFleQuiRulScoCNPlaQuiLev1{
flex-direction:column;
}
#CNUpdParAuwComdivFleQuiMaiRulSco{
flex-grow:1; 
max-width:1000px; /*overrides above. 1000 > 812 so that it takes all the space*/
}
#CNUpdParAuwComdivFleCNPlaQuiLev1{
flex-grow:1;
max-width:1000px;  /* >812 = no limit*/
width: auto; /*required to overeide above*/
}
#CNUpdParAuwComdivFleQuiRulSco {
flex-direction: row;
}
#CNUpdParAuwComdivFleQuiRul {
max-width: 400px; /*400 = 812*0.5*/
}
/*
#CNUpdParAuwComDesH1td{
font-size:70%; /overrides the h1 inside the td. important not required*
}
*/
#CNUpdVehAuwComdivFleSel{
font-size:90%;
}
.CCNVehDatSheWraTab{ /*complements .letLanTab: adds background. table wrapping each CCN datasheet. Eg: */
background-image:none; /*overwrite above, so that max amount of size is used for the vehicle data*/
font-size:80%; /*overwrite CCNbod*/
}
.CCNVehDatSheWraTabtd, .CCNDipWraTabtd{
padding:0em !important; /*ovewrite above*/
}
.CCNVehDatSheTabTd{
height:auto; /*so that when layout is not standard, the component height is only what is required. Note: also include iPhone.portrait and not perfect there*/
}
}
/***************************************************************************************************************/
/* 5Portrait */
@media screen and (max-width:812px) and (orientation:portrait){
.wrapperAuw{
/*border:1px solid cyan;*/
}
#CNVehPicMod1ModNamOwn{
order:3;
}
#CNVehPicMod1BraLog{
order:2;
}
} 
/***************************************************************************************************************/
/* 5Landscape */
@media screen and (max-width:812px) and (orientation:landscape){
.wrapperAuw{
/*border:1px dashed cyan;*/
}
}
/*************************************************************************************************************************************/
/* 6 Applies to iPhone 6-7-8 regular.Landspape, USXXCCNCUSxxxxxx, US07CCNUSLxxxxx pages displayed in 600px   */
@media screen and (max-width:667px){
.CCNbod{font-size:90%;}  /**/
.wrapperAuw{
}
/*border: 1px solid orange;*/
#divMesMaiEdi{
flex-wrap:wrap;
}
#divMesEdi1{
flex-grow:1;
order:1;
}
#divMesEdi2{
order:3;
}
#divMesEdi3{
order:2;
}
.sec{
margin-top:0.5em;
padding:0;
} 
.tabComHea.divMesMaiEdi{
margin-top:80px;  /*because header message is below icon and 'Save and exit'*/
}
.rating-uni{  /*set before in star-rating.min.css */
font-size:1em;
margin-top:-4px
}
#CNFacQuidivFlePic{
min-height:289px;  /*444 = 667*0.65/1.5: optimized for device with width=667, BUT image may be higher as matches right column*/
}
.CNGatAuwComaopTab{
width:100%;
}
#CNPlaQui1AuwComdivFleTit{
width:250px;  /*Same logic a 5*/
}
#CNPlaQui1AuwComdivFleApm{
max-width:300px;  /*Same logic a 5*/
width:300px;      /*Same logic a 5*/
}
#CNPlaQui1AuwComdivFlePic{
width:250px;     /*Same logic a 5*/
}
#CNPlaQui1AuwComdivFleQueCheAns{
max-width:300px;/*Same logic a 5*/
width:300px;    /*Same logic a 5*/
}
.CNUpdAddGooMap{
display:block;  /*looks better with small map than not*/
}
#CNUpdNotComdivFleNotMaiPosDat{
flex-direction:column;
justify-content:space-between;
}
#CNUpdNotComdivFleNot{
order:2;
}
#CNUpdNotComdivFlePosDat{
flex-direction:row;
}
.CNUpdParAuwComxxxDiv{
padding:0.3em 0.2em 0.2em 0.2em;
}
#CNUpdVehAuwComdivFlevehKeyPoi{
flex-direction:column;
}
}
/************************************************************************************************************************************/
/* 7 */
@media screen and (max-width:600px){
.CCNbod{font-size:100%;}
.wrapperAuw{  /* other styling defined in Generic section */
/*border:1px dashed orange;*/
}
/*border: 1px dashed orange;  /* same color as viewportRD.css */
/****CNCusMemHeaAuwCom*/
.icoHeaRD600{
display:inline;
}
.menHeaRD600{
display:none;
}
#CNFacQuidivFlePicQuiDat{
flex-direction:column;	
}
#CNFacQuidivFlePic{
flex-grow:1;
flex-shrink:1;
min-height:400px;  /*400 = 600 / 1.5: optimized for device with width=600*/
}
.CNFacQuiaotpicAns{
font-size:90%;  /*90% as Quiz displayed in column mode*/
}
[id*=CNLisModAuwComvehCon]{
display:none;
}
#CNUpdVehAuwComMaiSel{
display:block !important;
}
#CNUpdVehAuwComdivFleDisBraMilSerModPic{
flex-direction:column;
justify-content:center;	
}
.CNUpdVehAuwComdivFleSel{
flex-basis:50%;
flex-shrink:1;
}
.CNUpdVehAuwComdivFlepicMod{
max-width:200px; /*larger picture as only one CNUpdVehAuwComdivFleSel .selTyp5*/
min-width:200px;
flex-shrink:1;
}
.CNUpdVehAuwComDivMaiSel{
margin:0.3em 0 0.3em 0;
padding:0;
}
/*font-size:0; /*COMMENTED as messes-up font-size in contained elements. To avoid space between inline-block */
.CNUpdVehAuwComDivMaiSelDivTit{
margin:0;
padding:0;
display:inline-block;
vertical-align:top;
height:2em;
width:25%;
background-color:rgb(66,192,251);
}
.CNUpdVehAuwComDivMaiSelaotTit{
margin:0.5em 0 0.3em 0.3em;
display:inline-block;
color:white;
}
.CNUpdVehAuwComDivMaiSelDivDat{
margin:0;
padding:0;
display:inline-block;
vertical-align:top;
height:2em;
width:73%;
background-color:rgb(220,220,220);
}
.CNUpdVehAuwComDivMaiSelaotDat{
margin:0.5em 0 0.3em 0.3em;
display:inline-block;
color:rgb(72,72,72);
}
#CNUpdVehAuwComdivFleyeaSel{
display:none;
}
#CNUpdVehAuwComdivFleserSel{
display:none;
}
#CNUpdVehAuwComdivFlemodSel{
display:none;
}
}
/*************************************************************************************************************************************/
/* 8 */
@media screen and (max-width:414px){
.CCNbod{font-size:106%;}
.com h1{font-size:150%;}
.com h2{font-size:110%;}
.com h3{font-size:100%;}
.com h4{font-size:80%;}
.componentHeader h1{font-size:120%;} /*to be replaced by tabComHea*/
.tabComHea h1{font-size:120%;}
.componentHeader h1.h12L{font-size:100%;} /*to be replaced by tabComHea*/
.tabComHea h1.h12L{font-size:100%;}
.h12L{font-size:90%;}
.comCon{
padding-right:0.5em;
padding-left:0.5em;
}
.RD414Hid{ /*applied to element that must be hidden when device.width < 812*/
display:none !important;	
}
.fonSizRedRD414{ /*applies to ele, SOList*/
font-size:80%;
}
.messageText{
font-size:90%	
}
input[type="text"].inpTexTyp4{
font-size:100%;
}
input[type="text"].inpTexTyp5{
font-size:100%;
}
.selTyp4{
font-size:100%; /*same as .inpTexTyp4*/
}
.selTyp5{
font-size:100%; /* Same as inpTexTyp5 */
}
.mesDiv{
margin: 0px 0px 0px 0px;
}
.colLefRD{
padding-right:0;
}
.colRigRD{
padding-left:0;
}
.com .btnLar{  /*large. Used in CNUpdParAuwCom*/
font-size:120%; 
min-width:10em;
border-radius:0.3em;
padding:0.2em;
}
a[valueLeft]:hover:after{
width:15em;
margin:0em 0 0 -19em;
}
a[valueTLeft]:hover:after {
width:15em;
margin:-0.5em 0 0 -19em;
}
a.cke_button{
padding:3px 3px !important;  /*inputTextArea RTF=true CKEditor*/
}
.com .proAct > *, .com .proPas > *{
font-size:80%;
}
/* Below the 3 components in any Auw page */
.wrapperAuw{  /* other styling defined in Generic section */
/*border: 1px solid olive;  /* same color as viewportRD.css */
}
.comRig{ /* hides right Component. */
display:none !important;
}
.comLef .componentContainer { /*to be replaced by comCon*/
padding-right:0.5em;
padding-left:0.5em;
}
.comLef .comCon{
padding-right:0.5em;
padding-left:0.5em;
}
/* END the 3 components in any Auw page */
.CNCusMemHeaAuwComCNConnectingNoLogo{
display:none !important;
}
#CNCusMemHeaAuwComHeaRow1Tab{
width:100%;  /* must match .wrapperAuw.width */
}
#CNCusMemHeaAuwComMenProDivPopUp{
max-width:370px;
}
.iconNavDiv{
margin:0 0.2em 0 0.2em;	
}
.CNEveParAuwComRD, .CNEveParAuwComRD2{
display:none;
}
.CNEvePic2Pic{  /*used in CNEvePic2/CNEvePic2CCN */
width:100% !important; /*important required*/
}
#CNFacQuidivFlePic{
min-height:276px;  /*276 = 414 / 1.5: optimized for device with width=414*/
}
.CNFooAuwComDiv{   /* Not an Id as the Div has a specific Id in each page used by CCNCustomer.css */
/*border:2px solid black;*/
}
#CNFooAuwComrepBugModDiv{
width:400px !important; /*overrides value passed to disMesMod()*/	
}
.CNFooAuwComDivLin{
font-size:110%;
margin:1em 0 1em 0 !important;
}
.CNLisEveAuwComGooMapSup0{
display:none !important;	/*important required to override element.if.display */
}
#CNPlaQui1AuwComdivFleTitApm {
flex-direction:column;
}
#CNPlaQui1AuwComdivFleTit{
flex-grow:1;
max-width:450px; /*overrides above. 450 > 412 so that it takes all the space*/
width:auto;      /*overrides above*/
}
#CNPlaQui1AuwComdivFleApm{
flex-grow:1;
max-width:450px; /*overrides above. 450 > 412 so that it takes all the space*/
width:auto;      /*overrides above*/
}
#CNPlaQui1AuwComdivFlePicQueCheAns {
flex-direction:column;
}
#CNPlaQui1AuwComdivFlePic{
flex-grow:1; 
max-width:450px; /*same as CNPlaQui1AuwComdivFleTit*/
width:auto;      /*Same as CNPlaQui1AuwComdivFleTit*/
}
#CNPlaQui1AuwComdivFleQueCheAns{
flex-grow:1;
max-width:450px;  /*same as CNPlaQui1AuwComdivFleApm*/
width:auto;       /*same as CNPlaQui1AuwComdivFleApm*/
}
#CNReaModAuwComdivFleModSpeLefCol{
min-width:300px; /*300 < 320 = mobile phone mini*/
}
#CNReaModAuwComdivFleModSpeRigCol{
min-width:300px;
}
#CNReaOrgAuwComdivFleorgDat{
min-width:300px;  /* < 320px = mobilephone width*/
}
#CNReaOrgAuwComtdposLeaList .tdLea{
font-size:60%;
}
#CNReaOrgAuwComtdposLeaList .picFRM{  /*applies only to CNReaOrgAuw so that the 4 leaders can fit. Means width=105*/
height:70px;
}
#CNSelEveComvieEvetd{
font-size:120%; /*overrides above*/
}
#CNSelEveComZooimg{
height:24px;   /*overrides above*/
}
#CNSelEveComRigCol{
display:none;
}
#CNSelEveComMaiSel{
display:block !important;
}
.CNSelEveComDivMaiSel{
margin:0.3em 0 0.3em 0;
padding:0;
}
/*font-size:0; /*COMMENTED as messes-up font-size in contained elements. To avoid space between inline-block */
.CNSelEveComDivMaiSelDivTit{
margin:0;
padding:0;
display:inline-block;
vertical-align:top;
height:2.3em;
width:calc(25%);
background-color:rgb(66,192,251);
}
.CNSelEveComDivMaiSelaotTit{
margin:0.5em 0 0.3em 0.3em;
display:inline-block;
font-weight:700; /*same as aotTabTit*/
font-size:105%;  /*same as aotTabTit*/
color:white;
}
.CNSelEveComDivMaiSelDivDat{
margin:0;
padding:0;
display:inline-block;
vertical-align:top;
height:2.3em;
width:calc(73%);
background-color:white;
}
.CNSelEveComDivMaiSelaotDat{
margin:0.5em 0 0.3em 0.3em;
display:inline-block;
font-weight:700; /*same as aotTabTit*/
font-size:105%;  /*same as aotTabTit*/
color:rgb(72,72,72);
}
#eveFin2Div{
display:none;
}
#eveFin3Div{
display:none;
}
#eveFin4Div{
display:none;
}
#eveFin5Div{
display:none;
}
.eveFinDivWra{
width:50%;
}
#CNSubConComdivFlePicWanYou{
flex-direction:row;	
}
#CNSubEvePubPriComdivFleMai{
flex-direction:column;	
}
.CNSubEvePubPriComdivFleChi{
flex-basis:auto;
flex-grow:1;
}
/****** CNUpdParAuwCom ***************/
#divBac{
margin:0 0 10px 0;
}
.CNUpdParAuwComwRefPic{
display:none;	
}
#CNUpdParAuwComdivFleQuiRulScoCNPlaQuiLev1{
flex-direction:column;
}
#CNUpdParAuwComdivFleQuiMaiRulSco{
flex-grow:1; 
max-width:450px; /*overrides above. 450 > 412 so that it takes all the space*/
}
#CNUpdParAuwComdivFleCNPlaQuiLev1{
flex-grow:1;
max-width:450px; /*overrides above. 450 > 412 so that it takes all the space*/
}
#CNUpdParAuwComdivFleQuiRulSco {
flex-direction:column;
}
#CNUpdParAuwComdivFleQuiRul {
flex-grow:1;
max-width:450px; /*overrides above. 450 > 412 so that it takes all the space*/
}
.parEveStaMes{ /*CNUpdParAuwCom for aopEveStaMes and aopParStaMes*/
font-size:100%;
line-height:100%;
}
.CNUpdVehAuwComdivFlepicMod{
max-width:150px;
min-width:150px;
}
[id*=CNUpdVehAuwComaifvehCondition]{
font-size:90%;	
}
/******* USXX... / US07... pages matching VF email templates ***/
.VFEmaTemVieInBro{
width:100%;  /*Used all document.documentElement.clientWidth;*/
font-size:80%;
}
}
/*************************************************************************************************************************************/
/* 9 */
@media screen and (max-width:375px){
.CCNbod{font-size:85%;}  /*should be 100% be need to squeeze as much as possible in 320px-*/

}