body {
   margin: 0;
   padding: 0;
   font-family: 'Source Sans Pro', sans-serif;
   background-color: white;
}

#content {
   padding: 8px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* padding: 40px 10px; */
  max-width: 80%;
}

#centered1 {
  background-color: #fff;
}

input,
select {
   font-family: 'Source Sans Pro', sans-serif;
   font-size: 100%;
   outline: 0; /* safari */
}

input[type=text], input[type=password], select {
   border: 2px solid #333;
   border-radius: 3px;
   padding: 5px 10px;
   margin:  5px 0;

   width: -moz-available;
   width: -webkit-fill-available;
   width: fill-available;
}

.error_msg {
   color: red;
   font-weight: bold;
   text-align: center;
   margin-top: 30px;
}

.error_input {
   border: 2px solid red !important;
}

.success_msg {
   color: green;
   font-weight: bold;
   text-align: center;
   margin-top: 30px;
}

#logo {
   background-color: var(--color_primary);
   border: 1px solid black;
   border-radius: 5px;
   text-align: center;
   padding: 10px 0;
   color: white;
   font-size: 120%;
   text-shadow: 2px 2px #000;
}

#transcript {
   color: var(--color_primary);
   margin-top: 10px;
   margin-bottom: 35px;
   font-size: 10px;
   text-align: center;
   font-weight: bold;
}

#transcript b {
   color: black;
}

#btnSubmit {
   background-color: var(--color_primary);
   border-radius: 3px;
   padding: 5px 20px;
   color:   white;
   display: block;
   margin: 40px auto 0;
   border: 1px solid #0007;
   cursor: pointer;
   text-transform: uppercase;
}

.screen_name {
   text-align: center;
   font-weight: bold;
   margin-bottom: 15px;
}

a:link  { text-decoration: none;      }
a:hover { text-decoration: underline; }

/* input password */
.password {
   padding-right: 32px !important;
}

.password_eye {
    cursor: pointer;
    padding: 5px;
    /* line-height: 1;
    vertical-align: text-bottom; */
    color: transparent;
    background: url("/img/eye.png") no-repeat center;
    background-size: contain;

    margin-top: 7px;
    position: absolute;
    transform: translateX(-100%);
    margin-left: -5px;
}

.password_eye.open    { background-image: url("/img/eye_closed.png") }
.password_eye::before { content: "M" }

input::-ms-reveal,
input::-ms-clear {
  display: none;
}

@media (pointer: fine) {
   .background {
      background-image:  url("/img/tile.png");
      background-repeat: repeat;
   }

   body {
      background-color: #aaa;
   }

   #centered1 {
     border: 2px solid red;
     border-radius: 5px;
     padding: 30px 40px;
     box-shadow: 0px 3px 9px #222;
   }
}