:root {
    --header-height: 7.188rem; /* 115px */
    --footer-height-short: 11.063rem; /* 177px */
    --footer-height-long: 16.563rem; /* 265px */
    --padding-block: 1.5rem; /* 24px */
    --progress-height: 5.313rem; /* 85px */
}

@media all and (max-width: 768px) {
    :root {
        --padding-block: 1rem; /* 16px */
    }
}

html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: #F2F2F2;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.test {
    background-image: url("/hlaseni-skody//javax.faces.resource/img/bg_test.png.xhtml");
    background-repeat: repeat-y;
    position: fixed;
    left: 0;
    height: 1000px;
    width: 120px;
    z-index: 10;
}

@media only screen and (max-width: 850px) {
    .test {
        display: none !important;
    }
}

body .ui-widget {
    font-family: var(--main-font-family), serif;
}

@media (min-width: 1351px) {
    .grey-koop-logo {
        background-image: url("/hlaseni-skody//javax.faces.resource/img/triada-koop.svg.xhtml"), url("/hlaseni-skody//javax.faces.resource/img/triada-koop.svg.xhtml");
        background-position: right -86rem top -48rem, left -70rem bottom -8rem;
        background-repeat: no-repeat, no-repeat;
        background-size: 100rem, 100rem;
        background-attachment: scroll, fixed;
    }

    .grey-cpp-logo {
        background-image: url("/hlaseni-skody//javax.faces.resource/img/triada-cpp.svg.xhtml"), url("/hlaseni-skody//javax.faces.resource/img/triada-cpp.svg.xhtml");
        background-position: right -42rem top 1rem, left -15rem bottom -12rem;
        background-repeat: no-repeat, no-repeat;
        background-size: 50rem, 50rem;
        background-attachment: scroll, fixed;
    }
}

/* ----------------------------------------------------------------
	Subpanel & poskozenoOdcizenoFooter
---------------------------------------------------------------- */

.subpanel {
    /* identifier for JS function */
    background-color: white;
    padding: var(--padding-block);
    margin-top: 1.5rem;
}

@media only screen and (max-width: 1351px) {
    .subpanel {
        padding: 1rem;
        margin-top: 1rem;
    }
}

.subpanelHeader {
    /* identifier for JS function */
    display: flex;
    gap: 1rem;
}

.checkboxSubpanels {
    /* identifier for JS function */
}

@media only screen and (max-width: 520px) {
    .subpanelHeader {
        flex-wrap: wrap;
    }
}

.subpanelRozbalovaciHeaderIcon {
    min-width: 5rem;
    display: flex;
}

.subpanelRozbalovaciHeaderIcon img {
    margin: 0 auto;
    max-width: 5.125rem;
}

.poskozenoOdcizenoFooterWrapper {
    padding: var(--padding-block);
    background: #EDF9FC;
    border: 1px solid #2CADCD;
}

.poskozenoOdcizenoFooter {
    display: grid;
    grid-template-columns: 22% 5% 23% 5% auto;
    font-weight: 500;
    line-height: 1.35rem;
    gap: 1rem;
}

@media only screen and (max-width: 640px) {
    .poskozenoOdcizenoFooter {
        grid-template-columns: unset;
        grid-template-rows: 22% 5% 23% 5% auto;
    }

    .poskozenoOdcizenoFooter > img {
        transform: rotate(90deg);
    }
}

.poskozenoOdcizenoFooter > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.poskozenoOdcizenoFooter > img {
    justify-self: center;
    align-self: center;
}

/* ----------------------------------------------------------------
	Progress bar
---------------------------------------------------------------- */
.progress-bar {
    grid-column: 1 / span 12;
    grid-row: 2;
    display: flex;
    /*height: 65px;*/
}

@media only screen and (max-width: 1320px) {
    .progress-bar {
        /*max-width: 75rem;*/
    }
}

.progress-gap-line {
    border-top: 1px solid #858585;
    width: 6.688rem;
    height: 0;
    margin-top: 1rem;
}

.progress-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-right: 1rem;
    padding-left: 1rem;
    width: 6rem;
    height: 4rem;
    text-align: center;
    text-wrap: nowrap;
}

@media only screen and (max-width: 880px) {
    .progress-stage {
        white-space: normal;
        font-size: 0.9375rem;
        height: 5.5rem;
        width: 4rem;
    }
}

@media only screen and (max-width: 480px) {
    .progress-stage-text {
        display: none;
    }

    .progress-stage {
        padding-right: 0.4rem;
        padding-left: 0.4rem;
        height: 2.5rem;
    }
}

.number-stage {
    display: flex;
    border: 3px solid #858585;
    border-radius: 100px;
    width: 2rem;
    height: 2rem;
    padding-top: 0.188rem;
    justify-content: center;
}

/* ----------------------------------------------------------------
	Navigacni lista
---------------------------------------------------------------- */

.contentNavigation {
    margin-top: 2rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

@media only screen and (max-width: 520px) {
    .contentNavigation {
        flex-direction: column;
    }

    .contentNavigation > a, .contentNavigation > button {
        width: 100%;
    }

    .contentNavigation .skipButton {
        width: 100%;
    }
}

.contentNavigation > form {
    display: contents;
}

/*!* ----------------------------------------------------------------*/
/*	ItemList */
/*---------------------------------------------------------------- *!*/

.soupisVeci {
    margin: 0.75rem 0;
    border: 1px solid #DBDBDB;
    background-color: var(--color-main-bright);
}

.item-list-wrapper {
    position: relative;
}

.item-list-content-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    padding: 1rem 0;
}

@media (min-width: 1320px) {
    .item-list-content-row > .item-list-content-component:first-of-type > div {
        padding-left: 1.5rem;
    }

    .item-list-content-row > .item-list-content-component:last-of-type > div {
        padding-right: 1.5rem;
    }
}

.item-list-content-component {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 100px;
    max-width: unset;
    display: grid;
    grid-template-rows: 1fr 1fr;
}

.item-list-content-component input[type="text"] {
    border: 1px solid #CCCCCC;
    border-radius: 0;
    box-shadow: unset;
    height: 2.5rem;
}

.item-list-content-component div > select {
    border: 1px solid #CCCCCC;
    border-radius: 0;
    appearance: none;
    background: #fff url("") no-repeat 96% center;
    background-size: 0.65em;
}

.item-list-header {
    display: flex;
    align-self: flex-end;
    text-align: left;
    font-weight: 400;
    border-bottom: 1px solid #dbdbdb;
    padding: 1rem 0.5rem;
    line-height: 1.25rem;
    font-size: 0.9375rem;
    color: #3C3C3C;
}

@media all and (min-width: 1320px) {
    .first-row {
        padding: 0 !important;
    }

    .next-row > .item-list-content-component {
        grid-template-rows: 1fr;
        padding-top: 0.2rem;
    }

    .first-row div.item-list-content-component-input {
        padding-top: 1rem;
    }

    .next-row div.item-list-header {
        display: none;
    }

    .first-row .cenuNevim .item-list-content-component-input {
        padding-top: 2rem !important;
    }

    .next-row .item-list-colspanWrapper {
        padding-top: 0.2rem;
        height: 2.5rem;
    }

    .item-list-header-stickyOrder {
        display: none;
    }
}

@media all and (max-width: 1320px) {
    .item-list-header {
        border-bottom: unset;
        padding: 0.5rem;
    }

    .smazatWrapper .item-list-content-component-input {
        align-self: start !important;
        padding-top: 0.5rem;
    }

    .item-list-content-component {
        grid-template-rows: 1fr auto !important;
    }
}

.item-list-content-component-input {
    padding: 0 0.3125rem;
}

.first-row .smazatWrapper .item-list-content-component-input {
    padding-top: 0 !important;
}

.item-list-content-component-input > div {
    height: 2.5rem;
}

.numericOnly {
    width: 100%;
    display: inline-flex;
}

.numericOnly input {
    width: inherit;
}

.input-with-unit > input {
    padding-right: 1.5rem;
}

.item-list-content-component-input-unit {
    margin-left: -1.5rem;
    font-size: 0.875rem;
    color: #888888;
}

.item-list-content-summary {
    padding: 1rem 1.5rem;
}

.item-list-top-separator {
    border-top: 1px solid #dbdbdb;
}

.cenuNevim {
    min-width: 95px;
}

.cenuNevim span {
    font-size: 14px;
    margin-right: 0 !important;
}

.cenuNevim .item-list-content-component-input {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 2.5rem;
}

.cenuNevim .item-list-content-component-input > div {
    margin-top: unset !important;
    margin-right: unset !important;
}

.odhadCenyHeader {
    margin-top: -20px;
    position: absolute;
    white-space: wrap;
    font-size: 0.875rem;
}

.item-list-colspanWrapper {
    display: inherit;
}

/* ----------------------------------------------------------------
	Podklady
---------------------------------------------------------------- */

.podkladyUploadBoxHeader {
    gap: 1rem;
}

.podkladyUploadBoxWrapper {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr 1fr;
}

@media all and (max-width: 767px) {
    .podkladyUploadBoxWrapper {
        grid-template-columns: 1fr;
    }
}

.podkladyUploadBox {
    display: flex;
    border: 1px solid #A6A6A6;
    justify-content: center;
    height: 27rem;
    align-items: center;
    margin-top: 0.5rem;
}

@media (max-width: 420px) {
    .qrUploadBox {
        display: none;
    }

    .fileUploadBox .podkladyUploadBoxHeader {
        display: none;
    }

    .fileUploadBox > span {
        display: none;
    }

    .podkladyUploadBoxFile {
        height: 3.125rem;
        border: none !important;
        background: var(--color-main);
    }

    .podkladyDescription {
        display: none !important;
    }

    .uploadButton {
        display: flex !important;
        gap: 0.625rem;
        color: #FFFFFF;
        grid-row-start: 1;
        grid-column-start: 1;
        justify-content: center;
    }
}

.podkladyList {
    text-align: start;
    list-style: none;
}

.podkladyList > li {
    padding-left: 4rem;
    padding-right: 5rem;
    text-indent: -1rem;
}

@media (max-width: 1100px) {
    .podkladyList > li {
        padding-left: 2rem;
    }
}

@media (max-width: 768px) {
    .podkladyList > li {
        padding-left: 4rem;
    }
}

@media (max-width: 460px) {
    .podkladyList > li {
        padding-left: 2rem;
    }
}

.p-indent:before {
    content: "▸";
    padding-right: 0.5rem;
}

.podkladyUploadBoxFile {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px dashed #A6A6A6;
}

.podkladyDescription {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    font-size: 0.9375rem;
    grid-row-start: 1;
    grid-column-start: 1;
}

#podkladyPcForm {
    position: relative;
    z-index: 1;
    height: 100%;
    grid-row-start: 1;
    grid-column-start: 1;
}

.full-size > .ui-fileupload-content {
    display: none !important;
}

.podkladyGalerie {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

@media all and (max-width: 1351px) {
    .podkladyGalerie {
        gap: 0.5rem;
    }
}

.podkladyGalerie .fileBlock {
    display: flex;
    flex-direction: column;
    border: 1px solid #DBDBDB;
    position: relative;
    width: 9.666rem;
}

.podkladyGalerie .fileBlock > img {
    width: 8.688rem;
    height: 7.625rem;
    margin: 0.5rem 0.5rem 0 0.5rem;
    object-fit: cover;
}

@media all and (max-width: 480px) {
    .podkladyGalerie .fileBlock {
        width: 9rem;
    }

    .podkladyGalerie .fileBlock > img {
        width: 8rem;
        height: 7rem;
    }
}

.podkladyGalerie .fileBlockDesc {
    display: flex;
    justify-content: space-between;
    margin: 0.25rem 0.5rem 0.5rem 0.5rem;
    font-size: 0.625rem;
}

.podkladyGalerie .fileBlockName {
    max-width: 8rem;
}

.podkladyGalerie .fileBlockDel {
    padding: 0.6875rem;
    width: fit-content;
    z-index: 2;
    position: absolute;
    right: 1.125rem;
    top: 1.125rem;
    color: black;
    background-color: white;
    box-shadow: 0 1px 3px 0 #0000004D;
    height: 2.5rem;
    display: flex;
    align-items: center;
}

.podkladyGalerie .fileBlockDel:hover {
    color: black;
}

.podkladyGalerie .ui-dialog-titlebar {
    padding: 0.5rem 1.5rem !important;
}

.podkladyGalerie .ui-dialog-content {
    padding: .2rem 1rem 1rem 1rem !important;
}

.galleryArrow {
    position: absolute;
    top: 35%;
    padding: 0.6875rem !important;
    background-color: white;
    box-shadow: 0 1px 3px 0 #0000004D;
}

.imageContainer {
    height: auto;
    width: auto;
    min-width: 17rem;
    min-height: 17rem;
    max-width: 36rem;
    max-height: 26rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-content: center;
}

/* ----------------------------------------------------------------
	Dialog & map
---------------------------------------------------------------- */

div.ui-dialog {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.dataLossDialog {
    width: 100% !important;
    max-width: 47rem;
}

.servisMap {
    min-width: 70%;
    max-height: 100%;
    height: 90%;
}

.servisMap .mapaDN {
    height: 75vh !important;
}

@media (max-width: 1350px) {
    .servisMap {
        min-width: 85vw;
    }
}

@media (max-width: 760px) {
    .servisMap {
        min-width: 92vw;
    }

    .servisMap > .ui-dialog-content {
        padding: 0.2rem !important;
    }
}

.servisMap > .ui-dialog-content {
    padding-top: 0 !important;
}

.servisMap span {
    font-family: var(--main-font-family), serif;
    font-size: 1.125rem !important;
    font-weight: 400;
    line-height: 1.5rem;
    color: #3C3C3C;
}

.leaflet-grab {
    cursor: crosshair !important;
}

/* ----------------------------------------------------------------
	AlertBox
---------------------------------------------------------------- */

.alertBox {
    display: flex;
    align-items: center;
    padding: 1.5rem 2rem;
    gap: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.165rem;
}

.alertBoxInfo {
    border: 1px solid #2CADCD;
    background-color: #EDF9FC;
}

.alertBoxWarning {
    border: 1px solid #F68D2E;
    background-color: #FFF7F0;
}

.alertBoxIconText {
    font-family: 'Awesome', serif;
    line-height: 1.5rem;
    font-weight: 400;
    font-size: 1.5rem;
}

.alertBoxWarning .alertBoxIconText {
    color: #F68D2E;
}

.alertBoxInfo .alertBoxIconText {
    color: #2CADCD;
}

.customMessages > div {
    background: unset !important;
    border: unset !important;
    padding: unset !important;
    margin: unset !important;
}

.customMessages .ui-messages-error-summary {
    font-weight: normal !important;
}

.ui-growl {
    top: 10px;
    right: unset !important;
    width: 50% !important;
}

@media (max-width: 760px) {
    .ui-growl {
        width: 80% !important;
    }
}

/* growl error */
.ui-growl-item-container.ui-growl-error {
    background: #FDF2F1 !important;
    border: 1px solid #E04E39 !important;
    opacity: 1 !important;
}

.ui-growl-item-container.ui-growl-error .ui-growl-item {
    color: #E04E39;
}

.ui-growl-item-container.ui-growl-error .ui-growl-item > span {
    color: #E04E39;
}

/* growl info */
.ui-growl-item-container.ui-growl-info {
    background: #EDF9FC !important;
    border: 1px solid #2CADCD !important;
    opacity: 1 !important;
}

.ui-growl-item-container.ui-growl-info .ui-growl-item {
    color: #3C3C3C;
}

.ui-growl-item-container.ui-growl-info .ui-growl-item > span {
    color: #3C3C3C;
}

.ui-growl-item {
    display: flex;
    align-items: center;
}

.ui-growl-message {
    width: unset !important;
    padding-left: 10px !important;
    float: left !important;
}

/* ----------------------------------------------------------------
	SideBox
---------------------------------------------------------------- */

.rightSidePanel {
    position: fixed;
    right: calc((100vw - 1130px) / 2 - 16%);
    top: 45%;
    z-index: 10;
}

.sideBox {
    width: 16.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.5rem;
    background-color: white;
}

@media only screen and (max-width: 1690px) {
    .sideBox {
        display: none;
    }

    .skewedTriangle {
        display: none;
    }
}

.skewedTriangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 14px solid transparent;
    border-left: 14px solid transparent;
    border-top: 32px solid #ffffff;
    border-bottom: 0;
    transform: skew(155deg);
    margin-left: 1rem;
}

/* ----------------------------------------------------------------
	Tooltip & markerTooltip
---------------------------------------------------------------- */

.tooltipIcon-koop {
    background: #fff url("/hlaseni-skody//javax.faces.resource/img/icons/koop/tooltip.svg.xhtml") no-repeat 100% center;
    width: 1.25rem;
}

.tooltipIcon-cpp {
    background: #fff url("/hlaseni-skody//javax.faces.resource/img/icons/cpp/tooltip.svg.xhtml") no-repeat 100% center;
    width: 1.25rem;
}

.ui-tooltip.ui-tooltip-top {
    padding-top: 0 !important;
}

body .ui-tooltip.ui-tooltip-top .ui-tooltip-arrow {
    border-top-color: var(--color-main);
    margin-left: -15px;
    border-width: 15px 15px 0;
    bottom: -8px;
}

body .ui-tooltip .ui-tooltip-text {
    background: transparent;
    color: #fff;
    box-shadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);
    border-radius: 0;
    background: var(--color-main);
    font-family: var(--main-font-family), serif;
    font-size: 0.875rem !important;
    font-weight: 400;
    padding: 1rem;
}

.leaflet-popup-content-wrapper {
    border-radius: 0 !important;
}

/* ----------------------------------------------------------------
	Header / Footer
---------------------------------------------------------------- */
.header-gradient {
    background: linear-gradient(95.79deg, var(--color-main) 14.37%, var(--color-main-dark) 89.32%);
}

.header {
    grid-column: 1 / span 12;
    grid-row: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
}

.stripe {
    height: 1.875rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.logo > img {
    width: 10.25rem; /* 164px */
    height: 7.188rem; /* 115px */
}

@media only screen and (max-width: 360px) {
    .logo > img {
        width: 8.75rem; /* 140px */
        height: 5.375rem; /* 86px */
    }
}

.header-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 1.25rem;
    line-height: 1.25rem;
}

.footer {
    grid-column: 1 / span 12;
}

.footer-gradient {
    background: linear-gradient(95.79deg, var(--color-main) 14.37%, var(--color-main-dark) 89.32%);
    height: var(--footer-height-short);
    width: 100vw;
    position: absolute;
    /*bottom: 0;*/
    left: 0;
    /*right: 0;*/
    z-index: -1;
    overflow-x: hidden;
}

@media (max-width: 767px) {
    .footer-gradient {
        height: var(--footer-height-long);
    }
}

.footerContent {
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.rectangle {
    width: 0.25rem;
    height: 2.5rem;
    background: whitesmoke;
    margin-right: 0.5rem;
    float: left;
}

.upper-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    color: #FFFFFF;
}

.left-inner-footer {
    display: flex;
    line-height: 1.25rem;  /* 20px */
}

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    line-height: 1.25rem;
}

.bottom-footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    color: var(--color-main-light);
}

@media (max-width: 47.938rem) {  /* 767px */
    .visibility {
        display: none;
    }

    .footerContent {
        padding: 1.25rem 1rem;  /* 20px 16px */
        display: flex;
        flex-direction: column;
        gap: 1.5rem;  /* 24px */
    }

    .upper-footer {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .bottom-footer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        gap: 0.5rem;
    }

    .footer-contact {
        align-items: flex-start;
    }
}

/* ----------------------------------------------------------------
	Ajax Status - loader-wrapper
---------------------------------------------------------------- */

div.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.3);
}

div.loader-wrapper > div.loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #4daae9;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

div.loader-wrapper > div.loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #259c54;
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

div.loader-wrapper > div.loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #fbaf1b;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg); /* IE 9 */
        transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg); /* IE 9 */
        transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg); /* IE 9 */
        transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg); /* IE 9 */
        transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
    }
}