/**************************/
/* for login ui */
/**************************/
.login_div {
}

.login_div2 {
    margin-left: 40px;
}

    .login_div2 .login_title {
    }

    .login_div2 .uid0 {
        margin-top: 40px;
        margin-bottom: 10px;
    }

    .login_div2 .uid {
    }

    .login_div2 .pwd0 {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .login_div2 .pwd {
    }

    .login_div2 .axn-row {
        margin-top: 10px;
    }

    .login_div2 .forgot_pwd {
        margin-top: 10px;
        margin-bottom: 20px;
        width: 200px;
        cursor: pointer;
    }



/**************************/
/* for forgot password ui */
/**************************/
.forgot_pwd_div {
}

.forgot_pwd_div2 {
    margin-left: 40px;
}

    .forgot_pwd_div2 .title {
    }

    .forgot_pwd_div2 .uid {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .forgot_pwd_div2 .axn-row {
        margin-top: 10px;
    }


/**************************/
/* for reset password ui */
/**************************/
.reset_pwd_div {
}

.reset_pwd_div2 {
    margin-left: 40px;
}

    .reset_pwd_div2 .title {
    }

    .reset_pwd_div2 .uid0 {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .reset_pwd_div2 .pwd0 {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .reset_pwd_div2 .pwd_strength0 {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .reset_pwd_div2 .pwd_strength1 {
        line-height: 30px;
    }

    .reset_pwd_div2 .axn-row {
        margin-top: 10px;
    }


.pwd_strength_bar {
    width: 200px;
    height: 10px;
    border: 1px solid #fff;
    background-color: #e57373;
}

    .pwd_strength_bar > div {
        background-color: #4db6ac;
        height: 10px;
        width: 0;
    }


/**************************/
/* for reset password ui */
/**************************/
.secu-dashboard-div {
}


.secu-dashboard-div2 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

    /*****************/
    /* statistics */
    /*****************/

    .secu-dashboard-div2 .stat {
        display: flex;
        flex-direction: row;
        margin-top: 40px;
        margin-bottom: 10px;
    }

    .secu-dashboard-div2 .stat-col {
        width: 24%;
    }

    .secu-dashboard-div2 .stat-row0 {
        height: 60px;
        font-size: 36pt;
        text-align: right;
    }

    .secu-dashboard-div2 .stat-row1 {
        height: 30px;
        font-size: 12pt;
        text-align: right;
        color: #fff;
        line-height: 30px;
    }

    .secu-dashboard-div2 .stat-user-cnt1 {
        margin-right: 2px;
        padding: 5px 10px;
        background-color: #76c0c9;
        color: #fff;
        cursor: pointer;
    }

    .secu-dashboard-div2 .stat-admin-cnt1 {
        margin-right: 2px;
        padding: 5px 10px;
        background-color: #e57373;
        color: #fff;
    }

    .secu-dashboard-div2 .stat-org-cnt1 {
        margin-right: 2px;
        padding: 5px 10px;
        background-color: #e79050;
        color: #fff;
        cursor: pointer;
    }


    .secu-dashboard-div2 .stat-co-cnt1 {
        margin-right: 2px;
        padding: 5px 10px;
        background-color: #80ab3a;
        color: #fff;
    }



    .secu-dashboard-div2 .stat-online-cnt1 {
        margin-right: 2px;
        padding: 5px 10px;
        background-color: #4ca0ab;
        color: #fff;
        cursor: pointer;
    }

    .secu-dashboard-div2 .stat-traffic1 {
        margin-right: 2px;
        padding: 5px 10px;
        background-color: #8d8d8d;
        color: #fff;
    }

    .secu-dashboard-div2 .stat-traffic > canvas {
        margin-top: 10px;
    }

    /*****************/
    /* alert */
    /*****************/
    .secu-dashboard-div2 .alert {
    }

    .secu-dashboard-div2 .alert-title {
        font-family: roboto-thin;
        font-size: 18pt;
        line-height: 40px;
    }

    .secu-dashboard-div2 .alert-item-div {
        display: flex;
        flex-direction: row;
        margin-bottom: 5px;
        margin-right: 5px;
        padding: 10px;
        background-color: #fff;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    }

    .secu-dashboard-div2 .alert-dt {
        margin-right: 10px;
        font-size: 8pt;
    }

    .secu-dashboard-div2 .alert-desc {
        font-size: 12pt;
    }

/*****************/
/* online users */
/*****************/
.secu-online-user-div2 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

    .secu-online-user-div2 .online-user {
    }


    .secu-online-user-div2 .online-user-item-div {
        display: flex;
        flex-direction: row;
        margin-bottom: 5px;
        margin-right: 5px;
        padding: 10px;
        background-color: #fff;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    }

    .secu-online-user-div2 .online-user-id {
        font-size: 12pt;
        margin-right: 10px;
    }

    .secu-online-user-div2 .online-user-dt {
        margin-right: 10px;
        font-size: 8pt;
    }

        .secu-online-user-div2 .online-user-dt:before {
            content: 'Login on:';
        }

    .secu-online-user-div2 .online-user-exp {
        margin-right: 10px;
        font-size: 8pt;
    }

        .secu-online-user-div2 .online-user-exp:before {
            content: 'Expire on:';
        }

    .secu-online-user-div2 .online-user-conn_cnt {
        font-size: 8pt;
    }

        .secu-online-user-div2 .online-user-conn_cnt:before {
            content: '# of connection:';
        }


/*****************/
/* access log */
/*****************/
.access-log-div2 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

    .access-log-div2 .access-log-filter {
        margin-top: 20px;
        padding: 10px;
        display: flex;
        flex-direction: row;
    }

        .access-log-div2 .access-log-filter .search_btn {
            font-size: 14pt;
        }

    .access-log-div2 .access-log-start_dt {
        width: 100px;
        margin-right: 5px;
    }

    .access-log-div2 .access-log-end_dt {
        width: 100px;
        margin-right: 5px;
    }

    .access-log-div2 .access-log-uid {
        width: 100px;
    }

    .access-log-div2 .access-log-item-div {
        display: flex;
        flex-direction: row;
        margin-bottom: 5px;
        margin-right: 5px;
        padding: 10px;
        background-color: #fff;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    }


    .access-log-div2 .access-log-id {
        font-size: 14pt;
        margin-right: 10px;
    }

    .access-log-div2 .access-log-login {
        margin-right: 10px;
        font-size: 8pt;
    }

        .access-log-div2 .access-log-login:before {
            content: 'Logged on:';
        }

    .access-log-div2 .access-log-logout {
        margin-right: 10px;
        font-size: 8pt;
    }

        .access-log-div2 .access-log-logout:before {
            content: 'Logged out:';
        }

    /***********/
    /* pager */
    /***********/
    .access-log-div2 .pager_div {
        display: flex;
        flex-direction: row;
        margin-left: 5px;
    }

        .access-log-div2 .pager_div .pager0 {
            line-height: 30px;
            margin-right: 5px;
        }

        .access-log-div2 .pager_div .pg_idx {
            height: 32px;
        }

        .access-log-div2 .pager_div .prev_pg {
            font-size: 14pt;
            padding-left: 10px;
            padding-right: 10px;
            cursor: pointer;
        }

            .access-log-div2 .pager_div .prev_pg:after {
                content: '\276E';
            }

        .access-log-div2 .pager_div .next_pg {
            font-size: 14pt;
            padding-left: 10px;
            padding-right: 10px;
            cursor: pointer;
        }

            .access-log-div2 .pager_div .next_pg:after {
                content: '\276F';
            }

        .access-log-div2 .pager_div .pg_size0 {
            line-height: 30px;
            margin-right: 5px;
            margin-left: 20px;
        }

        .access-log-div2 .pager_div .rec_count {
            line-height: 30px;
            margin-left: 20px;
        }


/*****************/
/* access log */
/*****************/
.audit-log-div2 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

    .audit-log-div2 .audit-log-filter {
        margin-top: 20px;
        padding: 10px;
        display: flex;
        flex-direction: row;
    }

        .audit-log-div2 .audit-log-filter .search_btn {
            font-size: 14pt;
        }

    .audit-log-div2 .audit-log-start_dt {
        width: 100px;
        margin-right: 5px;
    }

    .audit-log-div2 .audit-log-end_dt {
        width: 100px;
        margin-right: 5px;
    }

    .audit-log-div2 .audit-log-uid {
        width: 100px;
    }

    .audit-log-div2 .audit-log-item-div {
        display: flex;
        flex-direction: row;
        margin-bottom: 5px;
        margin-right: 5px;
        padding: 10px;
        background-color: #fff;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    }


    .audit-log-div2 .audit-log-module_name {
        font-size: 14pt;
        margin-right: 10px;
    }

    .audit-log-div2 .audit-log-created_on {
        margin-right: 10px;
        font-size: 8pt;
    }

        .audit-log-div2 .audit-log-created_on:before {
            content: 'On:';
        }

    .audit-log-div2 .audit-log-created_by {
        margin-right: 10px;
        font-size: 8pt;
    }

        .audit-log-div2 .audit-log-created_by:before {
            content: 'User:';
        }


    .audit-log-div2 .audit-log-co_name {
        margin-right: 10px;
        font-size: 8pt;
    }

        .audit-log-div2 .audit-log-co_name:before {
            content: 'Company:';
        }


    .audit-log-div2 .audit-log-task {
        margin-right: 10px;
        font-size: 8pt;
    }

        .audit-log-div2 .audit-log-task:before {
            content: 'Activity:';
        }


    /***********/
    /* pager */
    /***********/
    .audit-log-div2 .pager_div {
        display: flex;
        flex-direction: row;
        margin-left: 5px;
    }

        .audit-log-div2 .pager_div .pager0 {
            line-height: 30px;
            margin-right: 5px;
        }

        .audit-log-div2 .pager_div .pg_idx {
            height: 32px;
        }

        .audit-log-div2 .pager_div .prev_pg {
            font-size: 14pt;
            padding-left: 10px;
            padding-right: 10px;
            cursor: pointer;
        }

            .audit-log-div2 .pager_div .prev_pg:after {
                content: '\276E';
            }

        .audit-log-div2 .pager_div .next_pg {
            font-size: 14pt;
            padding-left: 10px;
            padding-right: 10px;
            cursor: pointer;
        }

            .audit-log-div2 .pager_div .next_pg:after {
                content: '\276F';
            }

        .audit-log-div2 .pager_div .pg_size0 {
            line-height: 30px;
            margin-right: 5px;
            margin-left: 20px;
        }

        .audit-log-div2 .pager_div .rec_count {
            line-height: 30px;
            margin-left: 20px;
        }


/*****************/
/* org */
/*****************/
.org-div2 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

    .org-div2 .org-item-div {
        display: flex;
        flex-direction: row;
        margin-bottom: 5px;
        margin-right: 5px;
        padding: 10px;
        background-color: #fff;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    }

    .org-div2 .org-row {
        width: 80%;
    }

    .org-div2 .axn-row {
        width: 20%;
        display: flex;
        flex-direction: row-reverse;
    }

    .org-div2 .org-name {
        font-size: 14pt;
        margin-right: 10px;
    }

    .org-div2 .org-status {
        font-size: 8pt;
        margin-right: 10px;
    }

        .org-div2 .org-status:before {
            content: 'Status:';
        }

    .org-div2 .org-co_cnt {
        font-size: 8pt;
        margin-right: 10px;
    }

        .org-div2 .org-co_cnt:before {
            content: '# of companies:';
        }


    .org-div2 .org-name-input {
        margin-right: 5px;
    }

    .org-div2 .org-status-input {
        line-height: 30px;
    }

/* more options for the org rec.*/
.org-div .org-more-opt-pp {
    width: 200px;
    padding: 10px;
    background-color: #8d8d8d;
    color: #fff;
}

    .org-div .org-more-opt-pp .org-more-opt-item {
        line-height: 30px;
        cursor: pointer;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }



/*****************/
/* co */
/*****************/
.co-div2 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

    .co-div2 .org-info {
        height: 50px;
        line-height: 50px;
    }

    .co-div2 .org-name {
        font-size: 20pt;
    }

    .co-div2 .co-item-div {
        display: flex;
        flex-direction: row;
        margin-bottom: 5px;
        margin-right: 5px;
        padding: 10px;
        background-color: #fff;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    }

    .co-div2 .co-row {
        width: 80%;
    }

    .co-div2 .axn-row {
        width: 20%;
        display: flex;
        flex-direction: row-reverse;
    }

    .co-div2 .co-name {
        font-size: 14pt;
        margin-right: 10px;
    }

    .co-div2 .co-status {
        font-size: 8pt;
        margin-right: 10px;
    }

        .co-div2 .co-status:before {
            content: 'Status:';
        }

    .co-div2 .co-user_cnt {
        font-size: 8pt;
        margin-right: 10px;
        cursor: pointer;
    }

        .co-div2 .co-user_cnt:before {
            content: '# of users:';
        }


    .co-div2 .co-name-input {
        margin-right: 5px;
    }

    .co-div2 .co-status-input {
        line-height: 30px;
    }

    /*****************/
    /* user access for the company */
    /*****************/
    .co-div2 .user-co-access-div {
        width: 100%;
        background-color: #f2f2f2;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 5px;
    }

    .co-div2 .user-co-access-item-div {
        box-sizing: border-box;
        padding: 5px 10px;
        border-bottom: 1px solid rgba(155, 146, 146, 0.2);
        background-color: #8d8d8d;
        margin: 2px;
        border-radius: 5px;
        color: #fff;
    }

        .co-div2 .user-co-access-item-div .user-name {
            font-size: 12pt;
        }

        .co-div2 .user-co-access-item-div .user-group {
            font-size: 8pt;
            margin-left: 15px;
        }


/*****************/
/* user group */
/*****************/
.user-group-div2 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

    .user-group-div2 .user-group-item-div {
        display: flex;
        flex-direction: row;
        margin-bottom: 8px;
        margin-right: 5px;
        padding: 10px;
        background-color: #fff;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    }

    .user-group-div2 .user-group-row {
        width: 80%;
    }

    .user-group-div2 .axn-row {
        width: 20%;
        display: flex;
        flex-direction: row-reverse;
    }

    .user-group-div2 .user-group-name {
        font-size: 14pt;
        margin-right: 10px;
    }

    .user-group-div2 .user-group-status {
        font-size: 8pt;
        margin-right: 10px;
    }

        .user-group-div2 .user-group-status:before {
            content: 'Status:';
        }

    .user-group-div2 .user-group-user_cnt {
        font-size: 8pt;
        margin-right: 10px;
    }

        .user-group-div2 .user-group-user_cnt:before {
            content: '# of users:';
        }


    .user-group-div2 .user-group-name-input {
        margin-right: 5px;
    }

    .user-group-div2 .user-group-status-input {
        line-height: 30px;
    }

    .user-group-div2 .user-group-item-div-input1 {
        width: 100%;
    }

    /**********************/
    /* user action */
    /**********************/
    .user-group-div2 .user-group-action-title {
        font-size: 12pt;
        line-height: 30px;
    }

    .user-group-div2 .user-group-action-data-list {
        padding: 5px;
        background-color: #f2f2f2;
    }

    .user-group-div2 .user-group-action-item-header {
        border-bottom: 1px solid rgba(174, 169, 169, 0.2);
    }

    .user-group-div2 .user-group-action-item-header1 {
        line-height: 30px;
        font-size: 10pt;
        line-height: 30px;
    }

    .user-group-div2 .user-group-action-app-name {
        line-height: 30px;
        width: 90%;
        font-size: 11pt;
        cursor: pointer;
    }

    .user-group-div2 .user-group-action-item-header1-exp {
        width: 10%;
        cursor: pointer;
        font-size: 18pt;
        padding-right: 5px;
        text-align: right;
    }


    .user-group-div2 .user-group-action-item-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 5px;
    }

        .user-group-div2 .user-group-action-item-list .user-group-action-item-div {
            padding: 7px 30px;
            background-color: #cecccc;
            margin: 2px;
            box-sizing: border-box;
            cursor: pointer;
            position: relative;
            border-radius: 4px;
        }

        .user-group-div2 .user-group-action-item-list .user-group-action-item-text {
        }


/*****************/
/* user */
/*****************/
.user-div2 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

    .user-div2 .user-filter {
        margin-top: 20px;
        padding: 10px;
        display: flex;
        flex-direction: row;
    }

        .user-div2 .user-filter .search_btn {
            font-size: 14pt;
        }

    .user-div2 .user-item-div {
        display: flex;
        flex-direction: row;
        margin-bottom: 5px;
        margin-right: 5px;
        padding: 10px;
        background-color: #fff;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    }

    .user-div2 .user-row {
        width: 80%;
    }

    .user-div2 .axn-row {
        width: 20%;
        display: flex;
        flex-direction: row-reverse;
    }

    .user-div2 .user-name {
        font-size: 14pt;
        margin-right: 10px;
    }

    .user-div2 .user-type {
        margin-right: 10px;
        font-size: 8pt;
    }

    .user-div2 .user-status {
        margin-right: 10px;
        font-size: 8pt;
    }

        .user-div2 .user-status:before {
            content: 'Status:';
        }

    .user-div2 .user-co_cnt {
        margin-right: 10px;
        font-size: 8pt;
    }

        .user-div2 .user-co_cnt:before {
            content: 'Accessible companies:';
        }

    .user-div2 .user-last_access_on {
        margin-right: 10px;
        font-size: 8pt;
    }

        .user-div2 .user-last_access_on:before {
            content: 'Last access on:';
        }

    /***********/
    .user-div2 .user-input-col0 {
        line-height: 30px;
    }

    .user-div2 .user-input-col1 {
    }

    .user-div2 .user-uid-input {
    }

    .user-div2 .user-name-input {
    }

    .user-div2 .user-type-input {
    }

    .user-div2 .user-login-validity-start-input {
        margin-right: 5px;
    }

    .user-div2 .user-login-validity-end-input {
        margin-right: 5px;
    }

    .user-div2 .user-co-access-div {
        width: 100%;
        background-color: #f2f2f2;
        height: 200px;
        overflow: hidden;
        overflow-y: scroll;
        margin-top: 10px;
    }

    .user-div2 .user-co-access-item-div {
        box-sizing: border-box;
        padding: 5px;
        border-bottom: 1px solid rgba(155, 146, 146, 0.2);
    }

        .user-div2 .user-co-access-item-div .co-name {
            width: 49%;
        }

        .user-div2 .user-co-access-item-div .user-group0 {
            width: 49%;
        }

        .user-div2 .user-co-access-item-div .user-group {
            width: 100%;
        }

        /*this is the user group drop down edit */
        .user-div2 .user-co-access-item-div .celdde {
            width: 100%;
        }

            .user-div2 .user-co-access-item-div .celdde .col0 {
                width: 90%;
            }

    /***********/
    /* pager */
    /***********/
    .user-div2 .pager_div {
        display: flex;
        flex-direction: row;
        margin-left: 5px;
    }

        .user-div2 .pager_div .pager0 {
            line-height: 30px;
            margin-right: 5px;
        }

        .user-div2 .pager_div .pg_idx {
            height: 32px;
        }

        .user-div2 .pager_div .prev_pg {
            font-size: 14pt;
            padding-left: 10px;
            padding-right: 10px;
            cursor: pointer;
        }

            .user-div2 .pager_div .prev_pg:after {
                content: '\276E';
            }

        .user-div2 .pager_div .next_pg {
            font-size: 14pt;
            padding-left: 10px;
            padding-right: 10px;
            cursor: pointer;
        }

            .user-div2 .pager_div .next_pg:after {
                content: '\276F';
            }

        .user-div2 .pager_div .pg_size0 {
            line-height: 30px;
            margin-right: 5px;
            margin-left: 20px;
        }

        .user-div2 .pager_div .rec_count {
            line-height: 30px;
            margin-left: 20px;
        }

    .user-div2 .pwd-div {
        /*this will force the password div to be display in the new line*/
        width: 100%;
        margin-top: 20px;
        margin-left: 20px;
        background-color: #f2f2f2;
        padding: 10px;
    }

    .user-div2 .pwd, .user-div2 .pwd2 {
        width: 170px;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .user-div2 .pwd_strength0 {
        height: 50px;
    }

    .user-div2 .pwd_strength1 {
        line-height: 30px;
    }

    .user-div2 .pwd_strength {
        line-height: 30px;
    }

/* more options for the user rec.*/
.user-div .user-more-opt-pp {
    width: 200px;
    padding: 10px;
    background-color: #8d8d8d;
    color: #fff;
}

    .user-div .user-more-opt-pp .user-more-opt-item {
        line-height: 30px;
        cursor: pointer;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }

.user-group-pp {
    background-color: #8d8d8d;
    color: #fff;
    height: 150px;
    width: 200px;
    overflow: hidden;
    overflow-y: scroll;
}

    .user-group-pp .data-list {
        padding: 5px;
        box-sizing: border-box;
    }

    .user-group-pp .item-div {
        line-height: 30px;
        cursor: pointer;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }


/*****************/
/* system settings  */
/*****************/
.sys-set-div2 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 5px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

    .sys-set-div2 .sys-set-row {
        width: 80%;
    }

    .sys-set-div2 .axn-row {
        width: 20%;
        display: flex;
        flex-direction: row-reverse;
    }

    .sys-set-div2 .sys-set-col0 {
        line-height: 30px;
    }

    .sys-set-div2 .sys-set-col1 {
        line-height: 30px;
        padding-left: 10px;
    }



/*****************/
/* mailbox settings  */
/*****************/
.mailbox-set-div2 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 5px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

    .mailbox-set-div2 .mailbox-set-row {
        width: 80%;
    }

    .mailbox-set-div2 .axn-row {
        width: 20%;
        display: flex;
        flex-direction: row-reverse;
    }

    .mailbox-set-div2 .mailbox-set-col0 {
        line-height: 30px;
    }

    .mailbox-set-div2 .mailbox-set-col1 {
        line-height: 30px;
        padding-left: 10px;
    }



/*****************/
/* my profile */
/*****************/
.my-profile-div2 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 5px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

    .my-profile-div2 .my-profile-row {
        width: 80%;
    }

    .my-profile-div2 .axn-row {
        width: 20%;
        display: flex;
        flex-direction: row-reverse;
    }

    .my-profile-div2 .btn-edit-pwd0 {
        margin-top: 10px;
        cursor: pointer;
    }

    .my-profile-div2 .my-profile-col0 {
        line-height: 30px;
    }

    .my-profile-div2 .my-profile-col1 {
        line-height: 30px;
        padding-left: 10px;
    }

    .my-profile-div2 .pwd-item-div {
        margin-top: 20px;
        background-color: #f2f2f2;
        padding: 10px;
    }

    .my-profile-div2 .pwd-title {
        font-size: 12pt;
        line-height: 30px;
    }

    .my-profile-div2 .pwd-div {
        /*this will force the password div to be display in the new line*/
        width: 100%;
        margin-top: 20px;
        margin-left: 20px;
    }

    .my-profile-div2 .pwd, .my-profile-div2 .pwd2 {
        width: 170px;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .my-profile-div2 .old-pwd0 {
        margin-bottom: 10px;
    }

    .my-profile-div2 .pwd_strength0 {
        height: 50px;
    }

    .my-profile-div2 .pwd_strength1 {
        line-height: 30px;
    }

    .my-profile-div2 .pwd_strength {
        line-height: 30px;
    }


    /*****************/
    /*profile photo*/
    /*****************/
    .my-profile-div2 .my-profile-photo {
        width: 100px;
        height: 100px;
    }

    .my-profile-div2.my-profile-photo2 {
        height: 100px;
        width: 100px;
        margin-top: -6px;
    }

        /*this is material icon*/
        .my-profile-div2 .my-profile-photo2:after {
            content: 'face';
            font-size: 60pt;
        }

    .my-profile-div2 .my-profile-photo:nth-child(1) {
        margin-top: 20px;    
        cursor:pointer;    
    }

    .my-profile-div2 .my-profile-photo > img {
        height: 80px;
        width: 80px;
        margin-top: -6px;
        border-radius: 50px;
    }


/**************/
/* email-template*/
/**************/

.email-template-div2 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 5px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

    .email-template-div2 .email-template-col0 {
        line-height: 30px;
    }

    .email-template-div2 .email-template-col1 {
    }

    .email-template-div2 .email-subject {
        width: 100%;
    }


    .email-template-div2 .email-template {
        width: 98%;
        height: 200px;
    }

    .email-template-div2 .axn-row {
        margin-top: 10px;
    }


.email-template-pp {
    background-color: #8d8d8d;
    color: #fff;
    height: 150px;
    width: 200px;
    overflow: hidden;
    overflow-y: scroll;
}

    .email-template-pp .data-list {
        padding: 5px;
        box-sizing: border-box;
    }

    .email-template-pp .item-div {
        line-height: 30px;
        cursor: pointer;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }

@media screen and (max-width:500px) {


    .secu-dashboard-div2 .stat {
        flex-direction: column;
    }

    .secu-dashboard-div2 .stat-col {
        width: 90%;
        margin-bottom: 2px;
    }

    /*************/
    /*access log*/
    /*************/
    .access-log-div2 {
        width: 90%;
    }

        .access-log-div2 .access-log-item-div {
            flex-direction: column;
        }

        .access-log-div2 .access-log-id {
            margin-bottom: 10px;
        }

        .access-log-div2 .access-log-filter {
            flex-direction: column;
        }

            .access-log-div2 .access-log-filter > div > input {
                width: 98%;
                margin-bottom: 5px;
            }

        /**************/
        /*pager*/
        /**************/
        .access-log-div2 .pager_div {
            flex-direction: column;
        }


    /**************/
    /*audit log*/
    /**************/
    .audit-log-div2 {
        width: 90%;
    }

        .audit-log-div2 .audit-log-item-div {
            flex-direction: column;
        }

        .audit-log-div2 .audit-log-id {
            margin-bottom: 10px;
        }

        .audit-log-div2 .audit-log-filter {
            flex-direction: column;
        }

            .audit-log-div2 .audit-log-filter > div > input {
                width: 98%;
                margin-bottom: 5px;
            }


        /**************/
        /*pager*/
        /**************/
        .audit-log-div2 .pager_div {
            flex-direction: column;
        }

    /*************/
    /*org*/
    /*************/
    .org-div2 {
        width: 90%;
    }


    /*************/
    /*co*/
    /*************/
    .co-div2 {
        width: 90%;
    }

        .co-div2 .co-item-div {
        }


    /*************/
    /*user-group*/
    /*************/
    .user-group-div2 {
        width: 90%;
    }

        .user-group-div2 .user-group-action-item-list .user-group-action-item-div {
            width: 98%;
        }


    /*************/
    /*user*/
    /*************/
    .user-div2 {
        width: 90%;
    }

        .user-div2 .user-filter {
            flex-direction: column;
        }

            .user-div2 .user-filter > div > input {
                width: 98%;
                margin-bottom: 5px;
            }

        .user-div2 .user-co-access-item-div .co-name {
            width: 98%;
            margin-top: 5px;
            margin-bottom: 5px;
        }

        .user-div2 .user-co-access-item-div .user-group0 {
            width: 98%;
        }


        /**************/
        /*pager*/
        /**************/
        .user-div2 .pager_div {
            flex-direction: column;
        }


    /**************/
    /*my profile*/
    /**************/
    .my-profile-div2 input[type=password] {
        width: 90%;
    }

    .my-profile-div2 .pwd-div {
        width: 98%;
    }

    .my-profile-div2 .pwd_strength_bar {
        width: 90%;
    }
}

@media screen and (min-width:700px) and (max-width:1000px) {
}

@media screen and (min-width:1020px) {
}