/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

body {
/* padding-top: 5px; */
text-align: left;
font-family: monaco, monospace;
}

h1, h2 {
display: inline-block;
background: #fff;
}

h1 {
font-size: 30px
}

h2 {
font-size: 20px;
}
/*
span {
background: #fd0;
}
*/

#sarjajono {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}

#sarjajono td, #sarjajono th {
border: 1px solid #ddd;
padding: 8px;
}

#sarjajono tr:nth-child(even){background-color: #f2f2f2;}

#sarjajono tr:hover {background-color: #ddd;}

#sarjajono th {
/* padding-top: 12px; */
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}

#sarjajono_ikkunatehdas {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}

#sarjajono_ikkunatehdas td, #sarjajono th {
border: 1px solid #ddd;
padding: 8px;
}

/* #sarjajono_ikkunatehdas tr:nth-child(even){background-color: #f2f2f2;} */

#sarjajono_ikkunatehdas tr:hover {background-color: #ddd;}

#sarjajono_ikkunatehdas th {
/* padding-top: 12px; */
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}

.viesti_pvm {
text-align: right;
font-size: 9px;
}

.viesti_pvm_vastotettu {
text-align: left;
font-size: 9px;
}

.viestiruutu {
width: 100%;
min-height: 100px;
}

.viestiruutu::after {
content: "";
clear: both;
display: table;
}


ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
overflow-y: auto;
/* TODO: MISSÄ TÄTÄ KÄYTETTIIN - VIESTEISSÄ VARMAAN - SIIRRÄ MUUALLE TÄSTÄ ! 
height: 500px;  	
max-height: auto;
min-height: 500px; */
background-color: white;  	
}

ul li {
display: inline-block;
clear: both;
padding: 10px;
margin-bottom: 5px;
}

.vastaanottajat {
float: left;
width: 20%;
padding: 10px;
top: 40px;
position: absolute;
border-style: dashed;
border-width: 2px;
}

.viestit{
float: left;    
padding: 10px;
width: 60%;
border-style: dashed;
border-width: 2px;
top: 120px;
left: 25%;
position: absolute;
}

.syottoruutu {
padding: 5px;
display: flex;
border-width: 1px;
border-style: solid;
position: absolute;
top: 40px;
width: 60%;
left: 25%;
/*border-left-style: dashed;
border-left-width: 2px;*/
}

.viestirivi {
margin-bottom: 20px;
}

.vaaleampi {
opacity: 0.3;
}

.viesti_vastaanotettu {
float: left;
border-radius: 0.5rem;
background-color: #d9edf7;
color: #000;
padding: 7px;
position: relative;
left: 15px;
}

.viesti_vastaanotettu:after {
content: "";
border-left: none;
border-right: 15px solid #d9edf7;
border-bottom: 15px solid transparent;
border-top: 1px solid transparent;
position: absolute;
left: -15px;
top: 8px;
}

.viesti_lahetetty {
float: right;
border-radius: 0.5rem;
background-color: #dff0d8;
color: #000;
padding: 7px;
position: relative;
text-align: right;
right: +15px;
}

.viesti_lahetetty:after {
content: "";
border-right: none;
border-left: 15px solid #dff0d8;
border-bottom: 15px solid transparent;
border-top: 1px solid transparent;
position: absolute;
right: -15px;
top: 8px;
}

#vastaanottaja label {
float:none;
/* width:120px; */
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
}

#vastaanottaja label span {
text-align:center;
font-size: 12px;
padding:5px 0px;
display:block;
}

#vastaanottaja label input {
position:absolute;
visibility: hidden;
}

#vastaanottaja input:checked + span {
background-color:#f2f2f2;
color:#333;
}

#vastaanottaja .radiobutton {
background-color:#727D73;
color:#fff;
}
  
.background-image {
position: relative;
width: 100%; /* Adjust as needed */
height: 500px; /* Adjust as needed */
}

.background-image::after {
content: "";
background-image: url("/assets/testi-300e50d7.png");
background-size: contain; /* Ensure the whole image is visible */
background-position: center center; /* Position the image at the top center */
background-repeat: no-repeat; /* Prevent the image from repeating */
opacity: 0.3; /* Make the image 50% transparent */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* Ensure the background image is behind the content */
}