/*****************************************************
*
*
* Author      : Yozze Emos
* Author Web  : yozzeemos.com - joemos.com - seaes.net
* Author Mail : me@yozzeemos.com | hello@yozzeemos.com | me@joemos.com | hello@joemos.com
* 
*
******************************************************/
/*
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
*/

@font-face {
  font-family: 'LatoWebBlack';
  src: url('font-face/lato/Lato-Black.eot'); /* IE9 Compat Modes */
  src: url('font-face/lato/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font-face/lato/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
       url('font-face/lato/Lato-Black.woff') format('woff'), /* Modern Browsers */
       url('font-face/lato/Lato-Black.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'LatoWebBold';
  src: url('font-face/lato/Lato-Bold.eot'); /* IE9 Compat Modes */
  src: url('font-face/lato/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font-face/lato/Lato-Bold.woff2') format('woff2'), /* Modern Browsers */
       url('font-face/lato/Lato-Bold.woff') format('woff'), /* Modern Browsers */
       url('font-face/lato/Lato-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'LatoWebHairline';
  src: url('font-face/lato/Lato-Hairline.eot'); /* IE9 Compat Modes */
  src: url('font-face/lato/Lato-Hairline.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font-face/lato/Lato-Hairline.woff2') format('woff2'), /* Modern Browsers */
       url('font-face/lato/Lato-Hairline.woff') format('woff'), /* Modern Browsers */
       url('font-face/lato/Lato-Hairline.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'LatoWebHeavy';
  src: url('font-face/lato/Lato-Heavy.eot'); /* IE9 Compat Modes */
  src: url('font-face/lato/Lato-Heavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font-face/lato/Lato-Heavy.woff2') format('woff2'), /* Modern Browsers */
       url('font-face/lato/Lato-Heavy.woff') format('woff'), /* Modern Browsers */
       url('font-face/lato/Lato-Heavy.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'LatoWebLight';
  src: url('font-face/lato/Lato-Light.eot'); /* IE9 Compat Modes */
  src: url('font-face/lato/Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font-face/lato/Lato-Light.woff2') format('woff2'), /* Modern Browsers */
       url('font-face/lato/Lato-Light.woff') format('woff'), /* Modern Browsers */
       url('font-face/lato/Lato-Light.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'LatoWebMedium';
  src: url('font-face/lato/Lato-Medium.eot'); /* IE9 Compat Modes */
  src: url('font-face/lato/Lato-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font-face/lato/Lato-Medium.woff2') format('woff2'), /* Modern Browsers */
       url('font-face/lato/Lato-Medium.woff') format('woff'), /* Modern Browsers */
       url('font-face/lato/Lato-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'LatoWeb';
  src: url('font-face/lato/Lato-Regular.eot'); /* IE9 Compat Modes */
  src: url('font-face/lato/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font-face/lato/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
       url('font-face/lato/Lato-Regular.woff') format('woff'), /* Modern Browsers */
       url('font-face/lato/Lato-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'LatoWebSemibold';
  src: url('font-face/lato/Lato-Semibold.eot'); /* IE9 Compat Modes */
  src: url('font-face/lato/Lato-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font-face/lato/Lato-Semibold.woff2') format('woff2'), /* Modern Browsers */
       url('font-face/lato/Lato-Semibold.woff') format('woff'), /* Modern Browsers */
       url('font-face/lato/Lato-Semibold.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'LatoWebThin';
  src: url('font-face/lato/Lato-Thin.eot'); /* IE9 Compat Modes */
  src: url('font-face/lato/Lato-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font-face/lato/Lato-Thin.woff2') format('woff2'), /* Modern Browsers */
       url('font-face/lato/Lato-Thin.woff') format('woff'), /* Modern Browsers */
       url('font-face/lato/Lato-Thin.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}



/* CSS Reset & Standart Site*/
.text-center {
  text-align: center;
}

.text-left {
  text-align: left
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.clear {
  clear: both;
}

.layout-center {
  margin: 0 auto;
}

.hidden {
  visibility: hidden;
  display: none !important;
}

.no-resize {
  resize: none;
}

.no-overflow {
  overflow: hidden !important;
}

.no-margin-no-padding {
  margin:0;
  padding:0;
}
/* CSS Reset & Standart Site*/

html, body {
  /*background: url('../images/bg-dot.png') repeat, #f3f3f3;*/
  background: #0A2463;
  outline:0 none !important;
  font-family: "LatoWeb";
  color: #444;
  /*overflow-x: hidden;*/
  margin: 0;
  padding: 0;
  font-size: 14px;
  letter-spacing: -0.025em;
  height: 100%;

}

h1, h2, h3, h4, h5, h6, p {
  font-family: "LatoWeb";
}

/*
label {
  font-weight: 700 !important;
  pointer-events: none;
  text-transform: uppercase;
  font-size: 10px;
  font-family: "LatoWeb";
  color: #222;
}
*/

section {
  display: block;
  height: 100%;
  position: relative;
}

form {
  padding: 20px;
}

.alert {
  font-weight: 800 !important; 
  border-width: 2px;
  margin: 20px auto 20px auto;

}

.btn-default,
.btn-success,
.btn-danger,
.btn-info,
.btn-warning,
.btn-default:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-info:hover,
.btn-warning:hover {
  border-color: none;
}

.btn-custom {
  background: #222;
  color: #fff;
  cursor: pointer;
}

.btn-custom:hover,
.btn-custom:focus, {
  outline: 0 none !important;
  text-decoration: none !important;
}

.btn-default, .btn-default:hover, .btn-default:focus, .btn-default:hover {
    color: #fff;
    background-color: #222;
    border-color: none;
}

.modal {
  padding-right: 0 !important;
  border: none;
}

.modal-content, .modal-body {
  border: none !important;
}

.modal-body {
  padding: 50px;
}

.modal-lg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 auto;
}

.modal-title-lg {
  line-height: 0;
  font-size: 35px;
  padding: 40px 40px 40px 20px !important;
}

.modal-content-lg {
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.modal-md {
  /*
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 auto;
  */
}

.modal-title-md {
  padding: 20px 0 20px 10px;
  line-height: 0;
  font-size: 30px;  
}

.modal-content-md {
  border-radius: 0;
}

.modal-sm {
  /*
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 auto;
  */
}

.modal-title-sm {
  padding: 20px 0 20px 10px;
  line-height: 0;
  font-size: 30px;  
}

.modal-content-sm {
  border-radius: 0;
}

.close {
  font-size: 73px !important;
  font-family: "LatoWeb";
  padding-right: 10px !important;
}

.badge {
  background-color: #222 !important;
}

.form-control {
  padding: 14px;
  border: 2px solid #999 !important;
  font-size: 12px;
  font-family:"LatoWeb";
  color:#222;
  height: inherit !important;
}

.form-control:focus {
  box-shadow: inherit;
  border-color: #666;
}

.form-error {
  text-transform: uppercase;
  font-family: "LatoWeb";
  font-size: 10px;
  margin-top: -30px;
  color: #a94442;
}

footer p {
  margin: 0;
  padding: 10px 0 0 0;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

table, td, th {
  vertical-align: middle !important;
  border: none !important;
}

/************ Header & SubHeader ************/
.section-panel-fullscreen {
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #fff;
  overflow: hidden;
  padding: 0;
  text-align: center;
  height: 100%;
  position: relative;
}

.section-centered {
  font-size: 60px;
  font-weight: 100;
  font-family: "LatoWeb";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.form-title h1 {
  font-size: 40px; 
}

form .row {
  margin-bottom: 30px;
}

.intro {
  position: relative !important;
  width: 100%;
  /*padding: 50px;*/
}
/************ Header & SubHeader ************/



/************ Sub Footer & Footer ************/
.footer {
  font-family: "LatoWeb";
  font-weight: 100;
  z-index: 100;
}

.footer > li > a:hover,
.footer > li > a:focus {
  cursor: pointer;
  text-decoration: underline;
}

.footer .copyright.container-fluid {
  padding: 0 25px 20px 25px;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  margin-top: -30px;
}

/************ Sub Footer & Footer ************/




/************ Page with-scanner & Page with-camera ************/
#page_with_scanner  {
  color: #222 !important;
  margin-top: 20px;
  position: relative;
  background:#fff;
  opacity:0.8;
  padding: 20px 10px 20px 10px !important;
  border-radius: 10px;
  margin: 25px !important;
}

#page_with_scanner p {
  font-size: 17px;
}

#wrapperButton {
  position: fixed !important;
  bottom: 30px !important;
  width: 100%;
  padding-left: 100px;
  padding-right: 100px;
}

#wrapperButton .col-md-3 {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

#wrapperButton .col-md-3 .btn {
  width: 100%;
}

button[disabled]:focus,
button[disabled],
.btn.disabled,
.btn[disabled]{
  opacity: 0.1;
}



@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes zoomOut {
  0% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(2.2);
  }

  100% {
    transform: scale(1.2);
  }
}
/************ Page with-scanner & Page with-camera ************/



/************ Others Effect & function ************/

.loading:after {
  content: 'Loading...';
  font-weight: 300;
  font-family: 'LatoWeb';
  letter-spacing: -0.025em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 50px;
  position: fixed;
  width: 100%;
  height: 100%;
  background: #222;
  pointer-events: none;
  overflow: visible !important;
  z-index: 9999 !important;
  -webkit-transition: all 5s ease;
  -moz-transition: all 5s ease;
  -o-transition: all 5s ease;
  transition: all 5s ease;
  animation: changeColor 7s ease-in-out infinite;
}

@-webkit-keyframes changeColor {
  0% 
  {
    color: #515151;
  }
  25% 
  {
    color: #f2f2f2;
  }
  50% 
  {
    color: #515151;
  }
  75% 
  {
    color: #f2f2f2;
  }
  100% 
  {
    color: #f2f2f2;
  }
}

@-moz-keyframes changeColor {
  0% 
  {
    color: #515151;
  }
  25% 
  {
    color: #f2f2f2;
  }
  50% 
  {
    color: #515151;
  }
  75% 
  {
    color: #f2f2f2;
  }
  100% 
  {
    color: #f2f2f2;
  }
}

@-o-keyframes changeColor {
  0% 
  {
    color: #515151;
  }
  25% 
  {
    color: #f2f2f2;
  }
  50% 
  {
    color: #515151;
  }
  75% 
  {
    color: #f2f2f2;
  }
  100% 
  {
    color: #f2f2f2;
  }
}

@-ms-keyframes changeColor {
  0% 
  {
    color: #515151;
  }
  25% 
  {
    color: #f2f2f2;
  }
  50% 
  {
    color: #515151;
  }
  75% 
  {
    color: #f2f2f2;
  }
  100% 
  {
    color: #f2f2f2;
  }
}

@keyframes changeColor {
  0% 
  {
    color: #515151;
  }
  25% 
  {
    color: #f2f2f2;
  }
  50% 
  {
    color: #515151;
  }
  75% 
  {
    color: #f2f2f2;
  }
  100% 
  {
    color: #f2f2f2;
  }
}

/*Filter styles*/
.saturate {
  -webkit-filter: saturate(3); 
  filter: saturate(3);
}

.grayscale {
  -webkit-filter: grayscale(100%); 
  filter: grayscale(100%);
}

.contrast {
  -webkit-filter: contrast(160%); 
  filter: contrast(160%);
}

.brightness {
  -webkit-filter: brightness(0.25); 
  filter: brightness(0.25);
}

.blur {
  -webkit-filter: blur(3px); 
  filter: blur(3px);
}

.invert {
  -webkit-filter: invert(100%); 
  filter: invert(100%);
}

.sepia {
  -webkit-filter: sepia(100%); 
  filter: sepia(100%);
}

.huerotate {
  -webkit-filter: hue-rotate(180deg); 
  filter: hue-rotate(180deg);
}

.rss.opacity {
  -webkit-filter: opacity(50%); 
  filter: opacity(50%);
}

.bg-dark-grayscale {
  background: #555;
}

.clickable {
  cursor: pointer;   
}

.panel-heading span {
  margin-top: -35px;
  font-size: 15px;
}
/************ Others Effect & function ************/




/************  Responsive  ************/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
  /*.section-header {-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain;width:100vw;height:100vh;}*/
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
  .navbar-header img {
    margin-right: 15px;
    margin-left: 15px;
  }
  
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
  .navbar-header img {
    max-width: 60%;
  }

  .navbar-right {
    float: left !important;
  }

  .section-centered {
    top: 30%;
  }

  .scroll-btn {
    left: 48%;
  }

  .footer .copyright.container-fluid {
    padding: 20px;
  }
  
  .footer .copyright.container-fluid ul {
    position: relative;
  }

  .footer .copyright.container-fluid ul li {
    display: block;
  }
  

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) and (orientation: portrait) {

}


#page_with_scanner #canvas {
  /*margin-top: -91.5px;*/
  min-width: 100% !important;
  min-height: 100% !important;
  /*padding: 0 58px 0 59.5px;*/
}


canvas{
  display:block;
  vertical-align:bottom;
}

/* ---- particles.js container ---- */

#particles-js{
  width: 100%;
  height: 100%;
  background-color: transparent !important;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}


.navbar {
  /*position: absolute;*/
  min-height: 0 !important;
  margin-bottom: 0 !important;
  top: 0;
  padding: 20px;
  width: 100%;
}

/* .container {
  padding-right: 0 !important;
  padding-left: 0 !important;
} */

.intro.container, .intro.container .row, .intro.container .row #page_with_scanner {
  height: 100%;
}

#buttonStart, #buttonStop {
  background: #245B98;
  border: 7px solid #fff;
}

#buttonNg {
  background: #9C0D38;
  border: 7px solid #fff;
}

#buttonOk {
  background: #44A1A0;
  border: 7px solid #fff;
}

h2.title {
  clear: both;
  z-index: 9999999999999;
  color: #fff;
  font-size: 45px;
  padding: 0;
  margin: 0;
}

#particles-js .particles-js-canvas-el {
  position: fixed !important;
}

.container-fluid.row {
  position: absolute;top: 50%;left: 51%;transform: translate(-50%, -50%);margin-top: 70px;width:700px;height: auto !important;
}

.form-control {
  border-radius: 10px;
  border: none;
}


/***** Loader *****/

#loaderWrap {
  width: 600px !important;
  margin: 0 auto;
  align-content: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#loaderWrap .center {
  /*height: 100vh;*/
  display: flex;
  margin: 0 auto !important;
}

#loaderWrap .center .wave {
  width: 10px;
  height: 200px;
  background: linear-gradient(45deg,  #245B98,  #245B98);
  margin: 20px;
  animation: wave 1s linear infinite;
  border-radius: 20px;
}



#loaderWrap .center .wave:nth-child(2) {
  animation-delay: 0.1s;
}
#loaderWrap .center .wave:nth-child(3) {
  animation-delay: 0.2s;
}
#loaderWrap .center .wave:nth-child(4) {
  animation-delay: 0.3s;
}
#loaderWrap .center .wave:nth-child(5) {
  animation-delay: 0.4s;
}
#loaderWrap .center .wave:nth-child(6) {
  animation-delay: 0.5s;
}
#loaderWrap .center .wave:nth-child(7) {
  animation-delay: 0.6s;
}
#loaderWrap .center .wave:nth-child(8) {
  animation-delay: 0.7s;
}
#loaderWrap .center .wave:nth-child(9) {
  animation-delay: 0.8s;
}
#loaderWrap .center .wave:nth-child(10) {
  animation-delay: 0.9s;
}

@keyframes wave {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

#loaderWrap .loadingText {
  color: #245B98;
  border-radius: 20px;
  font-size: 30px;
  animation: wave 1s linear infinite;
}

.input-hidden {
  position: absolute;
  left: -9999px;
}

input[type=radio]:checked + label>img {
  /*box-shadow: 0 0 3px 3px #0A2463;*/
}

/* Stuff after this is only to make things more pretty */
input[type=radio] + label>img {
  /*border: 1px dashed #444;*/
  /*width: 150px;*/
  /*height: 150px;*/
  opacity: 0.8;
  transition: 500ms all;
}

input[type=radio] + label>img:hover {
  /*border: 1px dashed #444;*/
  /*width: 150px;*/
  /*height: 150px;*/
  opacity: 0.9;
  transition: 500ms all;
  cursor: pointer;
}

input[type=radio]:checked + label>img, input[type=radio]:checked + label>h4 {
  opacity: 1;
  transform: scale(1.1);
  /*transform: 
    rotateZ(-10deg) 
    rotateX(10deg);
  */
}

input[type=radio]:checked + label>img {
  background: #5f5f5f;border-radius: 10px;
}

#modalStatus .btn {
  padding: 13px;
  font-family: "LatoWeb";
  font-weight: 800;
  text-transform: uppercase;
  font-size: inherit !important;
  opacity: 0.9;
  width: inherit !important;
  height: inherit !important;
  border-radius: 0.25rem !important; 
}

#modalStatus .modal-header .close {
  margin-top: -60px;
}

.btn-custom {
  padding: 13px;
  font-family: "LatoWeb";
  font-weight: 800;
  text-transform: uppercase;
  font-size: inherit !important;
  opacity: 0.9;
  width: inherit !important;
  height: inherit !important;
  border-radius: 0.25rem !important; 
  width: auto !important;
  background-color: #245B98;
}

.hr-html-body {
  background:#fff !important; 
  /*
  min-height: 100% !important;
  overflow: inherit !important; 
  margin-bottom: 100px;*/
}

.hr-html-body #particles-js-hr {
  width: 100%;
  /*height: 100%;*/
  background-color: transparent !important;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.hr-html-body .particles-js-canvas-el {
  background-size: cover !important;
}

.hr-html-body h2 {
  color: #222;
}

.hr-html-body .btn-custom {
  margin-top:25px; border-radius: 10px !important;
}

.hr-html-body table {
  margin-top: 200px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.hr-html-body table, 
.hr-html-body th, 
.hr-html-body td, 
.hr-html-body tr, 
.hr-html-body thead, 
.hr-html-body tbody, 
.hr-html-body colgroup {
  border: 1px solid #333 !important;
}