/* roboto-mono-regular - latin */
@font-face {
  font-family: 'RobotMono';
  font-style: normal;
  font-weight: 400;
  src: local('Mono'), local('RobotoMono-Regular'),
       url(Mono.woff2) format('woff2'), /* Super Modern Browsers */
}


@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('OpenSans'), url(OpenSans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body{
 font-family: 'Open Sans', serif;
}

/* 
 * https://www.w3schools.com/css/css_boxmodel.asp
 * margin = space between outer space and boarder
 * border = border width
 * padding = space between border and content
 */

/*
 * gui <div class="gui"> .... <div> 
 */

.gui {
 font-size: 3vh;
 margin: 0;
}

.devicepair {
 display: table;
 table-layout: fixed;
 margin: 0 auto;
 width: 160vh;
 height: 80vh;

}

.devicepair > * {
  display: table-cell;
}

/************* left side *********************/

.devicecontainer {
}

.maindevice {
 display: flex;
 flex-direction: column;
 margin-left: 7vh;
 margin-right: 3vh;
}

.screencontainer {
 position: relative;
 z-index: 1;
}

.screen {
 position: absolute;
 margin-left: 3.8vh;
 margin-top: 8vh;
 width: 36vh;
 height: 62vh;
}

/************** middle ************************/


.communication{
 font-size: 2vh;
 position: absolute;
 height: 60vh;
 width: 55vh;
 margin-top: 4vh;
 padding-top: 4vh;
}

.communication > p {
 font-size: 2vh;
 margin-left: 3vh;
 margin-bottom: 0;
}

.communication > img {
  margin: 0 5% 1vh 5%;
  width: 90%;
}

/************** right ************************/

.peercontainer{
 position: relative;
}

.peer {
 padding: 0% 0 0% 0;
}

.peer .tiptext {
  font-family: 'Open Sans', serif;
  font-size: 3vh;
  visibility: hidden;
  width: 50vh;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 3vh;
  padding: 2vh 0;
  /* Position the tooltip */
  position: absolute;
  right: 50vh;
  z-index: 1;
}


.peer:hover .tiptext {
  visibility: visible;
}
.peer > img {
 position: absolute;
 width: 80%;
 transition: opacity .2s ease 0.3s;
 display: block;
 left: 10%;
 top: 3%;
 height: 95%;
}

.peer > .hide {
 transition: opacity .3s ease;
 opacity: 0;
}

/********************************************/

/********** screen1 *************************/
.displayintro{
 height: 14%; /*of maindevice */
 width: 100%;
 margin-bottom: 1vh;
}

.displayband{ /*redundant*/
 display: flex;
 flex-direction: row;
 height: 60%; /*of maindevice*/
 width: 100%;
}


.displayleftright{
 width: 10%; /*of maindevice / displayband*/
 height: 100%; /*of displayband*/
 display: block;
 margin-bottom: auto;
 text-align: center;
}


.displaybottom{
 height: 18%; /* of maindevice */
 width: 80%;
 margin: 0vh auto;
}


.cardbutton{
 background-color: #ffffff;
 display: flex;
 flex-direction: column;
 height: 30vh; /*of displayband*/
 border-style: none;
 cursor: pointer;
 margin: 4vh auto;
}

.cardbutton:hover .tooltiptext {
  visibility: visible;
}

.title {
 font-size: 8vh;
 font-weight: bold;
}

/********** screen2 *************************/

.deviceimage {
 position: relative;
 width: 100%;
}

.crpinfo {
 /*margin: .5em 0;
 padding: 0 1em;
 text-align: left;*/
}

.numberCRPs {
}

.crpinfo > button {
  /*float: right;*/
  width: 100%;
  vertical-align: center;
}


.card{
 display: flex;
 flex-direction: column;
 width: 80%; /*of displayband*/
 height: 90%; /*of displayband*/
 border-width: 1vh;
 border-style: solid;
 background-color: #e0e0e0;
}

.cardheadline{
 background-color: #e0e0e0;
 padding-top: 1vh;
 padding-bottom: 1vh;
 height: 10%;/*of card*/
 width: 100%;
 text-align: center;
 font-weight: bold;
}

.cardheadline .tooltiptext {
  font-family: 'Open Sans', serif;
  font-size: 3vh;
  visibility: hidden;
  width: 50vh;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 3vh;
  padding: 2vh 0;
  /* Position the tooltip */
  position: absolute;
  left: 40vh;
  z-index: 1;
}


.cardheadline:hover .tooltiptext {
  visibility: visible;
}

.prevnext{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 background-color: white;
 border-style: none;
 text-decoration: none;
 cursor: pointer;
 color: #e0e0e0;
 font-weight: bold;
 font-size: 5vh;
}

.prevnext:hover .tooltiptext {
  visibility: visible;
}


.cardimage{
 width: 40%;/*of card*/
 display: inline-block;
 padding-top: 10%;
 padding-left: auto;
 padding-right: auto;
 padding-bottom: 10%;
 margin-left: auto;
 margin-right: auto;
}

.card table{
 font-family: RobotMono, monospace;
 font-size: 2vh;
 width: 100%;
 height: 10vh; 
 padding: 0;
 border-spacing: 1vh;
}

.card table:hover .tooltiptext {
  visibility: visible;
}


button.action {
 font-size: 2vh;
 width: 100%;
 height: 5vh;
 margin: .5vh auto;
}

button.action .tooltiptext {
  font-family: 'Open Sans', serif;
  font-size: 3vh;
  visibility: hidden;
  width: 50vh;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 3vh;
  padding: 2vh 0;
  /* Position the tooltip */
  position: absolute;
  left: 40vh;
  z-index: 1;
}

button.action:hover .tooltiptext {
  visibility: visible;
}

/********** screen3 *************************/
.crplist {
  border-collapse: collapse;
  width: 80%;
  margin: 1vh auto 1vh auto;
  font-family: RobotMono, monospace;
  font-size: 2vh;
}

.crplist td {
 border: 1vh solid thin;
 border-collapse: collapse;
 padding-right: 1vh;
}

.crplist tr {
  background-color: #f5f5f5;
  padding-right: 1vh;
}

.crplist tr.upper {
  border-top: 1vh solid white;
}

.crplist tr.lower {
}

.crplist td.index {
  padding: 0 1vh;
}

.crplist td.challenge {
 border-style-width: medium;
}


.hidden {
	display: none;
}


* .tooltiptext {
  font-family: 'Open Sans', serif;
  font-size: 3vh;
  font-weight: normal;
  visibility: hidden;
  width: 50vh;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 3vh;
  padding: 2vh 0;

  /* Position the tooltip */
  position: absolute;
  left: 40vh;
  z-index: 1;
}