/*
 * Copyright (C) 2000 - 2025 Silverpeas
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * As a special exception to the terms and conditions of version 3.0 of
 * the GPL, you may redistribute this Program in connection with Free/Libre
 * Open Source Software ("FLOSS") applications as described in Silverpeas's
 * FLOSS exception.  You should have received a copy of the text describing
 * the FLOSS exception, and it is also available here:
 * "https://www.silverpeas.org/legal/floss_exception.html"
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

@import "components.css";
@import "animations.css";

/* Globals */
/* Font
-----------------------------------------------------------------------------------------------------------*/
html {
  font-size: 100%;
  height: 100%;
  scrollbar-width: none;
}

body {
  font-size: 12pt;
  line-height: 1em;
  font-family: Open Sans, sans-serif;
  overscroll-behavior-y: contain;

  --main-bg-color: #ececec;
  --main-color : #7eb73b;
  --main-border-color: #70a72e;
  --main-font-color: #333333;
  --white: #FFFFFF;
  --black: #000000;
  --main-flashy-color: #ec8001;
  --secondary-color:#56a3d9;
}

body.ui-panel-wrapper {
  padding: 44px 0;
  margin: 0;
  background-color: var(--main-bg-color);
}

input, select, textarea, button, .ui-btn {
  font-size: 1em;
}

legend, .ui-input-text input, .ui-input-search input {
  color: inherit;
}

/* Form labels (overrides font-weight bold in bars, and mini font-size) */
.ui-mobile label, div.ui-controlgroup-label {
  font-weight: normal;
  font-size: 1.2em;
}

.freeze {
  pointer-events: none;
  user-select: none;
}

/* Separators
-----------------------------------------------------------------------------------------------------------*/
/* Field contain separator (< 28em) */
.ui-field-contain {
  border-bottom-color: #828282;
  border-bottom-color: rgba(0, 0, 0, .15);
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

/* Table opt-in classes: strokes between each row, and alternating row stripes */
/* Classes table-stroke and table-stripe are deprecated in 1.4. */
.table-stroke thead th, .table-stripe thead th, .table-stripe tbody tr:last-child {
  border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.table-stroke tbody th, .table-stroke tbody td {
  border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback  */
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.table-stripe.table-stroke tbody tr:last-child th, .table-stripe.table-stroke tbody tr:last-child td {
  border-bottom: 0;
}

.table-stripe tbody tr:nth-child(odd) td, .table-stripe tbody tr:nth-child(odd) th {
  background-color: #eeeeee; /* non-RGBA fallback  */
  background-color: rgba(0, 0, 0, .04);
}

/* Buttons
-----------------------------------------------------------------------------------------------------------*/
.ui-btn, label.ui-btn {
  font-weight: bold;
  border-width: 1px;
  border-style: solid;
}

.ui-btn:link {
  text-decoration: none !important;
}

.ui-btn-active {
  cursor: pointer;
}

/* Corner rounding
-----------------------------------------------------------------------------------------------------------*/
/* Class ui-btn-corner-all deprecated in 1.4 */
.ui-corner-all {
  -webkit-border-radius: 0.4em /*{global-radii-blocks}*/;
  border-radius: 0.4em /*{global-radii-blocks}*/;
}

/* Buttons */
.ui-btn-corner-all, .ui-btn.ui-corner-all, /* Slider track */
.ui-slider-track.ui-corner-all, /* Flipswitch */
.ui-flipswitch.ui-corner-all,
  /* Count bubble */
.ui-li-count {
  -webkit-border-radius: 0.4em /*{global-radii-buttons}*/;
  border-radius: 0.4em /*{global-radii-buttons}*/;
}

/* Icon-only buttons */
.ui-btn-icon-notext.ui-btn-corner-all, .ui-btn-icon-notext.ui-corner-all {
  -webkit-border-radius: 1em;
  border-radius: 1em;
}

/* Radius clip workaround for cleaning up corner trapping */
.ui-btn-corner-all, .ui-corner-all {
  -webkit-background-clip: padding;
  background-clip: padding-box;
}

/* Popup arrow */
.ui-popup.ui-corner-all > .ui-popup-arrow-guide {
  left: 0.4em /*{global-radii-blocks}*/;
  right: 0.4em /*{global-radii-blocks}*/;
  top: 0.4em /*{global-radii-blocks}*/;
  bottom: 0.4em /*{global-radii-blocks}*/;
}

/* Shadow
-----------------------------------------------------------------------------------------------------------*/
.ui-shadow {
  -webkit-box-shadow: 0 1px 0 /*{global-box-shadow-size}*/ rgba(255, 255, 255, 0.2) /*{global-box-shadow-color}*/;
  -moz-box-shadow: 0 1px 0 /*{global-box-shadow-size}*/ rgba(255, 255, 255, 0.2) /*{global-box-shadow-color}*/;
  box-shadow: 0 1px 0 /*{global-box-shadow-size}*/ rgba(255, 255, 255, 0.2) /*{global-box-shadow-color}*/;
}

.ui-shadow-inset {
  -webkit-box-shadow: inset 0 1px 0 /*{global-box-shadow-size}*/ rgba(255, 255, 255, 0.2) /*{global-box-shadow-color}*/;
  -moz-box-shadow: inset 0 1px 0 /*{global-box-shadow-size}*/ rgba(255, 255, 255, 0.2) /*{global-box-shadow-color}*/;
  box-shadow: inset 0 1px 0 /*{global-box-shadow-size}*/ rgba(255, 255, 255, 0.2) /*{global-box-shadow-color}*/;
}

.ui-overlay-shadow {
  -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, .6);
  -moz-box-shadow: 0 0 12px rgba(0, 0, 0, .6);
  box-shadow: 0 0 12px rgba(0, 0, 0, .6);
}

/* Icons
-----------------------------------------------------------------------------------------------------------*/
.ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, .ui-btn-icon-notext:after {
  background: transparent url('icons/arrow_forward.svg') right;
  content: " ";
}

/* Alt icons */
.ui-alt-icon.ui-btn:after, .ui-alt-icon .ui-btn:after, html .ui-alt-icon.ui-checkbox-off:after, html .ui-alt-icon.ui-radio-off:after, html .ui-alt-icon .ui-checkbox-off:after, html .ui-alt-icon .ui-radio-off:after {
  background-color: #313131 /*{global-icon-color}*/;
  background-color: rgba(0, 0, 0, .15);
}

/* No disc */
.ui-nodisc-icon.ui-btn:after, .ui-nodisc-icon .ui-btn:after {
  background-color: transparent;
}

/* Icon shadow */
.ui-shadow-icon.ui-btn:after, .ui-shadow-icon .ui-btn:after {
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .4)
  /*{global-icon-shadow}*/;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .4)
  /*{global-icon-shadow}*/;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) /*{global-icon-shadow}*/;
}

/* Checkbox and radio */
.ui-btn.ui-checkbox-off:after, .ui-btn.ui-checkbox-on:after, .ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after {
  display: block;
  width: 18px;
  height: 18px;
  margin: -9px 2px 0 2px;
}

.ui-checkbox-off:after, .ui-btn.ui-radio-off:after {
  filter: Alpha(Opacity=30);
  opacity: .3;
}

.ui-btn.ui-checkbox-off:after, .ui-btn.ui-checkbox-on:after {
  -webkit-border-radius: .1875em;
  border-radius: .1875em;
}

.ui-radio .ui-btn.ui-radio-on:after {
  background-image: none;
  background-color: var(--white);
  width: 8px;
  height: 8px;
  border-width: 5px;
  border-style: solid;
}

.ui-alt-icon.ui-btn.ui-radio-on:after, .ui-alt-icon .ui-btn.ui-radio-on:after {
  background-color: var(--black);
}

/* Loader */
.ui-icon-loading {
  background: url("images/ajax-loader.gif");
  background-size: 2.875em 2.875em;
}

/* Swatches */
/* A
-----------------------------------------------------------------------------------------------------------*/
/* Bar: Toolbars, dividers, slider track */
.ui-bar-a, .ui-page-theme-a .ui-bar-inherit, html .ui-bar-a .ui-bar-inherit, html .ui-body-a .ui-bar-inherit, html body .ui-group-theme-a .ui-bar-inherit {
  background-color: #313131 /*{a-bar-background-color}*/;
  border-color: var(--black) /*{a-bar-border}*/;
  color: #fff /*{a-bar-color}*/;
  font-weight: bold;
}

.ui-bar-a {
  border-width: 1px;
  border-style: solid;
}

/* Page and overlay */
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
  background-color: var(--main-bg-color) /*{a-page-background-color}*/;
  border-color: #bbbbbb /*{a-page-border}*/;
  color: var(--main-font-color) /*{a-page-color}*/;
}

/* Body: Read-only lists, text inputs, collapsible content */
.ui-body-a, .ui-page-theme-a .ui-body-inherit, html .ui-bar-a .ui-body-inherit, html .ui-body-a .ui-body-inherit, html body .ui-group-theme-a .ui-body-inherit, html .ui-panel-page-container-a {
  background-color: var(--main-bg-color) /*{a-body-background-color}*/;
  border-color: #dddddd /*{a-body-border}*/;
  color: var(--main-font-color) /*{a-body-color}*/;
}

.ui-page-theme-a .ui-body-inherit.filter-contacts {
  background-color: var(--white);
  background-image: url('icons/search.svg');
  background-repeat: no-repeat;
}

.ui-page-theme-a textarea.ui-body-inherit {
  background-color: var(--white) /*{a-body-background-color}*/;
}

/* Links */
.ui-page-theme-a a, html .ui-bar-a a, html .ui-body-a a, html body .ui-group-theme-a a {
  color: #3388cc /*{a-link-color}*/;
  font-weight: normal;
}

.ui-page-theme-a a:active, html .ui-bar-a a:active, html .ui-body-a a:active, html body .ui-group-theme-a a:active {
  color: #005599 /*{a-link-active}*/;
}

/* Button up */
.ui-page-theme-a .ui-btn, html .ui-bar-a .ui-btn, html .ui-body-a .ui-btn, html body .ui-group-theme-a .ui-btn, html head + body .ui-btn.ui-btn-a,
  /* Button visited */
.ui-page-theme-a .ui-btn:visited, html .ui-bar-a .ui-btn:visited, html .ui-body-a .ui-btn:visited, html body .ui-group-theme-a .ui-btn:visited, html head + body .ui-btn.ui-btn-a:visited {
  background-color: #f6f6f6 /*{a-bup-background-color}*/;
  border-color: #dddddd /*{a-bup-border}*/;
  color: var(--main-font-color) /*{a-bup-color}*/;
}

/* Button up */
html .ui-header .ui-btn {
  background-color: #2c2c2c;
  background: linear-gradient(#4c4c4c, #2c2c2c) repeat scroll 0 0 #2c2c2c;
  border-color: #090909 /*{a-bup-border}*/;
  color: var(--white) /*{a-bup-color}*/;
  text-shadow: 0 1px 0 var(--black);
}

html .ui-header .ui-btn:hover {
  background-color: #4c4c4c;
  background: linear-gradient(#2c2c2c, #4c4c4c) repeat scroll 0 0 #4c4c4c;
  border-color: #090909 /*{a-bup-border}*/;
  color: var(--white) /*{a-bup-color}*/;
  text-shadow: 0 1px 0 var(--black);
}

html .ui-controlgroup-controls .ui-btn-up-c {
  background-color: #EEEEEE
  background: linear-gradient(var(--white), #F1F1F1) repeat scroll 0 0 #EEEEEE;
}

.ui-controlgroup, fieldset.ui-controlgroup {
  text-align: center;
  width: 100%;
}

/* Button down */
.ui-page-theme-a .ui-btn:active, html .ui-bar-a .ui-btn:active, html .ui-body-a .ui-btn:active, html body .ui-group-theme-a .ui-btn:active, html head + body .ui-btn.ui-btn-a:active, html .ui-controlgroup-controls .ui-btn-up-c.ui-btn-active {
  background-image: none;
  background-color: #e8e8e8 /*{a-bdown-background-color}*/;
  border-color: #dddddd /*{a-bdown-border}*/;
  color: var(--main-font-color) /*{a-bdown-color}*/;
}

/* Active button */
.ui-page-theme-a .ui-btn.ui-btn-active, html .ui-bar-a .ui-btn.ui-btn-active, html .ui-body-a .ui-btn.ui-btn-active, html body .ui-group-theme-a .ui-btn.ui-btn-active, html head + body .ui-btn.ui-btn-a.ui-btn-active,
  /* Active checkbox icon */
.ui-page-theme-a .ui-checkbox-on:after, html .ui-bar-a .ui-checkbox-on:after, html .ui-body-a .ui-checkbox-on:after, html body .ui-group-theme-a .ui-checkbox-on:after, .ui-btn.ui-checkbox-on.ui-btn-a:after,
  /* Active flipswitch background */
.ui-page-theme-a .ui-flipswitch-active, html .ui-bar-a .ui-flipswitch-active, html .ui-body-a .ui-flipswitch-active, html body .ui-group-theme-a .ui-flipswitch-active, html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active,
  /* Active slider track */
.ui-page-theme-a .ui-slider-track .ui-btn-active, html .ui-bar-a .ui-slider-track .ui-btn-active, html .ui-body-a .ui-slider-track .ui-btn-active, html body .ui-group-theme-a .ui-slider-track .ui-btn-active, html body div.ui-slider-track.ui-body-a .ui-btn-active {
  background-color: var(--main-color) /*{a-active-background-color}*/;
  border-color: var(--main-border-color) /*{a-active-border}*/;
  color: var(--white) /*{a-active-color}*/;
}

/* Active radio button icon */
.ui-page-theme-a .ui-radio-on:after, html .ui-bar-a .ui-radio-on:after, html .ui-body-a .ui-radio-on:after, html body .ui-group-theme-a .ui-radio-on:after, .ui-btn.ui-radio-on.ui-btn-a:after {
  border-color: var(--main-color) /*{a-active-background-color}*/;
}

/* Focus */
.ui-page-theme-a .ui-btn:focus, html .ui-bar-a .ui-btn:focus, html .ui-body-a .ui-btn:focus, html body .ui-group-theme-a .ui-btn:focus, html head + body .ui-btn.ui-btn-a:focus,
  /* Focus buttons and text inputs with div wrap */
.ui-page-theme-a .ui-focus, html .ui-bar-a .ui-focus, html .ui-body-a .ui-focus, html body .ui-group-theme-a .ui-focus, html head + body .ui-btn-a.ui-focus, html head + body .ui-body-a.ui-focus {
  -webkit-box-shadow: 0 0 12px var(--main-color) /*{a-active-background-color}*/;
  -moz-box-shadow: 0 0 12px var(--main-color) /*{a-active-background-color}*/;
  box-shadow: 0 0 12px var(--main-color) /*{a-active-background-color}*/;
}

/* Structure */
/* Disabled
-----------------------------------------------------------------------------------------------------------*/
/* Class ui-disabled deprecated in 1.4. :disabled not supported by IE8 so we use [disabled] */
.ui-disabled, .ui-state-disabled, button[disabled], .ui-select .ui-btn.ui-state-disabled {
  filter: Alpha(Opacity=30);
  opacity: .3;
  cursor: default !important;
  pointer-events: none;
}

/* Focus state outline
-----------------------------------------------------------------------------------------------------------*/
.ui-btn:focus, .ui-btn.ui-focus {
  outline: 0;
}

/* Unset box-shadow in browsers that don't do it right */
.ui-noboxshadow .ui-shadow, .ui-noboxshadow .ui-shadow-inset, .ui-noboxshadow .ui-overlay-shadow, .ui-noboxshadow .ui-shadow-icon.ui-btn:after, .ui-noboxshadow .ui-shadow-icon .ui-btn:after, .ui-noboxshadow .ui-focus, .ui-noboxshadow .ui-btn:focus, .ui-noboxshadow input:focus, .ui-noboxshadow .ui-panel {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

.ui-noboxshadow .ui-btn:focus, .ui-noboxshadow .ui-focus {
  outline-width: 1px;
  outline-style: auto;
}

.last-event-bloc h3.title-bloc-part{
  position:relative;
}

.last-event-bloc .ui-listview .date {
  float:right;
  font-size:0.95em;
}

.last-event-bloc .ui-listview a{
  font-size:0.95em;
}
.ui-listview li {
  font-size: 0.95em;
}

.ui-listview > li:nth-child(odd) a, .list-contacts > li:nth-child(odd), .list-notifications > li:nth-child(odd), .list-resources > li:nth-child(odd) {
  background-color: var(--white);
}

.ui-listview > li:nth-child(even) a, .list-contacts > li:nth-child(even), .list-notifications > li:nth-child(even), .list-resources > li:nth-child(even) {
  background-color: #f6f6f6;
}

.ui-listview li:last-child a {
  border-bottom-width: 1px;
}

.ui-page-theme-a .ui-btn.silverpeas-navmenu-link {
  background-color: #313131 /*{a-bup-background-color}*/;
  border-color: #313131 /*{a-bup-border}*/;
  color: #313131 /*{a-bup-color}*/;
  text-shadow: 0 /*{a-bup-shadow-x}*/ 0px /*{a-bup-shadow-y}*/ 0 /*{a-bup-shadow-radius}*/ #313131 /*{a-bup-shadow-color}*/;
}

/* GENERAL */
.ui-header .ui-title, .ui-footer .ui-title {
  font-weight: normal;
}

#header {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

#header,
#navigation-footer {
  background-color: var(--black);
  height: 46px;
  border-bottom: 2px solid #151515;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  user-select: none;
}

#navigation-footer {
  bottom: 0;
  top: auto;
  display: flex;
}

#navigation-footer a {
  margin: 12px;
  text-align: center;
  flex: 1;
  transform: scale(1.5);
  fill: var(--main-color);
}

#navigation-footer .btn-list-navigation {

}

#navigation-footer .btn-find-contact {
  transform: scale(1.2);
}

#navigation-footer .btn-update-tchat {
  transform: scale(1.2);
}

#navigation-footer .btn-list-task {

}

#navigation-footer .btn-list-favoris {
  transform: scale(1.4);
}

#header h1 {
  color: var(--white);
  font-size: 1.1em;
  font-weight: normal;
  left: 50px;
  line-height: 44px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 1px;
  height: 44px;
  width: calc(100vw - 50px - 2.5em);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ui-btn-right.back {
  background: url('icons/arrow_back.svg') no-repeat;
  border: none;
  height: 36px;
  width: 36px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  left:0;
}

/* HOME */
.ui-panel-wrapper {
  background-color: var(--main-bg-color);
}

.ui-page-content {
  padding: 0;
  min-height: calc(100vh - 92px);
}

#menu-principal {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#menu-principal li {
  margin: 0;
  padding: 0;
  background: #f3f3f3 url(bg-degrade-gris-clair.png) repeat-x;
  float: left;
  width: 50%;
  height: 88px;
  border-bottom: 1px solid #d1d1d1;
}

#menu-principal li:hover {
  background: #f3f3f3 url() repeat-x;
}

#menu-principal li a {
  display: block;
  height: 56px;
  padding: 33px 0 0 64px;
  color: #777;
  text-decoration: none;
  line-height: 90%;
}

.bloc .ui-title {
  text-transform: uppercase;
  color: #686868;
  font-weight: normal;
  padding: 0.5em 1em 0 1em;
  font-size: 0.8em;
}

.favoris-bloc span {
  fill : #a9a9a9;
  white-space: normal;
}

.favoris-bloc a {
  padding-left: 2.5em;
}

.racourcis-bloc a {
  padding-left: 2.5em;
  font-size: 0.95em;
}

.racourcis-bloc img {
  max-width: 25px;
  float: left;
}

.last-publication-bloc li a {
  padding-left: 4em;
  font-size: 0.95em;
}

.last-publication-bloc li a .date {
  position: absolute;
  top: 1em;
  left: 0.5em;
  font-size: 0.85em;
  color: #b3b2b2;
}

.last-publication-bloc .ui-listview li .ui-btn {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: inherit;
}

.carroussel-news {
  padding-left:0;
  padding-top:1.25em;
  margin: 0;
  list-style-type: none;
  min-height: 1em;
}

.carroussel-news li > a:first-child {
  float: left;
  max-width: 40%;
  display: flex;
}

.carroussel-news li {
  height: 90px;
  position: relative;
  overflow: hidden;
  background-color: #FFF;
}

.carroussel-news img {
  max-width: 120px;
  max-height: 90px;
  margin-right: 1em;
}

.carroussel-news .caption-list {
  height: 5em;
  overflow: hidden;
}

.carroussel-news .caption {
  height: 5em;
  overflow: hidden;
  padding-bottom: 2em;
}

.carroussel-news h2 {
  font-size: 0.75em;
  padding: 0;
  margin: 0 0 0.25em 0;
}

.carroussel-news h2 a {
  font-size: 1em;
  color: #333;
  text-decoration: none;
}

.carroussel-news p {
  font-size: 0.75em;
  line-height: inherit;
  color: #666666;
  padding: 0;
  margin: 0;
}

.carroussel-news .nbIndication {
  position: absolute;
  bottom: 0em;
  right: 0.5em;
  font-size: 0.85em;
}

.carroussel-news .nbIndication span {
  color: #1c94d4
}

#shortCuts ul li {
  display: flex;
  align-items: center;
}

#shortCuts ul li a {
  width: 100%;
}

/***** Aurora space home page *****/
.aurora-picture {
  width: 100%;
}

/***** MENU****/
#silverpeas-navmenu-panel {
  padding: 0;
  color: var(--main-font-color);
  background-color: #f4f4f4;
  position: fixed;
  font-size: 0.8em;
  height: 100vh;
  user-select: none;
}

#silverpeas-navmenu-panel .ui-panel-inner {
  padding: 0;
}

#silverpeas-navmenu-panel #user {
  margin-top: 54px;
  padding: 0 1em 1em;
}

#silverpeas-navmenu-panel #user img {
  float: left;
  width: 2.5em;
  vertical-align: middle;
  margin-right: 0.25em;
  border-radius: 100%;
  margin-right: 0.5em;
  border: 1px solid #9d9c9c;
}

#silverpeas-navmenu-panel #user .statut {
  font-style: italic;
  color: #9d9c9c;
}

#silverpeas-navmenu-panel #user .edit-my-statut {
  display: inline-block;
  text-indent: -3000px;
  background: transparent url('icons/edit.svg') no-repeat;
  width: 18px;
  height: 18px;
}

#silverpeas-navmenu-panel #navmenu-panel {
  border-top: 1px solid #d3d3d3;
  margin: 0;
  padding: 0;
}

#silverpeas-navmenu-panel #navmenu-panel li {
  list-style-type: none;
  display: flex;
  align-items: center;
}

#silverpeas-navmenu-panel #navmenu-panel li span {
  position: relative;
  display: inline;
  margin-left: 0.5em;
  font-size: 1.25em;
}

#silverpeas-navmenu-panel #navmenu-panel li span svg {
  height: 1.5em;
  width: 1.5em;
}

#silverpeas-navmenu-panel #navmenu-panel li a {
  position: relative;
  display: inline;
  border: none;
  font-size: 1.25em;
  padding-left: 0.5em;
  color: var(--main-font-color);
}

#actions-menu > :first-child, #navmenu-panel > :first-child, #personals-apps > :first-child {
  padding-top: 1em;
}

#actions-menu > :last-child, #navmenu-panel > :last-child, #personals-apps > :last-child {
  padding-bottom: 1em;
}

#personals-apps {
  border-top: 1px solid #d3d3d3;
  margin: 0;
  padding: 0;
  user-select: none;
}

#personals-apps li {
  list-style-type: none;
  display: flex;
  align-items: center;
}

#personals-apps li span {
  position: relative;
  display: inline;
  margin-left: 0.5em;
  font-size: 1.25em;
}
#personals-apps li span svg {
  height: 1.5em;
  width: 1.5em;
}

#personals-apps li a {
  position: relative;
  display: inline;
  border: none;
  font-size: 1.25em;
  padding : 0 0 0 0.5em;
}

#actions-menu {
  border-top: 1px solid #d3d3d3 !important;
  position: absolute;
  bottom: 48px;
  width: 100%;
  border: 0;
  padding-left: 0.5em;
  user-select: none;
}

#actions-menu li {
  list-style-type: none;
  display: flex;
  align-items: center;
  fill: var(--main-color);
}

#actions-menu li span svg {
  height: 1.5em;
  width: 1.5em;
}

#actions-menu li a {
  text-decoration: none;
  color: var(--main-font-color);
  display: block;
  padding-bottom: 0.5em;
  padding-top: 0.5em;
  font-size: 1.25em;
  margin-left: 0.5em;
}


#menu-principal li a strong {
  color: var(--main-font-color);
}

#btn-find-document a {
  background: transparent url(packImage.png) 20px 20px no-repeat;
  border-right: 1px solid #d1d1d1;
}

#btn-find-media a {
  background: transparent url(packImage.png) 10px -124px no-repeat;
}

#btn-find-contact a {
  background: transparent url(packImage.png) 20px -274px no-repeat;
  border-right: 1px solid #d1d1d1;
}

#btn-update-tchat a {
  background: transparent url(packImage.png) 20px -419px no-repeat;
}

/***** NAVIGATION ****/

#spaces ul li, #favoris ul li, #edm li {
  display: flex;
  align-items: center;
}

#spaces ul li a, #favoris ul li a, #edm li a {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-app, .icon-item {
  position: absolute;
  left: 0.5em;
  z-index: 2;
}

.app-introduction {
  padding: 1em;
}

.folder-ged a, .folder-galery a, .publication a, .media a, .trash a, .app-actuality a, .app-ged a, .app-medialib a,
.publication.ui-input-text, .app-blog a, .app-pageWeb a, .app-workflow a, .app-link a, .app-almanach a, .app-formsOnline a, .app-classifieds a, .app-survey a, .app-faq a, .app-polling a,
.app-resourcesManager a, .app-orgaChartGroup a {
  padding-left: 2.5em;
}

#actionList-bloc > li {
  display: inline-block;
  padding-left: 0.5em;
}

#actionList-bloc > li:last-child {
  padding-left: 0em;
}

.add-task {
  height: 24px;
  width: 24px;
  filter: invert(1);
  background: url('icons/add.svg') no-repeat;
}

.add-task a {
  height: 24px;
  width: 24px;
  display: block;
}

.publication.ui-input-text {
  background-position: 0.5625em 0.3em;
}

.app-formsOnline a {

}

.app-almanach a {

}

.app-link a {

}

.app-actuality a {

}

.folder-ged a {

}

.app-ged a {

}

.app-pageWeb a {

}

.app-blog a {

}

.app-classifieds a {

}

.app-survey a {

}

.app-polling a {

}

.app-faq a {

}

.app-workflow a {

}

.app-resourcesManager a {

}

.app-orgaChartGroup a {

}

ul>.folder-galery {
  display: flex;
  align-items: center !important;
}

.folder-galery a {
  width: 100%;
}

.publication a {

}

.trash a {

}

.media a {
  background: transparent url('icons/media.svg') no-repeat;
  background-position-y: center;
  background-position-x: 0.5em;
}

.add-media, .add-file, .add-workflow-demand {
  height: 24px;
  width: 24px;
  filter: invert(1);
  background: url('icons/add.svg') no-repeat;
}

.book-resources {
  height: 24px;
  width: 24px;
  filter: invert(1);
  background: url('icons/bookmark_add.svg') no-repeat;

}

.add-media a, .add-file a, .add-workflow-demand a, .book-resources a {
  height: 24px;
  width: 24px;
  display: block;
}

.media-thumb:first-child {
  clear: left;
}

.ui-listview .media-thumb {
  width: 20vw;
  float: left;
  margin-left: 4vw;
  margin-top: 4vw;
}

.media-thumb .ui-thumb {
  overflow: hidden;
  display: block;
  border: 3px solid var(--white);
  background-color: var(--white) !important;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.3);
}

.media-thumb .ui-thumb img {
  width: 100%;
  height: 75px;
  object-fit: scale-down;
}

.media-thumb .ui-thumb span {
  font-size: 0.8em;
  height: 2em;
  display: inline-block;
  overflow: hidden;
  line-height: 1em;
  background-color: #f6f6f6;
  width: 100%;
  color: var(--black);
}

audio::-webkit-media-controls-enclosure {
  border-radius: 0;;
}

.info-nb-sous-elmt {
  color: #8b8b8b
}

.viewer {
  touch-action: none;
  transition: none;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  transform-origin: left top;
}

.viewer .photo {
  display: block;
  margin: auto auto;
  max-width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
}

/**** Publication - media ***********/
#publication, #contacts, #update-statut, #a-media, #notification, #edit-notification, #event, #send-message {
  background-color: var(--main-bg-color);
  padding: 1em 0;
}

#edit-notification {
  padding: 1em;
}

.publiDesc {
  color: #848484;
  padding: 1em;
  margin: 0;
}

.lastUpdate {
  color: #848484;
  padding-top: 1em;
  padding-left: 1em;
  margin: 0;
}

.nbViews {
  color: #848484;
  padding-top: 1em;
  padding-left: 1em;
  margin: 0;
  font-style: italic;
}

.publiDesc {
  padding-top: 0em;

}

.publiName, .mediaName, .title-instruction {
  padding:0 2em 0.75em 1em;
  margin: 0;
  font-size:1.05em;
  font-weight: normal;
  min-height: 1.5em;
}

.appHeader {
  padding: 0 1em;
  margin: 0;
  font-size: 1.2em;
  font-weight: normal;
  height: 3em;
  line-height: 3em;
}

.comments .publiName, .comments .mediaName {
  margin-right: 1em;
  background: transparent url('icons/comment.svg') no-repeat right;
}

.cadrePhoto {
  background-color: var(--main-font-color);
  background: linear-gradient(#343434, var(--black)) repeat scroll 0 0 #343434;
  text-align: center;
  padding: 2em;
}

.cadrePhoto img {
  margin: auto;
  max-height: 140px;
  max-width: 100%;
}

#attachments, .list-contacts, .list-comments, .list-notifications, .list-detail-event, .list-resources, .list-reservations {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #e0e0e0;
}

#attachments li,
.list-contacts li,
.list-comments li,
.list-notifications li,
.list-resources li,
.list-reservations li,
.list-detail-event, f {
  background-color: var(--white);
  border-bottom: 1px solid #e0e0e0;
  padding: 0;
  margin: 0;
}

#attachments li > *,
.list-contacts li > *,
.list-comments li > *,
.list-notifications li > *,
.list-resources li > *,
.list-reservations li > *,
.list-detail-event  > * {
  padding:1em;
  padding-left: 1em;
}

#linkedPublications li {
  list-style-type:none;
}

.list-detail-event {
  border-bottom: 0;
}

.ui-listview.list-comments > li p {
  line-height: 100%;
  white-space: normal;
  font-size: 1em;
}

.list-comments .date {
  color: #848484;
}

#comments, #files, .elts-pub {
  background-color: var(--white);

  padding: 0;
  margin: 0;
}

#comments a {
  border: 0 none;
  margin: 0;
  text-align: left;
  background: url('icons/comment.svg') no-repeat;
  padding-left: 3em;
  background-position-y: center;
  background-position-x: 0.5em;
}

#files a {
  border: 0 none;
  margin: 0;
  text-align: left;
  background: url('icons/attachment.svg') no-repeat;
  padding-left: 3em;
  background-position-y: center;
  background-position-x: 0.5em;
  margin-bottom: 2px;
}

#info-event, .elts-pub {
  padding: .7em 1em .7em 1em;
}

#event #content a {
  padding: .7em 1em .7em 1em;
}

#event .list-detail-event .label {
  clear: left;
}

#event .list-detail-event .field {
  color: #666
}

#event .reccurence::before {
  content:'';
  width:20px;
  height:20px;
  display:block;
  background: var(--white) url(packImagesNavigation.png) 0 -1959px no-repeat;
  position:absolute;
  top:0.75em;
  left:1em;
}

#event .reccurence  {
  padding-left: 2.5625em;
  line-height: 1.15em;
  position:relative;
}

#event #participation {
  line-height: 1.25em;
}

.icon-participation {
  position: absolute;
}

#event #participation .label {
  line-height: 2em;
  padding-bottom: 0.5em;
  padding-left: 2em;
}

#event #participation ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#event #participation ul .pending {
  color: #8c8c8c;
}

#info-extra-event {
  line-height: 1.8em;
}

#info-extra-event > div {
  display: inline;
}

#info-extra-event div:nth-child(2n)::before {
  content: ' - ';
}

#info-extra-event .location {
  background: transparent url(packImagesNavigation.png) 0em -1779px no-repeat;
  padding-left: 1.5em;
}

#event .rappel-event {
  padding: 0 1em 1em 1em;
}

#event .actions-rappel {
  display: inline-block;
  vertical-align: middle;
}

#event .actions-rappel .delete {
  text-indent: -300em;
  display: inline-block;
  width: 24px;
  height: 24px;
  padding: 0 !important;
  background: transparent url('icons/remove_circle.svg') no-repeat;
}

#comments .link-add-comment {
  color: #ec9c01;
  text-decoration: underline;
}

#add-comment {
  margin-left: 1em;
  margin-right: 1em;
}

#add-comment,
.introduction {
  position: relative;
  margin-bottom: 1em
}

#add-comment h3 {
  font-size: 1em;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

#champs-comment {
  position: relative;
  padding-top: 1px;
  margin-bottom: 0;
}

#add-comment textarea.ui-input-text {
  font-size: 0.9em;
  height: 7em;
  border-radius: 10px;
}

#add-comment .btn-publicate {
  font-size: 1em;
  color: #ec9c01;
  display: block;
  text-align: right;
  background: url("icons/send.svg") no-repeat right;
  height: 24px;
  width: 24px;
  position: absolute;
  right: 0;
  bottom: 5px;
  margin-right: 0.5em ;
}

#add-comment .btn-publicate.inactif {
  color: #999;
  text-decoration: none;
  filter: opacity(0.5);
}

#attachments li a {
  text-decoration: none;
  color: var(--black);
  display: flex;
}

#attachments li a .weight {
  display: block;
  color: #848484;
}

#a-media #attachments li a .dimension {
  display: block;
  color: #848484;
  padding-left: 0px;
}

#a-media #attachments li a .weight {
  display: inline-block;
  padding-left: 0px;
}

#attachments li a img {
  vertical-align: bottom;
  border: 0;
  margin-right: 8px;
  float: left;
  height: 24px;
  width: 24px;
}

#attachments li a.expand-more {
  background: transparent url(icons/expand_more.svg) right 0.5em no-repeat;
  margin-right: 0.5em;
}

#attachments li a.expand-less {
  background: transparent url(icons/expand_less.svg) right 0.5em no-repeat;
  margin-right: 0.5em;
}

#shares li {
  width: max-content;
}

#attachments li a span {
  display: block;
  padding-right:1em;
  max-width: calc(100vw - 5em);
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-open, .ops-open #share, .ops-open #download, .ops-open #view, .ops-open #notify {
  transition: all .25s ease-in-out;
  color: transparent;
  height: 30px;
  line-height:30px;
  transform: scaleY(1);
  margin-bottom:1em;
}

.ops-closed, .ops-closed #share, .ops-closed #download, .ops-closed #view, .ops-closed #notify {
  transition: all .25s ease-in-out;
  height: 0px;
  line-height:0px;
  transform: scaleY(1);
  margin-bottom:0px;
}

.item-open {
  transition: all .25s ease-in-out;
  color: transparent;
  max-height: 600px;
}

.item-closed {
  transition: all .25s ease-in-out;
  max-height: 0px;
}


li > #operations {
  padding:0em;
}

#download {
  background : transparent url(icons/download.svg) no-repeat;
  background-position: 50% 50%;
  background-color:var(--main-bg-color);
  width: 30px;
  height: 30px;
  border-radius: 0.25em;
  margin-right: 1em;
  float : right;
}

#view {
  background: transparent url(icons/view.svg) no-repeat;
  background-position: 50% 50%;
  background-color:var(--main-bg-color);
  width: 30px;
  height: 30px;
  border-radius: 0.25em;
  margin-right: 1em;
  float : right;
}

#share {
  background: transparent url(icons/share.svg) no-repeat;
  background-position: 50% 50%;
  background-color:var(--main-bg-color);
  width: 30px;
  height: 30px;
  border-radius: 0.25em;
  margin-right: 1em;
  float : right;
}

#notify {
  background: transparent url(icons/send.svg) no-repeat;
  background-position: 50% 50%;
  background-color:var(--main-bg-color);
  width: 30px;
  height: 30px;
  border-radius: 0.25em;
  margin-right: 1em;
  float : right;
}

/********** CONTACT *******/
#btn-my-contacts, #btn-all-contacts, #btn-all-contactsext {
  padding-left: 5px;
}

#list-contacts .user-name .status {
  font-size: 0.75em;
  font-style: italic;
}

#btn-my-contacts > span, #btn-all-contactsext > span {
  background: url('icons/contacts.svg') no-repeat;
  padding-left: 30px;
  display: block;
  text-align: left;
  font-size: 0.8em;
}

#btn-all-contacts > span {
  background: url('icons/account.svg') no-repeat;
  padding-left: 30px;
  display: block;
  text-align: left;
  font-size: 0.8em;
}

.fields-contact {
  margin-top: 1em;
  user-select: none;
  list-style-type:none;
}

.fields-contact .avatar {
  margin-bottom: 1em;
}

.fields-contact li {
  margin-bottom: 0.5em;
}

/*.standardFields div, .extendedFields div {
  margin-bottom: 0.5em;
}*/

.actions {
  margin-bottom: 2em;
}


/* notification */

#notification .list-contacts li {
  padding: 1em 1em 2em 1em;
}

#notification .ui-controlgroup-controls.continu,
#notification .title-instruction {
  display: inline-block;
}

#notification .ui-controlgroup-controls.continu {
  float: right;
  padding: 0 1em 0 0;

}

#notification .btn-validate {
  padding: 0.5em 1em;
}

#edit-notification .ui-input-text.destinataires {
  line-height: 1.4em;
  position: relative;
  color: var(--black);
  font-size: 0.8em;
  min-height: 3.4em;
}

#edit-notification #message {
  height: 15em;
}

#edit-notification .ui-input-text.destinataires .nb-user-sectionne {
  position: absolute;
  top: 0.5em;
  left: 1.6em;
  font-size: 1.4em;
  color: var(--main-font-color);
}

#edit-notification .ui-input-text.destinataires .btn-modif {
  position: absolute;
  top: 0.1em;
  right: 0.1em;
  bottom: 0.1em;
  display: block;
  text-indent: -300em;
  width: 2em;
}

#notification .list-notifications > li.selected, .list-resources > li.selected, #tasks > li.selected,
.notifications > li.selected, .shares > li.selected, .favoris > li.selected, .list-comments > li.selected {
  border-left: 8px solid #7eb73a;
  color: var(--black)
}

#notification .list-notifications {
  font-size: 0.8em;
}

#notification .title-instruction {
  display: inline-block;
  font-size: 0.8em;
  font-style: italic;
}

#notification .introduction {
  margin-bottom: 0;
}

#edit-notification .iconFile {
  position: absolute;
}

.filter-contacts,
#edit-notification .ui-input-text.publication {
  width: 98%;
  padding-right: 1%;
  padding-left: 1%;
  line-height: 2.5em;
  background-color: var(--white);
  font-size: 0.8em;
}

.ui-controlgroup-horizontal .ui-controlgroup-controls > .ui-btn, .ui-controlgroup-horizontal .ui-controlgroup-controls li > .ui-btn, .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-checkbox, .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-radio, .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-select {
  float: none;
  clear: inherit;
  display: table-cell;
}

input.filter-contacts {
  clear: both;
}

#edit-notification .ui-input-text.publication input {
  padding-left: 2em;
  width: 100%;
  background-color: transparent;
}

#edit-notification label {
  display: block
}

.list-contacts,
.list-comments,
.list-notifications, {
  font-size: 1em;
  line-height: 1.8em;
}

.list-contacts .user-name img,
.list-comments .user-name img,
.list-notifications .user-name img {
  width: 32px;
  border: 1px solid #ccc;
  float: right;
}

.icon-group svg {
  float: right;
  width: 32px;
}

.list-contacts .user-name,
.list-comments .user-name,
.list-notifications .user-name {
  line-height: 0.8em;
}

.list-notifications .group-name {
  line-height: 2em;
}

.ui-page-theme-a .tel {
  color: #bebebe
}

.ui-page-theme-a .tel-link {
  color: var(--main-flashy-color);
  text-decoration: none;
  white-space: nowrap;
  margin-right: 1em;
}

.tel-link span {
  margin-left: 1em;
}

.tel-link svg {
  fill:var(--main-flashy-color);
}

.sms-link svg {
  fill:var(--main-flashy-color);
}

/***** STATUT & ADD COMMENT***/
#update-statut, #send-message {
  padding: 1em;
  position: relative;
}

#update-statut h2, #send-message h2 {
  font-size: 1.3em;
  font-weight: normal
}

#champs-statut,
#champs-message {
  position: relative;
  padding-top: 1px;
  margin-bottom: 1em;
}

.ouverture-bulle {
  position: absolute;
  top: 0;
  left: 12px;
  width: 0;
  height: 0;
  border-left: 1px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--white);
}

#champs-statut textarea,
#champs-message textarea {
  border-radius: 10px;
}

.btn-validate {
  text-transform: uppercase;
  border-radius: 2px;
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.ui-page-theme-a .btn-validate {
  background-color: #6fa800;
  background: linear-gradient(#7eb73a, #6fa800) repeat scroll 0 0 #6fa800;
  border: 1px solid #6fa800;
  padding: 1em;
  color: var(--white) !important;
  text-decoration: none;
  display: block;
  font-weight: bold;
}

.btn-validate.smaller {
  padding: 0.5em 1em;
}

.btn-validate.multiple {
  display: inline-block;
}

.ui-page-theme-a .btn-validate:hover {
  background-color: #7eb73a;
  background: linear-gradient(#6fa800, #7eb73a) repeat scroll 0 0 #7eb73a;
  color: var(--white);
}

.ui-btn-right {
  right: .4em;
}

.ui-btn-left, .ui-btn-right {
  position: absolute;
  top: 5px;
}

.ui-btn {
  margin: .5em 0;
}

.ui-input-text input, .ui-input-search input, textarea.ui-input-text {
  padding: .4em;
  line-height: 1.4em;
  display: block;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-appearance: none;
  box-sizing: border-box;
  outline: 0;
  background: var(--white);
}

textarea.ui-input-text {
  overflow: auto;
  resize: vertical;
}

.ui-input-text, .ui-input-search {
  margin: .5em 0;
  border: 1px solid #ddd;
}

.ui-controlgroup-horizontal .ui-controlgroup-controls {
  display: inline-block;
  vertical-align: middle;
  margin-top:0.5em;
}

.ui-controlgroup-controls, .ui-controlgroup-controls .ui-radio, .ui-controlgroup-controls .ui-checkbox, .ui-controlgroup-controls .ui-select, .ui-controlgroup-controls li {
  -webkit-border-radius: inherit;
  border-radius: inherit;
}

.ui-controlgroup-horizontal .ui-controlgroup-controls:before, .ui-controlgroup-horizontal .ui-controlgroup-controls:after {
  content: "";
  display: table;
}

.ui-controlgroup-horizontal .ui-controlgroup-controls:after {
  clear: both;
}

.ui-controlgroup-horizontal .ui-controlgroup-controls:before, .ui-controlgroup-horizontal .ui-controlgroup-controls:after {
  content: "";
  display: table;
}

/*********** LOGIN ***************/
#header #page-login-title {
  left: 1em;
  right: 1em;
}

#page-login {
  background-color: transparent;
}

#formLogin {
  text-align: center;
  padding-top: 4em;
}

#page-login #Login, #page-login #Password {
  box-sizing: border-box;
  background: var(--white) url(bg-input-login.png) 0 0 no-repeat;
  padding-left: 2em;
  border: 1px solid #dddddd;
  width: 70vw;
  margin: 0 0 1.5em 0;
  line-height: 2em;
  border-radius: 0.25em;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
}

#page-login #Password {
  background: var(--white) url(bg-input-password.png) 0 0 no-repeat;
}

#page-login #DomainId, .filter-list {
  width: 70vw;
  box-sizing: border-box;
  padding: 0.5em;
  background-color: var(--white);
  border-radius: 0.25em;
  border: none;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
}

.field-label {
  padding-right: 1em;
}

#page-login #password-visibility {
  margin-bottom: 1.5em;
}

#page-login #copyright {
  bottom: 3em;
  font-size: 0.8em;
  left: 0;
  position: fixed;
  right: 0;
  text-align: center;
}

#page-login #version {
  bottom: 1em;
  font-size: 0.8em;
  left: 0;
  position: fixed;
  right: 0;
  text-align: center;
}

#page-login .btn-validate,
#page-login .btn-validate:visited {
  padding: 0.5em 0;
  width: 10em;
  margin: 1em 0 0
}

/************ PAGE D'ERREUR **************/

#error {
  background: var(--main-font-color) url(fond-casse.jpg) 0 0 no-repeat;
}

#mascotte {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: center;
  background: transparent url(mascotte.png) right bottom no-repeat;
  min-height: 220px;
  padding-right: 130px;
  padding-left: 1em;
  color: var(--white)
}

#error .ui-btn-right {
  top: auto;
  right: 50%;
}

.searchBox {
  border: 1px solid #d3d3d3;
  border-radius: 3px;
  width:calc( 100% - 1em );
  color: #666;
  padding: 5px;
  outline-style: none;
  height: 1.5em;
  background-color: var(--white);
}

#menu-search {
  background: #efefef;
  padding: 1em;
  padding-left: 2em;
  margin-left: 0.5em;
  border-top: 1px solid #d3d3d3;
  background: 0px 1.5em url('icons/search.svg') no-repeat;
}

.bloc-actu-vignette, .bloc-actu-content {
  float: left;
}

.bloc-actu-vignette img {
  width: 100px;
}

.bloc-actu-more {
  clear: both;
}

/* pour page listing des actus */
.ui-content {
  padding: 0;
}

.carroussel-news li {
  height: auto !important;
  clear: both;
  border-bottom: 1px solid #eee;
  margin-bottom: 1em;
}

.ui-content .carroussel-news .caption {
  height: auto;
  margin-bottom: 1em;
  padding-left: 1em;
}

.liste-news, .liste-annonces {
  list-style-type: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #ddd;
}

.liste-annonces li {
  padding: 0.2em 0.5em;
  margin: 0;
}

.liste-news li {
  padding: 1em 1em;
  margin: 0;
}

#newsForm .title {
  width: calc(100vw - 4em);
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 2em;
  border: none;
  line-height: 2em;
}

#newsForm .title::placeholder {
  color: var(--main-flashy-color);
}

#newsForm .description {
  width: calc(100vw - 4em);
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 2em;
  border: none;
}

#newsForm .important {
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 2em;
}

#newsForm .crop {
  margin-right: 2em;
  float: right;
  mask-image: url("icons/crop.svg");
  background-color: var(--black);
  width: 24px;
  height: 24px;
}

#newsForm .crop.cropping {
  background-color: #3388cc;
}

#newsForm .thumbnail {
  width: calc(100vw - 4em);
  height: 100px;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 2em;
  background: url('icons/add_photo_alternate.svg') center no-repeat;
  background-color: var(--white);
  background-size: 10%;
}

#newsForm .thumbnail.mandatory {
  background-color: var(--main-flashy-color) !important;
}

#newsForm .thumbnail input {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

#newsForm .thumbnail label {
  width: 100%;
  height: 100%;
  display: block;
  text-align: center;
  padding-top: 15px;
}

#newsForm .previewContainer {
  width: calc(100vw - 4em);
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 2em;
}

#newsForm #preview {
  max-width: 100%;
  display: block;
}

#newsForm .startDate, #newsForm .endDate {
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 2em;
  float: initial;
}

#newsForm .startDate label, #newsForm .endDate label {
  display: inline-block;
  width: 9em;
}

#newsForm .startDate input, #newsForm .endDate input {
  line-height: 2em;
  border: none;
  border-radius: 2px;
}

.liste-news li img, .liste-annonces img {
  float: left;
  margin: 1em;
  margin-left: 0;
}

.liste-news li h2, .liste-annonces li h2 {
  padding: 0;
  margin: 0;
}

.liste-annonces li p {
  font-size: 0.82em;
  color: #666;
}

.liste-news li p {
  text-align: justify;
  font-size: 1em;
  color: #666;
}

#content {
  background-color: var(--white);
  border-top: 1px solid #e0e0e0;
  padding: 0;
  margin: 0;
}

#content a {
  border: 0 none;
  margin: 0;
  text-align: left;
  padding-left: 2.5625em;
}

/* Default forms look n feel */
.forms .form-border {
  border: 1px solid #CCC;
}

.forms .form-title {
  color: var(--main-font-color);
  font-size: 1.3em;
  font-weight: bold;
  margin: 0 0 5px;
  padding: 0;
}

.forms .legend {
  padding: 10px 0px 0px 10px;
}

.forms .fields .fieldInput {
  display: inline-block;
}

.forms.mode-design .fields label {
  background: url("../icons/grippy_large.png") repeat-y scroll 0 0 rgba(0, 0, 0, 0);
  cursor: move;
}

.forms .fields label {
  display: inline-block;
  float: inherit;
  height: 20px;
  padding-left: 15px;
  width: 180px;
  float: left;
}

.forms .field .fieldInput input,
.forms .field .fieldInput textarea,
.forms .field .fieldInput select {
  width: auto;
}

.forms .fields {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.forms .fields > li {
  padding: 10px 0 5px 2%;
  margin: 0 0 0 0;
  position: relative;
  display: block;
  float: inherit;
  width: 98%;
  min-height: 28px;
}

/* design and edition modes */
form .forms .fields > li:nth-child(odd) {
  background-color: #fffce7;
  border-bottom: 1px solid #ccc;
}

form .forms .fields > li:nth-child(even) {
  background-color: #f6f6f6;
  border-bottom: 1px solid #ccc;
}

/* view mode */
.forms .fields > li:nth-child(odd) {
  background-color: #f9f9f9;
  border-bottom: 1px solid #ddd;
}

.forms .fields > li:nth-child(even) {
  background-color: #f6f6f6;
  border-bottom: 1px solid #ddd;
}

.forms .field .actions {
  position: absolute;
  top: 10px;
  right: 1%;
}

.forms .field ul.repeatable-field-list {
  list-style-type: none;
  padding-left: 0px;
}

.forms .actions img {
  border: 0;
}

.forms .field-occurrence-hidden {
  display: none;
}

.endDate {
  float: right;
}

.percentCompleted {
  line-height: 2em;
  float: left;
}

.task-percent-range {
  width: 80%;
  float: right;
}

.task-priority {
  font-style: italic;
}

.create.task-percent-range {
  width: 100%;
  margin-bottom: 2em;
  float: none;
  margin: 0;
  padding: 0;
}

#update-statut .label-percent, send-message .label-percent {
  padding: 0.5em;
  text-align: center
}

/** Actions ****/
.content {
  position: relative;
}

.content > .ui-listview.ui-listview-inset {
  padding-top: 3em;
}

.content-navigation {
  padding: 1em;
}

#actions {
  position: absolute;
  right: 8px;
  top: 11px;
  filter: invert(1);
  z-index: 9999;
}

#action-button {
  border: 0;
  position: absolute;
  width: 16px;
  height: 24px;
  text-indent: -3000px;
  right: 8px;
  background: transparent url("qvf.svg") 0 0 no-repeat;
  outline: none;
  z-index: 999;
  padding-left: 12px;
  padding-right: 12px;
}

#action-bloc {
  border: 0;
  position: absolute;
  top: 37px;
  right: 2px;
  padding: 0;
  margin: 0;
  width: 10em;
  background-color: var(--white);
  z-index: 100;
  list-style-type: none;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

#action-bloc li {
  padding: 0.2em 0.5em;
}

#action-bloc a {
  color: var(--main-font-color);
  line-height: 200%;
  font-size: 0.9em;
  display: block;
  width: 100%;
}

#actionsList {
  position: absolute;
  top: 11px;
  right: 50px;
  z-index: 9999;
}

#actionsList ul {
  margin: 0;
  padding: 0;
}

#actionsList li {
  list-style: none;
}

#actionsList.menu-empty {
  right: 8px;
}

.empty {
  display: none;
}

.delete-action {
  height: 24px;
  width: 24px;
  filter: invert(1);
  background: url('icons/delete.svg') no-repeat;
}

.edit-action {
  height: 24px;
  width: 24px;
  filter: invert(1);
  background: url('icons/edit_note.svg') no-repeat;
}

.add-action {
  height: 24px;
  width: 24px;
  filter: invert(1);
  background: url('icons/add.svg') no-repeat;
}

.speak-action {
  height: 24px;
  width: 24px;
  filter: invert(1);
  background: url('icons/volume_up.svg') no-repeat;
}

.speak-action.running {
  background: url('icons/stop.svg') no-repeat;
  animation: stopSpeak 2s infinite;
}

@-webkit-keyframes stopSpeak {
  50%   {
    transform: scale(1.5);
    opacity: 50
  }
  100%   {
    transform: scale(1.5);
    opacity: 50
  }
}

.config .actuality a {

}

.config .publication a {
  background:none;
}

.config .event a {

}

.config .favoris a {

}

.config li a {
  padding-left: 1em;
}

.font-percent-size {
  margin-left: 1em;
  margin-bottom: 3em;
  width: calc(100% - 2em);
}

.filters > span {
  display: block;
  margin-left: 1em;
}

.ui-listview.favoris {
  overflow: hidden;
}

.ui-listview.favoris a {
  padding-left: 2.5em;
}

.ui-listview.favoris span {
  top: 0.25em;
  fill : #a9a9a9;
}

.ui-listview.favoris .category {
  z-index: 3;
}

.ui-listview.favoris .category .category-title {
  font-weight: bold;
}

.ui-listview.favoris .category .category-desc {
  display: block;
}

.ui-listview.favoris .category .category-icon {
  position: absolute;
  right: 0.5em;
  fill: var(--black);
}

.ui-listview.favoris .category a {
  background-color: var(--main-color);
  padding-left: 1em;
}

/*** Popup ***/
.gwt-PopupPanel {
  left: 0;
  top: 0 !important;
  background-color: rgba(0,0,0,0.2);
  right: 0;
  position: absolute;
  height: 100%;
  padding-top: 50%;
}
.popupContent {
  background-color: #333;
  padding: 50px;
  border-radius:4px;
  color: var(--white);
  width: calc( 99% - 104px );
  margin:0 1%;
  text-align: center;
  z-index: 999;
  position: absolute;
}

.popin-btns {
  margin-top: 2em;
}

a.popin-btn {
  background:var(--main-color);
  text-decoration: none;
  color: var(--white);
  border-radius:4px;
  padding:0.5em 1em;
  margin: 1em;
}

#real-element {
  padding: 0 0.5em;
  background-color: var(--white);
}

#real-element img {
  max-width: 100%;
  height: auto
}

.workflow-list {
  text-align: center;
  border-spacing: 0px;
  width: 100%;
  font-size: 0.9em;
}

.workflow-list tr {
  height: 3em;
}

.workflow-list > tbody > tr:nth-child(1) {
  font-weight: 600;
}

.workflow-list > tbody > tr:nth-child(odd) {
  background-color: #f9f9f9;

}

.workflow-list > tbody > tr:nth-child(even) {
  background-color: #efefef;
}

.workflow-list > tbody > tr > td {
  border-bottom: 1px solid #ddd;
}

.workflow-roles {
  position: absolute;
  margin-bottom: 1em;
  top: 1em;
  left: .5em;
}

.workflow-anchor {
  text-decoration: none;
}

.workflow-form, .formOnline-form {
  list-style-type: none;
  padding-left: 0;
}

.workflow-form li, .formOnline-form li {
  padding:1em;
}
.workflow-form .gwt-Label,
.formOnline-form  .gwt-Label ,
.forms-list   .gwt-Label{
  padding-bottom:0.5em;
  color:var(--main-font-color);
  font-size:1.1em;
}

.workflow-form li:nth-child(odd),
.liste-billet li:nth-child(odd),
.forms-list li:nth-child(odd),
.formOnline-form:nth-child(odd),
#action-bloc li:nth-child(odd),
.liste-news li:nth-child(odd),
.list-reservations li:nth-child(odd) {
  background-color: #f9f9f9;
  border-bottom: 1px solid #ddd;
}

.worflow-form li:nth-child(even),
.liste-billet li:nth-child(even),
.forms-list li:nth-child(even),
.formOnline-form:nth-child(even),
#action-bloc li:nth-child(even),
.liste-news li:nth-child(even),
.list-reservations li:nth-child(even) {
  background-color: #efefef;
  border-bottom: 1px solid #ddd;
}

.mandatory {
  background-color:#ec9c01;
  height:8px;
  width:8px;
  margin-left: 1em;
}

.delete {
  color: red !important;
  font-weight: bold !important;
  cursor: pointer !important;
  padding: 1em !important;
  font-size: 1em !important;
}

.connected {
  background: rgb(66, 183, 42);
  border-radius: 50%;
  display: inline-block;
  height: 6px;
  margin-left: 4px;
  width: 6px;
}

/* FormsOnline */

.forms-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #ddd;
  padding-top: 3.5em;
}

.forms-list li {
  margin: 0;
  padding: 1em;
  line-height:1em;
}

.forms-list li > a.gwt-Anchor {
  display: inline;
  width: 0;
  height: 0;

}

.forms-list h2.title::first-letter {
  text-transform: capitalize;
}

.forms-list li .number {
  float: right;
}

.forms-list li .state {
  padding-right: 1em;
}

.formOnlineRequest .label-comment {
  margin-left: 1em;
}

.formOnlineRequest .comment {
  width: 95%;
  height: 5em;
  margin-left: 1em;
}


/* LE BLOG */
.liste-billet {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #ddd;
}

.liste-billet li {
  margin: 0;
  padding: 1em;
  line-height: 0.5em;
}

.liste-billet li > a.gwt-Anchor {
  display: inline;
  width: 0;
  height: 0;

}

.liste-billet span.category,
.ui-listview .event-calendar {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4f4f4;
  border: 1px solid #CCC;
  color: #4c4c4c;
  padding: 0.5em;
}

.liste-billet p.date {
  float: right;
  padding-top: 0;
  margin-top: 0;
  line-height: 16px
}

.liste-billet h2,
.forms-list h2,
.liste-news li h2 {
  padding-top: 0;
  margin-top: 0;
}

.liste-billet h2 a,
.forms-list h2 a,
.liste-news li h2 a,
.forms-list h2,
.liste-annonces li h2 a {
  font-size: 1em;
  line-height: 1.1em;
  color: #555;
  text-decoration: none;
  font-weight:500;
}

.liste-billet, .forms-list {
  font-size: 0.9em;
  color: #999;
}


/* GENERAL */
.clear {
  clear: both;
}

/* EVENT LIST */
.ui-control-controls a {
  display: inline-block;
  padding: 8px;
  font-size: 0.9em
}

.ui-control-controls a:first-child {
  border-radius: 6px 0 0 6px;
}

.ui-control-controls a:last-child {
  border-radius: 0 6px 6px 0;
}

.ui-control-horizontal .ui-control-controls {
  display: inline-block;
}

.ui-control-horizontal .select-calendar {
  float: right;
  text-align: right;
}

.ui-control-horizontal .select-calendar select {
  max-width: 13em;
  font-size: 0.9em;
  font-weight: 500;
  padding: .4em 0.5em;
  text-align: left;
}

#list-events .ui-control-horizontal {
  padding: 0.5em;
}

.ui-list-graduate {
  list-style-type: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #ddd;
}

.ui-list-graduate > li {
  background: url('icons/expand_more.svg') top right no-repeat;
  border-bottom: 1px solid #ddd;
  position: relative;
}

.ui-list-graduate li .label {
  padding: 0.4em 0.7em;
  margin: 0;
  display: inline-block
}

.graduate-time {
  line-height: 2em;
}

.ui-list-graduate li .nb-event {
  position: absolute;
  right: 2em;
  top: 0.4em;
  background: transparent url('icons/calendar_today.svg') no-repeat right;
  padding-right: 2.5em;
}

.ui-list-graduate li.open .nb-event {

}

.ui-list-graduate > li:nth-child(odd) {
  background-color: var(--main-bg-color);
}

.ui-list-graduate li.open {
  background: url('icons/expand_less.svg') top right no-repeat;
  border: 0;
}

.ui-list-graduate li.open .label {

}

.ui-list-graduate li ul {
  display: none;
}

.ui-list-graduate li.open ul {

}

#list-events .open .ui-listview {
  display: table;
  width: 100%
}

#list-events .ui-listview li {
  background-color: var(--white);
  display: table-row;
}

#list-events .ui-listview .event-info {
  display: table-cell;
  vertical-align: top;
  padding: 0.5em 0.7em;
  border-bottom: 1px solid #ccc;
}

#list-events .ui-listview .date-event {
  display: table-cell;
  padding: 0.5em 0.7em;
  vertical-align: top;
  font-size: 0.95em;
  color: #999;
  text-align: right;
  border-bottom: 1px solid #ccc;
}

#list-events .ui-listview .date-event strong {
  font-weight: 500;
  color: var(--black);
  white-space: nowrap;
}

#list-events .ui-listview .date-event span {
  white-space: nowrap;
}

.ui-listview .event-calendar {
  font-size: 0.9em;
  padding: 0.5em;
  margin-top: 0.5em;
  max-width: 80%;
  text-overflow: ellipsis;
  line-height: 1em;
  overflow: hidden;
  white-space: nowrap;
}

#list-events .message {
  padding-top: 2em;
  display: inline-block;
  padding-left: 1em;
}

#eventForm {
  padding-top: 2em;
}

#eventForm .title, #eventForm .allDay {
  width: calc(100vw - 4em);
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 2em;
  line-height: 2em;
}

#eventForm .title::placeholder {
  color: var(--main-flashy-color);
}

#eventForm .description {
  width: calc(100vw - 4em);
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 2em;
  border: none;
}

#eventForm .priority, #eventForm .visibility {
  margin-left: 2em;
  margin-top: 1em;
  margin-bottom: 1em;
  display: inline-block;
}

#eventForm .startDate > label, #eventForm .endDate > label {
  width: 3em;
  display: inline-block;
}

#eventForm .title, #eventForm .startDate > input, #eventForm .endDate > input {
  line-height: 2em;
  border: none;
  border-radius: 2px;
}

#eventForm .startDate, #eventForm .endDate {
  display: block;
  margin-bottom: 1em;
  margin-left: 2em;
  float: none;
}

#eventForm .calendars {
  display: block;
  margin-left: 2em;
}

#eventForm .frequency {
  display: block;
  margin-left: 2em;
  margin-bottom: 1em;
}

#eventForm .calendars > select, #eventForm .frequency > select {
  box-sizing: border-box;
  padding: 0.5em;
  background-color: var(--white);
  border-radius: 0.25em;
  border: none;
}

#eventForm .participants {

}

#eventForm .participants > label {
  margin-left: 2em;
}

#eventForm .participants > a {
  background-color: var(--white);
  min-height: 4em;
  display: inline-block;
  width: calc(100vw - 4em);
  margin-left: 2em;
  margin-top: 1em;
  vertical-align: middle;
}

#eventForm .participants > a .selection {
  color: var(--main-font-color);
}

.formMandatoryField {
  color: var(--main-flashy-color);
}

.formIncomplete {
  filter: grayscale(1);
}



.termsOfServiceText {
  text-align: center;
  margin-top: 2em;
  margin-bottom: 2em;
}

.classified_type {
  margin-bottom:0.35em;
}
.classified_type span {
  margin: 0 .25em .15em 0;
  color: #5c5c5c;
  padding:0;
  font-size: 0.9em;
}

.classified_type span:before {
  content:'[ ';
}

.classified_type span:after {
  content:' ]';
}

.classified_price {
  color: var(--secondary-color);
  font-weight:bold;
  font-size: 1.15em;
}

.liste-annonces li h2{
  font-size:1em;
  color:var(--main-font-color);
  font-weight:500;
  padding:0;
  margin:0.25em 0;
}
.liste-annonces li {
  min-height:130px;
  padding:0.15em;
  margin:0;
}
.liste-annonces div.thumbnail {
  width:125px;
  height:125px;
  background-color:var(--main-bg-color);
  float:left;
  text-align:center;
  margin:0 0.50em;
}
.liste-annonces .classified_price {
  margin:0.50em 0 ;
}

.filter-classifield .filter-list {
  width: calc(100% - 6em);
}

.filter-classifield span {
  width: 5em;
  display: inline-block;
  padding-bottom: 1em;
}

.liste-annonces div.thumbnail img{
  margin:auto;
  max-height:125px;
  max-width:125px;
  border-radius: 2px;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
}

.classified_form {
  margin-bottom:1em;
}
.classified_form label{
  font-weight:bold;
}
.classified_form label,
.classified_form .fieldInput{
  font-size:12px;
}
#classified h2 {
  font-size:14px;
  font-weight:500;
  margin:0;
  padding:0;
  width:calc( 100% - 16px - 1em );
  margin-bottom:1em;
}

#classified .btn-validate.contact-announcer {
  margin-top:1em;
}

#classified .classified_price {
  color:var(--white);
  background-color:var(--secondary-color);
  border-radius:6px;
  padding:0.4em 0.5em ;
  font-weight: 500;
  font-size: 1.15em;
  display:inline-block;
  float:right;
  margin-top:0.25em;
}
#classified .classified_pictures {
  position:relative;
}

#classified .classified_creationInfo {
  margin:0.5em 0;
}


#classified .classified_pictures ul {
  list-style-type:none;
  margin:0;
  padding:0;
}
#classified .classified_pictures ul li {
  margin:0;
  padding:0;
}

#classified .classified_pictures ul li img {
  width:98%;
}
#classified .classified_pictures  .classified_pictures_number {
  position:absolute;
  bottom:1em;
  right:0;
  left:0;
  text-align:center;
  color:var(--white);
  text-shadow: 1px 1px 1px rgba(150, 150, 150, 1);
}

#classified .classified_description {
  color:#848484;
  padding:0;
  margin:1em 0 ;
}

#send-message textarea {
  height: 10em;
}

/********* SURVEY ************/

.survey.content {
  padding-top: 2em;
}
.liste-questions.forms-list {
  color:inherit;
  font-size:inherit;
}

.liste-questions.forms-list .label{
  display:block;
  color:var(--black);
  text-decoration:underline;
}

.liste-questions.forms-list .fields > span{
  display:block;
  padding:0.75em 0 0;
}

.liste-questions.forms-list .fields > select,
.liste-questions.forms-list .fields > textarea {
  display:block;
  margin:0.75em 0 0 ;
}

.liste-questions.forms-list .fields .image {
  max-width: 50px;
  margin: 5px;
}

.survey .comment-area {
  padding:1em;
}

.survey .comment-area > span:first-child {
  display:block;
  padding: 0 0 0.75em;
}

.survey .ui-controlgroup-horizontal {
  margin:1.75em auto;
}

.survey .liste-enquete {
  display:table;
  padding-left: 0;
}
.survey .liste-enquete li:first-child {
  background-color:var(--main-font-color) !important;
  color:var(--white);
}
.survey .liste-enquete li {
  display:table-row;
  background-color: var(--white);
}
.survey .liste-enquete li:nth-child(2n+1){
  background-color: #f9f9f9;
}
.survey .liste-enquete .gwt-InlineHTML {
  width:calc( 33% - 2em);
  display:table-cell;
  padding:1em;
  border-bottom:1px solid #CCC
}
.survey .feedback-participation {
  padding:1em;
}

/********* sharebox **************/

.sharesbox .ui-listview.shares a {
  background-color: transparent;
}

.sharesbox .ui-listview.shares  .share-date {
  font-size:90%;
  display:inline-block;
  color : #777;
  user-select: none;
}

.sharesbox .ui-listview.shares  .share-name {
  font-size:90%;
  display:block;
  color: var(--main-border-color);
  user-select: none;
}

.sharesbox .ui-listview.shares .share-link {
  background: url('icons/link.svg') no-repeat;
  height: 24px;
  width: 24px;
  display: block;
  float: left;
  padding-right: 1em;
}

.ui-listview.shares li span {
  display:block;
}
.ui-listview.shares li {
  width: 100%;
  padding: 0.75em 0.75em 0.75em 2em;
  position: relative;
  border-bottom:1px solid  #CCC;
}

.ui-listview.shares li:first-child {
  border-top:1px solid  #CCC;
}

.ui-listview.shares  li:nth-child(odd){
  background-color: #F0F0F0;
}

.ui-listview.shares  li:nth-child(even){
  background-color: var(--white);
}

.field-share {
  padding-top: 1em;
  padding-left: 1em;
}

.header-share, .field-link-share {
  background-color: var(--white);
  margin: 1em;
  padding-bottom: 1em;
}

.field-infos-share {
  margin: 1em;
}

.field-link-share a {
  overflow: hidden;
  text-overflow: clip;
  display: block;
}

/********* favorites **************/
.favorite-desc {
  display: block;
  padding-top: 1em;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#favoris ul li a {
  display: flex;
  align-items: center;
}



/********* notification **************/
.notificationBox .ui-listview.notifications  input {
  position:absolute;
  top:0.5em;
  left:0.25em;
}

.notificationBox .ui-listview.notifications a {
  background-color: transparent;
}

.notificationBox .ui-listview.notifications  .notification-date,
.notificationBox .ui-listview.notifications  .notification-author {
  font-size:90%;
  display:inline-block;
  color : #777;
  user-select: none;
}
.notificationBox .ui-listview.notifications  .notification-source {
  font-size:90%;
  color: var(--main-border-color);
  user-select: none;
}

.notificationBox .ui-listview.notifications .notification-title{
  margin-bottom:0.75em;
  color: var(--black);
  user-select: none;
}

.notificationBox .notification.not-read a .notification-title {
  font-weight: bold;
}

.ui-listview.notifications  li span {
  display:block;
}
.ui-listview.notifications  li{
  padding: 0.75em 0.75em 0.75em 2em;
  position: relative;
  border-bottom:1px solid  #CCC;
}

.ui-listview.notifications li:first-child {
  border-top:1px solid  #CCC;
}

.ui-listview.notifications  li:nth-child(odd){
  background-color: #F0F0F0;
}

.ui-listview.notifications  li:nth-child(even){
  background-color: var(--white);
}

.markAsRead-notification {
  height: 24px;
  width: 24px;
  filter: invert(1);
  background: url('icons/mark_read.svg') no-repeat;
}

.add-action a, .delete-action a, .markAsRead-notification a, .speak-action a, .edit-action a {
  height: 24px;
  width: 24px;
  display: block;
}

/******** FAQ ********/
.faq-categories {
  width: 90vw;
  box-sizing: border-box;
  padding-left: 5vw;
  background-color: var(--white);
  border-radius: 0.25em;
  border: none;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
  padding-right: 5vw;
  line-height: 3em;
  height: 2em;
}

#questionForm .category {
  width: calc(100vw - 4em);
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 2em;



  box-sizing: border-box;

  background-color: var(--white);
  border-radius: 0.25em;
  border: none;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);

  line-height: 3em;
  height: 2em;
}

#questionForm .question {
  width: calc(100vw - 4em);
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 2em;
  border: none;
  line-height: 2em;
}

#questionForm .question::placeholder {
  color: var(--main-flashy-color);
}

#questionForm .description {
  width: calc(100vw - 4em);
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 2em;
  border: none;
}

.question-description {
  padding: 1em;
}


/******** Resources Manager ********/

#resourcesManager .list-resources li.category {
  font-weight: 600;
  color: var(--white);
  background-color: #6fa800;
}
#resourcesManager .list-resources li .gwt-HTML{
  display:block;
}

#resourcesManager .list-reservations {
  margin-top: 2em;
}

#resourcesManager .reservationDate {
  font-weight: 600;
  font-size: 1.1em;
  padding-bottom: 0.5em;
}

#resourcesManager .reservationDate svg {
  vertical-align: middle;
}

#resourcesManager .reservationEvent {
  padding-bottom:1em;
}

#resourcesManager ul .reservation {
  border-radius: 4px;
}

#resourcesManager ul .reservationRessources {
  padding-left: 0;
}

#resourcesManager .reservationRessources li,
#reservationDetail .reservationRessources li {
  display: inline-block;
  margin-right: 5px;
}

#resourcesManager .reservationRessources li.validated,
#reservationDetail .reservationRessources li.validated {
  background-color: #87bd41;
  color: var(--white);
  margin-bottom: 3px;
  border-radius: 50px;
  padding: 5px 10px;
}

#resourcesManager .reservationRessources li.waitingForValidation,
#reservationDetail .reservationRessources li.waitingForValidation {
  background-color: #a7a7a7;
  color: var(--white);
  margin-bottom: 3px;
  border-radius: 50px;
  padding: 5px 10px;
}

#reservationDetail .field {
  padding: 0.5em;
}

#reservationDetail {
  min-height: 100vh;
  margin-top: 2em;
}

#reservationDetail .section {
  background-color: var(--white);
  border-radius: 4px;
  padding: 1em;
  margin-bottom: 1em;
}

#reservationDetail ul.reservationRessources {
  list-style-type: none;
  padding: 1em;
  margin:0;
}

#reservationDetail ul.reservationRessources::after {
  content:' ';
  display:block;
  clear:left;
  height:1em;
}

/* sharing */

#sharing {
  padding: 1em;
}

#sharing .label {
  padding-top: 1em;
}

/**** Cookies information page ****/
.infosTextContainer {
  background-color: var(--white);
  min-height: 25vh;
  padding: 2em;
  margin-left: 1em;
  margin-right: 1em;
  margin-top: 2em;
  border-radius: 0.25em;
}

.infosText {
  min-height: 20vh;
  text-align: justify;
  line-height: 1.2em;
}
.infosTextActions {
  text-align: right;
}

#header #page-infos-title {
  left: 1em;
  right: 1em;
}

/** Profil Page **/

#champs-password input {
  display: block;
  background-color: var(--white);
  height: 2em;
  width: calc(100vw - 2em);
}

/** Ckeditor **/
.ck.ck-reset.ck-editor {
  margin-left: 2em;
  margin-right: 2em;
  margin-top: 1em;
}

.ck-editor__editable_inline {
  min-height: 250px;
}

.ck-powered-by-balloon {
  display: none !important;
}

/** OrgChartGroup */

li.orgachartgroup, li.orgachartuser {
  background-color: var(--white);
  padding: 1em 1em 1em 1em;
  margin-bottom: 1em;
  text-align: center;
  border: 1px solid #e0e0e0;
  margin-left: 2em;
  margin-right: 2em;
  user-select:none;
}

li.orgachartgroup:nth-child(odd), li.orgachartgroup:nth-child(odd)>a {
  background-color: var(--white);
  color: var(--black);
}

li.orgachartgroup:nth-child(even), li.orgachartgroup:nth-child(even)>a {
  background-color: var(--white);
  color: var(--black);
}

li.orgachartuser:nth-child(odd), li.orgachartuser:nth-child(odd)>a {
  background-color: var(--white);
  color: var(--black);
}

li.orgachartuser:nth-child(even), li.orgachartuser:nth-child(even)>a {
  background-color: var(--white);
  color: var(--black);
}

.orgachartuser-infos {
  margin-top: 1em;
}

.orgachartgroup-name {
  display: block;
  margin-bottom: 1em;
  font-size: 1.2em;
}

.orgachartgroup-boss > div.label-boss {
  margin-bottom: 1em;
}

.orgachartuser-avatar, .orgachartgroup-boss > div.boss > img {
  margin-right: 1em;
  width: 3em;
  vertical-align:middle;
}

