:root {
--main_colour1:#1A1A1A;
--main_colour2:#777777;
--border_colour:#FFFFFF;
--text_colour:#E6EAF7;
}
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
background: linear-gradient(90deg, var(--main_colour1) 0%, var(--main_colour2) 100%);
color:var(--text_colour);
font-size:12pt;
margin:0;
padding:0;
text-align:center
}
@media only screen and (min-width: 401px) {
#container {
border:solid var(--border_colour) 1px;
border-radius:15px;
margin:90px auto 0;
opacity:1.0;
padding:10px 0 36px;
text-align:left;
width:65%;
z-index:1000
}
#login_box {
background: linear-gradient(90deg, var(--main_colour2) 0%, var(--main_colour1) 100%);
border:solid var(--border_colour) 2px;
border-radius:15px;
margin:0 10px 10px 20px;
}
form {
margin:0
}
input {
background-color:transparent;
border-color:var(--border_colour);
border-radius:3px;
border-style:solid;
border-width:1px;
color:var(--text_colour);
font-size:100%;
margin:10px 0 0;
vertical-align:middle;
width:50%
}
input:hover, input:focus {
background-color:transparent;
border-color:var(--border_colour);
border-style:solid;
border-width:1px;
font-size:100%;
box-shadow:0 0 5px #000000
}
span {
margin:0 0 0 60px
}
label {
display:block;
float:left;
font-weight:700;
line-height:normal;
margin:9px 0 0 50px;
position:relative;
width:30%
}
#demo_text {
margin:10px 0 0 50px
}
#eye{
background: url(eye.png) no-repeat right white;
background-size:contain;
display:inline-block;
width:18px;
margin-left:-29px;
cursor:pointer;
}
#eye:focus{
box-shadow:none;
}
#CompanySelect {
background: url(descending.png) no-repeat right transparent;
background-size:contain;
cursor:pointer;
margin-bottom:2px;
padding-right:24px;
}
.dropdownlist{
background:#4D4D4D;
position:absolute;
left:0%;
max-height:0px;
list-style: none;
display:block;
margin-top:0px;
border-radius:5px;
box-shadow: 3px 3px 10px 0px rgba(5,7,41,0.75);
overflow:hidden;
scrollbar-color: #BFBFBF #4D4D4D;
}
.option {
position:relative;
left:-10%;
background:#4D4D4D;
padding-left:5px;
padding-top:1px;
cursor:pointer;
border:0px solid transparent;
margin-bottom:0px;
width:108%;
}
.option:hover {
border:0px solid navy;
background:#000000;
}
#optionlogo {
position:relative;
height:24px;
width:96px;
left:0%;
}
#optionlabel {
position:relative;
left:-10%;
top:-8px;
color:#FFFFFF;
}
}
@media only screen and (max-width: 400px) {
.dropdownlist{
background:#BFBFBF;
position:absolute;
left:0%;
max-height:0px;
list-style: none;
display:block;
margin-top:0px;
border-radius:5px;
box-shadow: 3px 3px 10px 0px rgba(5,7,41,0.75);
overflow:hidden;
scrollbar-color: #77AAC3 #324377;
}
#optionlogo {
position:relative;
height:24px;
width:96px;
left:0%;
display:none;
}
.option {
position:relative;
left:-20%;
background:#BFBFBF;
padding-left:5px;
padding-top:1px;
cursor:pointer;
border:0px solid transparent;
margin-bottom:0px;
width:108%;
}
.option:hover {
border:0px solid navy;
background:#BFBFBF;
}
label {
display:block;
font-weight:700;
line-height:normal;
margin:10px 0 0 20px;
position:relative;
text-align:left;
width:90%;
}
#CompanySelect {
background: url(descending.png) no-repeat right transparent;
background-size:contain;
cursor:pointer;
display:block;
margin-bottom:2px;
padding-right:24px;
margin:10px 0 0 20px;
width:90%;
}
#eye{
background: url(eye.png) no-repeat right transparent;
background-size:contain;
display:inline-block;
width:24px;
margin-left:-28px;
cursor:pointer;
}
#eye:focus{
box-shadow:none;
}
input {
display:block;
background-color:transparent;
border-color:var(--border_colour);
border-radius:3px;
border-style:solid;
border-width:1px;
color:var(--text_colour);
font-size:100%;
margin:10px 0 0 20px;
width:90%;
}
input[type="password"] {
display:inline;
margin:10px 0 0 0px;
width:90%;
}
}
#login_logo {
height:51px;
margin:0 auto 10px;
width:200px
}
#CompanyNameField{
display:none;
}
button {
background:transparent;
border:solid var(--border_colour) 2px;
border-radius:7px;
color:var(--text_colour);
font-size:100%;
font-weight:700;
margin:10px 10px 10px 50px;
padding:4px;
width:30%;
transition-property:background;
transition-duration:0.8s;
}
button:hover {
background:#1A1A1A;
color:var(--text_colour);
cursor:pointer;
box-shadow:0 0 5px #7E7575
}
input.button:active {
background:#000
}
.waiting_show {
position:absolute;
float:left;
width:20px;
display:none;
}
.logo {
font-family: DejaVu,Futura,Trebuchet MS,Arial,sans-serif;
display:inline;
font-size:32pt;
width:auto;
cursor:default;
}
.logo-left {
background: var(--main_colour2);
color:var(--main_colour1);
padding-left:4px;
border-top-left-radius:32px;
border-bottom-left-radius:32px;
border-top:solid 2px var(--border_colour);
border-bottom:solid 2px var(--border_colour);
border-left:solid 2px var(--border_colour);
}
.logo-right {
background: var(--main_colour1);
color:var(--text_colour2);
padding-right:4px;
font-style:italic;
border-top-right-radius:32px;
border-bottom-right-radius:32px;
border-top:solid 2px var(--border_colour);
border-bottom:solid 2px var(--border_colour);
border-right:solid 2px var(--border_colour);
}