@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto"), url("../fonts/Roboto-Regular.ttf");
}

@font-face {
  font-family: "Geometos";
  font-style: normal;
  font-weight: 400;
  src: local("Geometos"), url("../fonts/geometosrusbydaymarius.ttf");
}

* {
  padding: 0;
  margin: 0;
  font-family: "Roboto";
  font-weight: 400;
}

table {
  border-collapse: collapse;
  margin: 10px;
}

tr {
  border: none;
}

td,
th {
  border: solid black 1px;
  padding: 5px;
}

body {
  display: grid;
  grid-template-rows: auto auto 40px;
}

.hdr {
  background-color: #3f6cb2;
  color: white;
}

.btm {
  background-color: #388121;
  color: #fff;
  display: grid;
  align-items: center;
}

button {
  font-size: large;
}

#tagsHran>*::before {
  content: "#";
}

.main {
  padding: 5px;
}


.hdr label {
  color: #041a3d;
}

#imgs>img {
  max-width: 90vw;
}

#recBtn.strt>span:nth-child(1) {
  display: block;
}

#recBtn.strt>span:nth-child(2) {
  display: none;
}

#recBtn>span:nth-child(2) {
  display: block;
}

#recBtn>span:nth-child(1) {
  display: none;
}

#qrScaner {
  max-width: 100vw;
  max-height: 50vh;
}

#showDialog {
  display: block;
  width: 84vw;
  height: 84vh;
  left: 8vw;
  top: 3vh;
  position: absolute;
  background-color: #fff;
  box-shadow: 4px -1px 18px 16px rgba(34, 60, 80, 0.17);
  padding: 5px;
  border-radius: 4px;
}

#showDialog .hdr{
  padding: 3px;
  margin: -5px;
  margin-bottom: 5px;
  background-color: #1b104b;
  border-radius: 4px 4px 0px 0px;

}

#showDialog .btm2{
  position: absolute;
  bottom: 5px;
  width: calc(100% - 10px) ;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
#showDialog .btm2 button{
  margin: 5px;
  background-color: none !important;
}
#showDialog img{
  max-width: calc(100% - 15px);
}

#showDialog .fa-square-xmark{
  display: none;
}
#showDialog .tg::before {
  content: "#";
}
.verefy{
  background-color: #11cf2b65;
}
#showDialog .content{
  max-height: calc(84vh - 100px);
  overflow-y: auto;
}