:root {
  --primary: #536da0;
  --primary-lighten1: #698bcf;
  --secondary: #66bc56;
  --light:  #ffffff;
  --danger: #D50000;
  --text-base: #131313;
  --text-lighten1: #efefef;
  --text-lighten2: #c9c9c9;
  --text-lighten3: #999999;
  --text-lighten4: #545454;
  --text-darken1: #040404;
  --text-darken2: #191c25;
}

*, *::before, *::after { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { font-size: 62.5%; }

body { margin: 0; padding: 0; font-size: 1.6rem; font-family: 'Lato', sans-serif; color: var(--text-base); }

.overflow { display: none; z-index: 5; position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: 0 auto; width: 100%; height: auto; }


.wrapper-mobile { display: none; }
@media(max-width: 739px) {
    .wrapper-desktop { display: none; }
    .wrapper-mobile { display: block; }
}


#top { padding: 25px 15px 9px; }
#top .logo { display: block; margin: 0 auto; max-width: 1078px; width: 100%; margin-bottom: 1.5em }
#top .text-icon { display: flex; align-items: flex-start; margin-bottom: 1em; }
#top .text-icon img { margin-top: 3px; }
#top .text-icon p { margin: 0; color: var(--text-lighten4); padding-left: 7px; font-weight: 700; }

/* CARD */
#main .card-header { position: relative; }
#main .card { border: none; margin-bottom: 1rem; }
#main .card-header { padding: 0; border-bottom: none; background: transparent; }
#main .card-header,
#main .card-header:active,
#main .card-header:focus { text-decoration: none; }
#main .btn-link.focus, .btn-link:focus { text-decoration: none; box-shadow: none; }
#main .card-title { background: #f495c1; font-weight: 700; color: #ffffff; margin: 0; width: 100%; text-align: left; height: 44px; padding-left: 15px; font-size: 1.6rem; border-radius: 30px; }
#main .card-title:hover { text-decoration: none; }
#main .card-title.collapsed { color: #000000; }
#main .card.selected .card-header:before { content: "\f00c"; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto;position: absolute; top: calc(50% - 8px); right: 25px; color: #ffffff; }
#main .card.inactive .card-header:before { content: ""; }
/* accordion - CARD */
#main .card-body { background: var(--text-lighten1); color: var(--text-darken1); margin: 15px 0; padding: 2rem 1.5rem; transition: background .3s ease-in-out, color .3s ease-in-out; }
#main .card-body:last-child { margin-bottom: 5px; }
#main .card-body .card-btn { display: flex; align-items: center; justify-content: space-evenly; background: var(--primary); color: var(--light); width: 196px; height: 53px; border-radius: 50px; font-weight: 700; font-size: 2rem; padding: 0 30px; transition: background .3s ease-in-out; cursor: pointer; }
#main .card-body .card-btn .fa { font-weight: 300; margin-left: 15px; }

/* CARD - SELECTED */
#main .card.selected .card-title { font-weight: 700; color: #ffffff; }

@media (max-width: 359.98px) {
  #main .card-body .card-btn { font-size: 1.7rem; }
}


/* CARD - PACK - CONTENT */
#main .card-packs.error .card-title { background: var(--danger); color: var(--light); }
#main .card-packs .wrapper-img { padding: 0 0 2rem; }
#main .card-packs .pack-img { display: block; margin: 0 auto; background-repeat: no-repeat; background-position: center; background-size: contain; width: 100%; height: 99px; }
#main .card-packs .pack-img--1 { background-image: url(../images/4xEL.png); height: 117px; }
#main .card-packs .pack-img--2 { background-image: url(../images/2xEL.png); height: 110px; }
#main .card-packs .pack-img--3 { background-image: url(../images/1xEL.png); }
#main .card-packs .wrapper-pack { padding: 0; max-width: 360px; width: 100%; margin: 0 auto; }
/* #main .card-packs .wrapper-content { text-align: center; } */
#main .card-packs .pack-title { font-size: 2rem; font-weight: 700; text-transform: lowercase; color: #536da0; }
#main .card-packs .pack-title::first-letter { text-transform: uppercase; }
#main .card-packs .pack-count { font-weight: 700; margin-bottom: 0; }
#main .card-packs .pack-desc { font-size: 1.2rem; margin-bottom: 1em; }
/* #main .card-packs .pack-price {} */
/* CARD - PACK - PRICE */
#main .card-packs .wrapper-bottom { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--text-lighten2); border-bottom: 1px solid var(--text-lighten2); margin: 1em auto; transition: border-color .3s ease-in-out; flex-direction: row-reverse; padding: 10px 0; max-width: 360px; width: 100%; }
#main .card-packs .wrapper-bottom .wrapper-price { flex-direction: row-reverse; align-items: baseline; }
#main .card-packs .wrapper-bottom .wrapper-price .car { display: none; }
#main .card-packs .wrapper-bottom .wrapper-safe .safe { background: transparent; color: #040404; width: 100%; height: 100%; font-weight: 600; }
#main .card-packs #pack-3 .wrapper-bottom .wrapper-safe .safe { color: #f6314c; }
#main .card-packs .pack-price, 
#main .card-packs .pack-price-old { font-size: 20px; font-weight: 600; margin: 7px 0; background: unset; border: none; color: #040404; margin: 0; padding: 0; }
#main .card-packs .pack-price-old { font-size: .8em; font-weight: 300; text-decoration: line-through; margin-left: 5px; }
#main .card-packs .pack-price::first-letter { text-transform: uppercase; }
/* CARD - PACK - CAR & BTN */
#main .card-packs .wrapper-btn { display: flex; align-items: center; justify-content: space-evenly; }
#main .card-packs .car { background: url(../img/car.svg) no-repeat center / contain; width: 70px; height: 36px; margin-right: 15px; transition: background .3s ease-in-out; border: none; }
#main .card-packs #pack-3 .car { background-image: none; }
html:lang(sg) #main .card-packs #pack-3 .car { background-image: url(../img/car.svg); }
html:lang(bg) #main .card-packs #pack-1 .car,
html:lang(bg) #main .card-packs #pack-2 .car { background-image: none; }

@media (max-width: 359.98px) {
  #main .card-packs .wrapper-btn { justify-content: space-between; }
  #main .card-packs .wrapper-content { text-align: left; }
  #main .card-packs .wrapper-bottom { flex-wrap: wrap; flex-direction: column-reverse; align-items: flex-start; }
  #main .card-packs .wrapper-price { width: 100%; }
}

/* SELECTED */
#main .card-packs .card-body.selected .pack-title { color: var(--light); }
#main .card-packs .card-body.selected { background: var(--primary); color: var(--light); }
#main .card-packs .card-body.selected .card-btn { background: var(--secondary); }
#main .card-packs .card-body.selected .car { background: url(../img/car-active.svg) no-repeat center / contain; }
#main .card-packs .card-body.selected .wrapper-bottom { border-top: 1px solid var(--primary-lighten1); border-bottom: 1px solid var(--primary-lighten1); }
/* #main .card-packs .card-body.selected .pack-img--1 { background-image: url(../img/pack3.png); } */
/* #main .card-packs .card-body.selected .pack-img--2 { background-image: url(../img/pack2.png); } */
/* #main .card-packs .card-body.selected .pack-img--3 { background-image: url(../img/pack1.png); } */
#main .card-packs .card-body.selected .pack-price, 
#main .card-packs .card-body.selected .pack-price-old { background: none; border: none; color: white; }
#main .card-packs .card-body.selected .wrapper-bottom .wrapper-safe .safe { color: white; }

/* UPSELL */
#main .card-upsell.error .card-title { background: var(--danger); color: var(--light); }
#main .card-upsell { display: none; }
#main .card-upsell.show { display: block; }
#main .card-upsell .wrapper-img { padding: 0 0 2rem; }
/* #main .card-upsell .wrapper-content { text-align: center; } */
#main .card-upsell .pack-img { display: block; margin: 0 auto; background-repeat: no-repeat; background-position: center; background-size: contain; width: 100%; height: 87px; }
#main .card-upsell .pack-img img { display: block; margin: 0 auto; height: 100%; }
#main .card-upsell .pack-title { font-size: 2rem; font-weight: 700; text-transform: lowercase; }
#main .card-upsell .pack-title .price { color: var(--secondary); }
#main .card-upsell .pack-title::first-letter { text-transform: uppercase; }
#main .card-upsell .pack-count { font-weight: 700; margin-bottom: 0; }
#main .card-upsell .pack-desc { font-size: 1.2rem; margin-bottom: 1em; }
#main .card-upsell .descr { font-size: 1.4rem; margin-bottom: 1em; }
#main .card-upsell .wrapper-btn { display: flex; align-items: center; justify-content: center; }
#main .card-upsell .wrapper-btn .card-btn { max-width: 360px; width: max-content; font-size: 1.4rem; font-weight: 500; text-align: center; }
#main .card-upsell .wrapper-btn .card-btn-no { max-width: max-content; width: 100%; text-align: center; margin-top: 1rem; border-radius: 20px; font-size: 1.4rem; padding: 4px 15px; text-decoration: underline; }
#main .card-upsell .wrapper-btn .card-btn-no-text { cursor: pointer; }

/* SELECTED */
#main .card-upsell .card-body.selected .pack-title { color: var(--light); }
#main .card-upsell .card-body.selected { background: var(--primary); color: var(--light); }
#main .card-upsell .card-body.selected .card-btn { background: var(--secondary); }

@media (max-width: 359.98px) {
  #main .card-upsell .wrapper-content { text-align: left; }
}


/* CARD - FORM */
#main .card-form.error .card-title { background: var(--danger); color: var(--light); }
#main .card-form .card-body { background: var(--light); padding-top: 0; }
#main .card-form .card-body .col { padding: 0; }
#main .card-form .formItem{ position: relative; flex-shrink: 0; padding: 0; }
#main .card-form .inputStyled { background: #f4f4f4; width: 100%; height: 42px; padding: 0 15px; margin-bottom: 5px; border: 1px solid #f4f4f4; color: #171a20; border-radius: 21px; }
#main .card-form .inputStyled::placeholder { color: var(--text-base); }
#main .card-form .inputStyled.error { border-color: var(--danger); }
#main .card-form .label { position: absolute; color: #8c8c8c; top: 9px; left: 15px; transition: 0.2s ease-out all; font-size: 16px; }
#main .card-form .inputStyled:focus{ outline: none; border: 1px solid #d0d1d2; }
#main .card-form .inputStyled:focus + .label { top: -20px; font-size: 13px; background: transparent; padding: 0 3px; }
#main .card-form .inputStyled:not(:placeholder-shown) + .label { top: -20px; font-size: 13px; background: transparent; padding: 0 3px; }
#main .card-form .card-btn { width: 100%; margin-top: 4rem; justify-content: center; font-size: 1.6rem; max-width: 300px; width: 100%; margin: 0 auto; }
#main .card-form .custom-pr { padding-right: 5px !important; }
#main .card-form .custom-pl { padding-left: 5px !important; }
#main .card-form .custom-px-0 { padding: 0 !important; }

#main .card-form .shipments .obox { border: 2px solid var(--text-lighten1); margin: 1.5rem 0; padding: 7px; transition: border-color .3 ease; }
#main .card-form .shipments .obox p { display: flex; align-items: center; margin: 0; font-size: 1.2rem; }
#main .card-form .shipments .obox p .czek { position: relative; width: 20px; height: 20px; margin-right: .5em; border: 2px solid var(--text-lighten1); font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: border-color .3 ease; }
#main .card-form .shipments .obox p .czek::after { content: "\f00c"; color: var(--light); position: absolute; top: 2px; left: 2px; }


#main .card-form .btn-tooltip { display: flex; align-items: center; justify-content: center; border: 2px solid #b8b8b8; color: #b8b8b8; border-radius: 100%; width: 26px; height: 26px; padding: 0; position: absolute; top: 8px; right: 21px; background: transparent; }
#main .card-form .btn-tooltip.btn-t--select { right: 31px; }


/* SELECTED */
#main .card-form .shipments .obox.selected { border-color: var(--primary); }
#main .card-form .shipments .obox.selected p .czek { border-color: var(--primary); background: var(--primary); }

@media (max-width: 767.98px) {
  #main .card-form .custom-sm-pr-0 { padding-right: 0px !important; }
  #main .card-form .custom-sm-pl-0 { padding-left: 0px !important; }
}

@media (min-width: 360px) {
  #main .card-form .info .info-content { position: absolute; bottom: 38px; width: 310px; right: -20px; background:var(--text-lighten3); color: var(--light); padding: 15px; border-radius: 8px; font-size: 1.2rem; }
}

/* CARD - PAYMENTS */
#main .card-payments.error .card-title { background: var(--danger); color: var(--light); }
#main .card-payments .obox { background: #ffffff; padding: 15px; margin: 0 0 15px; width: 100%; transition: background .3s ease-in-out; font-size: 1.2rem; }
#main .card-payments .obox p:first-child { font-size: 1.4rem; }
#main .card-payments .card-body { background: var(--light); padding: 0; }
#main .card-payments .card-body .card-btn { margin: 1em auto 0 !important; }
#main .card-payments .card-body img { max-width: 100%; }

/* SELECTED */
#main .card-payments .obox.selected { background: #F1F1F1; }
#main .card-payments .obox.selected .card-btn { background: var(--secondary); }
#main .card-payments .obox.selected .czek { border-color: #ffffff; border-color: #536da0; }
#main .card-payments .obox.selected p,
#main .card-payments .obox.selected p strong { color: #000000; }


/* CARD - SHIPMENTS */
#main .card-shipments .card-body { background: #ffffff; padding: 0; }
#main .card-shipments .card-btn { width: 100%; margin-top: 4rem; justify-content: center; font-size: 1.6rem; max-width: 300px; width: 100%; margin: 0 auto; }
#main .card-shipments .innerblock.shipments { margin: 0; padding: 0; }



/* CARD - SUMMARY */
#main .card-summary .card-body { background: var(--light); padding: 0 15px; }
#main .card-summary .card-btn { background: var(--secondary); width: 100%; max-width: 300px; width: 100%; margin: 0 auto; }
#main .card-summary .summary { position: relative; }
#main .card-summary .summary p { font-size: 1.2rem; }
#main .card-summary .summary p:nth-child(1) { margin-bottom: 0; }
#main .card-summary .summary p:nth-child(3) { font-weight: 700; }
#main .card-summary .summary label { padding-left: 70px; }
#main .card-summary .summary label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
#main .card-summary .summary label .checkmark { position: absolute; top: calc(50% - 24px); left: 0; height: 48px; width: 48px; background-color: var(--light); border: 1px solid var(--text-lighten1); border-radius: 5px; }
#main .card-summary .summary label .checkmark:after { content: ""; position: absolute; display: none; }
#main .card-summary .summary label input:checked ~ .checkmark:after { display: block; }
#main .card-summary .summary label .checkmark:after { content: "\f00c"; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: calc(50% - 15px); left: calc(50% - 14px); margin: 0 auto; width: 28px; height: 32px; font-size: 3rem; }
#main .card-summary .summary:nth-child(2) { padding-left: 70px; }
#main .card-summary .rabat #rabat-title { font-size: 1.2rem; }
#main .card-summary .rabat #rabat-title.hide { display: none; }
/* #main .card-summary .rabat #rabat-input,
#main .card-summary .rabat #rabat-button { display: none; } */
#main .card-summary .rabat #rabat-input.show,
#main .card-summary .rabat #rabat-button.show { display: inline-block; }
#main .card-summary .rabat #rabat-button { background: #536da0; color: #FFFFFF; width: 110px; border-radius: 30px; font-weight: 400; font-size: 1.4rem; padding: 5px 15px; transition: background .3s ease-in-out; cursor: pointer; border: none; text-align: center; }
#main .card-summary .rabat #rabat-input { background: #f4f4f4; color: #171a20; border: 1px solid #f4f4f4; padding: 5px 20px; width: 140px; border-radius: 30px; }
#rabat-input:focus{ outline: none; border: 1px solid #d0d1d2!important; }

footer .footer-icons { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; }
footer .footer-icons img { max-width: max-content; width: 100%; margin: 15px; }

@media(max-width: 767.98px) {
  .header-packs-title,
  .show-desktop,
  .eader-packs-title,
  .upsell-header,
  .header.trojka,
  section.banner.bannerform { display: none; }
  section.form .finish { margin-top: 0; }

  .ui-dialog .ui-dialog-titlebar .ui-dialog-title { text-overflow: clip; white-space: normal; font-size: 20px; }
  #paczkomatyModal .modal-footer a { font-size: 18px; }
}