/* ================= root  ================= */
body
	{
	font-size: 16px;
        font-family: 'IBM Plex Sans', sans-serif;
	text-align: left;
        background-attachment: scroll;
	background-color: #ededed;
	color: Black;
        font-weight: 400;
        padding: 0px 0px 60px 0px; /* controls !! */
        margin: 0px 0px 0px 0px;
        }
        
.testserver {   background-image: url('style/testserver.svg'); background-repeat: no-repeat;}        
        
img {border: none;}

main {
    position: relative;
}

::-webkit-input-placeholder { /* Edge */ color: #a0c0c0; }
:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #c0c0c0; }
::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: #737373;
    margin-top: 10px;
    border-radius: 5px;
    z-index: 999;
    }
  
.centerFlex {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }

/* ================= UI Blocks ================= */
.uiGroup {
       position: relative;
       padding: 15px 15px 15px 15px;
       border: solid 1px #c9c9c9;
       }
.uiGroup h3 {
        position: absolute;
        top: -8px;
        left: 5px;
        padding: 0px 10px 5px 10px;
        margin: 0px 0px 0px 0px;
        font-size: 0.8em;
        font-weight: bold;
        color: #b8b9ad;
        background-color: #ededed;
       }
.uiGroup hr { border: none; margin: 5px 5px 5px 5px;}

       
.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: #77c2ff;
        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: #77c2ff;}
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+ */
}



.buttonIcon {padding: 0px 5px 0px 5px;margin:0;position: relative;top:-1px;line-height: 32px;}
.buttonIcon i {vertical-align:middle;line-height: 27px;padding: 0px 5px 0px 5px;}
.buttonIcon .icon {font-size: 27px;}


.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: #ca4e3b;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: #4762ef !important;color:white;font-weight: bold;}
.buttonAux2 {background-color: #77c2ff !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: #ca4e3b;
    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: 10px;
	}

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;}

h2,.h2 {font-size: 1.2em; font-weight: bold; color: #4762ef;}


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;}

.ui-selecting, .selecting { background-color: #0080ff; }
.ui-selected, .selected { background-color: #F39814; color: white; }

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

.units {
	font-style : italic;
    font-weight : normal;
	font-size : 80%;
}

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

desc,
.description {
    font-weight : normal;
    font-style : italic;
	color: #737373;
}

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: #d8d99d;
    text-align : center;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-top: 5px; 
    padding-bottom: 5px;
}

.error, 
.exception {
	background-color: #ca4e3b;
	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;
     top: 0px;
     right: 0px;
     height: 100px;
     overflow-y: scroll;
     min-width: 300px;
     background-color: #ededed;
     padding: 10px 10px 10px 10px;
     border: solid 1px #737373;
     z-index: 1000;
     color: black;
}

#ajaxLoading {
    position:absolute;
    top:50px;
    left:0px;
    width: 100%;
    display:flex;
    z-index:1000;
    align-items: center;
    justify-content: center;
    }
#ajaxLoading b {
    display: block;
    font-size: 60px;
    background-color: #ffc9c9;
    padding: 50px 50px 50px 50px;
    border-radius: 20px;
    }