.mb-15 {
  margin-bottom: 15px;
}

@media only screen and (width < 768px) {
  .clearfix-xs {
    clear: both;
  }
}

@media only screen and (768px <= width) {
  .text-right-sm {
    text-align: right;
  }

  .mb-15-sm {
    margin-bottom: 15px;
  }
}

header#header.navbar-compact {
  z-index: 9999;
}

@media only screen and (width <= 768px) {
  div.div-desktop,
  button.btn.btn-desktop {
    display: none !important;
  }
}
@media only screen and (768px <= width) {
  div.div-mobile,
  button.btn.btn-mobile {
    display: none !important;
  }
}

.kivitel-preview {
  display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

@media only screen and (768px <= width) {
  .kivitel-preview {
    flex-wrap: nowrap;
  }
}

.row--calculation_totals {
  background-color: #e0e0e0;
  border: 1px solid #cccccc;
  border-top: unset;
  display: flex;
   flex-flow: column;
  margin-bottom: 0;
  text-align: center;
  padding: 15px;
}
@media only screen and (width < 450px) {
  .row--calculation_totals {
    flex-flow: column;
  }
}
@media only screen and (width < 1200px) {
  .row--calculation_totals {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

.row--calculation_totals h3 {
  font-size: 22px;
  font-weight: 500;
  text-transform: uppercase;
}
.row--calculation_totals h3#calculator-total {
  color: #F74B48;
  margin-bottom: 20px;
  /* margin-bottom: 30px; */
}

/* GENERAL STYLES FOR THE PAGE */
body.product-category {
  background-color: #0000000a;
}
body.product-category .callback {
  background-color: unset;
  display: grid;
   column-gap:30px;
   row-gap: 30px;
   grid-template-columns: 1fr;
  margin-inline: 0;
}
@media only screen and (768px <= width) {
  body.product-category .callback {
   grid-template-columns: repeat(2, 1fr);
  }
}
body.product-category .callback .callback__col {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 25px;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #522c2c), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  width: initial;
}
body.product-category .callback .form-group label.control-label,
body.product-category .callback fieldset legend {
  font-weight: 500;
  font-size: 14px;
  color: #282828;
  text-transform: capitalize;
}
body.product-category .callback input.form-control,
body.product-category .callback select.form-control,
body.product-category .callback textarea.form-control {
  background-color: #ffffff;
  border-radius: 6px;
}
body.product-category .callback .g-recaptcha {
  margin-left: 0;
}
body.product-category .callback .btn.btn-primary {
  background-color: #133F63;
  border-color: #133F63;
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
  transition: opacity 250ms ease, transform 250ms ease;
  text-transform: capitalize;
}
body.product-category .callback #button-callback-form-1-open {
  margin-top: 35px;
}
body.product-category .callback .btn.btn-primary:disabled {
  opacity: .75;
}
body.product-category .callback .btn.btn-primary:active:not(:disabled),
body.product-category .callback .btn.btn-primary:focus:not(:disabled),
body.product-category .callback .btn.btn-primary:hover:not(:disabled) {
  opacity: .9;
  transform: translateY(-3px);
}

body.product-category .panel {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #522c2c), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
body.product-category .panel .panel-heading {
  background-color: #ffffff;
}

body.product-category footer.typefooter-11 {
  background-color: #ffffff;
  border-top: 1px solid #cccccc;
  margin-top: 100px;
}

.calculator .form-group--row-wrapper {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 8px;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #522c2c), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media only screen and (768px <= width) {
  .form-group--row-wrapper.form-group--row-wrapper--2-columns {
    display: grid;
     grid-template-columns: repeat(2, 1fr);
     column-gap: 25px;
  }
}
@media only screen and (width < 768px) {
  .calculator .form-group--row-wrapper {
    padding-inline: 15px;
  }
  .form-group--row-wrapper.form-group--row-wrapper--2-columns .form-group:not(:first-of-type) {
    margin-top: 15px;
  }
}

.calculator .form-group {
  margin-bottom: 0;
  /* align-self: end; */
}

.calculator .form-group select.roof-type {
  display: none !important;
}

.calculator .form-group.disabled .select2 {
  opacity: .5;
}

.calculator .calculation-detail {
  line-height: normal;
}
.calculator .calculation-detail p {
  margin-bottom: 0;
  margin-top: 0;
}

.btn.btn-calc-mode,
.calculator .add-to-cart,
.calculator .offer-request {
  padding: 10px 20px;
  text-wrap: initial;
  transition: opacity 250ms ease;
  width: 100%;
}
.calculator .add-to-cart,
.calculator .offer-request {
  display: flex;
  column-gap: 10px;
  align-items: center;
  justify-content: center;
  text-align: left;
}
.calculator .add-to-cart {
  background-color: #ed1c24;
  border-color: #ed1c24;
}
.calculator .add-to-cart:active,
.calculator .add-to-cart:focus,
.calculator .add-to-cart:hover {
  background-color: #ed1c24;
  border-color: #ed1c24;
  color: #ffffff;
  opacity: .75;
}
.calculator .add-to-cart i,
.calculator .offer-request i {
  margin: 0;
}
.calculator .offer-request {
  background-color: #3B5999;
  border-color: #3B5999;
  color: #ffffff;
  transition: opacity 250ms ease, transform 250ms ease;
}
.calculator .offer-request:active,
.calculator .offer-request:focus,
.calculator .offer-request:hover {
  background-color: #3B5999;
  border-color: #3B5999;
  color: #ffffff;
  opacity: .9;
}
.calculator #calculator-send-offer-request {
  border-radius: 8px;
  font-size: 18px;
  height: 50px;
  margin: 10px 0 15px 0;
  max-width: 350px;
}

.calculator-item .action-button-wrapper {
  display: flex;
   justify-content: stretch;
  column-gap: 25px;
}

.calculator-item .action-button-wrapper button.btn {
  border-radius: 8px;
  transition: opacity 250ms ease, transform 250ms ease;
}
.calculator-item .action-button-wrapper button.btn:disabled {
  opacity: .6;
}
.calculator-item .action-button-wrapper button.btn:hover:not(:disabled) {
  opacity: .9;
  transform: translateY(-3px);
}

.btn.offer-request,
.btn.offer-request:active,
.btn.offer-request:focus,
.btn.offer-request:hover {
  color: #ffffff;
}
.btn.btn-offer-request:disabled {
  opacity: .75;
}

@media only screen and (width < 768px) {
  .calculator-item .action-button-wrapper {
    flex-flow: column;
    row-gap: 15px;
  }
}

/* @media only screen and (width < 450px) {
  .row--calculation_totals--buttons {
    display: flex;
    align-items: center;
    flex-flow: column;
    row-gap: 10px;
  }
}
@media only screen and (450px <= width) {
  .row--calculation_totals--buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 25px;
  }
  .calculator .add-to-cart,
  .calculator .offer-request {
    align-self: stretch;
    max-width: 350px;
    max-width: fit-content;
  }
}
@media only screen and (768px <= width) {
  .calculator .add-to-cart,
  .calculator .offer-request {
    min-width: 220px;
    max-width: 320px;
    max-width: fit-content;
  }
} */

.calculator .product-discount {
  background-color: #F74B48;
  border-radius: 2px 3px 2px 2px;
  color: #ffffff;
  font-size: 12px;
  padding: .6em 1.2em .4em;
  text-transform: uppercase;
}

.calculator .title {
  color: #2a2a2a;
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  margin-top: 0;
  margin-bottom: 0;
}

.calculator .title small {
  color: #2a2a2a;
}

.calculator .subtitle {
  color: #2a2a2a;
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
}
.calculator .subtitle small {
  color: #2a2a2a;
  font-size: 0.8em;
  font-style: italic;
  text-transform: capitalize;
}

@media only screen and (width < 768px) {
  .calculator .title {
    margin-bottom: 4px;
  }

  .calculator .subtitle + p {
    margin-bottom: 0;
  }

  .calculator .subtitle + p + p {
    margin-bottom: 12px;
  }
}


.calculator .row.mode-full .order-detail__price {
  flex-grow: 1;
  font-size: 1.15em;
  font-weight: 500;
  margin-top: 10px;
  text-align: right;
}

.calculator .has-error p,
.calculator .has-error .subtitle small {
  color: #F74B48;
}

.calculator .has-error span.error {
  background-color: transparent;
  color: #F74B48;
  line-height: 1.6em;
}

#calculator-client-details input.form-control,
#calculator-client-details select.form-control,
#calculator-client-details textarea.form-control {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 6px;
}

#calculator-client-details .has-error input.form-control,
#calculator-client-details .has-error select.form-control,
#calculator-client-details .has-error textarea.form-control {
  border-color: #a94442
}

.calculator .calculator-item .has-error input,
.calculator .calculator-item .has-error select,
.calculator .calculator-item .has-error textarea {
  border-color: #a94442;
}

.calculator h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.calculator h3.calculator-item--section-label {
  color: #133F63;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0;
}
.calculator h4.total-price-gross {
  margin-bottom: 0;
}
/* @media only screen and (width < 768px) {
  .calculator h3.calculator-item--section-label {
  .calculator h4.total-price-gross,
    margin-bottom: 12px;
  }
} */

.calculator label,
.calculator legend {
  color: #282828;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0;
}
.calculator .has-error label,
.calculator .has-error legend {
  color: #F74B48;
}

.calculator fieldset label {
  font-weight: 400;
  margin-left: 6px;
}

.calculator legend {
  border-bottom: unset;
}

.calculator sup {
  color: inherit;
  font-size: .8em;
}


.calculator .alert-info,
.calculator .alert-info i {
  background-color: #d9edf7;
}


.calculator .alert-warning,
.calculator .alert-warning i {
  background-color: #fcf8e3;
}

a.lightbox-popup {
  cursor: zoom-in;
  transition: opacity 200ms ease;
}

a.lightbox-popup:hover {
  opacity: .75;
}

.order-detail__select--color {
  float: left;
  height: 26px;
  width: 80px;
  /* width: 35px; */
}
/* @media only screen and (375px <= width < 425px) {
  .order-detail__select--color {
    width: 55px;
  }
}
@media only screen and (425px <= width) {
  .order-detail__select--color {
    width: 80px;
  }
} */

.select2-results__option {
  display: flex;
   align-items: center;
}

.select2-results__option .select2--custom-text {
  display: grid;
  grid-template-columns: auto auto;
}
.select2-results__option span.text-notice {
  color: #F74B48;
  font-size: .9em;
  font-weight: 500;
  margin-left:15px;
}

.order-detail__select--image {
  width: auto;
  margin-top: -6px;
  max-height: 66px;
}

.calculator-items-wrapper.has-full-mode select.roof-type + .select2 .select2-selection {
  min-height: 80px;
}
.calculator-items-wrapper.has-full-mode .order-detail__select--image {
  max-height: 66px;
  margin-top: 0;
}
.calculator-items-wrapper.has-full-mode select.roof-type + .select2 .order-detail__select--text {
  line-height: 68px
}
.calculator-items-wrapper.has-full-mode select.roof-type + .select2 .select2-selection__arrow {
  height: 80px;
}
@media only screen and (768px <= width) {
  /* IF: the color selector is in the first place and the roof type selector is in second place (full-mode) */
  /* .calculator-items-wrapper.has-full-mode .form-group:first-of-type select.roof-color + .select2 .select2-selection {
    min-height: 80px;
  }
  .calculator-items-wrapper.has-full-mode .form-group:first-of-type .order-detail__select--color {
    height: 66px;
  }
  .calculator-items-wrapper.has-full-mode .form-group:first-of-type .select2-selection__placeholder {
    height: 76px;
    line-height: 66px;
  }
  .calculator-items-wrapper.has-full-mode .form-group:first-of-type select.roof-color + .select2 .order-detail__select--text {
    line-height: 68px;
  }
  .calculator-items-wrapper.has-full-mode .form-group:first-of-type select.roof-color + .select2 .select2-selection__arrow {
    height: 80px;
  } */
  /* ENDIF */

  /* IF: the plate thickness selector is in the fourth place and the roof type selector is in third place (full-mode) */
  /* .calculator-items-wrapper.has-full-mode .form-group:nth-of-type(3) select.plate-thickness + .select2 .select2-selection,
  .calculator-items-wrapper.has-full-mode .form-group:nth-of-type(4) select.plate-thickness + .select2 .select2-selection {
    min-height: 80px;
  }
  .calculator-items-wrapper.has-full-mode .form-group:nth-of-type(3) .select2-selection__rendered,
  .calculator-items-wrapper.has-full-mode .form-group:nth-of-type(3) .select2-selection__placeholder,
  .calculator-items-wrapper.has-full-mode .form-group:nth-of-type(4) .select2-selection__rendered,
  .calculator-items-wrapper.has-full-mode .form-group:nth-of-type(4) .select2-selection__placeholder {
    height: 76px;
    line-height: 66px;
  }
  .calculator-items-wrapper.has-full-mode .form-group:nth-of-type(3) select.plate-thickness + .select2 .order-detail__select--text,
  .calculator-items-wrapper.has-full-mode .form-group:nth-of-type(4) select.plate-thickness + .select2 .order-detail__select--text {
    line-height: 68px;
  }
  .calculator-items-wrapper.has-full-mode .form-group:nth-of-type(3) select.plate-thickness + .select2 .select2-selection__arrow,
  .calculator-items-wrapper.has-full-mode .form-group:nth-of-type(4) select.plate-thickness + .select2 .select2-selection__arrow {
    height: 80px;
  } */
  /* ENDIF */

  .calculator-items-wrapper.has-full-mode .form-group--roof-type-row input,
  .calculator-items-wrapper.has-full-mode .form-group--roof-type-row select + .select2 .select2-selection {
    min-height: 80px;
  }
  .calculator-items-wrapper.has-full-mode .form-group--roof-type-row .order-detail__select--color {
    height: 66px;
  }
  .calculator-items-wrapper.has-full-mode .form-group--roof-type-row .select2-selection__rendered,
  .calculator-items-wrapper.has-full-mode .form-group--roof-type-row .select2-selection__placeholder,
  .calculator-items-wrapper.has-full-mode .form-group--roof-type-row .select2-selection__rendered,
  .calculator-items-wrapper.has-full-mode .form-group--roof-type-row .select2-selection__placeholder {
    height: 76px;
    line-height: 66px;
  }
  .calculator-items-wrapper.has-full-mode .form-group--roof-type-row select + .select2 .order-detail__select--text,
  .calculator-items-wrapper.has-full-mode .form-group--roof-type-row select + .select2 .order-detail__select--text {
    line-height: 68px;
  }
  .calculator-items-wrapper.has-full-mode .form-group--roof-type-row select + .select2 .select2-selection__arrow,
  .calculator-items-wrapper.has-full-mode .form-group--roof-type-row select + .select2 .select2-selection__arrow {
    height: 80px;
  }
}

/* @media only screen and (width < 1200px) {
  .calculator-items-wrapper.calculator-items-wrapper--full-width,
  .row--calculation_totals.row--calculation_totals--full-width {
    margin-inline: -15px;
    padding-inline: 15px;
  }
}
@media only screen and (1200px <= width) {
  .calculator-items-wrapper--full-width,
  .row--calculation_totals--full-width {
    width: 100vw !important;
    margin-left: min(0px, calc(0px - calc(100vw - 1170px) / 2)) !important;
  }
  .calculator-items-wrapper--full-width > .row,
  .row--calculation_totals--full-width > .row {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;;
  }
} */

.order-detail__select--color.ral1002,
.kivitelek .kivitel.ral1002 button {
  background-color: rgb(198,166,100);
  border-color: #ffffff;
  color: rgb(000,000,000);
}

.order-detail__select--color.ral1015,
.kivitelek .kivitel.ral1015 button {
  background-color: rgb(230,214,144 );
  border-color: #ffffff;
  color: rgb(000,000,000);
}

.order-detail__select--color.ral3005,
.kivitelek .kivitel.ral3005 button {
  background-color: rgb(94, 33, 41);
  border-color: #ffffff;
  color: rgb(255,255,255);
}

.order-detail__select--color.ral3000,
.kivitelek .kivitel.ral3000 button {
  background-color: rgb(175,043,030);
  border-color: #ffffff;
  color: rgb(255,255,255);
}

.order-detail__select--color.ral3009,
.kivitelek .kivitel.ral3009 button {
  background-color: rgb(100,036,036);
  border-color: #ffffff;
  color: rgb(255,255,255);
}

.order-detail__select--color.ral3011,
.kivitelek .kivitel.ral3011 button {
  background-color: rgb(120,031,025);
  border-color: #ffffff;
  color: rgb(255,255,255);
}

.order-detail__select--color.ral5010,
.kivitelek .kivitel.ral5010 button {
  background-color: rgb(014,041,075);
  border-color: #ffffff;
  color: rgb(255,255,255);
}

.order-detail__select--color.ral6005,
.kivitelek .kivitel.ral6011 button {
  background-color: rgb(47, 69, 56);
  border-color: #ffffff;
  color: rgb(255,255,255);
}

.order-detail__select--color.ral6011,
.kivitelek .kivitel.ral6011 button {
  background-color: rgb(088,114,070);
  border-color: #ffffff;
  color: rgb(255,255,255);
}

.order-detail__select--color.ral6020,
.kivitelek .kivitel.ral6020 button {
  background-color: rgb(046,058,035);
  border-color: #ffffff;
  color: rgb(255,255,255);
}

.order-detail__select--color.ral7011,
.kivitelek .kivitel.ral7011 button {
  background-color: rgb(67, 75, 77);
  border-color: #ffffff;
  color: rgb(255,255,255);
}

.order-detail__select--color.ral7016,
.kivitelek .kivitel.ral7016 button {
  background-color: rgb(041,049,051);
  border-color: #ffffff;
  color: rgb(255,255,255);
}

.order-detail__select--color.ral7024,
.kivitelek .kivitel.ral7024 button {
  background-color: rgb(71, 74, 81);
  border-color: #ffffff;
  color: rgb(255,255,255);
}

.order-detail__select--color.ral8003,
.kivitelek .kivitel.ral8003 button {
  background-color: rgb(115, 66, 34);
  border-color: #ffffff;
  color: rgb(255,255,255);
}

.order-detail__select--color.ral8004,
.kivitelek .kivitel.ral8004 button {
  background-color: rgb(142,064,042);
  border-color: #ffffff;
  color: rgb(255,255,255);
}

.order-detail__select--color.ral8017,
.kivitelek .kivitel.ral8017 button {
  background-color: rgb(069,050,046);
  border-color: #ffffff;
  color: rgb(255,255,255);
}

.order-detail__select--color.ral8019,
.kivitelek .kivitel.ral8019 button {
  background-color: rgb(64, 58, 58);
  border-color: #ffffff;
  color: rgb(255,255,255);
}

.order-detail__select--color.ral9002,
.kivitelek .kivitel.ral9002 button {
  background-color: rgb(231,235,218);
  border-color: #ffffff;
  color: rgb(000,000,000);
}

.order-detail__select--color.ral9005,
.kivitelek .kivitel.ral9005 button {
  background-color: rgb(10,10,10);
  border-color: #ffffff;
  color: #ffffff;
}

.order-detail__select--color.ral9006,
.kivitelek .kivitel.ral9006 button {
  background-color: rgb(165,165,165);
  border-color: #ffffff;
  color: rgb(000,000,000);
}

.order-detail__select--color.ral9007,
.kivitelek .kivitel.ral9007 button {
  background-color: rgb(143,143,143);
  border-color: #ffffff;
  color: rgb(000,000,000);
}

.order-detail__select--color.horganyzott,
.kivitelek .kivitel.horganyzott button,
.order-detail__select--color.verzinkte,
.kivitelek .kivitel.verzinkte button {
  background-color: #bec2c5;
  border-color: #ffffff;
  color: rgb(000,000,000);
}

.order-detail__select--color.diofamintas,
.kivitelek .kivitel.diofamintas button {
  background-image: url('./image/dio_bg.png');
  border-color: #ffffff;
  color: rgb(255,255,255);
}

.calculator .btn-modes {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
}

.calculator .btn-modes .btn {
  width: 50%;
}

.calculator .btn-group > .btn-calc-mode {
  background-color: #fafafa;
  border: 1px solid #bbbbbb;
  border-radius: 2px;
  color: inherit;
  display: flex;
   align-items: center;
   column-gap: 10px;
   justify-content: center;
  flex: 0 1 100%;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 10px 10px;
  text-align: left;
  text-transform: capitalize;
  text-transform: math-auto;
  transition: background 200ms ease;
}
.calculator .btn-group > .btn-calc-mode:hover {
  background-color: #e9e9e9;
}
.calculator .btn-group > .btn-calc-mode.selected {
  background-color: #3B5999;
  color: #ffffff;
}
.calculator .btn-group > .btn-calc-mode span {
  text-wrap: initial;
}

.has-error span.error {
  background-color: #ffffff;
  color: #a94442;
  font-size: 12px;
  font-weight: 500;
  padding: 0;
}


.select2-container {
  width: 100% !important;
}
.select2-container--default .select2-selection--single {
  min-height: 40px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 7px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px;
}

select.roof-color + .select2-container--default .select2-selection--single {
  min-height: 80px;
}
select.roof-color + .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 50px;
  padding-top: 14px;
}
select.roof-color + .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 80px;
}

.order-detail__select--color-image-wrapper {
  display: flex;
  column-gap: 10px;
}
.order-detail__select--color,
.order-detail__select--color-image,
select.roof-color + .select2-container--default .order-detail__select--image {
  height: 60px;
  width: 120px;
  object-fit: cover;
}
@media only screen and (768px <= width) {
  select.roof-color + .select2-container--default {
    display: none;
  }
}
.order-detail__color-image--text {
  display: flex;
  flex-flow: column;
  justify-content: center;
  line-height: 1.3em;
}

.order-detail__select--color + .order-detail__select--text {
  line-height: 54px;
  padding-left: 10px;
}

.select2-container--default .select2-results__option--disabled{
  display: none !important;
  background-color: #eee;
  cursor: not-allowed;
}

.order-detail__hidden-input {
  pointer-events: none;
  position: absolute;
    top: 7px;
    left: 13px;
  z-index: 9;
}

input:disabled + .order-detail__hidden-input {
  opacity: .6;
}

@media only screen and (768px <= width) {
  .form-group--roof-type-row .order-detail__hidden-input {
    top: 27px;
  }
}

.has-discount .order-detail__hidden-input {
  bottom: 19px;
}

.has-discount input.price-both + .order-detail__hidden-input {
  bottom: 29px;
}

.order-detail__hidden-input .order-detail__hidden-input--value {
  opacity: 0;
}

.order-detail__hidden-input .order-detail__hidden-input--unit {
  color: #282828;
}

.offer-request-form {
  /* background-color: #f0f0f0; */
  /* border: 1px solid #cccccc; */
  border-top: unset;
  padding: 0;
  border-radius: 2px;
  /* overflow-x: scroll; */
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 20px 0;
}
@media only screen and (width < 1200px) {
  .offer-request-form {
    margin-left: -15px !important;
    margin-right: -15px !important;
  }
}
.offer-request-form .row {
  margin-bottom: 0 !important;
}

.offer-request-form .form-group textarea {
  height: auto;
  line-height: initial;
}

.offer-request-form .form-group {
  margin-bottom: 25px;
}

.calculator-items-wrapper {
  background-color: #f5f5f5;
  /* border: 1px solid #cccccc; */
  border-radius: 2px 2px 0 0;
  padding: 25px 0;
}

@media only screen and (1200px <= width) {
  .calculator-items-wrapper {
    margin: 0;
    padding: 15px 0;
  }
}

/* .calculator-items {
  padding: 0;
} */

.calculator-item {
  display: grid;
  padding: 0;
}
.calculator-item:not(:first-child) {
  padding-top: 15px;
}
@media only screen and (width < 768px) {
  .calculator-item {
    row-gap: 10px;
  }
}
@media only screen and (768px <= width) {
  .calculator-item:not(:first-child) {
    padding-top: 25px;
  }
}
.calculator-new-size {
  margin: 0;
  position: relative;
}
.calculator-new-size {
  padding: 15px 0 10px;
}
@media only screen and (768px <= width) {
  .calculator-item {
    align-items: flex-start;
    column-gap: 30px;
    /* grid-template-columns: 6fr 7fr 4fr; */
    grid-template-columns: 4fr 7fr;
    /* grid-template-columns: 1fr 2fr; */
    padding: 0 0;
    /* padding: 35px 25px; */
  }
  .calculator-new-size {
    padding: 25px 25px 10px;
  }
}
@media only screen and (992px <= width < 1200px) {
  h4.order-details--title {
    padding-inline: 15px;
  }
  .calculator-item {
    padding-inline: 15px;
  }
}
@media only screen and (1200px <= width) {
  h4.order-details--title {
    padding-inline: 0;
    /* margin-inline: -15px; */
  }
  .calculator-item {
    padding-inline: 0;
  }
}
.calculator-item:nth-child(even) {
  background-color: #e0e0e0;
}

.calculator-item .calculator-item--image {
  /* align-self: center; */
  /* margin-top: 20px; */

  display: flex;
    flex-flow: column;
    row-gap: 25px;
}
.white-bg-with-drop-shadow {
  width: 100%;

  background-color: #ffffff;
  padding: 25px;
  border-radius: 8px;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.calculator-item table.table.calculator-item--calcdata th,
.calculator-item table.table.calculator-item--calcdata td {
  border-top: 0;
  font-size: 14px;
  padding-block: 4px;
}

.calculator-item table.table thead tr > th {
  background-color: transparent;
}

.calculator-item img.roof-image {
  display: block;
  margin: 0 auto 15px;
  /* max-width: 250px; */
  max-width: 300px;
  width: 115%;
}
@media only screen and (width < 768px) {
  .calculator-item .calculator-item--image {
    text-align: center;
  }
  .calculator-item img.roof-image {
    max-width: 180px;
  }
  .calculator-item img.roof-image.roof-image--mobile {
    margin-bottom: 10px;
    max-width: unset;
    object-fit: cover;
    width: 100%;
  }
}
@media only screen and (width < 500px) {
  .calculator-item img.roof-image.roof-image--mobile {
    max-height: 200px;
  }
}
@media only screen and (500px <= width < 768px) {
  .calculator-item img.roof-image.roof-image--mobile {
    max-height: 300px;
  }
}
/* @media only screen and (768px <= width) {
  .calculator-item .calculator-item--image {
    position: sticky;
    top: 130px;
  }
} */

.calculator-item .calculator-item--inputs {
  display: grid;
   grid-template-rows: max-content;
   grid-template-columns: 1fr;
   row-gap: 25px;
}
@media only screen and (768px <= width) {
  .calculator-item .calculator-item--inputs {
    /* display: grid; */
     /* grid-template-columns: repeat(2, 1fr); */
     /* grid-template-columns: 1fr; */
     /* grid-template-columns: calc(50% - 10px) calc(50% - 10px); */
    display: flex;
     flex-flow: column;
     column-gap: 20px;
  }

  .calculator-item .calculator-item--inputs .calculator-item--full-width {
    display: inherit; /* Inheriting grid child status */
    grid-column-start: 1;
    grid-column-end: 3;
  }
}

.calculator-item .calculation-item--step-label {
  color: #F74B48;
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 12px;
  opacity: .9;
}

.calculator-item--coating-buttons-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 25px;
}
.calculator-item--coating-button-wrapper {
  display: inherit;
  width: 100%;
}
@media only screen and (width < 500px) {
  .calculator-item--coating-buttons-wrapper {
    column-gap: 5px;
  }
}

.calculator-item--coating-buttons-wrapper button,
.calculator-item--coating-buttons-wrapper button:active,
.calculator-item--coating-buttons-wrapper button:disabled,
.calculator-item--coating-buttons-wrapper button:focus,
.calculator-item--coating-buttons-wrapper button:hover {
  background-color: #FFFFFF99;
  border: 2px solid #CCCCCC;
  border-radius: 8px;
  color: initial;
  display: grid;
   align-content: center;
   grid-template-rows: min-content;
   row-gap: 8px;
  padding-block: 15px;
}
.calculator-item--coating-buttons-wrapper button:not(.disabled):active,
.calculator-item--coating-buttons-wrapper button:not(.disabled):focus,
.calculator-item--coating-buttons-wrapper button:not(.disabled):hover {
  background-color: #FFFFFF99;
  border: 2px solid #CCCCCC;
  box-shadow: none;
  color: initial;
}
.calculator-item--coating-buttons-wrapper button:not(.disabled).active {
  background-color: #FFFFFF99;
  border: 2px solid #F74B48;
  box-shadow: none;
  color: #F74B48;
}
.calculator-item--coating-buttons-wrapper button.disabled {
  opacity: .6;
}
.calculator-item--coating-buttons-wrapper span.disabled-text {
  color: #F74B48;
  font-size: 12px;
  text-wrap: auto;
}

.calculator-item--coating-buttons-wrapper button span.disabled-text {
  display: none !important;
}
@media only screen and (width < 768px) {
  .calculator-item--coating-buttons-wrapper span.disabled-text {
    font-size: 11px;
  }
}
@media only screen and (768px <= width) {
  .calculator-item--coating-buttons-wrapper button {
    grid-template-columns: 40px auto;
    align-items: center;
    justify-content: center;
  }
}


.calculator-item--form-group-color .button--photoswipe {
  background-color: #FFFFFF99;
  border: 1px solid #cccccc;
  border-radius: 0 2px 2px 0;
  color: #F74B48;
  height: 80px;
  padding: 10px 10px 0;
  text-align: center;
  margin-left: -3px;
  width: 59px;
  /* margin-left: 0px; */
  /* width: 60px; */
}

.calculator-item--form-group-color .button--photoswipe:active,
.calculator-item--form-group-color .button--photoswipe:focus,
.calculator-item--form-group-color .button--photoswipe:hover {
  background-color: #FFFFFFAA;
  color: #333;
}

.calculator-item--form-group-color:not(.has-color) .button--photoswipe {
  display: none;
}

@media only screen and (width < 768px) {
  .calculator-item--form-group-color.has-color .select2-container {
    max-width: calc(100% - 60px);
  }
  .calculator-item--form-group-color.has-color .select2-container .select2-selection {
    border-right: 0;
  }
}
@media only screen and (768px <= width ) {
  .calculator-item--form-group-color .button--photoswipe {
    display: none;
  }
}

.calculator-item--color-buttons-wrapper {
  border: 1px solid transparent;
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.calculator-item--color-buttons-wrapper.has-error {
  border-color: #F74B48;
}
.calculator-item--color-buttons-wrapper.has-error + span.error {
  background-color: transparent;
  color: #F74B48;
  line-height: 1.6em;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
}
@media only screen and (500px <= width < 992px) {
  .calculator-item--color-buttons-wrapper {
  grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (992px <= width < 1200px) {
  .calculator-item--color-buttons-wrapper {
  grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (1200px <= width) {
  .calculator-item--color-buttons-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
}

.calculator-item--color-buttons-wrapper img {
  width: 100%;
  /* height: 60px; */
  height: 70px;
  object-fit: cover;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

.calculator-item--color-buttons-wrapper button {
  background: transparent;
  border: 4px solid transparent;
  border-radius: 8px;
  display: grid;
  color: initial;
  padding: 5px;
  position: relative;
  margin-inline: -5px;
}
.calculator-item--color-buttons-wrapper button.active,
.calculator-item--color-buttons-wrapper button:active,
.calculator-item--color-buttons-wrapper button:focus,
.calculator-item--color-buttons-wrapper button:hover {
  background-color: #FFFFFF99;
  border: 4px solid #F74B48;
  box-shadow: none;
  color: initial;
}
.calculator-item--color-buttons-wrapper button.active {
  color: #F74B48;
}
.calculator-item--color-buttons-wrapper button:disabled {
  opacity: .6;
}
.calculator-item--color-buttons-wrapper button span.bilka-gallery-icon {
  position: absolute;
   top: 20px;
   left: 0;
   right: 0;
}
.calculator-item--color-buttons-wrapper button:not(.active) span.bilka-gallery-icon {
  opacity: 0;
}
.calculator-item--color-buttons-wrapper button span.bilka-gallery-icon .material-icons {
  color: #ffffff;
  font-size: 35px;
  text-shadow: -1px -1px 0 #00000066,  /* Top-left shadow */
                1px -1px 0 #00000066,  /* Top-right shadow */
               -1px  1px 0 #00000066,  /* Bottom-left shadow */
                1px  1px 0 #00000066;  /* Bottom-right shadow */
  transition: opacity 250ms ease;
}
@media only screen and (width < 768px) {
  .calculator-item--color-buttons-wrapper {
    display: none;
  }
}

.calculator-item--roof-type-buttons-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 25px;
}
@media only screen and (width < 500px) {
  .calculator-item--roof-type-buttons-wrapper {
    column-gap: 5px;
  }
}

.calculator-item--roof-type-buttons-wrapper button {
  background-color: #FFFFFF99;
  border: 2px solid #CCCCCC;
  color: initial;
  display: flex;
   align-items: center;
   flex-flow: column;
   justify-content: center;
   row-gap: 10px;
  padding-block: 5px;
}
.calculator-item--roof-type-buttons-wrapper button.active,
.calculator-item--roof-type-buttons-wrapper button:active,
.calculator-item--roof-type-buttons-wrapper button:focus,
.calculator-item--roof-type-buttons-wrapper button:hover {
  background-color: #FFFFFF99;
  border: 2px solid #F74B48;
  box-shadow: none;
  color: initial;
  opacity: 1;
}
.calculator-item--roof-type-buttons-wrapper button.active {
  color: #F74B48;
}
.calculator-item--roof-type-buttons-wrapper button:disabled {
  opacity: .6;
}
.calculator-item--roof-type-buttons-wrapper button img {
  max-height: 60px;
}
.calculator-item--roof-type-buttons-wrapper span.button-text {
  text-wrap: auto;
}
.calculator-item--roof-type-buttons-wrapper button:not(:disabled) span.disabled-text {
  display: none;
}
@media only screen and (width < 768px) {
  .calculator-item--roof-type-buttons-wrapper span.disabled-text {
    font-size: 11px;
  }
}
@media only screen and (768px <= width) {
  .calculator-item--roof-type-buttons-wrapper button {
    display: grid;
    grid-template-columns: auto auto;
    text-align: left;
    column-gap: 10px;
  }
}

.calculator-item .calculator-item--details {
  display: grid;
   grid-template-rows: max-content;
   grid-template-columns: 1fr;
   row-gap: 20px;
}
@media only screen and (width < 768px) {
  .calculator-item .calculator-item--details {
    column-gap: 15px;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-template-columns: 9fr 10fr;
  }
}

.calculator-item button.calculator-delete-item {
  background-color: transparent;
  color: #F74B48;
  font-size: 12px;
  margin: -5px 15px -10px -4px;
  padding: 0;
  justify-self: flex-end;
}
.calculator-item button.calculator-delete-item.calculator-delete-item--reset {
  color: #3B5999;
}
@media only screen and (width < 768px) {
  .calculator-item button.calculator-delete-item {
    justify-self: right;
    margin: 0 -4px -15px 15px;
  }
}
@media only screen and (768px <= width) {
  .calculator-item button.calculator-delete-item {
    font-size: 13px;
  }

  .calculator-item .calculator-item--inputs > .calculator-delete-item.calculator-item--full-width {
    display: flex;
     align-items: center;
  }
}

.calculator-item h5 {
  margin-bottom: 6px;
}

.calculator-items .select2-container--default .select2-selection--single,
.calculator-items .calculator-item input,
.calculator-items .calculator-item input:focus,
.calculator-items .calculator-item input:hover,
.calculator-items .calculator-item select,
.calculator-items .calculator-item select:focus,
.calculator-items .calculator-item select:hover {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 6px;
  transition: opacity 200ms ease;
}

.calculator-items .calculator-item input:disabled,
.calculator-items .calculator-item input:disabled + .order-detail__hidden-input.disabled,
.calculator-items .calculator-item select:disabled,
.calculator-items .calculator-item select:disabled + .order-detail__hidden-input.disabled {
  opacity: .6;
}

.select2-container--default .select2-selection--single:hover,
.calculator-item input:hover {
  opacity: .8;
}

/* Hide arrows from numeric input fields */
.calculator-item input[type="number"] {
  border-radius: 6px;
  font-size: 14px;
  height: auto;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.calculator-item input[type="number"]::-webkit-inner-spin-button,
.calculator-item input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
}

.calculator-item .unit-price {
  font-size: 12px;
  line-height: 20px;
  margin: 0;
}
@media only screen and (375px <= width) {
  .calculator-item .unit-price {
    font-size: 14px;
  }
}
.calculator-item span.text-sale {
  color: #F74B48;
  font-weight: 500;
}

.calculator-item p.total-price {
  color: #F74B48;
  font-size: 18px;
}
.calculator-item p.total-price del {
  color: #333333;
  font-size: 13px;
}

@media only screen and (768px <= width) {
  .row.calculator-new-size > [class^="col-"] {
    padding-inline: 30px 0;
  }
}

button.button-add-new-item {
  display: inherit;
}
@media only screen and (768px <= width) {
  .calcdata--wrapper,
  button.button-add-new-item {
    grid-column-start: 1;
    grid-column-end: 3;
  }
}

button.button-add-new-item,
button#button-add-new-size {
  align-self: flex-end;
  background-color: #133F63;
  border-radius: 8px;
  text-transform: initial;
  /* width: 100%; */
  width: 220px;
  width: fit-content;
  transition: background-color 250ms ease, opacity 250ms ease, transform 250ms ease;
}
button.button-add-new-item:hover,
button#button-add-new-size:hover {
  background-color: #133F63;
  opacity: .85;
  transform: translateY(-3px);
}
@media only screen and (width < 768px) {
  button.button-add-new-item {
    margin-block: -5px 5px;
  }
}

button.button-add-new-item.button-add-new-item--item-added,
button.button-add-new-item.button-add-new-item--item-added:active,
button.button-add-new-item.button-add-new-item--item-added:focus,
button.button-add-new-item.button-add-new-item--item-added:hover {
  background-color: #336313;
}

button.button-add-new-item.button-add-new-item--item-added i {
  font-size: .8em;
  margin-right: 3px;
  margin-top: 5px;
}

.pswp__button--custom .material-icons {
  font-size: 32px;
  color: white;
  line-height: 44px;
  transition: color 0.2s ease-in-out;
}

.pswp__button--custom:hover .material-icons {
  color: #F74B48;
}

.pswp__button--custom {
  cursor: pointer;
  width: 44px;
  height: 44px;
  z-index: 10;
}

.pswp__button--custom-prev {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.pswp__button--custom-next {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

@media only screen and (768px <= width) {
  .pswp__button--custom-prev {
    left: calc(100% / 2 - 375px);
  }
  .pswp__button--custom-next {
    right: calc(100% / 2 - 375px);
  }
}

.pswp__button--custom-close {
  position: absolute;
  right: 10px;
  top: 10px;
}

.pswp__custom-caption {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  padding: 10px 15px;
  text-align: center;
  color: #ccc;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid #ffffff3A;
  border-radius: 2px;
  z-index: 10;
  transition: width 0.3s ease-out;
  width: 100%;
  max-width: 600px;
}

.pswp__custom-caption strong {
  font-size: 16px;
  font-weight: bold;
  color: white;
  display: block;
  margin-bottom: 4px;
}

.pswp__img--placeholder {
  background-color: transparent !important;
}

.calculator-item--image > img.product-image {
  margin-bottom: 10px;
}

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

/* table.calculator-item--list {
  background-color:#f0f0f0;
} */

table.calculator-item--calcdata thead th,
table.calculator-item--list thead th {
  padding-inline: 0;
  color: #333333;
  text-align: left;
}

table.calculator-item--list thead th {
  border-bottom: unset;
}

/* table.calculator-item--list > tbody > tr > td {
  vertical-align: middle;
} */

table.calculator-item--list tbody tr:not(.current):not(.new-item):first-child th,
table.calculator-item--list tbody tr:not(.current):not(.new-item):first-child td {
  border-top: 1px solid #dddddd;
}

table.calculator-item--list > tbody > tr.new-item td {
  background-color: #ffbf005e;
  border-top: 0;
  border-radius: 8px;
  font-weight: 500;
}

table.calculator-item--list > tbody > tr.current th,
table.calculator-item--list > tbody > tr.current td {
  border-bottom: 1px solid #F74B48;
  border-top: 1px solid #F74B48;
}
table.calculator-item--list > tbody > tr.current th:first-child,
table.calculator-item--list > tbody > tr.current td:first-child {
  border-left: 1px solid #F74B48;
}
table.calculator-item--list > tbody > tr.current th:last-child,
table.calculator-item--list > tbody > tr.current td:last-child {
  border-right: 1px solid #F74B48;
}

table.calculator-item--list img.calculator-item--thumbnail {
  max-width: 84px;
}

table.calculator-item--list button.calculator-item--button {
  border-color: transparent;
  border-radius: 8px;
  max-height:32px;
  margin-right: -8px;
  padding: 5px;
  transition: opacity 250ms ease, transform 250ms ease;
}
table.calculator-item--list button.calculator-item--button:hover {
  opacity: .75;
  transform: translateY(-2px);
}
table.calculator-item--list button.calculator-item--button.calculator-item--edit {
  background-color: #133F63;
  color: #ffffff;
}
table.calculator-item--list button.calculator-item--button.calculator-item--delete {
  background-color: #ed1c24;
  color: #ffffff;
  margin-top: 3px;
}
table.calculator-item--list button.calculator-item--button span.material-icons {
  font-size: 18px;
}

table.calculator-item--list .calculator-item--price {
  display: inline-block;
  color: #ed1c24;
  font-weight: 600;
  font-size: 1.4em;
  margin-bottom: 5px;
}
table.calculator-item--list .calculator-item--price-net {
  color: #333333;
  font-size: 1.1em;
  font-weight: 500;
}
table.calculator-item--list .calculator-item--txt-secondary,
table.calculator-item--list .calculator-item--price--title {
  font-size: .9em;
}
table.calculator-item--list .calculator-item--price-title {
  font-weight: 500;
}

table.table-borderless th,
table.table-borderless td {
  border: 1px solid transparent !important;
}

.calculator--total-price-wrapper {
  display: flex;
   align-items: center;
   justify-content: space-between;
}
.calculator--total-price-wrapper h4.total-price-gross {
  font-size: 20px;
}
.calculator--total-price-wrapper h4.total-price-gross small {
  font-size: .75em;
}
@media only screen and (width < 425px) {
  .calculator--total-price-wrapper > h3.calculator-item--section-label,
  .calculator--total-price-wrapper h4.total-price-gross {
    font-size: 15px;
  }
}