@charset "UTF-8";

/*----------------------------------------------------------------------------
This is part of Nomios Project Management Informations System.
Copyright (C) 2019-2024, Nomios - All rights reserved.

Written by Éric DUPONT.

DESCRIPTION : Main CSS file. 
----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------
  Variables and fonts definitions
  
  Nomios colors (2021-03 graphical charter):
    - blue =   #0080ff
    - orange = #ff6128
    - yellow = #ffb100
    - grey =   #b0b7bd
----------------------------------------------------------------------------*/

:root {
  --errorbgd:      #ffb100;
  --errorcol:      #000000;
  --errordiv:      #ce1212;
  --caveatbgd:     #ffe4ca;
  --caveatcol:     #ce1212;
  --barleft:       #000000;
  --barright:      #ff6128;
  --bgdwhite:      #ffffff;
  --bgdnotwhite:   #daecff;
  --bgdhover:      #b3d9ff;
  --bgdtotal:      #dfe6ed;
  --border:        #0080ff;
  --filter:        #ff6128;
  --footerbgd:     #b0b7bd;
  --footernormal:  #ffffff;
  --grey:          #74787e;
  --highlight1:    #ffb100;
  --highlight2:    #ff6128;
  --placeholder:   #b0b7bd;
  --normal:        #000000;
  --titleh1:       #0080ff;
  --colorh1:       #ffffff;
  --titleh2:       #b0b7bd;
  --colorh2:       #000000;
  --titleh3:       #ff6128;
  --colorh3:       #ffffff;
  --widgethover:   #ffb100;
  --widgetmain:    #ff6128;
  --widgetnormal:  #ffffff;
  --widgetselect:  #000000;
  --widgettext:    #0080ff;
  --widgetbgd:     #fff7e4;
  --wysiwygbutton: #000000;
  --wysiwygdisabl: #91989d;
  --wysiwygborder: #ffffff;
  --percentna:     #eeeeee;
  --percent0:      #ffcc00;
  --percent10:     #eecf00;
  --percent20:     #ddd200;
  --percent30:     #ccd500;
  --percent40:     #bbd900;
  --percent50:     #aadc00;
  --percent60:     #99df00;
  --percent70:     #88e200;
  --percent80:     #77e600;
  --percent90:     #66ea00;
  --percent100:    #55ee00;
  --precenttext:   #000000;
  --led-green:     #55ee00;
  --led-yellow:    #ffcc00;
  --led-red:       #ff0000;
  --led-off:       #eeeeee;
  --led-shadow:    #303030;
}

@font-face { font-family: 'Nomios'; src: url('../fonts/RegolaPro-Bold.otf') format('truetype'); font-style: normal; font-weight: bold; }
@font-face { font-family: 'Nomios'; src: url('../fonts/RegolaPro-Book.otf') format('truetype'); font-style: normal; font-weight: normal; }

/*----------------------------------------------------------------------------
  Main styles definitions
----------------------------------------------------------------------------*/
a { color: var(--widgettext); text-decoration: none; }
body { color: black; font-family: 'Nomios'; font-size: medium; font-style: normal; font-weight: normal; margin: 0; }
button { background-color: var(--widgetmain); border: none; color: var(--widgetnormal); padding: 10px; margin: 20px; text-align: center; }
button:hover { background-color: var(--widgethover); cursor: pointer; }
canvas { user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
div {  margin: 5px; }
footer { background-color: var(--footerbgd); bottom: 0; color: var(--footernormal); font-size: 0.7em; height: 25px; left: 0; position: fixed; vertical-align: bottom; width: 100%; z-index: 15; }
header { background-color: var(--titleh1); color: var(--colorh1); left: 0; position: fixed; top: 0; width: 100%; z-index: 20; }
h1 { color: var(--titleh3); font-size: xx-large; font-variant: small-caps; margin: 0; padding: 10px; text-align: center; }
h2 { color: var(--titleh2); font-size: x-large; font-style: normal; font-variant: small-caps; margin: 10px 0px 0px 0px; padding: 10px; text-align: center; }
h3 { color: var(--titleh1); font-size: xx-large; font-variant: small-caps; line-height: 0.9em; margin: 0 auto; padding: 10px; position: relative; text-align: center; width: 90% }
label { color: var(--normal); display: inline-block; text-align: left; font-size: small; font-style: normal; font-weight: bold; line-height: 20px; margin: 20px 20px 0px 20px; width: calc(100% - 40px); }
p { margin: 0; padding: 0; }
ol, ul { margin-bottom: 3px; margin-top: 3px; }

/*----------------------------------------------------------------------------
  Tables styles definitions
----------------------------------------------------------------------------*/
table { border-collapse: collapse; border-width: 0px; margin: auto; width: 100%; }

tr { font-size: small; height: 30px; vertical-align: middle; }
tr.title { background: var(--titleh1); color: var(--colorh1); font-size: medium; font-weight: normal; font-variant: small-caps; }
tr.subtitle { background: var(--titleh2); border-bottom: 1px solid var(--border); color: var(--colorh2); font-size: small; font-weight: normal; height: 35px; line-height: 2.5em; }
tr.subsubtitle { background: var(--bgdtotal); border-bottom: 1px solid var(--border); color: var(--colorh2); font-size: small; font-weight: normal; height: 35px; line-height: 2.5em; }
tr.line0 { background: white; border-bottom: 1px solid var(--border); font-size: small; }
tr.line0:hover { background: var(--bgdhover); }
tr.line1 { background: var(--bgdnotwhite); border-bottom: 1px solid var(--border); font-size: small; }
tr.line1:hover { background: var(--bgdhover); }
tr.line0-small { background: white; border-bottom: 1px solid var(--border); color: var(--grey); font-size: x-small; height: 20px; }
tr.line0-small:hover { background: var(--bgdhover); }
tr.line1-small { background: var(--bgdnotwhite); border-bottom: 1px solid var(--border); color: var(--grey); font-size: x-small; height: 20px; }
tr.line1-small:hover { background: var(--bgdhover); }
tr.linewhite { background: white; border-bottom: 1px solid var(--border); font-size: small; }
tr.summary { background: white; border-bottom: 1px solid var(--border); color: var(--widgettext); height: 301px; font-size: medium; text-align: left; vertical-align: top; }
tr.total { background: var(--bgdtotal); }
tr.global { background: var(--titleh1); color: white; font-weight: bold; }
tr.subglobal { background: var(--titleh2); font-weight: bold; }
tr.clickable:hover { cursor: pointer; }
tr.not-allowed:hover { cursor: not-allowed; }

th { color: var(--normal); font-weight: bold; padding: 0px; }
th.form-value-small { color: var(--titleh1); font-size: medium; padding-left: 10px; text-align: left; width: 15%; }
th.green { color: #207a0c; font-weight: bold; }
th.red { color: #d52e00; font-weight: bold; }

td { padding: 0; }
td.form-item { color: var(--normal); font-size: medium; font-style: normal; font-weight: bold; padding-right: 20px; text-align: right; width: 50%; }
td.form-value { color: var(--highlight2); font-size: medium; padding-left: 20px; text-align: left; width: 50%; }
td.form-value-small { color: var(--highlight2); font-size: medium; padding-left: 20px; text-align: left; width: 20%; }
td.form-value-grey { color: var(--grey); font-size: medium; padding-left: 20px; text-align: left; width: 20%; }
td.menu-header { border-bottom: 1px solid var(--highlight1); display: table-cell; text-align: center; vertical-align: middle; width: 60%; }
td.status { color: var(--grey); font-size: x-small; margin: 0px; padding: 0px 5px; text-align: right; vertical-align: top; }
td.summary { background: white; border-bottom: 1px solid var(--border); color: black; height: 291px; font-size: small; text-align: left; padding: 5px; vertical-align: top; }
td.empty { background: white; }
td.flex { display: flex; }

/*----------------------------------------------------------------------------
  Specific div definitions
----------------------------------------------------------------------------*/
div.content { margin-bottom: 50px; margin-top: 110px; text-align: center; }
div.disclaimer { color: var(--highlight2); font-size: small; font-weight: bold; margin: 0px 30px 5px 30px; }
div.error-div { background-color: var(--errordiv); border: 1px solid white; bottom: 25px; color: white; display: none; float: none; font-size: small; padding: 5px; position: fixed; margin: 0px; right: -1px; text-align: left; width: 30%; z-index: 20; }
div.error-login { color: var(--errordiv); display: none; font-size: large; font-weight: bold; margin: 20px; }
div.form { margin: auto; width: 90%; }
div.graph { margin: 20px auto; position: relative; width: 65%; }
div.header-profile { margin: 15px 30px 0px 0px; }
div.icon-left { background-image: url('../img/icon_background.png'); float: left; height: 40px; margin: 0px 5px 0px 30px; width: 40px; }
div.icon-right { background-image: url('../img/icon_background.png'); float: right; height: 40px; margin: 0px 30px 0px 5px; width: 40px; }
div.icon-status-close { background-color: var(--grey); border-radius: 12px; display: inline-flex; height: 24px; margin: 2px auto; width: 24px; }
div.icon-status-close:hover { cursor: help; }
div.icon-status-open { background-color: var(--widgetmain); border-radius: 12px; display: inline-flex; height: 24px; margin: 2px auto; width: 24px; }
div.icon-status-open:hover { cursor: help; }
div.icon-small { height: 15px; width: 15px; }
div.icon-help { display: block; }
div.icon-help:hover { cursor: help; }
div.lang { border-color: var(--footernormal); border-right-style: solid; border-width: 1px; float: left; margin: 0; padding: 0px 5px; }
div.lang:hover { cursor: pointer; }
div.lang-container { border-color: var(--footernormal); border-left-style: solid; border-width: 1px; float: right; }
div.legal { float: left; margin: 0; width: 230px; }
div.symbol { margin: 2px 0px; padding: 0px; vertical-align: middle; }
div.text-wrap { float: left; height: 1.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
div.qal-widgets { background: white; height: auto; margin: 0px; padding-top: 100px; position: fixed; top: 0px; width: calc(100% - 10px); z-index: 1; }
div.led-date { margin: auto; width: fit-content; }

div.left-toolbar { background: var(--barleft); height: 100%; left: 0; margin: 0px; position: fixed; top: 100px; width: 50px; z-index: 14; }
div.menubar-h {  margin: 0 auto; }
div.menubutton-cell-h { display: table-cell; height: 50px; position: relative; margin: 0; }
div.menubutton-h { display: table-cell; font-size: small; height: 50px; padding: 0px 10px; vertical-align: middle; }
div.menubutton-h:hover { background: var(--widgethover); cursor: pointer; }
div.menucurrent-h::after { bottom: -9px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid black; content: " "; height: 0; left: calc(50% - 10px); position: absolute; width: 0; }
div.right-toolbar { background: var(--barright); height: 100%; right: 0; margin: 0px; position: fixed; top: 100px; width: 50px; z-index: 14; }
div.tool-cell-v { display: table-cell; height: 40px; float: left; margin: 0; padding: 5px 0px; position: relative; width: 50px; }
div.toolcurrent-v::after { border-bottom: 10px solid transparent; border-left: 10px solid black; border-top: 10px solid transparent; content: " "; height: 0; position: absolute; right: -9px; top: 20px; width: 0; }
div.tool-v { height: 40px; opacity: 0.6; width: 40px; }
div.tool-v:hover { cursor: pointer !important; opacity: 1 !important; }

div.table-button { background-color: var(--widgetmain); border-radius: 20%; color: var(--widgetnormal); display: inline-block; height: 24px; margin: 4px 2px; padding: 0px; width: 24px; }
div.table-button:hover { background-color: var(--widgethover); cursor: pointer; }
div.table-button-stat { margin: 0px 0px 0px 5px; }

/*----------------------------------------------------------------------------
  Specific images definitions
----------------------------------------------------------------------------*/
img.mandatory { margin: 0px 5px; }
img.mandatory:hover { cursor: help; }
img.reset { height: 16px; margin-left: -3px; margin-top: 2px; padding-bottom: 1px; vertical-align: top; }
img.reset:hover { cursor: pointer; }
img.symbol { height: 16px; margin-right: 5px; vertical-align: middle; }
img.symbol-govn { height: 16px; margin-left: 10px; margin-right: 5px; margin-top: 10px;vertical-align: middle; }
img.tool { float: top; margin: 5px; opacity: 0.8; }
img.tool:hover { cursor: pointer; opacity: 1; }
img.warning { height: 11px; margin: 0px; padding: 0px; }
img.warning:hover { cursor: help; }

img.table-button { height: 24px; margin: 0px; padding: 0px; width: 24px; }
div:has(> img.table-button:hover) { background-color: var(--widgethover); }
img.header-button { opacity: 0.6; }
img.header-button:hover { cursor: pointer; opacity: 1; }

img.icon-input { display: block; margin: 0; }
img.icon-small { height: 15px; width: 15px; }
img.icon-medium { height: 24px; width: 25px; }
img.icon-large { height: 40px; width: 40px; }

/*----------------------------------------------------------------------------
  Specific inputs definitions
----------------------------------------------------------------------------*/
input[type=text], input[type=password] { border-color: var(--border); border-style: none; border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; color: var(--widgettext); display: inline-block; font-size: large; padding: 5px 5px; margin: 0px 30px; width: calc(100% - 60px); }
input::placeholder { color: var(--placeholder); }
input[type=text].editable-content { background: none; border: none; color: var(--widgettext); font-size: small; margin: 0; padding: 5px 0; }
input[type=text].editable-content-govn { background: none; border: none; color: var(--widgettext); font-size: small; height: fit-content; margin: 5px 0 0 0; padding: 5px 0; width: calc(100% - 265px); }
input[type=text].editable-content-large { background: none; border: none; color: var(--widgettext); font-size: small; margin: 0; padding: 5px 0; width: calc(100% - 40px); }
input[type=text].editable-content-white { background: none; border: none; color: white; font-size: small; margin: 0; padding: 5px 0; }
input[type=text].filter { background: var(--widgetbgd); border-color: var(--filter); border-style: solid; border-width: 1px; color: var(--filter); font-size: small; margin: 2px; padding: 0px 2px; width: 100px; }
input[type=text].form-value, input[type=password].form-value { border-color: var(--border); border-style: none; border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; color: var(--widgettext); display: inline-block; font-size: medium; margin: 0px 10px 0px 0px; text-align: left; width: 50%; }
input[type=text].qal-selector { border-bottom: 1px solid var(--border); color: var(--widgettext); display: inline-block; font-size: small; margin: 0px 10px; padding: 5px 5px; text-align: center; width: 100px; }
input.with-icon-left { float: left; margin: 0px 30px 0px 0px; width: calc(100% - 110px); }
input.with-icon-right { float: left; margin: 0px 0px 0px 30px; width: calc(100% - 110px); }

select.filter { background-color: var(--widgetbgd); border-color: var(--filter); border-style: solid; border-width: 1px; color: var(--filter); font-size: x-small; margin-bottom: 2px; margin-right: 2px; max-width: 100px; padding-bottom: 1px; }
select.filter option { background-color: var(--widgetbgd); color: var(--filter); font-size: x-small; font-style: normal; }
select.filter optgroup { background-color: var(--widgetmain); color: var(--widgetbgd); font-size: x-small; font-style: normal; }

/*----------------------------------------------------------------------------
  Generic minor display adjustemnts
----------------------------------------------------------------------------*/
.clearfix::after { content: ""; clear: both; display: table; }

.border { border-color: var(--border); border-radius: 10px; border-style: solid; border-width: 1px; margin: auto; }
.border-bottom { border-bottom: 1px solid var(--border); }
.border-bottom-large { border-bottom: 3px solid var(--border); }
.border-left { border-left: 1px solid var(--border); }
.border-right { border-right: 1px solid var(--border); }
.border-right-light { border-right: 1px solid var(--bgdwhite); }
.border-top { border-top: 1px solid var(--border); }
.no-margin { margin: 0px; }
.no-padding { padding: 0px; }

.bottom { vertical-align: bottom; }
.left { float: left; }
.right { float: right; }
.top { vertical-align: top; }

.bottom-content { padding-bottom: 3px; vertical-align: bottom; }
.bottom-content-nopadding { vertical-align: bottom; }
.center-content { text-align: center; }
.left-content { text-align: left; }
.left-content-pad10 { padding-left: 10px; text-align: left; }
.middle-content { display: table-cell; vertical-align: middle; }
.right-content { text-align: right; }
.right-content-pad10 { padding-right: 10px; text-align: right; }
.right-content-pad20 { padding-right: 20px; text-align: right; }
.right-content-pad30 { padding-right: 30px; text-align: right; }
.top-content { padding-top: 8px; vertical-align: top; }

.bold { font-weight: bold; }
.text-highlight { color: var(--highlight1); }
.text-highlight-message { color: var(--highlight2); }
.text-xsmall { font-size: x-small; }
.text-large { font-size: large; }
.text-smallcaps { font-variant: small-caps; }

.error-background { background-color: var(--errorbgd) !important; color: var(--errorcol) !important; }

.h100pct { height: 100%; }
.h20pxl { height: 20px; }
.h30pxl { height: 30px; }
.h40pxl { height: 40px; }
.h50pxl { height: 50px; }
.h60pxl { height: 60px; }
.h100pxl { height: 100px; }

.w4pct { width: 4%; }
.w5pct { width: 5%; }
.w8pct { width: 8%; }
.w10pct { width: 10%; }
.w12pct { width: 12%; }
.w15pct { width: 15%; }
.w20pct { width: 20%; }
.w22pct { width: 22%; }
.w30pct { width: 30%; }
.w35pct { width: 35%; }
.w40pct { width: 40%; }
.w48pct { width: 48%; }
.w60pct { width: 60%; }
.w75pct { width: 75%; }
.w80pct { width: 80%; }
.w90pct { width: 90%; }
.w100pct { width: 100%; }
.w30pxl { width: 30px; }
.w45pxl { width: 45px; }
.w50pxl { width: 50px; }
.w60pxl { width: 60px; }
.w80pxl { width: 80px; }
.w100pxl { width: 100px; }
.w120pxl { width: 120px; }
.w200pxl { width: 200px; }
.w300pxl { width: 300px; }
.w400pxl { width: 400px; }

/*----------------------------------------------------------------------------
  Specific minor display adjustemnts
----------------------------------------------------------------------------*/
a.dark-background { color: var(--footernormal); text-decoration: none; }
/* a.light-background { color: var(--nomiosblue4); text-decoration: none; }*/
a.symbol { vertical-align: middle; }

span.address { color: var(--grey); font-size: 0.9em; font-style: normal; font-weight: normal; }
p.legal { margin: 20px auto; text-align: justify; width: 70%; }
ul.legal { margin: 0px auto; text-align: left; width: 65%; }
li.legal { margin: 4px 0px; }
span.legal { color: var(--errorcol); font-size: medium; font-style: normal; font-weight: bold; margin-left: 10px; }
p.nota { color: var(--highlight2); font-style: normal; margin: auto; text-align: left; width: 80%; }
ul.nota li { color: var(--highlight2); font-style: normal; margin: auto; text-align: left; width: 80%; }
span.nota { color: var(--highlight2); float: left; margin-left: 10px; margin-top: 5px; }
span.info { color: var(--grey); font-size: x-small; font-style: italic; }
span.info:hover { cursor: pointer; }
span.h3 { color: var(--titleh3); font-size: medium; }

p.table-maininfo { color: var(--grey); font-size: small; font-style: normal; font-weight: normal; margin-top: 5px; overflow: hidden; padding-left: 5px; text-overflow: ellipsis; white-space: nowrap; }
p.table-subinfo { color: var(--grey); font-size: small; font-style: normal; font-weight: normal; overflow: hidden; padding-left: 5px; text-overflow: ellipsis; white-space: nowrap; }
span.table-highlight { color: var(--titleh1); display: inline-flex; font-weight: bold; }

span.project-lft { color: var(--titleh3); font-style: normal; margin: 0px 0px 0px 2px; }
span.project-rgt { color: var(--titleh3); font-style: normal; margin: 0px 2px 0px 0px; }

tr.order-detail { color: var(--titleh1); display: none; font-size: x-small; height: 15px; }
tr.order-title { height: 1em; }
td.order-title { background: var(--titleh2); color: var(--colorh2); font-size: x-small; height: 15px; }
span.order { color: var(--highlight2); font-size: medium; padding-left: 1px; }
span.order:hover { cursor: pointer; }

span.page { color: var(--colorh1); margin: 0px 10px; }
span.page:hover { cursor: pointer; }

span.error { color: #d52e00; font-weight: bold; }

/*----------------------------------------------------------------------------
  Contracts add-on definitions.
----------------------------------------------------------------------------*/

table.contract.left  { margin: 0 0 0 50px; }
table.contract.right { margin: 0 50px 0 0; }
tr.contract-title { height: 1em; }
tr.kpi-title { background: var(--titleh2); height: 25px; }
img.kpi-close { float: right; height: 17px; margin: 2px 5px; width: 17px; }
img.kpi-close:hover { cursor: pointer; }
td.contract-title { background: var(--titleh2); color: var(--colorh2); font-size: x-small; height: 15px; }
tr.contract-detail { color: var(--titleh1); display: none; font-size: x-small; height: 20px; }
td.contract-detail-info { color: var(--grey); }
img.contract-service { height: 15px; margin: 2px 4px; width: 15px; }
div.kpi-div { background: white; border: 1px solid var(--border); bottom: 25px; color: black; display: none; float: none; font-size: x-small; padding: 0px; position: fixed; margin: 0px; left: 50px; text-align: left; width: 30%; z-index: 20; }
table.kpi-edit { margin: 0px auto 0px 0px; width: auto; }
table.kpi-edit th, table.kpi-edit td { padding: 0px 20px; }
input.kpi-value { background-color: transparent; border-color: var(--border); border-style: none; border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; color: var(--widgettext); display: inline-block; font-size: medium; margin: 0px; text-align: center; width: 100px; }

/*----------------------------------------------------------------------------
  Huge tables definitions.
----------------------------------------------------------------------------*/

div.huge-container { bottom: 30px; left: 50px; position: absolute; right: 50px; top: 100px; }
div.huge-content { display: flex; flex-direction: column; height: 100%; }
div.huge-content h3 { width: calc(90% + 99px); }
div.huge-wrapper { flex-grow: 1; overflow-y: scroll; margin-top: 20px; width: 97%; }
div.huge-wrapper table { border-collapse: separate; border-spacing: 0px; }
div.huge-wrapper table tr.line0 th, div.huge-wrapper table tr.line0 td, div.huge-wrapper table tr.line1 th, div.huge-wrapper table tr.line1 td { box-shadow: inset 0 1px var(--border); }
div.huge-wrapper table thead { position: sticky; top: 0; z-index: 17; }
div.huge-wrapper table thead td { box-shadow: inset 0 -1px var(--border); position: sticky; top: 0; z-index: 17; }
div.huge-wrapper tr.title td { background: var(--titleh1); color: var(--colorh1); z-index: 17; }
div.huge-wrapper tr.subtitle td { background: var(--titleh2); color: var(--colorh2); z-index: 17; }
div.huge-wrapper tr.filter td { background: white; z-index: 17; }
div.huge-wrapper tr.total th, div.huge-wrapper tr.total td { box-shadow: inset 0 1px var(--border); }
div.huge-wrapper td.status { background: white; box-shadow: inset 0 1px var(--border); }

/*----------------------------------------------------------------------------
  Modal window styles definitions
----------------------------------------------------------------------------*/

div.modal { background-color: rgba(0,0,0,0.4); display: none; height: 100%; left: 0px; margin: 0; padding: 0; position: fixed; top: 0px; width: 100%; z-index: 100; }
div.modal-frame { background-color: white; border-color: var(--titleh1); border-style: solid; border-width: 1px; color: var(--normal); margin: auto; padding: 0px; position: relative; top: 150px; width: 600px; }
div.modal-header { background-color: var(--titleh1); color: var(--colorh1); display: block; font-size: x-large; height: 30px; margin: 0; padding-bottom: 10px; padding-left: 30px; padding-top: 12px; position: relative; }
div.modal-icon { background-color: var(--bgdwhite); background-image: url("img/modal.qs.png"); float: left; height: 100px; margin: 30px 30px 0px 30px; width: 100px; }
div.modal-text { float: left; margin-top: 50px; width: 400px; }
div.modal-footer { display: block; margin: 0; padding: 0; position: relative; text-align: center; }

/*----------------------------------------------------------------------------
  Select styles definitions for subproject widget
----------------------------------------------------------------------------*/

div.project-title { margin: auto; padding-right: 90px; width: fit-content; }
div.project-title img:not(.table-button) { float: left; height: 50px; padding-right: 30px; width: 50px }
div.project-title div.table-button { margin-top: 20px; }

div.subprojects { color: var(--grey); font-size: x-small; font-variant: none; font-weight: normal; line-height: .9em; margin: 0px; position: absolute; padding: 0px; right: 5px; text-align: left; top: 45px; }
div.subprojects div { font-size: small; line-height: 2em; }
div.subprojects div.formselect div.select-selected { height: 26px; overflow-x: hidden; padding: 0px 25px 0px 10px; text-align: left; text-overflow: ellipsis; vertical-align: middle; }
div.subprojects div.formselect div.select-items div { height: 26px; overflow-x: hidden; padding: 0px 10px; text-align: left; text-overflow: ellipsis; vertical-align: middle; }

/*----------------------------------------------------------------------------
  Select styles definitions for percent widget
----------------------------------------------------------------------------*/

div.percent { height: 36px; margin: 5px auto !important; padding: none; position: relative; width: 55px; }
div.percent-border { background: var(--widgetbgd); border-color: var(--widgetmain); border-radius: 14px; border-style: solid; border-width: 1px; height: 16px; margin: 0px; outline: none; padding: 3px; position: absolute; top: 0px; width: 48px; }
div.percent-progress { background: var(--percentna); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset var(--led-shadow) 0 -1px 7px, var(--percentna) 0 1px 8px; height: 16px; margin: 0px 16px; width: 16px; }
div.percent div { font-size: x-small; font-variant: none; font-weight: normal; }
div.percent div.select-selected { color: var(--percenttext); font-weight: bold; height: 100%; line-height: 63px; overflow: hidden; padding: 0px; text-align: center; text-overflow: ellipsis; position: absolute; width: 100%; }
div.percent div.select-items { margin-left: -4px; margin-top: -13px; }
div.percent div.select-items div { height: 20px; line-height: 2em; overflow-x: hidden; padding: 0px 5px; text-align: center; text-overflow: ellipsis; vertical-align: middle; }
div.percent .select-selected::after { border: 0px solid transparent; border-color: black transparent transparent transparent; content: ""; height: 0; position: absolute; top: 10px; right: 21px; width: 0; }
div.percent .select-selected.select-arrow-active::after { border-color: transparent transparent black transparent; top: 3px; }
div.percent .select-list { margin-left: 5px; }

/*----------------------------------------------------------------------------
  Select styles definitions
----------------------------------------------------------------------------*/

div.formselect { display: block; font-size: 0.9em; margin: 5px -5px; position: relative; }
div.formselect select { display: none; }
.select-selected { background-color: var(--widgetmain); border: none; color: var(--widgetnormal); cursor: pointer; margin: 0; overflow: hidden; padding: 5px 25px 5px 10px; text-overflow: ellipsis; text-wrap: nowrap; user-select: none; vertical-align: middle; }
.select-selected:hover { background-color: var(--widgethover); }
.select-selected:focus { background-color: var(--widgetselect); color: var(--widgetnormal); }
.select-selected::after { border: 6px solid transparent; border-color: var(--widgetnormal) transparent transparent transparent; content: ""; height: 0; position: absolute; top: 11px; right: 10px; width: 0; }
.select-selected.select-arrow-active::after { border-color: transparent transparent var(--widgetnormal) transparent; top: 6px; }
.select-items div { border-top-color: var(--widgetnormal); border-top-style: dotted; border-top-width: 1px; color: var(--widgetnormal); cursor: pointer; margin: 0; overflow: hidden; padding: 5px 10px; text-overflow: ellipsis; text-wrap: nowrap; user-select: none; }
.select-items { background-color: var(--widgetmain); margin: 0; position: relative; }
.select-hide { display: none; }
.select-items div:hover { background-color: var(--widgethover); }
.same-as-selected { background-color: var(--widgetselect); color: var(--widgetnormal); }
.nofilter input[type=text].select-filter { display: none; }
input[type=text].select-filter { background-color: var(--widgetmain); background-image: url('../img/select_filter.png'); background-repeat: no-repeat; background-size: contain; border: 1px solid transparent; border-color: var(--widgetnormal) transparent var(--widgetnormal) transparent; color: var(--widgetnormal); display: block; font-size: small; margin: 0; padding-left: 27px; width: 100%; }
input[type=text].select-filter::placeholder { color: var(--widgetbgd); font-style: oblique; }
input[type=text].select-filter:focus { outline: 0; }
.select-list { position: absolute; left: 0; margin: 0; margin-left: 10px; right: 0; top: 100%; z-index: 16; }

/*----------------------------------------------------------------------------
  Dual select styles definitions
----------------------------------------------------------------------------*/

div.formdualselect { display: inline-block; }
div.formdualselect select { display: none; }
div.formdualselect-container { border-color: none; color: var(--normal); float: left; font-size: medium; font-style: oblique; height: 310px; margin: 10px 5px; text-align: left; width: 310px; }
div.formdualselect-container.small { font-size: 8px; height: 105px; margin: 5px 3px; width: 155px; }
div.formdualselect-buttons { border-color: none; float: left; margin: 10px 10px; padding-top: 130px; width: 50px; }
div.formdualselect-buttons.small { margin: 5px 5px; padding-top: 30px; width: 25px; }
div.formdualselect-select { border-color: var(--border); border-style: solid; border-width: 1px; float: top; height: 300px; margin: 5px 0px; overflow-x: hidden; overflow-y: scroll; width: 300px; }
div.formdualselect-select.small { height: 100px; margin: 3px 0px; width: 150px; }
div.formdualselect-option {  border: none; color: var(--widgettext); font-style: normal; font-size: large; display: block; height: 24px; overflow-x: hidden; overflow-y: hidden; padding: 1px 10px; text-overflow: ellipsis; user-select: none; white-space: nowrap; width: calc(100% - 20px); }
div.formdualselect-option.small { font-size: 11px; height: 13px; margin: 3px; padding: 3px; width: calc(100% - 8px); }
div.formdualselect-option:hover { background-color: var(--widgethover); color: var(--widgetnormal); cursor: grab; }
button.formdualselect-move { background: var(--widgetmain); }
button.formdualselect-move.small { padding: 4px 3px; font-size: .7em; }
button.formdualselect-move:hover { background: var(--widgethover); }

/*----------------------------------------------------------------------------
  Slider styles definitions
----------------------------------------------------------------------------*/

.switch { display: inline-block; height: 24px; margin: 2px; padding: 0; position: relative; width: 40px; }
.switch input { height: 0; opacity: 0; width: 0; }
.slider { background-color: var(--grey); bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; }
.slider:before { background-color: var(--bgdwhite); bottom: 4px; content: ''; height: 16px; left: 4px; position: absolute; transition: .4s; width: 16px; }
.slider-left { color: var(--widgetnormal); float: left; font-size: 1.1em; padding-left: 8px; padding-top: 2px; }
.slider-right { color: var(--widgetnormal); float: right; font-size: 1.1em; padding-right: 8px; padding-top: 2px; }
input:checked + .slider { background-color: var(--widgetmain); }
input:checked + .slider:before { transform: translateX(16px); }
.slider.round { border-radius: 24px; }
.slider.round:before { border-radius: 50%; }

/*----------------------------------------------------------------------------
  LED styles definitions
----------------------------------------------------------------------------*/

.led-percent { background: var(--pct-col); border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset var(--led-shadow) 0 -1px 8px, var(--pct-col) 0 2px 12px; font-size: 10px; font-weight: bold; line-height: 24px; margin: 0 auto; height: 24px; width: 24px; }
.led-percent:hover { cursor: default; }
.led-green { background-color: var(--led-green); border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset var(--led-shadow) 0 -1px 8px, var(--led-green) 0 2px 12px; height: 24px; margin: 0 auto; width: 24px; }
.led-yellow { background-color: var(--led-yellow); border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset var(--led-shadow) 0 -1px 8px, var(--led-yellow) 0 2px 12px; height: 24px; margin: 0 auto; width: 24px; }
.led-red { background-color: var(--led-red); border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset var(--led-shadow) 0 -1px 8px, var(--led-red) 0 2px 12px; height: 24px; margin: 0 auto; width: 24px; }
.led-off { background-color: var(--led-off); border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset var(--led-shadow) 0 -1px 8px; height: 24px; margin: 0 auto; width: 24px; }

/*----------------------------------------------------------------------------
  Wysiwyg editor widgets
----------------------------------------------------------------------------*/

div.wysiwyg-container { display: inline-block; padding: 0; }
div.wysiwyg-title { background: var(--titleh1); color: var(--colorh1); font-size: medium; font-variant: small-caps; font-weight: normal; height: 20px; margin: 0; padding: 4px 0; vertical-align: middle; }
div.wysiwyg-select { background-color: var(--titleh2); border: 1px solid var(--wysiwygborder); border-radius: 3px; color: var(--wysiwygbutton); font-size: small; font-variant: normal; height: 37px; left: calc(100% - 231px); padding-top: 1px; position: relative; text-align: left; top: 5px; width: 202px; z-index: 9; }

/*----------------------------------------------------------------------------
  Industrial roll-out site logs widgets
----------------------------------------------------------------------------*/

div.iro-site-log { margin: 20px auto; padding: 0; width: 80%; }
div.iro-site-log-hide { display: none; }
div.iro-site-log-header { background: var(--titleh1); color: var(--colorh1); font-variant: small-caps; height: 25px; margin: 0; padding-top: 3px; vertical-align: center; }
div.iro-site-log-footer { background: var(--bgdtotal); color: var(--normal); font-size: small; font-weight: bold; height: 20px; margin: 0; padding-top: 1px; vertical-align: middle; }
div.iro-site-log-entry { border-bottom: 1px solid var(--border); font-size: small; margin: 5px auto; text-align: left; width: 99%; }
div.iro-site-log-entry-header-blue { background: var(--bgdnotwhite); color: var(--widgettext); height: 22px; margin: 0; padding: 0; }
div.iro-site-log-entry-header-grey { background: var(--bgdtotal); color: var(--grey); height: 22px; margin: 0; padding: 0; }
div.iro-site-log-entry-header-red { background: var(--caveatbgd); color: var(--caveatcol); height: 22px; margin: 0; padding: 0; }
div.iro-site-log-entry-header-inner { margin: 2px 10px; }
div.iro-site-log-entry-text { margin: 0; padding: 5px 10px; }
div.iro-site-log-entry-text-blue { color: var(--widgettext); margin: 0; padding: 5px 10px; }
div.iro-site-log-entry-text-grey { color: var(--grey); margin: 0; padding: 5px 10px; }
div.iro-site-log-entry-text-red { color: var(--caveatcol); margin: 0; padding: 5px 10px; }

tr.iro-site-copy { display: none; }

/*----------------------------------------------------------------------------
  FAQ widgets
----------------------------------------------------------------------------*/

div.faq-topic { border-bottom-color: var(--border); border-bottom-style: solid; border-bottom-width: 1px; color: var(--titleh1); font-size: x-large; font-style: normal; font-variant: small-caps; font-weight: bold; margin: 10px auto; text-align: left; width: 80%; }
div.faq-topic:hover { background-color: var(--bgdhover); cursor: pointer; }
span.faq-tree-topic { color: var(--titleh2); font-style: normal; font-weight: normal; }
div.faq-btn-topic { background-color: var(--widgetmain); border-radius: 20%; color: var(--widgetnormal); float: left; height: 24px; margin: 4px 4px 4px 3px; padding: 0px; width: 24px; }
div.faq-question-list { display: none; margin-bottom: 5px; }  
div.faq-question-list.open { display: block; }
div.faq-question-container { line-height: 30px; margin: auto; vertical-align: middle; width: 76%; }
div.faq-question { color: var(--normal); font-size: medium; font-weight: bold; margin: 5px auto 0px auto; padding-left: 5px; text-align: left; }
div.faq-question:hover { background-color: var(--bgdhover); cursor: pointer; }
span.faq-tree-quest { color: var(--titleh1); font-style: normal; font-weight: normal; }
div.faq-btn-quest { background-color: var(--widgetmain); border-radius: 20%; color: var(--widgetnormal); float: left; height: 24px; margin: 4px 4px 4px 3px; padding: 0px; width: 24px; }
div.faq-answer { border-color: var(--border); border-width: 1px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; border-bottom-style: solid; border-left-style: solid; border-right-style: solid; color: var(--normal); display: none; font-size: .9em; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1.4em; margin: 0px; padding: 10px 20px; text-align: left; }
div.faq-answer.open { display: block; }
div.faq-answer table td { border: 1px solid var(--border); padding: 0px 5px; }
div.faq-answer table th { background-color: var(--titleh1); border: 1px solid var(--border); color: var(--colorh1); padding: 0px 10px; }
span.faq-actions { float: right; }
textarea.faq-copy {
  background-image: url('/rsc/img/symbol_copy.png');
  background-color: transparent; 
  background-position: top 5px left 5px;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  border: none;
  border-radius: 5px;
  color: var(--highlight2);
  display: block;
  font-family: monospace;
  font-size: medium;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.3em;
  margin: 3px 2%;
  outline: none;
  overflow: hidden;
  padding: 10px 10px 10px 40px;
  resize: none;
  width: 90%;
}
textarea.faq-copy:hover { background-image: url('/rsc/img/symbol_copy_hover.png'); background-color: var(--widgetbgd); cursor: grab; }
span.faq-highlight { background: var(--highlight1); color: var(--grey); padding: 2px; }
div.faq-search { color: var(--grey); font-size: x-small; font-variant: none; font-weight: normal; line-height: .9em; margin: 0px; position: absolute; padding: 0px; right: 100px; text-align: left; top: 130px; }
div.faq-search input[type=text] { border-color: var(--widgetmain); font-size: x-small; font-variant: none; font-weight: normal; line-height: .9em; height: 20px; margin: 0px; width: 150px; }
div.faq-search input[type=text]:focus { outline: 0; }

/*----------------------------------------------------------------------------
  News widgets
----------------------------------------------------------------------------*/

table.news { border-collapse: collapse; border-spacing: 0; width: 50%; }
td.news-up-left { border-bottom-color: var(--border); border-bottom-style: solid; border-bottom-width: 1px; width: 7px; }
td.news-up-middle { border-bottom-color: var(--border); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: var(--titleh1); border-left-style: solid; border-left-width: 4px; color: var(--titleh1); font-size: small; font-weight: bold; padding-left: 2px; text-align: left; vertical-align: bottom; width: 15%; }
td.news-up-right { background: linear-gradient(to right, var(--bgdnotwhite), white); border-left-color: var(--border); border-left-style: solid; border-left-width: 1px; text-align: left; width: auto; }
td.news-down-left { width: 7px; }
td.news-down-middle { border-left-color: var(--titleh1); border-left-style: solid; border-left-width: 4px; width: 15%; }
td.news-down-right { border-left-color: var(--border); border-left-style: solid; border-left-width: 1px; color: var(--normal); padding-left: 10px; padding-top: 4px; text-align: left; }
td.news-empty-middle { border-left-color: var(--titleh1); border-left-style: solid; border-left-width: 4px; }
img.news-icon { float: left; height: 40px; width: 40px; }
div.news-title { float: left; color: var(--widgetmain); font-size: medium; font-weight: bold; padding-top: 5px; }

/*----------------------------------------------------------------------------
  Tutorial widgets
----------------------------------------------------------------------------*/

p.tuto-title { color: var(--titleh1); font-size: x-large; font-style: oblique; font-weight: bold; margin: 0px 20px 10px 20px; }
p.tuto-description { color: var(--normal); font-size: medium; margin: 20px; }
p.tuto-info { color: var(--highlight2); font-size: small; font-style: oblique; font-weight: bold; margin: 10px 50px; }
video { border-color: black; border-style: solid; border-width: 1px; }

/*----------------------------------------------------------------------------
  Tasks related widgets
----------------------------------------------------------------------------*/

div.task { color: var(--grey); margin: 0px auto; font-size: x-small; }
img.symbol-task { height: 11px; margin-bottom: 1px; margin-right: 1px; vertical-align: middle; }
input[type=text].task { background: var(--widgetbgd); border-color: var(--filter); border-style: solid; border-width: 1px; color: var(--filter); font-size: x-small; height: 1.5em; margin: 1px 0px; padding: 0px 2px; width: 60px; }
select.task { background-color: var(--widgetbgd); border-color: var(--filter); border-style: solid; border-width: 1px;  color: var(--filter); font-size: x-small; height: 1.5em; margin: 1px 0px; padding: 0px; width: 60px; }
select.task option { background-color: var(--widgetbgd); color: var(--filter); font-size: x-small; font-style: normal; }
select.task optgroup { background-color: var(--widgetmain); color: var(--widgetbgd); font-size: x-small; font-style: normal; }

/*----------------------------------------------------------------------------
  Survey related widgets
----------------------------------------------------------------------------*/

div.srv-tpc input.editable-content::placeholder { color: var(--grey); }
div.srv-tpc input.editable-content-white::placeholder { color: var(--bgdnotwhite); }
td.srv-tpc-toolbox { background-color: var(--titleh2); width: 36px; }
td.srv-tpc-title { background-color: var(--titleh1); height: 30px; }
tr.srv-qst td:first-child { padding-left: 30px; }
div.srv-question-log { margin: 20px auto; padding: 0; width: 80%; }
div.srv-question-log-header { background: var(--titleh1); color: var(--colorh1); font-variant: small-caps; height: 25px; margin: 0; padding-top: 3px; vertical-align: center; }
div.srv-question-log-footer { background: var(--bgdtotal); color: var(--normal); font-size: small; font-weight: bold; height: 20px; margin: 0; padding-top: 1px; vertical-align: middle; }
div.srv-question-log-entry { border-bottom: 1px solid var(--border); font-size: small; margin: 5px auto; text-align: left; width: 99%; }
div.srv-question-log-entry-header-blue { background: var(--bgdnotwhite); color: var(--widgettext); height: 22px; margin: 0; padding: 0; }
div.srv-question-log-entry-header-grey { background: var(--bgdtotal); color: var(--grey); height: 22px; margin: 0; padding: 0; }
div.srv-question-log-entry-header-red { background: var(--caveatbgd); color: var(--caveatcol); height: 22px; margin: 0; padding: 0; }
div.srv-question-log-entry-header-inner { margin: 2px 10px; }
div.srv-question-log-entry-text { margin: 0; padding: 5px 10px; }
div.srv-question-log-entry-text-blue { color: var(--widgettext); margin: 0; padding: 5px 10px; }
div.srv-question-log-entry-text-grey { color: var(--grey); margin: 0; padding: 5px 10px; }
div.srv-question-log-entry-text-red { color: var(--caveatcol); margin: 0; padding: 5px 10px; }
div.srv-question-log-hide { display: none; }