:root{
   --bgcolor: #4B5D2A;

}

.ui-page {
	background: #fff;
}

#main-header {
   background: #4B5D2A !important;      
}


.ui-input-text{
   margin-left: 0.5em !important; 
}

.ui-btn.ui-btn-active{
   background-color: none !important;
}


/*a:hover {
   background-color: white !important; 
   border-color: none !important;
   color: black !important;
   text-shadow: none !important;
   background-color: #AEBA16 !important;
}*/

div.h1 {
   font-weight:bold;
   font-size:20pt;
   padding-bottom:0.5em;   
}

h1 {
   margin:0;
   padding:0;
   padding-bottom:0.5em;
   font-weight:bold;
   font-size:16pt;
}

h2 {
   margin:0;
   padding:0;
   font-weight:bold;
   font-size:12pt;
}

div.h2 {
   font-weight:bold;
}

h1.laatikkootsikko {
   margin:0;
   padding:0;
   font-size:16pt;
   color:#4B5D2A;
}

span.nobold {
   font-weight: normal !important;
}

#ajanmittausPalkki
{
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}

.longFlip ui-field-contain div.ui-slider-switch
{
   width:12em;
}

hr
{
   border: 0;
   height: 0;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

div.virhediv {
   color: red;
   text-align:center;
}

table.table-responsive tr:hover td {
   background:#c5d8f5;
   cursor:pointer;
}

table.luettelo {
   /*background-color:#bbb;*/
   border-collapse:collapse;
}

table.luettelo td {
   background-color:#fff;
   padding-right:0.5em;
   font-size:10pt;
   border: solid 1px #ccc
}

table.luettelo th:hover {
   cursor: pointer;
}

table.luettelo th {
   background-color:#eee;
   font-weight:normal;
   text-align:left;
   padding-right:0.5em;
   padding-left:0.5em;
   font-size:10pt;
   border: solid 1px #ccc !important;
}

table.luettelo tr.hover td {
 	background:#c5d8f5;
   cursor: pointer;   
}

table.luettelo2 {
   background-color:#fff; /*bbb;*/   
}

table.luettelo2 td {
   background-color:#fff;
   /*font-size:10pt;*/
   font-size:0.8em;
}

table.luettelo2 td a {
   background-color:#fff;
   /*font-size:10pt;*/
   font-size:0.8em;
}

table.luettelo2 th {
   background-color:#fff;
   font-weight:normal;
   text-align:center;
   vertical-align: text-top;
   padding-right:0.5em;
   padding-left:0.5em;
   /*font-size:10pt;*/
   font-size:0.7em;
}

table.luettelo2 tr.hover td {
 	background:#c5d8f5;
   cursor: pointer;   
}

table.luettelo3 {
   background-color:#f00; /*bbb;*/   
}

table.luettelo3 td {
   background-color:#fff;
   /*font-size:10pt;*/
   font-size:0.8em;
}

table.luettelo3 td a {
   background-color:#fff;
   /*font-size:10pt;*/
   font-size:0.8em;
}

table.luettelo3 th {
   background-color:#fff;
   font-weight:normal;
   text-align:center;
   vertical-align: text-top;
   padding-right:0.5em;
   padding-left:0.5em;
   /*font-size:10pt;*/
   font-size:0.7em;
}

table.luettelo3 tr.hover td {
 	background:#c5d8f5;
   cursor: pointer;   
}


div.kirjaustieto {
   color: #808080;
   font-size: 9pt;
   padding-top: 0.5em;
}

jalert-container {
   background-color: #ffe; /*rgba(255,255,0, 0.80) !important;*/
}

li {
   white-space:normal !important;
}

span.hakutausta {
   background-color:#ff0;
}
span.hakutausta1 {
   background-color:#ff0;
}
span.hakutausta2 {
   background-color:#faf;
}
span.hakutausta3 {
   background-color:#0ff;
}
span.hakutausta4 {
   background-color:#aaa;
}
span.hakutausta5 {
   background-color:#afa;
}
span.hakutausta6 {
   background-color:#aff;
}
span.hakutausta7 {
   background-color:#abf;
}

div.palsta_left {
   width:49%;
   float:left;
}

div.palsta_right {
   width:50%;
   float:right;
}

div.palsta_left_etusivu {
   width:49%;
   float:left;
}

div.palsta_right_etusivu {
   width:50%;
   float:right;
}

div.palsta_whole {
   width:100%;
   float:left;
}

@media screen and (max-width: 1268px) {
   
   div.palsta_left {
        width:100%;
        float:none;
   }
   div.palsta_right {
        width:100%;
        float:none;
   }
   
}

@media screen and (max-width: 1170px) {
   
   #kummilogo {
        display: none;
   }
}


@media screen and (max-width: 1440px) {
   
   div.palsta_left_etusivu {
        width:100%;
        float:none;
   }
   div.palsta_right_etusivu {
        width:100%;
        float:none;
   }
   
}

div.ilmoitus2 {
   text-align:center;
}

span.nobold {  
   font-weight: normal !important;
}

div.info {
   padding: 0.5em;
   padding-left: 0;
   padding-top: 0;
   /*vertical-align:top;*/
   /*background-image:url('images/information.png') !important;*/
}   

div.menupalkki {
   background-color:#e0e0e0;
   padding-left:0.5em;
   margin-bottom:1em;
}

.asiakkuus-marker {
   display:inline-block; 
   margin-left:20px; 
   /*padding:4px;*/
   min-width:95px;
   width:auto;   
   height:16px;   
   font-size:10px;    
   text-align:center; 
   border:1px solid gray;
   border-radius:4px;
}

.center {
   margin-left:auto;
   margin-right:auto;
}

.yritys-banner {
   position:fixed;
   width:100%;   
   height:25px;
   background-color:#668cff;
   bottom:0;
   z-index:100;
   opacity: 0.6;
   filter: alpha(opacity=60); /* For IE8 and earlier */
   -webkit-box-shadow: 0px -3px 10px -2px rgba(0,0,0,0.75);
   -moz-box-shadow: 0px -3px 10px -2px rgba(0,0,0,0.75);
   box-shadow: 0px -3px 10px -2px rgba(0,0,0,0.75);         
}
.yritys-banner-shadow {
   position:fixed;
   width:100%;   
   height:25px;   
   bottom:0;
   z-index:100;   
   -webkit-box-shadow: 0px -3px 10px -2px rgba(0,0,0,0.75);
   -moz-box-shadow: 0px -3px 10px -2px rgba(0,0,0,0.75);
   box-shadow: 0px -3px 10px -2px rgba(0,0,0,0.75);
}

.yritys-banner-text {
   float:right;
   margin-right:40px;
   margin-top:3px;
   font-family:tahoma;
   color:white;
   text-shadow: -2px -1px #000000;
}

.div-laskuera-virhe {
   width:100%;
   color:lightgray;
   background-color:red;
   border:2px solid gray;
   text-align:center;
}


.otsikkodiv-show {
   padding:15px;
   width:100% !important;         
   position:fixed !important;
   z-index:200 !important;
   top:0 !important;
   box-shadow: 0px 9px 16px 0px rgba(0,0,0,0.75);
}

#map-id {
   z-index:50;
}

.lista {
	background-color: #fff;
	position: absolute;
   border: solid 1px #000;
	top: -9999px;
	left: -999px;
   z-index:300 !important;
}

div.hakotab {
	border-bottom: 1px solid rgba(0,0,0,0.33);
   padding-left: 6px;
}
div.hakotab.relative-bottom {
	position: absolute;
	bottom: 0
}
div.hakotab div.single-tab {
	display: block;
	background-color: #e9e9e9;
	float: left;
	margin-right: 6px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
   /*border-top: 1px solid rgba(0,0,0,0.15);
   border-bottom-width: 0;*/
}

div.hakotab div.single-tab:last-of-type {
	margin-right: 0
}

div.hakotab div.single-tab a {
	display: block;
	color: #000 !important;
	padding: 5px 15px;
   text-decoration-line: none;
   font-weight:normal;

   border: solid 1px #aaa;
   border-radius: 5px 5px 0 0;
   border-bottom: none;
   
}

/*
div.hakotab div.single-tab span {
	display: block;
	color: #000 !important;
	padding: 5px 15px;
   text-decoration-line: none;
   font-weight:normal;

   border: solid 1px #aaa;
   border-radius: 5px 5px 0 0;
   border-bottom: none;
   
}
*/
div.hakotab div.single-tab.active-tab {
/*div.hakotab .active-tab {*/
   background-color: #fff !important;
	border: 0px solid rgba(0,0,0,0.33);
	border-bottom: 1px solid #fff;
	border-bottom-width: 1px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	margin-bottom: -1px;

}
div.hakotab div.single-tab.active-tab:hover {
   /*div.hakotab .active-tab {*/
      background-color: #AEBA16 !important;
      border: 0px solid rgba(0,0,0,0.33);
      border-bottom: 1px solid #fff;
      border-bottom-width: 1px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      margin-bottom: -1px;
   
   }
   
div.hakotab div.single-tab.active-tab a span {
   font-weight:bold;
}
div.hakotab div.single-tab.active-tab a span:hover {
   color:#fff !important;
}

.button-tab {
   margin: 0 0.3em 0.3em 0 !important;
   border-bottom: 1px solid #aaa !important;
   border-radius:5px !important;
}

.button-tab a {
   border-bottom: 1px solid #aaa !important;
   border-radius:5px !important;
}

div.hakotab2 {
	border-bottom: 1px solid rgba(0,0,0,0.33);
   padding-left: 6px;
}
div.hakotab2.relative-bottom {
	position: absolute;
	bottom: 0
}
div.hakotab2 div.single-tab {
	display: block;
	background-color: #e9e9e9;
	float: left;
	margin-right: 6px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
   /*border-top: 1px solid rgba(0,0,0,0.15);
   border-bottom-width: 0;*/
}

div.hakotab2 div.single-tab:last-of-type {
	margin-right: 0
}

div.hakotab2 div.single-tab a {
	display: block;
	color: #000 !important;
	padding: 5px 15px;
   text-decoration-line: none;
   font-weight:normal;

   border: solid 1px #aaa;
   border-radius: 5px 5px 0 0;
   border-bottom: none;
   font-size:9pt;
   
}

div.hakotab2 div.single-tab span {
	display: block;
	color: #000 !important;
	padding: 5px 15px;
   text-decoration-line: none;
   font-weight:normal;

   border: solid 1px #aaa;
   border-radius: 5px 5px 0 0;
   border-bottom: none;
   font-size:9pt;
   
}

div.hakotab2 div.single-tab.active-tab {
/*div.hakotab2 .active-tab {*/
   background-color: #fff !important;
	border: 0px solid rgba(0,0,0,0.33);
	border-bottom: 1px solid #fff;
	border-bottom-width: 1px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	margin-bottom: -1px;
   font-weight:bold;
   font-size:9pt;
}

div.hakotab2 div.single-tab.active-tab span {
   font-weight: bold; 
}



div.lainaus {
   font-style: italic;
   padding:0.5em;
   border:solid 1px #aaa;
   background-color:#ffe;
   font-weight:normal;
   font-family:courier new;
   font-size:8pt;
}

span.del {
   border:solid 1px #aaa;
   background-color:#f8f8f8;
   padding:0.2em;
	border-radius: 3px;
}

.lista {
	background-color: #fff;
	position: absolute;
   border: solid 1px #000;
	top: -9999px;
	left: -999px;
   z-index: 1000 !important;
}

.poimintaitem {
   cursor: pointer; 
   padding:0.2em;
}

.poimintaitem:hover {
   background-color: #91C9F7;
}

.urlclick {
   cursor: pointer; 
   padding:0.2em;
}

.urlclick:hover {
   background-color: #91C9F7;
}

.optionConfirm {
   background-color:#E4E4E8 !important;
   text-shadow:none !important;
   color:#4D4E50 !important;
   border-color:#4D4E50 !important;
}
.optionConfirm:hover {
   background-color:#4B5D2A !important;
}

.tarkea {
   color:red;
   font-weight:bold;
}

/* th.luettelosarake {  
   a:hover {
      text-decoration: none;
   }
} */

pre {
   font-style:normal !important;
   font-family: courier new !important;
   font-size:10pt;
}

#piirakka {
   display:inline;
}

#piirakka2 {
   display:inline;
}

#lisatext  {
   font-weight: normal ! important;
}

#lisatext td {
   font-weight: normal ! important;
}

#login  {
   width:500px;
}

#login div {
   flex-direction:column;
}

div.lomakekentat {
   display:flex; 
   align-items: center; 
   flex-direction: row !important; 
}

@media (width < 700px){

   div.lomakekentat {
      display:flex; 
      flex-direction: column !important; 
      align-items: baseline !important;
   }

   div.lomakekentat div {
      width: 100% !important;
   }

   div.lomakekentat div label{
      margin-top:0.5em;
      margin-bottom:-0.4em;
   }

   .yleishaku{
      flex-direction: column;
   }

   #login  {
      width:100%;
      margin:0em;  
      border: none !important;
   }

   #login_page {
      background-image: none !important;
      align-items: baseline !important;
      border: none !important;
   }

   #login div {
      flex-direction:column;
   }
}

a {
   color:#4B5D2A !important;
}

a.ui-btn:hover {
   background-color:#AEBA16 !important;
   /*background-color:#4B5D2A !important;'*/
   color:#fff !important;
}

.infotable {
   margin-top:1em;
   border-collapse: collapse;
   border: solid #ddd 1px;
}
.infotable th {
   font-weight: normal;
   text-align: left;
   padding: 5px !important;
   background-color: #eee;
}
.infotable .th_right {
   font-weight: normal;
   text-align: right;
   padding: 5px !important;
   padding-left:10px !important;
   background-color: #eee;
}

.infotable td {
   font-weight: normal;
   text-align: left;
   padding: 5px !important;
   border:solid 1px #ddd;
}

div.valikko div {
   color: red;
   text-shadow: none;
   border:solid 1px #aaa;
   padding:0.5em;
}
div.valikko {
   padding:0;
}

/*
.ui-content {
   background-image: url('/logot/yrityskummit_logo.png') !important;
   background-repeat: no-repeat;
}
*/
table.taulukko {
   border-collapse: collapse;
   border:solid 1px #ccc; 
   background-color:#fff;
}
table.taulukko * td {
   padding:0.5em;
   padding-right:1em;
   font-size:9pt;
}
table.taulukko * th {
   padding:0.5em;
   padding-right:1em;
   background-color:#eee;
   text-align: left;
   font-size:9pt;
}

div.kenttasolu {
   font-weight:normal !important;
   color:navy;  
   font-size:13pt; 
   padding:0.2em;
/*   border-bottom:#ccc 1px dotted;
   border-left:#ccc 1px dotted;*/
}

div.solu {
   /* float:left; */
   /*border:solid 1px #000;  */
   /*margin:1px;*/
   background-color:#fff !important;
   font-size: 11pt;
   font-weight: normal;
   /*padding:0.2em;*/
   padding: 0.5em; 
   border-top:dotted 1px #ccc;
   border-right:dotted 1px #ccc;

   /*border:solid 1px #000;*/
}

.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}
.clearfix {
    background-color: lightblue;
}

.meenu a {
   margin:0 !important;
   text-align: left; 
   font-size:10pt;
   border-radius: 2px !important;

}

.grid2 {
   grid-template-columns: [col] 50% [col] 50%; 
}

@media screen and (max-width: 640px) {
   
   div.grid2 {
      grid-template-columns: [col] 100%; 
   }
   
}

.taulukko1 {
   border-collapse: collapse;
 /*  border:1px solid #aaa; */
}

.taulukko1 th {
   font-size:10pt;
   padding:0.5em;
   vertical-align:bottom;
}
.taulukko1 td {
   font-size:12pt;
   padding:0.2em;
   padding-right: 1em;
   font-weight:normal;
   border:1px dotted #aaa; 
}

div.kummilinkit a {
   font-weight:normal !important;
}

.optionCancel {
   background-color: #eee !important;
   color: #000 !important;
   text-shadow:none !important;
}

a.no_underline  {
   text-decoration: none;
}

a.no_underline:hover  {
   text-decoration: underline;
}

label{
   color: #000 !important;
   text-shadow: none !important;
}

button{
   color: #000 !important;
   text-shadow: none !important;
}

.ui-input-btn{
   color: #000 !important;
   text-shadow: none !important;
}

.ui-input-btn{
   color: #000 !important;
   text-shadow: none !important;
}

.ui-btn.ui-btn.ui-btn-active{
   background-color: #AEBA16 ;
   color: white !important;
   text-shadow: 1px 1px 2px #000 !important;
}

span.omaselect {
   /*color: red !important;*/
   padding:0 !important;
   margin:0 !important;
   text-align:left !important;
   text-shadow: 0 !important;
   font-size:10pt;
}

div#opiskelijatyyppi-button {
   border-radius:0 !important;
   padding:0.5em  !important;
   margin-top:0 !important;
}

div#koulutusohjelmat-button {
   border-radius:0 !important;
   padding:0.5em  !important;
   margin-top:0 !important;
}

div#toimipiste-button {
   border-radius:0 !important;
   padding:0.5em  !important;
   margin-top:0 !important;
}
/*
sup.vpallo {
   background-color: pink;
   border-radius: 50%;
   padding: 0.3em 0.4em;
   color: #000;
   border: solid 1px red;
   padding-top:1px;
}
*/
td.linkCell:hover {
   cursor:pointer;
/*   background-color: #91C9F7;*/
   background-color: #AEBA16;
    
}
td.emptyCell {
   background-color: #eee;
}

/*
.loader-text {
   z-index:2;
   position:absolute;
   color:white;
   font-weight:bold;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.loader {
   border: 25px solid #ddd; 
   border-top: 25px solid #4b5d2b; 
   border-radius: 50%; 
   width: 4rem; 
   height: 4rem; 
   animation: spin 1s linear infinite; 
   margin: 0 auto; 
   z-index:1;
}

@keyframes spin {
   0% { transform: rotate(0deg); } 
   100% { transform: rotate(360deg); } 
}

#latausimage{
   padding: 2em  !important;
   background: transparent !important;
   border: none !important;
   outline: none !important;
   border-width: 0 !important;
   display:grid; 
   place-items:center;
}

dialog::backdrop {
   background: #00000043;
}
*/

.link:hover {
   cursor:pointer;
}

.tr_aluerivi {
   border-top:1px #000 solid !important;
}

.tr_seuturivi td {
   background-color: #e0e0e0 !important;
}

.tr_seuturivi td:first-child {
   padding-left:2em;
}

.tr_yhteensarivi td {
   border-top:1px #000 solid !important;
}

 /* .tr_aluerivi td {
   border-top:1px #000 solid !important;
 } */

.viivarivi td {
   border-top:1px #000 solid !important;
}

.otsikkorivi th {
   border-bottom:1px #000 solid !important;
}

.asiakasmaarasolu:hover {
   cursor:pointer;
   background-color: #91C9F7 !important;
}

.henkilomaarasolu:hover {
   cursor:pointer;
   background-color: #91C9F7 !important;
}

.tapahtumamaarasolu:hover {
   cursor:pointer;
   background-color: #91C9F7 !important;
}

.tuntimaarasolu:hover {
   cursor:pointer;
   background-color: #91C9F7 !important;
}

/*
.tooltip {
   position: relative;
   cursor: pointer;
   border: none;
}

.tooltip:hover::after {
   content: attr(data-tip);
   white-space: pre-line;
   position: absolute;
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
   background-color: #ffe;
   border:1px solid #660;
   color: #000;
   padding: 0.5em;
   border-radius: 0.5rem;
   white-space: nowrap;
   z-index: 1;
   font-size:14pt;
   margin-bottom:5px;
}
*/
.tooltip {
   position: relative;
   /*cursor: pointer;*/
   border: none;
}

.tooltip:hover::after {
   content: attr(data-tip);
   white-space: pre-line;
   position: absolute;
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
   background-color: #ffe;
   border: 1px solid #660;
   color: #000;
   padding: 0.5em;
   border-radius: 0.5rem;
   /*white-space: nowrap;*/
   z-index: 100;
   font-size: 12pt;
   margin-bottom: 5px;
   /*max-width: 90%; /* Max width to prevent overflow */
  /* overflow: hidden; /* Hide overflow */
   text-overflow: ellipsis; /* Add ellipsis to text overflow */
   width:200px !important;
   text-align:left !important;   
}

/* Right edge check */
.tooltip:hover::after {
   right: auto; /* Reset right value */
   left: 0%; /* Center by default */
   transform: translateX(-50%);
}

/* Left edge check */
@media screen and (max-width: 500px) { /* Adjust the max-width as necessary */
  .tooltip:hover::after {
    left: 50%;
    transform: translateX(10px);
  }
}

.seudunvaihto {
   text-align: left !important;
}

.seudunvaihtoDiv .ui-btn {
   text-align: left !important;
}

.kotikunnanvaihto {
   text-align: left !important;
}

div.infodiv {
   border-radius: 0.5rem;
   border: 1px #cca solid;
   background-color:#ffd;  
   padding:1em;
   padding-left:3.5em;
   display:block;
   margin:0.5em;
   background-image:url('/svg-icons/icons8-info-w11.svg');
   background-repeat: no-repeat;
   background-position: 0.1em 0.1em;
}

tr.luettelo_tr:hover td {
   background:#c5d8f5;
   cursor: pointer;   
 }

 tr.tr_oikeus td {
   background-color: lightgreen !important;
 }


 li {
   white-space: normal; /* Ensures text wraps and does not stay on a single line */
   word-wrap: break-word; /* To prevent overflow by breaking long words if necessary */
 }

 .luettelo .ui-btn {
   text-align: left; /* Aligns text to the left */
 }
 
 .ui-button {
   background: #f0f0f0 !important;
   border-color: gray !important;
   color: black !important; /* Text color */
   text-shadow: #808080 5px 5px 5px; /* Text shadow */   
   margin:0.2em;
   border-radius: 2px;
}


.ui-button:hover {
   background: #e0e0e0  !important;
}

/* If using jQuery UI's checkboxradio widget, you might need to target that specifically */
.ui-checkboxradio-label {
   background: #f0f0f0  !important;
   border-color: e0e0e0 !important;
   margin: 0.2em !important;
   border-radius: 5px;
}

.ui-checkboxradio-label.ui-state-hover {
   background: #f0f0f0 !important;
}

/* Target the label of the checked checkbox and modify the background */
.ui-checkboxradio-checked .ui-icon {
   background-image: url('/svg-icons/icons8-check-mark-blue.svg') !important;
}

/* Ensure the icon is visible */
.ui-checkboxradio-label .ui-icon {
   background-position: center center;
   background-repeat: no-repeat;
   text-indent: -9999px; /* This hides the text if there's any inside the icon element */
}

/* uusi */
.modal-overlay {
   display: none; /* Piilota oletusarvoisesti */
   position: fixed; /* Kiinteä sijainti */
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.25); /* Puoliläpinäkyvä tausta */
   z-index: 1000; /* Varmistetaan, että se on muiden elementtien päällä */
 }
 
 .spinner {
   border: 50px solid #4B5D2A;
   border-top: 50px solid #fff;
   border-radius: 50%;
   width: 10rem;
   height: 10rem;
   animation: spin 1s linear infinite;
   position: absolute;
   top: 50%;
   left: 50%;
   /* Muuta spinnerin sijaintia keskelle */
   transform: translate(-50%, -50%);
 }
 
 @keyframes spin {
   0% { transform: translate(-50%, -50%) rotate(0deg); }
   100% { transform: translate(-50%, -50%) rotate(360deg); }
 }
 
 .ui-button-left {
   text-align: left !important
}
.div-container {
   position: relative;
   height: 200px; /* Adjust as needed */
}

.plotly-logo {
   position: absolute;
   left: 0;
   top: 0;
}

/* Custom CSS for aligning option text to the left */
.left-align-options .ui-select .ui-btn > span {
   text-align: left !important; /* Override jQuery Mobile styles */
}
/* Custom CSS for aligning option text to the left */
/*.ui-page .left-align-options .ui-select .ui-btn {*/
.ui-page .left-align-options .ui-select .ui-btn {
      text-align: left !important;
}

/* Custom CSS to align text to the left in jQuery Mobile select menus */
.ui-select .ui-btn {
   text-align: left !important;
   text-overflow:unset !important; /* clip !important;*/
}

/* Custom CSS to align Dropzone message text to the left */
.dropzone .dz-message {
   text-align: left !important;
}

.success-icon {
   color: green;
   font-weight: bold;
   margin-left: 10px;
}

.ui-btn:focus {
   text-shadow: none !important;
}

.tiedostorivi:hover {
   background-color:#abf;
}

.tiedostoriviarrow:hover {
   cursor:pointer;
}
.tiedostoriviarrow {
   margin:0 1em; 
}

.tiedostorivi .ui-btn {
   margin:0;
   padding:0.5em;
   text-shadow: none !important;
   font-weight: normal !important;
/*   border-radius:0 !important;
   text-align: left !important;
   margin:0 !important; 
   border-bottom:#fff !important;
   border-left:none !important;
   border-right:none !important;
   color:#000 !important;  
   text-shadow: none !important;
   font-weight: normal !important;
   background-color: #eee !important;
   font-size:11pt !important;*/
}
 

img.responsive-image {
   /*position: absolute;*/
   /*left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);*/
   /*max-width: 100%;*/
   max-height: 100%;
}

.closepopup:hover {
   cursor:pointer;
}

.esikatseluBtn:hover {
   cursor:pointer;
}

.xflex-container {
   display: flex;
   width: 100%;
   height: 100%;
   flex-direction: row;
   align-items: center; /* This replaces 'place-items' for flex containers */
   justify-content: space-between; /* This will place the text and image on opposite ends */
}  

.kenttavirhe {
   display:none;
   color:red;
   margin-bottom:0.5em;
}

.draggable_div .ui-checkbox {
   background-color:red;
   margin:0 !important;
   border-radius:0 !important;
}

.luetteloth:hover {
   cursor:pointer;
}  

.luetteloasetuksetBtn:hover {
   cursor:pointer;
}
.luettelotoiminnotBtn:hover {
   cursor:pointer;
}  

.infoImg:hover {
   cursor:pointer;
}

.popupmenu > .ui-btn {
   border-radius: 0 !important;
   text-align: left !important;
   margin:0 !important; 
   border-bottom:#fff !important;
   border-left:none !important;
   border-right:none !important;
   color:#000 !important;  
   text-shadow: none !important;
   font-weight: normal !important;
   background-color: #eee !important;
   font-size:11pt !important;
}

.ui-btn {
   text-shadow: none !important;
}

.single-tab:hover {
   background-color: #AEBA16 !important;
   color:#fff !important;
}

.single-tab .link:hover {
   color: white !important;
}
/* Change background color to green and text color to black on hover */
.active-tab:hover {
   background-color: green;
}

.active-tab:hover .link, .active-tab:hover .link span {
   color: black;
}

.custom-btn {
   display: flex; /* Asettaa elementit flex-containerin sisälle */
   align-items: center; /* Keskittää elementit pystysuunnassa */
   justify-content: start; /* Align items to the start of the container */
}

.custom-btn img {
   flex-grow: 0; /* Prevents the button from growing */
   margin-right: 8px; /* Lisää tilaa kuvakkeen ja tekstin välille */
}
.custom-btn span {
   flex-grow: 0; /* Prevents the button from growing */
}

.printLuetteloBtn {
   padding:3.8px 10px;
}

.excelLuetteloBtn {
   padding:1.7px 10px;
}

.printLuetteloBtn:hover {
   cursor:pointer;
}

.excelLuetteloBtn:hover {
   cursor:pointer;
}

.meenu a {
   margin:0 !important;
   text-align: left; 
   font-size:10pt;
   border-radius: 2px !important;

}

#sarakemenu td {
   text-align: left;
}

#sarakemenu a {
   margin:0 !important;
   text-align: left; 
   font-size:10pt;
   border-radius: 2px !important;
   border-top: solid 1px #fff !important;
   border-bottom: solid 1px #aaa !important;
   background-color: #cfc;

}

.meenu td {
   text-align: left;
}


.smallMenuBtnText{
   float: left;
   padding-right: 10px;
}


.smallMenuBtnImg{
   float:left; 
   padding-right:5px;
   padding-left: 5px;
}

.menuBtnDiv{
/*   float:right; */
   margin-left:auto;
   margin-right:0.5em;
}

.menuBtn{
   border-radius:7px !important; 
   font-size:10pt !important; 
   padding:0.6em 1em !important;
   margin:0 !important;
}

#sarakemenu .ui-input-text {
   border-radius: 0 !important;
   padding: 0 !important;
   margin: 0 !important;
   border: 2px solid #aaa !important;
}

.uppy-Dashboard-AddFiles-info {
   display: none !important;
}

.uppy-Dashboard-browse, .uppy-DragDrop-browse {
   background-color: #ddd; /* Bootstrap primary button color */
   color: white;
   padding: 10px 15px;
   text-decoration: none;
   border-radius: 5px;
   font-weight: bold;
   display: inline-block;
   margin-top: 10px;
}

.uppy-Dashboard-browse:hover, .uppy-DragDrop-browse:hover {
   background-color: #AEBA16;
   color: white !important;
}

/* Targeting the upload button specifically */
.uppy-u-reset.uppy-c-btn.uppy-Dashboard-upload {
   background-color: #ddd; /* Green */
   color: #fff;
}

/* Change color on hover */
.uppy-u-reset.uppy-c-btn.uppy-Dashboard-upload:hover {
   background-color: #AEBA16;
}

.uppy-StatusBar-actionBtn--upload {
   background-color: #ddd !important; 
   color: #fff !important;
}
.uppy-StatusBar-actionBtn--upload:hover {
   background-color: #AEBA16 !important; 
   color: white !important;
}

.uppy-Dashboard-inner {
   height: 300px !important; /* Adjust the height as needed */
}

/* If you want the change to be more responsive to the content */
.uppy-Dashboard-inner, .uppy-Dashboard-inner .uppy-DashboardContent, .uppy-Dashboard-inner .uppy-DashboardContent-inner {
   min-height: 300px !important; /* Adjust the minimum height as needed */
}

.polkurajaus:hover {
   cursor:pointer;
}

.ui-checkboxradio-label {
   text-align: left !important;
}
/*
ui-icon {
   background-image: none !important; /* url(images/ui-icons_444444_256x240.png);
}

.ui-button .ui-icon {
   background-image: none !important; 
}
*/

.custom-checkbox .ui-btn-icon-left:after {
   /* Adjustments for icon size, position, etc. */
   position: relative;
   margin-right: 10px; /* Adjust spacing between icon and text */
}

.ui-icon-blank {
   background-image: none !important;
   background-color: transparent !important; /* Adjust as needed */
   background-color: #fff !important; /* Adjust as needed */
}

.kansiovalinta li {
   padding:0 o !important;
}

.eikatkaisua {
   white-space: normal !important;
   height: auto !important;
   overflow: visible !important;
   text-overflow: clip !important;
}

.lisaatiedostojaBtn {
   background-color: #e7e9d1 !important;
   font-weight: normal !important;
}

.lisaakansioitaBtn {
   background-color: #e7e9d1 !important;
   font-weight: normal !important;
}

.button-content {
   display: flex;
   align-items: center;
   justify-content: left;
}
.button-content img {
   margin-left: -10px; /* Space between image and text */
   margin-right: 3px; /* Space between image and text */
   margin-top:-3px;
   margin-bottom:-3px; 
}

.luetteloedit .ui-input-text {
   border-radius: 0 !important;
   /*border: 1px solid #aaa !important;*/
   /*padding: 0.5em !important;*/
   margin: 0 !important;
}

table.luettelo {
   border-collapse: collapse;
}
table.luettelo th, table.luettelo td {
   border: 1px solid #ccc;
   text-align: left;
   padding: 8px;
}
table.luettelo th {
   position: relative;
}
.resize-handle {
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
   width: 5px;
   cursor: col-resize;
   background-color: transparent;
}