/*
    Top zIndex: 2001
*/
/*
    1. Page
    2. Global Top Icons
*/


/*
    1. Page
*/
body#page-top {
}

    body#page-top > form > .sections,
    body#page-top div[data-target=sync-main-width].sections {
        display: flex;
    }

        body#page-top > form > .sections > .main,
        body#page-top div[data-target=sync-main-width].sections > .main {
            flex: 1;
        }

        body#page-top > form > .sections > .main {
            position: relative;
        }

        body#page-top > form > .sections > .side,
        body#page-top div[data-target=sync-main-width].sections > .side {
            flex: 0 0 auto;
            width: 0px;
            background-color: #EEEEEE;
            transition: width 0.5s;
            overflow: hidden;
            border-left: 1px solid #CCCCCC;
        }

            body#page-top > form > .sections > .side.side-r,
            body#page-top div[data-target=sync-main-width].sections > .side.side-r {
                z-index: 2001;
                position: static;
            }


    body#page-top.side-r-open > form > .sections > .main,
    body#page-top.side-r-open div[data-target=sync-main-width].sections > .main {
    }

    body#page-top.side-r-open > form > .sections > .side,
    body#page-top.side-r-open div[data-target=sync-main-width].sections > .side {
    }

        body#page-top.side-r-open > form > .sections > .side.side-r,
        body#page-top.side-r-open div[data-target=sync-main-width].sections > .side.side-r {
            width: 200px;
        }


/*
    2. Global Right Menu
*/

.global-right-menu {
    position: absolute;
    right: 5px;
    top: 0px;
    z-index: 9999;
}

    .global-right-menu .control {
        border-left: 1px solid rgba(0, 0, 0, 0.2);
        color: #FFFFFF;
        height: 30px;
        padding-left: 20px;
        padding-right: 20px;
        position: relative;
        line-height: 30px;
    }

        .global-right-menu .control::before {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 1px;
            content: " ";
            height: 30px;
            border-left: 1px solid rgba(255, 255, 255, 0.1);
        }

        .global-right-menu .control .trigger {
            cursor: pointer;
        }

        .global-right-menu .control .trigger {
            cursor: pointer;
        }

        .global-right-menu .control .content {
            margin-left: 10px;
            transition: all 1s;
            overflow: hidden;
            height: 100%;
            max-width: 0px;
        }

        .global-right-menu .control.active .content {
            display: block;
            width: auto;
            max-width: 500px;
            transition: all 1s;
        }

        .global-right-menu .control .content.form .field {
            margin-right: 10px;
            position: relative;
        }

            .global-right-menu .control .content.form .field input[type=text], .global-right-menu .control .content.form .field input[type=password] {
                background-color: rgba(255, 255, 255, 0.1);
                border: 0px solid #FFFFFF;
                height: 20px;
                text-indent: 5px;
            }

            .global-right-menu .control .content.form .field .btn {
                height: 22px;
                border: 1px solid rgba(255,255,255,0.6);
                background-color: transparent;
                color: #FFFFFF;
                line-height: 20px;
                padding: 0px;
                padding-left: 5px;
                padding-right: 5px;
                position: relative;
                top: -2px;
            }

.system-message {
    position: fixed;
    top: 35px;
    right: 20px;
    z-index: 9999;
}