@import ../styles/helpers

.section
    text-align: center

.form
    text-align: left
    margin: 0 auto
    margin-top: 64px
    margin-bottom: 64px
    height: 100%
    width: 100%
    padding: 64px 64px 54px 64px
    background: $neutrals2
    border-radius: 24px
    transition: all .2s
    +d
        padding: 60px 48px
    +a
        width: 100%
        padding: 48px 36px

.ipd-section
    text-align: left
    margin: 0 auto
    margin-top: 32px
    margin-bottom: 64px
    height: 100%
    width: 100%
    transition: all .2s

.ipd-buttons 
    text-align: center

.button-change-ipd
    width: 100%

.button-set-ipd
    width: 30%
    border: 2px solid $neutrals6
    border-color: $neutrals6
    background-color: $neutrals2
    margin: 5px 5px 5px 5px 
    &:hover
        background: darken($blue, 10)

.button-selected
    width: 30%
    background-color: $blue
    margin: 5px 5px 5px 5px
    &:hover
        background: darken($blue, 10)

.button-disabled
    width: 30%
    background-color: $neutrals1
    margin: 5px 5px 5px 5px
    &:hover
        background-color: #000

.button-cancel
    width: 100%
    margin: 30px 5px 5px 5px
    background-color: $red
    &:hover
        background: darken($red, 10)

.button-confirm-ipd
    width: 100%
    background-color: $blue
    margin: 30px 5px 5px 5px
    &:hover
        background: darken($blue, 10)

.header
    margin-bottom: 40px
    font-family: "Neue Haas Grotesk Display Pro - 55 Roman", sans-serif
    font-style: normal
    font-weight: 500
    font-size: 48px
    line-height: 56px

.header-medium
    margin-top: 40px
    margin-bottom: 20px
    font-family: "Neue Haas Grotesk Display Pro - 55 Roman", sans-serif
    font-style: normal
    font-weight: 500
    font-size: 36px
    line-height: 42px
    font-color: $white

.bullet
    margin-bottom: 10px
    font-size: 22px
    line-height: 36px

.header-scan
    margin-top: 40px
    margin-bottom: 20px
    font-size: 28px
    font-weight: 700
    line-height: 30px

.text-scan
    font-size: 22px
    font-weight: 400
    margin-bottom: 40px

.text-change-ipd
    margin-bottom: 30px
    font-family: "Neue Haas Grotesk Display Pro - 55 Roman", sans-serif
    font-size: 24px
    line-height: 32px

.font-body-sm > a
    color: #451BDE;

.detail
    > a
        color: #451BDE;

.ipd
    font-weight: 700

.loader
    margin: 0
    g
        opacity: 1 !important

.fadein
    -webkit-animation: 1s ease 0s normal forwards 1 fadein;
    animation: 1s ease 0s normal forwards 1 fadein;

.fadein2
    -webkit-animation: 11s ease 0s normal forwards 1 fadein;
    animation: 11s ease 0s normal forwards 1 fadein;

@keyframes fadein
    0%
        opacity: 0
    66%
        opacity: 0
    100%
        opacity: 1

@-webkit-keyframes fadein
    0%
        opacity: 0
    66%
        opacity: 0
    100%
        opacity: 1
    
.big-order
    display: flex
    text-align: left
    flex-direction: column
    margin: 0 auto
    margin-bottom: 64px
    width: 100%
    padding: 32px 64px 54px 64px
    background: $neutrals2
    border-radius: 24px
    transition: all .2s

.line-item-header
    font-weight: 600

.row
    display: flex
    width: 60%
    flex-grow: 1
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px

    .poster
        position: relative
        display: inline-block
        vertical-align: top
        flex-shrink: 0
        width: 345px
        height: 200px
        overflow: hidden
        margin: 0 0 0 0

        .image
            position: absolute
            z-index: 1
            top: 0px
            left: 0px
            width: 345px
            border-radius: 6px

    .info
        margin-left: 10px
        flex-shrink: 0
        flex-grow: 1

.surface
    position: relative
    display: block
    width: 100%
    height: 100%