#root,
.App,
body,
html {
    height: 100%
}

.App {
    align-items: center;
    /*background-image: url(../../static/media/bg.4e6d94dce14d416f8773.jpg);*/
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    overflow: auto
}

.App .app__container .app__calculator {
    background-color: #f6f6f6;
    display: flex;
    flex-direction: column;
    max-width: 100%
}

.App .app__container footer {
    align-items: center;
    background-color: #f6f6f6;
    color: #555;
    display: flex;
    flex-direction: column;
    font-size: .9rem;
    padding: 1.5rem 0 0
}

.App .app__container footer .app__copyright,
.App .app__container footer .app__links {
    margin: 0 0 1.5em;
    padding: 0 1rem;
    text-align: center
}

.App .app__container footer .app__links a {
    border-right: 1px solid #787b81;
    color: #54565b;
    font-weight: 500;
    margin: 0 0 0 .25em;
    padding: 0 .5em 0 0;
    text-decoration: none
}

.App .app__container footer .app__links a:hover {
    text-decoration: underline
}

.App .app__container footer .app__links a:last-child {
    border-right: none;
    padding: 0
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0
}

@media screen and (min-width:768px) {
    .App .app__container {
        margin: 1.5rem
    }

    .App .app__container .app__calculator {
        border-radius: 3px
    }

    footer {
        border-radius: 0 0 3px 3px
    }
}

@media screen and (min-width:992px) {
    .App .app__container {
        flex-direction: row;
        height: calc(100% - 80px - 4.5rem);
        margin: 1.5rem;
        max-width: 1600px
    }

    .App .app__container .app__calculator {
        flex-direction: row;
        min-height: 100%
    }

    .App .app__container footer {
        align-items: center;
        background-color: transparent;
        color: #555;
        display: flex;
        flex-direction: row;
        font-size: .9rem;
        justify-content: space-between;
        padding: 0
    }

    .App .app__container footer .app__copyright,
    .App .app__container footer .app__links {
        margin: 1em .25em;
        padding: 0;
        text-align: left
    }

    .App .app__container footer .app__copyright {
        color: #fff;
        font-weight: 600
    }

    .App .app__container footer .app__links a {
        border-right: 1px solid #fff;
        color: #fff;
        font-weight: 600;
        margin: 0 0 0 .5em;
        padding: 0 .75em 0 0
    }
}

.calc__container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    padding: 2rem;
    width: 100%
}

.calc__container .calc__text {
    margin: 0 0 1.5em
}

.calc__container .calc__text h1 {
    font-size: 26px;
    letter-spacing: 1.8px
}

.calc__container .calc__text p {
    color: #54565b;
    margin: 0
}

.calc__container .calc__info-panel {
    background-color: #e3e2e1;
    margin: 0 0 1.75em;
    padding: .75rem
}

@media screen and (min-width:992px) {
    .calc__container .calc__info-panel {
        margin: 0 2em 1.75em 0
    }
}

.calc__container .calc__info-panel p {
    color: #54565b;
    line-height: 1.2;
    margin: .25em 0
}

.calc__container .calc__input form {
    -webkit-columns: 1;
    column-count: 1;
    display: block;
    min-width: 100px;
    width: 100%
}

.calc__container .calc__results h1 {
    color: #54565b;
    font-size: 20px;
    margin: 0 0 1em
}

.calc__container .calc__results .calc__boxes {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    padding: 0 0 1em
}

.calc__container .calc__results .calc__boxes .calc__box {
    background-color: #0076c0;
    height: 150px;
    position: relative;
    width: 150px
}

.calc__container .calc__results .calc__boxes .calc__box p {
    color: #fff;
    margin: .75em 0;
    padding: 0 1em
}

.calc__container .calc__results .calc__boxes .calc__box p:first-of-type {
    font-size: .9em;
    left: 0;
    position: absolute;
    top: 0
}

.calc__container .calc__results .calc__boxes .calc__box p:last-of-type {
    bottom: 0;
    font-size: 1.1rem;
    font-weight: 600;
    position: absolute;
    right: 0;
    word-break: break-all
}

@media screen and (min-width:992px) {
    .calc__container {
        flex: 2 1;
        padding: 2rem 0 2rem 2rem
    }

    .calc__container .calc__results .calc__boxes {
        justify-content: flex-start;
        padding: 0 2rem 0 0
    }

    .calc__container .calc__input form {
        -webkit-columns: 2;
        column-count: 2;
        -webkit-column-gap: 2rem;
        column-gap: 2rem;
        padding: 0 2rem 1rem 0
    }
}

.validated-input {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    color: #54565b;
    display: block;
    font-size: .9rem;
    margin: 0 0 .5em;
    page-break-inside: avoid;
    position: relative
}

.validated-input .validated-input__title {
    display: block;
    line-height: 1.2rem;
    margin: 0 0 .25rem
}

.validated-input .validated-input__field {
    background-color: #fff;
    border: 1px solid #aaa;
    color: #54565b;
    font-size: 16px;
    height: 2.5em;
    outline: none;
    padding: 0 40px 0 1em;
    position: relative;
    width: calc(100% - 60px);
    z-index: 1
}

.validated-input .validated-input__field::-webkit-input-placeholder {
    color: #aaa;
    font-size: .9rem
}

.validated-input .validated-input__field:-ms-input-placeholder {
    color: #aaa;
    font-size: .9rem
}

.validated-input .validated-input__field::placeholder {
    color: #aaa;
    font-size: .9rem
}

.validated-input .validated-input__field:focus {
    box-shadow: 0 0 0 1px #37aeb3
}

.validated-input .validated-input__tag {
    background-color: #d1d0ce;
    height: 2.5rem;
    line-height: 2.5rem;
    position: absolute;
    right: 0;
    text-align: center;
    width: 60px;
    z-index: 0
}

.validated-input .validated-input__error-message {
    color: red;
    display: inline-block;
    line-height: 1.2rem;
    margin: .25em 0 0;
    text-align: right;
    visibility: hidden;
    width: 100%
}

.validated-input .validated-input__icon {
    background-color: transparent;
    bottom: 1.55rem;
    height: 2.5em;
    line-height: 3em;
    position: absolute;
    right: 62px;
    text-align: center;
    width: 2.5em;
    z-index: 1
}

.validated-input .validated-input__icon svg {
    fill: #000;
    height: 1.2em;
    width: 1.2em
}

.validated-input .validated-input__icon-accepted {
    visibility: hidden
}

.validated-input .validated-input__icon-accepted svg {
    fill: #6cb33f
}

.validated-input .validated-input__icon-error {
    visibility: hidden
}

.validated-input .validated-input__icon-error svg {
    fill: #ee3524
}

.validated-input--populated .validated-input__icon-accepted {
    visibility: visible
}

.validated-input--populated .validated-input__field {
    background-color: #f5feef;
    border-color: #6cb33f
}

.validated-input--populated .validated-input__field:focus {
    box-shadow: 0 0 0 1px #6cb33f
}

.validated-input--populated .validated-input__field:invalid {
    background-color: #ffeceb;
    border-color: #ee3524
}

.validated-input--populated .validated-input__field:invalid:focus {
    box-shadow: 0 0 0 1px #ee3524
}

.validated-input--populated .validated-input__field:invalid~.validated-input__error-message {
    visibility: visible
}

.validated-input--populated .validated-input__field:invalid~.validated-input__icon-error {
    visibility: visible
}

.validated-input--populated .validated-input__field:invalid~.validated-input__icon-accepted {
    visibility: hidden
}

.result-box {
    background-color: #0076c0;
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 150px;
    justify-content: space-between;
    padding: 1em;
    width: 150px
}

.result-box h3 {
    font-size: .9em;
    font-weight: 400;
    word-break: break-word
}

.result-box span {
    font-weight: 600;
    line-height: 1.2rem;
    margin: 0 0 0 auto;
    white-space: nowrap
}

.infobox {
    background-color: #fff;
    display: flex;
    flex-direction: column
}

.infobox .infobox__image {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 340px;
    width: 100%
}

.infobox .infobox__content {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5em
}

.infobox .infobox__content .infobox__text .infobox__subtitle {
    font-size: 1.25em;
    font-weight: 400;
    letter-spacing: 1.8px;
    margin-bottom: .5em;
    text-transform: uppercase
}

.infobox .infobox__content .infobox__text .infobox__title {
    font-size: 2.25em;
    letter-spacing: 3px
}

.infobox .infobox__content .infobox__text .infobox__body {
    color: #54565b;
    line-height: 1.25
}

.infobox .infobox__content button {
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    margin: 0;
    padding: 0
}

.infobox .infobox__content button span {
    color: #54565b;
    font-size: 15px;
    margin: 0 .25em 0 0;
    padding: .4rem 0;
    position: relative
}

.infobox .infobox__content button span:after {
    background-image: linear-gradient(90deg, #343465, #41326a 4%, #7a2b81 20%, #ec008c 51%, #ef4123 75%, #fd0);
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0
}

.infobox .infobox__content button svg {
    fill: #787b81;
    height: 1.2em;
    margin: .1rem 0 0;
    width: 1.2em
}

@media screen and (min-width:768px) {
    .infobox {
        flex: 1 1;
        flex-direction: row
    }

    .infobox .infobox__image {
        height: auto;
        min-height: 100%;
        width: 340px
    }
}

@media screen and (min-width:992px) {
    .infobox {
        flex-direction: column
    }

    .infobox .infobox__image {
        height: 340px;
        min-height: 0;
        width: 100%
    }
}

@media screen and (min-width:1200px) {
    .infobox {
        margin: 2rem 2rem 2rem 0
    }
}

nav {
    align-items: center;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    left: 0;
    position: -webkit-sticky;
    position: sticky;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 10
}

nav .navbar__logo {
    cursor: pointer
}

nav .navbar__logo svg {
    height: 5em
}

nav .navbar__options {
    display: flex;
    gap: 1rem;
    margin: 0 0 1rem
}

nav .navbar__options .navbar__language {
    width: 10rem
}

nav .navbar__options .navbar__currency {
    width: 5rem
}

@media screen and (min-width:768px) {
    nav {
        flex-direction: row;
        height: 80px;
        padding: 0 2.5rem 0 1rem
    }

    nav .navbar__options {
        margin: 0
    }

    nav .navbar__options .navbar__language {
        width: 12.5rem
    }
}

.szh-menu-container {
    height: 0;
    position: relative;
    width: 0
}

.szh-menu {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    width: -webkit-max-content;
    width: max-content;
    z-index: 100
}

.szh-menu:focus {
    outline: none
}

.szh-menu--state-closed {
    display: none !important
}

.szh-menu__arrow {
    background-color: #fff;
    border-color: rgba(0, 0, 0, .1) transparent transparent rgba(0, 0, 0, .1);
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    height: .75rem;
    position: absolute;
    width: .75rem;
    z-index: -1
}

.szh-menu__arrow--dir-left {
    right: -.375rem;
    -webkit-transform: translateY(-50%) rotate(135deg);
    transform: translateY(-50%) rotate(135deg)
}

.szh-menu__arrow--dir-right {
    left: -.375rem;
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg)
}

.szh-menu__arrow--dir-top {
    bottom: -.375rem;
    -webkit-transform: translateX(-50%) rotate(-135deg);
    transform: translateX(-50%) rotate(-135deg)
}

.szh-menu__arrow--dir-bottom {
    top: -.375rem;
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg)
}

.szh-menu__item {
    cursor: pointer
}

.szh-menu__item:focus {
    outline: none
}

.szh-menu__item--hover {
    background-color: #ebebeb
}

.szh-menu__item--focusable {
    background-color: inherit;
    cursor: default
}

.szh-menu__item--disabled {
    color: #aaa;
    cursor: default
}

.szh-menu__submenu {
    position: relative
}

.szh-menu__group {
    box-sizing: border-box
}

.szh-menu__radio-group {
    list-style: none;
    margin: 0;
    padding: 0
}

.szh-menu__divider {
    background-color: rgba(0, 0, 0, .12);
    height: 1px;
    margin: .5rem 0
}

.szh-menu-button {
    box-sizing: border-box
}

.dropdown {
    width: auto;
    width: var(--dropdown-calc-width, auto)
}

.dropdown .dropdown__button {
    align-items: center;
    background-color: #f6f6f6;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    font-size: .9rem;
    justify-content: space-between;
    margin: 0;
    outline: none;
    padding: .5rem;
    text-align: left;
    width: 100%
}

.dropdown .dropdown__button:hover {
    background-color: #d1d0ce
}

.dropdown .dropdown__button:focus-visible {
    box-shadow: 0 0 0 1px #37aeb3
}

.dropdown .dropdown__button svg {
    fill: #555;
    height: 1.4rem;
    width: 1.4rem
}

.dropdown .dropdown__button .dropdown__icon {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    transition: -webkit-transform .25s;
    transition: transform .25s;
    transition: transform .25s, -webkit-transform .25s
}

.dropdown .dropdown__button[aria-expanded] {
    background-color: #d1d0ce;
    color: #444
}

.dropdown .dropdown__button[aria-expanded] .dropdown__icon {
    -webkit-transform: rotateX(3.142rad);
    transform: rotateX(3.142rad)
}

.dropdown .dropdown__options ul {
    background-color: #f6f6f6;
    border: 1px solid #54565b;
    max-height: min(500px, 100vh);
    overflow: auto;
    width: auto;
    width: var(--dropdown-calc-width, auto)
}

.dropdown .dropdown__options ul .dropdown__opt {
    font-size: .9rem;
    padding: .5rem
}

.dropdown .dropdown__options ul .dropdown__opt:focus,
.dropdown .dropdown__options ul .dropdown__opt:hover {
    background-color: #d1d0ce
}

.dropdown .dropdown__options ul .dropdown__opt--active {
    background-color: #0076c0;
    color: #fff
}

.dropdown .dropdown__options ul .dropdown__opt--active:hover {
    background-color: #0076c0
}

.dropdown .dropdown__options ul .dropdown__opt--active:focus {
    background-color: #0063a0
}

.dropdown--get-width .dropdown__options {
    opacity: 0;
    pointer-events: none;
    visibility: hidden
}

* {
    box-sizing: border-box;
    scrollbar-width: thin
}

::-webkit-scrollbar {
    height: 8px;
    width: 8px
}

::-webkit-scrollbar-track {
    background-color: #f0f0f0
}

::-webkit-scrollbar-thumb {
    background-color: #cdcdcd
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a6a6a6
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
    font-family: Arial, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    margin: 0;
    padding: 0
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace
}