.settingsSection
  background-color: var(--card-bg-color)
  width: 85%
  margin: 0 auto
  @media only screen and (max-width: 800px)
    width: 100%

  &[open]
    padding-bottom: 15px

  > div
    width: 100%
    padding: 0px 20px
    box-sizing: border-box
  > div:not(:last-child):not(.ft-flex-box)
    @media only screen and (max-width: 800px)
      margin-bottom: 20px

.sectionLine
  width: 100%
  height: 2px
  border: 0
  margin-top: -1px
  background-color: var(--primary-color)

.sectionHeader
  display: block
  cursor: pointer
  padding: 1px

.sectionTitle
  margin-left: 2%

:deep(.switchGrid)
  display: grid
  grid-template-columns: auto auto
  justify-content: space-evenly
  align-items: center

  @media only screen and (max-width: 680px)
    grid-template-columns: auto

:deep(.switchColumnGrid)
  @extend :deep(.switchGrid)
  align-items: start

:deep(.switchColumn)
  display: flex
  flex-direction: column
  justify-items: start

:deep(.center)
  text-align: center

@media only screen and (max-width: 460px)
  :deep(.settingsFlexStart460px)
    justify-content: flex-start

@media only screen and (max-width: 500px)
  :deep(.settingsFlexStart500px)
    justify-content: flex-start

@media only screen and (max-width: 680px)
  .settingsSection
    > div
      :deep(.text.bottom)
        left: -85px
    :deep(.switch-ctn.containsTooltip)
      left: -10px
      margin-right: 5px
      padding: 0px 10px 0px 10px
    :not(.select, .selectLabel)
      > :deep(.tooltip)
        display: inline-block
        position: absolute
        right: -25px
        top: 12px
    .settingsFlexStart460px :deep(.tooltip)
      right: 0px
      top: -2px
    :deep(.switch-ctn)
      margin: 10px 7px