a {

	color: #0044ff;

}



.align-center {

	text-align: center;

}



/*****************************************************************************************

****************************************AUTH PAGES****************************************

*****************************************************************************************/

.button {

	padding: 5px;

	box-sizing: border-box;

	border-radius: 9px;

	border: none;

	background-color: #fff288;

	outline: none;

}



.button:hover {

	background-color: #ffe822;

}



.auth-form {

	margin-top: 35px;

	padding: 17px 20px 1px 20px;

	width: 270px;

	box-sizing: border-box;

	background-color: rgba(255, 255, 255, 0.7);

	border-radius: 20px;

}



.auth-form h2 {

	margin: 0 0 17px 0;

}



.auth-form .error {

	color: #e20000;

}



.auth-form .form-line {

	padding-left: 10px;

	margin-bottom: 9px;

}



.auth-form .form-line label {

	display: block;

	padding-bottom: 5px;

}



.auth-form .form-line input {

	outline: none;

	width: 100%;

	border: 1px solid #ffe400;

	box-sizing: border-box;

	border-radius: 9px;

	padding: 3px 3px 3px 9px;

}



.auth-form .form-line input:focus {

	box-shadow: 0 0 10px #ffe400;

}



.auth-form .form-line .submit {

	width: 100%;

}



.test-pannel {

	width: 270px;

	text-align: center;

}



.button-test {

	display: block;

	text-align: center;

	width: 200px;

	margin: 20px auto 0 auto;

	color: #000;

	text-decoration: none;

}



/*****************************************************************************************

**************************************CATEGORY PAGES**************************************

*****************************************************************************************/



.categories {

	padding-top: 30px;

}



.category-form {

	margin: 5px;

	width: 200px;

	height: 200px;

	float: left;

	background-color: rgba(255, 255, 255, 0.7);

}



.category-form input {

	box-sizing: border-box;

	padding: 0 7px;

	background-color: transparent;

	border: none;

	outline: none;

	width: 100%;

	height: 100px;

	text-align: center;

}



.category-form button {

	border: none;

	background-color: #fff288;

	outline: none;

	width: 100%;

	height: 100px;

}



.category-form button:hover {

	background-color: #ffe822;

}



.category {

	margin: 5px;

	padding: 7px;

	width: 200px;

	height: 200px;

	float: left;

	background-color: rgba(255, 255, 255, 0.8);

	border: 2px solid #ffe822;

	box-sizing: border-box;

	text-decoration: none;

	position: relative;

}



.category:hover {

	background-color: rgba(255, 232, 34, 0.8);

}



.category.correct {

	background: rgba(112, 219, 112, 0.7);

}


.category.incorrect {

	background: rgba(255, 77, 77, 0.7);

}



.category .category-link {


	text-align: center;

	display: table;

	width: 100%;

	height: 100%;

	table-layout:fixed;

	box-sizing: border-box;

	text-decoration: none;

}



.category span {

	display: table-cell;

	vertical-align: middle;

	overflow: hidden;

}


.category .category-delete {

	position: absolute;

	top: 0;

	right: 8px;

	font-size: 1.5em;

	color: #595959;

}



.category .category-delete:hover {

	color:#333333;

}



.category .category-share {

	position: absolute;

	top: 3px;

	right: 40px;

	font-size: 1.5em;

	color: #999;

}



.category .category-share.shared {

	color:blue;

}



.category .category-share:hover {

	color:blue;

}



.category .category-favourite {

	position: absolute;

	top: 3px;

	right: 70px;

	font-size: 1.5em;

	color: #ff6666;

}



.category .category-favourite:hover {

	color:#ff0000;

}


/*****************************************************************************************

******************************************WORDS*******************************************

*****************************************************************************************/



.test-yourself {

	margin: 20px auto 20px auto;

	display: block;

	width: 25%;

	text-align: center;

	text-transform: uppercase;

	padding: 7px;

	text-decoration: none;

	font-weight: bold;

}



.words-container {

	margin: 0 auto 0 auto;

	width: 45%;

}



.words-wrapper {

	width: 45%;

	background-color: #2b542c;

	overflow-y: scroll;

	max-height: 50vh;

	box-sizing: border-box;

}


.words th {
	position: relative;
}


.words-count {
	position: absolute;
	left: 3px;
	top: 3px;
}


.words {

	width: 100%;

}



.words h2 {

	margin: 0;

}



.words .btn-edit {

	font-size: 1.2em;

	padding:5px;

	background: orange;

	color:white;

	cursor: pointer;

}



.words .btn-remove {

	font-size: 1.2em;

	padding:5px;

	background: red;

	color:white;

}



.words th {

	padding-top: 17px;

	background-color: #ffdd68;

}



.words tr:nth-of-type(2) th {

	border-bottom: 3px solid #b19d59;

	padding-bottom: 3px;

}



.words td {

	vertical-align: top;

	padding: 5px 7px 2px 7px;

	width: 50%;

	border-bottom: 1px solid #b19d59;

	background-color: #fff99b;

}



.words td:nth-of-type(2) {

	border-left: 2px dotted #b19d59;

}



.words tr:hover td {

	background-color: #fff779;

}



.words-form-wrapper {

	box-sizing: border-box;

	padding-right: 18px;

}



.words-form input {

	width: 50%;

	float: left;

	border: none;

	border-bottom: 1px solid #b19d59;

	padding: 5px 7px 2px 7px;

	box-sizing: border-box;

	outline: none;

	background-color: #fff99b;

}



.words-form textarea {

	width: 100%;

	max-width: 100%;

	border: none;

	border-bottom: 1px solid #b19d59;

	padding: 5px 7px 2px 7px;

	box-sizing: border-box;

	outline: none;

	background-color: #fff99b;

}



.words-form button {

	width: 100%;

	border: none;

	padding: 7px 7px 4px 7px;

	box-sizing: border-box;

	outline: none;

	background-color: #fff99b;

}



.words-form button:hover {

	background-color: #ffe822;

}




/*****************************************************************************************

******************************************TEST********************************************

*****************************************************************************************/





#test-form {

	margin: 30px auto 0 auto;

	width: 30%;

	background-color: rgba(255, 255, 255, 0.8);

	border: 2px solid #ffe822;

	border-radius: 15px;

}



#test-form .question {

	text-align:  center;

	margin-bottom: 25px;

}



#test-form .question h3 {

	margin: 15px auto 7px auto;

}



#test-form .info p {

	margin: 0;

	padding: 5px 7px 3px 7px;

}



#test-form .answer,

#test-form .buttons {

	width: 100%;

	margin: 0 auto;

}



#test-form .answer input {

	width: 100%;

	box-sizing: border-box;

	padding: 3px 0 3px 7px;

	outline: none;

}



#test-form .buttons {

	margin-top: 10px;

}



#test-form .buttons * {

	margin: 0 2% 0 2%;

	width: 46%;

	box-sizing: border-box;

	float: left;

	padding: 5px;

}



#test-form .status-wrapper{

	margin-top: 20px;

}



#test-form .status-wrapper div {

	float: left;

	width: 50%;

	padding: 7px 20px;

	box-sizing: border-box;

}



#test-form .status-wrapper div:nth-of-type(2) {

	text-align: right;

}



#test-form .status-wrapper div:nth-of-type(2) {

	text-align: right;

}




/*****************************************************************************************

******************************************POPUP-EDIT**************************************

*****************************************************************************************/



.popup-edit,
.alert-test {

	top: 0;

	left: 0;

	position: fixed;

	height: 100vh;

	width: 100vw;

	background: rgba(0,0,0,0.5);

	display: table;

	z-index: 999;

}



.popup-edit form {

	display: table-cell;

	vertical-align: middle;

	text-align: center;

}



.popup-edit form > div {

	background:  rgba(0,0,0,0.6);

	display: inline-block;

	padding: 30px;

	color: #fff;

	position: relative;

}



.popup-edit td {

	padding: 10px;

}



.popup-edit td input {

	height: 30px;

	color: #333333;

	padding: 5px;

}



.popup-edit .btn-save,
.alert-test .btn-test,
.alert-test .btn-continue {

	width: 100%;

	padding: 10px;

	border: 2px solid #00cc44;

	border-radius: 2px;

	background: none;

	color:white;

	text-decoration: none;

}



.popup-edit .btn-save:hover,
.alert-test .btn-continue:hover {

	background: #00cc44;

}



.popup-edit .btn-exit,
.alert-test .btn-exit {

	background: #fff;

	color: #ccc;

	border-bottom-left-radius: 5px;

	background: #cc0000;

	line-height: 30px;

	height: 32px;

	width: 32px;

	display: block;

	position: absolute;

	top: 0em;

	right: 0em;

	cursor: pointer;

}



.popup-edit .btn-exit:hover,
.alert-test .btn-exit:hover {


	color: #fff;

	background: #e60000;

}



.alert-test > div {

	display: table-cell;

	vertical-align: middle;

	text-align: center;

	color:white;

}



.alert-test > div > div {

	background: rgba(0,0,0,0.7);

	display: inline-block;

	padding: 35px;

	position: relative;

}



.alert-test .btn-test {

	border: 2px solid orange;

}



.alert-test .btn-test:hover {

	background: orange;

}

.edit-note textarea {
	color: black;
}