body {
    margin: 0;
}

.page {
    overflow: hidden;
    position: relative;

    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.hidden {
    display: none!important;
}

.landing-background {
    position: absolute;
    z-index: 1;
    right: 0;
    margin-top: 240px;
}

.landing-background.noise {
    margin-top: 0;
    opacity: 20%;
    left: 0;
    width: 100%;

    top: 0;
}

.header,
.footer-content,
.disclaimer-wrapper,
.socials-wrapper,
.why-content,
.main-body {
    max-width: 1280px;
    margin: auto;

    width: 100%;
}

.main-body {
    font-family: Open Sans;
    font-size: 22px;
    font-weight: 400;
    line-height: 34px;
    letter-spacing: 0em;
    text-align: left;
    color: #5F6264;
}

.main-body + .main-body {
    margin-top: -80px;
    padding-top: 160px;
    padding-bottom: 80px;
}

.main-body + .main-body.subscription {
    margin-top: -70px;
    padding-top: 170px;
}

.main-body + .main-body.get-start {
    margin-top: 0;
    padding-top: 100px;
}

.main-body.full {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 36.33%, #FFFFFF 61.98%);
    -- background: linear-gradient(180deg, #FFFFFF 38.02%, rgba(255, 255, 255, 0.9) 63.67%, rgba(255, 255, 255, 0) 100%);

    z-index: 1;
}


.main-body.partnership {
    background: #ffffff;
    padding-top: 20px;
    margin-top: 0;
}

.main-body.partnership .shield {
    background: radial-gradient(circle, #5111C0 -200%, #FFFFFF 50%);
    display: flex;
    justify-content: center;
}

.main-body.why {
    background: #F4F7FA;

    display: flex;
    flex-direction: column;

    margin-top: 0;
    padding-top: 20px;
}

.main-body.full.why {
    padding-bottom: 0px;
}

.main-body.get-start .title,
.main-body.why .title {
    font-family: Open Sans;
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    color: #25282A;
}

.main-body.get-start .title {
    margin-bottom: 40px;
}

.subscription .form .btn.primary,
.subscription .form .btn {
    padding-left: 48px;
    padding-right: 48px;

    margin-left: 16px;
    width: auto;
}

.main-body.subscription .card {
    box-shadow: 0px 20px 40px 0px #0A0E0E14;
    box-shadow: 0px 6px 12px 0px #0A0E0E14;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    font-family: Open Sans;
    font-size: 22px;
    font-weight: 400;
    line-height: 34px;
    text-align: left;

    width: auto;
    max-width: 800px;
    align-items: flex-start;

    padding: 48px;
}

.main-body.subscription .card .title {
    font-family: Open Sans;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    text-align: left;
    color: #2E3031;

    margin-bottom: 16px;
}

.main-body.subscription .form {
    display: flex;
    width: 100%;

    margin-top: 32px;
}

.main-body.subscription.success .form {
    display: none;
}

.main-body.subscription .success-message {
    display: none;

    font-family: Open Sans;
    font-size: 22px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    color: #2E3031;

    margin-top: 24px;
}

.main-body.subscription.success .success-message {
    display: block;
}

.main-body.subscription .form input {
    flex-grow: 1;

    border: 1px solid #DEE1E4;
    padding: 20px 16px 20px 16px;
    border-radius: 8px;
}

.main-body.subscription .form input::placeholder {
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: #8C9092;
}

.main-body.vision {
    display: flex;
    flex-direction: column;
}


.main-body.vision .btn.primary,
.main-body.vision .btn {
    width: auto;

    box-sizing: border-box;
    border: 2px solid transparent;

    padding-left: 48px;
    padding-right: 48px;

    margin-top: 40px;

    z-index: 2;
}

.main-body.vision .line {
    border-bottom: 2px solid #EDF0F3;
    margin-top: -19px;

    max-width: 1280px;
    width: 100%;
    margin-bottom: 44px;
}

.main-body.vision .title {
    font-family: Open Sans;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
    color: #2E3031;
    background-color: #FFFFFF;

    width: auto;
    z-index: 1;

    padding-left: 24px;
    padding-right: 24px;
}

.main-body.vision .text {
    max-width: 625px;
    width: 100%;

    font-family: Open Sans;
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    text-align: center;

}

.main-body.why .title {
    margin-bottom: 60px;
}

.main-body.get-start .networks-wrapper {
    max-width: 30%;
    width: 30%;
    position: relative;

    overflow: hidden;
}

.main-body.get-start .networks-wrapper .img {
    margin-left: -25%;
}

.main-body.get-start .networks-wrapper:before {
    content:'';
    width:100%;
    height:100%;    
    position:absolute;
    left:0;
    top:0;
    background: radial-gradient(at center, rgba(255, 255, 255, 0), rgba(255, 255, 255, 80%));
}


.main-body.get-start > div {
    width: 70%;
    max-width: 685px;
}

.main-body .cards .line {
    display: flex;
}

.main-body .why-content {
    display: flex;
    flex-direction: column;

    padding-top: 80px;
    padding-bottom: 80px;
}

.main-body .why-cards {
    display: flex;
    flex-direction: column;
}

.main-body .why-cards .line {
    display: flex;
    justify-content: space-between;
}

.main-body .why-cards .line + .line {
    padding-top: 16px;
}

.main-body .why-cards .line + .line .card {
    border-bottom: 0;
}

.main-body .why-cards .card {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    max-width: 580px;
    align-items: flex-start;

    padding-left: 0;
    box-sizing: border-box;
    padding-bottom: 40px;

    border-bottom: 1px solid #BBBEC0;
    border-radius: 0;

    font-family: Open Sans;
    font-size: 22px;
    font-weight: 400;
    line-height: 34px;
    text-align: left;
    color: #5F6264;

}

.main-body .why-cards .card .title {
    font-family: Open Sans;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    text-align: left;
    color: #2E3031;

    margin-bottom: 8px;
}

.main-body.partnership .title {
    font-family: Open Sans;
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    text-align: left;
    color: #2E3031;

    margin-bottom: 24px;
}

.main-body.full {
    width: 100%;
    max-width: none;
}

.main-body .cards {
    max-width: 1280px;
    display: flex;
    width: 100%;
    max-width: 1280px;
}

.main-body.full + .footer-wrapper {
    margin-top: 0;
}

.main-body .card {
    display: flex;
    align-items: center;
    max-width: 30%;

    font-family: Open Sans;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;

    box-shadow: 0px 16px 32px -4px #0A0E0E0F;
    box-shadow: 0px 4px 8px 0px #0A0E0E14;
    border-radius: 24px;
    padding: 24px;

    background-color: #FFFFFF;

    z-index: 2;
}

.main-body .card img {
    margin-right: 24px;

    max-width: 56px;
    max-height: 56px;
}

.main-body .card + .card {
    margin-left: 24px;
}

.main-body .card .heading {
    font-family: Open Sans;
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
    text-align: left;

    margin-bottom: 0;
}

.header {
    height: 56px;

    padding-top: 44px;
    margin-bottom: 48px;
    margin-top: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    position: relative;
    z-index: 2;
}

.footer-content .theme-switcher,
.header .theme-switcher {
    padding: 4px;
    border-radius: 8px;

    border: 1px solid #DEE1E4;
    background: #F4F7FA;
    display: inline-flex;
}

.header .history-button {
    height: 56px;
    width: 56px;
    border: none;
    border-radius: 8px;

    margin-left: 16px;
    margin-right: 4px;
    cursor: pointer;

    background-color: #EDF0F3;
}

.footer-content .theme-switcher,
.header .theme-switcher a {
    text-decoration: none;

    display: inline-flex;
    max-height: 32px;
}

.footer-content .theme-switcher {
    display: none;
}

.theme-switcher a + a {
    margin-left: 4px;
}

.header .theme-switcher .switcher {
    padding: 8px 8px 8px 8px;
    border-radius: 4px;
}

.header .theme-switcher .switcher.inverted {
    display: none;
}

.footer-content .theme-switcher .switcher {
    max-width: 32px;
    max-height: 32px;
    box-sizing: border-box;
}

.header .theme-switcher .switcher:not(.active):hover,
.footer-content .theme-switcher .switcher:not(.active):hover {
    background: #05386B0A;
}

.footer-content .theme-switcher {
    background-color: #FFFFFF;
}

.footer-content .theme-switcher .switcher.inverted {
    display: none;
}

.footer-content .theme-switcher .switcher {
    padding: 8px 8px 8px 8px;
    border-radius: 4px;
}

.footer-content .theme-switcher .switcher.active {
    padding: 8px 8px 8px 8px;
}

.footer-content .theme-switcher .switcher + switcher,
.header .theme-switcher .switcher + switcher {
    margin-left: 8px;
}

.footer-content .theme-switcher .switcher.active,
.header .theme-switcher .switcher.active {
    box-shadow: 0px 1px 0px 0px #FFFFFF80 inset,
                0px -1px 0px 0px #00000033 inset,
                0px 1px 1px 0px #00000033,
                0px 2px 4px 0px #00000033;

    background: linear-gradient(180deg, #475559 0%, #212B2E 100%);
}

.history .empty-state-wrapper img.empty-state,
.networks-wrapper .img,
.landing-background,
.faq-background,
.cctp-form .swap-icon,
.header .wallet,
.from-to-container .icon-wrapper img,
.direction .icon-wrapper img,
.cctp-form .refuel-wrapper .icon-wrapper img,
.cctp-form .gear-button img,
.cctp-form .common.error img,
.cctp-form .close .close-icon,
.cctp-form .input-wrapper.error .error-message img,
.main-body .card img,
.footer-content .logo-wrapper img,
.cctp-form .connect-wallet-button-wrapper .cancel-icon,
.rotating,
.select-chain-popup-content .row.chain .check,
.select-chain-popup-content .row.chain .external-icon,
.header .logo-image {
    display: inline-block;
}

.history .empty-state-wrapper img.empty-state.inverted,
.networks-wrapper .img.inverted,
.landing-background.inverted,
.history-icon.inverted,
.faq-background.inverted,
.cctp-form .swap-icon.inverted,
.header .wallet.inverted,
.from-to-container .icon-wrapper img.inverted,
.direction .icon-wrapper img.inverted,
.cctp-form .refuel-wrapper .icon-wrapper img.inverted,
.cctp-form .gear-button img.inverted,
.cctp-form .common.error img.inverted,
.cctp-form .close .close-icon.inverted,
.cctp-form .input-wrapper.error .error-message img.inverted,
.main-body .card img.inverted,
.footer-content .logo-wrapper img.inverted,
.cctp-form .connect-wallet-button-wrapper .cancel-icon-inverted,
.rotating.inverted,
.select-chain-popup-content .row.chain .external-icon.inverted,
.select-chain-popup-content .row.chain .check.inverted,
.header .logo-image.inverted {
    display: none;
}

.main-body h3 {
    font-family: Open Sans;
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
    text-align: left;
    color: #2E3031;
    margin-top: 56px;
    margin-bottom: 24px;
}

.main-body .content .splitter {
    margin-top: 8px;
}

.main-body h4 {
    font-family: Open Sans;
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
    text-align: left;
    color: #2E3031;

    margin-top: 24px;
    margin-bottom: 8px;
}

.header .control {
    display: flex;
    align-items: center;
}

.header .connect-wallet.connect {
    cursor: pointer;
}

.header .connect-wallet.address {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0em;
    text-align: left;

    padding: 4px 16px 4px 4px;
    border-radius: 8px;
    text-transform: none;
}

.header .connect-wallet .identicon {
    max-width: 48px;
    max-height: 48px;

    border-radius: 8px;

    margin-right: 16px;
}

.header .connect-wallet {
    background-color: #EDF0F3;
    color: #2E3031;
    outline: none;

    font-family: Open Sans;
    font-size: 12px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 4px;
    text-align: right;

    padding: 16px;
    margin-left: 12px;
    border-radius: 8px;
    border: 2px solid transparent;
    box-sizing: border-box;

    display: flex;
    align-items: center;

    cursor: pointer;
    text-transform: uppercase;
}

.vision .btn:hover,
.subscription .btn:hover,
.get-start .btn:hover,
.cctp-form .btn:hover {
    background: #474B4D;
}

.vision .btn:active,
.subscription .btn:active,
.get-start .btn:active,
.cctp-form .btn:active {
    background: #1E2223;
}

.vision .btn:selected,
.subscription .btn:selected,
.get-start .btn:selected,
.cctp-form .btn:selected {
    background: #1E2223;
}

.vision .btn:focus,
.subscription .btn:focus,
.get-start .btn:focus,
.cctp-form .btn:focus {
    background: #2E3031;
}

.vision .btn.disabled,
.subscription .btn.disabled,
.get-start .btn.disabled,
.cctp-form .btn.disabled {
    background: #2E3031;
    opacity: 40%;
    pointer-events: none;
}

.custom-popup-content .close:hover,
.action-menu-content .btn.primary:hover,
.header .history-button:hover,
.vision .btn.primary.inverted:hover,
.action-menu-content .btn.primary.inverted:hover,
.time-details-content .btn.primary.inverted:hover,
.cctp-form .btn.primary.inverted:hover,
.cctp-form .details-button:hover,
.header .connect-wallet:hover {
    background: #E8ECEE;
}

.cctp-form .swap-icon-wrapper:focus,
.cctp-form .swap-icon-wrapper:active,
.cctp-form .swap-icon-wrapper:hover {
    background: #E8ECEE;
}

.custom-popup-content .close:active,
.action-menu-content .btn.primary:active,
.header .history-button:active,
.vision .btn.primary.inverted:active,
.action-menu-content .btn.primary.inverted:active,
.time-details-content .btn.primary.inverted:active,
.cctp-form .btn.primary.inverted:active,
.cctp-form .details-button:active,
.header .connect-wallet:active {
    background: #030E1645;
}

.custom-popup-content .close:selected,
.action-menu-content .btn.primary:selected,
.header .history-button:selected,
.vision .btn.primary.inverted:selected,
.action-menu-content .btn.primary.inverted:selected,
.time-details-content .btn.primary.inverted:selected,
.cctp-form .btn.primary.inverted:selected,
.cctp-form .details-button:selected,
.header .connect-wallet:selected {
    background: #030E1645;
}

.custom-popup-content .close:focus,
.action-menu-content .btn.primary:focus,
.header .history-button:focus,
.vision .btn.primary.inverted:focus,
.action-menu-content .btn.primary.inverted:focus,
.time-details-content .btn.primary.inverted:focus,
.cctp-form .btn.primary.inverted:focus,
.cctp-form .details-button:focus,
.header .connect-wallet:focus {
    background: #0C2A4512;
}

.header .connect-wallet img {
    max-width: 20px;
    max-height: 20px;

    margin-right: 12px;
}

.header .menu {
    font-family: Open Sans;
    font-size: 12px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 3px;
    text-align: center;
    text-transform: uppercase;

    width: 200px;
    display: flex;
    justify-content: space-between;
}

.header .menu a {
    text-decoration: none;
    color: #2E3031;
}

.header .logo {
    font-family: Open Sans;
    font-size: 26px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.03em;
    text-align: left;
    color: #2E3031;
    text-decoration: none;

    display: flex;
    align-items: center;
    z-index: 1;
}

.header .logo img {
    margin-right: 10px;
    max-width: 40px;
    max-height: 40px;
}

.in-progress-container {
    margin-bottom: 32px;
}

.in-progress-container .in-progress {
    padding: 48px;
    border-radius: 24px;
    background: #F4F7FA;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.in-progress-container .in-progress .chain-icon {
    max-width: 96px;
    max-height: 96px;
    border-radius: 16px;
    border: 2px solid #DEE1E4;
}

.in-progress-container .in-progress .direction {
    max-width: 192px;

    position: relative;
    background-color: #DEE1E4;
    height: 2px;
    width: 100%;
}

.in-progress-container .in-progress .direction .progress {
    background-color: #2E3031;
    height: 2px;
    position: absolute;
    left: 0;

    transition: width .2s ease-in;
}

.in-progress-container .in-progress .direction .progress-wrapper {
    height: 2px;
    position: absolute;
    left: 0;
    width: 100%;
}

.from-to-container {
    background: #F4F7FA;
    border-radius: 24px;
    padding: 24px;
    display: flex;
    justify-content: space-between;

    margin-bottom: 32px;
    position: relative;
}

.from-to-container .icon-wrapper {
    border-radius: 8px;
    background:  #FFFFFF;
    height: 40px;
    width: 40px;

    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.from-to-container .chain {
    display: flex;
}

.from-to-container .chain .field-name {
    font-family: Open Sans;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 1px;
    text-align: left;
    color: #76797B;
}

.from-to-container .chain .value {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0.02em;
    text-align: left;
    color: #2E3031;
}

.from-to-container .chain img {
    max-width: 32px;
    max-height: 32px;

    border-radius: 4px;
    margin-right: 8px;
}

.main-body {
    display: flex;
    justify-content: space-around;
    align-items: center;

    position: relative;
    z-index: 2;
}

.main-body > div {
    width: 50%;

    max-width: 624px;
    box-sizing: border-box;
}

.main-body .heading {
    font-family: Open Sans;
    font-size: 88px;
    font-weight: 700;
    line-height: 88px;
    letter-spacing: 0em;
    text-align: left;
    color: #2E3031;

    margin-bottom: 24px;
}

.main-body .heading .subheader {
    font-family: Open Sans;
    font-size: 22px;
    font-weight: 400;
    line-height: 34px;
    text-align: left;

    margin-top: 24px;
    margin-bottom: 32px;
}

.main-body .heading .selection {
    color: #4688EB;
}

.main-body .heading.low {
    font-size: 48px;
}

.cctp-form {
    overflow: hidden;
    padding: 48px;
    border-radius: 24px;
    position: relative;
    background-color: #FFFFFF;

    box-shadow: -4px 0px 60px 24px #0C101C0D;
    box-shadow: 0px 40px 100px 0px #0C101C1A;
}

.cctp-form.loading .form-body {
    min-height: 300px;
    display: flex;
    justify-content: center;
}

.cctp-form .form-body {
    margin-bottom: 32px;

    align-items: center;
    display: flex;
    flex-direction: column;
}

.vision .btn,
.subscription .btn,
.get-start .btn,
.cctp-form .btn {
    background: #2E3031;

    font-family: Open Sans;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 3px;
    text-align: center;
    color: #FFFFFF;
    border: none;
}

.cctp-form .btn.blue {
    background: #2775CA;
}

.vision .btn.primary,
.subscription .btn.primary,
.get-start .btn.primary,
.action-menu-content .btn.primary,
.time-details-content .btn.primary,
.cctp-form .btn.primary {
    display: block;
    text-decoration: none;
    width: 100%;
    border-radius: 8px;
    line-height: 64px;
    text-transform: uppercase;

    cursor: pointer;
}

.get-start .btn,
.get-start .btn.primary {
    width: auto;
    padding-left: 48px;
    padding-right: 48px;

    margin-top: 40px;
    display: inline-block;

    position: relative;
    z-index: 2;
}

.circle-wrapper {
    display: flex;
    justify-content: center;

    padding-bottom: 80px;
    z-index: 1;

    position: relative;
}

.circle-wrapper .img.inverted {
    display: none;
}

.action-menu-content .btn.primary,
.time-details-content .btn.primary {
    font-size: 12px;
    margin-top: 16px;
    border: none;
    font-weight: 700;
    color: #2E3031;
}


.cctp-form .btn + .btn {
    margin-top: 16px;
}

.action-menu-content .btn.primary,
.custom-popup-content .close,
.vision .btn.primary.inverted,
.action-menu-content .btn.primary.inverted,
.time-details-content .btn.primary.inverted,
.cctp-form .btn.primary.inverted {
    background: #EDF0F3;
    color: #2E3031;
}

.cctp-form .btn.primary.disabled {
    background: #2E3031;
    opacity: 40%;
    pointer-events: none;
}

.cctp-form .form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 32px;

    font-family: Open Sans;
    font-size: 24px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: 0em;
    text-align: left;

    color: #2E3031;
}

.cctp-form .gear-button {
    line-height: 12px;
    padding: 14px;
    background-color: #EDF0F3;
    border-radius: 8px;
}

.cctp-form .input-wrapper.loading input {
    color: transparent;
}

.cctp-form .swap-icon-wrapper.disabled,
.cctp-form .input-wrapper.disabled {
    pointer-events: none;
}

.cctp-form .input-wrapper .loading-placeholder {
    display: none;
}

.cctp-form .input-wrapper .balance {
    margin-top: 60px;

    font-family: Open Sans;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0.30000001192092896px;
    text-align: left;
    color: #76797B;

    z-index: 1;
}

.cctp-form .input-wrapper .balance-wrapper {
    display: flex;
    align-items: center;
    position: absolute;
}

.cctp-form .input-wrapper .balance .amount {
    font-family: Open Sans;
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0.30000001192092896px;
    text-align: left;

    color: #2E3031;
    border: none;
    background-color: transparent;

    cursor: pointer;
}

.cctp-form .input-wrapper.loading .loading-placeholder {
    position: absolute;
    left: 62px;
    display: inline-block;
}

.cctp-form .input-wrapper.loading .loading-placeholder {
    border-radius: 8px;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: loadingAnime;
    animation-timing-function: linear;
    background: linear-gradient(90deg, rgb(238, 238, 238), rgb(238, 238, 238) 20%, rgba(153, 153, 153, 0.5) 44%, rgb(238, 238, 238) 80%) 0% 0% / 800px 100%;
}

.page.inverted .cctp-form .input-wrapper.loading .loading-placeholder {
    background: linear-gradient(90deg, rgb(30, 34, 35), rgb(30, 34, 35) 20%, rgba(153, 153, 153, 0.5) 44%, rgb(30, 34, 35) 80%) 0% 0% / 800px 100%;
}

@keyframes loadingAnime {
  0% {
    background-position: -800px 0;
  }
  100% {
      background-position: 800px 0;
  }
}

.cctp-form .input-wrapper {
    padding: 24px 16px 24px 20px;
    box-sizing: border-box;
    width: 100%;
    position: relative;

    justify-content: space-between;
}

.cctp-form .input-wrapper.error {
    padding-bottom: 64px;
}

.cctp-form .input-wrapper.error + .swap-icon-wrapper {
    margin-top: -10px;
}

.cctp-form .input-wrapper .error-message {
    display: none;
}

.cctp-form .input-wrapper.error .error-message {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px 24px 16px 24px;
    box-sizing: border-box;

    font-family: Open Sans;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0em;

    background: #FFF4F2;
    color: #CA453A;

    border-radius: 0 0 24px 24px;
}
.cctp-form .input-wrapper.error .error-message img {
    margin-right: 4px;
}

.cctp-form .input-wrapper.error input {
    padding-bottom: 42px;
}

.cctp-form .input-wrapper input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    padding-left: 56px;
    padding-right: 232px;
    box-sizing: border-box;
}

.cctp-form .input-wrapper {
    width: 100%;
    padding: 24px 16px 24px 20px;
    border-radius: 24px;
    background-color: #F4F7FA;

    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.cctp-form .input-wrapper .chain-selector-wrapper {
    z-index: 1;
    cursor: pointer;
}

.cctp-form .input-wrapper .chain-selector-wrapper.disabled .select-arrow {
    display: none;
}

.cctp-form .input-wrapper .chain-selector-wrapper.disabled {
    cursor: auto;
    background-color: transparent;
}

.cctp-form .input-wrapper input:focus {
    border: 2px solid #C0CDFF;
    box-shadow: 0px 0px 4px 2px #D7E0FF;
}

.cctp-form .input-wrapper.error input:focus + .error-message {
    border: 2px solid #C0CDFF;
    border-top: 0;
}

.cctp-form .input-wrapper.error input + .error-message {
    border: 2px solid #F05C4E;
    border-top: 0;
}

.cctp-form .input-wrapper.error input:not(:focus) {
    border: 2px solid #F05C4E;
}

.cctp-form .input-wrapper input:disabled,
.cctp-form .input-wrapper input {
    outline: none;
    background-color: transparent;
    border: none;
    border-radius: 24px;

    font-family: Open Sans;
    font-size: 32px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: 0em;
    text-align: left;

    color: #2E3031;
    opacity: 1;
    -webkit-text-fill-color: #2E3031;
}

.cctp-form .details-button {
    width: 100%;

    border: none;
    padding: 12px 8px 12px 8px;
    margin-top: 12px;
    border-radius: 24px;
    background: #F4F7FA;
    text-transform: uppercase;

    font-family: Open Sans;
    font-size: 12px;
    color: ;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 2px;

    cursor: pointer;

    color: #2E3031;
}

.cctp-form .swap-icon-wrapper {
    width: 40px;
    height: 40px;

    border-radius: 8px;
    border: 4px;
    border-color: #FFFFFF;
    border-style: solid;
    background-color: #F4F7FA;

    margin-top: -20px;
    margin-bottom: -20px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 1;
    cursor: pointer;
}

.cctp-form .swap-icon-wrapper .swap-icon {
    width: 100%;
    height: 100%;
    max-height: 13px;
    max-width: 13px;
}

.cctp-form .swap-icon-wrapper + .input-wrapper {
    margin-top: 4px;
}

.cctp-form .details {
    padding: 20px 24px 4px 24px;
    padding-bottom: 56px;
    position: relative;
    border-radius: 24px;
    margin-top: 4px;
    background: #F4F7FA;

    font-family: Open Sans;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: center;

    width: 100%;
    box-sizing: border-box;
}

.cctp-form .details .details-button {
    margin-top: 0;
    position: absolute;
    left: 0;
}

.cctp-form .details .row {
    display: flex;
    justify-content: space-between;
}

.cctp-form .details .row + .row {
    margin-top: 12px;
}

.cctp-form .details .row .title {
    display: flex;
}

.cctp-form .details .row .value.red {
    color: #F05C4E;
}

.cctp-form .details .row .value.red:before {
    content: '- ';
}

.cctp-form .details .row .value.green {
    color: #00A654;
}

.cctp-form .details .row .value.green:before {
    content: '+ ';
}

.cctp-form .details .row .value {
    font-family: Open Sans;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: center;
    color: #2E3031;
}

.chain-selector-wrapper {
    display: flex;
    justify-content: space-between;

    cursor: pointer;

    width: 160px;

    background-color: #05386B0A;

    border-radius: 8px;
    padding: 10px 14px 10px 10px;
}

.chain-selector-wrapper.address-wrapper {
    width: 200px;
}

.chain-selector-wrapper > div {
    display: flex;
    align-items: center;
}

.chain-selector-wrapper .field-name {
    color: #76797B;

    font-family: Open Sans;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 1px;
    text-align: left;
}

.chain-selector-wrapper .value {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0.02em;
    text-align: left;
    color: #2E3031;
}

.chain-selector-wrapper .select-arrow {
    margin-left: 8px;
}

.chain-selector-wrapper .chain-icon {
    max-width: 32px;
    max-height: 32px;

    background-color: #F6F6F6;
    border-radius: 4px;

    margin-right: 8px;
}

.footer-wrapper {
    background-color: #E8ECEE;
    color: #FFFFFF;

    padding-top: 56px;
    padding-bottom: 32px;

    margin-top: 70px;

    z-index: 1;
    position: relative;
}

.socials-wrapper {
    margin-top: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-family: Open Sans;
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: center;
    color: #8C9092;
}

.socials-wrapper .copyrights {
    font-weight: 600;
}


.footer-wrapper .disclaimer-wrapper {
    text-align: left;

    border-top: 1px solid #DEE1E4;
    padding-top: 24px;
    margin-top: 24px;
    color: #8C9092;
}

.footer-wrapper .disclaimer-wrapper a {
    text-decoration: none;
    font-family: Open Sans;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.2px;
    text-align: left;
    color: #5A69E9;
}

.footer-wrapper .disclaimer {
    font-family: Open Sans;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.2px;
    text-align: left;
}

.socials-wrapper .socials > a {
    padding: 4px 16px 4px 4px;
    border-radius: 8px;

    display: flex;
    align-items: center;
    text-decoration: none;

    color: #5F6264;

    background-color: #0C2A4512;
    font-weight: 400;
}

.socials-wrapper .socials .social-logo {
    margin-right: 16px;
}

.socials-wrapper .socials > a + a {
    margin-left: 16px;
}

.socials-wrapper .socials {
    display: flex;
    align-items: center;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

.footer-content .logo-wrapper {
    display: flex;
    align-items: center;

    font-family: Open Sans;
    font-size: 26px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.03em;
    text-align: left;
    color: #2E3031;


    flex-grow: 2;
}

.footer-content .logo-wrapper .label {
    display: flex;
    align-items: center;
}

.footer-content .logo-wrapper .label img {
    margin-right: 10px;
}

.footer-content .links {
    display: flex;
    justify-content: space-between;
    flex-grow: 5;

    max-width: 880px;
}

.footer-content .links a {
    text-decoration: none;
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 1px;
    text-align: left;
    color: #5F6264;
}

.main-body .steps-wrapper {
    width: auto;
    margin-bottom: 0;
    margin-top: 24px;
    top: 0;
    left: 0;
    flex-direction: column;
    position: absolute;

    align-items: flex-start;

    max-width: 250px;
}

.steps-wrapper .connection {
    height: 44px;
    width: 2px;
    background: #EDF0F3;
    margin-left: 20px;
}

.steps-wrapper .completed + .connection {
    background: #00C565;
}

.steps-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;

    color: #8C9092;

    max-width: 624px;
    margin: auto;
    width: 100%;

    margin-bottom: 50px;
    margin-top: -40px;

    font-family: Open Sans;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.02em;
    text-align: left;
}

.steps-wrapper .step {
    display: flex;
    align-items: center;
}

.steps-wrapper .step .heading {
    font-family: Open Sans;
    font-size: 12px;
    font-weight: 400;
    text-align: left;

    color: #8C9092;

    margin-bottom: 4px;
    line-height: 14px;
}

.steps-wrapper .step.completed .heading,
.steps-wrapper .step.active .heading {
    font-size: 14px;
    font-weight: 500;
    color: #2E3031;
}

.steps-wrapper .step .explorer-link {
    font-family: Open Sans;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-align: left;
    color: #5A69E9;
    text-decoration: none;
    position: absolute;

}
.steps-wrapper .step.completed .heading {
    color: #008E47;
}

.steps-wrapper .step .step-estimated-time {
    display: none;
}

.steps-wrapper .step.active .step-estimated-time {
    display: block;
}

.steps-wrapper .step.active .number-wrapper,
.steps-wrapper .step.active {
    color: #76797B;
}

.steps-wrapper .step.completed .number {
    display: none;
}

.steps-wrapper .step .check.inverted,
.steps-wrapper .step.completed .check.inverted,
.steps-wrapper .step .check {
    display: none;
}

.steps-wrapper .step.completed .check {
    display: inline-block;
}

.steps-wrapper .step.completed .number-wrapper {
    background: #00C565;
    border: none;
}

.steps-wrapper .step .number-wrapper,
.steps-wrapper .step .number {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    background-color: #F4F7FA;
    border: 1px solid #EDF0F3;
    color: #76797B;
    border-radius: 8px;

    font-family: Open Sans;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.02em;
    text-align: center;

    height: 40px;
    width: 40px;
}

.steps-wrapper .step .number-wrapper {
    margin-right: 8px;
}

.steps-wrapper .step.active .number-wrapper {
    border: 2px solid transparent;
    color: #FFFFFF;
    background: transparent;

    --border-angle: 0turn;
    --main-bg: conic-gradient(
        from var(--border-angle),
        transparent,
        transparent 5%,
        transparent 10%,
        transparent 95%
      );
    --gradient-border: conic-gradient(
        from var(--border-angle),
        transparent 50%,
        #00C565,
        #00C565 99%,
        transparent
    );
    background: var(--main-bg) padding-box, var(--gradient-border) border-box, var(--main-bg) border-box;
    animation: bg-spin 2.5s linear infinite;
}

@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

.steps-wrapper .step.active .number {
    border: 2px #FFFFFF solid;
    background: #2E3031;
    box-sizing: border-box;
    color: #FFFFFF;
}

.cctp-form .input-wrapper .chain-selector-wrapper .icon-wrapper img.inverted,
.cctp-form .wallet-address-wrapper.input-wrapper .icon-wrapper img.inverted {
    display: none;
}

.cctp-form .input-wrapper .chain-selector-wrapper .icon-wrapper,
.cctp-form .wallet-address-wrapper.input-wrapper .icon-wrapper {
    height: 48px;
    width: 48px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

.cctp-form .input-wrapper .chain-selector-wrapper.address-wrapper .icon-wrapper {
    margin-right: 16px;

    max-width: 32px;
    max-height: 32px;

    border: 1px solid #DEE1E4;
    border-radius: 4px;
    overflow: hidden;
}

.cctp-form .input-wrapper .chain-selector-wrapper.address-wrapper .icon-wrapper img {
    max-width: 100%;
    max-height: 100%;
}

.cctp-form .input-wrapper.address {
    text-decoration: none;
}

.cctp-form .input-wrapper .chain-selector-wrapper.address-wrapper {
    background: transparent;
    color: #5F6280;
}

.cctp-form .input-wrapper .chain-selector-wrapper.address-wrapper .address {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0.04em;
    text-align: left;
}

.cctp-form .input-wrapper .chain-selector-wrapper.address-wrapper .address .chain-name {
    font-family: Open Sans;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 1px;
    text-align: left;
}

.cctp-form .wallet-address-wrapper.input-wrapper {
    padding: 16px;
}

.cctp-form .wallet-address-wrapper.input-wrapper input {
    padding-left: 80px;
}

.cctp-form .wallet-address-wrapper.input-wrapper input:focus {
    padding-left: 78px;
}

.cctp-form .wallet-address-wrapper.input-wrapper input,
.cctp-form .connect-wallet-button-wrapper {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.04em;
    text-align: left;
    color: #2E3031;

    text-overflow: ellipsis;
}

.cctp-form .wallet-address-wrapper.input-wrapper input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #8C9092;
}
.cctp-form .wallet-address-wrapper.input-wrapper input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #8C9092;
   opacity:  1;
}
.cctp-form .wallet-address-wrapper.input-wrapper input::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #8C9092;
   opacity:  1;
}
.cctp-form .wallet-address-wrapper.input-wrapper input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #8C9092;
}
.cctp-form .wallet-address-wrapper.input-wrapper input::-ms-input-placeholder { /* Microsoft Edge */
   color: #8C9092;
}

.cctp-form .wallet-address-wrapper.input-wrapper input::placeholder { /* Most modern browsers support this now. */
   color: #8C9092;
}

.cctp-form .wallet-address-wrapper.input-wrapper .direction-name {
    font-family: Open Sans;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0.5px;
    text-align: left;
    color: #76797B;

    position: absolute;
    top: 22px;
    left: 79px;
}

.landing-page .cctp-form .refuel-wrapper {
    display: none;
}

.cctp-form .refuel-wrapper {
    display: flex;
    background: #F4F7FA;
    margin-top: 8px;
    padding: 24px;
    border-radius: 24px;

    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
}

.cctp-form .refuel-wrapper .content .title {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;

    margin-bottom: 4px;

    color: #2E3031;

    display: flex;
}

.cctp-form .refuel-wrapper .content {
    display: flex;
    padding-left: 36px;
    padding-right: 8px;
    position: relative;
    flex-direction: column;

    font-family: Open Sans;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-align: left;
    color: #5F6264;

}

.cctp-form .refuel-wrapper .content .info-icon {
    margin-left: 8px;
}

.cctp-form .refuel-wrapper .content .icon-wrapper {
    position: absolute;
    left: 8px;
    line-height: 0;
    top: 2px;
}

.cctp-form .wallet-address-wrapper.input-wrapper input {
    pointer-events: none;

    padding-top: 14px;
}

.cctp-form .wallet-address-wrapper.input-wrapper.destination input {
    pointer-events: auto;
}

.cctp-form .connect-wallet-button-wrapper {
    display: flex;
    z-index: 1;
}

.cctp-form .wallet-address-wrapper.destination input {
    padding-right: 75px;
}

.cctp-form .wallet-address-wrapper + .wallet-address-wrapper {
    margin-top: 4px;
}

.cctp-form .wallet-address-wrapper + .submit-wrapper {
    margin-top: 32px;
}

.cctp-form .message.left {
    align-items: flex-start;
}

.cctp-form .message.flow {
    display: none;
}

.cctp-form .message.in-progress .icon-wrapper {
    display: none;
}

.cctp-form .message .icon-wrapper {
    height: 120px;
    width: 120px;
    border-radius: 24px;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;

    margin-right: 40px;
}

.cctp-form .message .icon-wrapper > img {
    display: none;
}

.cctp-form .message.success .icon-wrapper > img.success-icon {
    display: block;
}

.cctp-form .message.error .icon-wrapper > img.error-icon {
    display: block;
}

.cctp-form .message.info .icon-wrapper > img.info-icon {
    display: block;
}

.cctp-form .details .info-icon {
    cursor: pointer;

    margin-left: 6px;
}

.cctp-form .message.waiting .icon-wrapper > img.waiting-icon {
    display: block;
}

.cctp-form .message.success .icon-wrapper {
    background: linear-gradient(180deg, #20F05A 0%, #00C565 100%);
    box-shadow: 0px 1px 0px 0px #FFFFFF80 inset;
    box-shadow: 0px -1px 0px 0px #00000033 inset;
    box-shadow: 0px 4px 12px 0px #0000001A;
    box-shadow: 0px 2px 4px 0px #00000014;
    box-shadow: 0px 48px 240px 40px #BBFFCC;
}

.cctp-form .message.error .icon-wrapper {
    background: linear-gradient(180deg, #FF8946 0%, #EF6051 100%);
    box-shadow: 0px 4px 12px 0px #0000001A;
    box-shadow: 0px 2px 4px 0px #00000014;
    box-shadow: 0px 1px 0px 0px #FFFFFF80 inset;
    box-shadow: 0px -1px 0px 0px #00000033 inset;
    box-shadow: 0px 48px 240px 40px #FFD6D0;

}

.cctp-form .message.info .icon-wrapper {
    background: linear-gradient(180deg, #A1D2FF 0%, #7386FE 100%);
    box-shadow: 0px 4px 12px 0px #0000001A;
    box-shadow: 0px 2px 4px 0px #00000014;
    box-shadow: 0px 1px 0px 0px #FFFFFF80 inset;
    box-shadow: 0px -1px 0px 0px #00000033 inset;
    box-shadow: 0px 48px 240px 40px #D7E0FF;
}

.cctp-form .message.waiting .icon-wrapper {
    background: linear-gradient(180deg, #FFE665 0%, #F6AF01 100%);

    box-shadow: 0px 4px 12px 0px #0000001A;
    box-shadow: 0px 2px 4px 0px #00000014;
    box-shadow: 0px 1px 0px 0px #FFFFFF80 inset;
    box-shadow: 0px -1px 0px 0px #00000033 inset;
    box-shadow: 0px 48px 240px 40px #FFE9C4;

}

.cctp-form .message {
    display: flex;
    flex-direction: column;
    align-items: center;

    font-family: Open Sans;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0em;
    text-align: left;
}

.page.inverted .cctp-form .message.success .message-header,
.cctp-form .message.success .message-header {
    color: #00C565;
}

.page.inverted .cctp-form .message.error .message-header,
.cctp-form .message.error .message-header {
    color: #F05C4E;
}

.page.inverted .cctp-form .message.info .message-header,
.cctp-form .message.info .message-header {
    color: #7185FF;
}

.page.inverted .cctp-form .message.waiting .message-header,
.cctp-form .message.waiting .message-header {
    color: #F6AF00;
}

.cctp-form .message .message-header {
    display: flex;
    align-items: center;
    color: #2E3031;

    margin-bottom: 16px;

    font-family: Open Sans;
    font-size: 40px;
    font-weight: 700;
    line-height: 44px;
    letter-spacing: 0em;
    text-align: left;
}

.cctp-form .connect-wallet-button-wrapper > button {
    display: flex;
    justify-content: center;
    align-items: center;

    box-sizing: border-box;
    border: none;
    border-radius: 8px;

    padding: 12px;
    background: #EDF0F3;

    font-family: Open Sans;
    font-size: 10px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 2px;
    text-align: right;
    color: #2E3031;
    text-transform: uppercase;

    cursor: pointer;
}

.cctp-form .connect-wallet-button-wrapper > button + button {
    margin-left: 12px;
}

.cctp-form .connect-wallet-button-wrapper > button img {
    border-radius: 4px;

    max-width: 32px;
    max-height: 32px;
}

.select-chain-popup-content .row.chain {
    display: flex;
    align-items: center;

    width: 100%;

    border-radius: 8px;

    border: 1px solid #EDF0F3;
    padding: 12px 16px;

    font-family: Open Sans;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: center;
    color: #2E3031;

    cursor: pointer;

    background: transparent;
}

.select-chain-popup-content .row.chain .content-wrapper {
    display: flex;
    align-items: center;

    text-align: left;
    justify-content: space-between;
    width: 100%;
}

.select-chain-popup-content .row.chain .content-wrapper > div {
    flex-grow: 1;
}

.select-chain-popup-content .row.chain .check {
    background-color: transparent;
}

.select-chain-popup-content .row.chain:hover {
    background: #05386B0A;
}

.select-chain-popup-content .row.chain:active {
    background: #0C2A4517;
}

.select-chain-popup-content .row.chain.active {
    background: #0C2A4512;
    border: 1px solid #000405D1;

    justify-content: space-between;
}

.select-chain-popup-content .row.chain.disabled {
    padding: 12px 16px 12px 16px;
    border-radius: 8px;
    border: 0px;

    font-family: Open Sans;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: #A9ADAF;

    pointer-events: none;
    cursor: not-allowed;
}

.select-chain-popup-content .row.chain .description {
    font-family: Open Sans;
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0.05px;
    color: #5F6264;
}

.select-chain-popup-content .row.chain .coming-soon {
    padding: 1px 6px 2px 6px;
    border-radius: 6px;
    background: #F4F7FA;

    font-family: Open Sans;
    font-size: 10px;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: 0.05000000074505806px;
    text-align: center;

    color: #8C9092;
    margin-left: 8px;
    vertical-align: middle;
}

.cctp-form .error.common {
    background: #FFF4F2;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid #FFEBE8;

    font-family: Open Sans;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-align: center;
    color: #CA453A;
    box-sizing: border-box;
    margin-top: 8px;
    text-align: left;
    width: 100%;

    display: flex;
    align-items: center;

    margin-bottom: 8px;
}

.cctp-form .error.common img {
    margin-right: 8px;
}

.select-chain-popup-content .row.chain + .row.chain {
    margin-top: 4px;
}

.select-chain-popup-content .row.chain img.chain-icon {
    max-width: 32px;
    max-height: 32px;
    border-radius: 8px;

    margin-right: 12px;

    background: #F6F6F6;
}

.cctp-form .wallet-address-wrapper.same-wallet-wrapper.input-wrapper .icon-wrapper {
    width: auto;
    height: auto;

    padding: 8px;
    border-radius: 8px;
}

.cctp-form .wallet-address-wrapper.same-wallet-wrapper.input-wrapper .icon-wrapper {
    margin-right: 16px;
}

.cctp-form .wallet-address-wrapper.same-wallet-wrapper {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.04em;
    text-align: left;

    justify-content: left;
}

.cctp-form .wallet-address-wrapper.same-wallet-wrapper .title {
    color: #76797B;
    font-family: Open Sans;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0.5px;

    --margin-bottom: 4px;
}

.cctp-form .wallet-address-wrapper .direction-icon {
    margin: 10px;
}

.cctp-form .wallet-address-wrapper .chain-icon {
    max-width: 32px;
    max-height: 32px;

    border: 1px solid #DEE1E4;
    border-radius: 4px;
}

.cctp-form .notify-me-wrapper .input-wrapper {
    margin-top: 24px;
    padding: 0;
}

.cctp-form .notification-block .description,
.cctp-form .notify-me-wrapper .description {
    padding-right: 64px;
    position: relative;
}

.cctp-form .notification-block .description span {
    line-height: 46px;
}

.cctp-form .notification-block .description {
    line-height: 0;
    position: relative;
}

.cctp-form .notify-me-wrapper .description.no-close {
    padding-right: 0;
}

.cctp-form .notify-me-wrapper.all-enabled {
    line-height: 48px;
}

.cctp-form .notification-block .close,
.cctp-form .notify-me-wrapper .description .close {
    position: absolute;
    right: 0;
    top: 0;

    height: 48px;
    width: 48px;
    padding: 17px;
    border-radius: 8px;
    border: none;
    outline: none;
    cursor: pointer;

    background-color: #EDF0F3;
}

.cctp-form .notify-me-wrapper .input-wrapper input {
    padding: 20px 16px 20px 16px;
    border-radius: 8px;
    border: 1px solid #DEE1E4;
    background: #FFFFFF;
    font-size: 16px;
    position: relative;
}

.cctp-form .notify-me-wrapper .input-wrapper input::-webkit-input-placeholder,
.cctp-form .notify-me-wrapper .input-wrapper input:-moz-placeholder,
.cctp-form .notify-me-wrapper .input-wrapper input::-moz-placeholder,
.cctp-form .notify-me-wrapper .input-wrapper input:-ms-input-placeholder,
.cctp-form .notify-me-wrapper .input-wrapper input::-ms-input-placeholder,
.cctp-form .notify-me-wrapper .input-wrapper input::placeholder {
    color: #8C9092;
    font-family: Open Sans;
    font-size: 16px;
    font-weight: normal;
    text-align: left;
}

.cctp-form .notify-me-wrapper .input-wrapper input::-webkit-input-placeholder {
    font-weight: normal;
}

.cctp-form .notify-me-wrapper .input-wrapper input::-moz-placeholder {
    font-weight: normal;
}

.cctp-form .notify-me-wrapper {
    background: #F4F7FA;
    padding: 24px;
    border-radius: 24px;

    font-family: Open Sans;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: #2E3031;

    --transition: all 1s cubic-bezier(1, 5, 1, 1);
}

.cctp-form .notify-me-wrapper.hide {
    transform: translateX(-100%)
    transform-origin: top;
    visibility: hidden;
    height: 0; padding: 0; margin: 0;
    opacity: 0;
}

.cctp-form .notify-me-wrapper .notify-button {
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 3px;
    text-align: center;
    color: #FFFFFF;
    border: none;
    flex-shrink: 0;
    margin-left: 16px;

    background: #2E3031;
    padding: 20px 24px 20px 24px;
    border-radius: 8px;
    text-transform: uppercase;
    cursor: pointer;
}

.cctp-form .notification-block {
    display: flex;
    flex-direction: column;

    background-color: #F4F7FA;
    padding: 24px;
    border-radius: 24px;

    font-family: Open Sans;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
}

.cctp-form .notification-block .title {
    margin-bottom: 24px;
}

.popup-content.custom-popup-content.time-details-content {
    max-width: 480px;
}

.popup-content.custom-popup-content.action-menu-content .modal {
    max-height: 100%;
    min-height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 32px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.popup-content.custom-popup-content.action-menu-content .modal .history {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;

    flex-grow: 1;
}

.history .btn.primary.disabled {
    opacity: 40%;
    pointer-events: none;
}

.popup-content.custom-popup-content.action-menu-content {
    margin-right: 24px!important;
    min-height: calc(100% - 48px);

    max-width: 480px;
}

.popup-content.custom-popup-content.action-menu-content .menu-header {
    display: flex;
    align-items: center;

    font-size: 20px;
    font-weight: 700;
}

.popup-content.custom-popup-content.action-menu-content .menu-header .identicon {
    max-width: 48px;
    max-height: 48px;
    border-radius: 4px;

    margin-right: 16px;

    font-family: Open Sans;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}

.time-details-content .direction-wrapper {
    display: flex;
    justify-content: center;
}

.time-details-content .direction-wrapper .direction {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    border-radius: 24px;
    background: #F4F7FA;
    align-items: center;
}

.time-details-content .direction .icon-wrapper {
    margin: 0 16px;
}

.time-details-content .direction .chain-icon {
    max-width: 56px;
    max-height: 56px;

    border: 2px solid #DEE1E4;
    border-radius: 8px;
}

.time-details-content .description {
    margin-top: 32px;

    font-family: Open Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #5F6264;
}

.time-details-content .final-amount {
    margin-top: 32px;
    width: 100%;
    background: #F4F7FA;
    color: #76797B;
    text-align: center;

    font-family: Open Sans;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0.5px;

    padding: 16px;
    border-radius: 24px;

    box-sizing: border-box;
}

.time-details-content .final-amount .value {
    font-family: Open Sans;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: #2E3031;
    margin-top: 8px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.time-details-content .final-amount img {
    margin-right: 8px;
}

.time-details-content .final-amount .value .code {
    color:#76797B;

    margin-left: 8px;
}

.time-details-content .description .title {
    font-family: Open Sans;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
    color: #2E3031;
    margin-bottom: 8px;
}

.footer-content .footer-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.audit-message {
    padding: 56px 48px 48px 48px;
    border-radius: 24px;
    background-color: #F4F7FA;
    width: 100%;
    margin-bottom: 40px;
    text-align: center;
    box-sizing: border-box;
}

.audit-message .text {
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.09em;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    text-transform: uppercase;
    color: #5F6264;
    margin-bottom: 24px;
}