﻿@font-face {
  font-family: cons;
  src: url(font/consola.ttf);
}
@font-face {
  font-family: consBold;
  src: url(font/consolab.ttf);
}
@font-face {
  font-family: consItalic;
  src: url(font/consolai.ttf);
}
@font-face {
  font-family: compBoldItalic;
  src: url(font/consolaz.ttf);
}
.modal-backdrop {
  background-color: #00000099;
}
* {
  margin: 0;
  padding: 0;
}
a {
  color: #0f0;
}
a:hover {
  color: #0f0;
  text-decoration: none;
}
body {
  background: #000;
}
hr {
  border: 1px solid #05b705;
  margin: 5px;
}
canvas {
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  padding: 5px;
  text-align: center;
}
.verticalCenter {
  position: relative;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  padding: 5px;
  text-align: center;
}
.parentArea {
  padding: 30px 0px 30px 0px;
  color: #0f0;
  font-family: cons;
}
.blackArea {
  background-color: #000;
  display: inline-block;
  padding: 20px 30px 20px 30px;
}
@media (max-width: 800px) {
  .blackArea {
    padding: 10px 15px 10px 15px;
  }
}
@media (max-width: 600px) {
  .blackArea {
    padding: 6px 10px 6px 10px;
  }
}
@media (max-width: 400px) {
  .blackArea {
    padding: 4px 6px 4px 6px;
  }
}
.animationArea {
  position: relative;
  color: #0f0;
}
.hi {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}
.name {
  position: absolute;
  right: 0;
  display: none;
}
.description {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
}
.descriptionArea {
  font-size: 12pt;
}
@media (max-width: 800px) {
  .descriptionArea {
    font-size: 11pt;
  }
}
@media (max-width: 600px) {
  .descriptionArea {
    font-size: 10pt;
  }
}
@media (max-width: 400px) {
  .descriptionArea {
    font-size: 8pt;
  }
}
.nameArea {
  font-size: 25pt;
  margin: 0px 0 20px 0;
}
@media (max-width: 800px) {
  .nameArea {
    font-size: 23pt;
  }
}
@media (max-width: 600px) {
  .nameArea {
    font-size: 21pt;
  }
}
@media (max-width: 400px) {
  .nameArea {
    font-size: 18pt;
  }
}
.buttonArea {
  width: 800px;
}
@media (max-width: 800px) {
  .buttonArea {
    width: 450px;
  }
}
@media (max-width: 600px) {
  .buttonArea {
    width: 350px;
  }
}
@media (max-width: 400px) {
  .buttonArea {
    width: 290px;
  }
}
.button {
  background-color: #000000;
  width: 190px;
  margin: 50px 1px 10px 1px;
  padding: 12px 0px 12px 0px;
  font-size: 12pt;
}
@media (max-width: 800px) {
  .button {
    width: 90%;
    margin: 10px 0 10px 0;
  }
}
@media (max-width: 500px) {
  .button {
    width: 90%;
    margin: 5px 0 5px 0;
  }
}
button {
  border: 1px solid #0f0;
  background-color: #000000;
  color: #0f0;
  font-family: cons;
}
.button:hover {
  background-color: #005600;
  cursor: pointer;
}
/* Marquee styles */
.marquee {
  --gap: 1px;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}
.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  list-style-type: none;
}
.marquee__content img {
  width: 100px;
  object-fit: contain;
}
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}
/* Enable animation */
.enable-animation .marquee__content {
  animation: scroll 30s linear infinite;
}
/* Attempt to size parent based on content. Keep in mind that the parent width is equal to both content containers that stretch to fill the parent. */
.marquee--fit-content {
  max-width: fit-content;
}
/* A fit-content sizing fix: Absolute position the duplicate container. This will set the size of the parent wrapper to a single child container. Shout out to Olavi's article that had this solution 👏 @link: https://olavihaapala.fi/2021/02/23/modern-marquee.html  */
.marquee--pos-absolute .marquee__content:last-child {
  position: absolute;
  top: 0;
  left: 0;
}
/* Enable position absolute animation on the duplicate content (last-child) */
.enable-animation .marquee--pos-absolute .marquee__content:last-child {
  animation-name: scroll-abs;
}
@keyframes scroll-abs {
  from {
    transform: translateX(calc(100% + var(--gap)));
  }
  to {
    transform: translateX(0);
  }
}
/* Other page demo styles */
.marquee__content > * {
  flex: 0 0 auto;
  color: white;
  text-align: center;
}
.popupBackground {
  background-color: #000;
  border: 1px solid #0f0;
  color: #0f0;
  padding: 20px 20px 0 20px;
}
.popupBackground input {
  height: 50px;
  width: 100%;
  display: inline;
  border: 1px solid #0f0;
  background-color: #024202;
  color: #0f0;
  margin: 10px 0 0 0;
  padding: 5px;
}
.popupBackground textarea {
  background-color: #024202;
  border: 1px solid #0f0;
  margin: 10px 0 0 0;
  color: #0f0;
  height: 150px;
}
.popupBackground button {
  width: 150px;
  height: 50px;
  margin: 20px 0 20px 0;
  padding: 2px 0 2px 0;
}
@media (max-width: 600px) {
  .popupBackground button {
    width: 140px;
    height: 45px;
  }
}
@media (max-width: 500px) {
  .popupBackground button {
    width: 120px;
    height: 40px;
  }
}
.popupBackground label {
  color: #ff0000;
  height: 100%;
  margin-bottom: 0;
  font-family: Consolas;
  font-size: 10pt;
}
.popupBackground pre {
  color: #0f0;
}
@media (max-width: 600px) {
  .popupBackground {
    padding: 15px 15px 0 15px;
  }
}
@media (max-width: 400px) {
  .popupBackground {
    padding: 10px 10px 0 10px;
  }
}
table * {
  vertical-align: middle;
}
.reputationArea {
  width: 30%;
  vertical-align: top;
}
@media (max-width: 500px) {
  .reputationArea {
    width: 40%;
    vertical-align: middle;
  }
}
.socialMediaBadge {
  display: inline-block;
  width: 49%;
  text-align: left;
}
@media (max-width: 500px) {
  .socialMediaBadge {
    display: block;
    width: 100%;
  }
}
.lotoKitabiWebDesc {
  text-align: justify;
  font-size: 11pt;
  padding: 8px 0 8px 0;
}
@media (max-width: 600px) {
  .lotoKitabiWebDesc {
    font-size: 9pt;
  }
}
@media (max-width: 400px) {
  .lotoKitabiWebDesc {
    font-size: 8pt;
  }
}
.lotoKitabiLink {
  font-size: 14pt;
  display: block;
  text-decoration: underline;
  width: 100%;
  text-align: right;
}
@media (max-width: 600px) {
  .lotoKitabiLink {
    font-size: 12pt;
  }
}
@media (max-width: 400px) {
  .lotoKitabiLink {
    font-size: 10pt;
  }
}
.lotoKitabiLink:hover {
  color: white;
}
.lotoKitabiMobileDesc {
  margin-right: 105px;
  padding-top: 5px;
  display: block;
  font-size: 11pt;
}
@media (max-width: 600px) {
  .lotoKitabiMobileDesc {
    font-size: 10pt;
  }
}
@media (max-width: 400px) {
  .lotoKitabiMobileDesc {
    font-size: 8pt;
  }
}
.lotoKitabiMobileTitle {
  display: inline;
  font-family: 'Times New Roman';
  font-size: 14pt;
}
@media (max-width: 600px) {
  .lotoKitabiMobileTitle {
    font-size: 12pt;
  }
}
@media (max-width: 400px) {
  .lotoKitabiMobileTitle {
    font-size: 10pt;
  }
}
.googlePlayLink {
  display: inline;
  font-family: 'Times New Roman';
  font-size: 13pt;
}
@media (max-width: 500px) {
  .googlePlayLink {
    font-size: 12pt;
  }
}
@media (max-width: 380px) {
  .googlePlayLink {
    display: block;
    font-size: 11pt;
  }
}
.googlePlayLink span {
  text-decoration: underline;
}
.googlePlayLink span:hover {
  color: white;
}
.barcodeDiv {
  position: absolute;
  width: 110px;
  height: 110px;
  right: 0;
}
.barcodeDiv a {
  text-decoration: none;
}
.barcodeDiv a img {
  width: 100px;
  height: 100px;
  margin-left: 7px;
  margin-top: 7px;
}
.barcodeDiv a img:hover {
  width: 110px;
  height: 110px;
  margin-left: 0px;
  margin-top: 0px;
}
.popupExperiences {
  background-color: #000;
  border: 1px solid #0f0;
  color: #0f0;
  padding: 20px;
}
@media (max-width: 450px) {
  .popupExperiences {
    padding: 15px;
  }
}
@media (max-width: 400px) {
  .popupExperiences {
    padding: 10px;
  }
}
@media (max-width: 350px) {
  .popupExperiences {
    padding: 5px;
  }
}
.popupExperiences p {
  text-align: center;
  display: block;
  width: 100%;
  font-family: Consolas;
}
.popupExperiences .button {
  display: block;
  text-align: center;
  width: 100%;
  height: 50px;
  font-size: 11pt;
  border: 1px solid #0f0;
  margin: 2px 0 2px 0;
  padding: 12px 0 0 0;
}
.tableDiv {
  display: block;
  text-align: center;
  background-color: #000;
  border: 1px solid #0f0;
  color: #0f0;
  padding: 0 0 12px 0;
}
.tableDiv label {
  width: 100%;
  height: 30px;
  display: grid;
  align-items: center;
  margin: 0;
}
.tableDiv .button {
  display: inline-grid;
  text-align: center;
  width: 31%;
  font-size: 11pt;
  margin: 0;
  border: 1px solid #0f0;
  margin-bottom: 4px;
}
@media (max-width: 500px) {
  .tableDiv .button {
    width: 48%;
  }
}
.tableDiv .button span {
  display: block;
}
.tableDiv .button img {
  width: 100%;
  height: 75px;
  padding: 0 0 5px 0;
  object-fit: contain;
}
.certificates {
  background-color: #000;
  border: 1px solid #0f0;
  color: #0f0;
  padding: 20px;
}
@media (max-width: 450px) {
  .certificates {
    padding: 10px;
  }
}
@media (max-width: 400px) {
  .certificates {
    padding: 5px;
  }
}
@media (max-width: 350px) {
  .certificates {
    padding: 2px;
  }
}
.certificates p {
  text-align: center;
  display: block;
  width: 100%;
  font-family: Consolas;
}
@media (max-width: 450px) {
  .certificates p {
    margin-bottom: 10px;
  }
}
@media (max-width: 350px) {
  .certificates p {
    margin-bottom: 5px;
  }
}
@media (max-width: 250px) {
  .certificates p {
    margin-bottom: 2px;
  }
}
.certificates .button {
  display: block;
  text-align: center;
  width: 100%;
  height: 50px;
  font-size: 11pt;
  border: 1px solid #0f0;
  margin: 2px 0 2px 0;
  padding: 12px 0 0 0;
}
@media (max-width: 450px) {
  .certificates .button {
    font-size: 10pt;
    padding: 10px 0 0 0;
    height: 45px;
  }
}
@media (max-width: 350px) {
  .certificates .button {
    font-size: 9pt;
    padding: 8px 0 0 0;
    height: 40px;
  }
}
@media (max-width: 250px) {
  .certificates .button {
    font-size: 8pt;
    padding: 6px 0 0 0;
    height: 35px;
  }
}
#greenArea {
  background-color: #0f0;
  position: absolute;
  z-index: -11;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 1px;
}
#background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -10;
  background-color: #2e2e2e;
}
.exBackground {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url("../i/bg_admin.png") repeat;
  background-size: 70px;
}
.logoArea {
  position: relative;
  width: 100%;
  height: 250px;
  margin-top: 20px;
}
.logoArea #imgLogo {
  width: 180px;
  height: 180px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 600px) {
  .logoArea {
    height: 200px;
  }
  .logoArea #imgLogo {
    width: 160px;
    height: 160px;
  }
}
@media (max-width: 300px) {
  .logoArea {
    height: 180px;
  }
  .logoArea #imgLogo {
    width: 140px;
    height: 140px;
  }
}
@media (max-height: 800px) {
  .logoArea {
    margin-top: 10px;
  }
}
@media (max-height: 600px) {
  .logoArea {
    margin-top: 0px;
  }
}
#logoFirstLight {
  position: absolute;
  z-index: -1;
  width: 180px;
  height: 180px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#logoSecondLight {
  width: 180px;
  height: 180px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.exFolders {
  text-align: center;
  margin: 300px 0 0 0;
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px 100px;
  /*--------------------------*/
}
.exFolders div {
  display: grid;
  color: #0f0;
  cursor: pointer;
}
.exFolders div div {
  width: 100%;
  height: 65px;
  background: url('../i/folder.png') no-repeat;
  background-size: contain;
  background-position: center;
  text-align: center;
  position: relative;
}
.exFolders div div img {
  width: 100%;
  height: 35px;
  object-fit: contain;
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
}
@media (max-width: 600px) {
  .exFolders {
    margin: 100px 0 0 0;
    grid-template-columns: 100px 100px 100px;
  }
}
@media (max-width: 300px) {
  .exFolders {
    margin: 50px 0 0 0;
    grid-template-columns: 100px 100px;
  }
}
@media (max-height: 700px) {
  .exFolders {
    margin: 50px 0 0 0;
  }
}
@media (max-height: 600px) {
  .exFolders {
    margin: 30px 0 0 0;
  }
}
@media (max-height: 500px) {
  .exFolders {
    margin: 0;
  }
}
.pdfFrame {
  width: 100%;
  height: 850px;
  border: 0;
}
@media (max-height: 900px) {
  .pdfFrame {
    height: 750px;
  }
}
@media (max-height: 850px) {
  .pdfFrame {
    height: 700px;
  }
}
@media (max-height: 800px) {
  .pdfFrame {
    height: 650px;
  }
}
@media (max-height: 750px) {
  .pdfFrame {
    height: 600px;
  }
}
@media (max-height: 700px) {
  .pdfFrame {
    height: 550px;
  }
}
@media (max-height: 650px) {
  .pdfFrame {
    height: 500px;
  }
}
@media (max-height: 600px) {
  .pdfFrame {
    height: 400px;
  }
}
.pdfClose {
  text-align: right;
  color: #0f0;
  border: 1px solid #0f0;
  height: 32px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  cursor: pointer;
}
.pdfClose:hover {
  color: #0f0;
}
.pdfHeader {
  position: absolute;
  top: 0;
  height: 32px;
  padding: 4px 0;
  margin: 0;
  color: #0f0;
}
.warnContent {
  background-color: black;
  border: 1px solid green;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
}
.warnImage {
  width: 70px;
  height: 70px;
  margin: 8px 8px 8px 8px;
  display: inline-grid;
  align-content: center;
  align-self: center;
  font-size: 46pt;
  font-family: con;
  font-weight: bold;
  border-radius: 50px;
  background-color: #ff0000;
  color: white;
  text-align: center;
}
@media (max-width: 995px) {
  .warnImage {
    width: 50px;
    height: 50px;
    font-size: 30pt;
  }
}
.warnMessage {
  color: #0f0;
  display: inline-grid;
  font-size: 11pt;
  align-content: center;
  padding: 5px 8px 5px 4px;
}
@media (max-width: 995px) {
  .warnMessage {
    font-size: 9pt;
  }
}
.wizButtonArea {
  margin-bottom: 10px;
  text-align: right;
}
.wizButtonArea div {
  display: inline-block;
}
@media (max-width: 450px) {
  .wizButtonArea div {
    font-size: 12px;
  }
}
.wizButtonArea span {
  display: inline-block;
  width: 100px;
  text-align: center;
  color: white;
}
.wizButtonArea input {
  width: 100px;
}
@media (max-width: 450px) {
  .wizButtonArea input {
    width: 80px;
  }
}
.wizardMonitor {
  width: 800px;
  height: 210px;
  background-color: #dedede;
  padding: 20px 2px 20px 2px;
}
.wizardMonitor #description {
  padding: 20px 0 40px 0;
}
@media (max-width: 450px) {
  .wizardMonitor #description {
    padding: 10px 0 20px 0;
  }
}
@media (max-width: 850px) {
  .wizardMonitor {
    width: 500px;
  }
}
@media (max-width: 550px) {
  .wizardMonitor {
    width: 400px;
  }
}
@media (max-width: 450px) {
  .wizardMonitor {
    width: 300px;
  }
}
.exampleTable {
  width: auto;
}
.exampleTable td {
  width: 100px;
}
.imageDiv {
  height: 800px;
  overflow-y: scroll;
  padding: 5px;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto;
}
.imageDiv .cardDiv {
  display: inline-block;
  border: 1px solid black;
  border-radius: 5px;
  width: 100px;
  height: 140px;
  margin: 3px;
  background-color: white;
}
.imageDiv .cardDiv div {
  font-size: 16pt;
  font-weight: bold;
  margin: 5px 0 5px 0;
}
.imageDiv .cardDiv img {
  width: 85%;
}
@media (max-height: 880px) {
  .imageDiv {
    height: 700px;
  }
}
@media (max-height: 780px) {
  .imageDiv {
    height: 600px;
  }
}
@media (max-height: 680px) {
  .imageDiv {
    height: 500px;
  }
}
@media (max-height: 580px) {
  .imageDiv {
    height: 400px;
  }
}
@media (max-width: 1200px) {
  .imageDiv {
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
  }
}
@media (max-width: 1100px) {
  .imageDiv {
    grid-template-columns: auto auto auto auto auto auto auto auto;
  }
}
@media (max-width: 880px) {
  .imageDiv {
    grid-template-columns: auto auto auto auto auto auto;
  }
}
@media (max-width: 660px) {
  .imageDiv .cardDiv {
    width: 80px;
    height: 110px;
  }
  .imageDiv .cardDiv div {
    font-size: 14pt;
    margin: 2px 0 2px 0;
  }
}
@media (max-width: 550px) {
  .imageDiv {
    grid-template-columns: auto auto auto auto auto;
  }
}
@media (max-width: 450px) {
  .imageDiv .cardDiv {
    width: 70px;
    height: 90px;
  }
  .imageDiv .cardDiv div {
    font-size: 12pt;
    margin: 2px 0 2px 0;
  }
}
@media (max-width: 400px) {
  .imageDiv {
    grid-template-columns: auto auto auto auto;
  }
  .imageDiv .cardDiv {
    width: 65px;
    height: 85px;
  }
  .imageDiv .cardDiv div {
    font-size: 10pt;
    margin: 1px 0 1px 0;
  }
}
.photoListDesc {
  font-size: 16px;
}
@media (max-width: 550px) {
  .photoListDesc {
    font-size: 14px;
  }
}
@media (max-width: 450px) {
  .photoListDesc {
    font-size: 12px;
  }
}
@media (max-width: 400px) {
  .photoListDesc {
    font-size: 9px;
  }
}
.resultImageDiv {
  position: relative;
  margin-top: 10px;
}
#imageMask {
  background-color: gray;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.flashLight {
  background-color: white;
  position: absolute;
  display: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
@media (max-width: 750px) {
  .resultImage {
    width: 500px;
  }
}
@media (max-width: 650px) {
  .resultImage {
    width: 400px;
  }
}
@media (max-width: 550px) {
  .resultImage {
    width: 300px;
  }
}