/*teachers stuff*/

/*main*/

#teachers-app{
	margin-top:30px;
	position: relative;
	font-family: 'Roboto', sans-serif;
}

#teachers-app hr{
	margin:30px 0px;
	border:1px solid #e3e3e3;
}

/* .teachers-low-hr{
	margin:16px 0px;
} */

.teachers-button{
	padding:16px 20px;
	border-radius:0.8em;
	font-size: 1.1em;
	text-decoration: none;
	outline:none;
	cursor:pointer;
	-webkit-user-select: none; /* Safari */
	user-select: none; /* Standard syntax */
	-webkit-tap-highlight-color: transparent;
}

.teachers-button-default{
	margin:8px 3px;
	background-color: rgb(0, 120, 231);
	color: #fff;
	border: none;
	width:auto;
}

.teachers-button-light{
	margin:12px 4px 0px;
	background-color: rgb(229 242 255);
	color: #666;
	border:1px solid #ddd;
	width:120px;
}

.teachers-button[disabled=disabled], .teachers-button:disabled{
	cursor:default;
	opacity:0.3;
}

.teachers-listitem{
	background-color: rgb(229 242 255);
	border-radius:0.8em;
	border:1px solid #ddd;
	width:fit-content;
	cursor:pointer;
	display:inline-block;
	text-decoration: none;
	color: #666;
	line-height: 1.6em;
	margin:4px 4px;
	padding:14px 24px;
	-webkit-user-select: none; /* Safari */
	user-select: none; /* Standard syntax */
	-webkit-tap-highlight-color: transparent;
}

.teachers-statusmessage{
	font-size: 1.5em;
	color: #aaa;
	/* font-weight: bold; */
	margin: 20px 0px 20px 20px;
}

.teachers-link-nounderline{	text-decoration: none; }

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #bbb;
}

/* userpane */

#teachers-username, #teachers-maintitle{
	display: inline-block;
	font-size:2em;
	color:#333;
	font-weight: bold;
}

#teachers-username{	margin: 30px 8px 40px;}

#teachers-maintitle{ margin: 30px 8px 20px;}

#teachers-userpane p{
	margin-left: 16px;
}

#teachers-button-signin{
	width: 180px;
	border: none;
	color: #fff;
	background-color: rgb(0, 120, 231);
	height: 64px;
	font-size: 1.5em;
	margin: 8px 2px 18px;
}

#teachers-button-signout{
	width:130px;
	border: none;
	position: absolute;
	right:0;
	top:0;
	font-size: 1.2em;
	background-color: #ccc;
	color: #666;
}

#teachers-button-signin[disabled=disabled], #teachers-button-signin:disabled, #teachers-button-signout[disabled=disabled], #teachers-button-signout:disabled{
	display: none;
}

/* content */

#teachers-contentfinder-search{
	position: relative;
	display:inline-block;
	width: 70%;
	max-width: 400px;
}

#teachers-contentfinder-input {	
	width: 100%;
	height: 60px;
	border-radius: 1.5em;
	border: solid #ccc 1px;
	padding: 8px 32px;
	font-size: 28px;
	margin: 4px 8px 12px;
}

#teachers-contentfinder-clear{
	position: absolute;
    top: 21px;
    right: -60px;
    padding: 7px 17px;
    background-color: #eeeeee;
    color: #999999;
    border: 1px solid #dddddd;
    border-radius: 2em;
    font-size: 0.9em;
    text-align: center;
	cursor: pointer;
}

#teachers-contentfinder-input:focus{
	outline:none;
}

.teachers-contentfinder-matchedims{
	margin: 8px 0px;
}

.teachers-contentfinder-category{
  border: #ccc solid 1px;
  border-radius: 1.2em;
  display: inline-block;
  padding:8px 12px;
  cursor: pointer;
  margin:2px 2px;
  background-color: #e2f2ff;
}

.teachers-contentfinder-item{
  display: inline-block;
  border: #ccc solid 1px;
  border-radius: 1.6em;
  margin: 8px;
  padding:18px 24px 6px;
  cursor: pointer;
  position: relative;
  -webkit-user-select: none; /* Safari */
  user-select: none; /* Standard syntax */
  -webkit-tap-highlight-color: transparent;
}

.teachers-contentfinder-item p{
  margin: 6px 2px 2px;
  padding:2px;
  text-align: center;
  max-width: 90px;
}

.teachers-contentfinder-item-imgdiv{
  width: 100px;
  height: 100px;
}

.teachers-contentfinder-item-imgdiv img{
	object-fit:contain;
	max-width: inherit;
	max-height: inherit;
	height: inherit;
	width: inherit;
}

.teachers-contentfinder-tickcross{
	position: absolute;
	right:8px;
	top:108px;
}

.teachers-contentset-menu{
	margin: 20px 0px 24px;
}

.teachers-contentset-menu button{
	margin-top: 0px;
}

.teachers-contentset-audiocontainer{
	display: block;
    width: 100%;
}

.teachers-contentset-audiooptions{
	flex-grow: 0; /* Do not allow the box to grow */
	flex-shrink: 0; /* Do not allow the box to shrink */
	padding: 10px; 
}

.teachers-contentset-audiooptions div{
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	-webkit-tap-highlight-color: transparent;
}

.teachers-contentset-audiosamples{
	flex-grow: 1; /* Allows the box to take up remaining space */
	padding: 10px; 
}

.teachers-contentset-audioitem{
	display: inline-block;
	border: #ccc solid 1px;
	background-color: #eee;
	border-radius: 1.2em;
	margin: 4px;
	padding:12px 46px 12px 20px;
	cursor: pointer;
	position: relative;
	-webkit-user-select: none; /* Safari */
	user-select: none; /* Standard syntax */
	-webkit-tap-highlight-color: transparent;
}

.teachers-contentset-audioitem:hover{
	border: #999 solid 1px;
	background-color: #f3f3f3;
}

.teachers-contentset-audioitem-text{
	object-fit:contain;
	max-width: inherit;
	max-height: inherit;
	height: inherit;
	width: inherit;
}

.teachers-contentset-audioitem-icon{
	position: absolute;
	right:12px;
	top:16px;
}

.teachers-contentset-title-notnew, .teachers-contentset-title-new{
	height: 54px;
	width: 300px;
	max-width: 70%;
	display: block;
	background-color: #ffffff;
	outline:none;
	color:#333;
	display: inline-block;
}

.teachers-contentset-title-notnew{
	font-size: 2.0em;
	border: none;
	border-bottom: 1px solid #ffffff;
	padding: 0px;
	margin: 0px 12px;
}

.teachers-contentset-title-new{
	border: none;
	border-bottom: 1px solid #dddddd;
	font-size: 36px;
	padding: 8px 12px;
	margin: 0px;
}

.teachers-contenttitle-note{
	display: inline-block;
	color: #888;
	margin:8px 16px;
	vertical-align: super;
}

/* .teachers-contenttitle-input:focus{
	outline:none;
} */

.teachers-contentfinder-matchedtexts{
	margin: 2px 12px 0px;
}

.teachers-contentfinder-matchedtext{
	border: 1px solid #cccccc;
    padding: 4px 16px;
    border-radius: 1em;
    display: inline-block;
    cursor: pointer;
	margin: 2px;
}

.teachers-contentset-items{
}

.teachers-contentset-item{
	width:200px;
	height:240px;
	border:2px solid #ddd;
	border-radius:2em;
	vertical-align: bottom;
	margin: 6px;
	display: inline-block;
	position: relative;
	text-align: center;
}

.teachers-contentset-item img{
	width: 140px;
	height: 140px;
	margin:24px 0px 0px;
	object-fit:contain;
}

.teachers-contentset-item-input{
	text-align: center;
	margin: 5px auto 0px;
	width: 76%;
	display: block;
	padding:10px;
	font-size: 1.2em;
	border:1px solid #ccc;
	border-radius:0.9em;
	background-color: #eee;
	outline:none;
}

.teachersteachers-contentset-item:focus{
	outline:none;
	border:1px solid #aaa;
}

.teachers-contentset-item-delbit{
	position: absolute;
	top:10px;
	right:10px;
	width:18px;
	height:18px;
	color:#333;
	background-color: #eee;
	border:1px solid #ccc;
	padding: 0px 6px 12px;
	text-align: center;
	border-radius: 1em;
	cursor: pointer;
	display: inline-block;
}


/* Tasks */

#teachers-tasks-list{
	text-align:left;
	list-style-type: none;
	padding-left: 8px;
	margin-top: 26px;
	font-size: 1.1em;
}

#teachers-task-table{
	width: 90%;
	margin: 32px auto;
	border: solid 1px #d2d2d2;
	padding: 0px;
}

#teachers-task-table th {
	padding: 12px 15px;
	text-align: center;
}
#teachers-task-table td {
	padding: 8px 15px;
	text-align: center;
}

#teachers-task-table tr:nth-child(even) {background-color: rgb(229 242 255);}
#teachers-task-table tr:nth-child(odd) {background-color: #f3f9ff;}

#teachers-task-table th {
	background-color: rgb(197 220 241);
	color: #505050;
}

.teachers-task-controls{
	text-align: center;
}

.teachers-taskcreater-step{
    margin: 12px;
}

#teachers-taskcreater-input{
	border: 1px solid #cccccc;
	border-radius: 1em;
	font-size: 20px;
	padding: 15px 16px;
	width: 250px;
	max-width: 70%;
	margin-left: 12px;
}

#teachers-taskcreater-input:focus{
	outline:none;
}

.teachers-taskcreater-button{
	width:auto;
	padding:16px 20px;
	border-radius:0.8em;
	display:inline-block;
	margin:0px 12px;
	background-color: rgb(229 242 255);
	color: #666;
	border:1px solid #ddd;
	text-decoration: none;
	outline:none;
	cursor:pointer;
}

.teachers-taskcreater-button[disabled=disabled], .teachers-taskcreater-button:disabled{
	cursor:default;
	opacity:0.4;
}

.teachers-taskcreater-options{
	margin-top: 14px;
	margin-left: 30px;
	margin-bottom: 30px;
}

.teachers-taskcreater-options-list{
	margin-top: 10px;
	margin-left: 10px;
}

.teachers-taskcreater-checkbox, .teachers-content-checkbox{
	width: 25px;
	height: 25px;
}

.teachers-taskcreater-checkboxtext, .teachers-content-checkboxtext{
	margin-left: 10px;
	vertical-align: text-bottom;
}

.teachers-taskcreater-checkboxexplain{
	margin: 0px 4px 0px 10px;
	font-size: smaller;
	line-height: 1.3em;
	display: block;
}

.teachers-taskcreater-optionboxestext{
	margin: 6px 0px 14px;
	font-size: 1.1em;
}

/* components */

#teachers-confirmpane-blocker{
	background-color: #ffffff;
	height:100%;
	width:100%;
	opacity: 0.8;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 300;
}

#teachers-confirmpane-pane{
	position: fixed;
	left: 50%;
	top: 50%;
	width:400px;
	height:200px;
	margin-left: -200px;
	margin-top: -100px;
	background-color: #eee;
	text-align: center;
	border-radius: 2em;
	border:1px solid #bbb;
	padding-top:10px;
	z-index: 400;
}

#teachers-confirmpane-pane p{
	margin:46px;
	font-size: 1.8em;
}

#teachers-confirmpane-cancel, #teachers-confirmpane-confirm{
	padding:16px 20px;
	border-radius:0.8em;
	font-size: 1.1em;
	text-decoration: none;
	outline:none;
	cursor:pointer;
	margin:0px 6px;
	width:150px;
}

#teachers-confirmpane-cancel{
	background-color: #ccc;
	color: #666;
	border:1px solid #aaa;
}

#teachers-confirmpane-confirm{
	background-color: #F9C5C5;
	color: #555;
	border:1px solid #888;
}

/* linkpane */
/* embed */

.teachers-linkpane, .teachers-embedpane{
	text-align: center;
	margin:32px 0px;
}

.teachers-linkpane-div, .teachers-embedpane-div{
	background:#e1e1e1;
	border:1px solid #bbb;
	border-radius:3em;
	margin:0px 2px 12px 8px;
	cursor: pointer;
}

.teachers-linkpane-div textarea:focus, .teachers-embedpane-div textarea:focus{
	outline:none;
}

.teachers-linkpane-innerdiv, .teachers-embedpane-innerdiv{
	background:#fff;
	border:1px solid #ccc;
	border-radius:2.6em;
	margin:6px;
	padding:12px 20px;
}

.teachers-linkpane-textarea{
	text-align: center;
	cursor: pointer;
	resize:none;
	width: 100%;
	border:none;
	margin:0;
	font-size: 20px;
	display:inline-block;
	vertical-align:middle;
	overflow:hidden;
	white-space: pre;
	overflow-wrap: normal;
	line-height:60px;
}

.teachers-embedpane-textarea{
	word-break:break-all;
	line-height:24px;
	overflow:hidden;
	text-align: center;
	cursor: pointer;
	resize:none;
	width: 100%;
	border:none;
	margin:0;
	font-size: 20px;
	display:inline-block;
	vertical-align:middle;
}

#teachers-testembed{
	text-align: center;
	margin: 28px 0 0 0;
}

/* page picker */

#teachers-pagepicker{
	text-align: center;
}

.teachers-pagepicker-item, .teachers-pagepicker-item-selected{
	display:inline-block;
	cursor: pointer;
	text-align: center;
	color:#444;
	border-radius: 1.6em;
	-webkit-user-select: none; /* Safari */
	user-select: none; /* Standard syntax */
	-webkit-tap-highlight-color: transparent;
}

.teachers-pagepicker-item{
	margin:10px;
}

.teachers-pagepicker-item-selected{
	margin:0px 0px 4px;
	background-color: #fff0a2;
	border: 1px solid #b5b5b5;
	padding:9px 9px 5px;
}

.teachers-pagepicker-item-im{
	background-image:url('https://www.gamestolearnenglish.com/ims/allThumbs.2.3.png');
	box-shadow:0px 0px 0px 2px #fff inset;
	border-radius:1.5em;
	width:100px;
	height:100px;
	border:solid 1px #aaa;
	margin:0;
	box-sizing: content-box;
}

.teachers-pagepicker-item-txt{
	margin:6px 0px 0px 0px;
	font-size: 1em;
}

/* ensure sprite layout is alphabetical */

#animalMystery-teachers{background-position: -0px -0px;}
#grammarBubbles-teachers{background-position: -100px -0px;}
#clothes-teachers{background-position: -200px -0px;}
#comparatives-teachers{background-position: -300px -0px;}
#concentration-teachers{background-position: -400px -0px;}
#conditionals-teachers{background-position: -500px -0px;}

#describer-teachers{background-position: -0px -100px;}
#falling-teachers{background-position: -100px -100px;}
#fastEnglish-teachers{background-position: -200px -100px;}
#fastPhrases-teachers{background-position: -300px -100px;}
#fastVocab-teachers{background-position: -400px -100px;}
#food-teachers{background-position: -500px -100px;}

#future-teachers{background-position: -0px -200px;}
#hangman-teachers{background-position: -100px -200px;}
#jobs-teachers{background-position: -200px -200px;}
#monsterPhrases-teachers{background-position: -300px -200px;}
#numbers-teachers{background-position: -400px -200px;}
#pastTense-teachers{background-position: -500px -200px;}

#perfect-teachers{background-position: -0px -300px;}
#phrasalVerbs-teachers{background-position: -100px -300px;}
#phraseMaker-teachers{background-position: -200px -300px;}
#prepositions-teachers{background-position: -300px -300px;}
#presentSimple-teachers{background-position: -400px -300px;}
#questions-teachers{background-position: -500px -300px;}

#reveal-teachers{background-position: -0px -400px;}
#spellingBee-teachers{background-position: -200px -400px;}
#time-teachers{background-position: -300px -400px;}
#vocabGame-teachers{background-position: -400px -400px;}
#weather-teachers{background-position: -500px -400px;}

#wordSearch-teachers{background-position: -100px -500px;}
#monsterVocab-teachers{background-position: -0px -500px;}

#daysOfTheWeek-teachers{background-position: -100px -400px;}

#dailyRoutines-teachers{background-position: -200px -300px;}
#monthsGame-teachers{background-position: -400px -500px;}
#bodyParts-teachers{background-position: -300px -500px;}
#family-teachers{background-position: -200px -500px;}

#vocab-teachers{background-position: -500px -500px;}

#adverbs-teachers{background-position: 0px -600px;}
#anagrams-teachers{background-position: -100px -600px;}
#adverbsOfFrequency-teachers{background-position: -200px -600px;}
#adjectives-teachers{background-position: -300px -600px;}
#fastQuiz-teachers{background-position: -400px -600px;}

#halloween-teachers{background-position: -500px -600px;}
#christmas-teachers{background-position: 0px -700px;}


#teachers-contentpicker{
    line-height: 1em;
}

/* content picker */
.teachers-contentpicker-item, .teachers-contentpicker-longitem{
	width:82px;
	height:82px;
	display: inline-block;
	margin:0px 2px;
	cursor: pointer;
	-webkit-user-select: none; /* Safari */
	user-select: none; /* Standard syntax */
	-webkit-tap-highlight-color: transparent;
    box-sizing: content-box;
    border-radius: 1.06em;
}

.teachers-contentpicker-item{
	background-image:url('https://www.gamestolearnenglish.com/ims/allContentBits.2.0.png');
}

.teachers-contentpicker-longitem{
	background-image:url('https://www.gamestolearnenglish.com/ims/allContentLongBits.2.0.png');
}

.teachers-contentpicker-user, .teachers-contentpicker-gbubs{
	text-align:left;
	list-style-type: none;
	padding:0px;
	user-select: none;
}

.teachers-contentpicker-user li, .teachers-contentpicker-gbubs li{
	text-align:center;
	border-radius:1.4em;
	border:1px solid #ddd;
	padding:40px 4px;
	width:fit-content;
	cursor:pointer;
	margin:4px 4px;
	display:inline-block;
	text-decoration: none;
	color: #A10000;
	min-width: 100px;
	font-size: 16px;
	-webkit-user-select: none; /* Safari */
	user-select: none; /* Standard syntax */
	-webkit-tap-highlight-color: transparent;
}

/* Content sets */

.teachers-usercontent-list{
	text-align:left;
	list-style-type: none;
	padding-left: 8px;
	margin-top: 26px;
	font-size: 1.1em;
}

.teachers-usercontent-list li{
	background-color: rgb(229 242 255);
	border-radius:0.8em;
	border:1px solid #ddd;
	width:fit-content;
	cursor:pointer;
	display:inline-block;
	text-decoration: none;
	color: #666;
	line-height: 1.6em;
	padding:14px 24px;
	margin:4px 4px;
	-webkit-user-select: none; /* Safari */
	user-select: none; /* Standard syntax */
	-webkit-tap-highlight-color: transparent;
}

.teachers-contentview-newbutton{
    margin:0px 12px 0px 12px;
	background-color: rgb(229 242 255);
	color: #666;
	border:1px solid #ddd;
	width:130px;
	height:60px;
}


@media screen and (min-width:48em){

.teachers-contentset-audiocontainer{
	display: flex;
}

.teachers-contentset-audiosamples{
	padding: 10px 10px 10px 100px; 
}

}