@import url("./colors.css");

.rate .page-headline {
  position: relative;
  background-image:
	linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.911)),
	linear-gradient(0deg, #f70 0%, #f70 100%),
	url(/images/cc-pattern-12.png),
	linear-gradient(#fff, #fff);
  background-position: top, top, 0px -72.116px, top;
  background-size: auto, auto, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-blend-mode: normal, screen, normal, normal;

}

.page-headline-content .rates {
  display: flex;
  min-width: 39.1875rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;

}

.page-headline-content .rates .links {
  display: flex;
}

.page-headline-content .rates .rate {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.page-headline-content .rates .links .link {
  text-decoration: none;
}

.page-headline-content .rates .links .link.opacity {
  opacity: 0.5;
}

.page-headline-content .rates .links .separator {
  display: flex;
  width: 2.25rem;
  flex-direction: column;
  align-items: center;
  height: unset;
  justify-content: center;
}

.page-headline-content .card {
  display: flex;
  width: 100vw;
  padding: 1rem 2rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  /* flex: 1 0 0; */
  border-radius: 0.5rem;
  border: 1px solid var(--color-grey-200, #D9D9D9);
  background: rgba(255, 255, 255, 0.50);
  backdrop-filter: blur(25px);
}

.page-headline-content .card .actual-rate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.page-headline-content .card .actual-rate .currency {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-headline-content .card .actual-rate .opacity{
  opacity: 0.5;
}

.rate section:not(.graph-section){
  max-width: 80rem;
  padding-left: 0;
}

.rate .col-div, .rate .row-div{
  align-items: flex-start;
  margin: unset;
  max-width: 50rem;
  align-self: flex-start;
}

.graph-section {
  display: flex;
  flex-direction: row;
  padding: 0;
  max-width: 1600px;
  margin: 0 auto;
  border-top: 1px solid var(--color-grey-200);
}

.graph-section .graph {
  display: flex;
  min-width: 66.25rem;
  max-width: 66.25rem;
  padding: 4rem 4rem 4rem 10rem;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  flex-shrink: 0;
}

.graph-section .separator {
  display: flex;
  margin: 3rem 0.0625rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  width: 0.0625rem;
  height: 27rem;
  min-height: 100%;
  z-index: 5;
}

.graph-section .separator .vertical {
  height: 25rem;
  background: #FDAD66;
  width: 0.0625rem;
}

.graph-section .exchange .exchange-card,
.graph-section .separator {
  transition: top 600ms ease, transform 300ms ease, left 300ms ease;
  will-change: top, transform, left;
}

.graph-section .exchange {
  display: flex;
  padding: 4rem 10rem 4rem 4rem;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  flex: 1 0 0;
  align-self: flex-start;
}

.graph-section .exchange .exchange-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  align-self: stretch;
  border-radius: 1rem;
  backdrop-filter: blur(25px);
  max-width: 20rem;
  z-index: 5;
}

.graph-section .exchange .table {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  align-self: stretch;
}

.graph-section .exchange .exchange-card>.button {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}

.graph-section .exchange .table .info {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  gap: 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-grey-200);
  background: var(--color-white);
}
.graph-section .exchange .table #buy-now {
  width: 100%;
  justify-content: center;
  margin-top: 1.5rem;
}

.graph-section .exchange .table .info .amount {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: end;
  gap: 0.25rem;
}

.graph-section .exchange .exchange-card .button.swap{
  padding: 0.78125rem 0.75rem 0.71875rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-grey-200);
  background: var(--color-white);
}

.graph-section .exchange .exchange-card .button.swap:hover{
  border: 1px solid var(--color-grey-600);
}

.graph-section .exchange .exchange-card .button.swap .icon{
  filter: invert(0.8);
}

.graph-section .exchange .table .info .amount input {
  border: none;
  width: 13rem;
}

.graph-section .exchange .table .info .amount input:focus{
  outline: none;
}

.graph-section .exchange .table .info .amount .currency,
.graph-section .exchange .table .info .amount .currency:focus,
.graph-section .exchange .table .info .amount .currency:active,
.graph-section .exchange .table .info .amount .currency:hover {
  outline: none;
  border: none;
  background: none;
}

.graph-section .graph .graph-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.graph-section .graph .small-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.graph-section .graph .small-header .actual-money {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
  gap: 1.5rem;
  margin-right: 0.5rem;
}

.graph-section .graph .small-header .actual-money .currency-select {
  display: flex;
  padding: 0.375rem 0.625rem 0.375rem 1rem;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  background: var(--Grey-Grey-100, #F2F2F2);
  border: none;
}

.graph-section .graph .small-header .button-group {
  display: flex;
  align-items: center;
  background-color: var(--color-grey-100);
  border-radius: 0.5rem;
  padding: 0 0.15rem;
}

.graph-section .graph .small-header .button-group .button {
  text-wrap: nowrap;
  text-transform: uppercase;
}
.graph-section .graph .small-header #interval-checkboxes input{
  accent-color: #ff7700;
}


.graph-section .graph .table .more {
  display: flex;
  height: 1.5625rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  margin-top: 1rem;
}

i[class*="icon"].more {
  margin-top: 0 !important;
}

.opacity-05 {
  opacity: 0.5;
}

#dateLabel {
  position: absolute;
  background: #FF7F2A;
  color: white;
  border-radius: 5px;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  padding: 0.5rem 1.125rem;
}

#dateLabel {
  transform: translate(-50%, -100%);
}

.row-div .button-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.about {
  padding: 4rem;
}

canvas {
  height: 15rem !important;
}

.rate\/page-select {
  position: relative;
}

.rate\/page-select:focus-within .select {
  display: flex;
}

.select.select-hover:hover {
  display: flex !important;
}

.rate\/page-select:focus-within .dropdown {
  transform: rotate(180deg);
}

.rate\/page-select .select {
  display: none;
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: var(--Corner-radius-S, 0.5rem);
  border: 1px solid var(--Grey-Grey-200, #D9D9D9);
  background: var(--Grey-White, #FFF);
  /* shadow-sm */
  padding: 1rem;
  box-shadow: 0px 1px 3px 0px rgba(40, 40, 40, 0.10), 0px 1px 2px 0px rgba(40, 40, 40, 0.06);
  transition: all 0.2s ease-in-out;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 6;
}

.rate\/page-select .select .option {
  cursor: pointer;
  padding: 0;
  width: 100%;
  border: none;
  background: none;
}

.select .flex {
  gap: 0.5rem;
}

.rate\/page-select .select .option:hover {
  color: var(--color-orange-600, #FF7700);
  transition: all 0.2s ease-in-out;
}

.switch {
  position: relative;
  display: inline-block;
  width: 2.5rem !important;
  height: 1.5rem;
  background: var(--color-grey-500, #535353);

}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.4s;
  border-radius: 34px;
}

.slider::before {
  position: absolute;
  content: "";
  height: 1rem;
  width: 1rem;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* Állapot bekapcsolva */
input:checked+.slider {
  background: var(--color-grey-500, #535353);
}

input:checked+.slider::before {
  transform: translateX(1rem);
}

.page-headline .button {
  display: none;
}

.rate .cta.gardient {  
  background: url(/images/rate_chart_cta.png) 0px -70px / 100% 100% no-repeat;
  background: url(/images/rate_chart_cta.png)) 0px -478.689px / 100% 100% no-repeat;
  margin: 0 !important;
  background-size: cover;
}

@media (max-width: 1569px) {

  .page-headline-content .rates {
	min-width: 100%;
	align-items: center;
  }

  .page-headline .button {
	display: flex;
	width: 80%;
	margin: auto;
  }

  .page-headline-content {
	padding-bottom: 1rem;
	width: 100%;
	flex-direction: column !important;
	gap: 32px;
	justify-content: center;
	text-align: center;
	padding-bottom: 0;
	width: 80%;
  }

  .page-headline-content .card {
	width: 100%;
	align-items: center;
  }

  .graph-section {
	flex-direction: column;
  }

  .graph-section .graph {
	width:80%;
	max-width: 100%;
	padding: 2.5rem 1rem;
  }

  .graph-section .graph .small-header {
	display: flex;
	flex-direction: column-reverse;
	gap: 2rem;
  }

  .graph-section .graph .table {
	display: flex;
	flex-direction: column;
	gap: 2rem;
  }

  .graph-section .graph .table .more {
	flex-direction: column;
	justify-content: start;
	align-items: flex-start;
	gap: 1rem;
  }

  .button-rate {
	padding: 0.25rem 0.5rem !important;
  }

  .graph-section .separator {
	display: none;

  }

  .graph-section .exchange {
	display: none;
  }

  .rate .col-div, .rate .row-div {
	align-self: center;
  }

  .landing hr {
	display: none;
  }

  .page-headline-image{
	display: none;
  }
}

@media (max-width: 1569px) {
  .rate section:not(.graph-section) {
	padding-left: 1rem;
  }
}

@media (max-width: 1100px) {
  .page-headline{
	width:100%;
  }

  .graph-section .graph {
	min-width: 100%;
	padding: 0;
  }

  .rate .page-headline{
	background: linear-gradient(180deg, var(--color-grey-100) 0%, var(--color-white) 100%);
  }

  .page-headline .button {
	width: 100%;
	margin-top: 1rem;
  }

  .page-headline-content {
	width: 100%;
  }

  .rate .cta.gardient {
	background: url(/images/rate_chart_cta.png) 0px 0px / 100% 100% no-repeat;
  }

  .graph-section {
	border:none;
  }

  .graph-section .graph .small-header .actual-money {
	justify-content: space-between;
  }
  .rate\/page-select#intervals-config .select{
	left: -130px;
  }
  .rate\/page-select#intervals-config .interval-buttons{
	flex-direction:column;
	justify-content: center;
  }
  .rate\/page-select#intervals-config .interval-buttons button{
	width:100%;
	justify-content: center;
  }

}