body {
	font-family: "Arial";
	font-size: 16px;
}

.list_name_form, .login_form, .select_language_form, .main_form {
	width: 300px;
}

.list_name_form input[type=text], 
.login_form input[type=text], 
.main_form input[type=text],
.login_form input[type=password] {
	width: 100%;
	height: 33px;
	font-size: 16px;
	box-sizing: border-box;
}

.login-form-link {
	text-decoration: none;
	margin-top: 15px;
	margin-bottom: 15px;
	display: inline-block;
}

a:hover {
  text-decoration: none;
}

footer {
	width: 100%;
	background-color: #387A1E;
	color: white;
}

footer a{
	color: white;
}

.footer {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
}

.main, header {
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
}

.main {
	background-color: #EAEAEA;
	overflow: hidden;
}

.logo {
	width: 200px;
}

nav ul {
    list-style-type: none;
	margin: 0;
	padding: 0;
}

nav a {
	text-decoration: none;
	background-color: #387A1E;
	color: white;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	display: inline-block;
	width: 100%;
	margin-top: 3px;
	margin-bottom: 3px;
}

nav a:hover, .image_button:hover {
	background-color: #267F00;
}


a {
	color: black;
}

h1 {
	font-size: 18px;
	font-weight: normal;
	margin: 0px;
	padding-bottom: 5px;
	padding-top: 0px;
}

h2 {
	font-size: 17px;
	font-weight: bold;
}

h1 span {
	font-style: italic;
	font-weight: bold;
}

.ipa, .ipa:hover {
	text-decoration: none;
}

.language_button {
	background-color: #387A1E;
	border: none;
	color: white;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 7px;
	padding-bottom: 7px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	border-radius: 5px;
}

.image_button {
	display: block;
	margin-top: 10px;
	margin-bottom: 4px;
	margin-right: 4px;
	border-radius: 10px;
	width: 43px;
	height: 33px;
	text-align: center;
	float: left;
	border: 0px;
	cursor: pointer;
}

.image_button img {
	margin-top: 2px;
}

.getstarted_button {
	text-align: center;
}

header {
	text-align: center;
}

.intro-page {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 20px;
	padding-right: 20px;
}

.intro {
	text-align: justify;
	font-size: 18px;
}

.getstarted_button a{
	font-size: 26px;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 7px;
	padding-bottom: 7px;
	margin-top: 10px;
	margin-bottom: 4px;	
	margin-right: 4px;
	border-radius: 10px;
	line-height: 38px;
}

.getstarted_button a, .image_button, .main_button, .main_button_no_float, .main_button_small, input[type="submit"] {
	background-color: #387A1E;
}

.getstarted_button a, .main_button, .main_button_no_float, .cancel_button, .main_button_small, input[type="submit"] {
	border: none;
	color: white;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
}

.cancel_button, #wrong_btn {
	background-color: #E20000;
}

.main_button, .main_button_no_float, .cancel_button, input[type="submit"] {
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 7px;
	padding-bottom: 7px;
	font-size: 16px;
	margin-top: 10px;
	margin-bottom: 4px;	
	margin-right: 16px;
	border-radius: 10px;
	line-height: 18px;
}

.main_button, .cancel_button, input[type="submit"] {
	float: left;
}

.main_button_small {
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 16px;
	margin: 4px 2px;
	border-radius: 5px;
}

.language_button:hover, .main_button:hover, .main_button_no_float: hover, input[type="submit"]:hover, .main_button_small:hover {
	background-color: #267F00;
	text-decoration: none;
}

.cancel_button:hover, #wrong_btn:hover {
	background-color: #D10000;
	text-decoration: none;
}

.list_languages {
	margin-bottom: 5px;
}

.list_title {
	margin-bottom: 10px;
	border-bottom: 2px solid #387A1E;
}

.list_title a {
	margin-left: 7px;
}

.play_icon {
	cursor: pointer;
	vertical-align: middle;
}

.edit_icon {
	border-bottom: 2px solid green;
}

input[type="submit"]:disabled {
	background-color: #515151;
}

.search_word_row {
	overflow: hidden;
	width: 100%;
	padding-bottom: 5px;
	padding-top: 5px;
}

.play_item {
	overflow: hidden;
	padding-bottom: 10px;
	padding-top: 10px;
	background-color: white;
	margin-bottom: 5px;
	padding-left: 4px;
	padding-right: 4px;
}

.play_pic {
	text-align: center;
}

.search_word_row input {
	margin-top: 4px;
	float: left;
}

.search_word_row > span {
	margin-top: 5px;
	float: left;
	margin-left: 10px;
}

.small_img {
	width: 40px;
	height: 40px;
}

.mytick {
	background-image: url('tick_small.png');
	background-repeat: no-repeat;
	padding-left: 20px;
}

.list_title h1 {
	display: inline;
}

.radiodiv {
	position: absolute;
	height: 100%;
}

.card_row {
	margin-left: 40px;
}

.pict80 {
	width: 80px;
	border: 1px solid #387A1E;
	margin-left: 10px;
	float: left;
	margin-right: 12px;
}

.radiodiv input {
	margin-top: 15px;
}

.search_card_row {
	border-bottom: 2px solid #387A1E;
	position: relative;
	min-height: 40px;
}

.search_card_row:nth-child(odd) {
	background: #FFFFFF;
}

.search_card_row:nth-child(even) {
	background: #EAEAEA;
}

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  top: 50%;
  margin-top: -15px;
  margin-left: 5px;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  left: -1px;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border: 2px solid #387A1E;
}

.radio {
	border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #387A1E;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	background: white;
}

.container .radio:after {
	border-radius: 50%;
}

.add_char {
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 10px;
	padding-right: 10px;
}

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

.smallheader {
	font-size: 13px;
}

.delete_icon {
	position: relative;
	top: 50%;
	margin-top: -15px;
	margin-left: 5px;
}

.margin-bottom-4 {
	margin-bottom: 4px;
	overflow: hidden;
}

.padding-top-4 {
	padding-top: 4px;
}

.pict150 {
	max-width: 150px;
	max-height: 150px;
}

.pool-list-right {
	margin-left: 45px;
}

.pool-list-search {
	margin-left: 5px;
}

.delete_pool {
	margin-left: 5px;
	position: absolute;
}

.pool-row {
	padding-top: 5px;
	padding-bottom: 5px;
}

.pool-list-languages {
	font-size:14px;
}

.pool-row:nth-child(odd) {
	background: #FFFFFF;
}

.pool-row:nth-child(even) {
	background: #EAEAEA;
}

.pool-list-link {
	padding-right: 35px;
	padding-bottom: 3px;
}

.image_submit, #image_search {
    border: 0;
    display: block;
    height: 33px;
    width: 43px;
	background-repeat: no-repeat;
	background-position-x: 7px;
	background-position-y: 2px;
	float: left;
}

.image_submit {
    background-image: url("add.png?v1");
}

#image_search {
    background-image: url("search.png?v1");
	margin-top: 0px;
	margin-left: 5px;
}

#search_input {
	float: left;
	width: 245px;
}

.link_to_pool {
	font-size: 13px;
}

.completed_lbl {
	font-size: 20px;
	text-align: center;
	margin-bottom: 10px;
	margin-top: 10px;
}

#showBtn, #wrongRightButtons, #startBtn {
	text-align: center;
}

.floatRight {
	float: right;
}

.progress_bar {
	height: 10px;
	border: 1px solid black;
	width: 300px;
	background-color: white;
}

#progress {
	width: 0px;
	background-color: #387A1E;
	height: 10px;
}

.pron {
	color: #267F00;
	margin-right: 10px;
}

.login-links {
	width: 100%;
	float: left;
}

.hints ul {
	list-style-type: none;
	padding-left: 5px;
	background: white;
	float: left;
	margin-top: 0px;
	margin-bottom: 5px;
	width: 300px;

}

.hints a:hover {
	background-color: #C4FFAD;
}

.hints li:nth-child(odd) {
	background-color: #FFFFFF;
}

.hints li:nth-child(even) {
	background-color: #EAEAEA;
}

.hints a {
	text-decoration: none;
	width: 100%;
	display: block;
	padding-top: 6px;
	padding-bottom: 6px;
}

.card_footer {
	overflow: hidden;
	margin-bottom: 5px;
}

header h1 {
	margin-top: 10px;
	font-weight: normal;
	color: #007E20;
}

.browse-container {
	background-color: white;
	padding: 5px;
}

.browse-container a {
	display: block;
	text-decoration: none;
	padding-bottom: 7px;
	padding-top: 7px;
}

.browse-container a:nth-child(odd) {
	background-color: #FFFFFF;
}

.browse-container a:nth-child(even) {
	background-color: #EAEAEA;
}

footer {
	font-size: 15px;
	width: 100%;
	overflow: hidden;
}

footer a{
	text-decoration: none;
	line-height: 250%;
	margin-right: 20px;
	margin-left: 20px;
	margin-top: 15px;
	margin-bottom: 15px;
	display: inline-block;
	white-space: nowrap;
}

.profile-email {
	margin-top: 20px;
	margin-bottom: 2px;
}

.profile-name {
	margin-top: 10px;
	margin-bottom: 2px;
}

.authors {
	font-size: 12px;
	margin: 10px;
	color: #3966DB;
	overflow: hidden;
}

.authors a {
	color: #3966DB;
}

.author-label {
	font-weight: bold;
}

.donation {
	text-align: center;
}

.issue-descr {
	width: 290px;
}

.error-message, .info-message {
	overflow: hidden;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	font-weight: bold;
}

.error-message {
	color: #E20000;
}

.info-message {
	color: #007E20;
}

.message {
	margin-bottom: 15px;
}

.authors_tab {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 300px;
}

.authors_tab td {
  border: 1px solid #ddd;
  padding: 4px;
}

.authors_tab tr:nth-child(even){background-color: #f2f2f2;}
.authors_tab tr:nth-child(odd){background-color: #FFFFFF;;}
.authors_tab tr:hover {background-color: #ddd;}

.authors_tab th {
  text-align: center;
  padding-top: 4px;
  background-color: #267F00;
  color: white;
  border: 1px solid #ddd;
}

.user-name {
	float: right;
	margin-top: 8px;
	font-size: 13px;
	margin-right: 4px;
}

.log-in-with {
	list-style-type: none;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 10px;
	padding: 0;
}

.log-in-with a {
	border: 1px solid gray;
	background-color: white;
	padding: 5px;
	width: 100%;
	display: block;
	box-sizing: border-box;
	border-radius: 10px;
	margin-top: 12px;
	margin-bottom: 12px;
	text-decoration: none;
}

.log-in-with a:hover {
	background-color: #DCF2E4;
}

.log-in-with img {
	vertical-align: middle;
	margin-right: 5px;
}

.separator {
    position: relative;
    width: 100%;
	margin-bottom: 15px;
}

.hr-left,
.hr-right {
    line-height: 1em;
    position: absolute;
    outline: 0;
    top: 0;
    left: 0;
    border: 0;
    color: #000;
    text-align: center;
    height: 1.5em;
    width: 100%;
}

.hr-left:before {
    content: "";
    background: #888;
    position: absolute;
    left: 0;
    top: 50%;
    width: 42%;
    height: 2px;
}

.hr-right:before {
    content: "";
    background: #888;
    position: absolute;
    right: 0;
    top: 50%;
    width: 42%;
    height: 2px;
}

.hr-text {
    position: relative;
    display: block;
    padding: 0 .5em;
    line-height: 1.5em;
    color: #000;
    text-align: center;
    top: .5em;
}

.select-language-label {
	width: 100%;
	display: inline-block;
	margin-bottom: 3px;
}

.select-language {
	margin-bottom: 10px;
	width: 100%;
	height: 35px;
}

.long-text {
	text-align: left;
}

.edit-word {
	top: 4px;
	position: relative;
	margin-left: 8px;
	cursor: pointer;
}







.box-background {
	background: rgba(0, 0, 0, 0.8);
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;

	display: flex;
	justify-content: center;
	align-items: center;
}

.box {
	width: 300px;
	height: 100px;
	background: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	font-family: sans-serif;
	font-weight: bold;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: 5px;
}

.box div {
	margin-top: 10px;
}

.btn {
	width: 100px;
	border: none;
	border-radius: 5px;
	color: #fff;
	padding: 5px;
	cursor: pointer;
}
.red-no {
	background: red;
}
.green-yes {
	background: green;
}
    
.footer-separator {
	padding: 0;
	margin: 0;
	border-top: 2px solid white;
}

.site-language-label {
	font-weight: bold;
	margin-left: 15px;
}

.login-label {
	margin-top: 16px;
}