/* page loader */
.page-loader {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    display: none;
    z-index: 2050;
    visibility: hidden;
    opacity: 0;
    background: rgba(25, 25, 25, .5);
    transition: visibility 0.85s ease-out opacity 0.85s ease-out;
    -webkit-transition: visibility 0.85s ease-out opacity 0.85s ease-out;
    -moz-transition: visibility 0.85s ease-out opacity 0.85s ease-out;
    -ms-transition: visibility 0.85s ease-out opacity 0.85s ease-out;
}

    .page-loader[show] {
        display: block;
    }

        .page-loader[show][popout] {
            z-index: 2050;
            visibility: visible;
            opacity: 1;
            transition: visibility 0.85s ease-in opacity 0.85s ease-in;
            -webkit-transition: visibility 0.85s ease-in opacity 0.85s ease-in;
            -moz-transition: visibility 0.85s ease-in opacity 0.85s ease-in;
            -ms-transition: visibility 0.85s ease-in opacity 0.85s ease-in;
        }

    .page-loader .modal-content {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
        pointer-events: auto;
        background-color: unset !important;
        background-clip: unset !important;
        border: unset !important;
        border-radius: 0 !important;
        outline: 0 !important;
    }

body[page-loading] {
    overflow: hidden !important;
}






/* control loader */
.controls-loader {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px
}

    .controls-loader .loader-wrappr {
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        width: 250px;
        height: 120px;
        margin: auto;
    }

        .controls-loader .loader-wrappr .loadr-itm {
            position: relative;
            display: block;
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            -ms-box-flex: 1;
            -o-box-flex: 1;
            flex: 1;
        }

        .controls-loader .loader-wrappr .loader {
            position: relative;
            width: 60px;
            height: 60px;
            margin: auto;
        }

            .controls-loader .loader-wrappr .loader .loader-circle {
                position: absolute;
                left: 0%;
                top: 0%;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.4);
                margin-left: 0px;
                margin-top: 0px;
            }

            .controls-loader .loader-wrappr .loader .loader-line-mask {
                position: absolute;
                left: 0px;
                top: 0px;
                width: 30px;
                height: 60px;
                margin-left: 0px;
                margin-top: 0px;
                overflow: hidden;
                transform-origin: 30px 30px;
                animation: rotate 1.2s infinite linear;
            }

                .controls-loader .loader-wrappr .loader .loader-line-mask .loader-line {
                    width: 60px;
                    height: 90px;
                    border-radius: 50%;
                    box-shadow: inset 0 0 0 2px rgba(25, 25, 25, .5);
                }





    .controls-loader[small] .loader-wrappr {
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        width: 40px;
        height: 40px;
        margin: auto;
    }

        .controls-loader[small] .loader-wrappr .loader {
            position: relative;
            width: 40px;
            height: 40px;
            margin: auto;
        }

            .controls-loader[small] .loader-wrappr .loader .loader-circle {
                position: absolute;
                left: 0%;
                top: 0%;
                width: 40px;
                height: 40px;
                border-radius: 100%;
                box-shadow: inset 0 0 0 4px rgb(234, 173, 17);
                margin-left: 0px;
                margin-top: 0px;
            }

            .controls-loader[small] .loader-wrappr .loader .loader-line-mask {
                position: absolute;
                left: 0px;
                top: 0px;
                width: 20px;
                height: 40px;
                margin-left: 0px;
                margin-top: 0px;
                overflow: hidden;
                transform-origin: 20px 20px;
                animation: rotate .8s infinite linear;
            }

                .controls-loader[small] .loader-wrappr .loader .loader-line-mask .loader-line {
                    width: 40px;
                    height: 40px;
                    border-radius: 100%;
                    box-shadow: inset 0 0 0 4px rgb(212, 14, 30, 1) !important
                }





    .controls-loader[large] .loader-wrappr {
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        width: 250px;
        height: 250px;
        margin: auto;
    }

        .controls-loader[large] .loader-wrappr .loader {
            position: relative;
            width: 200px;
            height: 200px;
            margin: auto;
        }

            .controls-loader[large] .loader-wrappr .loader .loader-circle {
                position: absolute;
                left: 0%;
                top: 0%;
                width: 200px;
                height: 200px;
                border-radius: 50%;
                box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.301);
                /* box-shadow: inset 0 0 0 3px rgb(234, 173, 17); */
                margin-left: 0px;
                margin-top: 0px;
            }

            .controls-loader[large] .loader-wrappr .loader .loader-line-mask {
                position: absolute;
                left: 0px;
                top: 0px;
                width: 100px;
                height: 200px;
                margin-left: 0px;
                margin-top: 0px;
                overflow: hidden;
                transform-origin: 100px 100px;
                animation: rotate .8s infinite linear;
            }

                .controls-loader[large] .loader-wrappr .loader .loader-line-mask .loader-line {
                    width: 200px;
                    height: 200px;
                    border-radius: 100%;
                    /* box-shadow: inset 0 0 0 3px rgba(3, 160, 55, 1) !important */
                    box-shadow: inset 0 0 0 3px rgb(255, 255, 255) !important
                }





    .controls-loader .loader-wrappr .hint {
        margin: 0px 0px;
        overflow: hidden;
        position: relative;
        font-family: 'Open Sans Regular';
        font-size: 14px;
        text-align: center;
        line-height: 61px;
    }

        .controls-loader .loader-wrappr .hint a {
            color: #06F;
            text-decoration: none;
            cursor: pointer;
        }

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}