.drop-down-wrapper {
  position: relative
}

.k-drop-down {
  position: absolute;
  top: 100%;
  padding: 4px 8px;
  box-shadow: 0 0 8px #00000014;
  background-color: #fff;
  width: 100%;
  max-height: 86px;
  overflow: auto
}

.k-drop-down li {
  list-style: none;
  padding: 2px 4px
}

@media (min-width: 768px) {
  .k-drop-down li {
    transition: .2s ease-in-out;
    cursor: pointer
  }

  .k-drop-down li:hover {
    color: green
  }
}

@font-face {
  font-family: Helvetica Neue;
  src: url(HelveticaNeueCyr-UltraLight.eot);
  src: url(HelveticaNeueCyr-UltraLight.eot?#iefix) format("embedded-opentype"), url(HelveticaNeueCyr-UltraLight.woff) format("woff"), url(HelveticaNeueCyr-UltraLight.ttf) format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: Helvetica Neue;
  src: url(HelveticaNeueCyr-Medium.eot);
  src: url(HelveticaNeueCyr-Medium.eot?#iefix) format("embedded-opentype"), url(HelveticaNeueCyr-Medium.woff) format("woff"), url(HelveticaNeueCyr-Medium.ttf) format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: Helvetica Neue;
  src: url(new/helveticaneuecyr-bold.eot);
  src: url(new/helveticaneuecyr-bold.eot?#iefix) format("embedded-opentype"), url(new/helveticaneuecyr-bold.woff) format("woff"), url(new/helveticaneuecyr-bold.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: Helvetica Neue;
  src: url(HelveticaNeueCyr-Black.eot);
  src: url(HelveticaNeueCyr-Black.eot?#iefix) format("embedded-opentype"), url(HelveticaNeueCyr-Black.woff) format("woff"), url(HelveticaNeueCyr-Black.ttf) format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: Helvetica Neue;
  src: url(HelveticaNeueCyr-Light.eot);
  src: url(HelveticaNeueCyr-Light.eot?#iefix) format("embedded-opentype"), url(HelveticaNeueCyr-Light.woff) format("woff"), url(HelveticaNeueCyr-Light.ttf) format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: Helvetica Neue;
  src: url(HelveticaNeue.eot);
  src: url(HelveticaNeue.eot?#iefix) format("embedded-opentype"), url(HelveticaNeue.woff) format("woff"), url(HelveticaNeue.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: inter;
  src: url(Inter-Regular-C05ryuRh.woff) format("woff");
  font-style: normal;
  font-weight: 400
}

@font-face {
  font-family: inter;
  src: url(Inter-Medium-NQOIbdhU.woff) format("woff");
  font-style: normal;
  font-weight: 500
}

@font-face {
  font-family: inter;
  src: url(Inter-Bold-Dm1wsqGD.woff) format("woff");
  font-style: normal;
  font-weight: 700
}

#int-calc {
  margin: 0;
  padding: 0;
  --border-radius: 15px;
  --main-font-size: 15px;
  --label-font-size: 12px;
  --main-font: "inter";
  --main-color: #007FFF;
  --light-main-color: #A7D3FF;
  --dark-main-color: #072D7A;
  --hover-main-color: #3382D2;
  --error-red: #EC3577;
  --white: #fff
}

.int-calc, .int-calc *, .int-calc *:after, .int-calc *:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--main-font), sans-serif;
  font-size: var(--main-font-size)
}

.int-calc {
  max-width: 600px;
  width: 100%;
  border: 1px solid #dce3f0;
  background-color: var(--white);
  border-radius: 4px;
  overflow: hidden;
  padding: 21px 30px;
  position: relative
}

.result-node, #int-calc input[type=text] {
  border-radius: var(--border-radius);
  font-size: var(--main-font-size);
  font-family: var(--main-font), sans-serif;
  font-weight: 700;
  color: var(--main-color);
  border: 2px solid var(--light-main-color);
  padding: 12px 14px;
  max-width: 236px;
  width: 100%;
  outline: none;
  transition: border-color .1s ease-out
}

#int-calc input[type=text]::placeholder {
  color: var(--light-main-color);
  font-weight: 400
}

.inc-calc__scroll-node {
  max-height: 374px;
  overflow-y: auto
}

.int-calc__label--small {
  max-width: 137px;
  width: 100%
}

.int-calc__label-text {
  font-size: var(--label-font-size);
  color: var(--dark-main-color);
  font-weight: 500;
  padding-left: 10px;
  text-transform: uppercase
}

.int-calc__label-text.int-calc__label-text--small-padding-left {
  padding-left: 7px
}

.int-calc-radio-row {
  padding-left: 10px;
  display: flex;
  align-items: center;
  gap: 38px;
  margin-top: 10px
}

.int-calc-radio-row input[type=radio] {
  display: none;
  opacity: 0;
  width: 0;
  height: 0;
  appearance: none
}

.int-calc-radio-row label {
  position: relative;
  padding-left: 20px;
  color: var(--dark-main-color);
  font-size: var(--label-font-size);
  font-weight: 500
}

.int-calc__row label.error-region input {
  padding-left: 30px !important
}

.int-calc__modal-error-text:after, .int-calc__row label.error-region:after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M6%209C6.17%209%206.3126%208.9424%206.4278%208.8272C6.543%208.712%206.6004%208.5696%206.6%208.4V6C6.6%205.83%206.5424%205.6876%206.4272%205.5728C6.312%205.458%206.1696%205.4004%206%205.4C5.8304%205.3996%205.688%205.4572%205.5728%205.5728C5.4576%205.6884%205.4%205.8308%205.4%206V8.4C5.4%208.57%205.4576%208.7126%205.5728%208.8278C5.688%208.943%205.8304%209.0004%206%209ZM6%204.2C6.17%204.2%206.3126%204.1424%206.4278%204.0272C6.543%203.912%206.6004%203.7696%206.6%203.6C6.5996%203.4304%206.542%203.288%206.4272%203.1728C6.3124%203.0576%206.17%203%206%203C5.83%203%205.6876%203.0576%205.5728%203.1728C5.458%203.288%205.4004%203.4304%205.4%203.6C5.3996%203.7696%205.4572%203.9122%205.5728%204.0278C5.6884%204.1434%205.8308%204.2008%206%204.2ZM6%2012C5.17%2012%204.39%2011.8424%203.66%2011.5272C2.93%2011.212%202.295%2010.7846%201.755%2010.245C1.215%209.7054%200.7876%209.0704%200.4728%208.34C0.158001%207.6096%200.000400759%206.8296%207.59493e-07%206C-0.00039924%205.1704%200.157201%204.3904%200.4728%203.66C0.7884%202.9296%201.2158%202.2946%201.755%201.755C2.2942%201.2154%202.9292%200.788%203.66%200.4728C4.3908%200.1576%205.1708%200%206%200C6.8292%200%207.6092%200.1576%208.33999%200.4728C9.07079%200.788%209.7058%201.2154%2010.245%201.755C10.7842%202.2946%2011.2118%202.9296%2011.5278%203.66C11.8438%204.3904%2012.0012%205.1704%2012%206C11.9988%206.8296%2011.8412%207.6096%2011.5272%208.34C11.2132%209.0704%2010.7858%209.7054%2010.245%2010.245C9.7042%2010.7846%209.06919%2011.2122%208.33999%2011.5278C7.6108%2011.8434%206.8308%2012.0008%206%2012ZM6%2010.8C7.34%2010.8%208.47499%2010.335%209.40499%209.405C10.335%208.475%2010.8%207.34%2010.8%206C10.8%204.66%2010.335%203.525%209.40499%202.595C8.47499%201.665%207.34%201.2%206%201.2C4.66%201.2%203.525%201.665%202.595%202.595C1.665%203.525%201.2%204.66%201.2%206C1.2%207.34%201.665%208.475%202.595%209.405C3.525%2010.335%204.66%2010.8%206%2010.8Z'%20fill='%23EC3577'/%3e%3c/svg%3e");
  position: absolute;
  left: 14px;
  top: calc(50% - 6px)
}

.int-calc__modal-error-text:after {
  left: 0
}

.int-calc-radio-row label:before, .int-calc-radio-row label:after {
  content: "";
  position: absolute;
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--light-main-color);
  left: 0;
  bottom: 0
}

.int-calc-radio-row label:after {
  opacity: 0;
  border: none;
  width: 10px;
  height: 10px;
  bottom: 2px;
  left: 2px;
  background-color: var(--main-color);
  transition: opacity .2s ease-out
}

.int-calc-radio-row label:has(input:checked):after {
  opacity: 1
}

.int-calc__row {
  display: flex;
  align-items: flex-start;
  gap: 8px
}

.int-calc__row.int-calc__row-last {
  justify-content: center;
  gap: 55px
}

.int-calc__row-last .int-calc__label:not(.int-calc__label--small) {
  max-width: 232px
}

.int-calc__button-wrapper {
  position: relative;
  width: max-content
}

.int-calc__button-wrapper .button {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  color: var(--white) fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  outline: none;
  border: none;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  cursor: pointer
}

.int-calc__button-wrapper .button:after {
  content: "";
  background-image: url("data:image/svg+xml,%3csvg%20width='19'%20height='19'%20viewBox='0%200%2019%2019'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M17.6429%2010.8571H10.8571V17.6429C10.8571%2018.0028%2010.7142%2018.348%2010.4596%2018.6025C10.2051%2018.857%209.85994%2019%209.5%2019C9.14006%2019%208.79487%2018.857%208.54035%2018.6025C8.28584%2018.348%208.14286%2018.0028%208.14286%2017.6429V10.8571H1.35714C0.997206%2010.8571%200.652012%2010.7142%200.397498%2010.4596C0.142985%2010.2051%200%209.85994%200%209.5C0%209.14006%200.142985%208.79487%200.397498%208.54036C0.652012%208.28584%200.997206%208.14286%201.35714%208.14286H8.14286V1.35714C8.14286%200.997206%208.28584%200.652011%208.54035%200.397498C8.79487%200.142984%209.14006%200%209.5%200C9.85994%200%2010.2051%200.142984%2010.4596%200.397498C10.7142%200.652011%2010.8571%200.997206%2010.8571%201.35714V8.14286H17.6429C18.0028%208.14286%2018.348%208.28584%2018.6025%208.54036C18.857%208.79487%2019%209.14006%2019%209.5C19%209.85994%2018.857%2010.2051%2018.6025%2010.4596C18.348%2010.7142%2018.0028%2010.8571%2017.6429%2010.8571Z'%20fill='white'/%3e%3c/svg%3e");
  width: 19px;
  height: 19px;
  display: block
}

.button.remove-cargo-row {
  border-color: #ec3b3b;
  background-color: #ec3b3b
}

.button.remove-cargo-row:hover {
  border-color: #900808;
  background-color: #900808
}

.int-calc__button-wrapper .button.remove-cargo-row:after {
  content: "";
  background-image: url("data:image/svg+xml,%3csvg%20width='19'%20height='3'%20viewBox='0%200%2019%203'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cline%20y1='1.5'%20x2='19'%20y2='1.5'%20stroke='white'%20stroke-width='3'/%3e%3c/svg%3e");
  width: 19px;
  height: 3px;
  display: block
}

.button.add-cargo-row {
  border-color: #008dcc;
  background-color: #008dcc
}

.button.add-cargo-row:hover {
  border-color: #042e65;
  background-color: #042e65
}

.k-drop-down {
  z-index: 20;
  padding-top: 20px;
  top: calc(100% - 20px);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  background-color: var(--light-main-color);
  max-height: 110px
}

.k-drop-down li {
  padding-left: 14px;
  background-color: transparent;
  transition: color .2s ease-out, background-color .2s ease-in-out;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  position: relative;
  -webkit-line-clamp: 1
}

.k-drop-down li:hover {
  color: var(--white);
  background-color: #007fff66
}

.k-drop-down li:active {
  background-color: var(--main-color)
}

.int-calc__modal {
  position: absolute;
  inset: 0;
  display: none;
  background-color: var(--white);
  z-index: 30;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px
}

.int-calc__modal.show {
  display: flex
}

.int-calc__modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%
}

.int-calc__modal .int-calc__label {
  flex: 0;
  max-width: 510px;
  width: 100%
}

.int-calc__modal .int-calc__label label, .int-calc__modal .int-calc__label input {
  max-width: none !important
}

.int-calc__modal .int-calc__modal-error-text {
  display: none;
  color: var(--error-red);
  font-size: 11px;
  position: relative;
  padding-left: 16px
}

.int-calc__modal label:has(.error) + .int-calc__modal-error-text {
  display: block
}

.int-calc__modal .button {
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border: none;
  border-radius: var(--border-radius) var(--border-radius);
  cursor: pointer;
  margin-top: 26px;
  background-color: var(--error-red);
  max-width: 510px;
  width: 100%;
  padding: 10px;
  transition: background-color .2s ease-in-out
}

.int-calc__modal-close {
  position: absolute;
  right: 16px;
  top: 16px;
  font-size: 32px;
  width: 50px;
  height: 50px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--main-color);
  border-radius: 50%;
  padding: 8px;
  border: 2px solid var(--light-main-color);
  text-align: center;
  cursor: pointer
}

.int-calc__row-wrapper {
  margin-top: 16px
}

.int-calc__row + .int-calc__row {
  margin-top: 16px
}

.int-calc__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  text-transform: uppercase;
  font-size: 12px
}

.int-calc__label label {
  display: block;
  cursor: pointer;
  text-transform: initial
}

.int-calc__label .k-drop-down {
  text-transform: initial
}

.int-calc__label label + label {
  margin-top: 8px
}

.int-calc-radio-row label + label {
  margin-top: 0
}

.int-calc__label label:has(input[name=from]) {
  position: relative;
  z-index: 21
}

.int-calc__label label:has(input[name=from]):before {
  content: "";
  display: block;
  background-image: url("data:image/svg+xml,%3csvg%20width='22'%20height='12'%20viewBox='0%200%2022%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M21%2011L11%202L0.999999%2011'%20stroke='%23A7D3FF'%20stroke-width='2'/%3e%3c/svg%3e");
  width: 20px;
  height: 9px;
  transform-origin: center;
  position: absolute;
  right: 13px;
  top: calc(50% - 4px);
  z-index: 4;
  rotate: 180deg
}

.int-calc__label label:has(+.k-drop-down):before {
  rotate: 0deg !important;
  top: calc(50% - 7px) !important;
  right: 16px !important
}

.int-calc__row:has(.result-node-wrapper) {
  margin-top: 30px
}

.result-node-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: var(--border-radius);
  overflow: hidden
}

.result-node-wrapper > * {
  flex: 1
}

.result-node-wrapper button {
  background-color: var(--error-red);
  outline: none;
  border: none;
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  transition: background-color .1s ease-in-out;
  cursor: pointer;
  height: 46px;
  border-radius: var(--border-radius);
  max-width: 260px
}

.result-node-wrapper button:hover {
  background-color: var(--error-red)
}

.result-node-wrapper button.disabled {
  opacity: .4;
  pointer-events: none
}

.result-node {
  padding: 11px 14px;
  font-weight: 700;
  color: var(--main-color);
  font-size: 30px;
  text-transform: lowercase;
  max-width: none
}

.result-node span {
  font-size: 30px
}

.error-node {
  display: none;
  align-items: center;
  gap: 4px;
  padding-left: 20px;
  margin-top: 13px
}

.error-node.show {
  display: flex
}

.error-node__picture {
  margin-bottom: -2px
}

.error-node__text {
  font-size: 11px;
  color: #000
}

.int-calc__label-volume-weight {
  text-align: center
}

.volume-weight {
  text-align: center;
  margin-top: 10px;
  font-size: 14px
}

.int-calc__label:has(.button) {
  align-self: flex-end
}

.int-calc-cargo-row + .int-calc-cargo-row {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 2px solid var(--light-main-color)
}

.placeNode {
  opacity: 0;
  min-height: 40px;
  margin-top: 24px
}

.show ~ .placeNode {
  display: none
}

.int-calc__switch {
  background-color: #fff;
  padding: 6px 13px 3px;
  border-radius: var(--border-radius);
  border: 2px solid var(--light-main-color);
  transition: box-shadow .2s ease-out
}

.int-calc__switch:hover {
  cursor: pointer;
  border: 1px solid #008dcc;
  box-shadow: 0 0 5px 2px #008dcc
}

.int-calc__row-countries {
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px
}

.int-calc__row-countries.reverse {
  flex-direction: row-reverse
}

.int-calc__row-countries .span-reverse {
  display: none
}

.int-calc__row-countries.reverse .span-reverse {
  display: block
}

.int-calc__row-countries.reverse .span-reverse + span {
  display: none
}

.int-calc__logo {
  text-align: center;
  margin-bottom: -10px
}

.int-calc__logo img {
  height: 60px
}


.int-calc__label label:has(.input-error-length) {
  position: relative;
}


.input-error-length {
  position: absolute;
  text-align: center;
  width: 100%;
  top: calc(100%);
  left: 0;
  font-size: 10px;
  color: red;
  font-weight: 500;
}

.add-cargo-row + .remove-cargo-row {
  right: 50px;
  border-radius: 0;
}

@media (max-width: 570px) {
  #int-calc {
    --border-radius: 12px;
    --label-font-size: 10px;
    --main-font-size: 12px
  }

  #int-calc input[type=text] {
    max-width: none;
    padding: 7px 18px
  }

  .int-calc {
    padding: 16px
  }

  .int-calc__row-countries {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-right: 70px;
    gap: 1px
  }

  .int-calc__row-countries.reverse {
    flex-direction: column-reverse
  }

  .int-calc__switch {
    position: absolute;
    right: 0;
    top: calc(50% - 15px);
    rotate: 90deg;
    transform-origin: center
  }

  .int-calc__label-country {
    max-width: none;
    width: 100%
  }

  .int-calc-cargo-row > .int-calc__row {
    flex-wrap: wrap
  }

  .int-calc__row + .int-calc__row {
    margin-top: 12px
  }

  .int-calc__row-last, .int-calc-cargo-row > .int-calc__row:first-child {
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-gap: 8px !important
  }

  .int-calc__label--small {
    max-width: none
  }

  .int-calc__row-last .int-calc__label:not(.int-calc__label--small) {
    max-width: none
  }

  .int-calc__button-wrapper {
    width: auto
  }

  .int-calc-cargo-row > .int-calc__row:first-child .int-calc__label {
    flex-basis: 90%
  }

  .int-calc__logo {
    max-width: 100%
  }

  .int-calc__logo img {
    height: 45px
  }

  .result-node-wrapper {
    flex-direction: column;
    gap: 10px
  }

  .result-node {
    font-size: 15px;
    padding: 8px 16px
  }

  .result-node span {
    font-size: 16px
  }

  .result-node-wrapper button {
    width: 100%;
    padding: 8px 16px;
    font-size: 16px;
    max-width: none
  }

  .inc-calc__scroll-node {
    max-height: 434px
  }

  .int-calc__modal {
    padding-left: 32px;
    padding-right: 32px
  }

  .int-calc__button-wrapper .button {
    width: 20px;
  }

  .int-calc__button-wrapper .button:after {
    width: 12px;
    height: 12px;
    background-size: cover;
  }
  .int-calc__button-wrapper .button.remove-cargo-row::after {
    width: 12px;
    height: 2px;
    background-size: cover;
  }
  .add-cargo-row + .remove-cargo-row {
    right: 20px;
  }
}