/* MAIN MULTI-PAGE STYLES */
html{ height: 100%;}
body{ min-height: 100%; background-color: rgba(13, 191, 214, 0.2); font-size: 16px; line-height: 20px; color: #656666; overflow-x: hidden; font-family: 'Roboto', Helvetica Neue, Helvetica, Arial, sans-serif;}
a{ color: #0dbfd6;}

#header h1{ margin: 0; margin-left: 30px; font-size: 16px; font-weight: 200; line-height: 60px; min-width: 800px; text-transform: uppercase; color: #e8efef;}
h2 { font-size: 16px; font-weight: 200; color: rgba(0, 0, 0, 0.87); margin-bottom: 15px;}

/* undo some MDL defaults: */
dialog h2 { color: black; font-size: 24px; line-height: 22px; margin-top: 0; }
dialog .mdl-dialog__title { color: black; }
#content h2 { font-size: 16px; line-height: 22px; margin: 0 0 15px 0; }
#content h4 { line-height: inherit !important; font-weight: bold !important; }

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

.hidden { visibility: hidden; }

.button{ box-shadow: none; border: 1px solid transparent; background-color: #d81b60; font-size: 12px; text-transform: uppercase; border-radius: 4px;}
.button:hover{ background-color: #e8efef; color: #d81b60;}
.button.blue{ background-color: #284854; color: #e8efef;}
.button.blue:hover{ background-color: #e8efef; color: #284854;}
.button.transparent{ background-color: transparent; color: #284854; border-color: #284854;}
.button.transparent:hover{ background-color: #0dbfd6; color: #e8efef;}
.button.white{ background-color: #ffffff; color: #284854; border-color: #284854;}
.button.white:hover{ background-color: #284854; color: #e8efef;}

.button.white-outline{ color: #0dbfd6; border-color: #0dbfd6;}
.button.white-outline.selected{ background-color: #e8efef; color: #245;}

.mdl-grid { max-width: 1000px; }  /* like F's .row used to do */

.mdl-radio__outer-circle { border-color: rgba(0, 0, 0, 0.87) !important; }
.mdl-radio__inner-circle { background: rgba(0, 0, 0, 0.87) !important; }
.mdl-radio { font-size: 13px; margin-left: 6px; }
.mdl-radio__ripple-container .mdl-ripple { background: rgba(0, 0, 0, 0.87) !important; }
.mdl-checkbox__ripple-container .mdl-ripple { background: rgba(0, 0, 0, 0.87) !important; }

.mdl-card__actions{ display: flex; box-sizing: border-box; align-items: center;}
.mdl-card__actions i{ margin-left: 5px; margin-right: 5px;}

select{ -webkit-appearance: none; padding-left: 10px; border-radius: 0; font-size: 12px; height: 30px; color: #333; border: 0; border-bottom: 1px solid #999; background: url(../img/icons/arrow-down.png) no-repeat 98%; background-color: #ffffff; background-size: 10px;}

.wide { width: 100% }

#dataset-modal {
  max-width: 90vw;
  height: 80vh;
  position: absolute;
}

#dataset-modal label { color: rgba(0, 0, 0, 0.4); }
#dataset-modal textarea[disabled] { color: black; }

#dataset-modal table {
  width: 100%;
}
#dataset-modal label {
  font: inherit;  /* de-foundation */
}

#dataset-modal .dataset-download {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.dataset-table-placeholder table tr {
  text-align: center;
}


/* Story tiles */
.story-tile { width: 320px;}
.story-tile .header {line-height: normal; padding: 5px; border-bottom: solid 1px rgba(120, 120, 120, 0.31); overflow: visible; padding-right: 50px; display: flex; align-items: center; position: relative;  width: 100%;}
.story-tile .header .title-wrapper {font-size: 18px; font-weight: 300; position: relative;}
.story-tile .header i.material-icons { color: #b52735; margin: 0 10px 0 5px; flex-shrink: 0; }
.story-tile.story-published .header i.material-icons { color: #82C449;}
.story-tile.story-incomplete .header i.material-icons { color: #0dbfd6;}
.story-tile .header .title-wrapper .title {color: #333; text-decoration: none; outline: 0; display: inline-block; border: 1px dashed transparent;}
.story-tile .header .updated-wrapper {font-size: 12px;}
.story-tile .header .updated-wrapper .updated {text-decoration: none; outline: 0; display: inline-block; border: 1px dashed transparent;}
.story-tile .cover { height: 180px; width: 100%; background-position: center center; background-repeat:no-repeat; background-size: cover !important; background-color: transparent;}
.story-tile .cover .cover-text {text-align: center;font-weight: 600;font-size: x-large;line-height: initial;padding-top: 20px;padding-left: 10px;padding-right: 10px;}
.story-tile .mdl-card__supporting-text{ width: 100%;}
.story-tile .mdl-card__supporting-text .clamp-to-2{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 36px;}

.card-tag{ position: relative; margin-top: 8px; display: inline-block; margin-right: 8px; background-color: #cecece; border-radius: 30px; min-width: 30px; max-width: 270px; height: 30px; overflow: hidden;}
.card-tag .preview{ text-transform: capitalize; height: 30px; line-height: 30px; width: 30px; text-align: center; color: #ffffff; border-radius: 30px; display: inline-block; position: absolute; cursor: pointer;}

.card-tag .tag-expandable{ display: inline-block; padding-left: 30px; line-height: 30px; max-width: 0;
  -webkit-transition: max-width, 0.5s ease-out;
  -moz-transition: max-width, 0.5s ease-out;
  -ms-transition: max-width, 0.5s ease-out;
  -o-transition: max-width, 0.5s ease-out;
  transition: max-width, 0.5s ease-out;}
.card-tag .tag-expandable.open{ max-width: 300px;
  -webkit-transition: max-width, 0.5s ease-in;
  -moz-transition: max-width, 0.5s ease-in;
  -ms-transition: max-width, 0.5s ease-in;
  -o-transition: max-width, 0.5s ease-in;
  transition: max-width, 0.5s ease-in;}


.tag-expandable span.text-thing{ overflow: hidden; white-space: nowrap; max-width: 195px; text-overflow: ellipsis; display: inline-block; padding-left: 10px;}
.tag-expandable span.delete-thing { padding: 3px 6px 3px 3px; display: inline-block; vertical-align: bottom; cursor: pointer;}

/* Dashboard tiles */
#dataset-items-list{ display: flex; flex-direction: column-reverse;}
.dashboard-tile { width: 320px;}
.dashboard-tile .header {line-height: normal; padding: 5px; border-bottom: solid 1px rgba(120, 120, 120, 0.31); overflow: visible; padding-right: 50px; display: flex; align-items: center; position: relative; width: 100%;}
.dashboard-tile .header .title-wrapper {font-size: 18px; font-weight: 300; position: relative;}
.dashboard-tile .header i.material-icons { color: #b52735; margin: 0 10px 0 5px; flex-shrink: 0; }
.dashboard-tile.dashboard-published .header i.material-icons { color: #82C449;}
.dashboard-tile .header .title-wrapper .title {color: #333; text-decoration: none; outline: 0; display: inline-block; border: 1px dashed transparent;}
.dashboard-tile .header .updated-wrapper {font-size: 12px;}
.dashboard-tile .header .updated-wrapper .updated {text-decoration: none; outline: 0; display: inline-block; border: 1px dashed transparent;}

.dashboard-tile .mdl-card__media{ height: 180px;}

#header{ position: relative; height: 60px; background-color: #ffffff; }
#header .mdl-button{ color: #0dbfd6; margin-right: 24px;}
#header .explore.search-div{ position: absolute; width: 250px; top: 0px; left: 0; right: 0;
                             argin-left: auto; margin-right: auto; }
input.search-input { color: #111; background-color: white; }
label.search-icon i { color: #ccc; }

.dataset-explore-breadcrumbs-back {
  color: #e8efef;
  font-size: 14px;
  font-weight: 500;
  height: 48px;
  line-height: 48px;
  text-transform: uppercase;
}

.nav-bar { display: inline-block; }
.nav-bar li { position: relative; float: left; list-style: none; border-right: 1px solid #edefef;}
.nav-bar li.selected { background-color: #eeeeee;}
.nav-bar li:first-child { border-left: 1px solid #edefef;}
.nav-bar li a { display: inline-block; padding: 12px 35px 14px; color: #878787;}

#content{ padding: 40px 24px;}
#header .mdl-button--raised, #content .mdl-button--raised{ background-color: #d81b60;}

label{ font-size: 12px; color: rgba(0, 0, 0, 0.87);}
dialog label{ color: #4d4d4d; text-transform: none;}

#main-page{ position: relative;}
#top-menu-spacer{ height: 80px;}

/* TOP MENU */
#top-menu{ background: #0dbfd6; height: 80px; width: 100%; color: #fff; position: fixed; z-index: 10; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); }
header.mdl-layout__header { box-shadow: 0 0 20px rgba(0, 0, 0, 0.4) !important; position: relative; }
#top-menu #top-logo{ position: absolute; height: 65px; width: 65px; left: 20px; top: 5px; text-align: center; padding: 7px 0;}
.notifications-badge { display:inline-block; position:absolute; width:20px; height:20px; border-radius:10px; font-size:10px; color:#fff; line-height:20px; text-align:center; background:#d81b60;}
#top-menu #top-logo img{ height: 100%;}

.extra-options{ position: absolute; right: 15px; top: 10px; z-index: 100; }
.extra-options .mdl-button{ width: 40px; height: 40px; line-height: 40px; font-size: 40px; }
.extra-options .mdl-button i.material-icons{ line-height: 40px; width: 40px; font-size: 40px;     -webkit-transform: translate(-20px,-20px); -ms-transform: translate(-20px,-20px); transform: translate(-20px,-20px);}
.extra-options li{ text-transform: uppercase;}
.extra-options li i.material-icons{ position: relative; top: 7px; color: #284854;}
#extra-options-menu i { color: #e8efef; }

#top-menu h2{ line-height: 80px; position: absolute; right: 32px; margin: 0; white-space: nowrap; width: calc(100% - 140px); overflow: hidden; text-overflow: ellipsis;}

#top-menu .go-back {
  color: white;
  font-weight: 400;
  position: absolute;
  left: 120px;
  height: 80px;
  line-height: 80px;
}

#pDebug #pDebugToolbarHandle{ display: none !important;}

/* HACK: chrome (only) has trouble displaying menus, unless you do something like this: */
.dataset-tile .mdl-menu {
   background-color: #fff;
}

a.mdl-menu__item, .mdl-menu__item a{ color: #284854;}
.mdl-menu__item:hover, .mdl-menu__item a:hover{ background-color: #ecec74;}
.mdl-button:not(.mdl-button--fab),
.mdl-button--raised:focus:not(:active){ box-shadow: none; }  /* un-foundation */
.mdl-button:hover,
.mdl-button:focus { color: inherit; }  /* un-foundation */

.autocomplete-suggestions{ border: 1px solid #999; background: #fff; cursor: default; overflow: auto; font-weight: bold;}
.autocomplete-suggestion{ padding: 10px 5px; font-size: 1.2em; white-space: nowrap; overflow: hidden;}
.autocomplete-selected{ background: #f0f0f0;}
.autocomplete-suggestions span{ font-weight: normal;}

/* DATASET/MANAGE PAGE */
#upload-connect-button {
    top: 11px;
    margin-left: 120px;
}

#dataset-search-box-container {
    float: right;
    position: relative;
    margin-right: 10px;
    width: 300px;
}

.dataset-items-container {
  padding: 0 15px;
  margin-left: auto;
  margin-right: auto;
}

#upload-progress-section {
    margin-bottom: 20px;
}

#upload-message {
    color: #e8efef;
    margin-bottom: 5px;
}

/* InfiniteScroll loading div */
#infscr-loading{
  margin-left: 45vw;
  color: #e8efef;
}

/* SEARCH (both on Manage and Explore tabs) */
header.mdl-layout__header--waterfall{ overflow: visible;}
header.mdl-layout__header--waterfall .mdl-tabs{ overflow: hidden;}
header .mdl-layout__header-row{ justify-content: center;}

.search-div{ position: relative; width: 440px;}

.search-div input[type="text"] {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 35px;
    padding-right: 10px;
    border: none;
    border-radius: 2px;
    box-shadow: rgb(153, 153, 153) 0px 0px 5px 0px;  /* like mdl-shadow--2dp, but explicit, to bypass foundation */
}
.search-div .search-icon {
    position: absolute;
    left: 5px;
    top: 20px;
}

.search-div .search-input{ font-size: 1em;}

#dataset-sort-button {
    top: 15px;

    color: #e8efef;
    float: right;
    margin-right: 120px;
    margin-bottom: 0;
}
#dataset-sort-menu i.material-icons {
    padding-top: 5px;
}

.dataset-list .summary {
    color: #e8efef;
    text-align: center;
}

.drop-target {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.drop-target.visual {
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    text-align: center;
    padding-top: 200px;
    color: #e8efef;
}
.drop-target.visual h2 {
    font-size: 200%;
}
.drop-target.functional {
    background: rgba(0, 0, 0, 0.0);  /* this makes IE10 not blink, for some reason */
    z-index: 1000;
}

#starred-only-div {
  position: relative;
  margin-right: 30px;
  margin-left: 10px;
}

ul.list{ margin: 0 0 20px 0; padding: 0; list-style-type: none;}
ul.list.smart-stories li.smart-story,
ul.list.smart-story-bundles li.smart-story-bundle{
  /*display: flex;*/
  justify-content: space-between;
  align-items: center;

  line-height: 18px;
  font-size: 16px;
  padding-top: 6px;
  padding-bottom: 6px;
}
ul.list.smart-stories li.smart-story,
ul.list.smart-story-bundles li.smart-story-bundle{
  border-bottom: 1px solid #e8efef;
  color: #e8efef;
}

ul.list.smart-stories:not(.inverted) li.smart-story,
ul.list.smart-story-bundles:not(.inverted) li.smart-story-bundle{
  border-bottom: 1px solid #656666 !important;
  color: #656666 !important;
}

ul.list.smart-stories li.smart-story:last-child,
ul.list.smart-story-bundles li.smart-story-bundle:last-child {
  border-bottom: none !important;
}

ul.list.datasets .icon,
ul.list.smart-stories .icon,
ul.list.smart-story-bundles .icon {
  width: 36px;
  height: 36px;
  margin-left: 6px;
  margin-right: 6px;
  flex-shrink: 0;
  overflow: hidden;
}
ul.list.datasets .icon i.material-icons,
ul.list.smart-stories .icon i.material-icons,
ul.list.smart-story-bundles .icon i.material-icons {
  font-size: 36px;
}

ul.list.datasets .name,
ul.list.smart-stories .name,
ul.list.smart-story-bundles .name{
  font-weight: 500;
  flex-grow: 1;
}
ul.list.datasets .name .edit-title i {
  font-size: 18px;
}
ul.list.smart-stories li.smart-story .name .byline,
ul.list.smart-story-bundles li.smart-story-bundle .name .byline { font-size: 11px; }

ul.list.smart-stories:not(.inverted) li.smart-story span,
ul.list.smart-stories:not(.inverted) li.smart-story a,
ul.list.smart-story-bundles:not(.inverted) li.smart-story-bundle span,
ul.list.smart-story-bundles:not(.inverted) li.smart-story-bundle a { color: #656666; }

ul.list.smart-stories.inverted li.smart-story span,
ul.list.smart-stories.inverted li.smart-story a,
ul.list.smart-story-bundles.inverted li.smart-story-bundle span,
ul.list.smart-story-bundles.inverted li.smart-story-bundle a { color: #e8efef; }
ul.list.smart-stories.inverted li.smart-story a:hover,
ul.list.smart-story-bundles.inverted li.smart-story-bundle a:hover { color: #0dbfd6; }

.dataset-tile .actions,
ul.list.smart-stories .actions,
ul.list.smart-story-bundles .actions{
  flex-shrink: 0;
}

.dataset-tile .actions .mdl-menu .view-dataset{ display: none;}

.dataset-tile.placeholder .loading .message { margin-right: 10px; }
.dataset-tile.placeholder .loading .mdl-progress { width: 200px; }

.mdl-progress div.progressbar { background-color: #0dbfd6 !important; }
.mdl-progress div.bufferbar { background-color: #e8efef !important; background-image: none !important; }
.mdl-progress div.auxbar { background-color: #0dbfd6 !important; }

.dataset-tile.inactive .name { opacity: 0.5; }
.dataset-tile .star.is-starred:before { content: "star"; }
.dataset-tile .star:not(.is-starred):before { content: "star_border"; }
.dataset-tile .publish.is-public:before { content: "public"; }
.dataset-tile .publish:not(.is-public):before { content: "lock_outline"; }

.dataset-tile{ width: 100%; min-height: 0; margin-top: 20px; overflow: visible;}
.dataset-tile a .material-icons{ line-height: 32px; color: #656666;}
.dataset-tile a:hover .material-icons{ line-height: 32px; color: rgba(101, 102, 102, 0.5);}
.dataset-tile .header{ width:100%; padding: 16px; color: rgba(0,0,0,.81); font-weight: 400; justify-content: space-between;}
.dataset-tile .header .byline{ display: block; margin-top: 4px; color: rgba(0,0,0,.54); font-size: 12px;}
.dataset-tile .actions{ padding-right: 37px;}
.dataset-tile .actions a{ height: 32px; width: 32px; display: inline-block; text-align: center;}
.dataset-tile .mdl-card__supporting-text{ color: rgba(0, 0, 0, 0.8); width: 100%; max-height: 400px; overflow: hidden;}
.dataset-tile .mdl-card__supporting-text.expanded{ overflow: scroll;}

.dataset-tile .metadata-description[contenteditable=true]{ border: 1px solid rgba(0, 0, 0, 0.11); padding: 8px;}

.dataset-tile .card-tag:first-child{ margin-top: 16px;}

.dataset-tile .expand-me{ overflow: hidden; max-height: 0;
  -webkit-transition: max-height, 2s cubic-bezier(.03,.88,.09,.96);
  -moz-transition: max-height, 2s cubic-bezier(.03,.88,.09,.96);
  -ms-transition: max-height, 2s cubic-bezier(.03,.88,.09,.96);
  -o-transition: max-height, 2s cubic-bezier(.03,.88,.09,.96);
  transition: max-height, 2s cubic-bezier(.03,.88,.09,.96);}
.dataset-tile .expanded .expand-me{ overflow: visible; max-height: 9999px;
  -webkit-transition: max-height, 4s ease-in;
  -moz-transition: max-height, 4s ease-in;
  -ms-transition: max-height, 4s ease-in;
  -o-transition: max-height, 4s ease-in;
  transition: max-height, 4s ease-in;}

.dataset-tile .metadata-inputs{ display: flex; flex-wrap: wrap; margin-top: 16px;}
.dataset-tile .metadata-inputs > div{ width: calc(50% - 20px); margin-right: 20px;}

.dataset-tile .mdl-textfield{ padding-bottom: 8px;}
.dataset-tile .mdl-textfield .mdl-textfield__label{ font-size: 12px; top: 4px; color: #3f51b5;}
.dataset-tile .mdl-textfield .mdl-textfield__label:after{ bottom: 8px;}
.dataset-tile .mdl-textfield.is-disabled .mdl-textfield__input{ border-bottom: transparent; color: rgba(0,0,0,.87); padding-left: 0;}
.dataset-tile .mdl-textfield.is-disabled .mdl-textfield__label{ font-weight: 700; color: rgba(0,0,0,.4) !important; visibility: inherit;}

.dataset-tile table .mdl-textfield__input[disabled]{ border-bottom: none;}

.dataset-tile .dataset-table-placeholder{ margin-top: 20px;}
.dataset-tile .mdl-data-table th{ min-width: 150px;}

.dataset-tile .expanded-buttons,
.dataset-tile .editing-buttons{ display: none;}
.dataset-tile .expanded-buttons.expanded{ display: block; position: absolute; right: 8px; bottom: 8px;}

.dataset-tile .footer{ border-top: 0; justify-content: center;}
.dataset-tile .footer.in-edit-mode{ justify-content: flex-end;}
.dataset-tile .footer.in-edit-mode .expanded-buttons.expanded,
.dataset-tile .footer.in-edit-mode .view-dataset{ display: none;}

.dataset-tile .footer.in-edit-mode .editing-buttons{ display: block;}

a.icon-btn { display: inline-block; width: 26px; height: 26px; background-color: #0dbfd6; background-repeat: no-repeat; background-position: center center; background-size: 14px 14px; float: left; text-indent: -10000px; font-size: 1px; line-height: 1px;}
a.icon-btn:hover { background-color: #70d9e8;}

a.icon-btn.edit { background-image: url(../img/icons/pen.png);}
a.icon-btn.delete { background-image: url(../img/icons/trash.png);}

#welcome-screens dialog{ max-width: 90%; width: 600px;}
#welcome-screens .welcome-screen-image{ height: 280px; margin-bottom: 20px;}
#welcome-screens p{ min-height: 100px;}
#welcome-screens .nav-buttons .next, div[id^='welcome-screen'] .nav-buttons button.done{ float: right;}
@media screen and (max-width: 600px){
  #welcome-screens .welcome-screen-image{ height: 250px;}
}
@media screen and (max-width: 500px){
  #welcome-screens .welcome-screen-image{ height: 200px;}
}
@media screen and (max-width: 400px){
  #welcome-screens .welcome-screen-image{ height: 150px;}
  #welcome-screens p{ min-height: 170px;}
}


/* STORIES PAGE */
.story-tile-item{ background-color: #e8efef; width: 240px; height: 240px; margin: 10px; text-align: center; font-weight: 200; text-transform: uppercase; border-radius: 5px; overflow: hidden;}
.story-tile-item>a{ height: 100%; width: 100%; display: block; color: #777;}
.story-tile-item .story-cover{ overflow: hidden; width: 100%; height: 180px; width: 240px; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.story-tile-item .text-ctn{ position: relative; padding: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.story-tile-item .tile-controls{ position: absolute; right: 0; padding-top: 2px; background-color: rgba(255, 255, 255, .7); }
.story-tile-item:hover .tile-controls{ display: block;}
.tile-controls a.iron-icon-btn{ color: #284854;}
.tile-controls a.iron-icon-btn:hover{ color: #0dbfd6;}


/* DASHBOARD PAGE */
.options-dashboard li { float: left !important;}/* !important because the li gets overridden in metric.css*/
#chart-container.dashboard {overflow: visible !important;}
#chart-container.dashboard .metric-item .mdl-card__menu{ display: block;}
#chart-container.dashboard .metric-item .options-dashboard{ display: block;}
#chart-container.dashboard .pinning { display: none; }

input.no-foundation {
    /* un-foundation it */
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    background: none !important;
}
#edit-dashboard-dialog #delete-button {
    color: red !important;
}

/* EXPLORE PAGE */
.search-spinner{ margin-left: auto; margin-right: auto; display: none;}
.chart-container-message{ margin-left: auto; margin-right: auto; padding-left: 15px; width: 680px; color: #e8efef;}
.search-load-message.chart-container-message{ font-weight: 300; color: rgba(0,0,0,0.87);}

#autocomplete-note{ display: none; left: 5px; white-space: nowrap; font-size: 0.6em; position: absolute;  z-index: 9999;}

#dataset-explore-breadcrumbs{ opacity: 0; margin: 0 auto; padding: 10px; text-decoration: none; color: #536D76; width: calc(80%); text-align: center;}

#dataset-explore-message .mdl-navigation .mdl-navigation__link {color: #e8efef;}

@media screen and (min-width: 1130px){
  .chart-container-message{ width: 1020px;}
}
@media screen and (min-width: 1470px){
  .chart-container-message{ width: 1360px;}
}

/*LANDING PAGE */
.profile-picture-edit{ text-align: center; margin-bottom: 14px; position: relative;}
.profile-picture-edit .profile-picture{ margin-left: auto; margin-right: auto; width:140px; height: 140px; border-radius: 140px; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.profile-picture-edit i.material-icons{ position: absolute; bottom: 0; right: 10%; color: rgba(0, 0, 0, 0.87); cursor: pointer;}
.profile-picture-edit i.material-icons:hover{ color: #0dbfd6;}
.profile-picture-edit input[type=file]{ display: none;}
.welcome-text{ text-align: center; color: rgba(0, 0, 0, 0.87); font-weight: 200; font-size: 14px;}
.welcome-text .uppercase{ text-transform: uppercase;}
.welcome-text .button{ display: block; margin-top: 28px;}

.notification-box{ width: 100%; background-color: #ffffff; border-radius: 4px; max-height: 500px; overflow-y: auto; overflow-x: hidden;}
.notification-box::-webkit-scrollbar{ -webkit-appearance: none; width: 10px;}
.notification-box::-webkit-scrollbar-thumb { border-radius: 7px; background-color: rgba(0,0,0,.5); box-shadow: 0 0 1px rgba(255,255,255,.5); border: 2px solid rgba(0, 0, 0, 0); background-clip: padding-box;}
.notification-box > div{ min-height: 85px; position: relative;}
.notification-box > div.viewed { background-color: #c3c9c7;}
.notification-box > div .content-wrapper{ width: calc(100% - 180px); padding: 10px;}
.notification-box > div .content-wrapper .icon{ position: absolute; height: 65px; width: 65px; border-radius: 65px; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.notification-box > div .content-wrapper .content{ font-size: 14px; line-height: 1.2; margin-left: 75px;}
.notification-box > div .content-wrapper .content h4{ font-size: 14px; margin: 0; text-transform: uppercase; margin-bottom: 5px;}
.notification-box > div .content-wrapper .content .description{ min-height: 2.4em;}
.notification-box > div .content-wrapper .content .posted-date{ font-size: 11px; margin-top: 10px;}
.notification-box > div .controls{ position: absolute; right: 0; top: 0; width: 180px; height: 100%;}
.notification-box > div .controls .button{ top: 50%; position: absolute; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 122px; left: 0;}
.notification-box > div .controls .button i.material-icons{ font-size: 11px; position: relative; top: 2px;}
.notification-box > div .controls > i.material-icons{ position: absolute; right: 18px; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer;}

.notification-placeholder{ width: 100%; border: 2px dashed #e8efef; border-radius: 4px; padding: 20px; height: 200px; color: #e8efef;}

/* TEAM PAGE */
.datahome-image-edit input[type=file]{ display: none;}
.datahome-image-edit .filename{ color: rgba(0, 0, 0, 0.87);}

#team-settings .mdl-textfield__input,
#team-settings .mdl-textfield__label,
#team-header .mdl-textfield__input,
#team-header .mdl-textfield__label,
#team-settings .section-header{
  color: rgba(0, 0, 0, 0.87);
}

#team-settings .mdl-textfield__input,
#team-header .mdl-textfield__input {
  border-bottom: 1px solid #2ba6cb;
  border-radius: 0;
}

#team-header div.team-logo {
  display: table-cell;
  width: 200px;
  height: 200px;
  background-color: #a8a8a8;
  text-align: center;
  vertical-align: middle;
  color: white;
}

.team-logo-container {
  position: relative;
}

.team-logo-container .edit-team-logo {
  background-color: transparent;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: pointer;
}

.team-logo-container .edit-team-logo:hover {
  background-color: transparent;
}

#team-settings .mdl-grid:first-of-type {
  max-width: 90vw;
}

.all-teams {
  width: 100%;
  color: red;
  border-bottom: 2px solid red;
  margin-bottom: 30px;
  padding-bottom: 5px;
}

.federated-teams-list {
  width: 100%;
  height: 200px;
  min-height: 200px;
  overflow: scroll;
  background-color: #536d76;
  border: #e8efef solid 1px;
}

.federated_team {
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 26px;
  color: #e8efef;
}

.federated_team.selected {
  background: #e8efef;
  color: #000000;
}

#topic-list {
  width: 100%;
  height: 200px;
  min-height: 200px;
  overflow: scroll;
  border: rgba(0, 0, 0, 0.87) solid 1px;
  margin: 0;
}

#topic-list .topic {
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 26px;
  color: #e8efef;
}

#topic-items-list li {
  padding: 0 5px 0 5px;
}

#topic-items-list li.unpublished .name::after {
  content: " (Unpublished)";
  color: #b52735;
}

#topic-list li:first-child a.topic-up{
  display: none;
}

#topic-list li:last-child a.topic-down{
  display: none;
}

#pick-story-for-topic,
#pick-dashboard-for-topic {
  margin-bottom: 10px;
}

.header#team-header { background: #fff; padding-top: 30px }

.mdl-tabs__tab{ font-weight: 400;}
.mdl-tabs.is-upgraded .mdl-tabs__tab { color: #e8efef;}
.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active { color: #ecec74;}
.mdl-tabs.is-upgraded .mdl-tabs__tab:focus { outline: 0; }  /* de-foundation */
.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after { background: #ecec74;}

#team-settings.mdl-tabs.is-upgraded .mdl-tabs__tab { color: rgba(0, 0, 0, 0.87);}
#team-settings.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active { color: #d81b60;}
#team-settings.mdl-tabs.is-upgraded .mdl-tabs__tab:focus { outline: 0; }  /* de-foundation */
#team-settings.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after { background: #d81b60;}

.mdl-tabs#team-settings .mdl-tabs__tab-bar { justify-content: flex-start; background: #ffffff; }
.mdl-tabs#team-settings .mdl-tabs__panel { margin-top: 20px; }

#tag-create{ display: flex; justify-content: space-between; align-items: center;}
#tag-create-options, #tag-edit-options{ display: flex;}

.tag-list{ padding: 0;}
.tag-list-item{ display: flex; justify-content: space-between; align-items: center;}
.tag-list-item .tag-name{ display: inline-block; padding: 12px 24px; border-radius: 24px; color: #fff;}
.tag-list-item .tag-options{ display: flex;}
.tag-list-item .tag-options .mdl-list__item{ font-size: 14px;}
.tag-list-item .tag-options  .mdl-list__item .mdl-list__item-icon{ margin-right: 12px;}

.tag-colorpicker-container{ display: flex; align-items: center; position: relative;}
.tag-colorpicker-container .tag-colorpicker{ height: 24px; width: 24px; border-radius: 24px; margin-left: 32px; cursor: pointer;}
.tag-colorpicker-container .hex-label{ margin-left: 8px;}

.tag-filter-list{ max-height: 0; background-color: transparent; position: absolute; z-index: 5; border: 1px solid transparent; overflow: auto; color: rgba(0, 0, 0, 0.8);}
.tag-filter-list.is-visible{ background-color: #fff; border-color: #ccc; max-height: 400px;}

.tag-filter-list .tag-filter-item{ cursor: pointer; padding: 0 30px 0 10px; line-height: 42px; height: 42px;}

.tag-filter-list .tag-filter-item .selected-status{ visibility: hidden; vertical-align: middle; font-size: 18px;}
.tag-filter-list .tag-filter-item.selected .selected-status{ visibility: visible;}
.tag-filter-list .tag-filter-item .color-block{ width: 14px; height: 14px; display: inline-block; border-radius: 3px; margin-right: 6px; margin-left: 6px; vertical-align: middle;}
.tag-filter-list .tag-filter-item .tag-text{ font-size: 14px;}

.select-tag-filters{ display: flex;}
.select-tag-filters .tag-filter-button{ margin-right: 20px; color: #fff;}
.select-tag-filters .card-tag{ margin-top: 3px;}



.mdl-list .mdl-list__item .mdl-list__item-primary-content { color: rgba(0, 0, 0, 0.87); }
.mdl-list .mdl-list__item .mdl-list__item-primary-content .mdl-list__item-sub-title { color: rgba(0, 0, 0, 0.5);}
.mdl-list .mdl-list__item { border-bottom: 1px solid rgba(0, 0, 0, 0.25); }
.mdl-list .mdl-list__item:last-child { border-bottom: none; }
.mdl-list .mdl-list__item .mdl-list__item-secondary-action span { color: rgba(0, 0, 0, 0.87); }
.mdl-list .mdl-list__item .mdl-list__item-secondary-action a { color: rgba(0, 0, 0, 0.87); }
.mdl-list .mdl-list__item .mdl-list__item-secondary-action a:hover { color: #ecec74; }

ul.mdl-list li.inactive .mdl-list__item-primary-content { opacity: 0.5; }

/* CHART PAGE */
form.custom .custom.dropdown{ background: transparent; border: 0;}
form.custom .custom.checkbox{ border-radius: 4px;}
.field-divider { border-bottom: 1px solid #ccc; margin-bottom: 19px; display: none;}

#chart-container{ margin-left: auto; margin-right: auto;}

.tiles-container .metric-item .mdl-card__menu{ display: block;}
.tiles-container .metric-item .options-datahome{ display: block;}

.metric .mdl-card__menu .mdl-menu__item { width: 100%; }
.metric-item .mdl-card { overflow: visible; }
.mdl-card .edit-tags{ display: none;}

.metric-content { position: relative; }

#export-modal .title label, #embed-modal .title label,
#export-modal .title input, #embed-modal .title input,
#export-modal .dimensions input, #embed-modal .dimensions input { width: auto; display: inline; border-radius: 4px;}

#export-modal .title input, #embed-modal .title input {
  width: 95%;
}

#export-modal .chart-placeholder > div{ pointer-events: none;}

#export-modal .chart text { cursor: default !important; }
#export-modal .chart, #embed-modal .chart{ max-width: 100%; height: calc(80vh - 120px);}
#export-modal .options p, #embed-modal .options p { margin: 0 0 10px 0;}
#color-modal .chart{ max-width: 100%; height: calc(70vh - 100px);}
#icon-modal .chart{ max-width: 100%; height: calc(70vh - 100px);}

#embed-modal .metric .options { display: none;}
#embed-modal .options .left { float: left;}
#embed-modal .options .right { float: left; width: 50%;}

#embed-modal textarea { height: 200px; border-radius: 4px;}
#export-modal .legend-position label{ padding-left: 1.5em;}

#addhover-modal{ max-width: 900px;}
#addhover-modal .chart{ max-width: 100%; height: 450px;}
#addhover-modal .large-4{ height: calc(80vh - 100px); overflow-x: hidden; overflow-y: scroll;}
#addhover-modal .large-4::-webkit-scrollbar{ -webkit-appearance: none; width: 10px;}
#addhover-modal .large-4::-webkit-scrollbar-thumb { border-radius: 7px; background-color: rgba(0,0,0,.5); box-shadow: 0 0 1px rgba(255,255,255,.5); border: 2px solid rgba(0, 0, 0, 0); background-clip: padding-box;}
#addhover-modal select{ /*background-color: transparent; border-width: 0; border-color: #999; border-bottom-width: 1px;*/ margin: 0;}
#addhover-modal .indicator-sections{ padding: 14px 0;}
#addhover-modal .variable-section select{ width: 40%; padding-right: 20px;}
#addhover-modal .variable-section span{ width: 16%; display: inline-block; font-size: 14px;}
#addhover-modal .variable-section, #addhover-modal .add-new-section{ padding: 14px 0; border-top: 1px solid #fff; text-align: center;}

dialog:not(#chart-edit) .footer.mdl-card__actions{ display: none;}

dialog#pick-chart {
  width: 80vw; min-height: 300px; height: 80vh; position: fixed; top: 10vh;
}
dialog#pick-chart .footer.mdl-card__actions{ display: inherit;}
dialog#pick-chart .footer.mdl-card__actions .options-story { display: block; }
dialog#pick-chart .footer.mdl-card__actions .view-dataset { display: none; }
dialog#pick-chart div.main > * { flex-shrink: 0; }
dialog#pick-chart div.main {
  display: flex; flex-direction: column; align-items: stretch; height: 100%;
}
dialog#pick-chart #chart-container {
  flex-grow: 1;
  flex-shrink: 1;
  overflow-y: scroll !important;
}

.tile { z-index: 5;  } /* lower than #top-menu */

/*PROFILE PAGE*/
.danger { color: red; }
.button-cluster{ text-align: right;}
.button-cluster .button{ margin-left: 12px;}
.button-cluster.text-right{ text-align: right; padding-top: 14px;}

.page-nav{ visibility: hidden;}

.small-note{ font-size: 0.8em; padding-top: 0.5em; color: #666; font-style: italic;}

form.custom .custom.checkbox.checked:before{
  content: "\2713" !important;
  margin-top: 0;
}

@media print{
    #top-menu{ display: none;}
    #main-page{ padding-left: 0;}
    #deep-dive .controls { display: none !important;}
}


/* Empty page -- used by Dashboard/Story */
div.empty { text-align: center;}
div.empty h1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 18pt;
    font-weight: 300;
}

/* Profile page */
.form-item label {
  margin-top: 1em;
}
.form-item .description {
  font-size: 12px;
  color: #666;
  margin-top: -14px;
}

/* Force scrollbars on, for drop-downs in Webkit.
   Based on: <http://simurai.com/blog/2011/07/26/webkit-scrollbar/>
   and: <http://stackoverflow.com/a/17361941/4966893> */
div.dropdown ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px;
}
div.dropdown ::-webkit-scrollbar-thumb {
    border-radius: 7px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);

    border: 2px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
}

/* DIALOG STYLES */
dialog{ border: none; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); border-radius: 2px; padding: 24px;}
dialog::backdrop{ background-color: rgba(0, 0, 0, 0.5);} /* native */
dialog + .backdrop{ background-color: rgba(0, 0, 0, 0.5);} /* polyfill */
dialog .actions{ display: flex; flex-direction: row-reverse;}
dialog .actions button{ margin: 5px;}
dialog .bottom-controls{ position: absolute; bottom: 14px; right: 14px;}
dialog.large-with-chart{ width: 90vw; height: 80vh; top: 10vh; position: fixed; max-width: none;}
dialog.large-with-chart .mdl-dialog__content,
dialog.large-with-chart .mdl-grid{ padding: 0; max-width: none;}
dialog.large-with-chart .mdl-cell{ margin: 0 8px;}
dialog.large-with-chart .chart-placeholder.adjustable-size{ overflow: scroll; height: calc(80vh - 48px);}
dialog.large-with-chart .chart-placeholder.adjustable-size::-webkit-scrollbar{ -webkit-appearance: none; width: 10px;}
dialog.large-with-chart .chart-placeholder.adjustable-size::-webkit-scrollbar-thumb{ border-radius: 7px; background-color: rgba(0,0,0,.5); box-shadow: 0 0 1px rgba(255,255,255,.5); border: 2px solid rgba(0, 0, 0, 0); background-clip: padding-box;}

dialog .mdl-button--accent.mdl-button--accent.mdl-button--fab{
  background-color: #d81b60;
}
dialog .mdl-button--accent.mdl-button--accent{
  color: #d81b60;
}

@media screen and (max-width: 725px){
  dialog.large-with-chart{ height: initial; position: absolute; margin-bottom: 10vh;}
}

dialog#object-edit-tags{ max-width: 800px; width: 90%;}
dialog#object-edit-tags .tag-list{ margin-bottom: 20px;}

dialog#object-edit-tags .tag-list-item{ position: relative; margin-bottom: 20px; margin-right: 8px; border-radius: 30px; height: 30px; overflow: hidden; cursor: pointer;}
dialog#object-edit-tags .tag-list-item .preview{ text-transform: capitalize; height: 30px; line-height: 30px; width: 30px; text-align: center; color: #ffffff; border-radius: 30px; display: inline-block; position: absolute; top: 0; cursor: pointer;} /* figure out best way to combine this and .card-tag styles */

dialog#object-edit-tags .tag-list-item .description{ display: inline-block; padding-left: 40px; line-height: 30px; background-color: #cecece; width: 100%;}
dialog#object-edit-tags .tag-list-item.selected .description{ background-color: transparent; color: #ffffff;}

/* New Smart Story Styles */
#new-smart-story-dialog ul{ list-style: none;}
#new-smart-story-dialog p, #new-smart-story-dialog li{ font-size: 12px;}
#new-smart-story-dialog .mdl-card{ height: 300px; width: 100%;}
#new-smart-story-dialog .mdl-card .mdl-card__title{ background-position: center center; background-repeat: no-repeat; background-size: cover;}

i.smart-story-template {
  color: #2ba6cb;
}

.smart-story-template-warning {
  position: fixed;
  background-color: #b52735;
  width: 100%;
  z-index: 9999;
  display: flex;
  justify-content: center;
  color: white;
  height: 20px;
}

/* STORY TEASER STYLES */
.story-teaser{ width: 80% !important; max-width: 800px; margin-left: auto; margin-right: auto; margin-bottom: 20px;}
.story-teaser .mdl-card__title{ background: rgba(255, 255, 255, 0.9); display: flex; align-items: baseline;}
.story-teaser .mdl-card__title h1{ flex: 1;}
.story-teaser .mdl-card__title p{ flex: 1; text-align: right;}

/* thing for header menu */
#header form.custom .custom.dropdown{ border-bottom: 1px solid #e8efef;}
#header form.custom .custom.dropdown .current{ color: #e8efef;}
#header form.custom .custom.dropdown .selector:after{ border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #e8efef;}
#header form.custom .custom.dropdown:hover a.selector:after,
#header form.custom .custom.dropdown.open a.selector:after{ border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #ecec74}
#header form.custom .custom.dropdown.open.large ul{ min-width: 0; width: 100%;}
#header form.custom .custom.dropdown ul li:hover{ background-color: #ecec74;}
#header form.custom .custom.dropdown ul li.selected{ background: rgba(236, 236, 116, 0.5);}

/* re-de-foundation (see button.mdl-button:hover, above) */
#fab_ctn > #fab_btn { color: #fff; background-color: #eee; right: 45px;}
.mdl-button--fab_flinger-container.is-showing-options .mdl-button--fab_flinger-options{ right: 45px;}
button.mdl-button--fab:hover { background-color: #eee; }
button.mdl-button--fab { background-color: #eee; color: #333; }

.mdl-layout__drawer .team-logo{ margin-top: 16px; width: calc(100% - 32px);}