body
{
    background: #fafafa;
    padding-top: 20px;
}
body, h1, h2, h3, h4, h5, h6, p, .dropdown-menu > li > a
{
    color: #333;
}
.order-form
{
    max-width: 700px;
    margin: 0 auto;
    padding: 20px 20px 0 20px;
}
.company-details, .voucher-details, .ic_dph_container
{
    display: none;
}
.price-eur
{
    display: none;
}
.form-header
{
    width: 100%;
    background: #eee;
    padding: 20px;
    text-align: center;
}
.addon-header
{
    padding: 10px;
    margin: 15px -20px 15px -20px;
    width: calc(100% + 40px);
}
.addon-header + .item-container
{
    margin-bottom: -15px;
}
.form-field
{
    width: 100%;
    background: #fafafa;
    padding: 20px;
}
.form-header h2
{
    margin-bottom: 0;
}
.item-container
{
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}
.item-name
{
    flex-grow: 1;
}
.item-details
{
    display: flex;
    align-items: center;
    gap: 20px;
}
.item-quantity
{
    display: flex;
    align-items: center;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .12);
    border-radius: 25px;
    overflow: hidden;
    background: #fff;
}
.quantity-btn
{
    height: 40px;
    width: 40px;
    color: #666;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}
.quantity-btn:hover
{
    background: #f5f5f5;
}
.form-field .quantity-input
{
    margin-bottom: 0;
    border: none;
    box-shadow: none;
    width: 34px;
    padding: 20px 0;
    text-align: center;
}
.item-price
{
    font-weight: bold;
    font-size: 20px;
}
.form-row
{
    display: flex;
}
.form-row div
{
    flex-grow: 1;
}
.form-field input
{
    height: 38px;
    line-height: 38px;
    padding: 0 15px;
    color: #333 !important;
}
.form-field .input-error, .form-field .input-error:focus
{
    border: 1px solid #f00;
}
.field-error, .format-error
{
    display: none;
    color: #f00;
    margin-top: -10px;
    margin-bottom: 10px;
}
input:-webkit-autofill, input:-webkit-autofill:focus
{
    -webkit-text-fill-color: #333 !important;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.12) !important;
    background: #fff;
}
.form-row label
{
    flex-basis: 110px;
    line-height: 38px;
    margin-bottom: 0;
}
input[type="checkbox"], .checkbox-label
{
    cursor: pointer;
}
input[type="checkbox"]
{
    width: 20px;
    height: 20px;
    margin-right: 10px;
    box-shadow: none;
    margin-top: 2px;
    float: left;
}
.checkbox-label a:hover
{
    text-decoration: underline;
}
.bootstrap-select.btn-group button, .bootstrap-select.btn-group .dropdown-toggle .filter-option
{
    height: 38px;
    line-height: 38px;
    color: #333;
}
.bootstrap-select.btn-group button
{
	padding-left: 55px;
    padding-top: 2px;
}
.flag-img
{
	position: absolute;
    height: 24px;
    left: 10px;
    top: 7px;
}
.bootstrap-select .dropdown-menu li a .flag-img
{
	position: absolute;
	height: 24px;
	left: 0px;
	top: 5px;
}
.bootstrap-select .dropdown-menu li a span.text
{
	padding-left: 35px;
}
button[type="submit"]
{
    background: rgb(11,169,63) !important;
    padding: 10px;
    color: #fff !important;
    width: 100%;
    max-width: 300px;
    margin: 20px auto;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(21, 138, 201, 0.15);
    transition: .2s ease-in-out;
    display: block;
}
button[type="submit"]:hover
{
    transform: translateY(-3px);
    box-shadow: 0 2px 8px rgba(102, 103, 107, .35);
}
@media (max-width: 600px)
{
    .form-field
    {
        padding: 20px 0;
    }
    .form-row
    {
        flex-wrap: wrap;
    }
    .item-list .item-container
    {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .item-list .item-details
    {
        width: 100%;
        justify-content: end;
    }
}
.radio-select-container .more-payments, .radio-select-container .sk-payments
{
    display: none;
}
.radio-select-container label
{
    width: 100%;
    background: #fff;
    padding: 10px 16px;
	position: relative;
	cursor: pointer;
}
.payment-select.radio-select-container label
{
    display: flex;
    flex-wrap: wrap;
}
.radio-select-container img
{
	min-width: 100px;
    width: 100px;
	height: 40px;
    margin: 10px 15px;
    object-fit: contain;
	align-self: center;
}
.radio-select-container label > span
{
    align-self: center;
}
.radio-select-container input[type="radio"]
{
    margin: 0;
}
.radio-select-container .show-more-payments
{
    color: #1589C9;
    cursor: pointer;
    margin-top: 10px;
    display: inline-block;
}
.radio-select-container .show-more-payments .fa-solid
{
	vertical-align: middle;
}
@media (max-width:1199px)
{
    .desktop-only
    {
        display: none;
    }
    .radio-select-container label
    {
        padding: 4px 16px;
    }
}

/* custom radio button */
.radio-select-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
  }
  
/* Create a custom radio button */
.radio-select-container .checkmark
{
	position: relative;
	height: 25px;
	width: 25px;
    min-width: 25px;
	background-color: #eee;
	border-radius: 50%;
}
  
/* On mouse-over, add a grey background color */
.radio-select-container label:hover
{
	background-color: #f6f6f6;
}
  
  /* When the radio button is checked, add a blue background */
.radio-select-container label input:checked ~ .checkmark
{
	background-color: #1589C9;
}
  
/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-select-container .checkmark:after
{
	content: "";
	position: absolute;
	display: none;
}
  
/* Show the indicator (dot/circle) when checked */
.radio-select-container input:checked ~ .checkmark:after
{
	display: block;
}
  
/* Style the indicator (dot/circle) */
.radio-select-container .checkmark:after
{
	top: 8px;
	left: 8px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #fff;
}

@media (max-width:450px)
{
	.radio-select-container img
	{
		min-width: 60px;
		width: 60px;
		margin: 10px;
	}
}
.order-logo
{
    padding: 15px;
    text-align: center;
}
.footer-bottom-section
{
    margin-top: 30px;
}
.order-logo img
{
    margin: auto;
    max-width: 300px;
}
.payment-page
{
    padding-top: 50px;
    text-align: center;
}
.payment-page .custom-text-container
{
    text-align: left;
    max-width: 700px;
    margin: auto;
    padding: 20px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #eee;
}
.fa-check-circle
{
    font-size: 124px;
    color: #0AA93F;
    margin-top: 30px;
    margin-bottom: 50px;
}
.fa-times-circle
{
    font-size: 124px;
    color: #de5959;
    margin-top: 30px;
    margin-bottom: 50px;
}
.item-summary
{
    display: flex;
    max-width: 700px;
    margin: auto;
    margin-bottom: 20px;
}
.transfer-info .payment-box
{
    display: flex;
    max-width: 700px;
    margin: auto;
    background: #fff;
    padding: 20px 30px;
    border: 1px solid #ddd;
}
.transfer-info .button
{
    padding: 10px 50px;
    margin-top: 10px;
}
@media(max-width:768px)
{
    .transfer-info .payment-box
    {
        flex-direction: column;
    }
    .item-summary
    {
        flex-direction: column;
        padding: 0 20px;
    }
}
.voucher-details input[type="text"] {
	width: 200px;
}
.voucher-details button {
	margin-left: 10px;
	margin-bottom: 10px;
    background: #1589C9;
    width: 100px;
    border-radius: 5px;
	height: 38px;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .12);
	transition: .2s ease-in-out;
}
.voucher-details button:hover {
	transform: translateY(-3px);
}
@media(max-width:600px) {
	.voucher-details input[type="text"], .voucher-details button {
		width: 100%;
		margin-left: 0;
	}
}
.voucher-price
{
    display: none;
}
.voucher-price-discount h4 {
    color: rgb(11,169,63);
}

/* Doprava */
.pickup-select-container {
    width: 100%;
}
.pickup-select-container > div {
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 10px;
}
.pickup-point-container {
    display: flex;
}
.pickup-point-container .pickup-point-icon {
    width: 25px;
    height: 25px;
    margin-right: 15px;
    font-size: 24px;
    text-align: center;
    vertical-align: top;
    color: #0AA93F;
}
.pickup-point-container .pickup-point-name {
    margin-bottom: 0;
}
.pickup-point-container .open-packeta-widget {
    margin-left: auto;
}
.pickup-point-container .open-packeta-widget:hover {
    text-decoration: underline;
}
.packeta-error {
    margin-left: 10px;
    margin-top: 10px;
}
.packeta-price, .packeta-hd-price, .shipping-address-container {
    display: none;
}
.shipping-address-container {
    background: #fff;
    padding: 20px 20px 1px;
}
.shipping-address-fields {
    margin-bottom: 20px;
}
.shipping-address-container .checkbox-label {
    margin-bottom: 0;
}