html {
    font-family: Lato, sans-serif;
	font-size: 14px;
}

body {
    width: 100%;
    height: 100%;
}

fieldset {
	border: 1px solid;
	background: white;
}

.panel {
    width: 850px;
    margin: auto;
    position: relative;
}

.input-validation-error~.invalid-feedback {
    display: block;
}

@media screen and (min-width : 1300px) {
    .panel:has(.box-wide) {
        margin: auto;
        width: 1250px;
    }
}

.fa, .fas, .far {
    cursor: pointer;
    transition: all 0.2s;
}
.fa:hover, .fas:hover, .far:hover {
    text-shadow: 1px 1px 0px #5c5f72;
}

.header {
}

	.header img {
		display: block;
	}
	
    #wcag {
        position: relative;
        display: block;
        overflow: hidden;
        color: black;
        height: 2rem;
        line-height: 2rem;
        padding: 0;
		margin-left: 1rem;
    }

    #wcag a {
        text-decoration: none;
        color: #595965;
    }

    #wcag svg {
        width: 1.6rem;
        height: 1.6rem;
        fill: #595965;
    }

    #wcag li {
        list-style: none;
        padding: 0;
        height: 2rem;
        line-height: 2rem;
		display: inline;
    }

    #contrast {
        font-size: 1.6rem;
    }

    #fontSize1 {
        font-size: 1rem;
        margin-left: 1rem;
    }
    #fontSize2 {
        font-size: 1.6rem;
        margin-left: 0.1rem;
    }

.content {
	position: relative;
	/* background-image ustawione jest inline bo potrzebny jest dynamiczny adres */
	background-position: bottom left;
	background-repeat: no-repeat;		
	background-color: #f0f5fe;                  /* kolor wiodący contentu */
	padding-top: 30px;
	padding-bottom: 40px;
}

	.label {
		margin-left: 345px;
	}
	
	.box {
		width: 470px;
		margin-left: 345px;
	}
	
        .box input {
            height: 2rem;
            line-height: 2rem;
        }

    .label-wide {
        margin-left: 30px;
    }

    .input-narrow {
        max-width: 500px;
    }

    .box-wide {
        margin: 20px;
        width: calc(100% - 40px);
    }

        .box-wide input {
            height: 2rem;
            line-height: 2rem;
        }

    .label, .label-wide {
		font-size: 2rem;
		color: #365874;                     /* kolor czcionki nagłówków */
		margin-bottom: 10px;
    }

    .box, .box-wide {
		color: #384460;                         /* kolor czcionki boksa */
		background-color: #fff;                 /* kolor tła boksa */
		padding: 20px;
		font-family: Verdana;
    }

        .box-h {
        }

		.box-p {
			margin: 1rem 0;
		}

        .box-p input:disabled {
            border-style: groove;
            font-weight: bold;
            padding: 5px;
        }

        .box-line {
            width: 100%;
            display: inline-block;
            box-sizing: border-box;
        }

        .box-link {
            color: inherit;
        }

        .box-darker {
            box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2);
            font-weight: bold;
        }

        .box-link:hover {
            filter: brightness(75%);
        }

        .box-block {
            display: block;
        }

        .box-left {
            text-align: left;
        }

        .box-right {
            text-align: right;
        }

        .box-justify {
            text-align: justify;
        }

        .box-small {
            font-size: 0.6rem;
        }

        .box-strong {
            font-weight: bold;
        }

        .box-single-line {
            overflow: hidden;
            white-space: nowrap;
        }

        .box-with-help {
            width: calc(100% - 2rem);
        }

        .box-with-two-helps {
            width: calc(100% - 3rem);
        }
		
        .box-error, div.box-error {
            padding: 10px;
            background-color: #b14040;
            color: white;
        }

        .box-success, div.box-success {
            padding: 10px;
            background-color: green;
            color: white;
        }
      
        .box-invalid {
            background-color: firebrick;
            color: white;
            padding: 5px;
        }

        .box-valid {
            background-color: green;
            color: white;
            padding: 5px;
        }

        .idp {
            color: inherit;
        }
		
		.submit-button {
			border: 1px solid #dae3eb;
			background: linear-gradient(to bottom, #dae3eb 0%, #f4f8f9 100%);
			color: #505050;
            display: inline-block;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 0;
            padding-bottom: 0;
            width: auto;
			height: 32px;
            line-height: 32px;
            text-decoration: none;
            text-align: center;
            cursor: pointer;
            transition: all 0.1s;
		}

            .submit-button:hover {
                box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
            }

        /*elementy html z podpowiedziami przy polach formularza, pokazujemy je tylko w trybie wysokiego kontrastu*/
        .help-content {
            display: none;
        }
    
        .grid {
            width: 100%;
        }

        .grid table {
            color: #595965;
            margin-bottom: 2rem;
            width: 100%;
        }

        .grid table thead {
            background-color: #5a8aae;
        }

        .grid table thead th {
            padding: 3px;
            background-color: #5a8aae;
            color: white;
        }

            .grid table thead th:last-of-type {
                border-right: 0px;
            }

       .grid table tbody td {
            padding: 3px;
        }

            .grid table tbody td:last-of-type {
                border-right: 0px;
            }



        .grid table tbody tr {
            word-wrap: break-word;
            height: 2rem;
        }

            .grid table tbody tr:nth-child(odd) {
                background-color: #F0F0F0;
            }

            .grid table tbody tr:nth-child(even) {
                background-color: #FFFFFF;
            }

        .grid table tfoot tr {
            text-align: center;
            height: 50px;
            font-size: larger;
            font-weight: bold;
        }

            .grid table tfoot tr a {
                color: #595965;
                margin: 0px 5px;
                font-weight: 100;
            }

		.data-item-selected {
			background: #dedede;
			font-weight: bold;
		}

        .ePUAP, .WK {
            display: block;
        }

        .ePUAP img {
            margin-right: 15px;
            vertical-align: middle;
            transition: all linear;
        }

        .WKFieldSet legend {
            padding: 0 10px 0 10px;
            font-size: 0.85rem;
        }

        .WK {
            display: flex;
            margin:  2px auto 2px auto;
			padding: 2px;
        }

        .WK img {
            margin-right: 15px;
            vertical-align: middle;
            transition: all linear;
            height: 32px;
        }

        .WK svg {
            margin-right: 15px;
            vertical-align: middle;
            transition: all linear;
            height: 32px;
        }

        .ePUAP img, .WK img {
			border-bottom: 1px solid white;
        }

        .ePUAP img:hover, .WK img:hover {
			border-bottom: 1px solid black;
        }
        
        .small-icon {
            width: 2rem;
            text-align: center;
        }

        .large-icon {
            width: 3rem;
            font-size: 1.5rem;
            line-height: 2rem;
            text-shadow: 2px 2px 4px #999;
            text-align: center;
            color: #416884;
        }

    .field-validation-valid {
        font-size: 0.85rem;
        display: none;
    }

    .field-validation-error {
        font-size: 0.75rem;
        color: red;
    }
	
    .input-validation-error {
        border           : 1px solid #f5d1cd;
        background-color : #fff5f4;
    }

.footer {
    color: #595965;
    font-size: 0.7rem;
}

.nodisplay {
    display: none;
}

.ui-tooltip {
    max-width: none;
}

.ui-tooltip-content {
    text-align: initial;
}

.ui-widget {
    font-family: inherit;
    font-size: inherit;
}

.key-icon {
    width: 32px;
    height: 32px;
}

.btn-round-wide {
    border: 1px solid #999;
    border-radius: 20px;
    display: flex;
    max-width: none;
    max-height: 34px;
}

.btn-round {
    border: 1px solid #999;
    border-radius: 100%;
    display: flex;
    max-width: 34px;
    max-height: 34px;
}

.btn-round, .btn-round-wide {
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background-color: #fff;
    border: 1px solid #000;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .25);
    color: #000;
}

.btn-secondary {
    background-color: #fff;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .15);
    color: #000;
}

@media screen and (max-width : 850px) {

    .box {
        margin: initial;
        width:  initial;
    }

    .box-wide {
        margin: 	initial;
        width:       initial;
    }

    .label-wide {
        padding-top: 10px;
        margin-right: 30px;
    }

    .submit-button {
        display: block;
        width: 100%;
        margin-top: 1px;
    }
	
	.noresponsive
    {
        display : none;
    }
}