/***
 *** RESPONSIVE CSS Document
 ***
 ***/

@media (max-width: 2560px) {

    /*** BEGIN GLOBAL CSS SETTING ***/
    #admin-container {
        max-width: 100% !important;
    }
    #main-nav {
        width: 5%;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    .user-setting-menu {
        top: 85px !important;
        right: 3.45% !important;
        width: 10%;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- CONTAINER CSS SETTING ***/
    .breadcrumb {
        width: 98.65%;
        margin-top: 3.6%;
        padding: 1.15% 1.35% 0.85% 0;
    }
    .breadcrumb-with-menu-show {
        width: 98.65%;
        margin-top: 3.6%;
        padding: 1.15% 1.35% 0.85% 0;
    }
    .sub-fuction-area {
        width: 79.5%;
    }
    .sfa-with-menu-show {
        width: 79.5%;
    }
    .main-ui-area {
        width: 81.5%;
    }
    .main-ui-area-with-menu-show {
        width: 81.5%;
    }

    /*** BEGIN PAGE LEVEL COMPONENT -- LOG-IN UI ***/
    #login-area > .login-ui-outter-frame > .login-ui-block-02 {
        margin: 4% auto 2%;
    }

    /*** BEGIN PAGE LEVEL COMPONENT -- ADMIN__SYS MAIN ***/
    #admin-container > .main-ui > .ui-search-block input[type="text"] {
        padding: 1.5% 2% !important;
    }
    #admin-container > .main-ui > .ui-search-block > .ui-block-title > .ui-block-sub-func > .search-btn {
        width: 16%;
        padding: 1.15% 0;
    }

}

@media (max-width: 1920px) {

    /*** BEGIN GLOBAL CSS SETTING ***/
    #main-nav {
        top: 66px !important;
        width: 5.5%;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    /*.sub-func {
      height: auto;
      padding: 0;
      width: 100%;
    }
        #menu-btn {
            padding: 1.1% 0.5% 1%;
        }
            #menu-btn > .material-icons {
                font-size: 1.85rem;
            }
        .user-info {
            width: 23%;
            padding: 0.5% 0 0;
        }
            .user-info .icon-arrow {
                 padding: 0;
            }
                .user-info .icon-arrow img {
                    width: 75%;
                }
    
        .user-setting-menu {
            top: 4.8rem !important;
            right: 7.5% !important;
            width: 10% !important;
        }
        .btn-alert {
            padding: 1% 0 1% 1%;
        }
            .btn-alert .material-icons {
                font-size: 1.85rem;
            }
            .btn-alert .div-alert-count {
                top: 18%;
                width: 1.45rem;
            }
        .btn-logout {
            width: 1.85%;
            padding: 1% 0.75% 1% 1.15%;
        }
            .btn-logout a .material-icons {
                font-size: 1.85rem !important;
            }*/

    /*** BEGIN TEMPLATE MAIN COMPONENT -- CONTAINER CSS SETTING ***/
    .breadcrumb {
        margin-top: 3.25%;
        padding: 1.15% 1.5% 0.85% 0;
    }
    .breadcrumb-with-menu-show {
        width: 98.5%;
        margin-top: 3.25%;
        padding: 1.15% 1.5% 0.85% 0;
    }
    .sfa-with-menu-show {
        width: 78.25%;
    }
    .main-ui-area-with-menu-show {
        width: 80.35%;
    }

    /*** BEGIN PAGE LEVEL COMPONENT -- LOG-IN UI ***/
    #login-area > .login-ui-outter-frame > .login-ui-block-02 {
        margin: 4% auto 2%;
    }

}

@media (max-width: 1680px) {

    /*** BEGIN GLOBAL CSS SETTING ***/
    #main-nav {
        top: 66px !important;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    /*.sub-func {
      padding: 0;
      width: 100%;
    }
        #menu-btn {
            padding: 1.1% 0.5% 1%;
        }
            #menu-btn > .material-icons {
                font-size: 1.85rem;
            }
        #logo-area {
            width: 50%;
            margin: 0.85% 0 0 0.65%;
        }
            #logo-area img {
                width: 25%;
            }
        .user-info {
            width: 33%;
            padding: 0.5% 0 0;
        }
            .user-info .icon-arrow {
                 padding: 0;
            }
                .user-info .icon-arrow img {
                    width: 75%;
                }
    
        .user-setting-menu {
            top: 68px !important;
        }
        .btn-alert {
            padding: 1% 0 1% 1%;
        }
            .btn-alert .material-icons {
                font-size: 1.85rem;
            }
            .btn-alert .div-alert-count {
                top: 18%;
                width: 1.45rem;
            }
        .btn-logout {
            width: 5%;
            padding: 1% 0.75% 1% 1.15%;
        }
            .btn-logout a .material-icons {
                font-size: 1.85rem !important;
            }*/

    /*** BEGIN PAGE LEVEL COMPONENT -- FOOT PARAM FMODEL INFO VIEW BY UID ***/
    #section-client-data-ui > div.scd-ui-content > div.div-2column-right .div-foot-data-block {
        width: 46%;
    }
        #section-client-data-ui > div.scd-ui-content > div.div-2column-right .div-foot-data-block .div-f-data-edit-btn {
            width: 25%;
        }
        #section-client-data-ui > div.scd-ui-content > div.div-2column-right .div-foot-data-block ul {
            width: 70%;
        }
            #section-client-data-ui > div.scd-ui-content > div.div-2column-right .div-foot-data-block li {
                width: 100%;
            }

}

@media (max-width: 1440px) {

    /*** BEGIN GLOBAL CSS SETTING ***/
    #main-nav {
        top: 68px !important;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #menu-btn {
        width: 2.25%;
    }
    #logo-area {
        margin-top: 1.25%;
    }
    .btn-logout {
        width: 2.15%;
    }
    .user-setting-menu {
        top: 58px !important;
        width: 12%;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- CONTAINER CSS SETTING ***/
    .breadcrumb {
        margin: 4.5% auto 0;
    }

    /*** BEGIN PAGE LEVEL COMPONENT -- FOOT PARAM CLIENT DATA VIEW BY UID ***/
    #section-client-data-ui > div.scd-ui-content > div.div-2column-left .div-add-new-data {
        font-size: 0.813rem;
    }

}

@media (max-width: 1360px) {

    /*** BEGIN GLOBAL CSS SETTING ***/
    #main-nav {
        top: 66px !important;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #logo-area {
        width: 25%;
    }

}

@media (max-width: 1280px) {

    /*** BEGIN GLOBAL CSS SETTING ***/
    #main-nav {
        top: 64px !important;
        /*width: 23%;*/
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    .btn-logout {
        width: 2.5%;
    }

    /*** BEGIN PAGE LEVEL COMPONENT -- FOOT PARAM CLIENT DATA VIEW BY UID ***/
    #section-client-data-ui > div.scd-ui-content > div.div-2column-left {
        width: 12.5%;
    }

}

@media (max-width: 1024px) {

    /*** BEGIN GLOBAL CSS SETTING ***/
    #main-nav {
        top: 50px !important;
        width: 17%;
    }
        #main-nav li.li-mo {
            font-size: 0.813rem;
        }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    .sub-func {
      height: auto;
    }
        #menu-btn {
            width: 3.15%;
        }
        #logo-area {
            width: 25%;
            font-size: 1.25rem;
            letter-spacing: 0.1rem;
        }
        .user-info {
            width: 25%;
        }
        .btn-logout {
            width: 2.85%;
        }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- CONTAINER CSS SETTING ***/
    .breadcrumb {
        font-size: 0.813rem;
        margin: 5% auto 0;
    }
    .sub-fuction-area {
        padding: 1% 1% 0.5% 1%;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- INPUT UI ***/
    .input-ui-btn-02 {
        width: 30% !important;
    }

    /*** BEGIN PAGE LEVEL COMPONENT -- FOOT PARAM CLIENT DATA VIEW BY UID ***/
    #section-client-data-ui > ul.scd-ui-menu li.li-scd-ui-user-name {
        font-size: 1rem;
    }
    #section-client-data-ui > ul.scd-ui-menu li.li-scd-ui-menu-tab {
        font-size: 0.813rem;
    }
    #section-client-data-ui > div.scd-ui-content li {
        font-size: 0.875rem;
    }

}