.Clear{*zoom:1}
.Clear:before,.Clear:after{content:"";display:table}
.Clear:after{clear:both}
.Hide{display:none}
.Underline{text-decoration:underline}
img{max-width:100%;height:auto}
*:focus{outline:none;border:0}
*{-webkit-margin-before:0;margin-before:0;-webkit-margin-after:0;margin-after:0;-webkit-margin-start:0;margin-start:0;-webkit-margin-end:0;margin-end:0;-webkit-margin-block-start:0;margin-block-start:0;-webkit-margin-block-end:0;margin-block-end:0;-webkit-padding-start:0;padding-start:0;-webkit-padding-end:0;padding-end:0;-webkit-padding-inline-start:0;padding-inline-start:0;-webkit-padding-inline-end:0;padding-inline-end:0}
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html,body,div,span,applet,object,iframe,blockquote,button,pre,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,input,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;vertical-align:baseline;-webkit-margin-before:0;margin-before:0;-webkit-margin-after:0;margin-after:0;-webkit-margin-start:0;margin-start:0;-webkit-margin-end:0;margin-end:0;-webkit-margin-block-start:0;margin-block-start:0;-webkit-margin-block-end:0;margin-block-end:0;-webkit-padding-start:0;padding-start:0;-webkit-padding-end:0;padding-end:0;-webkit-padding-inline-start:0;padding-inline-start:0;-webkit-padding-inline-end:0;padding-inline-end:0}
h1,h2,h3,h4,h5,h6,p,a{-webkit-margin-before:0;margin-before:0;-webkit-margin-after:0;margin-after:0;-webkit-margin-start:0;margin-start:0;-webkit-margin-end:0;margin-end:0;-webkit-margin-block-start:0;margin-block-start:0;-webkit-margin-block-end:0;margin-block-end:0;-webkit-padding-start:0;padding-start:0;-webkit-padding-end:0;padding-end:0;-webkit-padding-inline-start:0;padding-inline-start:0;-webkit-padding-inline-end:0;padding-inline-end:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{min-height:100vh}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
a{cursor:pointer;outline:none;text-decoration:none}
a:visited{outline:none;text-decoration:none}
a:hover{text-decoration:none}
a:active,a:focus{outline:none;text-decoration:none}
strong{font-weight:700}
em{font-style:italic}

body, td, th, select, option, input, textarea, label {font-size: 0.9rem; font-family: "Trebuchet MS", sans-serif;}

h1 {margin: 1.2rem 0; font-size: 1.2rem;}
h2 {margin: 1.1rem 0; font-size: 1.1rem;}
h3 {margin: 1rem 0; font-size: 1rem;}
h4 {margin: 0.9rem 0; font-size: 0.9rem;}

a:link, a:visited { color: #476cb1;}
a:hover { color: #0A246A; }
hr {
	background-color: #808080;
	border: 0px solid #808080;
	color: #808080;
	height: 0.1rem;
	margin: 1rem 2rem 1rem 2rem;
}
.left { float:left;}
.right {float:right;}
.center {text-align:center;}

/************ TLACITKA *************/
#filterbutton, #submitbutton, a.button {
	color: #fefefe;
	padding: 0.25rem;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	}
a:hover.button, input[type=submit]:hover {
	cursor: pointer;
	}

	/**********  FILTRY  ***********/
#filtr { background-color: #ddd; padding: 0 10rem 0 10rem;  text-align: center; }
#filtr select { border: 0.1rem inset #ddd; background: #eee; }
#filtr #filterbutton { background-color: #999; margin: 1em; }

/********* DIV TABULKY *************/
.table { display: table; margin: 0 auto; }
.row { display: table-row; padding: 1rem; }
.cell { display: table-cell; padding: 0.7rem;}
.even {	background-color: #f8f8f8;}
.odd { background-color: #f0f0f0; }
.middle{  vertical-align: middle; }

/*********** USERS*.PHP *************/
#users input, #users select { border: 0.1rem inset #ddd; background: #fefefe;}
#users a.button { margin-right: 0.2rem;}
#users a.button, #user #submitbutton {background-color: #476cb1 ; }
#users a.button:hover, #user #submitbutton:hover {background-color: #0A246A ;}
#users span.button, #user span.button {background-color: #99dd99 ; color: #fefefe; padding:0.25rem; margin-right: 0.2rem;}
#users .cell div {  padding: 0.25rem; }
#users .name {font-size:1.1em; font-weight: bold;  margin: 0.6rem -0.2rem;}
#users .permissions { display:inline-block  ;}
#user input, #user select { border: 0.1rem inset #ddd; background: #fefefe; width: 10rem; margin: 0 0.5rem; float: right; }
#user { padding: 1rem;}
#user form { display: grid;	padding-bottom: 1rem;}
#user div {	vertical-align: top; width: 30rem; padding: 0.2rem;}
#user div:after { clear: both; margin-bottom: 10rem; }
#user label,span { float: left; }
#user a, #user p { padding: 0.3rem;}



/************ TIMEOUT **************/
.wrapper {
	background-color: lightgray;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
  }
  
  .timeout-triggered {
	color: red;
	font-weight: bold;
  }
  
  #js-popup {
	display: none;
  }
  #js-popup.popup-opened {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10000;
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  .popup {
	width: 550px;
	height: auto;
	padding: 15px 30px;
	background-color: white;
  }
  .popup p {
	text-align: center;
  }
  .popup p.warning {
	font-weight: bold;
	color: red;
  }
  .popup > div {
	width: 100%;
	padding-top: 35px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
  }
  
  fieldset {border: 1px black solid; padding: 0.5em; }
  ul li, ul li ul li {list-style-type: disc; margin-left: 1em;}
  

/***********************************/
/*************  menu  **************/
/***********************************/

#menu {
	/*position: fixed;*/
}

#menu ul.dh {
	display: block;
	list-style-image: none;
	margin: 0;
	/*background-color: #D4D0C8;*/
	background-color: #7c0000;
	border-bottom: 1px solid #808080;
	padding: 1px 5px 2px 5px;
}

#menu ul.test {
	display: block;
	list-style-image: none;
	margin: 0px;
	/*background-color: #7c0000;*/
	background-color: #9E6767;
	border-bottom: 1px solid #808080;
	padding: 1px 5px 2px 5px;
}

#menu ul.local {
	display: block;
	list-style-image: none;
	margin: 0;
	/*background-color: #7c0000;*/
	background-color: #D4D0C8;
	border-bottom: 1px solid #808080;
	padding: 1px 5px 2px 5px;
}

#menu ul.nh {
	display: block;
	list-style-image: none;
	margin: 0;
	/*background-color: #D4D0C8;*/
	background-color: #92C6FC;
	border-bottom: 1px solid #808080;
	padding: 1px 5px 2px 5px;
}

#menu ul.org {
	display: block;
	list-style-image: none;
	margin: 0;
	/*background-color: #D4D0C8;*/
	background-color: #86909C;
	border-bottom: 1px solid #808080;
	padding: 1px 5px 2px 5px;
}

#menu ul.enigma {
	display: block;
	list-style-image: none;
	margin: 0;
	/*background-color: #D4D0C8;*/
	background-color: #06BB54;
	border-bottom: 1px solid #808080;
	padding: 1px 5px 2px 5px;
}        

#menu ul li.unread {
	background-color: #FF0000;
}

#menu ul li {
	display: inline;
}

#menu ul li a {
	text-decoration: none;
	padding: 2px;
	padding-left: 10px;
	padding-right: 10px;
	color: #000000;
	font-size: 0.9em;
	font-weight: bold;
}

#menu ul li a:hover, #menu ul li a.currentlink {
	background-color: #0A246A;
	color: #ffffff;
}

/***********************************/
/*************  filtr  *************/
/***********************************/

#filter {
	margin: 20px;
}

#filter fieldset {
  border: 1px solid #dfb96e;
	background-color: #fff9ae;
}

#filter fieldset legend {
  border: 1px solid #dfb96e;
  background-color: #ffd98e;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 0.9em;
}

#filter input#task {
	width: 400px;
}

#filtersubmit input {

	background-color: #ccc ; 
	color: #000;
	padding: 0.3em;
	position: relative;
	text-decoration: none;
	margin: 0.5em;
}
/***********************************/
/************  drobky  *************/
/***********************************/

#sparklets {
	background-color: #e4e0d8;
	font-size: 0.9em;
	padding: 0.25em 0.5em;
	border-bottom: 1px solid #808080;
}

#sparklets a.unread {
	background-color: #FF0000;
}

/***********************************/
/******** hlavn� formul��  *********/
/***********************************/

#inputform { /* margin: 20px;/**/ }

#inputform.evilform {
	margin: 1px !important;
}

#inputform label {
	display: block;
	text-align: right;
	margin: 0 3px 0 0;
	float: left;
	width: 8.6em;
}

#inputform label#login,
#inputform label#texty,
#inputform label#poweruser,
#inputform label#persnum {
	display: block;
	text-align: right;
	margin: 0 3px 0 0;
	float: left;
	width: 6.8em;
}

#inputform div {
	clear: both;
}

#inputform input, #inputform select {
	border: 1px inset #DFB96E;
}

#inputform input#name, 
#inputform input#surname, 
#inputform input#phone, 
#inputform input#portrait,
#inputform input#symbol, 
#inputform select#side,
#inputform select#power,
#inputform select#spec {
	width: 200px;
}

#inputform select#texty,
#inputform select#poweruser,
#inputform select#kategorie {
	width: 100px;
}

#inputform input#nadpis {
	width: 300px;
}

#inputform input#notitle {
	width: 200px;
}
#inputform select.day {
	border: 1px inset #DFB96E;
	width: 45px !important;
}

#inputform select.month {
	border: 1px inset #DFB96E;
	width: 85px !important;
}

#inputform select.year {
	border: 1px inset #DFB96E;
	width: 65px !important;
}

#inputform input.plus {
	border: 1px inset #DFB96E;
	width: 20px !important;
}

#inputform textarea {
	width: 100%; /* 450px;/**/
	height: 100%;/* 600px;/**/

}

#inputform #submitbutton, .otherform .submitbutton {
	position: absolute;
	overflow:hidden;
	text-indent: -1000px;
	border:none;
	margin:0px;
	padding:0px;
	cursor:pointer;
}
#inputform #submitbutton {
	top: 18pt;
	right: 10px;
	width:48px;
	height:48px;
	background:url('../images/Save-Big.png') no-repeat scroll 0 0 transparent;
} 
/***********************************/
/******** dal��  formul��  *********/
/***********************************/
div.otherform-wrap {width:475px;}
.otherform {
	/* margin: 20px; /**/
	position:relative;
}

.otherform input, .otherform select {
	border: 1px inset #DFB96E;
	/* width: 200px; /**/
}

.otherform .checkbox {
	width: auto;
}

.otherform textarea {
	width: 450px;
	height: 300px;
}
.otherform .submitbutton {
	position: absolute;
	right:0px;
	width:24px;
	height:24px;
	background:url('../images/Save-small.png') no-repeat scroll 0 0 transparent;
}
.otherform .editbutton {
	display: inline-block;
    height: 16px;
    width: 16px;
    background:url('../images/edit.png')  no-repeat scroll 0 0 transparent;
}
#new-file .submitbutton, #change-groups .submitbutton {
	bottom:0px;
}
#new-note .submitbutton {
	top:0px;
}
/***********************************/
/***********  aktuality  ***********/
/***********************************/

.news_div {
	margin: 20px;
}

.news_div p {
	margin-bottom: 0;
}

.system_news, .game_news {
	padding: 5px;
	border: 1px solid #476cb1;
}

.game_news {
  border: 1px solid #e86f2c;
}

.unread_record {
  background-color: #ffff33;
}


.system_news h2, .game_news h2 {
	margin-top: 0;
	color: #476cb1;
	font-size: 1.1em;
}

.game_news h2 {
	color: #e86f2c;
}

.news_head h2 {
	margin: 0;
}

.news_head span {
	font-size: 0.9em;
}

.news_head p {
	margin: 0;
	margin-bottom: 1em;
}

/***********************************/
/*************  obsah  *************/
/***********************************/

#obsah {
	position: relative;
	margin: 0px;
	padding:20px;
	width:980px;
}
#obsah .top {
	font-size: 0.8em;
}
#obsah h1 {margin:0px;}
#obsah h2 {font-size:1.1em; margin:0.3em 0;}
#obsah h3 {font-size:1em; margin:1em 0 0.2em;}
#obsah h4 {font-size:0.9em; margin:0.1em 0;}

#obsah fieldset>p {margin-top:0px;}

#obsah p#top-text {margin-top:0px; padding-right:68px;}

#info {padding:0 10px;}
#info h3, #info p{display:inline; margin:0.2em 0;}

#obsah fieldset {position: relative; margin:0;}
#obsah fieldset.symbol {position: relative; margin:0; }
#obsah legend h2 {display:inline-block;}
#obsah .field-text {margin:0.2em; padding:0;}
#obsah .field-text>p {margin: 0.8em 0 0 0;}
#obsah .field-text>p:first-child {margin: 0 0 0.8em 0;}

ul#pripady {margin:0.1em 0; padding-left: 2em;}

#poznamky {margin:0.2em; padding:0;}
#poznamky .poznamka {position: relative;}
#poznamky .poznamka>div {margin:0.3em 0;}

div > .poznamka-edit-buttons {position:absolute;right:0px;top:0px;}
.poznamka-edit-buttons a {display:inline-block;width:16px;height:16px;margin:3px;overflow:hidden;vertical-align:bottom;}
.poznamka-edit-buttons a span.button-text {display:none;}
.poznamka-edit-buttons a.new {background-image:url('../images/document-new.png')}
.poznamka-edit-buttons a.edit {background-image:url('../images/edit.png')}
.poznamka-edit-buttons a.delete {background-image:url('../images/delete.png')}
.poznamka-edit-buttons a.connect {background-image:url('../images/connect.png')}
/* .connect je nesystematicky, ale pro napravu je treba procistit celou strukturu stylu ve vsech sablonach /**/

.info-delete-symbol {position:absolute;right:13.3em;top:10.5em;}
.info-delete-symbol a {display:inline-block;width:16px;height:16px;margin:3px;overflow:hidden;vertical-align:bottom;}
.info-delete-symbol a span.button-text {display:none;}
.info-delete-symbol a.delete {background-image:url('../images/delete.png')}

#portraitimg {
	position: absolute;
	right: 1.2em;
	width: 104px;
	height: 134px;
	border: 1px solid #808080;
	padding: 1px;
	margin: 0 0 20px 20px;
}
#portraitimg.noname {
	text-indent:-1000px;
	overflow:hidden;
	background:url('../images/noname.png') no-repeat scroll center transparent;
}

#symbolimg {
	position: absolute;
	right: 10.2em;
	width: 104px;
	height: 104px;
	border: 1px solid #808080;
	padding: 1px;
	margin: 0 0 20px 20px;
}
#symbolimg.noname {
	text-indent:-1000px;
	overflow:hidden;
	background:url('../images/nosymbol.png') no-repeat scroll center transparent;
}

#ssymbolimg {
	position: absolute;
	right: 1.2em;
	width: 104px;
	height: 104px;
	border: 1px solid #808080;
	padding: 1px;
	margin: 0 0 20px 20px;
}
#ssymbolimg.noname {
	text-indent:-1000px;
	overflow:hidden;
	background:url('../images/nosymbol.png') no-repeat scroll center transparent;
}

/***********************************/
/***********  dashboard  ***********/
/***********************************/

#dashboard {
	position: relative;
	margin: 0px 5px 0px 5px;
	padding:20px;

}
#dashboard .top {
	font-size: 0.9em;
}
#dashboard h1 {margin:0px;}
#dashboard h2 {font-size:1.1em; margin:0.3em 0;}
#dashboard h3 {font-size:1em; margin:1em 0 0.2em;}
#dashboard h4 {font-size:0.9em; margin:0.1em 0;}

#dashboard fieldset>p {margin-top:0px;}

#dashboard p#top-text {margin-top:0px; padding-right:68px;}

#dashboard fieldset {
	position: relative; 
	margin:0;
	background:url('../images/corkbg.png') repeat;
	background-color: #fff9ae;
	}
	
#dashboard legend h2 {display:inline-block;}
#dashboard .field-text {margin:0.2em; padding:0;}
#dashboard .field-text>p {margin: 0.8em 0 0 0;}
#dashboard .field-text>p:first-child {margin: 0 0 0.8em 0;}

#dashboard table {
	width: 100%;
	border: none;
}

#dashboard td {
  border: none;
  width: 50%;
  vertical-align: top;
}

#dashboard tr:hover {
	background-color: inherit;
}
/***********************************/
/************  tabulky  ************/
/***********************************/

table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid black;
}

th {
	border: 1px solid #808080;
	background-color: #e4e0d8;
}

td {
  border: 1px solid #d0d0d0;
  padding: 0.5em;
}

tr.even {
  background-color: #f8f8f8;
}

tr.odd {
  background-color: #f0f0f0;
}

tr:hover {
	background-color: #fff9ae;
}

tr.solved a {
	color: #a0a0a0;
}

table.filter {
	border: 0px;
	width: 50%;
}

tr.filter {
  border: 0px;
}

td.filter {
  border: 0px;
}

#in-form-table {
	padding: 20px;
	position: relative;
}
#in-form-table #button-floating-uloz {
	top: 20px;
	right: -5px;
}
/***********************************/
/************ symboly  *************/
/***********************************/

#symbols table {
	width: 100%;
	border-collapse: collapse;
	border: none;
}

#symbols td {
  border: none;
}

#symbols tr:hover {
	background-color: inherit;
}

/***********************************/
/********** obecn� prvky   *********/
/***********************************/
div.clear {width:100%;height:1px !important;margin:0px !important;padding:0px !important;clear:both !important;}
.float-right{float:right;}
.float-{float:left;}

/***********************************/
/********** autocomplete   *********/
/***********************************/
/*.ui-menu .ui-menu-item a{
    background:red !important;
    height:20px !important;
    font-size:16px !important;
}*/

.ui-helper-hidden-accessible { position: absolute; left: -9999px; }

.ui-autocomplete {
  position: absolute;
  top: 100%;
  left: 30;
  z-index: 1000;
  float: left;
  display: none;
  min-width: 160px;
  _width: 160px;
  padding: 4px 0;
  margin: 2px 0 0 0;
  list-style: none;
  background-color: #ffffff;
  border-color: #ccc;
  border-color: rgba(0, 0, 0, 0.2);
  border-style: solid;
  border-width: 1px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  *border-right-width: 2px;
  *border-bottom-width: 2px;

  .ui-menu-item > a.ui-corner-all {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #555555;
    white-space: nowrap;

    &.ui-state-hover, &.ui-state-active {
      color: #ffffff;
      text-decoration: none;
      background-color: #0088cc;
      border-radius: 0px;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      background-image: none;
    }
  }
}