html {
  max-width: 450px;
}

body {
  font-family: "Lucida Sans Unicode", sans-serif;
  font-size: 1em;
  margin: 0px 0px;
}

.menu {
  font-size:1.2em;
  background: #333333;
  width: 100%;
  z-index: 100;
  position: fixed;
  color: grey;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ccc;
  max-width: 450px;
    border-radius: 5px; 
}

.menu li {
  font-size:0.8em;
  --overflow: auto; 
  white-space:nowrap;
  position: relative;
  list-style: none;
  top:12px;
  color: White;
  padding-left: 8px;
  --padding-top: 14px;
  --padding-bottom: 14px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ccc;
}

.dt {
  position: absolute;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
}

.r_rom { grid-area: r_rom; white-space:nowrap; text-align: left; text-overflow: hidden;} 
.r_prs { grid-area: r_prs; }
.r_day { grid-area: r_day; }
.r_res { grid-area: r_res; }
.r_hdc { grid-area: r_hdc; }
.r_rkc { grid-area: r_rkc; }
.r_gty { grid-area: r_gty; }
.r_cnt { grid-area: r_cnt; }
.r_vip { grid-area: r_vip; }
.r_con { grid-area: r_con; background-color: rgba(255,255,255,0.8); }

.grid-rooms {
  display: grid;
  grid: auto auto auto / 20% 20% 20% 20% 20%;
  grid-template-areas:
    'r_rom r_rom r_prs r_day r_res'
    'r_hdc r_gty r_cnt r_vip r_rkc'
    'r_con r_con r_con r_con r_con';
  padding: 2px;
  border-bottom: 2px;
  border-bottom-color: white;
  border-bottom-style: solid;
  text-align: center;
  font-size: 1.1em;
  border-radius: 5px; 
}

.f_vip { grid-area: f_vip; }
.f_gty { grid-area: f_gty; }
.f_cnt { grid-area: f_cnt; }
.f_day { grid-area: f_day; }
.f_prs { grid-area: f_prs; }

.grid-future {
  display: grid;
  grid: auto auto / 20% 20% 20% 20% 20%;
  grid-template-areas:
    'f_gty f_cnt f_vip f_day f_prs';
  padding: 2px;
  border-bottom: 2px;
  border-bottom-color: white;
  border-bottom-style: solid;
  text-align: center;
  font-size: 1.0em;
}

.m_hdl { grid-area: m_hdl; padding-top: 5px; } /* HD lista */
.m_hdc { grid-area: m_hdc; } /* HD dodaj */
.m_rkl { grid-area: m_rkl; padding-top: 5px; } /* RK lista */
.m_rkc { grid-area: m_rkc; } /* RK dodaj */
.m_cln { grid-area: m_cln; padding-top: 5px; } /* ciscenje */
.m_log { grid-area: m_log; } /* dogodki */
.m_lst { grid-area: m_lst; padding-top: 5px; } /* izgubljeni */
.m_com { grid-area: m_com; } /* opombe */

.grid-menu {
  display: grid;
  grid: auto auto / 25% 25% 25% 25%;
  grid-template-areas:
    'm_hdl m_cln m_lst m_rkl'
    'm_hdc m_log m_com m_rkc';
  text-align: center;
  font-size: 1em;
}

.c_cid { grid-area: c_cid; background-color: rgba(255,255,255,0.85); padding: 10px 2px 10px 2px;} /* ID */
.c_smi { grid-area: c_smi; }
.c_roi { grid-area: c_roi; }
.c_str { grid-area: c_str; } /* datum vnosa */
.c_usr { grid-area: c_usr; } /* vnašalec */
.c_end { grid-area: c_end; background-color: rgba(0,0,0,0.1); } /* datum zaključka */
.c_own { grid-area: c_own; } /* zadolženi */
.c_tel { grid-area: c_tel; background-color: rgba(0,0,0,0.1); } /* telefon */
.c_dsc { grid-area: c_dsc; } /* opis */
.c_pic { grid-area: c_pic; } /* slike */
.c_com { grid-area: c_com; } /* opomba */
.c_fin { grid-area: c_fin; } /* datum zaključka */
.c_log { grid-area: c_log; } /* dogodki */
.c_but { grid-area: c_but; background-color: rgba(0,0,0,0.1); } /* zaključi zahtevek */

.grid-cases {
  display: grid;
  grid: auto auto auto auto auto auto auto auto auto auto auto / 50% 50%;
  grid-template-areas:
    'c_cid c_cid'
    'c_smi c_roi'
    'c_usr c_str'
    'c_tel c_end'
    'c_own c_own'
    'c_dsc c_dsc'
    'c_pic c_pic'
    'c_com c_com'
    'c_fin c_fin'
    'c_log c_log'
    'c_but c_but';
  text-align: left;
  font-size: 1em;
}

#image-preview1,#image-preview3 {
  width: 25%;
  height: 100px;
  --position: relative;
  float: left;
  overflow: hidden;
  --background-color: #ffffff;
  --color: #ecf0f1;
  --border-left:1px solid #000000;
  --border-right:1px solid #000000;
  --margin:1px;
}

#image-preview2,#image-preview4 {
  width: 25%;
  height: 100px;
  --position: relative;
  float: left;
  overflow: hidden;
  --background-color: #ffffff;
  background-color: rgba(0,0,0,0.4); 
  --color: #ecf0f1;
  --border-left:1px solid #000000;
  --border-right:1px solid #000000;
  --margin:1px;
}

#image-preview1 input,#image-preview2 input,#image-preview3 input,#image-preview4 input {
  --line-height: 200px;
  --font-size: 200px;
  --position: absolute;
  float: left;
  opacity: 0;
  z-index: 10;
}

#image-preview1 label,#image-preview2 label,#image-preview3 label,#image-preview4 label {
  --position: absolute;
  float:left;
  --z-index: 5;
  --opacity: 0.8;
  --cursor: pointer;
  --background-color: #bdc3c7;
  --width: 200px;
  --height: 50px;
  --font-size: 20px;
  --line-height: 50px;
  --text-transform: uppercase;
  --top: 0;
  --left: 0;
  --right: 0;
  --bottom: 0;
  --margin: auto;
  text-align: center;
}

.log { 
  font-size: x-small; 
  width: 100%; 
  border: 1px solid #ffffff;
}

.log tr:nth-child(even) { background-color: #f2f2f2; }
.log tr:nth-child(odd) { background-color: #c0bdbd; }

.shw tr:nth-child(even) { background-color: #f2f2f2; }
th, td { border-bottom: 1px solid #ddd; }
table { border-collapse: collapse; }

#zas td, #zas tr {
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;
  border-left: 1px solid #eeeeee;
}
#zas td>img {
  width: 100%;
  height: 100%;
}