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

:root {
    /*color.name.definition comments are tags for colorchecker.php*/
    --colorBackground:#ededed; /*color name definition*/
    --colorTheme:#d8d99d; /*color name definition*/
    --colorThemeEmphasise:#2772af; /*color name definition*/
    --colorIconButton:#585868; /*color name definition*/
    --colorEditorButton:#ca4e3b; /*color name definition*/
    --colorControls:#737373; /*color name definition*/
    --colorSelected:#ff9060; /*color name definition*/
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: normal;
  src: url('/design/Poppins-Regular.ttf');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: normal;
  src: url('/design/Poppins-Italic.ttf');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: bold;
  src: url('/design/Poppins-Bold.ttf');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: bold;
  src: url('/design/Poppins-BoldItalic.ttf');
}

/* ================= root  ================= */
body
	{
	font-size: 16px;
        font-family: 'Poppins', sans-serif;
	text-align: left;
        background-attachment: scroll;
	background-color: var(--colorBackground);
	color: Black;
        padding: 0px 0px 60px 0px; /* controls !! */
        margin: 80px 0px 0px 0px;
        }
        
       
img {border: none;}

main {
    position: relative;
}

::-webkit-input-placeholder { /* Edge */ color: #a0a0c0; }
::placeholder {  color: #a0a0c0; }    

  
.controls {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    padding: 10px 0px 10px 0px;
    background-color: var(--colorControls);
    margin-top: 10px;
    border-radius: 5px;
    z-index: 999;
    }
  
.centerFlex {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }

/* ================= UI Blocks ================= */
       
.panel {
       background-color: #ffffff;
       border-radius: 10px;
       }

.panel h3 {
        padding: 5px 10px 5px 20px;
        margin: 0px 0px 0px 0px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background-color: #c39864;
        font-size: 1em;
        color: white;
       }

.panel .content  {
       padding: 15px 15px 15px 15px;
       }
    
    
    
.grid2 { display:grid;  grid-template-columns: auto auto; align-items: stretch; justify-content: stretch; grid-row-gap:20px; grid-column-gap:20px; }
.grid3 { display:grid;  grid-template-columns: auto auto auto; align-items: stretch; justify-content: stretch; grid-row-gap:20px; grid-column-gap:20px; }
.grid4 { display:grid;  grid-template-columns: auto auto auto auto; align-items: stretch; justify-content: stretch; grid-row-gap:20px; grid-column-gap:20px; }

.gridspan2 { grid-column: span 2;}
.gridspan3 { grid-column: span 3;}

.flexColumn { display: flex; flex-direction: column; align-items: stretch;}
.flexRow { display: flex; flex-direction: row; align-items: stretch;}
.flexRow .caption { text-align: right;}

.macros {display: flex;justify-content: space-between;}
.macros button {flex-grow: 1;}


.capvalGrid {
    display:grid;
    grid-template-columns: 50% 50%;
    width: 100%;
    grid-row-gap:5px;
    grid-column-gap:10px;
    align-items: center;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    }
    
    
.capvalGrid .caption { justify-self: end;}    

.capvalGrid hr,
.grid2 hr,
.grid3 hr,
.grid4 hr
{ grid-column:1/-1;}    

.stretchInput input,
.stretchInput select
            { width: 100%;}

/* ================= forms ================= */

form
 {
    width: inherit;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

table  { padding: 0px 0px 0px 0px;margin:  0px 0px 0px 0px; border: solid 0px grey; border-spacing: 0px;	}
th,td   { padding: 5px 5px 5px 5px;margin:  0px 0px 0px 0px; border-left: solid 3px #f0f0f0;border-bottom: solid 3px #f0f0f0;}
th { background-color: #c39864;}
td { background-color: white;}

input, select, button, .lookAsInput
{
    background-color: #e2e2e2;
    border: solid 1px #d9d9d9;
    border-radius: 5px;
    padding: 6px 12px 5px 12px;
    font-size: 16px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}



.referenceWithEditorLink { display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; }
.referenceWithEditorLink select,
.referenceWithEditorLink div { width: 100%;}
.referenceWithEditorLink button {padding: 0px 5px 0px 5px;margin:0px 0px 0px 5px;line-height: 33px;border: none;position: relative;top:-1px; }
.referenceWithEditorLink button i {vertical-align:middle;line-height: 20px;padding: 0px 0px 0px 0px;position: relative;top:-2px}
.referenceWithEditorLink button .icon {font-size: 27px;  content: "edit"; }




.buttonOK, input[type="submit"]
        {background-color: var(--colorEditorButton);color: white;font-weight: bold;}
        
input[type="range"] {vertical-align: middle;position:relative;top:2px;}

.buttonDo {background-color: #37af52 !important;color:white;font-weight: bold;}
.buttonAux {background-color: #c39864 !important;color:white;font-weight: bold;}
.buttonAux2 {background-color: #c39864 !important;color:white;font-weight: bold;}
.buttonCancel {background-color: #d8d99d !important;}
.buttonMacro {background-color: #737373 !important;color:white;}
.buttonDelete {background-color: #ca4e3b !important;color: white;font-weight: bold;}

/* CHECKBOX - (upraveno) https://www.w3schools.com/howto/howto_css_custom_checkbox.asp */
/* markup: <label class="checkbox"><input type="checkbox" checked="checked"><span class="checkmark"></span>&nbsp;</label> */
.checkbox { display: block; position: relative;  padding-left: 35px;  margin-bottom: 5px;  cursor: pointer;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none; line-height: 32px}
.checkbox input {  position: absolute;  opacity: 0;  cursor: pointer;  height: 0;  width: 0; }
.checkbox input:checked ~ .checkmark {  background-color: #F39814;}
.checkmark {  position: absolute;  top: 0;  left: 0;  height: 30px;  width: 30px; background-color: #e2e2e2; border: solid 1px #c9c9c9; border-radius: 5px;}
.checkmark:after {content: ""; position: absolute; }
.checkbox input:checked ~ .checkmark:after {}
.checkbox .checkmark:after {  left: 10px;  top: 6px;  width: 7px;  height: 12px;  border: solid white;  border-width: 0 3px 3px 0;  -webkit-transform: rotate(45deg);  -ms-transform: rotate(45deg);  transform: rotate(45deg);}    

.starbox { color:#c9c9c9; display: block; position: relative;  padding-left: 35px;  margin-bottom: 5px;  cursor: pointer;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none; line-height: 32px}
.starbox input {  position: absolute;  opacity: 0;  cursor: pointer;  height: 0;  width: 0; }
.starbox input:checked ~ .star {  color: #F39814;}
.star {  position: absolute;  top: 0;  left: 0;  height: 30px;  width: 30px;}


/* ================= commons ================= */

.hi
{
    background-color: var(--colorEditorButton);
    color: white;
}

.clickable {cursor: pointer;}

.newrecordplus { position:relative;} /* trochu pakárna s material-icons ~ zarovnání se search ;) */
.newrecordplus .icon {
    position: relative;
    top: 14px;
    font-size: 42px;
    }

.clear {clear:both;}


p {
	padding: 0 0 0 0;
	margin-top: 0px;
	margin-bottom: 5px !important; /*quill!*/
	}

a {
	color: #909000;
	text-decoration:none;
	}
      
a:hover {
	color: #feca40;
	text-decoration:none;
	}

.hoverbg:hover {background-color: #e3b864;}
.hovercolor:hover {color: #f39814;}
        
        
.center  {text-align:center;}
.left  {text-align:left;}
.right  {text-align:right;}




hr
{
      border: solid 1px #67b2ef;
  	margin-bottom : 10px;
	margin-top: 10px;
	margin-right: 0px;
	margin-left: 0px;
}


.nav {
    color: grey;
}

.hide {display:none;}

.bigicon{font-size : 32px;vertical-align: top;}
.smallicon{font-size : 16px;vertical-align: top;}

.small	{font-size : .7em;}
.big	{font-size : 1.3em;}
.xxl	{font-size : 2em;}
.caption {color: #2742af;}
.value {
	font-weight : bold;
        color: black;
    }

cite {font-size : 2em;font-weight: bold;}
    
    
    
.units {
	font-style : italic;
    font-weight : normal;
	font-size : 80%;
}

.currency {
    font-weight: bold;
    color: #860000;
}


.pagedescription,
.description {
    font-weight : normal;
    font-style : italic;
	color: var(--colorControls);
}

time { /* čas */
    color:#2742af;
    }
    
time i { /* datum */
    font-style: normal;
    color: #860000;
    }

.fix { position: relative;}

.nowrap {white-space: nowrap;}

.pad { margin-bottom: 10px; margin-top: 10px;}

.topPad { margin: 20px 0px 0px 0px;}
.bottomPad { margin: 0px 0px 20px 0px;}


.noselecttext {
  -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, Opera and Firefox */
        }
    
/* ------------ GUI messages ----------- */

.message {
    font-weight : bold;
    color : black;
    background-color: var(--colorTheme);
    text-align : center;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-top: 5px; 
    padding-bottom: 5px;
}

.error, 
.exception {
	background-color: var(--colorEditorButton);
	font-weight : bold;
	color : Yellow;
	text-align : center;
	padding-top: 5px; 
	padding-bottom: 5px;
        margin: 20px 0px 20px 0px;
}
.exception .file { color: black; font-size: .8em;font-weight: normal;}

/* -------------- AJAX ----------------- */
#debug {
     display: none;
     position:fixed;
     bottom: 0px;
     right: 0px;
     width: 20vw;
     height: 500px;
     overflow-y: scroll;
     background-color: var(--colorBackground);
     padding: 10px 10px 10px 10px;
     border: solid 1px var(--colorControls);
     z-index: 1000;
     color: black;
}

#ajaxLoading {
    position:fixed;
    top:0px;
    left:0px;
    width: 70px;
    height: 70px;
    display: none;
    background-color: var(--colorBackground);
    color: black;
    z-index: 1010;
    justify-content: center;
    align-items: center;
    }


/* ================= page ================= */
#bench {
        display: none;
        position: relative;
        background-color: #c39864;
        color: white;
        height: 20px;
        margin-left: 80px;
        margin-right: 47px;
        }
        
        
#burger {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 70px;
        height: 70px;
        z-index: 1000;
        background-color: var(--colorBackground);
        padding: 10px 10px 10px 10px;
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

        
#warning {
        position: absolute;
        bottom: 5px;
        left: 20px;
        color: yellow;
        font-size: 20px;
        font-weight: bold;
        }
        
#logout {
        position: absolute;
        top: 0px;
        right: 0px;
        height: 32px;
        width: 45px;
        background-color: #c39864;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        }
        
#userinfo {
        position: absolute;
        right: 15px;
        bottom: 3px;
        }

#menu {
        position:fixed;
        top: 70px;
        left: 0px;
        background-color: #d9d9d9;
        display: none;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        padding: 10px 10px 10px 0px;
        z-index: 2000;
        }
#menu a {
                display: block;
                color: white;
                margin: 10px 20px 10px 20px;
                background-color: var(--colorControls);
                padding: 6px 10px 6px 30px;
                min-width: 200px;
                border-radius: 5px;
                font-size: 1em;
                font-weight: bold;
                cursor: pointer;
            }

#menu a:hover {
                background-color: #67b2EF;
            }
            
#menu hr { border-color: #808080;}            
            
.pagePad { padding: 15px 15px 15px 15px;}            

#tooltip {
    position: absolute;
    background-color: transparent;
    color: grey;
    font-size: 1em;
    text-align: center;
    top: .2em;
    right: 3em;
    z-index: 2000;    
   
}

.titlebar {
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: var(--colorTheme);
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100vw;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 70px;
    z-index: 100;
    }

.titlebar nav a:hover { background-color: #F39814; }
   
.titlebar h1 {
    display: inline-block;
    font-size: 1.6em;
    font-weight: bold;  
    margin: 0px 20px 0px 90px;
    color: var(--colorIconButton);
    padding: 5px 0px 0px 0px;
}

.titlebar .pagedescription {
    position: relative;
    top: -0.3em;
    color: #c8c97d;
    font-size: 1em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--colorControls);
    margin: -0px 20px 0px 90px;
}

.titlebar sup {
    font-size: .6em;
    color: #a0a0a0;
    }
        
.titlebar nav { 
        display: inline-grid;
        grid-template-columns: auto auto auto;
        margin: 0px 0px 0px 70px;
        }        
        
.titlebar nav a
        {
        display: inline-block;
        padding: 0px 10px 0px 5px;
        border-bottom-right-radius: 15px;
        border-top-right-radius: 15px;
        background-color: #a0a0a0;
        color: #ffffff;
        height: 30px;
        line-height: 30px;
        font-weight: bold;
        z-index: 20;
        }        
        
.titlebar nav .level1 { 
        margin-left: -15px;
        padding-left: 20px;
        background-color: #c0c0c0;
        z-index: 19;
        }

.titlebar nav .level2 { 
        margin-left: -15px;
        padding-left: 20px;
        background-color: #d0d0d0;
        z-index: 18;
        }



.stack { 
    position:relative;
    list-style: none;
    margin: 0;
    padding: 0;
    }
.stack li { 
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    margin: 4px 0px 4px 0px;
    padding: 0px 0px 0px 20px;
    background-color: var(--colorTheme);
    font-size: 1.1em;
    color: var(--colorControls);
    height: 37px;
    }
.stack .jump {
    display: flex;
    align-items: center;
    justify-content:center;
    height: 37px;
    width: 40px;
    background-color: #b8b9ad;
}

    
.entryInfo {
    font-size: 0.9em;
    color: #808080;
    text-align: right;
    margin-top: 10px; 
    }    
    
.entryInfo .IDs {
    font-size: 0.7em;
    color: #808080;
    margin-top: 3px; 
    }    
    
/* --------- pages layout ------- */
.fullscreenLayout {
    margin-top: 0px;
    width: 100vw;
    }

.simpleLayout {
    position: relative;
    max-width: 1280px;
    margin: 0px auto 20px auto;
    padding-left: 20px;
    padding-right: 20px;
    }
 
.simpleLayout hr {width: 100%;}
.simpleLayout desc {max-width: 20%;text-align: right;}

.simpleLayout .paneltop {
    border-radius: 0px !important;
    margin-top: 0px !important;
    }
.simpleLayout .panelbottom {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    }
    
@media screen and (max-width: 1280px) {
    .pagedescription {
        display: inline-block;
        margin-left: 0px !important;
    }
    
  }


@media screen and (max-width: 760px) {
.simpleLayout .controls {
    position: fixed;
    bottom: 0px;
    left: 0px;
    border-radius: 0px;
    margin-bottom: 0px;
    }
    
#userinfo, .launchbar { display: none;}    

    
  }


  

@media screen and (max-width: 650px) {
.simpleLayout {
    padding-left: 0px;
    padding-right: 0px;
    }
}
      
#bubble {
    position: fixed;
    display: none;
    left: 0vw;
    top: 0px;
    height: 50px;   
    width: 100vw;
    z-index: 1200;
    text-align: center;
    }
#bubble span {
    font-size: 2em;
    background-color: var(--colorEditorButton);
    padding: 0px 2em 0px 2em;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    color: white;
    font-weight: bold;
    }
    
#toolbar {
    position: absolute;
    display: flex;
    justify-content: center;
    bottom: 0px;
    width: 100vw;
    }
#toolbar i { 
    padding: 2px .5em 2px .5em;
    margin-left: .1em;
    margin-right: .1em;
    font-size: 30px;
    background-color: var(--colorIconButton);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: white;
     user-select: none;
    }
    
#toolbar i:hover {
    background-color: #a8a97d;
    color: black;
    cursor: pointer;
    }
    
#toolbar .active { background-color: var(--colorSelected);}
#toolbar .active:hover { color: var(--colorSelected);}
    
#blockers {
    position: absolute;
    display: flex;
    justify-content: center;
    gap: .5em;
    width: 100vw;
    right: 0px;
    top: -30px;
    cursor: pointer;
    }    
#blockers span {
    background-color: #a00000;
    color: white;
    display: inline-block;
    padding: .1em .1em .1em .1em;
    border-radius: .8em;
    }