@import ../../../../styles/helpers

.group
    a
        text-decoration: none

.button
    position: relative
    user-select: none
    cursor: pointer
    &.open
        svg
            transform: rotate(-180deg)
    svg
        transition: all .2s
        +d
            width: 15px
            height: 15px
        +m
            width: 10px
            height: 10px

.body
    position: fixed
    width: 0px
    overflow: visible
    visibility: hidden
    opacity: 0
    transform: translate(0%, 0px) scale(.9)
    transform-origin: 0% 0px
    will-change: transform
    animation: showBody .4s forwards
    +d
        width: auto
        margin-right: -416px
        transform: translate(0%, 0%) scale(1)
        visibility: visible
        opacity: 1
        animation: none
    +t
        margin-right: -344px
    +m
        left: 50% !important
        transform: translateX(-50%)
        margin: 0
        padding: 0

@keyframes showBody
  0%
    visibility: hidden
    opacity: 0
    transform: translate(0%,0px) scale(.9)
  100%
    visibility: visible
    opacity: 1
    transform: translate(0%,0) scale(1)

.inner
    width: 740px
    margin: 0 auto
    background: white
    border-radius: 24px
    border: 1px solid #707070
    +d
        max-width: 100%
        margin: 0
    +t
        width: 708px
    +m
        position: absolute
        top: 1em
        left: 50%
        transform: translateX(-50%)
        min-width: min-content
        width: 50%
        padding: 24px
    >.scrollbox
        position: absolute
        top: 0
        left: 0
        height: calc(calc(calc(100% / 9) * 10) + 24px)
        width: 0

.row
    display: flex
    +m
        display: block

.col
    padding: 36px 46px 46px 46px
    +t
        padding: 20px 30px 30px 30px
    +m
        padding: 0
    &:first-child
        display: flex
        flex-direction: column
        flex: 0 0 100%
        // +d
        //     flex: 0 0 380px
        // +t
        //     flex: 0 0 280px
    &:nth-child(2)
        flex-grow: 1
        border-left: 1px solid $neutrals6
        border-color: $neutrals3
        +m
            display: none

.header
    +form-header
    color: $neutrals1
    padding-bottom: 24px
    border-bottom: 1px solid $neutrals3
    +t
        padding-bottom: 18px
    
.menu
    display: flex
    flex-wrap: wrap
    justify-content: space-between
    margin-top: 2.6875em
    +t
        margin-top: 1.9em
    +m
        margin-top: 0.25em

.spacer
    padding-bottom: 43px
    margin-bottom: 43px
    border-bottom: 1px solid $neutrals3
    min-width: calc(50% - 19.5px)
    max-width: calc(50% - 19.5px)
    +t
        padding-bottom: 30px
        margin-bottom: 30px
    +m
        display: none

.cell
    display: flex
    width: calc(50% - 19.5px)
    +m
        width: 100%
        margin-top: 1.75em

.details
    display: flex
    flex-direction: column
    justify-content: space-between
    height: 100%
    width: auto

.logo
    display: flex
    justify-content: center
    align-items: center
    min-width: 115px
    min-height: 115px
    max-width: 115px
    max-height: 115px
    margin-right: 23px
    border-radius: 23px

.subtitle
    +dropdown-label
    color: $neutrals1b

.description
    margin-top: 2px
    +caption-1
    font-weight: 400
    color: $neutrals4

.dlbutton
    display: flex
    padding: 0px 14px
    justify-content: space-between
    min-width: 90px
    width: fit-content
    height: 36px
    font-size: 12px
    font-weight: 500
    transition: all .2s
    background: $red
    &:hover
        background: darken($red, 10)