/*
 * @(#) common.css Algem Web App 1.7.5 10/09/19
 *
 * Copyright (c) 2015-2019 Musiques Tangentes. All Rights Reserved.
 *
 * This file is part of Algem Web App.
 * Algem Web App 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.
 *
 * Algem Web App 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 Algem Web App. If not, see <http://www.gnu.org/licenses/>.
*/

/*@import url(https://fonts.googleapis.com/css?family=Exo+2:800,700,900);*/
/*@import url('https://fonts.googleapis.com/css?family=Ubuntu');*/
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Condensed');
@font-face {
    font-family: 'Exo 2';
    src: url('../fonts/Exo2-Bold-webfont.eot');
    src: url('../fonts/Exo2-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Exo2-Bold-webfont.woff') format('woff'),
         url('../fonts/Exo2-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Exo2-Bold-webfont.svg#exo_2bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ubuntumedium';
    src: url('../fonts/ubuntu-m-webfont.eot');
    src: url('../fonts/ubuntu-m-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ubuntu-m-webfont.woff2') format('woff2'),
         url('../fonts/ubuntu-m-webfont.woff') format('woff'),
         url('../fonts/ubuntu-m-webfont.ttf') format('truetype'),
         url('../fonts/ubuntu-m-webfont.svg#ubuntumedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ubuntu';
    src: url('../fonts/ubuntu-r-webfont.eot');
    src: url('../fonts/ubuntu-r-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ubuntu-r-webfont.woff2') format('woff2'),
         url('../fonts/ubuntu-r-webfont.woff') format('woff'),
         url('../fonts/ubuntu-r-webfont.ttf') format('truetype'),
         url('../fonts/ubuntu-r-webfont.svg#ubuntu') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?td4dni');
  src:  url('../fonts/icomoon.eot?td4dni#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?td4dni') format('truetype'),
    url('../fonts/icomoon.woff?td4dni') format('woff'),
    url('../fonts/icomoon.svg?td4dni#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-headphones:before {
  content: "\e910";
}
.icon-video-camera:before {
  content: "\e914";
}
.icon-file-music:before {
  content: "\e928";
}
.icon-plus:before {
  content: "\ea0a";
}
.icon-share2:before {
  content: "\ea82";
}

/*
 CSS Reset by Eric Meyer - Released under Public Domain
   http://meyerweb.com/eric/tools/css/reset/
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td
{margin: 0;padding: 0;border: 0;outline: 0;
 font-size: 100%;vertical-align: baseline;
 background: transparent;}
body              {line-height: 1em;}
/*ol, ul            {list-style: none;}*/
blockquote, q     {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';	content: none;}
:focus            {outline: 0;}
ins               {text-decoration: none;}
del               {text-decoration: line-through;}
table             {border-collapse: collapse;border-spacing: 0;}
/*End reset*/

/*GLOBAL ELEMENTS*/
html {height: 100%;}
body {
  height:100%;
  font-family: Verdana,Helvetica,sans-serif;
  color: #444;
}
p, blockquote, pre, ul, ol, dl {
  padding: 0.25em 0;
  line-height: 1.5em;
}
ul {margin: 0 1em;}
ul li {margin: 0.5em}
ul.disc{
  list-style: disc;
  margin:0;
  list-style-position: inside
}
ul.simple {
  list-style-type: none;
  margin: 0;
}
ul.simple > li, ul.disc > li { margin: 0.5em 0;}
ul.simple li:first-child { margin-top: 0;}
ul.horizontal-panel-menu {
  list-style-type: none;
  margin: 0;
  padding:0 0 .8em 0;
}
ul.horizontal-panel-menu li {
  display: inline-block;
  margin: .5em .5em 0 0;
}
.info ul li {margin: 0.5em 0;}
ol {list-style-position: inside;}
dl dt  {font-weight: bold;}
dl dd {margin-left: 1em;}

code {font-family: monospace;font-weight: bold;background-color: #eee;padding: .1em .2em}
sup {font-size: x-small;font-weight: bold;margin-left: .2em}

/*Pure css hack pour restreindre la largeur des menus*/
.custom-restricted-width {
  /* To limit the menu width to the content of the menu: */
  display: inline-block;
  /* Or set the width explicitly: */
  /* width: 10em; */
}

.header-top {
  position: relative;
  height: 7%; /* @see #planning, #title_col in planning.css*/
  /*background-image: url('../img/bg-thumb.png');*/
  background-position: bottom;
  background-repeat: repeat-x;
  box-shadow: 0px 2px 2px 0px #656565;
}
header > nav {
  float: left;
  padding:0.25em 0 0.25em 2.2em;
}
.global {
  padding: 2em 1em;
  width: auto;
  /*hauteur minimale de page*/
  min-height: 80%;
}
footer {
  position: relative;
  background-position: bottom;
  background-repeat: repeat-x;
  width: 100%;
  z-index: 2000;
  /*border-top: 2px solid #666;*/
}
footer > address {
  position: absolute;
  top:0;
  font-style: normal;
  font-size: smaller;
  padding-left: .4em;
  font-family:'Ubuntu Condensed','Arial Narrow',Arial,sans-serif;
}
/*Emplacement du logo*/
footer a.logo {
  position: relative;
  top: -20px; /* -37px */
  left: 60%; /* 75% */
  border: none;
  opacity: 0.8;
}
footer a:hover.logo {opacity: 1;}

/*Force la taille du logo en bas de page*/
footer a.logo img {
  height: 32px;
  border-width: 5px;
  border-style: solid;
  border-color: white;
  border-radius: 10px;
}
/*HEADERS*/
h1 {
  font-family:'Exo 2','Arial Black',sans-serif;
  font-size: 2.2em;
  padding: .1em 0 0 0;
  text-align: center;
  text-transform: uppercase;
  /*text-shadow: 0px 1px 0px rgba(255,255,255,.4), 0px 1px 4px rgba(0,0,0,.3);*/
  line-height: 1.25em;
  color: #ce8600;
}

h1 > span {
  font-size:smaller;
  text-transform: lowercase;
}
/*Padding par défaut des titres de niveau 2 à 5*/
h2, h3, h4, h5, h6, fieldset > legend {
  display: inline-block;
  margin: 0.5em 0;
  padding: 0.20em 0;
  line-height: 1em;
  /*border-radius: 8px*/
}
h2.help > a.img-link, h3.help > a.img-link, h4.help > a.img-link {margin-left: 0}

h2, h3, h4, fieldset > legend {
  font-family: 'ubuntumedium','Segoe UI',Verdana,Helvetica,sans-serif;
  border-bottom-width: 4px;
  border-style: solid;
}
h2 {font-size: 1.75em;}
h3 {font-size: 1.5em;}
h4 {font-size: 1.25em;font-weight: normal}
h5 {font-size: 1.15em;}
h6 {font-size: 1em;}

/*TABLES*/
table tr > th {
  padding: 0 1em;
}
table.vertical-header th, table.vertical-header td {
  text-align: left;
  padding: 0.5em 0 0 1em;
}
table.simple th, table.simple td {padding: 0 0.5em;}
table.condensed th, table.condensed td {padding: 0 0.5em}
.pure-table th, .pure-table-th {font-family: 'ubuntumedium'}
.pure-table-horizontal {border: none;}
.pure-table-horizontal th, .pure-table-horizontal td {
  text-align: left;
  border: none;
}
.pure-table-horizontal th {font-weight: bold;}
.info table th {width: 7em}
table.mobile {
  display: table;
  width: 100%;
}

/*IMAGES*/
.gallery {
  text-align: center;
}
.thumbnails {
  display: inline-block;
  position: relative;
  width: 210px;
  margin: 1em;
  padding: 1em;
  text-align: center;
  border-radius: 10px;
}
.thumbnails > a img {
  opacity: 0.8;
  width: 100%;
}
.thumbnails > a:hover img{
  opacity: 1;
}
/*Ombrage des vignettes*/
.thumbnails-out {
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.8);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.8);
  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.85);
}
/*Effet de survol des vignettes*/
.thumbnails:hover {
  -webkit-box-shadow: inset 0px 0px 8px 3px rgba(0,0,0,0.8);
  -moz-box-shadow: inset 0px 0px 8px 3px rgba(0,0,0,0.8);
  box-shadow: inset 0px 0px 6px 0px rgba(0,0,0,0.8);
}
.photo-id-thumbnail {
  float: left;
  margin-right: 0.5em;
  max-width: 50px;
}
.photo-id-thumbnail:hover{transform:scale(1.05);}

/*BUTTONS*/
.button-success,
.button-error,
.button-warning,
.button-secondary {
  color: white;
  /*border-radius: 4px;*/
  /*text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);*/
}
.button-success {background: rgb(28, 184, 65);} /* this is a green */
.button-error {background: rgb(202, 60, 60);} /* this is a maroon */
.button-warning {background: rgb(223, 117, 20);} /* this is an orange */
.button-secondary {background: rgb(66, 184, 221);} /* this is a light blue */
.button-large {font-size: 110%;background-color: orange;}
.button-xlarge {font-size: 125%;background-color: orange;}
.pure-button {box-shadow: 0px 2px 2px 0px #656565;font-family: ubuntumedium,Arial,sans-serif}
.pure-button:hover {box-shadow: inset 0px 0px 16px 0px #999;}
.bt-close {
  position:relative;
  top:0;
  right: 0;
  padding: 0 1em;
}

/*COMMON CLASSES*/
#busy {display:none;position: fixed;top:50%;left:50%;margin-left: -32px;margin-top: -32px;z-index: 20000;width:64px;height:64px;background:url(../img/loader.svg) no-repeat center transparent;}
/*Espacement en bas de page avant le footer*/
.last-block {height: 2em;}
/*Couleur du texte des erreurs*/
.error {color: red; font-size: smaller}
span.error {display: block;}
.success {color: green;}
.inline {display: inline;}
.bordered {border : 1px solid red;}
/*Centrage d'un bloc*/
.centered {
  box-sizing: border-box;
  width: 50%;
  margin: 0 auto;
}
.indented {padding: 0 1em;}
.framed {
  /*width: 85%;*/
  border: 1px solid #444;
  border-radius: 2px;
  padding: 0.5em;
}
.note {font-size: smaller;}
.footnote {font-size: smaller; line-height: 1.2em}
.warning {background-color: lightpink;}
.option-panel {display: inline-block;margin: 0.4em 0 0.4em 1em;vertical-align: middle}
.ellipsed {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wrapped {display: block;}
.collapse {display: none}
.condensed {font-size: smaller;}

/*LINKS*/
a:link,a:visited, a:hover, a:active {
  text-decoration: none;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  line-height: 1.2em;
}
a.img-link {border: none; margin-left: .4em}
.doc-ref, .doc-icon-ref {font-size: 2em;padding: 0 .1em; margin: 0 .1em;}
.doc-ref {cursor: pointer;}
.doc-link{vertical-align: middle}
img.doc-link{margin-right: .5em}
.doc-link:hover {transform:scale(0.9);}
.doc-plus {opacity: .4;}
.doc-plus:hover {opacity: 1;}
.pure-menu-link:link, .pure-menu-link:visited, .pure-menu-link:active {
  color:#fff8dc;
}
.pure-menu-link:hover {}
.expand {}
.dlg {cursor: pointer}
a.dlg ~ a {
  display: inline-block;
  margin-left: 0.5em;
}
 #previous:link, #previous:visited, #previous:hover, #previous:active, #next:link, #next:visited, #next:hover, #next:active{margin:0 .2em;}

/*NAVIGATION - MENUS */
.pure-menu-list a {border: none;}
.pure-menu {
  position: fixed;
  top: 0;
  right:0;
  height: auto;
  z-index: 1000;
  border-radius: 0 0 0 10px ;
}
#menu {
  position: fixed;
  display: none;
  top:0;
  right:0;
  height: auto;
  text-align: center;
  z-index: 3000;
  border-radius: 0 0 0 10px ;
}
#menu ul {
  list-style-type: none;font-size: 2em;margin:0;padding:0
}
#menu ul li {
  padding:0;
  color: #fff8dc;
}
#menu ul li a {
  color: #fff8dc;
  text-decoration: none;
  border: none;
}
#bottom-menu {
  position:fixed;
  bottom:0;
  width:100%;
  height:40px;
  z-index: 2001; /* above footer */
}
#bottom-menu a:hover {border: none;border-radius: 4px;padding:0.2em 0}
.pure-menu-heading {
  height: 3em;
  margin:0;
  padding:0;
  border-bottom:1px solid #fff8dc;
  text-align: center;
  color:#fff8dc;
}
nav.horizontal-panel-menu,nav.horizontal-panel-menu-p {margin: 0; padding: 0}
#datepicker, #pickerFrom, #pickerTo {
  position: relative;
  z-index: 3000;
}
#datepicker, .week-date {
  position: relative; /* required for z-index */
  font-size: medium;
  text-align: center;
  width: 8em;
  height: 1.25em;
  vertical-align: middle;
  background-color: #eee;
  border: 1px solid gray;
  border-radius: 3px;
  z-index: 2000; /* over footer z-index +1" */
}

#help-menu { float: left; width:20%;}
.help-content {margin-left:20%}
.menu-label {
  display: block;
  font-size: small;
  line-height: .3em;
  font-family: 'Ubuntu Condensed','Arial Narrow',Arial,sans-serif;
  /*font-stretch: condensed;*/
}
/*PANELS*/
#bars {
  position: fixed;
  top: 0;
  right:0;
  font-size: 2em;
  z-index: 2000;
  text-align: center;
  padding: 0.15em 0.5em;
  cursor: pointer;
  color:#444
}
.closing-bar {
  position: relative;
  width: 100%;
  height: 2em;
  text-align: right;
  box-shadow: 0px 2px 2px 0px #656565;
}
.closing-bar + p {
  position: relative;
  top: -1.5em;
  font-size: smaller;
  font-weight: bold;
}
.closing-bar a.close-link {
  font-size: 1.6em;
  padding: 0 0.5em 0 1em;
  line-height: 1em;
  color: white;
  text-decoration: none;
  border: none;
}
.closing-bar ~ div {padding: 0 1em;}
.closeable{}

#help-panel, #info-panel, #login-panel {
  position: absolute;
  top: 7%;
  right:0;
  display: none;
  border: 1px dotted gray;
  /*padding: 1em;*/
  line-height: 1.5em;
  height:auto;
  max-width: 100%;
  padding: 0 0 1em 0;
  z-index:3001;
}
#login-panel {width: 20em;}
#help-panel ul, #info-panel ul {list-style-type: none;}

.colorHelp {
  text-align: center;
  font-size: larger;
  font-weight: bold
}
.panel, #xlogin-panel {padding: 0 1em;}
.doc-icon-panel {margin-top: .4em;}
.doc-icon-panel img {max-height: 100%}

/*JQUERY UI*/
.ui-dialog {z-index: 2002 !important ;}
.ui-dialog-title {font-family: 'ubuntumedium','Segoe UI',Verdana,Helvetica,sans-serif;font-weight: normal}
.ui-widget,#datepicker,.week-date {font-family:'ubuntu',Arial,sans-serif;}
.ui-dialog-titlebar {border: none;}
.ui-dialog-titlebar button.ui-dialog-titlebar-close {border: none}
.ui-dialog .ui-dialog-buttonpane {text-align: center}
.ui-dialog .ui-dialog-buttonpane {padding: .3em .4em .5em .4em;}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {float: none}
.ui-dialog-buttonset button.ui-state-default,
.ui-dialog-buttonset button.ui-state-active,
.ui-dialog-buttonset button.ui-state-hover {
  /*border: 1px solid #555*/
  border: none;
}
.ui-dialog-buttonset button.ui-state-default {background: #0078e7;box-shadow: 0px 2px 2px 0px #656565;}
.ui-dialog-buttonset button.ui-state-active,
.ui-dialog-buttonset button.ui-state-hover {
  background: #0066e7;
  box-shadow: inset 0px 0px 16px 0px #999;
}
.ui-dialog-buttonset button.button-secondary.ui-state-default {background: #42b8dd;box-shadow: 0px 2px 2px 0px #656565;}
.ui-dialog-buttonset button.button-secondary.ui-state-active,
.ui-dialog-buttonset button.button-secondary.ui-state-hover {
  background: #2cb3dd;
  /*box-shadow: 0px 4px 4px 0px #656565;*/
  box-shadow: inset 0px 0px 8px 0px #999;
}
.ui-button-text {color: #fff;font-family: ubuntumedium,Arial,sans-serif;font-weight: normal}
.ui-datepicker-title {color: #444;}
.ui-datepicker-calendar{font-family: 'Trebuchet MS',ubuntu,sans-serif;font-weight: normal}
.ui-datepicker-month, .ui-datepicker-year{font-family: ubuntumedium,sans-serif;font-weight: normal}
#accordion .ui-accordion-content {padding: 1em 0.8em}
#accordion .ui-accordion-icons {padding-left: 1.6em}
#accordion .ui-widget-content {background: white}
/*#accordion .ui-state-active .ui-icon {background-image: url("images/ui-icons_3d3d3d_256x240.png")}*/
#accordion .ui-state-active .ui-icon {background-image: url("images/ui-icons_ffffff_256x240.png")}
#accordion .ui-accordion-header {font-size: larger; font-weight: normal; color: #666}
#accordion h3.ui-state-default {background: #ddd;border: 1px solid #8e846b;}
#accordion h3.ui-state-active {color: white}

/*#bookdate {display: inline-block;width: 6em;padding:0 0.25em;text-align: center}*/
#bookdate {display: inline-block;text-align: center;box-sizing: border-box}

/*FORMS*/
form input[type='text'], input[type='password'], form input[type='button'], form input[type='submit'] {
  display: block;box-sizing: border-box;
}
form input[type='button'], form input[type='submit'] {
  margin-top: 1em
}
form input + span {display: inline;}

input[type=submit] {margin: 1em 0;}
select {font-size: small;}
form label {
  display: inline-block;
  margin-top: 0.5em;
  font-family: 'ubuntumedium','Segoe UI',Verdana,sans-serif;
}
form input[type='checkbox'] ~ label,form input[type='radio'] ~ label {margin-left: .2em;}
fieldset legend {font-size: 1.3em;}
form legend + label {
  display: block;
}
#ajax-login-form input, #login-form input, #signup-form input[type='text'], #signup-form input[type='password'], #signup-form input[type='submit'], #recover-form input {width: 100%}
.pure-g label[class*="pure-u"] {font-family: 'ubuntumedium','Segoe UI',Verdana,sans-serif;vertical-align: middle}
.row-form {margin: 0.5em 0;}
.field-help {font-size: smaller;max-width: 320px;display:none}

#groupInfo > label {width:20%;margin-right:1%}
#groupInfo > select {width:77%;}

.pending {color: red;}
.confirmed {padding: 0;color: green;}
.pseudo {
  display: block;
  font-size: small;
  line-height: 0;
  font-family: 'Ubuntu Condensed','Arial Narrow',Arial,sans-serif;
  font-stretch: condensed;
}

/*MONITORING*/
.monitoring-element {clear: left;}
#follow-up-form div > legend {
  margin:0;
  font-size: smaller;
}
#follow-up-result tbody tr td:first-child {text-align: right}
.follow-up-content, .subContent {padding: 0;}
.follow-up-note, .absent, .excused {
  display: inline-block;
  padding: 0.2em;
  line-height: 1em;
  font-weight: bold;
}
.absent {background-color: #FF5252;color: white;}
.excused {background-color: seagreen;color: white;}
.follow-up-note {background-color: #F7F77C;color: black;}
.cell-edit {background-image : url(../img/edit.svg);background-repeat: no-repeat;background-position:center}

/*POSTITS*/
.postit {
  background-image: url('../img/postit.png');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: top left;
  position: fixed;
  width: 320px;
  height: 350px;
  z-index: 2000;
  opacity: 0.9;
  cursor: pointer;
}
.postit > img {
  position: relative;
  left: 120px;
  margin-bottom: 0;
  padding-bottom: 0;
  /*border: thin solid blue;*/
}
.postit-private {background-image: url('../img/postit02.png');opacity:0.95}
.postit > ul > li:first-child > p:first-child {
  /*padding-top: 00;*/
}
.postit > ul > li > p {
  font-family: ubuntu,sans-serif;
  font-style: italic;
  line-height: 1em;
  padding-top: 0.2em;
  padding-left: 5px;
  padding-right: 10px;
  transform: rotate(1.5deg);
  color: #333;
}
.postit > ul > li > p:last-child {
  color: #666;
  text-align: right;
  font-size: smaller;
  line-height: .6em;
}
.postit footer {
  position: absolute;
  display: block;
  font-size: smaller;
  color: #666;
  bottom: 1em;
  width: 92%;
  text-align: right;
}