@import "color";
.section.live-result-map-container
{
    &.result
    {
        margin: 20px 10px;

        .live-elected-candidate.section .parti-group:last-child
        {
            margin-bottom: 0;
        }

        .combine-layout
        {
            padding-bottom:0;
        }
    }

    border-bottom: 0px;

    .section
    {
        border: 0 !important;
    }

    h2.gastyle
    {
        background-color: rgba(134, 164,170, 0.9);
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        color: #FFF;
        padding: 14px 20px;
        font-size: 18px;
        line-height: 20px;
        text-transform: uppercase;
    }
}
.result-navigation
{
    background-color: @dark-blue-70-fallback;
    background-color: @dark-blue-70;
    width: 100%;
    box-sizing: border-box;

    ul
    {
        width: 100%;
        height: 30px;

        li
        {
            float: left;
            width: 33.33333%;
            text-align: center;
            position: relative;

            a
            {
                display: block;
                padding: 4px 15px;
                font-size: 14px;
                font-family: "gibsonRegular", sans-serif;
                line-height: 22px;
                height: 30px;
                text-transform: uppercase;
                background-color: @background;
                color: black;
                box-sizing: border-box;
                margin: 0 1px;
            }

            &.selected
            {
                a
                {
                    background-color: black;
                    color: white;
                    // black triangle
                    &:before
                    {
                        display: block;
                        content: " ";
                        width: 0;
                        height: 0;
                        border-left: 10px solid transparent;
                        border-right: 10px solid transparent;
                        border-top: 10px solid black;
                        position: absolute;
                        left: 50%;
                        margin-left: -10px;
                        bottom: -8px;
                    }
                }
            }
        }
    }
}

.greater-constituencies-container
{
    .bottomBorder()
    {
        border-bottom: 1px solid @bottom-border;
    }

    &.boxed
    {
        background-color: rgba(255,255,255,08);
        padding-bottom: 0 !important;
    }

    &.dr-list-icon
    {
        h2
        {
            margin-bottom: 0;
            .bottomBorder();
        }

        li
        {
            font: 14px/1 gibsonSemiBold;
            color: #000;

            &.selected
            {
                color: red;
            }

            &.greater-constituency
            {
                margin: 0 -20px;
                .bottomBorder();
                padding: 10px 20px;

                &[class*="dr-icon-arrow-"]:before
                {
                    float: right !important;
                    color: @primary;
                }

                span
                {
                    cursor: pointer;

                    &.openclose
                    {
                        display: inline-block;
                        float: right;
                        width: 23px;
                        height: 14px;
                    }
                }
            }

            &.constituency
            {
                background: transparent url("/assets/img/border.svg") repeat-x scroll -2px 100%;
                font: 14px/1 gibsonRegular;
                cursor: pointer;

                &:last-child
                {
                    background: none;
                    .bottomBorder();
                    margin: 0 -20px;
                    padding: 10px 20px;
                }
            }
        }
    }

    @media (max-width: 400px)
    {
        &.dr-list-icon
        {
            li
            {
                &.greater-constituency
                {
                    margin: 0 -10px;
                    padding: 10px;
                }

                &.constituency
                {
                    &:last-child
                    {
                        margin: 0 -10px;
                        padding: 10px 10px;
                    }
                }
            }
        }
    }   
}

 @media (max-width:700px)
    {
        .section.live-result-map-container
        {
            .greater-constituencies-container
            {
                margin-top:0;
            }

            &.result
            {
                margin: 20px 10px;

                .live-result-map, .gastyle
                {
                    display: none !important;
                }
            }
        }
    }

.greater-constituencies-container.mobile
{
    display:none;
}

html.mobile
{
    .section.live-result-map-container .greater-constituencies-container.mobile.dr-list-icon li.greater-constituency:last-child
    {
        border-bottom:0 !important;
    }

    .live-result-table.section
    {
        margin-top: 0 !important;
    }

    .result-navigation-container.result
    {
        .result-navigation
        {
            display: none;
        }

        .result-history
        {
            margin-top: 0;
        }
    }

    .section.live-result-map-container
    {
        .result-navigation
        {
            display: none;
        }

        .live-elected-candidate
        {
            margin-top: 0;
        }







        .greater-constituencies-container.desktop
        {
            display: none;
        }

        .greater-constituencies-container.mobile
        {
            display: block;

            .bottomBorder()
            {
                border-bottom: 1px solid @bottom-border;
            }

            &.boxed
            {
                background-color: rgba(255,255,255,08);
                padding-bottom: 0 !important;
                padding-top: 0 !important;
            }

            &.dr-list-icon
            {
                li
                {
                    font: 14px/1 gibsonSemiBold;
                    color: #000;

                    &.selected
                    {
                        color: red;
                    }

                    &.greater-constituency
                    {
                        &:after
                        {
                            clear: both;
                            content: ".";
                            display: block;
                            visibility: hidden;
                            height: 0;
                            line-height: 0;
                        }

                        h2
                        {
                            border: 0;
                            font-size: 18px;
                            line-height: 1;
                            text-transform: uppercase;
                            float: left;
                        }

                        margin: 0 -20px;
                        //.bottomBorder();
                        padding: 10px 20px;

                        &[class*="dr-icon-arrow-"]:before
                        {
                            float: right !important;
                            color: @primary;
                        }

                        span
                        {
                            cursor: pointer;

                            &.openclose
                            {
                                display: inline-block;
                                float: right;
                                width: 23px;
                                height: 14px;
                            }
                        }
                    }

                    &.greater-constituency
                    {
                        background: transparent url("/assets/img/border.svg") repeat-x scroll -2px 100%;
                        font: 14px/1 gibsonRegular;
                        cursor: pointer;
                        border: 0;
                        margin-left: 0;
                        padding-left: 0;
                        margin-right: 0;
                        padding-right: 0;

                        &:last-child
                        {
                            background: none;
                            //.bottomBorder();
                            margin: 0 -20px;
                            padding: 10px 20px;
                        }
                    }
                }
            }

            @media (max-width: 400px)
            {
                &.dr-list-icon
                {
                    li
                    {
                        &.greater-constituency
                        {
                            margin: 0 -10px;
                            padding: 10px;
                        }

                        &.constituency
                        {
                            &:last-child
                            {
                                margin: 0 -10px;
                                padding: 10px 10px;
                            }
                        }
                    }
                }
            }
        }
    }
}