/* Color themes */
:root {
 --ui-font: "Inter", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 --bg-color: #f9fafb;
 --text-color: #222;
 --grey-bg-color: #ddd;
 --grey-text-color: #777;
 --border-color: #222;
 --disabled-bg-color: #ccc;
 --disabled-text-color: #222;
 --hover-color: #2b9cd4;
 --menu-bg-color: #c0e1f2;
 --menu-text-color: #222;
 --message-bg-color: #bdf0c1;
 --message-text-color: #222;
 --error-bg-color: #f0bdee;
 --error-text-color: #cf1d26;
 --warning-bg-color: #f2e1bb;
 --warning-text-color: #222;
 --warning-demo-bg-color: #dbde1d;
 --warning-demo-text-color: #cf1d26;
 --warning-supervision-bg-color: #b3b3ff;
 --warning-supervision-text-color: #222;
 --warning-trial-bg-color: #dbde1d;
 --warning-trial-text-color: #cf1d26;
 --checkbox-check-color: #0033cc;
 
 --table-zebra-bw-bg-color-1: #d4d4d4;
 --table-zebra-bw-bg-color-2: #e0e0e0;
 --table-zebra-bw-color: #222;
 --table-current-cell-bg-color: #cc3600;
 --table-current-cell-text-color: #aaa;
 --table-selected-cell-bg-color: #c38cd9;
 --table-selected-cell-text-color: #aaa;
 --table-modified-bg-color-1: #b0eaae;
 --table-modified-bg-color-2: #8cc8f3;
 --table-modifying-bg-color: #ffb3e6;


 --table-zebra-header-bg-color: #ffd699;
 --table-zebra-bg-color-1: #cff2ce;
 --table-zebra-bg-color-2: #b2daf7;
 --table-zebra-hover-bg-color: #aaa;
 --table-zebra-hover-text-color: #222;
 --table-zebra-selected-bg-color: #8436a3;

 --table-edit-bg-color: #ddd;

 --table-zebra-no-hover-header-bg-color-1: #e0e0e0;
 --table-zebra-no-hover-header-bg-color-2: #d4d4d4;
 
 --tile-bg-color: #cff2ce;
 --tile-alternate-bg-color: #f2c8b6;
 --tile-hover-bg-color: #aaa;
 --tile-active-color: #c38cd9;
 --tile-disabled-color: #ccc;

 --alt-menu-bg-color: #ffb3e6;
 --popup-modal-bg-color: #e6eeff; 
 --popup-modal-icon-bg-color: #ffff66; 
 --popup-modal-icon-text-color: #9933ff; 
 
}
[data-theme="dark"] {
 --bg-color: #0f172a;
 --text-color: #aaa;
 --grey-bg-color: #555;
 --border-color: #777;
 --disabled-bg-color: #333;
 --disabled-text-color: #aaa;
 --hover-color: #237ca9;
 --menu-bg-color: #000090;
 --menu-text-color: #aaa;
 --message-bg-color: #206020;
 --message-text-color: #aaa;
 --error-bg-color: #802000;
 --error-text-color: #ff6633;
 --warning-bg-color: #564010;
 --warning-text-color: #aaa;
 --warning-demo-bg-color: #9c9e15;
 --warning-demo-text-color: #c91d25;
 --warning-supervision-bg-color: #4d0099;
 --warning-supervision-text-color: #aaa;
 --warning-trial-bg-color: #9c9e15;
 --warning-trial-text-color: #c91d25;
 --checkbox-check-color: #668cff;
 --table-zebra-bw-bg-color-1: #161616;
 --table-zebra-bw-bg-color-2: #222222;
 --table-zebra-bw-color: #aaa;
 --table-current-cell-bg-color: #cc3600;
 --table-current-cell-text-color: #aaa;
 --table-selected-cell-bg-color: #8436a3;
 --table-selected-cell-text-color: #aaa;

 --table-zebra-header-bg-color: #663d00;
 --table-zebra-bg-color-1: #1d651b;
 --table-zebra-bg-color-2: #0c4873;
 --table-zebra-hover-bg-color: #555;
 --table-zebra-hover-text-color): #aaa;
 --table-zebra-selected-bg-color: #6d2d86;
 --table-modified-bg-color-1: #288e25;
 --table-modified-bg-color-2: #1165a2;
 --table-modifying-bg-color: #990066;

 --table-edit-bg-color: #222;

 --table-zebra-no-hover-header-bg-color-1: #333;
 --table-zebra-no-hover-header-bg-color-2: #222;

 --tile-bg-color: #175115;
 --tile-alternate-bg-color: #57250f;
 --tile-hover-bg-color: #222;
 --tile-active-color: #5d2673;
 --tile-disabled-color: #222;

 --alt-menu-bg-color: #4d0033;
 --popup-modal-bg-color: #003399; 
 --popup-modal-icon-bg-color: #999900; 
 --popup-modal-icon-text-color: #4d0099; 

}


html {
  /* changes a default 16px font size to 10px */
  font-size: 62.5%;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  margin: 0;
  font-size: 1.7rem;
  color: var(--text-color);
  background-color: var(--bg-color);
  font-family: var(--ui-font);
  transition: background-color 0.3s, color 0.3s;
  font-weight: 400;
}

form a {
    margin-right: 1.2rem;
    color: #347f7f;
}

form a:hover {
	color: #D37E4B;
}

/* Use <h1>, <h2>... only for SEO purposes. All other <h?> elements should be replaced with <p class="like-h?"> */
.like-h1 {
  font-size: 3.2rem;   /* 32px */
  font-weight: 700;
  line-height: 1.2;
  margin: 2.4rem 0;
  color: inherit;
}
.like-h2 {
  font-size: 2.4rem;   /* 24px */
  font-weight: 600;
  line-height: 1.3;
  margin: 2rem 0;
  color: inherit;
}
.like-h3 {
  font-size: 1.8rem;   /* 18px */
  font-weight: 600;
  line-height: 1.4;
  margin: 1.6rem 0;
  color: inherit;
}
h2.normal-font {
  all: unset;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.6;
  display: block;
  margin: 1rem 0;
  color: inherit;
}

hr {
  border: none;
  height: 1px;
  color: #444;  /* old IE */
  background-color: #444;  /* Modern Browsers */
}

header {
  position: sticky; /* not 'fixed', to avoid overlapping content ! */
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--bg-color);
  z-index: 9999; /* Prevent overriding by .overlay-container during scrolling */ 
  padding-bottom: 0.5rem;
} 


footer {
  position: fixed;
  width: 100%;
  background-color: #333;
  bottom: 0;
  text-align: center;
  color: #aaa;
  font-size: 1.2rem;
} 

input[type=button] {
    padding: 0.3rem 2.5rem; 
    background: var(--menu-bg-color);
    border: 1px solid var(--border-color);
    color: var(--menu-text-color);
    border-radius: 0.5rem; 
    font-size: 1.6rem;
}
input[type=button]:hover {
  background-color: var(--hover-color);
}
input[type=button]:disabled {
  background: var(--disabled-bg-color);
  color: var(--disabled-text-color);
}
input[type=button].highlighted {
    font-weight: bold;
}

.custom-file-upload {
    padding: 0.5rem 2.5rem; 
    background: var(--menu-bg-color);
    border: 1px solid var(--border-color);
    color: var(--menu-text-color);
    border-radius: 0.5rem; 
    font-size: 1.6rem;
}
.custom-file-upload:hover {
  background-color: var(--hover-color);
}
.custom-file-upload:hover:disabled {
  background: var(--disabled-bg-color);
  color: var(--disabled-text-color);
}
.custom-file-upload:hover.highlighted {
    font-weight: bold;
}


/* WARNING !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Don't use 'submit' attribute for <input> element !!!
Otherwise, when user logging in using password manager hint, the browser activating
the first 'submit' button (demo manager login) and user logged in as demo manager.
Use 'button' attribute instead and implement submit action in javascript 'onclick' function:
 document.getElementById('index_form_id').submit();
The agly colors and values are implemented in 'submit' CSS element below to indicate the wrong
attribute assignment.
*/
input[type=submit] {
    background: yellow;
    color: red;
    border: 5px solid purple;
    font-size: 3rem;
    padding: 3rem; 
    font-weight: bold;
}


input[type=text] {
  border: 1px solid var(--border-color);
  padding: 0.2rem 1rem 0.25rem 1rem;
  font-size: 1.7rem;
  margin-top: 0.4rem;
  border-radius: 0.4rem;
  background-color: var(--bg-color);
  color: var(--text-color);
}
input[type=text].readonly {
  background-color: var(--disabled-bg-color);
}

input[type=password] {
  border: 1px solid var(--border-color);
  padding: 0.2rem 1rem 0.25rem 1rem;
  font-size: 1.7rem;
  margin-top: 0.4rem;
  border-radius: 0.4rem;
  background-color: var(--bg-color);
  color: var(--text-color);
}

textarea {
  resize: none;
  border: 1px solid var(--border-color);
  font-size: 1.7rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  background-color: var(--bg-color);
  color: var(--text-color);
  
}

select {
  border: 1px solid var(--border-color);
  background-color: var(--bg-color);
  color: var(--text-color);
  margin-top: 0.4rem;
  font-size: 1.7rem;
  padding: 0.2rem 1.5rem 0.2rem 1.5rem;
  border-radius: 0.4rem;
}
select.firstgray {
  color: var(--grey-text-color);
}
select.firstgray.not-first {
  color: var(--text-color);
}
select.firstgray option {
  color: var(--text-color);
}
select.firstgray option:first-child {
  color: var(--grey-text-color);
}


span.slogan {
    display:inline-block;
    -webkit-transform:scale(1.2,1); /* Safari and Chrome */
    -moz-transform:scale(1.2,1); /* Firefox */
    -ms-transform:scale(1.2,1); /* IE 9 */
    -o-transform:scale(1.2,1); /* Opera */
    transform:scale(1.2,1); /* W3C */
    font-size: 1.3rem;
    letter-spacing: 0.12rem;
}

span.deleted_item {
 color: #800080;
}

.popup_modal {
  display: none;
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--popup-modal-bg-color);
  padding: 2rem 3rem;
  border: 1px solid var(--border-color);
  border-radius: 0.6rem; 
  z-index: 9999;
}

.popup_alert_icon {
  color: var(--popup-modal-icon-text-color);
  background-color: var(--popup-modal-icon-bg-color);
  border: 2px solid var(--popup-modal-icon-text-color);
  padding: 0.3rem;
}

.popup_notification {
  visibility: hidden;
  min-width: 30rem;
  margin: auto;
  background-color: #323232;
  color: #ddd;
  text-align: center;
  padding: 0.5rem 2rem;
  position: fixed;
  left: 50%;
  bottom: 3rem;
  transform: translateX(-50%);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  font-size: 1.6rem;
  border-radius: 0.6rem; 
}


.negative_cost {
 color: red;
}

table {
/*  border-radius: 5rem;*/
}

/*
By unclear reason the Android (and iOS?) browser doesn't like 
nested table definition. We need to describe every element separately */
table.mainlist {
  width: 100%;
  border-spacing: 0;
  font-size: 1.8rem;
  border: 1px solid var(--border-color);
  color: var(--text-color);
}  
table.mainlist tr:nth-child(odd) {
  background-color: var(--table-zebra-bg-color-1);
}
table.mainlist tr:nth-child(even) {
  background-color: var(--table-zebra-bg-color-2);
}
table.mainlist tr:nth-child(1) {
  background-color: var(--table-zebra-header-bg-color); /* Header */
}
table.mainlist tr:nth-child(1) td {
  border-bottom: 1px solid var(--border-color);
}
table.mainlist tr td {
  border: 0;
  padding: 1rem 2rem 1rem 2rem;
}
table.mainlist tr.row_selected {
  background-color: var(--table-zebra-selected-bg-color);
}
table.mainlist tr:not(:first-child):not(.row_selected):hover {
  background-color: var(--table-zebra-hover-bg-color);
  color: var(--table-zebra-hover-text-color);
}

/*
By unclear reason the Android (and iOS?) browser doesn't like 
nested table definition. We need to describe every element separately */
table.mainlist_no_header {
  width: 100%;
  border-spacing: 0;
  font-size: 1.8rem;
  border: 1px solid #444;
}  
table.mainlist_no_header tr:nth-child(odd) {
  background-color: #b2daf7;
}
table.mainlist_no_header tr:nth-child(even) {
  background-color: #cff2ce;
}
table.mainlist_no_header tr td {
  border: 0;
  padding: 1rem 2rem 1rem 2rem; /* top right bottom left */
}
table.mainlist_no_header tr.row_selected {
  background-color: #8436a3;
  color: white;
}
table.mainlist_no_header tr:not(.row_selected):hover {
  background-color: #aaa;
  color: black;
}


/*
By unclear reason the Android (and iOS?) browser doesn't like 
nested table definition. We need to describe every element separately */
table.mainlist_no_hover {
  width: 100%;
  border-spacing: 0;
  font-size: 1.8rem;
  border: 1px solid var(--border-color);
  color: var(--table-zebra-bw-color);
}
table.mainlist_no_hover tr:nth-child(odd) {
  background-color: var(--table-zebra-bw-bg-color-1);
}
table.mainlist_no_hover tr:nth-child(even) {
  background-color: var(--table-zebra-bw-bg-color-2);
}
table.mainlist_no_hover td {
  border: 0;
  padding: 1rem 2rem 1rem 2rem; /* top right bottom left */
}

/*
By unclear reason the Android (and iOS?) browser doesn't like 
nested table definition. We need to describe every element separately */
table.mainlist_no_hover_with_header {
  width: 100%;
  border-spacing: 0;
  font-size: 1.8rem;
  border: 1px solid var(--border-color);
}
table.mainlist_no_hover_with_header tr:nth-child(odd) {
  background-color: var(--table-zebra-no-hover-header-bg-color-1);
}
table.mainlist_no_hover_with_header tr:nth-child(even) {
  background-color: var(--table-zebra-no-hover-header-bg-color-2);
}
table.mainlist_no_hover_with_header tr:nth-child(1) {
  background-color: var(--table-zebra-header-bg-color); /* Header */
}
table.mainlist_no_hover_with_header tr:nth-child(1) td {
  border-bottom: 1px solid var(--border-color);
}
table.mainlist_no_hover_with_header td {
  border: 0;
  padding: 1rem 2rem 1rem 2rem;
}


/*
By unclear reason the Android (and iOS?) browser doesn't like 
nested table definition. We need to describe every element separately */
table.table_report {
  width: 100%;
  border-spacing: 0;
  font-size: 1.6rem;
  border: 1px solid var(--border-color);
}
table.table_report tr:first-child td {
  font-weight: bold;
}
table.table_report tr:last-child td {
  font-weight: bold;
}
table.table_report tr:nth-child(odd) {
  background-color: var(--table-zebra-bw-bg-color-1);
}
table.table_report tr:nth-child(even) {
  background-color: var(--table-zebra-bw-bg-color-2);
}
table.table_report tr.bold_font td {
  font-weight: bold;
}
table.table_report td {
  border: 0;
  padding: 1rem 2rem 1rem 2rem;
}

/*
By unclear reason the Android (and iOS?) browser doesn't like 
nested table definition. We need to describe every element separately */
table.table_overview {
  width: 100%;
  border-spacing: 0;
  font-size: 1.6rem;
}
table.table_overview tr td:first-child {
  padding: 1rem 1rem 1rem 0rem;
  font-size: 2.6rem;
  color: #ff9933;
  text-align: center;
}

/*
By unclear reason the Android (and iOS?) browser doesn't like 
nested table definition. We need to describe every element separately */
table.table_team_size {
  border-spacing: 0;
  border-collapse: collapse;
  font-size: 1.8rem;
}
table.table_team_size tr td {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  background-color: var(--grey-bg-color);
  text-align: center;
}
table.table_team_size td.cell_selected {
  background-color: var(--table-selected-cell-bg-color);
  color: var(--bg-color);
}
table.table_team_size td.cell_current {
  background-color: var(--table-current-cell-bg-color);
  color: var(--table-current-cell-text-color);
}
table.table_team_size tr td:hover:not(.cell_selected) {
  background-color: #aaa;
  color: white;
}


/*
By unclear reason the Android (and iOS?) browser doesn't like 
nested table definition. We need to describe every element separately */
table.table_common_info {
  border-spacing: 0;
  border-collapse: collapse;
  border: 1px solid var(--border-color);
  font-size: 1.8rem;
  background-color: var(--grey-bg-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}
table.table_common_info tr td {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
}

/*
By unclear reason the Android (and iOS?) browser doesn't like 
nested table definition. We need to describe every element separately */
table.table_remarks {
  border-spacing: 0;
  border-collapse: collapse;
  font-size: 1.3rem;
}
table.table_remarks td{
  padding-left: 1rem;
  padding-right: 1rem;
  vertical-align: top;
}
table.table_remarks tr:first-child td{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
table.table_remarks tr:not(:first-child) td{
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}


/*
By unclear reason the Android (and iOS?) browser doesn't like 
nested table definition. We need to describe every element separately */
table.table_alt_topnav {
  width: 100%;
  border-spacing: 0;
  font-size: 1.8rem;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 1rem 0;
  text-align: center;
  background-color: var(--alt-menu-bg-color);
}  

.notice {
  color: #037ffc;
  letter-spacing: 0.3rem;
  font-size: 1.8rem;
}

.message {
  display: block;
  text-align: center;
  overflow-wrap: break-word;
  max-width: 100vw;
  box-sizing: border-box;  
  margin: 0 auto;
  width: fit-content;
  margin-bottom: 1px; /* To prenent merging border if multiple elements displayed */
  font-size: 1.8rem;
  font-weight: normal;
  letter-spacing: 0.12rem;
  padding: 1rem 1.5rem;
  border-radius: 0.6rem; 
  color: var(--message-text-color);
  background-color: var(--message-bg-color);
  border: 1px solid var(--border-color);
}

.error {
  display: block;
  text-align: center;
  overflow-wrap: break-word;
  max-width: 100vw;
  box-sizing: border-box;  
  margin: 0 auto;
  width: fit-content;
  margin-bottom: 1px; /* To prenent merging border if multiple elements displayed */
  font-size: 1.8rem;
  font-weight: normal;
  letter-spacing: 0.14rem;
  padding: 1rem 1.5rem;
  border-radius: 0.6rem; 
  color: var(--error-text-color);
  background-color: var(--error-bg-color);
  border: 1px solid var(--border-color);
}

.warning {
  display: block;
  text-align: center;
  overflow-wrap: break-word;
  max-width: 100vw;
  box-sizing: border-box;  
  margin: 0 auto;
  width: fit-content;
  margin-bottom: 1px; /* To prenent merging border if multiple elements displayed */
  font-size: 1.6rem;
  font-weight: normal;
  letter-spacing: 0.14rem;
  padding: 1rem 1.5rem;
  border-radius: 0.6rem; 
  color: var(--warning-text-color);
  background-color: var(--warning-bg-color);
  border: 1px solid var(--border-color);
}

.warning_cell {
  font-size: 1.6rem;
  font-weight: normal;
  text-align: center;
  letter-spacing: 0.14rem;
  padding: 1rem 1rem 1rem 1rem;
  color: var(--warning-text-color);
  background-color: var(--warning-bg-color);
  border: 1px solid var(--border-color);
}

.warning_demo_mode {
  display: block;
  text-align: center;
  overflow-wrap: break-word;
  max-width: 100vw;
  box-sizing: border-box;  
  margin: 0 auto;
  width: fit-content;
  margin-bottom: 1px; /* To prenent merging border if multiple elements displayed */
  font-size: 1.6rem;
  font-weight: normal;
  letter-spacing: 0.14rem;
  padding: 0.6rem 1.5rem;
  border-radius: 0.6rem; 
  color: var(--warning-demo-text-color);
  background-color: var(--warning-demo-bg-color);
  border: 1px solid var(--border-color);
}

.warning_about_supervision {
  display: block;
  text-align: center;
  overflow-wrap: break-word;
  max-width: 100vw;
  box-sizing: border-box;  
  margin: 0 auto;
  width: fit-content;
  margin-bottom: 1px; /* To prenent merging border if multiple elements displayed */
  font-size: 1.6rem;
  font-weight: normal;
  letter-spacing: 0.14rem;
  padding: 0.6rem 1.5rem;
  border-radius: 0.6rem; 
  color: var(--warning-supervision-text-color);
  background-color: var(--warning-supervision-bg-color);
  border: 1px solid var(--border-color);
}

.warning_about_trial {
  display: block;
  text-align: center;
  overflow-wrap: break-word;
  max-width: 100vw;
  box-sizing: border-box;  
  margin: 0 auto;
  width: fit-content;
  margin-bottom: 1px; /* To prenent merging border if multiple elements displayed */
  letter-spacing: 0.14rem;
  padding: 0.6rem 1.5rem;
  font-size: 1.6rem;
  font-weight: normal;
  border-radius: 0.6rem; 
  color: var(--warning-trial-text-color);
  background-color: var(--warning-trial-bg-color);
  border: 1px solid var(--border-color);
}

.warning_span {
  color: #cf1d26;
}

.hint_span {
  color: #3385ff;
}

.color_purple {
 color: #aa80ff;
}
.color_pink {
 color: #ed8cb4;
}
.color_gold {
 color: #ff9933;
}
.color_green {
 color: #00994d;
}

.claimed_work_span {
 color: #3333ff;
 font-weight: bold;
}

.hint {
  font-size: 1.7rem;
  color: #505050;
}

.click_here_hint {
  font-size: 1.6rem;
  letter-spacing: 0.4rem;
  text-align: center;
  color: #999;
}

.fineprint {
  font-size: 1.3rem;
  color: #444;
}

.logo-img-box {
  width: 20rem;
  height: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.logo-img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sel_block {
  display: inline-block;
  background-color: var(--tile-bg-color);
  padding: 0.5rem 0.5rem;
  margin: 0.5rem 0rem 0rem 0rem;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
}
.sel_block:hover:not(.sel_block_active):not(.sel_block_disabled) {
   background-color: var(--tile-hover-bg-color);
}
.sel_block_active {
  background-color: var(--tile-active-color);
}
.sel_block_disabled {
  background-color: var(--tile-disabled-color);
}


table.report_period_table td:nth-child(2) {
  padding-left: 4rem;
}

/*
By unclear reason the Android (and iOS?) browser doesn't like 
nested table definition. We need to describe every element separately */
table.month_table {
  border: 1px solid var(--border-color);
  border-spacing: 0;
} 
table.month_table tr:first-child td {
  border-bottom: 1px solid var(--border-color);
  text-align: center;
 /* letter-spacing: 0.1em;*/
  padding: 0.6rem 0rem;
}
table.month_table td.cell_invalid {
  background-color: var(--tile-disabled-color);
}
table.month_table td.cell_valid {
  text-align: center;
  padding: 0.5rem 0.8rem;
  background-color: var(--tile-bg-color);
}
table.month_table td.cell_edit_not_permitted {
}
table.month_table td.cell_edit_permitted {
  font-weight: bold;
}
table.month_table td.cell_active {
  background-color: var(--tile-active-color);
}
table.month_table td.cell_valid:nth-child(6):not(.cell_active), td.cell_valid:nth-child(7):not(.cell_active) {
  background-color: var(--tile-alternate-bg-color)
;
}
table.month_table td.cell_valid:hover:not(.cell_active):not(.cell_no_hover) {
  background-color: var(--tile-hover-bg-color);
}
/*
 --tile-bg-color: #cff2ce;
 --tile-hover-bg-color: #aaa;
 --tile-active-color: #c38cd9;
 --tile-disabled-color: #ccc;
*/

.arrow {
  color: #4287f5;
  display: block;
}
.arrow_disabled {
  color: grey;
}
.arrow:hover {
  color: #0e4fb5;
}

.time_range {
 width: 95%;
 padding-top: 1rem;
}

.line_input {
 width: 95%;
}

.overlay-container {
  position: relative;
}

.scroll_checkboxes {
 padding: 0.5rem 1rem;
 border: 1px solid var(--border-color);
 height: 12rem; 
 overflow-y: scroll;
}

/*
By unclear reason the Android (and iOS?) browser doesn't like 
nested table definition. We need to describe every element separately */
table.day_wbd_list {
  width: 100%;
  font-size: 1.8rem;
  border: 1px solid #444;
  border-spacing: 0;
  table-layout: fixed; /* Prevent resizing table if cell text is too long */
}
table.day_wbd_list tr td {
  padding: 0;
}
table.day_wbd_list tr td:nth-child(2) {
  padding: 1rem;
  border-left: 1px solid #444;
  font-size: 1.4rem;
}
table.day_wbd_list tr td:first-child {
  text-align: center;
  width: 6rem;
}
table.day_wbd_list tr:nth-child(odd) td {
  background-color: #d4d4d4;
}
table.day_wbd_list tr:nth-child(even) td {
  background-color: #e0e0e0;
}

/*
By unclear reason the Android (and iOS?) browser doesn't like 
nested table definition. We need to describe every element separately */
table.day_wbc_list_header {
  width: 100%;
  font-size: 1.8rem;
  border-spacing: 0;
  table-layout: fixed; /* Prevent resizing table if cell text is too long */
  text-align: center;
  background-color: var(--table-zebra-header-bg-color);
}
table.day_wbc_list_header tr td {
  border-bottom: 0px;
  border-top: 1px solid var(--border-color);
}
table.day_wbc_list_header tr td:nth-child(1) {
  width: 6rem;
  padding: 1.5rem 0 1.5rem 0;
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}
table.day_wbc_list_header tr td:nth-child(3) {
  width: 5rem;
  padding: 0;
}
table.day_wbc_list_header tr td:nth-child(4) {
  width: 5rem;
  padding: 0;
  border-right: 1px solid var(--border-color)
}


/*
By unclear reason the Android (and iOS?) browser doesn't like 
nested table definition. We need to describe every element separately */
table.day_wbc_bg {
  width: 100%;
  font-size: 1.8rem;
  border: 1px solid var(--border-color);
  border-spacing: 0;
  table-layout: fixed; /* Prevent resizing table if cell text is too long */
}
table.day_wbc_bg tr {
  height: 6rem;
  padding: 0;
}
table.day_wbc_bg tr td:first-child {
  text-align: center;
  width: 6rem;
}
table.day_wbc_bg tr:nth-child(odd) td {
  background-color: var(--table-zebra-bw-bg-color-1);
}
table.day_wbc_bg tr:nth-child(even) td {
  background-color: var(--table-zebra-bw-bg-color-2);
}


/*
By unclear reason the Android (and iOS?) browser doesn't like 
nested table definition. We need to describe every element separately */
table.day_wbc_list {
  width: 100%;
  font-size: 1.4rem;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid var(--border-color);
  border-spacing: 0;
  table-layout: fixed; /* Prevent resizing table if cell text is too long */
  border-collapse: separate;
}
table.day_wbc_list tr td:nth-child(1) {
  width: 6rem;
  padding: 0;
}
table.day_wbc_list tr td:nth-child(2) {
  padding: 0 1rem;
  border-left: 1px solid var(--border-color);
  white-space: nowrap; /* Keep text in the cell in single line */
  overflow: hidden; /* Discard the right side of long text exceeding the cell width */
}
table.day_wbc_list tr.row_valid_odd td:nth-child(2) {
  background-color: var(--table-zebra-bg-color-2);
}
table.day_wbc_list tr.row_valid_even td:nth-child(2) {
  background-color: var(--table-zebra-bg-color-1);
}
table.day_wbc_list tr.row_valid_odd.row_modified td:nth-child(2) {
  background-color: var(--table-modified-bg-color-2);
}
table.day_wbc_list tr.row_valid_even.row_modified td:nth-child(2) {
  background-color: var(--table-modified-bg-color-1);
}
table.day_wbc_list tr td:nth-child(3) {
  width: 5rem;
  text-align: center;
}
table.day_wbc_list tr.row_valid_odd td:nth-child(3) {
  background-color:var(--table-zebra-bg-color-2);
}
table.day_wbc_list tr.row_valid_even td:nth-child(3) {
  background-color: var(--table-zebra-bg-color-1);
}
table.day_wbc_list tr td:nth-child(4) {
  width: 5rem;
  text-align: center;
}
table.day_wbc_list tr.row_valid_odd td:nth-child(4) {
  background-color: var(--table-zebra-bg-color-2);
}
table.day_wbc_list tr.row_valid_even td:nth-child(4) {
  background-color: var(--table-zebra-bg-color-1);
}
table.day_wbc_list tr.row_modifying td:nth-child(2) {
  background-color: var(--table-modifying-bg-color);
}
table.day_wbc_list tr.row_modifying td:nth-child(3) {
  background-color: var(--table-modifying-bg-color);
}
table.day_wbc_list tr.row_modifying td:nth-child(4) {
  background-color: var(--table-modifying-bg-color);
}

/*
This is invisible table which lays on top of day_wbc_list.
It's responsible for hovers.
This table is used because the browser in touchscreen mode
doesn't like when the underlying element is changing. It stops
tracking immediately.
*/
table.day_wbc_list2 {
  width: 100%;
  font-size: 1.4rem;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #444;
  border-spacing: 0;
  table-layout: fixed; /* Prevent resizing table if cell text is too long */
  background-color: rgba(0, 0, 0, 0); /* Transparent */
  color: rgba(0, 0, 0, 0); /* Transparent */
}
table.day_wbc_list2 tr td:nth-child(1) {
  width: 6rem;
  padding: 0;
}
table.day_wbc_list2 tr td:nth-child(2) {
  padding: 0 1rem;
  border-left: 1px solid #444;
  white-space: nowrap; /* Keep text in the cell in single line */
  overflow: hidden; /* Discard the right side of long text exceeding the cell width */
}
table.day_wbc_list2 tr:not(tr.row_no_hover) td:nth-child(2):hover {
  background-color: var(--table-zebra-hover-bg-color);
  color: var(--table-zebra-hover-text-color);
}
table.day_wbc_list2 tr td:nth-child(3) {
  width: 5rem;
  text-align: center;
}
table.day_wbc_list2 tr.row_valid_odd:not(tr.row_no_hover) td:nth-child(3):hover {
  background-color: var(--table-zebra-hover-bg-color);
  color: var(--table-zebra-hover-text-color);
}
table.day_wbc_list2 tr.row_valid_even:not(tr.row_no_hover) td:nth-child(3):hover {
  background-color: var(--table-zebra-hover-bg-color);
  color: var(--table-zebra-hover-text-color);
}
table.day_wbc_list2 tr td:nth-child(4) {
  width: 5rem;
  text-align: center;
}
table.day_wbc_list2 tr.row_valid_odd:not(tr.row_no_hover) td:nth-child(4):hover {
  background-color: var(--table-zebra-hover-bg-color);
  color: var(--table-zebra-hover-text-color);
}
table.day_wbc_list2 tr.row_valid_even:not(tr.row_no_hover) td:nth-child(4):hover {
  background-color: var(--table-zebra-hover-bg-color);
  color: var(--table-zebra-hover-text-color);
}




/*
By unclear reason the Android (and iOS?) browser doesn't like 
nested table definition. We need to describe every element separately */
table.day_work_edit {
  display: none;
  width: 100%;
  white-space: nowrap; /* Keep text in the cell in single line */
  overflow: hidden; /* Discard the right side of long text exceeding the cell width */
  font-size: 1.8rem;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid var(--border-color);
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;
  background-color: var(--table-edit-bg-color);
}
table.day_work_edit tr td:nth-child(1) {
  width: 6rem;
  padding-left: 6rem;
}
table.day_work_edit tr td:nth-child(2) {
  width: 100%;
}

.list_of_features {
  list-style-type: square;
}
.list_of_features li {
  margin: 1.5rem 1rem;
}

div.main_div {
  padding-left: 3rem;
  padding-right: 3rem;
}


.time_ranges_table td { 
  padding: 0.2rem 0.5rem 0.2rem 0;
}

.pdf_page_a4 {
 width: 210mm;
 min-height: 297mm;
 padding: 10mm 10mm 10mm 20mm;
 font-family: Arial, sans-serif;
 font-size: 12pt;
 box-sizing: border-box;
 background-color: white; /* Pdf uses solid black and white colors */
 color: black; /* Pdf uses solid black and white colors */
}
.pdf_header {
 font-family: Arial, sans-serif;
 font-size: 20pt;
 font-weight: bold;
 background-color: white; /* Pdf uses solid black and white colors */
 color: black; /* Pdf uses solid black and white colors */
}
.pdf_bold {
 font-family: Arial, sans-serif;
 font-size: 12pt;
 font-weight: bold;
}
.pdf_logo {
 position: absolute;
 top: 0;
 right: 0;
 width: 50mm;
 height: 50mm;
/* padding-top: 10mm;*/
 padding-right: 10mm;
 object-fit: contain; /* Сохраняет пропорции, но вписывает в квадрат */
 pointer-events: none; /* Картинка не мешает кликам */
/* opacity: 0.8; /* Можно сделать полупрозрачной (опционально) */
}
table.pdf_table {
 width: 180mm;
 border-spacing: 0;
 font-size: 10pt;
 border: 1px solid black;
 margin-right: 10mm;
 background-color: white; /* Pdf uses solid black and white colors */
 color: black; /* Pdf uses solid black and white colors */
}
table.pdf_table tr td {
 padding: 4pt;
}
table.pdf_table tr {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}
table.pdf_table td, th {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}
table.pdf_table tr:first-child {
 font-weight: bold;
 background-color: #bbb; 
 border-bottom: 1px solid black;
}
table.pdf_table tr:last-child {
 font-weight: bold;
}




@media screen and (max-width: 600px) {
 div.main_div {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
 }
 .warning {
    width: 100%;
 }
 .error {
    width: 100%;
 } table.day_work_edit tr td:nth-child(1) {
  padding-left: 0.5rem;
 }
 span.slogan {
  transform:scale(1,1);
 }
}

img.install_pic {
 max-width: 96%;
}