@import url('/libtent/fi/10/144/Kirjautumisen%20hallintalaatikko%20CSS.css');

#secauth-login-box {
margin-top:10px;
}

#secauth-table label {
display:inline-block;
padding:0.35em;
}

#secauth-table label.radio-label {
display:block;
padding:0.55em 0 0.55em 0.35em;
}

#secauth-table input[type=radio] {
margin:0;
vertical-align:-1px;
}

body, html {
margin:0;
padding:0;
height:100%;
}

body {
background:#FFF!important;
color:#333;
font-family:Arial, Helvetica, sans-serif;
font-size:0.813em;
line-height:1.333em;
padding:0;
}

body.secured-mail {
background:#fff;
}

img {
max-width:95%;
}

table img {
max-width:none;
}

textarea {
box-sizing:border-box;
}

#login-body {
background:#FFF;
font-size:0.75em;
line-height:1.333em;
}

abbr {
cursor:help;
}

h1 {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#d53229;
font-size:1.846em;
font-weight:normal;
line-height:0.833em;
margin:0.5em 0;
padding:0;
letter-spacing:-1px;
}

h1 em, h1 i {
font-size:0.667em;
font-style:italic;
text-transform:none;
letter-spacing:0;
display:block;
}

h1 img {
float:left;
margin:0 0.417em 0.417em 0;
}

h2 {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#666666;
font-size:1.35em;
font-weight:normal;
letter-spacing:-1px;
}

h3 {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1.077em;
}
h4 {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color: #666666;
font-size:1.35em;

font-weight:bold;
line-height:0.9em;
margin:0.5em 0;
padding:0;
letter-spacing:-1px;
}
h4 em, h4 i {
font-size:0.7em;
font-weight:normal;
text-transform:none;
letter-spacing:0;
display:block;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
max-width:60em;
}

ul {
padding-left:1em;
}

form {
margin:0;
padding:0;
}

small {
font-size:0.769em;
}

tr.row1 {
background-color:#DBDBDB;
}

tr.row2 {
background-color:#F7F7F7;
}

#wrapper {
height:auto !important; /* Make site wrapping div atleast 100% high */
min-height:100%;
height:100%;
position:relative;
width:100%;
}

#header {
padding:0 10px;
margin:0 auto;
}

#header img {
border:0;
}

#lang-width-select {
background:#EEE;
margin:0 auto;
text-align:right;
float:right;
color:#FFF;
border-bottom:1px solid #FFF;
border-left:1px solid #CCC;
border-right:1px solid #FFF;
}

#lang-width-select img {
vertical-align:middle;
}

#lang-width-select ul {
margin:0;
padding:0;
list-style:none;
float:right;
}

#lang-width-select ul li {
float:left;
margin:0 0 0 1em;
line-height:2.308em;
}

#lang-width-select ul li a {
line-height:1em;
font-size:0.769em;
}

#lang-width-select ul li img {
margin:16px 0 0 0;
}

#lang-select {
padding:5px 10px;
float:left;
border-right:1px solid #FFF;
}

#lang-select a {
color:#888;
}

#width-select {
background:#666;
padding:5px 10px;
float:left;
}

#logo-it {
background:transparent url(/files/png/75278/online%2Dsolutions%2Dsecmail%2Dr.png) no-repeat 0 50%;
float:left;
height:101px; /* Fixed size because of the image size */
width:220px; /* Fixed size because of the image size */
}

#logo-sv {
background:transparent url(/files/png/75278/online%2Dsolutions%2Dsecmail%2Dr.png) no-repeat 0 50%;
float:left;
height:101px; /* Fixed size because of the image size */
width:220px; /* Fixed size because of the image size */
}

#logo-en {
background:transparent url(/files/png/75278/online%2Dsolutions%2Dsecmail%2Dr.png) no-repeat 0 50%;
float:left;
height:101px; /* Fixed size because of the image size */
width:220px; /* Fixed size because of the image size */
}

#logo-fi {
background:transparent url(/files/png/75278/online%2Dsolutions%2Dsecmail%2Dr.png) no-repeat 0 50%;
float:left;
height:101px; /* Fixed size because of the image size */
width:220px; /* Fixed size because of the image size */
}

.secured-mail #logo-en {
background:transparent url(/files/png/96658/secmail%2Dsecure%2Demail.png) no-repeat 0 50%;
float:left;
height:90px; /* Fixed size because of the image size */
width:200px; /* Fixed size because of the image size */
}

.secured-mail #logo-fi {
background:transparent url(/files/png/96659/secmail%2Dsuojattu%2Dposti.png) no-repeat 0 50%;
float:left;
height:90px; /* Fixed size because of the image size */
width:200px; /* Fixed size because of the image size */
}

#secure-logo-it {
background:transparent url(/files/png/266413/online%2Dsolutions%2Dsecmail%2Dr%2Dposta%2Delettronica%2Dsicura%2D200.png) no-repeat 0 50%;
float:left;
height:90px; /* Fixed size because of the image size */
width:200px; /* Fixed size because of the image size */
}

#secure-logo-sv {
background:transparent url(/files/png/132792/online%2Dsolutions%2Dsecmail%2Dr%2Dskyddad%2De%2Dpost.png) no-repeat 0 50%;
float:left;
height:90px; /* Fixed size because of the image size */
width:200px; /* Fixed size because of the image size */
}

#secure-logo-en {
background:transparent url(/files/png/96658/secmail%2Dsecure%2Demail.png) no-repeat 0 50%;
float:left;
height:90px; /* Fixed size because of the image size */
width:200px; /* Fixed size because of the image size */
}

#secure-logo-fi {
background:transparent url(/files/png/96659/secmail%2Dsuojattu%2Dposti.png) no-repeat 0 50%;
float:left;
height:90px; /* Fixed size because of the image size */
width:200px; /* Fixed size because of the image size */
}

#logo-fi a, #logo-en a, #logo-sv a, #logo-it a {
display:block;
height:101px; /* Fixed size because of the image size */
width:220px; /* Fixed size because of the image size */
}

#secure-logo-en a, #secure-logo-sv a, #secure-logo-fi a, #secure-logo-it a {
display:block;
height:90px; /* Fixed size because of the image size */
width:200px; /* Fixed size because of the image size */
}

.secured-mail #logo-en a {
height:90px; /* Fixed size because of the image size */
}

.secured-mail #logo-fi a {
height:90px; /* Fixed size because of the image size */
}

#logo-fi h1, #logo-en h1, #logo-sv h1, #logo-it h1, #secure-logo-en h1, #secure-logo-sv h1, #secure-logo-fi h1, #secure-logo-it h1 {
display:none;
}

#login-body #logo-en {
background:transparent url(/files/png/75278/online%2Dsolutions%2Dsecmail%2Dr.png) no-repeat 0 50%;
height:100px; /* Fixed size because of the image size */
}

#login-body #logo-fi {
background:transparent url(/files/png/75278/online%2Dsolutions%2Dsecmail%2Dr.png) no-repeat 0 50%;
height:100px; /* Fixed size because of the image size */
}

#login-body #logo-fi a, #login-body #logo-en a {
display:block;
height:100px; /* Fixed size because of the image size */
width:200px; /* Fixed size because of the image size */
}

#login-body #logo-fi h1, #login-body #logo-en h1 {
display:none;
}

#login-body #secured-logo-it {
background:transparent url(/files/png/266413/online%2Dsolutions%2Dsecmail%2Dr%2Dposta%2Delettronica%2Dsicura%2D200.png) no-repeat 0 50%;
height:100px; /* Fixed size because of the image size */
}

#login-body #secured-logo-sv {
background:transparent url(/files/png/132792/online%2Dsolutions%2Dsecmail%2Dr%2Dskyddad%2De%2Dpost.png) no-repeat 0 50%;
height:100px; /* Fixed size because of the image size */
}

#login-body #secured-logo-en {
background:transparent url(/files/png/132784/online%2Dsolutions%2Dsecmail%2Dr%2Dsecure%2Demail%2D200.png) no-repeat 0 50%;
height:100px; /* Fixed size because of the image size */
}

#login-body #secured-logo-fi {
background:transparent url(/files/png/132785/online%2Dsolutions%2Dsecmail%2Dr%2Dsuojattu%2Dposti%2D200.png) no-repeat 0 50%;
height:100px; /* Fixed size because of the image size */
}

#login-body #secured-logo-fi a, #login-body #secured-logo-en a, #login-body #secured-logo-sv a, #login-body #secured-logo-it a {
display:block;
height:100px; /* Fixed size because of the image size */
width:200px; /* Fixed size because of the image size */
}

#login-body #secured-logo-fi h1, #login-body #secured-logo-en h1, #login-body #secured-logo-sv h1, #login-body #secured-logo-it h1 {
display:none;
}


#login-box {
float:right;
clear:right;
text-align:right;
color:#666;
padding-bottom:10px;
max-width:100%;
}

#login-box input {
vertical-align:middle;
background:#FFF;
border:1px solid;
border-color:#CCC #FFF #FFF #CCC;
padding:5px;
}

#login-box input:hover, #login-box input:focus {
border-color:#CCC;
}

#login-box input.submit-button {
background:#666;
border-color:#999 #333 #333 #999;
width:auto;
color:#FFF;
font-weight:bold;
}

#login-box input::-moz-focus-inner /*Remove button padding in FF*/
{ 
border:0;
padding:0;
}

#login-box label {
font-style:italic;
font-size:0.923em;
line-height:1em;
}

#login-box table {
text-align:left;
}

#login-box table td {
vertical-align:bottom;
}

#login-box small input, #login-box small img {
vertical-align:-2px;
}

#login-box p {
font-size:0.923em;
margin:0;
padding:0;
}

#login-box a {
color:#888;
}

@media screen and (max-width:420px){
  #login-box table td {
      vertical-align: bottom;
      float: left;
      width: calc(100% - 4px);
  }
  #login-box input {
      float: left;
      width: calc(100% - 10px);
  }
}

#main-menu {
background:#e22e26;
clear:both;
position:relative;
z-index:2;
}

#main-menu ul {
margin:0;
padding:2px;
list-style:none;
}

#main-menu ul, #sub-menu ul {
  *zoom: 1;
}

#main-menu ul:before, #sub-menu ul:before,
#main-menu ul:after, #sub-menu ul:after {
  display: table;
  line-height: 0;
  content: "";
}

#main-menu ul:after, #sub-menu ul:after {
  clear: both;
}

#main-menu ul li {
display:block;
float:left;
text-align:center;
color:#FFF;
text-decoration:none;
font-size:1em;
font-weight:normal;
}

#main-menu ul li a {
background:rgba(255,255,255,0.2);
border:1px solid rgba(255,255,255,0.3);
display:block;
float:left;
text-align:center;
color:#FFF;
text-decoration:none;
font-weight:normal;
padding:7px 14px;
margin:2px;
}

#main-menu ul li a:hover {
background:rgba(0,0,0,0.15);
border:1px solid rgba(0,0,0,0.25);
}

#main-menu ul li ul li a, #sub-menu ul li a {
float:none;
}

#main-menu ul li ul {
position:absolute;
bottom:-1em;
left:0;
height:1em;
width:100%;
}

#sub-menu ul {
margin:0;
padding:2px 4px;
}

#main-menu ul li ul li, #sub-menu ul li {
background:#FFF;
display:block;
float:left;
text-align:center;
color:#FFF;
text-decoration:none;
font-size:1em;
font-weight:normal;
color:#999;
}

#main-menu ul li ul li a, #sub-menu ul li a {
display:block;
float:left;
text-align:center;
text-decoration:none;
font-weight:normal;
}

#main-menu ul li.act ul li a, #sub-menu ul li a {
background:#f8f8f8;
border:1px solid #DDD;
color:#666;
text-decoration:none;
font-weight:normal;
margin:2px;
padding:5px 10px;
}

#main-menu ul li.act {
background:#FFF;
border-left:1px solid #FFF;
border-right:1px solid #CCC;
}

#main-menu ul li.act a {
color:#900;
background:#FFF;
}

#main-menu ul li ul li.act a, #main-menu ul li.act ul li.act a:hover {
background:#444;
color:#FFF
}

#main-menu ul li.act a:hover {
background:#FFF;
}

#main-menu ul li ul li a:hover {
background:#EEE;
}

#atmos-wrapper {
clear:both;
width:auto !important;
max-width:100%;
width:100%;
border-top: 1px solid #fff;
}

#atmos {
text-align:center;
padding:0;
height:200px; /* Fixed size because of the image size */
overflow:hidden;
position:relative;
}

#atmos img {
min-width:100%;
min-height:100%;
max-width:none;
text-align: center;
}

#atmos #email-distribution {
font-size:.9em;
line-height:.9em;
position:absolute;
top:0;
left:0;
text-align:left;
max-width:400px;
background: -moz-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( enabled='true', startColorstr='#a6000000', endColorstr='#00000000', GradientType=1 ); /* IE6-9 */
color:#FFF;
padding:10px 0 3.5em 10px;
overflow:auto;
}

#atmos #email-distribution:hover {
cursor:pointer;
}

#atmos #email-distribution img {
max-width:none !important;
min-width:0 !important;
width:auto !important;
-webkit-border-radius: 100px;
border-radius: 100px; 
}

#atmos #email-distribution td {
text-shadow: 1px 1px 0px #333333;
}

#atmos #atmos-img {
position:absolute;
right:0;
top:0;
z-index:-1;
}

#atmos #atmos-img.atmos-2016 {
  position:relative;
  left: 50%;
  margin-left: -100%;
  top:50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right:auto;
  }

#content-wrapper {
margin:0 auto;
position:relative;
}

#content {
background:#fff!important;
padding:20px 1%;
width:98%;
position:relative;
float:left;
z-index:2;
clear:both;
}

.secured-mail #content {
padding:0;
width:100%;
}

#login-body #content {
padding:0 1%;
}

#footer-wrapper {
width:100%;
background:#CCC;
clear:both;
position:absolute;
bottom:0;
z-index:3;
}

#footer {
margin:0 auto;
}

#footer ul, #contact-info {
margin:0;
padding:30px 1%;
list-style:none;
width:17.5%;
float:left;
position:relative;
}
#footer ul.col-7 {
width:9.5%;
}


@media (max-width:800px) {
  #footer-padding {
  padding-top:380px !important;
  }
  #footer ul, #footer ul.col-7, #contact-info {
  padding:30px 2% 0;
  width:21%;
  }
  #finnish-production {
  text-align:left !important;
  }
}
@media (max-width:500px) {
  #footer ul.col-7 {
  width:46%;
  }
  #footer ul.col-7.twitter,
  #footer ul.col-5.twitter{
  padding:30px 2% 0;
  width:96%;
  }
}

#footer a.btn{
background: #f5f5f5;
border-radius: 6px;
float: left;
padding: 0.5em 1.25em 0.5em 1em;
line-height: 2em;
border: solid 1px #adadad;
margin-top: 25%;
}
#footer .col-5 a.btn{
margin-top: 16%;
}
@media (max-width:800px) {
  #footer a.btn,
  #footer .col-5 a.btn {
  margin-top: 0;
  }
}
#footer a.btn:hover{
background: #fff;
text-decoration: none;
}
#footer .btn img{
width: 25px;
padding-right: 0.5em;
vertical-align: middle;
}

@media (max-width:500px) {
#footer-padding {
padding-top:585px !important;
}
#footer ul, #contact-info {
padding:30px 3% 0;
width:44%;
}
#finnish-production {
text-align:left !important;
}
}

#footer img {
border:0;
}

#login-contact-info {
margin:0;
padding:20px 1%;
list-style:none;
float:left;
position:relative;
}

#login-contact-info h3, #login-contact-info p {
float:left;
color:#333;
font-size:0.769em;
margin:0 20px 0 0;
}

#footer ul li {
color:#333;
font-size:0.833em;
line-height:1.1em;
padding:3px 0;
margin:0;
}

#footer ul li h3 {
font-size:1em;
font-weight:bold;
margin:0;
padding:0;
}

#footer ul li a {
color:#333;
text-decoration:none;
}

#contact-info img {
width:auto;
max-width:100%;
}

#footer ul li a:hover {
color:#000;
text-decoration:underline;
}

#footer ul.registered-feature li a {
color:#666;
}

#contact-info {
color:#333;
font-size:0.769em;
}

#contact-info h3 {
margin:0;
padding:0 0 1em 0;
}

#contact-info p {
font-size:1em;
line-height:1.2em;
padding:3px 0;
margin:0;
}

.columns2 {
width:47%;
padding:0 1%;
float:left;
}

.columns3 {
width:31%;
padding:0 1%;
float:left;
}

.columns4 {
width:23%;
padding:0 1%;
float:left;
}

.columns5 {
width:18%;
padding:0 1%;
float:left;
}

.columns2 > div,
.columns3 > div,
.columns4 > div,
.columns5 > div {
overflow:auto;
}

#info-box {
background:#FFF;
border:3px solid #999;
-moz-border-radius: 10px;
border-radius: 10px;
width:300px;
padding:10px 20px;
position:absolute;
right:60px;
top:50px;
z-index:10;
opacity:.95;
}

#info-box p {
font-size:14px;
line-height:21px;
margin:0 0 14px 0;
padding:0;
}

#info-box-arrow {
background:transparent url(/files/png/14639/info%2Dbox%2Dbg.png) no-repeat;
width:46px;
height:19px;
position:absolute;
top:-19px;
right:5px;
z-index:-3;
}

ul.no_list_item {
margin-left:0;
padding-left:0;
list-style:none;
}

div.news {
background:#ffffff;
border:1px solid grey;
padding:10px;
margin-bottom:1em;
-moz-border-radius:5px;
border-radius:5px;
}

div.news h2 {
line-height:1em;
margin:.25em 0;
}
div.torjutuille {
background:#ffffff;
border:1px solid #d53229;
padding-top:0px;
padding-right:10px;
padding-left:10px;
padding-bottom:10px;
margin-bottom:1em;
margin-top:-5px;
-moz-border-radius:5px;
}

div.yhteys {
background:#ffffff;
border:1px solid grey;
padding-top:0px;
padding-right:10px;
padding-left:10px;
padding-bottom:10px;
margin-bottom:1em;
margin-top:-5px;

}

#header {
background: #eee;
background-image: -webkit-linear-gradient(top, #fff 0px, #ddd 200px, #ddd 100%);
background-image: -moz-linear-gradient(top, #fff 0px, #ddd 200px, #ddd 100%);
background-image: -o-linear-gradient(top, #fff 0px, #ddd 200px, #ddd 100%);
background-image: -ms-linear-gradient(top, #fff 0px, #ddd 200px, #ddd 100%);
background-image: linear-gradient(top, #fff 0px, #ddd 200px, #ddd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 );
border-bottom:1px solid #fff;
min-height:101px;
position:relative;
}

#sites-menu {
position:relative;
float:left;
clear:left;
bottom:-1px;
left:0;
margin:0;
/*z-index:1000;*/
z-index:1;
}
#sites-menu ul {
list-style:none;
margin:0;
padding:0;
}
#sites-menu ul li {
display:block;
float:left;
}
#sites-menu ul li a {
background:#CCC;
color:#FFF;
font-size:1em;
display:block;
float:left;
margin-right:2px;
padding:7px 14px;
position:relative;
top:3px;
text-align:center;
text-decoration:none;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
@media (max-width:400px) {
#sites-menu ul li a {
font-size:11px;
padding:7px;
margin-right:1px;
}
}
#sites-menu ul li.public a {
background:#e22e26;
}
#sites-menu ul li.private a {
background:#2980b9;
}
#sites-menu ul li.admin a {
background:#ec9c07;
}
#sites-menu ul li.other a {
background:#AAA;
}
#sites-menu ul li a:hover {
text-decoration:none;
}
#sites-menu ul li.active a {
padding:9px 14px;
top:0;
}
#main-menu.customer-site,
#main-menu.parent-13847 {
background:#2980b9;
}
#main-menu.admin-site,
#main-menu.parent-15356 {
background:#ec9c07;
}
table.buttons {
width: 100%;
max-width:100%;
vertical-align: middle;
margin-bottom: 10px;
}
table.buttons tr {
width: 100%;
height: 100%;  
display: table-cell;
vertical-align: middle;
}
table.buttons td {
display:table;
vertical-align: middle;
float:left;
width:23em;
}
table.buttons a {
background:#444;
color:#ecf0f1;
font-size:14px;
display:table-cell;
padding:10px 10px 10px 10px;
width:20em;
height: 60px;
border:1px solid #FFF;
line-height:1.3em;
text-align:center;
vertical-align:middle;
text-decoration: none;
}
table.buttons a:hover {
background:#606060;
text-decoration:none;
}
table.buttons2 {
width: 100%;
max-width:100%;
vertical-align: middle;
margin-bottom: 10px;
}
table.buttons2 tr {
width: 100%;
height: 100%;  
display: table-cell;
vertical-align: middle;
}
table.buttons2 td {
display:table;
vertical-align: middle;
float:left;
width:17em;
}
table.buttons2 a {
background:#333333;
color:#ecf0f1;
font-size:14px;
display:table-cell;
padding:10px 10px 10px 10px;
width:20em;
height: 100px;
border:1px solid #FFF;
line-height:1.3em;
text-align:center;
vertical-align:middle;
}
table.buttons2 a:hover {
background:#555555;
text-decoration:none;
}

.blue-buttons {
margin-bottom:15px;
}

.blue-buttons a {
background:#2980b9;
color:#fff !important;
text-decoration: none;
font-size:14px;
display:block;
padding:10px 10px 10px 10px;
max-width:30em;
border:0px solid #FFF;
line-height:1.3em;
text-align:left;
margin:0 0 5px 0;
}
.blue-buttons a h4 {
color:#fff;
}
.blue-buttons a:hover {
background:#3498db;
text-decoration:none;
}

.grey-buttons {
margin-bottom:15px;
}

.grey-buttons a {
background:#444;
color:#fff !important;
text-decoration: none;
font-size:14px;
display:block;
padding:10px 10px 10px 10px;
max-width:30em;
border:0px solid #FFF;
line-height:1.3em;
text-align:center;
margin:0 0 5px 0;
}
.grey-buttons a h4 {
color:#fff;
font-size:1.4em;
font-weight:normal;
line-height:1.15em;
letter-spacing:0;
}
.grey-buttons em {
font-style:normal;
}
.grey-buttons a:hover {
background:#606060;
text-decoration:none;
}

#alert-wrapper {
position:fixed;
top:-100%;
left:0;
right:0;
padding:10px;
z-index:100000;
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#00000000',GradientType=0 );
max-height:calc(100vh - 20px);
overflow:hidden;
}

#alert-wrapper.popup-visible {
top:0;
}

.alert-popup {
background:#fff;
border:1px solid #bbb;
display:block;
max-width:70em;
margin:0 auto 10px auto;
padding:10px;
pointer-events:auto;

max-height:calc(100vh - 40px);
overflow: auto;
}

.alert-popup:before,
.alert-popup:after {
content: " ";
display: table;
}

.alert-popup:after {
clear:both;
}

.alert-text {
float:left;
padding:4px 0;
}

.alert-buttons {
clear:both;
float:right;
margin-left:10px;
margin-bottom:10px;
}

#alert-popup {
background:#fff;
border:1px solid #bbb;
display:block;
max-width:70em;
margin:0 auto 10px auto;
padding:10px;
pointer-events:auto;
}

#alert-popup:before,
#alert-popup:after {
content: " ";
display: table;
}

#alert-popup:after {
clear:both;
}

#alert-text {
float:left;
padding:4px 0;
}

#alert-buttons {
clear:both;
float:right;
margin-left:10px;
}

.striped-table th {
text-align:left;
}

.striped-table tbody tr:nth-child(odd) td {
background:#f8f8f8;
}

.striped-table tbody tr:nth-child(even) td {
background:#d8d8d8;
}

.striped-table .col1 {
font-weight:bold;
text-align:right;
}


div#the-emergency-popup-container {
  position: fixed; 
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000000; /* Kaiken muun yläpuolelle */
  background: rgba(0,0,0,0.3);
  
  -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadein 1s; /* Firefox < 16 */
      -ms-animation: fadein 1s; /* Internet Explorer */
       -o-animation: fadein 1s; /* Opera < 12.1 */
          animation: fadein 1s;
}
div#the-emergency-popup {
  border: 1px solid #CCC; 
  border-top: 3px solid #e22e26; 
  background: #fff; 
  padding: 1em; 
  margin-bottom: 1em; 
  max-width: 100%;
  width: 52em;
  max-height: 100vh;
  overflow: auto;
  position: fixed; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  -webkit-box-shadow: 1px 5px 20px 0px rgba(0,0,0,0.75); 
  -moz-box-shadow: 1px 5px 20px 0px rgba(0,0,0,0.75); 
  box-shadow: 1px 5px 20px 0px rgba(0,0,0,0.75);"
  
  -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadein 1s; /* Firefox < 16 */
      -ms-animation: fadein 1s; /* Internet Explorer */
       -o-animation: fadein 1s; /* Opera < 12.1 */
          animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

div#the-emergency-popup a.btn {
  background: #2980b9;
  border-color: #2980b9;
  color: #fff;
  padding: 4px 1em;
}