/* ========================================================================= \\
    $Card-Matrix
\\ ========================================================================= */

.lgfe-card-matrix {
    counter-reset: card-order;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 10em;
}

    /* --------------------------------------------- \\
        $Card
    \\ --------------------------------------------- */

    .lgfe-cm-card {
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        border: 1px solid #d0d0d0;
        background-color: #fff;
        position: relative;
        font-weight: 300;
        color: #6c6f70;
    }

    /* --------------------------------------------- \\
        $New-Card
    \\ --------------------------------------------- */

    .lgfe-card-matrix .lgfe-cm-new-card {
        margin-right: 0;
        border: 1px solid #d0d0d0;
        background-color: #fff;
    }
    .lgfe-card-matrix .lgfe-cm-new-card:active,
    .lgfe-card-matrix .lgfe-cm-new-card:focus,
    .lgfe-card-matrix .lgfe-cm-new-card:hover {
        color: #404040;
    }
    .lgfe-card-matrix .lgfe-cm-new-card.sortable-ghost {
        /*opacity: 0.3;*/
    }

        .lgfe-card-matrix .lgfe-cm-new-card .fa {
            opacity: 0.8;
        }

        /* --------------------------------------------- \\
            $Masthead
        \\ --------------------------------------------- */

        .lgfe-cm-masthead {
            pointer-events: none;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            background-color: #d0d0d0;
            color: #fff;
            line-height: 1;
            text-align: center;
        }

            .lgfe-cm-masthead::before {
                display: block;
                opacity: 0.8;
                position: relative;
                z-index: 1;
                font-family: 'FontAwesome';
                line-height: 1;
            }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Masthead-Image
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-cm-masthead-image {
                width: 100%;
                height: 100%;
                background-position: 50% 50%;
                background-size: cover;
                position: absolute;
            }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Masthead-Background
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-cm-masthead--health {
                background-color: #ac1a2f;
            }

            .lgfe-cm-masthead--health::before {
                content: '\f21e'; /** fa-heartbeat **/
            }

            .lgfe-cm-masthead--images::before {
                content: '\f1c5'; /** fa-file-image-o **/
            }

            .lgfe-cm-masthead--image::before {
                content: '\f1c5'; /** fa-file-image-o **/
            }

            .lgfe-cm-masthead--amenities {
                background-color: #a72bbd;
            }

            .lgfe-cm-masthead--amenities::before {
                content: '\f0f4'; /** fa-line-chart **/
            }

            .lgfe-cm-masthead--stocks {
                background-color: #66bd2b;
            }

            .lgfe-cm-masthead--stocks::before {
                content: '\f201'; /** fa-line-chart **/
            }

            .lgfe-cm-masthead--finance{
                background-color: #66bd2b;
            }

            .lgfe-cm-masthead--finance::before{
                content: '\f201'; /** fa-line-chart **/
            }

            .lgfe-cm-masthead--traffic {
                background-color: #50e3c2;
            }

            .lgfe-cm-masthead--traffic::before {
                content: '\f018'; /** fa-road **/
            }

            .lgfe-cm-masthead--trivia {
                background-color: #f5aa00;
            }

            .lgfe-cm-masthead--trivia::before {
                content: '\f0eb'; /** fa-lightbulb-o **/
            }

            .lgfe-cm-masthead--twitter {
                background-color: #47c7fa;
            }

            .lgfe-cm-masthead--twitter::before {
                content: '\f099'; /** fa-twitter **/
            }

            .lgfe-cm-masthead--subaru-sharethelove {
                background-color: #47c7fa;
            }

            .lgfe-cm-masthead--subaru-sharethelove::before {
                content: '\f184'; /** fa-gratipay **/
            }

            .lgfe-cm-masthead--social {
                background-color: #47c7fa;
            }

            .lgfe-cm-masthead--social::before {
                content: '\f086'; /** fa-social **/
                /**Due to some nonses, we are going to use this heart as the social widget icon**/
                content: "\f004";
            }

            .lgfe-cm-masthead--brand {
                background-color: #47c7fa;
            }

            .lgfe-cm-masthead--brand::before {
                content: '\f024'; /** fa-brand **/
            }

            .lgfe-cm-masthead--daretocompare {
                background-color: #122872;
            }

            .lgfe-cm-masthead--daretocompare::before {
                content: '\f00c'; /** fa-brand **/
            }

            .lgfe-cm-masthead--pricing {
                background-color: #2F9A25;
            }

            .lgfe-cm-masthead--pricing::before {
                content: '\f155'; /** fa-brand **/
            }

            .lgfe-cm-masthead--splitscreen {
                background: #ffed4b;
                background: linear-gradient(110deg, #fdcd3b 50%, #ffed4b 50%);
            }

            .lgfe-cm-masthead--splitscreen::before {
                content: '\f0db'; /** fa-brand **/
            }

            .lgfe-cm-masthead--customUpload {
                background: #008000;
            }

            .lgfe-cm-masthead--customUpload::before {
                content: '\f015'; /** fa-home **/
            }

            .lgfe-cm-masthead--profile {
                background-color: #47c7fa;
            }

            .lgfe-cm-masthead--profile::before {
                content: '\f024'; /** fa-profile **/
            }

            .lgfe-cm-masthead--screenfeedvideo{
                background-color: #d3461e;    
            }

            .lgfe-cm-masthead--screenfeedvideo::before {
                content: '\f03d'; 
                /*content: "\f004";*/
            }

            .lgfe-cm-masthead--embedded-url {
                background-color: #47c7fa;
            }

            .lgfe-cm-masthead--embedded-url::before {
                content: "\f0ac"; /** fa-globe **/
            }

            .lgfe-cm-masthead--video::before {
                content: '\f144'; /** fa-play-circle **/
            }

            .lgfe-cm-masthead--weather {
                background-color: #6126a5;
            }

            .lgfe-cm-masthead--weather::before {
                content: '\f185'; /** fa-sun-o **/
            }

            .lgfe-cm-masthead--spot-holder {
                background-color: #bebebe;
            }

            .lgfe-cm-masthead--spot-holder::before {
                content: '\f069'; /** fa-asterisk-o **/
            }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Masthead-Background-Icon
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-cm-duration-time:before {
                font-family: "FontAwesome";
                position:relative;
                display:inline-block;
                margin-right: 5px;
            }            

            .lgfe-cm-masthead--health .lgfe-cm-duration-time::before {
                content: '\f21e'; /** fa-heartbeat **/
            }

            .lgfe-cm-masthead--images .lgfe-cm-duration-time::before {
                content: '\f1c5'; /** fa-file-image-o **/
            }

            .lgfe-cm-masthead--image .lgfe-cm-duration-time::before {
                content: '\f1c5'; /** fa-file-image-o **/
            }

            .lgfe-cm-masthead--stocks .lgfe-cm-duration-time::before {
                content: '\f201'; /** fa-line-chart **/
            }

            .lgfe-cm-masthead--finance .lgfe-cm-duration-time::before{
                content: '\f201'; /** fa-line-chart **/
            }

            .lgfe-cm-masthead--traffic .lgfe-cm-duration-time::before {
                content: '\f018'; /** fa-road **/
            }

            .lgfe-cm-masthead--trivia .lgfe-cm-duration-time::before {
                content: '\f0eb'; /** fa-lightbulb-o **/
            }

            .lgfe-cm-masthead--twitter .lgfe-cm-duration-time::before {
                content: '\f099'; /** fa-twitter **/
            }

            .lgfe-cm-masthead--social .lgfe-cm-duration-time::before {
               /* content: '\f086';*/ /** fa-social **/
                content: "\f004";
            }
            .lgfe-cm-masthead--brand .lgfe-cm-duration-time::before {
                content: '\f024'; /** fa-brand **/
            }
            .lgfe-cm-masthead--daretocompare .lgfe-cm-duration-time::before {
                content: '\f00c'; /** fa-brand **/
            }

            .lgfe-cm-masthead--pricing .lgfe-cm-duration-time::before {
                content: '\f155'; /** fa-brand **/
            }

            .lgfe-cm-masthead--profile .lgfe-cm-duration-time::before {
                content: '\f024'; /** fa-profile **/
            }

            .lgfe-cm-masthead--screenfeedvideo .lgfe-cm-duration-time::before {
                content: '\f03d'; 

            }

            .lgfe-cm-masthead--embedded-url .lgfe-cm-duration-time::before {
                content: "\f0ac"; /** fa-globe **/
            }

            .lgfe-cm-masthead--video .lgfe-cm-duration-time::before {
                content: '\f144'; /** fa-play-circle **/
            }

            .lgfe-cm-masthead--weather .lgfe-cm-duration-time::before {
                content: '\f185'; /** fa-sun-o **/
            }

            .lgfe-cm-masthead--spot-holder .lgfe-cm-duration-time::before {
                content: '\f069'; /** fa-asterisk-o **/
            }

        /* --------------------------------------------- \\
            $Information
        \\ --------------------------------------------- */

        .lgfe-cm-information {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            word-break: break-all;
            word-wrap: break-word;
        }

            .lgfe-cm-information--order::before {
                counter-increment: card-order;
                pointer-events: none;
                content: counter(card-order);
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                -webkit-box-pack: center;
                    -ms-flex-pack: center;
                        justify-content: center;
                min-width: 2em;
                height: 2em;
                background-color: #404040;
                color: #fff;
                font-weight: 700;
                position: absolute;
                z-index: 1;
            }

            .lgfe-cm-information--order {
                background-color: #009FDF;
                position: relative;
                width: 35px;
                min-width: 35px;
                padding-top: 7px;
                z-index: 1;
                height: 100%;
            }

            .lgfe-cm-information--order::before {
                display:none;
            }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Card
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-cm-card.inactive .lgfe-cm-information--order {
                background-color: #e8e8e8;
            }

            .lgfe-cm-card.inactive .lgfe-cm-information--order .lgfe-cm-drag-handle {
                color: #6c6f70;
            }

            .lgfe-cm-card.inactive .lgfe-cm-order {
                color: #6c6f70;
            }

            .lgfe-cm-card.expired .lgfe-cm-information--order {
                background-color: #cf0624;
            }

            .lgfe-cm-card.expired .lgfe-cm-playlist-column-message {
                color: #cf0624;
                text-transform:uppercase;
            }

            .lgfe-cm-card.expired .lgfe-cm-information--order .lgfe-cm-drag-handle {
                color: #fff;
            }

            .lgfe-cm-card.expired .lgfe-cm--order {
                color: #fff;
            }

            .lgfe-cm-card.expired .lgfe-cm-playlist-column-expire-date {
                color:#cf0624;
                text-transform:uppercase;
            }

            .lgfe-cm-card.inactive {
                border-color: #e8e8e8!important;
            }

            .lgfe-cm-card.expired {
                border-color: #cf0624!important;
            }

            .lgfe-cm-card.expired .lgfe-cm-order {
                color: #fff;
            }

            .lgfe-cm-card.expired .lgfe-cm-schedule {
                color: #cf0624;
            }


            /*EARLY*/
            .lgfe-cm-card.early .lgfe-cm-information--order {
                background-color: #fca130;
            }

            .lgfe-cm-card.early .lgfe-cm-playlist-column-message {
                color: #fca130;
                text-transform:uppercase;
            }

            .lgfe-cm-card.early .lgfe-cm-information--order .lgfe-cm-drag-handle {
                color: #fff;
            }

            .lgfe-cm-card.early .lgfe-cm--order {
                color: #fff;
            }
            /*
            .lgfe-cm-card.early .lgfe-cm-playlist-column-expire-date {
                color:#fca130;
                text-transform:uppercase;
            }*/

            .lgfe-cm-card.early {
                border-color: #fca130!important;
            }

            .lgfe-cm-card.early .lgfe-cm-order {
                color: #fff;
            }

            .lgfe-cm-card.early .lgfe-cm-schedule {
                color: #cf0624;
            }


            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Masthead
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-cm-masthead .lgfe-cm-masthead-duration {
                margin-left:5px;
            }            

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Name
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-cm-name {
                height: 1.2em;
                margin-bottom: 0.3em;
                font-size: 1.125em;
                font-weight: inherit;
            }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Duration
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-cm-duration {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column;
                -webkit-box-pack: center;
                    -ms-flex-pack: center;
                        justify-content: center;
                margin-top: 0;
                margin-bottom: 0;
                background: -webkit-gradient(linear, left top, right top, from(#009fdf), to(#47c7fa));
                background: linear-gradient(to right, #009fdf, #47c7fa);
                font-weight: 600;
                color: #fff;
                line-height: 1;
                text-align: center;
                white-space: nowrap;
            }

            .lgfe-cm-duration--corner {
                background: none;
                color: #6c6f70;
            }

            .lgfe-cm-playlist-column-title {
                font-weight: 700;
                margin-right: 5px;
            }

            .lgfe-cm-playlist-column-required-playing {
                font-weight: 700;
            }

            /* --------------------------------------------- \\
                $Status Icons
            \\ --------------------------------------------- */        

            .lgfe-cm-playlist-circle-icon {
                display: block;
                margin: 0 auto;
                height: 33px;
                width: 33px;
                border-radius: 50%;
                border: 2px solid #99d9f3;
                text-align: center;
                display: inline-block;
            }

            .lgfe-cm-playlist-circle-icon:before {
                font-family:"FontAwesome";
                display:inline-block;
                position:relative;
                font-size: 1.8em;
            }        

            .lgfe-cm-playlist-circle-icon.lgfe-cm-playlist-check:before {
                content:"\f00c";
                margin-top: 2px;
                margin-left: 1px;
                color:#009FDF;
            }

            .lgfe-cm-playlist-circle-icon.lgfe-cm-playlist-x {
                border-color:#c5c6c6;
                color:#6c6f70;
            }

            .lgfe-cm-playlist-circle-icon.lgfe-cm-playlist-x:before {
                content:"\f00d";
                margin-top: 1px;
                margin-left: 0px;
                color:#6c6f70;
            }

            .lgfe-cm-playlist-circle-icon.lgfe-cm-playlist-required-hide {
                border:none;
            }
            

                /* - - - - - - - - - - - - - - - - - - - - - - - \\
                    $Duration-Icon
                \\ - - - - - - - - - - - - - - - - - - - - - - - */

                .lgfe-cm-duration::before {
                    display: block;
                    content: '\f00b'; /** fa-th-list **/
                    opacity: 0.8;
                    margin-bottom: -0.03em;
                    font-family: 'FontAwesome';
                    font-weight: 400;
                    line-height: 1;
                }
                .lgfe-cm-duration--corner::before {
                    display: none;
                }

                /* - - - - - - - - - - - - - - - - - - - - - - - \\
                    $Time
                \\ - - - - - - - - - - - - - - - - - - - - - - - */

                .lgfe-cm-duration--corner .lgfe-cm-duration-time {
                    background-color: #fff;
                    padding: 0.2em 0.3em;
                    position: absolute;
                }
                .lgfe-cm-duration--corner-br .lgfe-cm-duration-time {
                    right: 0;
                    bottom: 0;
                }

                    /* - - - - - - - - - - - - - - - - - - - - - - - \\
                        $Time-Unit
                    \\ - - - - - - - - - - - - - - - - - - - - - - - */

                    .lgfe-cm-duration-time-unit:not(:last-child)::after {
                        content: ':';
                        display: inline;
                    }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Description
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-cm-description {
                margin-top: 0;
                margin-bottom: 0;
                font-size: 0.75em;
                line-height: 1.3;
            }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Spacer
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-cm-spacer {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                -webkit-box-flex: .5;
                    -ms-flex-positive: .5;
                        flex-grow: .5;
            }

                .lgfe-cm-spacer::before {
                    content: '';
                    border-top: 1px solid #d0d0d0;
                }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Keywords
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-cm-keywords,
            .lgfe-cm-tags {
                height: 1.2728em;
                font-size: 0.6875em;
                line-height: 1.3;
            }

                .lgfe-cm-keyword-item,
                .lgfe-cm-tag-item {
                    display: inline-block;
                }

                    .lgfe-cm-keyword-item:not(:last-child)::after,
                    .lgfe-cm-tag-item:not(:last-child)::after {
                        /**content: ',\00a0'; /** Comma and non-breaking space **/
                        display: inline;
                    }

                    .lgfe-cm-keywords .lgfe-cm-keyword-label{
                        font-weight: 700;
                        text-decoration: underline;
                        width: 100%;
                        font-size: 0.6875em;
                        line-height: 1.3;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        margin-bottom: 1px;                            
                    }

                    .lgfe-cm-keywords .lgfe-cm-keyword-label::after{
                        content: '';
                    }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Tags
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .description-tag-item{
                color: white;
                margin-left: .2em;
                margin-top: .2em;
                padding: .2em .5em;
                border-radius: 17.5px;
                background-color: #009FDF;
                display: inline-block;
                -webkit-box-pack: center;
                    -ms-flex-pack: center;
                        justify-content: center;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
            }

            .lgfe-cm-description-tags-label {
                display: inline-block;    
                font-weight: 700;
            }
            .lgfe-cm-description-tags {
                height: 1.8em;
                font-size: .7em;
                font-weight: 600;                
            }

            .lgfe-cm-description-tags .lgfe-cm-description-tags-inner {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                -ms-flex-wrap: wrap;
                    flex-wrap: wrap;
                position: relative;
                overflow: hidden;
                height: 1.8em;
            }            

        /* --------------------------------------------- \\
            $Utilities
        \\ --------------------------------------------- */

        .lgfe-cm-utilities {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            cursor: default;
            border-left: 1px solid #d0d0d0;
            background: #fff;
            font-size: inherit;
        }

            .lgfe-cm-utility-row {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: justify;
                    -ms-flex-pack: justify;
                        justify-content: space-between;
            }
            .lgfe-cm-utility-row:not(:last-child) {
                margin-bottom: 0.5em;
            }

                .lgfe-cm-utility-button {
                    display: inline-block;
                    outline: 0;
                    width: 1.625em;
                    height: 1.625em;
                    -webkit-transition: color 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
                    transition: color 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
                }
                .lgfe-cm-utility-button:not([disabled]) {
                    cursor: pointer;
                }

                .lgfe-cm-utility-button:not([disabled]):hover {
                    color: #fff;
                }

                /* - - - - - - - - - - - - - - - - - - - - - - - \\
                    $Favorite-Button
                \\ - - - - - - - - - - - - - - - - - - - - - - - */

                .lgfe-cm-utility-button--favorited {
                    color: #ac1a2f;
                    -webkit-animation: playlist-favorite 250ms ease-in-out running;
                            animation: playlist-favorite 250ms ease-in-out running;
                }

                .lgfe-cm-utility-button--favorited:focus,
                .lgfe-cm-utility-button--favorited:hover {
                    color: #e55c6a;
                }

                /* - - - - - - - - - - - - - - - - - - - - - - - \\
                    $Favorite-Button-Animation
                \\ - - - - - - - - - - - - - - - - - - - - - - - */

                @-webkit-keyframes playlist-favorite {
                    0% {
                        text-shadow: 0 0 0 transparent;
                        -webkit-transform: scale(1);
                                transform: scale(1);
                    }

                    50% {
                        text-shadow: 0 0 0.5em #e55c6a;
                        -webkit-transform: scale(1.3);
                                transform: scale(1.3);
                    }

                    100% {
                        text-shadow: 0 0 0.5em transparent;
                        -webkit-transform: scale(1);
                                transform: scale(1);
                    }
                }

                @keyframes playlist-favorite {
                    0% {
                        text-shadow: 0 0 0 transparent;
                        -webkit-transform: scale(1);
                                transform: scale(1);
                    }

                    50% {
                        text-shadow: 0 0 0.5em #e55c6a;
                        -webkit-transform: scale(1.3);
                                transform: scale(1.3);
                    }

                    100% {
                        text-shadow: 0 0 0.5em transparent;
                        -webkit-transform: scale(1);
                                transform: scale(1);
                    }
                }

        /* --------------------------------------------- \\
            $Drag-Handle
        \\ --------------------------------------------- */

        .lgfe-cm-drag-handle {
            cursor: -webkit-grab;
            cursor: grab;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            color: #fff;
            -webkit-transition: color 150ms ease-in-out;
            transition: color 150ms ease-in-out;
            font-size: 1.2em;
        }
        .lgfe-cm-drag-handle:hover {
            color: #d0d0d0;
        }

            .lgfe-card-matrix .lgfe-cm-drag-handle .fa {
                cursor: move;
                cursor: -webkit-grab;
                cursor: grab;
            }

        /* --------------------------------------------- \\
            $Columns
        \\ --------------------------------------------- */

        .lgfe-cm-playlist-column-players-status {
            border:1px solid #6c6f70;
            height:20px;
            width: 80px;
            min-width: 80px;
            display: inline-block;
            border-radius: 20px;
            position:relative;
        }

        .lgfe-cm-playlist-column-players-status .lgfe-cm-playlist-column-players-status-inner-border {
            content:"";
            border:1px solid #fff;
            height:18px;
            top: 0px;
            width: 100%;
            height: 100%;
            left: 0;
            display: inline-block;
            position:absolute;
            border-radius: 20px;
            z-index: 1;
        }

        .lgfe-cm-playlist-column-players-status .lgfe-cm-playlist-column-players-status-value {
            position: relative;
            height:100%;
            width:0%;
            background-color:#009FDF;
            border-radius: 20px;
        }

        .lgfe-cm-playlist-column-players-status .lgfe-cm-playlist-column-players-status-value.allRequired:before {
            content: "\f023";
            position: absolute;
            display:inline-block!important;
            font-family: "FontAwesome";
            width: 100%;
            left: 0;
            top: 4px;
            color: #fff;
            font-size: .8em;
            text-align: center;
        }

        .lgfe-cm-playlist-column-players-status .lgfe-cm-playlist-column-players-status-value.someActive {
            width: 43%;
            border-radius: 20px 0px 0px 20px;
        }

        .lgfe-cm-playlist-column-players-status .lgfe-cm-playlist-column-players-status-value.someActive:before {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            border-style: solid;
            border-width: 18px 0 0 18px;
            right: -18px;
            top: 0;
            border-color: transparent transparent transparent #009FDF;
        }

        .lgfe-cm-playlist-column-players-status .lgfe-cm-playlist-column-players-status-value.allActive:before {
            display:none;
        }

        .lgfe-cm-playlist-column-players-status .lgfe-cm-playlist-column-players-status-value.allActive, .lgfe-cm-card-container .lgfe-cm-playlist-column-players-status .lgfe-cm-playlist-column-players-status-value.allRequired {
            width: 100%;
            border-radius: 20px 20px 20px 20px;
        }


/* ========================================================================= \\
    $Layout-Grid
\\ ========================================================================= */

.lgfe-card-matrix--layout-grid {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    position: relative;   
}

@supports (display: grid) {
    .lgfe-card-matrix--layout-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 0.875em;
    }
    @media (max-width: 94em) { 
        .lgfe-card-matrix--layout-grid {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }
    @media (max-width: 80em) { /** 1280px **/
        .lgfe-card-matrix--layout-grid {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }
    @media (max-width: 70em) { /**  **/
        .lgfe-card-matrix--layout-grid {
            grid-template-columns: 1fr 1fr;
        }
    }
    @media (max-width: 60.625em) { /** 970px **/
        .lgfe-card-matrix--layout-grid {
            grid-template-columns: 1fr 1fr;
        }
    }
    @media (max-width: 49.38em) {
        .lgfe-card-matrix--layout-grid {
            grid-template-columns: 1fr;
        }
    }
}

    /* --------------------------------------------- \\
        $Card
    \\ --------------------------------------------- */

    .lgfe-card-matrix--layout-grid .lgfe-cm-card-container {
        width: 32.25%;
        position: relative;
    }
    .lgfe-card-matrix--layout-grid .lgfe-cm-card-container:not(:nth-child(3n)) {
        margin-right: 0.875em;
    }
    .lgfe-card-matrix--layout-grid .lgfe-cm-card-container:not(:nth-last-child(-n+3)) {
        margin-bottom: 0.875em;
    }
    @media (max-width: 80em) { /** 1280px **/
        .lgfe-card-matrix--layout-grid .lgfe-cm-card-container {
            width: 48.75%;
        }
        .lgfe-card-matrix--layout-grid .lgfe-cm-card-container:nth-child(odd) {
            margin-right: 0.875em;
        }
        .lgfe-card-matrix--layout-grid .lgfe-cm-card-container:nth-child(even) {
            margin-right: 0;
        }
        .lgfe-card-matrix--layout-grid .lgfe-cm-card-container:not(:nth-last-child(-n+2)) {
            margin-bottom: 0.875em;
        }
    }
    @media (max-width: 60.625em) { /** 970px **/
        .lgfe-card-matrix--layout-grid .lgfe-cm-card-container:nth-child(n) {
            width: 100%;
            margin-right: 0;
        }
        .lgfe-card-matrix--layout-grid .lgfe-cm-card-container:not(:nth-last-child(-n+1)) {
            margin-bottom: 0.875em;
        }
    }

    @supports (display: grid) {
        .lgfe-card-matrix--layout-grid .lgfe-cm-card-container {
            width: 100%;
        }
        .lgfe-card-matrix--layout-grid .lgfe-cm-card-container:nth-child(n) {
            margin-right: 0;
            margin-bottom: 0;
        }
    }

    .lgfe-card-matrix--layout-grid .lgfe-cm-card {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        border: 1px solid #009FDF;
        border-left: 7px solid #009FDF;
        height: 24em;
        padding: 0em;
        overflow: hidden;
    }

    .lgfe-card-matrix--layout-grid .lgfe-cm-card.expired {
        border: 1px solid #cf0624;
        border-left: 7px solid #cf0624;
    }

    .lgfe-card-matrix--layout-grid .lgfe-cm-card.early {
        border: 1px solid #fca130;
        border-left: 7px solid #fca130;
    }

    .lgfe-card-matrix--layout-grid .lgfe-cm-card.inactive {
        border: 1px solid #e8e8e8;
        border-left: 7px solid #e8e8e8;
    }

    .lgfe-card-matrix--layout-grid .lgfe-cm-spacer{
        display: none;
    }    

    /* --------------------------------------------- \\
        $New-Card
    \\ --------------------------------------------- */

    .lgfe-card-matrix.lgfe-card-matrix--layout-grid .lgfe-cm-new-card {
        width: 32.25%;
        height: 24em;
        margin-bottom: 0.625em;
    }
    .lgfe-card-matrix.lgfe-card-matrix--layout-grid .lgfe-cm-new-card:not(:nth-child(3n)) {
        margin-right: 0.875em;
    }
    @media (max-width: 80em) { /** 1280px **/
        .lgfe-card-matrix.lgfe-card-matrix--layout-grid .lgfe-cm-new-card {
            width: 48.75%;
        }
        .lgfe-card-matrix.lgfe-card-matrix--layout-grid .lgfe-cm-new-card:nth-child(odd) {
            margin-right: 0.875em;
        }
        .lgfe-card-matrix.lgfe-card-matrix--layout-grid .lgfe-cm-new-card:nth-child(even) {
            margin-right: 0;
        }
    }
    @media (max-width: 60.625em) { /** 970px **/
        .lgfe-card-matrix.lgfe-card-matrix--layout-grid .lgfe-cm-new-card:nth-child(n) {
            width: 100%;
            margin-right: 0;
        }
    }

    .lgfe-card-matrix.lgfe-card-matrix--layout-grid .lgfe-cm-new-card:not(:nth-last-child(-n+3)) {
        margin-bottom: 0.75em;
    }
    @media (max-width: 80em) { /** 1280px **/
        .lgfe-card-matrix.lgfe-card-matrix--layout-grid .lgfe-cm-new-card:not(:nth-last-child(-n+2)) {
            margin-bottom: 0.75em;
        }
    }
    @media (max-width: 60.625em) { /** 970px **/
        .lgfe-card-matrix.lgfe-card-matrix--layout-grid .lgfe-cm-new-card:not(:nth-last-child(-n+1)) {
            margin-bottom: 0.75em;
        }
    }

    @supports (display: grid) {
        .lgfe-card-matrix.lgfe-card-matrix--layout-grid .lgfe-cm-new-card {
            width: 100%;
        }
        .lgfe-card-matrix.lgfe-card-matrix--layout-grid .lgfe-cm-new-card:nth-child(n) {
            margin-bottom: 0;
            margin-right: 0;
        }
    }

        .lgfe-card-matrix.lgfe-card-matrix--layout-grid .lgfe-cm-new-card .fa {
            font-size: 6em;
        }

    /* --------------------------------------------- \\
        $New-Card
    \\ --------------------------------------------- */

        /* --------------------------------------------- \\
            $Masthead
        \\ --------------------------------------------- */

        .lgfe-card-matrix--layout-grid .lgfe-cm-masthead {
            overflow: hidden;
            height: 9.625em;
            border: 1px solid #6c6f70;
            position: relative;
            border: 0;
        }

        .lgfe-card-matrix--layout-grid .lgfe-cm-masthead::before {
            font-size: 6em;
        }

        /* --------------------------------------------- \\
            $Information
        \\ --------------------------------------------- */

        .lgfe-card-matrix--layout-grid .lgfe-cm-information {
            width: 100%;
            height: 100%;
        }

        .lgfe-card-matrix--layout-grid .lgfe-cm-information > * {
            -webkit-box-ordinal-group: 2;
                -ms-flex-order: 1;
                    order: 1;
        }


            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Name
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-card-matrix--layout-grid .lgfe-cm-name {
                margin-top: 0;
                white-space: normal;
                width: auto;
                overflow: initial;
                line-height: 1.4;
                height: auto;
                font-weight: 500;
            }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Duration
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            /*.lgfe-card-matrix--layout-grid .lgfe-cm-duration {

            }*/
            .lgfe-card-matrix--layout-grid /*.lgfe-cm-masthead + .lgfe-cm-information*/ .lgfe-cm-duration {
                -webkit-box-ordinal-group: 1;
                    -ms-flex-order: 0;
                        order: 0;
                /*width: 100%;*/
                height: 9.625em;
                position: absolute;
                top: 1.75em;
                right: 1.75em;
                left: 1.75em;
            }

                .lgfe-card-matrix--layout-grid /*.lgfe-cm-masthead + .lgfe-cm-information*/ .lgfe-cm-duration::before {
                    font-size: 6em;
                }

                /* - - - - - - - - - - - - - - - - - - - - - - - \\
                    $Duration-Icon
                \\ - - - - - - - - - - - - - - - - - - - - - - - */

                .lgfe-card-matrix--layout-grid .lgfe-cm-duration::before {
                    font-size: 6em;
                }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Description
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-card-matrix--layout-grid .lgfe-cm-description {
                height: 2.6667em;
                overflow: hidden;
                word-break: break-word;
            }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Details
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-card-matrix--layout-grid .lgfe-cm-details {
                padding: 10px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column;
            }                    

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Spacer
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-card-matrix--layout-grid .lgfe-cm-spacer {
                display:none;
            }

                .lgfe-card-matrix--layout-grid .lgfe-cm-spacer::before {
                    width: 100%;
                }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Keywords
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-card-matrix--layout-grid .lgfe-cm-keywords {
                max-width: 38%;
                height: auto;
                padding-top: 0.75em;
                -webkit-box-pack: start;
                    -ms-flex-pack: start;
                        justify-content: flex-start;
                font-weight:400;                
            }

            .lgfe-card-matrix--layout-grid .lgfe-cm-keyword-item {
                    word-break: break-word;
            }

            .lgfe-card-matrix--layout-grid .lgfe-cm-keyword-label{
                font-size: .675em;
                font-weight: 700;
                text-decoration: underline;
                margin-bottom: 3px;
            }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Tags
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-card-matrix--layout-grid .lgfe-cm-tags {
                max-width: 38%;
                margin-bottom: 1.4546em;
            }

                .lgfe-card-matrix--layout-grid .lgfe-cm-tag-item {

                }

        /* --------------------------------------------- \\
            $Utilities
        \\ --------------------------------------------- */

        .lgfe-card-matrix--layout-grid .lgfe-cm-utilities {
            position: absolute;
            font-size: inherit;
            right: 0;
            bottom: 0;
            border: none;
            padding-bottom: 5px;
            padding-left: 0px;   
        }
        .lgfe-card-matrix--layout-grid .lgfe-cm-masthead ~ .lgfe-cm-utilities {
            padding-top: 0.5em;
            padding-bottom: 0.5em;
            padding-left: 1.5em;
            position: absolute;
            right: 1.75em;
            bottom: 2.5em;
        }

        .lgfe-card-matrix--layout-grid .lgfe-cm-utilities .lgfe-cm-utility-row{
            -webkit-box-pack: end;
                -ms-flex-pack: end;
                    justify-content: flex-end;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            padding: 0px 5px;
            border-left: 1px solid #d0d0d0;
        }

        .lgfe-card-matrix--layout-grid .lgfe-cm-utility-button {
            width: 2.2em;
            height: 1.4em;
            font-size: 1.2em;
        }

        /* --------------------------------------------- \\
            $Drag-Handle
        \\ --------------------------------------------- */

        .lgfe-card-matrix--layout-grid .lgfe-cm-drag-handle {
            width: 100%;
            height: 1.25em;
        }

        /* --------------------------------------------- \\
            $Columns
        \\ --------------------------------------------- */

        .lgfe-card-matrix--layout-grid .lgfe-cm-playlist-column-left {
            position:relative;
            margin: 3px;    
        }

        .lgfe-card-matrix--layout-grid .lgfe-cm-playlist-column-left .lgfe-cm-playlist-column {
            position: relative;
        }        

        .lgfe-card-matrix--layout-grid .lgfe-cm-playlist-column-right {
            position:relative;
            padding: 10px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: reverse;
                -ms-flex-direction: column-reverse;
                    flex-direction: column-reverse;
        }        

        .lgfe-card-matrix--layout-grid .lgfe-cm-playlist-column-right .lgfe-cm-playlist-column {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            vertical-align: middle;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            font-size: .8em;
            padding: 5px 0px;
        }

        .lgfe-card-matrix--layout-grid .lgfe-cm-information .lgfe-cm-playlist-column-right .lgfe-cm-playlist-column.lgfe-cm-playlist-column-required {
            display:none;
        }

        .lgfe-card-matrix--layout-grid .lgfe-cm-information .lgfe-cm-playlist-column-right .lgfe-cm-playlist-column.lgfe-cm-playlist-column-playing {
            display:none;
        }        

        .lgfe-card-matrix--layout-grid .lgfe-cm-playlist-column-right .lgfe-cm-playlist-column.lgfe-cm-playlist-column-modified {
            display:none;
        }                

        .lgfe-card-matrix--layout-grid .lgfe-cm-playlist-column .lgfe-cm-playlist-column-contents {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex; 
            -webkit-box-align: center; 
                -ms-flex-align: center; 
                    align-items: center; 
            word-break: initial;
        }


/* ========================================================================= \\
    $Layout-Row
\\ ========================================================================= */

.lgfe-card-matrix--layout-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    
}

.lgfe-card-matrix--layout-row .lgfe-cm-card-container{
    position: relative;
}

.lgfe-card-matrix--layout-row .lgfe-cm-playlist-column-title {
    display:none;
}

    /* ========================================================================= \\
        $Layout-Row Header
    \\ ========================================================================= */

    .layout-row-header.active {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .layout-row-header {
        padding: 0em 4em 1em 1.75em;
        text-align:center;
        position:relative;
        display:none;
    }

    .layout-row-header .layout-row-header-tally {
        position:absolute;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        font-size: .875em;
    }
    .layout-row-header .layout-row-header-tally-inner {
        font-weight: 600;
        color: #000;
        font-weight: 700;
        margin-right:30px;
    }
    .layout-row-header .layout-row-header-column-left {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
    }
    .layout-row-header .layout-row-header-column-right {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        vertical-align: middle;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

    .layout-row-header .layout-row-header-column-right .layout-row-header-column {
        width: 100%;
        padding: 0px 5px;
        font-weight: 700;
        color: #6c6f70;
        font-size: .875em;
    }

    .layout-row-header .layout-row-header-column-right .layout-row-header-column-short {
        word-break: break-all;
    }

    .layout-row-header .layout-row-header-column-utilities {
        width: 61px;
        min-width: 61px;
    }

    .layout-row-header .layout-row-header-tally-inner:last-child {
        margin-right:0px;
    }

    .layout-row-header .layout-row-header-column-left .layout-row-header-column {
        text-align: center;
        font-weight: 400;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        vertical-align: middle;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .layout-row-header .layout-row-header-column-details {
        width: 100%;
    }

    .layout-row-header .layout-row-header-column-information {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
            flex-direction: row;
        -webkit-box-direction: normal;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        width: 100%;
        margin-left: 0;
        padding: 0;
    }

    .layout-row-header .layout-row-header-column-order {
        width: 35px;
        min-width: 35px;
    }


    /* --------------------------------------------- \\
        $Card
    \\ --------------------------------------------- */

    .lgfe-card-matrix--layout-row .lgfe-cm-card-container:not(:last-child) {
        margin-bottom: 0.625em;
    }

    .lgfe-card-matrix--layout-row .lgfe-cm-card {
        border: 1px solid #009FDF;
        border-left: 35px solid #009FDF;
        overflow: hidden;
    }

    .lgfe-card-matrix--layout-row .lgfe-cm-card.expired {
        border: 1px solid #cf0624;
        border-left: 35px solid #cf0624;
    }

    .lgfe-card-matrix--layout-row .lgfe-cm-card.early {
        border: 1px solid #fca130;
        border-left: 35px solid #fca130;
    }

    .lgfe-card-matrix--layout-row .lgfe-cm-card.inactive {
        border: 1px solid #e8e8e8;
        border-left: 35px solid #e8e8e8;
    }         

    /* --------------------------------------------- \\
        $New-Card
    \\ --------------------------------------------- */

    .lgfe-card-matrix.lgfe-card-matrix--layout-row .lgfe-cm-new-card {
        width: 100%;
        height: 8.875em;
        margin-bottom: 0.625em;
    }

        .lgfe-card-matrix.lgfe-card-matrix--layout-row .lgfe-cm-new-card .fa {
            font-size: 4em;
        }

        /* --------------------------------------------- \\
            $Masthead
        \\ --------------------------------------------- */

        .lgfe-card-matrix--layout-row .lgfe-cm-masthead {
            position: relative;
            margin: 3px;
            width: 6em;
            height: 6em;
            top:0;
            left:0;
        }

            .lgfe-card-matrix--layout-row .lgfe-cm-masthead::before {
                font-size: 2em;
            }


        /* --------------------------------------------- \\
            $Information
        \\ --------------------------------------------- */

        .lgfe-card-matrix--layout-row .lgfe-cm-information {
            -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                    flex-grow: 1;
            -webkit-box-ordinal-group: 1;
                -ms-flex-order: 0;
                    order: 0;
            width: 7.5em;
            max-width: 100%;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            margin-left: 0;
            padding: 0;
            cursor: pointer;                 
        }

        .lgfe-card-matrix--layout-row .lgfe-cm-information--order::before {
            top: -0.0625em;
            left: -0.0625em;
        }

        /* --------------------------------------------- \\
            $Columns
        \\ --------------------------------------------- */             

        .lgfe-card-matrix--layout-row .lgfe-cm-information .lgfe-cm-playlist-column-left {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            min-width: 0;
        }

        .lgfe-card-matrix--layout-row .lgfe-cm-information .lgfe-cm-playlist-column-left .lgfe-cm-playlist-column {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }        

        .lgfe-card-matrix--layout-row .lgfe-cm-information .lgfe-cm-playlist-column-left .lgfe-cm-details {
            width: 100%;
            padding-left: 10px;
            min-width: 0;
        }        

        .lgfe-card-matrix--layout-row .lgfe-cm-information .lgfe-cm-playlist-column-right {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            min-width: 0;
            -webkit-box-pack: end;
                -ms-flex-pack: end;
                    justify-content: flex-end;
        }

        .lgfe-card-matrix--layout-row .lgfe-cm-information .lgfe-cm-playlist-column-right .lgfe-cm-playlist-column {
            font-size: .8em;
            width: 100%;
            padding: 0px 5px;
            text-align: center;
            font-weight: 400;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            vertical-align: middle;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            word-break: break-word;
        }

        .lgfe-card-matrix--layout-row .lgfe-cm-information .lgfe-cm-playlist-column-right .lgfe-cm-playlist-column-short {
            width: 100%;
            min-width: 75px;            
        }        

        .lgfe-card-matrix--layout-row .lgfe-cm-information .lgfe-cm-playlist-column-right .lgfe-cm-playlist-column .lgfe-cm-playlist-column-contents {
            display: block;
            margin: 0 auto;
        }

        .lgfe-card-matrix--layout-row .lgfe-cm-information .lgfe-cm-playlist-column-right .lgfe-cm-playlist-column.lgfe-cm-playlist-column-required-playing {
            display: none;
        }

        .lgfe-card-matrix--layout-row .lgfe-cm-information .lgfe-cm-keyword-label{
            font-size: .675em;
            font-weight: 700;
            text-decoration: underline;
            margin-bottom: 3px;
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;            
        }


            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Name
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-card-matrix--layout-row .lgfe-cm-name {
                margin-top: 0;
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 1.25em;
                font-weight: 500;
                margin-bottom: .2em;              
            }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Duration
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-card-matrix--layout-row .lgfe-cm-duration {
                width: 10em;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }

            .lgfe-card-matrix--layout-row .lgfe-cm-duration--corner {
                width: 10.1429em;
                height: 10.1429em;
                top: -0.0714em;
                left: -0.0714em;
            }

                /* - - - - - - - - - - - - - - - - - - - - - - - \\
                    $Duration-Icon
                \\ - - - - - - - - - - - - - - - - - - - - - - - */

                .lgfe-card-matrix--layout-row .lgfe-cm-duration::before {
                    font-size: 4em;
                }

                /* - - - - - - - - - - - - - - - - - - - - - - - \\
                    $Time
                \\ - - - - - - - - - - - - - - - - - - - - - - - */

                .lgfe-card-matrix--layout-row .lgfe-cm-duration--corner .lgfe-cm-duration-time {
                    padding: 0.2em 0.3em;
                }


            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Description
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-card-matrix--layout-row .lgfe-cm-description {
                min-height: 1.3334em;
                position: relative;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Spacer
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-card-matrix--layout-row .lgfe-cm-spacer {
                margin:.4em 0;
            }

                .lgfe-card-matrix--layout-row .lgfe-cm-spacer::before {
                    width: 4.75em;
                }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Keywords
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-card-matrix--layout-row .lgfe-cm-keywords {
                height: auto;
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: normal;
                display: block;
                -webkit-box-pack: normal;
                    -ms-flex-pack: normal;
                        justify-content: normal;
                word-break: normal;    
            }
            .lgfe-card-matrix--layout-row .lgfe-cm-keywords:not(:last-child) {
                margin-bottom: 0.5em;
            }

        /* --------------------------------------------- \\
            $Utilities
        \\ --------------------------------------------- */

        .lgfe-card-matrix--layout-row .lgfe-cm-utilities {
            -webkit-box-ordinal-group: 3;
                -ms-flex-order: 2;
                    order: 2;
            padding-right: 1em;
            padding-left: 1em;
        }

        .lgfe-card-matrix--layout-row .lgfe-cm-utilities--column .lgfe-cm-utility-row {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
        }  


/* ========================================================================= \\
    $Layout-Full
\\ ========================================================================= */

.lgfe-card-matrix--layout-full {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    position: relative;
}

@supports (display: grid) {
    .lgfe-card-matrix--layout-full {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-gap: 0.875em;
    }
    @media (max-width: 94em) { 
        .lgfe-card-matrix--layout-full {
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        }
    }
    @media (max-width: 80em) { /** 1280px **/
        .lgfe-card-matrix--layout-full {
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }
    }
    @media (max-width: 70em) { /**  **/
        .lgfe-card-matrix--layout-full {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }
    @media (max-width: 60.625em) { /** 970px **/
        .lgfe-card-matrix--layout-full {
            grid-template-columns: 1fr 1fr;
        }
    }
    @media (max-width: 49.38em) {
        .lgfe-card-matrix--layout-full {
            grid-template-columns: 1fr 1fr;
        }
    }
}

    /* --------------------------------------------- \\
        $Card
    \\ --------------------------------------------- */

    .lgfe-card-matrix--layout-full .lgfe-cm-card-container {
        width: 32.25%;
        position: relative;
    }
    .lgfe-card-matrix--layout-full .lgfe-cm-card-container:not(:nth-child(3n)) {
        margin-right: 0.875em;
    }
    .lgfe-card-matrix--layout-full .lgfe-cm-card-container:not(:nth-last-child(-n+3)) {
        margin-bottom: 0.875em;
    }
    @media (max-width: 80em) { /** 1280px **/
        .lgfe-card-matrix--layout-full .lgfe-cm-card-container {
            width: 48.75%;
        }
        .lgfe-card-matrix--layout-full .lgfe-cm-card-container:nth-child(odd) {
            margin-right: 0.875em;
        }
        .lgfe-card-matrix--layout-full .lgfe-cm-card-container:nth-child(even) {
            margin-right: 0;
        }
        .lgfe-card-matrix--layout-full .lgfe-cm-card-container:not(:nth-last-child(-n+2)) {
            margin-bottom: 0.875em;
        }
    }
    @media (max-width: 60.625em) { /** 970px **/
        .lgfe-card-matrix--layout-full .lgfe-cm-card-container:nth-child(n) {
            width: 100%;
            margin-right: 0;
        }
        .lgfe-card-matrix--layout-full .lgfe-cm-card-container:not(:nth-last-child(-n+1)) {
            margin-bottom: 0.875em;
        }
    }

    @supports (display: grid) {
        .lgfe-card-matrix--layout-full .lgfe-cm-card-container {
            width: 100%;
        }
        .lgfe-card-matrix--layout-full .lgfe-cm-card-container:nth-child(n) {
            margin-right: 0;
            margin-bottom: 0;
        }
    }

    .lgfe-card-matrix--layout-full .lgfe-cm-card {
        height: 110px;
        overflow: hidden;
        border-left: 35px solid #009FDF;
    }

    .lgfe-card-matrix--layout-full .lgfe-cm-card {
        border: 1px solid #009FDF;
        border-left: 35px solid #009FDF;
    }

    .lgfe-card-matrix--layout-full .lgfe-cm-card.expired {
        border: 1px solid #cf0624;
        border-left: 35px solid #cf0624;
    }

    .lgfe-card-matrix--layout-full .lgfe-cm-card.early {
        border: 1px solid #fca130;
        border-left: 35px solid #fca130;
    }

    .lgfe-card-matrix--layout-full .lgfe-cm-card.inactive {
        border: 1px solid #e8e8e8;
        border-left: 35px solid #e8e8e8;
    }    

    /* --------------------------------------------- \\
        $New-Card
    \\ --------------------------------------------- */

    .lgfe-card-matrix.lgfe-card-matrix--layout-full .lgfe-cm-new-card {
        width: 32.25%;
        height: 24em;
        margin-bottom: 0.625em;
    }
    .lgfe-card-matrix.lgfe-card-matrix--layout-full .lgfe-cm-new-card:not(:nth-child(3n)) {
        margin-right: 0.875em;
    }
    @media (max-width: 80em) { /** 1280px **/
        .lgfe-card-matrix.lgfe-card-matrix--layout-full .lgfe-cm-new-card {
            width: 48.75%;
        }
        .lgfe-card-matrix.lgfe-card-matrix--layout-full .lgfe-cm-new-card:nth-child(odd) {
            margin-right: 0.875em;
        }
        .lgfe-card-matrix.lgfe-card-matrix--layout-full .lgfe-cm-new-card:nth-child(even) {
            margin-right: 0;
        }
    }
    @media (max-width: 60.625em) { /** 970px **/
        .lgfe-card-matrix.lgfe-card-matrix--layout-full .lgfe-cm-new-card:nth-child(n) {
            width: 100%;
            margin-right: 0;
        }
    }

    .lgfe-card-matrix.lgfe-card-matrix--layout-full .lgfe-cm-new-card:not(:nth-last-child(-n+3)) {
        margin-bottom: 0.75em;
    }
    @media (max-width: 80em) { /** 1280px **/
        .lgfe-card-matrix.lgfe-card-matrix--layout-full .lgfe-cm-new-card:not(:nth-last-child(-n+2)) {
            margin-bottom: 0.75em;
        }
    }
    @media (max-width: 60.625em) { /** 970px **/
        .lgfe-card-matrix.lgfe-card-matrix--layout-full .lgfe-cm-new-card:not(:nth-last-child(-n+1)) {
            margin-bottom: 0.75em;
        }
    }

    @supports (display: grid) {
        .lgfe-card-matrix.lgfe-card-matrix--layout-full .lgfe-cm-new-card {
            width: 100%;
        }
        .lgfe-card-matrix.lgfe-card-matrix--layout-full .lgfe-cm-new-card:nth-child(n) {
            margin-bottom: 0;
            margin-right: 0;
        }
    }

    .lgfe-card-matrix.lgfe-card-matrix--layout-full .lgfe-cm-new-card .fa {
        font-size: 6em;
    }

    .lgfe-card-matrix.lgfe-card-matrix--layout-full .lgfe-cm-playlist-column-right {
        display:none;
    }

    .lgfe-card-matrix.lgfe-card-matrix--layout-full .lgfe-cm-playlist-column-left {
        height: 100%;
    }    

    .lgfe-card-matrix.lgfe-card-matrix--layout-full .lgfe-cm-details {
        display:none;
    }    

    .lgfe-card-matrix.lgfe-card-matrix--layout-full .lgfe-cm-assets-column {
        height: 100%;
    }

    .lgfe-card-matrix.lgfe-card-matrix--layout-full .lgfe-cm-details {
        height: 100%;
    }    

    /* --------------------------------------------- \\
        $New-Card
    \\ --------------------------------------------- */

        /* --------------------------------------------- \\
            $Masthead
        \\ --------------------------------------------- */    

        .lgfe-card-matrix--layout-full .lgfe-cm-masthead {
            overflow: hidden;
        }

        .lgfe-card-matrix--layout-full .lgfe-cm-masthead::before {
            font-size: 3em;
        }

        .lgfe-card-matrix.lgfe-card-matrix--layout-full .lgfe-cm-masthead-image{
            background-repeat: no-repeat;
            background-color: grey;
        }        

        /* --------------------------------------------- \\
            $Information
        \\ --------------------------------------------- */

        .lgfe-card-matrix--layout-full .lgfe-cm-information {
            width: 100%;
            display: none;
        }

            .lgfe-card-matrix--layout-full .lgfe-cm-information > * {
                -webkit-box-ordinal-group: 2;
                    -ms-flex-order: 1;
                        order: 1;
            }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Name
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-card-matrix--layout-full .lgfe-cm-name {
                margin-top: 9.8889em;
                /*white-space: nowrap;*/
                /*width: 0;*/
            }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Duration
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-card-matrix--layout-full /*.lgfe-cm-masthead + .lgfe-cm-information*/ .lgfe-cm-duration {
                -webkit-box-ordinal-group: 1;
                    -ms-flex-order: 0;
                        order: 0;
                /*width: 100%;*/
                height: 9.625em;
                position: absolute;
                top: 1.75em;
                right: 1.75em;
                left: 1.75em;
            }

                .lgfe-card-matrix--layout-full /*.lgfe-cm-masthead + .lgfe-cm-information*/ .lgfe-cm-duration::before {
                    font-size: 6em;
                }

                /* - - - - - - - - - - - - - - - - - - - - - - - \\
                    $Duration-Icon
                \\ - - - - - - - - - - - - - - - - - - - - - - - */

                .lgfe-card-matrix--layout-full .lgfe-cm-duration::before {
                    font-size: 6em;
                }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Description
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-card-matrix--layout-full .lgfe-cm-description {
                height: 2.6667em;
                overflow: hidden;
                word-break: break-word;
            }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Spacer
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-card-matrix--layout-full .lgfe-cm-spacer::before {
                width: 100%;
            }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Keywords
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-card-matrix--layout-full .lgfe-cm-keywords {
                max-width: 38%;
                height: auto;
                padding-top: 0.75em;
            }

                .lgfe-card-matrix--layout-full .lgfe-cm-keyword-item {
                    word-break: break-word;
                }

            /* - - - - - - - - - - - - - - - - - - - - - - - \\
                $Tags
            \\ - - - - - - - - - - - - - - - - - - - - - - - */

            .lgfe-card-matrix--layout-full .lgfe-cm-tags {
                max-width: 38%;
                margin-bottom: 1.4546em;
            }

        /* --------------------------------------------- \\
            $Utilities
        \\ --------------------------------------------- */

        .lgfe-card-matrix--layout-full .lgfe-cm-utilities {
            position: absolute;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            bottom: 0;
            right: 0;
            background: #fff;
            z-index: 2;
            border: none;
            padding: 0;
            height: 100%;
            width: 35px;
            max-width: 35px;            
        }

        .lgfe-card-matrix--layout-full .lgfe-cm-utility-row{
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            margin-bottom: 0px;
            margin-top: 0px;
        }

        /* --------------------------------------------- \\
            $Drag-Handle
        \\ --------------------------------------------- */

        .lgfe-card-matrix--layout-full .lgfe-cm-drag-handle {
            width: 1.75em;
            height: 1.75em;
            position: absolute;
            top: 0;
            right: 0;
        }
/*
 * The MIT License
 * Copyright (c) 2012 Matias Meno <m@tias.me>
 */
.dropzone, .dropzone * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

.dropzone {
  position: relative; }
  .dropzone .dz-preview {
    position: relative;
    display: inline-block;
    width: 120px;
    margin: 0.5em; }
    .dropzone .dz-preview .dz-progress {
      display: block;
      height: 15px;
      border: 1px solid #aaa; }
      .dropzone .dz-preview .dz-progress .dz-upload {
        display: block;
        height: 100%;
        width: 0;
        background: green; }
    .dropzone .dz-preview .dz-error-message {
      color: red;
      display: none; }
    .dropzone .dz-preview.dz-error .dz-error-message, .dropzone .dz-preview.dz-error .dz-error-mark {
      display: block; }
    .dropzone .dz-preview.dz-success .dz-success-mark {
      display: block; }
    .dropzone .dz-preview .dz-error-mark, .dropzone .dz-preview .dz-success-mark {
      position: absolute;
      display: none;
      left: 30px;
      top: 30px;
      width: 54px;
      height: 58px;
      left: 50%;
      margin-left: -27px; }

/* ========================================================================= \\
    $Form-Fields
\\ ========================================================================= */





/* --------------------------------------------- \\
    $Buttons
\\ --------------------------------------------- */

.lgfe-button {
    cursor: default;
    display: block;
    width: 8.5714em;
    border: 1px solid #47c7fa;
    border-radius: 0.5em;
    padding: 0.6em;
    background-color: #fff;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.875em;
    color: #404040;
    min-height: 30px;
    text-align: center;
    text-decoration: none;
    cursor:pointer;
    -webkit-transition: background-color 150ms cubic-bezier(0.165, 0.84, 0.44, 1),
                        border-color     150ms cubic-bezier(0.165, 0.84, 0.44, 1),
                        color            150ms cubic-bezier(0.165, 0.84, 0.44, 1);
            transition: background-color 150ms cubic-bezier(0.165, 0.84, 0.44, 1),
                        border-color     150ms cubic-bezier(0.165, 0.84, 0.44, 1),
                        color            150ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.lgfe-button:focus,
.lgfe-button:hover {
    outline: 0;
    background-color: #47c7fa;
    color: #fff;
}

.lgfe-button:active {
    border-color: #009fdf;
    background-color: #009fdf;
    color: #fff;
}

.lgfe-button[disabled],
.lgfe-button.lgfe-button--disabled {
    cursor: default;
    background-color: rgb(235, 235, 228);
    color:rgb(108, 111, 112);
    border-color: rgb(208, 208, 208);
}





/* --------------------------------------------- \\
    $Checkboxes
\\ --------------------------------------------- */

.lgfe-input-checkbox__input,
.lgfe-input-radio__input {
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    position: absolute;
    white-space: nowrap;
}

.lgfe-input-checkbox__custom-input {
    cursor: default;
    display: inline-block;
    width: 1.3334em;
    height: 1.3334em;
    margin-bottom: -0.1667em;
    border: 1px solid #bfbfbf;
    border-radius: 0.1667em;
    background-color: #fff;
    font-family: 'FontAwesome';
    font-size: 0.75em;
    color: #fff;
    line-height: 1.2em;
    text-align: center;
}

/** Fixes checkmark positioning in Firefox. (Because icon fonts.) **/
@-moz-document url-prefix() {
    .lgfe-input-checkbox__custom-input {
        line-height: 1.1em;
    }
}

.lgfe-input-checkbox__input:checked ~ label .lgfe-input-checkbox__custom-input {
    border-color: #009fdf;
    background-color: #009fdf;
    position: relative;
}

.lgfe-input-checkbox__input:checked ~ label .lgfe-input-checkbox__custom-input::before {
    content: '\f00c';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/*.lgfe-input-checkbox__input:focus ~ label .lgfe-input-checkbox__custom-input {
    border-color: #bfbfbf;
    background-color: #e9e9e9;
}

.lgfe-input-checkbox__input:checked:focus ~ label .lgfe-input-checkbox__custom-input {
    color: #6c6f70;
}
*/

/* --------------------------------------------- \\
    $Radio-Buttons
\\ --------------------------------------------- */

.lgfe-input-radio__custom-input {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-bottom: -0.1667em;
    border: 1px solid #bfbfbf;
    border-radius: 0.5em;
    background-color: #fff;
}

.lgfe-input-radio__input:checked ~ label .lgfe-input-radio__custom-input {
    border-color: #009fdf;
    background-color: #009fdf;
    position: relative;
}

.lgfe-input-radio__input:checked ~ label .lgfe-input-radio__custom-input::before {
    content: '';
    width: 0.375em;
    height: 0.375em;
    border-radius: 0.1875em;
    background-color: #fff;
    position: absolute;
    top: 0.25em;
    left: 0.25em;
}

.lgfe-input-radio__input:focus ~ label .lgfe-input-radio__custom-input {
    border-color: #bfbfbf;
    background-color: #e9e9e9;
}

.lgfe-input-radio__input:checked:focus ~ label .lgfe-input-radio__custom-input::before {
    background-color: #6c6f70;
}





/* --------------------------------------------- \\
    $Text-Fields
\\ --------------------------------------------- */

.lgfe-field-label {
    font-size: 0.875em;
}

.lgfe-input-text,
.lgfe-input-textarea {
    outline: 0;
    border: 1px solid #d0d0d0;
    border-radius: 0.2143em;
    padding: .8em;
    font-family: inherit;
    color: #6c6f70;
    line-height: 1.4;
    font-size: .875em;
}

.lgfe-input-text:focus,
.lgfe-input-textarea:focus {
    border-color: #009fdf;
}

.lgfe-input-text.expanded,
.lgfe-input-textarea.expanded,
.lgfe-select.expanded select {
    width: 100%;
}

.lgfe-input-text.small{
    width: 116px;
}


/**
 * Placeholder
 *
 * The placeholder selector must be broken out individually by browser.  All
 * browsers will ignore the statement if grouped together.
 */

.lgfe-input-text::-webkit-input-placeholder,
.lgfe-input-textarea::-webkit-input-placeholder {
    color: #d0d0d0;
}

.lgfe-input-text::-moz-placeholder,
.lgfe-input-textarea::-moz-placeholder {
    color: #d0d0d0;
}

.lgfe-input-text:-ms-input-placeholder,
.lgfe-input-textarea:-ms-input-placeholder {
    color: #d0d0d0;
}

.lgfe-input-text::-ms-input-placeholder,
.lgfe-input-textarea::-ms-input-placeholder {
    color: #d0d0d0;
}

.lgfe-input-text::placeholder,
.lgfe-input-textarea::placeholder {
    color: #d0d0d0;
}





/* --------------------------------------------- \\
    $Select
\\ --------------------------------------------- */

.lgfe-select {
    display: inline-block;
    overflow: hidden;
    position: relative;
    width: 100%;
}

    .lgfe-select:not(.lgfe-select--multiple)::after {
        content: '\f0d7';
        cursor: default;
        pointer-events: none;
        height: .8em;
        margin-top: 12px;
        margin-bottom: auto;
        position: absolute;
        top: 1px;
        right: 1em;
        /* bottom: 0; */
        font-family: 'FontAwesome';
        font-size: 1.1em;
        color: #009fdf;
        line-height: 1.1;
    }

    .lgfe-select select {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        outline: 0;
        border: 1px solid #d0d0d0;
        border-radius: 0.2143em;
        padding: .8em 2.2em .8em .8em;
        background-color: #fff;
        font-family: inherit;
        color: #6c6f70;
        font-weight: 400;
        cursor: pointer;
        line-height: 1.4em;
        font-size: .875em;
    }

    .lgfe-select select:-moz-focusring {
        color: transparent;
        text-shadow: 0 0 0 #009fdf;
    }

    .lgfe-select select::-ms-expand {
        display: none;
    }

    .lgfe-select select:focus {
        border: 1px solid #009fdf;
    }

    .lgfe-select select:disabled {
        background-color: rgb(235, 235, 228);
        
    }
    /** Hacks to style `<select>` in IE9 **/
    @media screen and (min-width: 0\0) {
        .lgfe-select {
            border: 1px solid #009fdf;
            border-radius: 0.1875em;
        }

        .lgfe-select select {
            width: 140%;
            border-width: 0;
        }
    }

    /** Hacks to remove IE9 `<select>` styles in IE10/11 **/
    _:-ms-input-placeholder, :root .lgfe-select {
        border: 0;
        border-radius: 0;
    }

    _:-ms-input-placeholder, :root .lgfe-select select {
        width: 100%;
        border-width: 1px;
    }





/* --------------------------------------------- \\
    $Textarea
\\ --------------------------------------------- */

.lgfe-input-textarea {
    min-height: 6.5em;
    resize: vertical;
    line-height: 1.4;
}









/* ========================================================================= \\
    $SelectMenu
\\ ========================================================================= */

.smw-hidden {
    display: none !important;
}

    /* --------------------------------------------- \\
        $Select-Menu-Widget
    \\ --------------------------------------------- */

    .select-menu-widget {

    }

        /* --------------------------------------------- \\
            $Select-Menu-Field
        \\ --------------------------------------------- */

        .select-menu-widget__field {
            position: relative;
        }

            /* --------------------------------------------- \\
                $Combobox
            \\ --------------------------------------------- */

            .js-select-menu-widget .select-menu-widget__combobox, .select-menu-widget__combobox {
                width: 100%;
                outline: 0;
                border: 1px solid #d0d0d0;
                border-radius: 0.2143em;
                padding: 1.1429em 3em 1.1429em 1.1429em;
                background-color: #fff;
                position: relative;
                font-family: inherit;
                font-size: 0.875em;
                font-weight: 700;
                color: #009fdf;
                text-align: left;
            }
            .select-menu-widget__field 
            .select-menu-widget__combobox:-moz-focusring {
                outline: 0;
            }
            .select-menu-widget__combobox:focus,
            .select-menu-widget--is-open .select-menu-widget__combobox {
                border-color: #009fdf;
            }
            .select-menu-widget--is-open .select-menu-widget__combobox {
                border-bottom-color: transparent;
                border-bottom-right-radius: 0;
                border-bottom-left-radius: 0;
            }

                .select-menu-widget__combobox::after {
                    content: '\f0d7'; /** fa-caret-down **/
                    cursor: default;
                    pointer-events: none;
                    height: 1em;
                    margin-top: auto;
                    margin-bottom: auto;
                    position: absolute;
                    top: 0;
                    right: 1em;
                    bottom: 0;
                    font-family: 'FontAwesome';
                    font-size: 1.1em;
                    color: #009fdf;
                    line-height: 1;
                }

            /* --------------------------------------------- \\
                $Listbox
            \\ --------------------------------------------- */

            .select-menu-widget__listbox {
                display: none;
                overflow-y: auto;
                width: 100%;
                max-height: calc(2.75em * 6);
                border: 1px solid #009fdf;
                border-top-color: transparent;
                border-bottom-right-radius: 0.2143em;
                border-bottom-left-radius: 0.2143em;
                background-color: #fff;
                position: absolute;
                top: calc(100% - 1px);
                left: 0;
                z-index: 1000;
            }
            .select-menu-widget__listbox:focus {
                outline: 0;
            }
            .select-menu-widget--is-open .select-menu-widget__listbox {
                display: block;
            }

                /* - - - - - - - - - - - - - - - - - - - - - - - \\
                    $Options
                \\ - - - - - - - - - - - - - - - - - - - - - - - */

                .select-menu-widget__option {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                        -ms-flex-align: center;
                            align-items: center;
                    -webkit-box-pack: start;
                        -ms-flex-pack: start;
                            justify-content: flex-start;
                    cursor: default;
                    padding: 1em 1.1429em;
                    font-size: 0.875em;
                    text-transform: uppercase;
                    color: #009fdf;
                }
                .select-menu-widget__option[aria-selected="true"] {
                    background-color: #009fdf;
                    color: #fff;
                }
                .select-menu-widget--multiple .select-menu-widget__option[aria-selected="true"] {
                    background-color: transparent;
                    color: #009fdf;
                }
                .select-menu-widget__option[aria-disabled="true"]:not([aria-selected="true"]) {
                    background-color: #6c6f70;
                    color: #fff;
                }
                .select-menu-widget__option--focused:not([aria-selected="true"]),
                .select-menu-widget--multiple .select-menu-widget__option--focused,
                .select-menu-widget--multiple .select-menu-widget__option--focused[aria-selected="true"] {
                    background-color: #47c7fa;
                    color: #fff;
                }

                .select-menu-widget--multiple .select-menu-widget__option::before {
                    content: '';
                    display: inline-block;
                    min-width: 1.3334em;
                    width: 1.3334em;
                    height: 1.3334em;
                    margin-right: 0.8334em;
                    border: 1px solid #bfbfbf;
                    border-radius: 0.1667em;
                    background-color: #fff;
                    font-family: 'FontAwesome';
                    font-size: 0.85714em;
                    color: #fff;
                    line-height: 1.2em;
                    text-align: center;
                }
                @-moz-document url-prefix() {
                    /** Fixes checkmark positioning in Firefox. (Because icon fonts.) **/
                    .select-menu-widget--multiple .select-menu-widget__option::before {
                        line-height: 1.1em;
                    }
                }
                .select-menu-widget--multiple .select-menu-widget__option[aria-disabled="true"]::before {
                    border-color: #d0d0d0;
                    background-color: #d0d0d0;
                }
                .select-menu-widget--multiple .select-menu-widget__option[aria-selected="true"]::before {
                    content: '\f00c';
                    border-color: #009fdf;
                    background-color: #009fdf;
                }

                /* - - - - - - - - - - - - - - - - - - - - - - - \\
                    $Option-Group
                \\ - - - - - - - - - - - - - - - - - - - - - - - */

                .select-menu-widget__option-group {
                    cursor: default;
                    padding: 0;
                }

                    .select-menu-widget__option-group-label {
                        display: block;
                        padding: 1em 1.1429em;
                        font-size: 0.875em;
                        font-weight: 700;
                        color: #009fdf;
                    }

                    .select-menu-widget__listbox-group {

                    }

                        .select-menu-widget__option .select-menu-widget__option {
                            font-size: inherit;
                        }
                        .select-menu-widget__option .select-menu-widget__option:first-child {

                        }
                        .select-menu-widget__option .select-menu-widget__option:last-child {

                        }

.button-unstyled {
  border: 0;
  padding: 0;
  background: none;
}

.list-unstyled {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
}





/**
 * Clearfix:  Contain Floats
 *
 * For modern browsers:
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}





/**
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap; /* 1 */
}

/**
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  -webkit-clip-path: none;
  clip-path: none;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
  white-space: inherit;
}

/**
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/**
 * Open Sans Font Family
 * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 * Customized via the Google Webfont Helper application:
 *   https://google-webfonts-helper.herokuapp.com/fonts/open-sans
 *
 * Includes character sets:
 *   - Latin
 *   - Latin Extended
 */





/* Open Sans Light */
@font-face {
  font-family: 'OpenSans';
  src: local('Open Sans Light'), local('OpenSans-Light'),
  url('../fonts/open-sans/open-sans-v15-latin-ext_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('../fonts/open-sans/open-sans-v15-latin-ext_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-style: normal;
  font-weight: 300;
}
/* Open Sans Light Italic */
@font-face {
  font-family: 'OpenSans';
  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
  url('../fonts/open-sans/open-sans-v15-latin-ext_latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('../fonts/open-sans/open-sans-v15-latin-ext_latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-style: italic;
  font-weight: 300;
}





/* Open Sans Regular */
@font-face {
  font-family: 'OpenSans';
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
  url('../fonts/open-sans/open-sans-v15-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('../fonts/open-sans/open-sans-v15-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-style: normal;
  font-weight: 400;
}
/* Open Sans Italic */
@font-face {
  font-family: 'OpenSans';
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
  url('../fonts/open-sans/open-sans-v15-latin-ext_latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('../fonts/open-sans/open-sans-v15-latin-ext_latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-style: italic;
  font-weight: 400;
}





/* Open Sans SemiBold */
@font-face {
  font-family: 'OpenSans';
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
  url('../fonts/open-sans/open-sans-v15-latin-ext_latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('../fonts/open-sans/open-sans-v15-latin-ext_latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-style: normal;
  font-weight: 600;
}
/* Open Sans SemiBold Italic */
@font-face {
  font-family: 'OpenSans';
  src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
  url('../fonts/open-sans/open-sans-v15-latin-ext_latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('../fonts/open-sans/open-sans-v15-latin-ext_latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-style: italic;
  font-weight: 600;
}





/* Open Sans Bold */
@font-face {
  font-family: 'OpenSans';
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
  url('../fonts/open-sans/open-sans-v15-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('../fonts/open-sans/open-sans-v15-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-style: normal;
  font-weight: 700;
}
/* Open Sans Bold Italic */
@font-face {
  font-family: 'OpenSans';
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
  url('../fonts/open-sans/open-sans-v15-latin-ext_latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('../fonts/open-sans/open-sans-v15-latin-ext_latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-style: italic;
  font-weight: 700;
}





/* Open Sans ExtraBold */
@font-face {
  font-family: 'OpenSans';
  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
  url('../fonts/open-sans/open-sans-v15-latin-ext_latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('../fonts/open-sans/open-sans-v15-latin-ext_latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-style: normal;
  font-weight: 800;
}
/* Open Sans ExtraBold Italic */
@font-face {
  font-family: 'OpenSans';
  src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'),
  url('../fonts/open-sans/open-sans-v15-latin-ext_latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('../fonts/open-sans/open-sans-v15-latin-ext_latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-style: italic;
  font-weight: 800;
}

/*Our Main App Container*/
.main-container{
    position:fixed;
    top:0;
    width:100%;
    height:100%;

    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-preferred-size:100%;
    flex-basis:100%;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
}
/*WRAPS pages/views*/
.page-container{
/*    background-color: hsla(180, 4%, 86%, 0.2);*/
    height:100%;
    overflow: auto;

    /* flex: 1 1 0px;
    display: flex; */
    
    padding-left: 2em;

}
.page-container > *{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0px;
}
.page-container.no-scrolling{
    overflow:hidden;
}

.place-holder-wrapper-padding{
    padding-left: 2em;
}

.js-playlists-function-bar,.js-playlist-function-bar{
    margin-left: -2em;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */ /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

@media (max-width: 60.625em) { /** 970px **/
    .page-container{
        padding-left: 0em;
    }
    .js-playlists-function-bar, .js-playlist-function-bar{
        margin-left: 0em;
    }
    .interaction-info-bar-and-page-header-wrapper-content-area .page-header-container{
        padding-left: 0em;
    }
}

/** Material UI Pagination Styling **/

.mat-mdc-paginator-outer-container .mat-mdc-paginator-container {
    color: #666666;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    max-height: 20px;
}
.mat-mdc-paginator-outer-container .mat-mdc-paginator-range-actions {
    width: 100%;
}
.mat-mdc-paginator-outer-container .mat-mdc-paginator-range-label {
    margin: 0 auto 0 10px;
    font-size: 14px;
}
.mat-mdc-paginator-outer-container .mat-mdc-paginator-range-label::before {
    content: "Showing ";
}
.mat-mdc-paginator-outer-container .mat-mdc-paginator-range-label::after {
    content: " records";
}
.mat-mdc-paginator-outer-container .mdc-icon-button {
    border-radius: 2px;
    border: 1px solid #ddd;
    max-height: 20px;
    max-width: 30px;
    margin: 0 2px;
}
.mat-mdc-paginator-outer-container .mat-mdc-paginator-icon {
    position: absolute;
    top: 4px;
    left: 4px;
}
.mat-mdc-paginator-outer-container .mat-mdc-icon-button[disabled] {
    opacity: 0;
}
/**
 * Open Sans Font Family
 * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 * Customized via the Google Webfont Helper application:
 *   https://google-webfonts-helper.herokuapp.com/fonts/open-sans
 *
 * Includes character sets:
 *   - Latin
 *   - Latin Extended
 */

/* Open Sans Light */
@font-face{font-family:'OpenSans';src:local('Open Sans Light'),local(OpenSans-Light),url(../fonts/open-sans/open-sans-v15-latin-ext_latin-300.woff2) format("woff2"),url(../fonts/open-sans/open-sans-v15-latin-ext_latin-300.woff) format("woff");font-style:normal;font-weight:300}
/* Open Sans Light Italic */
@font-face{font-family:'OpenSans';src:local('Open Sans Light Italic'),local(OpenSans-LightItalic),url(../fonts/open-sans/open-sans-v15-latin-ext_latin-300italic.woff2) format("woff2"),url(../fonts/open-sans/open-sans-v15-latin-ext_latin-300italic.woff) format("woff");font-style:italic;font-weight:300}

/* Open Sans Regular */
@font-face{font-family:'OpenSans';src:local('Open Sans Regular'),local(OpenSans-Regular),url(../fonts/open-sans/open-sans-v15-latin-ext_latin-regular.woff2) format("woff2"),url(../fonts/open-sans/open-sans-v15-latin-ext_latin-regular.woff) format("woff");font-style:normal;font-weight:400}
/* Open Sans Italic */
@font-face{font-family:'OpenSans';src:local('Open Sans Italic'),local(OpenSans-Italic),url(../fonts/open-sans/open-sans-v15-latin-ext_latin-italic.woff2) format("woff2"),url(../fonts/open-sans/open-sans-v15-latin-ext_latin-italic.woff) format("woff");font-style:italic;font-weight:400}

/* Open Sans SemiBold */
@font-face{font-family:'OpenSans';src:local('Open Sans SemiBold'),local(OpenSans-SemiBold),url(../fonts/open-sans/open-sans-v15-latin-ext_latin-600.woff2) format("woff2"),url(../fonts/open-sans/open-sans-v15-latin-ext_latin-600.woff) format("woff");font-style:normal;font-weight:600}
/* Open Sans SemiBold Italic */
@font-face{font-family:'OpenSans';src:local('Open Sans SemiBold Italic'),local(OpenSans-SemiBoldItalic),url(../fonts/open-sans/open-sans-v15-latin-ext_latin-600italic.woff2) format("woff2"),url(../fonts/open-sans/open-sans-v15-latin-ext_latin-600italic.woff) format("woff");font-style:italic;font-weight:600}

/* Open Sans Bold */
@font-face{font-family:'OpenSans';src:local('Open Sans Bold'),local(OpenSans-Bold),url(../fonts/open-sans/open-sans-v15-latin-ext_latin-700.woff2) format("woff2"),url(../fonts/open-sans/open-sans-v15-latin-ext_latin-700.woff) format("woff");font-style:normal;font-weight:700}
/* Open Sans Bold Italic */
@font-face{font-family:'OpenSans';src:local('Open Sans Bold Italic'),local(OpenSans-BoldItalic),url(../fonts/open-sans/open-sans-v15-latin-ext_latin-700italic.woff2) format("woff2"),url(../fonts/open-sans/open-sans-v15-latin-ext_latin-700italic.woff) format("woff");font-style:italic;font-weight:700}

/* Open Sans ExtraBold */
@font-face{font-family:'OpenSans';src:local('Open Sans ExtraBold'),local(OpenSans-ExtraBold),url(../fonts/open-sans/open-sans-v15-latin-ext_latin-800.woff2) format("woff2"),url(../fonts/open-sans/open-sans-v15-latin-ext_latin-800.woff) format("woff");font-style:normal;font-weight:800}
/* Open Sans ExtraBold Italic */
@font-face{font-family:'OpenSans';src:local('Open Sans ExtraBold Italic'),local(OpenSans-ExtraBoldItalic),url(../fonts/open-sans/open-sans-v15-latin-ext_latin-800italic.woff2) format("woff2"),url(../fonts/open-sans/open-sans-v15-latin-ext_latin-800italic.woff) format("woff");font-style:italic;font-weight:800}


html,
body {
    height: 100%;
    font-family: 'OpenSans', Helvetica, Arial, sans-serif;
    font-size: 16px;
}

/**
 * Hide visually and from screen readers
 *
 * 1. Hide Vue.js squiggly.
 */

.hidden,
[v-cloak] /* 1 */ {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/**
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/**
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/**
 * Clearfix:  Contain Floats
 *
 * For modern browsers:
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
    content: ' '; /* 1 */
    display: table; /* 2 */
}

.clearfix::after {
    clear: both;
}

/**
 * Remove default browser styling from elements.
 */

.button-unstyled {
    border: 0;
    padding: 0;
    background: none;
}

.list-unstyled {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style-type: none;
}

/**
 * Apply a gradient effect to lines of text that are too long for the
 * containing element.
 */

.line-clamp {
    overflow: hidden;
    position: relative;
}

.line-clamp::after {
    content: '';
    pointer-events: none;
    width: 30%;
    height: 100%;
    background:         -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(80%, #fff));
    background:         linear-gradient(to right, rgba(255, 255, 255, 0), #fff 80%);
    position: absolute;
    right: 0;
    bottom: 0;
}

.overflow-clamp{
    -webkit-box-shadow: inset -10px -4px 10px #fff;
            box-shadow: inset -10px -4px 10px #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/**
 * Background color helper classes.
 */

.blue-bg {
    background: #47c7fa;
    background:         -webkit-gradient(linear, left top, left bottom, from(#47c7fa), to(#009fdf));
    background:         linear-gradient(to bottom, #47c7fa, #009fdf);
}

.grey-bg{
    background: #dcdddd;
}





/**
 *
 */

.lgfe-elem-state {
    color: #404040;
    -webkit-transition: color 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: color 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.lgfe-elem-state:focus:not(.button, button),
.lgfe-elem-state:hover:not(.button, button) {
    color: #47c7fa;
}
.lgfe-elem-state:active:not(.button, button),
.lgfe-elem-state.is-active:not(.button, button) {
    color: #009fdf;
}

.lgfe-elem-disabled,
[disabled] {
    color: #dcdcdc;

}
/*.switch input:disabled + .slider {
background-color: #bbbbbb !important;
}*/

a {
    color: #009FDF;
}


/**
 * Tooltip balloons.
 *
 * Important:  Do *not* use on elements that already make use of pseudo
 * elements, or the tooltip will clash with the existing functionality.
 */

/*[data-tooltip] {
position: relative;
}

[data-tooltip]:focus::before,
[data-tooltip]:hover::before {
pointer-events: none;
content: '';
opacity: 1;
margin-top: -0.25em;
border: 0.5em solid transparent;
border-bottom-color: #333;
font-size: 12px;
font-size: 12px;
font-size: 0.75rem;
position: absolute;
top: 100%;
left: 50%;
z-index: 1;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
-webkit-transform-origin: top;
transform-origin: top;
    }

    [data-tooltip]:focus::after,
    [data-tooltip]:hover::after {
        pointer-events: none;
        content: '\200b' attr(data-tooltip); !** zero-width space, attribute value **!
        opacity: 1;
        border-radius: 0.3334em;
        margin-top: 0.75em;
        padding: 0.4167em 0.8334em;
        background-color: #333;
        font-size: 12px;
        font-size: 12px;
        font-size: 0.75rem;
        white-space: nowrap;
        color: #fff;
        position: absolute;
        top: 100%;
        left: 50%;
        z-index: 1;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        -webkit-transform-origin: top;
        transform-origin: top;
    }

    [data-tooltip]:focus::before,
    [data-tooltip]:hover::before,
    [data-tooltip]:focus::after,
    [data-tooltip]:hover::after {
        -webkit-animation: tooltip-bubble 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
        animation: tooltip-bubble 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    @-webkit-keyframes tooltip-bubble {
        from {
            opacity: 0;
            -webkit-transform: translate(-50%, -1em);
            transform: translate(-50%, -1em);
        }

        to {
            opacity: 1;
            -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
        }
    }

    @keyframes tooltip-bubble {
        from {
            opacity: 0;
            -webkit-transform: translate(-50%, -1em);
            transform: translate(-50%, -1em);
        }

        to {
            opacity: 1;
            -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
        }
    }*/





/**
 * Fun ink ripple effect.
 */

.ripple-effect {
    display: block;
    position: absolute;
    background: hsl(197, 100%, 44%);
    background: rgba(0, 161, 224, 0.3);
    border-radius: 100%;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.ripple-effect.animate {
    -webkit-animation: ripple 0.4s linear;
    animation: ripple 0.4s linear;
}

@-webkit-keyframes ripple {
    100% {
        opacity: 0;
        -webkit-transform: scale(2.5);
    }
}

@keyframes ripple {
    100% {
        opacity: 0;
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
    }
}

/**
 * Three dot loading indicator. ( • · · >> · • · >> · · • )
 */

.loader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    position: absolute;
    width: 50px;
}

.loader span {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    margin: 10px auto;
    background: #009FDF;
    border-radius: 50px;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    -webkit-animation: loader 0.9s infinite alternate;
    animation: loader 0.9s infinite alternate;
}

.loader span:nth-of-type(2) {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.loader span:nth-of-type(3) {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.loader-lower-right{
    position: fixed;
    z-index: 1;
    bottom: 0;
    right: 2em;
}

.loader-inline {
    position: initial;
}

@-webkit-keyframes loader {
    0% {
        width: 10px;
        height: 10px;
        opacity: 0.9;
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }
    100% {
        width: 16px;
        height: 16px;
        opacity: 0.1;
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }
}

@keyframes loader {
    0% {
        width: 10px;
        height: 10px;
        opacity: 0.9;
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }
    100% {
        width: 16px;
        height: 16px;
        opacity: 0.1;
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }
}

.loader-card {
    width:100%;
    height: 36px;
    text-align: center;
    padding-top: 1em;
}

.loader-card .loader {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}



/* ========================================================================= \\
LiveGuide-Modal
\\ ========================================================================= */
.lg-modal {
    display: none;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* --------------------------------------------- \\
LiveGuide-Modal-Transition-Effect
\\ --------------------------------------------- */
.lg-modal-enter-active,
.lg-modal-leave-active {
    -webkit-transition: opacity 350ms cubic-bezier(0.165, 0.84, 0.44, 1) 150ms;
    transition: opacity 350ms cubic-bezier(0.165, 0.84, 0.44, 1) 150ms;
}

.lg-modal-enter,
.lg-modal-leave-to {
    opacity: 0;
}

/* --------------------------------------------- \\
Wrapper
\\ --------------------------------------------- */
.lg-modal__wrapper {
    position: absolute;
    top: 3em;
    padding: 0 1em;
    z-index: 1;
}

.lg-modal__wrapper:focus {
    outline: 0;
}

/* --------------------------------------------- \\
Container
\\ --------------------------------------------- */
.lg-modal__container {
    width: 100%;
    position: relative;
}

/* --------------------------------------------- \\
Container-Transition-Effect
\\ --------------------------------------------- */
.lg-modal-enter-active .lg-modal__container,
.lg-modal-leave-active .lg-modal__container {
    -webkit-transition: -webkit-transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1) 150ms;
    transition: -webkit-transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1) 150ms;
    transition:         transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1) 150ms;
    transition:         transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1) 150ms, -webkit-transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1) 150ms;
    transition:         transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1) 150ms,
    -webkit-transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1) 150ms;
    transition:         transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1) 150ms,
    -webkit-transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1) 150ms;
}

.lg-modal-enter .lg-modal__container,
.lg-modal-leave-to .lg-modal__container {
    -webkit-transform: translateY(-2rem);
    transform: translateY(-2rem);
}

/* --------------------------------------------- \\
Sections
\\ --------------------------------------------- */
.lg-modal__section {
    margin-bottom: 2em;
}

.lg-modal__section--gap-bottom {
    margin-bottom: 4em;
}

.lg-modal__section.lg-modal__section-info {
    padding: 0em 2.4em 0em 2.4em;
    margin-bottom: 1.5em;
}

/* --------------------------------------------- \\
Titles
\\ --------------------------------------------- */
.lg-modal__title-2 {
    margin-top: 0;
}

.lg-modal__title-3 {
    font-size: 0.875em;
    font-weight: 400;
}

.lg-modal__title-4 {
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 0.75em;
    font-weight: 300;
}

/* --------------------------------------------- \\
Links
\\ --------------------------------------------- */
.lg-modal__link {
    border-bottom: 1px solid #009fdf;
    color: #6c6f70;
    text-decoration: none;
}

/* --------------------------------------------- \\
Form-Fields
\\ --------------------------------------------- */
.lg-modal__field{
    position: relative;
}
.lg-modal__field.invalid input {
    border-color: #f00;
}

.lg-modal__field:not(:last-child) {
    margin-bottom: 0.75em;
}

.lg-modal__field label {
    font-size:.875em;
}

/* --------------------------------------------- \\
List-of-Links
\\ --------------------------------------------- */
.lg-modal__list-links {
    font-size: 0.75em;
    line-height: 2;
}

/* --------------------------------------------- \\
Modal-Close-Button
\\ --------------------------------------------- */
.lg-modal__close {
    cursor: pointer;
    width: 3.25em;
    height: 3.25em;
    position: absolute;
    top: 0;
    right: 0;
    outline:none;
    -webkit-transition: color 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: color 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.lg-modal__close:hover {
    color:#009fdf;
}

.lg-modal__close__icon {
    font-size: 1.125em;
    cursor: pointer;
}

.lg-modal__close__icon__inverse {
    font-size: 1.125em;
    cursor: pointer;
    color: #FFF;
}

/* --------------------------------------------- \\
Modal-Overlay
\\ --------------------------------------------- */
.lg-modal__overlay {
    background-color: rgba(51, 51, 51, 0.8);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* --------------------------------------------- \\
Wrapper
\\ --------------------------------------------- */
.lg-modal--small .lg-modal__wrapper {
    max-width: 416px;
    max-width: 26rem;
}

/* --------------------------------------------- \\
Container
\\ --------------------------------------------- */
.lg-modal--small .lg-modal__container {
    background:         -webkit-gradient(linear, left top, left bottom, from(#47c7fa), to(#009fdf));
    background:         linear-gradient(to bottom, #47c7fa, #009fdf);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#47c7fa', endColorstr='#009fdf', GradientType=0); /** IE9 **/
}

/* --------------------------------------------- \\
Content
\\ --------------------------------------------- */
.lg-modal--small .lg-modal__content {
    padding: 2em;
    color: #fff;
}

/* --------------------------------------------- \\
Titles
\\ --------------------------------------------- */
.lg-modal--small .lg-modal__title-2 {
    font-size: 0.625em;
    font-weight: 800;
    letter-spacing: 0.125em;
    text-transform: uppercase;
}

/* --------------------------------------------- \\
Paragraphs
\\ --------------------------------------------- */
.lg-modal--small .lg-modal__container p {
    font-size: 1.125em;
    line-height: 1.3;
}

/* --------------------------------------------- \\
Action-Buttons
\\ --------------------------------------------- */
.lg-modal--small .lg-modal__actions .lgfe-button {
    margin-right: auto;
    margin-left: auto;
}

/* --------------------------------------------- \\
Checkboxes
\\ --------------------------------------------- */
.lg-modal--small .lgfe-input-checkbox__input:checked ~ label .lgfe-input-checkbox__custom-input {
    border-color: #fff;
}

/* --------------------------------------------- \\
Radio-Buttons
\\ --------------------------------------------- */
.lg-modal--small .lgfe-input-radio__input:checked ~ label .lgfe-input-radio__custom-input {
    border-color: #fff;
}

/* --------------------------------------------- \\
Modal-Close-Button
\\ --------------------------------------------- */
.lg-modal--small .lg-modal__close {
    color: #fff;
}

/* --------------------------------------------- \\
Wrapper
\\ --------------------------------------------- */
.lg-modal--large .lg-modal__wrapper {
    max-width: 946px;
    max-width: 59.125rem;
}

/* --------------------------------------------- \\
Container
\\ --------------------------------------------- */
.lg-modal--large .lg-modal__container {
    background-color: #fff;
}

/* --------------------------------------------- \\
Sidebar
\\ --------------------------------------------- */
.lg-modal--large .lg-modal__sidebar {
    width: 16%;
    padding-top: 3.125em;
    padding-bottom: 3.125em;
    background:         -webkit-gradient(linear, left top, left bottom, from(#47c7fa), to(#009fdf));
    background:         linear-gradient(to bottom, #47c7fa, #009fdf);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#47c7fa', endColorstr='#009fdf', GradientType=0); /** IE9 **/
    position: absolute;
    top: 0;
    bottom: 0;
}

.lg-modal--large .lg-modal__sidebar__icon {
    display: block;
    width: 1em;
    margin-right: auto;
    margin-left: auto;
    font-size: 3.125em;
    color: #fff;
}
.lg-modal--large .lg-modal__sidebar__icon:before {
    /** `content` property defined by FontAwesome. **/
    display: block;
    width: 100%;
    text-align: center;
}

.lg-modal--large .lg-modal__sidebar__icon img {
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------- \\
Sidebar-Tabs
\\ --------------------------------------------- */
.lg-modal--large .lg-modal__navigation {
    margin-top: 3.75em;
    font-size: 0.875em;
    text-align: center;
}

.lg-modal--large .lg-modal__navigation__item:not(:last-child) {
    margin-bottom: 2em;
}

.lg-modal--large .lg-modal__navigation__link {
    display: block;
    width: 100%;
    padding: 1em 2em;
    color: #fff;
    font-weight: 300;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: uppercase;
}
.lg-modal--large .lg-modal__navigation__link:focus {
    background-color: rgba(255, 255, 255, 0.2);
}

.lg-modal--large .lg-modal__navigation__link--active {
    font-weight: 700;
}

/* --------------------------------------------- \\
Content
\\ --------------------------------------------- */
.lg-modal--large .lg-modal__content {
    width: 84%;
    margin-left: 16%;
    color: #6c6f70;
}

/* --------------------------------------------- \\
Titles
\\ --------------------------------------------- */
.lg-modal--large .lg-modal__title-2 {
    display: inline-block;
    border-bottom: 1px solid #009fdf;
    padding-bottom: 0.3334em;
    font-size: 1.125em;
    font-weight: 400;
}

/* --------------------------------------------- \\
Panels
\\ --------------------------------------------- */
.lg-modal--large .lg-modal__panel {
    outline: 0;
    padding: 4.5em 6.25em 4.5em 3.125em;
}
.lg-modal--large.lg-modal--wide .lg-modal__panel {
    outline: 0;
    padding: 4.5em 0em 4.5em 0em;
}


/* --------------------------------------------- \\
Modal Table Full Width
\\ --------------------------------------------- */

.lg-modal-table-full a {
    font-weight:700;
    cursor:pointer;
}
.lg-modal-table-full table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
.lg-modal-table-full tbody {
    font-weight: 700;
}
.lg-modal-table-full tr th {
    position:relative;
    border-bottom: 1px solid #009FDF;
    font-weight: 700;
    font-size: .875em;
    padding: .4em 1em 1.4em 1em;
}
.lg-modal-table-full tr th:first-child {
    padding-left: 2.4em;
}
.lg-modal-table-full tr th:last-child {
    padding-right: 2.4em;
}

.lg-modal-table-full thead th .accessory-pricelist-checkbox-value{
    font-weight:400;
    font-size: .8em;
}
.lg-modal-table-full tbody th, .lg-modal-table-full tbody td {
    cursor:auto;
}
.lg-modal-table-full tbody tr:hover {
    background-color: #ffffff;
}
.lg-modal-table-full tbody tr:nth-child(even) {
    background-color:#E9EEE9;
}
.lg-modal-table-full tbody tr:nth-child(even):hover {
    background-color:#E9EEE9;
}
.lg-modal-table-full tbody tr:hover, .lg-modal-table-full tbody tr:hover {
    background-color: inherit;
}
.lg-modal-table-full tr td {
    text-align:center;
    padding: 1em;
    border-bottom: 1px solid #009FDF;
    border-right: 0;
    position:relative;
    font-weight: 400;
    font-size: .875em;
}
.lg-modal-table-full tr td:first-child {
    padding-left: 2.4em;
}
.lg-modal-table-full tr td:last-child {
    padding-right: 2.4em;
}
.lg-modal-table-full tr.full td {
    text-align:left;
    padding: 1.4em 2.4em;
    font-weight:700;
}
.lg-modal-table-full tr td .lgfe-input-text {
    resize: none;
    display: block;
    overflow: hidden;
    padding: 12px 12px 12px 15px;
}
.lg-modal-table-full tr td .switch-container {
    height:42px;
    width: 40px;
    position: relative;
    margin: 0 auto;
}

.lg-modal-table-full tr td .switch-container .switch {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    display: inline-block;
    margin-top: 13px;
}
.lg-modal-table-full .pdwurt-status-wrapper .pdwurt-status {
    padding-left:0;
    display: inline-block;
}

.lg-modal-table-full .pdwurt-status-wrapper .pdwurt-status .pdwurt-status-lg {
    position: absolute;
    top: 6px;
    left: 7px;
}

.lg-modal-table-full .pdwurt-status .pdwurt-status-dot {
    left: auto;
    right: 6px;
    top: -3px;
}


/* --------------------------------------------- \\
$Range-Datepicker
\\ --------------------------------------------- */
.lgfe-range-datepicker.datepicker {
    border: 0;
    -webkit-box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.2);
            box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.2);
    font-family: inherit;
    color: #6c6f70;
}

/* --------------------------------------------- \\
$Calendar-Pointer
\\ --------------------------------------------- */

.lgfe-range-datepicker .datepicker--pointer {
    border: 1px solid transparent;
    border-top-color: #bfbfbf;
    border-right-color: #bfbfbf;
    background-color: transparent;
    z-index: 2;
}
.lgfe-range-datepicker.-right-top- .datepicker--pointer,
.lgfe-range-datepicker.-bottom-right- .datepicker--pointer,
.lgfe-range-datepicker.-bottom-center- .datepicker--pointer,
.lgfe-range-datepicker.-bottom-left- .datepicker--pointer,
.lgfe-range-datepicker.-left-top- .datepicker--pointer {
    border-top-color: #009fdf;
    border-right-color: #009fdf;
}

.lgfe-range-datepicker.-top-left- .datepicker--pointer,
.lgfe-range-datepicker.-top-center- .datepicker--pointer,
.lgfe-range-datepicker.-top-right- .datepicker--pointer {
    top: calc(100% - 6px);
}
.lgfe-range-datepicker.-right-top- .datepicker--pointer,
.lgfe-range-datepicker.-right-center- .datepicker--pointer,
.lgfe-range-datepicker.-right-bottom- .datepicker--pointer {
    right: calc(100% - 6px);
}
.lgfe-range-datepicker.-bottom-right- .datepicker--pointer,
.lgfe-range-datepicker.-bottom-center- .datepicker--pointer,
.lgfe-range-datepicker.-bottom-left- .datepicker--pointer {
    bottom: calc(100% - 6px);
}
.lgfe-range-datepicker.-left-bottom- .datepicker--pointer,
.lgfe-range-datepicker.-left-center- .datepicker--pointer,
.lgfe-range-datepicker.-left-top- .datepicker--pointer {
    left: calc(100% - 6px);
}

.lgfe-range-datepicker .datepicker--pointer::before {
    display: block;
    content: '';
    border: 4px solid transparent;
}
.lgfe-range-datepicker.-top-left- .datepicker--pointer::before,
.lgfe-range-datepicker.-top-center- .datepicker--pointer::before,
.lgfe-range-datepicker.-top-right- .datepicker--pointer::before,
.lgfe-range-datepicker.-right-center- .datepicker--pointer::before,
.lgfe-range-datepicker.-right-bottom- .datepicker--pointer::before,
.lgfe-range-datepicker.-left-bottom- .datepicker--pointer::before,
.lgfe-range-datepicker.-left-center- .datepicker--pointer::before {
    border-top-color: #fff;
    border-right-color: #fff;
}
.lgfe-range-datepicker.-right-top- .datepicker--pointer::before,
.lgfe-range-datepicker.-bottom-right- .datepicker--pointer::before,
.lgfe-range-datepicker.-bottom-center- .datepicker--pointer::before,
.lgfe-range-datepicker.-bottom-left- .datepicker--pointer::before,
.lgfe-range-datepicker.-left-top- .datepicker--pointer::before {
    border-top-color: #009fdf;
    border-right-color: #009fdf;
}

/* --------------------------------------------- \\
$Calendar-Header-Navigation
\\ --------------------------------------------- */

.lgfe-range-datepicker .datepicker--nav {
    border: 0;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    background-color: #009fdf;
    position: relative;
    z-index: 1;
}

.lgfe-range-datepicker .datepicker--nav-action {
    border-radius: 3px;
    -webkit-transition: background-color 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: background-color 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.lgfe-range-datepicker .datepicker--nav-action:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.lgfe-range-datepicker .datepicker--nav-action path {
    stroke: #fff;
}

.lgfe-range-datepicker .datepicker--nav-title {
    border-radius: 3px;
    color: #fff;
    -webkit-transition: background-color 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: background-color 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.lgfe-range-datepicker .datepicker--nav-title:not(.-disabled-):hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.lgfe-range-datepicker .datepicker--nav-title span {
    margin-left: 5px;
    color: #fff;
}

/* --------------------------------------------- \\
$Calendar-Content
\\ --------------------------------------------- */

.lgfe-range-datepicker .datepicker--content {
    padding: 0;
    position: relative;
    z-index: 1;
}

.lgfe-range-datepicker .datepicker--days-names {
    margin: 0;
    padding: 0 0 8px;
    background-color: #009fdf;
}

.lgfe-range-datepicker .datepicker--day-name {
    color: #fff;
}

.lgfe-range-datepicker .datepicker--cells {
    border: 1px solid #bfbfbf;
    border-top: 0;
}

.lgfe-range-datepicker .datepicker--cell {
    border: 1px solid #f6f6f6;
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 0;
}
.lgfe-range-datepicker .datepicker--cells-days:nth-child(7n),
.lgfe-range-datepicker .datepicker--cells-months:nth-child(3n),
.lgfe-range-datepicker .datepicker--cells-years:nth-child(4n) {
    border-right: 0;
}
.lgfe-range-datepicker .datepicker--cells-days:nth-last-child(-n+7),
.lgfe-range-datepicker .datepicker--cells-months:nth-last-child(-n+3),
.lgfe-range-datepicker .datepicker--cells-years:nth-last-child(-n+4) {
    border-bottom: 0;
}

.lgfe-range-datepicker .datepicker--cell.-focus- {
    border-color: #80ddff;
    background-color: #ccf1ff;
}

.lgfe-range-datepicker .datepicker--cell.-current- {
    border-color: #1abeff;
    color: #009fdf;
}
.lgfe-range-datepicker .datepicker--cell.-current-.-focus- {
    color: #009fdf;
}
.lgfe-range-datepicker .datepicker--cell.-current-.-focus-.-range-to- {
    border-color: transparent;
    background-color: #52ceff;
    color: #fff;
}
.lgfe-range-datepicker .datepicker--cell.-current-.-in-range- {
    border-color: #1abeff;
    color: #009fdf;
}

.lgfe-range-datepicker .datepicker--cell.-in-range- {
    border-color: transparent;
    background-color: #edeeee;
}
.lgfe-range-datepicker .datepicker--cell.-in-range-.-focus- {
    border-color: #80ddff;
    background-color: #ccf1ff;
}
.lgfe-range-datepicker .datepicker--cell.-in-range-.-other-month- {
    background-color: #f4f5f5;
}

.lgfe-range-datepicker .datepicker--cell.-disabled- {
    color: #d1d1d1;
}
.lgfe-range-datepicker .datepicker--cell.-disabled-.-focus- {
    background-color: #f6f6f6;
}
.lgfe-range-datepicker .datepicker--cell.-disabled-.-in-range- {
    color: #d1d1d1;
}
.lgfe-range-datepicker .datepicker--cell.-disabled-.-current-.-focus- {

}

.lgfe-range-datepicker .datepicker--cell.-range-from- {
    border-color: transparent;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    background-color: #ccf1ff;
}
.lgfe-range-datepicker .datepicker--cell.-range-to- {
    border-color: transparent;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    background-color: #ccf1ff;
}
.lgfe-range-datepicker .datepicker--cell.-range-from-.-range-to- {
    border-radius: 0;
}

.lgfe-range-datepicker .datepicker--cell.-selected- {
    background-color: #009fdf;
}
.lgfe-range-datepicker .datepicker--cell.-selected-.-current- {
    background-color: #1abeff;
    color: #fff;
}
.lgfe-range-datepicker .datepicker--cell.-selected-.-focus- {
    background-color: #1abeff
}

.lgfe-range-datepicker .datepicker--cell-day.-other-month-.-selected- {
    background-color: #52ceff;
}
.lgfe-range-datepicker .datepicker--cell-day.-other-month-.-selected-.-focus- {
    background-color: #1abeff;
}
.lgfe-range-datepicker .datepicker--cell-day.-other-month-.-in-range-.-focus- {
    background-color: #e5f8ff;
}

/* --------------------------------------------- \\
$Calendar-Buttons
\\ --------------------------------------------- */

.lgfe-range-datepicker .datepicker--buttons {
    border: 1px solid #bfbfbf;
    border-top: 0;
    background-color: #fff;
    position: relative;
    z-index: 1;
}

.lgfe-range-datepicker .datepicker--button {
    border-radius: 3px;
    color: #009fdf;
    -webkit-transition: background-color 150ms cubic-bezier(0.165, 0.84, 0.44, 1),
    color            150ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: background-color 150ms cubic-bezier(0.165, 0.84, 0.44, 1),
    color            150ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.lgfe-range-datepicker .datepicker--button:hover {
    background-color: #009fdf;
    color: #fff;
}


/* --------------------------------------------- \\
Tiles
\\ --------------------------------------------- */

.lgfe-tile-grid-wrapper{
    background-color: #f1f1f1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding: 1.2em 2.3em 3em 2.3em;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.lgfe-tile-grid-item-group{
    display: inherit;
    -webkit-box-flex: inherit;
        -ms-flex: inherit;
            flex: inherit;
    padding: 0;
    /*   flex-wrap: inherit;*/
}

.lgfe-tile{
    position: relative;
    height: auto;
    -webkit-transition: all .4s;
    transition: all .4s;
}
.lgfe-tile-button-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    right: 1.2em;
}
.lgfe-tile-button{
    cursor: pointer;
    padding: 0 .3em;
    font-size: 1rem;
    -webkit-transition: color 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: color 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.lgfe-tile-button:hover{
    color:#009FDF;
}
.lgfe-tile-button.lgfe-tile-button-lock{
    cursor: initial;
}
.lgfe-tile-button.lgfe-tile-button-lock:hover{
    color: #6C6F70;
}
.lgfe-tile-grid-item-header-text {
    -webkit-box-shadow: 0px 1px 0 #009FDF;
            box-shadow: 0px 1px 0 #009FDF;
    padding: 0em .4em;
    line-height: 2;
}
.lgfe-tile-grid-item-header-plus {
    font-size: 1.5em;
    position: absolute;
    right: 1em;
}

.lgfe-tile-max{
    max-height: 10000px;
}
.lgfe-tile-min{
    max-height: 0px;
    opacity: 0;
    overflow: hidden;
    padding: 0 !important;
}

.lgfe-tile-grid-item-group-col{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0
}

.lgfe-tile-grid-item{
    margin: 1.2em;
    padding: 1.4em 2em;
    border: 1px solid #D0D1D1;
    border-radius: 5px;
    background-color: #FFFFFF;
    -webkit-box-shadow: 0.5em 0.6em 1em rgba(185, 185, 185, .3);
            box-shadow: 0.5em 0.6em 1em rgba(185, 185, 185, .3);
}
.lgfe-tile-grid-item .lgfe-tile-grid-item-header{
    font-size: 1.2em;
    font-weight: 500;
    margin: 0 0 .4em 0;
    color: #6C6F70;

    text-transform: capitalize;
    width:100%;
    text-align: center;
}
.lgfe-tile-grid-item .lgfe-tile-grid-item-label-text-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /*flex: 9;*/
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: .6em 0;

}
.lgfe-tile-grid-item .lgfe-tile-grid-item-label{
    font-weight: 700;
    padding: .2em 0;
    text-transform: capitalize;
    font-size: .875em;
}
.lgfe-tile-grid-item .lgfe-tile-grid-item-text{
    padding: .2em 0;
    font-size: .875em;
}
.lgfe-tile-grid-item-content-wrapper{
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-user-select: text;
       -moz-user-select: text;
        -ms-user-select: text;
            user-select: text;
}
.lgfe-tile-grid-item-no-content {
    text-align: center;
    margin-top: 20px;
    line-height: 1.6;
}
.lgfe-tile-grid-item-no-content-modal {
    font-size: .9em;
    text-align: center;
    margin-top: 20px;
    line-height: 1.6;
}

.tile-grid-item-wrapper{
    margin: 1em 0 1em 0;
    padding: 2px;
    outline: 1px solid #ccc;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    word-break: break-word;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.tile-grid-item-wrapper i{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 1.5em;
    padding: 0 .5em;
    width: 2em;
    height: 2em;
    color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-right: 10px;
}
.tile-grid-item-wrapper .tgiw-name{
    background: -webkit-gradient(linear, left top, right top, from(#009fdf), to(#47c7fa));
    background: linear-gradient(to right, #009fdf, #47c7fa);
}
.tile-grid-item-wrapper .tgiw-schedule, .tile-grid-item-wrapper .tgiw-dark{
    background: #fff;
    color: #000;
}

/* --------------------------------------------- \\
Hero Area test
\\ --------------------------------------------- */

.lgfe-tile-grid-item-hero-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 1.2em;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.lgfe-tile-grid-item-hero-side{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-height: 100px;
}
.lgfe-tile-grid-item-hero-side-left{
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding:0 .2em;
}
.lgfe-tile-grid-item-hero-side-right{
    border-left: 1px solid #ccc;
    -webkit-box-flex: 2;
        -ms-flex: 2;
            flex: 2;
}
.lgfe-tile-grid-item-hero-side-line-inner-content-wrapper{
    width: 100%;
    height: 100%;
}
.lgfe-tile-grid-item-hero-side-line-inner-content-wrapper-table{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

}
.lgfe-tile-grid-item-hero-side-line-inner-content-wrapper-table .lgfe-tile-grid-item-hero-side-line:nth-child(odd){
    background-color: rgba(216,216,216,0.3);
}
.lgfe-tile-grid-item-hero-side-line-inner-content-table-line-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.lgfe-tile-grid-item-hero-side-line-inner-content-wrapper-table-title,.lgfe-tile-grid-item-hero-side-line-inner-content-wrapper-table-value{
    padding: 0 .2em;
}

.lgfe-tile-grid-item-hero-side-line{
    padding-bottom: .2em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}
.lgfe-tile-grid-item-hero-side-line-bold{
    font-weight: 700;
}

/* LGFE Global Checkboxes */
input[type="checkbox"].checkbox {
    display: none;
}
input[type="checkbox"].checkbox + span {
    position: relative;
    line-height: 15px;
    font-size: 0.875em;
    cursor: pointer;
    text-align: center;
}
input[type="checkbox"].checkbox + span:before {
    border: 2px solid #ccc;
    border-radius: 2px;
    content: "\f00c";
    color: #fff;
    display: inline-block;
    font-family: FontAwesome;
    width: 18px;
    height: 18px;
}
input[type="checkbox"].checkbox:checked + span:before {
    content: "\f00c";
    color: #fff;
    background-color: #2196F3;
    border: 2px solid #2196F3;
}
input[type="checkbox"].checkbox:checked:disabled + span:before {
    content: "\f00c";
    color: #fff;
    background-color:#ccc;
    border: 2px solid #ccc;
}

/* --------------------------------------------- \\
LGFE Global Radio Buttons
\\ --------------------------------------------- */

input[type="radio"].radio {
    display: none;
}
input[type="radio"].radio + span {
    position: relative;
    line-height: 15px;
    font-size: 0.875em;
    cursor: pointer;
    padding-left: 25px;
}
input[type="radio"].radio + span:before {
    content: "";
    border: 1px solid #BFBFBF;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 0;
    left: 0;
}
input[type="radio"].radio:checked + span:before {
    content: "";
    color: #fff;
    background-color: #2196F3;
    border: 1px solid #2196F3;
}
input[type="radio"].radio:checked + span:after {
    content: "";
    border-radius: 50%;
    background-color: #fff;
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    top: 5px;
    left: 5px;
}

.radio-button-container {
    position:relative;
    margin-bottom: 10px;
    font-size: 0.875em;
}
.radio-button-container:last-child {
    margin-bottom: 0px;
}

.radio-button-container:after {
    content: "";
    position: absolute;
    display: none;
}
.radio-button-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.radio-button-container label {
    width: 100%;
    display: block;
    padding: 1px 0px 7px 25px;
}
.radio-button-container .radio-button {
    position:absolute;
    width:100%;
    height: 100%;
    left: 0;
    z-index: 10;
}
.radio-button-container .radio-check {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    background-color: #eee;
    border-radius: 50%;
    border: 2px solid #ccc;
}
.radio-button-container .radio-check:after {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}
.radio-button-container:hover input ~ .radio-check {
    background-color: #ccc;
}
.radio-button-container:hover input ~  .radio-check:after {
    display: block;
    content: "";
    margin: 0 auto;
    margin-top: 3px;
}
.radio-button-container input:checked ~ .radio-check {
    background-color: #2196F3;
    border-color: #2196F3;
}

.radio-button-container input:checked ~ .radio-check:after {
    display:block;
    content:"";
    margin: 0 auto;
    margin-top: 3px;
}
.radio-button-container .radio-check:after {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

/* Utility Menu */
.pdw-utility-row{
    padding: .8em 1.3em 1.4em 1em;
    background: #fff;
}
.pdw-utility-row-top{
    padding: 1em 1em 0 2.3em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.pdw-utility-row-top .pdwurt-status-wrapper {
    padding-left: 0em;
    padding-right: .8em;
}
.pdw-utility-row-top .pdwurt-name-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-user-select: text;
       -moz-user-select: text;
        -ms-user-select: text;
            user-select: text;
}
.pdw-utility-row-top .pdwurt-name-wrapper .pdwurtpnw-item {
    padding-left: 0;
    position: relative;
}
.pdwur-utility-options-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
}
.pdwur-utility-options-wrapper .pdwur-utility-options-button{
    padding: 0 .5em;
    cursor: pointer;
}
.pdwur-utility-options-wrapper .pdwur-utility-options-button .fa {
    -webkit-transition: color 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: color 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.pdwur-utility-options-wrapper .fa {
    color: #333;
    font-size: 1.6em;
}
.pdwur-utility-options-wrapper .pdwur-utility-options-button:hover .fa {
    color:#009FDF;
}
.pdwurtpnw-upper{
    font-weight: 700;
    font-size: 1.2em;
    margin-bottom: .2em;
}
.pdwurtpnw-lower{
    font-size: .875em;
}

.pdw-utility-row-bottom{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 1em 2.5em .5em 2.5em;
    font-family: 'OpenSans', Helvetica, Arial, sans-serif;
}
.pdw-utility-row-bottom .pdwur-item{
    cursor: pointer;
    height: 35px;
    width: 124px;
    border-radius: 17.5px;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-right: 1em;
    border-radius: 17.5px;
    border: none;
    background-color: inherit;
    color: #6C6F70;
    -webkit-transition: all .2s;
    transition: all .2s;
    outline:none;
    border: 1px solid #6B6F70;
    min-width: 124px;
    width: auto;
    padding-left: 30px;
    padding-right: 30px;
}
.pdw-utility-row-bottom .pdwur-item-active{
    /*border: 1px solid #47C7FA;*/
    background-color: #009FDF;
    color: #fff;
    border: 1px solid transparent;
}
.pdw-utility-row-bottom .pdwur-item:hover{
    /*border: 1px solid #47C7FA;*/
    background-color: #009FDF;
    color: #fff;
    border: 1px solid transparent;
}
.pdw-utility-row-bottom .pdwur-item .pdwur-item-text{
    font-size: 0.7em;
    border: 1px solid transparent;
}
.pdwurt-status{
    font-size: 2.5em;
    position: relative;
    /*    padding-left: .7em;*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.pdwurt-status .fa-plug{
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    position: relative;
    top: -7px;
    left: -2px;
    color: #333;
}

.pdwurt-status .fa-tv{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: .78em;
    color: #333;
}

.pdwurt-status .fa-ban{
    -webkit-transform: translateY(17%);
            transform: translateY(17%);
    font-size: 24px;
    margin-left: .5em;
}

.pdwurt-status .pdwurt-status-lg{
    font-size: .45em;
    font-family: 'OpenSans', Helvetica, Arial, sans-serif;
    font-weight: 700;
    position: relative;
    top: -1.7em;
    left: -1px;
    color: #009FDF;
}

.pdwurt-status .pdwurt-status-dot{
    height: .3em;
    width: .3em;
    position: absolute;
    bottom: 78%;
    left: .5em;
    -webkit-transform: translate(7px);
            transform: translate(7px);
    background-color: #6C6F70;
    border: 0;
    border-radius: 50%;
}

.pdwurt-status .pdwurt-status-online{
    background-color: #009FDF;
    border: 0;
}

.pdwurt-status .pdwurt-status-offline{
    background-color: #6C6F70;
    border: 0;
}


ul.dtr-details li:last-child .dtr-data {
    position: relative;
    display: inline-block;
}

ul.dtr-details li:last-child .dtr-data .fa.fa-tv {
    color: #333;
    font-size: 2em;
}

ul.dtr-details li:last-child .dtr-data .fa.fa-tv .pdwurt-status-lg {
    font-family: 'OpenSans', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: .5em;
    color: #009FDF;
    position: absolute;
    top: 3px;
    left: 5px;
}

ul.dtr-details li:last-child .dtr-data .pdwurt-status-dot {
    height: 0.58em;
    width: .58em;
    position: absolute;
    bottom: 19px;
    right: -1px;
    background-color: #6C6F70;
    border-radius: 50%;
}

ul.dtr-details li:last-child .dtr-data .pdwurt-status-dot.pt-player-status-online {
    background-color: #009FDF;
}

ul.dtr-details li:last-child .dtr-data .fa.fa-plug {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    color: #333;
    font-size: 3em;
}

ul.dtr-details li:last-child .dtr-data .pdwurt-screen-connect {
    display: block;
    position: absolute;
    top: 0;
    right: -15px;
}

.pt-player-status {
    display: table-cell;
}

.pdwurt-status-online {
    color: #009FDF;
    font-weight: 700;

}
.pdwurt-status-offline {
    color: #6C6F70;
    font-weight: 700;

}

.pdwurt-screen-connect{
    font-size: .3em;
    margin-left: 1em;
    margin-top: 1em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: transparent;
}

.lgfe-box-text-plain.disabled {
    outline: 0;
    border: 1px solid #d0d0d0;
    border-radius: 0.2143em;
    padding: 12px 12px 12px 15px;
    font-family: inherit;
    color: #6c6f70;
    line-height: 1.4;
    margin-top: 5px;
    padding: 0.8em;
    font-size: 0.8em;
    background-color: #fff;
    color: #6c6f70;
    background-color: rgb(235, 235, 228);
}

.lgfe-box-text-plain.disabled span {
    display: block;
    position: absolute;
    top: 35px;
    right: 15px;
    font-size: 0.9em;
}

/* --------------------------------------------- \\
Function Bar
\\ --------------------------------------------- */

.pm-function-bar {
    margin-bottom: 1.4em;
    padding-top: 0.625em;
    padding-bottom: 0.625em;
    background-color: #c7e7f4;
    border-top: 1px solid #009FDF;
}

.pmfb-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-right: auto;
    margin-left: auto;
    padding-right:3.75em;
    padding-left: 3.75em;
}

.pmfb-function-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 2.25em;
    height: 2.25em;
    outline: 0;
    cursor:pointer;
}

.pmfb-function-button[data-tooltip]::after {
    -webkit-transform: translate(-80%, -1em);
    transform: translate(-80%, -1em);
}

.pmfb-function-button--pinned {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.pmfb-function-button .fa {
    font-size: 1.75em;
}

/* --------------------------------------------- \\
Tags
\\ --------------------------------------------- */
.pim-tags-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-bottom: .8em;
    padding-top: 20px;
    margin-top: 10px;
    border-top: 1px solid #ccc;
    position:relative;
}
.pim-tags-wrapper #form-tags{
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin-right: 1em;
}
.pim-tag-item{
    height: 35px;
    border: 0;
    border-radius: 17.5px;
    background-color: #009FDF;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0 1em;
    margin: .1em;
    position: relative;
}
.pim-tag-item button{
    color: #fff;
    margin-left: auto;
}
.pim-tags-wrapper button{
    width: auto;
    padding: .85em 2em;
}
.pim-tag-item button span{
    position: relative;
    right: -0.4em;
    padding-top: 2px;
}
.pim-all-tags-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.pim-tag-item.admin-tags {
    background-color:#2240e9;
}
.pim-tag-item.system-tags {
    background-color:#1a237e;
}
.pim-tag-item .tag-lock {
    color: #fff;
    margin-left: 10px;
}
.pim-tag-item .tag-lock span {
    position: relative;
    right: -0.4em;
    padding-top: 3px;
}

.associated-tags {
    border-top: 1px solid #ccc;
    padding-top: 20px !important;
    margin-top:20px!important;
}

.pim-associated-tags {
    border-top: 1px solid #ccc;
    padding-top: 20px !important;
}

/* --------------------------------------------- \\
BM Assets Nav
\\ --------------------------------------------- */

.bmaw-nav{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 1em 3.75em 1em 3.75em;
    border-top: 1px solid #009FDF;
    border-bottom: 1px solid #e8e8e8;
    margin-left: -2em;
    position: relative;
    min-height: 68px;
}

.bmaw-nav-items{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.bmaw-nav button{
    cursor: pointer;
    height: 35px;
    width: 124px;
    border-radius: 17.5px;
    text-transform: uppercase;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-right: 1em;
    border-radius: 17.5px;
    border: none;
    background-color: inherit;
    color: #6C6F70;
    -webkit-transition: all .2s;
    transition: all .2s;
    outline: none;
    font-size: .7em;
}

.bmaw-nav .bmaw-nav-selected, .bmaw-nav button:hover{
    background-color: #009FDF;
    color: #fff;
}

.bmaw-nav .bmaw-nav-description{
    margin-left: auto;
    font-size: .9em;
}

.bmaw-header{
    position: absolute;
    font-size: 1.2em;
    left: 15.7em;
    top: 1em;
    font-weight: 600;
    color: #6c6f70;
}

@media (max-width: 62em){
    .bm-assets-container .bmaw-header {
        left: 14em;
    }
    .bm-assets-container .bmaw-nav {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    .bm-assets-container .bmaw-nav-description {
        width: 100%;
        margin-top: 15px;
    }
    .bmaw-nav {
        min-height: 99px;
    }
}

@media (max-width: 40.063em) {
    .bm-assets-container .bmaw-header {
        left: 4em;
    }
}


/* --------------------------------------------- \\
Data Table Overrides
\\ --------------------------------------------- */

table.vueTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    clear: both;
    margin: 0 auto;
}

table.vueTable thead th {
    text-align: left;
}

.VueTables__limit {
    display: none;
}

.VueTables__sort-icon.fa.fa-sort {
    color: #ddd;
}

.VueTables__search {
    float: none;
    text-align: left;
    margin: 15px 0;
}

.VueTables__search-field label {
    position: relative;
    visibility: hidden;
    color: #404040;
}
.VueTables__search-field label:before {
    font-family: FontAwesome;
    content: '\f002';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1em;
    width: 1em;
    height: 1em;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 1.25em;
    z-index: 1;
    visibility: visible;
}

.VueTables__search-field input {
    visibility: visible;
    outline: 0;
    border: 1px solid #d0d0d0;
    border-radius: .3143em;
    padding: .8em;
    padding-left: 4em;
    font-family: inherit;
    font-size: .875em;
    color: #404040;
    width: 31em;
    margin-left: -42px;
}

.VueTables__child-row-toggler--closed::before {
    content: "+";
}

.VueTables__child-row-toggler--open::before {
    content: "-";
}

.VueTables .VuePagination ul {
    padding: 0;
    margin: 0;
}
.VueTables .VuePagination ul li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.VueTables .VuePagination .page-item a {
    font-size: 0.8em;
    text-decoration: none;
}

.VueTables nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}

.VueTables .VuePagination ul {
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

table.vueTable tbody tr.VueTables__no-results td {
    padding: 15px 10px 15px 20px !important;
}
.VueTables .VueTables__no-results .text-center {
    text-align: center;
}

.VueTables .VuePagination .page-item a,
.VueTables .VuePagination .page-item.active a{
    background: none;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 0.5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    color: #333;
    border: 1px solid #D0D1D1;
    border-radius: 2px;
    overflow: hidden;
}

.VueTables .VuePagination .page-item.active a{
    background: #009FDF;
    border: 1px solid transparent;
    color: #fff !important;
}

.VueTables .VuePagination .page-item a:hover{
    background: #009FDF;
    border: 1px solid transparent;
    color: #fff;
}

.VueTables .VuePagination .page-item.active a:hover{
    background: #009FDF;
    color: #fff !important;
}

.VueTables .VuePagination .VuePagination__count {
    color: #666;
    font-size: 0.8em;
}

.VueTables .VuePagination .VuePagination__pagination-item-prev-page a,
.VueTables .VuePagination .VuePagination__pagination-item-next-page a,
.VueTables .VuePagination .VuePagination__pagination-item-prev-chunk a,
.VueTables .VuePagination .VuePagination__pagination-item-next-chunk a {
    font-family: "FontAwesome";
    visibility: hidden;
    padding: 0;
    font-size: 1em;
}

.VueTables .VuePagination .VuePagination__pagination-item-prev-page a:hover,
.VueTables .VuePagination .VuePagination__pagination-item-next-page a:hover,
.VueTables .VuePagination .VuePagination__pagination-item-prev-chunk a:hover,
.VueTables .VuePagination .VuePagination__pagination-item-next-chunk a:hover {
    color: #009FDF;
}

.VuePagination__pagination-item-prev-chunk a:before {
    content: "\f100";
    visibility: visible;
    position: absolute;
}
.VuePagination__pagination-item-next-chunk a:before {
    content: "\f101";
    visibility: visible;
    position: absolute;
}

.VuePagination__pagination-item-prev-page a:hover,
.VuePagination__pagination-item-next-page a:hover{
    color: #009FDF !important;
}

.VuePagination__pagination-item-prev-page a:before {
    content: "\f104";
    visibility: visible;
    position: absolute;
}
.VuePagination__pagination-item-next-page a:before {
    content: "\f105";
    visibility: visible;
    position: absolute;
}

.VueTables .VuePagination {
    padding-top: .5em;
}


table.vueTable thead th {
    padding: 10px 18px;
    font-size: 0.875em;
    border-bottom: 1px solid #d0d0d0;
    cursor: pointer;
}

table.vueTable tbody td {
    padding: 15px 10px 15px 20px;
    border-top: 1px solid #009fdf;
    border-right: 0;
    text-align: left;
    padding-left: 1.2em;
    font-size: .8em;
    cursor: pointer;
}
table.vueTable tbody tr {
    background-color: #f1f1f1;
}
table.vueTable tbody tr:nth-child(even) {
    background-color: #fff;
}
table.vueTable tbody tr:hover {
    background-color: rgba(0,159,223,0.16);
    -webkit-transition: .4s;
    transition: .4s;
}
table.vueTable tbody tr:first-child td {
    border-top: 0;
}

table.vueTable tbody tr:last-child td {
    border-bottom: 1px solid #009fdf;
}

table.vueTable tbody tr td .pt-player-status-offline {
    border-left: 0;
    font-weight: 700;
    color: #6C6F70;
}

table.vueTable tbody tr td .pt-player-status-online {
    border-left: 0;
    font-weight: 700;
    color: #009FDF;
}
.table-wrapper{
    color: #6C6F70;
    width: 100%;
    position: relative;
    top: 1em;
    padding: 0 3.5em 1em 1.5em;
}


@media (max-width: 40.063em) {
    .table-wrapper{
        padding: 0;
    }
    .VueTables__search {
        margin: 15px;
    }
    .VueTables__search-field {
        overflow: hidden;
    }
    .VueTables__search-field input {
        width: 100%;
    }
    .VueTables nav {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .VueTables .VuePagination ul {
        margin: 0 auto;
    }
    .VueTables .VuePagination .VuePagination__count {
        text-align: center;
    }
    .table-responsive {
        width: 100%;
        overflow-x: auto;
    }
}


/* --------------------------------------------- \\
AutoComplete Overrides
\\ --------------------------------------------- */

.easy-autocomplete.eac-square ul {
    margin-bottom:0px;
}


/* --------------------------------------------- \\
Switches
\\ --------------------------------------------- */

.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #404040;
    -webkit-transition: .4s;
    transition: .4s;
    width: 40px;
    height: 18px;
}
.switch-label {

}
.switch {
    position: relative;
    display: inline-block;
}
.switch input {
    display:none;
}

.switch .slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
.slider-icons:before {
    position: absolute;
    font-family: FontAwesome;
    content: "\f00c";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 2px;
    background-color: transparent;
    -webkit-transition: .4s;
    transition: .4s;
    font-weight: bold;
    font-size: 10px;
    color: #fff;
    z-index: 1000;
}
.slider-icons:after {
    position: absolute;
    font-family: FontAwesome;
    content: "\f00d";
    height: 12px;
    width: 12px;
    right: 2px;
    bottom: 2px;
    background-color: transparent;
    -webkit-transition: .4s;
    transition: .4s;
    font-weight: bold;
    font-size: 10px;
    color: #fff;
}
.switch input:checked + .slider {
    background-color: #2196F3;
}
.switch input:focus + .slider {
    -webkit-box-shadow: 0 0 1px #2196F3;
            box-shadow: 0 0 1px #2196F3;
}
.switch input:checked + .slider:before {
    -webkit-transform: translateX(23px);
            transform: translateX(23px);
}

.switch input:disabled + .slider .slider-icons:before {
    content: "\f023";
    left: 7px;
}

.switch .slider.round {
    border-radius: 17px;
}
.switch .slider.round:before {
    border-radius: 50%;
}

.switch span.lgfe-field-label {
    padding-left: 50px;
    display: block;
    cursor: pointer;
    min-height: 16px;
    line-height: 1.3;
}

.switch span.detail-info-text {
    margin-left: 50px;
    display: inline-block;

}

.no-lg-icon {
    padding-left: 1.7em;
}

.lgfe-item {
    padding: 0 5%;
    width: 34%;
    font-size: .875em;
    line-height: 1.5em;
    border-right: 1px solid #d6d6d6;
}
.flex-grid--items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
    min-width: 0;
}

.flex-grid--items .flex-item {
    width: 156px;
}
.flex-grid--items .flex-item.f3 label {
    float: right;
}

.flex-grid--items .f1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-width: 0;
}
/* --------------------------------------------- \\
Settings Cards
\\ --------------------------------------------- */

.settings-container{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.settings-container .switch span.lgfe-field-label {
    font-size: .875em;
}

.settings-container .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: 0px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.settings-container .flex .flex-grid--item {
    outline: 0;
    margin-bottom: 20px;
}
.settings-container .flex .right {
    -ms-flex-item-align:end;
        align-self:flex-end;
    font-size: .8em;
}
.settings-container .flex .right .flex-grid--item {
    margin-bottom:0px;
}
.settings-container .flex:not(:last-child) {
    margin-bottom: 1.5em;
}
.settings-container .content-checkbox--right span:before {
    margin-right: 10px;
}
.settings-container .content-checkbox--left span {
    margin-left: 20px;
}
.settings-container .lgfe-tile-grid-item .lgfe-tile-grid-item-header {
    margin-bottom: 40px;
}

/* table.dataTable thead th.pdwurt-status {
display: table-cell;
} */


/* --------------------------------------------- \\
LiveGuide-Expand-Transition-Effect
\\ --------------------------------------------- */
.lg-expand-enter-active,
.lg-expand-leave-active {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    overflow: hidden;
    max-height: 1000px;
}

.lg-expand-enter,
.lg-expand-leave-to {
    opacity: 0;
    max-height: 0;
}
.license-management-container table.vueTable tbody td .hotswap span,
.players-container table.vueTable tbody td .hotswap span,
.location-container table.dataTable tbody td.hotswap {
    padding: 0 0 0 20px !important;
    width: 20px;
}
.license-management-container table.vueTable tbody td .hotswap.fa,
.players-container table.vueTable tbody td .hotswap.fa,
.location-container table.vueTable tbody td .hotswap.fa {
    font-size: 1.5em;
    display: block;
    margin: 0 auto;
    width: 20px;
    height: 20px;
}
.hotswap {
    color: #f5aa00;
}
.hotswap-exchange {
    color: #f5aa00;
    margin-left: 15px;
    font-size: 1.5em;
    position: absolute;
    top: -5px;
    right: -47px;
}

.lgfe-tile-grid-item-nobackground {
    padding: 0;
    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
    border-radius: 0;
    background-color: transparent;
}

.lgfe-tile-grid-item-nobackground .lgfe-tile-button-wrapper {
    margin-top: 12px;
}

.lgfe-tile-grid-item-nobackground .lgfe-tile-grid-item-header span {
    -webkit-box-shadow: none;
            box-shadow: none;
    font-size: 1.2em;
}

.lgfe-tile-grid-item-dataError {
    text-align:center;
    line-height: 1.6;
    padding-top:1em;
}

.page-list-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

table.vueTable tbody td:first-child {
    padding: 0 0 0 20px !important;
    width: 20px;
}

form.lg-modal__panel .error {
    color: #de0000
}

form.lg-modal__panel input[type="text"].error {
    border-color: #de0000
}
/* --------------------------------------------- \\
Media Queries
\\ --------------------------------------------- */

@media (max-width: 60.625em){
    .lgfe-tile-grid-item .lgfe-tile-grid-item-header{
        text-align: left;
    }
    .lgfe-tile-grid-item{
        padding: 1.3em;
    }
    .lgfe-tile-grid-wrapper{
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        padding: 0;
    }
    .lgfe-tile-grid-top-item{
        width: 100%;
    }
    .lgfe-tile-grid-item-hero-wrapper{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .lgfe-tile-grid-item-header-text {
        text-align: center;
        display: block;
        text-overflow: ellipsis;
        /*white-space: nowrap;*/
        overflow: hidden;
        padding: .14em 0em;
        line-height: 1.2;
    }
}

@media (max-width: 48em) {/** 768px **/
    .players-container .dt-buttons{
        display: none;
    }
}

@media (max-width: 41.875em) { /** 670px **/
    .table-wrapper{
        padding: 0;
    }

    .VueTables__search {
        margin: 15px;
    }
    .VueTables__search-field {
        overflow: hidden;
    }
    .VueTables__search-field input {
        width: 100%;
    }

    .lgfe-tile-grid-item .lgfe-tile-grid-item-header{
        text-align: center;
    }
    .lgfe-tile-grid-item-group{
        display: block;
    }
    .lgfe-tile-grid-item{
        padding: .8em;
    }

    .lgfe-tile-grid-item-hero-wrapper{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .lgfe-tile-grid-item-hero-side-right{
        border-left: 0;
        border-top: 1px solid #ccc;
    }
    .lg-modal--large .lg-modal__sidebar {
        width: 17%;
    }
    .lg-modal--large .lg-modal__content {
        width: 83%;
        margin-left: 15%;
    }
    .lg-modal--large .lg-modal__panel {
        padding: 4.5em 3.25em 4.5em 3.125em;
    }
}

@media (max-width: 60.625em){
    .table-wrapper{
        padding: 0;
    }

    .VueTables__search {
        margin: 15px;
    }
    .VueTables__search-field {
        overflow: hidden;
    }
    .VueTables__search-field input {
        width: 100%;
    }


    /* table.dataTable.responsive {
    display: flex;
    position: relative;
    border: 0;
    }
    table.dataTable.responsive thead {
    position: sticky;
    left: 0;
    display: block;
    z-index: 1;
    overflow: hidden;
    width: 126px;
    box-shadow: 2px 0px 10px rgba(0,0,0,0.1);
    }
    table.dataTable.responsive thead th {
    display: flex;
    align-items: center;
    width: 106px !important;
    background-color: #ffffff;
    white-space: nowrap;
    height: 25px;
    padding: 10px !important;
    }
    table.dataTable.responsive tbody {
    display: flex;
    margin-left: 0;
    }
    table.dataTable.responsive tbody td {
    display: flex;
    align-items: center;
    padding: 10px 18px !important;
    height: 25px;
    white-space: nowrap;
    border-top: 1px solid #009FDF !important;
    }
    table.dataTable.responsive thead th:last-child {
    border-bottom: 0 !important;
    }
    table.dataTable.responsive tbody td:first-child {
    border-top: 0 !important;
    }
    .dataTables_wrapper .dataTables_filter label:before {
    left: 1em;
    } */

/* table.dataTable.cell-border tbody tr td:first-child {
padding-left: 18px !important;
} */

}

@media (max-width: 40.063em) {
    .pdwur-utility-options-wrapper .pdwur-utility-options-button:last-child{
        margin-top: 20px;
    }

    /* table.dataTable.responsive {
    display: flex;
    position: relative;
    border: 0;
    }
    table.dataTable.responsive thead {
    position: sticky;
    left: 0;
    display: block;
    z-index: 1;
    overflow: hidden;
    width: 126px;
    box-shadow: 2px 0px 10px rgba(0,0,0,0.1);
    }
    table.dataTable.responsive thead th {
    display: flex;
    align-items: center;
    width: 106px !important;
    background-color: #ffffff;
    white-space: nowrap;
    height: 25px;
    padding: 10px !important;
    }
    table.dataTable.responsive tbody {
    display: flex;
    margin-left: 0;
    }
    table.dataTable.responsive tbody td {
    display: flex;
    align-items: center;
    padding: 10px 18px !important;
    height: 25px;
    white-space: nowrap;
    border-top: 1px solid #009FDF !important;
    }
    table.dataTable.responsive thead th:last-child {
    border-bottom: 0 !important;
    }
    table.dataTable.responsive tbody td:first-child {
    border-top: 0 !important;
    }
    .dataTables_wrapper .dataTables_filter label:before {
    left: 1em;
    }
    table#locations-table tbody td {
    padding: 10px 18px !important;
    }
    table.dataTable.cell-border tbody tr td:first-child {
    padding-left: 18px !important;
    } */

}
.lg-modal--confirm {
    z-index: 9999;
}