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

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

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

html
{
  min-width:            1550px;
  min-height:           100%;
  background:           #e8e8e8;
  color:                #223843;
  font-family:          'Open Sans', sans-serif;
}

body
{
  font-size:            15px;
  overflow-y:           hidden;
}

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

/* generic full-page content */
div.content
{
  position:             absolute;
  left:                 50%;
  top:                  50%;
  transform:            translate(-50%, -50%);
  font-size:            18px;
  text-align:           center;
  width:                100%;
}


div.logo
{
  display:              inline-block;
  width:                200px;
  height:               64px;
  background:           url('logo.png');
  margin:               auto;
}


i.fas
{
  vertical-align: -4%;
}


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

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

div.login input
{
  color:                #223843;
  border:               1px solid rgba(66,66,66,0.4);  
  width:                100%;
  line-height:          32px;
  text-align:           center;
  margin-top:           6px;
}

div.login a.button
{
  display:              inline-block;
  margin-top:           12px;
  padding:              9px 16px 9px 16px;
  border-radius:        8px;
  color:                white;
  background:           #666666;
  text-align:           center;
  line-height:          14px;
}


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

div.menu
{
  width:                100%;
  background:           #87a4a8;
  border-bottom:        1px solid rgba(0,0,0,0.25);
  box-shadow:           0px 1px 7px 0px rgba(0,0,0,0.25);
  height:               64px;
  font-size:            20px;
  line-height:          64px;
  position:             relative;
  font-variant:         small-caps;
  text-transform:       lowercase;
}

a.menu-entry
{
  display:              inline-block;
  vertical-align:       top; /* wtf */
  padding-left:         12px;
  padding-right:        12px;
  height:               100%;
}

a.menu-entry.active
{
  background:           #00bcd4;
  border-bottom:        1px solid rgba(0,0,0,0.25);
  box-shadow:           0px 1px 7px 0px rgb(0,0,0,0.25);
  height:               calc(100% + 1px);
}

a.logout
{
  float:                right;
  border-left:          1px solid rgba(0,0,0,0.25);
  font-style:           italic;
  margin-left:          8px;
}

a.command
{
  float:                right;
}

a.menu-subentry
{
  position: absolute;
  top: 18px;
  font-size: 16px;
}

a.menu-subentry.active
{
  font-weight: bold;
}

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

div.table-header
{
  display:              flex;
  justify-content:      space-around;
  z-index:              1;
  width:                100%;
  border-bottom:        1px solid rgba(0,0,0,0.25);
  font-weight:          bold;
  text-transform:       uppercase;  
  background:           #c4d6d9;
  height:               42px;
  line-height:          30px;
}

div.table-entries
{
  height:               calc(100vh - 64px - 42px);
  overflow-y:           auto;
  overflow-x:           hidden;
}

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;
  height:               42px;
  line-height:          30px;
  background:           whitesmoke;
}

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

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:              6px;
  border-right:         1px solid rgba(100,100,100,0.33);
}

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

div.table-element.filtered
{
  line-height:          15px;
}

div.table-element.filtered span
{
  font-size:            12px;
  font-weight:          normal;
  font-style:           italic;
  text-transform:       uppercase;
}

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.left-aligned { text-align: left; }


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

#message
{
  position:             fixed;
  left:                 0;
  bottom:               0;
  width:                50%;
  height:               0;        /* initially closed */
  overflow:             hidden;   /* to hide content when closed */  
  transition:           0.1s;
  z-index:              5;  
  text-align:           center;
  line-height:          40px;
  text-transform:       uppercase;
  color:                black;
  transform:            translateX(50%);
  border-radius:        66px 66px 0 0;
}

#message.opened
{
  height:               40px;
  border-top:           1px solid rgba(0,0,0,0.33);
  border-left:          1px solid rgba(0,0,0,0.33);
  border-right:         1px solid rgba(0,0,0,0.33);
}


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

#loader
{
  position:             fixed;
  left:                 0;
  bottom:               0;
  width:                50%;
  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;
  line-height:          40px;
  text-transform:       uppercase;
  background:           #000000;
  color:                #cccccc;
  transform:            translateX(50%);
  border-radius:        66px 66px 0 0;
}

#loader.opened
{
  height:               40px;
  border-top:           1px solid rgba(0,0,0,0.33);
  border-left:          1px solid rgba(0,0,0,0.33);
  border-right:         1px solid rgba(0,0,0,0.33);
}

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


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

#panel
{
  display:              none;
  position:             absolute;
  left:                 50%;
  top:                  50%;
  transform:            translate(-50%, -50%);
  font-size:            15px;
  text-align:           center;
  background:           white;
  border-radius:        15px;
  width:                520px;
  height:               520px;
  box-shadow:           0px 0px 32px 0px rgb(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.18);  
  z-index:              2;  
}

#panel-overlay
{
  display:              none;
  position:             fixed;
  top:                  0;
  right:                0;
  bottom:               0;
  left:                 0;
  z-index:              1;
}

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

div.panel-header
{
  background:           #87a4a8;
  border-radius:        15px 15px 0 0;
  height:               36px;
  border-bottom:        1px solid rgba(0,0,0,0.2);
  line-height:          36px;
}

div.panel-header i
{
  position:             absolute;
  left:                 6px;
  top:                  8px;
  font-size:            18px;
  cursor:               pointer;
  text-transform:       lowercase;
  font-variant:         small-caps;
}

div.panel-footer
{
  position:             absolute;
  bottom:               0;
  width:                100%;
  height:               37px;
  font-size:            19px;
  line-height:          32px;
  display:              flex;
  justify-content:      space-around;
  border-top:           1px solid rgba(0,0,0,0.2);
  text-transform:       lowercase;
  font-variant:         small-caps;
}

div.panel-button
{
  display:              inline-block;
  flex-grow:            1;
  flex-shrink:          1;
  width:                100px;
}

div.panel-button a
{
  display:              inline-block;
  width:                100%;
  padding-left:         8px;
  padding-right:        8px;
  padding-bottom:       4px;
}

div.panel-button:first-child a
{
  border-radius:        0 0 0 15px;
}

div.panel-button:last-child a
{
  border-radius:        0 0 15px 0;
}

div.panel-button:only-child a
{
  border-radius:        0 0 15px 15px;
}


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


div.form
{
  padding-top:          20px;
  padding-bottom:       20px;
  height:               calc(100% - 74px);
  overflow-y:           overlay;
  padding-right:        10px;
}

div.form-entry
{
  padding-top:          7px;
  padding-bottom:       7px;
  position:             relative;
}

div.form-entry label
{
  display:              inline-block;
  font-variant:         small-caps;
  padding-right:        30px;
  width:                33%;
  text-transform:       lowercase;
  font-size:            18px;
  text-align:           left;
  padding-left:         10px;
}

div.form-entry input,
div.form-entry textarea,
div.form-entry select
{
  display:              inline-block;
  border:               none;
  border:               1px solid rgba(0,0,0,0.25);
  width:                calc(66% - 50px);
  padding-top:          5px;
  padding-bottom:       5px;
  font-size:            15px;
  height:               32px;
  line-height:          32px;
  padding-left:         5px;
}

div.form textarea
{
  height:               128px;
  line-height:          22px;
  resize:               none;
  border:               1px solid rgba(0,0,0,0.25);
  padding:              9px;
}

div.form input[type='checkbox']
{
  width:                20px;
  height:               20px;
  vertical-align:       middle;
  margin-right:         calc(66% - 50px - 20px);
}

div.form-entry select.dropdown
{
  width:                20px;
  float:                right;
  position:             absolute;
  right:                28px;
  top:                  7px;
  border-left:          0px;
  border-bottom:        1px solid rgba(0,0,0,0.25);
  border-top:           1px solid rgba(0,0,0,0.25);
  border-right:         1px solid rgba(0,0,0,0.25);
}

div.form-entry textarea + select
{
  border-bottom:        none !important;
}

div.textarea-field { margin-top: 10px; }
div.textarea-field label { vertical-align: top; }

div.attachments-field { margin-top: 10px; }
div.attachments-field label { vertical-align: top; }

div.attachments-container
{
  display:              inline-block;  
  width:                calc(66% - 50px);
  font-size:            15px;
  line-height:          32px;
  text-align:           left;
  text-transform:       lowercase;
  font-variant:         small-caps;
  margin-top:           -4px;
  
}

div.attachments-container input { display: none; }
div.attachment-new { background: moccasin; }
div.attachment-add { cursor: pointer; }

div.attachment-new, div.attachment-add, div.attachment-del
{
  position:             relative;
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;
  padding-right:        18px;
}

div.attachments-container i.fa-times
{
  position:             absolute;
  right:                0;
  top:                  9px;
}

div.subtitle
{
  text-align:           left;
  margin-left:          20px;
  margin-right:         20px;
  margin-top:           30px;
  margin-bottom:        7px;
  font-weight:          bold;
  font-variant:         small-caps;
  font-size:            18px;
  border-bottom:        1px solid rgba(0,0,0,0.666);
}

div.subtitle:first-child
{
  margin-top:           0;
}

div.warning-box
{
  background:           palegoldenrod;
  height:               40px;
  line-height:          39px;
  margin-left:          7px;
  border:               1px solid rgba(0,0,0,0.2);
  text-transform:       uppercase;
  margin-top:           10px;
  color:                indianred;
  font-weight:          bold;
  display:              none;
}

div.inspection-list-documental,
div.inspection-list-structural,
div.security-checklist-common,
div.security-checklist-warehouse,
div.security-checklist-public
{
  text-align:           left;
  margin-left:          10px;
  margin-right:         20px;
  font-size:            14px;
  line-height:          30px;
}

div.inspection-list-documental li,
div.inspection-list-structural li,
div.security-checklist-common li,
div.security-checklist-warehouse li,
div.security-checklist-public li
{
  position:             relative;
  line-height:          1.337;
  padding-bottom:       18px;
  padding-right:        77px;
}

select.checkmark
{
  width:                50px;
  border-radius:        5px;
  border:               1px solid rgba(0,0,0,0.5);
  text-align:           center;
  line-height:          18px;
  font-size:            13px;
  background:           lightgray;
  font-weight:          bold;
  height:               21px;
  appearance:           none;
  position:             absolute;
  right:                7px;
  top:                  0;
}

div.security-checklist-common,
div.security-checklist-warehouse,
div.security-checklist-public
{  
  margin-top:           25px;
}

div.security-checklist-warehouse,
div.security-checklist-public
{
  display:              none;
}

div.security-checklist-common select.checkmark,
div.security-checklist-warehouse select.checkmark,
div.security-checklist-public select.checkmark

{
  height:               32px;
}

*:focus { outline: none; }


/******************************************************************************
                                 PRINTING SYSTEM     
/*****************************************************************************/

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

/* do not show all other main containers on print */
@media print
{
  #page, #panel, #panel-overlay, #message, #loader, #loader-overlay
  {
    display:            none;
  }
}

/* header used in printing */
@media print
{
  html
  {
    min-width:          unset;
  }
  
  #printer
  {
    width:              694px;
    margin:             auto;
    font-size:          14px;
  }
  
  html
  {
    background:         none !important;
  }
  
  body
  {
    font-family:        system-ui;
  }
  
  @page
  {
    size:               A4 portrait;
  }
}


/******************************************************************************
                                  HEADER/FOOTER       
/*****************************************************************************/

div.header
{
  padding-bottom:       10px;
  margin-bottom:        25px;
  border-bottom:        1px solid #606060;
  position:             relative;
}

div.header:not(:first-child)
{
  page-break-before:    always;
}

div.header-title
{
  display:              inline-block;
  font-size:            18px;
  font-weight:          bold;
}

div.header-pagecounter
{
  display:              inline-block;
  position:             absolute;
  top:                  3px;
  right:                0;
  font-size:            16px;
  line-height:          18px;
  font-weight:          unset;  
  font-variant:         small-caps;
}

div.footer-title
{
  position:             fixed;
  bottom:               32px;
  border-top:           1px solid #999999;
  padding-top:          25px;
  font-size:            13px;
  width:                100%;
  font-family:          sans-serif;
}

div.footer-subtitle
{
  position:             fixed;
  bottom:               8px;
  font-size:            10px;
  padding-bottom:       9px;
  width:                100%;
  font-family:          sans-serif;
  letter-spacing:       -0.18px;
}

div.footer-logo
{
  position:             fixed;
  bottom:               0px;
  right:                0px;
  width:                141px;
  height:               64px;
  background:           url('report-logo.png');
  background-size:      contain;  
}

/******************************************************************************
                                REPORT SICUREZZA    
/*****************************************************************************/

div.report-info
{
  margin-bottom:        24px;
}

div.report-info-entry
{
  display:              inline-block;
  width:                48%;
  vertical-align:       top;
  padding-bottom:       18px;
}

div.report-info-label
{
  font-weight:          bold;
  padding:              5px;
  padding-top:          0;
}

div.report-info-value
{
  padding-left:         15px;
  padding-right:        15px;
  display:              -webkit-box;
  -webkit-box-orient:   vertical;
  -webkit-line-clamp:   3;
  overflow:             hidden;
}

div.report-issue
{
  margin-top:           7px;
}

div.report-issue-title
{
  font-weight:          bold;
  padding:              5px;
  text-transform:       uppercase;
}

div.report-issue-desc
{
  padding-left:         15px;
  padding-right:        15px;
  display:              -webkit-box;
  -webkit-box-orient:   vertical;
  -webkit-line-clamp:   3;
  overflow:             hidden;
  font-size:            12px;
}

div.report-issue-picture
{
  display:              inline-block;
  height:               200px;
  width:                27%;
  background-size:      cover; /* was auto 100%; */
  background-position:  center center;
  margin:               15px;
}

div.report-no-issues
{
  font-size:            16px;
  font-style:           italic;
  margin-top:           64px;
}

div.report-checklist-title
{
  text-align:           center;
  font-size:            18px;
  font-weight:          bold;
  border:               1px solid #606060;
  padding:              10px;
  letter-spacing:       1px;
  margin-bottom:        25px;
}

div.report-checklist-header
{
  font-weight:          bold;
  margin-top:           0px;
  font-size:            13px;
  position:             relative;
  margin-bottom:        -8px;
}

div.report-checklist-header div
{
  position:             absolute;
  right:                0;
  top:                  0;
  width:                50px;
  text-align:           center;
}

div.report-checklist-header div:nth-child(1) { right: 120px; }
div.report-checklist-header div:nth-child(2) { right: 60px; }

div.report-checklist-content li
{
  font-size:            13px;
  position:             relative;
  padding-right:        180px;
  padding-top:          7px;
  padding-bottom:       7px;
  margin-left:          -20px;
}

div.report-checklist-content li div
{
  position:             absolute;
  right:                0;
  top:                  8px;
  width:                14px;
  height:               14px;
  border:               1px solid #606060;
  line-height:          8px;
  text-align:           center;
  font-size:            20px;
  font-weight:          bold;
  margin-right:         18px;
}

div.report-checklist-content li div:nth-child(1) { right: 120px; }
div.report-checklist-content li div:nth-child(2) { right: 60px; }

div.report-checklist-notes div.report-checklist-header
{
  margin-top:           18px; 
  margin-bottom:        0;
}

div.report-checklist-notes div.report-checklist-content
{
  margin-top:           4px; 
  margin-left:          20px;
  display:              -webkit-box;
  -webkit-box-orient:   vertical;
  -webkit-line-clamp:   5;
  overflow:             hidden;
  font-size:            12px;
  min-height:           60px;
}

div.report-checklist-signature
{
  position:             relative;
  margin:               25px;
  margin-top:           0;
}

div.report-checklist-signature-tech
{
  position:             absolute;
  left:                 0;  
  width:                200px;
  text-align:           center;
}

div.report-checklist-signature-resp
{
  position:             absolute;
  right:                0;
  width:                200px;
}

div.report-checklist-signature-name
{
  text-align:           center;
  border-top:           1px dashed #999999;
  padding-top:          10px;
  font-size:            12px;
}

div.report-checklist-signature-image
{
  width:                150px;
  height:               150px;
  margin-left:          25px;
  margin-bottom:        -42px;
  background-size:      auto 100%;
  background-position:  center center
}


/******************************************************************************
                               VERBALE SCAFFALATURE
/*****************************************************************************/

div.verbale-summary-title
{
  font-size:            18px;
  padding-top:          5px;
  padding-bottom:       15px;
}

div.verbale-summary-table
{
  border-bottom:        1px solid black;
  border-right:         1px solid black;
  position:             relative;
}

div.verbale-summary-entry div
{
  display:              inline-block;
  border-left:          1px solid black;
  border-top:           1px solid black;
  width:                33.333%;
  padding:              2px;
  height:               21px;
  vertical-align:       middle;
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;
}

div.verbale-summary-entry div:last-child
{
  border-top:           none;
}

div.verbale-summary-entry:first-child div:last-child
{
  border-top:           1px solid black;
}

div.verbale-summary-entry img
{
  position:             absolute;
  top:                  -9px;
  z-index:              -1;
  opacity:              83%;
  right:                48px;
}

div.verbale-summary-image 
{
  text-align:           center;
}

div.verbale-summary-image img
{
  margin-bottom:        30px;
}

div.verbale-checklist-header
{
  font-weight:          bold;
  margin-top:           30px;
  font-size:            14px;
  position:             relative;
  margin-bottom:        -10px;
}

div.verbale-checklist-header div
{
  position:             absolute;
  right:                0;
  top:                  0;
  width:                50px;
  text-align:           center;
}

div.verbale-checklist-header div:nth-child(1) { right: 120px; }
div.verbale-checklist-header div:nth-child(2) { right: 60px; }

div.verbale-checklist-content li
{
  line-height:          24px;
  font-size:            14px;
  position:             relative;
}

div.verbale-checklist-content li div
{
  position:             absolute;
  right:                0;
  top:                  6px;
  width:                14px;
  height:               14px;
  border:               1px solid #606060;
  line-height:          8px;
  text-align:           center;
  font-size:            20px;
  font-weight:          bold;
  margin-right:         18px;
}

div.verbale-checklist-content li div:nth-child(1) { right: 120px; }
div.verbale-checklist-content li div:nth-child(2) { right: 60px; }

div.verbale-checklist-documental div.verbale-checklist-content
{
  padding-bottom:       10px;
  border-bottom:        1px solid #606060;
  margin-bottom:        106px;
}

div.verbale-checklist-structural div.verbale-checklist-header div
{
  top:                  -88px;
  width:                34px;
  text-align:           left;
  height:               79px;
  writing-mode:         tb-rl;
  transform:            rotate(-180deg);
  border:               1px solid #606060;
  line-height:          20px;
  padding:              4px;
  font-size:            12px;
}

div.verbale-checklist-structural div.verbale-checklist-header div:nth-child(1) { right: 127px; }
div.verbale-checklist-structural div.verbale-checklist-header div:nth-child(2) { right: 67px; }
div.verbale-checklist-structural div.verbale-checklist-header div:nth-child(3) { right: 7px; }

div.verbale-checklist-notes div.verbale-checklist-header
{
  margin-top:           18px; 
  margin-bottom:        0;
}

div.verbale-checklist-notes div.verbale-checklist-content
{ 
  margin-top:           -15px; 
  margin-left:          40px;
  font-size:            11px;
  display:              -webkit-box;
  -webkit-box-orient:   vertical;
  -webkit-line-clamp:   5;
  overflow:             hidden;
}

div.verbale-anomalies-table
{
  border-top:           1px solid #606060;
  border-left:          1px solid #606060;
  position:             relative;
}

div.verbale-anomalies-entry div
{
  width:                80px;
  display:              table-cell;
  text-align:           center;
  border-right:         1px solid #606060;
  border-bottom:        1px solid #606060;
  line-height:          20px;
  height:               20px;
  vertical-align:       bottom;
}

div.verbale-anomalies-entry:first-child { font-weight: bold; }
div.verbale-anomalies-entry div:first-child { width: 30px; }
div.verbale-anomalies-entry div:last-child
{
  width:                183px;
  max-width:            183px;
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;  
}
div.verbale-anomalies-entry div i
{
  color:                white;
}

div.verbale-anomalies-entry:not(:first-child) div:last-child
{
  font-size:            11px;
  letter-spacing:       -0.5px;
  text-align:           left;
  padding-left:         5px;
  padding-right:        5px;
}

div.verbale-anomalies-strike
{
  background:           #606060;
  width:                761px;
  position:             absolute;
  left:                 -35px;
  height:               1px;
  transform:            rotate(155deg);
  top:                  159px;
}

div.verbale-attachment
{
  display:              inline-block;
  height:               180px;
  width:                24%;
  background-size:      auto 100%;
  background-position:  center center;
  margin:               0px 3px 40px 3px;
}

div.verbale-page2,
div.verbale-page3,
div.verbale-page4
{
  page-break-before:    always;
}