/* 
 * http: //www.w3schools.com/web/web_validate.asp
 *
 * http: //validator.w3.org/check 
  *
 *
 */


/*zmienne*/

:root {
  /*--kolor_tla_valid: #e7fdd3;
  --kolor_tla_invalid: #fde2d3;
  --kolor_tla_optional: #a9f5fd;*/

  --kolor_tla_valid: #C5E0B4;
  --kolor_tla_invalid: #F9D6BF;
  --kolor_tla_optional: #AADCE0;

  --kolor_cech: darkblue; /* color: var(--kolor_cech); */
  --kolor_tla_cech: #e3e3e3; /* color: var(--kolor_tla_cech); */
  --kolor_ramki_szczegol: #dbdbdb; /* color: var(--kolor_ramki_szczegol); */

  --kolor_niepoprawne: #F9D6BF;
  --kolor_poprawne: #C5E0B4;
  --kolor_opcja: #AADCE0;
  --kolor_kontur_wybrany: #BFBFBF;
  --kolor_przycisk: #32848A;

  --kolor_menu_normal: #32848A;  /* background-color: var(--kolor_menu_normal); */
  
}


/* Home.css */
/*utf-8 ąćłóśń  */

/*reset css*/


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
 caption, 
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    /*font-size: 100%;*/
    font: inherit;
    /*font-family:Verdana,Geneva,sans-serif;*/
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}



html {
 /*font-family: Verdana, Arial, Helvetica, sans-serif;*/
 /*font-family: Tahoma, Verdana,Helvetica,Arial; */
 font-family: Arial, Tahoma, Verdana,Helvetica; 
 font-size: 16px;
 font-weight: normal; 

 COLOR: black; 

 /*AC24*/
 /*background: #831f1f;*/
 /*background: #FAFAFA;*/
 /*background: #e2e9f1;*/

 /* background: #f2ffe0; */
 /*background: #FCFFF7;*/
 
 /*AC24*/
 /*min-height: 100%;*/
}



BODY {
 /*font-family: Arial, Tahoma, Verdana,Helvetica; 
 font-size: 12px;*/
 background: #FAFAFA;

   /* width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;*/
    /*overflow: hidden; */


 background-image: url('img/laka.png'); /* Ścieżka do twojego obrazu tła */
 background-size: cover; /* Sprawia, że obraz tła pokryje cały dostępny obszar */
 background-position: center; /* Centruje obraz tła */
 background-repeat: no-repeat; /* Zapobiega powtarzaniu się obrazu */
 background-attachment: fixed; /* To sprawia, że tło jest nieruchome przy przewijaniu */


}


table {
  border-collapse: collapse;
  border-spacing: 0;
  
}


a{
 color: #2d58ae;
 text-decoration: none;


 /*
  nie dziala 
 text-decoration: underline;
 text-decoration-line: underline;
 text-decoration-style: solid;
 text-decoration-color: red;
 */

 /*
  nie dziala
 text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
 */

}

/**/
a:link {
/*color: #0000FF;*/
/*border-bottom: 2px dashed #0000FF;*/
border-bottom: 2px dashed #C0C0C0;
}

a:visited {
/*color: #0000FF;*/
border-bottom: 2px dashed #636363;
}

a:active {
/*color: #FF0000;*/
border-bottom: 2px solid #30a6fd;
}

a:hover {
/*color: #000000;*/
/*border-bottom: 2px solid #DD0000;*/
border-bottom: 2px solid #1f60f4;
}



/*fonty zle sie przenosza z table trzeba bezposrednio robic table.xxx td lub th*/

table td, table th{
 /*border: 1px solid blue;*/

 font-family: Arial, Tahoma, Verdana,Helvetica; 

 text-align: left;
 text-wrap: normal; 

 /*font-size: 12px;*/

  /*color: red; */
}


table th{
 color: #00037f; 
}


/*
ol, ul, li {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}
*/


li {
/*margin-left: 10px;
padding-left: 10px;
*/

/*
 outline-width: 2px;
 outline-color: blue;
 outline-style: solid;
*/
  /*border: 10;*/

 /*margin-left: 0.5em; */
  
}

ol.Komunikaty {
/*margin-left: 10px;
padding-left: 10px;
*/

/*
 outline-width: 2px;
 outline-color: blue;
 outline-style: solid;
*/
  /*border: 10;*/

 margin-left: 1em; 
  
}

ol.Komunikaty li {
 margin-top: 0.8em; 
  /* Tutaj dodaj swoje style dla elementów <li> */
}

p.IdProfil {
  font-size: 6px;
  text-align: right;
  padding: 0px;
  margin: 0px;
  color: #e1e0e0;
}


span {
 /*outline: Violet  dashed 1px;*/

}

b {
 font-weight: bold;
}

em {
  font-style:italic;
} 

small {
 font-size: 11px;
}

figure 
{
 /*font-size: 1.2em;*/
 /*font-size: 12px;*/
 margin: 2em 0 1em 0;
 text-align:justify;

 /*outline: red dashed 1px;*/

 width: 100%;

}

p
{
 /*font-size: 1.2em;*/
 /*font-size: 12px;*/
 margin: 0 0 1em 0;
 text-align:justify;
 hyphens: auto;
 /*outline: red dashed 1px;*/

 width: 100%;

}


p.forInput{
 margin-top: 8px;
 margin-bottom: 15px;
 /*margin-right: 50px;*/
 margin-left: 2px;
 /*FONT-SIZE: 12px;*/
}

p.forInputMsg{
 color: red;

 margin-top: 8px;
 margin-bottom: 15px;
 /*margin-right: 50px;*/
 margin-left: 2px;
 /*FONT-SIZE: 12px;*/
}

p.forInputError{
 color: red;

 margin-top: 8px;
 margin-bottom: 15px;
 /*margin-right: 50px;*/
 /*margin-left: 2px;*/
 /*FONT-SIZE: 12px;*/
 font-weight: bold;
}



FORM {
/* FONT-FAMILY: Verdana,Helvetica,Arial; 
 FONT-SIZE: 12px;*/
}


/*COLOR: #0B1237;   */
INPUT, SELECT, TEXTAREA{

 /*FF mial problem z dziedziczeniem po html*/
 /*
 font-family: Arial, Tahoma, Verdana,Helvetica; 
 FONT-SIZE: 13px;

 background-color: #FFFDCB;

 width: 120px;*/
}


/*
SELECT: required { 
 border-style: solid;
 BACKGROUND-COLOR: lightblue; 
}
*/

/*nie wiem czemu, ale Select nie chce dzialac w ramach  #signup*/
/*background-color: #e7fdd3;*/
/*
select: optional {
 border-width: thick;
 background-color: LightGrey;
}
*/

h1 {
 margin-top: 10px;
 FONT-SIZE: 1.8em;
}

h2 {
 FONT-SIZE: 1.6em;
}

h3 {
 FONT-SIZE: 1.4em;
}

h4 {
 FONT-SIZE: 1.2em;
}

/*dla wizytowki*/
td h2 {
 FONT-SIZE: 1.5em;
}

td h3 {
 FONT-SIZE: 1.2em;
}



article {
 
 /*height: auto;*/
 /*min-height: 100%;*/

}

/*format obszaru z tabela do parametrow dla diagramow dynamicznych*/
#SPCFormAndTable {
 height: 400px; 
 overflow: scroll;
 width:100%;
 max-width:800px;
 background-color: #fffff4;

}

/* środek strony */
#boxCentrum{
 /*AC24 */
 /*min-height:100%;
 position:relative;*/

 /*background-color: red;*/
 /*background-color: white;*/
 
 /*top, bottom = 0; left, right = auto = centrowany */
 /*AC24 */
 /*margin: 0 auto;*/
 /*szerokość*/
 /*AC24 */
 /*width: 998px;*/

 /*AC24 */
  /*
  padding-top:110px;
  width:100%;
  max-width:980px;

  margin-left:auto;
  margin-right:auto;


 border: 1px solid green;*/
 /*font-family: Arial,sans-serif;*/
 /*box-shadow: 0 20px 20px 0 #d6dfe8;*/
}

/*dla mail form*/
#box1Small{
 width: 672px;
 margin: 0 auto;
 background: #fff;
 color: #3f3f3f;
 
 /*100% == tylko 100% ekranu, poniżej nic*/
 /*height: 100%;*/
 /*height: auto;*/
 min-height: 200px;


 /*font-family: Arial,sans-serif;*/
 /*box-shadow: 0 20px 20px 0 #d6dfe8;*/
 z-index: 1;

}

#box2  { 
 position : relative; 
 width : 998px; 
 margin : 0 auto; 
 background : #fff; 
 color : #3f3f3f; 
 /*font-family : Arial, sans-serif; */
 box-shadow : 0 20px 20px 0 #d6dfe8; 
 z-index : 1; 
}

/*miejsce na menu*/
#boxHeader {
 /*background:#ff0;*/
 /*background: white;*/
 padding:10px;

 height: 51px;

 text-align: left;
}

#boxInfo {
  /*background-color: yellow;*/
  
  background-color: white;
  
  padding-top:80px;
  padding-bottom:80px;
  width:100%;
  max-width:980px;
  margin-left:auto;
  margin-right:auto;

  padding-left:10px;
  padding-right:10px;


  /*AC24*/
  /*
  padding-top: 100px;
  padding-right: 300px;
  padding-bottom: 100px;
  padding-left: 50px;
  */
  /*AC24*/
  /*height: 900px;*/
  /*
  height: calc(100% - 200px);
  min-height: calc(100% - 200px);
  */
  /*heigh of view point*/
  height: 100vh;
  overflow: auto;
  /*border: 1px solid blue;*/
}


#boxInfo > p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/*jezeli sa obok siebie to zredukuj margines*/
#boxInfo > p + ul { 
 margin-top: -0.5em; 
}

/*jezeli sa obok siebie to zredukuj margines*/
#boxInfo > p + ol { 
 margin-top: -0.5em; 
}

/*
#boxInfo.p > img + figcaption { 
 margin-top: -1.5em; 
}
*/


#boxInfo > h1 {
 font-size: 36px;
 margin-bottom: 1em;
}

#boxInfo > h2 {
 margin-top: 1em;
 margin-bottom: 1em;
}

/*jezeli sa obok siebie to zredukuj margines*/
#boxInfo > h2 + p { 
 margin-top: -1.2em; 
}


#boxInfo > h3 {
 margin-bottom: 1em;
}

#boxInfo > h4 {
 margin-bottom: 1em;
}

#boxInfo > ul {
 padding-bottom: 1em;
 padding-left: 2em;
 padding-right: 2em;
 text-align:justify;
}


#boxInfo > ul+li {
 padding-bottom: 1em;
 padding-left: 4em;
 padding-right: 2em;
 text-align:justify;
}



#boxInfo > ol {
 padding-bottom: 1em;
 padding-left: 2em;
 padding-right: 2em;
 text-align:justify;
}

#boxInfo > table {
 margin-bottom: 1em;
 margin-left: 2em;
}


#boxInfoTools {
  /*background-color: yellow;*/
  background-color: white;
  
  padding-top: 40px;
  padding-bottom: 80px;

  width:100%;
  max-width:850px;

  margin-left:auto;
  margin-right:auto;

  padding-left:10px;
  padding-right:10px;


  height: 100vh;
  overflow: auto;
  border: 1px solid blue;
 
}


#boxInfoTools > p {
  text-align: justify;
  text-justify: inter-word;
}

#boxInfoTools > h1 {
 font-size: 36px;
 padding-bottom: 1em;
}

#boxInfoTools > ul {
 padding-bottom: 0.5em;
 padding-left: 2em;
}


#boxFooter {

position:fixed; 
text-align: center;

 /*position:absolute;*/
 bottom:0;
 width:100%;
 /*height:60px; */  /* Height of the footer */
 /*height:3em; */
 height:40px; 
 padding-top: 1em;
 /*padding: 2em 0;*/
 margin-top: 3em;

 /*background:#baf8fe;*/
 /*background:#6cf;*/
 background-color: var(--kolor_menu_normal);
 color: white;
}

/*
#boxFooter > span {
  display: inline-block;
  vertical-align: middle;
}
*/




/*sprawdzanie form*/
select:required,
input:required,
textarea:required
{
border-style: solid;
/*border-width: thick;*/
/*background-color: #fde2d3;*/
background-color: lightblue;
}

/*pola nie wymagane*/
/*input:optional,
select:optional,
textarea:optional*/

input,
select,
textarea
{
 background-color: yellow;
 border-width: thick;
 /*background-color: LightBlue;*/
}

select:valid,
input:valid,
textarea:valid
{
 /*background-color: #e7fdd3;*/
 background-color: var(--kolor_tla_valid);

 /*background-image: url('./img/valid_up2.png');

 background-position: right bottom;*/
 
 /*background-position-y: -5px;*/

 /*background-position: right top;*/
 /*background-repeat: no-repeat;*/

 /*border-color: green;*/
 /*border: 1px solid green;*/
}

select:invalid,
input:invalid,
textarea:invalid {
 /*background-color: #f08080;*/
 /*background-color: #fde2d3;*/
 background-color: var(--kolor_tla_invalid);

 /*background-image: url('./img/invalid.png');
 
 background-repeat:no-repeat;
 background-position:right top;*/
 
 /*background-position-y: 3px;*/
 /*background-position: right bottom;*/

 /*border-color: red;*/
 /*border: 1px solid red;*/
 outline: 2px red solid;
}


legend {
 background: yellow;
 margin-left: 10px;
 margin-right: 10px;

 padding-left: 10px;
 padding-right: 10px;

 padding-top: 5px;
 padding-bottom: 5px;

 font-weight: bold;

}



/*formy rejestracji itd. i podawania danych*/

#signup
{
 /*AC24*/
 /*
 margin: 5px auto;
 width: 670px;
 */

 FONT-SIZE: 16px;
 z-index: 10;
}


#signup fieldset 
{
 /*outline daje obramowanie niezależne od border
 obramowanie wokol calości * */
 /*
 outline-width: 1px;
 outline-color: black;
 outline-style: solid;
 */
 /*outline:#00FF00 dotted thick;*/
 /*outline:#00FF00 dotted 2px;*/


 /*obramowanie */
 /*border:1px solid green;*/
 border:2px solid #dbf3cd;
 background-color: #fffff4;

 margin: 0 0 20px;
 /*margin: 20px;*/
 padding: 10px;
 border-radius: 8px;
 z-index: 10;
}

#signup ol
{
 /*
 outline-width: 1px;
 outline-color: red;
 outline-style: dashed;
 */
 /*i rownowazny*/ 

 /*outline: red dashed 1px;*/


 /*list-style-type: decimal;*/
 list-style-type: none;
 padding: 0;
 margin: 0;
 z-index: 10;
}

#signup ul
{
 /*
 outline-width: 1px;
 outline-color: red;
 outline-style: dashed;
 */

 /*outline: red dashed 1px;*/

 /*list-style-type: decimal;*/
 list-style-type: none;
 padding: 0;
 margin: 0;
 z-index: 10;
 
 /*AC24*/
 /*border: 1px solid red;*/

}


#signup li
{
 /*outline: gray dashed 1px;*/

 /*margin: 0 0 6px;*/
 margin: 8px 0px 8px 20px;


 /*
 top padding is 25px
 right padding is 50px
 bottom padding is 75px
 left padding is 100px
 */

 /*wg wskazuwek zegara gora, prawy, dolny, lewy*/
 padding:0px 0px 0px 0px;

 /*UWAGA !!! ten parametr powodował przeźroczystość!!!!! */
 /*position: relative;*/
 z-index: 10;

 /*border: 1px solid black;*/

 /*display: inline-block;*/

}

#signup ul li
{
 text-indent: 0;
 padding-left: 0;
 list-style-position: inside;
}


#signup label
{
 /*outline: yellow solid 1px;*/

 /*width: 180px;*/
 /*AC24*/
 /*width: 150px;*/
  width: 30%;

 display: inline-block;
 /*vertical-align: top;*/
 /*vertical-align: middle;*/
 vertical-align: top;
 z-index: 10;
}

#signup fieldset input,
#signup fieldset select
{
 /*outline: blue dashed 1px;*/

 display: inline-block;

 /*AC24*/
 /* width: 430px;*/
  width: 60%;
  
  /*uwzględnienie w wielkości */
  box-sizing: border-box;


 /* drugie 24 dla lewej strony na odkrycie łapki*/
 /*opera ma problemy
 padding: 3px 24px 3px 3px;*/
 
 padding-top: 2px;
 padding-bottom: 2px;
 padding-right: 22px;
 padding-left: 2px;

 margin-top: 2px;
 margin-bottom: 2px;

 
/*  transition: background-color 1s ease;
 */  

 border: 1px solid #fff;
 border-radius: 5px;

 vertical-align: top;
 /*vertical-align: bottom;*/
 z-index: 10;
}

#signup fieldset select  
{ 
 /*background-color: yellow;*/
 /*background: white;*/
 /*width: 371px; */
 /*width: 430px; 
 padding: 3px; 
 z-index: 10;*/

 /*AC24*/
 /*width: 430px;*/
  /*width: 63%;*/
  box-sizing: border-box;

}

/* specjalnie do tabeli parametrów diagramów*/
#signup fieldset table select  
{ 
  width: 120px;
}



#signup fieldset input[type="checkbox"]
{
 /*backgorund: inherit;*/
 /*background-color: lightgrey;*/
 background-color: inherit;
 /*display: inline-block;*/
 width: 40px;
 height: 20px;

 border: 2px solid lightblue;
 border-radius: 5px;

 /*to jest Opery, bo próbuje pokazywać image*/
 background-image: none;


 /*padding: 1px 1px 26px 1px;*/
 padding-top: 0px;
 padding-bottom: 0px;
 padding-right: 3px;
 padding-left: 0px;

 z-index: 10;
}

/*radio in survey*/
#signup fieldset input[type="radio"][name^="arrS"]
{
 /*backgorund: inherit;*/
 /*background-color: lightgrey;*/
 background-color: inherit;
 /*display: inline-block;*/
 width: 60px;
 height: 20px;

 border: 2px solid lightblue;
 border-radius: 5px;

 /*to jest Opery, bo próbuje pokazywać image*/
 background-image: none;


 /*padding: 1px 1px 26px 1px;*/
 padding-top: 0px;
 padding-bottom: 0px;
 padding-right: 3px;
 padding-left: 0px;

 z-index: 10;
}


/*
#signup fieldset  textarea {
 min-height: 42px;
 min-width: 350px;
 max-width: 430px;

 height: 52px;
 width: 430px;
 overflow: auto;
}
*/
#signup fieldset  textarea.email {
 min-height: 250px;

 /*AC24*/
 /* 
 min-width: 350px;
 max-width: 430px;

 height: 202px;
 width: 430px;
 */
 /*width: 63%;*/

 width: 60%;
 box-sizing: border-box;

 border: 1px solid #fff;
 border-radius: 5px;

 overflow: auto;
}

#signup fieldset  textarea.Survey{
 min-height: 250px;

 width: 94%;

 border: 1px solid #fff;
 border-radius: 5px;

 overflow: auto;
}



/* input[type=file] { width: 300px; border: 2px solid red; }*/

#signup fieldset input[type="file"]  {
 display: inline-block;
 width: 430px;
 min-width: 350px;

 border: 1px solid #fff;
 /*padding: 3px 26px 3px 3px;*/
 /* drugie 24 dla lewej strony na odkrycie łapki*/
 padding: 3px 24px 3px 3px;
 
 border-radius: 5px;
 vertical-align: top;
 z-index: 10;
 }





 
/* 
#signup input: optional {
 background-color: LightGray;
 }      
*/
 
#signup fieldset output 
{  
 background-color: lightgrey;
 display: inline-block;
 width: 400px;
 border: 1px solid #fff;
 padding: 3px 26px 3px 3px;
 
 border-radius: 5px;
 vertical-align: top;
 z-index: 10; 
} 




/*do formatowania opisu i img*/
#signup fieldset p.list 
{  
 background-color: lightblue;
 display: inline-block;
 width: 422px;
 border: 1px solid #fff;
 padding: 3px 3px 3px 3px;
 /*padding: 5px 5px 5px 5px;*/
 
 border-radius: 5px;
 vertical-align: top;
 z-index: 10;
} 

/*beleczka w oddzielajac poszczegolne atrakcje*/
#signup fieldset p.ListHead, #signup fieldset h2.ListHead  
{
 font-weight: bold;
 font-size: 13px;

 /*odstęp nas p*/
 margin-top:20px;

 background-color: rgba(124, 231, 231, 0.92);
 display: inline-block;
 /*width: 640px;*/
 width: 100%;
 
 padding: 3px 3px 3px 3px;
 border-radius: 5px;
 vertical-align: top;
 z-index: 10;
} 

/*dla szukaj i pokaz*/
fieldset.FieldSetSzukaj
{
 background-color: #92d050;
}


/* formatowania opisu i img */
#signup fieldset img.list 
{  
 vertical-align: text-top;
 
 /*padding: 3px 9px 3px 3px;*/

 /*margin: 5px 5px 5px 5px;*/
 margin: 3px 3px 3px 3px;
 
 display: inline; 
 float: left; 
 border-radius: 5px;

 z-index: 10;
}

#signup fieldset img.ShowList 
{  
 vertical-align: bottom;
 margin: 0px 0px 0px 0px;
 /*padding: 2px 2px 2px 2px;*/
 /*padding: 3px;*/
 padding: 0px 2px 5px 5px;
 
 border-radius: 5px;
 z-index: 10;
 float: left; 
} 



/*
#signup fieldset select: required
{
 background-color: lightblue;
}
*/
/*form dla Tool is Knowledge */

#ConfirmParametersForm 
{
 /*AC24*/
 /*margin-bottom: 10px;*/

 
 /*margin: 5px auto;*/

 /*AC24*/
 /*width: 600px;*/

 FONT-SIZE: 16px;
 z-index: 10;
}


#ConfirmParametersForm fieldset 
{
 /*outline daje obramowanie niezależne od border
 obramowanie wokol calości * */
 /*
 outline-width: 1px;
 outline-color: black;
 outline-style: solid;
 */
 /*outline:#00FF00 dotted thick;*/
 /*outline:#00FF00 dotted 2px;*/


 /*obramowanie */
 /*border:1px solid blue;*/
 border:2px solid #dbf3cd;
 background-color: #fffff4;


 /*margin: 0 0 20px;*/
 /*margin: 20px;*/
 padding: 10px;
 border-radius: 8px;
 z-index: 10;
}

#ConfirmParametersForm ul
{
 /*
 outline-width: 1px;
 outline-color: red;
 outline-style: dashed;
 */
 /*i rownowazny*/ 

 /*outline: red dashed 1px;*/


 /*list-style-type: decimal;*/
 list-style-type: none;
 padding: 0;
 margin: 0;
 z-index: 10;

 /*border: 1px solid red;*/
 
}

#ConfirmParametersForm li
{

 /*outline: gray dashed 1px;*/

 /*margin: 0 0 6px;*/
 /*margin: 2px 0px 2px 5px;*/
 margin: 8px 0px 8px 20px;


 /*
 top padding is 25px
 right padding is 50px
 bottom padding is 75px
 left padding is 100px
 */

 /*wg wskazuwek zegara gora, prawy, dolny, lewy*/
 padding:0px 0px 0px 0px;

 /*UWAGA !!! ten parametr powodował przeźroczystość!!!!! */
 /*position: relative;*/
 z-index: 10;
}



#ConfirmParametersForm label
{
 /*outline: yellow solid 1px;*/

 /*width: 180px;*/
 /*AC24*/
 /*width: 350px;*/
  width: 50%;


 display: inline-block;
 /*vertical-align: top;*/
 /*vertical-align: middle;*/
 vertical-align: top;
 z-index: 10;
}

#ConfirmParametersForm fieldset input,
#ConfirmParametersForm fieldset select
{
 /*outline: blue dashed 1px;*/

 display: inline-block;
 /*AC24*/
 /*width: 199px;*/

 width: 45%;


 /* drugie 24 dla lewej strony na odkrycie łapki*/
 /*opera ma problemy
 padding: 3px 24px 3px 3px;*/
 
 padding-top: 2px;
 padding-bottom: 2px;
 padding-right: 22px;
 padding-left: 2px;

 
/*  transition: background-color 1s ease;
 */  

 border: 1px solid #fff;
 border-radius: 5px;

 vertical-align: top;
 /*vertical-align: bottom;*/
 z-index: 10;
}



#ConfirmParametersForm fieldset input[type="checkbox"]
{
 /*backgorund: inherit;*/
 /*background-color: lightgrey;*/
 background-color: inherit;
 /*display: inline-block;*/
 width: 40px;
 height: 20px;

 border: 2px solid lightblue;
 border-radius: 5px;

 /*to jest Opery, bo próbuje pokazywać image*/
 background-image: none;


 /*padding: 1px 1px 26px 1px;*/
 padding-top: 0px;
 padding-bottom: 0px;
 padding-right: 3px;
 padding-left: 0px;

 z-index: 10;
}

#ConfirmParametersForm  textarea.email {
 min-height: 150px;

 /*AC24*/
 /* 
 min-width: 350px;
 max-width: 430px;

 height: 202px;
 width: 430px;
 */
 width: 95%;

 overflow: auto;
}


.Eng 
{
 /*backgorund: inherit;*/
 /*background-color: lightgrey;*/
 background-color: inherit;
 /*color: #C3CCD3;*/
 color: #000066;

}


#Eng 
{
 /*backgorund: inherit;*/
 /*background-color: lightgrey;*/
 background-color: inherit;
 /*color: #C3CCD3;*/
 color: #000066;

}


#TOL_Desc {
  height: 300px;
  overflow:auto;
  padding-right:1em; 
}






/* select[value~="km"] { color: red }*/
/*to nie dziala*/
/*
[value~=km] { 
 
 color: red; 

 }
*/
/* to działa*/ 
/*
[title~=Podaj] 
{ 
 color: blue; 
 border: 5px solid yellow;
}
*/


/* format dla select wewnatrz tabeli */
select[rel="SelectInTable"][name^="arrCecha"],
input[rel="SelectInTable"][name^="arrCecha"]
{

 /*trzeba okreslic, bo zle sie dziedziczy*/
 font-size: 12px;

 /*color: darkblue;*/

 /*background-color: inherit;*/
 background-color: #c7f1fa;
 /*display: inline-block;*/

 width: 270px  !important;
 height: 26px  !important;

 border: 1px solid lightblue;

 /* musi byc important, bo tylko Fire Fox zle dziedziczy pozostale przyjęłyby bez important*/
 padding: 3px 1px 3px 1px  !important;
 /*
 padding-top: 3px  !important;
 padding-bottom: 3px  !important;
 padding-right: 3px  !important;
 padding-left: 3px  !important;
 */

 z-index: 10;
}


li.noNum {
 list-style-type: none;
 background-color: green;
 font-weight: bold;
}



div.scroll
{
background-color: #fdfcd8;
width: 600px;
height: 200px;
overflow: scroll;
padding: 5px;
}

table.result
{
/*width: 100%;*/
 /*border-collapse: collapse;*/

 /*FONT-FAMILY: Verdana,Helvetica,Arial; */
 
 /*FONT-SIZE: 12px;*/
 FONT-WEIGHT: normal; 
 COLOR: black; 
 BACKGROUND: #F0BF6A;
 TEXT-DECORATION: none;

 /*IE do not interpreter nowrap correctly, use also TD.nowrap*/
 /*white-space: nowrap;*/
 /*Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks*/

 /*white-space: pre-line;*/
}


/* 
table.result tr 
{
text-align: left;
border: 1px solid #C3CCD3;

padding-top: 3px;
padding-bottom: 3px;
padding-left: 3px;
}*/

/*table.result th */
table.result th 
{
font-size: 13px;
font-weight: bold; 

text-align: left;

COLOR: #4448EC; 

BACKGROUND: #F0BF6A;

border: 1px solid #C3CCD3;

padding-top: 3px;
padding-bottom: 3px;
padding-left: 3px;
}


table.result td 
{
/* FONT-SIZE: 11px;*/
 FONT-WEIGHT: normal; 
 BACKGROUND: #FFFDEB;

 /*text-align: left;*/
 border: 1px solid #C3CCD3;

 padding-top: 3px;
 padding-bottom: 3px;
 padding-left: 3px;
}


table.result tr.alt2 td 
{
 FONT-SIZE: 12px;
 vertical-align: middle;
 
 color: #000000;
/*background-color: #EAF2D3;*/
 BACKGROUND: #FFFAC1;
border: 1px solid #C3CCD3;

padding: 4px;
}


table.result tr.alt1 td 
{
 FONT-SIZE: 12px;
 vertical-align: middle;
 
 color: #000000;
/*background-color: #EAF2D3;*/
 BACKGROUND: #FFFDEB;
border: 1px solid #C3CCD3;
padding: 4px;
}


table.result tr.altError td.altError 
{
 color: #000000;
/*background-color: #EAF2D3;*/
 BACKGROUND: red;
 border: 1px solid #C3CCD3;
}



/* properties for class dropt */
 /* usage: <span class="dropt" title="">HTML text<span style="width: 500px;">Pop-up text</span></span> */
 /* usage: <span class="dropt" title="">HTML text<span><img src="example.jpg"/></span></span> */
span.dropt {
 border-bottom: thin dotted; background: #ffeedd; 
}

/*uwaga nie oddzielać hover od wlasiwej nazwy

 span.dropt:hover - dobrze
 span.dropt: hover - zle
 * */

span.dropt:hover {
 text-decoration: none; 
 background: #ffffff; 
 z-index: 6; 
}

span.dropt span {
 position: absolute; 
 left: -9999px;
 margin: 40px 0 0 0px; 
 padding: 3px 3px 3px 3px; 
 border-style: solid; 
 border-color: black; 
 border-width: 1px;
}

span.dropt:hover span {
 left: 2%; margin: 20px 0 0 170px; background: #ffffff; z-index: 6;
}




/*musi byc !important, aby nadpisac klase hasDatepicker, ktora jest z automatu*/
input.MyDatePicker  
{
 FONT-FAMILY: Arial, Tahoma, Verdana,Helvetica !important; 
 width: 80px !important;
 BACKGROUND: #add8e6 !important;
 color: #000000 !important;
 padding: 3px 3px 3px 3px !important;
}


/*
input.MyDatePicker: valid
{
 background-image: url();

}
*/


/*link do strony*/
a.Strona {

 /*outline: Violet dashed 1px;*/

 /*overflow:scroll;*/

 /*width: 200px  !important;*/

 FONT-SIZE: 12px;
 /*font-weight: bold;*/

 /*white-space: pre-line;*/
 -ms-word-break: break-all;
     word-break: break-all;
-moz-word-break: break-all;


   word-wrap: break-word;

     /* Non standard for webkit */
   word-break: break-word;
   
    /*opera*/ 
    word-wrap: break-word;
   -moz-word-wrap: break-word;

 /*  
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
*/

}


div {
 /*font-family: Tahoma, Verdana,Helvetica,Arial; */
 /*font-size: 13px;*/
 /*border-radius: 15px;*/

}



footer {
  /*position:absolute;
  bottom:0;*/
  /*width:100%;*/

 position: relative;
 margin: 0 auto;

 /*width: 998px;*/

  height:3em; 
  

  background : #47F9E4; 
  /*background : #feffeb; */
  /*background:#b5fbbd;*/
  padding:1em 1.5em 1em 2em;


 position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;


 /*z-index: 100;*/

}

/*
footer p{
 background : #feffeb; 
}
*/


.center {
  text-align: center;
}

/*kreska pod podpisem artykułu
 * class="SignatureLine"*/
.SignatureLine {
  width:50%;
  text-align:left;
  margin-left:0;
}

/* class="ArticleSignature" */
.ArticleSignature {
  text-align: left;
}


/*80-100 ziel*/
#spQuizResult1{
 background:#3ec261;
}

/*50-80 zolt*/
#spQuizResult2{
 background: #fffd85;
}

/*30-50 pomar*/
#spQuizResult3{
 background: #ffa057;
}

/*0-30 czerw*/
#spQuizResult4{
 background: #ff5c5c;
}


#ButtonLeft  {
  float: left; 
  padding-right: 50px;
}

#ButtonRight { 
 float: right; 
 padding-left: 50px;
}

/*class="ImgKnowledge600" */
.ImgKnowledge150 {
  height: auto; 
  width: 150px; 
}

.ImgKnowledge200 {
  height: auto; 
  width: 200px; 
}

.ImgKnowledge250 {
  height: auto; 
  width: 250px; 
}

.ImgKnowledge350 {
  height: auto; 
  width: 350px; 
}


.ImgKnowledge400 {
  height: auto; 
  width: 400px; 
}


.ImgKnowledge600 {
  height: auto; 
  width: 630px; 
  /*height: 410px;*/
}

.ImgIndicator {
  height: 18px; 
  width: 20px; 
  margin-right: 4px;
}


.IframeComment {
  height: 200px;
  width: 100%;
  background: #fffdeb;
  border: 1px solid #000; 
  resize: vertical; /* Umożliwia zmianę wysokości tylko w pionie */
  overflow: auto; /* Dodaje paski przewijania, gdy zawartość przekroczy dostępną wysokość */

}

.IframeNoComment {
/*  height: 60px;
  width: 100%;
  background: #fff;
  text-align: center;
  vertical-align: middle; 
  display: inline-block; 
*/
  display: flex;
  justify-content: center; /* Centrowanie w poziomie */
  align-items: center; /* Centrowanie w pionie */
  height: 70px; /* Ustawia wysokość kontenera */
  border: 1px solid #000; 

  background: #fffdeb;

}

#IframeToolBox{
  /*height: 80%;*/
  /*height: 870px;*/
  height: 100%;

  width: 100%;
  align: middle;
  /*background: #fffdeb;*/
}


/*Format do IFrame*/

#HiddenForm {
display: none;
}

p.CommentRow0 {
 background-color: #f6fffe;
 padding: 15px;
 margin-right: 20px;
 width: 95%;
}

p.CommentRow1 {
 background-color: #ffdf9c;
 padding: 15px;
 width: 95%;
 margin-right: 20px;
}

.Nick {
 font-weight: bold;
}

 /*Button to hide / show form in Comment*/
#NewComment {
  /*font-size: 18px;
  font-weight: bold;*/
  height: 60px;
 }

/*END: Format do IFrame*/


#ImgJa {
 width: 220px; 
 height: 303px; 
 float: left;  
 padding-right: 30px;
}

.ImgArticle {

}

select.Input60 {
 width: 360px; 
}

button {
 padding: 10px;
}

button:hover {
  color: white;
  background: black;
}

select:hover,
input:hover,
textarea:hover
{
 /*outline: #f9de6d dashed 5px;*/
 outline: var(--kolor_kontur_wybrany) solid 5px;
}

.WaskiRadio
{
  width: 0px;
}


.Regulamin {
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  max-width: 800px;
  background: white;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
 }
 
.Regulamin ol {
  list-style-type: decimal;
  padding-left: 20px;
}

.Regulamin ol ol {
  list-style-type: decimal;
  padding-left: 20px;
}

.Regulamin ol ol ol {
  list-style-type: decimal;
  padding-left: 20px;
}

.Regulamin h1 {
 font-size: 1.5em;
 font-weight: bold;
}

.Regulamin h2 {
  padding-top: 1.5em;
  font-size: 1.2em;
  font-weight: bold;
}

.Regulamin p {
  padding-top: 1.2em;
  font-size: 1.0em;
  /*font-weight: bold;*/
}





@media (max-width:980px) {

 table td, table th{
  font-size: 20px;
 }

 #boxInfo {
   width: calc(100% - 30px);
   font-size: 25px;
 }

 /*
 #boxInfoTools {
   width: calc(100% - 30px);
   font-size: 25px;
 }
 */

 #signup 
 {
   font-size: 25px;
 }

 
 #signup fieldset select,
 #signup fieldset input,
 #signup fieldset  textarea.email 
 { 
   font-size: 25px;
 }

 #signup fieldset input
 { 
   height: 60px;
 }

 #signup label {
  font-weight: bold;
 }

 button{
  font-size: 14px;
  font-weight: bold;
  height: 60px;
 }
 
 /*Button to hide / show form in Comment*/
 #NewComment {
  font-size: 18px;
  font-weight: bold;
  height: 80px;
 }

 #ImgQuiz {
   width: 100%;
 } 

 #ImgJa {
   width: 50%;
   height: auto; 
   padding-right: 5%;
   /*padding-left: 10px;*/
 }

 .ImgKnowledge150 {
   height: auto; 
   width: 100%;
 }

 .ImgKnowledge200 {
   height: auto; 
   width: 100%;
 }

 .ImgKnowledge250 {
   height: auto; 
   width: 100%;
 }

 .ImgKnowledge350 {
   height: auto; 
   width: 100%;
 }

 .ImgKnowledge400 {
   height: auto; 
   width: 100%;
 }

 .ImgKnowledge600 {
   height: auto; 
   width: 100%;
 } 

 #ConfirmParametersForm 
 {
   font-size: 25px;
 }

 
 #ConfirmParametersForm fieldset select,
 #ConfirmParametersForm fieldset input,
 #ConfirmParametersForm fieldset  textarea.email 
 { 
   font-size: 25px;
 }

 #ConfirmParametersForm fieldset input
 { 
   height: 60px;
 }

 #ConfirmParametersForm label {
  font-weight: bold;
 }

 figcaption {
   text-align: left;
 }

#signup fieldset table select  
{ 
  width: 180px;
}


}

/*
svg {
 border: 1px solid red;
}
*/

#HistScroll {
 height: 500px;
 width: 630px;
 overflow: scroll;
 /*max-width: 605px;*/
}


/* Styl dla przycisków dla poszukiwania */
.toggle-search-button {
  height: 42px !important;
  margin-top: 12px !important;
  margin-bottom: 2px !important;
  width: auto !important;

  padding-top: 5px !important;
  padding-bottom: 5px !important;
    
  /*background-color: yellow !important;*/
  /*color: white !important;*/
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1rem;
  /*background: rgb(130, 106, 251);*/
  background: var(--kolor_przycisk);
  color: #fff;
}

/* grupa filtrowania*/
.group {
 display: block; 
 /*display: none; */

 /* margin-bottom: 20px;*/
  /*border: 1px solid red;*/
 /* padding: 10px;*/
}


.groupProfil {
 display: block; 
 /*display: none; */

 /* margin-bottom: 20px;*/
  /*border: 1px solid red;*/
  border: 1px dashed var(--kolor_ramki_szczegol);
 /* padding: 10px;*/

}


/* Styl dla przycisków dla iframe */
 .toggle-frame-button {
   height: 50px !important;
   margin-top: 2px !important;
   margin-bottom: 2px !important;
   width: 90% !important;

    padding-top: 3px !important;
    padding-bottom: 3px !important;
    
    /*background-color: yellow !important;*/
    /*color: white !important;*/
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

 .toggle-frame-button:hover {
   /* background-color: #45a049 !important;*/
}

/* Styl dla iframe'ów */
.dynamic-frame {
    display: none; /* Domyślnie ukryj iframe'y */
    width: 100%;
    height: 300px; /* Możesz dostosować wysokość według potrzeb */
    resize: vertical; /* Umożliwia zwiększanie tylko w pionie */
    max-height: 800px; /* Maksymalna wysokość */
    border: 1px solid #ccc;
    margin-bottom: 20px;
}

.dynamic-frame-small {
    height: 50px; /* Możesz dostosować wysokość według potrzeb */
}





@media (max-width:900px) {

 #boxInfoTools {
   width: calc(100% - 30px);
   font-size: 25px;
 }
}


@media (max-width:790px) {

 BODY {
  background-image: url('img/laka_sm.png');
 }

}


@media (max-width:530px) {
 #boxFooter {
   height:60px; 
 }

 #ImgJa {
   width: 100%;
   height: auto; 
   padding-right: 1px;
 }


}

@media (max-width:590px) {
  
  /*przyciski z quiz form*/
  #ButtonLeft {
    padding-right: 0px;
  } 

  /*przyciski z quiz form*/
  #ButtonRight { 
    float: left; 
    padding-left: 0px;
    padding-top: 60px;
  }

 #signup 
 {
   font-size: 20px;
 }

 #signup fieldset
 { 
   font-size: 20px;
   /*background: #bcfeff;*/
 }

 #signup fieldset select,
 #signup fieldset input,
 #signup fieldset  textarea.email 
 { 
   font-size: 20px;
   width: 95%;
   /* Ustawienie szerokości, aby uwzględnić padding */
   /* Dzieki temu zmieciło sie w kolumnie*/
   box-sizing: border-box;
 }

 #signup label
 {
  /*outline: yellow solid 1px;*/

  /*width: 180px;*/
  /*AC24*/
  /*width: 150px;*/
  width: 95%;

  /*display: inline-block;*/
 }

 #ConfirmParametersForm 
 {
   font-size: 20px;
 }

 #ConfirmParametersForm fieldset
 { 
   font-size: 20px;
   /*background: #bcfeff;*/
 }

 #ConfirmParametersForm fieldset select,
 #ConfirmParametersForm fieldset input,
 #ConfirmParametersForm fieldset  textarea.email 
 { 
   font-size: 20px;
   width: 90%;
 }

 #ConfirmParametersForm label
 {
  /*outline: yellow solid 1px;*/

  /*width: 180px;*/
  /*AC24*/
  /*width: 150px;*/
  width: 95%;

  /*display: inline-block;*/
 }

 BODY {
  background-image: url('img/laka_sm.png');
 }


}

/*
@media (max-width:500px) {

 #signup li
 {
   display: block;
 }
}
*/

/*
@media (max-width: 605) {
 svg {
   width: 95%; 
   height: auto;
 }
}
*/


/*@media (max-width:980px) */


/*zeby stopka nie zakryla*/
.gap{
  /*position: relative;*/
  max-width: 700px;
  width: 100%;

  margin-left:auto;
  margin-right:auto;

  padding-top:0px;
  padding-bottom:0px;
  margin-top:0px;
  height: 70px;


  /*uwzglednienie marginesów*/
  box-sizing: border-box;

  /*outline: red dashed 1px;*/

}

/*zeby form nie było pod menu*/
#GapFormPoczatek{
  /*margin-top: 90px;
  margin-bottom: 90px;*/
  height: 80px;


  /*background-image: url('img/Pani01.png'); */
  /*background-image: url('img/Sen10.png'); */
  /*background-size: cover;*/ /* Dopasowuje obraz do rozmiaru kontenera */
  /*background-size: contain;*/ /* lub background-size: contain; */
  /*background-position: center;*/ /* Ustawia obraz na środku kontenera */
  /*background-repeat: no-repeat; */ /* Zapobiega powtarzaniu obrazu */

  padding: 20px; /* Dodatkowy padding wewnątrz kontenera */
  box-sizing: border-box; /* Określa, że padding jest wliczony w szerokość i wysokość */



}


.container {
  /*position: relative;*/
  max-width: 700px;
  width: 100%;
  /*background: #fff;*/
  /*background: #c4c7cd;*/
  /*background: #a7e2f9;*/
  background: var(--kolor_tla_cech);
  /*padding: 25px;*/
  border-radius: 8px;

  margin-left:auto;
  margin-right:auto;

  margin-top:5px;
  margin-bottom:15px;

  padding-left:20px;
  padding-right:20px;

  padding-top:10px;
  padding-bottom:10px;


  /*heigh of view point*/
  /*height: 100vh;
  overflow: auto;*/

  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);

  /*uwzglednienie marginesów*/
  box-sizing: border-box;

  /*outline: red dashed 1px;*/
  outline: #f4f7f9 dashed 1px;

  /*background-image: url('img/para.png'); */

}

.container header {
  font-size: 1.5rem;
  color: #333;
  font-weight: 500;
  text-align: center;
  padding-bottom:10px;
}


.container .form {
  /*margin-top: 30px;*/
  margin-top: 0px;
}

.form .input-box {
  width: 100%;
  /*margin-top: 20px;*/
  margin-top: 10px;
}



.container p {
  /*margin-top: 20px;*/
  margin-bottom: 0px;
}

.container h2 {
  font-size: 1.2em; /* Rozmiar czcionki */
  margin-top: 10px;

}



.input-box label {
  color: #333;
}

.select-box label {
  color: #333;
}

.form :where(.input-box input, .select-box) {
  position: relative;
  height: 50px;
  width: 100%;
  outline: none;
  font-size: 1rem;
  color: #707070;
  margin-top: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;

  box-sizing: border-box;

  /*padding: 0 15px;*/
  /*padding: 0 15px 0 15px;*/
  padding-left: 5px;
  padding-right: 5px;
}

.form :where(textarea) {
  position: relative;

  height: 350px;
  
  width: 100%;
  outline: none;
  font-size: 1rem;
  color: #707070;
  margin-top: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;

  box-sizing: border-box;

  /*padding: 0 15px;*/
  /*padding: 0 15px 0 15px;*/
  padding-left: 5px;
  padding-right: 5px;
}

.form :where(select) {
  position: relative;

  height: 100px;
  
  width: 100%;
  outline: none;
  font-size: 1rem;
  color: #707070;
  margin-top: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;

  box-sizing: border-box;

  /*padding: 0 15px;*/
  /*padding: 0 15px 0 15px;*/
  padding-left: 5px;
  padding-right: 5px;
}


.input-box input:focus {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.form .column {
  display: flex;
  column-gap: 15px;
}

.form .radiowe-box {
  margin-top: 20px;
}

.radiowe-box h3 {
  color: #333;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 8px;
}

.form :where(.radiowe-option, .radiowe) {
  display: flex;
  align-items: center;
  column-gap: 50px;
  flex-wrap: wrap;
  
  /*background: #dcf9fd;*/
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 6px 
}

.form :where(.radiowe-option):hover {
  /* Dodaj tutaj style dla efektu hover */
  /*outline: #f9de6d dashed 5px;*/
  outline: var(--kolor_kontur_wybrany) solid 5px;
  cursor: pointer; /* Opcjonalnie: zmień kształt kursora na wskaźnik */
}


.form .radiowe {
  column-gap: 5px;
}

.radiowe input {
  accent-color: rgb(130, 106, 251);
}

.form :where(.radiowe input, .radiowe label) {
  cursor: pointer;
}

.radiowe label {
  color: #707070;
}


.option-background {
    /*background-color: #3498db;*/ /* Niebieskie tło */
  background-color:  var(--kolor_tla_optional);
}

.valid-background {
    /*background-color: #2ecc71; *//* Zielone tło */
  background-color: var(--kolor_tla_valid);
}

.invalid-background {
    /*background-color: #e74c3c;*/ /* Czerwone tło */
  background-color: var(--kolor_tla_invalid);
}


.address :where(input, .select-box) {
  margin-top: 15px;
}

.select-box select {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  color: #707070;
  font-size: 1rem;
}

.form button {
  height: 55px;
  width: 100%;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 30px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  /*background: rgb(130, 106, 251);*/
  background: var(--kolor_przycisk);
  
  border-radius: 6px 

}

.form button:hover {
  background: rgb(88, 56, 250);
  /*background: var(--kolor_przycisk);*/
}


/*AC24 tak było źle*/
/*.form button .RotateButton {*/

.form .RotateButton {
  height: 35px;
  width: 120px;
  font-size: 0.9rem;
  margin-top: 30px;
}



/* Stylizacja dla tekstu etykiety */
#Lista_Cech label {
 /*color: blue;*/ /* Ustawienie koloru tekstu na niebieski */
 color: var(--kolor_cech); /* Ustawienie koloru tekstu na niebieski */

 font-size: 12px; /* Ustawienie wielkości czcionki na 12px */
 line-height: 20px;


  display: block; /* Zmień display na block */
  /*display: inline-block;*/
  margin-right: 10px;
  cursor: pointer;

  margin-bottom: 10px; /* Dodaj odstęp na dole każdej etykiety */
  line-height: 1.6; /* Dodaj odstęp pomiędzy liniami tekstu */
}

.Lista_Cech p{
 /*color: blue; */ /* Ustawienie koloru tekstu na niebieski */
 color: var(--kolor_cech); /* Ustawienie koloru tekstu na niebieski */
 font-size: 12px; /* Ustawienie wielkości czcionki na 12px */
 line-height: 20px;


  margin-right: 10px;
  cursor: pointer;

  margin-bottom: 10px; /* Dodaj odstęp na dole każdej etykiety */
  line-height: 1.6; /* Dodaj odstęp pomiędzy liniami tekstu */
  margin-top: 10px; /* Dodaj odstęp na dole każdej etykiety */
}




/* Ukryj standardowy checkbox */
.Lista_Cech input[type="checkbox"] {
  display: none;
  margin-right: 10px; /* Dodaj odstęp po prawej stronie checkboxa */
}

.Lista_Cech input[type="checkbox"] + label {
    display: block;
    margin-bottom: 10px;
    cursor: pointer;
    line-height: 1.6;
/*    margin-right: 10px; 
    margin-left: 10px; 
    padding-right: 10px; 
    padding-left: 10px; */
}

/*
.Lista_Cech  label {
    display: block;
    margin-bottom: 10px;
    cursor: pointer;
    line-height: 1.6;
    margin-right: 10px; 
    margin-left: 10px; 
    padding-right: 10px; 
    padding-left: 10px; 
}
*/


/* Stylizacja dla pola wyboru, gdy jest zaznaczone */
.Lista_Cech input[type="checkbox"]:checked + label::before {
  content: "\2714"; /* Kod Unicode dla znaku "✓" */
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  /*background-color: green;*/
  background-color: #92d050;
  border-radius: 3px;
  color: white;
  font-weight: bold;
}

/* Stylizacja dla pola wyboru, gdy nie jest zaznaczone */
.Lista_Cech input[type="checkbox"] + label::before {
  content: "\2716"; /* Kod Unicode dla znaku "✖" */
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background-color: red;
  border-radius: 50%;
  color: white;
  font-weight: bold;
}


/* Dodatkowy styl dla wyłączonych etykiet */
.Lista_Cech input[type="checkbox"]:disabled + label {
  color: #999; /* Kolor etykiety dla wyłączonych checkboxów */
  pointer-events: none; /* Uniemożliwia interakcję z wyłączonymi etykietami */

  /*color: darkblue;*/ /* Ustawienie koloru tekstu na niebieski */
  color: var(--kolor_cech); /* Ustawienie koloru tekstu na niebieski */
  font-size: 12px; /* Ustawienie wielkości czcionki na 12px */
}




/*Responsive*/
@media screen and (max-width: 500px) {
  .form .column {
    flex-wrap: wrap;
  }
  .form :where(.radiowe-option, .radiowe) {
    row-gap: 15px;
  }
}



ul.Text {
  list-style-type: circle;
	padding-left: 20px;
}


/*dla regulaminu*/
div.ScrollRegul
{
border: 2px dotted #000;
background-color: #fdfcd8;
/*width: 600px;*/
height: 300px;
overflow: scroll;
padding: 5px;
}

#ZdjecieProfilowePodglad {
/*  width: auto;
  max-height: 300px;*/

  width: auto;
  max-height: 250px;

  max-width: 250px;
  height: auto; 

  overflow: hidden;
  object-fit: cover; /* contain lub cover, w zależności od preferencji */

  margin-top: 10px;
  border: 1px solid blue;
}

#ZdjecieProfiloweProfil {
  width: auto;
  max-height: 250px;

  max-width: 250px;
  height: auto;

  margin-top: 10px;
  border: 1px solid blue;
}


.text_start{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  padding: 10px; /* Dodaje padding do tekstu, aby zapewnić czytelność */
  /*background-color: rgba(0, 0, 0, 0.2);*/ /* Dodaje półprzezroczyste tło dla lepszej czytelności tekstu */
  box-sizing: border-box;

}


.text_start p {
 /*font-size: 24px;*/
  font-size: 1.5vw;

  /*margin: 10px;*/
  font-weight: 900;
  text-align: left;
  color: white;
  padding: 10px;
  border-radius: 5px;
  opacity: 0.5;
  /*background-color: rgba(173, 216, 230, 0.6);*/
  /*background-color: green;*/
  background-color: var(--kolor_menu_normal);

  text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.9);

  box-sizing: border-box;

}

.text_start a {
  color: inherit; /* Dziedziczy kolor tekstu z rodzica */
  text-decoration: none; /* Usuwa podkreślenie linku */
  border-bottom: none; /* Usuwa dolną linię */
}



.text_one_time{
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  padding: 10px; /* Dodaje padding do tekstu, aby zapewnić czytelność */
  /*background-color: rgba(0, 0, 0, 0.2);*/ /* Dodaje półprzezroczyste tło dla lepszej czytelności tekstu */
  box-sizing: border-box;

}


.text_one_time p {
 /*font-size: 24px;*/
  font-size: 3.5vw;

  display: inline-block;
  transform: scaleX(1.5); 


  /*margin: 10px;*/
  font-weight: 900;
  text-align: left;
  color: white;
  padding: 10px;
  border-radius: 5px;
  opacity: 0.5;
  /*background-color: rgba(173, 216, 230, 0.6);*/
  /*background-color: green;*/
  background-color: var(--kolor_menu_normal);

  text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.9);

  box-sizing: border-box;
}



/* Ograniczenia dla bardzo małych ekranów */
@media (max-width: 600px) {

  .text_start {
    width: 85%; /* Szerokość tekstu na małym ekranie */
  }

  .text_start p {
    font-size: 16px;
  }
}

/* Ograniczenia dla bardzo dużych ekranów */
@media (min-width: 1200px) {
  .text_start p {
    font-size: 24px;
  }
}