@font-face {
    font-family: 'siemens_sansroman';
    src:url('font/sisan03-webfont.eot');
    src:url('font/sisan03-webfont.eot?#iefix') format('embedded-opentype'),
		url('font/sisan03-webfont.woff') format('woff'),
		url('font/sisan03-webfont.ttf') format('truetype'),
		url('font/sisan03-webfont.svg#siemens_sansroman') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'siemens_sansbold';
    src:url('font/sisan06-webfont.eot');
    src:url('font/sisan06-webfont.eot?#iefix') format('embedded-opentype'),
        url('font/sisan06-webfont.woff') format('woff'),
        url('font/sisan06-webfont.ttf') format('truetype'),
        url('font/sisan06-webfont.svg#siemens_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

*{
    font-family: 'siemens_sansroman','Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Helvetica, Arial, Verdana, sans-serif;
}
 body{
    margin: 0;
    padding: 0;
	height:100vh;
	min-height:600px;
    color:#999;
    background: #023f76 url("backgrounds/microgrid-visual.jpg") no-repeat center;
	background-size:cover;
    font-size: 13px;
}
 #d{
    margin-left: -180px;
    width: 360px;
    z-index: 99;
    position: absolute;
    top: 200px;
    left: 50%;
    background-color: #fff;
    height:360px;
     box-shadow: 0px 0px 20px 5px #aaa;
     -webkit-box-shadow: 0px 0px 20px 5px #aaa;
     -moz-box-shadow: 0px 0px 20px 5px #aaa;
     -ms-filter:"progid:DXImageTransform.Microsoft.Glow(Color=#ff888888,Strength=34)";
     filter:progid:DXImageTransform.Microsoft.Glow(Color=#ff888888,Strength=34);
}
 #u,#p{
    width: 248px;
    background: #fff;
    border: solid 1px #ccc;
    color: #555;
    padding: 13px 12px 13px 56px;
    font-size: 14px;
    margin: 0;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
 #u{
    /*border-bottom-width:0;*/
    margin-top:0;
    /*background: url(icons/user-login.png) no-repeat center left !important;*/
}
 #p{
    /*background: url(icons/lock-login.png) no-repeat center left !important;*/
}
 #u:focus,#p:focus {
     outline: none;
}
#cont-input {
     margin-top:0;
}
#cont-check-button {
     margin-left:20px;
     margin-top:15px;
}

#cont-input .img {
    position: absolute;
    height: 44px;
    width: 44px;
    margin-left: 21px;
}

#cont-input .img.u {
    background: url(icons/user-login.png) no-repeat;
    background-position: left center;
}

#cont-input .img.p {
    background: url(icons/lock-login.png) no-repeat;
    background-position: left center;
}


 #c-r{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:40px;
    margin-bottom:0;
    text-align:right;
    padding-right:10px;
}
 #p{
    margin-bottom:10px;
}
 #r{
     border-color: #ccc;
}
 #ls{
    float:right;
}
 #up1,#up2{
    background-color: #fff;
    padding:0;
    margin:0;
    color:#374B5A;
    text-align: center;
}
 #up1{
    height:128px;
    background:url(logos/logo-login-left.png?v=2.1) no-repeat;
    background-size:100%;
    text-indent: -9999px;
}
 #up2{
    font-size:17px;
    height: 20px;
    line-height: 20px;
    font-weight: regular;
    position:relative;
    top:-10px;
}

#up2 {
	display:none;
}

 br{
    clear:both;
}
 #w{
    top:0;
    right:0;
    width:100%;
    height:100%;
    position:fixed;
    text-align:center;
     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
     -moz-opacity:0.7;
    -khtml-opacity:0.7;
    opacity:0.7;
    z-index:1000;
    background-color:white;
    display:none;
}
 #w div{
    margin-top:300px;
    height: 100px;
    width: 100px;
    left: 50%;
    text-align: center;
    position: absolute;
    margin-left: -50px;
     top: 50%;
    margin-top:-50px;
}
 #w img{
    margin-top: 42px;
}
 #b, #b:focus{
    color:#999;
    line-height: 16px;
    font-size: 13px;
    font-weight: normal;
    font-family: "siemens_sansroman","Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, Verdana, sans-serif;
     outline:none;
     color:#444444;
     text-align: center;
    white-space: nowrap;
    overflow: hidden;
    float:right;
    margin-right:24px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    padding: 8px 20px;
    border: 1px solid #CCC;
    background-color: #ECECEC;
    display: inline-block;
    position: relative;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: middle;
    text-decoration: none
}
 #b:hover{
    border-color: #aaaaaa;
     color:#444444;
}
 #b:active{
    border-color: #aaaaaa;
     background-color:#dadada;
     color:#444444;
}
 .cont-login {
    width:288px;
    height:auto;
	padding-bottom:20px;
    background-color:#fff;
    z-index: 99;
    position: absolute;
    top: 50%;
    right:12vw;
	transform:translateY(-50%);
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
    display:block;
    text-align:center;
}
 #l-c{
    float:left;
    display:inline;
	margin-top:7px;
}
 #l-c label{
    position:relative;
	top:-2px;
}
 #r-b{
    float:right;
    display:inline;
}

a {
	color: #023f76;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

.panel-action-top {
    padding: 20px 20px 0 20px;
    text-align: left;
}

#cont-error-messages {
	padding: 4px 0 0 76px;
    text-align: left;
    height: 23px;
}
#cont-error-messages span {
	opacity: 0;
	color: #d22e3c;
	font-size: 12px;
    font-family: "siemens_sansbold";
    transition: opacity .5s;
}
#cont-error-messages span.show {
    opacity: 1;
    transition: opacity .5s;
}


#toast-container {
    position: absolute;
    bottom: 50px;
    width: 100%;
    height: 46px;
    z-index: 200;
    transform: translateY(60%);
    display: flex;
    justify-content: center;
    visibility: hidden;
}

#toast-container.show {
    visibility: visible;
}

#toast-container .toast {
    background-color: white;
    border-radius: 4px;
    border: 1px solid #31AD70;
    color:#31AD70;
    font-size: 12px;
    padding:12px 20px;
    display: flex;
    align-items: center;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s, transform .5s;
    height: 40px;
    box-sizing: border-box;
}
#toast-container .toast.show {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .5s, transform .5s;
}
#toast-container .toast span {
    font-family: "siemens_sansbold";
}

#toast-container .toast a {
    font-family: "siemens_sansbold";
    color:#31AD70;
    font-size: 12px;
    text-decoration: underline;
    display: inline-block;
    margin-left:12px;
}

/* ENERGY IP COPYRIGHT */

.copyright {
	margin-top:100px;
	padding:0 20px;
	text-align:left;
}

.copyright .title {
	font-family:'siemens_sansbold','Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Helvetica, Arial, Verdana, sans-serif;
	font-size:10px;
	margin-bottom:12px;
}

.copyright .description {
	font-size:9px;
	line-height:11px;
}


/**footer**/

.footer {
  position: fixed;
  bottom:0;
  left:0;
  width: 100%;
  height: 40px;
  z-index: 10;
  background-color: rgba(255,255,255,.4);
  text-align: center;
  color:#333;
}

.footer span {
  display: inline-block;
  margin-right:40px;
}

.footer nav {
  display: inline-block;
  margin:0;
  padding: 0;
}

.footer nav ul {
  padding: 0;
}

.footer nav ul li {
	display: inline-block;
	margin-left: 20px;
	list-style: none;
}

.footer nav ul li a:hover {
  text-decoration: underline;
}