body.noscroll {

    overflow: hidden;
    height: 100%;

}

.tmc_bs_root {

    $popupRoot: &;  //  THIS reference.

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: block;
    visibility: visible;
    transition: 500ms all;
    z-index: 999999;
    overflow: auto;

    &:not( .is-active ){

        visibility: hidden;
        pointer-events: none;
        left: -100%;

    }

    .close-root {

        display: block;
        width: 100%;
        padding: 1.5em;
        text-align: right;

        .close {

            cursor: pointer;
            display: inline-block;
            width: 32px;
            height: 32px;
            position: relative;
            opacity: 0.8;

            &:hover {
                opacity: 1;
            }

            &:before,
            &:after {
                display: block;
                position: absolute;
                content: '';
                width: 32px;
                height: 4px;
                left: 0;
                top: 50%;
            }

            &:before {
                transform: rotate( 45deg );
            }

            &:after {
                transform: rotate( -45deg );
            }

        }

    }

    .wrapper-inner {

        display: block;
        padding: 1.5em;
        margin: auto;
        width: 100%;
        max-width: 900px;
        transition: 500ms all;

        @media only screen and ( min-width: 1000px ) {

            position: absolute;
            top: calc( 50% - 70px );
            left: 50%;
            transform: translate( -50%, 0 );

        }

        @at-root #{$popupRoot}.has-results .wrapper-inner {
            top: 0;
        }

        .inputs-row {

            display: flex;
            justify-content: space-between;

            > div:first-child {

                width: 100%;
                margin-right: 2em;

            }

            > div:last-child {

            }

            .input-text {

                display: inline-block;
                border: none;
                border-radius: 0;
                background: transparent;
                outline: none;
                border-bottom: 4px solid transparent;
                line-height: 20px;
                padding: 1em;
                font-size: 20px;
                opacity: 0.8;

                &:focus {
                    opacity: 1;
                }

            }

            .input-button {

                line-height: 20px;
                padding: 1em;
                font-size: 20px;
                opacity: 0.8;

                &:hover {
                    opacity: 1;
                }

                &:active {
                    transform: scale( 1.1, 1.1 );
                }

                &:disabled {
                    opacity: 0.5;
                }

            }

        }

        .results {

            margin-top: 2em;

            .result {

                margin-top: 2em;

                .title {

                    font-size: 22px;
                    margin: 0;
                    padding: 0;

                    &:hover,
                    &>h3:hover {
                        text-decoration: underline;
                    }

                }

                .excerpt {

                    margin: 1em 0 0;

                    &:after {
                        content: '';
                        display: block;
                        clear: both;
                    }

                }

                .thumb {

                    display: inline-block;

                    &.right {
                        float: right;
                        margin: 0.4em 0 0.5em 1.5em;
                    }

                    &.left {
                        float: left;
                        margin: 0.4em 1.5em 0.5em 0;
                    }

                }

            }

            .empty-result {

            }

            .license-not-active {

            }

        }

    }

}