@font-face {
  font-family: 'Source Sans Pro 300';
  font-style: normal;
  font-weight: 300;
  src: url(//static.sanoia.com/sanoia/fonts/source_sans_pro/source_sans_pro_300.eot);
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(//static.sanoia.com/sanoia/fonts/source_sans_pro/source_sans_pro_300.woff2) format('woff2'), url(//static.sanoia.com/sanoia/fonts/source_sans_pro/source_sans_pro_300.woff) format('woff'), url(//static.sanoia.com/sanoia/fonts/source_sans_pro/source_sans_pro_300.ttf) format('truetype'), url(//static.sanoia.com/sanoia/fonts/source_sans_pro/source_sans_pro_300.eot?#iefix) format('embedded-opentype');
}

@font-face {
  font-family: 'Source Sans Pro 400';
  font-style: normal;
  font-weight: 400;
  src: url(//static.sanoia.com/sanoia/fonts/source_sans_pro/source_sans_pro_400.eot);
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(//static.sanoia.com/sanoia/fonts/source_sans_pro/source_sans_pro_400.woff2) format('woff2'), url(//static.sanoia.com/sanoia/fonts/source_sans_pro/source_sans_pro_400.woff) format('woff'), url(//static.sanoia.com/sanoia/fonts/source_sans_pro/source_sans_pro_400.ttf) format('truetype'), url(//static.sanoia.com/sanoia/fonts/source_sans_pro/source_sans_pro_400.eot?#iefix) format('embedded-opentype');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(//static.sanoia.com/sanoia/fonts/open_sans/open-sans-regular.eot);
  src: local('Open Sans'), local('OpenSans'), url(//static.sanoia.com/sanoia/fonts/open_sans/open-sans-regular.woff2) format('woff2'), url(//static.sanoia.com/sanoia/fonts/open_sans/open-sans-regular.woff) format('woff'), url(//static.sanoia.com/sanoia/fonts/open_sans/open-sans-regular.ttf) format('truetype'), url(//static.sanoia.com/sanoia/fonts/open_sans/open-sans-regular.eot?#iefix) format('embedded-opentype');
}

/* Revert nav style*/

/**, html 
{
  margin: 0;
  padding: 0;
}*/
html, body 
{
  margin: 0;
  padding: 0;
  height: 100%;
}

body 
{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: sans-serif;
  /*font-size: 0;*/
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  letter-spacing: normal;
  /*line-height: normal;*/
  text-align: left;
  text-decoration: none;
  text-indent: 0;
  text-transform: none;
  word-spacing: normal;
}

body :not(select, option) 
{
  text-shadow: transparent 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px !important;
}

/*ol, ul{list-style:none;margin:0;padding:0;}
li{display:inline;margin:0;padding:0;}*/

/*a         { color:#fff; text-decoration:none; }
a:link    { color:#fff; }
a:visited { color:#fff; }
.no-touch a:hover   { color:#fff; text-decoration: none;}
a:active  { color:#fff; text-decoration: none;}*/

a, .no-touch a:hover
{
  /*color: inherit;*/
  cursor: pointer;
}

a:focus
{
  /*color: inherit;*/
  outline: none;
  text-decoration: none;
}

img{border:0;}

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

/* */

html, body 
{
  background-image: url('https://static.sanoia.com/sanoia/images/blurry-apple.jpg');
  background-size: cover;
}

body
{
  font-family: 'Open Sans', sans-serif;
  width: 100%;
  color: #444;
}

.left
{
  float: left;
}

.right
{
  float: right;
}

.align-right
{
  text-align: right;
}

.align-left
{
  text-align: left;
}

.align-center
{
  text-align: center;
}

.no-padding
{
  padding: 0 !important;
}

.icon-stack i  /* IE */
{
  left: 0;
}

.btn-flat
{
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  margin: 0 auto;
  padding: 14px 10px 15px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;

  background-color: #f9f9f9;
  color: #aaa;
  border: 1px solid #e1e1e1;
}

.link-flat
{
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  margin: 0 auto;
  /*padding: 14px 10px 15px;*/
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


/**********************/
/*  --header          */
/**********************/

h1
{
  font-family: "Source Sans Pro 300", sans-serif;
}

#page
{
  height: 100%;
/*  padding: 0 0 85px;*/
  position: relative;
  overflow: hidden;
}

#wait-screen
{
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  cursor: wait;
  background-color: rgba(44,44,44,0.8);
  zoom: 1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
}

#wait-screen-inner
{
  display: block;
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 0;
  left: 50%;
}

#wait-screen-message
{
  display: block;
  background-color: #ddd;
  border: 5px solid #aaa;
  text-align: center;
  width: 200px;
  height: 120px;
  padding: 10px 0;
  position: absolute;
  top: -70px;
  left: -100px;
  box-sizing: content-box;
}

#wait-screen-message p
{
  margin-top: 10px;
  padding: 0 10px;
}

#ajax-retry > div
{
  margin-top: 35px;
}

#main-nav
{
  height: 52px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  z-index: 205;
  background: #fff;
  color: #444;
  text-shadow: none;
  filter: none;
  border: none;
  border-radius: 0;
  border-bottom: 2px solid #ffb74d;
}

#main-nav > div
{
  display: block;
  position: relative;
  height: 50px;
  width: 100%;
}

#main-title, #nav-icons
{
  padding: 0 15px;
  display: block;
  vertical-align: sub;
  float: none;
}

#main-title
{
  position: absolute;
  left: 0;
  right: 400px;
  height: 50px;
}

#main-title > div
{
  position: absolute;
}

#nav-icons
{
  position: absolute;
  right: 0;
}

#main-title > div > span
{
  display: inline-block;
  font-family: 'Source Sans Pro 300', sans-serif;
  padding: 0 6px;
  font-size: 32px;
  line-height: 22px;
  margin: 0;
  font-weight: 300;
  color: #bbb;
}

#main-nav h1
{
  display: block;
  font-size: 28px;
  line-height: 50px;
  margin: 0;
  font-weight: 300;
  color: #777;
  position: absolute;
  top: 0;
  left: 130px;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#main-nav .brand, #footer .brand
{
  font-family: 'Source Sans Pro 300', sans-serif;
  font-size: 32px;
  text-decoration: none;
  font-weight: 300;
  color: #ffb74d;
}

.index #nav-icons
{
  display: none;
}

.index #main-title
{
  width: 100%;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
}

#nav-icons
{
  font-size: 0;
}

.search-query
{
  border: 2px solid #bfbfbf;
}

#notification-btn
{
  cursor: pointer;
  font-size: 26px;
  height: 50px;
  padding: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  margin-left: -25px;
}

#notification-btn .icon-stack-base
{
  color: #ffb74d;
}

#notification-btn .icon-light
{
  color: #555;
}

#notification-btn i
{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: inherit;
  cursor: pointer;
}

#notification-btn .badge
{
  position: absolute;
  background-color: #d32f2f;
  right: 10px;
  top: 10px;
  line-height: 12px;
  padding: 2px 4px;
}

#main-nav img /* specific environement like zenboa */
{
  max-height: 50px;
  position: absolute;
  top: 0;
  right: 20px;
  visibility: visible;
}

#nav-icons a
{
  color: #444;
  line-height: 30px;
  font-size: 15px;
  text-decoration: none;
  padding: 14px 14px 6px;
  display: inline-block;
}

#nav-icons a *
{
  cursor: pointer;
}

#nav-icons a
{
  display: none;
}

#nav-icons a#logout, #nav-icons a#bank
{
  display: inline-block;
}

.no-touch #nav-icons a:hover
{
  background-color: #e0e0e0;
}

#nav-icons i
{
  display: inline-block;
  width: 20px;
  text-align: left;
}

#nav-icons .search-query, #nav-icons #filter-dropdown
{
  display: none;
  width: 20px;
  margin: 16px 0 0;
  float: left;
  transition: width 0.6s;
}

#collapsed-menu
{
  display: none;
}

#sub-nav
{
  display: table;
  width: 100%;
  background: #e0e0e0;
  border-bottom: 2px solid #ffb74d;
  padding: 20px 0;
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  margin: 0;
  z-index: 201;
  transition: top 0.6s;
}

#sub-nav.collapsed
{
  top: -550px;
}

#sub-nav > div
{
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  font-size: 0;
}

.notification-tile
{
  border-right: 1px solid #bbb;
  text-align: center;
  display: inline-block;
  font-size: 14px;
  color: #444;
  background-color: #fff;
  width: 239px;
  height: 40px;
  margin: 5px;
  transition: transform 0.6s;
}

.notification-tile.dismissed
{
  transform: translateY(-150px);
}

.notification-tile-soon
{
  border-left: 10px solid #1e88e5;
}

.notification-tile-scores
{
  border-left: 10px solid #43a047; 
}

.notification-tile-blank
{
  border-left: 10px solid #bbb;
  visibility: hidden;
}

.notification-tile-body
{
  display: table;
  float: left;
  height: 38px;
  width: 218px;
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  border-right: 1px solid #bbb; 
}

.notification-tile-body span
{
  padding: 0 7px;
  cursor: pointer;
}

.notification-tile-footer, .notification-tile-header
{
  height: 38px;
  display: table;
  float: right;
  width: 20px;
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
}

.notification-tile-footer i
{
  cursor: pointer;
}

.notification-tile-footer span, .notification-tile-header span
{
  cursor: pointer;
}

.no-touch .notification-tile-footer:hover, .no-touch .notification-tile-header:hover, .no-touch .notification-tile-body:hover
{
  background-color: #eee;
}

.notification-tile-body > *, .notification-tile-footer > *, .notification-tile-header > *
{
  display: table-cell;
  vertical-align: middle;
}

#filter-bar 
{
  /*background: #ffd54f;*/
  /*background: #d2d2d2;*/
  display: none;
  color: #fff;
  position: relative;
  z-index: 200;
  top: 52px;
  left: 0;
  right: 0;
}

#filter-bar > div
{
  width: 100%;
  height: 40px;
  display: table;
}

#filter-bar > div > div
{
  width: 40%;
  padding: 0 2.5%;
  display: table-cell;
  vertical-align: middle;
  float: none;
}

#filter-bar .span2 > div
{
  cursor: pointer;
  display: inline-block;
  padding: 5px 10px;
}

#filter-bar label
{
  display: inline-block;
}

#filter-bar .filter-select
{
  color: #444;
  width: 140px;
  height: 20px;
  margin-bottom: 5px;
  outline: none;
  padding: 0;
}

#filter-bar .filter-select:focus
{
  outline: none;
}

.filter-menu
{
  position: relative;
  cursor: pointer;
  color: #555;
  padding: 10px;
  display: inline-block;
}

.filter-menu > i.icon-caret-up
{
  display: none;
  color: #fff;
  font-size: 25px;
  position: absolute;
  right: 15px;
  top: 20px;
}

.filter-menu ul
{
  display: none;
  background-color: #fff;
  box-shadow: 0 4px 4px rgba(68,68,68,0.15);
  position: absolute;
  right: 0;
  top: 37px;
  text-align: left;
  padding: 10px;
  width: 100px;
}

.filter-menu ul li
{
  display: block;
}

.filter-menu *
{
  cursor: pointer;
}

.filter-menu.toggled ul, .filter-menu.toggled > i
{
  display: block;
}

.filter-menu.toggled div i
{
  transform: rotateZ(-90deg);
}

.filter-menu i
{
  display: inline-block;
 transition: transform 0.6s;
}

.filter-btn
{
  display: inline-block;
  margin-right: 15px;
}

.filter
{
  cursor: pointer;
}

.filter-legend
{
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  vertical-align: sub;
  *display: inline;
  zoom: 1;
}

.filter-legend i
{
  width: 11.5px;
  text-align: center;
  position: relative;
  top: -1px;
}

#content, #menu-content
{
  /*padding-top: 62px;*/
  padding-top: 10px;
  position: relative;
  top: 52px;
  left: 0;
  height: calc(100% - 52px);
  overflow-y: auto;
  height: 100%\9;
  top: 0\9;
  padding-top: 52px\9;
}


.edit-pwd
{
  max-width: 380px;
  padding: 10px;
  text-align: center;
  margin: 15px auto;
}

.edit-pwd input
{
  text-align: center;
}

/**********************/
/*  --tiles           */
/**********************/

#menu-content .scores-row
{
  margin-bottom: 0px;
  min-height: calc(100% - 135px);
  height: 100%\9;
}

#menu-content .front
{
  overflow: hidden;
}
#menu-content .scores-tile-footer
{
  background-color: #fff;
}

#tile-create
{
  margin-bottom: 0;
}

.scores-row
{
  margin-bottom: 15px;
  text-align: center;
  font-size: 0;
}

#content .scores-row
{
  min-height: calc(100% - 65px);
}

.scores-row > table
{
  margin: 25px auto;
  font-size: 14px;
  border-collapse: collapse;
  border: 2px solid transparent !important;
}

.scores-row th, .scores-row td { border: 1px solid #bbb; }
.scores-row tr { background-color: #fff; }
.scores-row th.no-left, .scores-row td.no-left  { border-left: none; }
.scores-row th.no-right, .scores-row td.no-right { border-right: none; }
.scores-row th.no-top, .scores-row td.no-top { border-top: none; }
.scores-row th.no-bottom, .scores-row td.no-bottom { border-bottom: none; }
.scores-row td { cursor: pointer; }
.scores-row td.no-click { cursor: default; }

.scores-row > table th
{
  text-align: center;
  background-color: #ddd;
  min-width: 50px;
  padding: 5px;
}

.scores-row > table th.title
{
  border-top: none;
  background-color: #fff;
  /*background-color: #54d098;*/
  color: #444;
}

.scores-row > table tr.added
{
  /*background-color: #4eaf83;*/
  font-weight: 700;
  /*color: #fff;*/
}

.scores-row > table tr.added td:last-child
{
  font-weight: 400;
}

.scores-row > table tr.blank-row, .scores-row > table tr.blank-row td
{
  visibility: hidden;
  border: none;
}

.scores-row > table td
{
  text-align: left;
  padding: 5px 7px;
}

.scores-row > table td:first-child
{
  text-align: center;
}

.scores-tile.flip /*.front, .scores-tile.flip .back*/
{
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.trident .scores-tile.flip
{
  transform: none;
}

.trident .scores-tile .back
{
  visibility: hidden;
}

.trident .scores-tile.flip .front
{
  visibility: hidden;
  transform: none;
}

.trident .scores-tile.flip .back
{
  visibility: visible;
  transform: none;
}


.scores-tile
{
  transition: transform 0.6s, box-shadow 0.3s;
  -webkit-transition: -webkit-transform 0.6s, box-shadow 0.3s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.scores-tile
{
  border: none !important;
  width: 425px;
  background-color: #fff;
  display: inline-block;
  position: relative;
  color: #fff;
  font-size: 13px;
  line-height: 14px;
  /*font-size: 14px;*/
  margin: 10px;
  vertical-align: bottom;
}

/*.scores-tile.added
{
  opacity: 0.65;
  zoom: 1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
  filter: alpha(opacity=65);
}*/

.scores-tile.added .scores-tile-inner.store
{
  background-color: #4eaf83;
}

.history-tile
{
  border: none !important;
  width: 425px;
  background-color: #54d098;
  display: inline-block;
  position: relative;
  color: #fff;
  font-size: 14px;
  margin: 10px;
  vertical-align: bottom;
  height: 250px;
}

.history-text
{
  padding: 10px;
  text-align: justify;
}


.scores-tile a.empty:hover, .scores-tile .scores-tile-header > div.empty:hover
{
  background-color: #fff;
  cursor: default;
}

.scores-tile a:hover, .scores-tile .scores-tile-header > div:hover
{
  background-color: #ddd;
}

.scores-tile .back
{
  border: none !important;
}

.scores-tile a
{
  color: #444;
}

.scores-tile a:hover
{
  text-decoration: none;
}

.scores-tile .icon-light
{
  color: #444;
}

.scores-tile .front
{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.scores-tile .back
{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.csstransforms3d .scores-tile .back
{
  visibility: visible;
}

.scores-tile .front
{
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
}

.scores-tile .back
{
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg) translateZ(1px);
}


/**********************/
/*      --tile-color  */
/**********************/

.tile-blank
{
  visibility: hidden;
}

.scores-tile.soon
{
  opacity: 0.65;
  zoom: 1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
  filter: alpha(opacity=65);
}

.scores-tile.soon .front .scores-tile-footer > a
{
  opacity: 0;
}

#tile-login.zenboa, #tile-login.zenboa .back
{
  background-color: #d52675;
  border: 1px solid #1976d2;
}


/**********************/
/*      --back        */
/**********************/


.tile-services .scores-tile-inner
{
  background-color: #fff;
  color: #444;  
  border-right: 1px dotted #444;
}

.tile-services .back .scores-tile-inner
{
  width: 100%;
  background-color: #fff;
}

.back .scores-tile-inner
{
  width: 100%;
  background-color: #3b8b6b;
}

.back .scores-tile-inner.store
{
  background-color: #999; /* tile-color */
}

.tile-active .back .scores-tile-inner
{
  background-color: #EAA12D;
}

.back .scores-tile-inner > div
{
  vertical-align: top;
  text-align: justify;
  padding: 15px 35px;
}

.back .scores-tile-footer > div
{
  cursor: pointer;
}

/**********************/
/*      --remove      */
/**********************/

.remove-overlay
{
  background-color: #fff;
  position: absolute;
  display: none;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg) translateZ(1px);
}

.remove-overlay .scores-tile-inner > div
{
  vertical-align: middle;
  padding: 15px 35px;
}

.remove-overlay .scores-tile-footer > a:hover
{
  background-color: #ddd;
}


/**********************/
/*      --tile-inner  */
/**********************/


.scores-tile-inner
{
  position: relative;
  overflow: hidden;
  height: 110px;
  width: 75%;
  float: left;
  display: block;
  background-color: #4EAF83;
  /*#54d098*/
}

.scores-tile-inner.first
{
  background-color: #275;
}

.scores-tile.unproper .scores-tile-inner
{
  background-color: #FFA726;
}

.scores-tile-inner.store
{
  background-color: #999;
  color: #fff;
}

.tile-active .scores-tile-inner
{
  background-color: #EAA12D;
}

.scores-tile-inner h3
{
  margin: 10px 10px 7px; /*10px*/
  font-size: 20px; /*16px*/
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0px;
}


.input-btn 
{
  right: 0;
  bottom: 0;
  padding: 10px 20px;
  position: absolute;
}
.input-btn:hover
{
  background-color: #47B282;
}
.scores-tile-inner .unflip-btn 
{
  right: 5px;
  bottom: 5px;
  padding: 0 !important;
  text-align: center !important;
  position: absolute;
  width: 30px;
  line-height: 30px;
}
.scores-tile-inner .remove-tile-btn, .scores-tile-inner .delete-tile-btn
{
  right: 5px;
  top: 5px;
  padding: 0 !important;
  text-align: center !important;
  position: absolute;
  width: 30px;
  line-height: 30px;
}

.scores-tile-inner .info-btn i, .scores-tile-inner .unflip-btn i, .scores-tile-inner .remove-tile-btn i, .scores-tile-inner .delete-tile-btn i
{
  color: #fff;
}
.scores-tile-inner .info-btn:hover i, .scores-tile-inner .unflip-btn:hover i, .scores-tile-inner .remove-tile-btn:hover i, .scores-tile-inner .delete-tile-btn:hover i
{
  color: #444;
}
.tile-services .scores-tile-inner .info-btn i, .tile-services .scores-tile-inner .unflip-btn i, .tile-services .scores-tile-inner .remove-tile-btn i, .tile-services .scores-tile-inner .delete-tile-btn i
{
  color: #444;
}


.scores-tile-inner h3.history
{
  font-size: 16px;
  font-weight: 400;
  text-transform: none;
}

.scores-tile-inner > div
{
  padding: 0 20px;
  display: block;
}

.scores-tile-inner .subtitle
{
  padding: 0; /*0 15px*/
  line-height: 15px;
}

.scores-tile-inner .subtitle.history
{
  font-size: 16px;
}

#content-detailed .scores-tile .front .scores-tile-inner
{
  /*display: table;*/
}
#content-detailed .scores-tile .front .scores-tile-inner > div
{
  /*display: table-cell;*/
  /*vertical-align: middle;*/
}
#content-detailed .scores-tile:first-child .front .scores-tile-inner
{
/*  display: block;
*/}
#content-detailed .scores-tile:first-child .front .scores-tile-inner > div
{
/*  display: block;
*/}


/**********************/
/*    --notifs        */
/**********************/


.scores-tile-inner *
{
  cursor: pointer;
}

.scores-tile-inner .action
{
  font-size: 20px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15px;
}

.scores-tile-inner .notification
{
  visibility: hidden;
  font-size: 20px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15px;
}

.scores-tile-inner .notification.active
{
  visibility: visible;
}

.scores-tile-inner .notification .icon-stack-base
{
  color: #fff;
}

.scores-tile-inner .notification .icon-light
{
  color: #ffb74d;
}


/**********************/
/*    --tile-footer   */
/**********************/


.scores-tile-footer
{
  float: left;
  width: 25%;
  height: 110px;
  display: block;
  border: none;
}

.scores-tile-footer > a
{
  display: table;
  width: 100%;
  height:  50%;
  border-bottom: 1px solid #d0d0d0;
  padding: 0;
  vertical-align: middle;
  font-size: 15px;
}

.scores-tile.history .scores-tile-footer > a, .scores-tile.one-btn .scores-tile-footer > a
{
  height: 50%;
}

.scores-tile.one-btn a.empty
{
  display: none;
}

.scores-tile-footer >  a.empty span
{
  cursor: default;
}

.scores-tile-footer > a.info-btn
{
  border-bottom: none;
}

.scores-tile-footer > a > span
{
  color: #555;
  display: table-cell;
  vertical-align: middle;
  padding: 0;
}

.scores-tile-footer i
{
  display: none !important;
  width: 25px;
}


/**********************/
/* --anim           */
/**********************/

#content-alt
{
  font-family: sans-serif;
  position: absolute;
  padding-top: 20px;
  top: 97px;
  width: 100%;
  height: calc(100% - 97px);
  height: 100%\9;
  overflow-y: auto;
  left: 100%;
  z-index: 201;
}

#content-detailed
{
  position: absolute;
  padding-top: 20px;
  top: 97px;
  width: 100%;
  height: calc(100% - 97px);
  height: 100%\9;
  /*overflow-y: auto;*/
  overflow-x: hidden;
  left: 100%;
}

#help-container
{
  height: 100%;
  padding-top: 52px;
  overflow-y: auto;
  z-index: 202; 
}

#content, #content-alt, #content-detailed
{
  /*transition: left 1s;*/
  /*-webkit-transition: left 1s;*/
}

.slide-left #content, .slide-left #content-alt
{
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}

.alt-view #menu-content, .detailed-view #menu-content, .final-view #menu-content
{
  display: none;
}

.alt-view .xle-bar.alt, .detailed-view .xle-bar.detailed, .final-view .xle-bar.alt
{
  display: block;
}

.alt-view #content { left:-100%; }
.alt-view #content-alt
{
  /*transform: translateX(-100%);*/
  /*-webkit-transform: translateX(-100%);*/
  left: 0;
}

.detailed-view #content { left: -100%; } 
.detailed-view #content-detailed
{
  left: 0;
  /*transform: translateX(-100%);*/
  /*-webkit-transform: translateX(-100%);*/
}

.final-view #content, .final-view #content-detailed
{
  left:-100%;
  /*transform: translateX(-100%);*/
  /*-webkit-transform: translateX(-100%);*/
}

.final-view #content-alt
{
  left: 0;
  /*transform: translateX(-200%);*/
  /*-webkit-transform: translateX(-200%);*/
}


/**********************/
/* --config           */
/**********************/

#simplemodal-overlay
{
  background-color: #000;
}

#simplemodal-container
{
  background-color: #eee;
  border: 8px solid #ccc;
  height: auto !important;
  padding: 12px;
  width: auto !important;
}

#simplemodal-footer
{
  margin-top: 20px;
  text-align: center;
}

#notice
{
  width: 450px;
}

.notice-btn:first-child
{
  margin-top: 0;
}

.notice-btn
{
  text-align: left;
  margin-top: 10px;
  display: block;
  height: 96px;
  text-decoration: none !important;
}

.notice-btn > *
{
  display: inline-block;
}

.notice-btn > img
{
  border: 1px solid #ccc;
}

.notice-btn > span
{
  padding: 10px;
  vertical-align: middle;
  width: 345px;
}


#modal-pwd input.error
{
  border-color: #e9322d;
  box-shadow: 0 0 6px #f8b9b7;
}

#modal-cookie .not-visible
{
  visibility: hidden;
}

#cookie-state b
{
  color: #ffb74d;
}

#zenboa
{
  box-sizing: border-box;
  width: 100%;
  resize: none;
}

#zenboa.error
{
  border-color: #e9322d;
  box-shadow: 0 0 6px #f8b9b7;
}

#fake-score-screen
{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.xle-bar
{
  background-color: #3e3e3e;
  z-index: 202;
  overflow: hidden;
  top: 52px;
  left: 0;
  right: 0;
  position: absolute;
  display: none;
}

.xle-bar > div
{
  padding: 0 15px;
  text-align: center;
}

.xle-bar ul
{
  margin-bottom: 0;
  list-style: none;
  font-size: 0;
  display: inline-block;
  padding: 0;
}

.xle-bar ul li
{
  display: inline-block;
}

.xle-bar ul li.separator span
{
  font-size: 16px;
  padding: 11px 0;
  vertical-align: middle;
  display: inline-block;
  color: #fff;
}

.xle-bar button, .foo td, .foo > div
{
  background-color: #3e3e3e;
  background-image: none;
  border: none;
  color: #dadfe1;
  border-radius: 0;
  box-shadow: none;
  font-size: 16px;
  padding: 11px 12px;
  cursor: pointer;
}

.xle-bar button:hover, .xle-bar button:focus, .xle-bar button:active, .xle-bar button.active, .foo td:hover, .foo > div:hover
{
  /*background-color:#737373;*/
  background-color:#3e3e3e;
  color: #eee
}

#menu-content .foo td:hover, #menu-content .foo > div:hover
{
  background-color: #3e3e3e;
  color: #dadfe1;
  cursor: default;
}

.xle-bar button.disabled, .xle-bar button.disabled:hover, .xle-bar button.disabled:focus, .xle-bar button.disabled:active, .foo td.disabled:hover, .foo > div.disabled:hover
{
  /*background-color:#7f7f7f;*/
  background-color:#3e3e3e;
  color: #aeb2b4;
  cursor: not-allowed;
  pointer-events: initial;
  box-shadow: none;
}

#replay-bar
{
  font-size: 16px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

#replay-bar h4
{
  background-color: #5e5e5e;
  color: #fff;
  font-size: 16px;  
}

#store-header
{
  font-size: 14px;
  background: #fff;
  text-align: left;
  margin-bottom: 10px;
}

#store-header h4
{
  color: #fff;
  background-color: #4EAF83;
  padding: 10px 15px;
  margin-top: 0;
  margin-bottom: 0;
}

#store-header > div
{
  padding:15px;
}

#store-header > div p
{
  margin: 10px 0 0;
}

#store-header > div p:first-child
{
  margin: 0;
}

.label-sanoia
{
  background-color: #ffb74d;
}

.label
{
  border-radius: 0px;
}

.subtitle .label
{
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 100%;
  padding: 4px 7px 5px;
}

.highcharts-background
{
  opacity: 0.8;
}

.xle-style
{
  /* background: url(//static.sanoia.com/sanoia/images/noise.png) #34495e;*/
  color: #444;
}

.xle-style h4
{
  color: #fff;
  padding: 10px 15px;
  margin: 0;
  background-color: #4EAF83;
}

.xle-style .scaleQuestion
{
  margin: 0;
  border-top: 1px solid #bbb;
}

.xle-style .scaleLegendRow
{
  background-color: #bbb;
  color: #444;
}

.xld-container .lastLegend
{
  margin-top: 0;
  border-top: 1px solid #bbb;
}

.xle-style .bootstrap-select > .selectpicker:first-child, .xle-style .repeatable-btn
{
  background-color: #2F6747;
}

.xle-style .scaleQuestion > div:first-child
{
  background-color: #ddd;
  color: #444;
}

.xle-style .scaleQuestion.errorQuestion.badAnswer > div:first-child, .xle-style .question.errorQuestion.badAnswer h4
{
  background-color: #d9386a;/*#c33;*/
  color: #fff;
}

.xle-style .noUi-base
{
  transform: none;
  -webkit-transform: none;
}

.xle-style .noUi-background
{
  background-color: #505355;
}

.xle-style .noUiTooltip
{
  background-color: #4EAF83;
}

.xle-style .help-button
{
  color: #2e6d5d;
}

.xle-style .help-button:hover
{
  color: #2f4c3f
}

.xle-style .info
{
  padding: 15px;
}

.xle-style .textarea-wrapper
{
  padding: 15px;
}

.xle-style .textarea-wrapper textarea
{
  margin: 0;
  width: 99%;
  resize: none;
}

.xle-style .input-wrap
{
  line-height: 30px;
}

.xle-style .input-wrap input
{
  margin: 0;
}

.xle-style select
{
  margin: 0;
}

.xle-style #calendar
{
  overflow: hidden;
}

.xle-style #calendar td.day, .xle-style #calendar .calendar-nav
{
  cursor: pointer;
}

.xle-style #calendar td
{
  border: 1px solid #333;
  width: 14.285714285714286%;
  padding: 5px;
}

.xle-style #calendar .hasEvent .badge
{
  background-color: #5bc0de;
}

.xle-style #calendar td.calendar-display
{
  width: 42.85714285714286%;
}

.xle-style #calendar td.calendar-display .bootstrap-select
{
  margin: 5px;
}

.xle-style #calendar td.calendar-nav
{
  width: 28.571428571428573%;
}

.xle-style #calendar td.calendar-nav span
{
  display: inline;
}

.xle-style .question table
{
  text-align:center;
  margin:15px auto;
  width: 90%;
  border: 1px solid #333;
}

.xle-style .question table thead
{
  background-color: #d7e5f5;
  font-weight: bold;
}

.xle-style .question table td
{
  border: 1px solid #333;
}

#xle-style-btn-wrapper
{
  margin-bottom: 45px;
  margin-top: 20px;
  width: 100%;
  text-align: center;
}

#xle-style-btn-wrapper button i
{
  position: relative;
  top: 1px;
}

#xle-style-btn-wrapper button
{
  background: #fff;
  border: none;
  margin: 0 10px;
  border-radius: 3px;
  box-shadow: none;
  color: #444;
  float: none;
  padding: 10px 16px;
  font-size: 20px;
  min-width: 146px;
}

#xle-style-btn-wrapper button:focus, #xle-style-btn-wrapper button:active
{
  box-shadow: 0 3px 5px rgba(0,0,0,0.125) inset;
}

#xle-style-btn-wrapper button:hover
{
  background: #ddd;
  color: #444;
}

#xle-style-btn-wrapper button.disabled, #xle-style-btn-wrapper button.disabled:hover
{
  background: #bbb;
  color: #777;
  cursor: not-allowed;
  pointer-events: initial;
  box-shadow: none;
}


/**********************/
/*  --spinner         */
/**********************/

.spinner-whole 
{
  bottom: 0;
  cursor: wait;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;
  background-color: #000;
  opacity: 0.4;
}
.spinner-container 
{
  bottom: 0;
  display: block;
  left: 50%;
  position: absolute;
  right: 0;
  top: 50%;
}
.spinner 
{
  /*color: #3f5973;*/
  color: #fff !important;
  display: block;
  font-size: 200px;
  left: -150px;
  position: absolute;
  text-align: center;
  top: -145px;
  width: 300px;
}

.broken-score
{
  color: #fff;
}


/**********************/
/* --footer           */
/**********************/

.foo
{
  border-top: 2px solid #ddd;
  background: #3e3e3e;
  color: #fff;
  z-index: 200;
  /*position: absolute;*/
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 50px;
}

.foo > div
{
  display: inline-block;
  padding: 13px;
  padding: 12px\9;
}

.foo > div.link
{
  padding-left: 0;
  padding-right: 0; 
}

#sanoia-link
{
  padding: 13px 12px;
  text-decoration: none;
}

.footer
{
  border-top: 2px solid #ddd;
  text-align: center;
  background: #f9b94d;
  color: #fff;
  z-index: 200;
  position: absolute;
  bottom: -85px;
  width: 100%;
  height: 85px;
}

.footer > div
{
  display: table;
  width: 100%;
  height: 100%;
}

.footer > div > div
{
  width: 40%;
  padding: 0 2.5%;
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}

.footer .brand
{
  color: #fff;
  font-size: 15px;
}

.footer .brand div:first-child
{
  font-size: 45px;
}

.footer a
{
  color: #fff;
}




/**********************/
/*     --media        */
/**********************/


.index #filter-bar, .index #notification-btn, .index #main-title > span, .index #main-title > h1, .index #nav-icons
{
  visibility: hidden;
}



/**********************/
/*     --media        */
/**********************/


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

  #main-title
  {
    width: 100%;
    display: table-cell;
    text-align: left;
    vertical-align: middle;
  }

  #main-title h1, #main-title > span
  {
    display: none;
  }

  #main-title h1.zenboa, #main-title > span.zenboa
  {
    display: inline-block;
  }

  #nav-icons span
  {
    display: none;
  }

  #nav-icons span.no-hide
  {
    display: inline;
  }

  #main-nav img
  {
    display: none;
  }

  #nav-icons i
  {
    width: auto;
  }

  #nav-icons
  {
    width: auto;
    float: right;
    position: absolute;
    right: 0;
    top: 0;
  }

/*  #nav-icons a
  {
    display: inline-block;
  }
*/
  #nav-icons .search-query.active, #nav-icons #filter-dropdown.active
  {
    display: inline-block;
    width: 125px;
    margin-left: 10px;
  }

  #filter-bar
  {
    display: none;
  }

  .scores-row > table
  {
    margin: 25px auto;
  }
}

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

  #nav-icons #filter-dropdown.active
  {
    width: 80px
  }

  #nav-icons .search-query.active 
  {
    width: 60px;
  }

  #simplemodal-container
  {
    height: auto !important;
    width: 100% !important;
  }

  #notice
  {
    width: 100%;
  }

  #notice > a
  {
    position: relative;
  }

  #notice > a > span
  {
    position: absolute;
    left: 96px;
    right: 0;
    width: auto;
  }
}

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

  .scores-tile, .history-tile
  {
    width: 98%;
    margin: 5px 1% !important;
    font-size: 12px;
  }

  .scores-tile h3
  {
    font-size: 18px;
  }

  .link-flat
  {
    font-size: 14px;
  }

  .scores-tile-inner .subtitle.history
  {
    font-size: 18px;
  }

  .scores-tile-inner > div
  {
    padding: 0 10px;
  }

  .xld-container input.autocomplete, .xld-container .suggest
  {
    width: 100%;
  }

  .xle-bar > div
  {
    padding: 0;
  }
}

#graph
{
  position: relative;
  width: 1315px;
}

.highcharts-xaxis-grid .highcharts-grid-line {
stroke: #505355;
}
.highcharts-yaxis-grid .highcharts-grid-line {
stroke: #505355;
}

.question.gfx > div
{
  position: relative;
}

#print-chart-btn, .print-chart-btn
{
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;
}


@media only screen and (max-width: 885px) {
  #graph
  {
    width: 98% !important;
    margin: 5px 1% !important;
  }
}

@media only screen and (max-width: 1787px) {
  #graph
  {
    width: 870px;
  }
}

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

  .touch .hidden-device
  {
    display: none !important;
  }

  .navbar .nav
  {
    float: left;
  }

  .foo td
  {
    display: block;
    padding: 3px;
  }

  .foo > div
  {
    width: 50%;
    float: left;
  }

  .foo > div:first-child, .foo > div:first-child+div
  {
    border-bottom: 1px solid #ddd;
  }

  .foo > div:nth-child(2n+1)
  {
    border-right: 1px solid #ddd;
  }

/*  #main-nav .brand
  {
    font-size: 24px;
  }

  #main-title > span
  {
    font-size: 24px;
  }

  #main-nav h1
  {
    font-size: 24px;
  }*/

  .scores-tile-inner, .scores-tile-footer
  {
    height: 130px;
  }

  .scores-tile-inner h3
  {
    font-size: 22px; /*16px*/
    letter-spacing: 1px;
  }
}

  #content-detailed, #content-alt
  {
    top: 97px;
    padding-top: 0px;
    height: calc(100% - 97px);
    top: 0\9;
    padding-top: 97px\9;
    height: 100%\9;
    /*padding-top: 59px;*/
  }

  #content-detailed .scores-row, #content-alt .scores-row, #content-alt > .container.wrapper
  {
    margin-top: 20px;
  }

@media only print {

  #main-nav
  {
    page-break-after: avoid;
  }

  .xle-bar, .replay-bar
  {
    display: none !important;
  }

  #content, #content-alt, #content-detailed, #sub-nav, .xle-bar, #xle-style-btn-wrapper, #notification-btn, #nav-icons, .spinner-whole
  {
    display: none;
  }

  #main-nav
  {
    position: static;
  }

  #main-title *
  {
    display: none;
  }

  #main-title #surveyTitle
  {
    display: inline-block;
    width: auto;
    position: static;
  }

  body
  {
    height: auto;
  }

  table
  {
    page-break-inside: avoid;
    -webkit-region-break-inside: avoid;
  }

  .alt-view #content-alt, .detailed-view #content-detailed, .final-view #content-alt
  {
    display: block;
    position: static;
    overflow: auto;
    transform: none !important;
  }

  .scores-tile
  {
    border: 1px solid #000 !important;
  }

  .scores-tile .scores-tile-inner .label
  {
    font-weight: 400;
  }

  .scores-tile .scores-tile-inner
  {
    width: 100%;
  }

  .scores-tile .back, .scores-tile .scores-tile-footer
  {
    display: none;
  }

  .question
  {
    page-break-inside: avoid;
    -webkit-region-break-inside: avoid;
    border: 1px solid #000 !important;
  }

  .question .question
  {
    border: none !important;
  }

  .noUi-target, .noUi-handle
  {
    border: 1px solid #000 !important;
  }

  .noUi-marker
  {
    border-left: 1px solid #000 !important;
    width: 1px;
  }

  .noUi-origin
  {
    margin-right: 0 !important;
  }

  .scaleQuestion div
  {
    top: 0 !important;
  }

  .scaleQuestion
  {
    margin-bottom: 20px !important;
    overflow: hidden !important;
  }

  .question h4, .scaleTitle
  {
    border-bottom: 1px solid #000 !important;
  }

  .question input
  {
    opacity: 1 !important;
  }

  .question .inputContainer > div
  {
    width: 33% !important;
  }

}