body {
  font-family:Arial, sans-serif, Helvetica;
  color:#2a6496;
  font-weight:300;
}
a 
{ color:#428bca !important; }
a:hover 
{ color:#e30613 !important; }
.user-header a {
  color:#428bca;
  text-decoration:none;
}
.user-header a:hover {
  color:#e30613;
  text-decoration:underline;
}
h1
{ margin:16px 0px; }
.main-wrapper {
  background-image:url("./img/bg.png");
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  margin-top:0px;
  overflow:auto;
  height:100%;
}
.container {
  max-width:100%;
  margin:2px 2px;
  padding:0px;
  height:99%;
  text-align:center;
}
.container h1 {
  color:#2e71ab;
  font-size:40px;
  font-weight:200;
}
form.login-form {
  padding:10px 0px;
  position:relative;
  z-index:2;
}
form.login-form input {
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  outline:0;
  border:1px solid rgba(255, 255, 255, 0.5);
  background-color:rgba(255, 255, 255, 0.3);
  width:320px;
  border-radius:3px;
  padding:10px 15px;
  margin:0 auto 10px auto;
  display:block;
  text-align:center;
  font-size:18px !important;
  color:#428bca !important;
  font-weight:300;
}
form.login-form input:hover 
{ background-color:rgba(255, 255, 255, 0.8); }
form.login-form input:focus {
  background-color:white;
  color:#428bca !important;
}
form.login-form button {
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  outline:0;
  border:1px solid #428bca;
  background-color:#ffffff;
  padding:10px 15px;
  color:#428bca;
  border-radius:3px;
  width:250px;
  cursor:pointer;
  font-size:18px;
}
form.login-form button:hover {
  background-color:#428bca;
  color:#f0f0f0;
}
.error 
{ color:#9ba6af; }
.alert {    
  margin:10px;
  padding:15px;
  text-align:center;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color:#9ba6af;
  opacity:1; /* Firefox */
}
:-ms-input-placeholder /* Internet Explorer 10-11 */
{ color:#9ba6af; }
::-ms-input-placeholder /* Microsoft Edge */
{ color:#9ba6af; }

div.login-info {
  font-size:14px;
  max-width:500px;
  margin:auto;
  margin-top:30px;
  padding:15px;
  color:#808080;
  border:1px solid rgba(140, 190, 255, 0.5);
  background-color:rgba(160, 220, 255, 0.3);
  border-radius:3px;
  text-align: left;
}
div.hint-info {
  font-size:12px;
  max-width:800px;
  margin-top:10px;
  padding:10px;
  color:#808080;
  border:1px solid rgba(140, 190, 255, 0.5);
  background-color:rgba(160, 220, 255, 0.3);
  border-radius:3px;
  text-align: left;
}
img.logo-image {
  width:64px;
  padding:50px 0px 0px 0px;
}
img.logo-image-mini {
  width:100px;
  margin:0px 20px 8px 0px;
  padding:0px;
}
img.logo-image-mini-ui {
  width:100px;
  margin:0px 20px 0px 0px;
  padding:0px;
}
div.user-header {
  max-width:100%;
  min-height:92px;
  margin:2px -2px 2px 0px;
  padding:10px 20px;
  color:#808080;
  border:1px solid #a0a0a0; 	
  background-color:#ffffff;
  border-radius:1px;
  text-align:center;  
  font-size:14px;
}
div.user-header-title1 {
  position:absolute;
  top:10px;
  left:20px;
  background-image:url('./img/logo.png');
  background-repeat:no-repeat;
  background-position:0px 0px;
  text-indent:140px;
}
div.user-header-title2 {
  position:absolute;
  top:20px;
  left:360px;
}

div.user-header-button-b {
  top:44px;
  left:92px;
  width:auto;
  text-align:center;
  vertical-align:top;
  position:absolute;
}

div.user-header-button-r {
  top:44px;
  left:20px;
  text-align:left;
  vertical-align:top;
  position:absolute;
}

.button-b {
  width:220px;
  height:50px;
  margin:0px 10px 0px 0px;
  display: inline-block;
  border: 1px solid #3399cc;
  border-radius: 8px;
  transition: all 0.1s ease-in;
  position: relative;
  overflow: hidden;
  font-size: 20px;
  cursor: pointer;
  color: #ffffff;
  /* background-color: #3399cc; */
  z-index: 1;

  background: linear-gradient(#47b0e6, #2a82aa);
  user-select: none;
  text-align: center;

  /* Shadow goes down and left */
  box-shadow: -2px 4px #236680;
  transition: all 0.1s ease-in-out;
}

.button-b:active {
  /* Shadow shrinks when pressed */
  box-shadow: -1px 2px #236680;
  transform: translate(-1px, 2px); /* move diagonally down-left */
}

.button-b:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: all 0.15s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.button-b:after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;
  background-color: #ffffff;
  border-radius: 50%;
  display: block;
  transition: all 0.15s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.button-b:hover {
  color: #006699;
  border: 1px solid #006699;
}

.button-b:hover:before {
  top: -35%;
  background-color: #ffffff;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.button-b:hover:after {
  top: -45%;
  background-color: #ffffff;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.iconb, .iconr {
  width: 16px;
  height: 16px;
  /* use PNG as a mask */
  -webkit-mask-image: url("./.src/img/dl16.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  mask-image: url("./.src/img/dl16.png");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

.iconb{
  background-color: white;
}

.iconr {
  background-color: white;
}

.button-r {
  height:50px;
  width:200px;
  margin:10px 0px 0px 0px;
  display: inline-block;
  border: 1px solid #d32010;
  border-radius: 8px;
  transition: all 0.1s ease-in;
  position: relative;
  overflow: hidden;
  font-size: 16px;
  cursor: pointer;
  color: #ffffff;
  /* background-color: #d32010; */
  z-index: 1;

  background: linear-gradient(#e74c3c, #a6190c);
  user-select: none;
  text-align: center;

  /* Shadow goes down and left */
  box-shadow: -2px 4px #7a1209;
  transition: all 0.1s ease-in-out;
}

.button-r:active {
  /* Shadow shrinks when pressed */
  box-shadow: -1px 2px #7a1209;
  transform: translate(-1px, 2px); /* move diagonally down-left */
}

.button-r:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: all 0.2s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.button-r:after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;
  background-color: #ffffff;
  border-radius: 50%;
  display: block;
  transition: all 0.2s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.button-r:hover {
  color: #b80f0a;
  border: 1px solid #b80f0a;
}

.button-r:hover:before {
  top: -35%;
  background-color: #ffffff;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.button-r:hover:after {
  top: -45%;
  background-color: #ffffff;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

div.user-header-search {
  position:absolute;
  top:37px;
  right:8px;
}
.user-form {
  margin:0px;
  padding:0px;
}
.title1 {
  color:#404040;
  font-size:20px;
  font-weight:300;
}
.title2 {
  color:#006699;
  font-size:24px;
  font-weight:300;
}
.title2r {
  color:#CC0000;
  font-size:24px;
  font-weight:300;
}
span.alert
{
	font-family:Consolas, Courier New; 
	font-weight:800;
	color:#c08080;
}
.red
{ color:#c02020; }
.green
{ color:#20a020; }
.grey
{ color:#c0c0c0; }
.blue
{ color:#2040c0; }
.violet
{ color:#802080; }
.navy
{ color:#2a6496; }
span.invisible
{ visibility:hidden; font-size:1px !important; }