@charset "UTF-8";

.q-container {
  margin: 80px auto;
  background: #fff;
  border-radius: 4px;
  padding: 16px;
  position: relative;
}

#question {
  margin-bottom: 16px;
  font-weight: bold;
}

#choices {
  list-style: none;
  padding: 0;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
}

#choices > li {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

#choices > li:hover {
  background: #f8f8f8;
}


table.log-table td.correct,
#choices > li.correct {
  background: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
  font-weight: bold;
}
table.log-table td.correct-ans ,
#choices > li.correct-ans {
  background: #e4fdea;
  border-color: #d3f6db;
  color: #054714;
  font-weight: bold;
}
#choices > li.correct-ans::after {
  content: '';
}
table.log-table td.correct::after{
  content: ' ○';
  font-weight: bold;
}

#choices > li.correct::after {
  content: ' ○';
}
table.log-table td.wrong,
#choices > li.wrong {
  background: #f8d8da;
  border-color: #f5c6cb;
  color: #721c24;
  font-weight: bold;
}

#choices > li.wrong::after {
  content: ' ×';
}
table.log-table td.wrong::after{
  content: ' ×';
  font-weight: bold;
}

#qz-btn,
#op-btn,
#result > a {
  background: #3498db;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  color: #fff;
  box-shadow: 0 4px 0 #2880b9;
}
#op-btn.disabled,
#qz-btn.disabled {
  background: #ccc;
  box-shadow: 0 4px 0 #bbb;
  opacity: 0.7;
}

#result table.log-table {
	text-align: left;
}
#result table.log-table td {
	width: 25%;
}
#result .sns-share-buttons a{
	width: 50%;
}
#result .tensu{
	font-size: 1.6em;
}
#opening {
/*
	z-index: 99999;
  position: absolute;
*/
  width: 90%;
  background: #fff;
  padding: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  top: 50px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 4px;
  text-align: center;
  transition: 0.4s;
}

#opening.hidden{
/*   transform: translateY(-1500px); */
	display: none;
}

#result {
	display: block;
  text-align: center;
}
#result.hidden {
	display: none;
}

#stop-watch,
#quiz-board {
	display: block;
}
#stop-watch.hidden,
#quiz-board.hidden {
	display: none;
}

#opening > p,
#result > p {
  font-size: 24px;
  font-weight: bold;
}
#opening > a,
#result > a {
  display: block;
  text-decoration: none;
}
/* stop-watch */
#stop-watch {
  margin: 20px auto;
  width: 270px;
  background: #fff;
  padding: 15px;
  text-align: center;
}

#stop-watch #timer {
  background: #ddd;
  height: 80px;
  line-height: 80px;
  font-size: 40px;
  margin-bottom: 15px;
}

#stop-watch .q-btn {
  width: 80px;
  height: 45px;
  line-height: 45px;
  background: #ddd;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}
#stop-watch .controls {
	display: none;
/*   display: flex; */
  justify-content: space-between;
}

#stop-watch .inactive {
  opacity: 0.6;
}