/**
 * ---------------------------------------------------------------------
 * GLPI - Gestionnaire Libre de Parc Informatique
 * Copyright (C) 2015-2018 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;
   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;
}

a.target-deleted {
   text-decoration:line-through;
}

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;
}

/* ################--------------- Rich Text ---------------#################### */

.rich_text_container ul {
   list-style-type: disc;
   margin: 1em 0;
   padding: 0 0 0 40px;
}
.rich_text_container ul ul,
.rich_text_container ol ul,
.rich_text_container ol ol {
   margin-bottom: 0;
   margin-top: 0;
}
.rich_text_container ol {
   list-style-type: decimal;
}
.rich_text_container ul ul,
.rich_text_container ol ul {
   list-style-type: circle;
}
.rich_text_container ul ul ul,
.rich_text_container ul ol ul,
.rich_text_container ol ul ul,
.rich_text_container ol ol ul {
   list-style-type: square;
}

/* ################--------------- 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;
}


/* ################--------------- 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;
}

textarea, input:not([type=submit]):not([type=reset]):not([type=checkbox]):not([type=radio]):not(.select2-search__field) {
   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-search__field):not([disabled]) {
   background-color:#FCFCFC;
   color: black;
}

textarea:focus,
input:not([type=submit]):not([type=reset]):not([type=checkbox]):not([type=radio]):not(.select2-search__field):focus,
.select2-container--open .select2-selection,
.select2-container--open .select2-dropdown {
   border-color: #5897fb;
}

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

input:required, .mce-edit-area.required {
   /*border:1px rgba(255, 0, 0, .6) solid!important;*/
   border: 1px rgb(0 0 0 / 60%) 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: #fff;
   background-color: #ab222b;
   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;
   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: calc(100% - 50px);
      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: 33px;
   }

   .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;
   }

   .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;
   z-index:1;
   text-align: left;
   font-size: 11px;
   width:90%;
}


.tab_cadre_postonly {
   margin: 0 auto;
   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;
   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 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;
}

.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;
}

/* 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: #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;
}

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;
}

.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%;
}

.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;
}

img.picture_square {
   box-shadow: 0px 1px 1px #999;
}
/* ################--------------- 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;
}

.calendrier:hover {
   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;
   font-size: 14px;
}

#planning_filter ul.filters > li label {
   padding-left: 4px;
   line-height: 16px;
   width: 185px;
   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 ul.filters > li.group_users.expanded ul.group_listofusers > li label {
   width: 175px;
}
#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%;
}
.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;
}

.accepted {
   background-color:#9FD6ED;
   color:#425B64;
}

/* ################--------------- 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 select,
#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 select:focus,
#boxlogin input[type=password]:focus{
   border-color:#292929;
   background-color: #fff;
   box-shadow:0 0 3px #292929;
}

#boxlogin label {
   color: #000;
   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_input:before {
   font-family: FontAwesome;
   left:8px;
   position:absolute;
   top:3px;
   color: #9B9B9B;
   font-size: 24px;
}

#boxlogin #login_input_name:before {
   content: "\f2be";
}
#boxlogin #login_input_password:before {
   content: "\f023";
   left: 11px;
}
#boxlogin #login_input_src:before {
   content: "\f2ba";
}

#boxlogin #dropdown_auth1:before {
   background: url(../pics/login_source.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 {
   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 form #champRecherche button {
   border: none;
   height: 22px;
   vertical-align: bottom;
   border-radius: 0 3px 3px 0;
   cursor: pointer;
   margin: 0;
}

#c_recherche form #champRecherche button:hover {
   background-color: #ccc;
}

#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 0px 0px 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: 500;
}

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

#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: #d8d8d8;
}
.breadcrumb_item:nth-of-type(3):after {
   border-left-color: #d8d8d8;
}

.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;
   background-color: #ab222b;
}

#show_all_menu dt a:hover {
   background: #ab222b;
}

#show_all_menu a:hover {
   background-color: #ab222b;
   color: #fff;
}

.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;
   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;
   display: none;
}
.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;
}

.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.standalone .h_content:after {
   display: 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 {
   padding-top: .5em;
   color: #000000;
   font-size: .75em;
   white-space: nowrap;
   text-align: right;
}
.timeline_history .right .private {
   text-align: 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 {
   border-left: 1em green solid;
   background-color: #9FD6ED;
   color: #425B64;
}

.timeline_history .h_content.Solution.waiting {
   border-left-color: orange;
}
.timeline_history .h_content.Solution.refused {
   border-left: 1em red solid;
}
.timeline_history .h_content.Solution .solimg {
   position: absolute;
   color: rgba(66, 91, 100, .1);
}

.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 */
}
.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 */
}
.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 */
}

.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;
}

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

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

.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: #fff;
   background-color: #ab222b;
   border: none;
   border-radius: 0;
}

.x-button:hover {
  cursor: pointer;
   background-color: #e5262c;
   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-drop:after        {
   font-family: 'FontAwesome';
}
.x-button.x-button-drop.new:after      { content: '\f111'; color: #49bf4d; }
.x-button.x-button-drop.assigned:after { content: '\f10c'; color: #49bf4d; }
.x-button.x-button-drop.planned:after  { content: '\f073'; color: #1B2F62; }
.x-button.x-button-drop.waiting:after  { content: '\f111'; color: orange; }
.x-button.x-button-drop.solved:after   { content: '\f10c'; color: black; }
.x-button.x-button-drop.closed:after   { content: '\f111'; color: black; }

.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: #ab222b;
   padding: 4px;
   color: #fff;
   cursor: pointer;
   display: block;
   font-weight: bold;
}

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


/** 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;
   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;
}


/* ################--------------- Log history filters ---------------#################### */

tr.log_history_filter_row > th {
   vertical-align: top;
}
tr.log_history_filter_row .select2-container {
   min-width: 125px;
}
tr.log_history_filter_row > th > input,
tr.log_history_filter_row .select2-container .select2-selection--multiple {
   box-sizing: border-box;
   min-height: 28px;
}
tr.log_history_filter_row .select2-container--default .select2-selection--multiple .select2-selection__choice {
   padding: 1px;
}

/* ################--------------- 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 {
       display: none !important;
   }

   #planning_container {
      padding-left: 10px;
   }

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

   #c_preference #debug_mode {
      display: none;
   }

   #c_recherche form #champRecherche input{
      width:100px;
   }

   #c_recherche {
      position:relative;
      top: 33px;
      left:77px;
   }
}

/* ################--------------- 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: 1000;
   position: fixed;
   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;
}

#switchview {
   font-size: 2em;
   text-align: right;
   float: right;
}

#switchview i {
   margin-left: .5em;
}
#switchview i.selected {
   color: green;
}

#viewlist {
   display: none;
}

#viewgraph {
   width: calc(100% - 80px);
   overflow-x: auto;
}

#viewgraph table {
   width: 100%;
   table-layout: fixed
}

#viewgraph .tipcontent {
   display: none;
}


#viewgraph .rooms a.fa, #viewgraph .rooms a.fa:link, #viewgraph .rooms a .fa {
   color: white;
   position: absolute;
   right: 0;
   top: 0;
   padding: .5em;
}

#viewgraph .rooms a.itemlink .fa {
   right: 1.2em;
}

/* tables */
div#viewgraph table {
   background-color: #e0e0e0;
   border-collapse: collapse;
}

/* table cells */
div#viewgraph th,
div#viewgraph td {
   height: 2em;
   border-bottom: 1px solid white;
   text-align: center;
   padding: 0;
}

div#viewgraph table.rooms th,
div#viewgraph table.rooms td {
   height: 5em;
}

div#viewgraph th {
   border: 1px solid white;
}
div#viewgraph td[data-hpos="1"] {
   border-left: 1px solid white;
}

div#viewgraph table.rooms td {
   border-left: 1px solid white;
}

div#viewgraph table th {
   color: white;
   background-color: SteelBlue;
}

div#viewgraph table td div {
   border: none!important;
   position: relative;
   z-index: 10;
   color: white;
   height: 100%;
   display: flex;
   padding: 0 1%;
   flex-direction: column;
   justify-content: center;
   max-height: 5em; /** Fix height when dragging */
}

div#viewgraph table td div.rack-add {
   color: #e0e0e0;
}
div#viewgraph table td div.rack-add:hover {
   background-color: rgba(0, 128, 0, .5);
   cursor: pointer;
}

div#viewgraph .mini_toggle {
   font-size: 11px;
   opacity: .5;
   cursor: pointer;
   position: relative;
   padding-left: 20px;
   margin: 15px 5px;
   float: left;
}

div#viewgraph .mini_toggle:before {
   content: "\f204";
   left: 0;
   top: 0;
   font-size: 15px;
   font-family: FontAwesome;
   position: absolute;
}
div#viewgraph .mini_toggle.active:before {
   content: "\f205";
}

div#viewgraph .mini_toggle:hover {
   opacity: 1
}

.grid-stack .grid-stack-item {
   z-index: 3;
   opacity: 1;
   filter: Alpha(Opacity=100)
}

.clear_picture .grid-stack .grid-stack-item .grid-stack-item-content,
.clear_picture .grid-stack .grid-stack-item:after {
   background: none !important;
}

.grid-stack-item {
   position: relative; /** should be erased by lib, defined for case without lib **/
}

.grid-stack-item:not(.lock-bottom) .grid-stack-item-content {
   font-size: 11px;
   font-weight: bold;
   text-align: center;
   overflow: hidden;
   cursor: move; /* fallback */
   cursor: -webkit-grab;
   cursor:    -moz-grab;
   cursor:         grab;
}

.grid-stack-item:not(.lock-bottom) .grid-stack-item-content:active {
   cursor: move; /* fallback */
   cursor: -webkit-grabbing;
   cursor:    -moz-grabbing;
   cursor:         grabbing;
}

.grid-stack-item-content a {
   font-size: 1em;
   font-weight: bold;
}

.clear_text:not(.clear_picture) .grid-stack .grid-stack-item .itemrack_name {
   display: none;
}

#viewgraph:not(.clear_picture) .with_picture .grid-stack-item-content .itemrack_name {
   background-color: rgba(255, 255, 255, .65);
   color: #000 !important;
}
#viewgraph:not(.clear_picture) .with_picture .grid-stack-item-content .rel-link {
   opacity: .6;
}

.grid-stack-item-content .rel-link {
   position: absolute;
   right: 3px;
   bottom: 3px;
   opacity: 0;
}

.grid-stack-item-content .rel-link a i.fa {
   color: #000;
}

.grid-stack-item-content:hover .rel-link {
   opacity: .8;
}

.grid-stack .grid-stack-item .grid-stack-item-content,
.grid-stack .grid-stack-item .placeholder-content {
   left: 0;
   right: 0;
}

.grid-stack .grid-stack-placeholder > .placeholder-content {
   border: 1px dashed #bcbf33;
   background-color: #e5f5698a;
}

#viewgraph table.outbound {
   width: 400px;
   margin-bottom: 20px;
}

div#viewgraph table.outbound td div {
   padding: 0;
}

div#viewgraph table.outbound td div .grid-stack-item-content {
   box-shadow: none;
}

ul.indexes {
   list-style-type: none;
   margin: 0;
   padding: 0;
   text-align: center;
   font-size: .7em;
   color: silver;
   float: left;
}

.virtual_pdu_space {
   height: 20px;
   clear: both;
}

.side_pdus_float {
   float: left;
   min-height: 100%;
   width: 20px;
}
.side_pdus.side_pdus_nofloat {
   clear: left;
   margin: 0 2px 2px;
}

.side_pdus_nofloat .grid-stack-item:not(.lock-bottom) .grid-stack-item-content {
   cursor: initial;
}

.side_pdus {
   background-color: #575757;
   margin: 0 1px;
}

.side_pdus .grid-stack-item:not(.lock-bottom) {
   background-color: #FF9D1F;
   overflow: hidden;
}

.side_pdus_float .grid-stack-item .grid-stack-item-content {
   border: 0 solid #0404046b;
   border-width: 4px 1px;
}

.side_pdus_float .grid-stack-item .grid-stack-item-content .rotated_text {
   transform: rotate(-90deg);
   transform-origin: bottom left;
   position: absolute;
   bottom: 25px;
   left: 15px;
   white-space: nowrap;
}

.side_pdus_float .grid-stack-item .item_rack_icon {
   position: absolute;
   bottom: 1px;
   left: 0;
}

.side_pdus_float .grid-stack-item .item_rack_icon {
   position: absolute;
   bottom: 1px;
   left: 0;
}

.side_pdus_float .grid-stack-item-content .rel-link {
   left: 3px;
   top: 3px;
   bottom: unset;
   right: unset;
}

.side_pdus_float .grid-stack-item:after {
   content: '';
   position: absolute;
   height: 20px;
   bottom: 4px;
   left: 20px;
   z-index: -1;
   transform: rotate(-90deg);
   transform-origin: bottom left;
}

.racks_add .cell_add {
   box-sizing: border-box;
   display: block;
   opacity: 0;
   z-index: 2;
   position: relative;
}

.racks_add .cell_add:after {
   content: "\f067";
   left: 45%;
   font-size: 1em;
   color: grey;
   top: 5px;
   font-family: FontAwesome;
   position: absolute;
}

.racks_add .cell_add:hover {
   opacity: 1;
   cursor: pointer;
}

/*** Rack Rooms ***/

.grid-room {
   margin: 10px 0 10px 10px;
   float: left;
   padding: 15px 0 0 15px;
   overflow-y: hidden;
}

.grid-room .blueprint {
   margin-left: 15px;
   width: calc(100% - 16px);
}

.clear_blueprint .grid-room .blueprint {
   background: none !important;
}

.grid-room .racks_add {
   border: 1px solid #EEEEEE;
   border-width: 0 1px 1px 0;
   background-size: 40px 39px;
   background-image: linear-gradient(to right, #EEEEEE 1px, transparent 1px),
                     linear-gradient(to bottom, #EEEEEE 1px, transparent 1px);
}
.grid-room .grid-stack {
   float: left;
}

.clear_grid .grid-room .grid-stack {
   background-image: none;
}

.grid-room .grid-stack-item {
   border: 1px solid rgb(68, 68, 68);
   box-sizing: border-box;
}

.grid-room .grid-stack-item:after {
   position: absolute;
   content: " ";
   background-color: rgba(0, 0, 0, .3)
}
.grid-room .grid-stack-item.room_orientation_1:after { /* NORTH */
   top: 0;
   left: 0;
   width: 100%;
   height: 4px;
}
.grid-room .grid-stack-item.room_orientation_2:after { /* EAST */
   top: 0;
   right: 0;
   width: 4px;
   height: 100%;
}
.grid-room .grid-stack-item.room_orientation_3:after { /* SOUTH */
   bottom: 0;
   left: 0;
   width: 100%;
   height: 4px;
}
.grid-room .grid-stack-item.room_orientation_4:after { /* WEST */
   top: 0;
   left: 0;
   width: 4px;
   height: 100%;
}

.grid-room .grid-stack-item .grid-stack-item-content {
   padding-top: 4px;
}
.grid-room .grid-stack-item.lock-bottom {
   display: none;
}

.grid-room ul.indexes.indexes-x {
   width: 100%;
   float: none;
   height: 15px;
   padding-left: 15px;
   box-sizing: border-box;
}

.grid-room ul.indexes.indexes-x li {
   float: left;
   width: 40px;
}
.grid-room ul.indexes.indexes-y {
   width: 15px;
}
.grid-room ul.indexes.indexes-y li {
   width: 10px;
   height: 39px;
   line-height: 40px;
}

.clear_grid .grid-room ul.indexes {
   visibility: hidden;
}

.grid-room .racks_add {
   margin-left: 15px;
}

.grid-room .racks_add .cell_add {
   height: 39px;
   width: 40px;
   float: left;
}

.grid-room .racks_add .cell_add:after {
   left: 15px;
   top: 14px;
}



/*** Racks ***/
.racks_row {
   width: 100%;
}

.racks_col {
   margin-left: 2px;
   float: left;
   position: relative;
}

.racks_col:not(:last-child) {
   margin-right: 40px;
}

.rack_side {
   float: left;
   text-align: center;
   background: #4C4C4C;
   padding-top: 18px;
}

.racks_col h2 {
   font-size: 1em;
   color: #555;
   background-color: #e6e6e6;
   height: 18px;
   margin: 0;
   padding: 5px 0;
}

@media screen and (max-width: 900px) {
   .racks_col:not(:last-child) {
      margin-right: 0;
      margin-bottom: 15px;
   }

   #viewgraph {
      min-width: 100%;
   }
}

.racks_add {
   position: absolute;
   display: block;
   width: 100%;
   z-index: 2;
}

.grid-rack .racks_add .cell_add {
   height: 20px;
   margin-bottom: 1px;
   width: 100%;
}

.grid-rack {
   width: 217px;
   background: repeating-linear-gradient( #FFF, #FFF 21px, #F0F0F0 21px, #F0F0F0 42px);
   z-index: 1;
   border: 1px solid #D4D4D4;
   float: left;
}

.side_pdus_nofloat .grid-stack-item .grid-stack-item-content,
.grid-rack .grid-stack-item:not(.lock-bottom) .grid-stack-item-content {
   color: #2c3e50;
   border: 0 solid #0404046b;
   border-width: 1px 4px;
   box-shadow: 1px 1px 5px 0px #656565;
}

#viewgraph:not(.clear_picture) .grid-rack .grid-stack-item.with_picture .grid-stack-item-content {
   border-color: #04040440;
   border-width: 0 4px;
}

.grid-rack .grid-stack-item.reserved .grid-stack-item-content {
   border: 1px solid #FF7C24;
   box-shadow: none;
}

.grid-rack .grid-stack-item.reserved .grid-stack-item-content a.itemrack_name {
   color: #7F4723 !important;
}

.grid-rack .grid-stack-item.item_rear {
   background: repeating-linear-gradient(
     45deg,
     rgba(0, 0, 0, .15),
     rgba(0, 0, 0, .15) 10px,
     rgba(59, 59, 59, .15) 10px,
     rgba(59, 59, 59, .15) 20px
   );
}

.grid-rack .grid-stack-item.reserved {
   background: repeating-linear-gradient(
     115deg,
     #FF8A3C,
     #FF8A3C 30px,
     #FFD7BC 30px,
     #FFD7BC 60px
   );
}

.grid-stack-item .item_rack_icon {
   float: left;
   opacity: .6;
   padding: 3px 0 0 2px;
   font-size: 14px;
}

#viewgraph:not(.clear_picture) .grid-rack .grid-stack-item.with_picture .item_rack_icon {
   display: none;
}

.rack_tipcontent span {
   display: block;
}

.rack_tipcontent label {
   font-weight: bold;
   margin-right: 3px;
}

.grid-rack .grid-stack-item.lock-bottom {
   background: #4C4C4C;
   width: 101% !important;
   margin: 0 -1px;
}

.racks_row ul.indexes li {
   height: 20px;
   width: 20px;
   margin-bottom: 1px;
   box-sizing: border-box;
   line-height: 20px;
}

.rack_side_block {
   width: 200px;
   border: 1px solid #E6E6E6;
   background-color: #F3F3F3;
   text-align: left;
   font-size: 11px;
   margin-bottom: 20px;
}
.rack_side_block_content {
   padding: 10px 5px;
}

.rack_side_block h2 {
   color: #555;
   margin: 0;
   padding: 5px 10px;
   font-size: 14px;
   font-weight: bold;
   background-color: #e6e6e6;
}

.rack_side_block h3 {
   color: #6F6F6F;
   margin: 0;
   font-size: 11px;
   font-weight: bold;
}

.rack_side_block .ui-progressbar {
   height: 13px;
}
.rack_side_block .doaction_progress_text {
   font-weight: normal;
   padding: 0;
}

.rack_side_block_content i {
   margin: 0 3px;
}

.rack_side_block .sub_action {
   display: block;
   color: #555;
   cursor: pointer;
   padding: 5px;
   text-align: center;
}
.rack_side_block .sub_action:hover {
   background-color: #D1D1D1;
}

.rack_side_block .sub_action i {
   margin-right: 3px;
   color: #555;
}

div#viewgraph .rack_side_block .pdu_list {
   background: none;
}

div#viewgraph .rack_side_block .pdu_list td {
   text-align: left;
   border: 1px solid rgba(0, 0, 0, .2);
   padding: 0 3px;
}

.pdu_list .rack_position {
   width: 20px;
}

.pdu_list i.fa {
   color: rgba(0, 0, 0, .6);
}

ul#menu ul {
   -webkit-column-count: 2;
   -webkit-column-gap: 10px;
   -moz-column-count: 2;
   -moz-column-gap: 10px;
   column-count:2;
   column-gap:10px;
}

ul#menu ul li {
   break-inside: avoid;
}

.fail_info {
   padding: 6px 8px;
   box-shadow: 0 0 15px rgba(0,0,0,0.2);
   border-radius: 5px;
   font-weight: bold;
   background: red;
   background-color: rgba(255, 0, 0, .8);
   color: white;
}

.fail_info #reload_data {
    display: block;
    text-align: center;
    cursor: pointer;
}

input[name=as_map] {
   visibility: hidden;
}

input[name=as_map] + label span.fa {
   margin: .5em;
}

input[name=as_map]:checked + label {
   color:blue;
}

.leaflet-control-geocoder-form {
   margin: .2em!important;
}

.leaflet-control-geocoder-form input[type=text] {
   width: 10em;
}
.leaflet-control-geocoder-form input[type=submit] {
   border: 1px transparent solid;
}

/** ITIL statuses */
.itilstatus {
   font-size: 1.4em;
   margin-right: .2em;
   color: red;
   background-color: transparent;
}

.itilstatus.assigned,
.itilstatus.new {
   color: #49bf4d;
}

.itilstatus.accepted {
   color: green;
}

.itilstatus.test,
.itilstatus.qualif,
.itilstatus.waiting {
   color: orange;
}

.itilstatus.approval {
   color: #8CABDB;
}

.itilstatus.eval {
   color: lightblue;
}

.itilstatus.closed,
.itilstatus.solved,
.itilstatus.observe {
   color: black;
}

.itilstatus.planned {
   color: #1B2F62;
}

/** /ITIL statuses */

/** Responsive for documentation */

@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;
   }
}