/* ---------------------------------------------------------
 * WKHEOPS : Css de base
   --------------------------------------------------------- 
   Font
------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Condensed');

/* ---------------------------------------------------------
 * Variables
 * Changer apre le chargement de page par un script js
------------------------------------------------------------ */
:root
    {
      --backgroun-but-toolbox: transparent; /* wk2 */
      --backgroun-but-color: transparent;
    }

[data-bs-theme=dark]
    .table
    { --bs-table-color: var(--bs-gray-400);
    }

/* ---------------------------------------------------------
 * Tag
------------------------------------------------------------ */
html
    { overflow: hidden;
    }

body
    { font-family: "Ubuntu",sans-serif;
      background-color: darkgray;
    }

p   { font-size: 1.1em;
      font-weight: 300;
      line-height: 1.7em;
      color: #999;
    }

.mb-wt
    { margin-bottom: 1px;
    }

.mr-wt
    { margin-right: 4px;
    }

.ml-wt
    { margin-left: 5px;
    }

.start-70
    {
      left: 70% !important;
    }

.wkshortcut
    {
      font-size: 0.65em;
      vertical-align: super;
    }

#wk-icon img
    { width: 48px ;
      height: 48px;
      margin-left: 5px;
    }

.wk-loading
    {
      width: auto;
      height: auto;
      background-color: whitesmoke;
      border: 0;
      padding: 0px;
      margin: 0px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 100;
    }

.wk-bg
    { margin: 0.0em;
      padding: 0.0em;
      height: calc(100% - 58px);
      background-color: rgba(0,0,0,.4);
    }

.wk-bg-form
    { margin: 0.0em;
      padding: 0.0em;
      height: calc(100% - 58px);
    }

.wk-bg-img
    { background-size: cover;
    }

.wk-bg-orange
    { background-color: orange;
    }

.wk-txt-placeholder
    { background-color: #ccc !important;
      color: #ccc !important;
    }

.wk-slogan-photo
    {
      max-width: calc(100vw - 50px);
    }

.wk-slogan-button
    {
      max-width: calc(100vw - 100px);
    }

.photocredit
    {
      margin-right: 10px;
      margin-top: 7px;
      color: white;
      font-size: .75rem;
      line-height: 43px;
    }

.wk-bg-empty
    { margin: 0.0em;
      padding: 0.0em;
      height: calc(100% - 58px);
      background-color: rgba(0,0,0,.4);
    }

.wk-bg-cloud
    { margin: 0.0em;
      padding: 0.0em;
      height: calc(100% - 58px);
      width: calc(100% + 12px);
      background-color: rgba(0,0,0,.4);
    }

.wk-bg-login
    {
      padding: 0px;
      height: calc(100% - 58px);
    }

.wk-bg-login .card,
.wk-bg-login .card-header
    {
      background-color: transparent;
      border: none ;
    }

.btn-block
    { width: 100%;
    }

.wk-btn-png
    { margin-top: 2px;
      margin-bottom: 2px;
    }

.wk-btn-spr
    { margin-top: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      margin-right: 4px;
      border-color: transparent;
      padding-top: 0px;
      padding-bottom: 0px;
    }

.wk-btn-clr
    { margin: 0px;
      border-color: transparent;
      border: 0px;
      padding: 0px;
    }

.btn.show
    { border-color: transparent;
    }

.wk-btn-spr-page
    { padding: 0.25rem 0.25rem !important;
    }

.wk-btn-attention
    { font-size: 1.3rem;
      padding-bottom: 0.0rem;
      padding-top: 0.0rem;
      padding-right: 1.0rem;
      padding-left: 1.0rem;
    }

.wk-btn-attention-spr
    { padding-bottom: 0.0rem;
      padding-top: 0.0rem;
      padding-right: 1.0rem;
      padding-left: 1.0rem;
    }

.wk-btn-dia
    { background-color: var(--bs-primary);
      color: white;
      width: 100%;
    }

.wk-texte
    { display: block;
    }

.wk-texte p
    { color: black ;
    }

.wk-input-right
    { text-align: right;
    }

.wk-input-center
    { text-align: center;
    }

.wk-check-texte
    { background-color: var(--bs-secondary-bg);
      padding: 17px 5px 0px 17px !important;
      line-height: 1.0 !important;
    }

.wk-check-texte a
    { text-decoration: underline !important;
    }

.wk-check-float
    { border-color: var(--bs-secondary-border-subtle);
      opacity: 1;
    }

.btn-titel
   {
      background-color: var(--bs-btn-bg);
      border-color: #dadada;
   }

.btn-titel:hover
   {
      background-color: var(--bs-btn-bg);
      border-color: black ;
   }

.btn-titel-blue
   {
      background-color: rgba(var(--bs-primary),var(--bs-bg-opacity));
      border-width: 0;
      color: white;
   }

.btn-titel-blue:hover
   {
      background-color: rgba(var(--bs-primary),var(--bs-bg-opacity));
      border-width: 0;
      color: black;
   }

.btn-header
   {
      background-color: var(--bs-btn-bg);
      border-color: #dadada ;
      font-size: 20px;
   }

.btn-header:hover
   {
      background-color: var(--bs-btn-bg);
      border-color: darkslategray ;
   }

.btn-arround
   {
      background-color: transparent;
   }

.input-group-wk
    { margin-bottom: 1px !important ;
    }

.input-group-custom-wk
    { max-height: 25.6px;
      margin-bottom: 2px;
    }

.wk-badge
    { text-align: left;
      font-size: 90%;
    }
.wk-badge-sm
    { text-align: left;
      font-size: 75%;
    }
/* ---------------------------------------------------------
   Boite de dialog
------------------------------------------------------------ */
.btn-wkheader:hover
     { color:var(--bs-dark);
       box-shadow: none;
     }

.btn-wkheader:focus
     { color:var(--bs-dark);
       box-shadow: none;
     }

.btn-wkheader
     { color: var(--bs-light);
       background-color: var(--bs-primary);
       border-color: var(--bs-primary);
       border-width: 0;
       padding-bottom: 0.3rem;
       padding-top: 0.0rem;
     }

.btn-wkheader-right
     { padding-right: 1.0rem;
       padding-left: 1.0rem;
     }

.btn-wkheader-left
     { padding-right: 0.3rem;
       padding-left: 0rem;
     }

.container-dialog
    { padding: 0px;
      margin: 0px;
    }

.modal-wtcontentbody
    {
      height: calc(100vh - 98px);
      align-items: start;
      margin: 0px;
    }

.modal-wtcontent
    {
      border-width: 0px ;
    }

[data-bs-theme=light]
    {
      .modal-body-verybig,
      .modal-body-big,
      .modal-body-medium,
      .modal-body-small
         {
           background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
         }
    }

[data-bs-theme=dark]
    {
      .modal-body-verybig,
      .modal-body-big,
      .modal-body-medium,
      .modal-body-small
         {
           background: #2a2a2e;
         }
    }


.modal-dialog-big
    { max-width: 1000px;
    }

.modal-dialog-medium {
    max-width: 800px;
}

.modal-body-big {
    min-height: 400px;
}

.modal-body-verybig {
    min-height: calc(100vh - 200px) ;
}

.modal-verybig {
    max-width: calc(100vw - 100px);
}

.modal-body-medium {
    min-height: 300px;
}

.modal-wkheader
     { background-color: var(--bs-primary);
       color: var(--bs-light);
       padding-bottom: 0.0rem;
       padding-top: 0.3rem;
       padding-right: 0.1rem;
       padding-left: 1.1rem;
       line-height: 1.8;
     }

.modal-wkheader-form
     { background-color: var(--bs-primary);
       color: white;
       padding-bottom: 0.0rem;
       padding-top: 0.3rem;
       padding-right: 0.1rem;
       padding-left: 1.1rem;
       line-height: 1.8;
     }

.modal-header-btn1
     { display: grid;
       grid-template-columns: 1fr ;
     }

.modal-header-btn2
     { display: grid;
       grid-template-columns: 1fr 1fr ;
     }

.modal-header-btn3
     { display: grid;
       grid-template-columns: 1fr 1fr 1fr ;
     }

.container-dialog
     { min-width: 100%;
     }

.alert-spr
     { padding: 1px;
       padding-left: 5px;
       margin: 0px;
       margin-bottom: 4px;
     }

.pagination-wk
     { margin-top: 0px;
       margin-bottom: 4px;
     }

.page-link-wk
     { font-size: .675rem !important;
       padding: 2px 5px !important;
       margin: 2px 0px 2px 0px !important;
     }me

.wt-shadow
     { background-color: var(--bs-secondary-bg);
     }

.bg-wkheader
     { background-color: var(--bs-primary);
     }

.modal-wkheader h5
     { line-height: 1.5;
     }

.bg-wkmenu
     { background-color: var(--bs-body-bg);
       min-height: 35px;
       max-height: 35px;
     }

.nav-link.wk-onglet
    { border-width: 0px;
      padding-bottom: 0.1rem;
      padding-top: 0.3rem;
      padding-right: 0.4rem;
      padding-left: 0.4rem;
      color: var(--bs-light-text-emphasis);
      background-color: transparent;
    }

.nav-underline .nav-link.active
    { background-color: var(--bs-secondary-bg);
    }

[data-bs-theme=light]
    {
       .nav-underline .nav-link.active
       { background-color: #e0c3fc;
       }
    }

ul.nav-underline
    { border-bottom: solid;
      border-color: lightgray
    }

@media (max-width: 400px)
     { .bg-wkmenu,
       .nav-link,
       .nav-link.wk-onglet
          { padding-left: 2px;
            padding-right: 2px;
          }
       .nav-underline
          { column-gap: 2px;
            font-size: 11px;
          }
     }


.wk-break
     { background-color: transparent;
       padding: .0rem .2rem;
       margin-top: 0.4rem;
       margin-bottom: 0.0rem;
       font-weight: bolder;
       font-size: medium;
       width: 100%;
     }


.text-divider{margin: 2em 0; line-height: 0; text-align: center;}
.text-divider span{background-color: #f5f5f5; padding: 1em;}
.text-divider:before{ content: " "; display: block; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #f7f7f7;}

.wk-comment
     {
       font-size: 0.9rem;
       margin: 0px;
     }

.input-group-sm > .form-control[readonly]
    { box-shadow: 0 0 0 0 ;
      text-shadow: 0 0 0 #495057;
      background-color: var(--bs-secondary-bg);
      border-color: var(--bs-secondary-border-subtle)
    }

.input-group-sm > .form-select {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}

.input-group-lg > .form-control[readonly]
    { box-shadow: 0 0 0 0 ;
      color: transparent;
      text-shadow: 0 0 0 #495057;
      background-color: transparent;
      border-color: var(--bs-secondary-border-subtle)
    }

.form-control[readonly] :focus
    { outline: none;
    }

 .form-control-titel
    { font-weight: 600;
    }

.form-control-fload2
    { display: grid;
      grid-template-columns: 70px auto;
      grid-gap: 5px;
    }

 .input-group-sm > .form-control-wt,
 #inputGroup-sizing-sm,
 .input-group .form-control-wt .select
    { padding-top: .1rem;
      padding-bottom: .1rem;
      padding-left: .25rem;
      padding-right: .25rem;
      height: 1.6rem;
    }

.form-header
    { background-color: var(--bs-secondary-bg);
      border-color: var(--bs-secondary-border-subtle)
    }

.input-group-sm > .form-control:not(textarea)
    { height: 1.6rem;
    }

.input-group-sm select.form-control:not([size]):not([multiple])
{
  padding-top: .2rem;
  padding-bottom: .1rem;
  height: 1.6rem;
}

.input-group-text-wk
       { background-color: transparent;
         border-color: transparent;
       }

.input-group-sm > .form-control:disabled
             {
               border-color: #bbbbbb;
             }

.input-group-lg > .form-control
             { padding-top: 0.6rem;
               padding-bottom: 0.6rem;
               font-size: 0.9rem;
               font-weight: 700;
             }

.input-group-lg > .form-control:disabled
             {
               border-color: transparent;
               background-color: transparent;
             }

.input-group-lg > div.form-control
             {
               border-color: transparent;
               background-color: transparent;
               margin-top: 0px;
               margin-bottom: 0px;
               padding-top: 0px;
               padding-bottom: 0px;
             }

/* ---------------------------------------------------------
   Formulaire
------------------------------------------------------------ */
.wk-bt-primary
       { background-color: var(--bs-primary);
         border-color: var(--bs-primary);
         color: #fff;
       }

/* ---------------------------------------------------------
   Formulaire 2 colonnes + image
------------------------------------------------------------ */
.wkform1c
      { padding: 0;
        margin: 0;
      }

.wkform1c-container
      { min-height: max(680px,calc(100vh - 250px));
        display: grid;
        grid-template-columns: 10% 1fr 1fr 10%;
        grid-template-rows: 1fr 65px 40px;
        grid-row-gap: 2px;
        grid-column-gap: 5px;
        grid-template-areas:
          "margeg body body marged"
          "margeg info info marged"
          "margeg foot foot marged" ;
      }

.wkform1c-mg
{ grid-area: margeg;
}

.wkform1c-body
{ background-color: #fff;
  grid-area: body;
}

.wkform1c-info
{ background-color: #fff;
  grid-area: info;
  padding: 2px;
}

.wkform1c-vide
{ display: none;
  background-color: #fff;
  grid-area: vide;
}

.wkform1c-md
{ grid-area: marged;
}

.wkform1c-footer
{ grid-area: foot;
  align-self: center;
}

@media (max-width: 1021px) {
    .wkform1c-container {
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 70px 40px;
     grid-template-areas:
       "body body"
       "info info"
       "foot foot" ;
    }

    .wkform1c-mg {
        display: none;
    }
    .wkform1c-md {
        display: none;
    }
}

@media (max-width: 721px) {
    .wkform1c-container {
     grid-template-columns: 1fr ;
     grid-template-rows: 1fr 135px 40px;
     grid-template-areas:
       "body"
       "info"
       "foot";
    }

    .wkform1c-vide {
        display: none;
    }
}

.wkform2c
      { padding: 0;
        margin: 0;
      }

.wkform2c-container
      { min-height: calc(100vh - 230px);
        display: grid;
        grid-template-columns: 8% 2fr 1fr 8%;
        grid-template-rows: 140px 1fr 40px;
        grid-row-gap: 10px;
        grid-column-gap: 10px;
        grid-template-areas:
          "margeg body infos marged"
          "margeg body image marged"
          "margeg foot foot marged" ;
      }

.wkform2c-mg
{ grid-area: margeg;
}

.wkform2c-body
{ background-color: #fff;
  grid-area: body;
}

.wkform2c-infos
{ background-color: #fff;
  grid-area: infos;
  padding: 10px;
}

.wkform2c-image
{ grid-area: image ;
  justify-self: center;
  align-self: center;
}

.wkform2c-image img
{ max-height: calc(100vh * .55);
}

.wkform2c-md
{ grid-area: marged;
}

.wkform2c-footer
{ grid-area: foot;
  align-self: center;
}

@media (max-width: 1021px) {
    .wkform2c-container {
     grid-template-columns: 2fr 1fr;
     grid-template-rows: 140px 1fr 40px;
     grid-template-areas:
       "body infos"
       "body image"
       "foot foot" ;
    }
    .wkform2c-mg {
        display: none;
    }
    .wkform2c-md {
        display: none;
    }
}

@media (max-width: 721px) {
    .wkform2c-container {
     grid-template-columns: 70px 1fr ;
     grid-template-rows: 120px 1fr 100px;
     grid-template-areas:
       "image infos"
       "body body"
       "foot foot";
    }
    .wkform2c-image
    { justify-self: left;
    }

    .wkform2c-image img
    { max-height: 90px ;
      margin-left: 5px ;
    }
}

.wkform2r
      { padding: 0;
        margin: 0;
      }

.wkform2r-container
      { min-height: calc(100vh - 240px);
        display: grid;
        grid-template-columns: 8% 2fr 1fr 8%;
        grid-template-rows: 10px 100px 1fr 40px;
        grid-row-gap: 10px;
        grid-column-gap: 10px;
        grid-template-areas:
          "margeg head head marged"
          "margeg body infos marged"
          "margeg body resume marged"
          "margeg foot foot marged" ;
      }

.wkform2r-mg
{ grid-area: margeg;
}

.wkform2r-header
{ grid-area: head;
}

.wkform2r-body
{ background-color: #fff;
  grid-area: body;
  padding-left: 4px;
  padding-top: 4px;
  padding-right: 4px;
}

.wkform2r-infos
{ background-color: #fff;
  grid-area: infos;
  padding: 10px;
}

.wkform2r-resume
{ grid-area: resume ;
}

.wkform2r-md
{ grid-area: marged;
}

.wkform2r-footer
{ grid-area: foot;
  align-self: center;
}

@media (max-width: 1021px) {
    .wkform2r-container {
     grid-template-columns: 2fr 1fr;
     grid-template-rows: 20px 100px 1fr 40px;
     grid-template-areas:
       "head head"
       "body infos"
       "body resume"
       "foot foot" ;
    }
    .wkform2r-mg {
        display: none;
    }
    .wkform2r-md {
        display: none;
    }
}

@media (max-width: 721px) {
    .wkform2r-container {
     grid-template-columns: 1fr ;
     grid-template-rows: 20px auto 1fr  minmax(40px, auto) 40px;
     grid-template-areas:
       "head"
       "resume"
       "body"
       "infos"
       "foot";
    }
}

.wkform3c
      { padding: 0;
        margin: 0;
      }

.wkform3c-container
      { min-height: calc(100vh - 250px);
        background-color: white;
        display: grid;
        grid-template-columns: 2% 1fr 2% 1fr 2%;
        grid-template-rows: 10px 130px 1fr 40px;
        grid-row-gap: 10px;
        grid-column-gap: 10px;
        grid-template-areas:
          "margg head head head margd"
          "margg info1 margc info2 margd"
          "margg body1 margc body2 margd"
          "margg foot foot foot margd" ;
      }

.wkform3c-mg    { grid-area: margg ; }
.wkform3c-mc    { grid-area: margc ; }
.wkform3c-md    { grid-area: margd ; }
.wkform3c-body1 { grid-area: body1 ; }
.wkform3c-info1 { grid-area: info1 ; }
.wkform3c-body2 { grid-area: body2 ; }
.wkform3c-info2 { grid-area: info2 ; }

.wkform3c-body1,
.wkform3c-body2
{ border-radius: 8px;
  padding: 5px;
}

.wkform3c-info1,
.wkform3c-info2
{ border-radius: 8px;
  padding: 10px;
  background-color: var(--bs-secondary-bg-subtle) ;
}

.wkform3c-header
{ grid-area: head;
  justify-self: start;
  align-self: center;
}

.wkform3c-footer
{ grid-area: foot;
  align-self: center;
  background-color: transparent;
}

.wkform3c-mg,
.wkform3c-mc,
.wkform3c-md
       { background-color: transparent;
       }

@media (max-width: 1028px) {
    .wkform3c-container {
     grid-template-columns: 3% 1fr 3% ;
     grid-template-rows: 10px 140px 1fr 10px 140px 1fr 40px;
     grid-template-areas:
        "margg head margd"
        "margg info1 margd"
        "margg body1 margd"
        "margg margc margd"
        "margg info2 margd"
        "margg body2 margd"
        "margg foot margd";
    }
}

@media (max-width: 721px) {
    .wkform3c-container {
     grid-template-columns: 100% ;
     grid-template-rows:  10px 140px 1fr 140px 1fr 40px ;
     grid-template-areas:
       "head"
       "info1"
       "body1"
       "info2"
       "body2"
       "foot";
    }

    .wkform3c-mg,
    .wkform3c-mc,
    .wkform3c-md
    {
        display: none;
    }
}

/* ---------------------------------------------------------
   Table de content header
------------------------------------------------------------ */
#WkSelectIdx
     { min-width: 225px;
     }

/* ---------------------------------------------------------
   Table de content body
------------------------------------------------------------ */
.table th
     { font-size: 0.9em;
       font-weight: 700;
       line-height: 1.1em;
       padding-bottom: 0.65rem;
       padding-top: 0.65rem;
       padding-left: 0.35rem;
       padding-right: 0.35rem;
     }

.table-hover td
      { font-size: 0.9em;
        font-weight: 400;
        line-height: 0.7em;
        padding-bottom: 0.05rem;
        padding-top: 0.05rem;
        padding-left: 0.35rem;
        padding-right: 0.35rem;
      }

.table-nobtn td
      { font-size: 0.9em;
        font-weight: 400;
        line-height: 0.7em;
        padding-bottom: 0.35rem;
        padding-top: 0.35rem;
        padding-left: 0.35rem;
        padding-right: 0.35rem;
      }

.table-nobtn td.total
      { font-weight: 700;
        line-height: .9em;
      }

.wk-cell20
     { max-width: 180px ;
     }

.wk-cell15
     { max-width: 135px ;
     }

.wk-cell10
     { max-width: 90px ;
     }

.wk-cell05
     { max-width: 90px ;
     }

.wk-cell
     {
     }

.btn-popup,
.btn-popup:hover
     { background-color:transparent;
       padding-left: 0;
       padding-top: 0;
       padding-bottom: 0;
       padding-right: 0.15rem;
     }

.wk-dropdown-combo
     { font-size: 0.875rem;
       overflow-y: scroll;
       max-height: 200px;
     }

.wk-dropdown-item
     { padding: 0.35rem 1.5rem;
       color: black;
     }

.wk-dropdown-menu-lt
     { border-radius: 0;
       padding: 0;
       font-size: 0.750rem;
    }

.wk-dropdown-item-lt,
.wk-dropdown-item-lt
    { padding: 0.1rem 0.25rem;
      /*color: #495057;*/
    }

.wk-dropdown-item-lt:hover,
.wk-dropdown-item-lt:focus
    { background-color: #e9ecef;
      color: black;
    }

.wk-hide
    { display: contents;
      max-width: 0px;
      border: 0;
    }

/* ---------------------------------------------------------
   Sidebar
------------------------------------------------------------ */
.wt-btn
    { font-size: 18px;
      background-color: #eee;
      color: #000;
    }

.btn-firme
    { color:#fff;
      background-color: #808080;
      border-width: 1px;
      border-color: #808080;
    }

.btn-firme.active,
.btn-firme:active,
.btn-firme:focus,
.btn-firme:link,
.btn-firme:hover {
        color: #fff;
        border-width: 1px;
        background-color: #c0c0c0;
        border-color: #808080;
        text-decoration: none;
        outline:0;
    }

a,
a:focus,
a:hover,
a:link
    { color: inherit;
      text-decoration: none;
      transition: all 0.3s;
      outline:0;
    }

#sidebar .navbar
    { padding: 15px 10px;
      min-height: 85px;
      max-height: 85px;
      border: none;
      border-radius: 0;
      margin-bottom: 40px;
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    }

.line
    { width: 100%;
      height: 1px;
      border-bottom: 1px dashed #ddd;
      margin: 20px 0;
    }

.hidden,
#inwkuploadfile
    { display: none;
    }
/* ---------------------------------------------------
 * SIDEBAR STYLE
 * --------------------------------------------------- */
.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    color: #fff;
    transition: all 0.3s;
    background-color: rgba(0,0,0,.4);
}

#sidebar .navbar {
    padding: 15px 10px;
    min-height: 5em;
    max-height: 5em;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}

#wktitel {
    margin: 0px;
}

#sidebar.active {
    min-width: 5em;
    max-width: 5em;
    text-align: center;
}

#SideLogo
    { cursor:pointer;
    }

#sidebar.active #SideLogo
    { padding-left: 10px;
    }

#sidebar.active .tb-lg,
#sidebar.active .sb-lg {
    display: none;
}

#sidebar div.tb-sm,
#sidebar span.sb-sm,
#sidebar i.sb-sm,
#sidebar a.sb-sm
         { display: none;
         }

#sidebar.active .tb-sm {
    display: grid;
}

#sidebar.active .sb-sm {
    display: block;
}

#sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before {
    top: auto;
    bottom: 5px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}

#sidebar .sidebar-header {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 58px;
    align-items: start;
    justify-items: center;
    padding: 0px;
}

#sidebar .sidebar-header h2 {
    color: #fff;
    font-weight: bolder;
    text-shadow: 1px 1px 1px #666;
    margin-right: 20px;
    margin-top: 5px;
}

#toolbox {
    border-bottom: 1px solid #fff ;
}

button::before
            { display: none;
            }

#toolbox-lg { display: grid;
              grid-template-columns: 1fr 1fr 1fr 1fr;
              grid-template-rows: 48px;
              align-items: start;
              justify-items: center;
            }

#toolbox-sm { display: grid;
              grid-template-columns: 1fr;
              grid-template-rows: 48px;
              align-items: start;
              justify-items: center;
            }

#nav-wk     { padding: 0px ;
              background-color: white ;
            }

.nav-search { width: 100% ;
              padding-top: 10px;
            }
#search     { min-height: 41px;
            }

#toolbox-lg button,
#toolbox-lg button:focus,
#toolbox-sm button,
#toolbox-sm button:focus,
#nav-wk button,
#nav-wk button:focus,
.wk-dropdown-menu,
.wk-dropdown-menu:focus
   {
     background: var(--bs-light);
   }

#toolbox-lg button:hover,
#toolbox-sm button:hover,
#nav-wk button:hover,
.wk-dropdown-item:hover,
.nav-link.wk-onglet:hover
   {
     background: var(--bs-secondary-bg);
   }

[data-bs-theme=light]
    {
       .nav-link.wk-onglet:hover
       { background-color: #e0c3fc;
       }
    }

#toolbox-lg button i,
#toolbox-sm button i
   { color: var(--backgroun-but-color);
     max-height: 18px;
     max-width: 18px;
   }

#choice.mobile
   { overflow-y: auto !important;
     overflow-x: hidden !important;
     max-height: 100%;
     position: fixed;
     width: 250px;
   }

#choice.desktop
   { overflow-y: auto !important;
     overflow-x: hidden !important;
     max-height: calc(100vh - 259px);
     position: fixed;
     width: 250px;
   }

#sidebar.active #choice.mobile
   {
     width: 80px;
     max-height: calc(100vh - 113px);
   }

#sidebar.active #choice.desktop
   {
     width: 80px;
     max-height: calc(100vh - 113px);
   }

#firme
   { border-top: 1px solid #fff ;
     max-width: 250px;
   }

#sidebar ul li {
    background: none ;
    color: white;
    margin-bottom: 2px;
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 2px;
    border: 0px;
}

[data-bs-theme=dark]
    #sidebar ul li
    { color: var(--bs-gray-400);
    }

#sidebar ul li:hover,
#sidebar ul li.active
{
    background: #dadada57;
    border-color: #dadada57;
    border-radius: 2px;
    box-shadow: 0px 0px 15px 1px #ffffff42 inset;
}

#sidebar ul li:hover
{
   padding-left: 3% !important ;
}

ul.infos {
    padding: 10px;
}

ul.infos a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

#annee,
#posi,
#version
    { background: rgb(128, 128, 128);
      border: none;
      color: #fff;
      font-size: 0.9em;
      padding: 0px 0px 0px 10px;
      margin: 5px;
      border-radius: 5px;
    }

#version:hover
    { background: rgb(192, 192, 192);
    }

/* -----------------------------------------------------
 * Navbar
 * ----------------------------------------------------- */
#leftmain .navbar
       { border: none;
         border-radius: 0;
         color: #000;
         padding-right: 5px;
         background-color: rgba(0,0,0,.4);
       }

#leftmain .navbar-form
       { border: none;
         border-radius: 0;
         color: #000;
         padding-right: 5px;
       }

#leftmain .navbar h3 {
    color: #fff;
    font-weight: bolder;
    text-shadow: 1px 1px 1px #666;
    margin-right: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#leftmain .navbar-form h3 {
    color: #000000;
    font-weight: bolder;
    margin-right: 20px;
    margin-left: 5px;
    margin-top: 3px;
}

.dropdown-submenu {
    position: relative;
}

  .dropdown-submenu a::after {
    transform: rotate(-90deg);
    position: absolute;
    right: 6px;
    top: .8em;
}

  .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;
}


#navbarToggler ul a:focus,
#navbarToggler ul a:hover,
#navbarToggler ul a:link,
#navbarToggler ul a:visited
    { background: #868e96;
      text-decoration: none;
    }

#navbarToggler ul li ul,
#navbarToggler ul li ul li,
#navbarToggler ul li ul li a,
#navbarToggler ul li ul li a:focus,
#navbarToggler ul li ul li a:hover,
#navbarToggler ul li ul li a:link,
#navbarToggler ul li ul li a:visited
   { background: #fff;
     text-decoration: none;
   }

#user .show
    { display: block ;
    }

.wkformlogo
    { max-height: 45px ;
      margin-left: 22px ;
    }

.nav-subtitel {
    min-height: 58px;
    max-height: 58px;
    width: 100%;
    padding-top: 10px;
  }

.nextcloud-content {
    height: 100%;
    width: 100%;
}

.nextcloud-error {
    background-color: var(--bs-primary);
    color : white ;
    width: 100%;
    min-height: 50px;
    max-height: 50px;
}

.nav-search {
    min-height: 58px;
    max-height: 58px;
}


/* ---------------------------------------------------
    Main and content
----------------------------------------------------- */
#leftmain
       { width: 100%;
         transition: all 0.3s;
         max-height: 100vh;
         min-height: 100vh;
         padding: 0px;
       }

#content
       { transition: all 0.3s;
         padding-right: 5px;
         padding-bottom: 5px;
       }

.content-form
       { padding-left: 5px;
         background-color: white;
       }

.content-base
       { min-height: calc(100vh - 58px);
         max-height: calc(100vh - 58px);
       }

.content-texte
       { height: calc(100vh - 118px);
         border-width: 0px;
       }

.content-cloud
       {
       }

.content-footer
       { min-height: calc(100vh - 88px);
         max-height: calc(100vh - 88px);
       }

#wkfooter
        { max-height: 30px;
          min-height: 30px;
          padding-right: 5px;
          background-color: rgba(0,0,0,.4);
        }
#WtPdfContent
       { padding: 0px;
         margin: 0px;
         min-width: 100%;
       }

#WtPdf
       { padding: 0px;
         margin: 0px;
         min-height: calc(100vh - 114px);
         max-height: calc(100vh - 114px);
         min-width: 100%;
         transition: all 0.3s;
       }

/* ---------------------------------------------------
   Cards
----------------------------------------------------- */

.block-left {
    float: left;
    color: #000;
}
.block-center {
}

.block-right {
    float: right;
}

.card-deck .card
         { min-width: 275px;
           margin-bottom: 10px;
         }

.card-max
         { padding-bottom: 0px;
           min-height: 100%;
           max-height: 100%;
           border: 0px;
           overflow-y: auto;
         }

.card-max-pdf
         { padding-bottom: 0px;
           min-height: 100%;
           max-height: 100%;
           border: 0px;
           overflow-y: hidden ;
         }

.card-body p
        { font-size: 14px;
          font-weight: normal;
          padding: 0;
          margin-top: 0.5rem;
          margin-bottom: 0rem;
          line-height:1em;
        }

#content a.active
        { color: rgb(196, 196, 196);
        }


/* ---------------------------------------------------
   Login
----------------------------------------------------- */
formpass { display: -ms-flexbox;
           display: flex;
          -ms-flex-align: center;
           align-items: center;
           padding-top: 10px;
           padding-bottom: 10px;
          }

.form-signin { width: 100%;
               max-width: 330px;
               padding: 15px;
               margin: auto;
             }

.form-signin .form-control {
                    position: relative;
                    box-sizing: border-box;
                    height: auto;
                    padding: 10px;
                    font-size: 16px;
                  }

.form-signin .form-control:focus
             {
               z-index: 2;
             }

#wkform-foot         { font-size: 14px;
                       padding-left: 10px;
                       padding-right: 10px;
                     }

#wkform-foot > .row  { min-height: 40px;
                     }

#wkform-footleft     { text-align: left !important;
                     }

#wkform-footcenter   { text-align: center !important;
                     }

#wkform-footright    { text-align: right !important;
                     }

WtUser      { margin-bottom: 10px;
               border-bottom-right-radius: 0;
               border-bottom-left-radius: 0;
             }

#WtPass      {
               margin-bottom: 10px;
               border-top-left-radius: 0;
               border-top-right-radius: 0;
             }

.asklogin
     {
       min-height: calc(100vh - 128px);
     }

.asklogin-mobile
     {
       min-height: calc(100vh - 92px);
     }

.keycloak-content
     {
       min-width: 350px;
       border-radius: 15px;
     }

.keycloak-mobile
     {
       width: 100%;
       border-radius: 15px;
       min-height: 450px;
     }

.rotate-45
     {
       transform: rotate(-45deg) !important; /* Rotation de 45 degrés */
     }

.fs-7
     {
       font-size: 0.85rem !important;
     }