/* colors */

$font-dark: #5E6981
$font-light: #9FA8BC
$bkg-dark: #D2D8E5
$bkg-base: #ECF0F3

$primary-color-light: #49EBE1
$primary-color-base: #27C5C5
$primary-color-dark: #11A1AA

/* primary colors green
/* $primary-color-light: #11AA33
/* $primary-color-base: #27C54D
/* $primary-color-dark: #4DEB49


/* body

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap')

html, body
  background-color: $bkg-base
  padding: 0
  margin: 0
  font-family: 'Poppins', Roboto, sans-serif
  color: $font-dark

textarea:focus, input:focus
  outline: none

.header
  width: 100%
  margin: 0
  background: $bkg-base
  box-shadow: 0 4px 4px $bkg-dark
  height: 7rem

.headerContainer, .subNavigation
  width: 90%
  padding: 0 2rem
  margin: auto

.footer
  width: 100%
  position: fixed
  padding: 2rem 0 0
  bottom: 0
  height: 6rem
  border-top: $primary-color-base solid 1px
  background-color: $bkg-base

.navigation
  width: 50%
  margin: 0 auto
  display: flex
  justify-content: space-between

.subNavigation
  display: flex
  justify-content: space-around
  p
    font-weight: 500
    color: $font-light

.active
  color: $font-dark !important

.navigationButtons
  height: 4rem
  width: 4rem
  border: none
  border-radius: 100px

.activated
  background: linear-gradient(135.48deg, #11A1AA 11.87%, #49EBE1 86.25%)
  border: 1px solid #27C5C5

.confirmTimeContainer
  display: flex
  flex-direction: column
  align-items: center
  p
    font-weight: 500

.confirmTimeButton
  height: 3rem
  width: 3rem
  background: #ECF0F3
  box-shadow: -4.6696px -4.6696px 9.33921px #FFFFFF, 4.6696px 4.6696px 9.33921px #D2D8E6
  border: none
  border-radius: 100px