:root {
  --body-text-color: black;
  --body-background-color: #f1f1f1;
  --siteNavigation-background-color: #292929;
  --siteFooter-background-color: #484848;
  --myServiceWrapper-background-color: #575757;
  --articleExp-border-bottom: 1px black solid;
  --v_clDate-background-color: #efefef;
  --clDate-background-color: #e3e3e3;
  --clDay-background-color: #f9f9f9;
  --clShift-hover-background-color: rgba(74, 109, 167, .15);
  --siteContent-background-color: #ffffff;
  --siteHeader-background-color: #ffffff;
  --btnWithIcon-hover-background-color: #e8effb;
  --btnWithIcon-hover-color: #325e82;
  --btnWithIcon-color: #4a6da7;
  --articleDate-color: #666666;
  --field_input-hover-background-color: rgba(207,225,255,.1);
  --field_input-hover-border: solid 1px #A9C1DF;
  --field_input-hover-box-shadow: 0 0 5px #ccc;
  --field_input-background-color: white;
  --field_input-color: black;
  --field_label-color: #4c4a48;
  --tinymce-body-background-color: white;
  --tinymce-body-color: black;
  --boxSettings-background-color: #F9F9F9;
  --clLoginPublisher-background-color: #ffff8b;
  --flex-table-background-color: #f1f1f1;
  --flex-table-hover-background-color: #E5E5E5;
  --first-border-bottom: solid 1px #d9d9d9;
  --table-row-border-bottom: solid 1px #767676;
  --boxStartPlanning-background-color: #f1f1f1;
  --tabBoxPublisher-background-color: #f1f1f1;
  --boxSettings-background-color: #f9f9f9;
  --noBcg-background-color: #FDFDFD;
  --noBcg-color: #646464;
  --otherMonth-background-color: #ffffff;
  --a-color: #4A6DA7;
  --tooltiptext-background-color: #E8E8F0;
  --tooltiptext-color: #444;
  --tooltiptext-border-color: #333;
  --tooltiptext-after-border-color: transparent transparent #333 transparent;
  --label-koule-background: #eee;
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-text-color: #e8e8e8;
    --body-background-color: black;
    --siteNavigation-background-color: #484851;
    --siteFooter-background-color: #2b2b2b;
    --myServiceWrapper-background-color: #3D3D3D;
    --articleExp-border-bottom: 1px silver solid;
    --v_clDate-background-color: #4a4a4a;
    --clDay-background-color: #262626;
    --clDate-background-color: #4a4a4a;
  --clShift-hover-background-color: rgba(74, 109, 167, .4);
    --siteContent-background-color: #191919;
    --siteHeader-background-color: #141414;
    --btnWithIcon-hover-background-color: #2d3942;
    --btnWithIcon-hover-color: #78a4c8;
    --btnWithIcon-color: #568dba;
    --articleDate-color: #b1b1b1;
    --field_input-hover-background-color: rgba(207,225,255,.2);
    --field_input-hover-border: solid 1px #C2D2E6;
    --field_input-hover-box-shadow: 0 0 5px #eee;
    --field_input-background-color: #353535;
    --field_input-color: whitesmoke;;
    --field_label-color: #b3aeaa;
    --tinymce-body-background-color: #353535;
    --tinymce-body-color: whitesmoke;
    --boxSettings-background-color: #3D3D3D;
    --clLoginPublisher-background-color: #0077Aa;
    --flex-table-background-color: #3D3D3D;
    --flex-table-hover-background-color: #585858;
    --first-border-bottom: solid 1px #64676f;
    --table-row-border-bottom: solid 1px white;
    --boxStartPlanning-background-color: #3D3D3D;
    --tabBoxPublisher-background-color: #3D3D3D;
    --boxSettings-background-color: #3D3D3D;
    --noBcg-background-color: #202020;
    --noBcg-color: #b9b9b9;
    --otherMonth-background-color: #191919;  /*#353535;*/
    --a-color: #B8D3FF;
    --tooltiptext-background-color: #222;
    --tooltiptext-color: #eee;
    --tooltiptext-border-color: #ccc;
    --tooltiptext-after-border-color: transparent transparent #ccc transparent;
    --label-koule-background: #ccc;
  }
}

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
  font: 105% "Calibri", sans-serif;
  min-width: -moz-available;
  min-width: -webkit-fill-available;
  min-width: fill-available;
  max-width: 100%;
  color: var(--body-text-color);
  background-color: #f1f1f1;
  background-color: var(--body-background-color);
}

#layoutMain {
  background-color: #f1f1f1;
  background-color: var(--body-background-color);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column; /* -------------------------------- */
}

/* --- HEADER --- */

#siteHeader {
  max-height: 65px;
  background-color: #f1f1f1;
  background-color: var(--body-background-color);
}

#siteHeader h2 {
  font-size: 1em;
}

@media only screen and (min-width: 500px) {
  #siteHeader h2 {
    font-size: 1.2em;
  }
}

@media only screen and (min-width: 840px) {
  #siteHeader {
    height: 60px;
  }
  #siteHeader h2 {
    font-size: 2em;
  }
}

.siteHeaderContent {
  display: flex;
  align-items: center;
  justify-content: space-between;  
  background-color: #ffffff;
  background-color: var(--siteHeader-background-color);
  margin: 0 auto;
  padding: 0px 5px;
  height: 100%;
}

@media only screen and (min-width: 760px) {
  .siteHeaderContent {  
    position: relative;
    max-width: 1000px;
    min-width: 760px;
    width: auto;
  }
}

a#siteLogo {
  display: none;
}

@media only screen and (min-width: 406px) {
  a#siteLogo {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    background-repeat: no-repeat;
    background-image: url("img/mobile_cart_logo.png");
    width: 65px;
    height: 65px;
    background-size: contain;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, .3);
  }
}

@media only screen and (min-width: 840px) {
  a#siteLogo {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 90px;
    z-index: 1;
    border-radius: 3px;
    box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, .4), inset 0px 0px 10px 2px rgba(74, 109, 167, .4);
  }
}

@media only screen and (min-width: 840px) {
  #siteNameContainer {
    margin-left: 100px;
  }
}

/* --- HEADER ICONS --- */


img.iconBtn {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: text-bottom;
}

#siteFeaturesContainer {
  display: flex;
  flex-direction: row;
}


#siteFeaturesContainer span {
  margin-right: 3px;
  margin-left: 3px;
  font-size: 0.8em;
  display: none;
}

a.btnWithIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 3px;
  margin: 2px 2px;
  min-width: 42px;
  min-height: 42px;
  color: #4a6da7;
  color: var(--btnWithIcon-color);
  cursor: pointer;  
  border: 1px solid transparent;
  background-color: transparent;
  text-decoration: none;
  transition: background-color .2s ease-out,box-shadow .2s;
}

@media only screen and (min-width: 520px) {
  #siteFeaturesContainer span {
    margin-right: 10px;
    margin-left: 8px;
    font-size: 0.9em;
    display: block;
  }
  img.iconBtn {
    width: 15px;
    height: 15px;
    vertical-align: middle;    
  }
  a.btnWithIcon {
    margin-bottom: 0px;
  }
}

@media only screen and (min-width: 840px) {
  #siteFeaturesContainer span {
    font-size: 1em;
  }
}

a.btnWithIcon:hover, a.btnWithIcon:focus {
  background-color: #e8effb;
  background-color: var(--btnWithIcon-hover-background-color);
  color: #568dba;
  color: var(--btnWithIcon-hover-color);
  text-decoration: none;
}

a.btnWithIcon:active {
  outline: 1px solid #4a6da7;
  text-decoration: none; 
  box-shadow: 0px 0px 5px 3px rgba(74, 109, 167, .5);
}
a.btnWithIcon:focus {
  outline: thin;
  outline: 1px solid #4a6da7;
  text-decoration: none; 
  min-height: 1px;
  color: #4a6da7;
}

/*.btnWithIcon:visited {
  color: #4a6da7;
}*/

img.icon {
  min-width: 15px;
  height: 15px;
  margin-left: 10px;
  display: inline-block;
  vertical-align: middle;
}
.myServicePublisher img.icon, .myServicePublisherI img.icon {
  min-width: 8px;
  height: 8px;
}

/*  --- NAV --- */

#siteNavigation, #adminNavigation {
  display: block;
  font-size: 0.8em;
  background-color: #292929;
  background-color: var(--siteNavigation-background-color);
  min-height: 33px;
}

#adminNavigation {
  background-color: #74706D;
}

@media only screen and (min-width: 760px) {
  #siteNavigation, #adminNavigation {
    display: block;
    font-size: 1.2em;
    min-height: 44px;
  }
}

.primaryNav, .admNav {
  margin: 0 auto;
  color: #fff;
}

.primaryNav a, .admNav a {
  color: #fff;
  text-decoration: none;
}

.primaryNavItem a:hover, .primaryNavItem a:focus {
  background-color: #0f0e0d;
  text-decoration: none;
}
.admNavItem a:hover, .admNavItem a:focus {
  background-color: #615D5A;
  text-decoration: none;
}

.primaryNavItem a, .admNavItem a {
/*  display: -webkit-box; */
  display: flex;
  padding: 8px;
  color: #fff;
}

@media only screen and (min-width: 760px) {
  .primaryNavItem a, .admNavItem a {
    padding: 10px;
  }
  .primaryNavItem, .admNavItem {
    margin-right: 16px;
  }
}

@media only screen and (min-width: 760px) {
  .primaryNav, .admNav {
    max-width: 1000px;
    min-width: 760px;
    width: auto;
  }
}

ul.primaryNavMenu, ul.admNavMenu {
/*  display: -webkit-box; */
  display: flex;
/*  flex-flow: column nowrap; ---- sloupec pro hamburger menu ----- */
  flex-flow: row wrap;
  margin: 0;
  justify-content: space-evenly;
}

@media only screen and (min-width: 840px) {
  ul.primaryNavMenu {
    flex-flow: row nowrap;
    justify-content: flex-start;
    margin-left: 100px; /* pro logo */
  }
  ul.admNavMenu {
    flex-flow: row nowrap;
    justify-content: flex-start;
    /*margin-left: 20px;*/
    margin-left: 100px;
  }
}

.primaryNav ul, .admNav ul {
  padding: 0px 5px 0px 5px;
  list-style-type: none;
}

@media only screen and (min-width: 760px) {
  .primaryNav ul, .admNav ul {
    padding: 0;
  }
}


/* --- CONTENT --- */

#siteContent {
  background-color: #ffffff;
  background-color: var(--siteContent-background-color);
  padding: 10px;
  flex: 1 0 auto;
}

@media only screen and (min-width: 760px) {
  #siteContent {
    max-width: 1000px;
    min-width: 760px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
  }
}

/* --- FOOTER --- */

#siteFooter{
  background-color: #292929;
  background-color: var(--siteFooter-background-color);
  color: #ffffff;
  min-height: 90px;
  padding: 20px;  
  width: 100%;
  max-width: 1000px;
}

@media only screen and (min-width: 760px) {
  #siteFooter {
  max-width: 1000px;
  min-width: 760px;
  margin: 0 auto;
  }
}

.pubSet a, .forgotPass a, .boxRenew a, .zprava a {
  color: #6286C1;
  color: var(--a-color);
}

#siteFooter a {
  color: #B8D3FF;
}

#showZoou {
	display:none;
  padding: 20px;
}

#showZoou dl {
  padding-top: 10px;
}

#showZoou dt {
  font-weight: bold;
  padding-top: 10px;
}

#showZoou dd {
  padding-left: 15px;
}

a {
  font-variant: small-caps;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.zprava {
  color: #d75a4d;
  text-align: center;
}

h1 {
  margin-bottom: 5px;
  font-size: 1.2em;
}

@media only screen and (min-width: 840px) {
  h1 {
    margin-bottom: 15px;
    font-size: 2em;
  }
}

.povinne {
  color: #bd5044;
}

#loginWraper {
  display: flex;
}

#loginContainer {
  width: 100%;
  align-self:center;
}

@media only screen and (min-width: 500px) {
  #loginContainer {
    width: 50%;
  }
}

#loginImage {
  display: none;
  width: 50%;
  padding: 20px;
}

@media only screen and (min-width: 500px) {
  #loginImage {
    display: block;
  }
}

#loginImage img {
  width: 100%;
}

/* --- FORMS --- */

.field_input, .field_select { /*.textarea_tinymce, .mce-tinymce, */
  width: 100%;
  border: solid 1px #d5d4d2;
  background-color: white;
  background-color: var(--field_input-background-color);
  color: black;
  color: var(--field_input-color);
  border-radius: 4px;
  padding: .8rem;
  vertical-align: middle;
  margin-bottom: 10px;
  transition: all .2s ease-in-out;
}

@media only screen and (min-width: 760px) {
  .field_input, .textarea_tinymce, .field_select  { /* .mce-tinymce,*/
    max-width: 600px;
  }
}

.field_input:hover, .field_select:hover {
  background-color: rgba(207,225,255,.1);
  background-color: var(--field_input-hover-background-color);
  border: solid 1px #A9C1DF;
  border: var(--field_input-hover-border);
  box-shadow: 0 0 5px #ccc;
  box-shadow: var(--field_input-hover-box-shadow);
  transition: all .2s ease-in-out;
}

.field_input:focus, .field_select:focus {
  border: solid 1px #A9C1DF;
  border: var(--field_input-hover-border);
  box-shadow: 0 0 5px #ccc;
  box-shadow: var(--field_input-hover-box-shadow);
}
/*
.mce-tinymce:hover {
  background-color: rgba(207,225,255,.1);
  transition: all .2s ease-in-out;
  box-shadow: 0 0 5px #ccc;
}*/

.textarea_tinymce {
  padding: 0;
  margin: 0;
  border: none;
}

body.mceBlackBody {
  color: var(--tinymce-body-color); 
  background-color: var(--tinymce-body-background-color);
}

.field_label {
  color: #4c4a48;
  color: var(--field_label-color);
  display: block;
  font-size: .8rem;
  margin-bottom: 4px;
  user-select: none;
}

@media only screen and (min-width: 760px) {
  .field_label {
    font-size: 1.1rem;
  }
}

.field_checkbox {
  margin-bottom: 10px;
}

.button, .btnLogout {  
  background-color: #4a6da7; /* #386195; */
  color: #f8f8f7;
  text-align: center;
  line-height: 1;
  cursor: pointer;
  transition: background-color .25s ease-out,box-shadow .28s;
  letter-spacing: .25px;
  box-sizing: border-box;
  display: inline-block;
  min-width: 85px;
  min-height: 40px;
  padding: 10px 16px;
  margin-bottom: 10px;
  border: 1px solid #386195;
  border-radius: 4px;
  font-size: 1rem;
}

.button:hover, .btnLogout:hover {
  background-color: #426296; /* #2a4970 moje vlastní hodnota */
  color: #f8f8f7;
  outline: 0;
  text-decoration: none;
  box-shadow: 2px 2px 5px rgba(0, 0, 94, .5);
}

.row .button {
  float: none;
  width: 100%;
}

@media only screen and (min-width: 500px) {
  .row .button {
    float: right;
    width: auto;
  }
}
.btnLogout {
  width: 100%;
}

.btnLogout img.iconBtn {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
}

#planningWraper .button, .boxChangeShift .button {
  width: 100%;
}

@media only screen and (min-width: 500px) {
  #planningWraper .button, .boxChangeShift .button {
    width: auto;
  }
}

/* zkušenosti */

#expWraper {
  padding: 5px;
}

@media only screen and (min-width: 310px) {
  #expWraper {
    padding: 20px 20px;
  }
}

.articleExp ul li {
  margin: 5px 30px;
}

p#expWraper {
  margin-bottom: 5px;
}

.articleName {
	font-weight: bold;
	font-variant: small-caps;
	padding-top: 20px;
  padding-left: 40px;
}

.articleExp {
  padding: 20px 0px 10px 0px;
  border-bottom: 1px black solid;
  border-bottom: var(--articleExp-border-bottom);
  text-align: justify;
}

.articleExp section {
  padding-bottom: 20px;
}

.articleExp a {
  color: #f8f8f7;
}

.articleExp p {
  padding-bottom: 5px;
}

.articleDate {
  float: right;
  padding-right: 40px;
  font-weight: normal;
  font-variant: normal;
  color: #666666;
  color: var(--articleDate-color);
}
  
.boxSettings {
  padding: 10px 15px;
  margin: 10px 0;
  outline: 1px solid #a6b8d7;
  background-color: #F9F9F9;
  background-color: var(--boxSettings-background-color);
}

@media only screen and (min-width: 760px) {
  .boxSettings {
    max-width: 600px;
    margin: 20px auto;
  }
}
  
.boxSettings h2{
  padding-bottom: 10px;
}

/* --- PLÁNOVÁNÍ --- */

.planningWraper {
  padding: 20px 0px;
}

.clWeek {
  display: flex;
  flex-flow: wrap row;
  justify-content: flex-start;
  border-right: 1px solid #a6b8d7;
}

.clDay {
  display: flex;
  flex-flow: nowrap column;
  place-content: space-between start;
  flex: 1; /* 1 0 min-content;  roztahování dnù min-content zatím jen ve firefoxu */
  border: 1px solid #a6b8d7;
/*  min-width: 70px;*/
  min-width: 80px;
  min-height: 80px;
  width: auto;
  border-right: transparent;
  background-color: #262626;  /* dodáno */
  background-color: var(--clDay-background-color);
}

.boxChangeShift .clDay, #frm-rozplanovat .clDay {
  border-right: transparent;
}

.boxStartPlanning .clDay {
  border-right: 1px solid #a6b8d7;
}

.clDate {
  background-color: #EFEFEF;
  background-color: var(--clDate-background-color);
  padding: 2px;
  text-align: center;
}

.clShift {
  cursor: pointer;
  padding: 10px 0px;
  text-align: center;
  user-select: none;
}

@media only screen and (min-width: 760px) {
  .clShift {
    padding: 5px;
  }
}

.clDay input[type="checkbox"]:checked+label  {
  background-color: #4a6da7;
  background-color: #4a6da7cc;
  color: #fdfdfd;
}

.clDay label.clShift:hover {
  background-color: rgba(74, 109, 167, .2);
  background-color: var(--clShift-hover-background-color);
  transition: background-color .25s ease-out;
}

.otherMonth {
  color: #AAAAAA;
  background-color: #ffffff;
  background-color: var(--otherMonth-background-color);
}

/* vlastní checkbox */

input#check-tip {
  position: absolute; 
  left: -9999px;
}

label.koule {
  width: 50px; 
  height: 18px; 
  display: inline-block; 
  border: 1px solid #000; 
  border-radius: 25px; 
  padding: 3px; 
  cursor: pointer;
  background: #ccc;
  background: var(--label-koule-background);
  box-sizing: content-box;
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 5px;  
  user-select: none; -webkit-user-select: none; -moz-user-select: none; 
    -ms-user-select: none; -webkit-touch-callout: none;
}

.koule .status {
  width: 18px; 
  height: 18px; 
  display: inline-block; 
  background: #656565; 
  border-radius: 50%; 
  transition: all .2s;
}

input:checked + label.koule {
  background-color: #e9ffe9;
}

input:checked + label.koule .status {
  background: green; 
  margin-left: 30px;
}

input:focus + label.koule {
  outline: #000 dotted 1px;
}

/* výpis */

#inventoryWraper {
  margin-bottom: 30px;
}

.v_clDay, .r_clDay {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #a6b8d7;
  border-right: transparent;
  width: 100%;
}

@media only screen and (min-width: 840px) {
  .v_clDay {
  width: 80%;
  margin: 0 auto;
  }
}

.v_clFreeDay, .r_clFreeDay {
  min-height: 35px;
  text-align: center;
  color: #999;
  width: 100%;
  border-right: 1px solid #a6b8d7; /*#74706D;*/
}

.v_clDate, .r_clDate {
  width: 100%;
  background-color: #efefef; /*#e8effb;*/
  background-color: var(--v_clDate-background-color);
  border-right: 1px solid #a6b8d7; /*#74706D;*/
  padding: 2px 15px;
  font-weight: bold;
}

.v_clShiftsWrapper, .r_clShiftsWrapper {
  display: flex;
  flex-flow: wrap row;
  width: 100%;
}

.v_clShift, .r_clShift {
  display: flex;
  flex-flow: nowrap column;
  flex: 1;
  border-right: 1px solid #a6b8d7; /*#74706D;*/
  padding-bottom: 5px;
  cursor: default;
}

.boxChangeShift .v_clShift, #frm-rozplanovat .v_clShift {
  padding-bottom: 0px;
}

.v_clTime {
  font-family: monospace;
  padding: 3px;
  background-color: #efefef; /*#e8effb;*/
  background-color: var(--v_clDate-background-color);
  text-align: center;
  white-space: nowrap;
}

.v_clPublisher, .r_clPublisher {
  padding: 3px 3px;
  text-align: center;
  border-top: 1px solid #CCC;
}

.clLoginPublisher {
  font-weight: bold;
  background-color: #ffff8b;
  background-color: var(--clLoginPublisher-background-color);
}

/* zvěstovatelé, přístup */

.table-container {
  display: block;
  margin: 5px auto;
  width: 90%;
  max-width: 800px;
}

.flex-table {
  display: flex;
  flex-flow: row wrap;
  border-left: solid 1px #d9d9d9;
  transition: 0.3s;
  background: #f1f1f1;
  background-color: var(--flex-table-background-color);
}

.flex-table:hover {
  background: #E5E5E5;
  background-color: var(--flex-table-hover-background-color);
  transition: 0.3s;
}

.table-header {
    border-top: solid 1px #1976D2;
    border-left: solid 1px #1976D2;
}

.table-header .flex-row, .table-header .p_flex-row {
    background: #1976D2;
    color: white;
    border-color: #1976D2;
}

.flex-row, .p_flex-row {
  /* width: calc(100% / 4); */
  width: 29%;
  text-align: center;
  padding: 3px 3px;
  border-right: solid 1px #d9d9d9;
  border-bottom: solid 1px #d9d9d9;
  cursor: default;
}

.p_flex-row {
  width: 22%;
}

.table-pristup .first {
    width: 34%;
  }

.table-small-column {
  width: 13%; /* menší sloupec auto */
}

.table-mail {
  font-size: 90%;
  overflow-wrap: break-word;
}

@media only screen and (max-width: 600px) {
  .flex-row {
    /* width: calc(100% / 3); */
    width: 40%;
  }
  .p_flex-row {
    width: calc(100% / 3);
  }
  .table-small-column {
    width: 20%;
  }
  .flex-table .first {
    width: 100%;
  }
  .table-header .first {
    border-bottom: solid 1px #7BBAFF;
  }
  .table-row {
    border-bottom: solid 1px #767676;
    border-bottom: var(--table-row-border-bottom);
  }
}

@media only screen and (max-width: 400px) {
  .flex-table .flex-row, .flex-table .p_flex-row {
    border-bottom: 0;
  }
  /*.flex-row:last-of-type {
    border-bottom: solid 1px #767676;
  } */
  .table-header .flex-row, .table-header .p_flex-row {
    border-bottom: solid 1px #308DE9;
  }
  .flex-row, .p_flex-row {
    width: 100%;
  }
  .flex-table .first {
    width: 100%;
    border-bottom: solid 1px #d9d9d9;
    border-bottom: var(--first-border-bottom);
  }
  .table-header .first {
    border-bottom: solid 1px #7BBAFF;
  }
  .table-mail {
    font-size: 100%;
  }
}

.ok {
  display: inline-block;
  width: 15px;
  height: 7px;
  border: 3px solid green;
  border-top-style: none; 
  border-right-style: none;
  transform: rotate(-45deg);
  vertical-align: super;
}

.no {
  color: red;
  font-weight: bold;
}

.adminBcg {
  background-color: #ff000091;
}

.noBcg {
  background-color: #FDFDFD;
  background-color: var(--noBcg-background-color);
  color: #646464;
  color: var(--noBcg-color);
}

.hiddenSet div.pubSet {
  opacity: 0; 
  max-height: 0;
  overflow: hidden;
  transition: opacity .5s, max-height .8s .2s;
}

.notHiddenSet div.pubSet {
  opacity: 1;
  max-height: 2em;
  transition: opacity .5s .3s, max-height .8s;
}

.p_flex-row button {
  padding: 0px 4px;
  width: 100%;
}

/* TOOLTIP */

.tooltip {
  position: relative;
  display: inline-block;
  background-image: none; /*url(img/btn_tip2_bw.png);*/
  background-repeat: no-repeat;
  background-position: 98% 9%;
  background-size: 10px;
}

@media only screen and (min-width: 760px) {
  .tooltip {
    background-position: 95% center;
    background-size: 14px;
  }
}

.tooltiptext {
  display: none;  /* defaultně vypnuté - zapne se checkboxem */
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 94%;
  background-color: #222; /*#ccc;*/
  background-color: var(--tooltiptext-background-color);
  color: #eee; /*#444;*/
  color: var(--tooltiptext-color);
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 130%;
  left: 50%;
  margin-left: -47%;
  opacity: 0;
  transition: opacity 0.5s;
  transition-delay: 1s;
  transition-property: opacity;
  border: 1px solid #ccc;
  border-color: var(--tooltiptext-border-color);
  font-size: 80%;
}

@media only screen and (min-width: 500px) {
  .tooltip .tooltiptext {  
    font-size: 95%;
  }
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #333 transparent ;
  border-color: var(--tooltiptext-after-border-color);
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* ROZPLANOVAT */

.center {
  text-align: center;
}
  
.boxChangeShift, .boxStartPlanning {
  padding: 10px 15px;
  margin: 10px 0;
  outline: 1px solid #a6b8d7;
  background-color: #F9F9F9;
  background-color: var(--boxStartPlanning-background-color);
}

@media only screen and (min-width: 760px) {
  .boxChangeShift, .boxStartPlanning {
    max-width: 600px;
    margin: 20px auto;
  }
}

.smenaRadio, .smenaCheck {
  max-width: 150px;
}

.clDay input[type="radio"]:checked+label  {
  background-color: #4a6da7;
  background-color: #4a6da7cc;
  color: #fdfdfd;
}

.field_select {
  display: block;
  cursor: pointer;
}

.r_flexWrap per {
  display: flex;
  padding-bottom: 5px;
}

.col-50 {
  width: 100%;
  float: left;
  padding: 5px;
}
@media only screen and (min-width: 600px) {
  .col-50 {
    width: 50%;
  }
}

#publishersWraper {
  user-select: none;
}

/* ZAHAJIT_PLANOVANI */

#zahajitWraper {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}

.boxStartPlanning {
  max-width: 200px;
  margin: 5px auto;
}

#frm-vyjimky .clDay {
  max-width: 150px;
}

.tabBoxCountShifts {
  display: block;
  margin: 5px auto;
  width: 100%;
  max-width: 300px;
  cursor: default;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 94, .6);
  transition: all .2s cubic-bezier(.79,.14,.15,.86);
}

@media only screen and (min-width: 1571px) {
  .tabBoxCountShifts {
    position: fixed;
    top: 93px;
    right: 5px;
    width: 300px;
    height: auto;
    max-height: calc(100vh - 110px);
    overflow: scroll;
    /*position: absolute;*/
  }
  .tabBoxCountShifts:hover {
    transition: all .3s cubic-bezier(.79,.14,.15,.86); /* ease-out, box-shadow .2s; */
  }
 .r_btnUser {
    display: none;
  }
}

@media only screen and (max-width: 1570px) {
  .tabBoxCountShifts {
    position: fixed;
    top: 150px;
    right: 5px;
    width: 45px;
    height: 45px;
    overflow: hidden;
  }
  .r_btnUser {
    width: 45px;
    height: 45px;
    position: sticky;
    top: 0px;
  }
  .tabBoxCountShifts:hover {
    width: 300px;
    height: auto;
    max-height: calc(100vh - 155px);
    overflow: scroll;
    transition: all .3s cubic-bezier(.79,.14,.15,.86); /* ease-out, box-shadow .2s; */
  }
  .tabBoxCountShifts:hover .r_btnUser {
    display: none;
  }
}

@media only screen and (max-width: 760px) {
  .tabBoxCountShifts {
    top: 131px;
  }
  .tabBoxCountShifts:hover {
    max-height: calc(100vh - 136px);
  }
}

.tabBoxPublisher {
  display: flex;
  flex-flow: row wrap;
  border-left: solid 1px #d9d9d9;
  transition: 0.3s;
  background: #f1f1f1;
  background-color: var(--tabBoxPublisher-background-color);
}

.tabBoxPublisher:hover {
    background: #E5E5E5;
    color: #3D3D3D;
    transition: 0.3s;
}

.tabBoxPublisher-header {
    border-top: solid 1px #1976D2;
    border-left: solid 1px #1976D2;
}

.tabBoxPublisher-header .tabRow {
    background: #1976D2;
    color: white;
    border-color: #1976D2;
}

.tabRow {
  width: 60%;
  text-align: center;
  padding: 3px 3px;
  border-right: solid 1px #d9d9d9;
  border-bottom: solid 1px #d9d9d9;
}

.tabConf, .tabSum {
  width: 20%;
}

@media only screen and (max-width: 310px) {
  .tabBoxPublisher {
    border-bottom: solid 1px #767676;
  }
  .tabBoxPublisher-header .tabRow {
    border-bottom: solid 1px #308DE9;
  }
  .tabRow {
   width: 100%;
  }
  .tabBoxPublisher .first {
    width: 100%;
    border-bottom: solid 1px #d9d9d9;
  }
  .tabBoxPublisher-header .first {
    border-bottom: solid 1px #7BBAFF;
  }
}

/* MOJE SLUŽBA */

#myShifts {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}

.myServiceWrapper {
  background-color: #3D3D3D;
  background-color: var(--myServiceWrapper-background-color);
  border-radius: 5px;
  margin: 10px;
  padding: 10px;
  max-width: 480px;
  flex: 1;
}

.myServiceWrapper p {
  color: #FFF;
}

.myServiceDay {
  border: 1px solid #676767;
  border-radius: 10px;
  margin: 10px 0px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .3);
  transition: all .2s ease-out;
}

.myServiceDay:hover {
  border: 1px solid #999;
  box-shadow: 3px 3px 9px rgba(0, 0, 0, .8);
  transition: all .2s ease-out;
}

.myServiceDayToday {
  outline: 2px solid #AA0000;
}

.myServiceTime {
  padding: 3px;
  text-align: center;
  background-color: #2971B9;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.myServicePublisher, .myServicePublisherSmall, .myServicePublisherI {
  padding: 3px 7px;
  padding-left: 10%;
}

.myServicePublisherSmall {
/*  display: block;*/
  display: none;
}

.myServicePublisher {
/*  display: none; */
  display: block;
}

@media only screen and (min-width: 420px) {
  .myServicePublisherSmall {
    display: none;
  }
  .myServicePublisher {
    display: block;
  }


  .myServicePublisher img.icon, .myServicePublisherI img.icon {
    min-width: 15px;
    height: 15px;
  }
}

@media print {
  body, #layoutMain {
    background-color: transparent;
    font: 95% "Calibri", sans-serif;
    border-color: #000000;
  }

  #siteNavigation, #adminNavigation, #siteFeaturesContainer, .button, #siteFooter {
    display: none;
  }
  h1 {
    font-size: 1.6em;
  }
  h2 {
    font-size: 1.4em;
  }
  h2#siteName {
    font-size: 2em;
    text-align: center;
  }
  .clLoginPublisher {
  font-weight: normal;
  background-color: transparent;
  }
  img.icon {
  min-width: 10px;
  height: 10px;
  }
  #inventoryWraper {
    page-break-after: always;
  }
  .v_clDay {
    page-break-inside: avoid;
    border-left: 2px solid #000000;
    border-right: 1px solid #000000;
    border-color: #000000;
  }
  .v_clShift, .r_clShift, .v_clDate, .r_clDate, .v_clFreeDay, .r_clFreeDay  {
    /*border-right: 1px solid #000000;*/
    border-color: #000000;
  }
}

/* OBNOVIT HESLO */
.boxRenew {
  background-color: #F9F9F9;
  background-color: var(--boxStartPlanning-background-color);
  padding: 10px;
  margin-bottom: 10px;
}

/* GDPR */
.gdpr-submit {
  position: absolute;
  background-color: cornflowerblue;
  color: whitesmoke;
  min-width: 200px;
  width: 90vw;
  margin-left: 5%;
  padding: 15px;
  z-index: 3;
}

.gdpr-submit a {
  text-decoration: underline;
  cursor: pointer;
  color: #0000ee;
}

.gdpr-submit-black {
  position: fixed;
  background-color: #00000095;
  width: 100%;
  height: 100vh;
  z-index: 2;
}

.gdpr-submit-cont {
  position: relative;
}