.overflowHidden { overflow: hidden; }


/*--Generic css attributes--*/

.monospace .editorField .readonlyTextBoxSpan { font-family: monospace !important; }

.clearLeft { clear: left;}
.clearRight { clear: right;}
.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }
.bold { font-weight: bold; }

.center {text-align:center }
.textAlignLeft {text-align:left }
.textAlignRight {text-align:right }
.vAlignTop { vertical-align: top; }
.vAlignMiddle { vertical-align: middle; }


/* Text sizes */

.smallText  { font-size: 0.9em !important; }
.mediumText { font-size: 1.2em; }
.largeText  { font-size: 1.5em; }
.largerText { font-size: 2em;   }

.zIndex1 { z-index: 1; }
.noWrap { white-space: nowrap; }
.ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.floatLeft, .cFloatLeft > *     { float:left; }
.floatLeftImportant, .cFloatLeftImportant > *     { float:left !important; }
.floatRight, .cFloatRight > *    { float:right; }
.floatNone, .cFloatNone > * { float: none; }

.pAbsolute { position: absolute; }
.pRelative { position: relative; }

.left0 { left: 0; }
.left5 { left: 5px; }
.left10 { left: 10px; }
.left15 { left: 15px; }
.left20 { left: 20px; }
.left25 { left: 25px; }
.left30 { left: 30px; }

.right0 { right: 0; }
.right5 { right: 5px; }
.right10 { right: 10px; }
.right15 { right: 15px; }
.right20 { right: 20px; }
.right25 { right: 25px; }
.right30 { right: 30px; }

.top0 { top: 0; }
.top5 { top: 5px; }
.top10 { top: 10px; }
.top15 { top: 15px; }
.top20 { top: 20px; }
.top25 { top: 25px; }
.top30 { top: 30px; }

.bottom0 { bottom: 0; }
.bottom5 { bottom: 5px; }
.bottom10 { bottom: 10px; }
.bottom15 { bottom: 15px; }
.bottom20 { bottom: 20px; }
.bottom25 { bottom: 25px; }
.bottom30 { bottom: 30px; }



.block, .cBlock > * { display: block;}
.blockImportant, .cBlockImportant > *, .controlBlockImportant .textBoxControl, .contolBlockImportant .tbcEditorField { display:block !important; }
.inlineBlock, .cInlineBlock > * { display: inline-block; }
.inlineBlockImportant { display: inline-block !important; }
.table { display: table; }
.table-cell, .cTable-Cell > * { display: table-cell; }
.flex { display:flex; }

.center > .flex, .center > .flex0 { 
    align-items: center;    
    justify-content: center;
}

.flex > * { float:left; flex:1; }
.flex0 { flex: 0; }

.border1   { border-style:solid; border-width:1px; }
.borderT1  { border-top-style:solid; border-top-width:1px; }
.borderB1  { border-bottom-style:solid; border-bottom-width:1px; }
.borderBox { box-sizing:border-box; }

.columns2 > * { width: 50% }
.columns3 > * { width: 33.3333333% }
.columns4 > * { width: 25%; }
.columns5 > * { width: 20%; }
.columns6 > * { width: 16.6666667%; }
.columns7 > * { width: 14.2857143%; }
.columns8 > * { width: 12.5% }
.columns9 > * { width: 11.1111111% }
.columns10 > * { width: 10% }




.opac1  { opacity: 1;  }
.opac0  { opacity: 0;  }
.opac03 { opacity: 0.3;}
.opac05 { opacity: 0.5;}
.opac07 { opacity: 0.7;}
.opac09 { opacity: 0.9;}


.dataFieldContainer.clearLeft, .inputFieldContainer.clearLeft { clear:left !important; }
.dataFieldContainer.clearRight, .inputFieldContainer.clearRight { clear:right !important; }

.dataFieldContainer.floatNone, .inputFieldContainer.floatNone, .dataLblFloatNone .editorLabel, .dataFldFloatNone .editorField { float:none !important; }
.dataFieldContainer.floatLeft, .inputFieldContainer.floatLeft, .dataLblFloatLeft .editorLabel, .dataFldFloatLeft .editorField { float: left !important; }
.dataFieldContainer.floatRight, .inputFieldContainer.floatRight, .dataLblFloatRight .editorLabel, .dataFldFloatRight .editorField { float:right !important; }

/*--Various Label and Field dimensions (Used on container elements)--*/


/*--General Margin classes--*/


.marginTNeg5 { margin-top: -5px }
.marginTNeg10 { margin-top: -10px }
.marginTNeg15 { margin-top: -15px }
.marginTNeg20 { margin-top: -20px }

.marginTNeg5Important { margin-top: -5px !important; }
.marginTNeg10Important { margin-top: -10px !important; }
.marginTNeg15Important { margin-top: -15px !important; }
.marginTNeg20Important { margin-top: -20px !important; }

.margin0, .cMargin0 > *         { margin:0; }
.marginT0, .cMarginT0           { margin-top:0; }
.marginT0Important, .cMarginT0Important > * { margin-top:0 !important; }
.marginB0, .cMarginB0           { margin-bottom:0; }
.marginTB0, .cMarginTB0 > *     { margin-top:0; margin-bottom:0; }
.marginL0, .cMarginL0 > *       { margin-left:0; }
.marginR0, .cMarginR0 > *       { margin-right:0; }
.marginLR0, .cMarginLR0 > *     { margin-left:0; margin-right:0; }
.marginL1                       { margin-left: 1px; }
.marginR1                       { margin-right: 1px; }
.marginL2                       { margin-left: 2px; }
.marginR2                       { margin-right: 2px; }
.marginL3                       { margin-left: 3px; }
.marginR3                       { margin-right: 3px; }
.marginL4                       { margin-left: 4px; }
.marginR4                       { margin-right: 4px; }
.margin5, .cMargin5 > *         { margin:5px; }
.marginT5, .cMarginT5           { margin-top:5px; }
.marginT6, .cMarginT6           { margin-top:6px; }
.marginT7, .cMarginT7           { margin-top:7px; }
.marginB5, .cMarginB5           { margin-bottom:5px; }
.marginTB5, .cMarginTB5 > *     { margin-top:5px; margin-bottom:5px; }
.marginL5, .cMarginL5 > *       { margin-left:5px; }
.marginL6, .cMarginL6 > *       { margin-left:6px; }
.marginR5, .cMarginR5 > *       { margin-right:5px; }
.marginLR5, .cMarginLR5 > *     { margin-left:5px; margin-right:5px; }
.margin10, .cMargin10 > *       { margin:10px; }
.marginT10, .cMarginT10         { margin-top:10px; }
.marginT10I                     { margin-top:10px !important; }
.marginB10, .cMarginB10 > *     { margin-bottom:10px; }
.marginTB10, .cMarginTB10 > *   { margin-top:10px; margin-bottom:10px; }
.marginL10, .cMarginL10 > *     { margin-left:10px; }
.marginR10, .cMarginR10 > *     { margin-right:10px; }
.marginLR10, .cMarginLR10 > *   { margin-left:10px; margin-right:10px; }
.marginT20, .cMarginT20 > *     { margin-top: 20px; }
.marginB20, .cMarginB20 > *     { margin-bottom: 20px; }
.marginL20, .cMarginL20 > *     { margin-left: 20px; }
.marginR20, .cMarginR20 > *     { margin-right: 20px; }

.marginT50                      { margin-top: 50px; }
.marginL120                     { margin-left: 120px; }








.minWidth10, .lblMinWidth10 .editorLabel, .fldMinWidth10 .editorField    {    min-width:10px;   }
.minWidth20, .lblMinWidth20 .editorLabel, .fldMinWidth20 .editorField      {    min-width:20px;   }
.minWidth30, .lblMinWidth30 .editorLabel, .fldMinWidth30 .editorField      {    min-width:30px;   }
.minWidth40, .lblMinWidth40 .editorLabel, .fldMinWidth40 .editorField      {    min-width:40px;   }
.minWidth50, .lblMinWidth50 .editorLabel, .fldMinWidth50 .editorField      {    min-width:50px;   }
.minWidth60, .lblMinWidth60 .editorLabel, .fldMinWidth60 .editorField     {    min-width:60px;   }
.minWidth70, .lblMinWidth70 .editorLabel, .fldMinWidth70 .editorField      {    min-width:70px;   }
.minWidth80, .lblMinWidth80 .editorLabel, .fldMinWidth80 .editorField      {    min-width:80px;   }
.minWidth90, .lblMinWidth90 .editorLabel, .fldMinWidth90 .editorField      {    min-width:90px;   }
.minWidth100, .lblMinWidth100 .editorLabel, .fldMinWidth100 .editorField     {    min-Width:100px;   }
.minWidth110, .lblMinWidth110 .editorLabel, .fldMinWidth110 .editorField     {    min-Width:110px;   }
.minWidth120, .lblMinWidth120 .editorLabel, .fldMinWidth120 .editorField     {    min-Width:120px;   }
.minWidth130, .lblMinWidth130 .editorLabel, .fldMinWidth130 .editorField     {    min-Width:130px;   }
.minWidth140, .lblMinWidth140 .editorLabel, .fldMinWidth140 .editorField     {    min-Width:140px;   }
.minWidth150, .lblMinWidth150 .editorLabel, .fldMinWidth150 .editorField     {    min-Width:150px;   }
.minWidth160, .lblMinWidth160 .editorLabel, .fldMinWidth160 .editorField     {    min-Width:160px;   }
.minWidth170, .lblMinWidth170 .editorLabel, .fldMinWidth170 .editorField     {    min-Width:170px;   }
.minWidth180, .lblMinWidth180 .editorLabel, .fldMinWidth180 .editorField     {    min-Width:180px;   }
.minWidth190, .lblMinWidth190 .editorLabel, .fldMinWidth190 .editorField     {    min-Width:190px;   }
.minWidth200, .lblMinWidth200 .editorLabel, .fldMinWidth200 .editorField     {    min-Width:200px;   }
.minWidth210    {    min-Width:210px;   }
.minWidth220    {    min-Width:220px;   }
.minWidth230    {    min-Width:230px;   }
.minWidth240    {    min-Width:240px;   }
.minWidth250    {    min-Width:250px;   }
.minWidth260    {    min-Width:260px;   }
.minWidth270    {    min-Width:270px;   }
.minWidth280    {    min-Width:280px;   }
.minWidth290    {    min-Width:290px;   }
.minWidth300    {    min-Width:300px;   }
.minWidth490    {    min-width: 490px;    }
.minWidth580    {    min-width: 580px;    }

.minHeight50    {    min-height: 50px;    }
.minHeight60    {    min-height: 60px;    }
.minHeight70    {    min-height: 70px;    }
.minHeight80    {    min-height: 80px;    }
.minHeight90    {    min-height: 90px;    }
.minHeight100    {    min-height: 100px;    }
.minHeight250   {    min-height: 250px;    }
.minHeight300   {    min-height: 300px;    }



.maxWidth10, .fldmaxWidth10 .editorField    {    max-width:10px;   }
.maxWidth20, .fldmaxWidth20 .editorField      {    max-width:20px;   }
.maxWidth30, .fldmaxWidth30 .editorField      {    max-width:30px;   }
.maxWidth40, .fldmaxWidth40 .editorField      {    max-width:40px;   }
.maxWidth50, .fldmaxWidth50 .editorField      {    max-width:50px;   }
.maxWidth60, .fldmaxWidth60 .editorField     {    max-width:60px;   }
.maxWidth70, .fldmaxWidth70 .editorField      {    max-width:70px;   }
.maxWidth80, .fldmaxWidth80 .editorField      {    max-width:80px;   }
.maxWidth90, .fldmaxWidth90 .editorField      {    max-width:90px;   }
.maxWidth100, .fldmaxWidth100 .editorField     {    max-width:100px;   }
.maxWidth110, .fldmaxWidth110 .editorField     {    max-width:110px;   }
.maxWidth120, .fldmaxWidth120 .editorField     {    max-width:120px;   }
.maxWidth130, .fldmaxWidth130 .editorField     {    max-width:130px;   }
.maxWidth140, .fldmaxWidth140 .editorField     {    max-width:140px;   }
.maxWidth150, .fldmaxWidth150 .editorField     {    max-width:150px;   }
.maxWidth160, .fldmaxWidth160 .editorField     {    max-width:160px;   }
.maxWidth170, .fldmaxWidth170 .editorField     {    max-width:170px;   }
.maxWidth180, .fldmaxWidth180 .editorField     {    max-width:180px;   }
.maxWidth190, .fldmaxWidth190 .editorField     {    max-width:190px;   }
.maxWidth200, .fldmaxWidth200 .editorField     {    max-width:200px;   }
.maxWidth210, .fldmaxWidth210 .editorField    {    max-width:210px;   }
.maxWidth220, .fldmaxWidth220 .editorField    {    max-width:220px;   }
.maxWidth230, .fldmaxWidth230 .editorField    {    max-width:230px;   }
.maxWidth240, .fldmaxWidth240 .editorField    {    max-width:240px;   }
.maxWidth250, .fldmaxWidth250 .editorField    {    max-width:250px;   }
.maxWidth260, .fldmaxWidth260 .editorField    {    max-width:260px;   }
.maxWidth270, .fldmaxWidth270 .editorField    {    max-width:270px;   }
.maxWidth280, .fldmaxWidth280 .editorField    {    max-width:280px;   }
.maxWidth290, .fldmaxWidth290 .editorField    {    max-width:290px;   }
.maxWidth300, .fldmaxWidth300 .editorField    {    max-width:300px;   }
.maxWidth310, .fldmaxWidth310 .editorField    {    max-width:310px;   }
.maxWidth320, .fldmaxWidth320 .editorField    {    max-width:320px;   }
.maxWidth330, .fldmaxWidth330 .editorField    {    max-width:330px;   }
.maxWidth340, .fldmaxWidth340 .editorField    {    max-width:340px;   }
.maxWidth350, .fldmaxWidth350 .editorField    {    max-width:350px;   }
.maxWidth360, .fldmaxWidth360 .editorField    {    max-width:360px;   }
.maxWidth370, .fldmaxWidth370 .editorField    {    max-width:370px;   }
.maxWidth380, .fldmaxWidth380 .editorField    {    max-width:380px;   }
.maxWidth390, .fldmaxWidth390 .editorField    {    max-width:390px;   }
.maxWidth400, .fldmaxWidth400 .editorField    {    max-width:400px;   }
.maxWidth490, .fldmaxWidth490 .editorField    {    max-width: 490px;    }
.maxWidth530 , .fldmaxWidth530 .editorField   {    max-width: 530px;    }
.maxWidth580 , .fldmaxWidth580 .editorField   {    max-width: 580px;    }



.width30, .lblWidth30 .editorLabel    {    width:30px;    }
.width40, .lblWidth40 .editorLabel    {    width:40px;    }
.width50, .lblWidth50 .editorLabel    {    width:50px     }
.width60, .lblWidth60 .editorLabel    {    width:60px;    }
.width90, .lblWidth90 .editorLabel    {    width:90px;    }
.width100, .lblWidth100 .editorLabel, .fldWidth100 .editorField input, .relatedDataPortlet .dataFieldContainer.lblWidth100 .editorLabel {    width:100px;  }
.width120, .lblWidth120 .editorLabel, .fldWidth120 .editorField input, .relatedDataPortlet .dataFieldContainer.lblWidth120 .editorLabel {    width:120px;   }
.width150, .lblWidth150 .editorLabel, .fldWidth150 .editorField input, .relatedDataPortlet .dataFieldContainer.lblWidth150 .editorLabel {    width:150px;   }
.width160, .lblWidth160 .editorLabel, .fldWidth160 .editorField input, .relatedDataPortlet .dataFieldContainer.lblWidth160 .editorLabel {    width:160px;   }
.width180, .lblWidth180 .editorLabel, .fldWidth180 .editorField input {    width:180px;   }
.width200, .lblWidth200 .editorLabel, .fldWidth200 .editorField input {    width:200px;   }
.fldMargin0 .editorField input, .fldMargin0 .editorField select {    margin-right:0; }








.height40 { height: 40px; }
.height50 { height: 50px; }
.height60 { height: 60px; }
.height70 { height: 70px; }
.height80 { height: 80px; }
.height90 { height: 90px; }
.height100 { height: 100px; }
.height100perc, .height100Perc { height: 100%; }


/*--Generic Padding classes--*/

.padding0I, .cPadding0I > *       {  padding:0 !important; }
.paddingT0I, .cPaddingT0I         {  padding-top:0 !important; }
.paddingB0I, .cPaddingB0I         {  padding-bottom:0 !important; }
.paddingTB0I, .cPaddingTB0I > *   {  padding-top:0 !important;    padding-bottom:0 !important; }
.paddingL0I, .cPaddingL0I > *     {  padding-left:0 !important; }
.paddingR0I, .cPaddingR0I > *     {  padding-right:0 !important; }
.paddingLR0I, .cPaddingLR0I > *   {  padding-left:0 !important;    padding-right:0 !important; }
.padding5I, .cPadding5I > *       {  padding:5px !important; }
.paddingT5I, .cPaddingT5I         {  padding-top:5px !important; }
.paddingB5I, .cPaddingB5I         {  padding-bottom:5px !important; }
.paddingTB5I, .cPaddingTB5I > *   {  padding-top:5px !important;    padding-bottom:5px !important; }
.paddingL5I, .cPaddingL5I > *     {  padding-left:5px !important; }
.paddingR5I, .cPaddingR5I > *     {  padding-right:5px !important; }
.paddingLR5I, .cPaddingLR5I > *   {  padding-left:5px !important;    padding-right:5px !important;}
.padding10I, .cPadding10I > *     {  padding:10px !important; }
.paddingT10I, .cPaddingT10I       {  padding-top:10px !important; }
.paddingB10I, .cPaddingB10I       {  padding-bottom:10px !important; }
.paddingTB10I, .cPaddingTB10I > * {  padding-top:10px !important;    padding-bottom:10px !important; }
.paddingL10I, .cPaddingL10I > *   {  padding-left:10px !important; }
.paddingR10I, .cPaddingR10I > *   {  padding-right:10px !important; }
.paddingLR10I, .cPaddingLR10I > * {  padding-left:10px !important;     padding-right:10px !important; }


/*--Percentage widths--*/

.width5Perc, .lblWidth5Perc .editorLabel { width:5%; }
.width10Perc, .lblWidth10Perc .editorLabel { width:10%; }
.width15Perc, .lblWidth15Perc .editorLabel { width:15%; }
.width20Perc, .lblWidth20Perc .editorLabel { width:20%; }
.width25Perc, .lblWidth25Perc .editorLabel { width:25%; }
.width30Perc, .lblWidth30Perc .editorLabel { width:30%; }
.width35Perc, .lblWidth35Perc .editorLabel { width:35%; }
.width40Perc, .lblWidth40Perc .editorLabel { width:40%; }
.width45Perc, .lblWidth45Perc .editorLabel { width:45%; }
.width50Perc, .lblWidth50Perc .editorLabel { width:50% }
.width55Perc, .lblWidth55Perc .editorLabel { width:55% }
.width60Perc, .lblWidth60Perc .editorLabel {width: 47%;}
.width65Perc, .lblWidth65Perc .editorLabel { width:65% }
.width70Perc, .lblWidth70Perc .editorLabel { width:70% }
.width75Perc, .lblWidth75Perc .editorLabel { width:75% }
.width80Perc, .lblWidth80Perc .editorLabel { width:80% }
.width85Perc, .lblWidth85Perc .editorLabel { width:85% }
.width90Perc, .lblWidth90Perc .editorLabel { width:90% }
.width95Perc, .lblWidth95Perc .editorLabel { width:95% }
.width100Perc, .lblWidth100Perc .editorLabel { width:100% }




/*--Percentage widths that are responsive--*/



@media screen and (max-width: 500px) {

    .phone .xsm-font70Perc { font-size:70%; }
    .phone .xsm-font80Perc { font-size:80%; }
    .phone .xsm-font90Perc { font-size:90%; }

    .phone .xsm-block { display:block; }
    .phone .xsm-floatNone, .xsm-cFloatNone > * { float:none; }
    .xsm-margin0Auto { margin:0 auto; }

    .phone .xsm-stacked > * { float: none !important; display: block !important; }

    .phone .xsm-floatLeft, .phone .thumbnailSection.xsm-floatLeft, .phone .dataFieldContainer.xsm-floatLeft { float: left !important; }
    .phone .xsm-floatRight, .phone .thumbnailSection.xsm-floatRight { float: right !important; }

    .phone .xsm-clearNone { clear: none !important; }
    .phone .xsm-clearLeft { clear: left !important; }
    .phone .xsm-clearRight { clear: right !important; }

    .phone .xsm-textAlignLeft { text-align: left !important; }
    .phone .xsm-textAlignRight { text-align: right !important; }

    .phone .xms-pAbsolute { position: absolute; }
    .phone .xsm-pRelative { position: relative; }

    .phone .xsm.left0 { left: 0; }
    .phone .xsm-left5 { left: 5px; }
    .phone .xsm-left10 { left: 10px; }
    .phone .xsm-left15 { left: 15px; }
    .phone .xsm-left20 { left: 20px; }
    .phone .xsm-left25 { left: 25px; }
    .phone .xsm-left30 { left: 30px; }

    .phone .xsm-right0 { right: 0; }
    .phone .xsm-right5 { right: 5px; }
    .phone .xsm-right10 { right: 10px; }
    .phone .xsm-right15 { right: 15px; }
    .phone .xsm-right20 { right: 20px; }
    .phone .xsm-right25 { right: 25px; }
    .phone .xsm-right30 { right: 30px; }

    .phone .xsm-top0 { top: 0; }
    .phone .xsm-top5 { top: 5px; }
    .phone .xsm-top10 { top: 10px; }
    .phone .xsm-top15 { top: 15px; }
    .phone .xsm-top20 { top: 20px; }
    .phone .xsm-top25 { top: 25px; }
    .phone .xsm-top30 { top: 30px; }

    .phone .xsm-bottom0 { bottom: 0; }
    .phone .xsm-bottom5 { bottom: 5px; }
    .phone .xsm-bottom10 { bottom: 10px; }
    .phone .xsm-bottom15 { bottom: 15px; }
    .phone .xsm-bottom20 { bottom: 20px; }
    .phone .xsm-bottom25 { bottom: 25px; }
    .phone .xsm-bottom30 { bottom: 30px; }

    .phone .xsm-marginT5 { margin-top: 5px!important; }
    .phone .xsm-marginT10 { margin-top: 10px!important; }
    .phone .xsm-marginTB5 { margin-top: 5px!important; margin-bottom: 5px !important; }
    .phone .xsm-marginTB10 { margin-top: 10px!important; margin-bottom: 10px !important; }

    .phone .xsm-width5Perc, .phone .xsm-lblWidth5Perc .editorLabel { width:5%; }
    .phone .xsm-width10Perc, .phone .xsm-lblWidth10Perc .editorLabel { width:10%; }
    .phone .xsm-width15Perc, .phone .xsm-lblWidth15Perc .editorLabel { width:15%; }
    .phone .xsm-width20Perc, .phone .xsm-lblWidth20Perc .editorLabel { width:20%; }
    .phone .xsm-width25Perc, .phone .xsm-lblWidth25Perc .editorLabel { width:25%; }
    .phone .xsm-width30Perc, .phone .xsm-lblWidth30Perc .editorLabel { width:30%; }
    .phone .xsm-width35Perc, .phone .xsm-lblWidth35Perc .editorLabel { width:35%; }
    .phone .xsm-width40Perc, .phone .xsm-lblWidth40Perc .editorLabel { width:40%; }
    .phone .xsm-width45Perc, .phone .xsm-lblWidth45Perc .editorLabel { width:45%; }
    .phone .xsm-width50Perc, .phone .xsm-lblWidth50Perc .editorLabel { width:50% }
    .phone .xsm-width55Perc, .phone .xsm-lblWidth55Perc .editorLabel { width:55% }
    .phone .xsm-width60Perc, .phone .xsm-lblWidth60Perc .editorLabel { width:60% }
    .phone .xsm-width65Perc, .phone .xsm-lblWidth65Perc .editorLabel { width:65% }
    .phone .xsm-width70Perc, .phone .xsm-lblWidth70Perc .xs-editorLabel { width:70% }
    .phone .xsm-width75Perc, .phone .xsm-lblWidth75Perc .xs-editorLabel { width:75% }
    .phone .xsm-width80Perc, .phone .xsm-lblWidth80Perc .editorLabel { width:80% }
    .phone .xsm-width85Perc, .phone .xsm-lblWidth85Perc .editorLabel { width:85% }
    .phone .xsm-width90Perc, .phone .xsm-lblWidth90Perc .editorLabel { width:90% }
    .phone .xsm-width95Perc, .phone .xsm-lblWidth95Perc .editorLabel { width:95% }
    .phone .xsm-width100Perc, .phone .xsm-lblWidth100Perc .editorLabel { width:100% }
}

.mq-xsm .xsm-font70Perc { font-size:70%; }
.mq-xsm .xsm-font80Perc { font-size:80%; }
.mq-xsm .xsm-font90Perc { font-size:90%; }


.mq-xsm .xsm-width5Perc, .mq-xsm .xsm-lblWidth5Perc .editorLabel { width:5%; }
.mq-xsm .xsm-width10Perc, .mq-xsm .xsm-lblWidth10Perc .editorLabel { width:10%; }
.mq-xsm .xsm-width15Perc, .mq-xsm .xsm-lblWidth15Perc .editorLabel { width:15%; }
.mq-xsm .xsm-width20Perc, .mq-xsm .xsm-lblWidth20Perc .editorLabel { width:20%; }
.mq-xsm .xsm-width25Perc, .mq-xsm .xsm-lblWidth25Perc .editorLabel { width:25%; }
.mq-xsm .xsm-width30Perc, .mq-xsm .xsm-lblWidth30Perc .editorLabel { width:30%; }
.mq-xsm .xsm-width35Perc, .mq-xsm .xsm-lblWidth35Perc .editorLabel { width:35%; }
.mq-xsm .xsm-width40Perc, .mq-xsm .xsm-lblWidth40Perc .editorLabel { width:40%; }
.mq-xsm .xsm-width45Perc, .mq-xsm .xsm-lblWidth45Perc .editorLabel { width:40%; }
.mq-xsm .xsm-width50Perc, .mq-xsm .xsm-lblWidth50Perc .editorLabel { width:50% }
.mq-xsm .xsm-width55Perc, .mq-xsm .xsm-lblWidth55Perc .editorLabel { width:55% }
.mq-xsm .xsm-width60Perc, .mq-xsm .xsm-lblWidth60Perc .editorLabel { width:60% }
.mq-xsm .xsm-width65Perc, .mq-xsm .xsm-lblWidth65Perc .editorLabel { width:65% }
.mq-xsm .xsm-width70Perc, .mq-xsm .xsm-lblWidth70Perc .xs-editorLabel { width:70% }
.mq-xsm .xsm-width75Perc, .mq-xsm .xsm-lblWidth75Perc .xs-editorLabel { width:75% }
.mq-xsm .xsm-width80Perc, .mq-xsm .xsm-lblWidth80Perc .editorLabel { width:80% }
.mq-xsm .xsm-width85Perc, .mq-xsm .xsm-lblWidth85Perc .editorLabel { width:85% }
.mq-xsm .xsm-width90Perc, .mq-xsm .xsm-lblWidth90Perc .editorLabel { width:90% }
.mq-xsm .xsm-width95Perc, .mq-xsm .xsm-lblWidth95Perc .editorLabel { width:95% }
.mq-xsm .xsm-width100Perc, .mq-xsm .xsm-lblWidth100Perc .editorLabel { width:100% }

.mq-xsm .xsm-maxWidth200Pix { max-width:200px; }
.mq-xsm .xsm-maxWidth250Pix { max-width:250px; }
.mq-xsm .xsm-maxWidth300Pix { max-width:300px; }




.mq-md .md-floatLeft { float: left; }
.mq-md .md-floatRight { float: right; }

.mq-md .md-textAlignLeft { text-align: left; }
.mq-md .md-textAlignRight { text-align: right; }









/*--Label and width overrides for cards--*/

.dataFldMaxWidth230 .editorField { max-width: 230px !important; }


.dataLblWidth30 .editorLabel, .dataFldWidth30 .editorField { width:30px !important; }
.dataLblWidth40 .editorLabel, .dataFldWidth40 .editorField { width:40px !important; }
.dataLblWidth50 .editorLabel, .dataFldWidth50 .editorField { width:50px !important; }
.dataLblWidth60 .editorLabel, .dataFldWidth60 .editorField { width:60px !important; }
.dataLblWidth70 .editorLabel, .dataFldWidth70 .editorField { width:70px !important; }
.dataLblWidth80 .editorLabel, .dataFldWidth80 .editorField { width:80px !important; }
.dataLblWidth90 .editorLabel, .dataFldWidth90 .editorField { width:90px !important; }
.dataLblWidth100 .editorLabel, .dataFldWidth100 .editorField { width:100px !important; }
.dataLblWidth110 .editorLabel, .dataFldWidth110 .editorField { width:110px !important; }
.dataLblWidth120 .editorLabel, .dataFldWidth120 .editorField { width:120px !important; }
.dataLblWidth130 .editorLabel, .dataFldWidth130 .editorField { width:130px !important; }
.dataLblWidth140 .editorLabel, .dataFldWidth140 .editorField { width:140px !important; }
.dataLblWidth150 .editorLabel, .dataFldWidth150 .editorField { width:150px !important; }
.dataLblWidth160 .editorLabel, .dataFldWidth160 .editorField { width:160px !important; }
.dataLblWidth170 .editorLabel, .dataFldWidth170 .editorField { width:170px !important; }
.dataLblWidth180 .editorLabel, .dataFldWidth180 .editorField { width:180px !important; }
.dataLblWidth190 .editorLabel, .dataFldWidth190 .editorField { width:190px !important; }
.dataLblWidth200 .editorLabel, .dataFldWidth200 .editorField { width:200px !important; }

.fldWidthAuto .editorField, .autoWidthForLabels .editorLabel  {    width:auto;   }
.dataFldWidthAuto > .dataFieldContainer, .dataLblWidthAuto > .dataFieldContainer > .editorLabel {    width:auto !important;   }

/*--Padding overrides for cards--*/
.dataFldPadding0.dataFieldContainer > .editorLabel { padding: 0 !important;}

.thumbnailSection.padding0, .dataLblPadding0 .iconLabel, .dataLblPadding0 .editorLabel, .dataFldPadding0 .editorField { padding: 0 !important; }
.thumbnailSection.padding5, .dataLblPadding5 .iconLabel, .dataLblPadding5 .editorLabel, .dataFldPadding5 .editorField { padding: 5px !important; }
.thumbnailSection.padding10, .dataLblPadding10 .iconLabel, .dataLblPadding10 .editorLabel, .dataFldPadding10 .editorField { padding: 10px !important; }

.dataLblTPadding0 .iconLabel, .dataLblTPadding0 .editorLabel, .dataFldTPadding0 .editorField { padding-top: 0 !important; }
.dataLblBPadding0 .iconLabel, .dataLblBPadding0 .editorLabel, .dataFldBPadding0 .editorField { padding-bottom: 0 !important; }
.dataLblLPadding0 .iconLabel, .dataLblLPadding0 .editorLabel, .dataFldLPadding0 .editorField { padding-left: 0 !important; }
.dataLblRPadding0 .iconLabel, .dataLblRPadding0 .editorLabel, .dataFldRPadding0 .editorField { padding-right: 0 !important; }

.dataLblPaddingT0 .iconLabel, .dataLblPaddingT0 .editorLabel, .dataFldPaddingT0 .editorField { padding-top: 0 !important; }
.dataLblPaddingB0 .iconLabel, .dataLblPaddingB0 .editorLabel, .dataFldPaddingB0 .editorField { padding-bottom: 0 !important; }
.dataLblPaddingL0 .iconLabel, .dataLblPaddingL0 .editorLabel, .dataFldPaddingL0 .editorField { padding-left: 0 !important; }
.dataLblPaddingR0 .iconLabel, .dataLblPaddingR0 .editorLabel, .dataFldPaddingR0 .editorField { padding-right: 0 !important; }


.dataLblTPadding5 .iconLabel, .dataLblTPadding5 .editorLabel, .dataFldTPadding5 .editorField { padding-top: 5px !important; }
.dataLblBPadding5 .iconLabel, .dataLblBPadding5 .editorLabel, .dataFldBPadding5 .editorField { padding-bottom: 5px !important; }
.dataLblLPadding5 .iconLabel, .dataLblLPadding5 .editorLabel, .dataFldLPadding5 .editorField { padding-left: 5px !important; }
.dataLblRPadding5 .iconLabel, .dataLblRPadding5 .editorLabel, .dataFldRPadding5 .editorField { padding-right: 5px !important; }

.dataLblPaddingT5 .iconLabel, .dataLblPaddingT5 .editorLabel, .dataFldPaddingT5 .editorField, .dataFldPaddingTB5 .editorField { padding-top: 5px !important; }
.dataLblPaddingB5 .iconLabel, .dataLblPaddingB5 .editorLabel, .dataFldPaddingB5 .editorField, .dataFldPaddingTB5 .editorField { padding-bottom: 5px !important; }
.thumbnailSection.paddingL5, .dataLblPaddingL5 .iconLabel, .dataLblPaddingL5 .editorLabel, .dataFldPaddingL5 .editorField, .dataFldPaddingLR5 .editorField { padding-left: 5px !important; }
.thumbnailSection.paddingR5, .dataLblPaddingR5 .iconLabel, .dataLblPaddingR5 .editorLabel, .dataFldPaddingR5 .editorField, .dataFldPaddingLR5 .editorField { padding-right: 5px !important; }


.dataLblTPadding10 .iconLabel, .dataLblTPadding10 .editorLabel, .dataFldTPadding10 .editorField { padding-top: 10px !important; }
.dataLblBPadding10 .iconLabel, .dataLblBPadding10 .editorLabel, .dataFldBPadding10 .editorField { padding-bottom: 10px !important; }
.dataLblLPadding10 .iconLabel, .dataLblLPadding10 .editorLabel, .dataFldLPadding10 .editorField { padding-left: 10px !important; }
.dataLblRPadding10 .iconLabel, .dataLblRPadding10 .editorLabel, .dataFldRPadding10 .editorField { padding-right: 10px !important; }

.dataLblPaddingT10 .iconLabel, .dataLblPaddingT10 .editorLabel, .dataFldPaddingT10 .editorField, .dataFldPaddingTB10 .editorField { padding-top: 10px !important; }
.dataLblPaddingB10 .iconLabel, .dataLblPaddingB10 .editorLabel, .dataFldPaddingB10 .editorField, .dataFldPaddingTB10 .editorField { padding-bottom: 10px !important; }
.dataLblPaddingL10 .iconLabel, .dataLblPaddingL10 .editorLabel, .dataFldPaddingL10 .editorField, .dataFldPaddingLR10 .editorField { padding-left: 10px !important; }
.dataLblPaddingR10 .iconLabel, .dataLblPaddingR10 .editorLabel, .dataFldPaddingR10 .editorField, .dataFldPaddingLR10 .editorField { padding-right: 10px !important; }

/*--Margin overrides for cards--*/

.thumbnailSection.margin0, .dataLblMargin0 .iconLabel, .dataLblMargin0 .editorLabel, .dataFldMargin0 .editorField { margin: 0 !important; }
.dataLblMargin5 .iconLabel, .dataLblMargin5 .editorLabel, .dataFldMargin5 .editorField { margin: 5px !important; }
.dataLblMargin10 .iconLabel, .dataLblMargin10 .editorLabel, .dataFldMargin10 .editorField { margin: 10px !important; }

.thumbnailSection.marginT0, .dataLblMarginT0 .iconLabel, .dataLblMarginT0 .editorLabel, .dataFldMarginT0 .editorField { margin-top: 0 !important; }
.dataLblMarginB0 .iconLabel, .dataLblMarginB0 .editorLabel, .dataFldMarginB0 .editorField { margin-bottom: 0 !important; }
.dataLblMarginL0 .iconLabel, .dataFldLblMarginL0 .editorLabel, .dataFldLMargin0 .editorField, .imageSection.marginL0 { margin-left: 0 !important; }
.thumbnailSection.marginR0, .dataLblMarginR0 .iconLabel, .dataFldLblMarginR0 .editorLabel, .dataFldMarginR0 .editorField { margin-right: 0 !important; }

.dataLblMarginT5 .iconLabel, .dataLblMarginT5 .editorLabel, .dataFldMarginT5 .editorField { margin-top: 5px !important; }
.dataLblMarginB5 .iconLabel, .dataLblMarginB5 .editorLabel, .dataFldMarginB5 .editorField { margin-bottom: 5px !important; }
.dataLblMarginL5 .iconLabel, .dataLblMarginL5 .editorLabel, .dataFldMarginL5 .editorField { margin-left: 5px !important; }
.dataLblMarginR5 .iconLabel, .dataLblMarginR5 .editorLabel, .dataFldMarginR5 .editorField { margin-right: 5px !important; }

.dataLblMarginT10 .iconLabel, .dataLblMarginT10 .editorLabel, .dataFldMarginT10 .editorField { margin-top: 10px !important; }
.dataLblMarginB10 .iconLabel, .dataLblMarginB10 .editorLabel, .dataFldMarginB10 .editorField { margin-bottom: 10px !important; }
.thumbnailSection.marginL10, .dataLblMarginL10 .iconLabel, .dataLblMarginL10 .editorLabel, .dataFldMarginL10 .editorField { margin-left: 10px !important; }
.dataLblMarginR10 .iconLabel, .dataLblMarginR10 .editorLabel, .dataFldMarginR10 .editorField { margin-right: 10px !important; }

.dataLblMarginT15 .iconLabel, .dataLblMarginT15 .editorLabel, .dataFldMarginT15 .editorField { margin-top: 15px !important; }
.dataLblMarginB15 .iconLabel, .dataLblMarginB15 .editorLabel, .dataFldMarginB15 .editorField { margin-bottom: 15px !important; }
.dataLblMarginL15 .iconLabel, .dataLblMarginL15 .editorLabel, .dataFldMarginL15 .editorField { margin-left: 15px !important; }
.dataLblMarginR15 .iconLabel, .dataLblMarginR15 .editorLabel, .dataFldMarginR15 .editorField { margin-right: 15px !important; }

.dataLblMarginT20 .iconLabel, .dataLblMarginT20 .editorLabel, .dataFldMarginT20 .editorField { margin-top: 20px !important; }
.dataLblMarginB20 .iconLabel, .dataLblMarginB20 .editorLabel, .dataFldMarginB20 .editorField { margin-bottom: 20px !important; }
.dataLblMarginL20 .iconLabel, .dataLblMarginL20 .editorLabel, .dataFldMarginL20 .editorField { margin-left: 20px !important; }
.dataLblMarginR20 .iconLabel, .dataLblMarginR20 .editorLabel, .dataFldMarginR20 .editorField { margin-right: 20px !important; }

/*font colour overrides - for card layouts*/

.dataFontLightRed .iconLabel, .dataFontLightRed .editorLabel, .dataFontLightRed .editorField { color: #eccdca !important;}
.dataFontLightGreen .iconLabel, .dataFontLightGreen .editorLabel, .dataFontLightGreen .editorField { color: #e2ead1 !important;}
.dataFontLightYellow .iconLabel, .dataFontYellow .editorLabel, .dataFontLightYellow .editorField { color: #ffe398 !important;}
.dataFontLightBlue .iconLabel, .dataFontLightBlue .editorLabel, .dataFontLightBlue .editorField { color: #c6dae8 !important;}
.dataFontLightGray .iconLabel, .dataFontLightGray .editorLabel, .dataFontLightGray .editorField { color: #ececec !important;}
.dataFontLightPurple .iconLabel, .dataFontLightPurple .editorLabel, .dataFontLightPurple .editorField { color: #d7bdd7 !important;}
.dataFontLightDarkBlue .iconLabel, .dataFontLightDarkBlue .editorLabel, .dataFontLightDarkBlue .editorField { color: #C3C3DA !important;}
.dataFontLightTeal .iconLabel, .dataFontLightTeal .editorLabel, .dataFontLightTeal .editorField { color: #C9D9DD !important;}
.dataFontLightDarkGreen .iconLabel, .dataFontLightDarkGreen .editorLabel, .dataFontLightDarkGreen .editorField { color: #96C09E !important;}
.dataFontLightOrange .iconLabel, .dataFontLightOrange .editorLabel, .dataFontLightOrange .editorField { color: #fce2ce !important;}

.dataFontWhite .iconLabel, .dataFontWhite .editorLabel, .dataFontWhite .editorField  { color: #fff !important;}
.dataFontRed .iconLabel, .dataFontRed .editorLabel, .dataFontRed .editorField { color: #E53327 !important;}
.dataFontGreen .iconLabel, .dataFontGreen .editorLabel, .dataFontGreen .editorField { color: #74bd00 !important;}
.dataFontYellow .iconLabel, .dataFontYellow .editorLabel, .dataFontYellow .editorField { color: #ffc853 !important;}
.dataFontBlue .iconLabel, .dataFontBlue .editorLabel, .dataFontBlue .editorField { color: #325ea1 !important;}
.dataFontGray .iconLabel, .dataFontGray .editorLabel, .dataFontGray .editorField { color: #4b4b4b !important;}
.dataFontPurple .iconLabel, .dataFontPurple .editorLabel, .dataFontPurple .editorField { color: #660066 !important;}
.dataFontDarkBlue .iconLabel, .dataFontDarkBlue .editorLabel, .dataFontDarkBlue .editorField { color: #000060 !important;}
.dataFontTeal .iconLabel, .dataFontTeal .editorLabel, .dataFontTeal .editorField { color: #1E5E6D !important;}
.dataFontDarkGreen .iconLabel, .dataFontDarkGreen .editorLabel, .dataFontDarkGreen .editorField { color: #00661A !important;}
.dataFontOrange .iconLabel, .dataFontOrange .editorLabel, .dataFontOrange .editorField { color: #f2661f !important;}

/* this is in the case the icons should have a different colour from the value*/
.colWhite, .dataIconFontWhite .iconLabel  { color: #fff !important;}
.colRed, .dataIconFontRed .iconLabel { color: #E53327 !important;}
.colGreen, .dataIconFontGreen .iconLabel { color: #74bd00 !important;}
.colYellow, .dataIconFontYellow .iconLabel { color: #ffc853 !important;}
.colBlue, .dataIconFontBlue .iconLabel { color: #325ea1 !important;}
.colGray, .dataIconFontGray .iconLabel { color: #4b4b4b !important;}
.colPurple, .dataIconFontPurple .iconLabel { color: #660066 !important;}
.colDarkBlue, .dataIconFontDarkBlue .iconLabel { color: #000060 !important;}
.colTeal, .dataIconFontTeal .iconLabel { color: #1E5E6D !important;}
.colDarkGreen, .dataIconFontDarkGreen .iconLabel { color: #00661A !important;}
.colOrange, .dataIconFontOrange .iconLabel { color: #F2661F !important;}
.colBrown, .dataIconFontBrown .iconLabel { color: #8a6d3b !important;}

.bgColWhite { background-color: white; }
.bgColLightRed, .dataBgLightRed .iconLabel, .dataBgLightRed .editorLabel, .dataBgLightRed .editorField { background-color: #eccdca;}
.bgColLightGreen, .dataBgLightGreen .iconLabel, .dataBgLightGreen .editorLabel, .dataBgLightGreen .editorField { background-color: #e2ead1;}
.bgColLightYellow, .dataBgLightYellow .iconLabel, .dataBgLightYellow .editorLabel, .dataBgLightYellow .editorField { background-color: #ffe398;}
.bgColLightBlue, .dataBgLightBlue .iconLabel, .dataBgLightBlue .editorLabel, .dataBgLightBlue .editorField { background-color: #c6dae8;}
.bgColLightGray, .dataBgLightGray .iconLabel, .dataBgLightGray .editorLabel, .dataBgLightGray .editorField { background-color: #c7c7c7;}
.bgColLightPurple, .dataBgLightPurple .iconLabel, .dataBgLightPurple .editorLabel, .dataBgLightPurple .editorField { background-color: #d7bdd7;}
.bgColLightDarkBlue, .dataBgLightDarkBlue .iconLabel, .dataBgLightDarkBlue .editorLabel, .dataBgLightDarkBlue .editorField { background-color: #C3C3DA;}
.bgColLightTeal, .dataBgLightTeal .iconLabel, .dataBgLightTeal .editorLabel, .dataBgLightTeal .editorField { background-color: #C9D9DD;}
.bgColLightDarkGreen, .dataBgLightDarkGreen .iconLabel, .dataBgLightDarkGreen .editorLabel, .dataBgLightDarkGreen .editorField { background-color: #96C09E;}
.bgColLightOrange, .dataBgLightOrange .iconLabel, .dataBgLightOrange .editorLabel, .dataBgLightOrange .editorField { background-color: #fce2ce;}

.bgColRed, .dataBgRed .iconLabel, .dataBgRed .editorLabel, .dataBgRed .editorField { background-color: #E53327;}
.bgColGreen, .dataBgGreen .iconLabel, .dataBgGreen .editorLabel, .dataBgGreen .editorField { background-color: #74bd00;}
.bgColYellow, .dataBgYellow .iconLabel, .dataBgYellow .editorLabel, .dataBgYellow .editorField { background-color: #ffc853;}
.bgColBlue, .dataBgBlue .iconLabel, .dataBgBlue .editorLabel, .dataBgBlue .editorField { background-color: #325ea1;}
.bgColGray, .dataBgGray .iconLabel, .dataBgGray .editorLabel, .dataBgGray .editorField { background-color: #4b4b4b;}
.bgColPurple, .dataBgPurple .iconLabel, .dataBgPurple .editorLabel, .dataBgPurple .editorField { background-color: #660066;}
.bgColDarkBlue, .dataBgDarkBlue .iconLabel, .dataBgDarkBlue .editorLabel, .dataBgDarkBlue .editorField { background-color: #000060;}
.bgColTeal, .dataBgTeal .iconLabel, .dataBgTeal .editorLabel, .dataBgTeal .editorField { background-color: #1E5E6D;}
.bgColDarkGreen, .dataBgDarkGreen .iconLabel, .dataBgDarkGreen .editorLabel, .dataBgDarkGreen .editorField { background-color: #00661A;}
.bgColOrange, .dataBgOrange .iconLabel, .dataBgOrange .editorLabel, .dataBgOrange .editorField { background-color: #F2661F;}
.bgColBrown { background-color: #CEAE0A; }

.lblTxtAlignRight .editorLabel, .fldTxtAlignRight .editorField { text-align: right; }
.lblTxtAlignLeft .editorLabel, .fldTxtAlignLeft .editorField { text-align: left; }
.font80Percent, .lblFont80Percent > .dataFieldContainer > .editorLabel, .fldFont80Percent > .dataFieldContainer > .editorField { font-size: 80%; }
.font90Percent, .lblFont90Percent  > .dataFieldContainer > .editorLabel, .fldFont90Percent > .dataFieldContainer > .editorField { font-size: 90%; }
.font110Percent, .lblFont110Percent  > .dataFieldContainer > .editorLabel, .fldFont110Percent > .dataFieldContainer > .editorField { font-size: 110%; }
.font120Percent, .lblFont120Percent  > .dataFieldContainer > .editorLabel, .fldFont120Percent > .dataFieldContainer > .editorField { font-size: 120%; }
.font150Percent, .lblFont150Percent  > .dataFieldContainer > .editorLabel, .fldFont150Percent > .dataFieldContainer > .editorField { font-size: 150%; }
.font200Percent, .lblFont200Percent  > .dataFieldContainer > .editorLabel, .fldFont200Percent > .dataFieldContainer > .editorField { font-size: 200%; }

.dataLblUppercase .editorLabel > label, .dataFldUppercase .editorField { text-transform: uppercase !important; }
.dataLblTxtAlignLeft .editorLabel > label, .dataFldTxtAlignLeft .editorField { text-align: left !important; }
.dataLblTxtAlignRight .editorLabel > label, .dataFldTxtAlignRight .editorField { text-align: right !important; }

.dataLblItalic .editorLabel > label, .dataFldItalic .editorField { font-style: italic; }

.dataLblFontBold .iconLabel, .dataLblFontBold label, .dataFldFontBold .editorField { font-weight: bold !important; }
.dataLblFontBold .iconLabel, .dataLblFontNormal label, .dataFldFontNormal .editorField { font-weight: normal !important;}

.font80Percent, .dataLblFont80Percent .iconLabel, .dataLblFont80Percent .editorLabel, .dataFldFont80Percent .editorField { font-size: 80%; }
.font90Percent, .dataLblFont90Percent .iconLabel, .dataLblFont90Percent .editorLabel, .dataFldFont90Percent .editorField { font-size: 90%; }
.font110Percent, .dataLblFont110Percent .iconLabel, .dataLblFont110Percent .editorLabel, .dataFldFont110Percent .editorField { font-size: 110%; }
.font120Percent, .dataLblFont120Percent .iconLabel, .dataLblFont120Percent .editorLabel, .dataFldFont120Percent .editorField { font-size: 120%; }
.font150Percent, .dataLblFont150Percent .iconLabel, .dataLblFont150Percent .editorLabel, .dataFldFont150Percent .editorField { font-size: 150%; }
.font200Percent, .dataLblFont200Percent .iconLabel, .dataLblFont200Percent .editorLabel, .dataFldFont200Percent .editorField { font-size: 200%; }



.bar {
    border-left: solid 1px;
    height: 1.5em;
    display: inline-block;
    margin: 0 5px -5px 5px;
}

.bar-separator{
    position: relative;
    padding-right: 10px;
}

.bar-separator:after{
    content: "";
    width: 1px;    
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: white;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.28),rgba(255, 255, 255, 0));
}

.bar-separator:last-of-type:after, .bar-separator:last-of-type:hover:after{
    display: none;
}

.ease3ms {
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    transition: 0.3s ease;
}


#cookieTermsMsg {
    visibility: hidden;
    position: absolute;
    background-color: #fff;
    top: -100px;
    left: 0;
    right: 0;
    z-index: 10000;
    /*max-width: 1024px;*/
    -webkit-transition: top 0.3s ease-in-out;
    transition: top 0.2s ease-in-out;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

#cookieTermsMsg.view {
    visibility: visible;
    top: 0;
}

#cookieTermsMsg .cookieTermsMsgContainer {
    color: #656565;
    /*text-align: center;*/
    padding: 5px;
    margin: 0 auto;
    max-width: 1024px;
    overflow: hidden;
}

#cookieTermsMsg .cookieTermsMsgContainer .icon24 {
    margin-top: 2px;
    margin-right: 5px;
    float: left;
    vertical-align: top;
}

#cookieTermsMsg button {
    float: right;
    padding: 6px 20px;
    margin-left: 5px;
}

/*#cookieTermsMsg > .content {
    overflow: hidden;
}*/

#cookieTermsMsg .content {
    overflow: hidden;
    font-size: 1em;
    line-height: 1.3em;
    margin-top: 6px;
    margin-bottom: 6px;
}


/* Offline */
.offlineContainer {
    background: rgba(255,255,255,0.75);
    z-index: 2147483647;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.offlineSpinnerContainer {
    position:absolute;
    top: 50%;
    left:50%;
    margin-top: -48px;
    margin-left: -90px;
}

.offlineSpinnerMessage {
    text-align: center;
    font-size: 1.2em;
    line-height: 30px;
    font-weight: 600;
}