@charset "UTF-8";
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * OF4.scss
 *
 * LICENSE: This source file is subject to version 1.0 of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: http://www.openflyers.com/license/semifreelicense1_0.txt. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    CSS
 * @package     OpenFlyers
 * @authors     Stéphane GOOSSENS
 * @copyright   2008 OPENFLYERS S.A.R.L. <stephane.goossens@openflyers.com>
 * @license     http://www.openflyers.com/license/semifreelicense1_0.txt  OpenFlyers License
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @link        https://work.openflyers.com/OF4-Directory-Hierarchy-and-Procedures#Définir-l'emplacement-des-fichiers-de-styles-compilés defines path for OF4.min.css compiled file
 * @since       Wed Apr 08 2020
 * @update      Tue Apr 21 2020
 *
 * imports .scss and .css files
 *
 */
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _functions.scss
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    CSS
 * @package     OpenFlyers
 * @author      Lydie TREMBLET <lydie.tremblet@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Thu Jul 07 2020
 *
 * creates mixins used in .scss files
 */
/* ----- box-shadow  ----- */
/* ----- box-shadow: none ----- */
/* ----- transition ----- */
/* ----- linear gradient  ----- */
/* ----- rotations  ----- */
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _variables.scss
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    CSS
 * @package     OpenFlyers
 * @author      Lydie TREMBLET <lydie.tremblet@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Thu Jul 07 2020
 *
 * creates variables used in .scss files
 */
/* Font for OpenFlyers text in top-bar */
@import url("../../css/lightInterface/jQuery/contextMenu/contextMenu.css");
@import url("../../css/lightInterface/jQuery/jQueryDataTable/jQueryDataTable.css");
@import url("../../css/lightInterface/jQuery/jQueryValidity/jQueryValidity.css");
@import url("../../css/lightInterface/jQueryForked/jQueryLoader/jQueryLoader.css");
@import url("../../css/lightInterface/jQueryForked/jQueryUI/jquery-ui.css");
@import url("../../css/lightInterface/yui/yuiAutoComplete.css");
@import url("../../css/lightInterface/yui/yuiCalendar.css");
@import url("../../css/lightInterface/yui/yuiContainer.css");
@import url("../../css/lightInterface/flexselect/flexselect.css");
@font-face {
  font-family: 'Museo_Slab_700';
  src: url("fonts/Museo_Slab_700/Museo_Slab_700.eot");
  src: url("fonts/Museo_Slab_700/Museo_Slab_700.svg#svgFontName") format("svg"), url("fonts/Museo_Slab_700/Museo_Slab_700.eot?#iefix") format("embedded-opentype"), url("fonts/Museo_Slab_700/Museo_Slab_700.woff") format("woff"), url("fonts/Museo_Slab_700/Museo_Slab_700.ttf") format("truetype"); }
/* OpenFlyersLite Picto-font */
@font-face {
  font-family: 'OpenFlyersLite';
  src: url("fonts/OpenFlyersLite/OpenFlyersLite.eot?qvs6qg");
  src: url("fonts/OpenFlyersLite/OpenFlyersLite.eot?qvs6qg#iefix") format("embedded-opentype"), url("fonts/OpenFlyersLite/OpenFlyersLite.ttf?qvs6qg") format("truetype"), url("fonts/OpenFlyersLite/OpenFlyersLite.woff?qvs6qg") format("woff"), url("fonts/OpenFlyersLite/OpenFlyersLite.svg?qvs6qg#OpenFlyersLite") format("svg");
  font-weight: normal;
  font-style: normal; }
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _base.scss
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    SCSS
 * @package     OpenFlyers
 * @author      Christophe LARATTE <christophe.laratte@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Fri Dec 13 2002
 *
 * used to apply styles that may be used on any page
 */
/* ===============================================================================
   =================================== default ===================================
   =============================================================================== */
* {
  box-sizing: border-box; }

html {
  height: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
  color: #000;
  font-size: 1em;
  text-align: center; }

h1 {
  clear: both;
  margin: 10px 0 0 20px;
  width: auto;
  padding: 0;
  font-size: 1.1em;
  font-weight: bold; }

h2 {
  margin: 0;
  width: 100%;
  padding: 1.6em 0 1.3em 0;
  font-size: 16px;
  font-weight: bold;
  color: #243656; }
  h2:first-of-type {
    padding-top: 0.6em; }

h3 {
  margin: 0;
  width: 100%;
  padding: 1em 0 1em 0;
  font-size: 1.5em;
  font-weight: bold;
  color: #243656; }

h4 {
  margin: 0;
  padding: 1em 0 1em 0;
  font-weight: bold;
  font-size: 1.6em;
  color: #000; }

a {
  color: #167ebf;
  text-decoration: none; }

.blueFont {
  color: #167ebf !important; }

.underline {
  text-decoration: underline; }

/* ========================== pages with main-wrapper (e.g.: login page) ========================== */
.main-wrapper {
  flex: 1 0 auto; }
  .main-wrapper .top-bar {
    z-index: 1; }

/* ========================== contentBox ========================== */
.contentBox {
  position: relative;
  clear: both;
  margin: 0;
  padding: 25px 20px 100px 20px; }
  .contentBox div.spacer {
    clear: both;
    padding: 1em; }
  .contentBox ul {
    font-size: 0.9em; }
  .contentBox li {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    list-style-type: none; }
  .contentBox .structure-identity .logo-link {
    padding: 0;
    background: none; }

/* ========================== mainBox ========================== */
.mainBox {
  clear: both;
  margin: 0 20px 0 20px;
  padding: 0.5em 0.5em 50px 0.5em;
  background-color: #fff; }
  .mainBox#warning_ie_edge {
    display: inline-block; }

/* ========================== #container element styles ========================== */
#container p {
  margin: 0;
  padding: 15px 0 15px 30px; }

/* ========================== small-screen ========================== */
.small-screen {
  display: none; }

/* ========================== pictos font ========================== */
/* ----- attribute method ----- */
[data-picto] {
  display: block;
  position: relative;
  overflow: hidden;
  width: 30px;
  line-height: 30px;
  height: 30px;
  /* picto 1 */
  /* picto 2 */
  /* ----- small picto (i.g. in admin user list ----- */ }
  [data-picto]:hover {
    opacity: 1 !important; }
  [data-picto]:before, [data-picto]:after {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: 'OpenFlyersLite';
    font-size: 16px;
    font-style: normal;
    font-weight: normal; }
  [data-picto]:before {
    content: attr(data-picto); }
  [data-picto]:after {
    content: attr(data-picto-second); }
  [data-picto][data-picto].small {
    width: 15px;
    height: 15px; }
    [data-picto][data-picto].small:before, [data-picto][data-picto].small:after {
      top: -7px;
      left: 0;
      width: 100%;
      height: 100%;
      font-size: 14px; }
    [data-picto][data-picto].small.smartphone:before, [data-picto][data-picto].small.smartphone:after {
      font-size: 13px; }

/* ----- class method ----- */
[class*="picto"] {
  font-family: 'OpenFlyersLite' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  /* Better Font Rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/* ----- pictos inline ----- */
span[data-picto] {
  display: inline;
  line-height: 1; }
  span[data-picto]:before, span[data-picto]:after {
    width: auto; }

/* ----- pictos types ----- */
.picto {
  /* circle */
  /* border */
  /* disabled */
  /* color, font-size and position of picto-fonts */
  /* specific picto : checkbox */
  /* specific picto : multiple-check */
  /* specific picto : new */
  /* specific picto : to-maintenance */ }
  .picto.circle {
    border-radius: 50%; }
    .picto.circle.black {
      background-color: #000 !important; }
  .picto.smallFilledCircle {
    font-size: 1.5em;
    opacity: 0.091; }
    .picto.smallFilledCircle.black, .picto.smallFilledCircle.green {
      background: none !important;
      opacity: 1; }
    .picto.smallFilledCircle.black {
      color: #000 !important; }
    .picto.smallFilledCircle.green {
      color: #44bc47 !important; }
    .picto.smallFilledCircle::before {
      content: '\0025CF';
      background-color: transparent; }
  .picto.border {
    padding: 0;
    border: 1px solid; }
    .picto.border:hover {
      border: 1px solid; }
  .picto.disabled {
    opacity: 0.4;
    cursor: default; }
  .picto.account-entry-update {
    color: #1679A7; }
    .picto.account-entry-update:before {
      top: 1px;
      left: 1px;
      font-size: 23px; }
  .picto.add {
    color: #1679A7; }
    .picto.add.confirm {
      color: #44bc47; }
  .picto.alert:before {
    font-size: 18px; }
  .picto.alert.orange {
    color: #ffb219; }
  .picto.alert.red {
    color: #f72f2f; }
  .picto[class*="balance"] {
    color: #1679A7; }
    .picto[class*="balance"]:before {
      font-size: 24px; }
  .picto.button {
    display: inline-block;
    vertical-align: top; }
  .picto.cart-add {
    color: #1679A7; }
    .picto.cart-add:before {
      top: 0;
      font-size: 19px; }
  .picto.check {
    display: inline-block;
    color: #69AC0B; }
  .picto.check-to-confirm {
    color: #44bc47; }
  .picto.config {
    color: #1679A7; }
  .picto.delete {
    color: #f72f2f; }
  .picto.unlink {
    color: #f72f2f; }
  .picto.details {
    color: #666; }
  .picto.edit {
    color: #1679A7; }
  .picto.edit-disable-sale {
    color: #1679A7; }
    .picto.edit-disable-sale:before {
      font-size: 1.5em; }
  .picto.entry-reverse {
    color: #f72f2f; }
    .picto.entry-reverse:before {
      font-size: 20px; }
  .picto.grey {
    color: #666; }
  .picto.group {
    color: #1679A7; }
    .picto.group:before {
      font-size: 19px; }
  .picto.list {
    color: #666; }
    .picto.list:before {
      font-size: 21px; }
  .picto.list-account-extract {
    color: #666; }
    .picto.list-account-extract:before {
      font-size: 24px; }
  .picto.locker {
    color: #222; }
  .picto.locker-cross {
    color: #222; }
    .picto.locker-cross:after {
      top: 3px;
      left: 3px;
      color: #f72f2f; }
  .picto.menu-activity:before {
    font-size: 14px; }
  .picto.menu-admin:before {
    font-size: 20px; }
  .picto.menu-buy:before {
    font-size: 19px; }
  .picto.menu-communication:before {
    top: 1px;
    font-size: 19px; }
  .picto.menu-import:before {
    font-size: 20px; }
  .picto.menu-planning:before {
    font-size: 17px; }
  .picto.menu-planning-ressources:before {
    font-size: 17px; }
  .picto.menu-planning-utilisateurs:before {
    font-size: 17px; }
  .picto.menu-prepare-flight:before {
    font-size: 19px; }
  .picto.menu-resource:before {
    font-size: 18px; }
  .picto.menu-sale:before {
    font-size: 19px; }
  .picto.menu-user:before {
    font-size: 15px; }
  .picto[class*="place"] {
    color: #666; }
    .picto[class*="place"]:before {
      font-size: 21px; }
  .picto.play {
    color: #222; }
  .picto.disconnect:before {
    font-size: 20px; }
  .picto.reactivate {
    color: #1679A7; }
    .picto.reactivate:before {
      left: -.05em;
      font-size: 1.5em;
      top: -0.5px; }
  .picto.robot {
    color: #44bc47; }
    .picto.robot:before {
      top: -2px; }
  .picto.rubber-stamp-action {
    color: #1679A7; }
    .picto.rubber-stamp-action:before {
      font-size: 20px; }
  .picto.update {
    color: #1679A7; }
    .picto.update:before {
      font-size: 18px; }
  .picto.update-pay {
    color: #1679A7; }
    .picto.update-pay:before {
      top: 0;
      left: 2px;
      font-size: 24px; }
  .picto.validate {
    color: #1679A7; }
  .picto[class*="validate"]:before, .picto[class*="validate"]:after {
    font-size: 21px; }
  .picto.validity, .picto.checkList {
    color: #666; }
    .picto.validity:before, .picto.checkList:before {
      top: -2px;
      font-size: 20px; }
  .picto.checkbox:before, .picto.checkbox:hover {
    color: #888; }
  .picto.checkbox:before {
    font-size: 20px; }
  .picto.checkbox:after {
    display: none; }
  .picto.checkbox.checked:after {
    display: block;
    font-size: 21px;
    color: #69AC0B; }
  .picto.checkbox.dark:before {
    color: #222; }
  .picto.multiple-check:before {
    font-size: 19px; }
  .picto.multiple-check.on:before {
    color: #69AC0B; }
  .picto.multiple-check.off:before {
    color: #ddd; }
  .picto.new {
    width: 14px;
    height: 14px;
    color: #ef441a;
    font-family: 'OpenFlyersLite' !important;
    font-size: 6px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    -border-radius: 50%; }
    .picto.new:before {
      top: 4px;
      width: 16px;
      font-size: 13px; }
  .picto[class*="to-maintenance"] {
    width: 15px;
    height: 13px;
    font-size: 13px; }
    .picto[class*="to-maintenance"]:before {
      top: -8px;
      width: 100%;
      height: 100%;
      font-size: 13px; }
  .picto.to-maintenance-0 {
    color: #222; }
  .picto.to-maintenance-1 {
    color: #78d043; }
  .picto.to-maintenance-2 {
    color: #f5b92a; }
  .picto.to-maintenance-3 {
    color: #f73131; }
  .picto.to-maintenance-4 {
    -webkit-animation: blink 0.7s ease-in infinite;
    -moz-animation: blink 0.7s ease-in infinite;
    -ms-animation: blink 0.7s ease-in infinite;
    -o-animation: blink 0.7s ease-in infinite;
    animation: blink 0.7s ease-in infinite;
    color: #f73131; }
@keyframes blink {
  50% {
    opacity: 0.3; } }
/* ----- to-maintenance picto in span -----*/
span.picto[class*="to-maintenance"] {
  margin-right: 15px; }
  span.picto[class*="to-maintenance"]:before {
    top: -1px;
    margin-right: 15px; }

/* ========================== button ========================== */
.button {
  display: inline-block;
  cursor: pointer;
  position: relative;
  font-family: Verdana, sans-serif;
  text-align: center;
  font-size: 12px;
  vertical-align: middle;
  font-style: normal;
  white-space: initial;
  -moz-appearance: none;
  -webkit-appearance: none; }
  .button:disabled {
    cursor: default;
    opacity: 0.33; }
  .button:focus {
    outline: none; }
  .button.rounded {
    height: 30px;
    padding: 0;
    line-height: 30px;
    padding: 0 10px;
    text-align: left;
    -ms-border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    border: none; }
    .button.rounded.bts .picto {
      display: block;
      float: left;
      height: 15px;
      margin: 7px 7px 0 0;
      line-height: 1.3;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      width: 7px;
      background-image: url(img/arrow-right.svg); }
    .button.rounded.bts .txt {
      display: block;
      float: left;
      color: #fff; }
    .button.rounded.dark-blue {
      background: #5c85ab; }
    .button.rounded.link-blue {
      background: #167ebf; }
  .button.flat {
    padding: 7.5px 10px;
    color: #666;
    border: none;
    background: #ddd;
    border-radius: 2px; }
    .button.flat.big {
      padding: 10px 12px;
      border-radius: 3px; }
    .button.flat.blue {
      color: #fff;
      background: #167ebf; }
    .button.flat.red {
      color: #fff;
      background: #ea3e3e; }
  .button.light {
    padding: 0;
    border: none; }
  .button.outline {
    background: transparent;
    border-style: solid;
    border-width: 1px;
    padding: 0 5px; }
    .button.outline.deficit {
      color: #e83e3e; }
  .button.single-link {
    padding: 7.5px 10px;
    color: #167ebf; }
  .button.simple {
    padding: 0 20px;
    color: #fff; }
  .button.switch.surplus {
    color: #003801;
    background: #edfded; }
  .button.switch.deficit {
    color: #520101;
    background: #fdebeb; }
  .button.switch:first-child:not(:last-child) {
    border-radius: 3px 0 0 3px;
    border-right: 1px solid #fff; }
  .button.switch:last-child:not(:first-child) {
    border-radius: 0 3px 3px 0; }

/* ========================== button-with-text (i.g. button to create flow or encashment in account extract table footer) ========================== */
.button-with-text {
  display: block;
  margin-bottom: .5em; }
  .button-with-text:last-child {
    margin-bottom: 0; }
  .button-with-text > * {
    display: block; }
  .button-with-text .picto {
    line-height: 30px; }
    .button-with-text .picto:before, .button-with-text .picto:after {
      width: 28px; }
  .button-with-text .txt {
    font-weight: normal;
    font-size: .7em;
    padding: .3em 0; }

/* ========================== processing ========================== */
.processing {
  position: relative;
  margin: 13px 0 0 5px;
  -webkit-animation: 1s processingAppear ease-in infinite;
  -moz-animation: 1s processingAppear ease-in infinite;
  -ms-animation: 1s processingAppear ease-in infinite;
  -o-animation: 1s processingAppear ease-in infinite;
  animation: 1s processingAppear ease-in infinite; }
  .processing:before, .processing:after {
    content: "";
    position: absolute;
    top: 0;
    width: 4px;
    height: 4px;
    background-color: rgba(143, 71, 70, 0); }
  .processing:before {
    left: 8px;
    -webkit-animation: 1s processingAppearBefore ease-in infinite;
    -moz-animation: 1s processingAppearBefore ease-in infinite;
    -ms-animation: 1s processingAppearBefore ease-in infinite;
    -o-animation: 1s processingAppearBefore ease-in infinite;
    animation: 1s processingAppearBefore ease-in infinite; }
  .processing:after {
    left: 16px;
    -webkit-animation: 1s processingAppearAfter ease-in infinite;
    -moz-animation: 1s processingAppearAfter ease-in infinite;
    -ms-animation: 1s processingAppearAfter ease-in infinite;
    -o-animation: 1s processingAppearAfter ease-in infinite;
    animation: 1s processingAppearAfter ease-in infinite; }

@-webkit-keyframes processingAppear {
  0% {
    background-color: rgba(143, 71, 70, 0); }
  14% {
    background-color: #8f4746; }
  84% {
    background-color: #8f4746; }
  100% {
    background-color: rgba(143, 71, 70, 0); } }
@-moz-keyframes processingAppear {
  0% {
    background-color: rgba(143, 71, 70, 0); }
  14% {
    background-color: #8f4746; }
  84% {
    background-color: #8f4746; }
  100% {
    background-color: rgba(143, 71, 70, 0); } }
@-ms-keyframes processingAppear {
  0% {
    background-color: rgba(143, 71, 70, 0); }
  14% {
    background-color: #8f4746; }
  84% {
    background-color: #8f4746; }
  100% {
    background-color: rgba(143, 71, 70, 0); } }
@-o-keyframes processingAppear {
  0% {
    background-color: rgba(143, 71, 70, 0); }
  14% {
    background-color: #8f4746; }
  84% {
    background-color: #8f4746; }
  100% {
    background-color: rgba(143, 71, 70, 0); } }
@keyframes processingAppear {
  0% {
    background-color: rgba(143, 71, 70, 0); }
  14% {
    background-color: #8f4746; }
  84% {
    background-color: #8f4746; }
  100% {
    background-color: rgba(143, 71, 70, 0); } }
@-webkit-keyframes processingAppearBefore {
  28% {
    background-color: rgba(143, 71, 70, 0); }
  42% {
    background-color: #8f4746; }
  84% {
    background-color: #8f4746; }
  100% {
    background-color: rgba(143, 71, 70, 0); } }
@-moz-keyframes processingAppearBefore {
  28% {
    background-color: rgba(143, 71, 70, 0); }
  42% {
    background-color: #8f4746; }
  84% {
    background-color: #8f4746; }
  100% {
    background-color: rgba(143, 71, 70, 0); } }
@-ms-keyframes processingAppearBefore {
  28% {
    background-color: rgba(143, 71, 70, 0); }
  42% {
    background-color: #8f4746; }
  84% {
    background-color: #8f4746; }
  100% {
    background-color: rgba(143, 71, 70, 0); } }
@-o-keyframes processingAppearBefore {
  28% {
    background-color: rgba(143, 71, 70, 0); }
  42% {
    background-color: #8f4746; }
  84% {
    background-color: #8f4746; }
  100% {
    background-color: rgba(143, 71, 70, 0); } }
@keyframes processingAppearBefore {
  28% {
    background-color: rgba(143, 71, 70, 0); }
  42% {
    background-color: #8f4746; }
  84% {
    background-color: #8f4746; }
  100% {
    background-color: rgba(143, 71, 70, 0); } }
@-webkit-keyframes processingAppearAfter {
  42% {
    background-color: rgba(143, 71, 70, 0); }
  56% {
    background-color: #8f4746; }
  84% {
    background-color: #8f4746; }
  100% {
    background-color: rgba(143, 71, 70, 0); } }
@-moz-keyframes processingAppearAfter {
  42% {
    background-color: rgba(143, 71, 70, 0); }
  56% {
    background-color: #8f4746; }
  84% {
    background-color: #8f4746; }
  100% {
    background-color: rgba(143, 71, 70, 0); } }
@-ms-keyframes processingAppearAfter {
  42% {
    background-color: rgba(143, 71, 70, 0); }
  56% {
    background-color: #8f4746; }
  84% {
    background-color: #8f4746; }
  100% {
    background-color: rgba(143, 71, 70, 0); } }
@-o-keyframes processingAppearAfter {
  42% {
    background-color: rgba(143, 71, 70, 0); }
  56% {
    background-color: #8f4746; }
  84% {
    background-color: #8f4746; }
  100% {
    background-color: rgba(143, 71, 70, 0); } }
@keyframes processingAppearAfter {
  42% {
    background-color: rgba(143, 71, 70, 0); }
  56% {
    background-color: #8f4746; }
  84% {
    background-color: #8f4746; }
  100% {
    background-color: rgba(143, 71, 70, 0); } }
/* ========================== contentBox_breaker ========================== */
.contentBox_breaker {
  clear: both; }

/* ========================== lightSpacer ========================== */
.lightSpacer {
  clear: both;
  padding: 0;
  border: 0;
  margin: 0;
  visibility: hidden;
  font-size: 0; }

/* ========================== uppercase ========================== */
.uppercase {
  text-transform: uppercase; }

/* ========================== div.center ========================== */
div.center {
  clear: both;
  padding: 5px;
  border: 1px;
  /* replace border: 1; fixe W3C error */
  margin: 0 auto;
  width: auto; }

/* ========================== Icons symbolizing profile rights ========================== */
.userConnectedMode,
.kioskMode,
.userConnectedModeNoFilling {
  padding-left: 13px;
  background-position: left center;
  background-repeat: no-repeat; }

.userConnectedMode {
  background-image: url(img/userinfo_connected.gif); }

.kioskMode {
  background-image: url(img/userinfo_kiosk.gif); }

.userConnectedModeNoFilling {
  background-image: url(img/connectedNoFilling.png); }

/** level Container */
.levelContainer {
  margin-top: 5px;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  text-align: center;
  /** level */ }
  .levelContainer .level {
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    align-self: center;
    text-align: center;
    border-radius: 50%;
    border: 1px solid; }
    .levelContainer .level.rightWithLevelSix {
      background-color: #fff;
      border-color: #fff;
      color: #444; }
    .levelContainer .level.profileWithLevelSix {
      background-color: #444;
      border-color: #444;
      color: #fff; }

/* ========================== external link ========================== */
.contentBox a[href*="http"]:not(.doc):not(.logo-link),
#alertContainer a[href*="http"] {
  background: url("img/external-link.svg") no-repeat right center;
  background-size: 10px;
  padding-right: 15px; }

/* ========================== txt-small ========================== */
.txt-small {
  padding-top: 1em;
  font-size: 0.8em; }

/* ========================== validCheck (submit in old style forms, i.g. in product) ========================== */
.validCheck {
  height: 25px;
  width: auto;
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  line-height: 25px;
  text-align: center;
  color: #555;
  background-image: url(img/validCheck.jpg);
  background-size: 1px 100%;
  border: 1px solid #BAAB94; }
  .validCheck:hover {
    color: #333;
    background-image: url(img/validCheckHover.jpg);
    cursor: pointer;
    border: 1px solid #A09280; }

/* ========================== alignments ========================== */
.alignCenter {
  text-align: center; }

.alignLeft {
  text-align: left; }
  .alignLeft img {
    max-height: 120px; }

.alignRight {
  text-align: right; }

/* ========================== simpleWarning ========================== */
.simpleWarning {
  color: #ea3e3e; }

/* ========================== simpleOrangeWarning ========================== */
.simpleOrangeWarning {
  color: #fba303; }

/* ========================== largeText ========================== */
.largeText {
  font-size: 1.3em !important; }

/* ========================== displayNone ========================== */
.displayNone {
  display: none !important; }

/* ========================== alert messages ========================== */
[class*="warning"] {
  width: auto;
  margin: 0.3em;
  padding: 0.8em 1em;
  font-size: .8em;
  font-weight: normal;
  text-align: left;
  border: 1px solid;
  border-radius: 5px; }
  [class*="warning"] .alertItem:before {
    content: " · "; }
  [class*="warning"] .alertItemIndent {
    margin-left: 7em; }

.warningRed,
.warning {
  color: #ea3e3e;
  background: #fff0ee; }
  .warningRed > *,
  .warning > * {
    vertical-align: middle; }

.warningOrange {
  color: #fba303;
  background: #fcfaf5; }

.warningGreen {
  color: #78af28;
  background: #f3f7ee; }

.alert-container [class*="warning"] {
  margin: .3em 0; }

/*=================================== successMessage ==================================*/
/* The message displayed when an operation is successful such as importing a statement */
/* ---If we want the message to be bounded, we need to add the class 'warningGreen'--- */
.successMessage {
  clear: both;
  color: green;
  font-weight: bold;
  text-align: center;
  display: inline-block; }

.greenCheckedItalic {
  clear: both;
  color: #69AC0B;
  font-style: italic;
  display: inline-block; }

/* ========================== pricingGreen ========================== */
.pricingGreen {
  clear: both;
  color: green;
  font-weight: bold; }

#progressbar {
  width: 300px;
  margin: 2em auto; }

/*=================================== alertMessageCaption ==================================*/
/** The message displayed when there are alerts
  * To indicate that values ​​are incorrect
  * Such as aeral export statistics
  */
.alertMessageCaption {
  color: #f72f2f;
  display: flex;
  font-style: italic;
  font-size: 0.8em; }
  .alertMessageCaption.withPicto::before {
    content: "\e94b";
    font-family: 'OpenFlyersLite' !important;
    margin-right: .5em; }

/*=================================== infoMessageCaption ==================================*/
/** The message displayed when there are notifications
  * To indicate rules or some instructions
  * Such as aeral export statistics
  */
.infoMessageCaption {
  color: #666;
  font-style: italic;
  font-size: 0.8em; }
  .infoMessageCaption ul {
    margin: 0;
    padding: 0;
    list-style-position: inside;
    /* Makes sure bullets start at the very beginning */ }
    .infoMessageCaption ul li {
      margin-left: 0;
      /* Ensures no left indentation */
      list-style-type: disc;
      /* Default bullet point style */ }

/* ========================== redColor ========================== */
/* The red color could used for the text of the alert messages and required fields sign */
.redColor {
  color: #f72f2f; }

/* ========================== bold text (i.g. in expired validity alerts on login) ========================== */
.bold {
  font-weight: bold !important; }

/* ========================== platform-test-banner ========================== */
.platform-test-banner {
  display: none;
  width: 0;
  height: 0; }

.platform-test .platform-test-banner {
  display: block;
  z-index: 1;
  position: relative; }
  @media (max-width: 1023px) {
    .platform-test .platform-test-banner {
      pointer-events: none;
      touch-action: none; }
      .platform-test .platform-test-banner *::before,
      .platform-test .platform-test-banner *::after {
        pointer-events: none; } }
  .platform-test .platform-test-banner > .inner {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px; }
    .platform-test .platform-test-banner > .inner .content {
      width: 185px;
      height: 26px;
      line-height: 26px;
      -webkit-transform: rotate(-45deg) translateX(-55px) translateY(-20px);
      -moz-transform: rotate(-45deg) translateX(-55px) translateY(-20px);
      -ms-transform: rotate(-45deg) translateX(-55px) translateY(-20px);
      transform: rotate(-45deg) translateX(-55px) translateY(-20px);
      font-size: 0.8em;
      color: rgba(255, 255, 255, 0.85);
      background: #ca3a37;
      opacity: 0.9; }
.platform-test:not(.expendableDesign) .platform-test-banner {
  top: auto !important; }
  .platform-test:not(.expendableDesign) .platform-test-banner .hide {
    position: fixed;
    top: 45px; }

/* ========================== ui-autocomplete ========================== */
.ui-autocomplete.user-list {
  max-height: 60%;
  overflow-x: hidden;
  overflow-y: scroll; }

.ui-autocomplete .progressionLevel .sticker {
  min-height: 25px; }
.ui-autocomplete .progressionLevel .txt {
  padding: 0.3em 0.5em;
  font-size: 0.9em;
  line-height: 1.3em; }
.ui-autocomplete .ui-menu-item .ui-corner-all.ui-state-hover {
  margin: 0;
  color: #000;
  border: none;
  background: #37B9FF;
  border-radius: 0; }

/* ========================== input-image-container ========================== */
.input-image-container {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
  width: 30px;
  height: 30px;
  margin: .1em; }
  .input-image-container.margin-right {
    margin-right: .5em; }
  .input-image-container:hover .picto.checkbox:not(.disabled):after {
    display: block;
    font-size: 21px;
    color: #69AC0B; }
  .input-image-container:hover .picto.checkbox:not(.disabled).checked:after {
    display: none; }
  .input-image-container > * {
    position: absolute;
    left: 0; }
  .input-image-container input[type="image"],
  .input-image-container img {
    top: 0;
    width: 100%;
    height: 100%; }
  .input-image-container input[type="image"]:focus {
    outline: none; }
  .input-image-container.with-text {
    display: block;
    margin-top: 5px;
    width: auto;
    height: 30px; }
    .input-image-container.with-text .txt {
      margin-left: 35px;
      line-height: 30px;
      font-size: .95em;
      color: #787878; }

/* ========================== staticPicto-container (i.g. in validity edit page for OCR) ========================== */
.staticPicto-container {
  display: flex; }
  .staticPicto-container .txt {
    line-height: 30px;
    font-size: .76em;
    color: #787878; }
  .staticPicto-container.failed .picto,
  .staticPicto-container.failed .txt {
    color: #8f4746; }
  .staticPicto-container.passed .txt {
    color: #44bc47; }

/* ========================== collapse-btn (i.g. on login page) ========================== */
.collapse-btn {
  display: flex;
  justify-content: center;
  align-items: center; }
  .collapse-btn > .inner {
    display: block;
    position: relative;
    width: 17px;
    height: 17px;
    border: 1px solid;
    background-color: white; }
    .collapse-btn > .inner > * {
      display: block; }
    .collapse-btn > .inner .stroke {
      position: absolute;
      top: 7px;
      left: 4px;
      width: 8px;
      height: 1px;
      background: #000; }
  .collapse-btn.closed > .inner .stroke.two {
    display: block;
    transform: rotate(90deg); }
  .collapse-btn.accountingDocumentCollapseButton {
    margin-right: 10px; }

/* ========================== toggle-switch (i.g. in accoun extract for lettering) ========================== */
.toggle-switch {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center; }
  .toggle-switch.disabled .label-toggle {
    color: #666; }
  .toggle-switch.disabled .togglePicto {
    cursor: not-allowed; }
  .toggle-switch .togglePicto {
    /* togglePicto with uppercase in order to avoid conflicts with picto-font styles */
    position: relative;
    cursor: pointer;
    width: 30px;
    height: 30px; }
    .toggle-switch .togglePicto > * {
      position: absolute; }
    .toggle-switch .togglePicto .background {
      margin-top: 7px;
      width: 100%;
      height: 15px;
      background: #aaa;
      border-radius: 8px; }
    .toggle-switch .togglePicto .circle {
      left: -5px;
      margin-top: 5px;
      width: 20px;
      height: 20px;
      background: #ddd;
      border-radius: 10px;
      transition: all .1s ease; }
  .toggle-switch .label-toggle:not(.txt-small) .previousLabelToggle {
    font-size: 0.85em;
    color: #222; }
  .toggle-switch .label-toggle {
    padding-left: .75em;
    padding-bottom: .25em; }
  .toggle-switch .previousLabelToggle {
    padding-right: .75em; }
  .toggle-switch.block {
    display: block; }
  .toggle-switch.active .togglePicto .circle {
    left: 15px; }
  .toggle-switch.active .togglePicto .background {
    background: #44bc47; }
  .toggle-switch.small-screen {
    display: none; }
  .toggle-switch.not-visible {
    display: none; }
  .toggle-switch.visible {
    display: flex; }
    .toggle-switch.visible.block {
      display: block; }
    .toggle-switch.visible.small-screen {
      display: none; }

/* ========================== n-states-switch  (i.g. in validity list page) ========================== */
.n-states-switch {
  display: flex;
  user-select: none;
  border-radius: 5px; }
  .n-states-switch .switch-state {
    display: flex;
    align-items: center;
    padding: .75em;
    text-align: center;
    font-size: .8em;
    border-style: solid;
    border-color: #ccc;
    border-width: 1px 1px 1px 0;
    transition: all .3s ease; }
    .n-states-switch .switch-state:first-child {
      border-left-width: 1px;
      border-radius: 5px 0 0 5px; }
    .n-states-switch .switch-state:last-child {
      border-radius: 0 5px 5px 0; }
    .n-states-switch .switch-state:hover {
      background-color: #ccc; }
    .n-states-switch .switch-state.selected {
      color: #fff;
      background-color: #566c92;
      border-color: #566c92; }
    .n-states-switch .switch-state.disabled {
      color: #808080;
      background-color: #e0e0e0;
      border-color: #e0e0e0; }
    .n-states-switch .switch-state:not(.selected):not(.disabled) {
      cursor: pointer; }

/* ========================== wiki-code (i.g. structure info on login page) ========================== */
.wiki-code h1,
.wiki-code h2,
.wiki-code h3,
.wiki-code h4,
.wiki-code h4,
.wiki-code h5,
.wiki-code h6 {
  margin: 1em 0;
  padding: 0;
  font-weight: normal;
  text-decoration: underline;
  color: #000; }
.wiki-code h3,
.wiki-code h4,
.wiki-code h5,
.wiki-code h6 {
  margin-left: 1.6em;
  font-size: .9em; }
.wiki-code h1 {
  font-size: 1.2em; }
  .wiki-code h1:first-child {
    margin: 0 0 1em 0; }
.wiki-code h2 {
  font-size: 1.1em; }
.wiki-code span[style*="color"] {
  color: #b73c3c !important; }

/* ========================== emphasis ========================== */
.emphasis {
  padding: .55em .4em;
  font-size: .9em;
  background-color: #f2fcff;
  border: 1px solid #abd9e4; }
  .emphasis h2 {
    font-size: 1.13em;
    line-height: 1.3em;
    font-weight: normal; }
  .emphasis .link {
    font-size: .8em; }
  .emphasis .col-container {
    display: flex;
    justify-content: center; }
    .emphasis .col-container .col {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 .75em;
      border-style: solid;
      border-color: #ddd;
      border-width: 0 1px 0 1px; }
      .emphasis .col-container .col .button.flat {
        margin: 0.5em 0 0.5em 0; }
      .emphasis .col-container .col:first-child {
        border-width: 0 1px 0 0; }
      .emphasis .col-container .col:last-child {
        border-width: 0 0 0 0; }

/* ========================== structure-identity ========================== */
.structure-identity {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  padding: 45px 2em 15px 2em; }
  .structure-identity [class*="logo"],
  .structure-identity [class*="name"] {
    display: block; }
  .structure-identity .logo {
    max-height: 90px; }
  .structure-identity .name-link {
    margin: 15px 0 0 0;
    padding: 0 15px 0 15px; }
  .structure-identity .name {
    margin: 15px 0 0 0;
    font-size: 1.3em;
    color: #243656; }
  .structure-identity .name-link .name {
    margin: 0 0 0 0; }

/* ========================== context-menu-list ========================== */
.context-menu-list {
  overflow: visible !important; }

/* ========================== training styles ========================== */
.progressionDisplay:not(.inTHead) {
  padding: 0;
  width: 115px; }

.progressionLevel {
  display: flex;
  clear: both;
  overflow: hidden;
  width: 100%;
  text-align: left; }
  .progressionLevel:last-child > [class] {
    border-bottom: none; }
  .progressionLevel > * {
    display: block; }
  .progressionLevel .sticker {
    width: 50px;
    border-bottom: 1px solid #eee; }
  .progressionLevel .txt {
    width: calc(100% - 50px);
    padding: 1.25em 0.8em;
    border-bottom: 1px solid #ddd; }
    .progressionLevel .txt .sec {
      padding-top: 0.15em;
      font-size: 0.95em;
      color: #888; }
  .progressionLevel.levelPresentation .sticker {
    background-color: #ceccc7; }
  .progressionLevel.levelInProgress .sticker {
    background-color: #e6ce91; }
  .progressionLevel.levelToConsolidate .sticker {
    background-color: #d4b157; }
  .progressionLevel.levelAcquired .sticker {
    background-color: #648e15; }

.lastLevelReached {
  padding: 0.5em 0.5em 0 0.5em;
  font-size: 0.9em; }
  .lastLevelReached .progressionLevel.small .txt {
    padding: 0.5em;
    color: #666; }

/* ========================== expendableDesign (managed by javascript/expandableDesign.js) ========================== */
.expendableDesign #alertContainer {
  position: relative;
  z-index: 2; }
.expendableDesign .platform-test-banner {
  position: fixed;
  z-index: 101; }
.expendableDesign .secondary-bar {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 3; }

/* ===============================================================================
   ============================== with menu states ===============================
   =============================================================================== */
.secondary-bar.hide,
.secondary-bar.minimize {
  box-sizing: border-box;
  padding-left: 45px; }

/* ===============================================================================
   ========================== hide at page scroll ================================
   =============================================================================== */
.secondary-bar.hide,
.secondary-bar.show {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3; }

/* ===============================================================================
   ================================ responsive ===================================
   =============================================================================== */
@media only screen and (max-width: 767px) {
  /* ---large-screen and small-screen : hide elements that shall only be visible on large screens and show elements only visible for small screens --- */
  .large-screen {
    display: none; }

  .small-screen {
    display: block; }

  .toggle-switch.large-screen {
    display: none; }
    .toggle-switch.large-screen.visible {
      display: none; }
  .toggle-switch.small-screen {
    display: flex; }
    .toggle-switch.small-screen.not-visible {
      display: none; }
    .toggle-switch.small-screen.visible {
      display: flex; }

  .emphasis .col-container .col {
    padding: 0 .5em; }

  /** level Container */
  .levelContainer {
    display: flex;
    justify-content: left;
    align-content: left;
    align-items: left;
    text-align: left; } }
/* ===============================================================================
   ========================= small screen : minimize =============================
   =============================================================================== */
.secondary-bar.minimize {
  top: 0; }

/* ===============================================================================
   =================================== print =====================================
   =============================================================================== */
@media only print {
  body {
    background: #fff;
    color: #000;
    font-family: Verdana, sans-serif;
    font-size: 0.9em;
    margin: 0;
    padding: 0;
    text-align: center; }

  a {
    text-decoration: none;
    color: #000; }

  textarea {
    max-width: 250px; }

  .displayNone {
    display: none; }

  html.platform-test .platform-test-banner {
    display: none; }

  .secondary-bar {
    display: none; }

  .contentBox {
    padding-top: 0 !important; } }
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _accounting.scss
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    SCSS
 * @package     OpenFlyers
 * @author      Christophe LARATTE <christophe.laratte@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Fri Dec 13 2002
 *
 * used to apply styles on accounting info
 */
td.balance {
  text-align: right;
  font-weight: bold;
  color: #3371A8; }
td.notValidated {
  text-align: right;
  font-weight: bold;
  color: #28a752; }
td.validated {
  text-align: right;
  font-weight: bold;
  color: #000; }

.thTotal {
  padding: 0.3em 1.8em 0.3em 0.3em; }

.negativeBalance {
  text-align: right;
  color: #F00;
  font-weight: bold; }

.positiveBalance {
  text-align: right;
  color: #3371A8;
  font-weight: bold; }

/* ----- select month (i.g. in flow validation) ----- */
#selectMonth {
  text-align: right;
  width: 100%;
  background-color: #fff; }
  #selectMonth div {
    margin-right: 0;
    padding-right: 30px; }
  #selectMonth.center {
    padding: 0;
    text-align: center; }
    #selectMonth.center #dateSelection {
      margin: 0; }

/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _ephemeris.scss
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    SCSS
 * @package     OpenFlyers
 * @author      Christophe LARATTE <christophe.laratte@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Fri Dec 13 2002
 *
 * used to apply styles on ephemeris (planning pages)
 */
/* ===============================================================================
   =================================== default ===================================
   =============================================================================== */
#ephemeris {
  align-self: center;
  border: 1px solid rgba(0, 0, 0, 0.2);
  display: table;
  table-layout: fixed;
  position: relative;
  margin: auto;
  height: 35px;
  padding: 1px 5px;
  border-radius: 5px;
  margin-left: 10px; }
  #ephemeris #ephemeris-ul {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0; }
    #ephemeris #ephemeris-ul li:first-child .picto:before {
      height: 25px !important; }
    #ephemeris #ephemeris-ul li:last-child .picto:before {
      height: 25px !important; }
    #ephemeris #ephemeris-ul li {
      display: flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      list-style-type: none;
      padding: 0em .3em; }
      #ephemeris #ephemeris-ul li .picto:before, #ephemeris #ephemeris-ul li .picto:after {
        font-size: 28px !important; }
      #ephemeris #ephemeris-ul li:first-child {
        padding-left: 0; }
      #ephemeris #ephemeris-ul li:last-child {
        padding-right: 0; }
      #ephemeris #ephemeris-ul li span {
        display: inline;
        line-height: 1.3em;
        color: #000; }
      #ephemeris #ephemeris-ul li .moment {
        font-size: 0.65em; }
      #ephemeris #ephemeris-ul li .hour {
        font-size: 0.8em;
        padding-left: 3px; }

/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _validity.scss
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    SCSS
 * @package     OpenFlyers
 * @author      Christophe LARATTE <christophe.laratte@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Fri Dec 13 2002
 */
.incompleteValidity {
  background-color: #fff0ee; }
  .incompleteValidity:hover {
    background-color: #fde6e4 !important; }

/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _currentActionBar.scss
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    SCSS
 * @package     OpenFlyers
 * @author      Christophe LARATTE <christophe.laratte@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Fri Dec 13 2002
 *
 * used to apply styles on current action bar witch gives users information about current page.
 */
/* ===============================================================================
  =================================== default ===================================
  =============================================================================== */
.currentActionBar {
  display: block;
  box-sizing: border-box;
  margin: 0;
  height: 45px;
  padding: 0 0 0 20px;
  text-align: left;
  line-height: 45px;
  white-space: nowrap;
  font-weight: normal;
  font-size: 12px;
  color: #000; }
  .currentActionBar .item {
    display: inline;
    position: relative;
    padding-left: 0;
    margin-left: 0;
    color: #000; }
    .currentActionBar .item:first-child {
      padding: 0;
      margin: 0; }
    .currentActionBar .item:last-child {
      color: #243555;
      font-weight: bold; }
  .currentActionBar .separator {
    display: inline;
    margin: 0 4px;
    font-size: 11px;
    font-weight: normal;
    color: #bbb; }

/* ===============================================================================
   =============================== small screen ==================================
   =============================================================================== */
@media (max-width: 767px) {
  .currentActionBar {
    padding: 0 0 0 5px;
    white-space: normal;
    font-size: 10px;
    color: #555; }
    .currentActionBar .item {
      display: none; }
      .currentActionBar .item:last-child {
        display: block;
        margin: 0;
        padding: 0;
        color: inherit;
        font-weight: inherit; }
    .currentActionBar .separator {
      display: none; } }
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _footer.scss
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    SCSS
 * @package     OpenFlyers
 * @author      Christophe LARATTE <christophe.laratte@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Fri Dec 13 2002
 *
 * used used to apply style on footer
 */
/* ===============================================================================
   =================================== default ===================================
   =============================================================================== */
.footer {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  padding: 20px;
  color: #fff;
  text-align: left;
  background-color: #243656; }
  .footer a {
    color: inherit; }
  .footer .client,
  .footer .of-presentation {
    line-height: 1.4em; }
  .footer .client {
    width: 25%;
    font-size: .75em; }
    .footer .client .title {
      color: #aabace; }
  .footer .of-presentation {
    width: 35%;
    font-size: .65em;
    opacity: .6; }
  .footer .support {
    display: flex;
    justify-content: flex-end;
    margin-top: 3px;
    width: 40%; }
    .footer .support > * {
      margin-right: 10px; }
      .footer .support > *:last-child {
        margin-right: 0; }

/* ===============================================================================
   ================================ small screen =================================
   =============================================================================== */
@media only screen and (max-width: 767px) {
  .footer {
    display: block; }
    .footer > [class] {
      width: 100%; }
    .footer .of-presentation {
      margin-top: 5px; }
    .footer .support {
      justify-content: flex-start;
      margin-top: 13px; } }
/* ===============================================================================
   =================================== print =====================================
   =============================================================================== */
@media only print {
  .footer {
    display: none; } }
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _form.scss
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    SCSS
 * @package     OpenFlyers
 * @author      Christophe LARATTE <christophe.laratte@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Fri Dec 13 2002
 *
 * used to apply style on forms
 */
/* ================ form ================ */
form .mainBox {
  padding-bottom: 0; }

/* ================ generic form ================ */
span.label {
  float: left;
  width: 40%;
  padding: 1px 0 0 10px;
  text-align: right;
  font-size: 1.25em;
  color: #787878; }

.forceInline {
  display: inline !important; }

span.formw {
  display: block;
  float: left;
  text-align: left;
  margin: 0;
  width: auto;
  padding: 0 0 0em 0.5em; }
  span.formw a > img {
    max-height: 6em; }
  span.formw.has-autoComplete {
    display: flex; }
    span.formw.has-autoComplete input::-webkit-calendar-picker-indicator {
      display: none !important; }
  span.formw.isCellContent {
    width: 100%; }
    span.formw.isCellContent input[type=text] {
      width: 99%; }
  span.formw > span.pictoWithInput {
    margin-left: -2em; }
    span.formw > span.pictoWithInput.lock:after {
      content: "\e912";
      color: #44bc47;
      font-family: 'OpenFlyersLite' !important; }
    span.formw > span.pictoWithInput.unlock:before {
      content: "\e914";
      color: #ef441a;
      font-family: 'OpenFlyersLite' !important; }
    span.formw > span.pictoWithInput.unlock:after {
      content: "\e913";
      color: #ef441a;
      font-family: 'OpenFlyersLite' !important; }

input[type=datetime-local],
input[type=time],
input[type=button],
input[type=email],
input[type=tel],
input[type=text],
input[type=search],
input[type=submit],
input[type=password],
button,
select,
textarea {
  min-height: 20px;
  border: 1px solid #88A; }

select {
  padding: 1px 0 0 0; }

select:focus {
  outline: none; }

/* input of type number */
.input-number-container {
  display: inline-block; }

.input-number-container input[type=number]::-webkit-inner-spin-button,
.input-number-container input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

.input-number-container input[type=number],
.input-number-container input[type=button] {
  text-align: center;
  background: white;
  border: 1px solid #88A; }

.input-number-container input[type=number] {
  -moz-appearance: textfield;
  border-left: none;
  border-right: none;
  min-height: 20px;
  max-width: 80px !important; }

/* clear button */
.formw button {
  background-color: transparent;
  display: none;
  vertical-align: middle;
  outline: 0;
  cursor: pointer;
  margin-left: -2em;
  height: inherit;
  bottom: .35em; }
  .formw button[data-picto]::before {
    font-size: 1em; }

/* arrow down picto */
.formw .arrow-down {
  -moz-pointer-events: none;
  -webkit-pointer-events: none;
  -ms-pointer-events: none;
  pointer-events: none;
  cursor: not-allowed;
  opacity: 1;
  margin-left: -2.9em;
  font-size: 0.8em; }

/* i.g. in admin user list */
input.userSearch {
  width: 250px; }

/* ----- password checker ----- */
.pwdCaption {
  padding: 5px;
  font-size: .7em;
  border-style: solid;
  border-color: #f8f8f8;
  border-width: 0 1px 0 0; }

.pwdCaption:first-child {
  border-radius: 5px 0 0 5px; }

.pwdCaption:last-child {
  border: 0;
  border-radius: 0 5px 5px 0; }

[class*="pwdCheckColor"] {
  color: rgba(255, 255, 255, 0.8); }

.pwdCheckColor0 {
  /* No password */
  color: #777;
  background: #dcdcdc; }

.pwdCheckColor1 {
  /* Password : low level */
  background: #ff5d48; }

.pwdCheckColor2 {
  /* Password : medium level */
  background: #efc24d; }

.pwdCheckColor3 {
  /* Password : high level */
  background: #a6d81d; }

.pwdCheckColor4 {
  /* Password : very high level */
  background: #3ABB1C; }

/* ================ fieldHintTooltip ================ */
/**
CSS class to style tooltips (hints) attached to form input fields
Usage:
- Displays a small floating message above or near a field
- Can be shown or hidden dynamically via JavaScript
*/
.fieldHintTooltip {
  position: absolute;
  background: #666;
  color: #fff;
  padding: .5em 1em;
  border-radius: .2em;
  font-size: .75em; }

/* ================ form in contentBox ================ */
.contentBox form {
  clear: both;
  margin: 20px 0 0 0;
  font-size: 0.9em; }

.contentBox form:first-of-type {
  margin: 0; }

/* ================ button-row ================ */
.contentBox form .button-row {
  display: flex;
  justify-content: center; }

.contentBox form .button-row .form-field {
  margin: 0;
  padding: 0.6em 0.25em; }

/* ================ form-field ================ */
.contentBox form .form-field {
  overflow: hidden;
  clear: both;
  padding: 0.6em 1em;
  margin: 0 2.5em;
  font-size: 0.8em; }
  .contentBox form .form-field.planningAlert {
    margin: 1.5em 2.9em 0 0; }

/* this class add a border of a div container */
.hasBorder {
  padding: 0 1em !important;
  border-radius: 5px;
  border: #ddd solid 1px;
  background-color: #f8f8f8 !important;
  font-size: 0.8em; }

/* --- form-field alerts --- */
.contentBox form .form-field.required {
  /* must be the same background and border colors as .warningRed in base.css */
  background: rgba(255, 240, 238, 0);
  border-color: rgba(234, 62, 62, 0);
  animation: formAlertRequired 0.5s forwards; }

@keyframes formAlertRequired {
  100% {
    background: #fff0ee;
    border-color: #ea3e3e; } }
.contentBox form .form-field.updating {
  background: rgba(250, 251, 205, 0);
  border-color: rgba(225, 228, 23, 0);
  animation: formAlertUpdating 8s forwards; }

@keyframes formAlertUpdating {
  00% {
    background: rgba(250, 251, 205, 0);
    border-color: rgba(225, 228, 23, 0); }
  20% {
    background: #fafbcd;
    border-color: #e1e417; }
  60% {
    background: #fafbcd;
    border-color: #e1e417; }
  70% {
    background: rgba(250, 251, 205, 0.3);
    border-color: rgba(225, 228, 23, 0.3); }
  100% {
    background: rgba(255, 252, 212, 0.3);
    border-color: rgba(225, 228, 23, 0.3); } }
/* --- label-checkbox --- */
.contentBox form .form-field .label-checkbox {
  padding-left: .5em; }

/* --- infoIcon (question mark tooltip for disabled profiles) --- */
.infoIcon {
  cursor: help;
  color: #666;
  font-weight: bold;
  font-size: 10px;
  display: inline-block;
  width: 10px;
  height: 10px;
  line-height: 8px;
  text-align: center;
  border: 1px solid #999;
  border-radius: 50%;
  margin-left: 4px;
  background-color: #f0f0f0; }
  .infoIcon:hover {
    background-color: #e5e5e5;
    border-color: #666; }

/* ================ form button-container in contentBox ================ */
.contentBox [class*="button-container"] {
  float: right;
  padding: 0 0 1em 0; }

.contentBox [class*="button-container"]:last-child {
  padding-top: 1em; }

/* ================ form with columns (new form) ================ */
.contentBox .form-inner,
.contentBox .form-inner .col-container .form-col,
.contentBox .form-inner .col-container .form-field,
.contentBox .form-inner .col-container .form-field .formw input[type="text"],
.contentBox .form-inner .col-container .form-field .formw input[type="number"],
.contentBox .form-inner .col-container .form-field .formw input[type="search"],
.contentBox .form-inner .col-container .form-field .formw input[type="password"],
.contentBox .form-inner .col-container .form-field .formw input[type="datetime-local"],
.contentBox .form-inner .col-container .form-field .formw input[type="time"],
.contentBox .form-inner .col-container .form-field .formw.hasGridContainer .input-number-container input[type=number],
.contentBox .form-inner .col-container .form-field .formw.hasGridContainer .input-number-container input[type=button],
.contentBox .form-inner .col-container .form-field textarea {
  box-sizing: border-box; }

.contentBox .form-inner {
  clear: both;
  text-align: left; }
  .contentBox .form-inner > .form-options > .form-button-container .combobox .inner {
    border-color: #167ebf; }
    .contentBox .form-inner > .form-options > .form-button-container .combobox .inner #dateContainer {
      display: flex;
      align-items: center; }
  .contentBox .form-inner.width95 {
    width: 95.15%;
    margin-right: auto;
    margin-left: auto; }
    .contentBox .form-inner.width95 .form-button-container .form-field:not(.combobox) {
      margin: 0 !important; }
    .contentBox .form-inner.width95 > .form-options > .form-button-container {
      width: auto; }
    .contentBox .form-inner.width95 > .form-options > .form-field-container {
      flex-grow: 1; }
      .contentBox .form-inner.width95 > .form-options > .form-field-container .combobox {
        width: 100%; }
        .contentBox .form-inner.width95 > .form-options > .form-field-container .combobox .inner {
          width: 100%; }
          .contentBox .form-inner.width95 > .form-options > .form-field-container .combobox .inner .formw {
            width: 100%; }
            .contentBox .form-inner.width95 > .form-options > .form-field-container .combobox .inner .formw #comments {
              width: 100%; }

/* --- .form-inner --- */
#container .form-inner {
  font-size: 1.1em; }

.contentBox .form-inner [class*="warning"]:not(.inFormOptions) {
  margin: 1em 0 1.5em 0;
  font-size: .9em;
  line-height: 1.4em; }

.contentBox .form-inner h2,
.contentBox .form-inner h3 {
  float: left;
  width: auto;
  font-weight: normal;
  text-align: left; }

.contentBox .form-inner > h2 {
  padding: 0.3em 0 1em 0;
  font-size: 1.5em; }
  .contentBox .form-inner > h2 > span {
    color: red; }

/* --- form-field-container --- */
.contentBox .form-inner .form-options .form-field-container {
  display: flex;
  justify-content: flex-start;
  padding: 0.5em 0 0.5em 0;
  float: left; }

.contentBox .form-inner .form-options .form-field-container > * {
  margin: 0 0.5em 0 0;
  padding: 0; }

.contentBox .form-inner .form-options .form-field-container > *:First-child {
  margin: 0 0.5em 0 0; }

/* --- form-button-container --- */
.contentBox .form-inner .form-button-container {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 0.5em 0; }

.contentBox .form-inner .form-button-container > * {
  margin: 0 0.5em 0 0.5em;
  padding: 0; }

.contentBox .form-inner .form-button-container > *:last-child {
  margin: 0; }

.contentBox .form-inner .col-container .form-field.submit-container input[type="submit"].button.flat {
  border: none;
  font-family: Verdana, sans-serif; }

/* --- form-options (choices above and below. I.g. in user validity page) --- */
.contentBox .form-inner .form-options {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  clear: both;
  overflow: hidden;
  margin: 1em 0 0 0; }
  .contentBox .form-inner .form-options.flexBoxWithSpaceBetween {
    justify-content: space-between; }
    .contentBox .form-inner .form-options.flexBoxWithSpaceBetween > .combobox {
      width: auto; }
    .contentBox .form-inner .form-options.flexBoxWithSpaceBetween > .n-states-switch {
      width: auto;
      min-height: 35px; }
    .contentBox .form-inner .form-options.flexBoxWithSpaceBetween > .form-button-container {
      width: auto;
      max-width: 45%; }
    .contentBox .form-inner .form-options.flexBoxWithSpaceBetween > .form-field-container.hasToggleSwitch {
      padding-left: 1em;
      padding-top: 0.1em;
      padding-bottom: 0.1em; }
      .contentBox .form-inner .form-options.flexBoxWithSpaceBetween > .form-field-container.hasToggleSwitch.hasPreviousTitle {
        padding-left: .5em; }
    .contentBox .form-inner .form-options.flexBoxWithSpaceBetween.withoutMargin {
      margin: 0; }
  .contentBox .form-inner .form-options:first-of-type {
    margin: 0 0 1em 0; }
  .contentBox .form-inner .form-options > * {
    margin: 0; }
  .contentBox .form-inner .form-options .form-field {
    padding: 0; }
    .contentBox .form-inner .form-options .form-field.flexBox {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.5em !important; }
      .contentBox .form-inner .form-options .form-field.flexBox > * {
        display: flex; }
      .contentBox .form-inner .form-options .form-field.flexBox .label {
        padding-right: .5em; }
      .contentBox .form-inner .form-options .form-field.flexBox .deletMarge.alignLeft {
        display: flex;
        align-items: center;
        justify-content: center;
        grid-gap: .5em; }
    .contentBox .form-inner .form-options .form-field > * {
      width: auto; }
    .contentBox .form-inner .form-options .form-field .label {
      padding: 0;
      font-size: 1em;
      font-weight: normal;
      color: #222; }
  .contentBox .form-inner .form-options .combobox {
    padding: 0; }
    .contentBox .form-inner .form-options .combobox > .inner {
      display: flex;
      align-items: center;
      float: left;
      min-height: 35px;
      padding: 0.5em;
      border-style: solid;
      border-width: 1px;
      border-color: #ccc;
      border-radius: 5px; }
      .contentBox .form-inner .form-options .combobox > .inner .label {
        width: auto; }
      .contentBox .form-inner .form-options .combobox > .inner .formw {
        width: auto;
        min-width: 50px; }
    .contentBox .form-inner .form-options .combobox .formw select {
      width: 100%; }
  .contentBox .form-inner .form-options > .combobox {
    width: 27%; }
  .contentBox .form-inner .form-options > .n-states-switch {
    justify-content: flex-end;
    width: 28%; }
  .contentBox .form-inner .form-options > .form-button-container {
    padding: 0;
    width: 45%; }
    .contentBox .form-inner .form-options > .form-button-container > .inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      float: right;
      padding-left: 0.5em;
      border-style: solid;
      border-color: #167ebf;
      border-width: 1px;
      border-radius: 5px; }
      .contentBox .form-inner .form-options > .form-button-container > .inner > * {
        margin: 0;
        padding: 0; }
      .contentBox .form-inner .form-options > .form-button-container > .inner select {
        max-width: 200px; }
      .contentBox .form-inner .form-options > .form-button-container > .inner .toggle-switch .togglePicto {
        float: left;
        margin: 3px 0 0 7px; }
      .contentBox .form-inner .form-options > .form-button-container > .inner .toggle-switch .label-toggle {
        margin-left: 36px;
        line-height: 33px;
        font-size: .7em; }
      .contentBox .form-inner .form-options > .form-button-container > .inner .button {
        min-width: 75px;
        margin: 0 0 0 .5em;
        border-radius: 0 2px 2px 0; }
    .contentBox .form-inner .form-options > .form-button-container .combobox {
      float: right; }
      .contentBox .form-inner .form-options > .form-button-container .combobox > .inner .label {
        margin: 0 5px 0 0; }
  .contentBox .form-inner .form-options + .toggle-switch {
    margin-top: 10px; }

/* --- form-options-two-elements ( in export accounting page and close accounting page ) --- */
.contentBox .form-inner .form-options-two-elements > .combobox {
  width: 55%; }

/* --- col-container --- */
.contentBox .form-inner .col-container,
.contentBox .form-inner .col-container .form-col {
  border-style: solid;
  border-color: #ddd; }
  .contentBox .form-inner .col-container .toggle-switch,
  .contentBox .form-inner .col-container .form-col .toggle-switch {
    justify-content: left;
    padding: 0.5em; }
  .contentBox .form-inner .col-container .grid-container,
  .contentBox .form-inner .col-container .form-col .grid-container {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, max-content); }
    .contentBox .form-inner .col-container .grid-container div,
    .contentBox .form-inner .col-container .form-col .grid-container div {
      justify-self: end; }
      .contentBox .form-inner .col-container .grid-container div:not(.toggle-switch *),
      .contentBox .form-inner .col-container .form-col .grid-container div:not(.toggle-switch *) {
        align-self: self-end; }
      .contentBox .form-inner .col-container .grid-container div.label-toggle,
      .contentBox .form-inner .col-container .form-col .grid-container div.label-toggle {
        align-self: center; }

.contentBox .form-inner .col-container {
  display: flex;
  flex-flow: row wrap;
  clear: both;
  margin-bottom: 0.5em;
  background: #f8f8f8;
  border-width: 0 0 1px 1px; }
  .contentBox .form-inner .col-container.hasBorders {
    border-width: 1px; }
  .contentBox .form-inner .col-container.summaryTableContainer {
    background-color: transparent;
    border-width: 0 0 0px 1px; }
    .contentBox .form-inner .col-container.summaryTableContainer * {
      background: #f8f8f8; }

/* --- textes not in form-field --- */
.contentBox .form-inner .col-container .form-txt {
  display: block;
  padding: .5em;
  font-size: .8em; }

/* --- form-field in .col-container --- */
.contentBox .form-inner .col-container [class*="form-field"] {
  display: block;
  text-align: left;
  margin: 0; }
  .contentBox .form-inner .col-container [class*="form-field"].sameRow {
    display: flex; }

.contentBox .form-inner .col-container .form-field {
  padding: 0.5em;
  text-align: left;
  margin: 0;
  border-style: solid;
  border-width: 1px;
  border-color: transparent;
  font-size: 0.8em;
  border-radius: 3px; }

.contentBox .form-inner .col-container .form-field .label,
.contentBox .form-inner .col-container .form-field .formw {
  float: none;
  width: 100%; }

/** drag and drop upload file input field */
.contentBox .form-inner .col-container .form-field .formw .uploadedFileListDiv {
  background-color: #fff;
  outline: 2px dashed #aaa;
  min-height: 50px;
  max-height: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }
  .contentBox .form-inner .col-container .form-field .formw .uploadedFileListDiv.isDragOver {
    background-color: #aaa; }
  .contentBox .form-inner .col-container .form-field .formw .uploadedFileListDiv > label strong {
    text-decoration: underline;
    color: #167ebf;
    cursor: pointer; }
    .contentBox .form-inner .col-container .form-field .formw .uploadedFileListDiv > label strong:hover {
      color: #aaa; }
  .contentBox .form-inner .col-container .form-field .formw .uploadedFileListDiv input {
    display: none; }

.contentBox .form-inner .col-container .form-field .label,
.contentBox .form-inner .col-container .form-field .label-checkbox {
  font-weight: bold; }

.contentBox .form-inner .col-container .form-field.greenItalic .label {
  color: #44bc47;
  font-style: italic; }
.contentBox .form-inner .col-container .form-field .label {
  display: block;
  text-align: left;
  padding: 0 0 0.65em 0;
  font-size: 1em;
  color: #000; }
.contentBox .form-inner .col-container .form-field .introductionSentence {
  font-size: .9em;
  font-style: italic;
  display: inline-block;
  margin-bottom: 1em; }
.contentBox .form-inner .col-container .form-field input[type=number].hasNumberStep {
  border: 1px solid #ccc; }
  .contentBox .form-inner .col-container .form-field input[type=number].hasNumberStep::-webkit-inner-spin-button, .contentBox .form-inner .col-container .form-field input[type=number].hasNumberStep::-webkit-outer-spin-button {
    -webkit-appearance: none; }
.contentBox .form-inner .col-container .form-field a.dashedLink {
  border-bottom: 1px dashed;
  color: #000;
  font-size: 1.2em; }

.contentBox .form-inner .col-container .form-field input[type="checkbox"] {
  margin: 0; }

.contentBox .form-inner .col-container .form-field .formw input[type="email"],
.contentBox .form-inner .col-container .form-field .formw input[type="tel"],
.contentBox .form-inner .col-container .form-field .formw input[type="text"]:not(.flexselect),
.contentBox .form-inner .col-container .form-field .formw input[type="number"].hasNumberStep,
.contentBox .form-inner .col-container .form-field .formw input[type="search"],
.contentBox .form-inner .col-container .form-field .formw input[type="password"],
.contentBox .form-inner .col-container .form-field .formw input[type="file"],
.contentBox .form-inner .col-container .form-field .formw input[type="datetime-local"],
.contentBox .form-inner .col-container .form-field .formw input[type="time"],
.contentBox .form-inner .col-container .form-field textarea {
  width: 100%; }

.contentBox .form-inner .col-container .form-field .formw input[type="text"] {
  max-width: 100%; }

.contentBox .form-inner .col-container .form-field input[type="email"]:focus,
.contentBox .form-inner .col-container .form-field input[type="tel"]:focus,
.contentBox .form-inner .col-container .form-field input[type="text"]:focus,
.contentBox .form-inner .col-container .form-field input[type="number"].hasNumberStep:focus,
.contentBox .form-inner .col-container .form-field input[type="password"]:focus,
.contentBox .form-inner .col-container .form-field input[type="submit"]:focus,
.contentBox .form-inner .col-container .form-field input[type="datetime-local"]:focus,
.contentBox .form-inner .col-container .form-field input[type="time"]:focus,
.contentBox .form-inner .col-container .form-field .formw.hasGridContainer .input-number-container input[type=number]:focus,
.contentBox .form-inner .col-container .form-field .formw.hasGridContainer .input-number-container input[type=button]:focus,
.contentBox .form-inner .col-container .form-field textarea:focus {
  outline: none; }

.contentBox .form-inner .col-container .form-field .formw input[type="email"],
.contentBox .form-inner .col-container .form-field .formw input[type="tel"],
.contentBox .form-inner .col-container .form-field .formw input[type="text"],
.contentBox .form-inner .col-container .form-field .formw input[type="number"].hasNumberStep,
.contentBox .form-inner .col-container .form-field .formw input[type="search"],
.contentBox .form-inner .col-container .form-field .formw input[type="password"],
.contentBox .form-inner .col-container .form-field .formw input[type="datetime-local"],
.contentBox .form-inner .col-container .form-field .formw input[type="time"],
.contentBox .form-inner .col-container .form-field textarea {
  padding: 3px;
  font-size: 1em;
  border-color: #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; }

.contentBox .form-inner .col-container .form-field .formw.hasGridContainer .input-number-container input[type=number],
.contentBox .form-inner .col-container .form-field .formw.hasGridContainer .input-number-container input[type=button] {
  font-size: 1em;
  border-color: #ccc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; }

.contentBox .form-inner .col-container .form-field .formw.hasGridContainer .input-number-container {
  /*
  * Style for increment/decrement buttons inside numeric input components
  * The minus and plus buttons get rounded corners on opposite sides
  * Visually framing the central number input as a single control
  */ }
  .contentBox .form-inner .col-container .form-field .formw.hasGridContainer .input-number-container input[type=number] {
    width: 44%;
    border-radius: 0; }
  .contentBox .form-inner .col-container .form-field .formw.hasGridContainer .input-number-container input[type=button] {
    /**
    * 20% -> Each button takes up 20% of the container width
    * (leaving ~60% for the central number input)
    */
    width: 20%;
    /**
    * Targets the decrement button (id contains "minus1"):
    * border-radius: 3px 0 0 3px (rounded on the left side)
    */
    /**
    * Targets the increment button (id contains "add1"):
    * border-radius: 0 3px 3px 0 (rounded on the right side)
    */ }
    .contentBox .form-inner .col-container .form-field .formw.hasGridContainer .input-number-container input[type=button][id*="minus1"] {
      border-radius: 3px 0 0 3px; }
    .contentBox .form-inner .col-container .form-field .formw.hasGridContainer .input-number-container input[type=button][id*="add1"] {
      border-radius: 0 3px 3px 0; }

.contentBox .form-inner .col-container .form-field .formw input[type="datetime-local"],
.contentBox .form-inner .col-container .form-field .formw input[type="time"],
.contentBox .form-inner .col-container .form-field .formw.hasGridContainer .input-number-container input[type=number],
.contentBox .form-inner .col-container .form-field .formw.hasGridContainer .input-number-container input[type=button] {
  font-family: Verdana, sans-serif; }

.contentBox .form-inner .col-container .form-field .formw input[type="email"],
.contentBox .form-inner .col-container .form-field .formw input[type="datetime-local"],
.contentBox .form-inner .col-container .form-field .formw input[type="time"],
.contentBox .form-inner .col-container .form-field .formw.hasGridContainer .input-number-container input[type=number],
.contentBox .form-inner .col-container .form-field .formw.hasGridContainer .input-number-container input[type=button],
.contentBox .form-inner .col-container .form-field .formw input[type="tel"],
.contentBox .form-inner .col-container .form-field .formw input[type="text"],
.contentBox .form-inner .col-container .form-field .formw input[type="number"].hasNumberStep,
.contentBox .form-inner .col-container .form-field .formw input[type="search"],
.contentBox .form-inner .col-container .form-field .formw input[type="password"] {
  height: 28px; }

.contentBox .form-field.combobox {
  max-width: 100%; }

.contentBox table .form-field.combobox .formw {
  width: 100%; }
  .contentBox table .form-field.combobox .formw select {
    width: 100%; }

.contentBox .form-inner .col-container .form-field textarea {
  font-family: Verdana, sans-serif; }

.contentBox .form-inner .col-container .form-field .formw input[type="tel"]:focus,
.contentBox .form-inner .col-container .form-field .formw input[type="email"]:focus,
.contentBox .form-inner .col-container .form-field .formw input[type="text"]:focus,
.contentBox .form-inner .col-container .form-field .formw input[type="number"].hasNumberStep:focus,
.contentBox .form-inner .col-container .form-field .formw input[type="search"]:focus,
.contentBox .form-inner .col-container .form-field .formw input[type="password"]:focus,
.contentBox .form-inner .col-container .form-field .formw input[type="datetime-local"]:focus,
.contentBox .form-inner .col-container .form-field .formw input[type="time"]:focus,
.contentBox .form-inner .col-container .form-field .formw.hasGridContainer .input-number-container input[type=number]:focus,
.contentBox .form-inner .col-container .form-field .formw.hasGridContainer .input-number-container input[type=button]:focus,
.contentBox .form-inner .col-container .form-field textarea:focus {
  border-color: #1679A7;
  border-width: 1px;
  box-shadow: none; }

.contentBox .form-inner .col-container .form-field .label-checkbox {
  font-size: 1em; }

.contentBox .form-inner .col-container .form-field .label-checkbox.raw-checkbox {
  font-weight: normal; }

.contentBox .form-inner .col-container .form-field .toggle-switch {
  justify-content: flex-start; }
  .contentBox .form-inner .col-container .form-field .toggle-switch .label-toggle {
    font-size: inherit;
    font-weight: bold; }

.contentBox .form-inner .col-container .form-field .staticPicto-container .txt {
  font-size: .95em; }

.contentBox .form-inner .col-container .form-field .formw {
  padding-left: 0; }
  .contentBox .form-inner .col-container .form-field .formw [class*="warning"] {
    display: inline-block;
    margin: 0.3em 0;
    font-size: inherit; }
  .contentBox .form-inner .col-container .form-field .formw .n-states-container {
    display: flex;
    margin: 0 0 .75em 0; }
    .contentBox .form-inner .col-container .form-field .formw .n-states-container.column {
      flex-direction: column; }
      .contentBox .form-inner .col-container .form-field .formw .n-states-container.column .text {
        margin: 0 0 .5em 0; }
    .contentBox .form-inner .col-container .form-field .formw .n-states-container.row {
      align-items: center; }
      .contentBox .form-inner .col-container .form-field .formw .n-states-container.row .text {
        margin: 0 .5em 0 0; }
    .contentBox .form-inner .col-container .form-field .formw .n-states-container .n-states-switch .switch-state {
      font-size: 1em; }
  .contentBox .form-inner .col-container .form-field .formw.has-autoComplete button {
    bottom: 0;
    right: .5em; }
  .contentBox .form-inner .col-container .form-field .formw.hasGridContainer {
    /* Use CSS Grid to lay out children */
    display: grid;
    /* Space between grid items */
    gap: 0.5rem;
    /* Vertically center items in their grid cells */
    align-items: center;
    /** Start of time input style section */
    /** End of time input style section*/
    /* By default, only one column (all items stacked vertically) */
    grid-template-columns: auto;
    /* If the container has at least two children */ }
    .contentBox .form-inner .col-container .form-field .formw.hasGridContainer .timeInputWithBtn {
      display: inline-block;
      position: relative; }
      .contentBox .form-inner .col-container .form-field .formw.hasGridContainer .timeInputWithBtn > input[type="text"] {
        padding-right: 1.8em;
        box-sizing: border-box;
        font: inherit; }
      .contentBox .form-inner .col-container .form-field .formw.hasGridContainer .timeInputWithBtn > .timePickerTrigger {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        padding: 0;
        border: none;
        outline: none;
        box-shadow: none;
        background: transparent;
        cursor: pointer;
        z-index: 1; }
        .contentBox .form-inner .col-container .form-field .formw.hasGridContainer .timeInputWithBtn > .timePickerTrigger[data-picto]::before {
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: auto;
          line-height: 1;
          font-size: 1.2em;
          opacity: 0.5; }
        .contentBox .form-inner .col-container .form-field .formw.hasGridContainer .timeInputWithBtn > .timePickerTrigger:hover[data-picto]::before {
          opacity: 0.9; }
      .contentBox .form-inner .col-container .form-field .formw.hasGridContainer .timeInputWithBtn > .timePickerPopup {
        position: fixed;
        z-index: 9999;
        display: flex;
        background: #fff;
        border: 1px solid #b0b0b0;
        border-radius: 4px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
        overflow: hidden; }
        .contentBox .form-inner .col-container .form-field .formw.hasGridContainer .timeInputWithBtn > .timePickerPopup.displayNone {
          display: none; }
        .contentBox .form-inner .col-container .form-field .formw.hasGridContainer .timeInputWithBtn > .timePickerPopup ul {
          list-style: none;
          margin: 0;
          padding: 0;
          width: 52px;
          max-height: 200px;
          overflow-y: auto;
          scrollbar-width: thin; }
          .contentBox .form-inner .col-container .form-field .formw.hasGridContainer .timeInputWithBtn > .timePickerPopup ul li {
            padding: 6px 0;
            text-align: center;
            cursor: pointer;
            font-size: 1em;
            user-select: none; }
            .contentBox .form-inner .col-container .form-field .formw.hasGridContainer .timeInputWithBtn > .timePickerPopup ul li:hover {
              background: #e8f4fc; }
            .contentBox .form-inner .col-container .form-field .formw.hasGridContainer .timeInputWithBtn > .timePickerPopup ul li.tpSelected {
              background: #167ebf;
              color: #fff;
              font-weight: bold; }
          .contentBox .form-inner .col-container .form-field .formw.hasGridContainer .timeInputWithBtn > .timePickerPopup ul + ul {
            border-left: 1px solid #e0e0e0; }
    .contentBox .form-inner .col-container .form-field .formw.hasGridContainer:has(:nth-child(2)) {
      /* Switch to a 2-column layout:
      - First column: shrink-to-fit (min 0, up to max-content)
      - Second column: flexible (takes remaining space) while remaining shrinkable */
      grid-template-columns: minmax(0, max-content) minmax(0, auto);
      /* Special case:
      If one of the children has class .input-number-container.displayNone,
      collapse back to a single column layout */ }
      .contentBox .form-inner .col-container .form-field .formw.hasGridContainer:has(:nth-child(2)):has(.input-number-container.displayNone) {
        grid-template-columns: auto; }
    .contentBox .form-inner .col-container .form-field .formw.hasGridContainer small#hint.withPicto::before {
      content: "\e94d";
      font-family: 'OpenFlyersLite' !important;
      margin-right: .5em; }
    .contentBox .form-inner .col-container .form-field .formw.hasGridContainer:has(input[type="time"]):has(small#hint) {
      display: flex; }
      .contentBox .form-inner .col-container .form-field .formw.hasGridContainer:has(input[type="time"]):has(small#hint) input[type="time"] {
        flex: 1 1 10em; }

/* --- .checkbox-list --- */
.contentBox .form-inner .col-container .form-field.checkbox-list input[type="checkbox"] {
  margin-bottom: 5px; }
.contentBox .form-inner .col-container .form-field.checkbox-list .CheckUncheckAllContainer {
  display: flex;
  justify-content: start;
  gap: 5px; }

/* --- dynamic-list (i.g. validity type with document edit form --- */
.contentBox .form-inner .col-container .form-field.dynamic-list .label {
  padding: .5em 0 1em 0; }
.contentBox .form-inner .col-container .form-field.dynamic-list > .list .list-element > .inner {
  display: flex; }
  .contentBox .form-inner .col-container .form-field.dynamic-list > .list .list-element > .inner > .left {
    width: calc(100% - 30px); }
    .contentBox .form-inner .col-container .form-field.dynamic-list > .list .list-element > .inner > .left .label-checkbox {
      margin-top: 0.5em;
      text-align: right;
      font-size: .8em;
      font-weight: normal; }
  .contentBox .form-inner .col-container .form-field.dynamic-list > .list .list-element > .inner > .right {
    width: 30px; }
    .contentBox .form-inner .col-container .form-field.dynamic-list > .list .list-element > .inner > .right .checkbox {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 28px; }
    .contentBox .form-inner .col-container .form-field.dynamic-list > .list .list-element > .inner > .right .angled-arrow:before {
      top: -7px;
      left: -3px; }

/* --- text-before input (i.g. in activity pricing in admin) --- */
.contentBox .form-inner .col-container .form-field.text-before .formw {
  position: relative; }

.contentBox .form-inner .col-container .form-field.text-before .formw .txt {
  position: absolute;
  top: 6px;
  left: 5px; }

.contentBox .form-inner .col-container .form-field.text-before .formw input[type="text"],
.contentBox .form-inner .col-container .form-field.text-before .formw input[type="search"] {
  padding-left: 16px; }

/* --- user-picture in user or personal edit page --- */
.contentBox .form-inner .col-container .form-field.user-picture .formw {
  display: flex;
  align-items: flex-end; }

.contentBox .form-inner .col-container .form-field.user-picture .formw a {
  display: block;
  margin-right: 0.5em; }

/* --- small-spacer (i.g. in activity edit page) --- */
.contentBox .form-inner .col-container .small-spacer {
  display: block;
  padding: 0.3em 0; }

/* --- form-col --- */
.contentBox .form-inner .col-container .form-col {
  flex-grow: 1;
  padding: .55em .4em;
  width: 33.33%;
  border-width: 1px 1px 1px 0; }
  .contentBox .form-inner .col-container .form-col.phaseBlocSynthesis {
    min-width: 33.33%;
    max-width: 33.33%;
    /* ========================== collapse-btn (i.g. on summary table) ========================== */ }
    .contentBox .form-inner .col-container .form-col.phaseBlocSynthesis .collapse-btn {
      display: flex;
      justify-content: end;
      align-items: center;
      margin-top: 5px; }
      .contentBox .form-inner .col-container .form-col.phaseBlocSynthesis .collapse-btn > .inner {
        display: block;
        position: relative;
        width: 17px;
        height: 17px;
        border: 1px solid; }
        .contentBox .form-inner .col-container .form-col.phaseBlocSynthesis .collapse-btn > .inner > * {
          display: block; }
        .contentBox .form-inner .col-container .form-col.phaseBlocSynthesis .collapse-btn > .inner .stroke {
          position: absolute;
          top: 7px;
          left: 4px;
          width: 8px;
          height: 1px;
          background: #000;
          transition: .3s ease; }
      .contentBox .form-inner .col-container .form-col.phaseBlocSynthesis .collapse-btn.closed > .inner .stroke.two {
        display: block;
        transition: .3s ease;
        transform: rotate(90deg); }
    .contentBox .form-inner .col-container .form-col.phaseBlocSynthesis .collapsible {
      overflow-y: auto;
      overflow-x: hidden; }
      .contentBox .form-inner .col-container .form-col.phaseBlocSynthesis .collapsible .checkbox {
        display: none; }
  .contentBox .form-inner .col-container .form-col h2,
  .contentBox .form-inner .col-container .form-col h3 {
    line-height: 1.3em; }
  .contentBox .form-inner .col-container .form-col h2 {
    padding: .75em .5em 1em .5em;
    font-size: 1.13em; }
  .contentBox .form-inner .col-container .form-col p {
    margin: 10px 0 10px 0;
    padding: 0 .5em;
    font-size: .8em;
    line-height: 1.4em; }
  .contentBox .form-inner .col-container .form-col .span-container {
    display: table;
    margin: 0 0 0.5em 0.5em; }
    .contentBox .form-inner .col-container .form-col .span-container > span {
      display: table-cell; }

/* --- one-line (training edit page) --- */
.contentBox .form-inner .col-container.one-line {
  display: table;
  table-layout: fixed;
  width: 100%; }

.contentBox .form-inner .col-container.one-line > * {
  display: table-cell;
  width: auto; }

/* ================ centered (i.g. on login, password reset pages) ================ */
.contentBox .form-inner.centered {
  margin: 0 auto;
  max-width: 400px; }
  .contentBox .form-inner.centered.largeFormContainer {
    width: max-content;
    max-width: 75%; }
    .contentBox .form-inner.centered.largeFormContainer .col-container {
      display: flex;
      padding: 0; }
      .contentBox .form-inner.centered.largeFormContainer .col-container.warningRed .form-col, .contentBox .form-inner.centered.largeFormContainer .col-container.warningOrange .form-col {
        border-style: none;
        padding: 0; }
      .contentBox .form-inner.centered.largeFormContainer .col-container.warningRed {
        border: solid 1px #f72f2f;
        background: #fff0ee; }
      .contentBox .form-inner.centered.largeFormContainer .col-container.warningOrange {
        border: solid 1px #ffb219;
        background: #fcfaf5; }
      .contentBox .form-inner.centered.largeFormContainer .col-container.hasRadius {
        border-radius: 5px; }
        .contentBox .form-inner.centered.largeFormContainer .col-container.hasRadius .form-col {
          border-radius: inherit; }
  .contentBox .form-inner.centered .form-button-container {
    justify-content: center;
    float: none;
    margin: 10px 0 5px 0;
    padding: 0;
    text-align: center; }
  .contentBox .form-inner.centered .form-button-container [class*="form-field"] {
    display: inline-block; }
  .contentBox .form-inner.centered .form-button-container > :last-child {
    padding-left: 0; }
  .contentBox .form-inner.centered .form-button-container > :last-child:first-child {
    padding-left: .5em; }
  .contentBox .form-inner.centered:not(.externalBooking) .col-container .form-field select {
    width: 100%; }
  .contentBox .form-inner.centered .col-container .form-col {
    display: flex;
    flex-flow: column wrap;
    padding: .55em .4em .75em .4em; }
    .contentBox .form-inner.centered .col-container .form-col h2,
    .contentBox .form-inner.centered .col-container .form-col h3 {
      float: none;
      text-align: center; }
  .contentBox .form-inner.centered .col-container [class*='warning'] {
    text-align: center; }

/* ================ smaller-font (i.g. in ================ */
.contentBox .form-inner.smaller-font {
  font-size: .9em; }

/* ===============================================================================
   ================================== input search =================================
   =============================================================================== */
#container .search, .form-options .search {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  position: relative;
  min-width: 12em;
  min-height: 2.2em;
  padding: 0.25em 0.35em; }

.form-options .search {
  width: fit-content !important;
  min-height: 35px; }

#container .search input, .form-options .search input.searchInput {
  display: block; }

#container .search button, .form-options .search button.searchButton {
  align-items: center;
  justify-content: center;
  position: static;
  margin: 0;
  z-index: 2; }

#container .search button:hover, .form-options .search button.searchButton:hover {
  cursor: pointer; }

#container .search input, .form-options .search input.searchInput, #container .search button, .form-options .search button.searchButton {
  box-sizing: border-box;
  border: none;
  background-color: #fff; }

#container .search input::placeholder, .form-options .search input.searchInput::placeholder {
  font-size: 1em;
  font-weight: normal; }

#container .search button [data-picto]:before, .form-options .search button.searchButton [data-picto]:before {
  position: relative;
  padding-top: 0.1em; }

#container .search-inner {
  margin-left: 3.5em;
  padding: 0.3em 1.7em; }

.contentBox .form-inner div.form-options-bottom:first-of-type {
  margin: 1em 0 0 0; }

/* ===============================================================================
   ================================== PopPup Wrapper =============================
   =============================================================================== */
.popupOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 199;
  display: flex;
  align-items: center;
  justify-content: center; }

.popupWrapper {
  position: relative;
  border-radius: 5px;
  width: 30%;
  padding: 10px 0 10px 0;
  z-index: 200;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.1); }
  .popupWrapper .form-button-container {
    display: flex;
    justify-content: space-around !important;
    float: none !important;
    padding: 0 !important; }
  .popupWrapper .popupMessage {
    padding: 10px;
    font-family: Verdana, sans-serif;
    font-size: 1em;
    margin-left: 10px; }
    .popupWrapper .popupMessage .table-overlay {
      right: 0;
      bottom: -50px;
      left: 0;
      background-color: transparent; }
  .popupWrapper.primaryPopup {
    background-color: #243656;
    color: #fff;
    border: 1px solid #88A; }

/* Mobile-friendly tweaks for popup */
@media (max-width: 767px) {
  /* Ensure overlay truly covers the viewport on mobile */
  .popupOverlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto; }

  .popupWrapper {
    width: calc(100vw - 2rem);
    max-width: none;
    margin: 0 1rem;
    padding: 12px;
    border-radius: 8px;
    max-height: calc(100vh - 2rem); }
    .popupWrapper .popupMessage {
      margin-left: 0;
      font-size: 0.95em; }
    .popupWrapper .form-button-container {
      flex-direction: column;
      align-items: stretch;
      gap: .5em; }

  .popup-btn-close,
  .validateButton,
  .btnImgContainer #btnImgId {
    width: 100%; } }
/* ===============================================================================
   ================================== PopPup Custome Forme =======================
   =============================================================================== */
.popupCustomContent .form-field .label {
  font-weight: bold;
  color: #E8F4FD;
  padding-bottom: 5px;
  font-size: 1em;
  text-align: left; }
.popupCustomContent .form-field .formw {
  width: 100%; }
  .popupCustomContent .form-field .formw input[type="text"] {
    width: 100%;
    padding: 3px 16px;
    box-sizing: border-box;
    max-width: 100%;
    height: 28px;
    font-size: 1em;
    border-color: #ccc;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; }
    .popupCustomContent .form-field .formw input[type="text"]:focus {
      outline: none;
      border-color: #1679A7;
      border-width: 1px;
      box-shadow: none; }
  .popupCustomContent .form-field .formw button {
    align-self: center; }

/* ===============================================================================
   ================================== Close button ===============================
   =============================================================================== */
.popup-btn-close {
  background-color: #DDDDDD;
  color: black;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-family: Verdana, sans-serif;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
  transition: background-color 0.3s ease;
  height: 2.6em;
  line-height: 1.2em; }
  .popup-btn-close:hover {
    background-color: #FFFFFF;
    color: #444; }

/* ===============================================================================
   ================================== Validate button =============================
   =============================================================================== */
.validateButton {
  background-color: #167ebf;
  color: #FFFFFF;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-family: Verdana, sans-serif;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
  transition: background-color 0.3s ease;
  height: 2.6em;
  line-height: 1.2em; }
  .validateButton:hover {
    background-color: #0f5a8a;
    color: #FFFFFF; }

/* ===============================================================================
   ================================== button Image ===============================
   =============================================================================== */
.btnImgContainer {
  display: flex;
  flex-direction: row; }
  .btnImgContainer:has(#btnImgId.helloAssoBtnImg) {
    justify-content: center; }
  .btnImgContainer #btnImgId {
    border-radius: 5px;
    height: 2.6em;
    font-family: Verdana, sans-serif;
    font-size: 1.2em;
    vertical-align: baseline;
    align-items: flex-start;
    cursor: pointer;
    color: #fff; }
    .btnImgContainer #btnImgId.btnImgClass {
      padding-left: 40px;
      display: inline-block;
      width: fit-content;
      text-align: center;
      /** HelloAsso */
      /** Google Calendar */ }
      .btnImgContainer #btnImgId.btnImgClass.helloAssoBtnImg {
        background: url("../../img/helloAsso.jpeg") no-repeat;
        border: 1px solid #243656; }
      .btnImgContainer #btnImgId.btnImgClass.LogInGoogleCalendarBtnImg, .btnImgContainer #btnImgId.btnImgClass.LogOutGoogleCalendarBtnImg {
        background: url("../../img/btn_google_light_pressed_ios.svg") no-repeat;
        border: 1px solid #e4e2e2; }
      .btnImgContainer #btnImgId.btnImgClass.helloAssoBtnImg, .btnImgContainer #btnImgId.btnImgClass.LogInGoogleCalendarBtnImg, .btnImgContainer #btnImgId.btnImgClass.LogOutGoogleCalendarBtnImg {
        background-color: #167ebf;
        background-size: 35px 34px; }
        .btnImgContainer #btnImgId.btnImgClass.helloAssoBtnImg:hover, .btnImgContainer #btnImgId.btnImgClass.LogInGoogleCalendarBtnImg:hover, .btnImgContainer #btnImgId.btnImgClass.LogOutGoogleCalendarBtnImg:hover {
          background-color: #FFFFFF;
          color: #444;
          border-color: #167ebf; }

/* ===============================================================================
   ========================== Google Calendar Label ==============================
   =============================================================================== */
.sectionTitleImgContainer {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
  grid-gap: 2em; }
  .sectionTitleImgContainer .sectionTitleLabelContainer {
    display: flex;
    align-items: center; }
  .sectionTitleImgContainer > div > img {
    padding-right: 0.5em;
    height: 3em;
    float: left !important; }

/* ===============================================================================
   ================================== flexSelect =================================
   =============================================================================== */
/**dropdown menu
 * put non-selectable items in bold black except the item choose a value
 * indent selectable items a bit to the right
 */
.flexselect_dropdown.has-optgroup ul li.disabled {
  font-weight: bold;
  color: #000; }
.flexselect_dropdown.has-optgroup ul.hasNonBoldDisabledItem li.disabled:first-child {
  font-weight: normal;
  color: #6d6d6d; }
.flexselect_dropdown.has-optgroup ul li:not(.disabled) {
  padding-left: 1.7em; }

/* ===============================================================================
   ======================== Training progress Monitoring =========================
   =============================================================================== */
.formHeader {
  display: flex;
  flex-direction: row;
  grid-gap: .5em;
  justify-content: space-between; }
  .formHeader.flex-start {
    justify-content: flex-start !important; }
  .formHeader.flex-end {
    justify-content: end !important; }
  .formHeader.bookletSummaryTableHeader {
    display: flex;
    justify-content: start;
    margin-bottom: 20px; }
  .formHeader > .form-field {
    border: #ebebeb solid 2px;
    background-color: #f8f8f8 !important;
    margin: 0 !important; }
    .formHeader > .form-field.combobox {
      flex-basis: 15%; }
    .formHeader > .form-field.flightsWithoutProgress {
      margin: 0 !important;
      display: flex;
      flex-direction: column;
      flex-basis: 40%; }
      .formHeader > .form-field.flightsWithoutProgress .spanWithCheckBoxContainer {
        display: flex;
        flex-direction: row; }
        .formHeader > .form-field.flightsWithoutProgress .spanWithCheckBoxContainer #flightsWithoutProgressEntry {
          width: 100%;
          padding-bottom: 5px;
          font-weight: bold;
          padding-left: 0px;
          text-align: left;
          font-size: 1.1em;
          color: #000 !important;
          flex-basis: 45%; }
        .formHeader > .form-field.flightsWithoutProgress .spanWithCheckBoxContainer .form-field {
          display: flex;
          flex-direction: row;
          padding: 0 0 5px; }
          .formHeader > .form-field.flightsWithoutProgress .spanWithCheckBoxContainer .form-field .label-checkbox {
            padding-left: 0; }
      .formHeader > .form-field.flightsWithoutProgress .form-field {
        margin: 0 !important;
        padding-left: 0 !important; }
        .formHeader > .form-field.flightsWithoutProgress .form-field > * {
          float: left; }
        .formHeader > .form-field.flightsWithoutProgress .form-field .label-checkbox {
          padding-top: 0.4em; }
      .formHeader > .form-field.flightsWithoutProgress .flightsWithoutProgressInformations {
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-grow: 2; }
        .formHeader > .form-field.flightsWithoutProgress .flightsWithoutProgressInformations .dateFlightsWithoutProgress {
          align-items: center;
          flex-grow: 2;
          display: flex;
          flex-direction: row;
          justify-content: space-evenly; }
          .formHeader > .form-field.flightsWithoutProgress .flightsWithoutProgressInformations .dateFlightsWithoutProgress > a {
            margin: 0 5px 0 5px; }
        .formHeader > .form-field.flightsWithoutProgress .flightsWithoutProgressInformations > div > a {
          text-decoration: underline; }
        .formHeader > .form-field.flightsWithoutProgress .flightsWithoutProgressInformations .paginationArrowRight, .formHeader > .form-field.flightsWithoutProgress .flightsWithoutProgressInformations .paginationArrowLeft {
          top: 2px;
          width: 100%;
          background-color: #f8f8f8; }
          .formHeader > .form-field.flightsWithoutProgress .flightsWithoutProgressInformations .paginationArrowRight:before, .formHeader > .form-field.flightsWithoutProgress .flightsWithoutProgressInformations .paginationArrowRight:after, .formHeader > .form-field.flightsWithoutProgress .flightsWithoutProgressInformations .paginationArrowLeft:before, .formHeader > .form-field.flightsWithoutProgress .flightsWithoutProgressInformations .paginationArrowLeft:after {
            left: -2px;
            cursor: pointer;
            font-size: 17.5px !important; }
    .formHeader > .form-field.phase {
      margin: 0 !important;
      flex-basis: 25%;
      display: flex;
      flex-direction: column; }
      .formHeader > .form-field.phase .phaseInformations {
        display: flex;
        flex-direction: row;
        justify-content: space-between; }
    .formHeader > .form-field > span.labelHeader, .formHeader > .form-field .inner span.labelHeader, .formHeader > .form-field.combobox .inner .label {
      width: 100%;
      padding-bottom: 5px;
      font-weight: bold;
      padding-left: 0px;
      text-align: left;
      font-size: 1.1em;
      color: #000 !important; }
    .formHeader > .form-field span.textHeader {
      padding-left: 0px;
      text-align: left;
      font-size: 1.1em;
      color: #000 !important; }
    .formHeader > .form-field.goToButton {
      display: flex;
      justify-content: center;
      align-items: center; }
  .formHeader span.formw.has-autoComplete, .formHeader span.formw {
    width: 90%;
    padding: 0; }
    .formHeader span.formw.has-autoComplete > select, .formHeader span.formw.has-autoComplete > input, .formHeader span.formw > select, .formHeader span.formw > input {
      width: 100%; }
  .formHeader.hasFlexCombo > .form-field.combobox {
    flex-basis: 20%; }
    .formHeader.hasFlexCombo > .form-field.combobox .inner {
      display: flex; }

.form-button-container.trainingProgress {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 0.5em 0; }
  .form-button-container.trainingProgress .form-field {
    margin: 0 !important;
    padding-right: 0 !important; }

.commentEndTable {
  border: #ebebeb solid 2px;
  background-color: #f8f8f8 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  width: 100%; }
  .commentEndTable > span {
    width: 100%;
    padding-bottom: 5px;
    font-weight: bold;
    padding-left: 0px;
    text-align: left;
    font-size: 1.1em;
    color: #000 !important; }
  .commentEndTable textarea {
    width: 100%;
    max-width: 100%; }
  .commentEndTable .formw {
    width: 100%; }

.cellTitle {
  background-color: #f8f8f8 !important; }
  .cellTitle.italic {
    color: #666;
    font-style: italic; }

progress {
  width: 50%;
  margin-top: 4px;
  border-radius: 7px; }
  progress::-moz-progress-bar {
    width: 50%;
    border-radius: 7px;
    background-color: #88a729; }
  progress::-webkit-progress-bar {
    border-radius: 7px;
    background-color: #cbcbcb; }
  progress::-webkit-progress-value {
    border-radius: 7px; }
  progress.progressBarSynthesis {
    width: 100%;
    margin: auto; }

/** Training Program */
.formHeader .form-field-container.formFieldsContainerHasButtons {
  display: flex;
  grid-gap: 1em;
  background-color: #f8f8f8 !important; }
  .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons {
    margin: 0;
    padding: 0 0 .5em 0;
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
    border-radius: 5px;
    display: flex; }
    .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .comboContainer .form-field {
      margin: 0; }
      .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .comboContainer .form-field.combobox .inner .formw, .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .comboContainer .form-field .deletMarge .formw {
        width: 100%; }
      .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .comboContainer .form-field.combobox .label {
        font-size: 1.3em !important; }
      .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .comboContainer .form-field .label {
        font-size: 1.3em !important;
        width: 100%;
        padding-bottom: 5px;
        font-weight: bold;
        padding-left: 0px;
        text-align: left;
        font-size: 1.4em;
        color: #000 !important; }
    .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .buttonsContainer {
      align-items: center;
      margin-top: 1.6em;
      margin-right: 0.5em; }
      .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .buttonsContainer, .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .buttonsContainer > div {
        display: flex;
        grid-gap: 0.5em; }
      .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .buttonsContainer .input-image-container .cancel[data-picto]::before, .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .buttonsContainer .input-image-container .cancel[data-picto]::after {
        margin-left: -0.12em;
        margin-top: -0.1em; }
      .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .buttonsContainer .input-image-container .delete, .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .buttonsContainer .input-image-container .cancel {
        color: #f72f2f;
        border: #f72f2f solid 1px; }
      .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .buttonsContainer .input-image-container .edit, .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .buttonsContainer .input-image-container .add {
        color: #1679A7;
        border: #1679A7 solid 1px; }
      .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .buttonsContainer .input-image-container .checked {
        color: #69AC0B;
        border: #69AC0B solid 1px; }
      .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .buttonsContainer .input-image-container .delete, .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .buttonsContainer .input-image-container .edit, .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .buttonsContainer .input-image-container .add, .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .buttonsContainer .input-image-container .cancel, .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .buttonsContainer .input-image-container .checked {
        border-radius: 50%;
        cursor: pointer; }
        .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .buttonsContainer .input-image-container .delete:disabled, .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .buttonsContainer .input-image-container .edit:disabled, .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .buttonsContainer .input-image-container .add:disabled, .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .buttonsContainer .input-image-container .cancel:disabled, .formHeader .form-field-container.formFieldsContainerHasButtons .form-field.formFieldHasButtons .buttonsContainer .input-image-container .checked:disabled {
          cursor: not-allowed;
          background-color: lightgrey; }

/* ===============================================================================
   ================================== responsive =================================
   =============================================================================== */
@media only screen and (max-width: 767px) {
  .formHeader > div {
    flex-basis: 100% !important; } }
@media only screen and (max-width: 938px) and (min-width: 767px) {
  .formHeader > div {
    flex-basis: 45% !important; } }
@media only screen and (max-width: 1024px) and (min-width: 938px) {
  .formHeader > .combobox {
    flex-basis: 25% !important; }
  .formHeader > .phase {
    flex-basis: 40% !important; }
  .formHeader > .flightsWithoutProgress {
    flex-basis: 50% !important; } }
@media only screen and (max-width: 1024px) {
  .formHeader {
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 1em; } }
@media (min-width: 1024px) {
  .contentBox .form-inner .col-container .form-col {
    width: 25%; } }
@media (min-width: 1200px) {
  .contentBox .form-inner .form-options .form-button-container > .inner select {
    max-width: 300px; } }
@media (min-width: 1500px) {
  .contentBox .form-inner .form-options .form-button-container > .inner select {
    max-width: auto; }

  .contentBox .form-inner .col-container .form-col {
    width: 20%; } }
@media (min-width: 1600px) {
  .contentBox .form-inner .col-container .form-col {
    width: 16.66%; } }
@media (min-width: 1700px) {
  .contentBox .form-inner .col-container .form-col {
    width: 12.5%; } }
@media (min-width: 1800px) {
  .contentBox .form-inner .col-container .form-col {
    width: 11.1%; } }
@media (min-width: 1900px) {
  .contentBox .form-inner .col-container .form-col {
    width: 10%; } }
@media (max-width: 1204px) {
  /* --- form-options --- */
  .contentBox .form-inner .form-options > .comboBox {
    width: 25%; }
  .contentBox .form-inner .form-options > .n-states-switch {
    width: 25%; }
  .contentBox .form-inner .form-options > .form-button-container {
    width: 50%; } }
@media (max-width: 938px) {
  .contentBox .form-inner.width95 .form-options {
    display: flex;
    flex-wrap: wrap; }
    .contentBox .form-inner.width95 .form-options > .form-field-container .combobox {
      margin-right: 0; }
  .contentBox .form-inner .form-options {
    display: block;
    /* Make action buttons readable and easy to tap on mobile
       Only for the top bar using flexColumnWithCenter */ }
    .contentBox .form-inner .form-options.flexColumnWithCenter {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      flex-direction: column; }
    .contentBox .form-inner .form-options.flexColumnWithCenter .form-button-container {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      gap: .5em;
      margin-top: .25em; }
    .contentBox .form-inner .form-options > * {
      margin-bottom: 0.5em; }
      .contentBox .form-inner .form-options > *:last-child {
        margin-bottom: 0; }
    .contentBox .form-inner .form-options > [class] {
      justify-content: center;
      width: auto; }
    .contentBox .form-inner .form-options > .combobox {
      display: flex; }
    .contentBox .form-inner .form-options .floatLeft {
      float: none; }
      .contentBox .form-inner .form-options .floatLeft > * {
        display: inline;
        float: none; }
    .contentBox .form-inner .form-options .form-button-container {
      float: none; }

  .contentBox .form-inner .col-container .form-col {
    width: 50%; }
    .contentBox .form-inner .col-container .form-col.phaseBlocSynthesis {
      max-width: 50%; } }
@media (max-width: 767px) {
  .contentBox .form-inner .col-container .form-col {
    width: 100%; }
    .contentBox .form-inner .col-container .form-col.phaseBlocSynthesis {
      max-width: 100%; }
    .contentBox .form-inner .col-container .form-col h2 {
      padding: .5em .5em .5em .5em;
      font-size: 1em; }

  .contentBox .form-inner .col-container.one-line,
  .contentBox .form-inner .col-container.one-line > * {
    display: block;
    overflow: hidden; }

  .contentBox .form-inner .col-container.one-line > * {
    float: left;
    width: 33%; }

  .contentBox .form-inner .col-container .form-field .formw input[type="datetime-local"], .contentBox .form-inner .col-container .form-field .formw input[type="time"] {
    max-width: 97%; }
  .contentBox .form-inner .col-container .form-field .formw.hasGridContainer .input-number-container input[type=number] {
    width: 40%;
    padding-top: .3em; } }
@media only screen and (min-width: 1500px) and (max-width: 1750px) {
  .sectionTitleImgContainer {
    display: inline-block; } }
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _menu.scss
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    SCSS
 * @package     OpenFlyers
 * @author      Lydie TREMBLET <lydie.tremblet@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Thu Sept 12 2019
 *
 * used to apply styles on menu (HTML created in xsl/menu.xsl)
 */
/* ===============================================================================
   =================================== default ===================================
   =============================================================================== */
.main-menu-container {
  position: relative;
  z-index: 100; }

.expendableDesign .main-menu-container {
  position: fixed !important;
  top: 45px;
  right: 0;
  left: 0;
  z-index: 100 !important; }

.main-menu-container [class*="level"],
.main-menu-container [class*="level"] .item {
  list-style-type: none; }

.main-menu-container [class*="level"] {
  margin: 0;
  padding-left: 0; }

/* ----- colors ----- */
.main-menu-container.menu-general {
  background-color: #f3f8ff; }

.main-menu-container.menu-general [class*="level"] .item,
.main-menu-container.menu-general [class*="level"] .item .inner {
  color: #20242d; }

.main-menu-container.menu-management {
  background-color: #ffdb6f; }

.main-menu-container.menu-management [class*="level"] .item,
.main-menu-container.menu-management [class*="level"] .item .inner {
  color: #241f11; }

.main-menu-container.menu-admin {
  background-color: #fa8585; }

.main-menu-container.menu-admin [class*="level"] .item,
.main-menu-container.menu-admin [class*="level"] .item .inner {
  color: #130a0a; }

/* ==================== item =================== */
.main-menu-container [class*="level"] .item {
  position: relative;
  transition: all .2s linear; }

.main-menu-container [class*="level"] .item > .inner {
  font-size: 0; }

.main-menu-container [class*="level"] .item > .inner span[data-picto]::before {
  width: 30px;
  line-height: 30px; }

.main-menu-container [class*="level"] .item > .inner .txt {
  white-space: nowrap;
  font-size: 12px; }

.main-menu-container [class*="level"] .item > .inner .picto.new {
  width: 16px;
  height: 15px; }

.main-menu-container [class*="level"] .item > .inner .picto.new:before {
  top: -7px;
  left: -6px; }

/* ==================== level 1 =================== */
.main-menu-container .level1 {
  display: flex;
  flex-flow: row wrap;
  padding: 0 10px 0 10px;
  text-align: left; }

.main-menu-container .level1 > .item {
  position: relative;
  padding: 0 5px 0 5px; }

.main-menu-container .level1 > .item > .inner {
  display: flex;
  justify-content: flex-start;
  pointer-events: none; }

.main-menu-container .level1 > .item > .inner > .txt {
  line-height: 45px;
  font-weight: bold; }

.main-menu-container .level1 > .item > .inner .picto {
  margin-top: 8px;
  width: 20px; }

.main-menu-container .level1 > .item > .inner .picto:before {
  left: -7px; }

.main-menu-container .level1 > .item > .inner .picto.menu-buy,
.main-menu-container .level1 > .item > .inner .picto.menu-sale {
  width: 14px; }

.main-menu-container .level1 > .item > .inner .picto.menu-account,
.main-menu-container .level1 > .item > .inner .picto.menu-log,
.main-menu-container .level1 > .item > .inner .picto.menu-user,
.main-menu-container .level1 > .item > .inner .picto.menu-report {
  width: 16px; }

.main-menu-container .level1 > .item > .inner .picto.menu-report:before {
  left: -8px; }

.main-menu-container .level1 > .item > .inner .picto.menu-account:before,
.main-menu-container .level1 > .item > .inner .picto.menu-log:before,
.main-menu-container .level1 > .item > .inner .picto.menu-user:before {
  left: -9px; }

.main-menu-container .level1 > .item > .inner .picto.menu-buy:before,
.main-menu-container .level1 > .item > .inner .picto.menu-sale:before {
  left: -10px; }

.main-menu-container .level1 > .item > .inner .picto.new {
  margin-top: 16px; }

.main-menu-container .level1 > .item:hover:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -10px;
  border-style: solid;
  border-width: 7px; }

.main-menu-container .level1 > .item.with-new {
  padding: 0 3px 0 5px; }

/* ----- colors ----- */
.main-menu-container.menu-general .level1 > .item:hover {
  background-color: #e5ebf6; }

.main-menu-container.menu-general .level1 > .item:hover:before {
  border-color: #e5ebf6;
  border-bottom-color: #20242d; }

.main-menu-container.menu-management .level1 > .item:hover {
  background-color: #f3d068; }

.main-menu-container.menu-management .level1 > .item:hover:before {
  border-color: #f3d068;
  border-bottom-color: #241f11; }

.main-menu-container.menu-admin .level1 > .item:hover {
  background-color: #ec7d7d; }

.main-menu-container.menu-admin .level1 > .item:hover:before {
  border-color: #ec7d7d;
  border-bottom-color: #130a0a; }

/* ==================== level 2 =================== */
.main-menu-container .level1 > .item > .level2 {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 1;
  top: 45px;
  left: 0;
  padding: 10px 5px 10px 5px;
  background: white;
  border-top-style: solid;
  border-top-width: 4px;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); }

.main-menu-container.menu-general .level1 > .item > .level2 {
  border-top-color: #20242d; }

.main-menu-container.menu-management .level1 > .item > .level2 {
  border-top-color: #241f11; }

.main-menu-container.menu-admin .level1 > .item > .level2 {
  border-top-color: #130a0a; }

.main-menu-container .level1 > .item > .level2 .item {
  cursor: pointer;
  padding: 0 .6em; }

.main-menu-container .level1 > .item > .level2 .item .inner {
  display: inline-block;
  width: 100%;
  padding: 8px 0;
  border-bottom: 1px solid #e1e1e1;
  transition: all .1s linear; }

.main-menu-container .level1 > .item > .level2 .item:last-child .inner {
  border-bottom-width: 0; }

.main-menu-container.menu-general .level1 > .item > .level2 .item .inner:hover {
  background-color: #f3f8ff; }

.main-menu-container.menu-management .level1 > .item > .level2 .item .inner:hover {
  background-color: #fff8e4; }

.main-menu-container.menu-admin .level1 > .item > .level2 .item .inner:hover {
  background-color: #fff1f1; }

.main-menu-container .level1 > .item > .level2 .item .inner .picto.new {
  display: inline-block;
  top: 3px; }

.main-menu-container .level1 > .item > .level2 .item.title {
  margin-top: 5px; }

/* ----- item-list ----- */
.main-menu-container .level1 > .item > .level2.item-list {
  min-width: 150px; }

/* ------------------------------------------------------------------------------------ */
/* -------------------------- with-cols and with-col-groups --------------------------- */
/* ----- adujst level-2 positions depending on colunm number and level 1 position ----- */
/* ------------------------------------------------------------------------------------ */
.main-menu-container .level1 > .item > .level2[class*="with-col"] .col-container .col {
  cursor: default;
  overflow-y: auto;
  max-height: 75vh;
  padding: 0; }

.main-menu-container .level1 > .item > .level2[class*="with-col"] .col-container .col .item > .inner .txt {
  white-space: initial; }

.main-menu-container .level1 > .item > .level2[class*="with-col-groups"] .col-container .col,
.main-menu-container .level1 > .item > .level2[class*="with-cols"] .col-container .col .item {
  box-sizing: border-box;
  width: 180px; }

.main-menu-container .level1 > .item > .level2.with-col-groups-4 .col-container .col,
.main-menu-container .level1 > .item > .level2.with-col-groups-5 .col-container .col,
.main-menu-container .level1 > .item > .level2.with-cols-4 .col-container .col .item,
.main-menu-container .level1 > .item > .level2.with-cols-5 .col-container .col .item {
  width: 165px; }

/* positionning */
.main-menu-container:not(.minimize) .level1 > .item:nth-child(3) > .level2[class*="with-col"],
.main-menu-container:not(.minimize) .level1 > .item:nth-child(4) > .level2[class*="with-col"],
.main-menu-container:not(.minimize) .level1 > .item:nth-child(5) > .level2[class*="with-col"],
.main-menu-container:not(.minimize) .level1.elements-3 > .item > .level2[class*="with-col"],
.main-menu-container:not(.minimize) .level1.elements-4 > .item:nth-child(2) > .level2[class*="with-col"][class*="-5"],
.main-menu-container:not(.minimize) .level1.elements-10 > .item:nth-child(6) > .level2[class*="with-col"] {
  left: 50%;
  right: auto;
  transform: translate(-50%); }

.main-menu-container:not(.minimize) .level1 > .item:nth-child(6) > .level2[class*="with-col"],
.main-menu-container:not(.minimize) .level1 > .item:nth-child(7) > .level2[class*="with-col"],
.main-menu-container:not(.minimize) .level1 > .item:nth-child(8) > .level2[class*="with-col"],
.main-menu-container:not(.minimize) .level1 > .item:nth-child(9) > .level2[class*="with-col"],
.main-menu-container:not(.minimize) .level1 > .item:nth-child(10) > .level2[class*="with-col"] {
  right: 0;
  left: auto; }

.main-menu-container:not(.minimize) .level1.elements-7 > .item:nth-child(3) > .level2[class*="with-col"][class*="-5"],
.main-menu-container:not(.minimize) .level1.elements-10 > .item:nth-child(6) > .level2[class*="with-col"][class*="-5"] {
  transform: translate(0); }

.main-menu-container:not(.minimize) .level1.elements-4 > .item:nth-child(1) > .level2[class*="with-col"][class*="-5"],
.main-menu-container:not(.minimize) .level1.elements-5 > .item:nth-child(2) > .level2[class*="with-col"][class*="-5"],
.main-menu-container:not(.minimize) .level1.elements-7 > .item:nth-child(3) > .level2[class*="with-col"][class*="-5"] {
  left: -200px; }

.main-menu-container:not(.minimize) .level1.elements-5 > .item:nth-child(1) > .level2[class*="with-col"][class*="-5"],
.main-menu-container:not(.minimize) .level1.elements-6 > .item:nth-child(2) > .level2[class*="with-col"][class*="-5"] {
  left: -160px; }

.main-menu-container:not(.minimize) .level1.elements-6 > .item:nth-child(1) > .level2[class*="with-col"][class*="-5"],
.main-menu-container:not(.minimize) .level1.elements-7 > .item:nth-child(2) > .level2[class*="with-col"][class*="-5"],
.main-menu-container:not(.minimize) .level1.elements-8 > .item:nth-child(2) > .level2[class*="with-col"][class*="-5"],
.main-menu-container:not(.minimize) .level1.elements-9 > .item:nth-child(2) > .level2[class*="with-col"][class*="-5"] {
  left: -90px; }

.main-menu-container:not(.minimize) .level1.elements-6 > .item:nth-child(5) > .level2[class*="with-col"][class*="-5"],
.main-menu-container:not(.minimize) .level1.elements-7 > .item:nth-child(5) > .level2[class*="with-col"][class*="-5"] {
  left: -50px; }

.main-menu-container:not(.minimize) .level1.elements-6 > .item:nth-child(6) > .level2[class*="with-col"][class*="-5"],
.main-menu-container:not(.minimize) .level1.elements-7 > .item:nth-child(6) > .level2[class*="with-col"][class*="-5"],
.main-menu-container:not(.minimize) .level1.elements-8 > .item:nth-child(6) > .level2[class*="with-col"][class*="-5"],
.main-menu-container:not(.minimize) .level1.elements-9 > .item:nth-child(6) > .level2[class*="with-col"][class*="-5"],
.main-menu-container:not(.minimize) .level1.elements-9 > .item:nth-child(7) > .level2[class*="with-col"][class*="-5"],
.main-menu-container:not(.minimize) .level1.elements-10 > .item:nth-child(7) > .level2[class*="with-col"][class*="-5"],
.main-menu-container:not(.minimize) .level1.elements-10 > .item:nth-child(8) > .level2[class*="with-col"][class*="-5"] {
  right: -150px; }

.main-menu-container:not(.minimize) .level1.elements-8 > .item:nth-child(3) > .level2[class*="with-col"][class*="-5"],
.main-menu-container:not(.minimize) .level1.elements-10 > .item:nth-child(3) > .level2[class*="with-col"][class*="-5"] {
  left: 170px; }

.main-menu-container:not(.minimize) .level1.elements-8 > .item:nth-child(5) > .level2[class*="with-col"][class*="-5"] {
  left: -50px; }

.main-menu-container:not(.minimize) .level1.elements-9 > .item:nth-child(3) > .level2[class*="with-col"][class*="-5"] {
  left: 110px; }

.main-menu-container:not(.minimize) .level1.elements-10 > .item:nth-child(6) > .level2[class*="with-col"][class*="-5"] {
  left: auto;
  right: -250px; }

/* with-col-groups */
.main-menu-container .level1 > .item > .level2[class*="with-col-groups"] {
  padding: 0 5px 10px 5px; }

.main-menu-container .level1 > .item > .level2[class*="with-col-groups"] .col-container {
  display: flex; }

.main-menu-container .level1 > .item > .level2[class*="with-col-groups"] .col-container .col .item.title {
  cursor: default; }

.main-menu-container .level1 > .item > .level2[class*="with-col-groups"] .col-container .col .item.title .inner {
  padding: 8px 0 4px 0;
  pointer-events: none; }

.main-menu-container .level1 > .item > .level2[class*="with-col-groups"] .col-container .col .item.title .inner:hover {
  background: transparent; }

.main-menu-container .level1 > .item > .level2[class*="with-col-groups"] .col-container .col .item.title > .inner .txt {
  font-weight: bold;
  text-transform: uppercase; }

.main-menu-container .level1 > .item > .level2[class*="with-col-groups"] .col-container .col .item.title > .inner .txt {
  cursor: default; }

.main-menu-container.menu-general .level1 > .item > .level2[class*="with-col-groups"] .col-container .col .item.title > .inner {
  border-bottom-color: #20242d; }

.main-menu-container.menu-management .level1 > .item > .level2[class*="with-col-groups"] .col-container .col .item.title > .inner {
  border-bottom-color: #241f11; }

.main-menu-container.menu-admin .level1 > .item > .level2[class*="with-col-groups"] .col-container .col .item.title > .inner {
  border-bottom-color: #130a0a; }

/* with-cols */
.main-menu-container .level1 > .item > .level2[class*="with-cols"] .col-container .col {
  column-gap: 0; }

.main-menu-container .level1 > .item > .level2[class*="with-cols"] .col-container .col .item:last-child .inner {
  border-bottom-width: 1px; }

.main-menu-container .level1 > .item > .level2.with-cols-2 .col-container .col {
  columns: 2; }

.main-menu-container .level1 > .item > .level2.with-cols-3 .col-container .col {
  columns: 3; }

.main-menu-container .level1 > .item > .level2.with-cols-4 .col-container .col {
  columns: 4; }

.main-menu-container .level1 > .item > .level2.with-cols-5 .col-container .col {
  columns: 5; }

/* ================== Show level 2 ================= */
.main-menu-container .level1 > .item:hover > .level2 {
  visibility: visible;
  opacity: 1; }

/* ================== hide level > 2 ================= */
/* Delete when each menu will have only one sub-level */
.main-menu-container .level1 > .item > .level2 [class*="level"] {
  display: none; }

/* ===============================================================================
   === hide or show main-menu-container depending of main breakpoint at 1024px ===
   =============================================================================== */
@media screen and (max-width: 1023px) {
  .main-menu-container {
    display: none; } }
@media screen and (min-width: 1024px) {
  .main-menu-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center; } }
/* ===============================================================================
   ========= styles for hide at scroll down or minimize on small screen ==========
   =============================================================================== */
.main-menu-container.hide,
.main-menu-container.hide .menu-btn,
.main-menu-container.minimize .menu-btn {
  width: 45px;
  height: 45px; }

.main-menu-container.hide,
.main-menu-container.minimize .menu-btn {
  z-index: 1;
  cursor: pointer;
  width: 45px;
  height: 45px; }

/* ----- colors ----- */
.main-menu-container.menu-general.hide,
.main-menu-container.menu-general.minimize .menu-btn {
  background-color: #f3f8ff; }

.main-menu-container.menu-management.hide,
.main-menu-container.menu-management.minimize .menu-btn {
  background-color: #ffdb6f; }

.main-menu-container.menu-admin.hide,
.main-menu-container.menu-admin.minimize .menu-btn {
  background-color: #fa8585; }

.main-menu-container.hide .menu-btn,
.main-menu-container.minimize .menu-btn {
  background-repeat: no-repeat;
  background-position: center; }

.main-menu-container.menu-general.hide .menu-btn,
.main-menu-container.menu-general.minimize .menu-btn {
  background-image: url(img/menu-btn-open-general.svg); }

.main-menu-container.menu-management.hide .menu-btn,
.main-menu-container.menu-management.minimize .menu-btn {
  background-image: url(img/menu-btn-open-management.svg); }

.main-menu-container.menu-admin.hide .menu-btn,
.main-menu-container.menu-admin.minimize .menu-btn {
  background-image: url(img/menu-btn-open-admin.svg); }

/* ===============================================================================
   ========================== hide/show at page scroll ===========================
   =============================================================================== */
.main-menu-container.hide,
.main-menu-container.show {
  position: fixed;
  left: 0; }

.main-menu-container.hide {
  top: 0;
  z-index: 4; }

.main-menu-container.show {
  right: 0; }

.main-menu-container.hide .level1 {
  display: none; }

/* ===============================================================================
   ========================= responsive large screens ============================
   =============================================================================== */
@media screen and (min-width: 1600px) {
  .main-menu-container .level1 > .item {
    padding: 0 20px 0 20px; } }
/* ===============================================================================
   ========================= small screen : minimize =============================
   =============================================================================== */
.main-menu-container.minimize {
  display: block;
  position: fixed;
  top: 45px;
  left: 0; }

html:not(.expendableDesign) .main-menu-container.minimize {
  position: sticky;
  top: 0; }

.main-menu-container.minimize.menu-general,
.main-menu-container.minimize.menu-management,
.main-menu-container.minimize.menu-admin {
  background: transparent; }

/* ----- colors ----- */
.main-menu-container.minimize.menu-general .level1 {
  background-color: #f3f8ff; }

.main-menu-container.minimize.menu-management .level1 {
  background-color: #ffdb6f; }

.main-menu-container.minimize.menu-admin .level1 {
  background-color: #fa8585; }

.main-menu-container.minimize > * {
  position: absolute; }

.main-menu-container.minimize .overlay {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.2);
  display: none; }

html:not(.expendableDesign) .main-menu-container.minimize.hide,
html:not(.expendableDesign) .main-menu-container.minimize.show {
  position: fixed;
  top: 0; }

html:not(.expendableDesign) .main-menu-container.minimize.opened,
html:not(.expendableDesign) .main-menu-container.minimize.opened {
  position: fixed;
  top: 45px; }

/* ==================== level 1 =================== */
.main-menu-container.minimize .level1 {
  display: block;
  left: -100%;
  height: 100%;
  overflow: auto;
  padding: 0 0 0 45px;
  width: calc(100% - 40px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  transition: all .3s linear; }

.main-menu-container.minimize .level1 > .item {
  padding: 0 0 8px 0;
  transition: none; }

.main-menu-container.minimize .level1 > .item:hover {
  background-color: inherit; }

.main-menu-container.minimize .level1 > .item:hover:before {
  display: none; }

.main-menu-container.minimize .level1 > .item > .inner {
  padding-left: 30px; }

.main-menu-container.minimize .level1 > .item > .inner .picto,
.main-menu-container.minimize .level1 > .item > .inner .picto.menu-account,
.main-menu-container.minimize .level1 > .item > .inner .picto.menu-buy,
.main-menu-container.minimize .level1 > .item > .inner .picto.menu-log,
.main-menu-container.minimize .level1 > .item > .inner .picto.menu-report,
.main-menu-container.minimize .level1 > .item > .inner .picto.menu-sale,
.main-menu-container.minimize .level1 > .item > .inner .picto.menu-user {
  width: 30px; }

.main-menu-container.minimize .level1 > .item > .inner .picto:before,
.main-menu-container.minimize .level1 > .item > .inner .picto.menu-account:before,
.main-menu-container.minimize .level1 > .item > .inner .picto.menu-buy:before,
.main-menu-container.minimize .level1 > .item > .inner .picto.menu-log:before,
.main-menu-container.minimize .level1 > .item > .inner .picto.menu-report:before,
.main-menu-container.minimize .level1 > .item > .inner .picto.menu-sale:before,
.main-menu-container.minimize .level1 > .item > .inner .picto.menu-user:before {
  top: 1px;
  left: 0; }

.main-menu-container.minimize .level1 > .item > .inner > .picto.new {
  margin-top: 15px;
  width: 16px; }

.main-menu-container.minimize .level1 > .item > .inner > .picto.new:before {
  top: -7px;
  left: -6px; }

.main-menu-container.minimize .level1 > .item.has-children:after {
  content: "";
  position: absolute;
  width: 45px;
  height: 45px;
  top: 0;
  right: 0;
  opacity: .3;
  background-position: center;
  background-repeat: no-repeat;
  transform: rotate(180deg); }

.main-menu-container.menu-general.minimize .level1 > .item.has-children:after {
  background-image: url(img/menu-arrow-down-general.svg); }

.main-menu-container.menu-management.minimize .level1 > .item.has-children:after {
  background-image: url(img/menu-arrow-down-management.svg); }

.main-menu-container.menu-admin.minimize .level1 > .item.has-children:after {
  background-image: url(img/menu-arrow-down-admin.svg); }

.main-menu-container.minimize .level1 > .item.withMainPicto > .inner {
  padding-left: 0; }

.main-menu-container.minimize .level1 > .item.withMainPicto > .inner .picto {
  margin-top: 6px; }

.main-menu-container.minimize .level1 > .item.withMainPicto > .inner .picto.new {
  margin-top: 15px; }

/* ==================== level 2 =================== */
.main-menu-container.minimize .level1 > .item > .level2 {
  display: none;
  visibility: visible;
  opacity: 1;
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  z-index: 0;
  border-radius: 0;
  width: 100%;
  padding: 0 0 0 0;
  border-top: 0;
  box-shadow: none; }

.main-menu-container.minimize .level1 > .item > .level2 > .item,
.main-menu-container.minimize .level1 > .item > .level2[class*="with-col"] .col-container .item {
  padding: 0 0 0 30px; }

.main-menu-container.minimize .level1 > .item > .level2 > .item:hover {
  background-color: inherit; }

.main-menu-container.minimize .level1 > .item > .level2 .item .inner,
.main-menu-container.minimize .level1 > .item > .level2[class*="with-col-groups"] .col-container .col,
.main-menu-container.minimize .level1 > .item > .level2[class*="with-cols"] .col-container .col .item {
  width: calc(100% - 15px); }

.main-menu-container.minimize .level1 > .item > .level2[class*="with-col"][class*="-2"] .col-container,
.main-menu-container.minimize .level1 > .item > .level2[class*="with-col"][class*="-3"] .col-container,
.main-menu-container.minimize .level1 > .item > .level2[class*="with-col"][class*="-4"] .col-container,
.main-menu-container.minimize .level1 > .item > .level2[class*="with-col"][class*="-5"] .col-container,
.main-menu-container.minimize .level1 > .item > .level2[class*="with-col-groups"][class*="-2"] .col-container .col,
.main-menu-container.minimize .level1 > .item > .level2[class*="with-col-groups"][class*="-3"] .col-container .col,
.main-menu-container.minimize .level1 > .item > .level2[class*="with-col-groups"][class*="-4"] .col-container .col,
.main-menu-container.minimize .level1 > .item > .level2[class*="with-col-groups"][class*="-5"] .col-container .col {
  width: auto; }

.main-menu-container.minimize .level1 > .item > .level2[class*="with-col"] .col-container {
  display: block; }

.main-menu-container.minimize .level1 > .item > .level2[class*="with-col"] .col-container .col {
  columns: auto;
  max-height: none; }

.main-menu-container.minimize .level1 > .item > .level2[class*="with-cols"] .col-container .col .item:last-child .inner {
  border-bottom-width: 0; }

.main-menu-container.minimize.menu-general .level1 > .item > .level2 .item .inner:hover,
.main-menu-container.minimize.menu-management .level1 > .item > .level2 .item .inner:hover,
.main-menu-container.minimize.menu-admin .level1 > .item > .level2 .item .inner:hover {
  background-color: transparent; }

/* ================== Animations ================= */
/* main-menu opened */
.main-menu-container.minimize.opened {
  right: 0;
  bottom: 0; }

.main-menu-container.minimize.opened .level1 {
  left: 0; }

.main-menu-container.menu-general.minimize.opened .menu-btn {
  background-image: url(img/menu-btn-close-general.svg); }

.main-menu-container.menu-management.minimize.opened .menu-btn {
  background-image: url(img/menu-btn-close-management.svg); }

.main-menu-container.menu-admin.minimize.opened .menu-btn {
  background-image: url(img/menu-btn-close-admin.svg); }

/* level2 items opened */
.main-menu-container.minimize .level1 > .item.has-children.active {
  background-color: #fff; }

.main-menu-container.minimize .level1 > .item.has-children.active:after {
  transform: rotate(0);
  opacity: 1; }

/* ================== Fixed menu if scrollTop > 45 ================= */
.main-menu-container.minimize.fixed {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0; }

.main-menu-container.minimize.fixed .level1 {
  height: 100%;
  overflow: auto; }

/* ===============================================================================
   =================================== print =====================================
   =============================================================================== */
@media only print {
  .main-menu-container {
    display: none; } }
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _planning.scss
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    SCSS
 * @package     OpenFlyers
 * @author      Christophe LARATTE <christophe.laratte@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Fri Dec 13 2002
 *
 * used to apply styles on planning
 */
/* ======================== init ======================== */
#fillMarker {
  font-size: 1px; }

.hd {
  font-size: 0.7em;
  color: #565656;
  background-color: #fff; }

.planning {
  width: 100%; }

.planning td {
  font-size: 11px;
  border-style: solid;
  border-color: #fff;
  border-width: 0 0 0 1px; }
  .planning td.growEffect {
    box-sizing: border-box;
    outline-style: solid;
    outline-color: #ffdb6f;
    outline-offset: -2px; }

.planning td .instructor {
  font-weight: bold; }

.planning > tbody td {
  padding: .3em; }

/** fixed tr elements for unplaced activity in the top of the window */
.planning .hoursFixedRow.show, .planning .ruleFixedRow.show, .planning .lineFixedRow.show {
  position: sticky;
  z-index: 1;
  background-color: #fff; }

/* ======================== resource colors ======================== */
.planning tr.line.pastel-aqua .thHeight,
.planning tr.line.pastel-aqua th[class*="Height"] > .inner,
.planning tr.line.pastel-aqua .instHeight,
.planning tr.line.pastel-aqua .s.line-start:not(.airborne),
.planning tr.line.pastel-aqua .s.line-start,
.planning tr.line.pastel-aqua .d,
.planning tr.line.pastel-aqua td.s.line-end:not(.not-first):after,
.planning tr.line.pastel-aqua td.s.unavailable,
.planning tbody tr.rule.pastel-aqua .pseudo-border,
.planning tbody tr.rule.before-line.pastel-aqua .line-end::after,
.planning tbody tr.rule.after-line.pastel-aqua .line-end::after {
  background-color: #e4f0f0; }

.planning tr.line.pastel-blue .thHeight,
.planning tr.line.pastel-blue th[class*="Height"] > .inner,
.planning tr.line.pastel-blue .instHeight,
.planning tr.line.pastel-blue .s.line-start:not(.airborne),
.planning tr.line.pastel-blue .s.line-start,
.planning tr.line.pastel-blue .d,
.planning tr.line.pastel-blue td.s.line-end:not(.not-first):after,
.planning tr.line.pastel-blue td.s.unavailable,
.planning tbody tr.rule.pastel-blue .pseudo-border,
.planning tbody tr.rule.before-line.pastel-blue .line-end::after,
.planning tbody tr.rule.after-line.pastel-blue .line-end::after {
  background-color: #E3F2F9; }

.planning tr.line.pastel-gold .thHeight,
.planning tr.line.pastel-gold th[class*="Height"] > .inner,
.planning tr.line.pastel-gold .instHeight,
.planning tr.line.pastel-gold .s.line-start:not(.airborne),
.planning tr.line.pastel-gold .s.line-start,
.planning tr.line.pastel-gold .d,
.planning tr.line.pastel-gold td.s.line-end:not(.not-first):after,
.planning tr.line.pastel-gold td.s.unavailable,
.planning tbody tr.rule.pastel-gold .pseudo-border,
.planning tbody tr.rule.before-line.pastel-gold .line-end::after,
.planning tbody tr.rule.after-line.pastel-gold .line-end::after {
  background-color: #FDF4E1; }

.planning tr.line.pastel-green .thHeight,
.planning tr.line.pastel-green th[class*="Height"] > .inner,
.planning tr.line.pastel-green .instHeight,
.planning tr.line.pastel-green .s.line-start:not(.airborne),
.planning tr.line.pastel-green .s.line-start,
.planning tr.line.pastel-green .d,
.planning tr.line.pastel-green td.s.line-end:not(.not-first):after,
.planning tr.line.pastel-green td.s.unavailable,
.planning tbody tr.rule.pastel-green .pseudo-border,
.planning tbody tr.rule.before-line.pastel-green .line-end::after,
.planning tbody tr.rule.after-line.pastel-green .line-end::after {
  background-color: #C7EDDE; }

.planning tr.line.pastel-lavender .thHeight,
.planning tr.line.pastel-lavender th[class*="Height"] > .inner,
.planning tr.line.pastel-lavender .instHeight,
.planning tr.line.pastel-lavender .s.line-start:not(.airborne),
.planning tr.line.pastel-lavender .s.line-start,
.planning tr.line.pastel-lavender .d,
.planning tr.line.pastel-lavender td.s.line-end:not(.not-first):after,
.planning tr.line.pastel-lavender td.s.unavailable,
.planning tbody tr.rule.pastel-lavender .pseudo-border,
.planning tbody tr.rule.before-line.pastel-lavender .line-end::after,
.planning tbody tr.rule.after-line.pastel-lavender .line-end::after {
  background-color: #E6E6FA; }

.planning tr.line.pastel-lilac .thHeight,
.planning tr.line.pastel-lilac th[class*="Height"] > .inner,
.planning tr.line.pastel-lilac .instHeight,
.planning tr.line.pastel-lilac .s.line-start:not(.airborne),
.planning tr.line.pastel-lilac .s.line-start,
.planning tr.line.pastel-lilac .d,
.planning tr.line.pastel-lilac td.s.line-end:not(.not-first):after,
.planning tr.line.pastel-lilac td.s.unavailable,
.planning tbody tr.rule.pastel-lilac .pseudo-border,
.planning tbody tr.rule.before-line.pastel-lilac .line-end::after,
.planning tbody tr.rule.after-line.pastel-lilac .line-end::after {
  background-color: #F6EBFB; }

.planning tr.line.pastel-orange .thHeight,
.planning tr.line.pastel-orange th[class*="Height"] > .inner,
.planning tr.line.pastel-orange .instHeight,
.planning tr.line.pastel-orange .s.line-start:not(.airborne),
.planning tr.line.pastel-orange .s.line-start,
.planning tr.line.pastel-orange .d,
.planning tr.line.pastel-orange td.s.line-end:not(.not-first):after,
.planning tr.line.pastel-orange td.s.unavailable,
.planning tbody tr.rule.pastel-orange .pseudo-border,
.planning tbody tr.rule.before-line.pastel-orange .line-end::after,
.planning tbody tr.rule.after-line.pastel-orange .line-end::after {
  background-color: #ffd299; }

.planning tr.line.pastel-peach .thHeight,
.planning tr.line.pastel-peach th[class*="Height"] > .inner,
.planning tr.line.pastel-peach .instHeight,
.planning tr.line.pastel-peach .s.line-start:not(.airborne),
.planning tr.line.pastel-peach .s.line-start,
.planning tr.line.pastel-peach .d,
.planning tr.line.pastel-peach td.s.line-end:not(.not-first):after,
.planning tr.line.pastel-peach td.s.unavailable,
.planning tbody tr.rule.pastel-peach .pseudo-border,
.planning tbody tr.rule.before-line.pastel-peach .line-end::after,
.planning tbody tr.rule.after-line.pastel-peach .line-end::after {
  background-color: #FBE7D4; }

.planning tr.line.pastel-pink .thHeight,
.planning tr.line.pastel-pink th[class*="Height"] > .inner,
.planning tr.line.pastel-pink .instHeight,
.planning tr.line.pastel-pink .s.line-start:not(.airborne),
.planning tr.line.pastel-pink .s.line-start,
.planning tr.line.pastel-pink .d,
.planning tr.line.pastel-pink td.s.line-end:not(.not-first):after,
.planning tr.line.pastel-pink td.s.unavailable,
.planning tbody tr.rule.pastel-pink .pseudo-border,
.planning tbody tr.rule.before-line.pastel-pink .line-end::after,
.planning tbody tr.rule.after-line.pastel-pink .line-end::after {
  background-color: #F7E1E1; }

/* ======================== th and td header generic styles ======================== */
.planning th {
  vertical-align: middle;
  max-width: max-content; }

.planning th,
.planning .hoursHeight {
  font-size: 11px;
  color: #777; }

.planning .HHeight {
  font-weight: normal;
  text-align: right; }

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

.planning .airborne,
.planning .default {
  cursor: pointer; }

.planning .airborne,
.planning tr.line .s.line-start.airborne {
  background-color: #337AFF !important;
  border-left-color: #337AFF !important; }

/* ================== rule (time markers between planning lines) ================== */
.planning tr.rule th,
.planning tr.rule td {
  padding: 0; }

.planning tr.rule .pseudo-border {
  height: 4px;
  background: #f2f2f2; }

/* --- thead --- */
.planning thead .rule td {
  font-size: 0;
  height: 3px; }

.planning thead .rule th .pseudo-border,
.planning thead .rule td .pseudo-border {
  background: transparent; }

/* --- tbody --- */
.planning tbody tr.rule th {
  vertical-align: bottom;
  background: #f2f2f2; }

.planning tbody tr.hours + tr.rule th .pseudo-border,
.planning tbody tr.hours + tr.rule .s .pseudo-border,
.planning tbody tr.hours + tr.rule .blank4ElasticLine .pseudo-border,
.planning tbody tr.hours + tr.rule .line-end .pseudo-border {
  background: #fff; }

.planning tbody tr.hours + tr.rule .line-end .pseudo-border {
  border-right: none; }

.planning tbody tr.rule td {
  font-size: 0;
  height: 3px; }

.planning tbody tr.rule.before-line th {
  border-left: 1px solid #ccc; }

.planning tbody tr.rule.before-line th .pseudo-border {
  border-top: 1px solid #ccc; }

.planning tr.rule .blank4ElasticLine:not(.withoutBorder) {
  border-left: 1px solid #f2f2f2; }
  .planning tr.rule .blank4ElasticLine:not(.withoutBorder):not(td:first-of-type) {
    border-left: 1px solid #ccc; }

.planning tr.rule .blank4ElasticLine.withoutBorder {
  border-left: 0px; }

.planning tbody tr.rule .blank4ElasticLine {
  background: #f2f2f2; }

.planning tbody tr.rule.before-line .blank4ElasticLine .pseudo-border {
  border-top: 1px solid #ccc; }

.planning tbody tr.rule.before-line .blank4ElasticLine .bottom {
  height: 5px; }

.planning tbody tr.rule.after-line .blank4ElasticLine .bottom {
  height: 4px; }

.planning tbody tr.rule.after-line .blank4ElasticLine.last {
  position: relative; }

.planning tbody tr.rule.after-line .blank4ElasticLine.last .pseudo-border {
  width: calc(100% + 1px); }

.planning tbody tr.rule .s {
  background: #f2f2f2;
  border-left: 0 none; }

.planning tbody tr.rule.before-line .s .pseudo-border {
  border-top: 1px solid #ccc; }

.planning tbody tr.rule.after-line .s .bottom {
  height: 4px; }

.planning tr.rule.after-line td {
  height: 8px; }

.planning tbody tr.rule .line-end {
  vertical-align: top; }

.planning tbody tr.rule.before-line .line-end {
  border-left: 1px solid #f2f2f2; }

.planning tbody tr.rule .line-end .pseudo-border {
  border-right: 1px solid #ccc; }

.planning tbody tr.rule.before-line .line-end .pseudo-border {
  position: relative;
  left: -1px;
  width: 6px;
  border-top: 1px solid #ccc; }

.planning tbody tr.rule.between-line .line-end .pseudo-border {
  position: relative;
  left: -1px;
  width: 6px; }

.planning tbody tr.rule.after-line .line-end .pseudo-border {
  width: 5px;
  height: 5px;
  border-bottom: 1px solid #ccc; }

.planning tr.rule.after-line th .bottom,
.planning tr.rule.after-line td .bottom {
  padding: 0;
  background: #fff;
  border-style: solid;
  border-color: #ccc;
  border-width: 1px 0 0 0; }

.planning tr.rule.after-line th .bottom {
  position: relative;
  height: 4px; }

.planning tr.rule.after-line th .bottom:before {
  content: "";
  position: absolute;
  top: -4px;
  left: -1px;
  width: 1px;
  height: 4px;
  background: #ccc; }

/* :not(*:root) targets only webkit browsers / corrects border alignment */
.planning:not(*:root) tr.rule.after-line th .bottom:before {
  left: 0; }

.planning tr.rule.after-line td .bottom {
  height: 1px; }

.planning tbody tr.rule.after-line .blank4ElasticLine.last .bottom {
  width: calc(100% + 1px); }

/* sets planning booking cells width */
.planning tr.tdWidth td {
  width: 30px; }
  .planning tr.tdWidth td:nth-child(2), .planning tr.tdWidth td:nth-child(3) {
    width: 1em; }

/* ======================== line (for booking) ======================== */
.planning tr.line {
  border-left: 1px solid #ccc; }

/* line header */
.planning tr.line th[class*="Height"] {
  padding: 0 0 0 3px;
  background: #f2f2f2; }

.planning tr.line th[class*="Height"] > .inner {
  padding: .3em .3em .3em 3px;
  line-height: 1.2em;
  text-align: left; }

.planning tr.line th[class*="Height"] > .inner span.picto[class*="to-maintenance"]::before {
  top: 2px; }

.planning tr.line th[class*="Height"] {
  color: #243656;
  width: 6em; }

/* line td */
.planning tr.line td:not(.validated-flight) {
  cursor: pointer; }
.planning tr.line td[draggable="true"] {
  cursor: move !important;
  position: relative;
  /* Disable text selection for the draggable element */
  user-select: none;
  -webkit-user-select: none;
  /* Safari and older versions of Chrome */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  /*
  * Firefox browsers specific CSS
  * @-moz-document: is a CSS at-rule specific to Firefox
  * url-prefix(): is used to target all URLs
  */ }
@-moz-document url-prefix() {
  .planning tr.line td[draggable="true"] {
    z-index: -1; } }
  .planning tr.line td[draggable="true"].dragging {
    opacity: .5;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0.98);
    z-index: 100; }
  .planning tr.line td[draggable="true"] .table-overlay {
    position: absolute;
    display: block;
    background-color: transparent;
    top: 0.2em;
    left: 0.2em; }
    .planning tr.line td[draggable="true"] .table-overlay .loader {
      width: 15px;
      height: 15px; }
      .planning tr.line td[draggable="true"] .table-overlay .loader .arc {
        width: 20px;
        height: 25px;
        top: -20px;
        left: -20px; }
        .planning tr.line td[draggable="true"] .table-overlay .loader .arc::before {
          width: 24px;
          height: 24px; }
  .planning tr.line td[draggable="true"] .picto.check, .planning tr.line td[draggable="true"] .picto.arrows {
    position: absolute;
    display: block;
    top: 0.2em;
    left: 0.2em;
    width: 16px;
    height: 16px; }
    .planning tr.line td[draggable="true"] .picto.check::before, .planning tr.line td[draggable="true"] .picto.arrows::before {
      font-size: 1em;
      top: -0.65em;
      left: -0.05em; }
  .planning tr.line td[draggable="true"] .picto.arrows::before {
    font-size: 1.5em;
    top: -0.45em; }

/* cancels reduced height effects
   @todo delete reduced height functionnality */
.planning tr.line td > span {
  display: block; }

/* day (d), current time (dn), night (n), twilight (t) slots */
.planning tr.line td.d,
.planning tr.line td.dn,
.planning tr.line td.n,
.planning tr.line td.t,
.planning tr.line td.s.unavailable {
  border-left-color: rgba(0, 0, 0, 0.1); }

/* airborne slot (r) */
.planning tr.line td.r {
  background-color: #337AFF; }

/* available seat (a) */
.planning tr.line td.a {
  background-color: #F2DF20; }

/* available day slot (d) */
.planning tr.line td.d {
  background-color: #f2f2f2; }

/* other instructor with available seat slot (e) */
.planning tr.line td.e {
  background-color: #DACA16; }

/* unfree slot (q) */
.planning tr.line td.q {
  background-color: #B4B4B4; }

/* current time slot (dn) */
.planning tr.line td.dn {
  background-color: #DF755B; }

/* night slot (n) */
.planning tr.line td.n {
  background-color: #607db0; }

/* night now slot (nn) */
.planning tr.line td.nn {
  background-color: #CC8C1C; }

/* twilight slot (t) */
.planning tr.line td.t {
  background-color: #B7C7E4; }

/* twilight now slot (tn) */
.planning tr.line td.tn {
  background-color: #DD9D2D; }

/* twilight now slot (tn) */
.planning tr.line td.tp {
  background-color: red; }

.planning tr.line td.overlayLayer {
  background-color: #cfe2f3 !important;
  border: 1px dashed #fff; }

/* empty cells (s) */
.planning tr.line td.s {
  cursor: auto; }

/* unavailable slots in empty cells */
.planning tr.line td.s.unavailable {
  background: #f2f2f2 url(img/hatch.png); }

/* empty-cells at line-start */
.planning tr.line .s.line-start:not(.airborne) {
  background-color: #f2f2f2;
  border-left-color: transparent; }

.planning tr.line .s.line-start.last {
  border-style: solid;
  border-right-color: #ccc;
  border-right-width: 1px; }

/* empty-cells at line-end */
.planning tr.line td.s.line-end:not(.not-first) {
  position: relative;
  border-left: 1px solid rgba(0, 0, 0, 0.1); }

.planning tr.line td.s.line-end:not(.not-first):before,
.planning tr.line td.s.line-end:not(.not-first):after {
  content: "";
  position: absolute; }

.planning tr.line td.s.line-end:not(.not-first):before {
  top: 0;
  left: -2px;
  z-index: 1;
  width: 1px;
  height: 100%;
  background: rgba(0, 0, 0, 0.1); }

.planning tr.line td.s[colspan] + td.s.line-end:not(.not-first):before {
  opacity: 0; }

.planning tr.line td.s.line-end:not(.not-first):after {
  top: -1px;
  left: -1px;
  width: 5px;
  height: calc(100% + 1px);
  background: #f2f2f2;
  border-right: 1px solid #ccc; }

/* ======================== legend-pop-up ======================== */
.legend-pop-up {
  padding: 0 1em 3em 1em; }
  .legend-pop-up h3 {
    font-size: 1em; }
  .legend-pop-up .planning tr.line {
    border: none; }

/* ======================== android (class added in javascript/expandableDesign.js) ======================== */
#planningContainer.android {
  overflow-x: auto; }

/* ======================== empty table below planning ======================== */
.planning + table,
.planning + table tr,
.planning + table td {
  border: 0 !important; }

/*================================ Picto seat ================================*/
/* @link https://work.openflyers.com/OF4-HCI-Free-seats */
/* legendPopup */
.planning tr.line .freeSeatPicto {
  /**
   * manage styles for specific picto-fonts
   * .picto CSS class is reserved for picto-font styles
   * color, font-size and position of picto-fonts
   */
  /* picto which matches to [data-picto]: symbol of the seat, selected with the selector :before */
  /* picto which matches to [data-picto-second]: the number of available places, selected with the selector :after */ }
  .planning tr.line .freeSeatPicto .picto.seat:before {
    padding: 0;
    font-size: 30px;
    color: #183455; }
  .planning tr.line .freeSeatPicto .picto.seat:after {
    margin-left: .45em;
    margin-top: .3em;
    position: absolute;
    font-size: 10px;
    color: white; }

/* Slot */
/* largeBooking8-15: colspan from 8 to 15 => large size of booking (2 hours <= size < 4 hours) */
/* largeBooking16-64: colspan from 16 to 64 => large size of booking (size >= 4 hours) */
/* mediumBooking: colspan from 4 to 7 => medium size of booking (2hours > size >= 1 hour) */
/* smallBooking: colspan from 1 to 3 => small size of booking (size < 1 hour) */
td[colspan='8'], td[colspan='9'], td[colspan='10'], td[colspan='11'], td[colspan='12'], td[colspan='13'], td[colspan='14'], td[colspan='15'], td[colspan='16'], td[colspan='17'], td[colspan='18'], td[colspan='19'], td[colspan='20'], td[colspan='21'], td[colspan='22'], td[colspan='23'], td[colspan='24'], td[colspan='25'], td[colspan='26'], td[colspan='27'], td[colspan='28'], td[colspan='29'], td[colspan='30'], td[colspan='31'], td[colspan='32'], td[colspan='33'], td[colspan='34'], td[colspan='35'], td[colspan='36'], td[colspan='37'], td[colspan='38'], td[colspan='39'], td[colspan='40'], td[colspan='41'], td[colspan='42'], td[colspan='43'], td[colspan='44'], td[colspan='45'], td[colspan='46'], td[colspan='47'], td[colspan='48'], td[colspan='49'], td[colspan='50'], td[colspan='51'], td[colspan='42'], td[colspan='53'], td[colspan='54'], td[colspan='55'], td[colspan='56'], td[colspan='57'], td[colspan='58'], td[colspan='59'], td[colspan='60'], td[colspan='61'], td[colspan='62'], td[colspan='63'], td[colspan='64'], td[colspan='4'], td[colspan='5'], td[colspan='6'], td[colspan='7'] {
  /* booking: container div of each reservation if there is a free seat */ }
  td[colspan='8'] .booking, td[colspan='9'] .booking, td[colspan='10'] .booking, td[colspan='11'] .booking, td[colspan='12'] .booking, td[colspan='13'] .booking, td[colspan='14'] .booking, td[colspan='15'] .booking, td[colspan='16'] .booking, td[colspan='17'] .booking, td[colspan='18'] .booking, td[colspan='19'] .booking, td[colspan='20'] .booking, td[colspan='21'] .booking, td[colspan='22'] .booking, td[colspan='23'] .booking, td[colspan='24'] .booking, td[colspan='25'] .booking, td[colspan='26'] .booking, td[colspan='27'] .booking, td[colspan='28'] .booking, td[colspan='29'] .booking, td[colspan='30'] .booking, td[colspan='31'] .booking, td[colspan='32'] .booking, td[colspan='33'] .booking, td[colspan='34'] .booking, td[colspan='35'] .booking, td[colspan='36'] .booking, td[colspan='37'] .booking, td[colspan='38'] .booking, td[colspan='39'] .booking, td[colspan='40'] .booking, td[colspan='41'] .booking, td[colspan='42'] .booking, td[colspan='43'] .booking, td[colspan='44'] .booking, td[colspan='45'] .booking, td[colspan='46'] .booking, td[colspan='47'] .booking, td[colspan='48'] .booking, td[colspan='49'] .booking, td[colspan='50'] .booking, td[colspan='51'] .booking, td[colspan='42'] .booking, td[colspan='53'] .booking, td[colspan='54'] .booking, td[colspan='55'] .booking, td[colspan='56'] .booking, td[colspan='57'] .booking, td[colspan='58'] .booking, td[colspan='59'] .booking, td[colspan='60'] .booking, td[colspan='61'] .booking, td[colspan='62'] .booking, td[colspan='63'] .booking, td[colspan='64'] .booking, td[colspan='4'] .booking, td[colspan='5'] .booking, td[colspan='6'] .booking, td[colspan='7'] .booking {
    display: flex;
    grid-gap: 0;
    align-items: center;
    justify-content: center;
    /* bookingText: div container of the information of each reservation: instructor, expected time before overhaul, ... */
    /* bookingIcon: display if there is a free seat, div container of the seat pictogram which symbolizes the seats available for each reservation */ }
    td[colspan='8'] .booking .bookingText, td[colspan='9'] .booking .bookingText, td[colspan='10'] .booking .bookingText, td[colspan='11'] .booking .bookingText, td[colspan='12'] .booking .bookingText, td[colspan='13'] .booking .bookingText, td[colspan='14'] .booking .bookingText, td[colspan='15'] .booking .bookingText, td[colspan='16'] .booking .bookingText, td[colspan='17'] .booking .bookingText, td[colspan='18'] .booking .bookingText, td[colspan='19'] .booking .bookingText, td[colspan='20'] .booking .bookingText, td[colspan='21'] .booking .bookingText, td[colspan='22'] .booking .bookingText, td[colspan='23'] .booking .bookingText, td[colspan='24'] .booking .bookingText, td[colspan='25'] .booking .bookingText, td[colspan='26'] .booking .bookingText, td[colspan='27'] .booking .bookingText, td[colspan='28'] .booking .bookingText, td[colspan='29'] .booking .bookingText, td[colspan='30'] .booking .bookingText, td[colspan='31'] .booking .bookingText, td[colspan='32'] .booking .bookingText, td[colspan='33'] .booking .bookingText, td[colspan='34'] .booking .bookingText, td[colspan='35'] .booking .bookingText, td[colspan='36'] .booking .bookingText, td[colspan='37'] .booking .bookingText, td[colspan='38'] .booking .bookingText, td[colspan='39'] .booking .bookingText, td[colspan='40'] .booking .bookingText, td[colspan='41'] .booking .bookingText, td[colspan='42'] .booking .bookingText, td[colspan='43'] .booking .bookingText, td[colspan='44'] .booking .bookingText, td[colspan='45'] .booking .bookingText, td[colspan='46'] .booking .bookingText, td[colspan='47'] .booking .bookingText, td[colspan='48'] .booking .bookingText, td[colspan='49'] .booking .bookingText, td[colspan='50'] .booking .bookingText, td[colspan='51'] .booking .bookingText, td[colspan='42'] .booking .bookingText, td[colspan='53'] .booking .bookingText, td[colspan='54'] .booking .bookingText, td[colspan='55'] .booking .bookingText, td[colspan='56'] .booking .bookingText, td[colspan='57'] .booking .bookingText, td[colspan='58'] .booking .bookingText, td[colspan='59'] .booking .bookingText, td[colspan='60'] .booking .bookingText, td[colspan='61'] .booking .bookingText, td[colspan='62'] .booking .bookingText, td[colspan='63'] .booking .bookingText, td[colspan='64'] .booking .bookingText, td[colspan='4'] .booking .bookingText, td[colspan='5'] .booking .bookingText, td[colspan='6'] .booking .bookingText, td[colspan='7'] .booking .bookingText {
      flex: 1; }
      td[colspan='8'] .booking .bookingText .freeSeat, td[colspan='9'] .booking .bookingText .freeSeat, td[colspan='10'] .booking .bookingText .freeSeat, td[colspan='11'] .booking .bookingText .freeSeat, td[colspan='12'] .booking .bookingText .freeSeat, td[colspan='13'] .booking .bookingText .freeSeat, td[colspan='14'] .booking .bookingText .freeSeat, td[colspan='15'] .booking .bookingText .freeSeat, td[colspan='16'] .booking .bookingText .freeSeat, td[colspan='17'] .booking .bookingText .freeSeat, td[colspan='18'] .booking .bookingText .freeSeat, td[colspan='19'] .booking .bookingText .freeSeat, td[colspan='20'] .booking .bookingText .freeSeat, td[colspan='21'] .booking .bookingText .freeSeat, td[colspan='22'] .booking .bookingText .freeSeat, td[colspan='23'] .booking .bookingText .freeSeat, td[colspan='24'] .booking .bookingText .freeSeat, td[colspan='25'] .booking .bookingText .freeSeat, td[colspan='26'] .booking .bookingText .freeSeat, td[colspan='27'] .booking .bookingText .freeSeat, td[colspan='28'] .booking .bookingText .freeSeat, td[colspan='29'] .booking .bookingText .freeSeat, td[colspan='30'] .booking .bookingText .freeSeat, td[colspan='31'] .booking .bookingText .freeSeat, td[colspan='32'] .booking .bookingText .freeSeat, td[colspan='33'] .booking .bookingText .freeSeat, td[colspan='34'] .booking .bookingText .freeSeat, td[colspan='35'] .booking .bookingText .freeSeat, td[colspan='36'] .booking .bookingText .freeSeat, td[colspan='37'] .booking .bookingText .freeSeat, td[colspan='38'] .booking .bookingText .freeSeat, td[colspan='39'] .booking .bookingText .freeSeat, td[colspan='40'] .booking .bookingText .freeSeat, td[colspan='41'] .booking .bookingText .freeSeat, td[colspan='42'] .booking .bookingText .freeSeat, td[colspan='43'] .booking .bookingText .freeSeat, td[colspan='44'] .booking .bookingText .freeSeat, td[colspan='45'] .booking .bookingText .freeSeat, td[colspan='46'] .booking .bookingText .freeSeat, td[colspan='47'] .booking .bookingText .freeSeat, td[colspan='48'] .booking .bookingText .freeSeat, td[colspan='49'] .booking .bookingText .freeSeat, td[colspan='50'] .booking .bookingText .freeSeat, td[colspan='51'] .booking .bookingText .freeSeat, td[colspan='42'] .booking .bookingText .freeSeat, td[colspan='53'] .booking .bookingText .freeSeat, td[colspan='54'] .booking .bookingText .freeSeat, td[colspan='55'] .booking .bookingText .freeSeat, td[colspan='56'] .booking .bookingText .freeSeat, td[colspan='57'] .booking .bookingText .freeSeat, td[colspan='58'] .booking .bookingText .freeSeat, td[colspan='59'] .booking .bookingText .freeSeat, td[colspan='60'] .booking .bookingText .freeSeat, td[colspan='61'] .booking .bookingText .freeSeat, td[colspan='62'] .booking .bookingText .freeSeat, td[colspan='63'] .booking .bookingText .freeSeat, td[colspan='64'] .booking .bookingText .freeSeat, td[colspan='4'] .booking .bookingText .freeSeat, td[colspan='5'] .booking .bookingText .freeSeat, td[colspan='6'] .booking .bookingText .freeSeat, td[colspan='7'] .booking .bookingText .freeSeat {
        position: relative; }
      td[colspan='8'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='9'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='10'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='11'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='12'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='13'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='14'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='15'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='16'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='17'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='18'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='19'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='20'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='21'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='22'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='23'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='24'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='25'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='26'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='27'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='28'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='29'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='30'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='31'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='32'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='33'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='34'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='35'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='36'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='37'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='38'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='39'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='40'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='41'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='42'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='43'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='44'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='45'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='46'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='47'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='48'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='49'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='50'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='51'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='42'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='53'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='54'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='55'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='56'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='57'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='58'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='59'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='60'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='61'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='62'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='63'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='64'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='4'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='5'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='6'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='7'] .booking .bookingText .expectedTimeBeforeOverhaul {
        position: relative; }
    td[colspan='8'] .booking .bookingIcon, td[colspan='9'] .booking .bookingIcon, td[colspan='10'] .booking .bookingIcon, td[colspan='11'] .booking .bookingIcon, td[colspan='12'] .booking .bookingIcon, td[colspan='13'] .booking .bookingIcon, td[colspan='14'] .booking .bookingIcon, td[colspan='15'] .booking .bookingIcon, td[colspan='16'] .booking .bookingIcon, td[colspan='17'] .booking .bookingIcon, td[colspan='18'] .booking .bookingIcon, td[colspan='19'] .booking .bookingIcon, td[colspan='20'] .booking .bookingIcon, td[colspan='21'] .booking .bookingIcon, td[colspan='22'] .booking .bookingIcon, td[colspan='23'] .booking .bookingIcon, td[colspan='24'] .booking .bookingIcon, td[colspan='25'] .booking .bookingIcon, td[colspan='26'] .booking .bookingIcon, td[colspan='27'] .booking .bookingIcon, td[colspan='28'] .booking .bookingIcon, td[colspan='29'] .booking .bookingIcon, td[colspan='30'] .booking .bookingIcon, td[colspan='31'] .booking .bookingIcon, td[colspan='32'] .booking .bookingIcon, td[colspan='33'] .booking .bookingIcon, td[colspan='34'] .booking .bookingIcon, td[colspan='35'] .booking .bookingIcon, td[colspan='36'] .booking .bookingIcon, td[colspan='37'] .booking .bookingIcon, td[colspan='38'] .booking .bookingIcon, td[colspan='39'] .booking .bookingIcon, td[colspan='40'] .booking .bookingIcon, td[colspan='41'] .booking .bookingIcon, td[colspan='42'] .booking .bookingIcon, td[colspan='43'] .booking .bookingIcon, td[colspan='44'] .booking .bookingIcon, td[colspan='45'] .booking .bookingIcon, td[colspan='46'] .booking .bookingIcon, td[colspan='47'] .booking .bookingIcon, td[colspan='48'] .booking .bookingIcon, td[colspan='49'] .booking .bookingIcon, td[colspan='50'] .booking .bookingIcon, td[colspan='51'] .booking .bookingIcon, td[colspan='42'] .booking .bookingIcon, td[colspan='53'] .booking .bookingIcon, td[colspan='54'] .booking .bookingIcon, td[colspan='55'] .booking .bookingIcon, td[colspan='56'] .booking .bookingIcon, td[colspan='57'] .booking .bookingIcon, td[colspan='58'] .booking .bookingIcon, td[colspan='59'] .booking .bookingIcon, td[colspan='60'] .booking .bookingIcon, td[colspan='61'] .booking .bookingIcon, td[colspan='62'] .booking .bookingIcon, td[colspan='63'] .booking .bookingIcon, td[colspan='64'] .booking .bookingIcon, td[colspan='4'] .booking .bookingIcon, td[colspan='5'] .booking .bookingIcon, td[colspan='6'] .booking .bookingIcon, td[colspan='7'] .booking .bookingIcon {
      flex: .5;
      text-align: left;
      position: relative;
      /**
       * manage styles for specific picto-fonts
       * .picto CSS class is reserved for picto-font styles
       * color, font-size and position of picto-fonts
       */
      /* picto which matches to [data-picto]: symbol of the seat, selected with the selector :before */
      /* picto which matches to [data-picto-second]: the number of available places, selected with the selector :after */ }
      td[colspan='8'] .booking .bookingIcon .picto.seat:before, td[colspan='9'] .booking .bookingIcon .picto.seat:before, td[colspan='10'] .booking .bookingIcon .picto.seat:before, td[colspan='11'] .booking .bookingIcon .picto.seat:before, td[colspan='12'] .booking .bookingIcon .picto.seat:before, td[colspan='13'] .booking .bookingIcon .picto.seat:before, td[colspan='14'] .booking .bookingIcon .picto.seat:before, td[colspan='15'] .booking .bookingIcon .picto.seat:before, td[colspan='16'] .booking .bookingIcon .picto.seat:before, td[colspan='17'] .booking .bookingIcon .picto.seat:before, td[colspan='18'] .booking .bookingIcon .picto.seat:before, td[colspan='19'] .booking .bookingIcon .picto.seat:before, td[colspan='20'] .booking .bookingIcon .picto.seat:before, td[colspan='21'] .booking .bookingIcon .picto.seat:before, td[colspan='22'] .booking .bookingIcon .picto.seat:before, td[colspan='23'] .booking .bookingIcon .picto.seat:before, td[colspan='24'] .booking .bookingIcon .picto.seat:before, td[colspan='25'] .booking .bookingIcon .picto.seat:before, td[colspan='26'] .booking .bookingIcon .picto.seat:before, td[colspan='27'] .booking .bookingIcon .picto.seat:before, td[colspan='28'] .booking .bookingIcon .picto.seat:before, td[colspan='29'] .booking .bookingIcon .picto.seat:before, td[colspan='30'] .booking .bookingIcon .picto.seat:before, td[colspan='31'] .booking .bookingIcon .picto.seat:before, td[colspan='32'] .booking .bookingIcon .picto.seat:before, td[colspan='33'] .booking .bookingIcon .picto.seat:before, td[colspan='34'] .booking .bookingIcon .picto.seat:before, td[colspan='35'] .booking .bookingIcon .picto.seat:before, td[colspan='36'] .booking .bookingIcon .picto.seat:before, td[colspan='37'] .booking .bookingIcon .picto.seat:before, td[colspan='38'] .booking .bookingIcon .picto.seat:before, td[colspan='39'] .booking .bookingIcon .picto.seat:before, td[colspan='40'] .booking .bookingIcon .picto.seat:before, td[colspan='41'] .booking .bookingIcon .picto.seat:before, td[colspan='42'] .booking .bookingIcon .picto.seat:before, td[colspan='43'] .booking .bookingIcon .picto.seat:before, td[colspan='44'] .booking .bookingIcon .picto.seat:before, td[colspan='45'] .booking .bookingIcon .picto.seat:before, td[colspan='46'] .booking .bookingIcon .picto.seat:before, td[colspan='47'] .booking .bookingIcon .picto.seat:before, td[colspan='48'] .booking .bookingIcon .picto.seat:before, td[colspan='49'] .booking .bookingIcon .picto.seat:before, td[colspan='50'] .booking .bookingIcon .picto.seat:before, td[colspan='51'] .booking .bookingIcon .picto.seat:before, td[colspan='42'] .booking .bookingIcon .picto.seat:before, td[colspan='53'] .booking .bookingIcon .picto.seat:before, td[colspan='54'] .booking .bookingIcon .picto.seat:before, td[colspan='55'] .booking .bookingIcon .picto.seat:before, td[colspan='56'] .booking .bookingIcon .picto.seat:before, td[colspan='57'] .booking .bookingIcon .picto.seat:before, td[colspan='58'] .booking .bookingIcon .picto.seat:before, td[colspan='59'] .booking .bookingIcon .picto.seat:before, td[colspan='60'] .booking .bookingIcon .picto.seat:before, td[colspan='61'] .booking .bookingIcon .picto.seat:before, td[colspan='62'] .booking .bookingIcon .picto.seat:before, td[colspan='63'] .booking .bookingIcon .picto.seat:before, td[colspan='64'] .booking .bookingIcon .picto.seat:before, td[colspan='4'] .booking .bookingIcon .picto.seat:before, td[colspan='5'] .booking .bookingIcon .picto.seat:before, td[colspan='6'] .booking .bookingIcon .picto.seat:before, td[colspan='7'] .booking .bookingIcon .picto.seat:before {
        position: relative;
        color: #183455;
        font-size: 30px; }
      td[colspan='8'] .booking .bookingIcon .picto.seat:after, td[colspan='9'] .booking .bookingIcon .picto.seat:after, td[colspan='10'] .booking .bookingIcon .picto.seat:after, td[colspan='11'] .booking .bookingIcon .picto.seat:after, td[colspan='12'] .booking .bookingIcon .picto.seat:after, td[colspan='13'] .booking .bookingIcon .picto.seat:after, td[colspan='14'] .booking .bookingIcon .picto.seat:after, td[colspan='15'] .booking .bookingIcon .picto.seat:after, td[colspan='16'] .booking .bookingIcon .picto.seat:after, td[colspan='17'] .booking .bookingIcon .picto.seat:after, td[colspan='18'] .booking .bookingIcon .picto.seat:after, td[colspan='19'] .booking .bookingIcon .picto.seat:after, td[colspan='20'] .booking .bookingIcon .picto.seat:after, td[colspan='21'] .booking .bookingIcon .picto.seat:after, td[colspan='22'] .booking .bookingIcon .picto.seat:after, td[colspan='23'] .booking .bookingIcon .picto.seat:after, td[colspan='24'] .booking .bookingIcon .picto.seat:after, td[colspan='25'] .booking .bookingIcon .picto.seat:after, td[colspan='26'] .booking .bookingIcon .picto.seat:after, td[colspan='27'] .booking .bookingIcon .picto.seat:after, td[colspan='28'] .booking .bookingIcon .picto.seat:after, td[colspan='29'] .booking .bookingIcon .picto.seat:after, td[colspan='30'] .booking .bookingIcon .picto.seat:after, td[colspan='31'] .booking .bookingIcon .picto.seat:after, td[colspan='32'] .booking .bookingIcon .picto.seat:after, td[colspan='33'] .booking .bookingIcon .picto.seat:after, td[colspan='34'] .booking .bookingIcon .picto.seat:after, td[colspan='35'] .booking .bookingIcon .picto.seat:after, td[colspan='36'] .booking .bookingIcon .picto.seat:after, td[colspan='37'] .booking .bookingIcon .picto.seat:after, td[colspan='38'] .booking .bookingIcon .picto.seat:after, td[colspan='39'] .booking .bookingIcon .picto.seat:after, td[colspan='40'] .booking .bookingIcon .picto.seat:after, td[colspan='41'] .booking .bookingIcon .picto.seat:after, td[colspan='42'] .booking .bookingIcon .picto.seat:after, td[colspan='43'] .booking .bookingIcon .picto.seat:after, td[colspan='44'] .booking .bookingIcon .picto.seat:after, td[colspan='45'] .booking .bookingIcon .picto.seat:after, td[colspan='46'] .booking .bookingIcon .picto.seat:after, td[colspan='47'] .booking .bookingIcon .picto.seat:after, td[colspan='48'] .booking .bookingIcon .picto.seat:after, td[colspan='49'] .booking .bookingIcon .picto.seat:after, td[colspan='50'] .booking .bookingIcon .picto.seat:after, td[colspan='51'] .booking .bookingIcon .picto.seat:after, td[colspan='42'] .booking .bookingIcon .picto.seat:after, td[colspan='53'] .booking .bookingIcon .picto.seat:after, td[colspan='54'] .booking .bookingIcon .picto.seat:after, td[colspan='55'] .booking .bookingIcon .picto.seat:after, td[colspan='56'] .booking .bookingIcon .picto.seat:after, td[colspan='57'] .booking .bookingIcon .picto.seat:after, td[colspan='58'] .booking .bookingIcon .picto.seat:after, td[colspan='59'] .booking .bookingIcon .picto.seat:after, td[colspan='60'] .booking .bookingIcon .picto.seat:after, td[colspan='61'] .booking .bookingIcon .picto.seat:after, td[colspan='62'] .booking .bookingIcon .picto.seat:after, td[colspan='63'] .booking .bookingIcon .picto.seat:after, td[colspan='64'] .booking .bookingIcon .picto.seat:after, td[colspan='4'] .booking .bookingIcon .picto.seat:after, td[colspan='5'] .booking .bookingIcon .picto.seat:after, td[colspan='6'] .booking .bookingIcon .picto.seat:after, td[colspan='7'] .booking .bookingIcon .picto.seat:after {
        position: absolute;
        z-index: 1;
        color: white;
        top: -1.6em;
        left: .45em;
        font-size: 10px; }

td[colspan='1'], td[colspan='2'], td[colspan='3'] {
  /* booking: container div of each reservation if there is a free seat */ }
  td[colspan='1'] .booking, td[colspan='2'] .booking, td[colspan='3'] .booking {
    display: flex;
    flex-direction: column-reverse;
    grid-gap: 0;
    align-items: center;
    justify-content: center;
    /* bookingText: div container of the information of each reservation: instructor, expected time before overhaul, ... */
    /* bookingIcon: display if there is a free seat, div container of the seat pictogram which symbolizes the seats available for each reservation */ }
    td[colspan='1'] .booking .bookingText, td[colspan='2'] .booking .bookingText, td[colspan='3'] .booking .bookingText {
      flex: 1; }
      td[colspan='1'] .booking .bookingText .freeSeat, td[colspan='2'] .booking .bookingText .freeSeat, td[colspan='3'] .booking .bookingText .freeSeat {
        position: relative; }
      td[colspan='1'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='2'] .booking .bookingText .expectedTimeBeforeOverhaul, td[colspan='3'] .booking .bookingText .expectedTimeBeforeOverhaul {
        position: relative; }
    td[colspan='1'] .booking .bookingIcon, td[colspan='2'] .booking .bookingIcon, td[colspan='3'] .booking .bookingIcon {
      flex: .5;
      text-align: center;
      position: relative;
      /**
       * manage styles for specific picto-fonts
       * .picto CSS class is reserved for picto-font styles
       * color, font-size and position of picto-fonts
       */
      /* picto which matches to [data-picto]: symbol of the seat, selected with the selector :before */
      /* picto which matches to [data-picto-second]: the number of available places, selected with the selector :after */ }
      td[colspan='1'] .booking .bookingIcon .picto.seat:before, td[colspan='2'] .booking .bookingIcon .picto.seat:before, td[colspan='3'] .booking .bookingIcon .picto.seat:before {
        position: relative;
        color: #183455;
        font-size: 30px; }
      td[colspan='1'] .booking .bookingIcon .picto.seat:after, td[colspan='2'] .booking .bookingIcon .picto.seat:after, td[colspan='3'] .booking .bookingIcon .picto.seat:after {
        position: absolute;
        z-index: 1;
        color: white;
        top: -1.6em;
        left: .45em;
        font-size: 10px; }

/**
 * Styling pilots images and names for reservation's context menu 
 * And removing the position css value from the context-menu-list class
 * So that imgContainerList will be positioned relative to the context-menu-list element
 */
.context-menu-root.hasImages .context-menu-item.context-menu-html.not-selectable.disabled {
  position: static;
  overflow: visible !important; }
  .context-menu-root.hasImages .context-menu-item.context-menu-html.not-selectable.disabled .imgContainerList {
    position: absolute;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    left: 100%;
    height: 101%;
    top: -1px;
    background: #EEE;
    border: 1px solid #DDD;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); }
    .context-menu-root.hasImages .context-menu-item.context-menu-html.not-selectable.disabled .imgContainerList .imgContainerItem {
      width: 120px;
      flex-grow: 1;
      text-align: start;
      display: flex;
      flex-direction: column;
      border-left: 1px solid #ccc; }
      .context-menu-root.hasImages .context-menu-item.context-menu-html.not-selectable.disabled .imgContainerList .imgContainerItem .imgTitle {
        display: inline-block;
        position: relative;
        top: 0;
        height: 20%;
        width: 100%;
        font-size: 0.9em;
        left: 2%; }
      .context-menu-root.hasImages .context-menu-item.context-menu-html.not-selectable.disabled .imgContainerList .imgContainerItem .imgWrapper {
        height: 80%;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        image-rendering: auto; }

/**
 * put the flex direction in inverted column and align content in center for bookingIcon class
 * When width < 1024px and just for large size of booking with colspan between 8 and 15
 */
@media (max-width: 1024px) {
  td[colspan='8'] .booking, td[colspan='9'] .booking, td[colspan='10'] .booking, td[colspan='11'] .booking, td[colspan='12'] .booking, td[colspan='13'] .booking, td[colspan='14'] .booking, td[colspan='15'] .booking {
    flex-direction: column-reverse; }
    td[colspan='8'] .booking .bookingIcon, td[colspan='9'] .booking .bookingIcon, td[colspan='10'] .booking .bookingIcon, td[colspan='11'] .booking .bookingIcon, td[colspan='12'] .booking .bookingIcon, td[colspan='13'] .booking .bookingIcon, td[colspan='14'] .booking .bookingIcon, td[colspan='15'] .booking .bookingIcon {
      text-align: center; } }
/**
 * put the flex direction in inverted column and align content in center for bookingIcon class
 * When width < 1439px and just for medium size of booking
 */
@media (max-width: 1439px) {
  td[colspan='4'] .booking, td[colspan='5'] .booking, td[colspan='6'] .booking, td[colspan='7'] .booking {
    flex-direction: column-reverse; }
    td[colspan='4'] .booking .bookingIcon, td[colspan='5'] .booking .bookingIcon, td[colspan='6'] .booking .bookingIcon, td[colspan='7'] .booking .bookingIcon {
      text-align: center; } }
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _table.scss
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    SCSS
 * @package     OpenFlyers
 * @author      Christophe LARATTE <christophe.laratte@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Fri Dec 13 2002
 *
 * used to apply styles on tables and pagers (numeric, select letter and profil)
 */
/* ===============================================================================
   =================================== default ===================================
   =============================================================================== */
/* =================== table-wrapper (i.g. in validity page, useful for table loader) =================== */
.table-wrapper {
  position: relative; }

/* =================== table-overlay (for table loader, i.g. in user validity page) =================== */
.table-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: -20px;
  bottom: 0;
  left: -1px;
  background-color: rgba(255, 255, 255, 0.9); }
  .table-overlay .loader,
  .table-overlay .loader .arc {
    width: 30px;
    height: 30px; }
  .table-overlay .loader,
  .table-overlay .loader .arc:before {
    border-style: solid;
    border-width: 3px;
    border-radius: 18px; }
  .table-overlay .loader .arc,
  .table-overlay .loader .arc:before {
    position: absolute; }
  .table-overlay .loader {
    position: relative;
    border-color: #e2e2e2;
    animation: spin .5s ease-in-out infinite; }
@keyframes spin {
  100% {
    transform: rotate(360deg); } }
    .table-overlay .loader .arc {
      top: -18px;
      left: -18px;
      overflow: hidden; }
      .table-overlay .loader .arc:before {
        top: 15px;
        left: 15px;
        content: "";
        width: 29px;
        height: 29px;
        border-color: #5785d8; }

/* =================== pager =================== */
.pager {
  display: inline-block;
  margin: 1em 0 0 0; }
  .pager > .item,
  .pager .curLink {
    display: inline-block;
    vertical-align: top;
    width: 35px;
    height: 35px;
    line-height: 35px;
    border-style: solid; }
  .pager > .item,
  .pager .curLink {
    margin: 0 0 .5em 0;
    font-size: .9em; }
  .pager > .item {
    color: #000;
    border-style: solid;
    border-color: #ccc;
    border-width: 1px 1px 1px 0;
    transition: all .3s ease;
    /* target with title content to avoid using JavaScript */
    /* target with title content to avoid using JavaScript */
    /* target with title content to avoid using JavaScript */ }
    .pager > .item:hover {
      background-color: #ccc; }
    .pager > .item:first-child, .pager > .item:last-child {
      width: auto;
      padding: 0 .5em;
      border-width: 1px;
      border-radius: 5px; }
    .pager > .item[title*="préc"], .pager > .item[title*="Prev"], .pager > .item[title*="prec"], .pager > .item[title*="Vor"], .pager > .item[title*="suiv"], .pager > .item[title*="Next"], .pager > .item[title*="Próx"], .pager > .item[title*="Letzt"] {
      min-width: 35px; }
    .pager > .item[title*="préc"], .pager > .item[title*="Prev"], .pager > .item[title*="prec"], .pager > .item[title*="Vor"] {
      border-width: 1px;
      border-radius: 5px 0 0 5px; }
    .pager > .item[title*="suiv"], .pager > .item[title*="Next"], .pager > .item[title*="Próx"], .pager > .item[title*="Letzt"] {
      border-radius: 0 5px 5px 0; }
    .pager > .item:first-child {
      margin: 0 1em .5em 0;
      /* target with title content to avoid using JavaScript */ }
      .pager > .item:first-child[title*="préc"], .pager > .item:first-child[title*="Prev"], .pager > .item:first-child[title*="prec"], .pager > .item:first-child[title*="Vor"] {
        margin: 0 0 0 0;
        border-radius: 5px 0 0 5px; }
    .pager > .item:last-child {
      margin: 0 0 .5em 1em; }
      .pager > .item:last-child[title*="suiv"], .pager > .item:last-child[title*="Next"], .pager > .item:last-child[title*="Próx"], .pager > .item:last-child[title*="Letzt"] {
        margin: 0 0 .5em 0;
        border-width: 1px 1px 1px 0; }
  .pager .curLink {
    color: #fff;
    font-weight: normal;
    background-color: #566c92;
    border-color: #566c92;
    border-width: 1px 1px 1px 0; }
    .pager .curLink:first-child {
      border-radius: 5px 0 0 5px; }
    .pager .curLink:last-child {
      border-radius: 0 5px 5px 0; }
    .pager .curLink + .item:nth-child(2) {
      border-radius: 0; }

/* =================== selectLetter pager (i.g. admin user list) =================== */
.selectLetter {
  padding: 1em 0 1em 0;
  color: #000;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  .selectLetter a {
    text-decoration: none; }

/* =================== tabBackground (profile list, admin user list) =================== */
.tabBackground {
  padding-bottom: 1em;
  padding-left: 1em;
  padding-right: 1em; }
  .tabBackground a {
    text-decoration: underline; }
    .tabBackground a:hover {
      text-decoration: none; }

/* =================== inline picto items in table cells =================== */
.tableInlineItems {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px; }
  .tableInlineItems .tableInlineItem {
    display: inline-flex;
    align-items: center;
    gap: 4px; }
    .tableInlineItems .tableInlineItem .picto {
      flex: 0 0 auto;
      margin-top: 0; }
    .tableInlineItems .tableInlineItem .tableInlineItemText {
      display: inline-block;
      line-height: 1.2; }
    .tableInlineItems .tableInlineItem .tableInlineItemWarningText {
      color: #ffb219; }

.lightTab {
  display: inline;
  padding-left: 5px;
  background-repeat: no-repeat; }
  .lightTab a {
    color: #000;
    font-weight: bold; }
  .lightTab:hover {
    text-decoration: none; }

.greyTab {
  display: inline;
  padding-left: 5px;
  text-align: center;
  color: red; }
  .greyTab a {
    color: #555; }
    .greyTab a:hover {
      color: #000; }

/* =================== all tables, including planning and calendar =================== */
table {
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
  empty-cells: show;
  text-align: center; }

table caption {
  border: 0;
  padding: 1em 0 1em 0;
  font-weight: bold;
  text-align: left;
  display: none; }

/* =================== table in form : sticky header and left cols =================== */
form table {
  clear: both;
  z-index: 0;
  margin-top: 1em;
  margin-bottom: 1em;
  min-height: 30px;
  width: 100%;
  font-size: .87em;
  table-layout: auto;
  /* Allows flexible column widths */
  /* Sticky Header */
  position: relative;
  /* ========================== collapse-btn (i.g. on drag&drop training items) ========================== */ }
  form table tr td .collapsible {
    color: #1679A7; }
    form table tr td .collapsible input[id*="collapsibleContent"] {
      display: none; }
    form table tr td .collapsible label.collapse-btn {
      display: flex;
      justify-content: center;
      align-items: center; }
      form table tr td .collapsible label.collapse-btn > .inner {
        display: block;
        position: relative;
        width: 12px;
        height: 12px; }
        form table tr td .collapsible label.collapse-btn > .inner > * {
          display: block; }
        form table tr td .collapsible label.collapse-btn > .inner .stroke {
          position: absolute;
          top: 4.5px;
          left: 1.5px;
          width: 7px;
          height: 1px;
          background: #000;
          transition: .3s ease; }
      form table tr td .collapsible label.collapse-btn.closed > .inner .stroke.two {
        display: block;
        transition: .3s ease;
        transform: rotate(90deg); }
  form table .familyTableAccountingDocumentElements {
    text-align: left; }
    form table .familyTableAccountingDocumentElements td.hideDisplayButtonWithTitle {
      display: flex; }
    form table .familyTableAccountingDocumentElements tr.familyElement, form table .familyTableAccountingDocumentElements tr.familyElement td::before {
      background-color: #d2e7ff; }
    form table .familyTableAccountingDocumentElements tr.blue, form table .familyTableAccountingDocumentElements tr.blue td::before, form table .familyTableAccountingDocumentElements tr.green, form table .familyTableAccountingDocumentElements tr.green td::before, form table .familyTableAccountingDocumentElements tr.black, form table .familyTableAccountingDocumentElements tr.black td::before {
      color: #fff; }
    form table .familyTableAccountingDocumentElements tr.blue, form table .familyTableAccountingDocumentElements tr.blue td::before, form table .familyTableAccountingDocumentElements tr.blue td.hideDisplayButtonWithTitle {
      background-color: #167ebf; }
    form table .familyTableAccountingDocumentElements tr.green, form table .familyTableAccountingDocumentElements tr.green td::before {
      background-color: #359b25ec; }
    form table .familyTableAccountingDocumentElements tr.yellow, form table .familyTableAccountingDocumentElements tr.yellow td::before, form table .familyTableAccountingDocumentElements tr.green:hover td, form table .familyTableAccountingDocumentElements tr.blue:hover td, form table .familyTableAccountingDocumentElements tr.yellow:hover td, form table .familyTableAccountingDocumentElements tr.black:hover td {
      color: #000; }
    form table .familyTableAccountingDocumentElements tr.yellow, form table .familyTableAccountingDocumentElements tr.yellow td::before {
      background-color: #ffdb6f; }
    form table .familyTableAccountingDocumentElements tr.black, form table .familyTableAccountingDocumentElements tr.black td::before {
      background-color: #444444; }
    form table .familyTableAccountingDocumentElements tr.threeNumbers, form table .familyTableAccountingDocumentElements tr.threeNumbers td::before {
      color: #0077ff;
      font-weight: bold; }
    form table .familyTableAccountingDocumentElements tr.fourNumbers, form table .familyTableAccountingDocumentElements tr.fourNumbers td::before {
      color: red; }
    form table .familyTableAccountingDocumentElements tr.fiveNumbers, form table .familyTableAccountingDocumentElements tr.fiveNumbers td::before {
      background-color: rgba(255, 0, 0, 0.183); }
    form table .familyTableAccountingDocumentElements tr:hover td, form table .familyTableAccountingDocumentElements tr:hover td::before {
      background-color: rgba(218, 222, 221, 0.005); }

form table#accountJournalTable {
  table-layout: fixed;
  width: 100%;
  min-width: 990px; }
  form table#accountJournalTable td,
  form table#accountJournalTable th {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal; }
  form table#accountJournalTable th.colShrink,
  form table#accountJournalTable td.colShrink {
    min-width: 5%; }
  form table#accountJournalTable th.colShrink {
    white-space: nowrap;
    overflow-wrap: normal; }
  form table#accountJournalTable th.colComment {
    white-space: nowrap; }
  form table#accountJournalTable td.colComment {
    width: 12%;
    white-space: normal; }
  form table#accountJournalTable th.colVerticalCandidate {
    padding: 12px 10px 8px;
    white-space: nowrap;
    text-align: center; }
  form table#accountJournalTable th.colVerticalCandidate .verticalLabel {
    display: inline-block;
    line-height: 1.1;
    white-space: nowrap;
    transform: none; }
  form table#accountJournalTable th.colVerticalCandidate.is-vertical {
    min-height: 80px;
    min-width: 30px;
    white-space: normal; }
  form table#accountJournalTable th.colVerticalCandidate.is-vertical .verticalLabel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: normal; }
  form table#accountJournalTable th.colShrink.colVerticalCandidate {
    white-space: nowrap; }
  form table#accountJournalTable th.colComment.colVerticalCandidate {
    white-space: nowrap; }
  form table#accountJournalTable th.colBudget,
  form table#accountJournalTable td.colBudget {
    min-width: 15%; }
  form table#accountJournalTable td.dateCell {
    line-height: 1.3;
    font-size: 0.95em; }
  form table#accountJournalTable td .bill-receipt-item {
    display: inline-block;
    text-align: center;
    margin-right: 5px;
    vertical-align: top; }
  form table#accountJournalTable td.hasTextTooltip {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative; }
  form table#accountJournalTable td[data-format="currency"],
  form table#accountJournalTable th[data-format="currency"],
  form table#accountJournalTable .positiveBalance {
    text-align: center; }
  form table#accountJournalTable th.colActions,
  form table#accountJournalTable td.colActions {
    white-space: nowrap; }
  form table#accountJournalTable td select {
    width: 100%;
    min-width: 0;
    text-overflow: ellipsis; }
  form table#accountJournalTable th[data-col-empty="true"] {
    white-space: normal;
    word-break: break-word;
    width: 3%; }
  form table#accountJournalTable td[data-col-empty="true"] {
    width: 3%;
    white-space: nowrap; }
  form table#accountJournalTable.account-journal--no-flight-columns th.colBudget,
  form table#accountJournalTable.account-journal--no-flight-columns td.colBudget {
    width: 25%; }
  form table#accountJournalTable.account-journal--no-flight-columns td.colShrink {
    width: 3%; }

.custom-table-tooltip {
  position: absolute;
  z-index: 100;
  background-color: white;
  color: #000000;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
  max-width: 400px;
  min-width: 200px;
  white-space: normal;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: none;
  pointer-events: none; }

/* Sticky Header and left cols */
form table thead tr th {
  position: sticky;
  top: 44px;
  z-index: 99; }

form table thead tr th {
  background: linear-gradient(to bottom, #999, #999) 0 0 no-repeat;
  background-size: 1px 100%; }

.topBarShow form table thead tr th {
  top: 135px; }

form table thead tr th:first-child,
form table thead tr th:nth-child(2) {
  left: 0;
  z-index: 100; }

form table tr td:first-child,
form table.fixedCol2 tr td:nth-child(2) {
  position: sticky;
  left: -1px;
  background: #fff;
  z-index: 98; }

form table tr.disabled-item td:first-child,
form table.fixedCol2 tr.disabled-item td:nth-child(2) {
  background-color: #eee; }

/* Fixes Firefox border bug on sticky cells : displays a border with pseudo-element */
form table tr td:first-child:before,
form table.fixedCol2 tr td:nth-child(2):before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-color: #ccc;
  border-width: 0 1px 1px 0; }

form table thead tr th.colActions,
form table tr td.colActions {
  white-space: nowrap;
  /* Prevents content from wrapping */
  width: 1%; }
  form table thead tr th.colActions .actions,
  form table tr td.colActions .actions {
    display: flex;
    justify-content: center;
    gap: 5px; }

/* =================== standard table =================== */
/* ---------- can be applied to different table elements ---------- */
table:not(.planning):not(.ui-datepicker-calendar).width25 {
  width: 25%; }

table:not(.planning):not(.ui-datepicker-calendar).width50 {
  width: 50%; }

table:not(.planning):not(.ui-datepicker-calendar).width75 {
  width: 75%; }

table:not(.planning):not(.ui-datepicker-calendar).width95 {
  width: 95%; }

table:not(.planning):not(.ui-datepicker-calendar).widthAuto {
  width: auto; }

table:not(.planning):not(.ui-datepicker-calendar) .colRight {
  text-align: right; }

table:not(.planning):not(.ui-datepicker-calendar) .colLeft {
  text-align: left; }

table:not(.planning):not(.ui-datepicker-calendar) .floatLeft {
  float: left; }

table:not(.planning):not(.ui-datepicker-calendar) .floatRight {
  float: right; }

table:not(.planning):not(.ui-datepicker-calendar) .center {
  text-align: center; }

/* ---------- tr highlight when hover state ------- */
table:not(.planning):not(.ui-datepicker-calendar) tbody tr[class]:not([draggable]):hover,
table:not(.planning):not(.ui-datepicker-calendar) tbody tr[class]:not([draggable]):hover td,
table:not(.planning):not(.ui-datepicker-calendar) tbody tr:not([draggable]):hover td {
  background-color: #f0f8ff; }

/* ---------- itemNotAssigned td highlight ------- */
table:not(.planning):not(.ui-datepicker-calendar) tbody tr td[class]:is(.itemNotAssigned) {
  background-color: #FDF4E1; }

/* ---------- tr disabled-item ---------- */
table:not(.planning):not(.ui-datepicker-calendar) tr.disabled-item {
  display: none !important;
  color: #888;
  background-color: #eee; }

table:not(.planning):not(.ui-datepicker-calendar) tr.disabled-item.active {
  display: table-row !important; }

/* ---------- tr forLettering item ---------- */
table:not(.planning):not(.ui-datepicker-calendar) tr {
  /* -------------------- dot grid picto td --------------- */
  /* -------------------- disabled Row -------------------- */
  /* -------------------- draggable Row -------------------- */ }
  table:not(.planning):not(.ui-datepicker-calendar) tr.forLettering td, table:not(.planning):not(.ui-datepicker-calendar) tr.totalCreditDebit th {
    background-color: #e3f3ff !important; }
  table:not(.planning):not(.ui-datepicker-calendar) tr.basketForLettering td {
    background-color: #e3f3ff !important;
    padding: 1em;
    font-weight: bold; }
  table:not(.planning):not(.ui-datepicker-calendar) tr.spaceBeforeTheWritingList td {
    padding: 1.7em; }
  table:not(.planning):not(.ui-datepicker-calendar) tr.totalCreditDebit {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc; }
    table:not(.planning):not(.ui-datepicker-calendar) tr.totalCreditDebit span {
      padding-right: 1.4em; }
  table:not(.planning):not(.ui-datepicker-calendar) tr td > .picto.dot-grid::before {
    font-size: 0.8em; }
  table:not(.planning):not(.ui-datepicker-calendar) tr.disabled > td, table:not(.planning):not(.ui-datepicker-calendar) tr.disabled > td > * {
    background-color: #f5f5f5;
    cursor: not-allowed !important; }
  table:not(.planning):not(.ui-datepicker-calendar) tr.draggableRow > td.dragHandleCell, table:not(.planning):not(.ui-datepicker-calendar) tr.draggableRow > td.dragHandleCell > * {
    cursor: grab;
    touch-action: none;
    /* obligatory iOS */ }
    table:not(.planning):not(.ui-datepicker-calendar) tr.draggableRow > td.dragHandleCell .dragHandle.arrows, table:not(.planning):not(.ui-datepicker-calendar) tr.draggableRow > td.dragHandleCell > * .dragHandle.arrows {
      color: #666; }
    table:not(.planning):not(.ui-datepicker-calendar) tr.draggableRow > td.dragHandleCell .dragHandle.arrows.is-hovered, table:not(.planning):not(.ui-datepicker-calendar) tr.draggableRow > td.dragHandleCell > * .dragHandle.arrows.is-hovered {
      color: #222; }
  table:not(.planning):not(.ui-datepicker-calendar) tr.draggableRow.dragging {
    color: #404040;
    font-weight: bold;
    transform: scale(1.005);
    /* subtle scale effect */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* floating look */ }
    table:not(.planning):not(.ui-datepicker-calendar) tr.draggableRow.dragging > td.dragHandleCell, table:not(.planning):not(.ui-datepicker-calendar) tr.draggableRow.dragging > td.dragHandleCell > * {
      cursor: grabbing; }
      table:not(.planning):not(.ui-datepicker-calendar) tr.draggableRow.dragging > td.dragHandleCell .dragHandle.arrows, table:not(.planning):not(.ui-datepicker-calendar) tr.draggableRow.dragging > td.dragHandleCell > * .dragHandle.arrows {
        color: #222; }

/* ---------- tr alertOutOfDate ---------- */
table:not(.planning):not(.ui-datepicker-calendar) tr.alertOutOfDate,
table:not(.planning):not(.ui-datepicker-calendar) tr.alertOutOfDate td:first-child,
table:not(.planning):not(.ui-datepicker-calendar) tr.alertOutOfDate td:nth-child(2) {
  background-color: #fff0ee; }

/* ---------- tr check/uncheck Color ---------- */
.selectableColor {
  background: #FFA500; }

.selectedColor {
  background: #6BDE21; }

.unselectableColor {
  background: #F1564D; }

/* ---------- tr crossed out / Strikethrough---------- */
.strikethroughLine td:not([data-non-strikable]) {
  text-decoration: line-through; }

/* ---------- required and notify alerts ---------- */
table:not(.planning):not(.ui-datepicker-calendar) .notify,
table:not(.planning):not(.ui-datepicker-calendar) .required,
table:not(.planning):not(.ui-datepicker-calendar) .tdAlert {
  position: relative; }

table:not(.planning):not(.ui-datepicker-calendar) tr td:first-child.notify,
table:not(.planning):not(.ui-datepicker-calendar).fixedCol2 tr td:nth-child(2).notify,
table:not(.planning):not(.ui-datepicker-calendar) .notify {
  background: rgba(255, 178, 25, 0.06); }

table:not(.planning):not(.ui-datepicker-calendar) tr td:first-child.required,
table:not(.planning):not(.ui-datepicker-calendar).fixedCol2 tr td:nth-child(2).required,
table:not(.planning):not(.ui-datepicker-calendar) tr td:first-child.tdAlert,
table:not(.planning):not(.ui-datepicker-calendar).fixedCol2 tr td:nth-child(2).tdAlert,
table:not(.planning):not(.ui-datepicker-calendar) .required,
table:not(.planning):not(.ui-datepicker-calendar) .tdAlert {
  background: rgba(255, 240, 238, 0.3); }

table:not(.planning):not(.ui-datepicker-calendar) .notify {
  color: #e49700; }

table:not(.planning):not(.ui-datepicker-calendar) .required,
table:not(.planning):not(.ui-datepicker-calendar) .tdAlert {
  color: #F72F2F; }

table:not(.planning):not(.ui-datepicker-calendar) .notify:after,
table:not(.planning):not(.ui-datepicker-calendar) .required:after,
table:not(.planning):not(.ui-datepicker-calendar) .tdAlert:after {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%; }

table:not(.planning):not(.ui-datepicker-calendar) .notify > *,
table:not(.planning):not(.ui-datepicker-calendar) .required > * {
  position: relative;
  z-index: 2; }

table:not(.planning):not(.ui-datepicker-calendar) .notify:after {
  border: 1px solid #ffb219; }

table:not(.planning):not(.ui-datepicker-calendar) .required:after,
table:not(.planning):not(.ui-datepicker-calendar) .tdAlert:after {
  border: 1px solid #ea3e3e; }

table:not(.planning):not(.ui-datepicker-calendar) .notify .picto,
table:not(.planning):not(.ui-datepicker-calendar) .required .picto,
table:not(.planning):not(.ui-datepicker-calendar) .tdAlert .picto {
  vertical-align: middle; }

table:not(.planning):not(.ui-datepicker-calendar) .notify .picto.alert,
table:not(.planning):not(.ui-datepicker-calendar) .required .picto.alert,
table:not(.planning):not(.ui-datepicker-calendar) .tdAlert .picto.alert {
  cursor: default; }

/* ---------- actions fixed width cols ---------- */
table:not(.planning):not(.ui-datepicker-calendar) thead th.actions,
table:not(.planning):not(.ui-datepicker-calendar) tbody td .actions {
  min-width: 80px; }

table:not(.planning):not(.ui-datepicker-calendar) thead th.actions-large,
table:not(.planning):not(.ui-datepicker-calendar) tbody td .actions-large {
  min-width: 110px; }

/* ---------- th and td main styles ---------- */
table:not(.planning):not(.ui-datepicker-calendar) td,
table:not(.planning):not(.ui-datepicker-calendar) th {
  padding: 0.6em 0.3em; }

table:not(.planning):not(.ui-datepicker-calendar) td {
  border: 1px solid #ccc; }

/* ---------- td custom styles by class ---------- */
table:not(.planning):not(.ui-datepicker-calendar) td .horizontalFlex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px; }

/* ---------- links ---------- */
table:not(.planning):not(.ui-datepicker-calendar) a:hover {
  opacity: 0.8; }

table:not(.planning):not(.ui-datepicker-calendar) th a {
  color: #4fa1c7; }

/* ---------- links on account values (i.g. in admin user list) ---------- */
table:not(.planning):not(.ui-datepicker-calendar) td a.account {
  display: flex;
  justify-content: flex-end; }

table:not(.planning):not(.ui-datepicker-calendar) td a.account > * {
  display: block; }

table:not(.planning):not(.ui-datepicker-calendar) td a.account {
  position: relative;
  text-align: right; }

table:not(.planning):not(.ui-datepicker-calendar) td a.account .picto,
table:not(.planning):not(.ui-datepicker-calendar) td a.account .picto:before {
  height: 15px; }

table:not(.planning):not(.ui-datepicker-calendar) td a.account .picto {
  visibility: hidden;
  top: 0;
  right: auto;
  width: 15px; }

table:not(.planning):not(.ui-datepicker-calendar) td a.account .picto:before {
  top: -6px;
  left: 2px;
  width: 15px;
  font-size: 11px; }

table:not(.planning):not(.ui-datepicker-calendar) td a.account:hover {
  opacity: 1; }

table:not(.planning):not(.ui-datepicker-calendar) td a.account:hover .picto {
  visibility: visible; }

table:not(.planning):not(.ui-datepicker-calendar) td a.account.surplus {
  color: #406d00; }

table:not(.planning):not(.ui-datepicker-calendar) td a.account.deficit {
  color: #af0808; }

/* ---------- button flat in td (i.g. in maintenance overview page) ---------- */
table:not(.planning):not(.ui-datepicker-calendar) td .button.flat {
  margin: 0 0 3px 0; }

table:not(.planning):not(.ui-datepicker-calendar) td .button.flat:last-child {
  margin: 0 0 0 0; }

/* ---------- iconLink (i.g. in sent email list) ---------- */
table:not(.planning):not(.ui-datepicker-calendar) td a.iconLink {
  display: inline-block; }

/* ---------- thumb (i.g. in includes/manageValidities.php) ---------- */
table:not(.planning):not(.ui-datepicker-calendar) td .thumb img {
  width: 40px; }

/* ---------- td center (i.g. for button-with-text in account extract table footer) ---------- */
table:not(.planning):not(.ui-datepicker-calendar) td.center,
table:not(.planning):not(.ui-datepicker-calendar) th.center {
  text-align: center; }

/* ---------- budget ---------- */
table:not(.planning):not(.ui-datepicker-calendar) td.identationTd {
  background: #AAB;
  width: 20px; }

/* ---------- lettering ---------- */
table:not(.planning):not(.ui-datepicker-calendar) td .lettering-number.show,
table td .lettering-button.delete {
  display: inline-block;
  vertical-align: top; }

table:not(.planning):not(.ui-datepicker-calendar) td .lettering-number.show {
  height: 30px;
  line-height: 30px; }

table:not(.planning):not(.ui-datepicker-calendar) td .lettering-button.delete {
  padding: 0 0 0 3px; }

table:not(.planning):not(.ui-datepicker-calendar) td .lettering-date.show {
  padding: 8px 0 0 0;
  font-size: 0.7em;
  color: #888; }

/* ---------- category (i.g. in report library) ---------- */
table:not(.planning):not(.ui-datepicker-calendar) th.category {
  background: #6bde21;
  font-size: 1.2em; }

/* ---------- td with pop-up (i.g. experience formula in validity type list) ---------- */
table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .content {
  display: flex;
  justify-content: center;
  padding: 4px 0 0 11px; }
  table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .content .text {
    display: flex;
    align-items: center; }
  table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .content .details {
    cursor: pointer;
    font-size: 12px;
    color: #1679A7; }
    table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .content .details:before {
      left: -4px; }
table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  display: flex;
  opacity: 0;
  align-items: center;
  padding: .5em .75em .5em .75em;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
  table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up .text {
    white-space: nowrap; }
  table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up .close:before {
    top: 1px;
    cursor: pointer;
    transform: rotate(45deg);
    font-size: 13px;
    color: #999; }
  table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up.long {
    align-items: flex-start;
    width: 300px;
    padding: 0 .75em .75em .75em; }
    table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up.long .text {
      padding: .75em 0 0 0;
      line-height: 1.4em;
      white-space: normal;
      word-break: break-all; }
    table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up.long .close {
      margin-top: .25em; }
  table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up.touch {
    padding: .5em 0 .5em .75em; }
    table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up.touch.long {
      padding: 0 0 .5em .75em; }
    table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up.touch .text {
      width: calc(100% - 30px); }
  table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up.active {
    z-index: 1;
    opacity: 1; }

/* ---------- progressionDisplay : in training list table ---------- */
table:not(.planning):not(.ui-datepicker-calendar) td.progressionDisplay {
  padding: 0;
  position: relative !important;
  vertical-align: middle !important; }

/* ---------- thead ---------- */
table:not(.planning):not(.ui-datepicker-calendar) thead th {
  background-color: #444;
  color: #fff;
  font-weight: normal;
  padding: 1em 0.5em 1em 0.5em;
  vertical-align: top; }
  table:not(.planning):not(.ui-datepicker-calendar) thead th.smallLink {
    padding: 0 0.5em 1em 0.5em; }
  table:not(.planning):not(.ui-datepicker-calendar) thead th .thItem:not(:nth-child(1)) {
    margin-top: 1.5em; }
  table:not(.planning):not(.ui-datepicker-calendar) thead th.green {
    background-color: green; }
  table:not(.planning):not(.ui-datepicker-calendar) thead th.yellow {
    background-color: #ffdb6f;
    color: #000; }
  table:not(.planning):not(.ui-datepicker-calendar) thead th.blue {
    background-color: #167ebf; }

/* ---------- thead smallLink fixed width cols (i.g. in payment check) ---------- */
table:not(.planning):not(.ui-datepicker-calendar) thead th.smallLink {
  min-width: 64px; }

/* ---------- tbody ------- */
table:not(.planning):not(.ui-datepicker-calendar) tbody td {
  border: 1px solid #ccc; }
  table:not(.planning):not(.ui-datepicker-calendar) tbody td.orangeText {
    color: #F2A02B; }
  table:not(.planning):not(.ui-datepicker-calendar) tbody td.redText {
    color: #EC3A14; }
  table:not(.planning):not(.ui-datepicker-calendar) tbody td.greenItalicText, table:not(.planning):not(.ui-datepicker-calendar) tbody td.blackNormalText {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  table:not(.planning):not(.ui-datepicker-calendar) tbody td.greenItalicText {
    color: #44bc47;
    font-style: italic; }

table:not(.planning):not(.ui-datepicker-calendar) tbody td.no-padding {
  padding: 0; }

/* ---------- tbody td with inner elements (i.g. in admin user list) ------- */
table:not(.planning):not(.ui-datepicker-calendar) tbody tr td > .inner {
  position: relative; }

table:not(.planning):not(.ui-datepicker-calendar) tbody tr td > .inner.table {
  display: table;
  width: 100%; }

table:not(.planning):not(.ui-datepicker-calendar) tbody tr td > .inner.table .line {
  display: table-row; }

table:not(.planning):not(.ui-datepicker-calendar) tbody tr td > .inner.table .line .cell {
  display: table-cell;
  vertical-align: middle;
  padding: .2em .4em;
  white-space: nowrap; }

table:not(.planning):not(.ui-datepicker-calendar) tbody tr td > .inner.table .line:first-child .cell {
  padding: .5em .4em .2em .4em; }

table:not(.planning):not(.ui-datepicker-calendar) tbody tr td > .inner.table .line:last-child .cell {
  padding: .2em .4em .5em .4em; }

table:not(.planning):not(.ui-datepicker-calendar) tbody tr td > .inner.table .line .cell.small {
  width: 20px; }

table:not(.planning):not(.ui-datepicker-calendar) tbody tr td .form-field {
  font-size: 1em; }

/* ---------- editable table ---------- */
table td.editableCheckboxes {
  padding: 0 !important; }
table .checkboxesContainer {
  display: none;
  padding: 5px;
  padding-top: 0; }
  table .checkboxesContainer .checkboxesGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 3px; }
    table .checkboxesContainer .checkboxesGrid label {
      display: grid;
      grid-template-columns: 16px 1fr;
      align-items: center;
      text-align: start;
      column-gap: 8px;
      white-space: normal;
      hyphens: auto;
      overflow-wrap: anywhere;
      word-break: break-word;
      min-width: 0;
      max-width: 100%; }
    table .checkboxesContainer .checkboxesGrid label input[type="checkbox"] {
      margin: 2px 0 0 0; }
table .checkedValuesContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  overflow: hidden;
  /* Ensures content overflow is hidden */
  text-overflow: ellipsis;
  /* Adds ellipsis for overflowing content */
  gap: 5px; }
  table .checkedValuesContainer p {
    font-size: 14px;
    margin: 0;
    color: #333;
    display: inline-flex;
    align-items: center;
    text-align: start;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: 3px; }
table .topButtonsContainer {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 10px; }
  table .topButtonsContainer a {
    line-height: 2.8em; }
table .editableCheckboxes:hover {
  background: url("img/edit.svg") no-repeat right;
  background-size: 17px;
  cursor: pointer; }
table td.editableComboAutoComplete .form-field {
  margin: 0; }
table td.editableComboAutoComplete .formw {
  min-width: 50px; }
table td.editableTextInput .form-field {
  margin: 0; }
table td.editableTextInput .formw {
  min-width: 100px; }

/*---------------- table footer -------------*/
table:not(.planning):not(.ui-datepicker-calendar) tfoot {
  background-color: #fff;
  color: #3371A8;
  padding: 0.7em 0.3em;
  font-weight: bold;
  border: 1px solid #ccc; }

table:not(.planning):not(.ui-datepicker-calendar) tfoot th {
  border: 0;
  background-color: #fff;
  height: 31px; }

/*===========================Training progress Monitoring=========================*/
.width10 {
  width: 10% !important; }

.width15 {
  width: 15% !important; }

.width20 {
  width: 20% !important; }

.width50 {
  width: 50%; }

.width75 {
  width: 75%; }

.formTables {
  display: flex;
  margin-top: 3em;
  grid-gap: 5em;
  font-size: 0.9em; }
  .formTables.phaseInSummaryTable {
    margin-top: 10px; }
  .formTables > * {
    flex: 1 1 0; }
  .formTables .width50, .formTables .widthAuto {
    height: fit-content; }
  .formTables .picto {
    background-color: #fff !important; }
  .formTables table {
    margin-top: 0px;
    border-bottom: 1px solid #ccc;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%; }
    .formTables table td, .formTables table th {
      vertical-align: middle !important; }
    .formTables table tbody {
      display: block;
      overflow-x: hidden;
      overflow-y: auto; }
      .formTables table tbody:not(.withoutMaxHeight) {
        max-height: 45vh; }
      .formTables table tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed; }
      .formTables table tbody .maxHeight25Vh {
        max-height: 25vh !important; }
    .formTables table thead {
      display: table;
      width: 100%;
      table-layout: fixed; }
    .formTables table .adaptationScrollbar {
      width: 132px;
      padding-right: 1em !important; }
    .formTables table #toBeSeenLater {
      display: block;
      overflow-x: hidden;
      overflow-y: auto;
      max-height: 20vh;
      padding: 0px;
      color: #000; }
      .formTables table #toBeSeenLater td {
        font-weight: normal; }
      .formTables table #toBeSeenLater tr {
        display: table;
        width: 100%;
        table-layout: fixed; }
        .formTables table #toBeSeenLater tr:last-of-type td {
          border-bottom: none; }
      .formTables table #toBeSeenLater .rowTitle {
        position: sticky;
        top: 0px;
        z-index: 99; }
  .formTables [data-picto].disabled:hover {
    opacity: 0.5 !important; }
  .formTables .banner {
    border: #ebebeb solid 2px;
    background-color: #f8f8f8 !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    top: 0;
    height: 47px; }
    .formTables .banner [data-picto] {
      top: 2px;
      width: 100%;
      background-color: #f8f8f8; }
      .formTables .banner [data-picto]:before, .formTables .banner [data-picto]:after {
        left: -2px;
        cursor: pointer;
        font-size: 17.5px !important; }
    .formTables .banner > .bold {
      flex-grow: 2; }
  .formTables .title > span {
    display: block;
    width: 80%;
    max-width: 38vw;
    margin: 5px 10% 5px 10%; }
  .formTables .title > .input-image-container {
    float: right;
    cursor: default; }
  .formTables .title textarea {
    width: 100%;
    max-width: 100%; }
  .formTables tfoot {
    border: none !important; }
    .formTables tfoot .input-image-container {
      width: 70px; }
    .formTables tfoot div p {
      padding-top: 0px !important;
      padding-bottom: 0px !important; }
    .formTables tfoot:not(#toBeSeenLater) td {
      display: flex;
      justify-content: space-between; }
    .formTables tfoot tr.footerHasButton td .colNoPrint {
      width: 100%; }
  .formTables #validCheck {
    margin: auto 0 auto 0; }
  .formTables .colSession {
    width: 50px; }
  .formTables .progressionDisplay.smallCircle > button {
    border: none;
    width: 1.5em;
    height: 1.8em;
    margin: 0; }
  .formTables .progressionDisplay > button {
    width: 1.7em;
    height: 1.7em;
    margin-left: 2%;
    margin-right: 2%;
    background-color: #fff;
    border: 1px solid #ccc; }
    .formTables .progressionDisplay > button.hover {
      opacity: 1 !important;
      background-color: #000 !important;
      cursor: pointer; }
  .formTables th.progressionDisplay .title, .formTables th.progressionDisplay button {
    vertical-align: middle; }
  .formTables th.progressionDisplay button.picto.circle {
    border: none !important; }
  .formTables .levelSelected {
    opacity: 1 !important;
    background-color: #000 !important;
    cursor: pointer; }
  .formTables .opacityReduced {
    opacity: 0.5; }
  .formTables .addComment {
    border: #1679A7 solid 1px;
    color: #1679A7; }
  .formTables #selectTheFour {
    margin: 0 45% 0 45%; }

.checkboxAccountingDocument {
  display: none; }

@media only screen and (max-width: 1024px) {
  .banner {
    height: 77px; }

  th.progressionDisplay span.title {
    display: block;
    margin-bottom: 1em; } }
/* ===============================================================================
   =================================== print =====================================
   =============================================================================== */
@media only print {
  .formTables input[type="image"], .formTables input[type="submit"], .formTables input[type="checkbox"], .formTables .label-checkbox, .formTables button:not(.picto.circle), .formTables .button, .formHeader input[type="image"], .formHeader input[type="submit"], .formHeader input[type="checkbox"], .formHeader .label-checkbox, .formHeader button:not(.picto.circle), .formHeader .button {
    display: none; }
  .formTables .picto.circle, .formHeader .picto.circle {
    width: 20px;
    height: 20px; }
  .formTables .picto.circle.black, .formHeader .picto.circle.black {
    box-shadow: inset 0 0 0 20px #000;
    border-color: #000; }

  .formHeader {
    flex-direction: column; } }
/* ===============================================================================
   ================== small screen < 768px : 5 columns or more ===================
   =============================================================================== */
@media only screen and (max-width: 767px) {
  form table#accountJournalTable {
    min-width: 0;
    width: 100%; }
    form table#accountJournalTable td.hasTextTooltip {
      overflow: visible;
      text-overflow: clip; }
    form table#accountJournalTable td.colComment {
      width: 100%; }
    form table#accountJournalTable td select {
      width: 100%;
      min-width: 0;
      text-overflow: ellipsis; }
    form table#accountJournalTable td[data-format="currency"],
    form table#accountJournalTable th[data-format="currency"],
    form table#accountJournalTable .positiveBalance {
      text-align: start; }

  .custom-table-tooltip {
    display: none !important; }

  .table-overlay {
    align-items: flex-start; }

  table:not(.planning):not(.ui-datepicker-calendar) tbody tr td > .inner.table .line .cell,
  table:not(.planning):not(.ui-datepicker-calendar) tbody tr td > .inner.table .line:first-child .cell,
  table:not(.planning):not(.ui-datepicker-calendar) tbody tr td > .inner.table .line:last-child .cell {
    padding: 0; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar),
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tr,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) thead th,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tr td {
    position: relative; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) {
    border: 0;
    width: auto;
    min-width: 60%; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) select,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) input[type="text"],
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) input[type="password"],
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) input[type="file"],
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) textarea {
    width: 100%; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) input[type="submit"] {
    height: auto;
    white-space: normal; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody .colRight,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody .center,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody .colNoPrint {
    text-align: left; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) th,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) thead th,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tr td {
    margin: 0;
    left: auto; }

  /* Delete cell borders */
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) th,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) td,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tr td:first-child:before,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar).fixedCol2 tr td:nth-child(2):before {
    border: none; }

  /* Display information before value in th and td (display data-label attibute) */
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) td:before,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) th:before {
    content: attr(data-label); }

  /* Force table to not be like tables anymore */
  /* .displayNone class is used in tables with dynamic line creation. For example : table Enter a flow */
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) thead:not(.displayNone),
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody:not(.displayNone),
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) th:not(.displayNone),
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) td:not(.displayNone),
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tr:not(.displayNone) {
    display: block; }
    table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) thead:not(.displayNone).greenItalicText, table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) thead:not(.displayNone).blackNormalText,
    table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody:not(.displayNone).greenItalicText,
    table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody:not(.displayNone).blackNormalText,
    table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) th:not(.displayNone).greenItalicText,
    table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) th:not(.displayNone).blackNormalText,
    table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) td:not(.displayNone).greenItalicText,
    table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) td:not(.displayNone).blackNormalText,
    table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tr:not(.displayNone).greenItalicText,
    table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tr:not(.displayNone).blackNormalText {
      max-width: 80%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
    table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) thead:not(.displayNone).greenItalicText,
    table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody:not(.displayNone).greenItalicText,
    table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) th:not(.displayNone).greenItalicText,
    table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) td:not(.displayNone).greenItalicText,
    table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tr:not(.displayNone).greenItalicText {
      color: #44bc47;
      font-style: italic; }

  /* Hide table headers (but not display: none;, for accessibility) */
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody tr {
    margin-top: 20px;
    padding: .5em 0;
    border: 1px solid #ccc;
    border-radius: 5px; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody tr[style="display: none;"] + tr {
    margin-top: 0; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody tr:hover td {
    background-color: transparent; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody tr:first-child {
    margin-top: 0; }

  /* disabled-item */
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tr:not(.displayNone).disabled-item {
    display: none; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tr:not(.displayNone).disabled-item.active {
    display: block; }

  /* th and td behave like a row */
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot th,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody td {
    position: relative;
    vertical-align: middle;
    min-height: 18px;
    line-height: 1.5em;
    font-size: .95em; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody td {
    min-height: 25px;
    padding: 5px 10px 5px 45%;
    word-break: break-word;
    color: #000; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody td:empty {
    display: none; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody td.title {
    padding: 10px 10px 10px 8px;
    word-break: initial;
    font-size: 1.2em;
    color: #243656;
    background-color: transparent; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody td.title:before {
    display: none; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot td,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot th {
    padding: 5px 10px 5px 47%; }

  /* Styles for data-label : like a table header */
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot td:before,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot th:before,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody td:before {
    position: absolute;
    top: -1px;
    left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    width: 43%;
    height: calc(100% + 1px);
    white-space: nowrap; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot td:before,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot th:before {
    padding: 4px 0 0 8px; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody td:before {
    padding: 5px 5px 0 8px;
    font-weight: normal;
    color: #666; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody td:first-child:before,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody tr:first-child td:first-child:before {
    border: none; }

  /* ---------- required and notify alerts ---------- */
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .required,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .tdAlert,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .notify {
    background-color: transparent; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .required,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .tdAlert {
    color: #F72F2F; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .notify {
    color: #e49700; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .notify .picto,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .required .picto {
    margin-top: -6px; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .notify .picto {
    position: relative;
    top: auto; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .required:after,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .tdAlert:after,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .notify:after {
    border: none; }

  /* ---------- button flat in td (i.g. in maintenance page) ---------- */
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) td .button.flat {
    margin: 0 0 0 0; }

  /* ---------- Accountancy cells ---------- */
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) [class*="Balance"],
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .notValidated,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .validated {
    text-align: left; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .balance,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .positiveBalance {
    color: #3371A8; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .negativeBalance {
    color: #F00; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .notValidated {
    color: #28a752; }

  /* Other cell types */
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .width25 {
    width: auto; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .validated:before,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) .notValidated:before {
    font-weight: normal; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) [data-label*="Action"]:before,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) [data-label*="Accion"]:before {
    padding-top: 12px; }

  /* ---------- td with pop-up (i.g. experience formula in validity type list) ---------- */
  table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .content {
    display: none; }
  table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up {
    position: relative;
    display: block;
    opacity: 1;
    padding: 0;
    background: transparent;
    box-shadow: none; }
    table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up .text {
      line-height: inherit;
      white-space: normal; }
    table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up .close {
      display: none; }
    table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up.long {
      width: auto; }
      table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up.long .text {
        width: auto;
        padding: 0; }
    table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up.touch {
      padding: 0; }
      table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up.touch.long {
        padding: 0; }
      table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up.touch .text {
        width: auto; }

  /* hide id */
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar).hide-id td[data-label="ID"] {
    display: none; }

  /* Picto check in cell */
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) td .picto.check {
    margin-top: -5px; }

  /* Link in cell */
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tbody td a {
    white-space: initial; }

  /* tfoot */
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot tr,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot td,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot th {
    display: inline-block; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot {
    width: 100%;
    margin: 0 0 20px 0;
    padding: 0;
    border: 0;
    border: 1px solid #ccc;
    border-radius: 5px; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot tr,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot tr td .colNoPrint {
    text-align: left; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot tr {
    padding: 0;
    width: 100%; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot td,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot th {
    height: auto;
    background: transparent; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot td:empty,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot td.displayNone,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot th:empty,
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot th.displayNone {
    display: none; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot td[colspan],
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot th[colspan] {
    font-weight: bold;
    text-align: left;
    padding-left: 8px; }

  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot td[data-format="currency"],
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) tfoot th[data-format="currency"] {
    text-align: right; }

  .formTables {
    flex-wrap: wrap; }
    .formTables > * {
      flex-basis: 100%; }
    .formTables .title {
      padding-right: 17px !important; }
    .formTables table input[type='checkbox'] {
      width: 5mm;
      height: 5mm; }
    .formTables table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot td.title {
      padding: 10px 10px 10px 8px;
      word-break: initial;
      font-size: 1.2em;
      color: #243656; }
    .formTables table:not(.cols-three-four) .colSession, .formTables table:not(.cols-three-four) .progressionDisplay {
      width: auto; } }
/* ===============================================================================
   ================== small screen <= 479px : 3 and 4 columns ====================
   ======== same styles as for 5 columns and more for screen width < 768px =======
   ============ if screen width > 479px : display like on large screen ===========
   =============================================================================== */
@media only screen and (max-width: 479px) {
  .table-overlay {
    align-items: flex-start; }

  table:not(.planning):not(.ui-datepicker-calendar),
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar) {
    width: 100%; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar),
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tr,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) thead th,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tr td {
    position: relative; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) {
    border: 0;
    width: auto;
    width: 100%; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) select,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) input[type="text"],
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) input[type="password"],
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) input[type="file"],
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) textarea {
    width: 100%; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) input[type="submit"] {
    height: auto;
    white-space: normal; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tbody,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tbody .colRight,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tbody .center,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tbody .colNoPrint {
    text-align: left; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) th,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) thead th,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tr td {
    margin: 0;
    left: auto; }

  /* Delete cell borders */
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) th,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) td,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tr td:first-child:before,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar).fixedCol2 tr td:nth-child(2):before {
    border: none; }

  /* Display information before value in th and td (display data-label attibute) */
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) td:before,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) th:before {
    content: attr(data-label); }

  /* Force table to not be like tables anymore */
  /* .displayNone class is used in tables with dynamic line creation. For example : table Enter a flow */
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) thead:not(.displayNone),
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tbody:not(.displayNone),
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) th:not(.displayNone),
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) td:not(.displayNone),
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tr:not(.displayNone) {
    display: block; }

  /* Hide table headers (but not display: none;, for accessibility) */
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tbody tr {
    margin-top: 20px;
    padding: .5em 0;
    border: 1px solid #ccc;
    border-radius: 5px; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tbody tr[style="display: none;"] + tr {
    margin-top: 0; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tbody tr:hover td {
    background-color: transparent; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tbody tr:first-child {
    margin-top: 0; }

  /* disabled-item */
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tr:not(.displayNone).disabled-item {
    display: none; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tr:not(.displayNone).disabled-item.active {
    display: block; }

  /* th and td behave like a row */
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot th,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tbody td {
    position: relative;
    vertical-align: middle;
    min-height: 18px;
    line-height: 1.5em;
    font-size: .95em; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tbody td {
    min-height: 25px;
    padding: 5px 10px 5px 45%;
    word-break: break-word;
    color: #000; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tbody td:empty {
    display: none; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tbody td.title {
    padding: 10px 10px 10px 8px;
    word-break: initial;
    font-size: 1.2em;
    color: #243656; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tbody td.title:before {
    display: none; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot td,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot th {
    padding: 5px 10px 5px 47%; }

  /* Styles for data-label : like a table header */
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot td:before,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot th:before,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tbody td:before {
    position: absolute;
    top: -1px;
    left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    width: 43%;
    height: calc(100% + 1px);
    white-space: nowrap; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot td:before,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot th:before {
    padding: 4px 0 0 8px; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tbody td:before {
    padding: 5px 5px 0 8px;
    font-weight: normal;
    color: #666; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tbody td:first-child:before,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tbody tr:first-child td:first-child:before {
    border: none; }

  /* ---------- required and notify alerts ---------- */
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .required,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .tdAlert,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .notify {
    background-color: transparent; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .required,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .tdAlert {
    color: #F72F2F; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .notify {
    color: #e49700; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .notify .picto,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .required .picto {
    margin-top: -6px; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .notify .picto {
    position: relative;
    top: auto; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .required:after,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .tdAlert:after,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .notify:after {
    border: none; }

  /* Accountancy cells */
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) [class*="Balance"],
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .notValidated,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .validated {
    text-align: left; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .balance,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .positiveBalance {
    color: #3371A8; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .negativeBalance {
    color: #F00; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .notValidated {
    color: #28a752; }

  /* Other cell types */
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .width25 {
    width: auto; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .validated:before,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) .notValidated:before {
    font-weight: normal; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) [data-label*="Action"]:before,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) [data-label*="Accion"]:before {
    padding-top: 12px; }

  /* ---------- td with pop-up (i.g. experience formula in validity type list) ---------- */
  table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .content {
    display: none; }
  table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up {
    position: relative;
    display: block;
    opacity: 1;
    padding: 0;
    background: transparent;
    box-shadow: none; }
    table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up .text {
      line-height: inherit;
      white-space: normal; }
    table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up .close {
      display: none; }
    table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up.long {
      width: auto; }
      table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up.long .text {
        width: auto;
        padding: 0; }
    table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up.touch {
      padding: 0; }
      table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up.touch.long {
        padding: 0; }
      table:not(.planning):not(.ui-datepicker-calendar) td.with-pop-up > .inner .pop-up.touch .text {
        width: auto; }

  /* hide id */
  table:not([class*="cols"]):not(.planning):not(.ui-datepicker-calendar).hide-id td[data-label="ID"] {
    display: none; }

  /* Picto check in cell */
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) td .picto.check {
    margin-top: -5px; }

  /* Link in cell */
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tbody td a {
    white-space: initial; }

  /* tfoot */
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot tr,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot td,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot th {
    display: inline-block; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot {
    width: 100%;
    margin: 0 0 20px 0;
    padding: 0;
    border: 0;
    border: 1px solid #ccc;
    border-radius: 5px; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot tr,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot tr td .colNoPrint {
    text-align: left; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot tr {
    padding: 0;
    width: 100%; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot td,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot th {
    height: auto;
    background: transparent; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot td:empty,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot td.displayNone,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot th:empty,
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot th.displayNone {
    display: none; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot td[colspan],
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot th[colspan] {
    font-weight: bold;
    text-align: left;
    padding-left: 8px; }

  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot td[data-format="currency"],
  table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot th[data-format="currency"] {
    text-align: right; }

  .cellTitle {
    padding: 5px !important; }

  .rowTitle {
    text-align: center;
    background-color: #f8f8f8 !important; }

  .colSession {
    width: auto !important;
    word-break: keep-all !important; }

  .progressionDisplay {
    width: auto !important; }

  .formTables table #toBeSeenLater {
    max-height: 25vh; }
    .formTables table #toBeSeenLater tr {
      display: block; }
  .formTables table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot td.title::before {
    display: none; }
  .formTables table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot tr {
    padding: .5em 0;
    border: 1px solid #ccc;
    border-radius: 5px; }
    .formTables table.cols-three-four:not(.planning):not(.ui-datepicker-calendar) tfoot tr:not(.rowTitle) {
      margin-top: 20px; } }
/* ===============================================================================
   =================================== print =====================================
   =============================================================================== */
@media only print {
  table {
    border: 1px solid #000;
    border-collapse: collapse;
    empty-cells: show;
    margin: auto;
    text-align: center; }

  table, td, th, thead, tbody, tfoot {
    border: 1px solid #000 !important;
    padding: 1.2em 0.9em !important; }

  td input, td select {
    border: none; }

  td.balance, td.negativeBalance,
  td.positiveBalance, tfoot th {
    color: #000; }

  table[class*="width"] {
    width: 100% !important; }

  form table thead tr th,
  .topBarShow form table thead tr th {
    top: 0; }

  form table thead tr th {
    position: relative; }

  form .colNoPrint {
    visibility: hidden; }

  form table tr td:first-child:before,
  form table.fixedCol2 tr td:nth-child(2):before {
    border-color: #000; } }
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _top-bar.scss
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    SCSS
 * @package     OpenFlyers
 * @author      Christophe LARATTE <christophe.laratte@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Fri Dec 13 2002
 *
 * used to apply styles on top bar
 */
/* ===============================================================================
   =============================== large screen ==================================
   =============================================================================== */
/* ========= top-bar ======== */
.top-bar {
  position: relative;
  width: 100%;
  height: 45px;
  text-align: left;
  background: #243656;
  /* ----- brand ----- */
  /* ----- doc ----- */
  /* ----- social ----- */
  /* ----- swith version button ----- */
  /* ----- right ----- */ }
  .top-bar .brand {
    float: left;
    padding-left: 10px; }
    .top-bar .brand .logo {
      display: block;
      float: left;
      margin: 12px 5px 0 0;
      width: 30px;
      height: 20px;
      background: url(../../img/logo-of.svg) no-repeat center;
      background-size: contain; }
    .top-bar .brand .of-web-storefront {
      display: block;
      float: left;
      height: 45px;
      line-height: 45px;
      font-family: 'Museo_Slab_700', Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #fff; }
      .top-bar .brand .of-web-storefront .hover {
        color: #babec3; }
    .top-bar .brand .version {
      padding-left: 0.4em;
      font-size: 0.7em; }
  .top-bar .doc {
    float: left;
    margin: 8px 0 0 5px;
    color: #fff; }
  .top-bar .social {
    float: left;
    margin: 0;
    padding: 7px 0 0 0;
    list-style-type: none;
    opacity: 0.6; }
    .top-bar .social > * {
      float: left; }
      .top-bar .social > * > * {
        display: block;
        width: 30px;
        height: 30px;
        background-position: center;
        background-repeat: no-repeat;
        -ms-border-radius: 15px;
        -moz-border-radius: 15px;
        -border-radius: 15px; }
      .top-bar .social > * .twitter,
      .top-bar .social > * .youtube {
        background-size: 55%; }
      .top-bar .social > * .facebook {
        background-image: url(img/social-facebook.svg);
        background-size: 49%; }
      .top-bar .social > * .twitter {
        background-image: url(img/social-twitter.svg); }
      .top-bar .social > * .youtube {
        background-image: url(img/social-youtube.svg); }
      .top-bar .social > * .actualites {
        background-image: url(img/social-actualites.svg);
        background-size: 60%; }
  .top-bar .switch-version {
    top: 7px;
    margin-left: 10px;
    padding-right: 20px; }
    .top-bar .switch-version:after {
      content: "\e908";
      display: block;
      position: absolute;
      top: 4px;
      right: 3px;
      width: 16px;
      height: 16px;
      line-height: 17px;
      font-family: 'OpenFlyersLite' !important;
      font-size: 0.9em; }
  .top-bar > .right,
  .top-bar > .right .universe-switch {
    height: 100%; }
  .top-bar > .right {
    float: right;
    padding-right: 10px; }
    .top-bar > .right > * {
      float: left; }
    .top-bar > .right .universe-switch {
      display: flex;
      align-items: flex-end;
      margin: 0 20px 0 0;
      list-style-type: none; }
      .top-bar > .right .universe-switch > .item {
        margin-right: 2px;
        padding: 0 .6em 0 .25em;
        border-radius: 4px 4px 0 0; }
        .top-bar > .right .universe-switch > .item:last-child {
          margin-right: 0; }
        .top-bar > .right .universe-switch > .item > .link {
          display: flex;
          align-items: center;
          position: relative; }
          .top-bar > .right .universe-switch > .item > .link:before {
            content: attr(data-text);
            font-size: 12px;
            display: none;
            position: absolute;
            left: 22px;
            font-weight: bold;
            letter-spacing: -.75px; }
          .top-bar > .right .universe-switch > .item > .link .picto {
            display: block;
            width: 23px; }
            .top-bar > .right .universe-switch > .item > .link .picto:before, .top-bar > .right .universe-switch > .item > .link .picto:after {
              left: 0px;
              width: 100%; }
            .top-bar > .right .universe-switch > .item > .link .picto:after {
              display: none; }
          .top-bar > .right .universe-switch > .item > .link .txt {
            font-size: 12px; }
          .top-bar > .right .universe-switch > .item > .link:hover:before {
            display: block; }
          .top-bar > .right .universe-switch > .item > .link:hover .picto:before {
            display: none; }
          .top-bar > .right .universe-switch > .item > .link:hover .picto:after {
            display: block; }
          .top-bar > .right .universe-switch > .item > .link:hover .txt {
            visibility: hidden; }
        .top-bar > .right .universe-switch > .item.active > .link:before {
          display: block; }
        .top-bar > .right .universe-switch > .item.active > .link .picto:before {
          display: none; }
        .top-bar > .right .universe-switch > .item.active > .link .picto:after {
          display: block; }
        .top-bar > .right .universe-switch > .item.active > .link .txt {
          visibility: hidden; }
        .top-bar > .right .universe-switch > .item.thumb-planning {
          background-color: #f3f8ff; }
          .top-bar > .right .universe-switch > .item.thumb-planning > .link .picto {
            color: #20242d; }
            .top-bar > .right .universe-switch > .item.thumb-planning > .link .picto:before, .top-bar > .right .universe-switch > .item.thumb-planning > .link .picto:after {
              top: 6px;
              font-size: 16px; }
          .top-bar > .right .universe-switch > .item.thumb-planning > .link .txt,
          .top-bar > .right .universe-switch > .item.thumb-planning > .link:before {
            color: #20242d; }
        .top-bar > .right .universe-switch > .item.thumb-management {
          background-color: #ffdb6f; }
          .top-bar > .right .universe-switch > .item.thumb-management > .link .picto {
            color: #241f11; }
            .top-bar > .right .universe-switch > .item.thumb-management > .link .picto:before, .top-bar > .right .universe-switch > .item.thumb-management > .link .picto:after {
              top: 7px;
              font-size: 14px; }
          .top-bar > .right .universe-switch > .item.thumb-management > .link .txt,
          .top-bar > .right .universe-switch > .item.thumb-management > .link:before {
            color: #241f11; }
        .top-bar > .right .universe-switch > .item.thumb-admin {
          background-color: #fa8585; }
          .top-bar > .right .universe-switch > .item.thumb-admin > .link .picto {
            color: #130a0a; }
            .top-bar > .right .universe-switch > .item.thumb-admin > .link .picto:before, .top-bar > .right .universe-switch > .item.thumb-admin > .link .picto:after {
              top: 6px;
              font-size: 19px; }
          .top-bar > .right .universe-switch > .item.thumb-admin > .link .txt,
          .top-bar > .right .universe-switch > .item.thumb-admin > .link:before {
            color: #130a0a; }
    .top-bar > .right .disconnect {
      margin: 9px 0 0 0;
      color: #fff;
      opacity: .8; }

/* ========= expendableDesign ======== */
.expendableDesign .top-bar {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 3; }

/* ========= platform-test ======== */
.platform-test .top-bar {
  background-color: #ca3a37; }

/* ===============================================================================
   =============================== medium screen ==================================
   =============================================================================== */
@media screen and (max-width: 1038px) {
  .top-bar > .right .universe-switch {
    margin: 0 10px 0 0; }
    .top-bar > .right .universe-switch > .item > .link:before {
      font-size: 11px; }
    .top-bar > .right .universe-switch > .item > .link .txt {
      font-size: 10px; }
  .top-bar .switch-version {
    padding: 7.5px 17px 7.5px 5px;
    font-size: 10px; } }
/* ===============================================================================
   =============================== small screen ==================================
   =============================================================================== */
@media (max-width: 767px) {
  .top-bar .social,
  .top-bar .switch-version {
    display: none; }
  .top-bar > .right {
    padding-right: 5px; }
    .top-bar > .right .universe-switch {
      margin: 0 10px 0 0; }
      .top-bar > .right .universe-switch > .item {
        width: 35px;
        margin-right: 1px;
        padding: 0; }
        .top-bar > .right .universe-switch > .item .link {
          width: 100%;
          height: 100%; }
          .top-bar > .right .universe-switch > .item .link:hover:before {
            display: none; }
          .top-bar > .right .universe-switch > .item .link .picto {
            width: 100%; }
            .top-bar > .right .universe-switch > .item .link .picto:before {
              left: -1px; }
          .top-bar > .right .universe-switch > .item .link .txt {
            display: none; }
        .top-bar > .right .universe-switch > .item.active > .link:before {
          display: none; } }
/* ===============================================================================
   =================================== print =====================================
   =============================================================================== */
@media only print {
  .top-bar {
    display: none; } }
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _userInfoBox.scss
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    SCSS
 * @package     OpenFlyers
 * @author      Christophe LARATTE <christophe.laratte@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Fri Dec 13 2002
 *
 * used to apply style on .secondary-bar
 * @link https://work.openflyers.com/OF4-Graphic-Charter#Secondary-bar
 */
.secondary-bar {
  display: grid;
  gap: .1em;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  height: auto !important; }
  .secondary-bar.hide .accounts {
    display: none; }
  .secondary-bar.hide .user-info.charLimit {
    width: 100% !important; }
  .secondary-bar .currentActionBar {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
    width: max-content; }
  .secondary-bar #calendar {
    grid-row: 1;
    grid-column: 2;
    width: max-content;
    margin-left: 1.3em; }
  .secondary-bar #ephemeris {
    grid-row: 1;
    grid-column: 3;
    align-items: center;
    margin-right: 1.3em; }
  .secondary-bar .connexionBlock {
    grid-row: 1;
    grid-column: 4;
    align-content: center;
    justify-items: flex-end;
    margin-right: 1.3em;
    z-index: 1; }
    .secondary-bar .connexionBlock .connexionItems {
      white-space: nowrap;
      /* ----- connexionImage ----- */
      /* ----- connexionType ----- */ }
      .secondary-bar .connexionBlock .connexionItems a {
        color: #000; }
      .secondary-bar .connexionBlock .connexionItems .connexionImage,
      .secondary-bar .connexionBlock .connexionItems .connexionType {
        display: inline-block;
        vertical-align: top; }
      .secondary-bar .connexionBlock .connexionItems .connexionImage .userPicture {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        width: 30px;
        height: 30px;
        border-radius: 15px; }
        .secondary-bar .connexionBlock .connexionItems .connexionImage .userPicture img {
          display: block;
          width: 20px;
          height: 20px;
          object-fit: cover;
          border-radius: 10px; }
      .secondary-bar .connexionBlock .connexionItems .connexionType {
        position: relative; }
        .secondary-bar .connexionBlock .connexionItems .connexionType .userConnexionType,
        .secondary-bar .connexionBlock .connexionItems .connexionType #userInfoTimeZone {
          font-size: 12px; }
        .secondary-bar .connexionBlock .connexionItems .connexionType .userConnexionType {
          line-height: 30px; }
        .secondary-bar .connexionBlock .connexionItems .connexionType #userInfoTimeZone {
          display: none;
          position: absolute;
          right: 0;
          padding: 0 5px 0 20px;
          height: 25px;
          line-height: 25px;
          white-space: nowrap;
          background: #fff url(img/userinfo_timezone.gif) 5px center no-repeat;
          border-radius: 2px;
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
        .secondary-bar .connexionBlock .connexionItems .connexionType:hover #userInfoTimeZone {
          display: block;
          color: #555; }
  .secondary-bar .accounts {
    grid-row: 2;
    grid-column: 1 / span 4;
    display: grid;
    gap: 0.1rem;
    grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
    margin: .2em 1.3em;
    direction: rtl;
    align-items: center; }
    .secondary-bar .accounts .button {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      direction: rtl; }
      .secondary-bar .accounts .button .name {
        margin-right: 3px; }
      .secondary-bar .accounts .button .amount {
        unicode-bidi: plaintext; }
  .secondary-bar:has(.userInfoBox) .userInfoBox {
    grid-row: 1;
    grid-column: 4;
    display: inline-flex;
    justify-content: end; }
    .secondary-bar:has(.userInfoBox) .userInfoBox .connexionBlock {
      margin-right: 0;
      /**
       * Limit the characters displayed with user-info box
       * @link https://work.openflyers.com/CSS-best-practice#Tronquer-le-texte-avec-CSS-:-Afficher-trois-petits-points-pour-les-textes-trop-longs
       */ }
      .secondary-bar:has(.userInfoBox) .userInfoBox .connexionBlock .connexionItems .connexionType .userConnexionType .user-info {
        max-width: 25ch;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis; }
    .secondary-bar:has(.userInfoBox) .userInfoBox .accounts {
      margin-left: 0;
      display: flex; }

/* 📱 Very medium screens (max-width: 1400px) */
@media (max-width: 1400px) {
  .secondary-bar .currentActionBar {
    grid-row: 1;
    grid-column: 1; }
  .secondary-bar .connexionBlock {
    grid-row: 1;
    grid-column: 2; }
  .secondary-bar .accounts {
    grid-row: 2;
    grid-column: span 2; }
  .secondary-bar #calendar {
    grid-row: 3;
    grid-column: 1;
    justify-items: start; }
  .secondary-bar #ephemeris {
    grid-row: 3;
    grid-column: 2;
    justify-self: end; }
  .secondary-bar:has(.userInfoBox) .userInfoBox {
    grid-row: 1;
    grid-column: 2;
    display: inline-flex;
    justify-content: end; }
    .secondary-bar:has(.userInfoBox) .userInfoBox .connexionBlock {
      margin-right: 0; }
    .secondary-bar:has(.userInfoBox) .userInfoBox .accounts {
      margin-left: 0; } }
/* 📱 Very small screens (max-width: 900px) */
@media (max-width: 900px) {
  .secondary-bar .currentActionBar {
    grid-row: 1;
    grid-column: 1; }
  .secondary-bar .connexionBlock {
    grid-row: 1;
    grid-column: 2; }
  .secondary-bar .accounts {
    grid-row: 2;
    grid-column: span 2;
    grid-template-columns: repeat(auto-fit, minmax(5em, auto)); }
    .secondary-bar .accounts .button {
      width: auto; }
      .secondary-bar .accounts .button .name {
        display: none; }
  .secondary-bar #calendar {
    grid-row: 4;
    grid-column: span 2;
    justify-items: center;
    width: auto;
    margin-left: auto; }
  .secondary-bar #ephemeris {
    grid-row: 3;
    grid-column: span 2;
    justify-self: center; } }
/* ===============================================================================
   =================================== print =====================================
   =============================================================================== */
@media only print {
  .secondary-bar {
    display: none; } }
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _login.scss
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    SCSS
 * @package     OpenFlyers
 * @author      Christophe LARATTE <christophe.laratte@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Fri Dec 13 2002
 *
 * used to apply styles on login, reset password and account release pages
 */
/* ===============================================================================
   =================================== default ===================================
   =============================================================================== */
/* ========= loginSecurityAlert ======== */
#loginSecurityAlert {
  margin: 0;
  padding: 0;
  color: #F00; }
  #loginSecurityAlert h1 {
    font-size: 0.9em;
    font-weight: bold; }
  #loginSecurityAlert h3 {
    font-size: 0.9em;
    font-weight: bold; }
  #loginSecurityAlert h4 {
    color: #F00;
    font-size: 0.9em;
    margin: 0; }

/* ========= login ======== */
.login {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 100%; }
  .login h2 {
    padding: 0.5em 0; }
  .login .contentBox {
    margin: 0 0 0 0;
    padding: 0 25px 30px 25px;
    /* ========= structure-identity ======== */
    /* ==== welcome advertisement box ==== */
    /* ========= welcome-message ========= */
    /* ========= emphasis-container ========= */
    /* ========= login-form ========= */
    /* ========= login-alerts ========= */ }
    .login .contentBox [class*="warning"] {
      display: inline-block;
      margin: 15px 0 0 0; }
    .login .contentBox .alert-container {
      margin: 0 0 15px 0; }
      .login .contentBox .alert-container [class*="warning"] {
        margin: 0 0 0 0; }
    .login .contentBox .mainBox {
      margin: 0;
      padding: .5em 0; }
    .login .contentBox .partial-width {
      box-sizing: border-box; }
      .login .contentBox .partial-width.left {
        width: 60%;
        padding: 0 2em 0 2em;
        float: left; }
      .login .contentBox .partial-width.right {
        width: 40%;
        height: 100%;
        padding: 2em 2em 1em;
        float: right;
        background-color: #f3f9ff;
        box-shadow: 2000px 0 0 2000px #f3f9ff; }
    .login .contentBox .structure-identity.partial-width.left {
      padding: 45px 2em 5px 2em; }
    .login .contentBox .structure-identity.reduced {
      padding: 20px 2em 15px 2em; }
      .login .contentBox .structure-identity.reduced .logo {
        max-height: 80px; }
      .login .contentBox .structure-identity.reduced.partial-width.left {
        padding: 25px 2em 20px 2em; }
    .login .contentBox .welcome-ad-box {
      display: flex;
      white-space: nowrap;
      text-align: center;
      align-items: center;
      justify-content: center;
      padding-bottom: 1em; }
    .login .contentBox .welcome-message > .inner {
      position: relative;
      overflow: hidden;
      text-align: left;
      color: #245c8e; }
      .login .contentBox .welcome-message > .inner .top {
        margin: 0 0 1.2em 0;
        padding: 0;
        background: none;
        border: 0; }
        .login .contentBox .welcome-message > .inner .top .title {
          display: table-cell;
          padding: 0;
          font-weight: normal; }
          .login .contentBox .welcome-message > .inner .top .title > * {
            display: table-cell; }
          .login .contentBox .welcome-message > .inner .top .title .picto,
          .login .contentBox .welcome-message > .inner .top .title .picto:before {
            width: 27px;
            height: 24px; }
          .login .contentBox .welcome-message > .inner .top .title :before {
            font-size: 28px; }
          .login .contentBox .welcome-message > .inner .top .title .txt {
            padding-left: 5px;
            font-size: .8em;
            line-height: 1.4em; }
      .login .contentBox .welcome-message > .inner .collapsible {
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%; }
        .login .contentBox .welcome-message > .inner .collapsible .checkbox,
        .login .contentBox .welcome-message > .inner .collapsible .collapse-btn {
          display: none; }
        .login .contentBox .welcome-message > .inner .collapsible .wiki-code {
          line-height: 1.3em;
          font-size: .85em; }
          .login .contentBox .welcome-message > .inner .collapsible .wiki-code h1,
          .login .contentBox .welcome-message > .inner .collapsible .wiki-code h2,
          .login .contentBox .welcome-message > .inner .collapsible .wiki-code h3,
          .login .contentBox .welcome-message > .inner .collapsible .wiki-code h4,
          .login .contentBox .welcome-message > .inner .collapsible .wiki-code h5,
          .login .contentBox .welcome-message > .inner .collapsible .wiki-code h6 {
            padding: 0;
            color: #245c8e; }
          .login .contentBox .welcome-message > .inner .collapsible .wiki-code img {
            max-width: 100%; }
    .login .contentBox .emphasis-container .emphasis {
      margin: 0 auto;
      max-width: 400px; }
    .login .contentBox .login-form {
      margin-top: 20px; }
    .login .contentBox .login-alerts > * {
      box-sizing: border-box;
      max-width: 450px; }

/* ========= platform-test ========= */
html.platform-test .login .platform-test-banner.hide {
  position: sticky;
  top: 0; }

/* ===============================================================================
   ================================ small screen =================================
   =============================================================================== */
@media (max-width: 767px) {
  .login h2 {
    padding: .25em 0; }
  .login [class*="warning"] {
    margin: 10px 0 0 0; }
  .login .contentBox .partial-width[class] {
    width: 100%;
    padding: 0; }
  .login .contentBox .structure-identity {
    flex-flow: row wrap;
    justify-content: center;
    margin: 0 0 10px 0;
    padding: 10px 0 0 0; }
    .login .contentBox .structure-identity .logo {
      max-height: 45px; }
    .login .contentBox .structure-identity.reduced {
      padding: 10px 0 0 0; }
      .login .contentBox .structure-identity.reduced .logo {
        max-height: 45px; }
    .login .contentBox .structure-identity.partial-width .left {
      padding: 10px 0 0 0; }
      .login .contentBox .structure-identity.partial-width .left.reduced {
        padding: 10px 0 0 0; }
  .login .contentBox .partial-width.right {
    margin: 0 0 10px 0;
    box-shadow: none !important; }
    .login .contentBox .partial-width.right .welcome-ad-box {
      background-color: #ffff; }
      .login .contentBox .partial-width.right .welcome-ad-box .isWelcomePage .boxContent#adBox {
        margin-left: 0; }
    .login .contentBox .partial-width.right .welcome-message > .inner {
      padding: 10px 40px 10px 10px;
      background-color: #f1faff; }
      .login .contentBox .partial-width.right .welcome-message > .inner .top {
        margin: 0; }
        .login .contentBox .partial-width.right .welcome-message > .inner .top .title .picto,
        .login .contentBox .partial-width.right .welcome-message > .inner .top .title .picto:before {
          width: 23px;
          height: 22px; }
        .login .contentBox .partial-width.right .welcome-message > .inner .top .title :before {
          font-size: 25px; }
        .login .contentBox .partial-width.right .welcome-message > .inner .top .title .txt {
          font-size: .55em; }
      .login .contentBox .partial-width.right .welcome-message > .inner .collapsible {
        padding: 0; }
        .login .contentBox .partial-width.right .welcome-message > .inner .collapsible .collapse-btn {
          display: flex;
          position: absolute;
          top: 13px;
          right: 15px;
          cursor: pointer; }
          .login .contentBox .partial-width.right .welcome-message > .inner .collapsible .collapse-btn > .inner {
            border: 1px solid; }
            .login .contentBox .partial-width.right .welcome-message > .inner .collapsible .collapse-btn > .inner .stroke {
              background: #014880; }
        .login .contentBox .partial-width.right .welcome-message > .inner .collapsible .checkbox:checked + .collapse-btn.closed > .inner .stroke.two {
          display: none; }
        .login .contentBox .partial-width.right .welcome-message > .inner .collapsible .checkbox:checked + .collapse-btn.closed + .wiki-code {
          margin-top: 15px;
          max-height: 101vh;
          opacity: 1; }
        .login .contentBox .partial-width.right .welcome-message > .inner .collapsible .wiki-code {
          max-height: 0;
          margin-top: 0;
          line-height: 1.3em;
          font-size: .75em;
          opacity: 0;
          transition: all .3s ease-out; }
  .login .contentBox .emphasis-container .emphasis h2 {
    font-size: .95em; }
  .login .contentBox .form-inner.centered .form-button-container {
    margin: 0 0 0 0; }
  .login .contentBox .form-inner.centered .col-container {
    margin: 0 0 0 0; }
    .login .contentBox .form-inner.centered .col-container .link {
      margin: 5px 0 5px 0; }
    .login .contentBox .form-inner.centered .col-container .form-col .title {
      padding: .25em .5em .25em .5em;
      font-size: .95em; }
  .login .contentBox .login-form {
    margin-top: 10px; } }
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _calendar.css
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    SCSS
 * @package     OpenFlyers
 * @author      Christophe LARATTE <christophe.laratte@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Fri Dec 13 2002
 *
 * used to apply styles on differents calendars. displayed and popup versions
 */
/* ui-datepicker-trigger (image picto i.g. in planning, product list, etc.) */
.ui-datepicker-trigger {
  width: 18px; }

/* ----- #calendar with arrows, hour and picto in planning ----- */
#calendar {
  margin: auto; }
  #calendar .calendar-container {
    margin-top: 0.3em; }
    #calendar .calendar-container > .inner {
      display: inline-block; }
      #calendar .calendar-container > .inner > * {
        display: table-cell;
        vertical-align: middle;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-left-width: 0;
        border-right-width: 0; }
      #calendar .calendar-container > .inner [class*="calendarArrow"] {
        width: 35px;
        height: 35px;
        line-height: 37px;
        color: #243656; }
        #calendar .calendar-container > .inner [class*="calendarArrow"]:before {
          top: 50%;
          margin-top: -18px;
          width: 100%;
          height: 100%; }
      #calendar .calendar-container > .inner [class*="calendarArrowLeft"] {
        border-right-width: 1px; }
      #calendar .calendar-container > .inner .calendarArrowLeft2 {
        border-left-width: 1px;
        border-radius: 5px 0 0 5px; }
      #calendar .calendar-container > .inner [class*="calendarArrowRight"] {
        border-left-width: 1px; }
      #calendar .calendar-container > .inner .calendarArrowRight2 {
        border-right-width: 1px;
        border-radius: 0 5px 5px 0; }
      #calendar .calendar-container > .inner a.calendarDate > .inner {
        display: table;
        table-layout: fixed;
        height: 100%;
        padding: 0 8px; }
        #calendar .calendar-container > .inner a.calendarDate > .inner > * {
          display: table-cell;
          vertical-align: middle; }
        #calendar .calendar-container > .inner a.calendarDate > .inner .period,
        #calendar .calendar-container > .inner a.calendarDate > .inner #calendarClockSpan {
          font-size: 14px;
          padding-top: 3px;
          padding-bottom: 3px; }
        #calendar .calendar-container > .inner a.calendarDate > .inner .period {
          padding-right: 5px;
          padding-left: 5px;
          color: #282828; }
        #calendar .calendar-container > .inner a.calendarDate > .inner #calendarClockSpan {
          color: #E05634; }
        #calendar .calendar-container > .inner a.calendarDate > .inner .img-container {
          padding: 4px 0 0 8px; }

/* ----- ui-datepicker (jQuery UI calendar plugin, i.g. in planning, validity edit form, etc.) ----- */
.ui-datepicker {
  z-index: 100 !important;
  padding: 8px;
  width: auto;
  font-size: 0.8em;
  border: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-box-shadow: 0 0 13px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 13px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 0 0 13px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 0 13px rgba(0, 0, 0, 0.3); }

.ui-datepicker .ui-datepicker-header,
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close {
  border: none;
  border-radius: 2px; }

.ui-datepicker .ui-datepicker-header {
  padding: 0;
  background: #fff; }

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
  cursor: pointer;
  top: 0;
  width: 30px;
  height: 30px; }

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
  left: -2px; }

.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
  right: -2px; }

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next:hover {
  border: none;
  background: transparent; }

.ui-datepicker .ui-datepicker-header [class*="ui-datepicker"] .ui-icon {
  background: #167bc1 url(img/arrow-right.svg) no-repeat center;
  background-size: 25%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.2s ease; }

.ui-datepicker .ui-datepicker-header [class*="ui-datepicker"]:hover .ui-icon {
  background-color: #0d5688; }

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg); }

.ui-datepicker .ui-datepicker-header .ui-datepicker-title {
  margin: 0 32px; }

.ui-datepicker .ui-datepicker-header .ui-datepicker-title select {
  cursor: pointer;
  width: 48%;
  height: 30px;
  margin: 0;
  font-size: 0.95em;
  color: #666;
  border-color: #999; }

.ui-datepicker .ui-datepicker-header .ui-datepicker-title select:hover {
  color: #333;
  border-color: #666; }

.ui-datepicker .ui-datepicker-header .ui-datepicker-title select:focus {
  outline: none; }

.ui-datepicker .ui-datepicker-header .ui-datepicker-title .ui-datepicker-month {
  float: left; }

.ui-datepicker .ui-datepicker-header .ui-datepicker-title .ui-datepicker-year {
  float: right; }

.ui-datepicker .ui-datepicker-calendar {
  margin: 0;
  border: none; }

.ui-datepicker .ui-datepicker-calendar th {
  color: #27384d;
  background: #fff; }

.ui-datepicker .ui-datepicker-calendar th.ui-datepicker-week-col {
  font-weight: normal; }

.ui-datepicker .ui-datepicker-calendar .ui-datepicker-week-col {
  color: #ccc;
  font-style: italic;
  font-size: 0.9em; }

.ui-datepicker .ui-datepicker-calendar .ui-state-default {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  width: 30px;
  height: 30px;
  padding: 0;
  line-height: 30px;
  text-align: center;
  color: #444;
  background: transparent;
  border: none;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.2s ease; }

.ui-datepicker .ui-datepicker-calendar .ui-state-active {
  color: #167ebf;
  border: 1px solid;
  background: none;
  line-height: 29px; }

.ui-datepicker .ui-datepicker-calendar .ui-state-default:hover {
  opacity: 1;
  background: #ddd; }

.ui-datepicker .ui-datepicker-calendar .ui-state-highlight {
  color: #fff;
  background: #E05634; }

.ui-datepicker .ui-datepicker-calendar .ui-state-highlight:hover {
  background: #c54d2e; }

.ui-datepicker .ui-datepicker-calendar .ui-priority-secondary {
  opacity: 0.6; }

.ui-datepicker .ui-datepicker-calendar .ui-priority-secondary:hover {
  opacity: 0.6; }

.ui-datepicker .ui-datepicker-buttonpane {
  margin: 0;
  padding: 0;
  border: none; }

.ui-datepicker .ui-datepicker-buttonpane button {
  margin: 0;
  padding: 0 0.8em;
  font-weight: normal;
  font-size: 0.9em;
  height: 30px;
  line-height: 30px; }

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  color: #DF755B;
  background: transparent;
  border: none; }

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close {
  background: #e2e2e2;
  color: #666; }

/* ===============================================================================
   ================================ small screen =================================
   =============================================================================== */
@media (max-width: 767px) {
  #calendar .calendar-container > .inner .calendarDate > .inner .period,
  #calendar .calendar-container > .inner .calendarDate > .inner #calendarClockSpan {
    font-size: 12px; } }
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _uploader.scss
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    SCSS
 * @package     OpenFlyers
 * @author      Christophe LARATTE <christophe.laratte@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Fri Dec 13 2002
 *
 * used to apply style on uploaders (i.g. user import page)
 */
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
#uploadBox {
  padding: 0.5em;
  margin: auto;
  width: 340px; }

#fileProgress {
  border: 1px solid #000;
  width: 300px;
  height: 40px;
  float: left; }

#fileName {
  text-align: center;
  margin: 5px;
  font-size: 15px;
  width: 290px;
  height: 25px;
  overflow: hidden; }

#progressBar {
  width: 300px;
  height: 5px;
  background-color: #CCC; }

#pickButton {
  float: left; }

#pickButton a {
  display: block;
  width: 32px;
  height: 40px;
  text-decoration: none;
  margin-left: 5px;
  background: url(img/pickFileButton.png) 0 0 no-repeat; }

/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _weather.scss
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    SCSS
 * @package     OpenFlyers
 * @author      Johnny CHENG <johnny.cheng@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Thu Aug 25 2011
 *
 * used to apply styles in weather info-box
 */
/* ===============================================================================
   =================================== defautl ===================================
   =============================================================================== */
.weatherStation {
  display: block;
  clear: both;
  overflow: hidden;
  width: auto; }
  .weatherStation .deleteWeatherStationIcon {
    display: block;
    float: right;
    width: 30px;
    height: 30px;
    background-image: url(img/delete.svg);
    background-position: center 4px;
    background-repeat: no-repeat;
    background-size: 30%; }
  .weatherStation [id*="weatherStation_"] {
    display: block;
    width: calc(100% - 30px); }
  .weatherStation [class*="icingRisk"] {
    cursor: pointer; }
  .weatherStation .icingRisk0 {
    background-color: #53c7c2; }
  .weatherStation .icingRisk1 {
    background-color: #97d262; }
  .weatherStation .icingRisk2 {
    background-color: #f9f454; }
  .weatherStation .icingRisk3 {
    background-color: #ffb44a; }
  .weatherStation .icingRisk4 {
    background-color: #ff6464;
    text-decoration: blink;
    /* Works only on any Firefox and Opera browsers */ }
  .weatherStation .icingRisk0Disabled,
  .weatherStation .icingRisk1Disabled,
  .weatherStation .icingRisk2Disabled,
  .weatherStation .icingRisk3Disabled,
  .weatherStation .icingRisk4Disabled {
    font-weight: bold;
    color: #555;
    background-color: #ddd; }
  .weatherStation.mask {
    display: none; }

/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _webFeed.scss
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    SCSS
 * @package     OpenFlyers
 * @author      Christophe LARATTE <christophe.laratte@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Fri Dec 13 2002
 *
 * used to apply style on header's info-box webfeeds
 */
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
.webFeedContainer {
  width: 600px;
  margin: auto;
  background-color: #FFF5CA; }
  .webFeedContainer .floatLeft {
    float: left; }
  .webFeedContainer .floatRight {
    float: right; }
  .webFeedContainer .clearBoth {
    clear: both; }

/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * ddt.css
 *
 * Additional CSS for DDT plugin. Also override some CSS property from others files.
 *
 * LICENSE: This source file is subject to version 1.0 of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: http://www.openflyers.com/license/semifreelicense1_0.txt. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    CSS
 * @package     OpenFlyers
 * @author      Johnny CHENG <johnny.cheng@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     http://www.openflyers.com/license/semifreelicense1_0.txt  OpenFlyers License
 * @link        http://openflyers.org, https://work.openflyers.com/index.php?title=CSS#Directive_.21important
 * @since       Tue Feb 28 2012
 */
#ddt {
  font-size: .78em; }

#ddtLoadingContainer, .ddtModalContainer {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  background: rgba(0, 0, 0, 0.8); }

#ddtLoading, .ddtModalContent {
  width: 300px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -100px;
  text-align: center;
  background-color: #fff; }

.dataTable td img {
  display: block;
  margin: 0 auto; }

.dataTable tr.over td.editable {
  background: url("img/edit.svg") no-repeat right;
  background-size: 17px; }

.dataTable .veiled {
  background: #F3F4FF;
  color: #777; }

.dataTable tr.veiled.over td.editable {
  background: url("img/plus.svg") no-repeat right;
  background-size: 13px; }

.dataTable tr.odd.over {
  background: #edf7ff; }

.dataTable tr.even.over {
  background: #dfecf7; }

.dataTable .over {
  background: #CFD3EE; }

.dataTable tr.over td.editable {
  background: url("img/edit.svg") no-repeat right;
  background-size: 17px; }

.dataTable tr.inputRow {
  background: #B3C0C6; }

/* .dataTable tr.inputRow td.editable { */
/*     opacity: 0; */
/* } */
.dataTable tr.inputRow.over td.editable {
  /*     opacity: 1; */
  background: url("img/plus.svg") no-repeat right;
  background-size: 13px; }

#componentStorage {
  border: none; }

#componentStorage thead {
  background: transparent; }

#componentStorage th, #componentStorage td {
  width: 150px;
  border: none;
  background: transparent; }

/*
#dynamicTable td img {
    display: block;
    margin: 0;
    padding: 0;
}*/
table.display, .dataTables_wrapper {
  clear: none; }

/* Override setting from jQueryDataTable.css */
/* START */
table.display thead th {
  /* restore table thead th padding from table.css */
  padding: 1em 0.5em;
  height: auto;
  cursor: auto; }

table.display tr.even.row_selected td, table.display tr.odd.row_selected td {
  background-color: transparent; }

.paging_full_numbers {
  width: auto !important;
  padding-bottom: 1em; }

/* END */
table.display tfoot th,
.ddtNewRecord th,
table:not(.planning):not(.ui-datepicker-calendar) thead .ddtNewRecord th {
  padding: 0 !important;
  background-color: #dcdcdc;
  border: 1px solid #ccc;
  font-weight: normal;
  color: black; }

.ddtNewRecord th {
  /* Use of !important to force application of current setting instead of "#dynamicTable" setting */
  cursor: pointer !important; }

.ddtNewRecord th.editable {
  background-image: url("img/plus.svg");
  background-repeat: no-repeat;
  background-position: 1%;
  background-size: 13px; }

.ddtNewRecord th select, .ddtNewRecord th input {
  margin: 0;
  width: auto; }

#disassembleArea, #assembleArea {
  margin-left: 10px;
  border: solid 1px #ccc;
  width: 100px;
  float: left; }

#assembleArea {
  background: url("img/addLink2.png") no-repeat center #E5E5E5; }

#disassembleArea {
  background: url("img/deleteLink2.png") no-repeat center #E5E5E5; }

.droppable-hover {
  background-color: #ddd !important; }

#ddtComponents, #ddtStock {
  margin-left: 120px; }

/*.dynamicTable, .dynamicTable td, .dynamicTable th {
    border : 1px solid #777;
}*/
.ui-sortable-placeholder {
  background: #FFD2AA; }

.ui-sortable-cell {
  background: #F7BA88; }

/*td.node {*/
td.moveCursor {
  /* Use of !important to force application of current setting instead of "tbody td" setting */
  cursor: move !important; }

td.level, th.level {
  width: 30px;
  margin: 0;
  padding: 0 !important;
  cursor: default !important; }

td.node, td.editable, th.level {
  cursor: pointer !important; }

#myHelper {
  width: 32px;
  height: 32px;
  background-color: green;
  background-color: transparent;
  background-image: url("img/object32.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-attachment: scroll;
  background-size: 100%; }

span.defaultMin {
  color: #D78F13;
  /*     color: #D78F13; */
  /*     color: orange; */
  font-weight: bold;
  font-size: 11px; }

span.defaultMax {
  color: red;
  font-weight: bold;
  font-size: 11px; }

tr.hightlighted {
  background-color: #C5BCC6; }

td.locked {
  background: url("img/locked.png") no-repeat center;
  /* bottom-right;*/ }

/* Button in .input-image-container */
.dataTable .input-image-container {
  margin: 0.3em 0; }

/* ================ RESPONSIVE ================ */
/* Table (except planning and calendar) for screen < 940px */
@media only screen and (max-width: 939px) {
  #ddt table:not(.planning):not(.ui-datepicker-calendar) tfoot th:empty {
    display: block; }

  #ddt table.display tfoot th, .ddtNewRecord th {
    border-width: 0 0 1px 0; } }
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _header.scss
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    SCSS
 * @package     OpenFlyers
 * @author      Christophe LARATTE <christophe.laratte@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Fri Dec 13 2002
 *
 * used to apply styles on headerContainer et info-boxes
 */
/* ===============================================================================
   =================================== default ===================================
   =============================================================================== */
.headerContainer {
  z-index: 1;
  display: table;
  width: 100%;
  padding: 10px 10px 0 10px;
  table-layout: fixed;
  background-color: #fff; }

/* ================================ info-box-container ================================ */
.info-box-container {
  display: table-cell;
  vertical-align: top;
  margin: 0;
  padding: 0 10px 10px 0;
  text-align: left;
  border: 0; }

.infoBox {
  position: relative;
  width: 100%;
  font-size: 0.95em; }

/* --- titleBox --- */
.info-box-container .titleBox {
  padding: 0 5px; }
  .info-box-container .titleBox .title {
    width: calc(100% - 25px);
    height: 100%;
    line-height: 29px;
    font-size: 0.75em;
    font-weight: bold;
    color: #243656; }
    .info-box-container .titleBox .title a {
      color: inherit; }
    .info-box-container .titleBox .title .img {
      display: flex;
      align-items: center;
      height: 100%; }
      .info-box-container .titleBox .title .img img {
        height: inherit; }

.info-box-container .titleBox .collapse-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px; }

.info-box-container .titleBox .collapse-btn > .inner .stroke {
  background-color: #243656; }

/* --- boxContent --- */
.info-box-container .infoBox {
  /* --- vertical --- */ }
  .info-box-container .infoBox > .inner {
    position: relative;
    max-height: 100%;
    border: 1px solid #e5e5e5; }
  .info-box-container .infoBox .boxContent {
    position: relative;
    height: 250px;
    overflow: auto;
    font-size: 0.7em; }
    .info-box-container .infoBox .boxContent > .inner {
      position: relative;
      height: calc(100% - 10px);
      margin: 5px;
      overflow: auto; }
    .info-box-container .infoBox .boxContent .inner .external-feed-item {
      position: relative;
      display: block;
      overflow: hidden;
      margin-bottom: .25em;
      padding-left: 8px;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #000; }
      .info-box-container .infoBox .boxContent .inner .external-feed-item:before {
        position: absolute;
        left: 0;
        content: "·"; }
  .info-box-container .infoBox.standard .boxContent {
    border-style: solid;
    border-width: 0 1px 1px 1px;
    border-color: #e5e5e5;
    border: none; }
    .info-box-container .infoBox.standard .boxContent:before, .info-box-container .infoBox.standard .boxContent:after {
      content: '';
      position: absolute;
      bottom: 1px;
      width: calc(100% - 15px);
      height: 5px;
      background-color: #fff; }
    .info-box-container .infoBox.standard .boxContent:before {
      top: 0;
      z-index: 1; }
    .info-box-container .infoBox.standard .boxContent:after {
      bottom: 0; }
  .info-box-container .infoBox.vertical .titleBox {
    position: absolute;
    bottom: -30px;
    width: 100%;
    height: 30px;
    transform-origin: left top;
    transform: rotate(-90deg); }
    .info-box-container .infoBox.vertical .titleBox .title {
      height: 100%; }
  .info-box-container .infoBox:not(.closed) .titleBox {
    border-bottom: 1px solid #e5e5e5; }

/* --- vertical --- */
.info-box-container .infoBox.vertical .boxContent {
  margin-left: 30px;
  width: calc(100% - 30px);
  padding: 0;
  border-width: 1px; }

/* --- horizontal --- */
.info-box-container .infoBox.horizontal .titleBox {
  width: 100%; }

.info-box-container .infoBox.horizontal .boxContent {
  height: 220px; }

/* ------------- fixed-width ------------- */
.fixed-width .infoBox {
  padding: 0 10px 0 0; }
  .fixed-width .infoBox:last-child {
    padding: 0; }

/* ------------- flexible-width ------------- */
.flexible-width {
  padding: 0 10px 10px 0; }

.not-aerogligli .flexible-width {
  /* delete when aerogligli box is displayed */
  padding: 0 0 10px 0; }

.has-ad .flexible-width {
  padding: 0 10px 10px 0; }

/* ------------- fixed-width ------------- */
.fixed-width {
  width: 250px; }

.fixed-width .infoBox {
  padding: 0 10px 0 0; }

.fixed-width .infoBox:last-child {
  padding: 0; }

.fixed-width.has-ad .infoBox {
  display: table-cell;
  vertical-align: top; }
  .fixed-width.has-ad .infoBox.isWelcomePage .boxContent#adBox {
    outline: 1px solid #abd9e4;
    border-radius: 1px; }

.not-aerogligli .fixed-width {
  /* delete when aerogligli box is displayed */
  width: 0; }

.not-aerogligli.has-ad .fixed-width {
  /* delete when aerogligli box is displayed */
  width: 250px; }

/* ------------- has-ad ------------- */
.has-ad .fixed-width {
  width: 510px; }

.not-aerogligli .fixed-width {
  /* delete when aerogligli box is displayed */
  width: 0; }

.not-aerogligli.has-ad .fixed-width {
  /* delete when aerogligli box is displayed */
  width: 250px; }

/* ------------- structure ------------- */
.info-box-container .structure .titleBox .title .img {
  padding: 2px 0; }

.info-box-container .structure .titleBox .title .img img {
  height: auto;
  max-width: 100%;
  max-height: 100%; }

.info-box-container .structure .titleBox .title .link {
  display: block;
  width: 100%;
  height: 100%; }

.info-box-container .structure .titleBox .title .link > * {
  float: left; }

.info-box-container .structure .titleBox .title .link .img,
.info-box-container .structure .titleBox .title .link .txt {
  max-width: calc(100% - 25px); }

.info-box-container .structure .titleBox .title .link .txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.info-box-container .structure .titleBox .title .link .external-link {
  display: block;
  width: 25px;
  height: 100%;
  background: url("./img/external-link.svg") no-repeat 7px center;
  background-size: 10px; }

.info-box-container .structure .boxContent .contentDate {
  margin: 0.75em 0 0 0;
  font-size: 0.8em; }

.info-box-container .structure .boxContent .contentDate:first-child {
  margin-top: 0; }

.info-box-container .structure .boxContent .contentTitle {
  display: inline-block; }

/* ------------- weather ------------- */
.info-box-container .weather #addWeatherForm input {
  height: 16px;
  padding-right: 3px;
  padding-left: 3px;
  border-color: #ccc;
  border-width: 1px;
  border-radius: 2px; }
  .info-box-container .weather #addWeatherForm input:focus {
    color: #000;
    border-color: #777;
    outline: none; }

.info-box-container .weather.horizontal .boxContent .weatherStation {
  margin-bottom: .5em;
  padding-bottom: .75em;
  border-bottom: 1px dashed #ddd; }

.info-box-container .weather.horizontal .boxContent .weatherStation:last-child {
  margin: 0;
  padding: 0;
  border: none; }

.info-box-container .weather .boxContent .weatherStation:last-child {
  padding-bottom: .5em; }

.info-box-container .weather .boxContent .match {
  color: #000;
  font-weight: bold; }

.info-box-container .weather.vertical .boxContent .weatherStation {
  margin-top: .75em;
  padding-top: .5em;
  border-top: 1px dashed #ddd; }

.info-box-container .weather.vertical .boxContent .weatherStation:nth-child(1n) {
  margin-top: .5em; }

.info-box-container .weather.horizontal .titleBox .title {
  float: left;
  width: auto; }

.info-box-container .weather.horizontal .titleBox #addWeatherForm {
  display: flex;
  align-items: center;
  float: left;
  margin-left: 5px;
  height: 100%; }

/* ------------- aerobuzz ------------- */
.info-box-container .aerobuzz .titleBox .title {
  padding: 7px 0; }

.info-box-container .aerobuzz > .inner .titleBox .title .img img {
  height: 82%; }

/* ------------- aerovfr ------------- */
.info-box-container .aerovfr .titleBox .title {
  padding: 8px 0; }

/* ------------- aerogligli ------------- */
.info-box-container .aerogligli .titleBox .title {
  padding: 9px 0; }

/* ------------- ad ------------- */
.info-box-container .ad,
.info-box-container .ad .boxContent {
  width: 250px; }

.info-box-container .ad,
.info-box-container .ad .boxContent {
  height: 250px; }

.info-box-container .ad .boxContent {
  display: flex;
  align-items: center;
  justify-content: center; }

.info-box-container .ad .img {
  display: block;
  max-width: 100%; }

#minusButton {
  /* commented button in ad user-infobox. @todo see if must be deleted */
  float: right;
  margin-left: 0.5em;
  width: 12px;
  height: 12px;
  text-align: center;
  background: url(img/minus.png) 2px 2px no-repeat;
  border-left: 1px solid #787878; }
  #minusButton:hover {
    color: #FF8C00; }

/* ------------- line ------------- */
.info-box-container .line {
  display: flex; }

.info-box-container .line {
  padding: 0 0 5px 0; }

.info-box-container .line .infoBox {
  width: 50%;
  padding: 0 5px; }

.info-box-container .line .infoBox:first-child {
  padding-left: 0; }

.info-box-container .line .infoBox:last-child {
  padding-right: 0; }

.info-box-container .line:last-child {
  padding: 5px 0 0 0; }

.info-box-container .line .infoBox {
  height: auto; }

.info-box-container .line .infoBox.vertical .titleBox {
  width: 120px; }

.info-box-container .line .infoBox.vertical .boxContent {
  height: 120px; }

.info-box-container .line .infoBox.horizontal .boxContent {
  height: 90px; }

/* ================================ horizontal & closed ================================ */
.info-box-container .infoBox.horizontal .titleBox,
.info-box-container .infoBox.closed .titleBox {
  width: 100%;
  height: 30px; }

/* ================================ closed ================================ */
.info-box-container .infoBox.closed .boxContent {
  display: none; }

.info-box-container .infoBox.closed.vertical .titleBox {
  position: relative;
  bottom: 0;
  width: 100%;
  transform: none; }

.info-box-container .weather.closed .titleBox #addWeatherForm {
  display: none; }

/* ================================ closed ================================ */
.info-box-container .infoBox.closed .titleBox .collapse-btn > .inner .stroke.two {
  display: block;
  transform: rotate(90deg); }

.info-box-container .infoBox.closed .boxContent {
  display: none; }

.info-box-container .infoBox.closed.vertical .titleBox {
  position: relative;
  bottom: 0;
  width: 100%;
  transform: none; }

.info-box-container .weather.closed .titleBox #addWeatherForm {
  display: none; }

/* ================================ explandable design ================================ */
.expendableDesign .headerContainer {
  position: fixed; }

/* ===============================================================================
   ============================ middle range screen ==============================
   =============================================================================== */
@media screen and (max-width: 939px) {
  .headerContainer {
    display: flex; }

  .info-box-container .line {
    display: block; }

  .info-box-container .line .infoBox {
    width: 100%;
    padding: 0 0 10px 0; }

  .info-box-container .line .infoBox:last-child {
    padding: 0; }

  .flexible-width {
    width: calc(100% - 250px); }

  .fixed-width[class] {
    display: flex;
    flex-flow: column-reverse;
    justify-content: flex-end;
    width: 250px; }

  .fixed-width[class] > .infoBox {
    display: block;
    padding: 10px 0 0 0; }

  .fixed-width[class] > .infoBox:last-child {
    padding: 0; }

  .not-aerogligli .info-box-container .line {
    /* delete when aerogligli box is displayed */
    display: flex; }

  .not-aerogligli .info-box-container .line .infoBox {
    /* delete when aerogligli box is displayed */
    width: 50%;
    padding: 0 5px; }

  .not-aerogligli .info-box-container .line .infoBox:first-child {
    /* delete when aerogligli box is displayed */
    padding-left: 0; }

  .not-aerogligli .info-box-container .line .infoBox:last-child {
    /* delete when aerogligli box is displayed */
    padding-right: 0; }

  .not-aerogligli .flexible-width {
    /* delete when aerogligli box is displayed */
    width: 100%; }

  .has-ad.not-aerogligli .info-box-container .line {
    /* delete when aerogligli box is displayed */
    display: block;
    padding: 0; }

  .has-ad.not-aerogligli .info-box-container .line .infoBox {
    /* delete when aerogligli box is displayed */
    width: 100%;
    padding: 0 0 10px 0; }

  .not-aerogligli .fixed-width[class] {
    /* delete when aerogligli box is displayed */
    display: none; }

  .has-ad.not-aerogligli .fixed-width[class] {
    /* delete when aerogligli box is displayed */
    display: flex; } }
/* ===============================================================================
   ============================ middle range screen ==============================
   =============================================================================== */
@media screen and (max-width: 939px) {
  .info-box-container {
    width: 100%; }

  .flexible-width {
    display: block; }

  .fixed-width {
    display: flex;
    justify-content: center; }

  .not-aerogligli.has-ad .fixed-width {
    width: 100%; }

  .has-ad.not-aerogligli .flexible-width {
    /* delete when aerogligli box is displayed */
    width: calc(100% - 250px); }

  .has-ad.not-aerogligli .fixed-width[class] {
    /* delete when aerogligli box is displayed */
    width: 250px; } }
/* ===============================================================================
   =============================== small screen ==================================
   =============================================================================== */
@media screen and (max-width: 767px) {
  .headerContainer,
  .flexible-width,
  .fixed-width[class] {
    display: block; }

  .headerContainer > *,
  .info-box-container .infoBox,
  .info-box-container .line,
  .info-box-container .line:last-child {
    padding: 0; }

  .info-box-container,
  .info-box-container .line,
  .info-box-container .infoBox {
    margin: 0 0 10px 0; }

  .info-box-container:last-child,
  .info-box-container .line:last-child,
  .info-box-container .infoBox:last-child {
    margin: 0; }

  .headerContainer {
    width: calc(100% - 40px);
    padding: 10px 0 10px 10px; }

  .info-box-container .line .infoBox {
    padding: 0; }

  .info-box-container .weather #addWeatherForm input {
    width: calc(100% - 10px);
    font-size: 16px; }

  .info-box-container .weather #addWeatherForm input::placeholder {
    color: #aaaaaa; }

  .flexible-width,
  .fixed-width[class] {
    width: 100%; }

  .fixed-width[class] .infoBox {
    width: 100%;
    padding: 0; }

  .fixed-width[class] .aerogligli.horizontal .boxContent {
    height: 110px; }

  .fixed-width[class] .aerogligli {
    display: block; }

  .fixed-width[class] .ad {
    display: flex;
    justify-content: center; }

  .fixed-width[class] .ad .boxContent {
    margin-left: 40px; }

  .has-ad .flexible-width {
    padding: 0; }

  .not-aerogligli .info-box-container .line {
    /* delete when aerogligli box is displayed */
    display: block; }

  .not-aerogligli .info-box-container .line .infoBox {
    /* delete when aerogligli box is displayed */
    width: 100%;
    padding: 0; }

  .has-ad.not-aerogligli .info-box-container .line .infoBox {
    /* delete when aerogligli box is displayed */
    padding: 0; }

  .has-ad.not-aerogligli .flexible-width,
  .has-ad.not-aerogligli .fixed-width[class] {
    /* delete when aerogligli box is displayed */
    width: 100%; } }
/* ===============================================================================
   =================================== print =====================================
   =============================================================================== */
@media only print {
  .headerContainer {
    display: none; } }
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * map.css
 *
 * LICENSE: This source file is subject to version 1.0 of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: http://www.openflyers.com/license/semifreelicense1_0.txt. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    CSS
 * @package     OpenFlyers
 * @author      Christophe LARATTE <christophe.laratte@openflyers.org>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     http://www.openflyers.com/license/semifreelicense1_0.txt  OpenFlyers License
 * @link        http://openflyers.org
 * @since       Fri Dec 13 2002
 *
 * used to apply style on map's div. 
 */
.mapContainer {
  padding-right: 183px;
  border: 0; }

#map {
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
  border: 1px solid #000;
  border-right: 0;
  height: 470px;
  background-color: #EEE;
  position: relative; }

/* ----- unused ----- */
/* #mapstat {
        float     : left;
        text-align: left;
} */
.legend {
  float: right;
  right: 0;
  width: 180px;
  height: 470px;
  background-color: #EEE;
  border: 1px solid #000; }

.legend .aircraft {
  float: left;
  clear: both; }

.legend span {
  font-size: 0.8em;
  position: relative;
  top: 2em;
  left: 1em;
  text-align: left; }

.legend span.track {
  float: left;
  clear: both; }

.legend span.callsign {
  top: -2em; }

.navigator {
  padding-top: 5px; }

button {
  border: 0 none; }

#heightView {
  float: both; }

.track0 {
  font-weight: normal;
  background: #fff; }

.track1 {
  font-weight: normal;
  background: #FFFFDA; }

.track0.trackactive, .track1.trackactive {
  font-weight: bold; }

#containerList {
  font-size: 0.8em;
  overflow: auto;
  padding: 0;
  height: 285px;
  width: 180px;
  list-style-type: none; }

.heightViewLegend {
  float: right;
  width: 170px;
  height: 288px;
  padding: 5px;
  background-color: #EEE;
  border: 1px solid #000;
  border-top: 0;
  font-size: 0.8em;
  text-align: left; }

.heightViewChoice {
  padding-left: 20px;
  padding-top: 5px; }

/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
/**
 * _externalBooking.scss
 *
 * LICENSE: This source file is subject to version of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.org so we can mail you
 * a copy immediately.
 *
 * @category    SCSS
 * @package     OpenFlyers
 * @author      Lydie TREMBLET <lydie.tremblet@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales OpenFlyers License
 * @link        http://openflyers.com
 * @link        https://work.openflyers.com/Koala before editing this file, Koala software must be installed and configured
 * @since       Thu Jul 02 2020
 *
 * Manages styles for external booking interface
 */
/* ==============================================================================
  =================================== default ===================================
  =============================================================================== */
.external-booking {
  background: #f3f9ff; }
  .external-booking .top-bar {
    z-index: 1; }
  .external-booking .contentBox {
    padding: 0 0 0 0; }
    .external-booking .contentBox .page-left {
      width: 60%; }
      .external-booking .contentBox .page-left.externalBookingError {
        font-size: .75em;
        max-width: 400px;
        background: #f8f8f8;
        border-width: 1px 1px 1px 1px;
        border-style: solid;
        border-color: #ddd;
        text-align: left;
        padding: 1.6em;
        margin: 0 calc(calc(calc(60% - 400px) / 2) + 40%) 0 calc(calc(60% - 400px) / 2); }
    .external-booking .contentBox .page-right {
      position: absolute;
      top: 0;
      right: 0;
      width: 40%; }
    .external-booking .contentBox .buttonBackContainer {
      display: none; }
    .external-booking .contentBox .structure-identity {
      clear: both;
      padding: 50px 0 0 0;
      background-color: #fff;
      -webkit-box-shadow: 2000px 0 0 2000px #fff;
      -moz-box-shadow: 2000px 0 0 2000px #fff;
      -ms-box-shadow: 2000px 0 0 2000px #fff;
      -o-box-shadow: 2000px 0 0 2000px #fff;
      box-shadow: 2000px 0 0 2000px #fff; }
      .external-booking .contentBox .structure-identity > * {
        margin: 20px 0 0 0; }
        .external-booking .contentBox .structure-identity > *:first-child {
          margin: 0 0 0 0; }
      .external-booking .contentBox .structure-identity [class*="logo"] {
        display: block; }
      .external-booking .contentBox .structure-identity .welcomeMessage {
        padding: 0 0 5% 5%;
        text-align: justify;
        color: #243656; }
        .external-booking .contentBox .structure-identity .welcomeMessage .collapsible {
          padding: 0 1em 0 0; }
          .external-booking .contentBox .structure-identity .welcomeMessage .collapsible .wikiCode {
            line-height: 1.3em;
            font-size: .85em; }
          .external-booking .contentBox .structure-identity .welcomeMessage .collapsible .readButton {
            display: none; }
    .external-booking .contentBox > .header {
      margin: 0 0 0 0; }
      .external-booking .contentBox > .header > .inner {
        text-align: center;
        font-weight: normal;
        color: #243656; }
  .external-booking.calendar .contentBox > .header {
    font-size: 1.4em; }
    .external-booking.calendar .contentBox > .header > .inner {
      padding: 50px 0 20px 0; }
  .external-booking.calendar .contentBox .calendar-container > .inner {
    margin: 0 auto;
    width: 560px;
    padding: 20px 20px 0 20px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3); }
    .external-booking.calendar .contentBox .calendar-container > .inner > .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 0 15px 0; }
      .external-booking.calendar .contentBox .calendar-container > .inner > .nav > [class*="button"] {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        padding: 2px 0 0 0; }
        .external-booking.calendar .contentBox .calendar-container > .inner > .nav > [class*="button"] .picto {
          display: block;
          height: 28px;
          line-height: 28px;
          width: 14px; }
          .external-booking.calendar .contentBox .calendar-container > .inner > .nav > [class*="button"] .picto:before {
            left: 3px;
            cursor: pointer;
            width: 9px;
            font-size: 8px; }
        .external-booking.calendar .contentBox .calendar-container > .inner > .nav > [class*="button"] .text {
          font-size: .7em; }
      .external-booking.calendar .contentBox .calendar-container > .inner > .nav > .button-prev {
        justify-content: flex-start; }
        .external-booking.calendar .contentBox .calendar-container > .inner > .nav > .button-prev .picto {
          transform: rotate(180deg); }
      .external-booking.calendar .contentBox .calendar-container > .inner > .nav > .button-next {
        justify-content: flex-end; }
        .external-booking.calendar .contentBox .calendar-container > .inner > .nav > .button-next .picto:before {
          top: 2px; }
      .external-booking.calendar .contentBox .calendar-container > .inner > .nav .starting-day {
        display: flex;
        justify-content: center;
        align-items: center; }
        .external-booking.calendar .contentBox .calendar-container > .inner > .nav .starting-day .day {
          font-size: .95em; }
    .external-booking.calendar .contentBox .calendar-container > .inner .days {
      display: flex;
      justify-content: space-around;
      margin: 0 0 0 0;
      padding: 0 0 0 0; }
      .external-booking.calendar .contentBox .calendar-container > .inner .days > .item {
        margin: 0;
        width: 14.285%;
        padding: .5em 0;
        line-height: 1.4em;
        font-size: .85em; }
        .external-booking.calendar .contentBox .calendar-container > .inner .days > .item > .inner {
          padding: .5em 0; }
          .external-booking.calendar .contentBox .calendar-container > .inner .days > .item > .inner.active {
            background-color: #f2f2f2;
            border-radius: 2px; }
          .external-booking.calendar .contentBox .calendar-container > .inner .days > .item > .inner .number {
            font-weight: bold; }
    .external-booking.calendar .contentBox .calendar-container > .inner .slots {
      position: relative;
      overflow-x: hidden;
      min-height: 45vh;
      border-top: 1px solid; }
      .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container {
        position: relative; }
        .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container > [class*="button-"] {
          display: flex;
          justify-content: center;
          align-items: center;
          visibility: hidden;
          opacity: 0;
          cursor: pointer;
          height: 50px;
          font-size: .65em;
          color: #666;
          -webkit-transition: all 0.2s linear 0s;
          -moz-transition: all 0.2s linear 0s;
          -ms-transition: all 0.2s linear 0s;
          -o-transition: all 0.2s linear 0s;
          transition: all 0.2s linear 0s; }
          .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container > [class*="button-"] .arrow-up, .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container > [class*="button-"] .arrow-up:before {
            width: 25px; }
          .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container > [class*="button-"] .arrow-up:before {
            top: 0;
            left: 0;
            font-size: 12px; }
          .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container > [class*="button-"] .txt {
            user-select: none; }
          .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container > [class*="button-"].active {
            visibility: visible;
            opacity: 1; }
        .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container > .button-next .arrow-up {
          -webkit-transform: rotate(180deg);
          -moz-transform: rotate(180deg);
          -ms-transform: rotate(180deg);
          -o-transform: rotate(180deg);
          transform: rotate(180deg); }
        .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists {
          display: flex;
          flex-flow: row wrap;
          overflow-y: scroll;
          height: 40vh;
          width: calc(100% + 15px);
          padding: 0 15px 0 0; }
          .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list {
            margin: 0;
            width: 14.285%;
            padding: 0 0 0 0; }
            .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list > .item {
              margin: 0 0 0 0;
              padding: 2px 4px; }
              .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list > .item > .inner {
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: default;
                height: 40px;
                font-size: 0.85em;
                color: #999;
                user-select: none; }
              .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list > .item.active > .inner {
                cursor: pointer;
                color: #167ebf;
                background-color: #edf8ff;
                border-radius: 2px;
                -webkit-transition: all 0.2s ease-in 0s;
                -moz-transition: all 0.2s ease-in 0s;
                -ms-transition: all 0.2s ease-in 0s;
                -o-transition: all 0.2s ease-in 0s;
                transition: all 0.2s ease-in 0s; }
                .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list > .item.active > .inner.pastel-aqua {
                  background-color: #e4f0f0; }
                .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list > .item.active > .inner.pastel-blue {
                  background-color: #E3F2F9; }
                .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list > .item.active > .inner.pastel-gold {
                  background-color: #FDF4E1; }
                .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list > .item.active > .inner.pastel-green {
                  background-color: #C7EDDE; }
                .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list > .item.active > .inner.pastel-lavender {
                  background-color: #E6E6FA; }
                .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list > .item.active > .inner.pastel-lilac {
                  background-color: #F6EBFB; }
                .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list > .item.active > .inner.pastel-orange {
                  background-color: #ffd299; }
                .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list > .item.active > .inner.pastel-peach {
                  background-color: #FBE7D4; }
                .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list > .item.active > .inner.pastel-pink {
                  background-color: #F7E1E1; }
                .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list > .item.active > .inner:hover {
                  position: relative;
                  z-index: 1;
                  color: #fff;
                  background-color: #167ebf; }
                .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list > .item.active > .inner:active {
                  background-color: #004b8c; }
              .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list > .item:first-child {
                padding-top: 0; }
              .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list > .item:last-child {
                padding-bottom: 0; }
            .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list:first-child > .item {
              padding-left: 0; }
            .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list:last-child > .item {
              padding-right: 0; }
        .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container.gradient-top:before {
          opacity: 1; }
        .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container.gradient-bottom:after {
          opacity: 1; }
      .external-booking.calendar .contentBox .calendar-container > .inner .slots .next-slot {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 100%;
        height: 100%; }
        .external-booking.calendar .contentBox .calendar-container > .inner .slots .next-slot .text {
          padding: 0 0 15px 0;
          line-height: 1.4em;
          font-size: .8em; }
          .external-booking.calendar .contentBox .calendar-container > .inner .slots .next-slot .text .end {
            font-weight: bold; }
  .external-booking .back-link-container .back-link {
    display: block;
    margin: 0 auto;
    max-width: 67%;
    height: 45px; }
    .external-booking .back-link-container .back-link > * {
      display: flex;
      float: left;
      height: 100%;
      align-items: center; }
    .external-booking .back-link-container .back-link .picto {
      width: 14px; }
      .external-booking .back-link-container .back-link .picto:before {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        top: 0;
        width: 100%;
        height: 100%;
        font-size: 8px;
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg); }
    .external-booking .back-link-container .back-link .text {
      font-size: .7em;
      color: #167ebf; }
  .external-booking.form .contentBox .form-inner.centered.externalBooking {
    max-width: 67%; }
  .external-booking.form .contentBox > .header {
    font-size: 1.05em; }
    .external-booking.form .contentBox > .header > .inner {
      margin: 0 auto;
      width: 67%;
      padding: 10px 0 15px 0; }
  .external-booking.coupon .contentBox > .header > .inner {
    padding: 30px 0 15px 0; }
  .external-booking.error .contentBox .page-left {
    display: flex;
    justify-content: center;
    padding: 0 20px; }
  .external-booking.error .contentBox > .header > .inner {
    padding: 50px 0 10px 0; }

/* ===============================================================================
   ============= standard tablet in landscape mode : height < 768px ==============
   =============================================================================== */
@media screen and (max-height: 767px) {
  .external-booking .contentBox .structure-identity {
    padding: 30px 0 0 0; }
  .external-booking.calendar .contentBox > .header {
    font-size: 1.3em; }
    .external-booking.calendar .contentBox > .header > .inner {
      padding: 30px 0 15px 0; }
  .external-booking.calendar .contentBox .calendar-container > .inner > .nav {
    margin: 0 0 5px 0; } }
/* ===============================================================================
   ======================= small height : height < 575px =========================
   =============================================================================== */
@media screen and (max-height: 574px) {
  .external-booking.calendar .contentBox > .header {
    font-size: 1.15em; }
    .external-booking.calendar .contentBox > .header > .inner {
      padding: 20px 0 13px 0; }
  .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists {
    height: 25vh; } }
/* ===============================================================================
   ========================== middle range screen < 1024px =======================
   =============================================================================== */
@media screen and (max-width: 1023px) {
  .external-booking .contentBox {
    /* manage styles for buck button (position, color and font-size) */ }
    .external-booking .contentBox [class*="page"] {
      width: auto; }
    .external-booking .contentBox .page-left {
      display: block; }
      .external-booking .contentBox .page-left.externalBookingError {
        margin: 0 auto; }
    .external-booking .contentBox .buttonBackContainer {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 102px;
      /* picto which matches to [data-picto]: left arrow symbol, selected with the selector :before */
      /* matches to the text 'BACK' in the buck button */ }
      .external-booking .contentBox .buttonBackContainer .picto.arrow-2-left:before {
        color: #243656;
        font-size: .5em;
        line-height: 3.15em; }
      .external-booking .contentBox .buttonBackContainer .text {
        display: inline-block;
        font-size: .7em;
        padding-left: .9em;
        color: #243656; }
    .external-booking .contentBox .structure-identity {
      flex-flow: column wrap;
      justify-content: center;
      position: relative;
      padding: 15px 0 0 0;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      -ms-box-shadow: none;
      -o-box-shadow: none;
      box-shadow: none;
      background-color: transparent; }
      .external-booking .contentBox .structure-identity .button.single-link {
        display: none; }
      .external-booking .contentBox .structure-identity .logo {
        margin: 0 10px 0 0;
        max-height: 55px; }
      .external-booking .contentBox .structure-identity [class*="name"] {
        display: none; }
      .external-booking .contentBox .structure-identity .button.flat {
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        font-family: Verdana, sans-serif;
        font-size: 12px;
        color: #167ebf;
        background-color: transparent; }
      .external-booking .contentBox .structure-identity .login-link {
        display: none; }
      .external-booking .contentBox .structure-identity .welcomeMessage {
        padding: 0;
        font-size: .8em;
        width: 560px;
        /* manage styles for middle and small screens (width < 1024px) */ }
        .external-booking .contentBox .structure-identity .welcomeMessage .collapsible {
          opacity: 1;
          background-color: #ffffff;
          padding: 10px 10px 10px 10px;
          -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
          -moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
          -ms-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
          -o-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
          /** manage styles for read button (position, font-size and text-decoration)
            * readButton : "Read More - Read Less" functionality
            */ }
          .external-booking .contentBox .structure-identity .welcomeMessage .collapsible .wikiCode .collapsibleContent#hiddenText {
            display: none; }
          .external-booking .contentBox .structure-identity .welcomeMessage .collapsible .readButton {
            display: flex;
            justify-content: flex-end;
            font-size: 10px;
            padding-top: 10px;
            text-decoration: underline;
            cursor: pointer; }
  .external-booking.calendar .contentBox > .header > .inner {
    padding: 20px 0 20px 0; } }
/* ===============================================================================
   ============= middle range screen and tablet in landscape mode ================
   =============================================================================== */
@media screen and (max-width: 1023px) and (max-height: 767px) {
  .external-booking .contentBox .structure-identity {
    padding: 15px 0 0 0; }
    .external-booking .contentBox .structure-identity .logo {
      max-height: 45px; }
  .external-booking.calendar .contentBox > .header > .inner {
    padding: 15px 0 10px 0;
    font-size: .85em; }
  .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists {
    height: 35vh; } }
/* ===============================================================================
   ==================== middle range screen and small height =====================
   =============================================================================== */
@media screen and (max-width: 1023px) and (max-height: 574px) {
  .external-booking .contentBox .structure-identity {
    padding: 10px 0 0 0; }
    .external-booking .contentBox .structure-identity .logo {
      max-height: 40px; }
  .external-booking.calendar .contentBox > .header > .inner {
    padding: 10px 0 10px 0;
    font-size: .85em; }
  .external-booking.calendar .contentBox .calendar-container > .inner .slots {
    min-height: 35vh; }
    .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists {
      height: 15vh; } }
/* ===============================================================================
   ======= smartphone with high screen in landscape mode (i.e.: iPhone X) =======
   =============================================================================== */
@media screen and (max-width: 812px) and (max-height: 375px) {
  .external-booking .contentBox .structure-identity {
    padding: 5px 0 0 0; }
    .external-booking .contentBox .structure-identity .logo {
      max-height: 30px;
      margin: 0 5px 0 0; }
    .external-booking .contentBox .structure-identity .button.flat {
      font-size: 10px; }
  .external-booking.calendar {
    overflow: hidden; }
    .external-booking.calendar .contentBox .header > .inner {
      font-size: .85em;
      padding: 10px 0 10px 0; }
    .external-booking.calendar .contentBox .calendar-container > .inner {
      padding: 10px 20px 0 20px; }
      .external-booking.calendar .contentBox .calendar-container > .inner > .nav {
        margin: 0 0 0 0; }
        .external-booking.calendar .contentBox .calendar-container > .inner > .nav .starting-day .day {
          font-size: .9em; }
      .external-booking.calendar .contentBox .calendar-container > .inner .days .item, .external-booking.calendar .contentBox .calendar-container > .inner .days .item > .inner {
        padding: .25em 0; }
      .external-booking.calendar .contentBox .calendar-container > .inner .slots {
        height: 100%; }
        .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container {
          height: calc(100% - 55px); }
          .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container > [class*="button-"] {
            font-size: .75em; } }
/* ===============================================================================
   ============================ small screen < 768px =============================
   =============================================================================== */
@media screen and (max-width: 767px) {
  .external-booking {
    display: block; }
    .external-booking .contentBox .structure-identity {
      padding: 5px 0 0 0; }
      .external-booking .contentBox .structure-identity .logo {
        max-height: 30px;
        margin: 0 5px 0 0; }
      .external-booking .contentBox .structure-identity .button.flat {
        font-size: 10px; }
    .external-booking.calendar {
      overflow: hidden; }
      .external-booking.calendar .top-bar {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        height: 45px; }
      .external-booking.calendar .contentBox {
        position: fixed;
        overflow: scroll;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 0 25px;
        /* manage styles for buck button (position, color and font-size) */ }
        .external-booking.calendar .contentBox .buttonBackContainer {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: 3em 0 0 0;
          /* picto which matches to [data-picto]: left arrow symbol, selected with the selector :before */
          /* matches to the text 'BACK' in the buck button */ }
          .external-booking.calendar .contentBox .buttonBackContainer .picto.arrow-2-left:before {
            color: #243656;
            font-size: .5em;
            line-height: 3.15em; }
          .external-booking.calendar .contentBox .buttonBackContainer .text {
            display: inline-block;
            font-size: .7em;
            padding-left: .9em;
            color: #243656; }
        .external-booking.calendar .contentBox .structure-identity {
          padding: 0 0 0 0;
          margin: 0;
          flex-flow: column wrap; }
          .external-booking.calendar .contentBox .structure-identity .logo {
            max-height: 30px;
            margin: 0 5px 0 0; }
          .external-booking.calendar .contentBox .structure-identity .button.flat {
            font-size: 10px; }
          .external-booking.calendar .contentBox .structure-identity .welcomeMessage {
            padding: 0;
            margin-top: 0px !important;
            font-size: .7em;
            width: 100%; }
            .external-booking.calendar .contentBox .structure-identity .welcomeMessage .collapsible {
              margin-top: 15px; }
        .external-booking.calendar .contentBox > .header {
          text-align: center;
          height: 45px;
          font-size: 1em;
          margin-top: 1em; }
          .external-booking.calendar .contentBox > .header > .inner {
            padding: 5px 0 0 0; }
        .external-booking.calendar .contentBox .calendar-container {
          height: calc(100% - 140px); }
          .external-booking.calendar .contentBox .calendar-container > .inner {
            width: 100%;
            height: 100%;
            padding: 10px 15px 0 15px; }
            .external-booking.calendar .contentBox .calendar-container > .inner > .nav {
              margin: 0 0 10px 0;
              padding: 0 0 0 0; }
              .external-booking.calendar .contentBox .calendar-container > .inner > .nav > [class*="button"] {
                padding: 0 0 0 0; }
                .external-booking.calendar .contentBox .calendar-container > .inner > .nav > [class*="button"] .picto {
                  display: block;
                  line-height: 30px;
                  width: 30px;
                  color: #000; }
                  .external-booking.calendar .contentBox .calendar-container > .inner > .nav > [class*="button"] .picto:before {
                    left: 9px;
                    cursor: pointer;
                    width: 30px;
                    font-size: 16px; }
                .external-booking.calendar .contentBox .calendar-container > .inner > .nav > [class*="button"] .text {
                  display: none; }
              .external-booking.calendar .contentBox .calendar-container > .inner > .nav > .button-next .picto:before {
                top: 1px; }
              .external-booking.calendar .contentBox .calendar-container > .inner > .nav .starting-day .day {
                font-size: .85em; }
            .external-booking.calendar .contentBox .calendar-container > .inner .days {
              display: none; }
            .external-booking.calendar .contentBox .calendar-container > .inner .slots {
              height: 100%; }
              .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container {
                height: calc(100% - 40px); }
                .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container > [class*="button-"] {
                  font-size: .75em; }
                .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists {
                  display: block;
                  position: relative;
                  overflow-y: auto;
                  height: calc(100% - 100px); }
                  .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list {
                    position: absolute;
                    width: 100%;
                    display: none; }
                    .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list.active {
                      display: block; }
                    .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list > .item {
                      display: none;
                      padding: 2px 0; }
                      .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list > .item > .inner {
                        font-size: .95em;
                        border-radius: 4px; }
                      .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list > .item.active {
                        display: block; }
                    .external-booking.calendar .contentBox .calendar-container > .inner .slots .slot-lists-container .slot-lists > .list > .item + .item.active {
                      padding: 0 0 2px 0; }
              .external-booking.calendar .contentBox .calendar-container > .inner .slots .next-slot {
                height: calc(100% - 40px); }
    .external-booking.form .contentBox {
      padding: 0 20px 30px 20px; }
      .external-booking.form .contentBox .back-link-container .back-link {
        height: 40px; }
      .external-booking.form .contentBox > .header {
        font-size: .85em; }
        .external-booking.form .contentBox > .header > .inner {
          width: 100%;
          padding: 0 0 10px 0; }
    .external-booking.form.coupon .contentBox > .header > .inner {
      padding: 10px 0 15px 0; } }
/* ===============================================================================
   ========= touch devices : class added in javascript/externalBooking.js ========
   =============================================================================== */
.external-booking.touch-device.calendar .contentBox .calendar-container > .inner .slots .slot-lists {
  width: 100%; }

/* ===============================================================================
   ============================ large screen > 1024px =============================
   =============================================================================== */
@media screen and (min-width: 1024px) {
  /* force the appearance of hidden text */
  .welcomeMessage .collapsible .wikiCode .collapsibleContent#hiddenText {
    display: block !important; } }

/*# sourceMappingURL=OF4.min.css.map */