/******************************************************************************
                                    CONFIG
/*****************************************************************************/

:root
{
  --page-background:    #212121;
  --page-color:         whitesmoke;

  --header-background:  #7bb2c2;
  --header-color:       #212121;
  --header-height:      64px;

  --theader-background: #454545;
  --theader-color:      whitesmoke;
  --theader-height:     12px;

  --tbutton-background: #b3c8d1;
  --tbutton-color:      #333333;

  --hover-background:   #a1d2e8;
  --hover-color:        #333333;

  --panel-background:   whitesmoke;
  --panel-color:        #212121;

  --dark-border:        rgba(0,0,0,0.5);
  --light-border:       rgba(0,0,0,0.25);

  --title-size:         18px;
  --content-size:       15px;

  --table-background:   whitesmoke;
  --table-color:        #212121;

  --panel-width:        600px;
  --panel-height:       707px;
  --menu-width:         270px;
  --message-height:     40px;
}


/******************************************************************************
                                     CORE
/*****************************************************************************/

a
{
  color:                inherit;
  cursor:               pointer;
  text-decoration:      none;
}

::-webkit-inner-spin-button
{
  display:              none;
}

html
{
  min-width:            360px;
  min-height:           100%;
  background:           var(--page-background);
  color:                var(--page-color);
  font-family:          'Open Sans', sans-serif;
}

body
{
  min-width:            360px;
  font-size:            var(--content-size);
}

/* template container */
#template
{
  display:              none;
}

/* generic full-page content */
div.content
{
  position:             absolute;
  left:                 50%;
  top:                  50%;
  transform:            translate(-50%, -50%);
  text-transform:       lowercase;
  font-variant:         small-caps;
  text-align:           center;
  font-size:            24px;
}

/* used by permission system */
.hidden
{
  display:              none !important;
}


/******************************************************************************
                                    HEADER
/*****************************************************************************/

div.title
{
  width:                100%;
  height:               var(--header-height);
  color:                var(--header-color);
  background:           var(--header-background);
  line-height:          var(--header-height);
  font-size:            var(--title-size);
  border-bottom:        1px solid var(--dark-border);
  overflow:             hidden; /* hide filter desc if it doesn't fit on screen */
}

div.title a
{
  padding:              10px 5px 10px 10px;
  text-transform:       uppercase;
}

div.title i
{
  margin-left:          4px;
  margin-right:         4px;
  font-size:            24px;
  vertical-align:       text-top;
}

div.toolbar
{
  position:             absolute;
  right:                0;
  top:                  0;
  z-index:              1;
  width:                auto;
  height:               var(--header-height);
  line-height:          var(--header-height);
  color:                var(--header-color);
  padding-right:        10px;
  text-align:           right;
}

div.toolbar a
{
  display:              inline-block;
  padding-left:         10px;
  padding-right:        10px;
  line-height:          var(--content-size);
  background:           var(--tbutton-background);
  color:                var(--tbutton-color);
  padding:              10px 13px 10px 13px;
  border:               1px solid rgba(0,0,0,0.35);
}

div.toolbar a:first-of-type
{
  border-top-left-radius:     7px;
  border-bottom-left-radius:  7px;
}

div.toolbar a:last-of-type
{
  border-top-right-radius:    7px;
  border-bottom-right-radius: 7px;
}

@media (hover: hover)
{
  div.toolbar a:hover
  {
    background:         var(--hover-background);
    color:              var(--hover-color);
  }
}


/******************************************************************************
                                     MENU
/*****************************************************************************/

#menu
{
  position:             fixed;
  left:                 0;
  top:                  var(--header-height);
  width:                0; /* initially closed */
  height:               calc(100% - var(--header-height));
  overflow-x:           hidden; /* to hide content when closed */
  transition:           0.1s;
  z-index:              2;
  background:           var(--header-background);
  color:                var(--header-color);
  line-height:          24px;
}

#menu.opened
{
  width:                var(--menu-width);
}

#menu a
{
  display:              block;
  width:                var(--menu-width); /* to avoid text reflowing during sliding */
  padding:              7px 5px 7px 5px;
  text-transform:       uppercase;
  border-bottom:        1px solid var(--light-border);
  font-size:            14px;
  position:             relative;
  font-size:            13px;
  padding:              4px;
}

#menu a:first-of-type
{
  border-top:           1px solid var(--light-border);
}

#menu i.fa
{
  margin-left:          7px;
  margin-right:         7px;
  font-size:            16px;
  line-height:          17px;
  vertical-align:       text-top;
}

@media (hover: hover)
{
  #menu a:hover
  {
    background:         var(--hover-background);
    color:              var(--hover-color);
  }
}

/* overlay used to close menu when clicking elsewhere on the page */
#menu-overlay
{
  display:              none;
  position:             fixed;
  top:                  0;
  right:                0;
  bottom:               0;
  left:                 0;
  z-index:              1;
}
#menu-overlay.opened { display: block; }

/* user login info in menu */
div.menu-info
{
  color: #212121;
  position: absolute;
  top: 1px;
  right: 10px;
  text-align: right;
  line-height: 14px;
  font-size: 12px;
  font-family: system-ui;
  text-transform: lowercase;
  width: calc(var(--menu-width) - 137px);
}

/* hierarchical menu */
div.menu-title
{
  position:             relative;
  box-shadow:           0px 0px 1px 1px var(--light-border);
  background:           #87c3dd;
  color:                #333333;
  font-family:          system-ui;
  font-weight:          bold;
  padding:              0px 11px 2px 11px;
  line-height:          19px;
  font-size:            15px;
  font-variant:         small-caps;
  text-transform:       lowercase;
}

div.menu-title span
{
  position:             absolute;
  right:                0;
  top:                  0;
}

div.menu-title i.fa
{
  font-size:            12px !important;
  line-height:          18px !important;
}

div.menu-title span i:nth-child(2) { display: none; }
div.menu-separator.opened div.menu-title span i:nth-child(1) { display: none; }
div.menu-separator.opened div.menu-title span i:nth-child(2) { display: block; }
#menu div.menu-separator a { display: none; }
#menu div.menu-separator.opened a { display: block; }


/******************************************************************************
                                     PANEL
/*****************************************************************************/

#panel
{
  display:              none; /* initially closed */
  position:             absolute;
  overflow-x:           hidden; /* to hide content when closed */
  z-index:              2;
  background:           var(--panel-background);
  color:                var(--panel-color);
  box-shadow:           0px 0px 32px 0px rgb(0,0,0,0.18); 
  padding-bottom:       1px;    
  width:                var(--panel-width);
  height:               var(--panel-height);
  left:                 calc(50% - var(--panel-width) / 2);
  top:                  calc(50% - var(--panel-height) / 2);
}

#panel.opened
{
  display:              block;
}

#panel div.title a
{
  cursor:               default;
}

/* overlay used to close panel when clicking elsewhere on the page */
#panel-overlay
{
  display:              none;
  position:             fixed;
  top:                  0;
  right:                0;
  bottom:               0;
  left:                 0;
  z-index:              1;
  background:           rgba(0,0,0,0.33);
  transition:           0.1s;
}

/* show the panel overlay */
#panel-overlay.opened
{
  display:              block;
}

/* panel fullscreen support */
div#panel.opened.fullscreen
{
  width:                100%;
  height:               100%;
  left:                 0;
  top:                  0;
}

/* panel fullscreen/lock support */
div.set-fullscreen, div.set-lock
{
  display:              none;
}

/* search parameters in page title */
#page div.title span
{
  color:                #454c4c;
  font-size:            13px;
  font-family:          system-ui;
  font-style:           italic;
  float:                right;
  padding-right:        15px;
  margin-right:         300px;
  cursor:               pointer;
}

/* embedded entry name in panel title */
#panel div.title span
{
  display:              block;
  position:             absolute;
  top:                  16px;
  left:                 48px;
  color:                #454c4c;
  font-size:            13px;
  font-family:          system-ui;
  font-style:           italic;
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;
  width:                calc(var(--panel-width) - 250px);
}


/******************************************************************************
                                     FORM
/*****************************************************************************/

div.form
{
  height:               calc(100% - var(--header-height));
  overflow-x:           hidden;
  overflow-y:           auto;
  padding:              20px;
}

div.form-entry
{
  width:                100%;
  padding-top:          12px;
  padding-bottom:       12px;
  position:             relative;
  font-family:          system-ui;
}

div.form label
{
  display:              inline-block;
  width:                160px;
  padding-left:         18px;
  text-align:           left;
  font-variant:         small-caps;
  text-transform:       lowercase;
  vertical-align:       text-top;
  font-weight:          bold;
}

div.form input,
div.form select,
div.form textarea
{
  width:                calc(100% - 160px);
  height:               32px;
  line-height:          32px;
  padding-left:         7px;
  padding-right:        7px;
}

div.form select
{
  padding-left:         3px;
}

div.form textarea
{
  height:               102px;
  line-height:          18px;
  resize:               none;
  vertical-align:       text-top;
  padding-top:          5px;
  padding-bottom:       5px;
}

div.form input[type="file"]
{
  height:               unset;
  margin-left:          -7px;
}

div.form input[type="checkbox"]
{
  width:                18px;
  height:               18px;
  vertical-align:       text-top;
}

div.form input[disabled],
div.form select[disabled],
div.form textarea[disabled]
{
  background:           #ebebe4;
  border-color:         rgb(118, 118, 118);
}

help
{
  display:              block;
  width:                calc(100% - 160px);
  margin-left:          160px;
  padding:              8px;
  border:               1px solid #a5a5a5;
  border-top:           none;
  background:           #eaeaea;
  font-size:            13px;
  line-height:          20px;
}

help.standalone
{
  width:                100%;
  margin-left:          0;
  padding:              16px;
  border-top:           1px solid #a5a5a5;
}

help:empty
{
  display:              none;
}

input[type='checkbox'] + help
{
  border-top:           1px solid #a5a5a5;
  margin-top:           4px;
}

help li
{
  margin-bottom:        5px;
}


/******************************************************************************
                                    MESSAGE
/*****************************************************************************/

#message
{
  position:             fixed;
  left:                 50%;
  top:                  50%;
  transform:            translate(-50%, -50%);
  width:                auto;
  height:               0;        /* initially closed */
  overflow:             hidden;   /* to hide content when closed */
  transition:           0.1s;
  z-index:              5;
  text-align:           center;
  font-size:            0;
  text-transform:       uppercase;
  color:                #212121;
}

#message.opened
{
  height:               auto;
  border:               1px solid var(--dark-border);
  border-radius:        7px;
  box-shadow:           0 0 3px 0px var(--light-border);
  padding:              18px;
  font-size:            var(--content-size);
  line-height:          var(--content-size);
}


/******************************************************************************
                                    LOADER
/*****************************************************************************/

#loader
{
  position:             fixed;
  left:                 50%;
  top:                  50%;
  transform:            translate(-50%, -50%);
  width:                auto;
  height:               0;        /* initially closed */
  overflow:             hidden;   /* to hide content when closed */
  transition:           0.1s;
  transition-delay:     0.4s;     /* used to avoid showing loader for quick requests */
  z-index:              4;
  text-align:           center;
  font-size:            0;
  text-transform:       uppercase;
  background:           #EDD068;
  color:                #212121;
}

#loader.opened
{
  height:               53px;
  border:               1px solid var(--dark-border);
  border-radius:        7px;
  box-shadow:           0 0 12px 0px var(--light-border);
  padding:              18px;
  font-size:            var(--content-size);
  line-height:          var(--content-size);
}

/* overlay used to not allow the user to interact during requests */
#loader-overlay
{
  display:              none;
  position:             fixed;
  top:                  0;
  right:                0;
  bottom:               0;
  left:                 0;
  z-index:              3;
}

#loader-overlay.opened
{
  display:              block;
}


/******************************************************************************
                                     TABLE
/*****************************************************************************/

div.table-header
{
  display:              flex;
  justify-content:      space-around;
  z-index:              1;
  width:                100%;
  font-variant:         all-small-caps;
  color:                var(--theader-color);
  background:           var(--theader-background);
  line-height:          var(--theader-height);
  font-size:            calc(var(--content-size) + 2px);
}

div.table-entries
{
  height:               calc(100vh - var(--header-height) - var(--theader-height) - 21px);
  overflow-y:           auto;
  overflow-x:           hidden;
  background:           var(--table-background);
  color:                var(--table-color);
}

div.table-entry
{
  display:              flex;
  justify-content:      space-around;
  cursor:               pointer;
  border-bottom:        1px solid rgba(100,100,100,0.33);
  page-break-inside:    avoid;
  font-size:            14px;
}

@media (hover: hover)
{
  div.table-entry:hover
  {
    background:         #E0E0E0;
  }
}

div.table-element
{
  display:              inline-block;
  flex-grow:            1;
  flex-shrink:          1;
  width:                100px;
  text-align:           center;
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;
  padding:              10px 6px 10px 6px;
  border-right:         1px solid rgba(100,100,100,0.33);
}

div.table-fixer
{
  margin-right:         calc(-1 * (100vw - 100%));
}

div.empty-table-entry
{
  font-style:           italic;
  text-align:           center;
  padding:              6px;
  font-size:            18px;
  text-transform:       lowercase;
  font-variant:         small-caps;
}

div.size0 { flex-grow: 0; }
div.size2 { flex-grow: 2; }
div.size3 { flex-grow: 3; }
div.size4 { flex-grow: 4; }
div.size5 { flex-grow: 5; }
div.size6 { flex-grow: 6; }

div.leftalign { text-align: left; margin-left: 8px; }
div.leftalign:nth-child(1) { margin-left: 12px; }

span.total
{
  font-size: 14px;
  color: lightgray;
}


/******************************************************************************
                                    DETAILS
/*****************************************************************************/

div.details
{
  height:               calc(100% - var(--header-height));
  overflow-x:           hidden;
  overflow-y:           auto;
  padding:              20px;
}

div.details-entry
{
  width:                100%;
  padding-top:          10px;
  padding-bottom:       10px;
  border-bottom:        1px solid var(--light-border);
  font-family:          system-ui;
  background:           white; /* simplicity is the ultimate sophistication */
  box-shadow:           0 0 4px 0px var(--light-border);
}

div.details-entry:first-child
{
  border-top:           1px solid var(--light-border);
}

div.details-label
{
  display:              inline-block;
  width:                167px;
  text-transform:       lowercase;
  font-variant:         small-caps;
  text-align:           left;
  padding-left:         18px;
  padding-right:        7px;
  /*line-height:          16px;*/
  font-weight:          bold;
}

div.details-value
{
  display:              inline-block;
  width:                calc(100% - 167px);
  vertical-align:       top;
  line-height:          18px;
}

div.details-section
{
  position:             relative;
}

div.details-title
{
  display:              inline-block;
  width:                100%;
  height:               auto;
  padding:              8px;
  margin-top:           32px;
  color:                var(--theader-color);
  background:           var(--theader-background);
  font-size:            14px;
  text-align:           center;
  text-transform:       uppercase;
  border-radius:        4px 4px 0 0;
}

div.details-table
{
  width:                100%;
  height:               auto;
  padding:              8px;
  background:           ghostwhite;
  box-shadow:           inset 0 0 2px 0 rgba(0,0,0,0.5);
  border-radius:        0 0 5px 5px;
}

div.details-table div.table-entry
{
  background:           none;
}

div.details-table div.table-entry:last-of-type
{
  border-bottom:        none;
}

@media (hover: hover)
{
  div.details-table div.table-entry:hover
  {
    background:         #E0E0E0;
  }
}

div.details-table div.table-element
{
  text-align:           left;
  border-right:         none;
}

/* inline button inside details-title */
a.details-inline-button
{
  display:              inline-block;
  position:             absolute;
  top:                  6px;
  right:                0;
  padding:              8px;
  margin-top:           24px;
  border-radius:        4px;
  /*color:                var(--header-color);*/
  text-align:           center;
  cursor:               pointer;
  font-size:            18px;
}

a.details-inline-button:hover
{
  color: var(--header-background);
}

div.details-button
{
  text-align:           center;
  display:              inline-block;
}

div.details-button a
{
  display:              inline-block;
  width:                260px;
  margin-top:           12px;
  padding:              10px;
  border-radius:        8px;
  background:           gainsboro;
  text-align:           center;
  border:               1px solid var(--dark-border);
  margin-left:          5px;
  margin-right:         5px;
}

div.details-info div.details-title
{
  margin-top:           0;
}

div.details-thumbnail img
{
  margin:               2px;
  border:               1px solid rgba(0,0,0,0.5);
}

div.empty-subtable-entry
{
  font-style:           italic;
  text-align:           left;
  justify-content:      normal;
  padding:              6px;
}

@media (hover: hover)
{
  div.empty-subtable-entry:hover
  {
    background:         none !important;
    cursor:             default !important;
  }
}


/******************************************************************************
                             REMOVE WARNING PANEL
/*****************************************************************************/

div.remove
{
  width:                100%;
  padding:              12px 24px 12px 24px;
  text-align:           center;
  /*transform:            translate(0%, 50%);*/
}

div.remove p
{
  margin-top:           18px;
}

div.remove ul
{
  font-style:           italic;
  line-height:          22px;
  margin-top:           -10px;
}

div.remove a.remove-button
{
  display:              inline-block;
  width:                270px;
  margin-top:           12px;
  padding:              10px;
  border-radius:        8px;
  color:                white;
  background:           indianred;
  text-align:           center;
}


/******************************************************************************
                                     LOGIN
/*****************************************************************************/

div.login
{
  position:             absolute;
  left:                 50%;
  top:                  50%;
  width:                270px;
  transform:            translate(-50%, -50%);
}

div.login-logo
{
  width:                265px;
  height:               79px;
  background:           url('/data/ui/logo.png');
  margin:               auto;
  background-size:      cover;
  background-position:  center;
}

div.login-entry
{
  padding-top:          16px;
}

div.login input
{
  color:                #212121;
  width:                270px;
  line-height:          32px;
  text-align:           center;
  font-size:            13.37px;
}

div.login a.button
{
  display:              inline-block;
  width:                270px;
  margin-top:           16px;
  padding:              10px;
  color:                var(--tbutton-color);
  background:           var(--hover-background);
  text-align:           center;
}


/******************************************************************************
                                   DROPDOWN
/*****************************************************************************/

div.form select.dropdown
{
  position:             absolute;
  width:                20px;
  right:                0px;
  top:                  12px;
  border-left:          0px;
}


/******************************************************************************
                            ADAPT TO SMALL SCREENS
/*****************************************************************************/

/* maximize panel to fullscreen */
@media screen and ((max-width: 800px) or (max-height: 707px))
{
  :root
  {
    --panel-width:      100%;
    --panel-height:     100%;
  }

  #panel.opened
  {
    border:             none;
    left:               0;
    top:                0;
  }
}

/* maximize menu to fullscreen */
@media screen and (max-width: 500px)
{
  :root
  {
    --menu-width:       100%;
  }
}


/* collapse buttons on page/panel header */
@media screen and (max-width: 800px)
{
  div.toolbar a
  {
    font-size:          0;
    line-height:        7px;
    padding:            8px 12px 8px 12px;
  }

  div.toolbar i
  {
    font-size:          18px;
  }
  
  #page div.title span
  {
    display:            none;
  }
}


/* optimize details/form for small devices */
@media screen and (max-width: 600px)
{
  div.details-label
  {
    width:              118px;
  }

  div.details-value
  {
    width:              calc(100% - 118px);
  }

  div.form label
  {
    width:              118px;
  }

  div.form input,
  div.form select,
  div.form textarea
  {
    width:              calc(100% - 118px);
  }

  help
  {
    width:              calc(100% - 118px);
    margin-left:        118px;
  }

  div.details-button a
  {
    width:              calc(100vw - 70px);
  }
}


/* used to hide table columns progressively */
@media screen and (max-width: 1800px) { .above1800 { display: none !important; } }
@media screen and (max-width: 1700px) { .above1700 { display: none !important; } }
@media screen and (max-width: 1600px) { .above1600 { display: none !important; } }
@media screen and (max-width: 1500px) { .above1500 { display: none !important; } }
@media screen and (max-width: 1400px) { .above1400 { display: none !important; } }
@media screen and (max-width: 1300px) { .above1300 { display: none !important; } }
@media screen and (max-width: 1200px) { .above1200 { display: none !important; } }
@media screen and (max-width: 1100px) { .above1100 { display: none !important; } }
@media screen and (max-width: 1000px) { .above1000 { display: none !important; } }
@media screen and (max-width: 950px)  { .above950  { display: none !important; } }
@media screen and (max-width: 900px)  { .above900  { display: none !important; } }
@media screen and (max-width: 850px)  { .above850  { display: none !important; } }
@media screen and (max-width: 800px)  { .above800  { display: none !important; } }
@media screen and (max-width: 750px)  { .above750  { display: none !important; } }
@media screen and (max-width: 700px)  { .above700  { display: none !important; } }
@media screen and (max-width: 650px)  { .above650  { display: none !important; } }
@media screen and (max-width: 600px)  { .above600  { display: none !important; } }
@media screen and (max-width: 550px)  { .above550  { display: none !important; } }
@media screen and (max-width: 500px)  { .above500  { display: none !important; } }
@media screen and (max-width: 450px)  { .above450  { display: none !important; } }
@media screen and (max-width: 400px)  { .above400  { display: none !important; } }


/* auth-related */
.no-write .auth-write,
.no-delete .auth-delete,
.no-download .auth-download,
.no-orders .auth-orders,
.no-workers .auth-workers,
.no-provisions .auth-provisions,
.no-ddt .auth-ddt,
.no-reports .auth-reports,
.no-vehicles .auth-vehicles,
.no-emails .auth-emails,
.no-users .auth-users
{
  display:              none !important;
}


/******************************************************************************
                                     PRINTING
/*****************************************************************************/

/* force printing option 'background graphics' to be on */
*
{
  -webkit-print-color-adjust: exact !important;
  color-adjust: exact !important;    
}

/* do not show printer container on screen */
@media screen
{
  #printer
  {
    display: none;
  }
}

@media print
{
  /* do not show all other main containers on print */
  #page, #panel, #panel-overlay, #message, #loader, #loader-overlay
  {
    display: none !important;
  }
  
  /* no background color */
  html
  {
    background: none !important;
  }
  
  /* use different font on printing */
  body
  {
    font-family: system-ui;
  }
  
  /* force page size and orientation */
  @page { size: A4 portrait }
  
  /* printer container */
  #printer
  {
    width:              999px;
    margin:             auto;
    font-size:          14px;
    color:              black;
  }
  
  /* tweak printed tables */
  .table-header
  {
    background: none !important;
    border: 1px solid black !important;
    margin-top: -101px !important;
  }
  .table-element { border-right: none !important; }
  .table-entries { height: auto !important; }
  .table-fixer, .indicator { display: none !important; }
}


/******************************************************************************
                                    DDT MODULE
/*****************************************************************************/

div.ddt-module
{
  position: relative;
}

div.ddt-module + div.ddt-module
{
  page-break-before: always;
}

div.ddt-module img
{
  width: 999px;
}

div.ddt-module-items
{
  position: absolute;
  left: 24px;
  top: 567px;
  width: 100%;  
}

div.ddt-module-item
{
  height: 29.5px;
  position: relative;
}

div.ddt-module span
{
  position: absolute;
  font-family: system-ui;
  text-align: center;
  text-transform: uppercase;
  font-size: 17px;
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;
}

div.ddt-module span[tag='origin'] { left: 24px; top: 103px; width: 380px; height: 167px; padding: 20px; font-weight: bold; white-space: break-spaces; }
div.ddt-module span[tag='identifier'] { left: 538px; top: 120px; width: 166px; font-weight: bold; }
div.ddt-module span[tag='date'] { left: 838px; top: 120px; width: 137px; font-weight: bold; }
div.ddt-module span[tag='order'] { left: 538px; top: 177px; width: 166px; font-weight: bold; }
div.ddt-module span[tag='suborder'] { left: 538px; top: 233px; width: 166px; font-weight: bold; }
div.ddt-module span[tag='dest_name'] { left: 25px; top: 336px; width: 381px; }
div.ddt-module span[tag='dest_address'] { left: 25px; top: 400px; width: 381px; }
div.ddt-module span[tag='dest_cap'] { left: 25px; top: 466px; width: 71px; }
div.ddt-module span[tag='dest_city'] { left: 98px; top: 466px; width: 251px; }
div.ddt-module span[tag='dest_province'] { left: 349px; top: 466px; width: 55px; }
div.ddt-module span[tag='parcels'] { left: 407px; bottom: 224px; width: 130px; }
div.ddt-module span[tag='carrier'] { left: 24px; bottom: 139px; width: 369px; }
div.ddt-module span[tag='reason'] { left: 838px; top: 466px; width: 138px; height: 40px; text-overflow: revert; white-space: revert; }

div.ddt-module span[tag='unit'] { left: 0px; top: 5px; width: 72px; font-size: 16px; }
div.ddt-module span[tag='amount'] { left: 74px; top: 5px; width: 108px; font-size: 16px; }
div.ddt-module span[tag='desc'] { left: 184px; top: 5px; width: 767px; font-size: 16px; text-align: left; padding: 0 10px 0 10px; }


/******************************************************************************
                                    PROVISION MODULE
/*****************************************************************************/

div.provision-module
{
  position: relative;
}

div.provision-module + div.provision-module
{
  page-break-before: always;
}

div.provision-module img
{
  width: 999px;
}

div.provision-module-items
{
  position: absolute;
  left: 24px;
  top: 530px;
  width: 100%;  
}

div.provision-module-item
{
  height: 89px;
  position: relative;
}

div.provision-module span
{
  position: absolute;
  font-family: system-ui;
  text-align: center;
  text-transform: uppercase;
  font-size: 17px;
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;
}

div.provision-module span[tag='identifier'] { left: 494px; top: 120px; width: 112px; font-size: 14px; }
div.provision-module span[tag='date'] { left: 780px; top: 120px; width: 195px; font-size: 14px; }
div.provision-module span[tag='order'] { left: 494px; top: 171px; width: 112px; font-size: 14px; }
div.provision-module span[tag='suborder'] { left: 494px; top: 222px; width: 112px; font-size: 14px; }
div.provision-module span[tag='workplace'] { left: 780px; top: 171px; width: 195px; font-size: 14px; }
div.provision-module span[tag='prov_name'] { left: 380px; top: 284px; width: 595px; }
div.provision-module span[tag='prov_address'] { left: 380px; top: 324px; width: 595px; }
div.provision-module span[tag='prov_cap'] { left: 380px; top: 360px; width: 112px; font-size: 14px; }
div.provision-module span[tag='prov_city'] { left: 494px; top: 360px; width: 283px; font-size: 14px; }
div.provision-module span[tag='prov_province'] { left: 780px; top: 360px; width: 195px; font-size: 14px; }
div.provision-module span[tag='offer'] { left: 24px; top: 421px; width: 951px; font-size: 14px;}
div.provision-module span[tag='notes'] { left: 32px; top: 1121px; width: 934px; text-align: left; font-size: 14px;}
div.provision-module span[tag='condition_delivery'] { left: 188px; top: 1196px; width: 773px; text-align: left; }
div.provision-module span[tag='condition_payment'] { left: 203px; top: 1242px; width: 762px; text-align: left; }
div.provision-module span[tag='condition_billing'] { left: 286px; top: 1284px; width: 677px; text-align: left; }

div.provision-module span[tag='unit'] { left: 45px; top: 52px; width: 239px; font-size: 16px; }
div.provision-module span[tag='amount'] { left: 286px; top: 52px; width: 68px; font-size: 16px; }
div.provision-module span[tag='value'] { left: 356px; top: 52px; width: 112px; font-size: 16px; }
div.provision-module span[tag='total'] { left: 470px; top: 52px; width: 112px; font-size: 16px; }
div.provision-module span[tag='discount'] { left: 583px; top: 52px; width: 171px; font-size: 16px; }
div.provision-module span[tag='discounted'] { left: 755px; top: 52px; width: 196px; font-size: 16px; }
div.provision-module span[tag='desc'] { left: 46px; top: 12px; width: 905px; font-size: 16px; text-align: left; padding: 0 10px 0 10px; }

div.provision-module span[tag='total_amount'] { right: 24px; bottom: 383px; width: 196px; font-size: 16px; }
div.provision-module span[tag='total_vat'] { right: 24px; bottom: 347px; width: 196px; font-size: 16px; }
div.provision-module span[tag='total_cost'] { right: 24px; bottom: 311px; width: 196px; font-size: 16px; }

div.provision-module-item:nth-child(2) { margin-top: -2px; }
div.provision-module-item:nth-child(3) { margin-top: -16px; }
div.provision-module-item:nth-child(4) { margin-top: -15px; }
div.provision-module-item:nth-child(5) { margin-top: -14px; }
div.provision-module-item:nth-child(6) { margin-top: -13px; }

div.provision-module-item:nth-child(3) span[tag='desc'] { top: 19px; }
div.provision-module-item:nth-child(4) span[tag='desc'] { top: 19px; }
div.provision-module-item:nth-child(5) span[tag='desc'] { top: 19px; }
div.provision-module-item:nth-child(6) span[tag='desc'] { top: 18px; }


/******************************************************************************
                                 MULTI-SELECT
/*****************************************************************************/

div.orders-table-header div.table-element:nth-child(1),
div.orders-table-entry div.table-element:nth-child(1)
{
  width:                50px;
}

div.orders-table-header div.table-element:nth-child(1) i
{
  line-height:          10px; /* don't break page overflow for that select/unselect icon */
}

/* multi-select toolbar */
#extra { right: 300px; }
#extra i { margin-right: 5px; }
@media screen and (max-width: 800px)
{
  #extra { right: 144px; }  
  #extra a { padding: 10px 18px 10px 18px; }  
  #extra i, #extra span { font-size: 15px; line-height: 15px; }
}

div.orders-analysis
{
  text-align:           center;
}

#analyze-selection
{
  background:           darkseagreen;
}

div.orders-analysis .table-entry
{
  cursor:               default;
}

div.orders-analysis .form
{
  height:               auto;
  padding:              0;
  margin-top:           -7px;
}

div.orders-analysis label
{
  width:                30px;
  padding-left:         0px;
  padding-right:        7px;
  text-align:           right;  
}

div.orders-analysis input[type="date"]
{
  width:                130px; /* support 360p mobile portrait */
}

div.orders-analysis input[type="checkbox"]
{
  margin-left:          25px; /* support 360p mobile portrait */
  margin-right:         10px;
}


/******************************************************************************
                                    TWEAKS
/*****************************************************************************/

/* deadlines subtable */

div.deadlines-subtable-entry div.table-element:nth-child(2),
div.deadlines-subtable-entry div.table-element:nth-child(3)
{
  text-align:           right;
}


/* files subtable */

div.files-subtable-entry div.table-element:last-child
{
  text-align:           right;
}


/* commissions subtable */

div.commissions-subtable-entry div.table-element:last-child
{
  text-align:           right;
}


/* permissions subtable */

div.permissions-subtable-entry div.table-element:last-child
{
  text-align:           right;
  flex-grow:            0;
}


/* ddt items subtable */

div.ddt-items-subtable-entry div.table-element:first-child
{
  flex-grow: 0;
  font-variant: small-caps;
  text-transform: uppercase;
}


/* provision items subtable */

div.provision-items-subtable-entry div.table-element:first-child
{
  flex-grow: 0;
  font-variant: small-caps;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 14px;
}


/* always-compact panel buttons */
#panel div.toolbar a
{
  font-size:          0;
  line-height:        7px;
  padding:            8px 12px 8px 12px;
}

#panel div.toolbar i
{
  font-size:          18px;
}


/* assisted timesheets */
@media screen and (min-width: 1337px)
{
  div.timesheets-assisted form
  {
    position: relative;  
  }

  div.timesheets-assisted div.form-entry
  {
    width: calc(48% - 48px);
  }

  div.timesheets-assisted div.details-suggestions
  {
    position: absolute;
    width: 48%;
    top: -20px;
    right: 0;
  }
  
  div#subtable-suggestions
  {
    height: calc(100vh - var(--header-height) - 128px);
    overflow-y: auto;
  }
}
@media screen and (max-width: 1337px)
{
  div.timesheets-assisted div.form-entry
  {
    width: calc(100% - 48px);
  }
}

/* subtable entries */

div.suggestions-subtable-entry div.table-element:first-child
{
  flex-grow: 0;
}

div.suggestions-subtable-entry div.table-element:last-child
{
  border-radius: 7px;
  box-shadow: 0 0 4px 0px var(--dark-border);
  min-width: 170px;
  max-width: 170px;
  text-align: center;
  line-height: 10px;
  margin: 7px;
  font-size: 13px;
}

div.suggestions-subtable-entry:hover div.table-element:last-child
{
  box-shadow: 0 0 4px 1px var(--dark-border);
}

div.suggestions-subtable-entry div.table-element:last-child span
{
  font-weight: bold;
  text-transform: uppercase;
  margin-right: 7px;
  float: right;
}

div.suggestions-subtable-entry
{
  position: relative;
}

div.suggestions-subtable-entry div.table-element:first-child i
{
  position: absolute;
  top: 12px;
  left: -36px;
  display: none;
}

@media screen and (min-width: 1337px)
{
  div.suggestions-subtable-entry:hover div.table-element:first-child i
  {
    display: block;
  }
}


/* updated info in details */
div.updated-info
{
  font-size: 12px;
  text-align: right;
  margin-top: 7px;
  color: #4c4c4c;
  line-height: 18px;
}


/* inline buttons inside input boxes */
div.form-entry a.inline
{
  position: absolute;
  top: 20px;
  right: 10px;
  font-size: 14px;
}


/* suggested timesheets pinning button */
div.form-entry a.pin
{
  position: absolute;
  right: -45px;
  top: 12px;
  font-size: 14px;
  background: lightgray;
  padding: 7px;  
  border-radius: 16px;
  box-shadow: 0 0 1px 1px var(--light-border);
}
div.form-entry a.pin.pinned
{
  background: palegreen;
}


/* order-info in form */
help#order-info
{
  background: aliceblue;
  font-size: 12px;
  line-height: 20px;
}


/* activity warning */
div.activity-warning-create,
div.activity-warning-edit
{
  padding: 10px;
  text-align: center;
  background: bisque;
  border: 1px solid var(--light-border);
  font-size: 13px;
  margin-bottom: 8px;
}

div.activity-warning-create i,
div.activity-warning-edit i
{
  font-size: 17px;
  float: left;
  line-height: 13px;
  color: orangered;  
}


/* multi-form for ddt/provision items */
div.mini-forms-header,
div.ddt-items-mini-form form,
div.provision-items-mini-form form
{
  display: flex;
  justify-content: center;
  text-align: center;
}
div.ddt-items-mini-form select.dropdown,
div.provision-items-mini-form select.dropdown
{
  position:             absolute;
  width:                20px;
  right:                0px;
  top:                  12px;
  border-left:          0px;
}
div.ddt-items-mini-form input,
div.ddt-items-mini-form select,
div.provision-items-mini-form input,
div.provision-items-mini-form select
{  
  width: 100%;
}
div.mini-forms-header label,
div.ddt-items-mini-form .form-entry,
div.provision-items-mini-form .form-entry
{
  width: 10%;
}
div.mini-forms-header label:last-child,
div.ddt-items-mini-form .form-entry:last-child,
div.provision-items-mini-form .form-entry:last-child
{
  width: 40%;
}
div.mini-forms-header label
{
  padding-left: 5px;
}
a#add-mini-form,
a#del-mini-form
{
  font-size: 12px;
  font-variant: small-caps;
  text-transform: uppercase;
  padding: 5px 10px 5px 10px;
  border-radius: 7px;
  box-shadow: 0 0 1px 1px var(--light-border);
  display: inline-block;
}
a#add-mini-form { background: palegreen; margin-top: 10px; }
a#del-mini-form { background: lightgray; margin-top: 5px; }
a#del-mini-form.to_delete { background: orange; }
a#multi-create-ddt-items { right: 28px; }
a#multi-create-provision-items { right: 28px; }
div.ddt-items-multi-form a#add-mini-form { margin-left: 15%; }
div.provision-items-multi-form a#add-mini-form { margin-left: 5%; }

/* suggestion filter */
div.suggestion-filter
{
  position: absolute;
  right: 0;
  top: 0;
  text-transform: lowercase;
  font-size: 13px;
}
div.suggestion-filter input
{
  width: auto;
  background: no-repeat;
  color: whitesmoke;
  border: none;
  font-weight: bold;
}
div.suggestion-filter input::-webkit-calendar-picker-indicator
{
  filter: invert(1);
}
div.suggestion-filter input:focus
{
  outline: none;
}
div.details-suggestions .details-title
{
  position: relative;
}

/* left-align desc column in orders/suborders */
div.orders-table-header .table-element:nth-child(4),
div.orders-table-entry .table-element:nth-child(4),
div.suborders-table-header .table-element:nth-child(3),
div.suborders-table-entry .table-element:nth-child(3)
{
  text-align: left;
  padding-left: 10px;
  padding-right: 10px;
}


/* left-align recipients column in deadlines */
div.deadlines-table-header .table-element:nth-child(4),
div.deadlines-table-entry .table-element:nth-child(4)
{
  text-align: left;
  padding-left: 10px;
  padding-right: 10px;
}

/* sheet-info in form */
help#sheet-info
{
  background: aliceblue;
  font-size: 12px;
  line-height: 20px;
}