* {
    margin: 0 0 0 0;
    padding: 0;
}

body {
    background-color: #000;
    color: #fff;
    font-family: "roboto_slabthin", sans-serif;
    text-align: center;
    font-size: 1.2em;
    line-height: 1.5em;
}


h1 {
  font-family: "roboto_slablight", serif;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1.4em;
  line-height: 2.0em;
}


div.page {
    width: 100%;
    margin: 0px auto;
    position: absolute;
}


div.pageobject {
  /* border: 1px solid green; */
  margin-top: 20px;
  margin-bottom: 10px;
  width: 500px;
}


div.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: auto;
}

div.console_box {
  /* border: 1x solid blue; */
  position: relative;
  width: 500px;
}

div.console_left {
  /* border: 1px solid magenta; */
  position: absolute;
  left: 0px;
  transition: 2s left;
  animation-timing-function: ease-in-out;
}

div.console_right {
  /* border: 1px solid cyan; */
  position: absolute;
  left: 236px;
  transition: 2s left;
  animation-timing-function: ease-in-out;
}



div.panel {
  /* border: 1px solid cyan; */
  visibility: hidden;
  position: absolute;
  width: 420px;
  height: 500px;
  margin-left: 40px;
  background-image: url('../images/panel_back.png');
  text-align: center;
}

div.dpanel {
  /* border: 1px solid cyan; */
  visibility: hidden;
  position: absolute;
  width: 420px;
  height: 500px;
  margin-left: 40px;
  background-image: url('../images/panel_back.png');
  text-align: center;  
  transition: 1s transform;
  animation-timing-function: ease-in-out;
  transform: scale(0,0);
}




div.dpanel p.txt {
  font-size: 0.9em;
  line-height: 1.3em;
  margin-top: 0.65em;
  padding: 0 10px 0 10px;
}


.label {
  font-family: "unica_oneregular", sans-serif;
  font-size: 1.2em;
  background-color: #660000;
  color: #fff;
  margin: 0 110px 0 110px;
  text-align: center;
  margin-top: 30px;
}


div.timedisplayline {
  /* border: 1px solid white; */
  margin-top: 10px;
  width: 400px;
  margin-left:auto;
  margin-right: auto;
  color: #B00;
  font-family: 'dseg14_regular';
}

div.timedisplay {
  display:inline;
  background-color: #000;
  padding: 5px 10px 5px 10px;
  border-bottom: 1px solid #333;
  border-right: 1px solid #333;
  border-radius: 5px;
}

.destdisplay {
  margin-top: 20px;
  margin-bottom: 20px;
  font-family: 'dseg14_regular';
  color: #C00;
}


table {
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

td {
  width: 20px;
  text-align: center;
  padding: 8px;
}


table.solverPanel {
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
  padding: 0px;
}

table.solverPanel td {
  text-align: left;
  padding: 0px 0px 0px 10px;
  font-size: 0.9em;
}

.solveIcons {
  font-family: "icons";
  color: #099;
}

.solveIconsSolution {
  font-family: "icons";
  font-size: 1.5em;
  color: #ccc;
  margin-top: 1em;
  margin-right: 0.5em;
}



.sbutton {
  background-image: url('../images/button_small_2.png');
  background-size: cover;
  color: #999;
  border: none;
  cursor: pointer;
  width: 35px;
  height: 35px;
  font-family: "icons";
  font-size: 1em;
}

.sbutton:hover {
    opacity: 0.5;
}

.sbutton:active {
    opacity: 0.2;
}


.bbutton {
  background-image: url('../images/button_big.png');
  background-size: cover;
  font-family: "unica_oneregular", sans-serif;
  font-size: 1.2em;
  color: #fff;
  border: none;
  cursor: pointer;
  width: 75px;
  height: 50px;
  margin-top: 0px;  
}

.bbutton:hover {
    opacity: 0.5;
}

.bbutton:active {
    opacity: 0.2;
}


.colorSolution {
  color: #00ff00;
}



@font-face {
    font-family: 'roboto_slabbold';
    src: url('../fonts/RobotoSlab-Bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'roboto_slablight';
    src: url('../fonts/RobotoSlab-Light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'roboto_slabregular';
    src: url('../fonts/RobotoSlab-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'roboto_slabthin';
    src: url('../fonts/RobotoSlab-Thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'unica_oneregular';
    src: url('../fonts/unicaone-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'dseg14_regular';
    src: url('../fonts/DSEG14Classic-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'icons';
    src: url('../fonts/fa-solid-900.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}