@charset "UTF-8";


:root{
  --bg: #ffffff;
  --text: #0b1220;
  --muted: #5b667a;
  --brand: #1d4ed8;
  --brand-600: #1e40af;
  --brand-100: #eef4ff;
  --border: #e5e7eb;
  --surface: #f7f9fc;
  --focus: #0ea5e9;
  --danger: #c1121f;
  --ok: #127c35;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 24px rgba(0,0,0,.06);
}


html{ -webkit-text-size-adjust:100%; }
*,*::before,*::after{ box-sizing:border-box; }
html, body{ overflow-x:hidden; }
body{
  margin:0;
  font:16px/1.55 Helvetica,Arial;
  color:var(--text);
  background:var(--bg);
}
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
button,input[type="button"],input[type="submit"]{ min-height:44px; padding:10px; }

.fontha,.fontgha,.fontahs{ font-family:Helvetica,Arial,sans-serif; }
.fontsmall,.fonthasmall,.fontghasmall,.fontahssmall,.fontgharedsmall,.fontghabluesmall{ font-size:.95rem; }
.fonthasmaller,.fontha75{ font-size:.9rem; }
.fontghabig{ font-size:1.3rem; }
.fontblue,.fontghabluesmall{ color:#0b63ce; }
.fontdarkred,.fontred,.fontgharedsmall,.fontahsred,.fontahsredsmall{ color:#c00000; }
.fontblack,.fontahsblack{ color:#000; }
.fontahswhite,.fontahswhitesmall{ color:#fff; }

button, input[type="button"]:not(#addbutton):not(#rmbutton), input[type="submit"], .primary{
  font-size: 1rem; 
  font-family: inherit;
  line-height: inherit;
}




:where(input, textarea, select, button) {
  font-family: inherit !important;
  font-size: inherit; 
  line-height: inherit;
}

#copytable {
    margin-bottom:15px;
}

#wrapper{
  max-width:46rem;
  width:100% !important;
  margin:0 auto;
  padding:0 1rem;
  position:relative; 
}

#header,#footer{ color:#000; margin:1rem 0 0 0; font-size:14px; }
#header{
  padding-top:40px;
}

/* Yhteiset: EI aseteta widthiä täällä ollenkaan */
#header img{
  display:block;
  height:auto;
  border:0;
  margin:0 0 25px 0 !important;
}

/* Oletus (kun ylläpito EI ole asettanut width-attribuuttia) */
#header img:not([width]){
  /* responsiivinen oletus */
  /* HUOM: width vain tässä, jotta attribuutti voi voittaa muissa tapauksissa */
  width:auto;
  max-height:72px;
  max-width:clamp(180px,30vw,320px);
}

/* Kun ylläpito ON asettanut width-attribuutin:
   - älä rajoita mittoja CSS:llä, jotta attribuutti määrää leveyden
   - height:auto pitää kuvasuhteen */
#header img[width]{
  /* EI width-arvoa tänne! */
  max-width:none;
  max-height:none;
}



#header h1{
  margin:.35rem 0 0 0;
  font-size:clamp(1.35rem,3.2vw,1.8rem);
  line-height:1.25;
}

#logotd {
    padding-top:40px;
}


#lang{
  position:absolute !important;
  top:8px; right:1rem;
  margin:0 !important; float:none !important;
  display:flex !important; gap:.5rem !important;
  align-items:center !important; justify-content:flex-end !important;
  font-size:.9rem !important;
  background:transparent !important; padding:0 !important; border:0 !important;
}

#confirm-reminder, #passwd_delivery_method, #recipient_verified_using_strongid{
    font-size:0.9rem;
}



#lang a{
  color:#0066cc !important;
  text-decoration:underline !important;
  padding:0 !important; border:0 !important; background:transparent !important;
}

#message{
  width:100% !important; border:1px solid #ddd; border-radius:0 !important;
  background:var(--bg); padding-bottom:.5rem; margin-bottom:1.25rem;
}
#message dl dt{
  color:#222; font-weight:600; background:#f6f7f9;
  padding:.75rem 1rem; border-bottom:1px solid #e5e7eb;
}

#message .linedata {
  font-weight: 400;
  display: inline-block;          
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word; 
}

#composeform input[type="text"]:not(#cmsg_send_copy_mobile):not(#cmsg_notify_gsm),#composeform textarea{
  width:100% !important; max-width:100%;
  font-size:1rem;
   padding:.1rem .2rem;
  border:1px solid var(--border); border-radius:0 !important;
}



#cmsg_sender,#cmsg_subject,#message textarea{ font-size:1rem !important; }
#cmsg_submit{
  font-size: 1rem; 
  font-family: inherit;
  line-height: inherit;
}


#cmsg_submit:hover{ filter:brightness(1.05); }
#cmsg_submit{
    margin-bottom:10px;
}

#inprogress{ font-size:.95rem; color:var(--danger); display:none; }

.attform{ width:100% !important; }
.addbutton{
  margin:.6rem .9rem .9rem 0; font-size:1rem; padding:.6rem .9rem;
}
.attfile{ overflow:hidden; position:absolute; clip:rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0; }
.attachmentlist{ margin-top:.5rem; font-size:.95rem; color:var(--muted); }

table{ border-collapse:collapse; width:100%; }
td,th{ vertical-align:top; }
.pw-td{ width:100%; }

@media (min-width:720px){ .pw-td{ width:auto; } }

/* Kopio itselle */
#send_copy_mobile{ visibility:hidden; display:none; margin-left:23px; }
#send_copy_mobile[style*="visible"]{ display:block; }

/* Ilmoituslaatikot */
.separator_line{ margin:.5rem 0 1rem 0; border:0; height:3px; background:#9BBCF6; }
.confirm,.warning,.warningvst,.readtime{ padding:.75rem 1rem; margin:.75rem 0; border-radius:0 !important; }
.confirm{ background:#eaf2ff; font-size:1.05em; }
.warning{ background:#eaf2ff; font-weight:600; }
.warningvst{ background:#fff; border:1px solid #eee; }
.readtime{ background:#eaf2ff; font-weight:700; }

/* Popupit */
#popup-content-pw,#popup-content-sms,#popup-content-smscopy,#popup-content-terms{
  display:none; position:fixed; left:50%; top:7%; transform:translateX(-50%);
  width:min(600px,92vw); max-width:92vw; max-height:80vh;
  border:1px solid var(--border); border-radius:0 !important; padding:16px;
  background:var(--bg); color:var(--text); z-index:1000; overflow:auto;
  box-shadow:var(--shadow);
}
#popup-content-terms{ max-height:90vh; }
#popup-content-pw.show,#popup-content-sms.show,#popup-content-smscopy.show,#popup-content-terms.show{ display:block; }

/* Responsiivisuus */
@media (max-width:99999px){
  body{ font-size:17px; }
  #message table:not(#attwrap),#message table:not(#attwrap) tr,#message table:not(#attwrap) td{ display:block; width:100% !important; }
  .pw-td{ width:100% !important; }
  #lang{ flex-wrap:wrap; row-gap:.25rem; max-width:calc(100% - 2rem); }
}

#form-footer {
  width: 100% !important;
  margin: 0 !important;
  padding-left: 12px !important;
  border-collapse: collapse;
  border-spacing: 0;
  padding-top: .5rem;
  font-size: .9rem;
  display: flex;                  
  justify-content: space-between; 
  align-items: center;
}

#form-footer tr,
#form-footer td {
  display: contents; 
}

#form-footer,#popup-link-terms{
font-size: .9rem;
  white-space: nowrap;
  margin-left: 1rem; 
}

a#popup-link-terms {
    color:#5b667a !important; text-decoration:underline; }
a#popup-link-terms:visited { color:#5b667a !important; }




@media (max-width: 720px){

 html, body, .page, #wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.1rem !important; 
    padding-right: 0.1rem !important;
    width: 100% !important;
    max-width: 100% !important;
 }

  #header img{
    display:block;
    height:auto !important;
    border:0;
    margin:0 0 15px 0 !important;
  }

  /* Oletus mobiilissa, kun EI width-attribuuttia */
  #header img:not([width]){
    /* käytä responsiivista oletusta */
    width:auto !important;                 /* tai 100% tarpeen mukaan */
    max-height:72px !important;
    max-width:clamp(180px,65vw,320px) !important;
  }

  /* Kun width-attribuutti on annettu, älä rajoita mittoja mobiilissakaan */
  #header img[width]{
    /* EI widthiä tänne! (attribuutti määrää pikselileveyden) */
    max-width:none !important;
    max-height:none !important;
  }
  
 #header{ margin-top:20px !important; }
 
  #message{ 
    width:100% !important; 
    padding-left:0; 
    padding-right:0; 
    margin-left:0 !important;     
    margin-right:0 !important;
  }

@media (max-width: 720px){
  #message br {
    display: block;
    line-height: 0.5em;  
  }
}

  
  #message [style*="margin-left"]{ margin-left:0 !important; }
  #message [style*="margin-right"]{ margin-right:0 !important; } 

  #message table:not(#attwrap),
  #message table:not(#attwrap) tr,
  #message table:not(#attwrap) td{
    display:block; 
    width:100% !important; 
  }

  .pw-td{ width:100% !important; }


  #wrapper{
    padding:0 .75rem;
    margin-left:0 !important;     
    margin-right:0 !important;   
    width:100% !important;
    max-width:100% !important;
  }

  #form-footer {
    flex-direction: row;
    align-items: center;
  }
  #form-footer .ff-right {
      margin-right: 12px;
      padding-right: 12px;
  }
  #form-footer a {
    margin: .5rem 0 0 0;
  }
  
  #receipt{ width:100% !important; max-width:100% !important; }
  img[alt="Turvaposti"]{ height:32px !important; }
  span[style*="font-size:42px"]{ font-size:28px !important; letter-spacing:.5px; }  
  #lang{ flex-wrap:wrap; row-gap:.25rem; max-width:calc(100% - 1.5rem); }
}

}

#attlisttbl{ display:table !important; width:100% !important; border-collapse:collapse; }
#attlisttbl tr{ display:table-row !important; }
#attlisttbl td{ display:table-cell !important; vertical-align:middle; }
#attlisttbl td:last-child{ width:1%; white-space:nowrap; text-align:right; }

#attlisttbl input[type="button"] {
  margin: 0 .25rem;
  font-size: .85rem;
  padding: .25rem .6rem;   
  min-height: 26px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}

#attlisttbl input[type="button"]:hover {
  background: var(--brand-100);
  border-color: var(--brand);
  color: var(--brand-600);
}