styles.scss

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

/* ################--------------- Media queries break   ---------------#################### */

$break_sphones: 490px;
$break_phones: 700px;
$break_lphones: 900px;
$break_menu: 1055px;
$break_tablets: 1300px;

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

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

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

.inherited {
   color: rgb(34, 77, 194);
   padding: 5px;
   margin: 3px 0;
   border: 1px solid transparent;
   border-radius: 2px;
   background-color: rgba(34, 77, 194, .1);
   white-space: nowrap;
   font-style: italic;
   display: table;

   &.inline {
      display: inline-block;
   }

   i.fas {
      margin-right: 2px;
      font-size: 0.7em;
   }
}


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

.btn-linkstyled {
   /* Remove all specific styles */
   background: none;
   border: 0;
   color: inherit;
   cursor: pointer;
   font: inherit;
   padding: 0;
   text-decoration: underline;
   outline: inherit;
}

a, .btn-linkstyled {
   font-weight: bold;
   text-decoration: none;

   &:not(.fa-lg):not(.fa-2x):not(.fa-3x):not(.fa-4x):not(.fa-5x) {
      font-size: 11px;
   }

   &:link {
      font-weight: bold;
      text-decoration: none;

      &:not(.fa-lg):not(.fa-2x):not(.fa-3x):not(.fa-4x):not(.fa-5x) {
         font-size: 11px;
      }
   }

   &.fa, &.far, &.fas {
      font-weight: 900;

      &:not(.fa-lg):not(.fa-2x):not(.fa-3x):not(.fa-4x):not(.fa-5x) {
         font-size: inherit;
      }

      &:link {
         font-weight: 900;

         &:not(.fa-lg):not(.fa-2x):not(.fa-3x):not(.fa-4x):not(.fa-5x) {
            font-size: inherit;
         }
      }
   }
}

#page a.fa, #page a.far, #page a.fas, .export-stat {
   color: #222;

   &:link {
      color: #222;
   }
}

a:not(.vsubmit) .fa, a:not(.vsubmit) .far, a:not(.vsubmit) .fas, .btn-linkstyled .fa, .btn-linkstyled .far, .btn-linkstyled .fas {
   color: #222;
}

a {
   &:hover {
      color: black;
   }

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

hr {
   border: 1px solid #cccccc;
}

.pointer {
   cursor: pointer;
}

.grab {
   cursor: grab;
}

.pager_controls {
   margin-left: .5em;

   .fa.pointer {
      font-size: 1.5em;
   }

   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 {
   p {
      margin: 1.12em 0;
   }

   h1 {
      font-size: 2em;
      margin: 0.67em 0;
   }

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

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

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

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

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

   address {
      font-style: italic;
   }

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

   ul {
      list-style-type: disc;
      margin: 1em 0;
      padding: 0 0 0 40px;

      ul {
         margin-bottom: 0;
         margin-top: 0;
      }
   }

   ol {
      ul, ol {
         margin-bottom: 0;
         margin-top: 0;
      }

      list-style-type: decimal;
   }

   ul ul, ol ul {
      list-style-type: circle;
   }

   ul {
      ul ul, ol ul {
         list-style-type: square;
      }
   }

   ol {
      ul ul, ol ul {
         list-style-type: square;
      }
   }

   img {
      max-width: 100%;
   }

   .user-mention, [data-user-mention="true"] {
      border-radius: 3px;
      padding: 5px;

      @at-root .rich_text_container .user-mention {
         background: rgba(255, 255, 255, 0.5);
      }
      @at-root .mce-content-body [data-user-mention="true"] {
         background: rgba(200, 200, 200, 0.5);
         cursor: default !important; // Overrides "not-allowed" cursor on noneditable content
      }
   }
}

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

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

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

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

      li {
         &:nth-child(odd) {
            background: #E8E8E8;
         }

         &.selected, &:hover {
            background: #848484;
            color: #FFF;
         }
      }

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

   .fa-times {
      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: $break_phones) {
   #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;

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

   .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(.submit):not([type=submit]):not([type=reset]):not([type=checkbox]):not([type=radio]):not(.select2-search__field):not(.numInput) {
   border: 1px solid #D3D3D3;
   font-size: 11px;
   border-radius: 3px;
   padding: 0 5px;
}

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

.select2-container--open {
   .select2-selection, .select2-dropdown {
      border-color: #5897fb;
   }
}

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

   &:required {
      border: 1px rgba(255, 0, 0, 0.6) solid !important;
      border-left-width: 3px !important;
      padding-right: 0 !important;
      box-shadow: none;
   }
}

.tox-tinymce.required {
   border: 1px rgba(255, 0, 0, 0.6) solid !important;
   border-left-width: 3px !important;
   padding-right: 0 !important;
   box-shadow: none;
}

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

input:not(.submit):not([type=submit]):not([type=reset]):not([type=checkbox]):not([type=radio]):not(.select2-search__field)[type=color] {
   padding: 0;
   width: 3em;
}

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

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

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

.ui-datepicker {
   background: #F3F3F3;

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

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

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

      .check {
         opacity: 1;
         -webkit-transform: scale(1) rotate(45deg);
         -moz-transform: scale(1) rotate(45deg);
         transform: scale(1) rotate(45deg);
      }
   }

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

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

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

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

.secondary {
   padding: 5px;
   cursor: pointer;
   height: auto;
   font: bold 12px Arial, Helvetica;
   color: #5F5F5F;
   background-color: #E6E6E6;
   border: 0;
   white-space: nowrap;
   display: inline-block;
   vertical-align: middle;
}

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

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

#page {
   .tox-tinymce.tox-fullscreen {
      top: 105px !important;
   }
}

.entity_select:hover {
   opacity: .6;
}

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

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

   .jstree-node:not(.jstree-leaf) {
      position: relative;

      > 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, .treeroot:hover {
   background-color: #eeeeee;
}

#kb_browse {
   display: flex;
   align-items: stretch;
   border: 1px solid #E6E6E6;
   height: 100%;
   min-height: 60vh;
   margin-left: -10px;
   margin-top: -5px;

   @media screen and (max-width: $break_phones) {
      flex-wrap: wrap;
   }

   .kb_tree {
      flex-basis: 250px;
      flex-shrink: 0;
      padding-right: 10px;
      text-align: left;
      background-color: #F8F8F8;

      a {
         font-weight: normal;
      }
   }

   .kb_tree_search {
      width: 100%;
      margin: 5px;
      padding: 10px 5px;
      border-radius: 0;
      box-sizing: border-box;
   }

   .kb_items {
      padding: 10px;

      .tab_cadre_pager {
         width: 100%;
      }
   }

   i.fa.sub_items {
      color: #787878;
   }
}

.pointer {
   opacity: .7;

   &:hover {
      opacity: 1;
   }

   &.disabled {
      &:hover {
         opacity: .3;
      }

      opacity: .3;
   }
}

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

   .disclosablefield {
      position: relative;

      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: 1px solid #e1e1e1;
   border-top-width: 0;
   box-sizing: border-box;
}

.ui-tabs {
   background: #FFF repeat-x top left;
   box-shadow: 0px 3px 1px #dfdfdf;
   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-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;

   .actor_title {
      text-align: right;
   }

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

      &.headerRow th {
         border-bottom: 1px solid #EFEFEF;
         font-size: 1.5em;
         padding: 8px 0;
      }
   }
}
.headerRow th {
   & > .fa, & > .far, & > .fas, & > button {
      margin-left: 8px;
      vertical-align: middle;
   }
}

.layout_lefttab .new_form_tabs {
   .ui-tabs-nav {
      width: 100%;
   }

   .ui-tabs-panel {
      margin: 0;
      clear: both;
   }
}

/* Vertical split layout */
@media screen and (min-width: $break_tablets) {
   html {
      height: 100%;
   }

   body.layout_vsplit {
      height: 100%;
      overflow: hidden;
   }

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

      &.form #page {
         overflow: hidden;
      }

      #page {
         .glpi_tabs {
            height: calc(100% - 50px);
            position: relative;
            z-index: 1;
         }

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

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

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

      div.navigationheader {
         margin: 0;
         border: 0;
         min-width: 150px;
      }

      &.form {
         table.tab_cadre_pager {
            margin: 0;
            border: 0;
            min-width: 150px;
         }

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

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

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

   }

   div.singleaction {
      text-align: center;
   }

   .layout_classic #tabspanel + div.ui-tabs:not(.horizontal) {
      height: 100%;

      /*bottom: 10px;*/
      box-sizing: border-box;
   }

   .layout_vsplit {
      #tabspanel + div.ui-tabs {
         height: 100%;

         /*bottom: 10px;*/
         box-sizing: border-box;
      }

      &.form {
         #tabspanel + div.ui-tabs:not(.horizontal) {
            width: 50% !important;
            margin: 0 15px;
            float: right;
            border: none;
            box-shadow: 0px 1px 2px 1px #D2D2D2;
         }

         .ui-tabs {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 52%;
            margin: 0;
            right: 0;
         }
      }

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

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

      &.form {
         .main_form {
            input[type=text]:not([size]) {
               width: 74%;
               min-width: 175px;
            }

            textarea {
               resize: vertical;
               width: 97%;
               min-height: 125px;
            }
         }

         input.submit, span.vsubmit, a.vsubmit {
            white-space: nowrap;
         }

         .boxnote {
            width: 100%;
         }
      }

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

      .debug_ajax {
         width: 100% !important;
      }
   }
}

/* ################--------------- Table  ---------------#################### */

.card {

   &:not(.no-shadow) {
      box-shadow: 0px 1px 2px 1px #999;
   }

   .field {
      display: table-row;
      padding: 5px;

      label {
         display: table-cell;
         padding: 10px 5px;

         & ~ div {
            display: table-cell;
         }
      }
   }
}

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 {
   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 {
   margin: 0px auto 5px auto;
   background: #FFF;
   z-index: 1;
   text-align: left;
   font-size: 11px;
   max-width: 950px;
   width: 100%;
   border-spacing: 0;
   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;
   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 {
   border-bottom: 1px solid #EEE;
}

.tab_cadrehov {
   td {
      border-bottom: 1px solid #EEE;
   }

   th.headHover {
      background-color: #F3F3F3;
   }
}

/* Table Hover Effects */

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

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

.tab_cadre_fixehov {
   tr.rowHover, 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;

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

.tab_date {
   white-space: nowrap;
}

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

   table {
      margin-bottom: 5px;
   }

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

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

td, th {
   &.numeric {
      text-align: right;
   }

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

   &.nopadding {
      padding: 0;
   }

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

      &.left {
         text-align: left !important;
      }
   }

   &.rotate {
      -moz-transform: rotate(-70deg);

      /* FF3.5+ */
      -o-transform: rotate(-70deg);

      /* Opera 10.5 */
      -webkit-transform: rotate(-70deg);

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

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

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

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

#searchcriteria {
   margin-top: 10px;
   background-color: #FFF;
   width: 80%;
   margin: 0 auto;
   box-shadow: 0px 1px 2px 1px #D2D2D2;
   border-radius: 5px;
   padding: 10px;

   &.sub_criteria {
      display: inline-block;
      border-radius: 2px;
      width: 100%;
      margin-left: 7px;
      box-shadow: none;
      border: 1px solid #DDD;
      background-color: rgba(0, 0, 0, 0.015);
   }

   .normalcriteria, .metacriteria {
      margin: 10px;
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      align-content: flex-start;
   }

   .normalcriteria * {
      white-space: nowrap;
   }

   .metacriteria {
      * {
         white-space: nowrap;
      }

      flex-wrap: wrap;

      blockquote {
         flex-basis: 100%;
         margin: 0 10px;
      }
   }

   .switch {
      opacity: .7;

      &:hover {
         opacity: 1;
      }
   }
}

@media screen and (max-width: $break_phones) {
   #searchcriteria {
      width: 95%;

      .normalcriteria, .metacriteria {
         display: block;
      }

      .normalcriteria *, .metacriteria * {
         white-space: normal;
      }
   }
}

.search_actions > * {
   margin: 0 3px;
}

.priority_block {
   white-space: nowrap;
   border: 1px solid transparent;
   padding-right: 6px;
   border-radius: 2px;
   display: inline-block;

   span {
      width: 20px;
      height: 20px;
      display: inline-block;
      vertical-align: middle;
   }
}

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

   &:link {
      color: #ccc !important;
   }

   &:hover {
      color: #999;
   }
}

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

   input {
      vertical-align: middle;
   }

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

#page .navigationheader {
   margin: 0 auto;
   padding: 7px 10px;
   width: 90%;
   border: 1px solid #e1e1e1;
   background-color: #FFF;
   box-sizing: border-box;
   display: flex;

   & > * {
      margin: 0 5px;
   }

   .navicon {
      margin-top: 5px;

      i.fa, i.fas, i.far {
         font-size: 1.53em;
      }
   }

   i.ma-icon {
      font-size: 0.875em;
      margin-right: 5px;
   }

   .big {
      font-size: 16px;
   }

   form {
      display: inline-block;
      margin-bottom: 0;
   }

   .center {
      margin: 0 auto;
   }

   .dropdown-menu {
      display: none;
   }

   .nav_title {
      font-size: 13px;
      font-weight: bold;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;

      @media screen and (max-width: $break_tablets) {
         max-width: 30%;
      }
   }

   .single-actions {
      position: relative;
      font-size: 11px;

      .btn {
         background-color: rgb(231, 231, 231);
         border-radius: .2rem;
         border: 1px solid transparent;
         padding: .1rem 1rem;
         line-height: 1.5;

         &:hover {
            background-color: #CCC;
            cursor: pointer;
         }


         i.fa-caret-down {
            margin-left: 5px;
         }
      }

      .dropdown-menu {
         background-color: #fff;
         background-clip: padding-box;
         border: 1px solid rgba(0,0,0,.15);
         position: absolute;
         top: 25px;
         right: 0;
         white-space: nowrap;
         padding: 5px 10px;
         z-index: 1000;
         font-size: 11px;
         border-radius: 2px;
         box-shadow: 0 1px 3px rgba(0,0,0,0.12),
                     0 1px 2px rgba(0,0,0,0.24);

         a {
            padding: 5px;
            display: block;

            &:hover {
               background-color: #CCC;
            }
         }
      }
   }
}

.layout_vsplit #page .navigationheader {
   width: calc(100% - 30px);
   margin-bottom: 10px;
   box-shadow: 0px 1px 2px 0px #D2D2D2;
   border: 0;
}

.layout_classic #page .navigationheader {
   width: 952px;
}

@media screen and (max-width: $break_sphones) {
   #page .navigationheader {
      display: none;
   }
}

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

   .qtip-content {
      max-height: 250px;
      max-width: 400px;
      overflow: auto;
   }
}

.tooltip {
   font-size: 11px !important;

   &: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.2em !important;
}

.fc {
   button.ui-datepicker-trigger {
      height: auto;
      padding: 0;
   }

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

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

.calendrier {
   vertical-align: middle;

   &: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;

   legend {
      font-weight: bold;
   }

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

   textarea {
      width: 550px;
   }
}

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

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

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

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

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

.kb i {
   &.faq {
      color: #c9993C;
   }

   &.not-published {
      color: #DD2F2A;
   }
}

.pubfaq:hover {
   color: black;
}

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

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

.faqadd_block {
   position: relative;
   display: inline-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;
   }

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

   tr {
      display: block;
   }
}

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

/* ################--------------- File upload  ---------------#################### */

.fileupload:not(.only-uploaded-files) {
   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.only-uploaded-files input[type=file] {
   display:none;
}

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

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

   &.folded {
      .toggle {
         float: none;
         background: url(../pics/toggle-right.png) no-repeat;
      }

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

   ul.filters {
      border: 0;
      padding: 5px;

      > li {
         clear: both;
         padding: 5px 0 5px 5px;

         &:nth-child(even) {
            background-color: #F3F3F3;
         }

         .form-group-checkbox {
            margin-right: 6px;
         }

         .actor_icon {
            padding-bottom: 2px;
            vertical-align: top;
            color: rgb(68, 68, 68);
            font-size: 14px;
         }

         label {
            padding-left: 4px;
            line-height: 16px;
            width: 185px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            white-space: nowrap;
         }

         .filter-icon {
            float: right;
            padding: 0;
            border: none;
         }

         .sp-replacer {
            float: right;
            padding: 0;
            border: none;

            .sp-preview {
               margin-right: 0;
               border: none;
            }

            .sp-dd {
               display: none;
            }
         }

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

            &.expanded .toggle {
               background: url(../pics/collapse.png) no-repeat;
            }

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

            &.expanded ul.group_listofusers {
               display: block;

               > li label {
                  width: 173px;
               }
            }
         }
      }
   }

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

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

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

      > img {
         z-index: 1;
      }

      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;

         li {
            padding: 5px;
            cursor: pointer;
            font-size: 13px;

            &:hover {
               background-color: #EAEAEA;
            }

            a {
               color: inherit;
               font-size: 13px;
               font-weight: normal;
            }
         }
      }
   }
}

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

   .fc-head {
      display: none;
   }

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

#planning {
   width: auto;
   overflow: hidden;

   .fc-time-grid-event {
      // TODO check new version,
      // Fullcalendar 2.4.0 seems to have removed this property
      overflow: hidden;
   }

   .end-of-day {
      border-right: 1px solid #bdbdbd;
   }

   .fc-toolbar h2 {
      font-size: 1.2em;

      .ui-datepicker-trigger {
         margin-left: 4px;
      }
   }

   .event_past {
      .ui-widget-content {
         color: #CCCCCC;

         a {
            color: #CCCCCC;
         }
      }

      &.event_todo .ui-widget-content {
         color: #FF0000;

         a {
            color: #FF0000;
         }
      }
   }

   .event_today {
      background: #fcf8e3;
   }

   .event_today.event_todo .ui-widget-content {
      color: #FFA100;

      a {
         color: #FFA100;
      }
   }

   .fc-event {
      font-weight: normal;
      display: block;

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

      .fc-time {
         overflow: hidden;
      }

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

      .content {
         font-weight: normal;
         padding: 0 7px 0 2px;
         overflow: hidden;
         text-overflow: ellipsis;

         .event-description {
            border-top: 1px solid rgba(0, 0, 0, 0.2);
            margin-top: 2px;
            padding-top: 2px;

            p {
               margin: 0;
            }
         }
      }

      .event_type {
         position: absolute;
         width: 7px;
         bottom: 0;
         top: 0;
         right: 0;
      }
   }

   .fc-timeline {
      .fc-event {
         .content {
            max-height: 25px;
         }
      }
   }

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

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

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

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

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

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

   .fc-list-empty-wrap2 {
      position: initial;
   }
}

/* for checkavailable */

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

   &: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%);
}

.planning-context-menu {
   position:fixed;
   z-index:20000;
   background-color: #FFF;
   box-shadow: 0 10px 20px rgba(0,0,0,0.19),
               0 6px 6px rgba(0,0,0,0.23);

   li {
      padding: 8px 10px;
      cursor: pointer;

      i.fas, i.far {
         margin-right: 5px;
         color: #555
      }

      &:hover {
         background-color: #CCC;
      }
   }
}

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

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

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

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

   textarea {
      max-width: 100%;
   }
}

.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, 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, 0.8);
      border-color: rgba(255, 165, 0, 0.8);
   }

   &.info_msg div.ui-widget-header {
      color: white;
      background: #A9A9A9;
      border-color: #A9A9A9;
   }
}

/* ##### INFO messages ##### */

/* ################--------------- 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 {
   margin: 0;
   padding: 38px 0;
   text-align: center;
}
#logo_login img {
   display: block; /* Prevent whitespace below element */
   margin: 0 auto;
}

#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%;

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

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

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

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

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

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

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

      &:focus {
         box-shadow: 0 0 0px 1000px white inset;
      }
   }

   .login_input:before {
      font-family: 'Font Awesome\ 5 Free';
      left: 8px;
      position: absolute;
      top: 3px;
      color: #9B9B9B;
      font-size: 24px;
      font-weight: 900;
   }

   #login_input_name:before {
      content: "\f2bd";
      font-weight: 900;
   }

   #login_input_password:before {
      content: "\f023";
      left: 11px;
      font-weight: 900;
   }

   #login_input_src:before {
      content: "\f2ba";
      font-weight: 900;
   }

   #dropdown_auth1:before {
      background: url(../pics/login_source.png) no-repeat 3% 50%;
   }

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

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

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

   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;

   a {
      font-weight: normal;
      color: red;
      font-size: inherit;

      &:link {
         font-weight: normal;
         color: red;
         font-size: inherit;
      }
   }
}

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

   &.home {
      bottom: 15px;

      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;

   a.fa {
      font-size: 1.6em;
      color: white;

      &:hover {
         text-decoration: none;
         color: #ccc;
      }
   }

   ul {
      list-style: none;

      li {
         float: right;
         margin: 0 10px;
      }
   }

   a {
      &.debugon {
         color: #ff0000 !important;

         &:hover {
            color: #ff0000 !important;
         }
      }

      text-decoration: none;
      font-size: 0.9em;

      &:hover {
         text-decoration: underline;
      }
   }

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

   p {
      margin: 0;
   }
}

#c_recherche {
   position: relative;

   form #champRecherche {
      button {
         border: none;
         height: 22px;
         vertical-align: bottom;
         border-radius: 0 3px 3px 0;
         cursor: pointer;
         margin: 0;

         &:hover {
            background-color: #ccc;
         }
      }

      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, span {
      display: inline-block;
      padding: .5em 0;
      font-weight: bold;
   }
}

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

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

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

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

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

         &:last-child {
            border-bottom: 0px;
         }

         a {
            text-decoration: none;
            display: block;
            padding: 5px 5px 5px 5px;
         }
      }
   }
}

#menu_all_button {
   float: right;
   width: 24px;
   height: 24px;
   margin-right: 10px;
   display: inline-block;
   margin-top: 2px;
   font-size: 1.6em;
}

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

@media screen and (max-width: $break_sphones) {
   #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.ssmenu {
      position: absolute;
      min-width: 135px;
      z-index: 500;
   }

   .empty-icon::before {
      content: "";
   }
}

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

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

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

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

      li {
         float: left;
         padding: 0 10px;

         a {
            text-decoration: none;
            color: #666;

            &:hover {
               text-decoration: underline;
            }
         }
      }
   }
}

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

   ul {
      left: 0px;
      list-style: none;

      li {
         float: left;
         padding: 5px 10px 0 10px;

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

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

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

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

   &:nth-of-type(1), &:nth-of-type(2) {
      background-color: #F2F2F2;

      &:after {
         border-left-color: #F2F2F2;
      }
   }

   &:nth-of-type(3) {
      background-color: #FEC95C;

      &:after {
         border-left-color: #FEC95C;
      }
   }
}

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

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

   a > img, i.fa, i.far, i.fas {
      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;

   dl {
      padding-bottom: .5em;
      break-inside: avoid-column;

      /* standard */
      page-break-inside: avoid;

      /* Firefox */
      -webkit-column-break-inside: avoid;

      /* other webkit compliant */
   }

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

   dt a {
      color: white;

      &:hover {
         background: #8BAADA;
      }
   }

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

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

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

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

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

   > table {
      width: 100%;
   }
}

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

/* ################--------------- DB Slave---------------#################### */

#dbslave-float {
   top: 0px;
   left: 300px;
   position: absolute;
   z-index: 100;

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

   h1 {
      font-size: 18px;
      text-align: center;
      padding: 5px;
   }
}

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

   .tab_cadre {
      width: 100%;

      td:nth-child(2) {
         word-break: break-all;
      }

      .tab_cadre {
         width:auto;
      }
   }
}

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

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

/* Timeline */

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

   .break {
      clear: both;
   }

   h2 {
      font-size: 16px;
   }

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

/** FORM **/

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

.timeline_choices {
   h2 {
      display: inline-block;
      margin: 1em 1em 0 0;
   }

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

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

      &:before {
         margin-right: 1em;
         font-weight: normal;
      }

      &:hover {
         box-shadow: 0px 1px 1px #999;
      }

      &.followup {
         background-color: #E0E0E0;
         color: #535353;
      }

      &.task {
         background-color: #FEDA90;
         color: #535353;
      }

      &.document {
         background-color: #80CEAD;
         color: #3A5D4E;
      }

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

      &.validation {
         background-color: #b6f47e;
         color: #535353;
      }
   }
}

.timeline_box .tab_cadre_fixe {
   width: 930px;
}

/** TIMELINE **/
.timeline_stats {
   opacity: 0.2;
   text-align: right;
   margin-top: 0.2em;

   &:hover {
      opacity: 1;
   }

   h3 {
      font-weight: bold;
      font-size: 1em;
      margin: 0 .5em 0 0;
      padding: 0;
   }
}

.timeline_history {
   border-top: 1px dashed #3C5874;
   overflow: hidden;
   font-size: 12px;

   /*fix jqueryui ui-widget size*/
   width: 100%;

   > h2 {
      float: left;
   }

   .filter_timeline {
      opacity: 0.2;
      text-align: right;
      margin-top: .2em;

      > * {
         vertical-align: middle;
      }

      &:hover {
         opacity: 1;
      }

      float: right;

      h3 {
         display: inline-block;
      }

      ul {
         display: inline-block;

         li {
            display: inline-block;
         }
      }

      h3 {
         font-weight: bold;
         font-size: 1em;
         margin: 0 .5em 0 0;
         padding: 0;
      }

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

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

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

   a, .read_more_button {
      bottom: 5px;
      position: absolute;
      cursor: pointer;
   }
}

.timeline_history {
   .h_item {
      clear: both;
      padding-top: 8px;
      border-top: 1px dashed #D2D2D2;
      display: flex;
      flex-flow: row wrap;

      &.right {
         flex-direction: row-reverse;
      }
   }

   .h_hidden {
      display: none;
   }

   .h_info {
      float: left;
      width: 25%;
      max-width: 145px;
      margin: 0 10px;
   }

   .right .h_info {
      float: right;
   }

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

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

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

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

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

      a:hover {
         text-decoration: underline;
      }

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

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

   .users_id_tech img {
      vertical-align: middle;
   }

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

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

   .left .h_date, .middle .h_date {
      margin: 0 auto;
   }

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

   img.group_assign {
      vertical-align: bottom;
   }

   .h_content {
      width: 50%;
      min-width: 200px;
      padding: 5px 5px 5px 8px;
      margin-bottom: 10px;
      min-height: 70px;
      position: relative;
      margin: 0 10px;
      word-wrap: break-word;
      display: flex;

      &.Document_Item {
         display: block;

         .displayed_content {
            display: block;
            figure {
               width: max-content;
            }
         }
      }

      .displayed_content {
         width: 100%;
         display: flex;
         flex-direction: column;
      }
   }

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

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

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

   &.standalone .h_content:after {
      display: none;
   }

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

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

   .left .h_content {
      &:after, &:before {
         border-left-color: transparent !important;
      }
   }

   .right .h_content {
      &:after, &:before {
         border-right-color: transparent !important;
      }
   }

   .ITILFollowup:after, .KnowbaseItemComment:after {
      border-color: #E0E0E0;
   }

   .ITILTask:after {
      border-color: #FEDA90;
   }

   .Solution:after {
      border-color: #9FD6ED;
   }

   .ITILValidation {
      &.status_3:after {
         border-color: #A1D7A2;
      }

      &:after {
         border-color: #FFFFFF;
      }

      &.status_4:after {
         border-color: #D3A4A4;
      }

      .b_right {
         button[type='submit'] {
            border: unset;
            padding: 0.5em 0.5em;
            font-weight: bold;
            font-size: unset;
            &.approve {
               background-color: #b6f47e;
               color: #002e00;
            }
            &.refuse {
               background-color: #eba696;
               color: #380b0b;
            }
         }
      }
   }

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

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

   .h_content {
      &.edited {
         width: inherit;
         text-align: center;

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

      .edit_item_content {
         display: none;
         border: 1px dotted #C0C0C0;
      }

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

         &:hover {
            opacity: 1;
         }
      }

      &.ITILFollowup, &.KnowbaseItemComment {
         background-color: #E0E0E0;
         color: #535353;
         background-image: url(../pics/timeline/followup.png);
         background-repeat: no-repeat;
      }

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

      &.Solution {
         border-left: 1em green solid;
         background-color: #9FD6ED;
         color: #425B64;

         &.waiting {
            border-left-color: orange;
         }

         &.refused {
            border-left: 1em red solid;
         }

         .solimg {
            position: absolute;
            color: rgba(66, 91, 100, 0.1);
            pointer-events: none;
         }
      }

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

      &.ITILContent {
         background-color: #B2E0B6;
         color: #093806;
         background-repeat: no-repeat;

         .title {
            font-weight: bold;
            font-size: 1.2em;
            margin-bottom: 5px;
         }

         img {
            max-width: 100%;
         }
      }
   }

   span.buttons {
      opacity: 0.1;
      vertical-align: middle;

      &:hover {
         opacity: 1;
      }
   }
}

@media screen and (max-width: $break_sphones) {
   .timeline_history {
      .h_content {
         width: 100%;
      }
      .middle .h_content {
         max-width: inherit;
         width: 100%;
      }
   }
}

.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_img_preview a:hover  img {
      border: 3px solid black;
   }

   .h_content {
      &.ITILValidation {
         background-color: #FFFFFF;
         border-color: #BECADD;
         color: #030F21;
         padding: 5px 5px 5px 8px;

         &.status_3 {
            background-color: #A1D7A2;
            border-color: #385139;
         }

         &.status_4 {
            background-color: #D3A4A4;
            border-color: #5E3232;
         }
      }

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

      .h_controls {
         display: block;
         align-self: flex-end;

         .control_item {
            margin-left: 5px;
            opacity: .5;
            font-size: 1.3em;

            &:hover {
               opacity: 1;
               cursor: pointer;
            }

            &.fa-lock {
               cursor: inherit;
               opacity: 1;
               color: #D97E7E;
            }
         }
      }

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

      &.ITILFollowup .read_more, &.KnowbaseItemComment .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 */
      }

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

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

   .b_right {
      padding-right: 3px;
      font-style: italic;
      color: #7E7E7E;
      text-align: right;
      align-self: flex-end;
      width: 100%;
      background: rgba(255, 255, 255, .2);

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

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

      &.state_0 {
         background-image: url(../pics/timeline/information.png);
      }

      &.state_1 {
         cursor: pointer;
         background-image: url(../pics/timeline/todo.png);
      }

      &.state_2 {
         cursor: pointer;
         background-image: url(../pics/timeline/done.png);
      }
   }

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

   .approbation_separator {
      margin-bottom: 55px;
   }

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

.fa-label {
   margin-bottom: 10px;
   white-space: nowrap;

   i.far, i.fas {
      color: #a3a3a3;
      margin-right: 3px;
      vertical-align: middle;
      font-size: 1.5em;
   }

   .fa-stack {
      i.far, i.fas {
         &.fa-stack-1x {
            font-size: .8em;
            top: .4em;
         }

         &.fa-inverse {
            color: #FFF;
         }
      }
   }
}

.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: #8f5a0a;
   background-color: #FEC95C;
   border: none;
   border-radius: 0;

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

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

   &.x-button-drop {
      border-left: 0;
      width: 15px;
      height: 16px;
      background-repeat: no-repeat;
      background-position: center;

      &:after {
         content: '\25BC';
      }
   }
}

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

.x-button-drop:after {
   font-family: 'Font Awesome\ 5 Free';
   font-weight: 900;
}

.x-button.x-button-drop {
   &.new:after {
      content: '\f111';
      color: #49bf4d;
   }

   &.assigned:after {
      content: '\f111';
      font-weight: 400;
      color: #49bf4d;
   }

   &.planned:after {
      content: '\f073';
      color: #1B2F62;
   }

   &.waiting:after {
      content: '\f111';
      color: orange;
   }

   &.solved:after {
      content: '\f111';
      font-weight: 400;
      color: black;
   }

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

   li {
      input[type="radio"] {
         position: absolute;
         left: -9999px;
      }

      label {
         background-color: #fddb6f;
         padding: 4px;
         color: #8f5a0a;
         cursor: pointer;
         display: block;
         font-weight: bold;
      }

      &:hover label {
         background-color: #ffb94b !important;
      }

      input[type="radio"]:checked + label {
         background-color: #FEC95C;
      }
   }
}

/** DATES TIMELINE */

.dates_timelines {
   width: 100%;
   max-width: 950px;
   font-size: 11px;
   margin: 0 auto;
   text-align: left;

   ul {
      position: relative;

      &:before {
         content: '';
         position: absolute;
         top: 0;
         bottom: 0;
         left: 163px;
         width: 3px;
         background-color: #A8A8A8;
      }
   }

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

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

   .dot {
      position: absolute;
      left: 156px;
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 8px;
      background-color: #FFF;
      border: 2px solid #696969;

      &:before {
         color: #929292;
         font-family: 'Font Awesome\ 5 Free';
         padding-left: 2px;
      }
   }

   .now {
      font-weight: bold;
      color: inherit !important;

      time {
         font-weight: bold;
         color: inherit !important;
      }

      .dot {
         background-color: #49BAF6;
         border-color: #4A9BC5;
      }
   }

   .creation .dot {
      border: 0;
      font-size: 15px;
      height: 18px;

      &:before {
         content: '\f069';
         font-weight: 900;
      }
   }

   .passed {
      time, label {
         border-color: #FF0014;
         color: #FF0014;
      }

      .dot {
         border-color: #FF0014;
         color: #FF0014;

         &:before {
            content: '\f12a';
            padding-left: 6px;
            color: #E54E5A;
            font-weight: 900;
         }
      }
   }

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

   .end .dot {
      border: 0;
      font-size: 15px;

      &:before {
         content: '\f024';
         font-weight: 900;
      }
   }

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

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

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

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

   padding: 4px;
   display: inline-block;

   img {
      padding-right: 10px;
   }
}

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

.switch label {
   cursor: pointer;

   input[type=checkbox] {
      display: none;
      opacity: 0;
      width: 0;
      height: 0;

      &:checked ~ {
         .lever {
            background-color: #E8AEAE;
         }

         .fa {
            color: #E8AEAE;
         }

         .lever:after {
            background-color: #cf9b9b;
         }
      }
   }

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

   img {
      vertical-align: middle;
   }

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

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

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

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

/** QUEUEMAIL **/

.queuemail_preview .tab_cadre {
   width: inherit !important;
}

/** KB comments **/

.comments {
   margin: 0 0 0 1em;

   /* indentation */
   padding: 0;
   list-style: none;
   position: relative;

   ul {
      margin: 0 0 0 1em;

      /* indentation */
      padding: 0;
      list-style: none;
      position: relative;
      margin-left: 3em;
      clear: both;
   }

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

   li {
      margin: 0;
      padding: 0;
      line-height: 2em;

      /* default list item's `line-height` */
      position: relative;
      clear: left;

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

      &:last-child:before {
         background: white;

         /* same with body background */
         height: auto;
         top: 5em;

         /* (line-height/2) */
         bottom: 0;
      }
   }

   .h_content {
      position: relative;
   }

   .h_info {
      padding-left: 20px;
   }

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

      &:hover {
         opacity: 1;
         cursor: pointer;
      }
   }

   .h_item {
      border: none;
   }
}

/* (indentation/2) */

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

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

   &:checked {
      + .toggle_label {
         background: #FFF url("../pics/collapse.png") no-repeat;
      }

      ~ ul {
         display: block;
      }
   }

   ~ ul {
      display: none;
   }
}

.copy_to_clipboard_wrapper {
   input[type=text] {
      padding-right: 18px !important;
   }

   cursor: pointer;

   * {
      cursor: pointer;
   }

   &:after {
      font-family: 'Font Awesome\ 5 Free';
      position: relative;
      left: -15px;
      top: 1px;
      content: "\f0ea";
      color: #7F7F7F;
      transition: color 0.3s ease-in-out;
      font-weight: 900;
   }

   &.copied:after {
      content: "\f00c";
      color: green;
      font-weight: 900;
   }

   &.copyfail:after {
      content: "\f071";
      color: red;
      font-weight: 900;
   }
}

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

tr.log_history_filter_row {
   > th {
      vertical-align: top;
   }

   .select2-container {
      min-width: 125px;

      .select2-selection--multiple {
         box-sizing: border-box;
         min-height: 28px;
      }
   }

   > th > input {
      box-sizing: border-box;
      min-height: 28px;
   }

   .select2-container--default .select2-selection--multiple .select2-selection__choice {
      padding: 1px;
   }
}

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

@media screen and (max-width: $break_phones) {
   #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 {
      padding: 0;
   }

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

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

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

         &.ui-tabs-active {
            padding-bottom: 1px;
         }

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

      .big {
         display: none;
      }
   }

   .main_form tr:not(.headerRow) th:not(.actor-th) {
      display: block;
      width: 100%;
      text-align: left;
   }

   .tab_cadre_fixe:not(.tab_actors) {
      display: block;
      width: 100%;
      text-align: left;

      > tbody {
         display: block;
         width: 100%;
         text-align: left;

         > tr {
            display: block;
            width: 100%;
            text-align: left;

            > {
               th, td {
                  display: block;
                  width: 100%;
                  text-align: left;
               }
            }
         }
      }
   }

   .tab_actors tr {
      display: block;
      width: 100%;
      text-align: left;

      &:first-child th:first-child {
         display: block;
         width: 100%;
         text-align: left;
      }
   }

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

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

   table {
      &.tab_cadre_postonly {
         display: inline-block;
         width: 100%;

         > tbody {
            display: inline-block;
            width: 100%;

            > tr {
               display: inline-block;
               width: 100%;

               > td {
                  display: inline-block;
                  width: 100%;
               }
            }
         }

         table.central .tab_cadrehov > tbody > tr {
            display: inline-block;
            width: 100%;

            &:first-child > th {
               display: inline-block;
               width: 100%;
            }
         }
      }

      &.central {
         display: inline-block;
         width: 100%;

         > tbody {
            display: inline-block;
            width: 100%;

            > tr {
               display: inline-block;
               width: 100%;

               > {
                  th {
                     display: inline-block;
                     width: 100%;
                  }

                  td {
                     display: inline-block;
                     width: 100%;

                     > .tab_cadrehov {
                        display: inline-block;
                        width: 100%;

                        > tbody {
                           display: inline-block;
                           width: 100%;
                        }
                     }
                  }
               }
            }
         }
      }

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

   .mceToolbar, #image_paste {
      display: none;
   }

   #searchcriteria {
      ul {
         border-collapse: collapse;
         width: 100%;
      }

      .metacriteria, .normalcriteria {
         clear: left;
         display: block;
         width: 100%;
         margin: 6px;
         overflow: auto;
      }
   }

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

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

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

   #page {
      .tab_actors, .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;
      }

      position: relative;
      top: 33px;
      left: 77px;
   }
}

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

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

   h1 {
      color: #300000;
   }

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

      > li {
         margin-left: 30px;
      }
   }

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

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

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

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

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

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

   dd {
      margin-left: 20px;
   }
}

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

   del {
      color: red;
      text-decoration: none;
   }
}

.planning_on_central .fc-view-container * {
   min-height: 1em;

   /** Ensure no event message is displayed well */
   &::before, &::after {
      min-height: 1em;

      /** Ensure no event message is displayed well */
   }
}

.loadingindicator {
   background: #fff url(../pics/spinner.48.gif) no-repeat center 0.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;

   a.fa {
      font-size: 1.5em;
      color: #ccc;

      &:link {
         font-size: 1.5em;
         color: #ccc;
      }
   }
}

.fa {
   &.bookmark_record, &.reset-search, &.fold-search {
      font-size: 1.5em;
      color: #ccc !important;

      &:link {
         font-size: 1.5em;
         color: #ccc !important;
      }

      &.active {
         color: #fed175 !important;
      }
   }

   &.bookmark_default {
      font-size: 1.5em;
      color: #f3b51f !important;

      &:link {
         font-size: 1.5em;
         color: #f3b51f !important;
      }
   }

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

      &.active {
         color: #feb010 !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;

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

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

   .contents {
      clear: both;
   }
}

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

.slidepanel {
   .ui-tabs {
      width: auto;
   }

   &.onleft {
      left: 0;
      border-right: 1px solid #ccc;

      .close {
         float: right;
      }

      .icon {
         float: left;
      }
   }

   &.onright {
      right: 0;
      border-left: 1px solid #ccc;

      .close {
         float: left;
      }

      .icon {
         float: right;
      }
   }

   .tab_cadre_fixehov {
      box-shadow: none;
   }

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

   td * {
      vertical-align: middle;
   }

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

   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 {
   color: white;

   &:link, &:hover {
      color: white;
   }
}

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

   &:hover {
      color: #3A5693;
   }
}

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

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

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

   li {
      margin-bottom: .5em;

      &:last-child {
         margin-bottom: 0;
      }
   }

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

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

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

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

.missing {
   color: orange;
}

.ok {
   color: green;
}

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

   i {
      margin-left: .5em;

      &.selected {
         color: green;
      }
   }
}

#viewlist {
   display: none;
}

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

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

   .tipcontent {
      display: none;
   }

   .rooms a {
      &.fa {
         color: white;
         position: absolute;
         right: 0;
         top: 0;
         padding: .5em;

         &:link {
            color: white;
            position: absolute;
            right: 0;
            top: 0;
            padding: .5em;
         }
      }

      .fa {
         color: white;
         position: absolute;
         right: 0;
         top: 0;
         padding: .5em;
      }

      &.itemlink .fa {
         right: 1.2em;
      }
   }
}

/* tables */

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

   th, td {
      height: 2em;
      border-bottom: 1px solid white;
      text-align: center;
      padding: 0;
   }

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

   th {
      border: 1px solid white;
   }

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

   table {
      &.rooms td {
         border-left: 1px solid white;
      }

      th {
         color: white;
         background-color: SteelBlue;
      }

      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 */
         &.rack-add {
            color: #e0e0e0;

            &:hover {
               background-color: rgba(0, 128, 0, 0.5);
               cursor: pointer;
            }
         }
      }
   }

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

      &:before {
         content: "\f204";
         left: 0;
         top: 0;
         font-size: 15px;
         font-family: 'Font Awesome\ 5 Free';
         position: absolute;
         font-weight: 900;
      }

      &.active:before {
         content: "\f205";
         font-weight: 900;
      }

      &:hover {
         opacity: 1;
      }
   }
}

/* table cells */

.grid-stack .grid-stack-item {
   z-index: 3;
   opacity: 1;
}

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

.grid-stack-item {
   position: relative;

   /** should be erased by lib, defined for case without lib **/
   &:not(.lock-bottom) .grid-stack-item-content {
      font-size: 11px;
      text-align: center;
      overflow: hidden;
      cursor: move;

      /* fallback */
      cursor: -webkit-grab;
      cursor: -moz-grab;
      cursor: grab;

      &: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, 0.65);
      color: #000 !important;
   }

   .rel-link {
      opacity: .6;
   }
}

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

      a i.fa {
         color: #000;
      }
   }

   &:hover .rel-link {
      opacity: .8;
   }
}

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

   .grid-stack-placeholder > .placeholder-content {
      border: 1px dashed #bcbf33;
      background-color: rgba(229, 245, 105, .5);
   }
}

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

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

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

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

.side_pdus_float {
   .grid-stack-item {
      .grid-stack-item-content {
         border: 0 solid rgba(4, 4, 4, .4);
         border-width: 4px 1px;

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

      .item_rack_icon {
         position: absolute;
         bottom: 1px;
         left: 0;
         position: absolute;
         bottom: 1px;
         left: 0;
      }
   }

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

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

   &:after {
      content: "\f067";
      left: 45%;
      font-size: 1em;
      color: grey;
      top: 5px;
      font-family: 'Font Awesome\ 5 Free';
      position: absolute;
      font-weight: 900;
   }

   &:hover {
      opacity: 1;
      cursor: pointer;
   }
}

/*** Rack Rooms ***/

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

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

      &:after {
         position: absolute;
         content: " ";
         background-color: rgba(0, 0, 0, 0.3);
      }

      &.room_orientation_1:after {
         /* NORTH */
         top: 0;
         left: 0;
         width: 100%;
         height: 4px;
      }

      &.room_orientation_2:after {
         /* EAST */
         top: 0;
         right: 0;
         width: 4px;
         height: 100%;
      }

      &.room_orientation_3:after {
         /* SOUTH */
         bottom: 0;
         left: 0;
         width: 100%;
         height: 4px;
      }

      &.room_orientation_4:after {
         /* WEST */
         top: 0;
         left: 0;
         width: 4px;
         height: 100%;
      }

      .grid-stack-item-content {
         padding-top: 4px;
      }

      &.lock-bottom {
         display: none;
      }
   }

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

         li {
            float: left;
            width: 40px;
         }
      }

      &.indexes-y {
         width: 15px;

         li {
            width: 10px;
            height: 39px;
            line-height: 40px;
         }
      }
   }
}

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

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

   .cell_add {
      height: 39px;
      width: 40px;
      float: left;

      &:after {
         left: 15px;
         top: 14px;
      }
   }
}

/*** Racks ***/

.racks_row {
   width: 100%;
}

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

   &: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: $break_lphones) {
   .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%;
   }

   width: 217px;
   background: #FFF repeating-linear-gradient(transparent,
                                                transparent 21px,
                                              rgba(0, 0, 0, .1) 21px,
                                              rgba(0, 0, 0, .1) 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 rgba(4, 4, 4, .4);
   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: rgba(4, 4, 4, .25);
   border-width: 0 4px;
}

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

      a.itemrack_name {
         color: #7F4723 !important;
      }
   }

   &.item_rear {
      background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 10px, rgba(59, 59, 59, 0.15) 10px, rgba(59, 59, 59, 0.15) 20px);
   }

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

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

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

   .ui-progressbar {
      height: 13px;
   }

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

   &:hover {
      background-color: #D1D1D1;
   }

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

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

   td {
      text-align: left;
      border: 1px solid rgba(0, 0, 0, 0.2);
      padding: 0 3px;
   }
}

.pdu_list {
   .rack_position {
      width: 20px;
   }

   i.fa {
      color: rgba(0, 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;

   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, 0.8);
   color: white;

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

input[name=as_map] {
   visibility: hidden;

   + label span.fa {
      margin: .5em;
   }

   &:checked + label {
      color: blue;
   }
}

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

   input {
      &[type=text] {
         width: 10em;
      }

      &[type=submit] {
         border: 1px transparent solid;
      }
   }
}

/** ITIL statuses */

.itilstatus {
   font-size: 1.4em;
   margin-right: .2em;
   color: red;
   background-color: transparent;
   vertical-align: middle;

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

   &.accepted {
      color: green;
   }

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

   &.approval {
      color: #8CABDB;
   }

   &.eval {
      color: lightblue;
   }

   &.closed, &.solved, &.observe, &.refused, &.canceled {
      color: black;
   }

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

/** /ITIL statuses */

.fup-popup {
   overflow-y: auto;
   width: 350px;
   height: 200px;
   font-size: 11px;
}

/** Responsive for documentation */

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

@media screen and (min-width: $break_lphones) {
   .documentation #summary {
      position: fixed;
      top: 40px;
      left: 15px;
      margin-top: 0;

      + ul {
         width: 200px;
         position: fixed;
         top: 70px;
         left: 10px;
         bottom: 0;
         overflow: auto;
      }
   }
}

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

/** Fixes for Font Awesome 5 icons not showing at all or
with incorrect shading in some cases */

.fa:before, .fas:before, .fa:after, .fas:after {
   font-weight: 900;
}

.far {
   &:before, &:after {
      font-weight: 400;
   }
}

.fa-lg {
   font-size: 1.2em;
}

.disabled {
   color: red !important;
}

.enabled {
   color: green !important;
}

input:disabled + .label-checkbox {
   cursor: not-allowed;
}
/** Custom CSS form */
.custom_css_configuration td:not([colspan]) {
   width: 50%;
}
.custom_css_configuration tbody,
.custom_css_configuration tr,
.custom_css_configuration td,
.custom_css_configuration .custom_css_container {
   max-width: inherit; /* chain inherit "max-width" from table element to editor container */
}
.custom_css_configuration .custom_css_container {
   width: 100%;
}
.custom_css_configuration .custom_css_container textarea {
   box-sizing: border-box;
   min-height: 250px;
   width: 100%;
}
.custom_css_configuration .custom_css_container .CodeMirror.input-disabled {
   background: rgb(235, 235, 228); /* default bg color for disabled inputs */
}

/** Impersonate feature */
div.banner-impersonate {
   background: #ff3d2a;
   color: #fff;
   font-weight: bold;
   padding: 10px;
   text-align: right;
}
div.banner-impersonate button {
   color: inherit;
   margin-left: 5px;
   text-decoration: underline;
}

/** objectlock message */
div.objectlockmessage {
   @extend .navigationheader;
   background-color: lightSalmon !important;
   flex-wrap: wrap;
   align-items: center;
}

div.objectlockmessage a.vsubmit {
   margin: 0 15px;
   white-space:nowrap;
}

div.objectlockmessage > .form-group-checkbox {
   padding-left: 5px;
}

@import 'impact';

/** Kanban */
#page .kanban {
   position: relative;
   height: 100%;

   .kanban-toolbar {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      font-size: 14px;
      background-color: #fbfbfb;
      border: 1px solid #d6d6d6;
      padding: 10px;

      .select2-selection {
         height: 30px;

         .select2-selection__rendered {
            font-size: 13px;
            line-height: 29px;
         }

         .select2-selection__arrow {
            height: 25px;
         }
      }

      input[type=text][name=filter]:not([type=submit]):not([type=button]) {
         flex: 1 0 auto;
         border-radius: unset;
         background-color: white !important;
         padding: 5px 10px;
         font-size: 13px;
      }
      input[type=button].kanban-add-column:not([type=submit]):not([type=text]) {
         margin-left: 5px;
         padding: 7px 10px;
         font-size: 13px;
      }
      .fas {
         margin: auto auto auto 10px;
         font-size: 1.2em;
         cursor: pointer;
      }
      .select2 {
         min-width: 150px;
      }
   }
   .kanban-form {
      text-align: left;
      padding: 10px 10px 10px 10px;
      background-color: white;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      border: #d3d3d3 1px solid;
      z-index: 10;
      input {
         border-radius: unset !important;
         &[type=checkbox] {
            margin-right: 5px;
         }
         &:not([type=checkbox]) {
            display: block;
         }
         &:not([type=submit]):not([type=checkbox]) {
            width: 90%;
            padding: 5px 10px;
         }
         &[type=submit] {
            margin: auto;
         }
         &[type=button] {
            width: 100%;
         }
      }
      .select2 {
         width: 90%;
         .selection .select2-selection {
            max-width: unset;
         }
      }
      .kanban-item-subtitle {
         font-style: italic;
         font-weight: normal;
      }
      .kanban-item-content {
         margin-bottom: 5px;
         .kanban-columns-list {
            max-height: 50vh;
            overflow-y: auto;
            margin: 10px 0;

            li {
               padding: 5px 0px 0px 0px;
            }
         }
      }
   }
   .kanban-container {
      overflow: auto;
      .kanban-dropdown {
         position: fixed;
         width: max-content;
         min-width: 100px;
         background-color: #f1f1f1;
         border: 1px solid #7f7979;
         text-align: left;
         li {
            background-color: white;
            color: #333333; // Default text color
            margin-top: 2px;
            position: relative;
            a, span {
               color: inherit;
               cursor: pointer;
               display: block;
               font-weight: bold;
               padding: 10px;
               &:hover {
                  background-color: #3a5693;
                  color: white;
               }
               i {
                  color: inherit;
               }
            }
            ul {
               position: absolute;
               left: 100%;
               top: 0;
               display: block;
               width: max-content;
               min-width: 100px;
               background-color: #f1f1f1;
               outline: 1px solid #7f7979; // Use outline instead of border on submenus to avoid them being aligned off by one pixel
               margin-left: 1px;
            }
            i {
               margin-right: 1em;
            }
         }
         li:first-of-type {
            margin-top: 0;
         }
         li.dropdown-trigger {
            &.active {
               background-color: #3a5693;
               color: white;
            }
            a:after {
               content: "\f054";
               font-family: "Font Awesome\ 5 Free";
               font-weight: 900;
               padding-left: 10px;
            }
         }
      }
      .kanban-columns {
         width: max-content; /* Fix overflow when collapsed */
         display: flex;
         .kanban-column {
            margin-right: 8px;
            background-color: #f1f1f1;
            border: #d3d3d3 1px solid;
            min-width: 200px;
            height: 600px;
            border-radius: 5px;
            flex-direction: column;
            flex: 1 0 auto;
            text-align: center;

            &.ui-sortable-helper {
               cursor: grab;
            }

            &.collapsed {
               min-width: unset;
               width: calc(1.2em + 20px);

               .kanban-column-header {
                  box-shadow: unset;

                  .kanban-column-header-content {
                     flex-direction: column;

                     .kanban-collapse-column, .kanban-column-title, .kanban_nb {
                        transform: rotate(90deg);
                        transform-origin: center;
                        display: inline-block;
                        margin: calc(50% - 8px) 0;
                        white-space: nowrap;
                     }

                     .kanban-collapse-column {
                        margin: 0 0 8px 0;
                     }

                     .kanban-column-toolbar {
                        display: none;
                     }
                  }
               }
               .kanban-body {
                  display: none;
               }
            }

            .kanban-column-header {
               background-color: #f1f1f1;
               border-top: 3px solid #f1f1f1;
               box-shadow: 0 1px 1px #dbdbdb;
               font-size: 1.2em;
               padding: 10px;
               margin-bottom: 5px;

               .kanban-column-header-content {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
               }

               .pointer {
                  opacity: .3;

                  &:hover {
                     opacity: 1;
                  }
               }

               i.fas {
                  cursor: pointer;
                  //flex-direction: column;
                  flex: 0 1 auto;
                  position: relative;
                  // Increase click area to make it easier to collapse/expand boards
                  &:after {
                     content: '';
                     position: absolute;
                     top: -50%;
                     left: -50%;
                     width: 200%;
                     height: 200%;
                  }
               }
               .kanban-column-title {
                  margin-left: 15px;
                  padding: 3px 12px;
                  border-radius: 50px;

                  &.kanban-text-light {
                     color: white;
                  }
                  &.kanban-text-dark {
                     color: black;
                  }
               }
               .kanban_nb {
                  padding: 2px 5px 2px 5px;
                  background-color: white;
                  border-radius: 20px;
                  margin-left: 10px;
               }
               .kanban-column-toolbar {
                  margin-left: auto;
                  flex-direction: column;
                  flex: 0 1 auto;
                  i {
                     margin-left: 12px;
                  }
               }
            }
            .kanban-body {
               min-height: 150px;
               padding: 0 5px 0 5px;
               height: calc(100% - (1.2em + 35px));
               overflow-y: auto;
               overflow-x: hidden;
               .kanban-add-form {
                  input {
                     border-radius: unset !important;
                     display: block;
                     margin: 8px 0 0;
                     padding: 5px 10px;

                     &:not([type=submit]) {
                        width: 90%;
                     }
                     &[type=submit] {
                        margin: auto;
                     }
                  }
                  textarea {
                     border-radius: unset !important;
                     width: 90%;
                     resize: vertical;
                     margin: 8px 0;
                     padding: 5px 10px;
                  }
               }
               .kanban-add-form {
                  padding-top: 10px !important;
                  padding-bottom: 10px !important;
               }

               .kanban-item, .kanban-add-form {
                  text-align: left;
                  padding-left: 0;
                  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
                  min-height: 50px;
                  margin-top: 5px;
                  border-radius: 5px;
                  border: #d3d3d3 1px solid;
                  min-width: 250px;
                  &:not(.deleted) {
                     background-color: white;
                  }
                  &.filtered-out {
                     display: none;
                  }
                  &.ui-sortable-helper {
                     cursor: grab;
                  }
                  .kanban-item-header, .kanban-item-header a {
                     .fas {
                        &:hover {
                           text-decoration: none;
                        }
                        float: right;
                        cursor: pointer;
                     }
                     .kanban-item-title .fas {
                        float: none;
                        &:last-of-type {
                           margin-right: 5px;
                        }
                     }
                     padding: 5px 10px 0;
                     color: black;
                     font-size: 1.1em;
                     font-weight: bold;
                     a:hover {
                        text-decoration: underline;
                     }
                     a {
                        padding: unset;
                     }
                  }
                  .kanban-item-content {
                     padding: 0 10px 0 10px;
                     .kanban-core-content {
                        display: flex;
                        flex-wrap: wrap;
                        margin: 10px 0 10px 0;
                     }
                  }
                  .kanban-item-team {
                     display: flex;
                     padding-right: 10px;
                     padding-bottom: 10px;
                     span:first-of-type {
                        margin-left: auto;
                     }
                     span {
                        margin-right: 2px;
                        img {
                           border-radius: 50%;
                        }
                        &.fa-stack {
                           width: 2em;
                        }
                     }
                  }
               }
            }
         }

         > .sortable-placeholder {
            min-width: 200px;
            height: 600px;
            margin: 0 8px 0 0;
            border-radius: 5px
         }
      }
   }
   .kanban-color-preview {
      width: 1em;
      height: 1em;
      display: inline-block;
      margin-right: 5px;
      vertical-align: middle;
   }

   .sortable-placeholder {
      border: 2px dashed #dad55e;
      background: #fffa90;
      color: #777620;
      height: 40px;
      margin-top: 5px;
      &.invalid-position {
         border: 2px dashed #d3413c;
         background: #ff7370;
         color: #792220;
      }
   }
}

.flex-break {
   width: 100%;
}

div.progress {
   background-color: #d3d3d3;
   width: 100%;
   height: 1em;
   border-radius: 5px;
   .progress-fg {
      background-color: #8cabdb;
      height: 1em;
      float: left;
      border-radius: 5px;
   }
}


/* Styles for update page */
.tab_check td i.fas {
   font-size: 12px;
   margin-right: 3px;
}
.tab_check td i.fa-check {
   color: #008e2c;
}
.tab_check td i.fa-exclamation-triangle {
   color: #ffa500;
}
/* /Styles for update page */

.lockedfield i.fa-lock {
   float: right;
   font-size: 1em;
   color: grey;
   font-weight: 900;
}

/* Flex horizontal forms */
.horizontal-form {
   margin-left: 20px;
   text-align: left;

   .fa {
      padding: 0 0.3em;
   }

   .form-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 10px;

      label {
         flex: 1 0 200px;
         max-width: 200px;
      }

      label + * {
         flex: 1 0 250px;
      }
   }

   .form-row-vertical {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      margin-bottom: 10px;

      label {
         flex: 1 0 20px;
      }
   }
}


/** style for relations **/
.relations_list {
   li {
      padding: 6px;
      border: 1px solid transparent;

      .delete_relation {
         margin-left: 8px;
         visibility: hidden;
      }

      &:hover {
         border-color: rgba(0, 0, 0, .3);

         .delete_relation {
            visibility: visible;
         }
      }
   }

   .add_relation {
      padding: 7px;
      display: block;
   }
}
/** /style for relations **/

.log-toolbar {
   padding-right: 8px !important;

   .log-toolbar-item {
      float: right;
      margin-left: 10px;
      cursor: pointer;
      opacity: 0.8;
      font-size: 1.4em;

      &:hover, &.active {
         opacity: 1;
      }
   }
}

.netport {
   td {
      &.green {
      background-color: green;
         color: white;
      }

      &.red {
         background-color: red;
         color: white;
      }

      &.orange {
         background-color: orange;
         color: white;
      }
   }

   &.trunk {
      background-color: MediumAquamarine;
   }

   &.hub {
      background-color: LightSalmon;
   }

   &.cotrunk {
      background-color: silver;
   }

   &.aggregated,
   .aggregated {
      background-color: teal;
      color: white;
      padding-left: 2em;

      a {
         color: white;
      }
   }

   .hub {
      border: 1px grey solid;
      margin: 0 .5em 0 .5em;

      div {
         padding: .2em .5em;
         border-bottom: 1px grey solid;
         &:last-of-type {
            border-bottom: none;
         }
      }
   }
}

.legend {
   width: 100%;
   td.netport {
      text-align: center;
      width: 25%;
   }
}

.dashboard.printer_barchart .g-chart .chart {
   flex:none;
   height: 500px;
}

.spinner-18 {
   background: transparent url(../pics/spinner.gif) no-repeat center center;
   display: none;
   vertical-align: middle;
   margin: auto;
   border: none;
   height: 24px;
   width: 24px;
}

.mr10px {
   margin-right: 10px !important
}

.pending_detail{
   margin-top: 6px;
   margin-left: 2px;

   .fas {
      margin-left: 5px;
   }
}