body {
	background-image: linear-gradient(to right, rgba(230,230,240,1), rgba(220,220,220,1));
}

.atiki_dict {
  font-family: serif;
  font-size: x-large;
}

.atiki_dict .lemma {
  font-weight: bold;
}

.atiki_dict .prefix {
  font-weight: lighter;
  font-style: oblique;
}

.atiki_dict .note::before {
  content: '('
}

.atiki_dict .note::after {
  content: ')'
}

.atiki_dict .scientific {
  font-style: italic;
  font-weight: lighter;
}

.atiki_dict .scientific::before {
  content: '['
}

.atiki_dict .scientific::after {
  content: ']'
}

.atiki_dict .gender {
  padding: 0 7px;
  background-color: gray;
  font-style: italic;
  color: white;
  white-space: nowrap;
}

.atiki_dict .phonetic {
  font-weight: lighter;
  white-space: nowrap;
}

.atiki_dict .phonetic::before {
  content: '/'
}

.atiki_dict .phonetic::after {
  content: '/'
}

.atiki_dict .class {
  padding: 0 7px;
  font-style: italic;
  color: white;
  white-space: nowrap;
}

.atiki_dict .tag {
  font-size: 14px;
  vertical-align: middle;
  padding: 0 10px;
}

.atiki_dict .loanword {
  font-style: italic;
  white-space: nowrap;
}

.atiki_dict .loanword::before {
  content: '→ '
}

.atiki_dict .remark {
  padding: 0 7px;
  background-color: lightgray;
  font-style: italic;
  color: #333;
  white-space: nowrap;
}

.atiki_dict .language {
  margin: 0;
	margin-right: 5px;
	height: 18px;
}

/**********
  layout
**********/

.atiki_tenth {
  width: 10%;
  float: left;
}

.atiki_fifth {
  width: 20%;
  float: left;
}

.atiki-item-preview {
  width: 100%;
  padding: 10px 20px;
  background-color: #FFF;
}

.atiki-item-editor {
	overflow: visible;
}

.atiki_center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

@media (max-width:600px){
  .atiki_center {margin-top: 100px;}
}


/*****************
  loading status
*****************/

.atiki_load_spinner {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 5999;
  background-color: rgba(255,255,255,.7);
  font-size:48px;
}

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

.atiki_menu_bg {
  /*background-image: linear-gradient(to right, rgba(100,130,170,1), rgba(90,90,90,1));*/
	background-color: #666666;
  color: white;
	font-size: 16px;
}

.atiki_editor_menu {
	background-color: #FFF;
  color: #666;
	font-size: 16px;
}

.atiki_menu_lang {
  height: 22px;
}

.atiki_menu_search input {
  background: none;
  outline: none;
  border: none !important;
  padding-left: 50px;
  /*color: white;*/
}

.atiki_menu_search:before {
  content: "\f002";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  /*color: white;*/
  margin-left: 15px;
  margin-top: 8px;
}

.atiki_add_input input {
  background: none;
  outline: none;
  border: none !important;
  padding-left: 50px;
}

.atiki_add_input:before {
  content: "+";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  margin-left: 20px;
  margin-top: 8px;
}

/***********
  dropdown
************/

.atiki_suggestion_list {
		color: black;
		display: none;
		position: absolute;
		width: 100%;
		top: 24px;
		left: 0;
		z-index: 2;
		padding: 0;
}

.atiki_suggestion_list li {
	padding: 10px 20px;
	cursor: pointer;
	list-style-type: none;
}

.atiki_suggestion_list li:hover, .atiki_suggestion_list .active_suggestion {
	background-color: #F5F5F5 !important;
}

.atiki_suggestion_list li:nth-child(odd) {
	background-color: #CCC;
}

.atiki_suggestion_list li:nth-child(even) {
	background-color: #DDD;
}

/******
  form
*******/

.atiki_form {
  display: table;
  padding-bottom: 20px;
  width: 100%;
}

.atiki_form input, .atiki_form select, .atiki_form textarea {
  background-color: #fff;
  border: 0;
  height: 40px;
}

.atiki_form label {
  clear: both;
  display: block;
  font-size: 14px;
  margin-top: 8px;
}

.atiki_form select {
  padding-left: 5px;
}

.atiki_textarea {
  width: 100%;
  height: 70px !important;
  resize: none;
  padding: 10px;
}

/******************
  option selectors
*******************/

.atiki_option {
  opacity: 0.75;
  filter: grayscale(100%);
  display: inline-block;
  height: 40px;
  width: 100%;
  margin-right: 5px;
  font-size: 16px;
  /*font-weight: bold;*/
  text-align: center;
  cursor: pointer;
  background-color: #eaa;
  color: #eee;
}

.atiki_option * {
  vertical-align: bottom;
  line-height: .6 !important;
}

.atiki_option_active {
  filter: grayscale(0%);
  opacity: 1;
}

.atiki_option:hover, .atiki_option:focus {
  opacity: 1;
}

/*********************
  language selectors
**********************/

.atiki_language {
  filter: grayscale(100%);
  opacity: 0.25;
  max-height: 40px;
  cursor: pointer;
}

.atiki_language_small {
  filter: grayscale(100%);
  opacity: 0.25;
  width: 40px;
  cursor: pointer;
}

.atiki_language_active {
  filter: grayscale(0%);
  opacity: 1;
}

.atiki_language:hover, .atiki_language:focus, .atiki_language_small:hover, .atiki_language_small:focus {
  opacity: 1;
}

/******************
  class selectors
*******************/

.atiki_class {
  opacity: 0.25;
  filter: grayscale(100%);
  height: 40px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  background-color: #45c;
  color: #eee;
  margin-right: 1px;
  margin-bottom: 1px;
}

.atiki_class * {
  vertical-align: bottom;
  line-height: 1;
}

.atiki_class_active {
  filter: grayscale(0%);
  opacity: 1;
}

.atiki_class:hover, .atiki_class:focus {
  opacity: 1;
}

.atiki_person_1ps {background-color: #660033}
.atiki_person_1pp {background-color: #b30059}
.atiki_person_2ps {background-color: #660022}
.atiki_person_2pp {background-color: #b3003b}
.atiki_person_3ps {background-color: red}
.atiki_person_3pp {background-color: red}
.atiki_class_1 {background-color: red}
.atiki_class_2 {background-color: darkblue}
.atiki_class_3 {background-color: darkgreen}
.atiki_class_4 {background-color: darkorange}
.atiki_class_5 {background-color: darkcyan}
.atiki_class_6 {background-color: darkviolet}
.atiki_class_7 {background-color: deeppink}
.atiki_class_8 {background-color: #555577}
.atiki_class_9 {background-color: black}
.atiki_class_10 {background-color: brown}

/******
  tags
*******/

.atiki_editor_tag {
  filter: grayscale(100%);
  opacity: .25;
  background-color: #45c;
  color: #eee;
  height: 40px;
  font-size: 21px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  margin-bottom: 1px;
  margin-right: 1px;
}

.atiki_editor_tag * {
  vertical-align: bottom;
  line-height: 1;
}

.atiki_editor_tag_active {
  filter: grayscale(0%);
  opacity: 1;
}

.atiki_editor_tag:hover, .atiki_editor_tag:focus {
  opacity: 1;
}

/***************
  translations
****************/

.atiki_translation_edit {
	background-color: #FFF;
	padding: 5px 15px;
	cursor: grab;
	margin-bottom: 1px;
}

.atiki_translation_button {
	filter: grayscale(100%);
	opacity: .25;
	padding: 0;
	margin-right: 20px;
	margin-bottom: 10px;
	cursor: pointer;
	float: left;
}

.atiki_translation_button:hover {
	filter: grayscale(0%);
	opacity: 1;
}

.atiki_active_translation_button {
	padding: 0;
	margin-right: 20px;
	margin-bottom: 10px;
	float: left;
}

.atiki_translation_button img, .atiki_active_translation_button img {
	height: 28px;
}

/***********
  massages
************/

.atiki_message_container {
  z-index: 6000;
  position: fixed;
  top: 50px;
  right: 10px;

  width: 500px;
}

.atiki_message {
  margin: 20px;
  padding: 20px;
}

.atiki_question {
  width: 400px;
}