/*
    This file is for the competition block found in account manage and account competitions.
*/

/*
    <div class="account-competition-block">
        <div class="account-competition-block-head">
            <div>Title</div>
            <div>Countdown timer</div>
            <div>Call to action/button</div>
        </div>
        <div class="account-competition-block-content">
            <div class="description">Admin-provided subscription content</div>
            <div class="timeline"> 
                <div class="step done">Filled-in step</div>
                <div class="step">Future step</div>
            </div>
        </div>
    </div>
*/

.account-competition-block {
    width: 100%;
    background-color: white;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.13);
    margin: 30px 0;
    position: relative;
    z-index: 10;
}


.account-competition-block-head {
    display: flex;
    flex-direction: row;
    min-height: 115px;
    padding: 15px 5%;
    align-items: center;
    border-bottom: 0.5px solid #C8C6C4;
    flex-wrap: wrap;
}

    .account-competition-block-head > div {
        flex: 0 0 auto;
        display: flex;
        padding-top: 7px;
        padding-bottom: 7px;
        max-width: 100%;
    }

        .account-competition-block-head > div:nth-child(1),
        .account-competition-block-head > div:nth-child(3) {
            flex-basis: 25%;
            flex-grow: 1;
        }

        .account-competition-block-head > div:nth-child(2) {
            flex-grow: 2;
            padding-left: 15px;
            padding-right: 15px;
        }


    .account-competition-block-head .js-countdown {
        margin: 0 auto;
        white-space: nowrap;
    }

    .account-competition-block-head .c-call-to-action,
    .account-competition-block-head .c-hyperlink,
    .account-competition-block-head .c-button {
        margin-left: auto;
        margin-top: 0;
    }

    .account-competition-block-head .c-call-to-action,
    .account-competition-block-head .c-button {
        border: 2px solid #5C2E91;
        box-sizing: border-box;
        color: #5C2E91;
        font-size: 18px;
        line-height: 33px;
        background-color: white;
        padding: 5px 20px;
        box-sizing: content-box;
    }

        .account-competition-block-head .c-call-to-action::after {
            content: "\E76C";
            font-family: MWF-MDL2;
            vertical-align: middle;
            padding-left: 5px;
        }

    .account-competition-block-head h1,
    .account-competition-block-head h2,
    .account-competition-block-head h3,
    .account-competition-block-head h4,
    .account-competition-block-head h5,
    .account-competition-block-head h6,
    .account-competition-block-head *[class*="c-heading-"] {
        margin: 0;
        padding: 0;
        font-size: 24px;
        line-height: 28px;
        color: black;
        font-weight: 600;
    }

    .account-competition-block-head .js-countdown > span {
        font-size: 25px;
        color: #767676;
        font-weight: 500;
    }

        .account-competition-block-head .js-countdown > span > span:last-child {
            font-size: 14px;
            color: #767676;
            font-weight: 400;
        }


.account-competition-block-content {
    padding: 3% 12%;
}

    .account-competition-block-content .description {
        margin-bottom: 5%;
    }

    .account-competition-block-content .timeline {
        width: 90%;
        display: flex;
        flex-direction: row;
        margin: 10px auto;
    }

        .account-competition-block-content .timeline .step {
            flex-grow: 1;
            flex: 1;
            width: 0;
            position: relative;
        }

        @media screen and (min-width: 768px){
            .account-competition-block-content .timeline .step{
                max-width: 24.9%;
            }
        }

            .account-competition-block-content .timeline .step span {
                padding-right: 10px;
                display: block;
                font-size: 13px;
                color: black;
                line-height: 17px;
                font-weight: 400;
                max-width: 150px;
            }

            .account-competition-block-content .timeline .step:before {
                content: " ";
                border-radius: 50%;
                width: 20px;
                height: 20px;
                background-color: white;
                border: 2px solid #C8C6C4;
                display: block;
                transition: all 1s step-end;
                z-index: 1;
                box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
            }

            .account-competition-block-content .timeline .step:not(:first-child):after {
                content: " ";
                width: 100%;
                height: 5px;
                display: block;
                background-color: #D5D5D5;
                background: linear-gradient(to right, #5C2E91 50%, #C8C6C4 50%);
                background-size: 200% 100%;
                background-position: right bottom;
                position: absolute;
                top: 8px;
                left: -100%;
                z-index: -1;
                transition: all 1s ease-out;
            }

            .account-competition-block-content .timeline .step.done {
                color: #919191;
            }

            .account-competition-block-content .timeline .step.done:before {
                background-color: #5C2E91;
                border-color: #5C2E91;
            }

            .account-competition-block-content .timeline .step.open:after,
            .account-competition-block-content .timeline .step.done:after {
                background-position: left bottom;
            }

            .account-competition-block-content .timeline .step.open:before {
                border: 2px solid #5C2E91;
            }


            .account-competition-block-content .timeline .step span:first-child {
                display: block;
                margin-top: 20px;
                margin-bottom: 10px;
                font-weight: 500;
            }


@media screen and (max-width: 768px){
    .account-competition-block-content .timeline {
        flex-direction: column;
        display: grid;
        grid-auto-rows: 1fr;
        width: auto;
        /*width: fit-content;*/
        margin: 0 auto;
    }

    .account-competition-block-content .timeline .step {
        width: 100%;
        padding: 5px 0;
        padding-left: 35px;
    }

        .account-competition-block-content .timeline .step span:first-child {
            margin-top: 0;
            display: inline-block;
        }

        .account-competition-block-content .timeline .step span {
            display: block;
        }


        .account-competition-block-content .timeline .step:before {
            display: inline-block;
            position: absolute;
            left: 0;
            top: 13px;
        }

        .account-competition-block-content .timeline .step:not(:first-child):after {
            width: 5px;
            top: -100%;
            left: 8px;
            height: 100%;
            top: -70%;
        }
}