/* ----------------------------------------------------------------------------------------------------------------------------
== GENERAL STYLE
** ---------------------------------------------------------------------------------------------------------------------------- */

body { background-size: cover;
	  font-family: Consolas;
	  overflow: hidden;}

/* ----------------------------------------------------------------------------------------------------------------------------
== JUPITER
** ---------------------------------------------------------------------------------------------------------------------------- */

#jupiter {
    position:absolute;
	left: 0;
	top: 0px;
    z-index:1;
    width: 98%;
    height: 95%;
    margin: 10px 10px 10px 10px;
	text-align: center;
}

#jupiter:before {
	border-radius: 25px;
    content:"";
    position:absolute;
    z-index:-1;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    background: black;
    background-size: cover;
    opacity:0.7;
	
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);	
}

/* ----------------------------------------------------------------------------------------------------------------------------
== SATURN
** ---------------------------------------------------------------------------------------------------------------------------- */

#saturn {
    position:absolute;
	left: 0;
	top: 0;
    z-index:2;
    width: 100%;
    height: 100%;
    margin:10px auto;
}
/*
#saturn:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    background-size: cover;
    opacity:0.5;
}
*/
/* ----------------------------------------------------------------------------------------------------------------------------
== CLASS tombol pilihan
** ---------------------------------------------------------------------------------------------------------------------------- */

div.tombol_pilihan {
	top: 5px;	
	position: absolute; 
	border-radius: 5px; 
	background-color: red; 
	width: 40px; 
	height: 40px; 
	box-shadow: 3px 3px 3px gray; 
	text-align: center; 
	line-height: 40px;
}

div.tombol_pilihan:hover {
	background-color: orange;
	cursor: pointer;
}

div.tombol_pilihan:active {
	background-color: orange;
	box-shadow: 1px 1px 1px gray;
	cursor: pointer;
}

/* ----------------------------------------------------------------------------------------------------------------------------
== CLASS logocbt
** ---------------------------------------------------------------------------------------------------------------------------- */

div.logocbt {
	position: absolute;
	top: 77%;
	left: 1%;
	z-index: 10;
}

/* ----------------------------------------------------------------------------------------------------------------------------
== CLASS tombol mulai
** ---------------------------------------------------------------------------------------------------------------------------- */

div.tombol_mulai {
	position: relative;
	top: 50px;
	margin: auto;
	border-radius: 5px; 
	background-color: silver; 
	width: 100px; 
	height: 40px; 
	box-shadow: 3px 3px 3px gray; 
	text-align: center; 
	line-height: 40px;
}

div.tombol_mulai:hover {
	background-color: yellow;
	cursor: pointer;
}

div.tombol_mulai:active {
	background-color: yellow;
	box-shadow: 1px 1px 1px gray;
	cursor: pointer;
}

/* ----------------------------------------------------------------------------------------------------------------------------
== CLASS wating info
** ---------------------------------------------------------------------------------------------------------------------------- */

div.waiting_info {
	position: relative;
	top: 50px;
	margin: auto;
	border-radius: 5px; 
	background-color: yellow; 
	width: 200px; 
	height: 40px; 
	box-shadow: 3px 3px 3px gray; 
	text-align: center; 
	line-height: 40px;
}

/* ----------------------------------------------------------------------------------------------------------------------------
== CLASS clock
** ---------------------------------------------------------------------------------------------------------------------------- */

div.clock {
	position: absolute;
	top: 0px;
	border-radius: 5px;
	margin: 5px;
	background-color: yellow; 
	width: 50px; 
	height: 50px; 
	box-shadow: 3px 3px 3px gray; 
	text-align: center; 
	line-height: 50px;
}


/* ----------------------------------------------------------------------------------------------------------------------------
== CLASS loginselect
** ---------------------------------------------------------------------------------------------------------------------------- */

div.loginselect {
	position: relative;
	border-radius: 5px;
	margin: 20px;
	background-color: yellow; 
	width: 300px; 
	box-shadow: 5px 5px 5px black; 
	text-align: center; 
	line-height: 100px;
	float: right;
}

div.loginselect:hover {
	font-size: 40px;
	cursor: pointer;
}

div.loginselect:active {
	box-shadow: 2px 2px 2px black; 
}

/* ----------------------------------------------------------------------------------------------------------------------------
== ROUND EDGES
** ---------------------------------------------------------------------------------------------------------------------------- */

#round_edge {
	border-radius: 5px;
}

/* ----------------------------------------------------------------------------------------------------------------------------
== TEKS SOAL
** ---------------------------------------------------------------------------------------------------------------------------- */
#tekssoal {
	background-color: white; 
	margin: auto; 
	text-align: center;
 }

.tg  {border-collapse:collapse;border-spacing:0; background-color: white; border-style: solid; opacity: 0.3;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:0px 3px 0px 3px;border-style:none;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-k14j{font-size:14px;font-family:"Arial Black", Gadget, sans-serif !important;text-align:center;}
.tg:hover {opacity: 1;}

button.board {color: white; width: 60px; height: 60px; border-radius: 5px; background-repeat: no-repeat; background-size: 55px 55px;}
button.boardSML{width: 50px; height: 50px; border-radius: 5px; background-repeat: no-repeat; background-size: 55px 55px; font-size: 12px;}

button.myButton {
  width:60px;
  height:60px;
  color: white;
  background: -moz-linear-gradient(0% 100% 90deg, #ffffff, #000000);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#ffffff));
  background: linear-gradient(#000000, #ffffff);
  border-top:5px solid #ffffff;    /* Level 1 */
  border-right:6px solid black;  /* Level 3 */
  border-bottom:6px solid black; /* Level 4 */
  border-left:5px solid #cccccc;   /* Level 5 */
  -webkit-box-shadow:0 2px 4px #000;
  -moz-box-shadow:0 2px 4px #000;
  box-shadow:0 2px 4px #000;
}

button.myButton:active {
  box-shadow:inset 1px 2px #000;
  padding-top:6px;
  padding-left:7px;
}


button.myButtonFSC{
  width:80px;
  height:80px;
  color: white;
  background: -moz-linear-gradient(0% 100% 90deg, #ffffff, #000000);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#ffffff));
  background: linear-gradient(#000000, #ffffff);
  border-top:5px solid #ffffff;    /* Level 1 */
  border-right:6px solid black;  /* Level 3 */
  border-bottom:6px solid black; /* Level 4 */
  border-left:5px solid #cccccc;   /* Level 5 */
  background-size: 70px;
  background-repeat: no-repeat;
  -webkit-box-shadow:0 2px 4px #000;
  -moz-box-shadow:0 2px 4px #000;
  box-shadow:0 2px 4px #000;
}

button.myButtonFSC:active {
  box-shadow:inset 1px 2px #000;
  padding-top:6px;
  padding-left:7px;
}

button.myButtonFSC :hover {
  cursor: pointer;
}

button.myButtonSML
{
	width: 50px;
	height: 50px;
	font-size: 10px;
}

button.myButtonGreen {
  background: -moz-linear-gradient(0% 100% 90deg, #ffffff, #36f22c);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#36f22c), to(#ffffff));
  background: linear-gradient(#36f22c,#ffffff);
  border-top:5px solid #ffffff;    /* Level 1 */
  border-right:6px solid #2a4704;  /* Level 3 */
  border-bottom:6px solid #2a4704; /* Level 4 */
  border-left:5px solid #cceecc;   /* Level 5 */
  color: black;
}

button.myButtonDarkGreen {
  background: -moz-linear-gradient(0% 100% 90deg, #ffffff, green);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from( green), to(#ffffff));
  background: linear-gradient(green, #ffffff);
  border-top:5px solid #ffffff;    /* Level 1 */
  border-right:6px solid #2a4704;  /* Level 3 */
  border-bottom:6px solid #2a4704; /* Level 4 */
  border-left:5px solid #cceecc;   /* Level 5 */
}

button.myButtonYellow {
  background: -moz-linear-gradient(0% 100% 90deg, #ffffff, yellow);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(yellow), to(#ffffff));
  background: linear-gradient(yellow, #ffffff);
  border-top:5px solid #ffffff;    /* Level 1 */
  border-right:6px solid #a8b541;  /* Level 3 */
  border-bottom:6px solid #a8b541; /* Level 4 */
  border-left:5px solid #ffffd4;   /* Level 5 */
  color: brown;
}

button.myButtonRed {
  background: -moz-linear-gradient(0% 100% 90deg, #ffffff, red);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(red), to(#ffffff));
  background: linear-gradient(red, #ffffff);
  border-top:5px solid #ffffff;    /* Level 1 */
  border-right:6px solid #940000;  /* Level 3 */
  border-bottom:6px solid #940000; /* Level 4 */
  border-left:5px solid #f5dada;   /* Level 5 */
}

button.myButtonBlue{
  background: -moz-linear-gradient(0% 100% 90deg, #ffffff, blue);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(blue), to(#ffffff));
  background: linear-gradient(blue, #ffffff);
  border-top:5px solid #ffffff;    /* Level 1 */
  border-right:6px solid #130773;  /* Level 3 */
  border-bottom:6px solid #130773; /* Level 4 */
  border-left:5px solid #dbd7f2;   /* Level 5 */
}

#warning
{
	width: 400px;
	height: 100px;
	background: white;
	font-size: 26px;
	color: blue;
	margin: auto;
	font-family: Arial;
	text-align: center;
	padding: 20px;
}

#welcome
{
	width: 400px;
	height: 120px;
	background: ivory;
	font-size: 26px;
	margin: auto;
	font-family: Arial;
	text-align: center;
	padding: 40px;
	position: absolute; 
	top: 6		0%; 
	left: 32%; 
	border-radius: 10px; 
	
	background: -moz-linear-gradient(0% 100% 90deg, #ffffff, khaki);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(khaki), to(#ffffff));
	background: linear-gradient(khaki, #ffffff);	
	
	box-shadow: 4px 0 3px rgba(0,0,0,0.25);
	-moz-box-shadow: 4px 0 3px rgba(0,0,0,0.25);
	-webkit-box-shadow: 4px 0 3px rgba(0,0,0,0.25);	
}	

#welcome a
{
	color: brown;
	font-family: Tahoma;
}

#welcome a:hover
{
	color: blue;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.75);
}

#toggle {
  position:absolute;
  display: block;
  cursor:pointer;
  left:-100%;
  top:-100%;
}

#toggle + label {
  position:absolute;
  cursor:pointer;
  padding:10px;
  background: #26ae90;
width: 100px;
border-radius: 3px;
padding: 8px 10px;
color: #FFF;
line-height:20px;
font-size:12px;
text-align:center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
  margin:20px 50px;
  transition:all 500ms ease;
 left: calc(100vw - 250px);
 top: calc(100% - 60px);
 }
#toggle + label:after {
  content:"Lihat Info" 
}

.containerS {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding:5em 3em;
}

#toggle:checked ~ .message {
  top: 0;
}

#toggle:checked ~ .containerS {
  margin-top: 250px;
}

#toggle:checked + label {
  background:#dd6149;
}

#toggle:checked + label:after {
  content:"Tutup Info"
}
/* ================================== */
/*toggleSoal untuk pilih nomor soal*/
/* ================================== */

#toggleSoal {
  position:absolute;
  display: block;
  cursor:pointer;
  left:-100%;
  top:-100%;
}

#toggleSoal + label {
  position:absolute;
  cursor:pointer;
  padding:10px;
  background: #26ae90;
width: 100px;
border-radius: 3px;
padding: 8px 10px;
color: #FFF;
line-height:20px;
font-size:12px;
text-align:center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
  margin:20px 50px;
  transition:all 500ms ease;
 left: calc(100vw - 390px);
 top: calc(100% - 60px);
}
 
#toggleSoal + label:after {
  content:"Pilih Nomor" 
}

.calendarWrapper {
  transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding:5em 3em;
}
/*
#toggleSoal:checked ~ .message {
  top: 0;
}
*/
#toggleSoal:checked ~ .calendarWrapper {
  margin-top: 500px;
}

#toggleSoal:checked + label {
  background:#dd6149;
}

#toggleSoal:checked + label:after {
  content:"Batal Pilih"
}