.kris-component {
	background: #ffe3a5;
	color: #3f3e40;
	padding: 10px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  box-shadow: 5px 5px 2px rgba(38, 38, 38, .5);
}

.kris-info {
  flex: 1 1 0;
  padding: 0 10px 20px 0;
  text-align: center;
}

.kris-squares {
  flex: auto;
  text-align: center;
}

.kris-squares-table {
  display: inline-block;
  border-spacing: 1px;
}

.kris-square-row {
  display: table-row;
}

.kris-hints {
  column-count: 6;
  column-width: 110px;
  column-gap: 10px;
}

.kris-visible {
	cursor: pointer;
}

.kris-square,
.kris-result {
	display: table-cell;
	overflow: hidden;
  width: 34px;
  height: 34px;
  min-width: 34px;
  line-height: 34px;
  vertical-align: top;
  position: relative;
  border: 2px solid #231f20;
  background-color: #ffffff;
  margin: 1px;
  text-align: center;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.kris-square {
  cursor: pointer;
}

.kris-headline1 h1 {
  font-family: 'amaticbold', Tahoma, Arial, sans-serif;
  font-size: 50px;
  line-height: 50px;
  min-width: 235px;
	color: #f99d1d;
	padding: 0;
	margin: 0;
}

.kris-headline2 h2 {
  font-family: 'amaticbold', Tahoma, Arial, sans-serif;
  font-size: 35px;
  line-height: 35px;
	color: #fbaf4a;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}

.kris-headline1,
.kris-headline2,
.kris-button,
.kris-results {
  margin: 0 0 10px 0;	
}

.kris-results {
  border-spacing: 1px;
}

.kris-button button {
	font-family: 'amaticbold', Tahoma, Arial, sans-serif;
  font-size: 28px;
  line-height: 28px;
  cursor: pointer;
	color: #ffffff;
  background: #818284;
  border: 0;
  padding: 10px;
  margin: 0;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.kris-button button.je-prihlaseny {
  background: #f15965;
}

.kris-results {
	display: inline-block;
}

.kris-square.kris-highlight {
  background-color: #fbaf4a;
}

.kris-square.kris-solution {
	border: 2px solid #f15965;
}

.kris-square.kris-disabled {
  background: #ffe3a5;
  border: 2px solid #ffe3a5;
}

.kris-square .kris-solution-order {
  position: absolute;
  top: 1px;
  right: 1px;
  font-size: 12px;
  line-height: 12px;
}

.kris-word {
  margin-bottom: 10px;
}

.kris-word.kris-invisible,
.kris-word.kris-invisible.kris-suitable,
.kris-word.kris-invisible.kris-unsuitable {
  opacity: 0.3;
  background-color: transparent;
}

.kris-word.kris-used {
  text-decoration: line-through;
}