#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10003;
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

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

.ui-datepicker th { background-color: #CCCCFF; }
span.aa {
  background-color: #f18973;
}
.social-window {
  width: 40%;
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on small screens */
  /*justify-content: center;*/ /* Center elements horizontally */
  align-items: center; /* Center elements vertically */
  border: 1px solid #ddd; /* Optional border for better visualization */
  -webkit-box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.2);
  box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.2);
  z-index: 9000;
  position: fixed;
  top: 0;
  left: 10px;
  right: 10px;
  padding: 5px;
  background-color:#F5F5DC; /*#f5f5f5;  Optional background color */
  margin: 0 auto; /* This centers the flex-container horizontally */
  overflow: hidden;
}
@media (max-width: 1600px) {
	.social-window {
		width: 60%;
	}
}
@media (max-width: 768px) {
	.social-window {
		width: 95%;
	}
}
/*
.social-window input[type="text"],
.social-window select,
.social-window button {
  margin: 5px; 
}
*/
.social-window input[type="text"],
.social-window input[type="number"],
.social-window select {
    width: 95%;
	height: 30px;
	font-size: 1em;
	border-width: 1px;
	border-radius: 4px;
}

@media (max-width: 768px) {
  .social-window {
    flex-direction: column; /* Stack elements vertically on mobile */
	/*position: static;*/  /* Remove fixed positioning on mobile */
  }

  .social-window input[type="text"]{
    width: 90%; 
  }
  .social-window select {
    width: 100%; /* Make inputs and selects full width on mobile */
  }
}
.search-fields {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on small screens */
  justify-content: space-between; /* Space elements evenly */
  /*align-items: center; */ /* Center elements vertically */
  /*margin-bottom: 10px;*/ /* Add bottom margin */
}
.search-fields > div { /* Target child divs within search-fields */
  display: flex; /* Make each pair a flex container */
  align-items: center; /* Center elements vertically within each pair */
  margin-bottom: 5px; /* Add bottom margin between pairs */
}
.search-fields label {
  flex: 0 0 auto; /* Prevent labels from growing */
  margin-right: 5px; /* Add right margin for spacing */
}

/* Media query for mobile */
@media (max-width: 768px) {
  .search-fields {
    flex-direction: column; /* Stack elements vertically on mobile */
  }

  .search-fields label {
    margin-bottom: 5px; /* Add bottom margin on mobile */
    margin-right: 0; /* Remove right margin on mobile */
  }
}

.show-search-button {
  /* Style the button as needed */
  position: fixed;
  top: 10px;
  right: 15px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
  z-index: 10000;
}

@media (min-width: 769px) {
  /* Hide the button on desktop */
  .show-search-button {
    display: none;
  }
}
@media (max-width: 768px) {
  /* Hide the button on desktop */
  .show-search-button {
    display: block;
  }
}
.text-below-social-window {
  margin-top: 60px; /* Adjust margin as needed */
  text-align: left; /* Optional: Center the text */
}
@media (max-width: 768px) {
  .text-below-social-window {
     margin-top: 55px;
	/* text-align: center;  Optional: Center the text */
  }
}
.radio-buttons {
  /*display: flex;*/
  align-items: center; /* Center the labels vertically */
}
.radio-buttons label {
  margin-left: 5px; /* Add a small margin between the radio button and label */
}
#player0::-webkit-media-controls-panel {
        background-color: transparent; /* Set the background of controls panel to transparent */
    }
#player0::-webkit-media-controls-timeline {
        background-image: linear-gradient(to right, transparent var(--marker0), red var(--marker0), transparent var(--marker1), transparent var(--marker2), red var(--marker2), transparent var(--marker3), transparent var(--marker4), red var(--marker4), transparent var(--marker5), transparent var(--marker6), red var(--marker6), transparent var(--marker7), transparent var(--marker8), red var(--marker8), transparent var(--marker9));
}
#player1::-webkit-media-controls-timeline {
        background-image: linear-gradient(to right, transparent var(--marker0), red var(--marker0), transparent var(--marker1), transparent var(--marker2), red var(--marker2), transparent var(--marker3), transparent var(--marker4), red var(--marker4), transparent var(--marker5), transparent var(--marker6), red var(--marker6), transparent var(--marker7), transparent var(--marker8), red var(--marker8), transparent var(--marker9));
}
#player2::-webkit-media-controls-timeline {
        background-image: linear-gradient(to right, transparent var(--marker0), red var(--marker0), transparent var(--marker1), transparent var(--marker2), red var(--marker2), transparent var(--marker3), transparent var(--marker4), red var(--marker4), transparent var(--marker5), transparent var(--marker6), red var(--marker6), transparent var(--marker7), transparent var(--marker8), red var(--marker8), transparent var(--marker9));
}
#player3::-webkit-media-controls-timeline {
        background-image: linear-gradient(to right, transparent var(--marker0), red var(--marker0), transparent var(--marker1), transparent var(--marker2), red var(--marker2), transparent var(--marker3), transparent var(--marker4), red var(--marker4), transparent var(--marker5), transparent var(--marker6), red var(--marker6), transparent var(--marker7), transparent var(--marker8), red var(--marker8), transparent var(--marker9));
}
#player4::-webkit-media-controls-timeline {
        background-image: linear-gradient(to right, transparent var(--marker0), red var(--marker0), transparent var(--marker1), transparent var(--marker2), red var(--marker2), transparent var(--marker3), transparent var(--marker4), red var(--marker4), transparent var(--marker5), transparent var(--marker6), red var(--marker6), transparent var(--marker7), transparent var(--marker8), red var(--marker8), transparent var(--marker9));
}
#player5::-webkit-media-controls-timeline {
        background-image: linear-gradient(to right, transparent var(--marker0), red var(--marker0), transparent var(--marker1), transparent var(--marker2), red var(--marker2), transparent var(--marker3), transparent var(--marker4), red var(--marker4), transparent var(--marker5), transparent var(--marker6), red var(--marker6), transparent var(--marker7), transparent var(--marker8), red var(--marker8), transparent var(--marker9));
}
#player6::-webkit-media-controls-timeline {
        background-image: linear-gradient(to right, transparent var(--marker0), red var(--marker0), transparent var(--marker1), transparent var(--marker2), red var(--marker2), transparent var(--marker3), transparent var(--marker4), red var(--marker4), transparent var(--marker5), transparent var(--marker6), red var(--marker6), transparent var(--marker7), transparent var(--marker8), red var(--marker8), transparent var(--marker9));
}
#player7::-webkit-media-controls-timeline {
        background-image: linear-gradient(to right, transparent var(--marker0), red var(--marker0), transparent var(--marker1), transparent var(--marker2), red var(--marker2), transparent var(--marker3), transparent var(--marker4), red var(--marker4), transparent var(--marker5), transparent var(--marker6), red var(--marker6), transparent var(--marker7), transparent var(--marker8), red var(--marker8), transparent var(--marker9));
}
#player8::-webkit-media-controls-timeline {
        background-image: linear-gradient(to right, transparent var(--marker0), red var(--marker0), transparent var(--marker1), transparent var(--marker2), red var(--marker2), transparent var(--marker3), transparent var(--marker4), red var(--marker4), transparent var(--marker5), transparent var(--marker6), red var(--marker6), transparent var(--marker7), transparent var(--marker8), red var(--marker8), transparent var(--marker9));
}
#player9::-webkit-media-controls-timeline {
        background-image: linear-gradient(to right, transparent var(--marker0), red var(--marker0), transparent var(--marker1), transparent var(--marker2), red var(--marker2), transparent var(--marker3), transparent var(--marker4), red var(--marker4), transparent var(--marker5), transparent var(--marker6), red var(--marker6), transparent var(--marker7), transparent var(--marker8), red var(--marker8), transparent var(--marker9));
}
/*
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 3px;
  text-align: left;
}
th {
	background-color: #CCCCFF;
}
tr:hover {background-color: aliceblue;}
*/
/*.link-button { 
     background: none;
     border: none;
     color: #1a0dab;
     text-decoration: underline;
     cursor: pointer;
	text-align: left;
}*/
.link-button { 
    background: none;
    border: none;
    color: #1a0dab;
    text-decoration: none; /* Remove underline since it's an icon now */
    cursor: pointer;
    text-align: left;
    padding: 0; /* Remove any default padding */
	margin-top:0px;
}

@media (max-width: 768px) {
	.link-button {
		font-size:18px
	}
}
* {
  box-sizing: border-box;
}
.arejs{
	border: none;
	width: 100%;
}
.flex-container {
	width: 70%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto; /* This centers the flex-container horizontally */
}
@media (max-width: 1600px) {
	.flex-container {
		width: 90%;
	}
}
.flex-item-1 {
  /*width: 15%;*/
  flex: 1 1 15%;
  border: 1px solid;
  /*padding-top: 5px;*/
  padding: 5px 5px 5px 10px;
}
.flex-item-2 {
  /*width: 5%;*/
  flex: 1 1 15%;
  border: none;
  /*padding-top: 5px;*/
  padding: 5px 5px 5px 10px;
}
.flex-item-3 {
  /*width: 5%;*/
  flex: 1 1 5%;
  border: 1px solid;
  /*padding-top: 5px;*/
  padding: 5px 5px 5px 10px;
}
.flex-item-4 {
  /*width: 5%;*/
  flex: 1 1 5%;
  border: 1px solid;
  /*padding-top: 5px;*/
  padding: 5px 5px 5px 10px;
}
.flex-item-5 {
  /*width: 10%;*/
  flex: 1 1 10%;
  border: none;
  /*padding-top: 5px;*/
  padding: 5px 5px 5px 10px;
}
.flex-item-6 {
  /*width: 20%;*/
  flex: 1 1 20%;
  border: none;
  /*padding-top: 5px;*/
  padding: 5px 5px 5px 10px;
}
.flex-item-7 {
  /*width: 35%;*/
  flex: 1 1 55%;
  border: none;
  /*padding: 5px 5px 5px 10px;*/
}
.flex-item-8 {
  flex: 1 1 100%;
  border: none;
  height: 30px;
  z-index: 1000;
  margin-bottom:40px;
}
.line-break {
  width: 100%;
}
.virsraksti {
   margin-left:1px;
   margin-bottom: 0.5em; /* Reduces the space below the <p> */
}
.virsrakstiA {
   margin-left:1px;
   margin-bottom: 0.2em; /* Reduces the space below the <p> */
}
.raid_dati {
   margin-left:1px;
   margin-top: 0em; /* Reduces the space below the <p> */
}
@media (max-width: 768px) {
.flex-item-1 {
  flex: 1 1 100%;
  border: 1px solid;
  padding: 5px 5px 5px 10px;
  font-size:18px
}
.flex-item-2 {
  flex: 1 1 30%;
  border: none;
  padding: 5px 5px 5px 10px;
}
.flex-item-3 {
  flex: 1 1 100%;
  border: 1px solid;
  padding: 5px 5px 5px 10px;
}
.flex-item-4 {
  flex: 1 1 100%;
  border: 1px solid;
  padding: 5px 5px 5px 10px;
}
.flex-item-5 {
  flex: 1 1 30%;
  border: none;
  padding: 5px 5px 5px 10px;
}
.flex-item-6 {
  flex: 1 1 40%;
  border: none;
  padding: 5px 5px 5px 10px;
}
.flex-item-7 {
  flex: 1 1 100%;
  border: none;
  padding: 5px 5px 5px 10px;
}
.flex-item-8 {
  flex: 1 1 100%;
  border:none;
  /*background-color:#F5F5DC;*/
  z-index: 1000;
}
}
@media screen and (max-width: 768px) {
    .hide-on-small {
        display: none;
    }
}
@media screen and (min-width: 1200px) {
    .hide-on-large {
        display: none;
    }
}
.arejssw{
	border: none;
	width: 100%;
}
.flex-containersw {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto; /* This centers the flex-container horizontally */
 /* margin-top: 10px;*/
}
@media (max-width: 1600px) {
	.flex-containersw {
		width: 100%;
	}
}
#parametri{
  display: none;
}
.flex-item-0sw {
  /*width: 15%;*/
  flex: 1 1 100%;
  border: none;
  padding: 5px 5px 5px 5px;
  /*margin: 0 auto;*/
  text-align: center;
}
.flex-item-1sw {
  /*width: 15%;*/
  flex: 1 1 100%;
  border: none;
  padding: 5px 5px 5px 10px;
  margin: 0 auto;
}
.flex-item-1sw img {
    flex-shrink: 0;         /* Prevent the image from shrinking */
}

.flex-item-1sw input {
    flex-grow: 1;           /* Allow the input to take up the remaining space */
    width: 100%;            /* Ensure the input spans the remaining space */
    box-sizing: border-box;  /* Include padding and border in the element's total width */
}
.flex-item-2sw {
  /*width: 5%;*/
  flex: 1 1 33%;
  border: none;
  /*padding-top: 5px;*/
  padding: 5px 5px 5px 5px;
}
.flex-item-3sw {
  /*width: 5%;*/
  flex: 1 1 33%;
  border: none;
  /*padding-top: 5px;*/
  padding: 5px 5px 5px 5px;
}
.flex-item-4sw {
  /*width: 5%;*/
  flex: 1 1 33%;
  border: none;
  /*padding-top: 5px;*/
  padding: 5px 5px 5px 5px;
}
.flex-item-5sw {
  /*width: 10%;*/
  flex: 1 1 33%;
  border: none;
  /*padding-top: 5px;*/
  padding: 5px 5px 5px 10px;
}
.flex-item-6sw {
  /*width: 20%;*/
  flex: 1 1 33%;
  border: none;
  /*padding-top: 5px;*/
  padding: 5px 5px 5px 10px;
  justify-content: space-between;
}
.flex-item-6sw label {
    margin: 0 12px; /* Add margin to the label to space it properly */
}
.flex-item-7sw {
  /*width: 35%;*/
  flex: 1 1 33%;
  border: none;
  padding: 5px 5px 5px 10px;
}
.flex-item-7sw input[type="radio"] {
	margin-left: 0px;
	margin-right:5px;
    /*margin: 0px 5px;*/ /* Add margin to the label to space it properly */
}
.flex-item-7sw label {
	margin-left: 0px;
	margin-right:20px;
    /*margin: 0px 5px;*/ /* Add margin to the label to space it properly */
}
.flex-item-8sw {
  flex: 1 1 33%;
  border: none;
  padding: 5px 5px 5px 10px;
  text-align: left;
  /*height: 30px;
  z-index: 1000;*/
}
.flex-item-9sw {
  flex: 1 1 33%;
  border: none;
  padding: 18px 5px 5px 10px;
  text-align: left;
  /*height: 30px;
  z-index: 1000;*/
}
.flex-item-10sw {
  flex: 1 1 100%;
  border: none;
  padding: 20px 5px 5px 10px;
  /*height: 30px;
  z-index: 1000;*/
}
#prasam {
  background-color: #b5e86f;
  height: 40px;
  width: 20%;
  border: 1px solid;
  border-radius: 4px;
  font-size: 1em;
}
@media (max-width: 768px) {
	#prasam {
		width: 30%;
	}
}		
input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  padding: 10px;
}
input[type='radio'] {
    accent-color: #232323;
}
input[type='checkbox'] {
    accent-color: #232323;
}
@media (max-width: 768px) {
.flex-item-2sw {
  /*width: 5%;*/
  flex: 1 1 100%;
  border: none;
  /*padding-top: 5px;*/
  padding: 5px 5px 5px 5px;
}
.flex-item-3sw {
  /*width: 5%;*/
  flex: 1 1 100%;
  border: none;
  /*padding-top: 5px;*/
  padding: 5px 5px 5px 5px;
}
.flex-item-4sw {
  /*width: 5%;*/
  flex: 1 1 100%;
  border: none;
  /*padding-top: 5px;*/
  padding: 5px 5px 5px 5px;
}
.flex-item-5sw {
  /*width: 10%;*/
  flex: 1 1 50%;
  border: none;
  /*padding-top: 5px;*/
  padding: 5px 5px 5px 10px;
}
.flex-item-6sw {
  /*width: 20%;*/
  flex: 1 1 100%;
  border: none;
  /*padding-top: 5px;*/
  padding: 5px 5px 5px 10px;
  justify-content: space-between;
}
.flex-item-6sw label {
    margin: 0 12px; /* Add margin to the label to space it properly */
}
.flex-item-7sw {
  /*width: 35%;*/
  flex: 1 1 50%;
  border: none;
  padding: 5px 5px 5px 10px;
}
.flex-item-7sw label {
	margin-left: 0px;
	margin-right: 10px;
    /*margin: 0px 5px;*/ /* Add margin to the label to space it properly */
}
.flex-item-8sw {
  flex: 1 1 50%;
  border: none;
  padding: 5px 5px 5px 10px;
  text-align: left;
  /*height: 30px;
  z-index: 1000;*/
}
.flex-item-9sw {
  flex: 1 1 100%;
  border: none;
  padding: 5px 5px 5px 10px;
  text-align: left;
  /*height: 30px;
  z-index: 1000;*/
}
}