/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 5; /* Sit on top */
    padding-top: 200px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
/*    background-color: #fefefe; */
background-color:#3c434b;
font-family: 'Roboto';
    margin: auto;
    padding: 30;
    border: 1px solid #6f7c8b;
    width: 430px;
    height: 350px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
 color: #ffffff;
 font-weight:400;
 font-size: 18px;
opacity: 0.8;
}


.modal-right {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 150px; /* Location of the box */
left: 50%;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-right-content {
padding: 20px;
    position: relative;
/*    background-color: #fefefe; */
/* background-color:#3c434b; */
background-color:#252b32;

font-family: 'Roboto';
    margin: auto;
    padding: 30;
right: 25%;
    border: 1px solid #888;
    width: 480px;
    height: 640px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
 color: #ffffff;
 font-weight:400;
 font-size: 18px;


}


/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}.
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@-webkit-keyframes fadein {
    from {top:0px; opacity:0; width: 150px; height: 40}
    to {top:0; opacity:1; width: 500px;height 100}
}

@keyframes fadein {
    from {top:0px; opacity:0; width: 150px; height: 40}
    to {top:0; opacity:1; width: 500px; height: 100}
}


#myUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul {
/*  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
*/
}

#myUL li {

font-family: 'Roboto';
/*  background-color: #3c434b; */
background-color: #252b32;
  border-radius: 0px;
  border: 1px solid #ffffff;
 width: 110px;
 height: 50px;
 padding: 15px;
  box-shadow: rgba(255, 255, 255, .7) 0 1px 0 0 inset;
  box-sizing: border-box;
  color: #39739d;
  cursor: pointer;
  display: inline-block;
/*  font-family: -apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif; */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.15385;
  margin: 2;
  outline: none;
/*  padding: 8px .8em; */
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  white-space: nowrap;

}


#myUL li a {
  text-decoration: none;
  color: #ffffff;
  display: block;
}

.blink {
  font-weight: bold;
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.refresh {
/* font-family: 'Roboto'; */
font-family: 'arial';
cursor: pointer;
text-decoration: none;
  font-weight: 400;
font-size: 36px;
color: #ffffff;
}

.disclamer {
 text-indent: 10px;
 text-justify: inter-word;
 font-size: 20px;

}


/* ============================================= */

body { margin: 0px; }

@font-face {
    font-family: 'BelausNue';
/*    src: url('BebasNeuePro-Regular.ttf'); */
    src: url('BebasNeuePro-Middle.ttf');
}

@font-face {
    font-family: 'BelausNueReg';
    src: url('BebasNeuePro-Regular.ttf'); 
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto.ttf');
}


table tr td.header
{
 background: #252b32;
/* padding: 12px 461px 12px 755px; */
 z-index: 3;
 text-align: center;
 height: 80px;
 box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
position: relative;
}

table tr td.left-page
{
 background: #3c434b;
 text-align: center;
}

table tr td.right-page
{
 background: #252b32;
 text-align: center;
}

.page-text
{
 color: #FFFFFF;
 font-family: 'Roboto';
 font-weight: 400;
 font-size: 18px;
 line-height: 133%;
 text-align: center;
}

.page-text-right
{
 color: #FFFFFF;
 font-family: 'Roboto';
 font-weight: 400;
 font-size: 18px;
 line-height: 133%;
 text-align: right;
}

.page-text-right-gray
{
 color: #6f7c8b;
 font-family: 'Roboto';
 font-weight: 400;
 font-size: 18px;
 line-height: 133%;
 text-align: right;
}

.page-text-gold
{
 color: #ffcb05;
 font-family: 'Roboto';
 font-weight: 400;
 font-size: 18px;
 line-height: 133%;
 text-align: left;
}

input.ag-serial
{
 width: 340px;
 height: 40px;
 background: #3c434b;
 color: #FFFFFF;
 font-family: 'Roboto';
 border: 1px solid #6f7c8b;
 border-radius: 0px;
 outline: none;
 text-align: center;
 font-weight: 400;
 font-size: 18px;
 line-height: 133%;
 text-align: center;
}


input.protocol
{
 width: 120px;
 height: 40px;
 background: #252b32;
 color: #FFFFFF;
 font-family: 'Roboto';
 border: 1px solid #6f7c8b;
 border-radius: 0px;
 outline: none;
 text-align: center;
 font-weight: 400;
 font-size: 18px;
 line-height: 133%;
 text-align: center;
}

input.foreign-serial
{
 width: 550px;
 height: 40px;
 background: #252b32;
 color: #FFFFFF;
 font-family: 'Roboto';
 border: 1px solid #6f7c8b;
 border-radius: 0px;
 outline: none;
 text-align: center;
 font-weight: 400;
 font-size: 18px;
 line-height: 133%;
 text-align: center;
}


input.captcha
{
 width: 100px;
 height: 40px;
 background: #3c434b;
 color: #FFFFFF;
 font-family: 'Roboto';
 border: 1px solid #6f7c8b;
 border-radius: 0px;
 outline: none;
 text-align: center;
 font-weight: 400;
 font-size: 18px;
 line-height: 133%;
 text-align: center;
}

input.captcha-dark
{
 width: 100px;
 height: 40px;
 background: #252b32;
 color: #FFFFFF;
 font-family: 'Roboto';
 border: 1px solid #6f7c8b;
 border-radius: 0px;
 outline: none;
 text-align: center;
 font-weight: 400;
 font-size: 18px;
 line-height: 133%;
 text-align: center;
}


input.add-button
{
 font-family: 'BelausNueReg';
 padding: 0px 0px;
 width: 180px;
 height: 48px;
 background: #ffcb05;
 font-weight: 400;
 font-size: 26px;
 text-align: center;
 color: #252b32;
 border: 0px solid;
}

input.add-button:hover
{
 font-family: 'BelausNueReg';
 padding: 0px 0px;
 width: 180px;
 height: 48px;
 background: #506a85;
 font-weight: 400;
 font-size: 26px;
 text-align: center;
 color: #FFFFFF;
 border: 0px solid;
 cursor: pointer;
}

.notfound-text
{
 font-family: 'BelausNue';
 color: #ffcb05;
 font-weight: 400;
 font-size: 48px;
 text-align: center;
}



.header-text
{
 font-family: 'BelausNue';
 color: #ffcb05;
 font-weight: 400;
 font-size: 48px;
 margin-left: 220px;
}

.header-text-white
{
 color: #FFFFFF;
}

.disclamer-header
{
 font-family: 'BelausNue';
 font-weight: 400;
 font-size: 36px;
 text-align: center;
 color: #FFFFFF;
}

.gold-text
{
 color: #ffcb05;
}

.error-icon
{
 font-family: 'BelausNue';
 font-weight: 500;
 font-size: 45px;
 text-align: center;
 color: #ffcb05;
}

a.acpt
{
 font-family: 'Roboto';
 font-weight: 300;
 font-size: 16px;
 text-align: center;
 color: #ffcb05;
 text-decoration: none;
 border-bottom: 1px dashed #ffcb05;
}

.close {
 font-family: 'BelausNue';
 font-weight: 400;
 font-size: 23px;
 float: right;
 cursor: pointer;
 font-weight: bold;
 position: relative;
 margin-top: -15px;
 margin-right: -15px;
}

.close2 {
 font-family: 'BelausNue';
 font-weight: 400;
 font-size: 23px;
 float: right;
 cursor: pointer;
 font-weight: bold;
 position: relative;
 margin-top: 2px;
 margin-right: 5px;
}


a.web-enter
{
 color: #FFFFFF;
 border: 1px solid white;
 float: right;
 width: 175px;
 height: 27px;
 padding: 8px;
 text-decoration: none;
 margin-top: 7px; 
 margin-right: 18px;
 vertical-align: middle;
}

.gold-text
{
 color: #ffcb05;
}


.web-enter-text {
 font-family: 'BelausNue';
 font-weight: 400;
 font-size: 20px;
 margin-top: 3px; 
 line-height: 120%;
 text-align: center;
/* vertical-align: middle; */
 color: #FFFFFF;
/* margin-top: 4px; */
}

.captcha-border
{
 margin-top: 20px;
 border: 1px solid #6f7c8b;
 width: 350px;
 height: 120px;
 margin-left: auto;
 margin-right: auto;
}