@media print {
	body {
		background: none;
	}
    .lemme_level {
    	position: absolute;
    	top: 15px; right: 25px;
	   	background-image: linear-gradient(to bottom,transparent 0,transparent 100%);
	   	
	}
	.level_A0B, .level_A1B, .level_A2I, .level_A2M, .level_A2S, .level_A2U, .level_U, .level_S, .level_I, .level_M, .level_UEX, .level_X, .level_XEX, {
		background-image: linear-gradient(to bottom,transparent 0,transparent 100%);
	}
	.translation, .notes {
		float: left;
	}

	.list-group-item {
		padding: 0 !important;
	}

	.list-group-item:first-child {
		font-size: 120%;
		margin-bottom: 20px;
	}
	.alternatefonts {

	}	
}



@media screen and (max-width: 600px) {
	#idgroup {
		width: 7rem;
	}
}

select.hasgroup {
	background-color: #92ffab;

}
select#idgroup option:hover,
select#idgroup option:focus,
select#idgroup option:active,
select#idgroup option:checked {
  background: linear-gradient(#5A2569, #5A2569);
}

/*
::moz-selection, ::selection {
	background-color: #92ffab;
	background-color: red !important;
}


select#idgroup option {
   color: black;
}
select#idgroup:not(:checked) {
   color: gray;
}
*/
.jumbo {
 	margin-bottom: 2rem;
    background-color: #e9ecef;
    border-radius: .3rem;
    padding: 1rem;
}

input .form-control-lg {
	height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}


@font-face {
    font-family: "Kanit";
    src: url(../fonts/Kanit/Kanit-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "Sriracha";
    src: url(../fonts/Sriracha/Sriracha-Regular.ttf) format("truetype");
}
.alternatefonts {
	position: absolute;
	left: 50%;
	top: .5rem;
	font-size: 1.7rem;
}
@media screen and (max-width: 600px) {
  .hide_on_mobile {
    visibility: hidden;
    clear: both;
    display: none;
  }
}



.voiceit {
	position: absolute;
	right: 5px;
	top: 45px;
	
}
.tochinese {
	position: absolute;
	right: 5px;
	top: 75px;
}

.more {
	position: absolute;
	left: 80%;
	top: 10px;
	font-size: 1.2rem;
}

.lexeme_group {
	position: absolute;
	left: 80%;
	top: 80px;
}

@media screen and (max-width: 600px) {
  .more {
    left: 75%;
    top:10px;
  }
  .lexreme_group {
	left: 75%;
	top: 45px;
}
}

.more .glyphicon {
	top: 2px;
	margin-right: 2px;

}

.alternatefonts span {
	margin-right: 1rem;
}
.fontKanit {
	font-family: 'Kanit', sans-serif;
}
.fontSriracha {
	font-family: 'Sriracha', cursive;
}

h2.title {
	/*position: absolute; */
	background-color: white; 
	padding-right: .5em;
	margin-bottom: 0;
}

span.prononciation {
	font-size: 1rem;
	font-weight: 600;

}

/* TRANSLATIONS */
.translation {
	width: 100%;

}
.translation th {
	padding: 0;
}
.translation .level {
	width: 3.5rem;
}
.translation .actions {
	width: 3rem;
	text-align: center;
	vertical-align: middle;	
}

.translation .translation_EN, .translation .translation_FR {
	width: 23rem;
}
.translation td.translation_EN, .translation td.translation_FR {
	padding: 0 .25rem;
}
.translation td { 
	border-top: #ccc 1px dashed;

 }

.list-group-item h2.title {
	margin-top: 0;
	max-width: 80%;
}


.flag-icon-squared {
	background-size: 50%;
}

.highlight {
	background-color: yellow;
}


.tochinese {
	padding: 5px;
}
a.tochinese .flag-icon-squared {
	background-size: 100%;
}

a.tochinese {
	color: #999;
	text-decoration: none;
	border: transparent 1px solid;
}
a.tochinese:hover {
	color: #999;
	border: #c6c6c6 1px solid;
	text-decoration: none;
}

.voiceit {
	border-color: transparent;
	padding: 5px;
	opacity: 0.55;
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
    color: #999;
}
.voiceit:hover {
	opacity: 1;
	border-color: #c6c6c6!important;
    border-top-color: rgb(198, 198, 198) !important;
    border-right-color: rgb(198, 198, 198) !important;
    border-bottom-color: rgb(198, 198, 198) !important;
    border-left-color: rgb(198, 198, 198) !important;
	color: #222;
}


.jfk-button-img {
	background: url('../img/gtranslate-buttons11.png') -84px 0 no-repeat;
	    opacity: 0.55;
    -moz-opacity: 0.55;
    margin-top: -3px;
    vertical-align: middle;
    width: 21px;
    height: 21px;
    display: inline-block;
}


/* add to group */

.add_to_group {
	position: relative;
}
#groups_list {
	position: absolute;
	top: 0; left: 0;
}
a.remove_item {
	position: absolute;
	top: 0;
	margin-left: -2.5rem;
	
	opacity: 0.3;
	border: 1px dashed transparent;
	border-radius: 2rem;
	padding: .4rem;
}
a.remove_item:hover {
	border: #CCC 1px dashed;
	opacity: 1;
}


/* 
Levels

LEV	wordcount
A0 B	1989
A1 B	3171
A2 I	114
A2 M	346
A2 S	1287
A2 U	4156
S	7289
U	76527
I	832
M	3837
U EX	2361
X	7750
X EX	823

A1 Beginner
A2 Upper Beginner
B1 Lower intermediate
B2 Upper intermediate
C1 Advanced
C2 Mastery

*/
.level {
    padding: .5rem;
	
}
.lemme_level {
	float: right;
	margin: -.75rem -1.25rem;
    background-image: linear-gradient(to bottom,#eee 0,#ccc 100%);
}

.level_A0B {
	background-image: linear-gradient(to bottom,#d9edf7 0,#c4e3f3 100%) !important;
}
.level_A1B {
	background-image: linear-gradient(to bottom,#dff0d8 0,#d0e9c6 100%) !important;
}
.level_A2I, .level_A2M, .level_A2S, .level_A2U {
	background-image: linear-gradient(to bottom,#fcf8e3 0,#faf2cc 100%) !important;
}
.level_U, .level_S {
    background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%) !important;
}
.level_I, .level_M, .level_UEX, .level_X, .level_XEX, {
	background-image: linear-gradient(to bottom,#f2dede 0,#ebcccc 100%) !important;
}

/* TONES
-x	normal	normal
¯x	high	haut
_x	low	bas
/x	rising	montant
\x	falling	descendant
*/

.results_compact {
	width: 100%;

}
.results_compact h2 {
	margin-bottom: 0;

	}
.results_compact td {
	vertical-align: top;
}
.results_compact .level {
	width: 3rem;
	text-align: center;
	vertical-align: middle;
}
.results_compact .title {
	width: 15rem;
	padding-left: .5rem;
}
.results_compact .spelling {
	width: 9rem;
}
.results_compact .translation {
	width: auto;
}
.results_compact p {
	margin: 0;
}
.results_compact .notes{
	font-size: 75%;
	width: 18rem;
}

/** fLAGS **/
/* FROM http://flag-icon-css.lip.is/ */
.flag-icon-background {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}
.flag-icon {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  width: 1.33333333em;
  line-height: 1em;
}
.flag-icon:before {
  content: "\00a0";
}
.flag-icon.flag-icon-squared {
  width: 1em;
}

.flag-icon-th {
  background-image: url(../flags/4x3/th.svg);
}
.flag-icon-th.flag-icon-squared {
  background-image: url(../flags/1x1/th.svg);
}

.flag-icon-fr {
  background-image: url(../flags/4x3/fr.svg);
}
.flag-icon-fr.flag-icon-squared {
  background-image: url(../flags/1x1/fr.svg);
}

.flag-icon-gb {
  background-image: url(../flags/4x3/gb.svg);
}
.flag-icon-gb.flag-icon-squared {
  background-image: url(../flags/1x1/gb.svg);
}

.flag-icon-cn {
  background-image: url(../flags/4x3/cn.svg);
}
.flag-icon-cn.flag-icon-squared {
  background-image: url(../flags/1x1/cn.svg);
}