@import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";

body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: url(/assets/img/background.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #020d21;
}

.login-box {
    width: 280px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #006eb7;
    background-color: rgba(234, 249, 255, 0.8);
    padding: 24px;
    border-radius: 24px;
}

.login-box p {
    float: left;
    font-size: 32px;
    border-bottom: 4px solid #003154;
    margin-bottom: 50px;
    padding: 10px 0;
}

.textbox {
    width: 100%;
    overflow: hidden;
    font-size: 16px;
    padding: 8px 0;
    margin: 8px 0;
    border-bottom: 2px solid #003154;
}

.textbox i {
    width: 26px;
    float: left;
    text-align: center;
}

.textbox input {
    border: none;
    outline: none;
    background: none;
    color: #003154;
    font-size: 16px;
    width: 80%;
    float: left;
    margin: 0 10px;
}

.btn {
    width: 100%;
    background: none;
    border: 2px solid #003154;
    color: #003154;
    padding: 5px;
    cursor: pointer;
    margin: 12px 0;
    border-radius: 6px;
}

.btn:hover {
    background: #003154;
    color: rgb(234 249 255);
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.logo {
    max-width: 100%;
}

.message {
    width: 280px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, 150px);
    padding: 24px;
    border-radius: 24px;
    text-align: center;
}

.alert {
    color: #a90000;
    background-color: rgb(255, 147, 147, 0.9);
}

.info {
    color: #006eb7;
    background-color: rgba(234, 249, 255, 0.9);
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgb(234 249 255);
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: rgb(234 249 255);
}
::-ms-input-placeholder { /* Microsoft Edge */
  color: rgb(234 249 255);
}