﻿/******************** GLOBAL ********************/

#container { position:absolute; width:100%; max-width:1920px; top:50%; left:0; right:0; margin:0 auto; -webkit-transform:translateY(-50%); transform:translateY(-50%) }

#loginContent p { margin-top: 20px }

/******************** LOGIN BOX ********************/

#appLogin { width:90%; max-width:500px; margin:0 auto; padding:50px 80px; border-radius:6px }
#input-icon-container {
    position: relative;
}

#ShowPassword {
    position: absolute;
    bottom: 24px;
    right: 22px;
    font-size:20px;
} 

/* Logo */
.logo { display:block }
.logo img { width:100%; height:auto; margin:0 auto }

/* Form */
form { padding-top:40px; font:300 16px/26px 'Heebo', arial;}
form label { padding:5px 20px 0; display:block }
form input { width:100%; margin:20px 0 30px; padding:20px; border:2px solid transparent; border-radius:30px; display:block }
form button { padding:10px 36px; letter-spacing:0.01em; font:400 18px/1.4em 'Heebo', arial; border-radius:30px; border:none; cursor:pointer; display:block; margin:auto; }
form a { margin-left:20px; cursor:pointer }

/* Footer */
#loginFooter { margin-top: 48px; text-align: center; }
#container p { font:300 16px/26px 'Heebo', arial; text-align:center; }
#container p a img { width:auto; vertical-align:middle; display:inline-block;}
#loginFooter p {
    display: inline-flex;
    align-items: center;
}


/******************** NOTIFICATIONS ********************/

#notifications { position:fixed; width:400px; bottom:25px; right:25px; z-index:999999 }
#notifications div { position:relative; margin-top:10px; padding:20px 25px; border-radius:2px; cursor:pointer; opacity:0.9; box-shadow:0 0 5px rgba(0,0,0,0.3); display:none }
#notifications div p { margin:0; padding-right:30px; font:300 16px/26px 'Heebo', arial; }
#notifications div span { position:absolute; top:5px; font:300 16px/26px 'Heebo', arial; right:10px; }
