/*
Kolory:
#E8ECF8 - jasnoszary
#4d4d4d	- szary
#00213c - granatowy
#273B7B - niebieski
#0064b5 - jasnoniebieski
#e9f6ff - błękitny
#e8f6ff - błękitny border
*/

.ui-datatable.no-header thead {
    display: none;
}
.ui-datatable.borderless thead th,
.ui-datatable.borderless tbody,
.ui-datatable.borderless tbody tr,
.ui-datatable.borderless tbody td {
    border-style: none;
}

.notification-success {
    background-color: #008000 !important;
    background-image: none !important;
    padding: 5px;
}
.notification-in_progress {
    background-color: #999900 !important;
    background-image: none !important;
    padding: 5px;
}
.notification-failure {
    background-color: #B70000 !important;
    background-image: none !important;
    padding: 5px;
}

.appeal-list-petent-read-up-to-date {
    background-color: #008000 !important;
    background-image: none !important;
}
.appeal-list-petent-read-out-of-date {
    background-color: #999900 !important;
    background-image: none !important;
}
.appeal-list-petent-read-never {
    background-color: #B70000 !important;
    background-image: none !important;
}

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,
table, caption, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    font-family: 'fontvar1' , sans-serif;
}

* {    font-family: 'fontvar1' , sans-serif;
}

button,
.button,
#paymentStatus a,
#user *,
#dropdown,
#nav a,
.topnav,
#header,
#logo,
#logo img {
    transition: all 0.2s ease;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    background: #273B7B;
}

#recaptcha,
#recaptcha * {
    z-index: 999999999!important;
}

a {
    text-decoration: none;
    color: #273B7B;
    font-size: 15px;
}

p {
    font-size: 15px;
    line-height: 21px;
    color: #4d4d4d;
    margin-bottom: 10px;
    hyphens: auto;
    white-space: pre-wrap;
}

.accordionSection p {
    white-space: pre-wrap;
}

h1, .h1	{
    font-family: 'Montserrat', serif;
    font-weight: 700;
    font-size: 39px;
    line-height: 43px;
    letter-spacing: 0.5px;
    color: #273B7B;
    margin-bottom: 25px;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: dotted #273B7B 1px;
}

h2, h2 label, .h2 {
    font-family: 'Montserrat', serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 32px;
    letter-spacing: 0.1px;
    color: #4d4d4d;
    margin-bottom: 21px
}

h3, .h3 {
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 15px;
    letter-spacing: 0.1px;
}

strong {
    color: #273B7B;
}

.cl {
    clear: both;
}
.wrapper {
    margin: 0 auto;
    position: relative;
    width: 80%;
    padding: 30px 30px;
}
.wrapper p{
    text-align: justify;
}
.wrapper .faq-description p {
}

.white {
    background: white;
}
.gray {
    background: white;
}

/*
.gray {
    background: #E8ECF8;
}
*/
.p-l-0 {
    padding-left: 0px !important;
}
.p-r-0 {
    padding-right: 0px !important;
}
.m-0 {
    margin: 0px !important;
}
.p-0 {
    padding: 0px !important;
}
.m-b-20 {
    margin-bottom: 20px;
}

.display-b {
    display: block;
}

.sr-only {
    display: none;
}

/***************************   RODO  *********************************/
.rodo {
    box-sizing: border-box;
    height: 80vh;
    width: 50% !important;
    padding: 10px;
    color: white;
}

.rodo *{
    font-family: 'fontvar1' , sans-serif;
    color: white;
    font-size: 12px;
    line-height: normal;
    font-weight: normal;
    font-style: normal;
}

.rodo label {
    display: block;
}
.rodo label:first-child {
    font-size: 16px;
    font-weight: bold;
    margin: 5px 0 15px 0;
}

.rodoContent {
    max-height: 30vh;
    overflow-y: scroll;
    background-color: #273B7B;
    padding: 5px;
    margin: 15px 0;
    border-top: 5px solid #273B7B;
    border-bottom: 5px solid #273B7B;
}

.rodoContent ul {
    list-style: square inside !important;
}

.rodoContent h2 {
    font-size: 12px;
    font-weight: bold;
    margin: 0 0 10px 0px;
}
.rodoContent p,
.rodo p,
.rodoContent a,
.rodoContent li {
    font-size: 11px;
    margin: 0 0 10px 20px;
}

.rodo form button{
    padding: 10px 30px;
    margin-right: 30px;
}

/************** HEADER &COOKIES ******************/

#header {
    background: white;
    height: 100px;
    width: 100%;
    z-index: 1000;
    border: #273B7B solid 1px ;
}

#header .wrapper {
    padding: 0;
    width: 80%;
}
.padd {
    padding: 0 0px;
}

#myTopnav {
    width: 100%;
    position: relative
}

#myTopnav .icon {
    padding: 0;
    display:none;
    font-size: 26px;
    font-weight: bold;
}

#logo {
    position: absolute;
    top: 35px;
}

#dropdown {
    position: absolute;
    top: 10px;
    margin-left: 100px;
    right: 0;
}

/**LEVEL 1****/

#nav	{
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
}

#nav > li { /* element menu górnego */
    float:left;
    position:relative;
}

#nav > li > a{ /* link w elemencie menu górnego */
    text-transform: uppercase;
    display: block;
    float:left;
    padding: 7px;
    margin-left: 7px;
}

#nav li a { /* wszystkie linki w menu głównym i rozwijalnym */
    color:#4d4d4d;
    letter-spacing: -0.2px;
    font-size:16px;
    font-weight: bold;
    position:relative;
    text-decoration:none;
}
#nav li a:hover { /* wszystkie linki w menu głównym i rozwijalnym */
    color:#ffffff;
    background:#273B7B;
    
}

#nav a.button {
    background: #273B7B;
    border: 0 none;
    border-radius:1px;
    -moz-border-radius:1px;
    -webkit-border-radius:1px;
    text-transform: uppercase;
    padding: 10px 15px 12px 15px;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    padding: 7px 10px;
    position: relative;
    text-decoration: none;
    text-indent: 0;
    vertical-align: middle;
    text-align: center;
    min-width: 110px;
}

#nav a.button:hover {
    color: white;
    background: #273B7B;
}

#nav li input {
    margin-left: 7px;
}

#user {
    position: absolute;
    top: 64px;
    right: 0px;
}
/* napis zalogowany jako*/
#user form > span{
    display: inline-block;
    font-family: 'fontvar1' , sans-serif;
    letter-spacing: -0.3px;
    font-size: 12px;
    line-height: 2.8;
    color: #4d4d4d;
    vertical-align: bottom;
}
/* ikonka user*/
#user form > span::after {
    content:url('/javax.faces.resource/user-small.png.xhtml');
    vertical-align: bottom;
}
/* lista rozwijalna */
#user form > span ~ div {
    font-family: 'fontvar1' , sans-serif;
    font-size: 13px;
    display: inline-block;
    color: #273B7B;
    border: solid 1px #273B7B;
    border-radius:1px;
    -moz-border-radius:1px;
    -webkit-border-radius:1px;
    margin-left: 20px;
    width: auto;
    min-width: 102px !important;
}

/* pole wyboru */
#user form > span ~ div label {
    min-height: 21px;
    color: #273B7B !important;
    line-height: 1.5;
}

#user form > span ~ div label:hover {
    background: #e9f6ff;
}

/**********************************************************/

#content {
    background: #E8ECF8;
    min-height: calc(100vh - 250px);
}


/*******************INFO - Wstęp****************************/

#info {
    background: url('/javax.faces.resource/home.jpg.xhtml');
    background-repeat: no-repeat;
    background-size: cover;
}

#terms {
    background: url('/javax.faces.resource/regulamin.jpg.xhtml');
    background-repeat: no-repeat;
    background-size: cover;
}

#unavailable {
    background: url('/javax.faces.resource/service.jpg.xhtml');
    background-repeat: no-repeat;
    background-size: cover;
    min-height: calc(100vh - 250px);
}

#registered {
    background: url('/javax.faces.resource/registered.jpg.xhtml');
    background-repeat: no-repeat;
    background-size: cover;
    min-height: calc(100vh - 250px);
}

#unavailable .wrapper div,
#registered .wrapper div {
    margin-top: calc((50vh - 100px)*0.5) !important;
}

#unavailable a,
#registered a{
    display: block;
    border-radius:2px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border: 1px #e8f6ff solid;
    margin: 0 auto;
    width: 30%;
    color: white;
    font-size: 18px;
    text-align: center;
    padding:20px;
}
#unavailable a:hover,
#registered a:hover {
    background: rgba(255, 255, 255, 0.2);
}

#registered a
{
    margin-top: 20px;
}

#info p,
#info h1,
#info h2,
#info h3,
#terms p,
#terms h1,
#terms h2,
#terms h3,
#unavailable p,
#unavailable h1,
#unavailable h2,
#registered p,
#registered h1,
#registered h2,
.ui-accordion p {
    color: white;
}

#info h1,
#terms h1,
#unavailable h1,
#registered h1 {
    border-bottom: dotted white 1px;
}

#registered p {
    text-align: center;
}

#info a,
#terms a
{
    color: #e1f1ff;
    font-weight: bold;
    border-bottom: 1px dotted #e1f1ff;
}

#info strong {
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}

#info a:hover,
#terms a:hover {
    color: white;
}
#info .wrapper div,
#terms .wrapper div,
#unavailable .wrapper div,
#registered .wrapper div{
    margin: 15px 0;
    padding: 30px;
    background: rgba(0, 66, 120, 0.9);
    box-shadow:0px 2px 8px rgba(0, 0, 0, 0.8);
}

#unavailable .wrapper div,
#registered .wrapper div{
    min-height: 200px;
}

#info .wrapper ul,
#terms .wrapper ul{
    font-size: 15px;
    line-height: 21px;
    color: white;
    margin-left: 17px;
    margin-bottom: 0px;
    list-style: square;
    text-align: left !important;
}
#info .wrapper ol,
#terms .wrapper ol {
    font-size: 15px;
    line-height: 21px;
    color: white;
    margin-left: 17px;
    margin-bottom: 0px;
}
#info .wrapper li,
#terms .wrapper li{
    margin-bottom: 5px;
}

/************** PLATNOSCI ******************/
.button-fix {
    padding: 15px 40px !important;
    width: calc(30% + 82px) !important;
    height: 47px;
}
.button-fix .ui-button-text {
    padding: 0px !important;
}
#platnosci a.button,
#appealForm a.button,
#paymentStatus a,
.s-button{

    background: #273B7B;
    color: #FFFFFF;
    border: 1px solid #273B7B;
    border-radius:1px;
    -moz-border-radius:1px;
    -webkit-border-radius:1px;
    text-transform: uppercase;
    display: block;
    font-size: 16px;
    line-height: 1;
    padding: 15px 40px;
    text-decoration: none;
    vertical-align: middle;
    text-align: center;
    width: 30%;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 20px auto 0 auto;
}

#paymentStatus a{
    margin: 50px auto 0 auto;
}

#platnosci a.button:hover,
#appealForm a.button:hover,
#paymentStatus a:hover {
    color: white;
    background: #273B7B;
}

.payURegulationsPanel span label,
.payURegulationsPanel span label a{
    font-size: 13px !important;
    line-height: 15px !important;
}
.payURegulationsPanel span:not(.alert){
    margin-bottom: 10px;
    display: block;
}
.payURegulationsPanel .ui-chkbox {
    margin-right: 7px;
}
.payURegulationsPanel .ui-chkbox.ui-state-error {
    border-color: transparent;
}
.payURegulationsPanel span.ui-outputlabel-rfi {
    display: inline;
}

/*** ****************** SECTIONS ************* ***/

.transwhite {
    background: url("px_lighten.png");
    padding: 15px;/*
-webkit-box-shadow: 3px 3px 3px 0px rgba(125,125,125,0.5);
-moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.5);
box-shadow: 3px 3px 3px 0px rgba(125,125,125,0.5); */
}

.section .wrapper {
}

.lcol,
.rcol {
    position: relative;
    padding: 2.5%;
    min-height: 145px;
    background-color: #273B7B;
    width: 43%;
    margin-top: 15px !important;
}
.lcol *,
.rcol *{
    color: white;
}
.lcol a,
.rcol a {
    color: #e1f1ff;
    font-weight: bold;
}
.lcol a:hover,
.rcol a:hover {
    color: white;
}
.lcol .h2,
.rcol .h2 {
}

.section .wrapper > div.lcol {
    float: left;
}
.section .wrapper > div.rcol {
    float: right;
}

.section .wrapper > div {
    margin-top: 0px;
}
.section .wrapper ul{
    font-size: 15px;
    line-height: 21px;
    color: #4d4d4d;
    margin-left: 17px;
    margin-bottom: 0px;
    list-style: square;
    text-align: left !important;
}
.section .wrapper li{
    margin-bottom: 2px;
}
.section .wrapper > div h2 {
    margin-top: 0px;
    margin-bottom:15px;
}


.section .wrapper > div p span {
}

/**********************Formularz reklamacji*******************/

#formularz {
    background: #E8ECF8
}

#formularz form {
    margin-top: 35px;
}

#formularz form * {
    font-size: 15px;
}

#formularz form > fieldset > div > div {
    margin-bottom: 15px;
    position: relative;
}

#formularz form > fieldset > div > div:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
}

#formularz form > fieldset > div > div div:first-child{
    float: left;
    /*    width: 20%; */
}
#formularz form > fieldset > div > div div:first-child label{
    padding-top: 5px;
}
#formularz form > fieldset > div > div div:nth-child(2) input,
#formularz form > fieldset > div > div div:nth-child(2) textarea{
    float: right !important;
    border: 1px solid #273B7B !important;
    border-radius:1px !important;
    -moz-border-radius:1px !important;
    -webkit-border-radius:1px !important;
    font-family: 'fontvar1' , sans-serif !important;
    font-size: 15px !important;
    padding: 5px 0 !important;
    text-indent: 5px !important;
    width: 100%;
}
#formularz form > fieldset > div > div div:nth-child(2) input.ui-state-error,
#formularz form > fieldset > div > div div:nth-child(2) textarea.ui-state-error,
#formularz form div.checkbox.ui-state-error div.ui-chkbox-box{
    border-color: #042c77 !important;
}

#formularz form > fieldset > div > div div:nth-child(2) input:focus,
#formularz form > fieldset > div > div div:nth-child(2) textarea:focus{
    background: #e9f6ff !important;
}

#formularz button {
    background: #273B7B;
    border: 1px solid #273B7B;
    border-radius:1px;
    -moz-border-radius:1px;
    -webkit-border-radius:1px;
    text-transform: uppercase;
    padding: 10px 15px 12px 15px;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: 'fontvar1' , sans-serif;
    font-size: 13px;
    font-weight: bold;
    margin: 25px 0 0 0;
    padding: 7px 10px;
    position: relative;
    text-decoration: none;
    text-indent: 0;
    vertical-align: middle;
    width: auto;
}
#formularz button:hover {
    background: #273B7B;
}

#formularz button.bigButton {
    text-align: center;
    margin: 0 auto;
}


#formularz input,
#formularz textarea{
    border: 1px solid #273B7B;
    background: #ffffff;
    font-weight: normal;
    color: #000000;
}


#formularz .ui-selectonemenu,
#formularz .ui-selectcheckboxmenu-multiple {
    border: 1px solid #273B7B;
    border-radius:1px;
    -moz-border-radius:1px;
    -webkit-border-radius:1px;
}

#formularz .ui-widget-header {
    border: none !important;
    background: transparent !important;
    color: #4d4d4d !important;
}

#formularz .ui-widget-content {
    border: none !important;
    background: transparent !important;
    color: #4d4d4d !important;
}

label.errorMessage span.alert {
    font-weight: bold;
}

#formularz .errorMessage {
    font-size: 13px;
    color: #042c77;
}

#formularz div.errorMessage, #formularz div.errorMessage div, #formularz div.errorMessage div span {
    margin: 0px;
    padding: 0px;
}

#formularz label {
    color: black;
}
#formularz ul {
    margin-left: 0 !important;
}

#auditDataTableForm	{
    background: #042c77;
}
#auditDataTableForm span.errorMessage	{
    font-size: 15px;
    color: white;
    text-align: center;
    display: block;
    padding: 5px 0;
}
/********************** Zgłaszający ************************/

.appealNewPersonOrCompanySelectOneMenu {
    width: 50% !important;
    border: none !important;
}

.appealNewPersonOrCompanySelectOneMenu .ui-inputfield
{
    border: 1px solid #273B7B !important;
}

.appealNewPersonOrCompanySelectOneMenu label
{
    padding-top: 6px !important;
}
.appealNewPersonOrCompanySelectOneMenu .ui-selectonemenu-trigger
{
    border: none !important;
}


/********************** Tabela załącznika formularza reklamacji ************************/

div.filesDataTable {
    margin-bottom: 30px !important;
}
div.filesDataTable *{
    border: none !important;
}

.filesDataTable thead{
    display: none;
}
.filesDataTable td{
    text-align: left !important;
    padding: 0 !important;
}
.filesDataTable button {
    margin: 0 !important;
}


/********************** Tabela załącznika po zalogowaniu ************************/
table.filesPanelGrid {
    margin-top: 10px !important;
}

table.filesPanelGrid *{
    border: none !important;
}

table.filesPanelGrid td{
    text-align: left !important;
    padding: 0 10px 0 0  !important;
    vertical-align: middle;
}

/********************** separatory pseudotabel ************************/

.grayUnderline form .ui-g {
    border-bottom: solid 1px #999999;
}
.blueUnderline .ui-g {
    border-bottom: solid 1px #273B7B;
}

/********************** UI ************************/
.ui-button-text {
    font-weight: bold;
}


.ui-slider-handle {
    padding:0 !important;
    border-radius:50% !important;
    -moz-border-radius:50% !important;
    -webkit-border-radius:50% !important;
}
.ui-tree {
    width: 100% !important;
    border: 0 !important;
}
/**************************************************/




/*

.ui-state-default {
    border: 1px solid #273B7B;
    background: #273B7B;
    font-weight: normal;
    color: #ffffff;
}

.ui-widget-content {
    border: 1px solid #273B7B;
    background: #273B7B;
    color: #ffffff;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: none;
    background: #ffffff;
    color: #4d4d4d;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus, .ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
        border: 1px solid #273B7B;
        background: #4d4d4d;
        font-weight:normal;
        color:#ffffff;
}

*/

.ui-state-focus {
    box-shadow: 0px 0px 0.2rem 0.2rem rgba(0, 0, 0, 0.39) !important;
    -moz-box-shadow: 0px 0px 0.2rem 0.2rem rgba(0, 0, 0, 0.39) !important;
    -webkit-box-shadow: 0px 0px 0.2rem 0.2rem rgba(0, 0, 0, 0.39) !important;
}
.hasDatepicker {
    width: 40%;
    display: inline-block;
    margin: 1% !important;
    text-align: center;
}
.filterSection	.hasDatepicker {
    width: 93%;
}

/*checkbox*/
.checkbox .ui-chkbox-box {
    background: white;
    border: #00213c solid 1px;
}
.checkbox .ui-state-active {
    background: #00213c;
}


.ui-fileupload-buttonbar {
    padding: 0 0 15px 0 !important;
}

/*loginMessage*/

.loginMessage h3 {
    color: #042c77 !important;
}

/*panel filtrowania*/
.filterSection {
    background: #273B7B;
    padding: 15px;
    margin: 0 auto;
    text-align: center;
}
.filterSection form,
.filterSection table{
    margin: 0 auto;
    text-align: center;
}
.filterSection p{
    color: white;
    text-transform: uppercase;
}
/*image Button*/
.imageButton img {
    vertical-align: middle;
    padding: 3px;
}
/* Details: PAY BUTTON */
button.payFromDetailsButton {
    background: white !important;
    color: #00213c !important;
    padding: 15px 60px;
    letter-spacing: 1px;
}
button.payFromDetailsButton:hover {
    background: rgba(255, 255, 255, 0.4) !important;
    color: white !important;
}

/* status */
.paymentStatus {
    text-align: center;
}
div.paymentStatus img {
    margin: 25px auto;
    display: block;
}

span.ui-state-default,
.ui-widget-header span.ui-state-default {
    border: 1px solid #273B7B !important;
    background: #273B7B !important;
    color: #ffffff !important;
    padding: 7px 10px;
}
span.ui-state-default:hover,
.ui-widget-header span.ui-state-default:hover {
    background: #273B7B !important;

}

/* nie wyswietla plusa w buttonie zalacznika
.ui-fileupload .ui-icon {
        display: none !important;
        }
*/

@media screen and (max-width:40em) {
    .ui-fileupload-buttonbar .ui-button .ui-button-text {
        display: block !important;
    }
}

.ui-button *{
    text-transform: uppercase !important;
}
/*** *******************FAQ******************* ****/

#pytania button {
    color: #273B7B;
    font-size: 15px;
    cursor: pointer;
    font-weight: bold;
    border: none;
    background: none;
}

#pytania button.active:before {
    content: "-";
    padding: 5px 7px;
    background: white;
    color: #273B7B;
}

#pytania button:before {
    content: "+";
    color: white;
    background: #273B7B;
    margin-right: 15px;
    padding: 5px;
    border: solid 1px #273B7B;
    border-radius:1px;
    -moz-border-radius:1px;
    -webkit-border-radius:1px;
}
#pytania button:hover:before {
    background: white;
    color: #273B7B;
}

/*** *******************FOOTER**************** ****/

#footer {
}
#footer *{color: white;
}
#footer p {
    float: left;
    font-size: 13px;
    line-height: 16px;
    white-space: normal !important;
}
#footer span {
    float: left;
    width: 60px;
}
#footer .copy {
    font-size: 11px ;
    float: right;
    width: auto;
}
#footer a:hover {
    text-decoration: underline;
}



/*** *******************AJAX LOADER**************** ****/

.overlay {
    background-color: rgb(115, 135, 156);
    opacity: .7;
    z-index: 1040;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}


/*** ******************* BLUETHEME **************** ****/

.ui-widget {
    font-family: fontvar1, sans-serif;
    font-size:.9em;
}
.ui-widget .ui-widget {
    font-size:.9em;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: fontvar1, sans-serif;
    font-size:.9em;
}
.ui-widget-content {
    border:1px solid #e8f6ff;
    background:#00213c;
    color:#ffffff;
}
.ui-widget-content a {
    color: #4297df !important;
}
.ui-widget-header {
    border:1px solid #f1ffff;
    background:#4d4d4d;
    color:#ffffff;
    font-weight:bold;
}
.ui-widget-header a {
    color:#ffffff;
}
/* Interaction states----------------------------------*/.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border:1px solid #e8f6ff;
    background:#273B7B;
    font-weight:normal;
    color:#ffffff;
}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
    color:#ffffff;
    text-decoration:none;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    border:1px solid #f3ffff;
    background:#0064b5;
    font-weight:normal;
    color:#ffffff;
    box-shadow: 0 0 0 .2rem rgba(233, 246, 255,.25);
}
.ui-state-hover a, .ui-state-hover a:hover {
    color:#ffffff;
    text-decoration:none;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border:1px solid #e8f6ff;
    background:#00213c;
    font-weight:normal;
    color:#ffffff;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color:#ffffff;
    text-decoration:none;
}
.ui-widget:active {
    outline:none;
}
/* Interaction Cues----------------------------------*/.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight
{
    border:1px solid #e9f6ff;
    background:#0064b5;
    color:#ffffff;
}
/*
{
 border:1px solid #e9f6ff;
 background:#ffffff;
 color:#363636;
}
*/
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a {
    color:#363636;
}
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {
    border: none;
    background: transparent;
    color:#042c77;
}
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a {
    color:#2b2b2b;
}
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text {
    color:#2b2b2b;
}
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary {
    font-weight:bold;
}
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary {
    opacity:.7;
    filter:Alpha(Opacity=70);
    font-weight:normal;
}
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
    opacity:.35;
    filter:Alpha(Opacity=35);
    background-image:none;
}
/* Icons----------------------------------*//* states and images */.ui-icon {
    width:16px;
    height:16px;
    background-image:url("/javax.faces.resource/images/ui-icons_ffffff_256x240.png.xhtml?ln=primefaces-le-frog");
}
.ui-widget-content .ui-icon {
    background-image:url("/javax.faces.resource/images/ui-icons_ffffff_256x240.png.xhtml?ln=primefaces-le-frog");
}
.ui-widget-header .ui-icon {
    background-image:url("/javax.faces.resource/images/ui-icons_ffffff_256x240.png.xhtml?ln=primefaces-le-frog");
}
.ui-state-default .ui-icon {
    background-image:url("/javax.faces.resource/images/ui-icons_ffffff_256x240.png.xhtml?ln=primefaces-le-frog");
}
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
    background-image:url("/javax.faces.resource/images/ui-icons_ffffff_256x240.png.xhtml?ln=primefaces-le-frog");
}
.ui-state-active .ui-icon {
    background-image:url("/javax.faces.resource/images/ui-icons_ffffff_256x240.png.xhtml?ln=primefaces-le-frog");
}
.ui-state-highlight .ui-icon {
    background-image:url("/javax.faces.resource/images/ui-icons_ffffff_256x240.png.xhtml?ln=primefaces-le-frog");
}
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {
    background-image:url("/javax.faces.resource/images/ui-icons_cd0a0a_256x240.png.xhtml?ln=primefaces-le-frog");
}

/* Misc visuals----------------------------------*//* Corner radius */
.ui-corner-tl {
    -moz-border-radius-topleft:1px;
    -webkit-border-top-left-radius:1px;
    border-top-left-radius:1px;
}
.ui-corner-tr {
    -moz-border-radius-topright:1px;
    -webkit-border-top-right-radius:1px;
    border-top-right-radius:1px;
}
.ui-corner-bl {
    -moz-border-radius-bottomleft:1px;
    -webkit-border-bottom-left-radius:1px;
    border-bottom-left-radius:1px;
}
.ui-corner-br {
    -moz-border-radius-bottomright:1px;
    -webkit-border-bottom-right-radius:1px;
    border-bottom-right-radius:1px;
}
.ui-corner-top {
    -moz-border-radius-topleft:1px;
    -webkit-border-top-left-radius:1px;
    border-top-left-radius:1px;
    -moz-border-radius-topright:1px;
    -webkit-border-top-right-radius:1px;
    border-top-right-radius:1px;
}
.ui-corner-bottom {
    -moz-border-radius-bottomleft:1px;
    -webkit-border-bottom-left-radius:1px;
    border-bottom-left-radius:1px;
    -moz-border-radius-bottomright:1px;
    -webkit-border-bottom-right-radius:1px;
    border-bottom-right-radius:1px;
}
.ui-corner-right {
    -moz-border-radius-topright:1px;
    -webkit-border-top-right-radius:1px;
    border-top-right-radius:2px;
    -moz-border-radius-bottomright:1px;
    -webkit-border-bottom-right-radius:1px;
    border-bottom-right-radius:1px;
}
.ui-corner-left {
    -moz-border-radius-topleft:1px;
    -webkit-border-top-left-radius:1px;
    border-top-left-radius:1px;
    -moz-border-radius-bottomleft:1px;
    -webkit-border-bottom-left-radius:1px;
    border-bottom-left-radius:1px;
}
.ui-corner-all {
    -moz-border-radius:1px;
    -webkit-border-radius:1px;
    border-radius:1px;
}
/* Overlays */.ui-widget-overlay {
    background:#444444 url("/javax.faces.resource/images/ui-bg_diagonals-thick_15_444444_40x40.png.xhtml?ln=primefaces-le-frog") 50% 50% repeat;
    opacity:.30;
    filter:Alpha(Opacity=30);
}
.ui-widget-shadow {
    margin:4px 0 0 4px;
    padding:0px;
    background:#aaaaaa url("/javax.faces.resource/images/ui-bg_diagonals-small_0_aaaaaa_40x40.png.xhtml?ln=primefaces-le-frog") 50% 50% repeat;
    opacity:.30;
    filter:Alpha(Opacity=30);
    -moz-border-radius:1px;
    -webkit-border-radius:1px;
    border-radius:1px;
}
/* PrimeFaces Extensions */.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
    background:#ffffff;
    -moz-box-shadow: 0 0 0;
    -webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
    color:#4d4d4d;
}

/******       Conversation       **************/

.conversation {
    width: 75%;
}

.conversation::after {
    content: "";
    clear: both;
    display: table;
}

.conversationLeft,
.conversationRight,
.conversationLeftAnswer,
.conversationRightAnswer {
    position: relative;
    width: 75%;
    border: 1px solid white;
    margin: 0 15px 35px 15px;
    padding: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

.conversationLeft,
.conversationLeftAnswer {
    background: #4d4d4d;
    float: left;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-left-radius: 0;
}

.conversationLeft,
.conversationLeft *,
.conversationLeftAnswer {
    background: white;
    color: black !important;
}

.conversationRight,
.conversationRightAnswer {
    float: right;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    border-bottom-right-radius: 0;
}

.conversationRight,
.conversationRight *,
.conversationRightAnswer {
    background: #273B7B;
}
.conversationRight::after,
.conversationRightAnswer::after {
    content:url("/javax.faces.resource/convR.png.xhtml");
    position: absolute;
    bottom: -24px;
    right: -1px;
    height: auto;
}
.conversationLeft::after,
.conversationLeftAnswer::after {
    content:url("/javax.faces.resource/convL.png.xhtml");
    position: absolute;
    bottom: -24px;
    left: -1px;
}

.conversationEdit {
    font-size: 12px;
    margin-top: 5px;
    padding-top: 5px;
    text-align: right;
}
.conversationExtendedDiscountFee {
    font-size: 12px;
    margin-top: 5px;
    padding-top: 5px;
    text-align: left;
}
.conversationHeader {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
    padding-bottom: 5px;
}
.conversationRight .conversationHeader {
    border-bottom: 1px solid white;
}
.conversationLeft .conversationHeader {
    border-bottom: 1px solid black;
}
.conversationHeader img {
    margin-left: 10px;
}
.conversationLeftAnswer .bigButton {
    background: #273B7B;
    color: white;
    border: 1px solid #273B7B;
    padding: 8px;
}
.conversationLeftAnswer .bigButton:hover {
    background: #273B7B;
    color: white;
}
.conversationRightAnswer .bigButton{
    background: white;
    color: #273B7B;
    border: 1px solid white;
    padding: 8px;
}
.conversationRightAnswer .bigButton:hover{
    background: #273B7B;
    color: white;
}

.conversationAnswerDialog {
    width:80% !important;
}
/**************************************************************************/
/***************************MEDIA QUERRIES*********************************/
/**************************************************************************/



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


    #header.loggedIn #logo img {
        width: 60%;
    }

    .conversation {
        width: 100%;
    }

}

@media screen and (max-width:1200px) and (min-width: 860px) {


    #header.loggedIn #nav li:last-child {
        position: absolute;
        left: 0px;
        top: 33px;
    }
}


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


    #header.loggedIn #logo {
        display: none;
    }
}

@media screen and (max-width:860px) {
    .wrapper {
        width: 90%;
        padding-left: 0px;
        padding-right: 0px;
    }
    #header .wrapper {
        width: 100%;
    }
    #header {
        height: 70px;
    }
    .topnav {
        background: white;
    }
    #dropdown {
        height:0;
    }
    #logo {
        top: 27px;
        left: 5%;
    }
    #logo img {
        width: 60%;
    }
    #header.loggedIn #logo {
        display: none;
    }
    .lcol, .rcol {
        float: none !important;
        width: 100% !important;
    }
    .topnav {
        width: 100%;
        height: 62px;
        padding-top: 8px;
    }

    .topnav #user {
        top: 19px;
        left: 5%;
        width: 50%;
    }

    .topnav #user form > span {
        display: none;
    }
    .topnav #nav li a {
        display: none;
    }

    .topnav a.icon {
        display: block !important;
        padding: 0 13px !important;
        line-height: 1.9;
        color: #273B7B;
        border: 1px solid white;
        height: 50px;
        float: right;
        margin-right: 5%;
    }

    #content {
        background: #E8ECF8;
        min-height: calc(100vh - 250px);
    }
    #unavailable .wrapper div,
    #registered .wrapper div {
        margin-top: calc((50vh - 70px)*0.5) !important;
    }


    #footer p,
    #footer p span{
        width: auto !important;
        float: none !important;
        text-align: center !important;
    }
    #footer p span{
        margin-right: 5px;
    }
    #footer {
        text-align: center !important;
    }


    .rodo {
        width: 90% !important;
        height: 65vh;
    }
    .rodoContent h2 {
        font-size: 10px;
        font-weight: bold;
        margin: 0 0 8px 0px;
    }
    .rodoContent p,
    .rodoContent a,
    .rodoContent li,
    .rodo p{
        font-size: 10px;
        margin: 0 0 3px 20px;
    }
    .rodo label:first-child {
        font-size: 10px;
        font-weight: bold;
        margin: 2px 0 3px 0;
    }

    .rodoContent {
        max-height: 20vh;
    }
    .rodo form button{
        padding: 2%;
        margin-right: 2%;
    }

    .conversationLeft,
    .conversationRight,
    .conversationAnswer {
        width: 85%;
        margin: 5px 0;
        padding: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    .conversationLeft {
        -webkit-border-bottom-left-radius: 0;
        -moz-border-radius-bottomleft: 0;
        border-bottom-left-radius: 0;
    }

    .conversationRight,
    .conversationAnswer {
        -webkit-border-bottom-right-radius: 0;
        -moz-border-radius-bottomright: 0;
        border-bottom-right-radius: 0;
    }

    .conversationAnswerDialog {
        width:95% !important;
    }


    .conversationRight::after,
    .conversationLeft::after,
    .conversationAnswer::after {
        content:none;
    }

}



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

    .topnav.responsive {
        position: relative;
        background: #4d4d4d;
    }

    .topnav.responsive #logo{
        display: none;
    }

    .topnav.responsive #dropdown{
        min-height: 70px;
        top: 70px;
        width: 100%;
        margin: 0 auto;
    }

    .topnav.responsive #nav{
        border-bottom: solid 1px white;
        box-shadow:0px 2px 8px rgba(0, 0, 0, 0.8);
    }

    .topnav.responsive #nav li{
        float: none;
        width: 100%;
        margin: 0 auto;
    }

    .topnav.responsive #nav li a,
    .topnav.responsive #nav li a.button {
        float: none;
        display: block;
        width: 100%;
        color: white;
        background: #273B7B;
        font-size: 15px;
        text-align: center;
        margin: 0 !important;
        border-top: solid 1px white;
    }


    .topnav.responsive #nav li a:hover
    {
        color: #ffffff;
        background: #273B7B;
    }

    .topnav.responsive a.icon {
        color: white;
    }

}


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

    #info .wrapper div,
    #terms .wrapper div,
    #unavailable .wrapper div,
    #registered .wrapper div{
        padding-left: 10px;
        padding-right: 10px;
    }

    h1, .h1	{

        font-size: 30px;
        line-height: 33px;
        letter-spacing: -0.5px;
        color: #273B7B;
        margin-bottom: 25px;
        padding-bottom: 20px;
        border-bottom: dotted #273B7B 1px;
    }

    h2, h2 label, .h2 {
        font-size: 22px;
        line-height: 25px;
        letter-spacing: 0.1px;
        color: #4d4d4d;
        margin-bottom: 21px
    }


}


/***************************Cookie*********************************/

.ui-notificationbar,
.ui-notificationbar * {
    z-index:99999999999;
}

.ui-notificationbar {
    height: auto !important;
    min-height: 100px !important;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    background: rgba(0, 66, 120, 0.85);
    margin: 0 auto;
    text-align: center;
    padding: 0 !important;
}
.ui-notificationbar form{
    margin: 10px;
}
.ui-notificationbar a{
    text-decoration: underline;
    display: block;
}
.ui-notificationbar button{
    margin-top: 10px;
}



/***************************TRANSITIONS*********************************/

button,
.button,
#paymentStatus a,
#user *,
#dropdown,
#nav a,
.topnav,
#header,
#logo,
#logo img,
#nav li,
h1,
h2,
h2 label {
    transition: all 0.2s ease;
}

/************** menu skip links ******************/
.skip-links {
    margin:0;
    padding: 0;
    list-style-type: none;
}
.skip-links a {
    position: absolute;
    top: -3em;
    background-color: #000;
    color: #fff;
    padding: 0.5em 0.75em;
    font-weight: bold;
    text-decoration: none;
    z-index: 10000;
}
.skip-links a:focus {
    top:0px;
}

.external-service-log-ERROR {
    background-color: #FF8080 !important;
    background-image: none !important;
}
.external-service-log-OK {
    background-color: #80FF80 !important;
    background-image: none !important;
}
.external-service-log-EXPIRED {
    background-color: #FFD281 !important;
    background-image: none !important;
}
.external-service-log-NEGATIVE {
    background-color: #D9D9D9 !important;
    background-image: none !important;
}
.external-service-log-BOOKED {
    background-color: #99D6FF !important;
    background-image: none !important;
}

#pytania button{
    text-align: left;
    line-height: 30px;
}

#pytania p{
    padding-left: 5px;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.flex-item {
    flex: 1 1 calc(100% - 30px);
    margin: 15px;
    background-color: #006CCC;
    color: white;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.flex-item:hover {
    background-color: #D9F1FD;
    color: black;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
    transform: translateY(2px);
}

.flex-item:active {
    background-color: #D9F1FD;
    color: black;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
    transform: translateY(4px);
}

.flex-item .title {
    font-size: 40px;
    font-weight: bold;
    margin: 20px 0;
}

.flex-item hr {
    margin: 10px 0;
}

.flex-item .description {
    font-size: 20px;
    font-weight: normal;
    display: block;
    margin: 15px 0;
}

@media (min-width: 768px) {
    .flex-item {
        flex: 1 1 calc(50% - 30px);
    }
}

@media (min-width: 1024px) {
    .flex-item {
        flex: 1 1 calc(33.33% - 30px);
    }
}