/* ----------- MATERIAL DESIGN ICONS ----------- */

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.material-icons.md-52 { font-size: 52px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

/* Rules for using icons as customized color*/
.material-icons.orange600 { color: #FB8C00; }

/* ----------- HIPOK COLORS  ----------- */
.light-blue { color: rgb(41, 128, 185); } /* #2980B9 */
.medium-blue { color: rgb(19, 59, 85); } /* #133b55 */
.dark-blue { color: rgb(20, 22, 43); } /* #14162B */
.light-red { color: rgb(238, 126, 114); } /* #EE7E72 */
.red { color: rgb(231, 76, 60); } /* #E74C3C */
.light-green { color: rgb(45, 161, 100); } /* #2DA164 */

.background-light-blue { background-color: rgb(41, 128, 185); color: white;}
.background-medium-blue { background-color: rgb(19, 59, 85); color: white;}
.background-dark-blue { background-color: rgb(20, 22, 43); color: white;}
.background-light-red { background-color: rgb(238, 126, 114); color: white;}
.background-red { background-color: rgb(205, 41, 35); color: white; }
.background-light-green { background-color: rgb(45, 161, 100); color: white; }

/* ----------- GENERAL APP  ----------- */
body { font-family: Roboto; }
.centered { text-align: center; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 5; -webkit-box-orient: vertical; white-space: nowrap; } /* display: -webkit-box; */


md-input-container .md-errors-spacer { min-height: 0; } /* fix vertical alignement pb */

.table { width: 100%; max-width: 100%; margin-bottom: 2rem;  }
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td { font-size: 12pt; text-align: left; vertical-align: middle; height: 24pt; border-top: 0px; color: rgb(33, 33, 33); border-bottom: 1px solid rgb(240,240,240); }
.table > thead > tr > th { font-size: 13pt; font-weight: normal; border-top: 0px; color: rgba(0,0,0, 0.54)} /* color: rgb(192,192,192) */
.table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td { border-top: 0px; }

.table > thead > tr > th.text { text-align: left; }
.table > thead > tr > th.numeric { text-align: right; padding-right: 5px; }

.table > tbody > tr > td.text { text-align: left; }
.table > tbody > tr > td.numeric { text-align: right; padding-right: 5px; }

.table > tbody > tr:hover { background-color: #EEEEEE; }

.active-menu { background-color: rgba(63, 81, 181, 0.10); }

/* ------------- TOP BAR ------------- */
.md-button.md-icon-button.logo-button { padding: 0px; border-radius: 0px;}

.md-button.md-icon-button.logo-button > img { height: 40px; width: 40px; }

/* --------- LEFT AND TOP MENU --------- */
#left-menu md-list-item.md-no-proxy.md-button, #left-menu md-list-item .md-no-style.md-button { text-transform: uppercase; }
#left-menu md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon) { margin-top: 0px;}

.setting-menu { background: white; border-radius: 4px;
  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
   width: 256px; max-height: 200px; overflow: auto; }
.setting-menu-item { align-items: center; cursor: pointer; display: flex; height: 48px; padding: 0 16px; position: relative; transition: background 0.15s linear; width: auto; }
.setting-menu-item:hover, .setting-menu-item:focus { background-color: rgb(238, 238, 238); }
.setting-menu-item.selected { color: rgb(41, 128, 185); }

/* ------------- LOGIN PAGE ------------ */
md-card.card-login { margin: auto; }

/* ----------- USER LISTING ------------ */
#users-list { width: 100%; }
#users-list > md-list-item.md-no-proxy.md-button, #users-list > md-list-item .md-no-style.md-button { text-transform: none; }
.floating-pagination.md-subheader .md-subheader-inner { padding: 0px; }

.floating-button { position: fixed; bottom: 26px; right: 26px; }
/*.floating-pagination { position: fixed; bottom: 0px; width: inherit; box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 50px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); }*/
#search-sidenav md-input-container { margin-top: 30px; }

/* --------- USER PROFILE PAGE --------- */
.table > tbody > tr.header:hover { background-color: inherit; }

.state-menu { background: white; border-radius: 4px;
  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
   width: 256px; max-height: 200px; overflow: auto; }
.state-menu-item { align-items: center; cursor: pointer; display: flex; height: 48px; padding: 0 16px; position: relative; transition: background 0.15s linear; width: auto; }
.state-menu-item:hover, .state-menu-item:focus { background-color: rgb(238, 238, 238); }
.state-menu-item.selected { color: rgb(41, 128, 185); }

/* ----------- METRICS PAGE ----------- */
.little-info-card { text-transform: uppercase; line-height: 1;}
.metrics-number { font-size: 38px; }

.chart { width: 100%; height: 100%}
#connection-chart-card,
#registration-chart-card,
#profession-chart-card,
#message-chart-card { min-height: 350px; }
#connection-chart-card md-card-title,
#registration-chart-card md-card-title,
#profession-chart-card md-card-title,
#message-chart-card md-card-title { max-height: 60px; }

#registration-chart-card md-card-action,
#message-chart-card md-card-action { max-height: 70px; }
#registration-chart-card md-card-action > md-input-container,
#message-chart-card md-card-action > md-input-container { margin-bottom: 0; }
#registration-chart-card md-card-action,
#message-chart-card md-card-action { padding-bottom: 0; }
#registration-chart-card md-card-content,
#message-chart-card md-card-content { padding-top: 0; }

#profession-chart-card { min-height: 728px; }
.profession-chart { background-color: inherit; }
.profession-chart #vertical-container { height: 600px; width: 100%; border: none; }
.profession-chart .repeated-item { border-bottom: 1px solid #ddd; box-sizing: border-box; height: 40px; padding-top: 10px; }
.profession-chart md-content { margin: 16px; }
.profession-chart md-virtual-repeat-container { border: solid 1px grey; }
.profession-chart .md-virtual-repeat-container .md-virtual-repeat-offsetter div { padding-left: 5px; padding-right: 5px; }

.profession-menu { background: white; border-radius: 4px;
  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
   width: 256px; max-height: 200px; overflow: auto; }
.profession-menu-item { align-items: center; cursor: pointer; display: flex; height: 48px; padding: 0 16px; position: relative; transition: background 0.15s linear; width: auto; }
.profession-menu-item:hover, .profession-menu-item:focus { background-color: rgb(238, 238, 238); }
.profession-menu-item.selected { color: rgb(41, 128, 185); }

/* ------------ FEEDBACKS ------------- */
#articles-List > md-list-item.md-no-proxy.md-button, #articles-List > md-list-item .md-no-style.md-button { text-transform: none; }
#article_detail {
    padding-left: 50px;
    padding-right: 50px;
}
#article_create {
    padding-left: 50px;
    padding-right: 50px;
}

#planning {
    padding-left: 50px;
    padding-right: 50px;
}

#event_create {
    padding-left: 50px;
    padding-right: 50px;
}


/** --- UI ELEMENTS **/
.page-loader{
    position:absolute;
    right:10px;
    top:20px;
}

table.admin{
    border:1px solid #ccc;
}

table.admin td{
    padding:10px;
    vertical-align: top;
    border:1px solid #ccc;
}

table.admin td.label{
    background:#ffffff;
}

md-input-container{
    margin-bottom:30px !important;
}

h2{margin-bottom:20px;line-height: 20px;}