/*
TMF0018 - вернул стиль для button:focus;
TMF0004 - новые логи
*/
html, body {
  margin: 0;
  padding: 0;
  overflow: auto;
  overscroll-behavior: none;
  
  background-color: white;
}

hr {
  width: 90%;
}

.mirror {
  transform: scale(-1, 1);
}

button {
  font-size: 16px;
  outline: none;
  /*border-color: rgb(200, 200, 200);
  transition: background-color 0.2s ease;
  border-width: 4px;
  border-style: solid;*/
  border:none;
  color: black;
  background-color: #C7E1FF;/* rgb(200, 200, 200);*/
  padding: 3px 5px;
  border-radius: 3px;
  box-shadow: 0 3px #999;
  margin: 0px 1px;
}

button:hover {
  opacity: 0.9;
  /*background-color: rgb(230, 230, 230);
  border-color: rgb(230, 230, 230);*/
}

button:active{
 box-shadow: 0 0px #999; 
 transform: translateY(3px);
}

button:focus { 
  outline: none;
  box-shadow: 0 0px #999; 
  transform: translateY(3px);
}

.halfbutton{
  background-color: lightgreen;
  /*border-color: green;
  border-width: 4px;*/
}

.activebutton{
  box-shadow: 0 0px #999;
  transform: translateY(3px);
  /*opacity: 0.6;
  /*background-color: lightblue;
  /*border-color: grey;
  border-width: 4px;
  border-style: groove;*/
}

button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.session {
  color:black;
  font-size: 16px;
  padding: 5px;
  width: 100%;
  border:1px solid lightgrey;
  /*background-color: #80BBFF;*/
  border-radius: 3px;
  margin-bottom: 2px;
  text-align: left;
}

.session:hover{
  cursor: pointer;
}

.usersH {
  font-size: 22px;
  margin: 5px 0px;
}

.userInJob, .userInSession {
  color:black;
  font-size: 16px;
  padding: 5px;
 /* width: 100%;*/
  background-color: #80BBFF;
  border-radius: 3px;
  margin: 1px;
  text-align: left;
  white-space: nowrap;
}

.userInJob:hover, .userInSession:hover {
  cursor:pointer;
  opacity: 0.7;
}

.blockedUser {
  opacity: 0.7;
  /*background-color: lightgrey;
  color: white;*/
}

.observer {
  color: white;
}

.blockedUser:hover {
  cursor:default;
  opacity: 0.7;
}

.selectMe {
  background-color: lightgreen;  
}

.selectedByMe {
  background-color: lightblue;  
}

.selectedByMe:hover{
  cursor:default;
  opacity: 1;
}

.hidden {
  display: none !important;
}

#div-msg { /*TMF0004*/
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  padding: 20px 30px;
  background-color: #80BBFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 5px;
  text-align: center;
  overflow: auto;
  font-size: 18px;
  opacity: 0.9;
}

/*TMF0004 start*/
.cinemamng {
  background-color: yellow;
}

.cinemamngblink {
  -webkit-animation: blink 0.8s linear infinite;
  animation: blink 0.8s linear infinite;
}
@-webkit-keyframes blink {
  50% { color: rgb(255, 0, 0); }
  51% { color: rgba(255, 0, 0, 0); }
  100% { color: rgba(255, 0, 0, 0); }
}
@keyframes blink {
  50% { color: rgb(255, 0, 0); }
  51% { color: rgba(255, 0, 0, 0); }
  100% { color: rgba(255, 0, 0, 0); }
}
/*TMF0004 end*/
#game-canvas {
  width: 100%;
  height: 100%;
  font-size: 18px;
  /*border:1px solid grey;*/
}

#div-canvas-menu {
  /*border:1px solid black;*/
  padding: 0px 5px 5px 5px;
  font-size: 18px;
  position: relative;
  border-bottom: 1px solid grey;
}

#div-canvas-footer-menu {
  /*border:1px solid black;*/
  padding: 5px 5px;
  height: 30px;
  font-size: 16px;
  position: relative;
  text-align: left;
  /*border-top: 1px solid grey;*/
}

#div-canvas-menuText {
  font-size: 18px;
}

#div-canvas-menuText p {
  margin-bottom: 5px;
  margin-top: 5px;
}

#div-canvas {
  overflow: hidden;
  /*
  border:1px solid black;
  display: flex;
  flex-direction: column;
  transform: translateY(-50%) translateX(-50%);
  height: 600px;
  width: 1000px;
  top: 50%;
  left: 50%;
  position: static;
  padding: 5px 10px;
  align-items: center;
  border-radius: 5px;
  border: 2px solid grey;
  text-align: center;
  overflow: auto;
  overflow: visible;
  height: 100%;
  width: 100%;
  */
}

#div-job {
  position: fixed;
  top: 5%;
  left: 50%;
  height: 90%;
  /*width: 300px;*/
  transform: translateY(-3%) translateX(-50%);
  padding: 5px 10px;
  /*background-color: lightgrey;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 5px;
  border: 2px solid grey;
  text-align: center;
  overflow: auto;
}

#play-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  padding: 20px 30px;
  background-color: #80BBFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 5px;
  text-align: center;
  overflow: auto;
}

#play-menu p {
  margin-bottom: 0;
}

#play-menu input[type='text'] {
  font-size: 18px;
  outline: none;
  border: none;
  border-bottom: 1px solid black;
  margin-bottom: 5px;
  padding: 3px;
  text-align: center;
}

#play-menu input[type='text']:hover {
  outline: none;
}

#play-menu input[type="radio"] {
  width: 1.5em;
  height: 1.5em;

}

#play-menu input[type="radio"]:checked {
  border-color: grey;
  background-color: grey;  
}

#disconnect-modal, #lock-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 2;
}

#templock-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0);
  z-index: 2;
}

#disconnect-modal > div, #lock-modal > div {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  padding: 15px 20px;
  background-color: white;
  border-radius: 5px;
  text-align: center;
}

@media screen and (max-width: 640px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  #play-menu {
    padding: 10px 15px;
    min-width: 280px;
  }

  #disconnect-modal > div, #lock-modal > div {
    padding: 10px;
    min-width: 280px;
  }

  #leaderboard th {
    padding: 0 3px;
  }

  #leaderboard td {
    padding: 0 3px;
  }

  #leaderboard table {
    font-size: 14px;
  }
}