@CHARSET "ISO-8859-1";

/* Material Design icons, from Google */
@import url(https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined);

/* ***** CSS variables ***** */

:root {
   --header-height: 50px;
}

/* ***** Flexbox ***** */

.flex-horizontal {
   display: flex;
   flex-direction: row;
}

.flex-horizontal.stretch {
	width: 100%;
}

.flex-vertical {
   display: flex;
   flex-direction: column;
}

.flex-vertical.stretch {
   height: 100%;
}

.flex-horizontal.flex-h-center {
   justify-content: center;
}

.flex-horizontal.flex-v-center {
   align-items: center;
}

.flex-horizontal.flex-left {
   justify-content: flex-start;
}

.flex-horizontal.flex-right {
   justify-content: flex-end;
}

.flex-horizontal.flex-top {
   align-items: flex-start;
}

.flex-horizontal.flex-bottom {
   align-items: flex-end;
}

.flex-vertical.flex-h-center {
   align-items: center;
}

.flex-vertical.flex-v-center {
   justify-content: center;
}

.flex-vertical.flex-left {
   align-items: flex-start;
}

.flex-vertical.flex-right {
   align-items: flex-end;
}

.flex-vertical.flex-top {
   justify-content: flex-start;
}

.flex-vertical.flex-bottom {
   justify-content: flex-end;
}

.flex-stretch {
   align-items: stretch;
}

.flex-wrap {
	flex-wrap: wrap;
}

/* ***** Page ***** */

body {
   margin: 0px;
   font-family: var(--main-font);
}

form {
	display: none;
}

.main {
   height: 100%;
   width: 100%;
}

.content {
   width: 100%;
   padding-left:20px;
   padding-right:20px;
   padding-top:10px;
}

.heading {
   font-weight: bold;
   font-size: 25px;
   margin-top: 10px;
   margin-bottom: 10px;
}

.heading-with-iso {
   font-weight: bold;
   font-size: 25px;
   margin-top: 10px;

   margin-bottom: 3px;
}

.iso-number {
   font-size: 12px;
   font-style: italic;
   color: var(--text-color-dark);
}

/* https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* ***** Header ***** */

.header {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   
   position: sticky;
   position: -webkit-sticky;
   top: 0;
   left: 0;
   z-index: 99;
   
   width: 100%; /* TODO: This breaks horizontal stickiness. */
   height: var(--header-height);
   
   background: var(--main-color);
   color: var(--text-color-light);
}

.header a {
   text-decoration: none;	
   color: inherit;
}

.header .menu-icon {
   color: var(--text-color-light);
}

/* Keep in synch with menu-item properties. */
.menu-button {
   font-size: 18px;
   padding-top: 5px;
   padding-bottom: 5px;
   padding-left: 10px;
   padding-right: 10px;
   display: flex;
   flex-direction: row;
   align-items: center;
   color: var(--text-color-light);
   cursor: pointer;
}

.menu-button.hidden {
   visibility: hidden
}

.page-title {
   font-size: 25px;
}

.description {
   display: none;
   width: 400px;
   background: #fbebce;
   padding: 10px 10px 10px 10px;
}

.description.shown {
   display: block;
}

.download-link {
	color: var(--main-color);
	text-decoration: underline;
	cursor: pointer;
}

/* ********************************** Menu ********************************** */

.menu {
   min-width: 250px;
}

.menu:not(.expanded) {
   min-width: 80px;
}

/* Menu item */
.menu .menu-item {
   text-decoration: none;
   font-size: 18px;
   padding-top: 5px;
   padding-bottom: 5px;
   padding-left: 10px;
   padding-right: 10px;
   display: flex;
   flex-direction: row;
   align-items: center;
   color: var(--text-color);
   cursor: pointer;
}

/* Menu item selected */
.menu .menu-item:not(.submenu-item).selected, 
.menu .menu-item:not(.submenu-item).selected .material-icons,
.menu .menu-item:not(.submenu-item).selected .menu-label,
/* Submenu item selected */
.menu:not(.expanded) .submenu-item.selected, 
.menu:not(.expanded) .submenu-item.selected .material-icons {
   background: var(--main-color);
   color: var(--text-color-light);
}

/* Menu item hover */
.menu .menu-item:hover, 
.menu .menu-item:hover, 
.menu .menu-item:hover .material-icons,
.menu .menu-item:hover .menu-label {
   background: var(--gray-dark);
   color: var(--text-color-light);
}

.menu .menu-item .menu-icon {
   margin-right: 20px;
   color: var(--text-color-dark);
}

.menu .menu-gutter {
   width: 25px;
}

.menu .indent-1 {
   padding-left: 30px;
}

.menu .indent-2 {
   padding-left: 60px;
}

.menu .submenu-item + .submenu {
   display: none;
}

.menu .submenu-item.expanded + .submenu {
   display: flex;
}

.menu .submenu-item.expanded .menu-unexpanded-icon,
.menu .submenu-item .menu-expanded-icon {
   display: none;
}

.menu .submenu-item.expanded .menu-expanded-icon,
.menu .submenu-item .menu-unexpanded-icon {
   display: flex;
}

.menu .menu-item.secret {
   opacity: 0;
}

.menu .menu-item.secret:hover,
.menu .menu-item.secret.selected  {
   opacity: 100;
}

.menu:not(.expanded) .menu-label,
.menu:not(.expanded) .submenu-item + .submenu {
   display: none;
}

/* ***** Form ***** */

.form-title {
   font-size: 30px;
   margin: 20px 0px 20px 0px;
   display: flex;
   flex-direction: column;
   align-items:center;         /* center vertically */
   justify-content: center;    /* center horizontally */
   height: 50px;
}

.form-row {
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
}

.form-col {
   display: flex;
   flex-direction: column;
}

.form-section-header {
   font-weight: bold;
   font-size: 18px;
   display: flex;
   flex-direction: row;
   margin-bottom: 10px;
}

.form-item {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-bottom: 20px;
}

.form-label {
   font-size: 14px;
   margin: 0px 0px 0px 0px;
   display: flex;
   width: 100px;
}

.form-label-long {
   font-size: 14px;
   margin: 0px 0px 0px 0px;
   display: flex;
   width: 150px;
}

/* ***** Tabulator ***** */

.tabulator {
	width: 90%;
}

.table-header {
	font-size: 18px;
	font-weight: bold;
}

/* ***** Common components ***** */

.icon-button {
	cursor: pointer;
	color: var(--accent-color-dark);
	font-size: 25px;
}

button {
   border-width: 0;
   outline: none;
   box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
   background-color: var(--button-color);
   
   cursor: pointer;
   
   color: var(--text-color-dark);
   font-family: var(--main-font);
   font-size: 18px;

   min-width: 100px;
   padding: 10px 10px 10px 10px;
}

.accent-button {
   background-color: var(--main-color);
   color: var(--text-color-light);
}

.small-button {
	font-size: 12px;
	min-width: 0;
	padding: 3px 5px 3px 5px;
}

.new-indicator {
   vertical-align: super;
   font-size: 10px;
   background-color: yellow;
   color: black;
}

.incomplete-indicator {
   vertical-align: super;
   font-size: 10px;
   color: orange;
}

.approved-indicator {
   vertical-align: super;
   font-size: 10px;
   color: green;
   white-space: nowrap;
}

.unapproved-indicator {
   vertical-align: super;
   font-size: 10px;
   color: red;
   white-space: nowrap;
}

.mismatch-indicator {
   vertical-align: super;
   font-size: 10px;
   color: red;
   white-space: nowrap;
}

.tabulator-cell.tabulator-frozen.report-entry-valid  {
   background-color: green;
   color: white;
   font-size: 12;
}

.tabulator-cell.tabulator-frozen.report-entry-warning  {
   background: orange;
   color: white;
   font-size: 12;
}

.tabulator-cell.tabulator-frozen.report-entry-error  {
   background: red;;
   color: white;
   font-size: 12;
}

.date-range-header {
   color: var(--accent-color-dark);
   margin-bottom: 5px;
   font-size: 14px;
   font-weight: bold;
}

.bonus-earned {
   background: #98FB98;
}

input, select {
	font-family: var(--main-font);
	font-size: 14;
	height: 25px;
}

/* ********************************* Timeline ******************************** */ 
/* https://codeconvey.com/simple-horizontal-timeline-css/ */
 
.timeline {
   width:800px;
   height: 20px;
   list-style: none;
   text-align: justify;
   margin: 80px auto;
   background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(45%, rgba(255,255,255,0)), color-stop(51%, rgba(191,128,11,1)), color-stop(57%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,0)));
   background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 45%, rgba(191,128,11,1) 51%, rgba(255,255,255,0) 57%, rgba(255,255,255,0) 100%);
}

.timeline:after {
   display: inline-block; 
   content: ""; 
   width: 100%;
}

.timeline li {
   display: inline-block;
   width: 20px;
   height: 20px;
   background: #F2BB13;
   text-align: center;
   line-height: 1.2;
   position: relative;
   border-radius: 50%;
}

.timeline li[data-achieved="false"] {
   background: #c0c0c0;
}

.timeline li:before {
   display: inline-block;
   content: attr(data-status);
   font-size: 20px;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}

.timeline li:nth-child(odd):before {
   top: -40px;
}

.timeline li:nth-child(even):before {
   bottom: -40px;
}

.timeline li:after {
   display: inline-block;
   content: attr(data-timestamp);
   font-size: 14px;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}

.timeline li:nth-child(odd):after {
   bottom: 0;
   margin-bottom: -10px;
   transform: translate(-50%, 100%);
}

.timeline li:nth-child(even):after {
   top: 0;
   margin-top: -10px;
   transform: translate(-50%, -100%);
}

.timeline li[data-achieved="false"], .timeline li[data-achieved="false"]:after {
   background: #dadce0;
   color: #dadce0;
}

/* ********************************* History panel ******************************** */

.history-panel {
	background: #FFF6D3;
	padding: 20px;
	width: 600px;
}

.history-item {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: flex-start;
   margin-bottom: 13px;
   margin-right: 30px;
}

.history-item .material-icons-outlined {
   margin-right: 15px;
}

.action-link {
   color: var(--accent-color-1);
   user-select: none;
}

.action-link:hover {
   color: var(--accent-color-5);
}

.pane-separator {
   border-top: solid 1px var(--gray-2);
   width:100%;
   margin-top: 15px;
   margin-bottom: 15px;
}

.history-date {
   font-size: .75em;
}

.delete-comment-icon {
	color: var(--gray-dark);
	cursor: pointer;
}

.history-item:not(:hover) .delete-comment-icon {
	visibility: hidden;
}

/* ********************************* Collapsible panel ******************************** */

.collapsible-panel {
	width: 500px;
	margin-right: 50px;
}
 
.collapsible-panel-header {
	font-weight: bold;
	height: 30px;
	background: var(--gray-light);
	width: 100%;
	margin-bottom: 15px;
}

.collapsible-panel.hidden,
button.hidden,
.collapsible-panel.collapsed .collapsible-panel-content,
.collapsible-panel.collapsed .expanded-icon,
.collapsible-panel:not(.collapsed) .collapsed-icon {
   display: none;
}

.estimate-table-cell {
	display: flex;
   flex-direction: row;     /* flex-horizontal*/
	justify-content: center; /* flex-h-center*/
	height: 50px;
}

.estimate-table-column {
   width: 150px;
   padding-top: 15px;
}

.estimate-table-label-column {
   width: 175px;
}

.estimate-table-cell.estimate-heading {
   font-weight: bold;
}

.estimate-table-column.selected {
   background: #caf0ff;
}

.attachment {
   margin-bottom: 20px; 
}

.attachment .icon-button {
   color: var(--gray-dark);
   font-size: 1.25em;
}

.attachment .icon-button:hover {
   color: var(--accent-color-dark);
}

.priority-icon {
	color: red;
}

.tabulator .editable {
   background: #cddef8;
}

/* ********************************* App Notification Priority ******************************** */

.app-notification-priority {
	color: white;
   font-weight: bold;
   padding: 3px;
   width: 100px;
}

.app-notification-priority.info {
   background: var(--gray-dark);
}

.app-notification-priority.priority {
   background: #4287f5;
}

.app-notification-priority.warning {
   background: orange;
}

.app-notification-priority.critical {
   background: red;
}   

.notification-count-indicator {
	width: 20px;
	height: 20px;
   background: red;
   color: white;
   border-radius: 20%;
   position: absolute;
   top: -7px;
   left: 14px;
   margin-right: 25px;
}

.notification-indicator {
	margin-right: 25px;
}

.notification-indicator[data-count="0"] {
   visibility: hidden;
}

.clickable {
   cursor: pointer;
}

/* Color border on invalid */
form.show-invalid input:invalid,
form.show-invalid select:invalid
{
   outline: solid 2px red;
}

.inspection-status {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   
   font-size: 14px;
   color: #fff;
   text-shadow: -1px 1px #417cb8;
   
   line-height: 1.8;
   appearance: none;
   box-shadow: none;
   border-radius: 0;
   background-color: grey;
   border: none;
   
   width: 90px;
   height: 20px;  
}

.inspection-status.pass {
   background-color: green;
}

.inspection-status.warning {
   background-color: orange;
}

.inspection-status.fail {
   background-color: red;
}

.inspection-status.incomplete {
   background-color: grey;
}

.split-icon {
   font-size: 48px;
   font-weight: bold;
   color: #417cb8
}