@import "@/styles/mixins.scss"
@import "@/styles/variables.scss"

$close-padding: 1rem
$close-icon-size: 1rem

$container-padding: 2rem

.container
  background-color: #FFF
  box-shadow: $shadow-long
  border: 1px solid $lineColor
  border-radius: .5rem
  width: 600px
  max-height: 100%
  overflow: auto

.mask
  top: 0
  left: 0
  width: 100%
  height: 100%
  z-index: 99998
  position: fixed
  background-color: rgba(#000, .5)
  display: flex
  justify-content: center
  align-items: center
  padding: 1rem

.close
  display: flex
  justify-content: flex-end
  padding: $close-padding
  &_icon
    cursor: pointer
    width: $close-icon-size
    height: $close-icon-size
    color: #000
    background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23aaa' viewBox='0 0 16 16'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E") no-repeat 50%/1em auto

.form_wrapper
  margin-top: -($container-padding - 1rem)
  padding: 0 $container-padding $container-padding

.header
  margin-bottom: $container-padding
  p
    color: grey
  //h2
  //  font-size: 16px

.form
  //width: 100%
  height: 100%
  :global(.dropdown)
    width: 100% !important

.select
  width: 100%

.checkbox
  input
    margin-right: 1rem
  a
    color: $B1
    &:hover
      text-decoration: underline

.require_mark
  color: red

.submit
  width: 100%