/*
Copyright 2023 Profware Systems - All rights reserved.
This code is a part of ARTData platform for OT and Edge.
This is a proprietary software of Profware Systems. 
The software copying, use, distribution, reverse engineering, disclosure and derivative works are prohibited unless explicitly allowed by Profware Systems through individual license agreement.
*/
html,body { 
    width: 100%; 
    height: 100%; 
    overflow: hidden;
    margin-top: 0em;
    margin-bottom: 0em;
    margin-left: 0em;
    margin-right: 0em;
}

/* This is header that includes logo, spacer and user name with logout */
.artdata_header {
    margin-top: 0em;
    margin-bottom: 0em;
    margin-left: 0em;
    margin-right: 0em;
    padding-bottom: 0em;
    background-color: #f0f0f0;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 50%;
    width:100%;  
    border-collapse: collapse;
}

/* This is ARTData icon */
div[type="artdata_header_png"] {
    position:relative;
    display:inline;
}

.copyright_login {
    position: absolute;
    right: 10px;
    font-size: 75%;
    color: #005184;
    line-height: 0%;
}

/* This is background section behind login container */
.login_background {
    margin-top: 0em;
    margin-bottom: 0em;
    margin-left: 0em;
    margin-right: 0em;
    min-height: 100vh;
    background: url(../img/login_background.png) no-repeat center;
    background-position: center;
    background-size: cover;
}

/* This is container that includes ARTData logo and login field with login button */
.login_container {
    display:block;
    width: 21em; 
    min-height: 26em;
    overflow:hidden;
    padding-bottom: 1em;
    background-color: #ffffffc9;
    border-radius: 2em;
    position: relative;
    transform: translateY(25%);
}

/* ARTData logo fade in animation settings */
@keyframes animationFrames{
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }

/* ARTData logo fade in animation */
img[type="login_logo"] {
    animation: animationFrames ease 2s;
}

/* Login form contains username, password and login button */
.login_form {
    font-family: Arial, Helvetica, sans-serif;
    color: #00153b9c;
    font-size: 14px;
}

/* Custom style for login button */
button[type="submit"] {
    width: 6em; 
    height: 2em;
    font-family: Arial, Helvetica, sans-serif;
    color: #00153bc9;
    font-size: 15px; 
    background-color: #e0dfdfc9;
    border-radius: 0.9em;
    border-width: 0.1em;
    border-color: #00153bc9;
}

button[type="submit"]:hover {
    background-color: #b6b6b6c9;
    transition:.5s;
}

/*  Demo login button style */
button[type="demo_login"] {
    width: 8em;  /* a bit wider to fit the text nicely */
    height: 2em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #ffffff;
    background-color: #4a7cd1;  /* soft blue tone */
    border-radius: 0.9em;
    border-width: 0.1em;
    border-color: #2e5ba4;
    cursor: pointer;
    margin-top: 0.5em;
}

button[type="demo_login"]:hover {
    background-color: #365f9c;
    transition: .5s;
}