/* https://www.whitehat.cz/jak-vytvorit-responzivni-design/ */

body
{
  /*font-family: Ubuntu, Merriweather Sans, Verdana, Arial, Helvetica, sans-serif; */
  /*font-family: Verdana, Arial, Helvetica, sans-serif;*/
  font-family: Arial, Verdana, Helvetica, sans-serif;
  color: #00497f;
  /*font-size: max(0.8vw, 12px);*/
  font-size: clamp(0.8vw, 2vw, 12px);
  margin: 0 auto;
}

a
{
  text-decoration: none;
}

progress
{
  width: 88%;
}

/*-------------------------------*/
/* Forms */
.input, select
{
  transition-duration: 0.2s;
  /* offset-x | offset-y | blur-radius | spread-radius | color */
  box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2), 0 2px 8px 0 rgba(0,0,0,0.19);
  font-size: clamp(10px, 1.1vw, 15px);
  color: #00497f;
}

.inputdate
{
  width:47.5%;
  box-sizing:border-box;
  text-align:center;
  font-size: clamp(0.8vw, 1.7vw, 12px);
  color: #00497f;
}

.inputtxt
{
  width:96%;
  box-sizing:border-box;
  text-align:center;
  font-size: clamp(0.8vw, 2vw, 12px);
  color: #00497f;
}

.inputsel
{
  width:96%;
  padding: 0.5%;
  box-sizing:border-box;
  text-align:center;
  font-size: clamp(0.8vw, 2vw, 12px);
  box-shadow: none;
  color: #00497f;
}

.inputtransp
{
  width:96%;
  box-sizing:border-box;
  background: rgba(0, 0, 0, 0);
  border: none;
  outline: none;
  text-align:center;
  font-size: clamp(0.8vw, 2vw, 12px);
  color: #00497f;
}

/*-------------------------------*/
/* Menu button */
.menu_button
{
  color: #041e62;
  padding: 0px;
  width: 10vw;
  height: 2vw;
  font-size: 2vh; 
  background-color: transparent;
  border: 0px;
}

.menu_button:hover
{
  color: #041e62;
  background-color: #ffa319;
  cursor: pointer;
  font-size: 2vh;
  border-radius: 0.7vw;
}
/*-------------------------------*/

/*-------------------------------*/
/* SMALL button */
.small_button
{
  color: #041e62;
  padding: 0px;
  width: 5vw;
  height: 2vw;
  font-size: 1.8vh; 
  border-radius: 0.7vw;
  background-color: transparent;
  border: 0px;
  box-shadow: none;
}

.small_button:hover
{
  color: #041e62;
  padding: 0px;
  width: 5vw;
  height: 2vw;
  font-size: 1.8vh; 
  border-radius: 0.7vw;
  background-color: transparent;
  cursor: pointer;
  border: 1px solid #ffa319;
  box-shadow: none;
}

.small_button:focus
{
 border: 1px solid #ffa319;
 outline: 1px solid #ffa319;
}
/*-------------------------------*/


/*-------------------------------*/
/* NAVIBAR button with background image */
.navibar_button
{
  margin-bottom: 10%;
  font-size: clamp(10px, 1.1vw, 15px);
  border: 1px solid #767676;
  background:url('../graphic/telescope.png'), #d9d9d9;
  background-size: contain;
  background-position: left;
  background-repeat:no-repeat;
  cursor: pointer;
}

.navibar_button:hover
{
  color: white;
  background-color: #bcc7d8;
  cursor: pointer;
}
/*-------------------------------*/

/*-------------------------------*/
/* NAVIBAR button with background image */
.navibar_search
{
  margin-bottom: 10%;
  font-size: clamp(0.8vw, 2vw, 12px);
  border: 1px solid #767676;
  background:url('../graphic/search.png'), #d9d9d9;
  background-size: contain;
  background-position: left;
  background-repeat:no-repeat;
  cursor: pointer;
}

.navibar_search:hover
{
  color: white;
  background-color: #bcc7d8;
  cursor: pointer;
}
/*-------------------------------*/


/*-------------------------------*/
/* NAVIBAR button with background image */
.navibar_save
{
  margin-bottom: 10%;
  font-size: clamp(0.8vw, 2vw, 12px);
  border: 1px solid #767676;
  background:url('../graphic/save.png'), #d9d9d9;
  background-size: contain;
  background-position: left;
  background-repeat:no-repeat;
  cursor: pointer;
}

.navibar_save:hover
{
  color: white;
  background-color: #bcc7d8;
  cursor: pointer;
}
/*-------------------------------*/


/*-------------------------------*/
/* NAVIBAR button with background image */
.navibar_delete
{
  margin-bottom: 10%;
  font-size: clamp(0.8vw, 2vw, 12px);
  border: 1px solid #767676;
  background:url('../graphic/delete.png'), #d9d9d9;
  background-size: contain;
  background-position: left;
  background-repeat:no-repeat;
  cursor: pointer;
}

.navibar_delete:hover
{
  color: white;
  background-color: #bcc7d8;
  cursor: pointer;
}
/*-------------------------------*/

/*-------------------------------*/
/* FORWARD AND BACKWARD YELLOW BUTOONS */
.yellow_button_left
{
  display:flex;
  background-color: #f6a124;
  border-radius: 1vw;
  height:3.6vh;
  margin-top: 1vw;
  margin-left: 6vw;
  margin-bottom: 1vw;	
  box-sizing: border-box;
}

.yellow_button_right
{
  display:flex;
  background-color: #f6a124;
  border-radius: 1vw;
  height:3.6vh;
  margin-top: 1vw;
  margin-right: 6vw;
  margin-bottom: 1vw;	
  box-sizing: border-box;
}

.yellow_button_bgpic
{
  border:0px;
  height:1.8vw;	
}

.yellow_button_left:hover, .yellow_button_right:hover
{
  border: 1px solid #004a80;
  cursor: pointer;
}
/*-------------------------------*/

/*-------------------------------*/
/* NAVIBAR button with background image */
.navibar_completion
{
  margin-bottom: 10%;
  font-size: clamp(0.8vw, 2vw, 12px);
  border: 1px solid #767676;
  background:url('../graphic/completion.png'), #d9d9d9;
  background-size: contain;
  background-position: left;
  background-repeat:no-repeat;
  cursor: pointer;
}

.navibar_completion:hover
{
  color: white;
  background-color: #bcc7d8;
  cursor: pointer;
}
/*-------------------------------*/


/*-------------------------------*/
/* NAVIBAR button with background image */
.navibar_delete2
{
  margin-bottom: 10%;
  font-size: clamp(0.8vw, 2vw, 12px);
  border: 1px solid #767676;
  background-color: #e5e5e5;
  background-size: contain;
  background-position: left;
  background-repeat:no-repeat;
  cursor: pointer;
}

.navibar_delete2:hover
{
  color: white;
  background-color: #bcc7d8;
  cursor: pointer;
}
/*-------------------------------*/

h1
{
  color: coral;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  padding-left: 10px;
  margin-bottom: 2px;
  margin-top: 10px;
  /*font-size:1.5vw;*/
  font-size: max(1.5vw, 18px);
}

p
{
  max-width: 1800px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2.5px;
  padding-bottom: 2.5px;
  text-align: justify;
}

#head_top
{
	margin: 0px auto;
	padding: 0px;
	border: 0px;
    background-color: #e8e8e8;
}

#head_top_in
{
	margin: 0px auto;
    background-color: #e8e8e8;
    text-align: center;
    padding-bottom: 0.75%;
}

#footer
{
  width: 100%;
  box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 1px #fcfcfc, 0.3em 0.3em 1em rgba(0, 0, 0, 0.1);
  background-color: #e6e6e6;
}

#pack_main /* main packaging */
{
	margin: 0px auto;
	padding: 0px;
	border: 0px;
}

#pack_main_in /* inside main packaging */
{
  width: 100%;
  clear: both;
  background-color: #fcfcfc;
  min-height: 75vh;
}


/*--------------------------*/
/* TABLES */
table
{
  border: 1px solid white;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
  color: #00497f;
}

thead
{
  background-color:#00497f;
  color:#FFF;
  border: 1px solid white;
  text-transform:uppercase;
  font-weight:bold;
  font-size: clamp(0.8vw, 2vw, 12px);
  word-break:break-all;
}

th
{
  padding:0.1%;
  border: 1px solid white;
  text-align:center;
  background-color:#00497f;
  font-size: clamp(0.8vw, 2vw, 12px);
  word-break:break-all;
}

td
{
  padding: 0.1%;
  border: 1px solid white;
  text-align: center;
  font-size: clamp(0.8vw, 2vw, 12px);
  word-break:break-all;
}

.td2
{
  padding: 0.1%;
  border: 1px solid white;
  font-weight: bold;
  font-size: clamp(0.8vw, 2vw, 12px);
  word-break:break-all;
}

.td3
{
  display:none;
  padding: 0.1%;
  border: 1px solid white;
  text-align: center;
  font-size: clamp(0.8vw, 2vw, 12px);
  word-break:break-all;
}

.td1500, .td1200, .td0900, .td0600
{
  padding: 0.1%;
  border: 1px solid white;
  text-align: center;
  font-size: clamp(0.8vw, 2vw, 12px);
  word-break:break-all;
}

tr:nth-child(2n+1)
{
  cursor: pointer;
  background:#eee;
  height: 2.4vw;
}

tr:nth-child(2n)
{
  cursor: pointer;
  background:#ddd;
  height: 2.4vw;
}

/*--------------------------*/
.tr2
{
  cursor: pointer;
  color: #00497f;
  height: 2.4vw;
}

.tr2:nth-child(2n+1)
{
  cursor: pointer;
  background:#eee;
  height: 2.4vw;	
}

.tr2:nth-child(2n)
{
  cursor: pointer;
  background:#ddd;
  height: 2.4vw;
}

.tr2:hover
{
  cursor: pointer;
  background: #ffa319;
  height: 2.4vw;
}

/*--------------------------*/

/*--------------------------*/
/*---- Table Calendar 1-----*/
/*--------------------------*/
.trcal1
{
  color: #787b7f;
}

.trcal1:hover
{
  cursor:pointer;
  color: #787b7f;
}

.trcal1:nth-child(2n+1)
{
  color: #787b7f;
  background:#ffffff;
}

.trcal1:nth-child(2n)
{
  color: #787b7f;
  background:#ffffff;
}

.thcal1
{
  color: #787b7f;
  padding:0.1%;
  border: 2px solid #e8e8e8;
  text-align:left;
  background-color:#ffffff;
  font-size: clamp(1.2vw, 2vw, 20px);
  word-break:break-all;
}

.tdcal1
{
  color: #00497f;
  padding-top: 1%;
  padding-bottom: 1%;
  border: 2px solid #e8e8e8;
  font-size: clamp(1.2vw, 2vw, 20px);
  word-break:break-all;
}

.spancal1
{
  color: #00497f;
  text-align: left;
  margin: 5%;
  margin-left: 10%;
  font-size: clamp(0.8vw, 2vw, 12px);
}

.spancal1b
{
  color: #00497f;
  text-align: left;
  margin: 5%;
  margin-left: 10%;
  font-weight: bold;
  font-size: clamp(1.2vw, 2vw, 20px);
}

.spancal1c
{
  color: #00497f;
  text-align: left;
  margin: 5%;
  margin-left: 10%;
  font-weight: bold;
  font-size: clamp(1vw, 1.6vw, 16px);
}

/*--------------------------*/
/*---- Table Calendar 2-----*/
/*--------------------------*/
.blue_navi_center
{
  display:flex;
  background-color: #e8e8e8;
  border-radius: 1vw;
  min-width:8vw;
  min-height:1.8vw;
  box-sizing: border-box;
}

.blue_button_left
{
  display:flex;
  background-color: #e8e8e8;
  border-radius: 1vw;
  width:8vw;
  height:1.8vw;
  margin-top: 1vw;
  margin-right: 22vw;
  margin-bottom: 1vw;	
  box-sizing: border-box;
}

.blue_button_right
{
  display:flex;
  background-color: #e8e8e8;
  border-radius: 1vw;
  width:8vw;
  height:1.8vw;
  margin-top: 1vw;
  margin-left: 22vw;
  margin-bottom: 1vw;	
  box-sizing: border-box;
}

.blue_calendar_center
{
  display:flex;
  background-color: #e8e8e8;
  border-radius: 1vw;
  width:3vw;
  height:1.8vw;
  margin-top: 1vw;
  margin-bottom: 1vw;	
  box-sizing: border-box;
}

.blue_calendar_centr2
{
  display:flex;
  background-color: #e8e8e8;
  border-radius: 1vw;
  width:3.5vw;
  height:1.8vw;
  margin-top: 1vw;
  margin-bottom: 1vw;	
  box-sizing: border-box;
}

.blue_button_bgpic
{
  border:0px;
  height:1.8vw;	
}

.blue_button_left:hover, .blue_button_right:hover, .blue_calendar_center:hover, .blue_navi_center:hover, .blue_calendar_centr2:hover
{
  border: 1px solid #004a80;
  cursor: pointer;
  box-sizing: border-box;
}

.table2
{
  border: 2px solid #e8e8e8;
  background-color:#ffffff;
  margin: 0px;
  padding: 0px;
  width: 100%;
  table-layout: fixed;
  color: #00497f;
}

.trcal2
{
  border: 2px solid #e8e8e8;
  margin: 0px;
  padding: 0px;
  color:black; 
  height: 1.5vw;
}

.trcal2:hover
{
  cursor:pointer;
  color: #787b7f;
}

.trcal2:nth-child(2n+1)
{
  color: #787b7f;
  background-color:#ffffff;
}

.trcal2:nth-child(2n)
{
  color: #787b7f;
  background-color:#ffffff;
}

.thcal2
{
  border: 2px solid #e8e8e8;
  background-color:#ffffff;
  color: #807b7f;
  border: none;
  margin: 0px;
  padding: 0px;
  text-align:center;
  font-size: clamp(0.8vw, 1.2vw, 12px);
  word-break:break-all;
}

.tdcal2
{
  border: 2px solid #e8e8e8;
  background-color:#ffffff;
  margin: 0px;
  padding: 0px;
  font-size: clamp(5px, 0.7vw, 15px);
  word-break:break-all;
}

.spancal2
{
  background-color:#ffffff;
  margin: 0px;
  margin: 0px;
  padding: 0px;
  padding: 0px;
  width: 100%;
  color: white;
  font-size: clamp(0.7vw, 1vw, 10px);
}

.spancal2b
{
  background-color:#ffffff;
  margin: 0px;
  margin: 0px;
  padding: 0px;
  width: 100%;
  font-weight: bold;
  font-size: clamp(5px, 0.7vw, 15px);
}

.pasiv
{
  text-align: left;
  margin: 0px;
  padding: 0vw;
  width: 100%;
  font-size: clamp(0.7vw, 1vw, 10px);
  color: silver;
  background-color: #ffffff;
  /*border-top: 1px solid #71797E;*/
  /*border-bottom: 1px solid #71797E;*/
}

.activ
{
  text-align: left;
  margin: 0px;
  padding: 0vw;
  width: 100%;
  font-size: clamp(0.7vw, 1vw, 10px);
  color: #00497f;
  background-color: #ffffff;
  font-weight: bold;
  /*border-top: 1px solid #71797E;*/
  /*border-bottom: 1px solid #71797E;*/
}

.today
{
  text-align: left;
  margin: 0px;
  padding: 0px;
  width: 100%;
  font-size: clamp(0.7vw, 1vw, 10px);
  color: #00497f;
  background-color: #ffa319;
  font-weight: bold;
  border-right: 1px solid #00497f;
  border-left: 1px solid #00497f;
  border-top: 1px solid #00497f;
  border-bottom: 1px solid #00497f;
}
/*--------------------------*/

/*FOOTER RESOLUTION AND BREAKPOINTS INFO */
.bpoint /* breakpoints info */
{
  width:10px;
  height:10px;
  border-radius:5px;
  border:1px solid silver;
  background-color:white;
  visibility: hidden;
}

#bpoint_cont
{
  display:flex;
  align-items:center;	
  visibility: hidden;
}

#res /* resolution of the screen info */
{
  visibility: hidden;
}

/*--------------------------------------------*/
/*NUMBERING BUTTONS CONTAINER*/
.page_summary
{
  font-size: clamp(0.8vw, 2vw, 12px);
  margin:0.5%;
}

.page_cont /*(parent flex)*/
{
  margin: 1%;
  width: 100%;
  gap: 0.8%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: clamp(0.8vw, 2vw, 12px);
}

.page_active
{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15%;
  width: 100%;
  border:1px solid #1D1D1B;
  background-color: #00497F;
  color: white;
  font-weight: bold;
  font-size: clamp(0.8vw, 2vw, 12px);
}

.page_pasive
{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15%;
  width: 100%;
  border:1px solid #1D1D1B;
  background-color: #6B91B0;
  color: white;
  font-size: clamp(0.8vw, 2vw, 12px);
}
/*--------------------------------------------*/