/**
 * ---------------------------------------------------------------------
 * GLPI - Gestionnaire Libre de Parc Informatique
 * Copyright (C) 2015-2017 Teclib' and contributors.
 *
 * http://glpi-project.org
 *
 * based on GLPI - Gestionnaire Libre de Parc Informatique
 * Copyright (C) 2003-2014 by the INDEPNET Development Team.
 *
 * ---------------------------------------------------------------------
 *
 * LICENSE
 *
 * This file is part of GLPI.
 *
 * GLPI is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * GLPI is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with GLPI. If not, see <http://www.gnu.org/licenses/>.
 * ---------------------------------------------------------------------
*/
/* ################--------------- GLPI CSS style   ---------------#################### */




/* ################--------------- Default style  ---------------#################### */

body {
   font-family: 'Bitstream Vera Sans', Verdana, Tahoma, 'Sans serif';
   font-size: 12px;
   margin: 0;
   padding: 0;
   background:  #f8f7f3;
   position: relative;
   height: auto;
   min-height: 100%;
}

body.iframed {
   margin-top: 1em;
   overflow-x: hidden;
   background: inherit;
}

ul, li, dt, dl, dd, form, img, input {
   margin: 0;
   padding: 0;
}

ul {
   list-style-type: none;
}

span.invisible {
   visibility: hidden;
}

.starthidden {
   display: none;
}

/* separateur pour rétablir les comportements de block */
div.sep {
   font-size: 1px;
   height: 1px;
   padding: 0;
   margin: 0;
   clear: both;
}

img {
   border: 0;
}

small {
   font-family: verdana;
   font-size: 10px;
}

sup {
   vertical-align: baseline;
   position: relative;
   top: -0.4em;
}

.big {
   font-size: 14px;
}

.b {
   font-weight: bold;
}

.center {
   text-align:center;
}

.left {
   text-align:left;
}

.right {
   text-align:right !important;
}

.floatright {
   position: relative;
   float: right;
}

.floatleft {
   position: relative;
   float: left;
}

.nofloat {
   float: none!important;
}

.center-h {
   margin:auto;
}

.middle {
   vertical-align:middle;
}

.bottom {
   vertical-align:bottom;
}

.top {
   vertical-align:top;
}

.relative {
   position: relative;
}


.red {
   color:red;
}

.blue {
   color:blue;
}

.green {
   color:green;
}

.yellow {
   color:yellow;
}


.deleted {
   background-color:#cf9b9b;
}

.separ {
   clear: both;
   visibility: hidden;
}

a, a:link {
   font-weight: bold;
   text-decoration: none;
   font-size : 11px;
}

a.fa, a.fa:link {
   font-size: inherit;
   font-weight: normal;
}
#page a.fa, #page a.fa:link, a .fa {
   color: #222;
}

a:hover {
   color: black;
}

hr {
   border: 1px solid #cccccc;
}


.pointer {
   cursor:pointer;
}


.pager_controls {
   margin-left: .5em;
}

.pager_controls .fa.pointer {
   font-size: 1.7em;
}
.pager_controls label span.fa {
   margin-right: 1em;
}

.invisible {
   display: none;
}

.unselectable {
   -moz-user-select: none;
   -o-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

/* ################--------------- Fuzzy ---------------#################### */

#fuzzysearch {
   position: fixed;
   width: 500px;
   min-height: 50px;
   top: 30%;
   left: 50%;
   margin-top: -100px;
   margin-left: -250px;
   background: #FFF;
   z-index: 200;
}

#fuzzysearch input {
   border: 2px solid #CCC;
   font-size: 1.5em;
   border-radius: 3px;
   height: 50px;
   width: calc(100% - 20px);
   margin: 10px;
   box-sizing: border-box;
}

#fuzzysearch .results:not(:empty) {
   width: calc(100% - 20px);
   margin: 10px;
   box-sizing: border-box;
   height: 300px;
   overflow-y: auto;
   overflow-x: none;
}

#fuzzysearch .results li:nth-child(odd) {
   background: #E8E8E8;
}

#fuzzysearch .results li.selected,
#fuzzysearch .results li:hover {
   background: #848484;
   color: #FFF;
}

#fuzzysearch .results a {
   padding: 10px;
   font-size: 1.3em;
   color: inherit;
   font-weight: normal;
   line-height: 100%;
   display: block;
}

#fuzzysearch .fa-close {
   position: absolute;
   top: 0;
   right: -30px;
   color: #848484;
   cursor: pointer;
   background: #FFF;
   width: 30px;
   height: 30px;
   padding: 3px 6px;
   box-sizing: border-box;
}

@media screen and (max-width: 700px) {
   #fuzzysearch {
      width: 85%;
      top: 20%;
      left: 0;
      margin: 0 5%
   }
}

/* ################--------------- Tabs ---------------#################### */

.alltab {
   font-size:14px;
   text-align:center;
   padding: 10px;
   font-weight: bold;
}


/* ################--------------- Page ---------------#################### */

#page {
   padding: 8px 8px 20px 8px;
   min-height: 80%;
   margin: 15px auto;
}

#page form {
   font-size: 12px;
   margin:0;
   margin-bottom:5px;
   padding:0;
}#page

.form #page {
   max-width: 1400px;
}

/*#page {
   margin-top:15px;
}
* */


/* ################--------------- form ---------------#################### */

option {
   border:1px solid #ccc;
   background-color:#ffffff;
}

.submit {
   text-align:center;
}

select {
   font-size: 11px;
   color: black;
   background-color: white;
   line-height: 19px; /* do not set height because using multiple select*/
  border: 1px solid #bbb;
}

.select2-choice  {
   background: #FCFCFC !important;
   border: 1px solid #D3D3D3 !important;
}
.select2-drop {
   max-width: 500px;
   word-break: break-all;
}
.select2-dropdown-open .select2-choice {
   border: 1px solid #D3D3D3 !important;
}
.select2-arrow {
   background: #FCFCFC !important;
   border: 0 !important;
}

.select2-container .select2-choice {
   position: relative;
   text-overflow: clip;
   background-color: #FFF;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding-left: 1em;
   max-width: 270px;
}

.select2-container .select2-choice:before {
   content: '\02026';
   position: absolute;
   z-index: 1;
   left: -1em;
   background-color: inherit;
   padding-left: 1em;
   margin-left: .5em;
   background-color: inherit;
   line-height: 26px;
   margin-top: -2px;
}

.select2-container .select2-choice > .select2-chosen {
   min-width: 100%;
   position: relative;
   display: inline-block;
   float: right;
   overflow: visible;
   text-indent: .5em;
   background-color: inherit;
   margin-right: 0;
   padding-right: 26px;
   box-sizing: border-box;
}

.select2-container .select2-choice > .select2-chosen:before {
  content: '';
  position: absolute;
  display: inline-block;
  width: 1em;
  background-color: inherit;
  z-index: 2;
  left: -.5em;
  height: 26px;
  margin-top: -2px;
}


textarea, input:not([type=submit]):not([type=reset]):not([type=checkbox]):not([type=radio]):not(.select2-input) {
   border: 1px solid #D3D3D3;
   font-size: 11px;
   border-radius: 3px;
   padding: 0 5px;
}
textarea, input:not([type=submit]):not([type=reset]):not([type=checkbox]):not([type=radio]):not(.select2-input):not([disabled]) {
   background-color:#FCFCFC;
   color: black;
}

textarea:focus, input:focus {
   border: 1px solid #5897fb;
}

input {
   height: 17px;
   vertical-align: middle;
}

input:required, .mce-edit-area.required {
   border:1px rgba(255, 0, 0, .6) solid!important;
   border-left-width: 3px!important;
   padding-right: 0!important;
   box-shadow: none;
}

input:required:valid {
   border: 1px solid RGB(211, 211, 211) !important;
}

span.required {
   color: red;
   margin-left: .2em;
}

.no-wrap {
   white-space: nowrap;
}

.ui-datepicker-trigger {
   cursor: pointer;
}

.ui-datepicker {
   background: #F3F3F3;
}

.ui-datepicker .ui-state-default  {
   background: #FFF;
}

.ui-datepicker .ui-state-active  {
   background: #CCC;
}

.form-group-checkbox {
   position:relative;
   width: 16px;
   height: 16px;
   margin: 0 auto;
   display: inline-block;
}
th .form-group-checkbox {
   margin: 4px auto;
}

.label-checkbox {
   cursor:pointer;
   width: 16px;
   height: 16px;
   display: block;
}

.label-checkbox span {
   display:block;
   position:absolute;
   left:0;
   -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; transition-duration:0.2s;
}

input[type=checkbox].new_checkbox {
   display:none;
}

.label-checkbox .box {
   top: -2px;
   background-color: #E6E6E6;
   border-radius: 3px;
   height:16px;
   width:16px;
}

.subheader .box,
th .label-checkbox .box {
   background-color: #D0D0D0;
   border:0;
}

.label-checkbox .check {
   top: -5px;
   left: 4px;
   width: 8px;
   height: 16px;
   border:3px solid #727272;
   border-top: none;
   border-left: none;
   opacity:0;
   -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); transform:rotate(180deg);
}

input[type=checkbox]:checked ~ .label-checkbox .box {
   opacity:0;
}

input[type=checkbox]:checked ~ .label-checkbox .check {
   opacity:1;
   -webkit-transform   :scale(1) rotate(45deg);
   -moz-transform      :scale(1) rotate(45deg);
   transform           :scale(1) rotate(45deg);
}


input[type="image"] {
   height: auto;
   background-color: transparent;
   border: 0;
}

input[type="file"] {
   height: 22px;
   border: 1px solid #CCC;
}

input.submit,
span.vsubmit, a.vsubmit {
   padding: 5px;
   cursor:pointer;
   height: auto;
   font: bold 12px Arial, Helvetica;
   color: #8f5a0a;
   background-color: #FEC95C;
   border: 0;
   white-space: nowrap;
   display: inline-block;
}

input.submit:hover,
a.vsubmit:hover {
   opacity: .9;
   box-shadow: 0px 1px 1px #999;
}

input.submit[type=reset] {
   background-color: transparent;
   margin-left: .5em;
}

#page .mce-fullscreen {
   top: 105px;
}

#page .mce-btn-group:not(:first-child) {
   border-left: 1px solid #d9d9d9;
   padding-left: 0;
   margin-left: 0;
}


.entity_select:hover {
   opacity: .6;
}

.tree {
   width:100%;
   border:0;
   border-bottom:1px solid #C0CAD4;
}

.jstree.jstree-classic ins {
    background-image: url("../pics/d.png");
}

.jstree .jstree-node:not(.jstree-leaf) {
   position: relative;
}
.jstree .jstree-node:not(.jstree-leaf) > a > i:last-child {
   content: ' ';
   height: 10px;
   width: 10px;
   background: url("../pics/entity_all.png") no-repeat;
   position: absolute;
   top: 8px;
   margin-left: 6px;
   cursor: pointer;
}

.treeroot {
   width:100%;
   background: url("../pics/treeroot.png") 0 2px no-repeat;
   border:0;
   /*margin-top:5px;*/
   font-weight:bold;
}

.tree:hover{
   background-color:#eeeeee;
}

.treeroot:hover{
   background-color:#eeeeee;
}

.pointer {
   opacity: .7;
}

.pointer:hover {
   opacity: 1;
}

.pointer.disabled:hover,
.pointer.disabled {
   opacity: .3;
}

#page .protected {
   padding-right: 50px;
}

#page .disclosablefield {
   position: relative;
}

#page .disclosablefield span {
   position: absolute;
   right: 0;
   top: 0;
}

/* ################--------------- Layout  ---------------#################### */
.layout_classic.form div.navigationheader,
.layout_vsplit.form div.navigationheader {
   margin: 0 auto 10px;
   width: 90%;
}

.layout_classic.form .main_form,
.layout_vsplit.form .main_form {
   width: 950px;
   margin: 0 auto;
}

.layout_classic.form div.ui-tabs,
.layout_vsplit.form div.ui-tabs {
   width: 950px;
}

.layout_classic.form div.ui-tabs-panel,
.layout_vsplit.form div.ui-tabs-panel {
  padding: 1px;
}

.ui-tabs-paging-disabled {
   display: none;
}

.ui-tabs-paging-prev,
.ui-tabs-paging-next {
   height: 25px;
   width: 12px;
   padding: 0 !important;
}

.layout_classic.form div.ui-tabs-panel{
   padding-top: 5px;
}

.layout_vsplit #backtotop {
   display: none;
}

.layout_lefttab .ui-tabs,
.layout_classic .ui-tabs,
.layout_vsplit .ui-tabs {
   border: 0;
}

.ui-tabs {
   background: #FFF repeat-x top left;
   box-shadow: 0px 1px 1px #7F7979;
   width: 90%;
}

.ui-tabs-anchor {
   height: 18px;
}

.ui-tabs sup.tab_nb {
   border-radius: 50%;
   background-color: #FFF;
   min-width: 18px;
   margin-left: 5px;
   display: inline-block;
   text-align: center;
   vertical-align: top;
   padding: 3px 2px 5px;
   box-sizing: border-box;
   margin-right: -5px;
}

.layout_lefttab .ui-tabs sup.tab_nb {
   position: absolute;
   right: 8px;
   top: 5px;
}

.ui-tabs .alltab sup.tab_nb {
   position: relative;
   top: 0;
   right: 0;
   background-color: #F1F1F1;
}

.ui-tabs .ui-state-active sup.tab_nb {
   background-color: #E6E6E6;
}


.layout_vsplit.form .ui-tabs {
   height: 100%;
   width: 100%;
   padding: 0;
}


.debug .ui-tabs-nav,
.layout_lefttab .ui-tabs-nav {
   margin: 5px !important;
   box-sizing: border-box;
}
.debug .ui-tabs-nav,
.layout_lefttab .ui-tabs-nav,
.layout_classic .ui-tabs-nav,
.layout_vsplit .ui-tabs-nav {
   border: 0;
   background: none;
}

.layout_classic.form .stNavMain li,
.layout_vsplit.form .stNavMain li {
   border: 1px solid #d3d3d3 !important;
   border-bottom: none !important;
}

.main_form {
   background-color: #FFF;
   box-shadow: 0px 1px 2px 1px #D2D2D2;
}

.main_form .actor_title,
.main_form tr:not(.headerRow):not(.footerRow) th:not(.actor-th) {
   text-align: right;
}

.main_form tr.headerRow th {
   border-bottom: 1px solid #EFEFEF;
   font-size: 1.5em;
   padding: 8px 0;
}


.layout_lefttab .new_form_tabs .ui-tabs-nav {
   width: 100%;
}
.layout_lefttab .new_form_tabs .ui-tabs-panel {
   margin: 0;
   clear: both;
}

/* Vertical split layout */
@media screen and (min-width: 1300px) {
   html, body.layout_vsplit {
      height:100%;
   }
   body.layout_vsplit {
      overflow: hidden;
   }

   .layout_vsplit #page {
      max-width: inherit;
      min-height: 0;
      position: absolute;
      top: 105px;
      bottom: 15px;
      width: 100%;
      padding: 0;
      overflow: auto;
   }

   .layout_vsplit.form #page {
      overflow: hidden;
   }

   .layout_vsplit #page .glpi_tabs {
      height: 96%;
      position: relative;
      z-index:1;
   }

   .layout_vsplit #page .main_form.create_form {
      width: 950px;
      margin: 0 auto;
   }

   .layout_vsplit.form table.tab_cadre_pager,
   .layout_vsplit.form table.tab_cadre_fixe,
   .layout_vsplit.form table.tab_cadre_fixehov,
   .layout_vsplit.form .dates_timelines {
      width: 100%;
      margin: 0;
   }

   .layout_vsplit div.navigationheader,
   .layout_vsplit.form table.tab_cadre_pager {
      margin: 0;
      border: 0;
      min-width: 150px;
   }

   .layout_vsplit.form .ui-tabs-panel table.tab_cadre_pager {
      width: 100%;
   }

  .layout_vsplit.form .form_content {
      position: relative;
      width: 46%;
      float: left;
      height: 96%;
      z-index:2;
   }

   .layout_vsplit.form div.main_form:not(.no_tab) {
      width: 100%;
      margin: 0 15px;
      overflow-x: hidden;
      overflow-y: auto;
      position: absolute;
      top: 0;
      bottom: 0;
   }

   .layout_classic #tabspanel + div.ui-tabs:not(.horizontal),
   .layout_vsplit #tabspanel + div.ui-tabs {
      height: 100%;
      /*bottom: 10px;*/
      box-sizing:border-box;
   }
   .layout_vsplit.form #tabspanel + div.ui-tabs:not(.horizontal) {
      width: 50% !important;
      margin: 0 15px;
      float: right;
      border: none;
      box-shadow: 0px 1px 2px 1px #D2D2D2;
   }

   .layout_vsplit.form .ui-tabs {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 52%;
      margin: 0;
      right: 0;
      /*height: inherit !important;*/
   }

   .layout_vsplit > #page > div > .ui-tabs > .ui-tabs-panel {
      /*padding: 10px 0 0 0;*/
      overflow-x: hidden;
      overflow-y: auto;
      position: absolute;
      top: 32px;
      bottom: 2px;
      width: 100%;
      box-sizing: border-box;
   }

   .layout_vsplit .ui-tabs-panel .tab_cadre_fixehov th {
      background-color: #E6E6E6;
   }

   .layout_vsplit.form .main_form input[type=text]:not([size]) {
      width:74%;
      min-width: 175px;
   }
   .layout_vsplit.form .main_form textarea {
      resize: vertical;
      width:97%;
      min-height: 125px;
   }

   .layout_vsplit.form input.submit,
   .layout_vsplit.form span.vsubmit,
   .layout_vsplit.form a.vsubmit {
      white-space: nowrap;
   }
   .layout_vsplit.form .boxnote {
      width: 100%;
   }

   .layout_vsplit .debug:not(.debug_ajax),
   .layout_vsplit #footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      z-index: 3;
   }
   .layout_vsplit .debug_ajax {
      width: 100% !important;
   }
}


/* ################--------------- Table  ---------------#################### */
table {
   font-size: 11px;
   /* Probem WIth EXTJS calendar -> to sons*/
   /*margin: 0 auto;*/
   border:0;
}

th { }

td { }

.tab_glpi {
   margin: 0 auto;
}

.tab_cadre {
   margin: 0 auto;
   z-index:1;
   text-align: left;
   font-size: 11px;
   background-color: #ffffff;
   border-spacing: 0;
   box-shadow: 0px 1px 2px 1px #999;
}

.tab_cadre_central {
   margin: 0 auto;
   /*border: 1px solid #bbbbbb;*/
   z-index:1;
   text-align: left;
   font-size: 11px;
   width:90%;
   /* background-color: #FFF4DF; */
  /* background : url("../pics/fond-central.png") repeat-x top right ;
   border-radius: 5px;
   box-shadow: 0px 2px 5px #666;*/
}


.tab_cadre_postonly {
   margin: 0 auto;
   /*border: 1px solid #bbbbbb;*/
   z-index:1;
   text-align: left;
   font-size: 11px;
   width: 80%;
}

.tab_cadre_navigation {
   margin: 0 auto;
   padding: 4px;
   margin: 1px;
   border: 1px solid #aaaaaa;
   background-color: #ffffff;
   border-radius: 5px;
   font-size : 12px;
   font-weight: bold;
}

.tab_cadre_fixe, .tab_cadre_fixehov {
   margin: 0px auto 5px auto;
   /*border: 1px solid #cccccc;*/
   background: #FFF;
   z-index:1;
   text-align: left;
   font-size: 11px;
   max-width:950px;
   width: 100%;
   border-spacing: 0;
}
.tab_cadre_fixehov {
   box-shadow: 0px 1px 2px 1px #999;
}
.ui-tabs .tab_cadre_fixehov {
   box-shadow: inherit;
}


/*.tab_cadre_fixe tr, .tab_cadre_fixe td { */
/*   background-color: transparent; */
/*}*/


.tab_cadre_fixe img {
   vertical-align: middle;
}

.tab_cadrehov {
   margin: 10px auto;
   border: 0;
   text-align: left;
   font-size: 11px;
   width: 95%;
   background-color: #ffffff;
   box-shadow: 0px 1px 2px 1px #D2D2D2;
   border-spacing: 0;
}

.tab_cadre th, .tab_cadre_fixe th, .tab_cadre_fixehov th, .tab_cadrehov th, h2.header {
   font-size: 12px;
   font-weight: bold;
   text-align: center;
   border-radius: 4px;
   padding: 2px;
   border-radius: 0;
   margin: 0;
   font-size: 1.1em;
   color: #000;
   padding: 10px 5px;
   background-color: #F1F1F1;
}

.tab_spaced {
   border-collapse: separate;
   border-spacing: 3px;
}

.tab_cadre_fixehov th, .tab_cadrehov th {
   background-color: #F8F8F8;
   color: #2E2E2E;
   font-size: 11px;
   border-bottom: 1px solid #EEE;
}
/* to view link color must be the color of the palette
.tab_cadre_fixehov th a, .tab_cadrehov th a {
   color: #2E2E2E;
}
*/
.tab_cadre_fixehov td, .tab_cadrehov td {
   padding: 8px 5px;
}
.tab_cadre td, .tab_cadre_fixe td {
   padding: 5px;
}
.tab_cadre td, .tab_cadre_fixehov td, .tab_cadrehov td {
   border-bottom:1px solid #EEE;
}

/* .tab_cadrehov tr:hover, .tab_cadre_fixehov tr:hover { */
/*    background-color: #FFF4DF; */
/*  } */


/* Table Hover Effects */
.tab_cadrehov th.headHover,
.tab_cadre_fixehov th.headHover{
   background-color:#F3F3F3;
}

.tab_cadrehov td.columnHover,
.tab_cadre_fixehov td.columnHover{
   background-color:#F3F3F3;
}

.tab_cadrehov tr.rowHover,
.tab_cadrehov td.rowHover,
.tab_cadre_fixehov tr.rowHover,
.tab_cadre_fixehov td.rowHover{
   background-color:#F7F7F3;
}



.tab_format {
   padding: 0px;
   width: 100%;
   margin: 0px;
   border: 0px;
   border-collapse:collapse;
}

.tabcompact {
   padding: 0px;
   margin: 0px;
   border: 0px;
   border-collapse:collapse;
}

.tab_format td {
   padding: 1px;
   margin: 0px;
}


.tab_bg_1 {
   background-color: #FFF;
}

.tab_bg_1_2 {
   background-color: #cf9b9b;
}

.tab_bg_2 {
   background-color: #FFF;
}

.tab_bg_2_2 {
   background-color: #cf9b9b;
}

.tab_bg_3 {
   /*background-color: #eeeeee;*/
   background-color: #e7e7e2;
}

.tab_bg_4 {
   background-color: #EBEBEB;
}

.tab_bg_5 {
   background-color: #f2f2f2;
}


.tab_resa {
   border:1px dashed #cccccc;
   background-color: #d7d7d2;
   font-size:10px
}

.tab_resa:hover {
   background-color: #ffffff;
   border:1px dotted #000000;
}

.tab_date {
   white-space: nowrap;
}

.central {
   padding-top: 15px;
   width: 100%;
}

.central table {
   margin-bottom: 5px;
}

.central .tab_cadre_fixehov th, .central .tab_cadrehov th {
   background-color: #F1F0F0;
}

div.rss {
   margin-left: 10px;
}

td.numeric {
   text-align:right;
/*   width:10%;*/
/*   padding-right:4%;*/
}

td.htmltable_upper_separation_cell {
    border-top: dashed 1px #a0a0a0;
}

td.nopadding {
   padding:0;
}


td.subheader {
   background-color: #EEEEEE;
   text-align: center;
   font-weight: bold;
}

td.rotate {
  -moz-transform: rotate(-70.0deg);  /* FF3.5+ */
  -o-transform: rotate(-70.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-70.0deg);  /* Saf3.1+, Chrome */
  -ms-transform:rotate(-70deg); /* IE 9 */
  width: 10%;
  height: 80px;
  <!--[if lte IE 7]>
   filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
  <![endif]-->
  <!--[if lte IE 8]>
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
  <![endif]-->

}

.order_DESC:before {
   content: "\25bc";
   color: #B3B3B3;
   font-size: 0.8em;
   padding-right: 5px;
   vertical-align: 1px;
}

.order_ASC:before {
   content: "\25b2";
   color: #B3B3B3;
   font-size: 0.8em;
   padding-right: 5px;
   vertical-align: 1px;
}

.tab_actors {
   display: table;
}

.actor_title {
   width: 13%;
   float: left;
   font-weight: bold;
   text-align: center;
   padding-top: 30px;
   font-size: 1.1em;
   padding: 3px 5px;
   background-color:#F1F1F1;
}

.actor-bloc {
   width: 29%;
   /*float: left;*/
}

.actor_title, .actor-bloc {
   display: table-cell;
   float: none;
   vertical-align: top;
}

.actor-head {
   background-color: #F1F1F1;
   margin: 0 0 0 5px;
   padding: 4px 0;
   height: 16px;
   font-weight: bold;
   text-align: center;
   font-size: 1.1em;
}

.actor-head .fa {
   padding: 0 .2em;
}

.actor-content {
   margin: 10px 15px;
   padding: 4px 0;
}

.actor_row {
   margin-bottom: 8px;
}

.tab_actors hr {
   border: 0;
}
.add-observer {
   display: block;
}
.actor_single {
   border-top: 1px dashed #AAA;
   padding: 15px 0 8px 0;
   margin-top: 8px;
   background-color: #F5F5F5;
}
.actor_single.first-actor {
   padding-left: 10px;
}

.actor_clear {
   clear: both;
}

/* ################--------------- Pager  ---------------#################### */

.tab_cadre_pager {
   margin: 0 auto;
   text-align:center;
   font-size:10px;
   width:950px;
   border-collapse: collapse;
   margin-top: 15px;
}

.tab_cadre_pager tr,
.tab_cadre_pager td {
   background-color: inherit;
}

#searchcriterias .tab_cadre_fixe {
   margin-top: 10px;
   background-color: #FFF;
   width: 80%;
   box-shadow: 0px 1px 2px 1px #D2D2D2;
   border-radius: 5px;
}
#searchcriterias .tab_bg_1 {
   background-color: inherit;
}

#searchcriterias .switch {
   opacity: .7;
}

#searchcriterias .switch:hover {
   opacity: 1;
}

.reset-search, .reset-search:link {
   color: #ccc!important;
}

.reset-search:hover {
   color: #999;
}

.tab_cadre_pager select, .tab_cadre_pager span, .tab_cadre_pager form {
   font-size:10px;
   margin:0;
}

.tab_cadre_pager input {
   vertical-align:middle;
}

.tab_cadre_pager th {
   font-size: 10px;
   font-weight: bold;
   text-align: center;
}


.navigationheader {
   margin: 10px auto;
}
.navigationheader .big {
   font-size: 16px;
}

.tab_cadre_pager .pager_controls img {
   padding-right: 10px;
   vertical-align: middle;
}



/* ################--------------- Tracking  / Reminder ---------------#################### */


.showplan {
   font-weight: bold;
   text-decoration: none;
   color : #4A8865;
   cursor:pointer;
}


/* ################--------------- User Picture ---------------#################### */
.qtip {
   max-width: 380px !important;
}

.tooltip {
   font-size: 11px !important;
}
.tooltip:contains(img) {
   white-space: nowrap;
   height: 100px !important;
   border:10px solid red;
}

.tooltip_picture_border {
   padding:2px;
   border-radius: 51px;
   border: 5px inset #D0D99D;
   _border: 3px solid #D0D99D;
   width:72px;
   height:72px;
   position: absolute;
}
.tooltip_picture {
   width:71px;
   height:71px;
   border-radius:50px;
}
.tooltip_text {
   margin-left:90px;
   min-height: 85px;
}

.user_picture_border {
   padding:2px;
   border-radius: 6px;
   border: 5px inset #D0D99D;
   width:232px;
   height:232px;
   margin-right:5px;
   background-color: #FFF
}
.user_picture {
   margin: 0 auto;
   width:230px;
   height:230px;
   border-radius: 5px;
}

.user_picture_border_small {
   padding:2px;
   border-radius: 6px;
   border: 3px inset #D0D99D;
   width:72px;
   height:72px;
   margin-right:5px;
   background-color: #FFF
}
.user_picture_small {
   margin: 0 auto;
   width:71px;
   height:71px;
   border-radius: 5px;
}

.user_picture_verysmall {
   margin: 0 auto;
   width:35px;
   height:35px;
   border-radius: 5px;
}
/* ################--------------- Space to replace &nbsp; ---------------#################### */

/* 2 space */
.very_small_space {
   margin-left: 15px;
}

/* 5 spaces */
.small_space {
   margin-left: 38px;
}

/* 10 spaces */
.medium_space {
   margin-left: 120px;
}

/* 20 spaces */
.big_space {
   margin-left:250px;
}



/* ################--------------- Espacement des blocs ---------------#################### */

.spaced {
   margin-bottom: 15px;
}

.firstbloc {
   margin: 10px 0 20px 0;
}



/* ################--------------- Calendrier  / reservation ---------------#################### */

.ui-datepicker-trigger, .slt, #refresh_planning{
   border:none;
   background:none;
   padding: 0;
   font-size: 1.3em!important;
}
.fc button.ui-datepicker-trigger {
   height: auto;
   padding: 0;
}

.fc .fc-toolbar > * > * {
   float: none;
   display: inline-block;
}

.ui-datepicker-trigger .fa {
   padding: 0!important;
}

.calendrier {
   vertical-align:middle;
   /*border: 1px solid #888888;
   background-color:#eeeeee;
   background:  url("../pics/fond_form.png") repeat-x; */
}

.calendrier:hover {
   /*border: 1px inset #888888;
   background-color:#ffffff;*/
   cursor:pointer;
}

.calendrier_mois {
   font-family: Verdana, Arial, Sans, sans-serif;
   font-size: 10px;
}

.calendrier_jour {
   font-family: arial,helvetica,sans-serif;
   font-size: 14px;
   color: black;
}

.calendrier_case1 {
   margin-left: 10px;
   padding: 2px;
   border-radius: 5px;
   margin-top: 2px;
   border: 1px solid #666666;
   background-color: white;
}

.calendrier_case2 {
   margin-left: 10px;
   padding: 2px;
   border-radius: 5px;
   margin-top: 2px;
   border: 1px solid #cccccc;
   background-color: #eeeeee
}

.calendrier_case_white {
   background-color:#ffffff;
}



/* ################--------------- Knowledge FAQ  ---------------#################### */
#contenukb {
   height: 100%;
   width: 600px;
   margin: 0 auto;
}

#contenukb legend {
   font-weight: bold;
}

#contenukb fieldset {
   background-color: #eeeeee;
   border: 1px solid #FFC65D;
   border-radius: 8px;
   padding-bottom:10px;
   width: 600px;
}

#contenukb textarea {
   width:550px;
}

#kbanswer ul {
   padding-left: 15px;
   list-style-type: circle;
}

#kbanswer ol {
   padding-left: 15px;
   list-style-type: decimal;
}


#kbanswer p {
   margin: 1.12em 0
}

#kbanswer h1 {
   font-size: 2em;
   margin: .67em 0
}

#kbanswer h2 {
   font-size: 1.5em;
   margin: .75em 0;
   font-weight: bolder;
}

#kbanswer h3 {
   font-size: 1.17em;
   margin: .83em 0;
   font-weight: bolder;
}

#kbanswer h4 {
   margin: 1.12em 0;
   font-weight: bolder;
}

#kbanswer h5 {
   font-size: .83em;
   margin: 1.5em 0;
   font-weight: bolder;
}

#kbanswer h6 {
   font-size: .75em;
   margin: 1.67em 0;
   font-weight: bolder;
}

#kbanswer h1:target,
#kbanswer h2:target,
#kbanswer h3:target,
#kbanswer h4:target,
#kbanswer h5:target,
#kbanswer h6:target {
  background-color: #fff2a8;
}

#kbanswer h1 > a,
#kbanswer h2 > a,
#kbanswer h3 > a,
#kbanswer h4 > a,
#kbanswer h5 > a,
#kbanswer h6 > a {
   line-height: 1;
   margin-left: -20px;
   padding-right: 4px;
}

#kbanswer h1 svg,
#kbanswer h2 svg,
#kbanswer h3 svg,
#kbanswer h4 svg,
#kbanswer h5 svg,
#kbanswer h6 svg{
   visibility: hidden;
}

#kbanswer h1:hover svg,
#kbanswer h2:hover svg,
#kbanswer h3:hover svg,
#kbanswer h4:hover svg,
#kbanswer h5:hover svg,
#kbanswer h6:hover svg {
   visibility: visible;
}

#kbanswer address {
   font-style: italic;
}

#kbanswer pre {
   font-family: monospace;
   white-space: pre;
}


.tdkb_result {
   vertical-align:top;
   text-align:left;
   width: 33%;
   padding: 3px 20px 3px 25px;
}

.kb {
   text-align:left;
   padding-top:5px;
}

.kb_resume {
   text-align:left;
   font-size: 9px;
   line-height: 10px;
   clear: both;
   padding: 5px 0 10px 25px;
}

.tdkb {
   text-align:left;
   font-size:10px;
   color:#aaaaaa;
}

.baskb {
   position: relative;
   text-align:left;
   font-size:10px;
   color:#aaaaaa;
}

.baskb_right {
   position:absolute;
   right:0;
   margin-right:5px;
}

.code {
   width: 95%;
   border: dotted 2px #ccc;
}

a.knowbase {
   margin-left:8px;
}

a.pubfaq {
   padding-left:8px;
   border-left: 5px solid #c9993C !important;
}

a.pubfaq:hover {
   color: black;
}

a.icon_nav_move img {
   padding: 4px;
   margin: 1px;
   border: 1px solid #aaaaaa;
   background-color: #ffffff;
   border-radius: 5px;
}

a.icon_nav_move:hover img {
   padding: 4px;
   margin: 1px;
   border: 1px solid #999999;
   background-color:#e4e4e4;
   border-radius: 5px;
}

.faqadd_block {
   position: relative;
   display: inline-block;
}

.faqadd_block .display_faq_chkbox {
   display: none;
}

.faqadd_entries {
   background: white;
   border:  1px solid #CCC;
   box-shadow: 0px 1px 2px 1px #D2D2D2;
   position: absolute;
   padding: 5px;
   width: 450px;
   height: 40vh;
   right: -5px;
   z-index: 1000;
   margin-top: 20px;
   border-radius: 2px;
   display: none;
}

.faqadd_block .display_faq_chkbox:checked + .faqadd_entries {
   display: block;
}


.faqadd_entries:before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 17.3px 10px;
    border-color: transparent transparent #CCC transparent;
    top: -18px;
    right: 5px;
    position: absolute;
}

.faqadd_entries:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 18.3px 10px;
    border-color: transparent transparent #ffffff transparent;
    top: -16px;
    right: 5px;
    position: absolute;
}

.faqadd_block_content {
   overflow-x: hidden;
   overflow-y: auto;
   position: absolute;
   top: 40px;
   bottom: 0;
   left: 0;
   right: 0;
}

.faqadd_entries .tab_cadre_fixe {
   width: 100%;
   padding: 5px;
}

.faqadd_entries tr {
   display: block;
}

.main_form .faqadd_entries table.tab_cadre_fixe th:not(.actor-th) {
   display: block;
   text-align: center;
}


/* ################--------------- File upload  ---------------#################### */
.fileupload {
   text-align: center;
   border:1px dashed #cccccc;
   min-height: 65px;
   background-color: #fff;
   border-radius: 5px;
   max-width: 950px;
   margin: .5em auto;
   padding: .5em;
   margin-top: 5px;
}

.fileupload_info {
   margin-bottom: 10px;
}

.upload_rich_text {
   display : none;
}

.draghover {
   background: #FBF8DF;
}


/* ################--------------- planning  ---------------#################### */

#planning_container {
   position: relative;
   padding-left: 310px; /* Same as planning_filter width + a 10px margin */
}

#planning_filter {
   position: absolute;
   top: 0;
   bottom: 0;
   text-align: left;
   left: 0;
   overflow-y: auto;
   width: 300px;
}

#planning_filter .toggle {
   float: right;
   margin: 8px 8px 0 0;
   height: 18px;
   width: 18px;
   display: block;
   background: url(../pics/toggle-left.png) no-repeat;
}

#planning_filter.folded .toggle {
   float: none;
   background: url(../pics/toggle-right.png) no-repeat;
}
#planning_filter.folded {
   width: 18px;
}
#planning_container.folded {
   padding-left: 28px; /* Same as folded planning_filter width + a 10px margin */
}

#planning_filter h3 {
   background: #e6e6e6;
   margin: 2px 0 0 0;
   padding: .5em .5em .5em .7em;
   font-weight: normal;
   line-height: 1.3;
   font-size: 13px;
}

#planning_filter ul.filters {
   border: 0;
   padding: 5px;
}
#planning_filter ul.filters > li {
   clear: both;
   padding: 5px 0 5px 5px;
}

#planning_filter ul.filters > li:nth-child(even) {
   background-color: #F3F3F3;
}

#planning_filter ul.filters > li .form-group-checkbox {
   margin-right: 6px;
}
#planning_filter ul.filters > li .actor_icon {
   padding-bottom: 2px;
   vertical-align: middle;
}

#planning_filter ul.filters > li label {
   padding-left: 4px;
   line-height: 16px;
   width: 200px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block;
   white-space: nowrap;
}

#planning_filter ul.filters > li .filter-icon,
#planning_filter ul.filters > li .sp-replacer {
   float: right;
   padding: 0;
   border: none;
}

#planning_filter ul.filters > li .sp-replacer .sp-preview {
   margin-right: 0;
   border: none;
}

#planning_filter ul.filters > li .sp-replacer .sp-dd {
   display: none;
}

#planning_filter ul.filters > li.group_users .toggle {
   width:14px;
   height:14px;
   background: url(../pics/expand.png) no-repeat;
   display: inline-block;
   margin: 0 4px 2px 0;
   vertical-align: middle;
   float: right;
}

#planning_filter ul.filters > li.group_users.expanded .toggle {
   background: url(../pics/collapse.png) no-repeat;
}

#planning_filter ul.filters > li.group_users ul.group_listofusers {
   border-left: 1px dashed #D4D4D4;
   margin: 6px 0 0 6px;
   padding: 0;
   display: none;
}

#planning_filter ul.filters > li.group_users.expanded ul.group_listofusers {
   display: block;
}

#planning_filter .planning_link {
   text-align: center;
   display: block;
}

#planning_filter .planning_add_filter {
   float: right;
   margin-right: 3px;
}

#planning_filter .filter_option {
   float: right;
   width: 12px;
   height: 12px;
   margin: 3px 2px;
   display: inline-block;
   position: relative;
   left:0;
}

#planning_filter .filter_option > img {
   z-index: 1;
}

#planning_filter .filter_option ul {
   display: none;
   position: absolute;
   background: #FFF repeat-x top left;
   box-shadow: 0px 1px 1px #7F7979;
   padding: 5px;
   z-index: 2;
   left:auto;
   right:0;
   top: 15px;
   margin-right:-10px;
   width: 140px;
   text-align: right;
}

#planning_filter .filter_option ul li {
   padding: 5px;
   cursor: pointer;
   font-size: 13px;
}

#planning_filter .filter_option ul li:hover {
   background-color: #EAEAEA;
}

#planning_filter .filter_option ul li a {
   color: inherit;
   font-size: 13px;
   font-weight: normal;
}

.planning_on_central .ui-widget-content {
   border: none;
}

.planning_on_central .fc-head {
   display: none;
}

.planning_on_central .fc-scroller {
   height: auto!important;
   max-height: 400px;
}

#planning {
   width:auto;
   overflow:hidden;
}

#planning .fc-toolbar h2 {
   font-size: 1.2em;
}
#planning .fc-toolbar h2 .ui-datepicker-trigger{
   margin-left: 4px;
}

#planning .event_past .ui-widget-content,
#planning .event_past .ui-widget-content a {
   color: #CCCCCC;
}
#planning .event_past.event_todo .ui-widget-content,
#planning .event_past.event_todo .ui-widget-content a {
   color: #FF0000;
}

#planning .event_today.event_todo .ui-widget-content,
#planning .event_today.event_todo .ui-widget-content a {
   color: #FFA100;
}


#planning .fc-event {
   font-weight: normal;
}

#planning .fc-event .fc-content {
   margin-right: 8px;
}


#planning .fc-event .fc-time {
   overflow: hidden;
}
#planning .fc-event .fc-title {
   font-weight: bold;
   white-space: nowrap;
   overflow: hidden;
   text-overflow : ellipsis;
}

#planning .fc-event .content {
   font-weight: normal;
   padding: 0 7px 0 2px;
   overflow: hidden;
   text-overflow : ellipsis;
}

#planning .fc-event .content .event-description {
   border-top: 1px solid rgba(0, 0, 0, 0.2);
   margin-top: 2px;
   padding-top: 2px;
}
#planning .fc-event .content .event-description p {
   margin: 0;
}

#planning .fc-event .event_type {
   position: absolute;
   width: 7px;
   bottom: 0;
   top: 0;
   right: 0;
}

#planning .fc-list-item-title .event_type {
   height: 12px;
   width: 6px;
   margin-right: 3px;
   display: inline-block
}

#planning .event_past .fc-list-item-title .event_type {
   opacity: .5;
}

#planning .planning-select-helper {
   border: 2px solid #3B8CBE;
   background-color: rgba(59, 140, 190, .5);
}

#planning .fc-day-grid-event .fc-resizer {
   width: 10px;
}

#planning .fc-time-grid-event .fc-resizer {
   height: 10px;
}

#planning .fc-divider {
   border:1px dashed #cccccc;
}

/* for checkavailable */

.planning {
   text-align:center;
   border:1px dashed #cccccc;
   background-color: #d7d7d2;
   font-size:9px;
}

.planning:hover {
   border: 1px solid #999999;
   background-color: white;
}

.available {
   background-color: green;
}

.notavailable {
   background-color: red;
}

.partialavailableend {
   background-image: -webkit-linear-gradient(left, red 50%, green  0%);
   background-image: -moz-linear-gradient(left, red 50%, green  0%);
   background-image: -ms-linear-gradient(left, red 50%, green  0%);
   background-image: -o-linear-gradient(left, red 50%, green  0%);
   background-image: linear-gradient(left, red 50%, green  0%);
}

.partialavailablebegin {
   background-image: -webkit-linear-gradient(left, green 50%, red  0%);
   background-image: -moz-linear-gradient(left, green 50%, red  0%);
   background-image: -ms-linear-gradient(left, green 50%, red  0%);
   background-image: -o-linear-gradient(left, green 50%, red  0%);
   background-image: linear-gradient(left, green 50%, red  0%);
}

/* ################--------------- Menu navigation  ---------------#################### */

#menu_navigate {
   margin: auto;
   z-index:1;
   font-size: 10px;
   width:900px;
}

#menu_navigate li {
   margin-left:2px;
   display:block;
   float:left;
   padding:2px;
}

#menu_navigate li.info {
   margin-left:2px;
   display:block;
   float:left;
   font-size: 12px;
   padding:2px;
}

#tabcontent {
   width:950px;
   text-align:center;
   margin: 0 auto;
}

/* ################--------------- Notepad  ---------------#################### */

.boxnote {
   margin: 0 auto;
   width: 950px;
   text-align: left;
   border-radius:10px;
   background: #e7e7e2;
   margin-bottom: 5px;
   position:relative;
   overflow: auto;
   font-size: 11px;
}



.boxnoteleft {
   float: left;
   width: 10%;
   min-height: 40px;
   height: 100%;
   padding: 4px;
}
.boxnotecontent {
   float: left;
   padding: 1px;
   padding: 5px 0 5px 0;
   width: 75%;
/*   top:  -60px;
   left: 110px;*/
/*    width: 300px; */
}
.boxnoteright {
   float: right;
/*   top:  0px;
   left: 0px;*/
   width: 10%;
   min-height: 40px;
   padding: 1px;
   vertical-align: middle;
}

.boxnotefloatright {
   float: right;
   position: relative;
   padding-left: 20px;
   padding-bottom:  5px;
}
.boxnotetext {
   padding: 5px;
}

.bytech {
   background: #f2f2f2;
}

.byuser {
   background: #e7e7e2;
}

/* ################--------------- box (redirect and other)  ---------------#################### */
.ui-widget-content.message_after_redirect {
   font-family:"Myriad Pro","Myriad Web","Tahoma","Helvetica","Arial",sans-serif;
   color:#393939;
   font-size: 11px;
   background: #DFDFDF;
}

.message_after_redirect h3 {
   font-size:11px;
   font-weight:bold;
   zoom:1;
}

/* ##### ERROR messages ##### */
.ui-widget-content.message_after_redirect.err_msg {
   background-color: #ff9999;
}

.message_after_redirect.err_msg div.ui-widget-header {
   color: white;
   background: rgba(255, 0, 0, .8);
   border-color: rgba(255, 0, 0, 0.8);
}

/* ##### WARNING messages ##### */
.ui-widget-content.message_after_redirect.warn_msg {
   background-color: #ffdb99;
}

.message_after_redirect.warn_msg div.ui-widget-header {
   color: white;
   background: rgba(255, 165, 0, .8);
   border-color: rgba(255, 165, 0, 0.8);
}

/* ##### INFO messages ##### */
.message_after_redirect.info_msg div.ui-widget-header {
   color: white;
   background: #A9A9A9;
   border-color: #A9A9A9;
}

/* ################--------------- Login Null Header  ---------------#################### */

#firstboxlogin {
   width: 100%;
   min-height: 100%;
   min-height: 100vh; /* double min-height, some old browser don't have vh units support*/
}

#logo_login {
   padding: 80px 0 0;
   margin: 0 auto 0;
   width: 100%;
   height: 76px;
}

#display-login,
#text-login {
   width: 100%;
   margin: 0 auto;
   padding: 20px 20%;
   font-size: 13px;
   text-align: center;
   overflow-x: hidden;
   overflow-y: auto;
   box-sizing: border-box;
}

#boxlogin {
   padding-top: 10px;
   bottom: 0;
   width: 100%;
}


#boxlogin .login_input {
   position: relative;
   width:13em;
   margin: 15px auto 5px;
   width: 240px;
}

#boxlogin input[type=text],
#boxlogin input[type=password] {
   width: 100%;
   height: 30px;
   display: block;
   border: none;
   padding: 3px 0 3px 40px;
   font-size: 1.2em;
   border-radius: 4px;
   box-sizing: border-box;
}

#boxlogin input[type=text]:focus,
#boxlogin input[type=password]:focus{
   border-color:#FFA500;
   background-color: #fff;
   box-shadow:0 0 3px #FFA500;
}

#boxlogin label {
   color: #FFF;
   font-size: 1.2em;
}

#boxlogin input:-webkit-autofill {
   box-shadow: 0 0 0px 1000px white inset;
}

#boxlogin input:-webkit-autofill:focus {
   box-shadow: 0 0 0px 1000px white inset;
}

#boxlogin .login_img {
   position: absolute;
   content:'';
   width: 24px;
   height: 24px;
   left: 5px;
   top: 5px;
}

#boxlogin #login_name ~ .login_img {
   background: url(../pics/login_user.png) no-repeat 3% 50%;
}
#boxlogin #login_password ~ .login_img {
   background: url(../pics/login_password.png) no-repeat 3% 50%;
}

#boxlogin input.submit {
   margin-top: 20px;
   width: 100%;
   height: 30px;
   font-size: 1.3em;
}

#boxlogin #forget {
   margin-top: 50px;
   color: #FFF;
   width: 100%;
   display: block;
   text-align: center;
}

#box-faq {
   padding-top:30px;
   text-align:center;
   margin:auto;
}

#box-faq a{
   color: #CFCFCF;
}

.sous_logo {
   font-family: arial;
   font-size: 9px;
   color: #eeeeee;
   text-decoration: none;
}

.error {
   color: red;
   margin-top:20px;
   text-align:center;
}
.error a, .error a:link, .ui-widget-content .error a {
   font-weight: normal;
   color: red;
   font-size: inherit;
}
.error a:hover {
   text-decoration: underline;
}

#footer-login {
   position: absolute;
   right: 10px;
   bottom: 0px;
   font-size : 10px;
   font-family: Verdana,Arial,Helvetica,sans-serif;
   font-weight: bold;
}

#footer-login.home {
   bottom: 15px;
}
#footer-login.home a {
   color: #FFF;
}



/* ################--------------- Header / menu  ---------------#################### */

#header {
   /*background: #f1f4e3 url("../pics/fd_nav1.png") 0 0 repeat-x;*/
   /* According to http://caniuse.com/#search=linear-gradient, we need prefix only for android*/
  /* background: -webkit-linear-gradient(top,
                  #E1D39E 0%,
                  #E1D39E 20%,
                  #c0cc7b 21%,
                  #c0cc7b 43%,
                  #d0d99d 43%,
                  #d0d99d 63%,
                  #f1f4e3 65%,
                  #f1f4e3 99%);*/ /* Chrome10+,Safari5.1+ */
   /*background: linear-gradient(to bottom,
                  #E1D39E 0%,
                  #E1D39E 20%,
                  #c0cc7b 21%,
                  #c0cc7b 43%,
                  #d0d99d 43%,
                  #d0d99d 63%,
                  #f1f4e3 65%,
                  #f1f4e3 99%);*/ /* W3C */
   height: 96px;
}

#header_top {
   width: 100%;
   height: 20px;
   padding: 10px 0;
}

#c_preference {
   height: 20px;
   text-align: right;
   margin-right: 5px;
   top: 4px;
   font-size: 0.9em;
   display: inline-block;
   float: right;
}

#c_preference a.fa {
   font-size: 1.8em;
   color: white;
}
#c_preference a.fa:hover {
   text-decoration: none;
   color: #ccc;
}

#c_preference ul {
   list-style: none;
}

#c_preference ul li {
   float: right;
   margin: 0 10px;
}

#c_preference a.debugon,
#c_preference a.debugon:hover {
   color: #ff0000!important;
}


#c_preference a {
   text-decoration: none;
   font-size: 0.9em;
}

#c_preference a:hover{
   text-decoration: underline;
}

#c_preference .select2-choice {
   color: #3a5693;
}

#c_preference p {
   margin: 0;
}

#c_recherche {
   position: relative;
}

#c_recherche :after {
   width: 16px;
   height: 16px;
   content: '';
   display: block;
   background-image: url(../pics/search.png);
   position: absolute;
   top: 4px;
   right: 4px;
}

#c_recherche form #champRecherche input {
   border: none;
   height: 22px;
   width: 150px;
   padding: 0 3px;
   font-family: 'Bitstream Vera Sans', Verdana, Tahoma, 'Sans serif';
   font-size: 12px;
   border-radius: 3px;
   position: relative;
}

#myname {
   font-size: 11px;
   font-family: 'Bitstream Vera Sans', Verdana, Tahoma, 'Sans serif';
   margin: 0 0 .5em .5em;
   display: inline-block;
   vertical-align: bottom;
   font-weight: bold;
}

#language_link > a, #language_link > span {
   display: inline-block;
   padding: .5em 0;
   font-weight: bold;
}

#c_menu {
   height: 30px;
   text-align: center;
   padding-left: 95px;
}

#c_menu ul#menu {
   height: 30px;
   list-style: none;
   font-size: 13px;
   box-sizing: border-box;
   margin: 0 auto;
   display: inline-block;
}

ul#menu a.itemP, ul#menu a.itemP1 {
   display: block;
   text-align: center;
   text-decoration: none;
   font-size: 13px;
   white-space: nowrap;
   padding:7px 1em;
}

ul#menu ul.ssmenu {
   background: rgba(255, 255, 255, 0.9);
   display: none;
   box-shadow: 0px 2px 2px 1px #BCB6B3;
}

ul#menu ul li {
   list-style: none;
   text-align: left;
   line-height: 20px;
   font-size: 0.9em;
}

ul#menu ul li:last-child {
   border-bottom: 0px;
}

ul#menu ul li a {
   text-decoration: none;
   display: block;
   padding: 5px 5px 5px 5px;
}


#menu_all_button {
   float: right;
   width: 24px;
   height: 24px;
   margin-right: 20px;
   display: inline-block;
   margin-top: 2px;
   background: url("../pics/menu_all.png");
}

/* hide menu on small screen */
@media screen and (max-width: 1055px) {
   #c_menu ul#menu,
   #language_link,
   #help_link,
   #myname {
      display: none;
   }
}

@media screen and (max-width: 490px) {

   #show_all_menu .top {
      display: block;
      float: left;
      height: 370px;
      border-bottom: 2px solid #DDD;
      margin-bottom: 15px;
   }
}

.button-icon:hover {
   opacity: .5;
}

ul#menu > li {
   display: inline-block;
   min-width: 135px;
   height: 30px;
}

ul#menu ul.ssmenu {
   position: absolute;
   min-width: 135px;
   z-index: 200;
}

#header #c_logo {
   position: absolute;
   z-index: 1000;
   width: 100px;
   height: 55px;
   float: left;
   background: url("../pics/fd_logo.png") 0 0 repeat-x;
}

#header #c_logo a {
   display: block;
   width: 100%;
   height: 100%;
   text-decoration: none;
}

#c_ssmenu1 {
   background: #D0D99D;
   height: 24px;
   clear: both;
   font-size: 0.8em;
}

#c_ssmenu1 ul {
   position: relative;
   top: 4px;
   left: 0px;
   list-style: none;
}

#c_ssmenu1 ul li {
   float: left;
   padding: 0 10px;
}

#c_ssmenu1 ul li a {
   text-decoration: none;
   color: #666;
}

#c_ssmenu1 ul li a:hover {
   text-decoration: underline;
}

#c_ssmenu2 {
   min-height: 34px;
   padding: 3px 0;
   box-sizing: border-box;
   background-color: #FFF;
}

#c_ssmenu2 ul {
   left: 0px;
   list-style: none;
}

#c_ssmenu2 ul li {
   float: left;
   padding: 5px 10px 0 10px;
}

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

#c_ssmenu2  a.here {
   font-size:14px;
}

.breadcrumb_item {
   height: 23px;
   position: relative;
}

.profile-selector {
   float: right !important;
   height: 28px;
   line-height: 24px;
   z-index: 40;
   position: relative;
}

.breadcrumb_item:before {
   left: 100%;
   top: 50%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   border-left-color: #FFF;
   border-width: 17px;
   margin-top: -17px;
   z-index: 20;
}

.breadcrumb_item:after {
   left: 100%;
   top: 50%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   border-left-color: #FFF;
   border-width: 14px;
   margin-top: -14px;
   z-index: 20;
   margin-left: -1px;
}

.breadcrumb_item:not(:nth-of-type(1)) {
   padding-left: 25px !important;
}

.breadcrumb_item:nth-of-type(1) {
   background-color: #F2F2F2;
}
.breadcrumb_item:nth-of-type(1):after {
   border-left-color: #F2F2F2;
}
.breadcrumb_item:nth-of-type(2) {
   background-color: #F2F2F2;
}
.breadcrumb_item:nth-of-type(2):after {
   border-left-color: #F2F2F2;
}
.breadcrumb_item:nth-of-type(3) {
   background-color: #FEC95C;
}
.breadcrumb_item:nth-of-type(3):after {
   border-left-color: #FEC95C;
}

.icons_block {
   margin-left: 10px;
   height: 28px;
   float: inherit !important;
   box-sizing: border-box;
   display: inline-block;
   position: relative;
   z-index: 40;
}

.icons_block span {
   padding: 0 8px;
   min-width: 20px;
   display: inline-block;
   line-height: 23px;
}

.icons_block a > img,
.icons_block i.fa {
   font-size: 1.7em;
   vertical-align: top;
}

#show_all_menu {
   font-size: 11px;
   text-align: left;
   min-width: 150px;
   column-count: 3;
   -moz-column-count:3;
}

#show_all_menu dl {
   padding-bottom: .5em;
   break-inside: avoid-column; /* standard */
   page-break-inside: avoid; /* Firefox */
   -webkit-column-break-inside: avoid; /* other webkit compliant */
}

#show_all_menu a {
   display: block;
   padding: .2em .5em;
}

#show_all_menu dt a {
   color:white;
}

#show_all_menu dt a:hover {
   background: #8BAADA;
}

#show_all_menu a:hover {
   background-color: #3A5693;
   color: #C7DBF5;
}

.iframe {
    width: 100%;
    height: 100%;
    margin: 0;
    border-width: 0px;
}

.iframe.hidden {
   height: 0;
   width: 0;
}

/* ################--------------- Footer  ---------------#################### */

#footer {
   font-size: 9px;
   color: #000;
   background-color: #E2E1DE;
   padding: 6px;
   height: 18px;
   padding: 5px;
}

#footer > table {
   width: 100%;
}

a.copyright {
   font-size: 9px;
   color :#000;
}



/* ################--------------- DB Slave---------------#################### */
#dbslave-float {
   top: 0px;
   left: 300px;
   position: absolute;
   z-index: 100;
}

#dbslave-float a {
   border-top: 1px solid #cecece;
   border-bottom: 2px solid #4a4a4a;
   border-left: 1px solid #cecece;
   border-right: 1px solid #cecece;
   text-decoration: none;
   text-align: center;
   margin: 0;
   padding: 1px .5em;
   font-family: helvetica,arial,sans-serif;
   font-size: 10px;
   font-weight: bold;
   background-color: #fff;
   color:blue;
}



/* ################--------------- Debug  ---------------#################### */
#debug-float {
   top: 0px;
   left: 80px;
   position: absolute;
   z-index: 100;
}

#maintenance-float {
   top: 0px;
   left: 280px;
   position: absolute;
   z-index: 100;
}


#debug-float a, #maintenance-float a {
   border-top: 1px solid #cecece;
   border-bottom: 2px solid #4a4a4a;
   border-left: 1px solid #cecece;
   border-right: 1px solid #cecece;
   text-decoration: none;
   text-align: center;
   margin: 0;
   padding: 1px .5em;
   font-family: helvetica,arial,sans-serif;
   font-size: 10px;
   font-weight: bold;
   background-color: #fff;
   color:red;
}

#debug-float a:hover, #maintenance-float a:hover {
   background-color: #fc3;
   border-bottom: 2px solid #36f;
}

#debugajax {
   margin: auto;
   text-align:center;
}

.debug .ui-tabs {
   border: 10px solid #dadada !important;
}

.debug h1, #debugajax h1 {
   font-size:18px;
   text-align:center;
   /*background-color:#efefe7;*/
   padding: 5px;
}

.debug h2, #debugajax h2 {
   font-size:14px;
   padding-left: 10px;
   border-left: 4px solid #FFC65D;
   border-bottom: 2px solid #FFC65D;
}

.debug table, #debugajax table {
   margin:0;
}

.debug .ui-tabs .close {
   right: 14px;
   position: absolute;
   width: 20px;
   top: 1px;
}

.debug .ui-tabs .tab_cadre {
   width: 100%;
}

.debug .ui-tabs .tab_cadre td:nth-child(2) {
   word-break: break-all;
}

#see_debug, #backtotop {
   position: fixed;
   bottom: 35px;
   right: 10px;
   cursor: pointer;
   color: white;
   z-index: 99; /* Behind debug panel */
}

#c_preference a.fa:hover,
#see_debug:hover, #backtotop:hover {
   opacity: .8;
}

#see_debug.wbttop {
   right: 40px;
}

#see_debug.on a:hover {
   color: #ff0000;
}

.debug .ui-tabs {
   display: none;
   position: fixed !important;
   left: 0 !important;
   bottom: 0 !important;
   top: inherit !important;
   height: 300px !important;
   z-index: 100 !important;
   width: 98%;
}

.debug_ajax .ui-tabs {
   position: relative !important;
   height: inherit !important;
   display: block;
}

#page .debug_ajax div.ui-tabs {
   width: 98%;
}


.debug_ajax .see_debug{
   display: none;
}

.debug .ui-tabs-panel {
   height: 273px;
   overflow: auto;
}

.debug_ajax .ui-tabs .ui-tabs-panel {
   height: auto;
}

.debug .tab_cadre {
   box-shadow: none;
}

/* Restore default behavior : drop user agent CSS*/
:focus {
  outline-width: 0;
}

.nostyle:focus {
  outline-width: 5px;
}

/* Timeline */

.timeline_box {
   text-align: left;
   padding: 4px 8px;
   margin-top: -10px;
   font-family: 'Bitstream Vera Sans', Verdana, Tahoma, 'Sans serif';
}

.timeline_box .break {
   clear: both;
}

.timeline_box h2 {
   font-size: 16px;
}

.timeline_box textarea {
   resize: vertical;
   width: 97%;
}

/** FORM **/

.timeline_form {
   width: 100%;
   padding-left: 4px;
}

.timeline_choices h2 {
   display: inline-block;
   margin: 1em 1em 0 0;
}
.timeline_choices li {
   display: inline-block;
   min-width: 90px;
   text-align: center;
   padding: .5em .5em;
   margin-right: 3%;
   cursor: pointer;
   font-weight: bold;
}

.timeline_choices li i {
   margin-right: 1em;
   font-size: 1.2em;
   vertical-align: bottom;
}

.timeline_choices li:before {
   margin-right: 1em;
   font-weight: normal;
}

.timeline_choices li:hover {
   box-shadow: 0px 1px 1px #999;
 }

.timeline_choices li.followup {
   background-color:#E0E0E0;
   color:#535353;
}
.timeline_choices li.task {
   background-color: #FEDA90;
   color: #535353;
}
.timeline_choices li.document {
   background-color:#80CEAD;
   color:#3A5D4E;
}
.timeline_choices li.solution {
   background-color:#9FD6ED;
   color:#425B64;
}

.timeline_box .tab_cadre_fixe {
   width: 930px;
}


/** TIMELINE **/

.timeline_history {
   border-top: 1px dashed #3C5874;
   overflow: hidden;
   font-size: 12px; /*fix jqueryui ui-widget size*/
   width: 100%;
}

.timeline_history > h2 {
   float: left;
}

.timeline_history .filter_timeline {
   opacity: 0.2;
   text-align: right;
   margin-top: .2em;
}
.timeline_history .filter_timeline > * {
   vertical-align: middle;
}
.timeline_history .filter_timeline:hover {
   opacity: 1;
}

.timeline_history .filter_timeline {
   float: right;
}

.timeline_history .filter_timeline h3,
.timeline_history .filter_timeline ul,
.timeline_history .filter_timeline ul li {
   display: inline-block;
}
.timeline_history .filter_timeline h3 {
   font-weight: bold;
   font-size: 1em;
   margin: 0 .5em 0 0;
   padding: 0;
}

.timeline_history .filter_timeline a {
   font-size: 1.5em;
   display: inline-block;
   padding: 0 .2em;
}

.filter_timeline a.h_active {
   color: green!important;
}

.timeline_history .h_item {
   clear: both;
   padding-top: 8px;
   border-top: 1px dashed #D2D2D2;
}

.timeline_history .h_hidden {
   display: none;
}

.timeline_history .h_info {
   float: left;
   width: 25%;
   max-width: 140px;
}
.timeline_history .right .h_info {
   float: right;
}


.timeline_history .h_user,
.timeline_history .h_date {
   background-repeat: no-repeat;
   padding-left: 24px;
   padding-top: 1px;
   text-transform: capitalize;
   text-align: center;
}

.timeline_history .h_date i {
   font-size: 1.8em;
   margin-right: .3em;
   opacity: .7;
   vertical-align: -15%;
}

.timeline_history .h_date {
   white-space: nowrap;
   margin-bottom: 10px;
   text-align: left;
   line-height: 20px;
   padding-left: 0!important;
}

 .timeline_history .h_user .h_user_name {
   display: inline-block;
   margin-bottom: 5px;
   vertical-align: middle;
   width: 100%;
   text-align: center;
   margin-top: 5px;
}

.timeline_history .h_user a:hover {
   text-decoration: underline;
}

.timeline_history .h_user .tooltip_picture_border {
   padding: 2px;
   border-radius: 50%;
   border: 3px inset #E7E7E7;
   _border: 3px solid #E7E7E7;
   width:51px;
   height:51px;
   position: relative;
   margin: 0 auto;
}

.timeline_history .h_user .user_picture {
   width: 51px;
   height: 51px;
   border-radius: 50%;
}

.timeline_history .users_id_tech img {
   vertical-align: middle;
}

.timeline_history .left .h_user,
.timeline_history .left .h_date,
.timeline_history .middle .h_user,
.timeline_history .middle .h_date {
   padding-left: 24px;
   padding-right: 0;
   padding-top: 2px;
}
.timeline_history .left .h_date,
.timeline_history .middle .h_date {
   margin: 0 auto;
}

.timeline_history .h_user,
.timeline_history .middle .h_user,
.timeline_history .left .h_user {
   padding-right: 0;
   padding-left: 0;
   padding-top: 0;
}

.timeline_history img.group_assign {
   vertical-align: bottom;
}

.timeline_history .h_content {
   max-width:50%;
   min-width: 200px;
   padding: 5px 5px 5px 8px;
   margin-bottom: 10px;
   min-height: 70px;
   position: relative;
   margin-right: 0;
   margin-left: 160px;
   word-wrap: break-word;
   white-space: pre-wrap;
}

.timeline_history .right .h_content {
   margin-left: 0;
   margin-right: 20px;
   float: right;
   text-align: left;
}

.timeline_history .middle .h_content {
   max-width: inherit;
   width: 69%;
}

.timeline_history .h_content:after, .timeline_history .h_content:before {
   right: 100%;
   top: 53px;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
}

.timeline_history .h_content:after {
   border-width: 8px;
   margin-top: -15px;
   border-top-color: transparent !important;
   border-bottom-color: transparent !important;
}


.timeline_history .right .h_content:after,
.timeline_history .right .h_content:before {
   left: 100%;
}

.timeline_history .left .h_content:after {
   border-left-color: transparent !important;
}
.timeline_history .left .h_content:before {
   border-left-color: transparent !important;
}
.timeline_history .right .h_content:after {
   border-right-color: transparent !important;
}
.timeline_history .right .h_content:before {
   border-right-color: transparent !important;
}

.timeline_history .TicketFollowup:after            { border-color: #E0E0E0;}
.timeline_history .TicketTask:after                { border-color: #FEDA90;}
.timeline_history .Solution:after                  { border-color: #9FD6ED;}
.timeline_history .TicketValidation.status_3:after { border-color: #A1D7A2;}
.timeline_history .TicketValidation:after          { border-color: #FFFFFF;}
.timeline_history .TicketValidation.status_4:after { border-color: #D3A4A4;}

.timeline_history .right .h_content p {
   margin: 2px 0 0;
}

.timeline_history .private {
   width: 30px;
   float: right;
   padding-top: 18px;
   background: url(../pics/timeline/private.png) no-repeat center top;
   color: #A2A2A2;
   font-size: .75em;
   text-align: center;
   white-space: nowrap;
}
.timeline_history .right .private {
   float: left;
}

.timeline_history .left .h_content.timeline_active {
   border-right: 8px solid #3C5874;
}
.timeline_history .right .h_content.timeline_active {
   border-left: 8px solid #3C5874;
}

.timeline_history .h_content.edited {
   max-width: inherit;
   text-align: center;
}

.timeline_history .h_content.edited .tab_cadre_fixe {
   width: 100%;
   margin: 0;
}

.timeline_history .h_content .edit_item_content {
   display: none;
   border: 1px dotted #C0C0C0;
}
.timeline_history .h_content .cancel_edit_item_content {
   display: none;
   background-image: url(../pics/close.png);
   width: 16px;
   height: 16px;
   cursor: pointer;
   opacity: .5;
   position: absolute;
   top: 12px;
   right: 12px;
}
.timeline_history .h_content .cancel_edit_item_content:hover {
   opacity: 1;
}

.timeline_history .h_content.TicketFollowup {
   background-color: #E0E0E0;
   color: #535353;
   background-image: url(../pics/timeline/followup.png);
   background-repeat: no-repeat;
}

.timeline_history .h_content.TicketTask {
   background-color: #FEDA90;
   color: #38301F;
   background-image: url(../pics/timeline/task.png);
   background-repeat: no-repeat;
}

.timeline_history .h_content.Solution {
   background-color: #9FD6ED;
   color: #425B64;
   background-image: url(../pics/timeline/solution.png);
   background-repeat: no-repeat;
}

.timeline_history .h_content.Document_Item,
.timeline_history .h_content.Assign {
   border: none;
   box-shadow:none;
   margin-bottom: 0;
   padding: 0;
}

.timeline_history .h_content.TicketContent {
   background-color: #B2E0B6;
   color: #093806;
   background-repeat: no-repeat;
}
.timeline_history .h_content.TicketContent .ticket_title {
   font-weight: bold;
   font-size: 1.2em;
   margin-bottom: 5px;
}

.timeline_history .h_content.TicketContent img {
   max-width: 100%;
}


.timeline_history span.buttons {
   opacity: 0.1;
   vertical-align: middle;
}
.timeline_history span.buttons:hover {
   opacity: 1;
}

.edit_document,
.delete_document {
   font-size: 1.5em!important;
   margin-left: .5em;
}


.timeline_history .timeline_img_preview img {
   width: 100px;
   border: 3px solid #4A8865;
   border-radius: 3px;
}
.timeline_history a:hover .timeline_img_preview img {
   border: 3px solid black;
}

.timeline_history .h_content.TicketValidation {
   background-color: #FFFFFF;
   border-color: #BECADD;
   color: #030F21;
   padding: 5px 5px 5px 8px;
}

.timeline_history .h_content.TicketValidation.status_3 {
   background-color: #A1D7A2;
   border-color: #385139;
}
.timeline_history .h_content.TicketValidation.status_4 {
   background-color: #D3A4A4;
   border-color: #5E3232;
}

.timeline_history .h_content img.h_requesttype {
   float: right;
   height: 20px;
}

.timeline_history .h_content .edit_item {
   display: block;
   float: right;
   opacity: .5;
   font-size: 1.5em;
}

.timeline_history .h_content .edit_item:hover {
   opacity: 1;
   cursor: pointer;
}

.timeline_history .h_content .long_text {
   max-height: 350px;
   position: relative;
   overflow: hidden;
}

.timeline_history .h_content .read_more {
   position: absolute;
   bottom: 0; left: 0;
   width: 100%;
   text-align: center;
   margin: 0; padding: 30px 0;
}

.timeline_history .h_content .read_more a {
   bottom: 5px;
   position: absolute;
}

.timeline_history .h_content.TicketFollowup .read_more {
   background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(241,244,227,1) 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(241,244,227,1))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(241,244,227,1) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(241,244,227,1) 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(241,244,227,1) 100%); /* IE10+ */
   background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(241,244,227,1) 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f1f4e3',GradientType=0 ); /* IE6-9 */
}
.timeline_history .h_content.TicketTask .read_more {
   background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(240,228,181,1) 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(240,228,181,1))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(240,228,181,1) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(240,228,181,1) 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(240,228,181,1) 100%); /* IE10+ */
   background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(240,228,181,1) 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f0e4b5',GradientType=0 ); /* IE6-9 */
}
.timeline_history .h_content.Solution .read_more {
   background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(233,241,255,1) 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(233,241,255,1))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(233,241,255,1) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(233,241,255,1) 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(233,241,255,1) 100%); /* IE10+ */
   background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(233,241,255,1) 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#e9f1ff',GradientType=0 ); /* IE6-9 */
}

.timeline_history .b_right {
   margin-right: 3px;
   font-style : italic;
   color: #7E7E7E;
   text-align: right;
   bottom: 2px;
}

.timeline_history .b_right .actiontime {
   padding-left: 15px;
   background-image: url(../pics/timeline/actiontime.png);
   background-repeat: no-repeat;
   margin-right: 6px;
}

.timeline_history .state {
   display: inline-block;
   width: 20px;
   height: 20px;
   margin-right: 3px;
   background-repeat: no-repeat;
   vertical-align: middle;
}

.timeline_history .state.state_0 {
   background-image: url(../pics/timeline/information.png);
}
.timeline_history .state.state_1 {
   cursor: pointer;
   background-image: url(../pics/timeline/todo.png);
}
.timeline_history .state.state_2 {
   cursor: pointer;
   background-image: url(../pics/timeline/done.png);
}

.timeline_history .b_right .planification {
   padding-left: 17px;
   background-image: url(../pics/timeline/planification.png);
   background-repeat: no-repeat;
}


.timeline_history .approbation_separator {
   margin-bottom: 55px;
}

.assign_la {
   float: left;
   white-space: nowrap;
   margin-top: 4px;
}

.displayed_content a .fa {
   font-size: 1.5em;
}


.x-split-button {
  position: relative;
  width: 250px;
  left: 40%;
  word-wrap: normal;
  white-space: normal;
}

.x-button {
   position: relative;
   margin: 0;
   float: left;
   outline: none;
   padding: 5px;
   cursor:pointer;
   font: bold 12px Arial, Helvetica;
   color: #8f5a0a;
   background-color: #FEC95C;
   border: none;
   border-radius: 0;
}

.x-button:hover {
  cursor: pointer;
   background-color: #fddb6f;
   box-shadow: 0px 1px 1px #999;
}

.x-button.x-button-main {
   width: 100px;
   height: 26px;
}

.x-button.x-button-drop {
   border-left: 0;
   width: 15px;
   height: 16px;

   background-repeat: no-repeat;
   background-position: center;
}

.x-button.x-button-drop:after {
   content: '\25BC';
}
.open .x-button.x-button-drop:after {
   content: '\25B2';
}

.x-button.x-button-drop.new     { background-image: url(../pics/new.png); }
.x-button-drop.new:after        { content: ' ' !important; }
.x-button.x-button-drop.assign  { background-image: url(../pics/assign.png); }
.x-button-drop.assign:after     { content: ' ' !important; }
.x-button.x-button-drop.plan    { background-image: url(../pics/plan.png); }
.x-button-drop.plan:after       { content: ' ' !important; }
.x-button.x-button-drop.waiting { background-image: url(../pics/waiting.png); }
.x-button-drop.waiting:after    { content: ' ' !important; }
.x-button.x-button-drop.solved  { background-image: url(../pics/solved.png); }
.x-button-drop.solved:after     { content: ' ' !important; }
.x-button.x-button-drop.closed  { background-image: url(../pics/closed.png); }
.x-button-drop.closed:after     { content: ' ' !important; }

.open > .x-button-drop-menu {
   display: block;
}

.x-button-drop-menu {
   position: absolute;
   top: 27px;
   left: 0;
   z-index: 1000;
   display: none;
   float: left;
   min-width: 136px;
   list-style: none;
   border: 0;
   text-align: left;
}

.x-button-drop-menu li input[type="radio"] {
  position: absolute;
  left: -9999px;
}

.x-button-drop-menu li label {
   background-color: #fddb6f;
   padding: 4px;
   color: #8f5a0a;
   cursor: pointer;
   display: block;
   font-weight: bold;
}

.x-button-drop-menu li:hover label {
   background-color: #ffb94b !important;
}
.x-button-drop-menu li input[type="radio"]:checked + label {
   background-color: #FEC95C;
}


/** DATES TIMELINE */

.dates_timelines {
   width: 100%;
   max-width: 950px;
   font-size: 11px;
   margin: 0 auto;
   text-align: left;
}
.dates_timelines ul {
   position: relative;
}
.dates_timelines ul:before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: 163px;
   width: 3px;
   background-color: #A8A8A8;
}

.dates_timelines li {
   margin: 5px 0 25px 0;
   display: block;
}

.dates_timelines time {
   height: 30px;
   position: absolute;
   left: 0;
   text-align: right;
   width: 145px;
   color: #999;
}

.dates_timelines .dot {
   position: absolute;
   left: 156px;
   display: inline-block;
   width: 14px;
   height: 14px;
   border-radius: 8px;
   background-color: #FFF;
   border: 2px solid #696969;
}
.dates_timelines .dot:before {
   color: #929292;
   font-family: 'FontAwesome';
   padding-left: 2px;
}

.dates_timelines .now,
.dates_timelines .now time {
   font-weight: bold;
   color: inherit !important;
}
.dates_timelines .now .dot {
   background-color: #49BAF6;
   border-color: #4A9BC5;
}

.dates_timelines .creation .dot {
   border: 0;
   font-size: 15px;
   height: 18px;
}
.dates_timelines .creation .dot:before {
   content: '\f069';
}

.dates_timelines .passed time,
.dates_timelines .passed label,
.dates_timelines .passed .dot {
   border-color: #FF0014;
   color: #FF0014;
}
.dates_timelines .passed .dot:before {
   content: '\f12a';
   padding-left: 6px;
   color: #E54E5A;
}

.dates_timelines .checked .dot:before {
   content: '\f00c';
   padding-left: 2px;
}

.dates_timelines .end .dot {
   border: 0;
   font-size: 15px;
}
.dates_timelines .end .dot:before {
   content: '\f024';
}

.dates_timelines label {
   position: absolute;
   left: 180px;
   text-align: right;
}

/** SWITCHS **/
/* Adadpted from http://materializecss.com/ */

.switch, .switch * {
   -webkit-user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -ms-user-select: none;
}

.switch {
   padding: 4px;
   display: inline-block;
}

.switch img {
   padding-right: 10px;
}

.grey_border {
   border: 1px dotted #E2E2E2 ;
}

.switch label {
   cursor: pointer;
}

.switch label input[type=checkbox] {
   display: none;
   opacity: 0;
   width: 0;
   height: 0;
}

.switch label input[type=checkbox]:checked ~ .lever {
   background-color: #E8AEAE;
}
.switch label input[type=checkbox]:checked ~ .fa {
   color: #E8AEAE;
}

.switch label input[type=checkbox]:checked ~ .lever:after {
   background-color: #cf9b9b;
}

.switch label .lever {
   content: "";
   display: inline-block;
   position: relative;
   width: 15px;
   height: 10px;
   background-color: #B8B8B8;
   border-radius: 15px;
   margin-right: 5px;
   transition: background 0.3s ease;
}
.switch label img {
   vertical-align: middle;
}

.switch label .lever:after {
   content: "";
   position: absolute;
   display: inline-block;
   width: 14px;
   height: 14px;
   background-color: #F1F1F1;
   border-radius: 21px;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
   left: -7px;
   top: -2px;
   transition: left 0.3s ease, background .3s ease, box-shadow 0.3s ease;
}

input[type=checkbox]:checked:not(:disabled) ~ .lever:active:after {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(89, 89, 89, 0.08627450980392157);
}

input[type=checkbox]:not(:disabled) ~ .lever:active:after {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.08);
}

.switch label input[type=checkbox]:checked ~ .lever:after {
   left: 8px;
}

.switch input[type=checkbox][disabled] ~ .lever {
   cursor: default;
}

.switch label input[type=checkbox][disabled] + .lever:after,
.switch label input[type=checkbox][disabled]:checked + .lever:after {
   background-color: #BDBDBD;
}

/** QUEUEMAIL **/
.queuemail_preview .tab_cadre {
   width: inherit !important;
}


/** KB comments **/
.comments,
.comments ul {
  margin:0 0 0 1em; /* indentation */
  padding:0;
  list-style:none;
  position:relative;
}

.comments ul {
   margin-left: 3em;
   clear: both;
} /* (indentation/2) */

.comments:before,
.comments ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid #CECECE;
}

.comments li {
  margin:0;
  padding:0;
  line-height:2em; /* default list item's `line-height` */
  position:relative;
  clear: left;
}

.comments li:before {
  content:"";
  display:block;
  width:20px; /* same with indentation */
  height:0;
  border-top:1px solid #CECECE;
  margin-top:-1px; /* border top width */
  position:absolute;
  top:5em;
  left:0;
}

.comments li:last-child:before {
  background:white; /* same with body background */
  height:auto;
  top:5em; /* (line-height/2) */
  bottom:0;
}

.comments .h_content {
   position: relative;
}

.comments .h_info {
   padding-left: 20px;
}

.comments .add_answer {
   background-image: url(../pics/answer.png);
   width: 16px;
   height: 16px;
   display: block;
   /*float: right;*/
   position: absolute;
   right: 5px;
   bottom: 5px;
   opacity: .5;
}

.comments .add_answer:hover {
   opacity: 1;
   cursor: pointer;
}

.comments .h_item {
   border: none;
}

.forcomments.timeline_history {
   border: none;
}

.comments hr {
   border: none;
   border-top: 1px #222 dotted;
   margin-top: 2px;
}

.comment_form textarea {
   width: 100%;
   min-height: 70px;
}

input[type=checkbox].toggle_comments {
   display: none;
}

input[type=checkbox].toggle_comments + .toggle_label {
   cursor: pointer;
   position: absolute;
   left: -6px;
   top: calc(5em - 8px);
   background: #FFF url("../pics/expand.png") no-repeat;
   width: 14px;
   height: 14px;
}
input[type=checkbox].toggle_comments:checked + .toggle_label {
   background: #FFF url("../pics/collapse.png") no-repeat;
}

input[type=checkbox].toggle_comments ~ ul {
   display: none;
}
input[type=checkbox].toggle_comments:checked ~ ul {
   display: block;
}

.copy_to_clipboard_wrapper,
.copy_to_clipboard_wrapper * {
   cursor: pointer;
}

.copy_to_clipboard_wrapper:after {
   font-family: 'FontAwesome';
   position: relative;
   left: -15px;
   top: 1px;
   content: "\f0ea";
   color: #7F7F7F;
   transition: color 0.3s ease-in-out;
}
.copy_to_clipboard_wrapper.copied:after {
   content: "\f00c";
   color: green;
}
.copy_to_clipboard_wrapper.copyfail:after {
   content: "\f071";
   color: red;
}

/* ################--------------- Responsive  ---------------#################### */

@media screen and (max-width: 700px) {
   #header {
      transition: top 0.2s ease-in-out;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1000;
   }

   #c_ssmenu2 {
      overflow: auto;
      border-bottom: 1px solid #DDD;
   }

   #header.nav-up {
      top: -150px;
   }

   #page {
      padding-top: 130px;
   }
   .nav-up ~ #page {
      padding-top: 50px;
   }

   #firstboxlogin {
      overflow-y: auto;
   }

   #logo_login {
      height: inherit;
   }

   #display-login, #text-login {
      padding: 1px 2%;
   }

   #footer-login {
      display: none;
   }


   .icons_block {
      margin-left: 0;
   }

   .profile-selector {
      padding: 4px 2px !important;
      max-width: 95px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      display: inline-block;
   }

   .profile-selector .select2-container {
      max-width: 90px;
   }

   .ui-dialog {
      max-width: 100%;
   }

   #page .pointer {
      zoom: 1.1;
   }

   .layout_classic.form .main_form, .layout_vsplit.form .main_form {
      width: 100%;
   }

   .responsive_hidden {
      display: none !important;
   }

   .search_page > form > .center {
      width: 100%;
      overflow-y: auto;
   }

   .ui-tabs {
      width: 100% !important;
   }

   .ui-tabs-vertical .ui-tabs-nav {
      padding: .2em .2em 0;
      float: inherit;
      width: inherit;
   }

   .ui-tabs-vertical .ui-tabs-nav li {
      clear: none;
      width: initial;
      border-bottom-width: 1px !important;
      border-right-width: 0 !important;
      margin:1px .2em 0 0;
   }

   .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
      padding-bottom: 1px;
   }

   .ui-tabs-vertical .ui-tabs-nav li a {
      width: inherit;
   }

   .ui-tabs-panel,
   .ui-tabs .ui-tabs-panel
   .ui-tabs-vertical .ui-tabs-panel {
      padding: 2px !important;
      overflow-y: auto;
   }

   .ui-tabs-vertical .ui-tabs-panel {
      margin-left: 0;
   }

   .tab_cadre_pager {
      width: 100%;
   }
   .tab_cadre_pager .big {
      display: none;
   }

   .main_form tr:not(.headerRow) th:not(.actor-th),
   .tab_cadre_fixe:not(.tab_actors),
   .tab_cadre_fixe:not(.tab_actors) > tbody,
   .tab_cadre_fixe:not(.tab_actors) > tbody > tr,
   .tab_cadre_fixe:not(.tab_actors) > tbody > tr > th,
   .tab_cadre_fixe:not(.tab_actors) > tbody > tr > td,
   .tab_actors tr,
   .tab_actors tr:first-child th:first-child {
      display: block;
      width: 100%;
      text-align: left;
   }

   .tab_cadre_fixe input[type=text],
   .tab_cadre_fixe textarea {
     max-width: 95%;
   }

   .tab_cadrehov {
      margin: 0;
      width: 100%;
   }

   table.tab_cadre_postonly,
   table.tab_cadre_postonly > tbody,
   table.tab_cadre_postonly > tbody > tr,
   table.tab_cadre_postonly > tbody > tr > td,
   table.tab_cadre_postonly table.central .tab_cadrehov > tbody > tr,
   table.tab_cadre_postonly table.central .tab_cadrehov > tbody > tr:first-child > th,
   table.central,
   table.central > tbody ,
   table.central > tbody > tr,
   table.central > tbody > tr > th,
   table.central > tbody > tr > td,
   table.central > tbody > tr > td > .tab_cadrehov,
   table.central > tbody > tr > td > .tab_cadrehov > tbody {
      display: inline-block;
      width: 100%;
   }

   table.tab_cadre_postonly table.central .tab_cadrehov > tbody > tr > th,
   table.tab_cadre_postonly table.central .tab_cadrehov > tbody > tr > td {
      display: inline-block;
      width: 50%;
      box-sizing: border-box;
   }

   #searchcriterias table {
      border-collapse: collapse;
   }

   #searchcriterias .tab_cadre_fixe  {
      width: 100%;
   }

   .mceToolbar,
   #image_paste {
      display: none;
   }

   #searchcriterias .tab_cadre_fixe {
      display: block;
      width: 100%;
   }
   #searchcriterias .metacriteria td,
   #searchcriterias .normalcriteria td {
      display: inline-block;
      float: left;
      white-space: nowrap;
      width: initial !important;
   }
   #searchcriterias .metacriteria,
   #searchcriterias .normalcriteria {
      clear: left;
      display: block;
      width: 100%;
      margin-bottom: 6px;
      overflow: auto;
   }

   .timeline_history .h_date {
      background-image: none;
      padding-left: 0;
   }

   .timeline_history .h_info {
      font-size: .7em;
   }

   .tab_cadre_central .top {
      display: block;
      width: 100%;
   }

   #page .tab_actors,
   #page .actor-bloc {
      display: block;
   }

   .actor-bloc {
      width: initial;
      float: none;
   }

   .actor-dropdown {
      display: block;
   }

   .select2-focusser,
   .select2-search,
   .select2-search input {
       display: none !important;
   }

   #planning_container {
      padding-left: 10px;
   }

   #planning_filter {
      position: relative;
      width: 100%;
      margin-bottom: 10px;
   }

   #c_preference #debug_mode {
      display: none;
   }
}

/* ################--------------- Documentation  ---------------#################### */

.documentation {
   background-color: white;
   max-width: 700px;
   margin: 0 auto;
   padding: 10px 20px;
}

.documentation h1 {
   color: #300000;
}

.documentation > ul:nth-child(2) {
   list-style-type: disc;
   margin-top: 40px;
}

.documentation > ul:nth-child(2) > li {
   margin-left: 30px;
}

.documentation h2 {
   color: #940000;
   margin-top: 70px;
   border-bottom: 1px solid #A87A7A;
}

.documentation li {
   margin-left: 10px;
   padding: 5px 0 5px 5px;
}

.documentation > ul > li > ul > li {
   border-left: 1px solid grey;
}

.documentation > ul > li > ul > li > ul > li {
   list-style-type: disc;
   margin-left: 35px;
}

.documentation pre {
   border: 1px solid #ccc;
   border-radius: 4px;
   font-size: 13px;
}

.documentation dt {
   font-weight: bold;
   margin-top: 20px;
}

.documentation dd {
   margin-left: 20px;
}

td.diff ins {
   color: green;
   text-decoration: none;
}

td.diff del {
   color:red;
   text-decoration: none;
}

.planning_on_central .fc-view-container *,
.planning_on_central .fc-view-container *::before,
.planning_on_central .fc-view-container *::after {
   min-height: 1em; /** Ensure no event message is displayed well */
}

.loadingindicator {
   background:  #fff url(../pics/spinner.48.gif) no-repeat center .5em;
   padding: 60px .5em .5em;
   text-align: center;
   max-width: 350px;
   margin : auto;
   border: none;
}

.small {
   width: 1%;
}

/** "slide panel" component */

.slidepanel {
   z-index: 100;
   position: absolute;
   width: 30em;
   max-width: 40%;
   background: white;
   top: 0;
   min-height: 100vh;
   height: calc(100% - 28px); /* Without footer */
   border: none;
   overflow: auto;
}

.slidepanel a.fa, .slidepanel a.fa:link {
   font-size: 1.5em;
   color: #ccc;
}

.fa.bookmark_record, .fa.bookmark_record:link {
   font-size: 1.5em;
   color: #ccc!important;
}
.fa.bookmark_default, .fa.bookmark_default:link {
   font-size: 1.5em;
   color: #f3b51f!important;
}

.fa.reset-search:hover,
.fa.bookmark_record.save:hover {
   color: #999!important;
}

.slidepanel a .count .fa {
   color: white;
}

.drag {
   display: inline-block;
   height: 18px;
   padding-right: 1em;
   cursor: move;
}

.slidepanel .header {
   border-bottom: 1px solid #ccc;
   min-height: 2.4em;
}

.slidepanel .header > h3 {
   margin: 0;
   padding-top: .3em;
   text-align: center;
}

.slidepanel .header .icon {
   margin-top: .5em;
   margin-right: .5em;
}

.slidepanel .contents {
   clear: both;
}

.layout_lefttab .slidepanel .new_form_tabs .ui-tabs-nav,
.slidepanel .ui-tabs {
   width: auto;
}

.slidepanel.onleft {
   left: 0;
   border-right: 1px solid #ccc;
}
.slidepanel.onleft .close {
   float: right;
}

.slidepanel.onleft .icon {
   float: left;
}

.slidepanel.onright {
   right: 0;
   border-left: 1px solid #ccc;
}
.slidepanel.onright .close {
   float: left;
}

.slidepanel.onright .icon {
   float:right;
}

.slidepanel .tab_cadre_fixehov {
   box-shadow: none;
}

.slidepanel .default {
   display: inline-block;
   width: 18px;
   height: 18px;
}

.slidepanel td * {
   vertical-align: middle;
}

.slidepanel .toggle {
   font-size: 1.5em;
   position: absolute;
   right: .2em;
}

/** end "slide panel" component */

/** Badges */
a.savedsearchlink {
   display: block;
   padding: .4em 0;
}
span.count {
   border-radius: 10px;
   display: inline-block;
   text-align: center;
   padding: .2em .5em;
   float: right;
   margin-top: -0.2em;
   margin-left: .5em;
   font-weight: bold;
}

span.count img {
   vertical-align: -10%;
}
/** End badges */

/* Primary color elements (white on blue BG) designed to be overridden from palettes */
/* Colors are same as #c_menu */
.primary-bg {
   background: #3A5693;
}
.primary-bg-inverse {
   background: white;
}

.primary-fg, .primary-fg:link, .primary-fg:hover {
   color: white;
}

.primary-fg-inverse, .primary-fg-inverse:hover {
   color: #3A5693;
}

.tab_cadre_fixe .fa {
   padding: 0 .3em;
}

button.unstyled {
   background: none;
   border: none;
   margin: none;
}

.warning {
   padding: .5em;
   cursor:pointer;
   font: bold 12px Arial, Helvetica;
   color: #8f5a0a;
   background-color: #FEC95C;
   border: 0;
   text-align: center;
}

.warning li {
   margin-bottom: .5em;
}
.warning li:last-child {
   margin-bottom: 0;
}

.warning .fa {
   color: white;
   float:left;
   margin-right: .2em;
}

tr.linked-template td:not(.top) {
   background-color: #ffb4b4;
}

.notifs_setup {
   display: table;
   margin: 0 auto;
   border-spacing: 1em 0;
}

.notifs_setup > form,
.notifs_setup > table {
   display: table-cell;
}

.massiveactions {
   padding: .5em;
   width: 90%;
}

.massiveactions input.submit {
   margin-top: .5em;
}

.missing {
   color: orange;
}

.ok {
   color: green;
}

@media screen and (max-width: 900px) {
   .documentation {
      margin-left: 0 !important;
   }
}


@media screen and (min-width: 900px) {
   .documentation #summary {
      position: fixed;
      top: 40px;
      left: 15px;
      margin-top: 0;
   }
   .documentation #summary + ul {
      width: 200px;
      position: fixed;
      top: 70px;
      left: 10px;
      bottom: 0;
      overflow: auto;
   }
}

@media screen and (max-width: 1100px) {
   .documentation {
      margin-left: 200px;
   }
}