/*
 * SMUSIM_DOTA_TOURNAMENT_CREATE_V1
 * V4 — sequential prize add
 */

.sm-dota-create[hidden] {
    display: none !important;
}


.sm-dota-create {
    width:
        min(
            760px,
            calc(
                100% - 32px
            )
        );

    margin:
        34px auto 0;

    padding:
        26px;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(
            85,
            131,
            180,
            .25
        );

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            rgba(
                8,
                18,
                33,
                .95
            ),
            rgba(
                4,
                11,
                21,
                .97
            )
        );

    box-shadow:
        0 22px 70px
        rgba(
            0,
            0,
            0,
            .27
        );
}


.sm-dota-create-head {
    margin-bottom:
        23px;
}


.sm-dota-create-eyebrow {
    margin-bottom:
        7px;

    color:
        rgba(
            152,
            190,
            229,
            .7
        );

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        2.3px;
}


.sm-dota-create-title {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        30px;

    font-weight:
        800;
}


.sm-dota-create-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        18px;
}


.sm-dota-create-field {
    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    min-width:
        0;
}


.sm-dota-create-field-wide {
    grid-column:
        1 / -1;
}


.sm-dota-create-label {
    color:
        rgba(
            225,
            235,
            247,
            .78
        );

    font-size:
        13px;

    font-weight:
        700;
}


.sm-dota-create-control {
    width:
        100%;

    height:
        52px;

    box-sizing:
        border-box;

    padding:
        0 16px;

    border:
        1px solid
        rgba(
            79,
            132,
            186,
            .32
        );

    border-radius:
        14px;

    outline:
        none;

    background:
        rgba(
            6,
            16,
            29,
            .94
        );

    color:
        #ffffff;

    font:
        inherit;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}


.sm-dota-create-control:hover {
    border-color:
        rgba(
            79,
            144,
            206,
            .55
        );
}


.sm-dota-create-control:focus {
    border-color:
        rgba(
            70,
            147,
            220,
            .8
        );

    box-shadow:
        0 0 0 4px
        rgba(
            35,
            102,
            168,
            .15
        );
}


.sm-dota-create-control option {
    color:
        #ffffff;

    background:
        #081321;
}


.sm-dota-create-money {
    position:
        relative;

    flex:
        1 1 auto;

    min-width:
        0;
}


.sm-dota-create-money
.sm-dota-create-control {
    padding-right:
        52px;
}


.sm-dota-create-currency {
    position:
        absolute;

    top:
        50%;

    right:
        18px;

    transform:
        translateY(
            -50%
        );

    color:
        rgba(
            220,
            233,
            247,
            .7
        );

    font-size:
        17px;

    font-weight:
        800;

    pointer-events:
        none;
}


.sm-dota-prize-entry {
    display:
        flex;

    align-items:
        stretch;

    gap:
        12px;
}


.sm-dota-prize-add {
    width:
        150px;

    flex:
        0 0 150px;

    height:
        52px;

    border:
        1px solid
        rgba(
            67,
            142,
            214,
            .55
        );

    border-radius:
        14px;

    background:
        #102e50;

    color:
        #ffffff;

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        900;

    cursor:
        pointer;

    transition:
        border-color .15s ease,
        background .15s ease,
        transform .15s ease;
}


.sm-dota-prize-add:hover {
    border-color:
        rgba(
            89,
            164,
            235,
            .85
        );

    background:
        #163d68;

    transform:
        translateY(
            -1px
        );
}


.sm-dota-prize-list {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        12px;
}


.sm-dota-prize-row {
    min-height:
        50px;

    box-sizing:
        border-box;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        0 16px;

    border:
        1px solid
        rgba(
            79,
            132,
            186,
            .24
        );

    border-radius:
        14px;

    background:
        rgba(
            6,
            16,
            29,
            .78
        );
}


.sm-dota-prize-row-place {
    color:
        rgba(
            210,
            225,
            241,
            .75
        );

    font-size:
        13px;

    font-weight:
        800;
}


.sm-dota-prize-row-amount {
    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        900;

    white-space:
        nowrap;
}


.sm-dota-create-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    padding-top:
        6px;
}


.sm-dota-create-button {
    min-width:
        190px;

    height:
        52px;

    padding:
        0 28px;

    border:
        1px solid
        rgba(
            67,
            142,
            214,
            .55
        );

    border-radius:
        14px;

    background:
        linear-gradient(
            180deg,
            #173a63,
            #0b2949
        );

    color:
        #ffffff;

    font:
        inherit;

    font-size:
        14px;

    font-weight:
        900;

    cursor:
        pointer;
}


.sm-dota-create-message {
    min-height:
        20px;

    color:
        rgba(
            183,
            207,
            230,
            .78
        );

    font-size:
        12px;

    font-weight:
        700;
}


.sm-dota-create-message.is-error {
    color:
        #ffb5b5;
}


.sm-dota-create-message.is-ok {
    color:
        #a8d8ff;
}


@media (
    max-width: 680px
) {

    .sm-dota-create {
        width:
            calc(
                100% - 20px
            );

        margin-top:
            24px;

        padding:
            20px 16px;
    }


    .sm-dota-create-grid {
        grid-template-columns:
            1fr;
    }


    .sm-dota-create-field-wide {
        grid-column:
            auto;
    }


    .sm-dota-prize-entry {
        flex-direction:
            column;
    }


    .sm-dota-prize-add {
        width:
            100%;

        flex-basis:
            auto;
    }


    .sm-dota-prize-list {
        grid-template-columns:
            1fr;
    }


    .sm-dota-create-actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .sm-dota-create-button {
        width:
            100%;
    }
}