@import url('fonts/inter.css');


* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    font-size: 18px;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    color: #f4f4f4;
    background-color: #20123A;
    overflow: hidden;
}

body {
    padding: 1rem;
}

a {
    color: #f4f4f4;
    text-decoration: none;
}
a:visited {
    color: #f4f4f4;
    text-decoration: none;
}
a:active {
    color: #e31587;
    text-decoration: none;
}
a:hover {
    color: #f4f4f4;
    text-decoration: underline;
}
@media screen and (max-width:900px) {
    a,a:visited,a:active,a:hover {
        color: #f4f4f4;
        text-decoration: underline;
    }
}

.bg {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='blobs-kLEsZ' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1280 800'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: url(%23Gradiente_sem_nome_6); %7D .cls-2 %7B fill: url(%23Gradiente_sem_nome_3); %7D .cls-3 %7B fill: url(%23Gradiente_sem_nome_7); %7D %3C/style%3E%3ClinearGradient id='Gradiente_sem_nome_7' data-name='Gradiente sem nome 7' x1='-318.53' y1='941.38' x2='-317.59' y2='941.38' gradientTransform='translate(-141077.03 326260.97) rotate(42.18) scale(357.58 -357.58)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23e31587'/%3E%3Cstop offset='1' stop-color='%23fc4055'/%3E%3C/linearGradient%3E%3ClinearGradient id='Gradiente_sem_nome_6' data-name='Gradiente sem nome 6' x1='-319.65' y1='941.86' x2='-318.7' y2='941.86' gradientTransform='translate(-240063.16 -449320.86) rotate(170.57) scale(511.74 -511.74)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23e31587'/%3E%3Cstop offset='1' stop-color='%2320123a'/%3E%3C/linearGradient%3E%3ClinearGradient id='Gradiente_sem_nome_3' data-name='Gradiente sem nome 3' x1='-318.67' y1='941.78' x2='-317.72' y2='941.78' gradientTransform='translate(-32875.6 871288.55) rotate(20.89) scale(878.03 -878.03)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff9640'/%3E%3Cstop offset='1' stop-color='%23fc4055'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath class='cls-3' d='m-320.2-558.84c-179.87-73.39-386.2,13.51-460.84,194.09-74.64,180.58,10.67,386.47,190.54,459.86L817.09,669.44c179.88,73.39,386.2-13.51,460.84-194.09,74.64-180.58-10.66-386.47-190.54-459.86L-320.21-558.84h0Z'/%3E%3Cpath class='cls-1' d='m-1182.5,422.82c-194.27-10.6-361.49,138.72-373.52,333.53-12.01,194.8,135.73,361.32,330,371.92C-360.07,1175.51,385.34,509.87,438.92-358.5c53.56-868.33-605.02-1610.56-1470.96-1657.8-194.27-10.6-361.5,138.73-373.52,333.53-12.01,194.81,135.73,361.32,330,371.92,477.41,26.05,840.5,435.26,810.97,913.98-29.53,478.76-440.5,845.74-917.91,819.7Z'/%3E%3Cpath class='cls-2' d='m2359.84-1331.84c120.25-153.34,341.27-179.2,493.67-57.76,152.4,121.45,178.47,344.19,58.21,497.53L1847.09,465.51c-120.25,153.34-341.27,179.2-493.68,57.76L4.11-551.88c-152.4-121.44-178.47-344.19-58.22-497.53,120.25-153.34,341.27-179.2,493.67-57.77L1512.93-251.9l846.91-1079.94h0Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
	height: 100%;
	overflow: visible;
	position: -webkit-sticky;
	position: sticky;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	width: 100%;
    z-index: 9999;
}

.app {
    padding: 1rem;
    display: grid;
    grid: "from swap to" 1fr "status status status" auto / 1fr auto 1fr;
    grid-gap: 1rem;
    overflow: hidden;
    min-height: 400px;
    max-width: 1024px;
    margin: 1em auto;
}

.logo--container {
    display: block;
    margin: auto;
    max-width: 1024px;
    max-height: auto;
    padding-bottom: 1rem;
}

.logo {
    padding: 0.7em;
    width: 18rem;
    height: auto;
    }

@media screen and (max-width: 640px) {
  .app {
    grid: "from from" auto "status swap" auto "to to" auto / 1fr;
  }
  .logo {
    display: block;
    margin: auto!important;
    width: 13.5rem!important;
    height: auto;
    }
}

.panel {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-gap: 1rem;
}

label {
    padding: 0;
    display: flex;
    align-items: center;
}

.custom-select select {
    display: none;
}

.select-selected {
    background-color: transparent;
}

.lang-select {
    padding: 0.25rem 0.5rem;
    margin-left: 1rem;
    background: rgba(244, 244, 244, 0);
    font-size: 0.9rem;
    color: #f4f4f4;
    border: 1.3px solid #f4f4f4;
    border-radius: 5px;
    cursor: pointer;
}

.panel--from {
    grid-area: from;
}

.panel--to {
    grid-area: to;
}

.swap {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Camada_2' data-name='Camada 2' viewBox='0 0 100.2 61.69'%3E%3Cdefs%3E%3Cstyle%3E .cls-1%7Bfill:%23fff%7D %3C/style%3E%3C/defs%3E%3Cg id='blobs-kLEsZ'%3E%3Cpath d='M36.02 49.88a6.893 6.893 0 0 1 0 9.79c-2.72 2.7-7.14 2.7-9.86 0L2.04 35.74a6.893 6.893 0 0 1 0-9.79L26.16 2.03c2.72-2.7 7.14-2.7 9.86 0a6.893 6.893 0 0 1 0 9.79L16.84 30.85l19.18 19.03ZM64.18 49.88l19.18-19.03-19.18-19.03a6.893 6.893 0 0 1 0-9.79c2.72-2.7 7.14-2.7 9.86 0l24.11 23.93a6.893 6.893 0 0 1 0 9.79L74.04 59.68c-2.72 2.7-7.14 2.7-9.86 0a6.893 6.893 0 0 1 0-9.79Z' class='cls-1'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1.3rem;
    align-self: center;
    grid-area: swap;
}

#status {
    font-size: 15px;
    grid-area: status;
    text-align: left;
    align-self: center;
}

#versionBlock {
    font-size: 13px;
    text-align: left;
    margin-top: 1.3rem;
}
#version {
    font-weight: 800;
}

textarea {
    padding: 1rem;
    font-family: sans-serif;
    font-size: 1rem;
    resize: none;
    border-radius: 5px;
    border: 1px solid #ccc;
}

button {
    cursor: pointer;
    border: 0;
    background: rgba(255, 255, 255, 0);
    padding: 0;
    padding: 0.25rem 0.5rem;
    width: 1.3rem;
    height: 1.3rem;
}
button:hover {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Camada_2' data-name='Camada 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 123.14'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %2320123a; %7D %3C/style%3E%3C/defs%3E%3Cg id='blobs-kLEsZ'%3E%3Cg%3E%3Cpath class='cls-1' d='m71.89,99.56c5.44,5.39,5.44,14.14,0,19.53-5.44,5.39-14.25,5.39-19.69,0L4.08,71.34c-5.44-5.39-5.44-14.14,0-19.53L52.21,4.05c5.44-5.39,14.25-5.39,19.69,0,5.44,5.39,5.44,14.14,0,19.53l-38.29,37.99,38.29,37.99h0Z'/%3E%3Cpath class='cls-1' d='m128.11,99.56l38.29-37.99-38.29-37.99c-5.44-5.39-5.44-14.14,0-19.53,5.44-5.39,14.25-5.39,19.69,0l48.13,47.76c5.44,5.39,5.44,14.14,0,19.53l-48.13,47.76c-5.44,5.39-14.25,5.39-19.69,0-5.44-5.39-5.44-14.14,0-19.53h0Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1.3rem;
    align-self: center;
    grid-area: swap;
}
@media screen and (max-width:650px) {
    button {
        transform: rotate(90deg)!important;
    }
}

#output {
    background-color: #f4f4f4;
}