body {
  font-family: "Lato", sans-serif;
}
a {
	font-size: small;
	color: red;
}

.linki {
	font-size: small;
	color: red;
	cursor: pointer;
	transition: 0.3s;
	text-decoration: underline;
}

.linki:hover {
	color: #FFA500;
}

div.komentarz {
	color: blue;
  background-color: #FFDEA0;
  text-align: right;
  margin: 5px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.przylepiec_top {
	position: fixed;
	left: 25px;
	top: 25px;
	z-index: 10;
	text-align: center;
}

.przylepiec {
	background-color: #f1f1f1;
	text-align: center;
}

.naglowek {
	background-color: #f1f1f1;
	padding: 30px;
	text-align: center;
}

.tytul_strony {
	color: blue;
	font-weight: bold;
}

.tytul_strony::before {
	content: "\2234";
}

.tytul_dzialu {
	text-align: right;
	border-bottom: 1px solid blue;
	width: 100%;
	margin-bottom: 3px;
}

.tytul_sekcji {
	text-align: right;
	font-size: small;
	border-bottom-style: dotted;
	border-bottom-width: thin; 
	width: 100%;
	margin-bottom: 3px;
	margin-top: 3px;
}

.tytul_testu {
	text-align: center;
}

.mobile-container {
  max-width: 480px;
  margin: auto;
  min-height: 450px;
  border: 2px solid red;
  margin-top: 10px;
	padding: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.zawartosc {
	background-color: white;
	color: gray;
}

span[id^="odp_"]:hover {
	color: #0000FF;
	cursor: pointer;
}

.ior_test_range {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 10px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  border-radius: 5px;
  opacity: 1; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.ior_test_range::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #dc3545; /* red background */
  cursor: pointer; /* Cursor on hover */
}

.ior_test_range::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #dc3545; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.ior_test_range::-moz-focus-outer { border: 0; }

div.logowanie {
	display: flex;
	justify-content: center;
	flex-direction: row;
	align-items: center;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	width: 350px;
	font-size: small;
	border: 2px solid blue;
	padding: 20px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
	color: red;
}

div.logowanie input[type=text], input[type=password] {
	margin-bottom: 10px;
	width: 100%;
	border: none;
	border-bottom: 1px solid green;
}

div.logowanie input[type=text]:focus, input[type=password]:focus {
	border: none;
	border-bottom: 1px solid blue;
	outline: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {background-color:#f5f5f5;}

.dodaj_pytanie-custom-select {
  min-width: 150px;
  position: relative;
}

.dodaj_pytanie-custom-select select {
  appearance: none;
  width: 100%;
  font-size: small;
  padding: 0.5em 0.4em 0.5em 0.4em;
  background-color: #fff;
  border: 1px solid #caced1;
  border-radius: 0.25rem;
  color: #000;
  cursor: pointer;
}

.dodaj_pytanie-custom-select::before,
.dodaj_pytanie-custom-select::after {
  --size: 0.3rem;
  content: "";
  position: absolute;
  right: 1rem;
  pointer-events: none;
}

.dodaj_pytanie-custom-select::before {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-bottom: var(--size) solid black;
  top: 40%;
}

.dodaj_pytanie-custom-select::after {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-top: var(--size) solid black;
  top: 55%;
}

.dodaj_pytanie-custom-date input[type=date] {
  width: 100%;
  font-size: small;
  padding: 0.5em 0.4em 0.4em 0.4em;
  background-color: #fff;
  border: 1px solid #caced1;
  border-radius: 0.25rem;
  color: #000;
  cursor: pointer;
}

.dodaj_pytanie_textarea {height: 150px;
  padding: 12px 12px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: small;
  resize: none;
 }
.dodaj_pytanie_textarea:focus {
	border-color: #14bf8b;
}

div.dodaj_pytanie {
	width: 100%;
}

div.dodaj_pytanie label {
	width: 100%;
}

div.dodaj_pytanie input[type=text] {
	font-size: small;
	width: 100%;
	background: rgba(255,255,255,0.5);
	border: 2px solid white;
	
}
div.dodaj_pytanie label:has([type=radio]) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 2px solid #ccc;
  padding: 10px 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

div.dodaj_pytanie label:has([type=radio]:not(:disabled)) {
  cursor: pointer;
}

div.dodaj_pytanie [type=radio] {
  appearance: none;
  width: 1.4rem;
  height: 1.4rem;
  flex: 0 0 auto;
  border: inherit;
  border-radius: 0%;
}

div.dodaj_pytanie label:has([type=radio]:checked) {
  border-color: #14bf8b;
  background-color: #14bf8b;
  color: #fff;
}

div.dodaj_pytanie [type=radio]:checked {
  border-color: transparent;
  background: #fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><polyline points="0.15,0.5 0.4,0.75 0.85,0.25" style="fill:none;stroke:%2314bf8b;stroke-linecap:round;stroke-width:0.15;"/></svg>') no-repeat 50% / 1rem;
}