* {

  padding: 0;

  margin: 0;

  box-sizing: border-box;

}



html {

  font-size: 62.5%;

}



body {

  font-family: "Lato", "Helvetica", Helvetica, sans-serif;



  color: #fff;

  font-size: 1.8rem;

  padding: 0;

  letter-spacing: 1px;min-height: 100vh;background-color: #12284d;

  background-image: linear-gradient(#12284d, #0e0d1c);

}



.header{background-color: #fff;}

.headerwrap{max-width: 1200px;position: relative;

margin: 0 auto;}

  .logo{width: 140px;

margin: 10px 0 5px;}



.topnav {

  float: right;

  margin-top: 30px;

}



.topnav a {

  text-decoration: none;

  margin-left: 20px;

  color: #112243;

}



.login-form {

  width: 100%;
  margin: 130px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  font-size: 16px;
  max-width: 420px;
  background: #0e1c39;
  border-radius: 3px;
  box-shadow: 0px 0px 12px 6px #060e22;

}

.errormes{color: red; text-align: center;display: block;}

.login-form form {

  width: 80%;

}



.form-control {

  margin-bottom: 1rem;

  width: 100%;

}



.form-control label {

  display: block;

  margin-bottom: 1rem; color:#78c14f;

}



.form-control input {

  padding: 0.375rem 0.75rem;

  width: 100%;

  font-size: 1.3rem;

  line-height: 2;

}



.form-control.gdpr{border: 1px solid #78c14f;}

.form-control.gdpr label {

  width: 91%;

  display: inline-block;

  padding: 10px 0 10px 10px;

  margin: 0px;cursor: pointer;

  font-size: 11px;

}

#gdpr, #gdpr2 {

  width: 5%;

display: inline-block;

vertical-align: super;accent-color: #78c14f;

}

.btn {

  background-image: url(/images/arrow.png);

  display: inline-block;

  font-size: 14px;

  font-weight: 600;

  text-align: center;

  vertical-align: middle;

  border: 2px solid #78c14f;

  border-radius: 13px;

  background-color: transparent;

  cursor: pointer;

  margin-top: 10px;

  background-repeat: no-repeat;

  background-size: 42px;

  background-position: 50%;

  height: 70px;

  width: 123px;transition: 0.3s all;

}

.btn:hover{background-color: rgba(206, 206, 206, 0.1);}

.link {

  display: inline-block;

  margin-bottom: 1rem;

}





/* game1 */





.gam1{position: relative;margin: 0 auto;height: 700px; width: 1000px;

background-image: url(/images/safe/safe-background7.jpg);

}

.nump1{

  position: absolute;user-select: none;

  top: 298px;z-index: 99;

  left: 399px;}

  .bodywrapper {

    position: relative;

  }





  .wait {

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    display: block;

    position: absolute;

    z-index: 999;

    -webkit-backdrop-filter: blur(46px);

    backdrop-filter: blur(46px);

  }











  .waitm {

  background: #76c24c;

  padding: 50px 20%;

  top: 35%;z-index: 9999;

  position: absolute;

  width: 100%;

}

body.message{overflow: hidden;}

  .tog {

    top: -17px;

position: absolute;

width: 24px;

left: -1px;

text-align: left;

cursor: pointer;

background-image: url(/images/safe/safe-slider-switch.png);

background-size: auto 100%;

background-position: 0 0;

height: 14px;

background-repeat: no-repeat;transition: 0.4s all;

}

.tog2{left: 24px;}

.tog3{left: 48px;}

.tog.ont{background-position: 100% 0;}





.puzleg{pointer-events: none;

user-select: none;

position: absolute;

top: 201px;

z-index: 99;

left: 396px;

width: 94px;

height: 86px;}



.puzleg .itemz {

  width: 25px;

  height: 25px;

  position: absolute;cursor: pointer;

pointer-events: all !important; transition: 0.6s all;color: #000;

}

.itemz img {

  width: 100%;

}

.puzleg .itemz[po="0,0"]{top:0px;left:0px;}

.puzleg .itemz[po="0,1"]{top:0px;left:25px;}

.puzleg .itemz[po="0,2"]{top:0px;left:50px;}



.puzleg .itemz[po="1,0"]{top:25px;left:0px;}

.puzleg .itemz[po="1,1"]{top:25px;left:25px;}

.puzleg .itemz[po="1,2"]{top:25px;left:50px;}



.puzleg .itemz[po="2,0"]{top:50px;left:0px;}

.puzleg .itemz[po="2,1"]{top:50px;left:25px;}

.puzleg .itemz[po="2,2"]{top:50px;left:50px;}



.swiw{pointer-events: none;

user-select: none;

  position: absolute;

  top: 448px;

  z-index: 99;

  left: 532px;

}

  .switchp{position: absolute;

top: 448px;

z-index: 99;

left: 532px;}

.swi{  width: 23px;  height: 23px;position: absolute;}

.swi img{position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;}

.swi .high{opacity: 0; transition: 0.5s all; z-index: 99;}



.swi.ton img.high{opacity: 0.6!important;}



.swi1{top:0; left:0;}

.swi2{top:0; left:24px;}

.swi3{top:0; left:48px;}



.swi4{top:24px; left:0;}

.swi5{top:24px; left:24px;}

.swi6{top:24px; left:48px;}



.swi7{top:49px; left:0;}

.swi8{top:49px; left:24px;}

.swi9{top:49px; left:48px;}



.swih{top:80px; left:0;}

.swi0{top:80px; left:24px;}

.swis{top:80px; left:48px;}



  .plaque {

    position: absolute;

    top: 79px;

    z-index: 2;

    left: 413px;

    width: 180px;pointer-events: none;

user-select: none;

  }

.num{  width: 23px;  height: 23px;position: absolute;}



.num1{top:0; left:0;}

.num2{top:0; left:27px;}

.num3{top:0; left:54px;}



.num4{top:27px; left:0;}

.num5{top:27px; left:27px;}

.num6{top:27px; left:54px;}



.num7{top:54px; left:0;}

.num8{top:54px; left:27px;}

.num9{top:54px; left:54px;}



.numh{top:80px; left:0;}

.num0{top:80px; left:27px;}

.nums{top:80px; left:54px;}



.num img{position: absolute;

top: 0;cursor: pointer;

left: 0;

width: 100%;opacity: 0.7;

height: 100%;}

.num .high{opacity: 0; transition: 0.5s all; z-index: 99;}

.num:hover .high{opacity: 1;}

.num.on img{opacity: 1!important;}

#codeinput1{position: absolute;

top: 338px;color: #000;

opacity: 0.8;

left: 503px;

width: 91px;

background: none;

border: none;

font-size: 20px;

text-align: center;}

#codeinput1.opee{top: 270px;

width: 212px;

left: 408px;

font-size: 17px;}





#codeinput2{position: absolute;

top: 339px;color: #000;

opacity: 0.8;

left: 503px;

width: 91px;

background: none;

border: none;

font-size: 18px;

text-align: center;}

#codeinput2.opee{opacity: 0.8;}

#ckbut1 {

  position: absolute;

  top: 372px;cursor: pointer;

  left: 530px;

  padding: 4px 10px;

}





/* game2 */





.gam2{position: relative;margin: 0 auto;height: 700px; width: 1000px;

background-image: url(/images/server/server-attack5.jpg);

}

@keyframes judd {

  /* 0% {left: 337px;}

20% {left: 349px;}

  40% {left: 337px;}

  100% {left: 337px;} */





  0% {left: 337px;}

10% {left: 349px;}

  15% {left: 337px;}

  50% {left: 337px;}



  51% {left: 337px;}

60% {left: 325px;}

  65% {left: 337px;}

  100% {left: 337px;}





}

.rudd {

  position: absolute;

  top: 269px;

  z-index: 2;

  left: 337px;

  width: 323px;

  pointer-events: none;

  user-select: none;

  animation-name: judd;

  animation-duration: 10s;

  animation-iteration-count: infinite;

  opacity: 0.4;



}



.gto-rightp {

  position: absolute;

  top: 271px;

  left: 671px;

}



.gto {

  transition: 0.5s all;

width: 34px;

height: 49px;

user-select: none;

position: absolute;

top: 0;

left: 0;cursor: pointer;

}



.gto.gto2 {  left: 36px;}

.gto.gto3 {  left: 72px;}

.gto.gto4 {  left: 109px;}

.gto.gto5 {  left: 145px;}

.gto.gto6 {  left: 181px;}

.gto.gto7 {  left: 218px;}

.gto.gto8 {  left: 254px;}

.gto.gto9 {  left: 290px;}

.gto img {

  width: 21px;

  height: 27px;

  transition: 0.6s all;

  top: 12px;

  position: absolute;left: 5px;

}

.gto.top img { top:0; }

.gto.bottom img {  top: 22px;}









.gto-topl {

  position: absolute;

  top: 161px;

  left: 351px;

  height: 46px;

}

.tlw{width: 4px;

height: 100%;

  background: #4c4c82;

  position: absolute;

}

.tlw.tl2{left: 15px;}

.tlw.tl3{left: 31px;}

.tlw.tl4{left: 47px;}

.tlw.tl5{left: 63px;}

.tlw.tl6{left: 79px;}

.tlw.tl7{left: 95px;}

.tlw.tl8{left: 111px;}

.tlw.tl9{left: 128px;}

.tl.hide{height: 0%;}

.tl {

  height: 60%;

position: absolute;

bottom: 0;

background: #67cbe2;

transition: 0.5s all;

width: 100%;

}

.tl.top{height: 100%;}

.tl.bottom{height: 30%;}



.gto-leftl {

  position: absolute;

  top: 215px;

  left: 6px;

}

.leftl {

  position: absolute;

  top: 0;

  left: 0;

  width: 30px;

  height: 52px;

  cursor: pointer;

}





.leftlight {

  position: absolute;

  width: 8px;

  height: 8px;

  border-radius: 10px;

  top: 8px;

  left: 11px;

}

.light2 {  left: 37px;}

.light3 {  left: 73px;}

.light4 {  left: 109px;}

.light5 {  left: 146px;}

.light6 {  left: 181px;}

.light7 {  left: 218px;}

.light8 {  left: 254px;}

.light9 {  left: 290px;}

@keyframes lightflashred {

  0% {box-shadow: 0px 0px 4px 1px rgba(255, 0, 0, 0.4);opacity: 1;}

50% {box-shadow: 0px 0px 4px 1px rgba(98, 1, 1, 0.4);opacity: 0.8;}

  100% {box-shadow: 0px 0px 4px 1px rgba(255, 0, 0, 0.4);opacity: 1;}

}



.red .leftlight{

background: #8a0303;

  background-image: linear-gradient(to bottom right, #570d0d, #8a0303);

  box-shadow: 0px 0px 4px 1px rgba(255, 0, 0, 0.4);

animation-name: lightflashred;

animation-duration: 2s;

animation-iteration-count: infinite;}





@keyframes lightflashgreen {

  0% {box-shadow: 0px 0px 4px 1px rgb(6, 255, 21);opacity: 1;}

50% {box-shadow: 0px 0px 4px 1px rgba(54, 153, 8, 0.4); opacity: 0.6;}

  100% {box-shadow: 0px 0px 4px 1px rgb(6, 255, 21);opacity: 1;}

}



.green .leftlight{

  background: #126a18;

    background-image: none;

  background-image: linear-gradient(to bottom right, #06620c, #09b317);

  box-shadow: 0px 0px 4px 1px rgba(6, 255, 21, 0.4);

  animation-name: lightflashgreen;

  animation-duration: 2s;

  animation-iteration-count: infinite;

}





.gto-text1 {

  position: absolute;

  top: 174px;

  left: 503px;

  text-align: center;

  color: #67cbe2;user-select: none;

  width: 150px;

  opacity: 0.8;

  font-size: 18px;

}



#codeinput3{

  position: absolute;

  background: none;

  border: none;

  text-align: center;

top: 280px;

width: 272px;

left: 363px;

font-size: 17px;perspective: 273px;

 transition: 0.5s all;opacity: 0;user-select: none;



}

#codeinput3.opee{opacity: 0.7;}



.codeinput2inner{ transform-style: preserve-3d;font-size: 17px;  color: #fff;

  transform: rotateX(4deg);}





  .stopmeh{user-select: none;pointer-events: none;}



/* game3 */



  .gam3{position: relative;margin: 0 auto;height: 700px; width: 1000px;

  background-image: url(/images/global/Global-Network2.jpg);

  }





  @keyframes severf {

    0% {opacity: 1;}

  50% {opacity: 0.5;}

    100% {opacity: 1;}

  }





  @keyframes severbox {

    0% {box-shadow: 0px 0px 6px 0px red;}

  50% {box-shadow: 0px 0px 11px 0px red;}

    100% {box-shadow: 0px 0px 6px 0px red;}

  }

  @keyframes severboxon {

    100% {box-shadow: 0px 0px 0px 0px red;}

  }

  .svgfill{fill:#ED1F24;

    animation-name: severf;

  animation-duration: 2s;

  animation-iteration-count: infinite;

transition: 1s all;

}





.on .svgfill{fill:#69BD45;opacity: 1 !important; animation-duration: 0.1s;

animation-iteration-count: 1;}



.redsvg{z-index: 2;}

.on .redsvg{opacity: 0;}

.greensvg{opacity: 0;}

.on .greensvg{opacity: 1; }





  .ser {    position: absolute;

height: 35px;

width: 35px;

border-radius: 50px;

animation-name: severbox;

animation-duration: 1s;

animation-iteration-count: infinite;

transition: 1s all;

}

.ser.on{animation-name: severboxon;

animation-duration: 0.5s;

animation-iteration-count: 1;

}



.ser svg{top:0; left:0; position: absolute; cursor: pointer;transition: 0.4s all;}

  .ser1 {   top: 200px;left: 90px; }

  .ser2 {top: 222px;left: 350px;}

  .ser3  {top: 180px;left: 532px;}



  .ser4  { top: 348px;left: 92px;}

  .ser5 {top: 343px;left: 352px;}

  .ser6 { top: 326px;left: 587px;}



  .ser7 { top: 492px;left: 191px;}

  .ser8 {  top: 501px;left: 359px;}

  .ser9 {  top: 486px;left: 597px;}



  .msg3 {

    position: absolute;

    top: 240px;

    background-color: #101e3b;

    padding: 35px;

    text-align: center;

    width: 100%;

    z-index: 99;

    opacity: 0.9;

    font-size: 24px;display: none;

  }

  #ckbut2 {

    background: #1d2753;

    border: none;

    color: #fff;

    font-size: 17px;

    cursor: pointer;

    padding: 10px 20px;

    border-radius: 20px;

    margin-left: 19px;

  }



  .dashwrap {

    max-width: 1120px;

    margin: 20px auto 0;

  }



  .dashwrap h2 {

    text-align: left;

    margin: 30px 0 20px;

    font-weight: 500;

    color: #78c14f;

    font-size: 33px;}



    .dashwrap p {

  text-align: left;

  max-width: 780px;

  margin: auto;

}

.game-wrap {

  display: flex;

  justify-content: space-around;

  margin-bottom: 70px;

}

.tile-item {

  width: 280px;



}

.tile-inner {

  height: 196px;

  width: 280px;

  position: relative;border-radius: 4px;

overflow: hidden;

}



.tile-item h3 {

  text-align: center;

  font-weight: 100;

  font-size: 26px;

  margin-bottom: 10px;

}

.tile-time {

  position: absolute;

  top: 60px;

  left: 0;

  width: 100%;

  background: rgba(17, 34, 67, 0.8);

  color: #78c14f;

  text-align: center;

  font-size: 33px;

  font-weight: 100;

  padding: 20px 0;

}

.tile-inner.locked {

  background-color: #78c14f;

  text-align: center;

  line-height: 180px;

  font-size: 25px;

}

.gamclick {

  text-align: center;

line-height: 80px;

color: #78c14f;

}

.tile-inner .btn {

  display: block;

margin: 0 auto;

}



.gameh2{margin: 70px 0 50px!important;text-align: center !important;}

.langnav{position: absolute;
top: 31px;
left: 40%;
height: 15px;
overflow: hidden;}

  .langnav span {color: #000;

    display: block;cursor: pointer;

    font-size: 16px;

    text-decoration: none; transition: 0.3s all;

  }

  .langnav.open{height: 35px;}

.classback{text-decoration: none;

color: green;}



.dleft {

  float: left;

  width: 63%;

  margin-right: 6%;

}

.dright {

  background: #fbab2c;

  float: right;

  width: 30%;

  padding: 19px;

  box-sizing: border-box;

  border-radius: 10px;

  color: #0f1429;font-size: 15px;height: 189px;

}

.gamewrap {

  clear: both;

  display: block;

  padding-top: 1px;

}

.dashwrap a {

  color: #78c14f;

}

.dright #ckbut2{margin: 0 !important;}



textarea {

  width: 100%;

  resize: none;

  border: none;

  border-radius: 2px;

  padding: 4px 13px;outline: none;

}



.scorewrap{max-width: 1200px; margin: 10px auto 0;}
.moinf {
  padding-left: 10px;cursor: pointer;
}

.moinf:hover::after {
  content: 'who, what, why when, how for the appointment. ';
  position: absolute;
  background: white;
  padding: 4px 8px;
  margin: 34px 0 0 -70px;
  width: 180px;
  border: 1px solid #737373;
  border-radius: 2px;
  font-size: 13px;
}
.scorewrap h1{text-align: center;

margin: 30px 0 7px;

font-weight: 500;

color: #78c14f;

font-size: 33px;}

.top10 {

  color: #78c14f;

  text-align: center;

  font-size: 15px;

  font-weight: 100;

}

.scorewrap2 {

  display: flex;

  justify-content: space-around;

  margin-top: 53px;

}

.board h2 {

  text-align: center;

  font-size: 20px;

  padding-bottom: 7px;

}

.board table {

  background: #77c34c;

  padding: 5px 8px;

  border-radius: 2px;

  border-spacing: 0px;width: 250px;

}

.board td {

  border-bottom: 1px solid rgba(230, 230, 230, 0.6);

padding: 6px;

}

.switchp, .swiw{display: none;}



.helpme{

  position: absolute;

  top: 150px;

  right: 40px;

  width: 89px;

  background: #bb2020;

    background-image: none;

  color: #fff;

  box-shadow: inset 1px 1px 1px 1px #000;

  border-radius: 62px;

  font-size: 15px;

  text-align: center;

  height: 84px;

  line-height: 19px;

  padding-top: 12px;

  background-image: linear-gradient(#d01c1c, #c10909);

  cursor: pointer;

}

.hint{

  position: absolute;

  top: 150px;

  right: 40px;

  width: 89px;background-image: linear-gradient(#c4bc97, #c4be9c);

color: #000;box-shadow: inset 1px 1px 2px 1px #000;

padding: 10px;}

.itemz img[src="/images/safe/p1.png"], .itemz img[src="/images/safe/p5.png"], .itemz img[src="/images/safe/p5.png"]{
  box-shadow: 2px 0 0 #76c44b;
  position: relative;
  z-index: 2;
}

.itemz img[src="/images/safe/p8.png"], .itemz img[src="/images/safe/p7.png"] {
  box-shadow: 0 2px 0 #112242;
  position: relative;
  z-index: 3;
}

.itemz img[src="/images/safe/p6.png"]{
  box-shadow: 2px 0 0 #76c44b, 0 2px 0 #112242;
  position: relative;
  z-index: 4;
}



.fromcehecktext {
  color: #78c14f;
  padding: 7px 10px;
  width: 100%;
  box-sizing: border-box;
  display: block;
  font-size: 11px;
}


.scoreb .bodywrapper {
  position: relative;
  padding-bottom: 40px;
}
.form-control.gdpr {
  display: none;
}
.dright{display: none;}

@keyframes login {

  0% {opacity: 0.1;}


  50% {opacity: 0.2;}
100% {opacity: 0.1;}

}

.bg-wrap0{box-shadow: inset 0px 0px 185px 229px #020711;overflow: hidden;
height: 100vh;}

.bg-wrap{background-image: url("/images/login-background2.png");
overflow:hidden;height: 100%;position: absolute;opacity: 0.4;
width: 100%;z-index: -1;

animation-name: login;

animation-duration: 4s;

animation-iteration-count: infinite;

}
.bg-wrap .btn{margin-top: 30px!important;}