import styled from "styled-components"

export const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  height: inherit;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #ab2185 0%, #5a24b3 79.67%);
  min-height: 100vh;
  padding: 16px 16px 6px 16px;
`
export const Background = styled.div`
  position: fixed;
  background: linear-gradient(90deg, #ab2185 0%, #5a24b3 79.67%);
  background-size: cover;
  width: 100%;
  height: 100%;
  z-index: -1;
`
export const Header = styled.p`
  font-family: Oswald;
  font-style: normal;
  font-weight: 500;
  font-size: 30px;
  line-height: 140%;
  text-align: center;
  color: #ffffff;
  margin-bottom: 40px;
`
export const OffersWrapper = styled.div`
  width: 85%;
  max-width: 1720px;
`
const Arrow = styled.img`
  width: 38px;
  height: 70px;
`
export const LeftArrow = styled(Arrow)``
export const RightArrow = styled(Arrow)``
export const OffersList = styled.div`
  display: flex;
  flex-direction: row;
`
export const LoginButton = styled.div`
  background: white;
  z-index: 999;
  border-radius: 50px;
  width: 376px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  :hover {
    cursor: pointer;
  }
`
export const LoginText = styled.p`
  font-family: Oswald;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  display: flex;
  align-items: center;
  text-align: center;
  color: #9147d7;
  text-transform: uppercase;
  margin-bottom: 0;
`
export const CredifyImageWrapper = styled.div``

export const CredifyImage = styled.img`
  width: 178px;
  height: 24px;
  margin-top: 16px;
`
export const CredifyCheckbox = styled.input`
  margin-top: 16px;
`

export const UICustomizationText = styled.label`
  font-family: Oswald;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
`

export const ServiceInstanceWrapper = styled.div`
  margin-top: 20px;
`