html * {
    margin: 0px;
    padding: 0px;
}

#header {
    display: flex
}


/**/

#login {
    width: 350px !important;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 20%;
    margin: initial;
    position: absolute;
    height:auto !important;
     background: rgba(255, 255, 255, 0.8);
    }

#login h3{
    font-weight:bold;
    color:white;
    background:rgba(95,0,0,0.8)
}

/**/



/**/

a:link { color: var(--color-a-link) }        /* Liens non visités */
a:visited { color: var(--color-a-visited) }     /* Liens visités */
a:hover { background: var(--color-a-hover);}  /* Liens survolés */
a:active { background: var(--color-a-active) } /* Liens actifs */


body {
    box-sizing: border-box;
    background-image: url(/images/logos/logo.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 300px;
    font-family: verdana;
    background-color: var(--color-background) ;
    display:flex;
    flex-direction:column;
}


body {

    --color-link-dark: #985eff;
    --color-bpu: #8e8e8e;
    --color-bpu-dark: #444;
    --color-bpu-light: #f5f5f5;
    --color-a-link: #444;
    --color-a-visited: #444;
    --color-a-hover: #8e8e8e;
    --color-a-active: #8e8e8e;
    --color-clients: #7a7fc2;
    --color-projects: #569caf;
    --color-identificationlists: #0d987c;
    --color-identificationlists-light: #f5f5f5;
    --color-works: #24ad00;
    --color-workstree:#a7e207;
    --color-articles: #a5d152;
    --color-components: #ffb142;
    --color-suppliers: #e48500;
    --color-categories: #eb5a47;
    --color-units: #c378e1;
    --color-rates: #0079be;
    --color-indices: #00c1e0;
    --color-identifications: #67d69b;
    --color-clientworkidseqs: #6c9981;
    --color-workcompositions: #8ba300;
    --color-compositions: #9cb38d;
    --color-componentsupplies: #da7373;
    --color-text: #444;
    --color-update: #00cc19;
    --color-delete: #dc0000;
    --color-content:#555;
    --color-content-background: #e2e2e2;
    --color-background: #f5f5f5;
    --color-messages-background: #ccc;
    --color-messages: #444;
    --color-sizer-background: #696969;
    --color-input-background:#e2e2e2;
    --color-input-border:#a9a9a9;
    --color-input-submit-background:#aedaff;
    --color-input-submit-border:#01549b;
    --color-pager:#444;
    --pager-background-image:url(/images/patterns/grey/dark/pattern-90.png);
    --throbber-background-image:url(/images/icons/ajax-loader-black.svg);




    /* Old colors 
  
  
      --color-identificationlists: #0d987c;
      --color-identificationlists-light: #f5f5f5;
      --color-works: #24a000;
      --color-articles: #aec77b;
      --color-components: #ffbf21;
      --color-suppliers: #e48500;
      --color-categories: #eb5a47;
      --color-units: #c378e1;
      --color-rates: #0079be;
      --color-indices: #00c1e0;
      --color-identifications: #ff39b6;
      --color-workcompositions: #51e897;
      --color-compositions: #ff78cc;
      --color-componentsupplies: #da7373;
  
  
  */

    /* Tests de couleurs */
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
}

#win0 {

}

#fragment0 {
    height: 100%;
}

.edc {
    margin-left: 10px;
    padding-top: 2px;
    height: 19px;
}

/*
ul.submenu {
    right: 5px;
    position: relative;
}*/

a.win.web {
    min-width:55px;
}

/* In progress */

.inprogress {
    background-color: #fce089;
    color:var(--color-inprogress);
    display:inline-block;
    padding:1px;
}

.inprogress_error {
    background-color: #f2a5b9;
    color:var(--color-inprogress);
    display:inline-block;
    padding:1px;
}


/*messages*/

#messages {
    z-index: 100000;
    overflow: auto;
    border: 0.5px solid;
    position: absolute;
    bottom: 0;
    height:25px;
    left: 50%;
    width: 60%;
    transform: translate(-50%, 0%);
    background-color:var(--color-messages-background);
    color: var(--color-messages);
    border-color: #444;
    border-radius: .2rem;
}


#messages::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

#messages::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}

#messages::-webkit-scrollbar-thumb {
    background: #e1e1e1;
    border: 0px none #ffffff;
    border-radius: 50px;
}

#messages::-webkit-scrollbar-thumb:hover {
    background: #ffffff;
}

#messages::-webkit-scrollbar-thumb:active {
    background: #000000;
}

#messages::-webkit-scrollbar-track {
    background: #666666;
    border: 0px none #ffffff;
    border-radius: 50px;
}

#messages::-webkit-scrollbar-track:hover {
    background: #666666;
}

#messages::-webkit-scrollbar-track:active {
    background: #333333;
}

#messages::-webkit-scrollbar-corner {
    background: transparent;
}


#messages:hover {
    height:250px;
}

#messages ul {
    list-style-type: none;
    padding-top: 2px;
}

#messages li,
.messages li,
td.info-message {
    border-right: 3px solid #DDD;
    border-left: 3px solid #DDD;
    animation: flash 1s ease;
    padding-left: 2px;
}

@keyframes flash {
    0% {}

    50% {
        background: #ccc;
    }

    100% {}
}

@keyframes flasherror {
    0% {}

    50% {
        background: #fcc;
    }

    100% {}
}

#messages li {
    margin-bottom: 3px;
}

#messages li.OK,
.messages .OK {
    border-right: 3px solid green;
    border-left: 3px solid green;
}


#messages li.ERROR,
.messages .ERROR {
    border-right: 3px solid orange;
    border-left: 3px solid orange;
    animation: flasherror 1s ease;
}


#messages li.FATAL,
.messages .FATAL {
    border-right: 3px solid red;
    border-left: 3px solid red;
    animation: flasherror 2s ease;
}

#messages li.INFO,
.messages .INFO {
    border-right: 3px solid blue;
    border-left: 3px solid blue;
    padding-left: 2px;
}

/*--------------  Messages width icons ---------------*/

span.message {
    padding-left: 2px;
}

.OK .message,
.ERROR .message,
.FATAL .message,
.INFO .message {
    width: 16px;
    height: 16px;
    display: inline-block;
    font-family: 'elements';
}

.message :before {
    display: inline-block;
}


.OK .message [data-id^=client-]:before,
.OK .message [data-id^=project-]:before,
.OK .message [data-id^=clientworkidseq-]:before,
.OK .message [data-id^=identificationlist-]:before,
.OK .message [data-id^=identification-]:before,
.OK .message [data-id^=work]:before,
.OK .message [data-id^=workcomposition]:before,
.OK .message [data-id^=article]:before,
.OK .message [data-id^=composition]:before,
.OK .message [data-id^=component]:before,
.OK .message [data-id^=componentsupply]:before,
.OK .message [data-id^=supplier]:before,
.OK .message [data-id^=category]:before,
.OK .message [data-id^=index]:before,
.OK .message [data-id^=rate]:before,
.OK .message [data-id^=unit]:before {
    color: var(--success);
}


.ERROR .message [data-id^=client-]:before,
.ERROR .message [data-id^=project-]:before,
.ERROR .message [data-id^=clientworkidseq-]:before,
.ERROR .message [data-id^=identificationlist-]:before,
.ERROR .message [data-id^=identification-]:before,
.ERROR .message [data-id^=work]:before,
.ERROR .message [data-id^=workcomposition]:before,
.ERROR .message [data-id^=article]:before,
.ERROR .message [data-id^=composition]:before,
.ERROR .message [data-id^=component]:before,
.ERROR .message [data-id^=componentsupply]:before,
.ERROR .message [data-id^=supplier]:before,
.ERROR .message [data-id^=category]:before,
.ERROR .message [data-id^=index]:before,
.ERROR .message [data-id^=rate]:before,
.ERROR .message [data-id^=unit]:before {
    color: var(--warning);
}


.FATAL .message [data-id^=client-]:before,
.FATAL .message [data-id^=project-]:before,
.FATAL .message [data-id^=clientworkidseq-]:before,
.FATAL .message [data-id^=identificationlist-]:before,
.FATAL .message [data-id^=identification-]:before,
.FATAL .message [data-id^=work]:before,
.FATAL .message [data-id^=workcomposition]:before,
.FATAL .message [data-id^=article]:before,
.FATAL .message [data-id^=composition]:before,
.FATAL .message [data-id^=component]:before,
.FATAL .message [data-id^=componentsupply]:before,
.FATAL .message [data-id^=supplier]:before,
.FATAL .message [data-id^=category]:before,
.FATAL .message [data-id^=index]:before,
.FATAL .message [data-id^=rate]:before,
.FATAL .message [data-id^=unit]:before {
    color: var(--danger);
}



.INFO .message [data-id^=client-]:before,
.INFO .message [data-id^=project-]:before,
.INFO .message [data-id^=clientworkidseq-]:before,
.INFO .message [data-id^=identificationlist-]:before,
.INFO .message [data-id^=identification-]:before,
.INFO .message [data-id^=work]:before,
.INFO .message [data-id^=workcomposition]:before,
.INFO .message [data-id^=article]:before,
.INFO .message [data-id^=composition]:before,
.INFO .message [data-id^=component]:before,
.INFO .message [data-id^=componentsupply]:before,
.INFO .message [data-id^=supplier]:before,
.INFO .message [data-id^=category]:before,
.INFO .message [data-id^=index]:before,
.INFO .message [data-id^=rate]:before,
.INFO .message [data-id^=unit]:before {
    color: var(--info);
}


.message [data-id^=client-]:before {
    content: '\e906';
    font-family: 'icomoon';
}
.message [data-id^=project-]:before {
    content: '\e905';
    font-family: 'icomoon';
}
.message [data-id^=clientworkidseq-]:before {
    content: '\e907';
    font-family: 'icomoon';
}

.message [data-id^=identificationlist-]:before {
    content: '\22';
}

.message [data-id^=identification-]:before {
    content: '\2b';
}

.message [data-id^=work]:before {
    content: '\23';
}

.message [data-id^=workcomposition]:before {
    content: '\2c';
}

.message [data-id^=article]:before {
    content: '\24';
}

.message [data-id^=composition]:before {
    content: '\2d';
}

.message [data-id^=component]:before {
    content: '\25';
}

.message [data-id^=componentsupply]:before {
    content: '\2e';
}

.message [data-id^=supplier]:before {
    content: '\26';
}

.message [data-id^=category]:before {
    content: '\27';
}

.message [data-id^=index]:before {
    content: '\2a';
}

.message [data-id^=rate]:before {
    content: '\29';
}

.message [data-id^=unit]:before {
    content: '\28';
}


/* win */

.winFrame {
    position: absolute !important;
    width: 200px;
    height: 200px;
    background: white;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 150px;
    min-height: 100px;
}

.winFrame .winTitle {
    opacity: 0.5;
}

.winFrame.foremost .winTitle {
    opacity: 1;
}

.winFrame {
    box-shadow: 0px 0px 0.5px 0.5px black;
    border-radius: 0rem;
    border-width: 1px;
}

.winFrame.foremost {
    box-shadow: 0.5px 0.5px 1px 1px rgba(0, 0, 0, 0.25),
        1px 1px 2px 2px rgba(0, 0, 0, 0.20),
        2px 2px 4px 4px rgba(0, 0, 0, 0.15),
        4px 4px 8px 8px rgba(0, 0, 0, 0.10),
        8px 8px 16px 16px rgba(0, 0, 0, 0.05);
}

.winContent>div {
    height: 100%;
    display: flex;
    flex-direction: column
}

.winTitle {
    border-bottom: 0.5px solid;
    box-sizing: border-box;
    background: #dddddd !important;
}

.winContent {
    box-sizing: border-box;
    padding: 2px;
    padding-top: 5px;
    height: 100% !important;
    width: 100% !important;
    overflow: auto;
    /*position: relative; breaks upgraded widgets*/ 

    background-color: var(--color-content-background);
}

.winContent, label {
    color: var(--color-content);
}

.winSizer {
    height: 20px;
    width: 100% !important;
    background-image: url(/images/icons/resize.svg);
    background-size: 18px;
    background-position: center right;
    background-repeat: no-repeat;
    background-color: var(--color-sizer-background);
}

h3 {
    margin: 0;
    padding: 0px;
    line-height: 20px;
    font-weight: normal;
    box-sizing: border-box;
    border-bottom: 0px !important;
}

.winTitle .buttons {
    position: absolute;
    /* z-index:10; */
    right: 5px;
    top: 4px;
}

.winTitle .buttons a {
    display: block;
    width: 12px;
    height: 12px;
    padding:1px;
    float: left;
    background-size: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    text-decoration: none;
}

/*
  .winTitle .buttons a.close {
      background-image: url(/images/icons/close.svg)
  }
  */
.winTitle .buttons a.close:before {
    content: "\39";
    font-family: 'elements';
    font-size: 1em;
    color: var(--color-bpu-dark);
}


.winTitle .buttons a.copyUrl{
    margin-right:10px;
    padding:0px;
    width: auto;
    height: 15px;
}

.winTitle .buttons a.copyUrl:after {
    content: "\51";
    font-family: 'elements';
    font-size: 1.3em;
    color: var(--color-bpu-dark);
}

.winFrame[data-opener='undefined'] a.parent {
    opacity: 0;
}

.winFrame.resizing iframe {
    display: none;
}

.winFrame.long .winContent
{
    position: relative;
}

.winFrame.resizing.long .winContent>div,
.winFrame.moving.long .winContent>div {
    display: none;
}



.winFrame.resizing.long .winContent:before,
.winFrame.moving.long .winContent:before {
    content: "";
    position: absolute;
    display: block;
    bottom: 5px;
    top: 5px;
    left: 5px;
    right: 5px;
    box-sizing: border-box;
    opacity: 0.5;
    background: url(/images/icons/resize.svg) no-repeat 50%;
}

.winFrame.moving.long .winContent:before {
    background: url(/images/icons/fullscreen.svg) no-repeat 50%;
}

.drop_valid {
    background: green !important
}

/* Forms send button */

dd#submitBtn-element {
    margin-bottom: 5px;
}


/* -------- Drag Font elements -------- */

#dragimage {
    /* top: 30px;
    left: 5px;
    z-index: 1; */
    left: -32px;
    width: 29px;
    height: 29px;
    border-style: solid;
    border-radius: .2rem;
    border-width: 0.5px;
    border-color: black;
    background-color: white;
    /* background-image: url(/images/icons/drag-element-v.svg); */
}

#dragimage span {
    font-size: 251%;
    line-height: unset;

}

#dragimage span:before {
    line-height: unset;
    background: unset
}

.drag span {
    width: 16px;
    height: 16px;
    display: block;
    font-size: 10px;
    font-family: 'elements';
}

.drag span:before {
    background-image: url(/images/icons/drag-element-v.svg);
    text-align: center;
    line-height: 16px;
    /*color: rgb(50 50 50 / 50%);*/
    height: 100%;
    width: 100%;
    background-size: 16px;
    background-position: center center;
    background-repeat: no-repeat;
    /*box-sizing: border-box;*/
}

.drag :before,
.info :before {
    display: inline-block;
}

.drag [data-id^=client-]:before,
.info .icon-clients:before {
    content: '\e906';
    color: var(--color-clients);
    font-family: 'icomoon';
}
.drag [data-id^=project-]:before,
.info .icon-projects:before {
    content: '\e905';
    color: var(--color-projects);
    font-family: 'icomoon';
}
.drag [data-id^=clientworkidseq-]:before,
.info .icon-clientworkidseqs:before {
    content: '\e907';
    color: var(--color-clientworkidseqs);
    font-family: 'icomoon';
}

.drag [data-id^=identificationlist-]:before,
.info .icon-identificationlists:before {
    content: '\22';
    color: var(--color-identificationlists);
}

.drag [data-id^=identification-]:before,
.info .icon-identifications:before {
    content: '\2b';
    color: var(--color-identifications)
}

.not-identified {
    background-color: #d4102363;
}

.drag [data-id^=work-]:before,
.info .icon-works:before {
    content: '\23';
    color: var(--color-works);
}

.drag [data-id^=workcomposition-]:before,
.info .icon-workcompositions:before {
    content: '\2c';
    color: var(--color-workcompositions)
}

.drag [data-id^=article-]:before,
.info .icon-articles:before {
    content: '\24';
    color: var(--color-articles);
}

.drag [data-id^=composition-]:before,
.info .icon-compositions:before {
    content: '\2d';
    color: var(--color-compositions)
}

.drag [data-id^=component-]:before,
.info .icon-components:before {
    content: '\25';
    color: var(--color-components);
}

.drag [data-id^=componentsupply-]:before,
.info .icon-componentsupplies:before {
    content: '\2e';
    color: var(--color-componentsupplies)
}

.drag [data-id^=supplier-]:before,
.info .icon-suppliers:before {
    content: '\26';
    color: var(--color-suppliers);
}

.drag [data-id^=category-]:before,
.info .icon-categories:before {
    content: '\27';
    color: var(--color-categories);
}

.drag [data-id^=index-]:before,
.info .icon-indices:before {
    content: '\2a';
    color: var(--color-indices);
}

.drag [data-id^=rate-]:before,
.info .icon-rates:before {
    content: '\29';
    color: var(--color-rates);
}

.drag [data-id^=unit-]:before,
.info .icon-units:before {
    content: '\28';
    color: var(--color-units);
}



.droppable {
    zbackground: rgba(0, 200, 0, 0.2);
}

.copyToClipboardButton+input {
    position: absolute;
    left: -10000px;
}

table td {
    zword-break: break-all;
    zword-wrap: break-word
}


/* titlelbars */


/* fullscreenized */

.winFrame.fullscreenized {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    /*background: rgba(180, 90, 180, 0.95) !important;*/
    width: 100% !important;
    height: 100% !important;
    top: 0px !important;
    left: 0px !important;
    border: 2px solid;
}


/* info */

#info {
    position:absolute;
    bottom:2px;
    right:2px;
    /* border:none; */
    opacity: 0.5;
    width: 40px;
    z-index: 999999;
    border-radius: 3.5px;
    background: white;
    overflow:hidden;
    /* border: 5px solid red; */
}

#info:hover {
    opacity: 1;
    bottom: 2px;
    width: 400px;
    height: 400px;
    display:flex;
    flex-direction:column;
}

#info:hover *{
    display:block !important
}

#info a {
    line-height: 20px;
    padding: 2px;
    color: #444 !important;
}

#info *{ display:none !important; }

#info a:first-child {
    display:block !important;
}

#info textarea {
    width: calc(100% - 4px) !important;
    height: 100% !important;
    margin: 2px;
}


/* ---------  wip & quick fixes ---------- */

.hidden.id {
    display: none;
    text-align: center;
}

.ghost {
    font-size: 0.8em;
    color: #555555;
    font-style: italic;
}

.icon_create {
    margin-left: 3px;
}

th a {
    display: block;
}

input[name=partial],
input[name=order],
input[name=way],
input[name=page],
input[name=fragment] {
    display: none;
}

pre.error,
pre.error textarea {
    width: 100%;
    height: 100%;
}

.validate a.win {
    display: inline-block;
    text-decoration: none;
}

.validated,
.unvalidated {
    font-size: 1.5em;
}

.validated {
    color: var(--green);
}

.unvalidated {
    color: var(--red);
}

td.username span:before {
    font-size: 1.5em;
}

/* --------------- TREE TESTS Icons SVG FONT ---------------- */
@font-face {
    font-family: 'workstree';
    src:  url('fonts/workstree.eot?vmjtlq');
    src:  url('fonts/workstree.eot?vmjtlq#iefix') format('embedded-opentype'),
      url('fonts/workstree.ttf?vmjtlq') format('truetype'),
      url('fonts/workstree.woff?vmjtlq') format('woff'),
      url('fonts/workstree.svg?vmjtlq#workstree') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  
  [class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'workstree' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-workstree:before {
    content: "\e999";
  }

/* ---------------  TESTS Icons SVG FONT ---------------- */
@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?hnfr25');
    src:  url('fonts/icomoon.eot?hnfr25#iefix') format('embedded-opentype'),
      url('fonts/icomoon.ttf?hnfr25') format('truetype'),
      url('fonts/icomoon.woff?hnfr25') format('woff'),
      url('fonts/icomoon.svg?hnfr25#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  
  [class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-expand:before {
    content: "\e9009";
  }
  .icon-down:before {
    content: "\e9019";
  }


/* ---------------  Icons SVG FONT ---------------- */

@font-face {
    font-family: 'elements';
    src: url('fonts/elements.eot?morha5');
    src: url('fonts/elements.eot?morha5#iefix') format('embedded-opentype'),
        url('fonts/elements.ttf?morha5') format('truetype'),
        url('fonts/elements.woff?morha5') format('woff'),
        url('fonts/elements.svg?morha5#elements') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'elements' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.info [class^="icon-"] {
    padding-right: 3px;
}

.detail [class^="icon-"] {
    padding-right: 3px;
}

@font-face {
    font-family: 'icomoon22';
    src:  url('fonts/icomoon22.eot?z8um1d');
    src:  url('fonts/icomoon22.eot?z8um1d#iefix') format('embedded-opentype'),
      url('fonts/icomoon22.ttf?z8um1d') format('truetype'),
      url('fonts/icomoon22.woff?z8um1d') format('woff'),
      url('fonts/icomoon22.svg?z8um1d#icomoon22') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }

[class^="icon22-"], [class*=" icon22-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon22' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon22-undo:before {
content: "\e965";
}

/* ---------------- Instructions for use ----------------- */

@font-face {
    font-family: 'instructions-for-use';
    src:  url('fonts/instructionsforuse.eot?ryke4o');
    src:  url('fonts/instructionsforuse.eot?ryke4o#iefix') format('embedded-opentype'),
      url('fonts/instructionsforuse.ttf?ryke4o') format('truetype'),
      url('fonts/instructionsforuse.woff?ryke4o') format('woff'),
      url('fonts/instructionsforuse.svg?ryke4o#instructionsforuse') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  
.instructionsforuse, .instructionsforuse  {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'instructions-for-use' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a.instructionsforuse {
    text-decoration:none !important;
}
  
.instructionsforuse:before {
    content: "\e900";
}

.instructionsforuse_text {
    font-size:1em;
}

.instructionsforuse_text h4, .instructionsforuse_text h5, .instructionsforuse_text p {
    line-height:2em;
    padding:5px;
}

.instructionsforuse_text ul {
    margin-left: 20px;
}

.instructionsforuse_text ul li {
    padding:5px;
    margin-left:10px;
}

@font-face {
    font-family: 'viewer3d';
    src:  url('fonts/viewer3d.eot?zegrvt');
    src:  url('fonts/viewer3d.eot?zegrvt#iefix') format('embedded-opentype'),
      url('fonts/viewer3d.ttf?zegrvt') format('truetype'),
      url('fonts/viewer3d.woff?zegrvt') format('woff'),
      url('fonts/viewer3d.svg?zegrvt#viewer3d') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="iconviewer3d -"], [class*=" iconviewer3d -"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'viewer3d' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-viewer3d:before {
content: "\10ffff";
}


/* ---------------- Connexion States ----------------- */

/* TODO replace by font */

a#connexion_states {
    padding:0 !important;
    cursor: pointer;
}

#connexion_states span img {
    position: relative;
    top: 1px;
}

#connexion_states span#disconnected,
#connexion_states span#connected,
#connexion_states span#connexion_error {
    display:none;
    padding:3px;
}

#connexion_states span#disconnected {
    display:inline-block;
}

.edc_connect {
    padding-right: 2px;
}

.revit {
    float: right;
    padding-left: 2px;
}

@font-face {
    font-family: 'connexion_states';
    src:  url('fonts/connexion_states.eot?l29y32');
    src:  url('fonts/connexion_states.eot?l29y32#iefix') format('embedded-opentype'),
      url('fonts/connexion_states.ttf?l29y32') format('truetype'),
      url('fonts/connexion_states.woff?l29y32') format('woff'),
      url('fonts/connexion_states.svg?l29y32#connexion_states') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  
    [class^="state-"], [class*=" state-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'connexion_states' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  #menu a span.state-connect:before,  
  #menu a span.state-connected:before,
  #menu a span.state-connecting:before,
  #menu a span.state-connection-error:before,
  #menu a span.state-disconnected:before
  {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'connexion_states' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  #menu a span.state-connect:before {
    content: "\e900";
  }
  #menu a span.state-connected:before {
    content: "\e901";
  }
  #menu a span.state-connecting:before {
    content: "\e902";
  }
  #menu a span.state-connection-error:before {
    content: "\e903";
  }
  #menu a span.state-disconnected:before {
    content: "\e904";
  }
  


/* --------- User ---------*/

.icon-user-gest:before {
    content: "\34";
    color: var(--blue);
}

.icon-user-val:before {
    content: "\34";
    color: var(--red);
}

.icon-user-collab:before {
    content: "\34";
    color: var(--yellow);
}

.icon-user-user:before {
    content: "\34";
    color: var(--green);
}

/* prescriber */
.icon-user-pre:before {
    content: "\34";
    color: var(--purple);
}

.icon-bpu:before {
    content: "\21";
}

.icon-clients:before {
    content: "\e906";
    font-family: 'icomoon';
}

.icon-projects:before {
    content: "\e905";
    font-family: 'icomoon';
}

.icon-clientworkidseqs:before {
    content: "\e907";
    font-family: 'icomoon';
}

.icon-identificationlists:before {
    content: "\22";
    padding: 1px;
}

.icon-works:before {
    content: "\23";
}

.icon-workstree:before {
    content: "\23";
}

.icon-articles:before {
    content: "\24";
}

.icon-components:before {
    content: "\25";
}

.icon-suppliers:before {
    content: "\26";
}

.icon-categories:before {
    content: "\27";
}

.icon-units:before {
    content: "\28";
}

.icon-rates:before {
    content: "\29";
}

.icon-indices:before {
    content: "\2a";
}

.icon-identifications:before {
    content: "\2b";
}

.icon-workcompositions:before {
    content: "\2c";
}

.icon-compositions:before {
    content: "\2d";
}

.icon-componentsupplies:before {
    content: "\2e";
}

.icon-web:before {
    content: "\2f";
}

.icon-users:before {
    content: "\30";
}

.icon-system:before {
    content: "\31";
}

.icon-disconnected1:before {
    content: "\32";
}

.icon-connected:before {
    content: "\33";
}

.icon-asc:before {
    content: "\35";
}

.icon-desc:before {
    content: "\36";
}

.icon-parent:before {
    content: "\37";
}

.icon-children:before {
    content: "\38";
}

.icon-close:before {
    content: "\39";
}

.icon-close_1:before {
    content: "\3a";
}

.icon-create:before {
    content: "\3b";
}

.icon-create_1:before {
    content: "\3c";
}

.icon-delete:before {
    content: "\3d";
}

.icon-delete_1:before {
    content: "\3e";
}

.icon-detail:before {
    content: "\e904";
}

.icon-right:before {
    content: "\e902";
}

.icon-down:before {
    content: "\e903";
}

.icon-error:before {
    content: "\42";
}

.icon-export:before {
    content: "\43";
}

.icon-import:before {
    content: "\44";
}

.icon-unfullscreen:before {
    content: "\45";
}

.icon-fullscreen:before {
    content: "\46";
}

.icon-refresh:before {
    content: "\47";
}

.icon-refresh_1:before {
    content: "\48";
}

.icon-update:before {
    content: "\49";
}

.icon-unvalidated:before {
    content: "\4a";
}

.icon-validated:before {
    content: "\4b";
}

.icon-chain:before {
    content: "\4c";
}

.icon-unchain:before {
    content: "\4d";
}

.icon-move:before {
    content: "\4e";
}

.icon-drag-element:before {
    content: "\4f";
}

.icon-draggable:before {
    content: "\50";
}

.icon-copy:before {
    content: "\51";
}

.icon-resize:before {
    content: "\52";
}


/* ---------------  Links  ---------------- */

a.parent,
a.fullscreen,
a.children {
    float: right;
    text-decoration: none;
    margin: 0px;
}

/*
  a.parent {
      background-image: url(/images/icons/parent.svg);
  }
  
  a.children {
      background-image: url(/images/icons/children.svg);
      margin-right: 5px;
  }
  
  a.fullscreen {
      background-image: url(/images/icons/fullscreen.svg);
      margin-right: 5px;
  }
  
  .fullscreenized a.fullscreen {
      background-image: url(/images/icons/unfullscreen.svg);
  }
  */

a.parent:before {
    content: "\37";
    font-family: 'elements';
    font-size: 1em;
    color: var(--color-bpu-dark);
}

a.children:before {
    content: "\38";
    font-family: 'elements';
    font-size: 1em;
    color: var(--color-bpu-dark);
}

a.fullscreen:before {
    content: "\46";
    font-family: 'elements';
    font-size: 1em;
    color: var(--color-bpu-dark);
}

.fullscreenized a.fullscreen:before {
    content: "\45";
    font-family: 'elements';
    font-size: 1em;
    color: var(--color-bpu-dark);
}


a.reload,
a.export,
a.quantityexport,
a.sectionexport,
a.import,
a.detail,
a.glass,
a.update,
a.duplicate,
a.delete,
a.create {
    display: block;
    text-decoration: none;
    width: 16px;
    height: 16px;
    background-size: 100%;
    float: left;
}

a.import {
    margin-right: 5px;
}

/*
  
  a.create {
      background-image: url(/images/icons/create.svg);
      background-position: 1px center;
      background-repeat: no-repeat;
  }
  
  a.update {
      background-image: url(/images/icons/update.svg);
  }
  
  a.delete {
      background-image: url(/images/icons/delete.svg);
  }
  
  a.detail {
      background-image: url(/images/icons/right.svg);
  }
  
  a.detail.open {
      background-image: url(/images/icons/down.svg);
  }
  
  a.glass {
      background-image: url(/images/icons/detail.svg);
  }
  
  a.reload {
      background-image: url(/images/icons/refresh.svg);
  }
  
  a.export {
      background-image: url(/images/icons/export.svg);
  }
  
  */

/*[class^=topflex] a.reload:before {
      display: block;
      content: '\47';
      width:16px;
      height:16px;
      color: var(--color-bpu-dark);
      font-family: 'elements';
      font-size: 1.5em;
  }
  
  [class^=topflex] a.export:before {
      display: block;
      content: '\43';
      width:16px;
      height:16px;
      color: var(--color-bpu-dark);
      font-family: 'elements';
      font-size: 1.5em;
  }*/

/* ------ Icones éléments : detail, formulaires et actions --------*/


a.update:before,
a.delete:before,
a.create:before,
a.reload:before,
a.export:before,
a.quantityexport:before,
a.sectionexport:before,
a.import:before {
    display: block;
    width: 16px;
    height: 16px;
    font-family: 'elements';
    font-size: 2em;
}

a.glass:before,
a.detail:before,
a.duplicate:before {
    display: block;
    width: 16px;
    height: 16px;
    font-family: 'icomoon';
    font-size: 2em;
}


a.reload:before,
a.export:before,
a.quantityexport:before,
a.sectionexport:before,
a.import:before {
    font-size: 1.5em;
}

a.delete:before {
    content: '\3d';
    color: var(--danger);
}


[class^=action] a.update:before {
    content: '\49';
    color: var(--color-a-link);
}

[class^=action] a.delete:before {
    content: '\3d';
    color: var(--danger);
}

[class^=update] a.create:before,
[class^=frame] a.create:before {
    display: block;
    content: '\3b';
    width: 16px;
    height: 16px;
    font-family: 'elements';
    font-size: 16px;
    color: var(--color-a-link);
}

[class^=update] a.create:before {
    font-size: 1.5em;
}

[class^=users] a.reload:before,
[class^=system] a.reload:before {
    content: '\47';
    color: var(--color-a-link);
}

/* Clients */

[class^=clients] a.reload:before {
    content: '\47';
    color: var(--color-clients);
}

[class^=clients] a.create:before {
    content: '\3b';
    color: var(--color-clients) !important;
}

[data-id^=client-] .action a.delete:before {
    content: '\3d';
    color: var(--danger);
}

[data-id^=client-] .action a.update:before {
    content: '\49';
    color: var(--color-clients);
}

[data-id^=client-] .detail a.glass:before {
    content: '\e904';
    /* font-family: 'icomoon';
    content: "\e9009"; */
    color: var(--color-clients);
}

[data-id^=client-] .detail a.detail:before {
    content: '\e902';
    color: var(--color-clients);
}

[data-id^=client-] .detail a.detail.open:before {
    content: '\e903';
    /* font-family: 'icomoon';
    content: "\e9019"; */
    color: var(--color-clients);
}

/* Projects */

[class^=projects] a.reload:before {
    content: '\47';
    color: var(--color-projects);
}

[class^=projects] a.create:before {
    content: '\3b';
    color: var(--color-projects) !important;
}

[data-id^=project-] .action a.delete:before {
    content: '\3d';
    color: var(--danger);
}

[data-id^=project-] .action a.update:before {
    content: '\49';
    color: var(--color-projects);
}

[data-id^=project-] .detail a.glass:before {
    content: '\e904';
    /* font-family: 'icomoon';
    content: "\e9009"; */
    color: var(--color-projects);
}

[data-id^=project-] .detail a.detail:before {
    content: '\e902';
    color: var(--color-projects);
}

[data-id^=project-] .detail a.detail.open:before {
    content: '\e903';
    /* font-family: 'icomoon';
    content: "\e9019"; */
    color: var(--color-projects);
}

/* Client Work idSeq */

[class^=clientworkidseqs] a.reload:before {
    content: '\47';
    color: var(--color-clientworkidseqs);
}

[class^=clientworkidseqs] a.create:before {
    content: '\3b';
    color: var(--color-clientworkidseqs) !important;
}

[data-id^=clientworkidseq-] .action a.delete:before {
    content: '\3d';
    color: var(--danger);
}

[data-id^=clientworkidseq-] .action a.update:before {
    content: '\49';
    color: var(--color-clientworkidseqs);
}

[data-id^=clientworkidseq-] .detail a.glass:before {
    content: '\e904';
    /* font-family: 'icomoon';
    content: "\e9009"; */
    color: var(--color-clientworkidseqs);
}

[data-id^=clientworkidseq-] .detail a.detail:before {
    content: '\e902';
    color: var(--color-clientworkidseqs);
}

[data-id^=clientworkidseq-] .detail a.detail.open:before {
    content: '\e903';
    /* font-family: 'icomoon';
    content: "\e9019"; */
    color: var(--color-clientworkidseqs);
}

/* Identification Lists */

[class^=identificationlists] a.reload:before {
    content: '\47';
    color: var(--color-identificationlists);
}

[class^=identificationlists] a.create:before {
    content: '\3b';
    color: var(--color-identificationlists) !important;
}

[data-id^=identificationlist-] .action a.delete:before {
    content: '\3d';
    color: var(--danger);
}

[data-id^=identificationlist-] .action a.update:before {
    content: '\49';
    color: var(--color-identificationlists);
}

[data-id^=identificationlist-] .detail a.glass:before {
    content: '\e904';
    /* font-family: 'icomoon';
    content: "\e9009"; */
    color: var(--color-identificationlists);
}

[data-id^=identificationlist-] .detail a.detail:before {
    content: '\e902';
    color: var(--color-identificationlists);
}

[data-id^=identificationlist-] .detail a.detail.open:before {
    content: '\e903';
    /* font-family: 'icomoon';
    content: "\e9019"; */
    color: var(--color-identificationlists);
}

[class^=identifications] a.reload:before {
    content: '\47';
    color: var(--color-identifications);
}


[class^=identifications] a.create:before {
    content: '\3b';
    color: var(--color-identifications) !important;
}

[data-id^=identification-] .action a.delete:before {
    content: '\3d';
    color: var(--danger);
}

[data-id^=identification-] .action a.update:before {
    content: '\49';
    color: var(--color-identifications);
}

[data-id^=identification-] .detail a.glass:before {
    content: '\e904';
    color: var(--color-identifications);
}

[data-id^=identification-] .detail a.detail:before {
    content: '\e902';
    color: var(--color-identifications);
}

[data-id^=identification-] .detail a.detail.open:before {
    content: '\e903';
    color: var(--color-identifications);
}

[class^=identifications] a.export:before {
    content: '\43';
    color: var(--color-identifications);
}

[class^=identifications] a.quantityexport:before {
    content: '\43';
    color: var(--color-identifications);
}

[class^=identifications] a.sectionexport:before {
    content: '\43';
    color: var(--color-identifications);
}

[class^=works] a.reload:before {
    content: '\47';
    color: var(--color-works);
}

[class^=works] a.export:before {
    content: '\43';
    color: var(--color-works);
}

[class^=works] a.import:before {
    content: '\44';
    color: var(--color-works);
}

[class^=works] a.create:before {
    content: '\3b';
    color: var(--color-works) !important;
}

[data-id^=work-] .action a.delete:before {
    content: '\3d';
    color: var(--danger);
}

[data-id^=work-] .action a.update:before {
    content: '\49';
    color: var(--color-works);
}

[data-id^=work-] .action a.duplicate:before {
    content: '\e900';
    color: var(--orange);
}

[data-id^=work-] .detail a.glass:before {
    content: '\e904';
    color: var(--color-works);
}

[data-id^=work-] .detail a.detail:before {
    content: '\e902';
    color: var(--color-works);
}

[data-id^=work-] .detail a.detail.open:before {
    content: '\e903';
    color: var(--color-works);
}

[class^=workstree] a.reload:before {
    content: '\47';
    color: var(--color-workstree);
}

[class^=workcompositions] a.reload:before {
    content: '\47';
    color: var(--color-workcompositions);
}


[class^=workcompositions] a.create:before {
    content: '\3b';
    color: var(--color-workcompositions) !important;
}

[data-id^=workcomposition-] .action a.delete:before {
    content: '\3d';
    color: var(--danger);
}

[data-id^=workcomposition-] .action a.update:before {
    content: '\49';
    color: var(--color-workcompositions);
}

[data-id^=workcomposition-] .detail a.glass:before {
    content: '\e904';
    color: var(--color-workcompositions);
}

[data-id^=workcomposition-] .detail a.detail:before {
    content: '\e902';
    color: var(--color-workcompositions);
}

[data-id^=workcomposition-] .detail a.detail.open:before {
    content: '\e903';
    color: var(--color-workcompositions);
}

[class^=articles] a.import:before {
    content: '\44';
    color: var(--color-articles);
}

[class^=articles] a.export:before {
    content: '\43';
    color: var(--color-articles);
}

[class^=articles] a.reload:before {
    content: '\47';
    color: var(--color-articles);
}

[class^=articles] a.create:before {
    content: '\3b';
    color: var(--color-articles) !important;
}

[data-id^=article-] .action a.delete:before {
    content: '\3d';
    color: var(--danger);
}

[data-id^=article-] .action a.update:before {
    content: '\49';
    color: var(--color-articles);
}

[data-id^=article-] .action a.duplicate:before {
    content: '\e900';
    color: var(--orange);
}

[data-id^=article-] .detail a.glass:before {
    content: '\e904';
    color: var(--color-articles);
}

[data-id^=article-] .detail a.detail:before {
    content: '\e902';
    color: var(--color-articles);
}

[data-id^=article-] .detail a.detail.open:before {
    content: '\e903';
    color: var(--color-articles);
}

[class^=components] a.reload:before {
    content: '\47';
    color: var(--color-components);
}

[class^=components] a.create:before {
    content: '\3b';
    color: var(--color-components) !important;
}

[class^=components] a.import:before {
    content: '\44';
    color: var(--color-components);
}

[class^=components] a.export:before {
    content: '\43';
    color: var(--color-components);
}

[data-id^=component-] .action a.delete:before {
    content: '\3d';
    color: var(--danger);
}

[data-id^=component-] .action a.update:before {
    content: '\49';
    color: var(--color-components);
}

[data-id^=component-] .action a.duplicate:before {
    content: '\e900';
    color: var(--orange);
}

[data-id^=component-] .detail a.glass:before {
    content: '\e904';
    color: var(--color-components);
}

[data-id^=component-] .detail a.detail:before {
    content: '\e902';
    color: var(--color-components);
}

[data-id^=component-] .detail a.detail.open:before {
    content: '\e903';
    color: var(--color-components);
}

[class^=suppliers] a.reload:before {
    content: '\47';
    color: var(--color-suppliers);
}

[class^=suppliers] a.create:before {
    content: '\3b';
    color: var(--color-suppliers) !important;
}

[data-id^=supplier-] .action a.delete:before {
    content: '\3d';
    color: var(--danger);
}

[data-id^=supplier-] .action a.update:before {
    content: '\49';
    color: var(--color-suppliers);

}

[data-id^=supplier-] .detail a.glass:before {
    content: '\e904';
    color: var(--color-suppliers);
}

[data-id^=supplier-] .detail a.detail:before {
    content: '\e902';
    color: var(--color-suppliers);
}

[data-id^=supplier-] .detail a.detail.open:before {
    content: '\e903';
    color: var(--color-suppliers);
}

[class^=categories] a.reload:before {
    content: '\47';
    color: var(--color-categories);
}

[class^=categories] a.create:before {
    content: '\3b';
    color: var(--color-categories) !important;
}

[data-id^=category-] .action a.delete:before {
    content: '\3d';
    color: var(--danger);
}

[data-id^=category-] .action a.update:before {
    content: '\49';
    color: var(--color-categories);
}

[data-id^=category-] .detail a.glass:before {
    content: '\e904';
    color: var(--color-categories);
}

[data-id^=category-] .detail a.detail:before {
    content: '\e902';
    color: var(--color-categories);
}

[data-id^=category-] .detail a.detail.open:before {
    content: '\e903';
    color: var(--color-categories);
}

[class^=units] a.reload:before {
    content: '\47';
    color: var(--color-units);
}


[class^=units] a.create:before {
    content: '\3b';
    color: var(--color-units) !important;
}

[data-id^=unit-] .action a.delete:before {
    content: '\3d';
    color: var(--danger);
}

[data-id^=unit-] .action a.update:before {
    content: '\49';
    color: var(--color-units);
}

[data-id^=unit-] .detail a.glass:before {
    content: '\e904';
    color: var(--color-units);
}

[data-id^=unit-] .detail a.detail:before {
    content: '\e902';
    color: var(--color-units);
}

[data-id^=unit-] .detail a.detail.open:before {
    content: '\e903';
    color: var(--color-units);
}

[class^=rates] a.reload:before {
    content: '\47';
    color: var(--color-rates);
}


[class^=rates] a.create:before {
    content: '\3b';
    color: var(--color-rates) !important;
}

[data-id^=rate-] .action a.delete:before {
    content: '\3d';
    color: var(--danger);
}

[data-id^=rate-] .action a.update:before {
    content: '\49';
    color: var(--color-rates);
}

[data-id^=rate-] .detail a.glass:before {
    content: '\e904';
    color: var(--color-rates);
}

[data-id^=rate-] .detail a.detail:before {
    content: '\e902';
    color: var(--color-rates);
}

[data-id^=rate-] .detail a.detail.open:before {
    content: '\e903';
    color: var(--color-rates);
}

[class^=indices] a.reload:before {
    content: '\47';
    color: var(--color-indices);
}

[class^=indices] a.create:before {
    content: '\3b';
    color: var(--color-indices) !important;
}

[data-id^=index-] .action a.delete:before {
    content: '\3d';
    color: var(--danger);
}

[data-id^=index-] .action a.update:before {
    content: '\49';
    color: var(--color-indices);
}

[data-id^=index-] .detail a.glass:before {
    content: '\e904';
    color: var(--color-indices);
}

[data-id^=index-] .detail a.detail:before {
    content: '\e902';
    color: var(--color-indices);
}

[data-id^=index-] .detail a.detail.open:before {
    content: '\e903';
    color: var(--color-indices);
}

[class^=compositions] a.reload:before {
    content: '\47';
    color: var(--color-compositions);
}

[class^=compositions] a.create:before {
    content: '\3b';
    color: var(--color-compositions) !important;
}

[data-id^=composition-] .action a.delete:before {
    content: '\3d';
    color: var(--danger);
}

[data-id^=composition-] .action a.update:before {
    content: '\49';
    color: var(--color-compositions);
}

[data-id^=composition-] .detail a.glass:before {
    content: '\e904';
    color: var(--color-compositions);
}

[data-id^=composition-] .detail a.detail:before {
    content: '\e902';
    color: var(--color-compositions);
}

[data-id^=composition-] .detail a.detail.open:before {
    content: '\e903';
    color: var(--color-compositions);
}

[class^=componentsupplies] a.reload:before {
    content: '\47';
    color: var(--color-componentsupplies);
}

[class^=componentsupplies] a.create:before {
    content: '\3b';
    color: var(--color-componentsupplies) !important;
}

[data-id^=componentsupply-] .action a.delete:before {
    content: '\3d';
    color: var(--danger);
}

[data-id^=componentsupply-] .action a.update:before {
    content: '\49';
    color: var(--color-componentsupplies);
}

[data-id^=componentsupply-] .detail a.glass:before {
    content: '\e904';
    color: var(--color-componentsupplies);
}

[data-id^=componentsupply-] .detail a.detail:before {
    content: '\e902';
    color: var(--color-componentsupplies);
}

[data-id^=componentsupply-] .detail a.detail.open:before {
    content: '\e903';
    color: var(--color-componentsupplies);
}



/*
  a img {
      width: 16px;
      height: 16px;
  }
  */

h4.buttons {
    display: none;
}


/* ---------------  General  ---------------- */

html {
    height: 100%;
}

body {
    font-family: 'Work', sans-serif;
    /* font-family: verdana; */
    font-size: 11px;
    height: 100%;
    overflow: hidden;
    position: relative;
}


/* Liens actifs */

a img {
    border: none;
    display: block;
    float: left;
}

span.small {
    font-size: 9px;
}

span.info {
    float: right;
    opacity: 0.4;
    margin: 5px;
}

span.highlight {
    background-color:pink;
    color:var(--gray-dark);
    padding:1px;
    font-weight: bold;
}


/* ------------  header ---------- */

#header, #menu {
    background-color: var(--color-background-header);
}

#header a.bpu {
    color: #222;
    margin-left: 3px;
    text-shadow: 0.5px 0.5px 0.5px #b7b7b7;
    display: block;
}

.logo-bpu {
    /* background-image: url(/images/icons/ajax-loader-static.svg); */
    background-repeat: no-repeat;
    background-position: 4px 3px;
    background-size: 20px;
    min-width: 20px;
    display: block;
    /* padding-left: 6px; */
    /* padding-right: 3px; */
    /* height: 30px; */
}

.logo-bpu img {
    padding-top: 0;
    padding-left: 0;
}

.throbber-forms {
    position: relative;
    top: 0px;
    float: right;
}

/* Throbber SVG in Sub Theme by color  */
  
  .submitting .throbber-forms {
      background-image:var(--throbber-background-image);
      background-size: 30px 30px;
      background-repeat: no-repeat;
      display:block !important;
  }


.throbber-forms {
    width: 30px;
    height: 30px;
    display: none;
}


#menu {
    overflow: hidden;
    /* margin-left: 5px;*/
}

#menu>li {
    float: left;
}

#menu li {
    list-style-type: none;
    box-sizing: border-box;
}

#menu li a {
    color: var(--color-text);
}

#menu li ul {
    display: none;
    background: #aaa;
    z-index: 99999;
}

#menu li:hover ul {
    display: block;
    position: absolute;
}

#menu a {
    text-decoration: none !important;
    text-decoration: none;
    padding: 3px;
    display: block;
    margin: 2px;
    background-color: #ddd;
    border-color: #000;
    border-style: solid;
    border-radius: 0.1rem !important;
    border-width: 0px !important;
}


#menu li a,
h3 {
    color: var(--color-text);
    background-size: 12px;
    background-position: 2px;
    background-repeat: no-repeat;
    background-color: var(--color-bpu);
    padding-left: 2px;
}

h3{
  width:calc(100% + 1px);   
}

#menu>li>a.noicon {
    color: var(--color-text);
}

/* ------ Icones menu --------*/

#menu a span:before {
    font-family: 'elements';
    font-size: 1em;
    padding: 2px;
}


/* Clients */

#menu a.clients,
h3.clients {
    background-color: var(--color-clients);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

.clients input[type=submit]:hover {
    background-color: var(--color-clients);
}


#menu a.clients span:before, h3.clients:before {
    content: "\e906";
    padding: 2px;
    color: var(--color-bpu-light);
    font-family: 'icomoon';
}

#menu a.clients span.text:before {
    content: none;
}

/* Projects */

#menu a.projects,
h3.projects {
    background-color: var(--color-projects);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

.projects input[type=submit]:hover {
    background-color: var(--color-projects);
}


#menu a.projects span:before, h3.projects:before {
    content: "\e905";
    padding: 2px;
    color: var(--color-bpu-light);
    font-family: 'icomoon';
}

#menu a.projects span.text:before {
    content: none;
}

/* Client Work idSeq */

#menu a.clientworkidseqs,
h3.clientworkidseqs {
    background-color: var(--color-clientworkidseqs);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

.clientworkidseqs input[type=submit]:hover {
    background-color: var(--color-clientworkidseqs);
}


#menu a.clientworkidseqs span:before, h3.clientworkidseqs:before {
    content: "\e907";
    padding: 2px;
    color: var(--color-bpu-light);
    font-family: 'icomoon';
}

#menu a.clientworkidseqs span.text:before {
    content: none;
}

/* Identification Lists */

#menu a.identificationlists,
h3.identificationlists {
    background-color: var(--color-identificationlists);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

.identificationlists input[type=submit]:hover {
    background-color: var(--color-identificationlists);
}


#menu a.identificationlists span:before, h3.identificationlists:before {
    content: "\22";
    font-family: 'elements';
    color: var(--color-bpu-light);
    padding: 2px;
}

#menu a.identificationlists span.text:before {
    content: none;
}

#menu a.viewer3d span:before, h3.viewer3d:before, h3.viewer3d_properties:before {
    content: "\10ffff";
    font-family: 'viewer3d';
    color: #000;
    padding: 2px;
    font-size:1.1em;
}

h3.viewer3d, h3.viewer3d_properties {
    background-color: #186bff78;
}

#menu a.works,
h3.works {
    background-color: var(--color-works);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

#menu a.works span:before, h3.works:before {
    content: "\23";
    font-family: 'elements';
    color: var(--color-bpu-light);
    padding: 2px;
}

#menu a.works span.text:before {
    content: none;
}

h4.works, h5.works {
    background-color: var(--color-text);
    color:#ccc;
    padding: 3px;
    display: inline;
}

#menu a.workstree,
h3.workstree {
    background-color: var(--color-workstree);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

#menu a.workstree span:before, h3.workstree:before {
    font-family: 'workstree';
    content: "\e999";
    color: var(--color-bpu-light);
    padding: 2px;
}

#menu a.workstree span.text:before {
    content: none;
}

h4.workstree, h5.workstree {
    background-color: var(--color-text);
    color:#ccc;
    padding: 3px;
    display: inline;
}


#menu a.articles,
h3.articles {
    background-color: var(--color-articles);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

#menu a.articles span:before, h3.articles:before  {
    content: "\24";
    color: var(--color-bpu-light);
    font-family: 'elements';
    padding: 2px;

}

#menu a.articles span.text:before {
    content: none;
}

#menu a.components,
h3.components {
    /*background-color: var(--color-components);*/
    background-color:#fdb500;
    border: 0.5px solid #000;
    border-radius: 0rem;
}

#menu a.components span:before, h3.components:before {
    content: "\25";
    font-family: 'elements';
    color: var(--color-bpu-light);
    padding: 2px;
}

#menu a.components span.text:before {
    content: none;
}

#menu a.suppliers,
h3.suppliers {
    background-color: var(--color-suppliers);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

#menu a.suppliers span:before, h3.suppliers:before {
    content: "\26";
    font-family: 'elements';
    color: var(--color-bpu-light);
    padding: 2px;
}

#menu a.suppliers span.text:before {
    content: none;
}

#menu a.categories,
h3.categories {
    background-color: var(--color-categories);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

#menu a.categories span:before, h3.categories:before {
    content: "\27";
    font-family: 'elements';
    color: var(--color-bpu-light);
    padding: 2px;
}

#menu a.categories span.text:before {
    content: none;
}

#menu a.units,
h3.units {
    background-color: var(--color-units);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

#menu a.units span:before, h3.units:before {
    content: "\28";
    font-family: 'elements';
    color: var(--color-bpu-light);
    padding: 2px;
}

#menu a.units span.text:before {
    content: none;
}

#menu a.rates,
h3.rates {
    background-color: var(--color-rates);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

#menu a.rates span:before, h3.rates:before {
    content: "\29";
    font-family: 'elements';
    color: var(--color-bpu-light);
    padding: 2px;
}

#menu a.rates span.text:before {
    content: none;
}

#menu a.indices,
h3.indices {
    background-color: var(--color-indices);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

#menu a.indices span:before, h3.indices:before {
    content: "\2a";
    font-family: 'elements';
    color: var(--color-bpu-light);
    padding: 2px;
}

#menu a.indices span.text:before {
    content: none;
}

#menu a.identifications,
h3.identifications {
    background-color: var(--color-identifications);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

#menu a.identifications span:before, h3.identifications:before {
    content: "\2b";
    font-family: 'elements';
    color: var(--color-bpu-light);
    padding: 2px;
}

#menu a.identifications span.text:before {
    content: none;
}

#menu a.workcompositions,
h3.workcompositions {
    background-color: var(--color-workcompositions);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

#menu a.workcompositions span:before, h3.workcompositions:before {
    content: "\2c";
    font-family: 'elements';
    color: var(--color-bpu-light);
    padding: 2px;
}

#menu a.workcompositions span.text:before {
    content: none;
}

#menu a.compositions,
h3.compositions {
    background-color: var(--color-compositions);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

#menu a.compositions span:before, h3.compositions:before {
    content: "\2d";
    font-family: 'elements';
    color: var(--color-bpu-light);
    padding: 2px;
}

#menu a.compositions span.text:before {
    content: none;
}

#menu a.componentsupplies,
h3.componentsupplies {
    background-color: var(--color-componentsupplies);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

#menu a.componentsupplies span:before, h3.componentsupplies:before {
    content: "\2e";
    font-family: 'elements';
    color: var(--color-bpu-light);
    padding: 2px;
}

#menu a.componentsupplies span.text:before {
    content: none;
}


#menu a.web {
    background-color: var(--color-bpu);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

#menu a.web span:before, h3.web:before {
    content: "\2f";
    font-family: 'elements';
    color: var(--color-bpu-light);
    padding: 2px;
}

#menu a.web span.text:before {
    content: none;
}

#menu a.users {
    background-color: var(--color-bpu);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

#menu a.users span:before, h3.users:before {
    content: "\30";
    font-family: 'elements';
    color: var(--color-bpu-light);
    padding: 2px;
}

#menu a.users span.text:before {
    content: none;
}


#menu a.system {
    background-color: var(--color-bpu);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

#menu a.system span:before, h3.system:before {
    content: "\31";
    font-family: 'elements';
    color: var(--color-bpu-light);
    padding: 2px;
}

#menu a.system span.text:before {
    content: none;
}

#menu a.connected {
    background-color: var(--color-bpu);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

/*
  #menu a.connected span
  {
      background-image: url(/images/icons/elements/connected.svg);
      background-size:16px;
      width:16px;
      height:16px;
  }
  */

#menu a.connected span:before, h3.connected:before {
    content: "\33";
    font-family: 'elements';
    color: var(--color-bpu-light);
    padding: 2px;
}

#menu a.connected span.text:before {
    content: none;
}

#menu a.disconnected {
    background-color: var(--color-disconnected);
    border: 0.5px solid #000;
    border-radius: 0rem;
}

/*
  #menu a.disconnected span {
      background-image: url(/images/icons/elements/disconnected.svg);
      background-size:16px;
      width:16px;
      height:16px;
  }
  */

#menu a.disconnected span:before, h3.connected:before {
    content: "\32";
    color: var(--color-bpu-light);
    font-size: 2em;
}


/* ------------  Theme switcher ---------- */

#theme-switcher {
    position: absolute;
    top: 0;
    right: 0;
    list-style-type: none;
    overflow: hidden;
    background: white;
    border: 1px solid #ddd;
    padding: 0;
    font-size: 10px;
    float: right;
}

#theme-switcher li {
    border: 1px solid;
    margin: 2px;
    overflow: hidden;
}

#theme-switcher:hover {}

#theme-switcher li a {
    color: black;
    display: block;
    margin-top: 0;
    text-decoration: none;
    background: #eaeaea;
}

#theme-switcher li img {
    width: 110px;
    height: 50px;
}


/* -------------  Messenger -------------- */

ul.messages {
    clear: both;
    font-size: 12px;
    list-style-type: none;
    padding: 0px;
    background-image: url(/images/patterns/grey/dark/pattern-30.png);
}

ul.messages li {
    padding: 1px;
    margin: 2px;
}


/* ---------------  Ajax  ---------------- */

li.throbber {
    width: 30px;
    height: 25px;
}


/* ---------------  Combobox  ------------- */

.drop {
    overflow: auto;
    max-height: 100px;
    border: 1px solid #dfdfdf;
    background: white;
    width: 300px;
    position: absolute;
    z-index: 100;
    display: none;
    list-style-type: none;
    padding: 0;
}

.drop li {
    padding-left: 5px;
}

.drop li:hover {
    background: #eeeeee;
}

.drop li div {
    border: 1px solid red;
    width: 130px;
    float: left;
}


/* ------------  Drag & drop -------------- */

td.drag {
    padding: 1px;
}

span.drag {
    display: block;
    background-image: url(/images/patterns/drag.png);
    width: 15px;
    height: 15px;
    opacity: 0.5;
}

.dropactive {
    background: #dddded;
}

.drophover {
    background: #efaaaa;
}


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

ul.pager {
    padding: 0;
    margin: 0;
    float: left;
    list-style-type: none;
}

ul.pager li {
    height: 13px;
    float: left;
    list-style-type: none;
    margin-left: 2px;
    margin-top: 2px;
    margin-bottom: 4px;
}

ul.pager li a {
    height: 100%;
    display: block;
    padding: 2px;
    background: url(/images/patterns/grey/dark/pattern-30.png);
    margin: 0;
}

ul.pager li a:hover {
    background-color: var(--color-background);
}

ul.pager li span {
    display: block;
    height: 100%;
    margin: 0;
    padding: 2px;
    color: var(--color-page);
    background-image: var(--pager-background-image);
}


/* --------------  ordering  ---------------- */

a.order,
a.order:hover {
    background-size: auto 100%;
}

a.order.desc {
    background-image: url("/images/icons/asc.svg");
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 20px;
}

a.order.asc {
    background-image: url("/images/icons/desc.svg");
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 20px;
}


/* ---------------  layout  ---------------- */

.topflex {
    margin-top: 2px;
    margin-bottom: 2px;
}

.alert {
    margin: 2px;
    font-size: 1.05em;
    line-height:1.5em;
}

.alert:before {
font-family: 'elements';
content: "\42";
color: var(--red);
}

a.reload {
    float: left;
    margin-right: 3px;
}

a.export, a.quantityexport, a.sectionexport {
    float: left;
    margin-right: 3px;
}

tr.detail>td {
    padding-top: 10px;
}

tr.detail h3 {
    display: none;
}


/* --------------- web frame  ---------------- */

.webframe {
    border: none;
    width: 100%;
    height: 100%;
}


/* ------------------ Form -------------------- */


input[type=password],
input[type=text],
checkbox,
textarea,
select,
option {
    border: 1px solid #dedede;
    vertical-align: top;
    background-image: url(/images/patterns/grey/dark/pattern-10.png);
    box-sizing: border-box;
    height: 18px;
}

input,
checkbox,
textarea,
select,
option {
    border-radius: .2rem;
    border-width: 0.5px;
    padding-left: 1px !important;
    cursor: pointer;
}

option {
    padding-right: 5px;
}

input[type=submit] {
    height: 21px;
    border-width: 1px;
    border-style: solid;
    border-color: #000;
}

input[type=submit]:hover {
    background-color: #aedaff;
    border-color: #01549b;
}

select {
    color: #464a4c;
}


input:focus,
checkbox:focus,
textarea:focus,
select:focus,
option:focus {
    border-color: #5cb3fd;
    outline: 0;
    border-width: 1px;
}

dd#work-element select#work option[value=null] {
    background-color: var(--warning) !important;
}

select#work>option[value=null] {
    background-color: var(--warning) !important;
}

label input[type="radio"] {
    position: relative;
    top: 2px;
    left: -2px;
}

label input[type="radio"] {
    position: relative;
    top: 2px;
    left: -2px;
}

/* --------------- Filter Form ---------------- */

form.filter {
    /*float:left;*/
}


/* --------------- Zend Form ---------------- */

/* - Identification : bouton create - */
#identificationlist-element a.win.create {
    display: none;
}

form {
    width: calc(100%);
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

dl.description {
    margin: 5px;
    padding: 5px;
    overflow: auto;
    float: left;
}

.zend_form dt,
dl.description dt {
    padding-right: 5px;
    padding-bottom: 5px;
    clear: both;
    width: 150px;
    float: left;
    text-align: right;
    border-bottom: 1px dotted #aaaaaa;
    /* background-image: url(/images/patterns/pattern-10.png); 
      border: 1px solid ; */
    box-sizing: border-box;
}

.zend_form dt#submit-label,
.zend_form dt#valid-label {
    border-bottom: none;
}

.zend_form dt#submit-label {
    display: none;
    width: 0%;
}

.zend_form dd,
dl.description dd {
    box-sizing: border-box;
    padding: 0;
    float: right;
    width: calc(100% - 160px);
    min-width: 168px;
}

.zend_form p {
    padding: 0;
    margin: 0;
}

.zend_form input[type=text],
.zend_form input[type=password],
.zend_form select,
.zend_form textarea,
.zend_form .Select,
.zend_form .ComboBox {
    margin: 0 0 2px 0;
    padding: 0;
    width: calc(100% - 18px);
    box-sizing: border-box;
}

.zend_form .Select .dropdown {
    width: calc(100% - 6px);
}

.zend_form textarea {
    height: 35px;
}

.zend_form .description {
    line-height: 1em;
    font-size: 0.7em;
    margin-bottom: 5px;
    font-style: italic;
    color: black;
    opacity: 0.8;
}

.zend_form ul.errors {
    clear: both;
    list-style-type: none;
    margin: 0px;
    margin-top: 6px;
    padding: 0px;
}

.zend_form ul.errors li {
    padding-bottom: 5px !important;
    color: #e44;
    font-size: 0.8em;
    /* 
      background-image: url(/images/icons/error.svg); 
      background-size: 20px;
      background-position: left center;
      background-repeat: no-repeat;
      margin-left: 10px !important;
      padding-left: 20px !important;
      padding-top: 5px !important;
      */
}

.zend_form ul.errors li:before {
    font-family: 'elements';
    content: "\42";
    padding-right: 2px;
}

.required:before {
    content: '* '
}

.optional:before {
    content: '+ '
}

input[type=submit] {
    margin-top: 10px;
    width: calc(100% - 18px);
}

input[name=delete] {
    width: calc(100% - 36px);
    margin-left: 18px;
}

/* For production */
input#product_sheet, input#file,  {
    /* display:none !important; */
}


/* ---------------  Tables  ---------------- */

td.center {
    text-align: center;
}

td.right {
    text-align: right;
}

table {
    font-size: 8px;
    clear: both;
}

.win table {
    width: 300px;
    /*position:relative;*/
}

.win.presized table {
    width: 100% !important;
}

.win .detail table {
    margin-right: 10px;
}

table th {
    background-image: url(/images/patterns/grey/dark/pattern-70.png);
}

table td {
    padding: 1px;
    padding-left: 1px;
    padding-right: 1px;
}

tr.odd>td {
   background-image: url(/images/patterns/grey/dark/pattern-65.png);
}

tr.even>td {
    background-image: url(/images/patterns/grey/dark/pattern-10.png);
}

tr.detail {
    opacity: 1;
    font-size: 87%;
}

tr.detail td {
    padding-top: 2px;
    padding-bottom: 5px;
}

td.action {
    text-align: center;
}

td.detail {
    text-align: center;
}

td.code {
    text-align: center;
}

td.unit {
    text-align: center;
}

td.status {
    text-align: center;
}

td.label {
    text-align: left;
}

td.label.center {
    text-align: center;
}

td.idseq {
    font-size: 7px;
    padding:5px;
}

td.description {
    text-align: left;
}

td.currency {
    text-align: right;
}

td.composite {
    text-align: center;
}

td.parent {
    text-align: left;
}

td.date {
    text-align: center;
}

td.username {
    text-align: center;
}

td.password {
    text-align: center;
}

td.role {
    text-align: center;
}

td.sizer,
th.sizer,
td.hidden {
    background: none !important;
    background-image: none !important;
    width: 0%;
}

.detail td.sizer {
    width: 50%
}

.identificationlists_delete .done, .identificationlists_delete .import_status {
    display:none;
}

tr.detail_identificationlist>td.hidden:nth-child(1) {
    border-right: 5px solid var(--color-identifications) !important;
}

tr.detail.identification>td.hidden:nth-child(1) {
    border-right: 5px solid var(--color-works) !important;
}

tr.detail_work>td.hidden:nth-child(1) {
    border-right: 5px solid var(--color-workcompositions) !important;
}

tr.detail.workcomposition>td.hidden:nth-child(1) {
    border-right: 5px solid var(--color-compositions) !important;
}

tr.detail_article>td.hidden:nth-child(1) {
    border-right: 5px solid var(--color-compositions) !important;
}

tr.detail_composant>td.hidden:nth-child(1) {
    border-right: 5px solid var(--color-componentsupplies) !important;
}

tr.detail.composition>td.hidden:nth-child(1) {
    border-right: 5px solid var(--color-componentsupplies) !important;
}

tr.detail.category>td.hidden:nth-child(1) {
    border-right: 5px solid var(--color-categories) !important;
}

table th.header {
    opacity: 0.7;
    font-size: 80%
}

table th {
    font-size: 85%
}

table th.hidden {
    background: none;
}

table {
    margin-top: 2px;
}


/* -------------  Login  ------------------- */

#user_login {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    margin-left: 10px !important;
    padding-left: 20px !important;
    color: red;
    font-size: 0.8em;
    background-image: url(/images/icons/roles/user-on.svg);
    background-size: 20px;
    background-position: left center;
    background-repeat: no-repeat;
}

#user_login a {
    color: red;
}

#user_login a:hover {
    color: black;
}


/* -------------  Preview  ------------------ */

div.preview {
    display: none;
    max-width: 220px;
    background-color: var(--color-content-background);
    /* box-shadow: 1px 1px 1px 1px #7d7b7b; */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25),
        0 2px 2px rgba(0, 0, 0, 0.20),
        0 4px 4px rgba(0, 0, 0, 0.15),
        0 8px 8px rgba(0, 0, 0, 0.10),
        0 16px 16px rgba(0, 0, 0, 0.05);
    padding: 5px;
    padding-bottom: 3px;
    padding-top: 3px;
    margin-bottom: 10px;
    text-align: left;
    min-width:100px;
    font-weight:100;
    overflow-wrap: break-word;
    /*
    position: absolute;
    z-index: 10000;
    */
}

div.preview h3 {
    display: none;
}

div.preview pre {
    white-space: normal;
}

div.preview ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

div.preview .code {
    margin-top: 3px;
}

div.preview .label {
    margin-top: 3px;
}

div.preview .description {
    margin-top: 3px;
}

div.preview .currency {
    margin-top: 3px;
}

div.preview .date {
    margin-top: 3px;
}

.preview hr {
    margin-top: 5px;
}

div.preview a.icon-close_1,
div.preview a.icon-delete_1,
div.preview a.icon-update {
    width: 13px;
    height: 13px;
    margin-right: 2px;
}

.preview-action {
    float: left;
}

div.preview .icon-copy:before {
    content: "\51";
    cursor: pointer;
}

div.preview .icon-close_1:before {
    float: right;
    content: "\3a";
    color: var(--dark);
    font-size: 1.3em;
}

div.preview .icon-delete_1:before {
    content: "\3e";
    color: var(--danger);
    font-size: 1.5em;
}

div.preview .icon-update:before {
    content: "\49";
    color: var(--dark);
    font-size: 1.5em;
}

div.preview .client_idseq th {
    font-size: 1.125em !important;
}

div.preview .client_idseq th, div.preview .client_idseq tr, div.preview .client_idseq td {
    font-size: 1em;
    text-align: center;
}

div.preview ul.preview-elements li {
    margin-top:2px;
}

ul.preview-elements li {
    margin-top:5px;
}

ul.preview-elements .element {
    text-decoration: underline;
    font-weight: normal;
    margin-top: 5px;
}

.preview .preview-close {
    display:block;
}

.preview-close {
    display:none;
}


/* ------------  System ---------- */

.system .stat {
    color: #69a9d2;
    font-weight: bold;
}

.messages .date {
    font-style: italic;
}

ul.system {
    display: table-cell;
    clear: both;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

.system li {
    padding: 5px;
    padding-left: 10px;
}

a .open_element {
    display: inline;
}

/* */
/* form fieldsets */

dt.fieldset{
    width:100%;
    padding:0px 1px;
    margin-top:10px;
}

dt.fieldset h4{
    float:right;
}

dd.fieldset{
    background:rgba(0,0,0,0.05);
    box-sizing:border-box;
    overflow:hidden;
    width:100%;
    float:none;
    border-right:5px solid;    
    margin-bottom:10px;
}

dd.fieldset dd.hidden{
    display:none
}

dd.fieldset dd.shown{
    display:block;
}


dd.fieldset.idSeqs{
    width:72%;
    float:right
}


dd.fieldset.idSeqs > dt {
    display:none;
}

dd.fieldset.idSeqs > dd {
    float:left;
    width:50%;
}

/* hide ids */

dd.fieldset.idSeqs > :nth-child(6n+1),
dd.fieldset.idSeqs > :nth-child(6n+2)
{
    display:none
}

dd.fieldset.idSeqs > dd:nth-child(3n+1)
{
    clear:both;
}


dd.fieldset.idSeqs > :nth-child(n+1)
{
    padding-top:5px;
}

dd.fieldset.idSeqs > :nth-child(12n-2),
dd.fieldset.idSeqs > :nth-child(12n)
{
    background-color:#bbbb;
}


/* import status */

.import_status{
    background-image: url(/images/patterns/grey/dark/pattern-35.png);
    padding:5px;
    margin-bottom:15px
}

/* progress bars */

.progress{
    margin:2px;
    border:1px solid;
    position:relative;
    box-sizing:border-box;
        background-image: url(/images/patterns/grey/dark/pattern-45.png);

}

.progress .bar {
    position:absolute;
    border-right:1px solid;
    height:100%;
    box-sizing:border-box;
    background:rgb(0,255,0,0.1);
}

.progress a {
    position:relative;

}

.progress.error .bar {
    background:rgb(255,0,0,0.2);
}

.progress.done .bar {
    background:rgb(0,255,0,0.3);
}
.progress span {
    padding:3.5px;
    display:inline-block;
    line-height:10px;
    margin-left:5px;
}


/* overlay */

.overlaid .overlay{
    position:absolute;
    height:calc(100% + 40px);
    width:100%;
    background:rgba(0,0,0,0.2);
    z-index:0;
    top:-20px;
}

/* tree */

form[data-id=overlay]{
    position:absolute;
    width:calc(100% - 30px);
    left:8px;
    background-color:var(--color-content-background);
    padding:2px;
    z-index:1;
    opacity:0.95;
    height:39px;
}


form[data-id=overlay] input[name=search]{
    height:19px;
     width:calc(100% - 55px);
}

form[data-id=overlay] input[value=search]{
    margin:0px;
    margin-left:5px;
    width:45px;
}

.jstree {
    padding-top:42px;
}

.jstree a {
    opacity:0.99;
}

.jstree .found > a {
    opacity:1;
    border-radius: 2px;
    box-shadow: inset 0 0 1px #999999;
    background: antiquewhite;
    margin: 1px;
    color:#444;
}

.jstree .found .jstree-clicked {
    border:1px solid #c58af9;
    color:#444;
}

.jstree .found .jstree-hovered {
    border:1px solid #8ab4f8;
    color:#444;
}

/* works tree */

.jstree span.P{
    display:inline-block;
    width:16px;
    height:16px;
    margin-left: 4px;
    background-image:url('/images/icons/workstree/classification_existing.png');
}

.jstree span.E{
    display:inline-block;
    width:16px;
    height:16px;
    margin-left: 4px;
    background-image:url('/images/icons/workstree/classification_project.png');
}

/* paste area */

#pasteArea{
    position:absolute;
    bottom:2px;
    left:2px;
    border:none;
    height:80px;
    width:80px;
}

#pasteArea input{
    width:100%;
    height:100%;
    text-align:center
}

/* error page */

h3.error {
    background-color:#ff6c7aa8;
}

h3.error img {
    margin-right:2px;
}

.errorPage{
    padding:10px;
}

.errorPage h1 {
    margin-bottom:10px;
    border-left:10px solid red;
    padding-left:2px;
}

.errorPage pre {
    overflow:auto;
}

.errorPage h3 {
    border-left:2px solid red;
    margin-top:15px;
    margin-bottom:5px;
}

.errorPage span.message {
    margin-right:2px;
}

/* error 401 unauthorized */

h3.unauthorized {
    font-size: 1.2em;
}

.preview h3.unauthorized {
    font-size: 1.5em;
}

.errorPage h3.unauthorized img {
    padding-right: 2px;
    padding-top: 3px;
    width: 12px;
    height: 12px;
}

h3.unauthorized img {
    padding-right: 5px;
}

/* Default colors */

#header a.bpu {
    color: #222;
    margin-left: 3px;
    text-shadow: 0.5px 0.5px 0.5px #636363; 
}

#messages {
    background-color:#ccc;
    color: #444;
    border-color: #444;
}

input, input[type=password], input[type=text], checkbox, textarea, select, option {
    background-color: var(--color-input-background);
    border: 0.5px solid var(--color-input-border);
}


input[type=submit]:hover {
    background-color: var(--color-input-submit-background);
    border-color: var(--color-input-submit-border);
}

ul.pager li span {
    background-image: url(/images/patterns/grey/dark/pattern-90.png);
}

#menu span.text {
    display: inline;
}

#menu a span:before {
    font-size: 1em !important;
}

.edc {
    width: auto;
    height: 19px;
}

h3 {
    line-height: 20px;
    font-size: 1em;
}

a.fullscreen:before,
.winTitle .buttons a.close:before {
    font-size: 1em;
}

.username-text {
    font-size: 1em
}

a.parent {
    margin-left: 0px;
}



/* forgeViewer */


.forgeViewer{

}


.forgeViewer > *{
    /* border:3px solid blue;*/
    box-sizing:border-box;    
    left:0;
    top:0;
}


/* buttons */

.buttons .button{
    float:left;
}

.button{
    margin:2px;
    display:block;
    padding : 3px;
    background : #333;
    color:white !important;
    text-decoration:none;
    cursor:pointer;
    border-radius: 0.2rem;
}

.button.disabled{
    background:#ccc;
    color:#ddd !important;
    cursor:not-allowed
}

.viewer3d_properties table td
{
    border:1px solid;
}

.viewer3d_properties table td textarea,
.viewer3d_properties table td input
{
    width:100%;
}

col.iec_properties_name {
    background-color:#186bff2e;
}

col.iec_properties_value {
    background-color:#186bff2e;
}