html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/* Some base styles and text styles */
body {
  background-color: #e1e6e9;
  font-family: "IntelClear_Light", sans-serif;
  font-size: 1rem;
  overflow-x: hidden;
  overflow-y: hidden;
  /* needed for the notification bar open */
}

* {
  box-sizing: border-box;
}

:-webkit-full-screen, :fullscreen, :-ms-fullscreen, :-moz-full-screen {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background: none;
}

::-webkit-scrollbar {
  width: 4px;
  background-color: transparent;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
  /*    border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); */
  background-color: #999;
}

:focus {
  outline: 0;
}

a {
  text-decoration: none;
  color: #727272;
}

.rtl {
  direction: rtl;
}

/* The old code base actually is excellent in dealing with the fixed header 
and also the fixed the catalog side menu*/
/* Do not do the position fixed, that will cause problem of the catalog page sidebar scroll off the screen */
.masthead {
  background: #fff;
  width: 100%;
  /* Keep position static here  unless you have a solution will solve the side menu on catalog page */
  z-index: 1000;
  border-bottom: solid 1px #c1c9cf;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  position: relative;
  text-align: center;
  opacity: 1;
}

.masthead::before {
  content: '';
  position: absolute;
  width: 100%;
  top: 64px;
  left: 0;
  border-bottom: solid 1px #c1c9cf;
}

.masthead-wrapper {
  width: 100%;
  max-width: 1720px;
  position: relative;
  margin: 0 auto;
  height: 64px;
}

.masthead-center {
  width: 100%;
  margin: 0 auto;
  line-height: 64px;
}
.masthead-center input {
  width: 0;
  border: 0;
}
@media (min-width: 768px) {
  .masthead-center input {
    font-size: 14px;
    width: 27%;
    min-width: 280px;
    height: 28px;
    padding: 0 30px;
    border: solid 1px #D7DEE2;
    border-radius: 14px;
    background: #fff url(../images/icon-searchglass.svg) no-repeat left 10px center;
  }
}

.masthead-left {
  position: absolute;
  width: 220px;
  top: 0;
  left: 0;
  line-height: 80px;
  display: none;
}
@media (min-width: 768px) {
  .masthead-left {
    display: block;
  }
}

.masthead-right {
  position: absolute;
  width: 220px;
  height: 64px;
  top: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.notifications-topnav {
  padding: 0 30px;
  height: 60px;
  line-height: 60px;
  background: tan;
}

.profile-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 134px;
  height: 30px;
  line-height: 30px;
  color: #727272;
  font-size: 14px;
  display: none;
  position: relative;
  background: pink;
  z-index: 1000;
}
@media (min-width: 768px) {
  .profile-container {
    display: block;
  }
}

.profile-dropdown-container {
  position: absolute;
  width: 240px;
  right: 0;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  text-align: left;
  height: 0;
  overflow: hidden;
  z-index: 1000;
  transition: all 0.35s;
}
@media (min-width: 1030px) {
  .profile-dropdown-container.show-more {
    height: 300px;
    transition: all 0.35s;
  }
}
.profile-dropdown-container li {
  font-size: 14px;
  padding: 8px 16px;
  border-bottom: solid 1px #ccc;
}

.username {
  display: inline-block;
  width: 80px;
  font-size: 12px;
  line-height: 30px;
  position: relative;
  top: -10px;
  background: url(../images/icon-downarrow.svg) no-repeat right center;
}

/*.notification-bar is in the notification.scss*/
.appcenter-filter-bar {
  width: 100%;
  margin: 0 auto;
  max-width: 1440px;
  line-height: 50px;
  height: 50px;
  position: relative;
}

.mobile-top-links {
  display: flex;
}
@media (min-width: 1030px) {
  .mobile-top-links {
    display: none;
  }
}
.mobile-top-links .mobile-bookmark-nav-fixed {
  width: 78px;
  padding-top: 2px;
  border-right: solid 1px rgba(222, 126, 126, 0.3);
}

/* The following classes needed for iscroll to work for horizontally scrollable tabs, temperaly use for prototyping */
#mobile-scrollable-links-wrapper {
  position: absolute;
  top: 0;
  width: calc(100% - 78px);
  left: 78px;
  height: 50px;
  overflow: hidden;
}
@media (min-width: 1030px) {
  #mobile-scrollable-links-wrapper {
    display: none;
  }
}

#mobile-scrollable-links-scroller {
  position: absolute;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
  width: 600px;
  height: 50px;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* end of iscroll classes */
/* temporary classes to style the top and bottom mobile links */
.mobile-scrollable-links {
  display: flex;
  /* experimenting flexbox for prototyping, subject change to inlinebock for wide browser compatibility in real implementation */
  font-size: 13px;
  color: #727272;
}

.mobile-scrollable-links li {
  padding: 0 10px;
}

.desktop-top-links {
  display: none;
  font-size: 0;
}
@media (min-width: 1030px) {
  .desktop-top-links {
    display: block;
  }
}
.desktop-top-links li {
  font-size: 16px;
  display: inline-block;
}
.desktop-top-links li a {
  display: block;
  height: 50px;
  padding: 0 10px;
  border-bottom: solid 4px transparent;
}
.desktop-top-links li.selected a {
  border-bottom: solid 4px #6DB33F;
}
.desktop-top-links li.selected p {
  color: #3bc5fa;
}

.frame {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 64px + 50px;
  overflow: hidden;
  overflow-y: auto;
  /* this ensure the main content scrolls */
  transition: all 0.5s;
  /* Once the notification is on, the frame header needs to be push down as well, 
   otherwise the app filter bar will be on top of page cover the tiles  
   use property top value to change*/
}
.frame.hide-appfilter-bar {
  padding-top: 64px;
}
.frame.notification-on {
  top: 175px;
  transition: all 0.5s;
}
@media (min-width: 1030px) {
  .frame.notification-on {
    top: 0;
  }
  .frame.notification-on.no-topfilter-bar {
    top: 0;
  }
}

/* The purpose of page is to add a padding so the content is below the masthead */
.page {
  width: 100%;
  padding-top: 114px;
  overflow-y: auto;
}

.page-header {
  width: 100%;
  height: 60px;
  display: none;
  font-weight: normal;
}
@media (min-width: 565px) {
  .page-header {
    display: block;
    width: 80%;
    max-width: 1720px;
    margin: 0 auto;
    text-align: left;
  }
}

.page-header-title {
  max-width: 1400px;
  line-height: 60px;
  font-size: 24px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 auto;
  position: relative;
}

/* with panel declare a overflow-y: auto content of the body is scrollable*/
/* width needs to be 100% so the scrollbar will be at the right side of the viewport instead of at the edge of the viewport */
/*.panel {
	width: 100%;
	height:100%;
	margin: 0 auto;
	overflow-y: auto;
}*/
/* the parent item panel-body has text-align center, defined the child elements as inline-block items seems to be able to center the items in the middle of the panel
 inline-block has a margin-right of 4px, if use 10px-4px to offset that will cause problem of in the grid system when second row item sometime have a -4px dent
 Use parent element of the inline-block font-size 0 can eliminate this problem, however not widely tested. */
/* Another good point of using inline-block is that for RTL, if you have to switch direction that will be easily commondated */
/* on mobile phone the tile width is 64px, there are 4 tiles, the gutton width aka margin will be calc((100% - 64*4 px)/10)*/
/* TO DO this width might also cause problems for the caption text, need to understand the requirements for the text */
/* For mobile and desktop the gutter is daynamically calculated */
/* on tablet the tile width is 96px, there will be 4 tiles for protrait, 5 for landscape */
/* For desktop the gutter is fixed and there will be space on both size to accomondate extra large screens */
/* I currrently named it panel-body and set the margin: 0 auto */
/* Desktop parameters */
/* define number of tiles per viewport */
/* 4 tiles has 5 gutters css margin count both side so devide by 2 */
/* 5 tiles has 6 gutters css margin count both side so devide by 2 */
/* this is for highRes monitors the max width should not go over 1440px per UX mock */
/* ##!!! Important Need to refactor, this one should be similar to the "pane" class */
.pane {
  width: 100%;
  /*height:100%;*/
  /* Must define this one to ensure that the last row do not get cut off */
  max-width: 1720px;
  margin: 0 auto 114px;
  /* add bottom margin make sure the content is longer to avoid curoff on the bottom */
  overflow: hidden;
  /* DO NOT REMOVE this is needed for notification bar animation in highRes, also scrollbar will appear */
  /*background: rgba(101, 173, 42, 0.15); */
  /* for dev purpose will be removed */
}

.panel-body {
  overflow-x: hidden;
  /*this is needed for iphone 5 somehow it adds extra space, maybe due to the scrollerbar */
  font-size: 0;
  /* this will make all the child elements font-size: 0 */
  width: 100%;
  display: inline-block;
  max-width: 100%;
  /*this will determine how many tiles in a row */
  margin: 0 auto;
  /* panel-body padding top was used for first row gutter to be the same as the side gutter */
  /* padding-top: calc((100% - 256px)/10); */
  /* half of the vertical gutter space*/
  padding-top: 10px;
  /*border: dotted 1px #333;*/
  /* for dev purposes will be removed */
  overflow-y: hidden;
  text-align: center;
                    /*DO NOT REMOVE this is critical for the tiles to be centered and have equal gutter in between including the edge 
					/* This is to combine the child elements of .grid */
  /* This will save us the hassel of defining say : nth-child(4n) margin-left: whatever needed problem */
  transition: all 0.5s;
  /* The panel-sidebar width needs to be set that when the notification sidebar pushes on, tiles numbers NO NOT change */
  /*use this width to change the notification sidebar*/
  /*by setting the margin to 0 and the sidebar to whatever the reminder of the viewport size */
  /*end of with with notification on */
}
@media (min-width: 1030px) {
  .panel-body {
    margin: 0 10%;
    /* need a number or percentage margin for animation when notification comes on */
    width: 80%;
  }
}
@media (min-width: 1720px) {
  .panel-body {
    width: 1360px;
    margin: 0 auto;
    /* fallback for browser not supporting calc  */
    margin: 0 calc((100% - 1360px)/2);
  }
}
.panel-body.notification-on {
  margin: 0;
  transition: all 0.5s;
}
@media (min-width: 1030px) {
  .panel-body.notification-on {
    width: 80%;
    /* so the notification wrapper width will be 20% */
  }
}
@media (min-width: 1720px) {
  .panel-body.notification-on {
    width: 1360px;
  }
}

.grid {
  width: 64px;
  height: 90px;
  /* have a fall back for browser does not support calc */
  margin: 10px;
  margin: 10px calc((100% - 256px)/10);
  /*256px is 4*64px*/
  display: inline-block;
  vertical-align: top;
  text-align: center;
  /* Nexus 5 does not seem to support calc so need to add the backup 16px*/
  /*  When the viewport size exceeds 1030px, it will adopt desktop tile size */
  /*!!! Must define the empty fillter with the same size of the tile EXCEPT Height 0 */
}
@media (min-width: 565px) {
  .grid {
    width: 96px;
    height: 128px;
    margin: 16px;
    margin: 10px calc((100% - 384px)/10);
    /* 384px is 4*96px */
  }
}
@media (min-width: 768px) {
  .grid {
    width: 96px;
    height: 128px;
    margin: 16px;
    margin: 10px calc((100% - 384px)/10);
    /* 384px is 4*96px */
  }
}
@media (min-width: 992px) {
  .grid {
    width: 96px;
    height: 128px;
    margin: 32px;
    margin: 10px calc((100% - 480px)/12);
    /* use 5 tiles for iPad landscape 5*96 = 480 */
  }
}
@media (min-width: 1030px) {
  .grid {
    width: 120px;
    height: 168px;
    margin: 24px;
  }
}
.grid .app-icon {
  background-color: #fff;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  margin-bottom: 8px;
  border-radius: 5px;
}
@media (min-width: 768px) {
  .grid .app-icon {
    width: 96px;
    height: 96px;
    border-radius: 10px;
  }
}
@media (min-width: 1030px) {
  .grid .app-icon {
    width: 120px;
    height: 120px;
    border-radius: 10px;
  }
}
.grid .app-caption {
  font-size: 13px;
  text-align: left;
  line-height: 1.4;
  color: #666;
  margin: 0 -20px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.grid-emptyfiller {
  width: 64px;
  /* the following does the trick to generate equal widt gutters on mobile, 
  also because of the parent element has the text-align: center property*/
  margin: 10px calc((100% - 256px)/10);
  height: 0;
  /*Important! for the divs to collapse should they fall in a new row*/
  display: inline-block;
  /*  When the viewport size exceeds 1030px, it will adopt desktop tile size */
}
@media (min-width: 768px) {
  .grid-emptyfiller {
    width: 96px;
    height: 0;
    margin: 16px;
    margin: 10px calc((100% - 384px)/10);
    /* 384px is 4*96px */
  }
}
@media (min-width: 992px) {
  .grid-emptyfiller {
    width: 96px;
    height: 0;
    margin: 10px calc((100% - 480px)/12);
    /* use 5 tiles for iPad landscape 5*96 = 480 */
  }
}
@media (min-width: 1030px) {
  .grid-emptyfiller {
    width: 120px;
    height: 0;
    margin: 24px;
  }
}

.bottom-settings-bar {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 49px;
  background: #fff;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.25);
}
@media (min-width: 1030px) {
  .bottom-settings-bar {
    display: none;
  }
}

.bottom-links {
  display: flex;
  /* experimental style, will use float or inline-block for real implementation */
  justify-content: space-around;
}
.bottom-links li {
  flex: 1 0 auto;
  text-align: center;
  height: 49px;
  color: #333;
}
.bottom-links li a {
  display: block;
}
.bottom-links li.active a {
  color: #3bc5fa;
}
.bottom-links li img {
  margin: 8px 0 4px;
}
.bottom-links li p {
  font-size: 10px;
}

/* catalog page styles */
/* Mobile Parameters */
/* Desktop parameters */
/* We set the size of sidebar to be the same as the catalog item width */
/*With 3 tiles, we set the body-panel size to be 860px, set the */
/*to make things simple, set the margin of the catalogItem to fixed*/
/* count sidebar as 1 tile */
/* The width of the panel-body should be: $catalogMargin * ($desktopSize1CatalogItemNo + 1) * 2 + 150 *($desktopSize1CatalogItemNo + 1)
$panelBodyWidth: $catalogMargin * ($desktopSize1CatalogItemNo + 1 + 1) * 2 + $gridCatalogItemWidth *($desktopSize1CatalogItemNo + 1);

$panelBodyPaddingLeft: $catalogMargin * 2 + $gridCatalogItemMobileWidth;
*/
/* mixins to calcaulate the totalBodyWidth */
/*for 3 tile: 24*(3 + 1 + 1) * 2 + 150 * (3+1) = 840px
for 4 tiles: 24*(4 + 1 + 1) * 2 + 150 * (4+1) = 1038px
5 tiles 24*(5 + 1 + 1) * 2 + 150 * (5+1) = 1236px
6 tiles 24*(6 + 1 + 1) * 2 + 150 * (6+1) = 1434px
*/
/* add extra 20 pixels to ensure if font-size 0 not working the extra 4px margin will not cause problem */
.catalog.pane {
  font-size: 0;
  text-align: center;
  width: 844px;
  /*		background: rgba(65, 197, 167, 0.6);*/
}
@media (min-width: 1230px) {
  .catalog.pane {
    width: 1042px;
    margin: 0 calc((100% - 1038px)/2);
  }
}
@media (min-width: 1440px) {
  .catalog.pane {
    width: 1240px;
    margin: 0 calc((100% - 1236px)/2);
  }
}
@media (min-width: 1720px) {
  .catalog.pane {
    width: 1438px;
    margin: 0 calc((100% - 1434px)/2);
  }
}
.catalog .panel-sidebar {
  width: 198px;
  vertical-align: top;
  /* default is align baseline */
  opacity: 1;
  padding-left: 48px;
  padding-top: 20px;
  text-align: left;
  display: none;
  /* The side bar only appears on desktop min-width of 1030px  */
}
@media (min-width: 1030px) {
  .catalog .panel-sidebar {
    display: inline-block;
    /* DO NOT declare display: Block = because we had disply: none; it will cause the panel body slide down */
  }
}
.catalog .panel-body {
  display: inline-block;
  margin: -10px;
  /* Needs to override from layout to ensure it will fit the pane width */
  /*		background: rgba(128, 175, 77, .8);*/
  width: 642px;
  /* Must have this to override previous panel width */
  transition: none !important;
  /* overide from the previous transition defined in layout */
}
@media (min-width: 1230px) {
  .catalog .panel-body {
    width: 840px;
  }
}
@media (min-width: 1440px) {
  .catalog .panel-body {
    width: 1038px;
  }
}
@media (min-width: 1720px) {
  .catalog .panel-body {
    width: 1236px;
  }
}
.catalog .grid {
  /* In the mobile phone the tiles are 100% */
  width: 100%;
  height: 100px;
  margin: 0;
  background: #fff;
  border-bottom: solid 1px #ccc;
  /* In tablet, no sidebar */
  /* When the side exceeds 1024px we show the sidebar, count sidebar as an catalog item so to evenly distribute CatlogItemNo + 1 tiles */
}
@media (min-width: 565px) {
  .catalog .grid {
    width: 150px;
    height: 240px;
    margin: 20px;
    border: none;
  }
}
@media (min-width: 1030px) {
  .catalog .grid {
    width: 150px;
    height: 240px;
    margin: 20px;
    margin: 24px;
    border: none;
  }
}
@media (min-width: 565px) {
  .catalog .grid-emptyfiller {
    width: 150px;
    height: 0;
    margin: 24px;
    border: none;
  }
}

/*
  ======================================================

  	declare the sidebar content fixed seemed to avoid to do the math of the old way of left: 50% and negative margin-left to offset 

  ======================================================
  */
.catalog-filter {
  width: 150px;
  /*For vertical scroll to happen the elements needs to declare a height */
  position: fixed;
  height: 100%;
  padding-bottom: 220px;
  /* some how needs to compensate the padding-top of the page and whatever padding used for the menu */
  /* TO DO use variables */
  overflow-y: auto;
}
.catalog-filter li {
  font-size: 13px;
  line-height: 24px;
}

.catalog-apps-all {
  margin-bottom: 15px;
  border-bottom: solid 1px #ccc;
}

.selfservice.panel-body {
  background: pink;
  padding-bottom: 49px;
}
.selfservice .grid {
  width: 160px;
  height: 160px;
  margin: calc((100% - 320px)/6);
}
.selfservice .grid-emptyfiller {
  width: 160px;
  height: 0;
  margin: 20px calc((100% - $totalTilesWidth)/6);
  /*256px is 4*64px*/
}

/* which is mastHeadMaxWidth - maxwidhtbodywith */
.notification-bar {
  width: 100%;
  max-width: 1720px;
  height: 0;
  background: #ccc;
  transition: all 0.5s;
  /* important to declare overflow: hidden to hide all the content first */
  overflow: hidden;
  /* this one caused reverse animation to be gone*/
  position: relative;
  margin: 0 auto;
  /*border: solid 1px red;*/
}
.notification-bar.notification-on {
  height: 175px;
  transition: all 0.5s;
}
@media (min-width: 1030px) {
  .notification-bar {
    overflow: visible;
    /* DO NOT REMOVE -- Needed in desktop view for the notification drawer never open */
  }
  .notification-bar.notification-on {
    height: 0;
    transition: all 0.5s;
    /* DO NOT REMOVE this will ensure the notification wrapper content shows to override mobile state */
    overflow: visible;
  }
}

#notifications-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 175px;
  /*white-space: nowrap;*/
  opacity: 0;
  /* this is to prevent when the notification container is closed up, no flying of the notification items */
  /* On desktop the notification wrapper width should be viewportwidth - panelbody*/
}
@media (min-width: 1030px) {
  #notifications-wrapper {
    position: absolute;
    top: 50px;
    width: 20%;
    /* MUST define a width to override the 100% */
    transform: translate3d(400px, 0, 0);
    right: 0;
    padding: 10px;
    left: auto;
    /* DO NOT REMOVE -- To overwrite the previously defined left:0 properties */
    height: 1000px;
    /*background: #f4e36d;*/
    background: #fff;
    /*transition: all .5s ease-in-out;*/
    transition: transform .5s, opacity 0.5s;
  }
}
@media (min-width: 1200px) {
  #notifications-wrapper {
    width: 20%;
  }
}
@media (min-width: 1720px) {
  #notifications-wrapper {
    width: 360px;
  }
}

/* TO  on resize from mobile - table - desktop I see the notification items fly to the new position on the right */
.notification-on #notifications-wrapper {
  opacity: 1;
}
@media (min-width: 1030px) {
  .notification-on #notifications-wrapper {
    white-space: normal;
    transform: translate3d(0, 0, 0);
    /*transition: all .5s ease-in-out;*/
    transition: transform .5s ease-in-out;
  }
}

#notifications-scroller {
  position: absolute;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
  width: 1800px;
  height: 175px;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

.notification-on #notifications-scroller {
  width: 100%;
  /*	border: solid 2px red;*/
  max-width: 400px;
}

.notification-list {
  font-size: 0;
  white-space: nowrap;
}

.notification-item {
  font-size: 16px;
  line-height: 120px;
  width: 240px;
  height: 120px;
  display: inline-block;
  border: solid 1px #ccc;
  background: #fff;
  margin: 28px 20px;
}
@media (min-width: 1030px) {
  .notification-item {
    display: block;
    width: 240px;
    width: calc(100% - 20px);
    max-width: 380px;
    margin: 10px 0;
  }
}