/*********************************************************/
/********** Master CSS for Portal HRM-Solution ***********/
/*********************************************************/
/*					 Create 02/03/2559 					 */
/*					 Create by Patthavit				 */
/*			      Last Modify 18/03/2559 			     */
/*				  Last Update by Patthavit				 */
/*********************************************************/


/*edit by prapas ngootip 10/04/2017*/
/*edit by prapas ngootip 29/05/2017
    - add disable class in project
*/

/* Custom Font */
@font-face {
    font-family: Prompt;
    src: url(../Content/fonts/Prompt-Regular.ttf);
}


/*********************  Layout  **************************/
body {
    background-color: #E4E4E4;
    font-family: Prompt !important;
}

/*Main Content under Navbar*/
.mainContent {
    padding-top: 130px; /*65px;*/
    height: auto;
}

.mainContent-hasBar {
    padding-top: 0px; /*65px;*/
    height: auto;
}

.rightContent {
    padding-left: 25px;
}

/* Decoractionb*/
.noPad-left {
    padding-left: 0 !important;
}

.noPad-right {
    padding-right: 0 !important;
}

.noPad-top {
    padding-top: 0 !important;
}

.noPad-buttom {
    padding-bottom: 0 !important;
}

.noPad {
    padding: 0px;
}

/* Color */
.red {
    color: red;
}

.green {
    color: green;
}

.white {
    color: white;
}

.gray {
    color: gray;
}

/* Font */
.bold {
    font-weight: bold;
}

.font-2x {
    font-size: 2em;
}

.font-3x {
    font-size: 3em;
}

.font-4x {
    font-size: 4em;
}

.font-5x {
    font-size: 5em;
}

/* Icon Color */
.icon.yellow {
    color: #FECE00;
}

/* Vertical Align Center */
.vcenter {
    vertical-align: middle;
    margin: 10px 0px;
}


/*********************  Nav Bar  *************************/
.logo {
    margin: 10px 0px;
}

.headder-icon {
    color: #37B0A7;
}

.lang-btn-section {
    margin: 15px 10px;
}

.lang-icon {
    margin: 2px;
}
/*
#user-menu-btn {
    margin-top: 20px;
}
*/
.nav-line-right {
    display: inline-flex;
}

.top-menu {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(222, 222, 222, 1) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-top: 1px solid #ebb112;
    height: 38px;
    margin-top: 78px;
    z-index: 1029;
}
    /********************  Menu Lv1 ****************************/
    .top-menu > ul > li {
        border-right: 1px solid #ddd;
        height: 37px;
    }

        .top-menu > ul > li > a {
            height: 37px;
            line-height: 10px;
            -webkit-transition: color 0.75s ease;
            -moz-transition: color 0.75s ease;
            -ms-transition: color 0.75s ease;
            -o-transition: color 0.75s ease;
            transition: color 0.75s ease;
        }

            .top-menu > ul > li > a:hover {
                background-color: #37B0A7;
                color: #fff;
            }

        .top-menu > ul > li.home_btn > a,
        .top-menu > ul > li.home_btn > a:hover {
            background-color: #333;
            color: #fff;
            margin-right: 14px;
            margin-left: 20px;
            padding: 12px 20px;
        }

        .top-menu > ul > li.home_btn > a,
        .top-menu > ul > li.slide-menu-btn > a,
        .top-menu > ul > li.slide-menu-btn > a:hover {
            background-color: #696969;
            color: #fff;
            padding: 12px 20px;
        }
/****************** Side Toggle Menu **********************/
.sideMenu {
    min-width: 400px; /* ให้เป็นแบบนี้ไปก่อน ยังเขียน Animate ไม่เสร็จ*/
    /*width:0%;*/
    height: 120%;
    z-index: 1027;
    border: 0px;
    position: fixed; /*absolute;*/
    top: 113px;
    left: -1px;
    background-color: #696969;
    /* Transition */
    transition: width .5s ease;
    -webkit-transition: width .5s ease;
    height: 80%;
    overflow-y: auto;
}
    /* แก้ animation min-width ภายหลัง
.expanded { 
    width:100% !important;
}
*/
    /*List Level 1 (Headder Side Menu)*/
    .sideMenu > .side-list-group > li > a.list-header {
        border-radius: 0px;
        border: 0px;
        background-color: #37B0A7;
        padding-top: 23px;
        padding-bottom: 23px;
        font-size: 16px;
    }

        .sideMenu > .side-list-group > li > a.list-header > .sideMenu-icon-bg {
            background-color: #696969;
            padding: 10px;
            text-align: center;
            color: #fff;
        }

        .sideMenu > .side-list-group > li > a.list-header > .sideMenu-txt-bg {
            background-color: #2C8D86;
            padding: 10px;
        }

            .sideMenu > .side-list-group > li > a.list-header > .sideMenu-txt-bg > .list-header-txt {
                color: #000;
            }

    /*List Level 2*/
    .sideMenu > .side-list-group > li {
        border-bottom: 1px solid #949494;
    }

        .sideMenu > .side-list-group > li :first-child {
            border-bottom: 0px;
        }

        .sideMenu > .side-list-group > li > a.list-lv2 {
            color: #fff;
        }

            .sideMenu > .side-list-group > li > a.list-lv2:hover,
            .sideMenu > .side-list-group > li > a.list-lv2:focus {
                background-color: #808080;
            }
            /*List Level 2 icon*/
            .sideMenu > .side-list-group > li > a.list-lv2 > .list-lv2-icon {
                position: relative;
                left: -13px;
                top: -2px;
                width: 34px;
                height: 34px;
                padding: 9px 15px;
                border-right: 1px solid #999;
                background-size: 200% 100%;
                background-image: linear-gradient(to right, grey 50%, #FFC333 50%);
                -webkit-transition: background-position 1s;
                -moz-transition: background-position 1s;
                /*Transition*/
                transition: background-position 1s;
            }

                .sideMenu > .side-list-group > li > a.list-lv2 > .list-lv2-icon:hover {
                    background-position: -100% 0;
                }

                .sideMenu > .side-list-group > li > a.list-lv2 > .list-lv2-icon.active {
                    background-position: -100% 0;
                }

                /*slide effect yellow color*/
                .sideMenu > .side-list-group > li > a.list-lv2 > .list-lv2-icon.yellow {
                    background-image: linear-gradient(to right, grey 50%, #FFC333 50%);
                }

                    .sideMenu > .side-list-group > li > a.list-lv2:hover > .list-lv2-icon.yellow,
                    .sideMenu > .side-list-group > li > a.list-lv2 > .list-lv2-icon.yellow:hover,
                    .sideMenu > .side-list-group > li > a.list-lv2 > .list-lv2-icon.active {
                        background-position: -100% 0;
                    }

                /*slide effect green color*/
                .sideMenu > .side-list-group > li > a.list-lv2 > .list-lv2-icon.green {
                    background-image: linear-gradient(to right, grey 50%, #8FD800 50%);
                }

                    .sideMenu > .side-list-group > li > a.list-lv2:hover > .list-lv2-icon.green,
                    .sideMenu > .side-list-group > li > a.list-lv2 > .list-lv2-icon.green:hover,
                    .sideMenu > .side-list-group > li > a.list-lv2 > .list-lv2-icon.active {
                        background-position: -100% 0;
                    }

                /*slide effect red color*/
                .sideMenu > .side-list-group > li > a.list-lv2 > .list-lv2-icon.red {
                    background-image: linear-gradient(to right, grey 50%, #D80046 50%);
                }

                    .sideMenu > .side-list-group > li > a.list-lv2:hover > .list-lv2-icon.red,
                    .sideMenu > .side-list-group > li > a.list-lv2 > .list-lv2-icon.red:hover,
                    .sideMenu > .side-list-group > li > a.list-lv2 > .list-lv2-icon.active {
                        background-position: -100% 0;
                    }

        /*List Level 3*/
        .sideMenu > .side-list-group > li > ul > li > a.list-lv3 {
            background-color: #999999;
            color: #484848;
            padding-left: 20px;
        }
            /*List Level 3 icon*/
            .sideMenu > .side-list-group > li > ul > li > a.list-lv3 > .list-lv3-icon {
                position: relative;
                left: -18px;
                top: -2px;
                width: 34px;
                height: 34px;
                padding: 8px 15px;
                border-right: 1px solid #999;
                background-color: gray;
                color: #C7C7C7;
            }
/* Wrapper */
.sideMenu-wrapper {
    height: 100%;
    width: 100%;
    z-index: 1026;
    background-color: rgba(0, 0, 0, 0.22);
    position: fixed;
    top: 0px;
    left: 0px;
    overflow: hidden;
}

/* Breadcrumbs Bar*/
.breadcrumbs_bar {
    margin-top: 130px;
    z-index: 1029 !important;
}
/* Breadcrumbs */
.breadcrumbs-list {
    padding: 8px 15px;
    margin-bottom: 12px;
    margin-left: -10px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 7px;
    border: 1px solid #ccc;
    display: inline-flex;
}

    .breadcrumbs-list > li {
        display: inline-flex;
    }

        .breadcrumbs-list > li + li:before {
            content: ">";
            padding: 0 5px;
        }

        .breadcrumbs-list > li > span {
            margin: 0px 10px;
        }

        .breadcrumbs-list > li > a {
            text-decoration: none;
            color: #949494;
        }

            .breadcrumbs-list > li > a:hover {
                text-decoration: underline;
            }

/********************* Side Tabs *************************/
.side_tab {
    margin-top: 65px;
    position: relative;
    left: 3px;
    width: 125px;
    border-bottom: 0px;
}

ul.side_tab > li > a {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.tab-icon {
    color: #37B0A7;
}

.tab-text {
    color: #696969;
}

/******************* Tabs Content ************************/
/* Action Button */
.action_btn {
    width: 120px;
    position: relative;
    top: 20px;
    color: #ffffff;
    background-color: #999999;
}

    .action_btn:hover {
        color: #ffffff;
        background-color: #696969;
    }
/* Cancel Button */
.cancel_btn {
    min-width: 90px;
}
/* Save Button */
.save_btn {
    min-width: 90px;
}
/* Save Button */
.back_btn {
    min-width: 90px;
}


/*====== Button In Rigth Top Panel ==========*/
.rightTopPanel-btn {
    min-width: 85px;
    text-align: center;
}


/*====== Button In Panel ==========*/
.add-btn, .edit-btn, .delete-btn {
    min-width: 50px;
}
/* View Button */
.view-btn {
    background-color: #88BE2C;
    color: #fff;
}

    .view-btn:hover, .view-btn:focus {
        background-color: #7FB128;
        color: #fff;
    }
/* Add Button */
.add-btn {
    background-color: #88BE2C;
    color: #fff;
}

    .add-btn:hover, .add-btn:focus {
        background-color: #7FB128;
        color: #fff;
    }
/* Edit Button */
.edit-btn {
    background-color: #27AFE9;
    color: #fff;
}

    .edit-btn:hover, .edit-btn:focus {
        background-color: #33A5D6;
        color: #fff;
    }
/* Delete Buton */
.delete-btn {
    background-color: #D16244;
    color: #fff;
}

    .delete-btn:hover, .delete-btn:focus {
        background-color: #B9573E;
        color: #fff;
    }
/* Search Buton */
.search-btn {
    background-color: #8C8C8C;
    color: #ffffff;
    min-width: 100px;
}

    .search-btn:hover, .search-btn:focus {
        background-color: #696969;
        color: #fff;
    }
/* Clear Buton */
.clear-btn {
    background-color: #8C8C8C;
    color: #ffffff;
    min-width: 100px;
}

    .clear-btn:hover, .clear-btn:focus {
        background-color: #696969;
        color: #fff;
    }
/*==================================*/


/*========= Data Table - Custom Action Button ==================*/
.dtBtn {
    min-width: 30px;
    margin: 2px;
    display: inline-block;
    padding: 6px;
    font-size: 10px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

    .dtBtn.add {
        background-color: #86B937;
        color: white;
    }

        .dtBtn.add:hover {
            opacity: 0.5;
        }

    .dtBtn.view {
        background-color: #86B937;
        color: white;
    }

        .dtBtn.view:hover {
            opacity: 0.5;
        }

    .dtBtn.edit {
        background-color: #37B0A7;
        color: white;
    }

        .dtBtn.edit:hover {
            opacity: 0.5;
        }

    .dtBtn.delete {
        background-color: #DD5B38;
        color: white;
    }

        .dtBtn.delete:hover {
            opacity: 0.5;
        }
/*==============================================================*/

/*Space*/
span.space-sm {
    margin: 5px 0px 5px 5px;
}

span.space-md {
    margin: 10px;
}

span.space-lg {
    margin: 20px;
}


/* Form */
input[readonly].success {
    color: #fff;
    background-color: #449d44;
    border-color: #398439;
}

input[readonly].danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}


/* Content Link*/
a.tab-conten-link {
    color: #37B0A7;
    text-decoration: none;
}

    a.tab-conten-link:hover {
        color: #29837D;
    }

/* Panel Content of Tab */
.side-tab-content {
    border: 0px;
    min-height: 565px;
}

/* Panel */
.main-panel {
    padding: 15px 50px;
    margin-bottom: 5px;
}

/* Tab in panel */
.tab-in-panel {
    position: relative;
    top: 1px;
    border-bottom: 0px;
}

    .tab-in-panel > li > a:hover {
        background-color: #E2F6F5;
    }

/*.tab-content-in-panel {
    padding: 20px;
    border: 1px solid #ddd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}*/

.tab-content-in-panel {
    padding: 20px;
    border: 1px solid #ddd;
    border-top: 0px;
    -webkit-border-radius: 5px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-radius: 5px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    border-radius: 5px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}


    .tab-content-in-panel .btn_panel {
        text-align: right;
    }


/******************* Tabs Content : User Profile ************************/
.profile_img {
    width: 80px;
    height: 80px;
}

.todoList_img {
    width: 30px;
    height: 30px;
}

.profile-data, .todo-data {
    color: #808080;
}

a.todo-list-link {
    color: #B3B3B3;
    font-weight: bold;
    text-decoration: none;
}

    a.todo-list-link:hover {
        color: #808080;
    }


.sideMenu.ng-hide-add {
    -webkit-animation: slideOutLeft 1s;
    animation: slideOutLeft 1s;
}

.sideMenu.ng-hide-remove {
    -webkit-animation: slideInLeft 1;
    animation: slideInLeft 1s;
}



.sideMenu-wrapper.ng-hide-add {
    -webkit-animation: fadeOut 1s;
    animation: fadeOut 1s;
}

.sideMenu-wrapper.ng-hide-remove {
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/*add by prapas ngootip 10/04/2017*/
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

.disabled {
    pointer-events: none;
    opacity: 0.4;
}


.ng-hide.ng-hide-animate:not(.sideMenu) {
    display: none !important;
}


/*Notification Icon*/

.noti-button, .noti-button:focus {
    color: #fff;
    display: inline-block; /* Inline elements with width and height. TL;DR they make the icon buttons stack from left-to-right instead of top-to-bottom */
    position: relative; /* All 'absolute'ly positioned elements are relative to this one */
    padding: 2px 5px; /* Add some padding so it looks nice */
    font-size: 22px;
}

    .open .noti-button, .noti-button:hover, .noti-button:active {
        color: #d3d3d3;
        cursor: pointer;
    }

.noti-button_badge {
    background-color: #fa3e3e;
    border-radius: 2px;
    color: #fff;
    padding: 1px 3px;
    font-size: 10px;
    position: absolute;
    top: 0;
    left: 19px;
}

.noti-button:hover .noti-button_badge,
.noti-button:active .noti-button_badge {
    background-color: #d83030;
    color: #ddd;
}

.noti-dropdown {
    position: relative;
}

.open > .noti-dropdown-menu {
    display: block;
}

.open > .noti-button .noti-button_badge {
    display: none;
}

.noti-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: 1000;
    display: none;
    float: left;
    width: 298px; /* 300 minus border 2px*/
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 11px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

    .noti-dropdown-menu > .noti-header {
        border-bottom: 1px solid #bbb;
        padding: 3px 10px;
        display: flex;
    }

        .noti-dropdown-menu > .noti-header a {
            font-size: 11px;
        }


    .noti-dropdown-menu > .noti-body-frame {
        overflow: hidden;
    }

        .noti-dropdown-menu > .noti-body-frame > .noti-body {
            overflow-y: scroll;
            /*width: 340px;*/
            max-height: 420px;
            margin-right: -23px;
        }

    .noti-dropdown-menu > .noti-bottom {
        border-top: 1px solid #bbb;
        padding: 5px 10px 0px;
        display: block;
        text-align: center;
        font-size: 12px;
    }

    .noti-dropdown-menu .noti-body > .load-card {
        padding: 8px 0;
        display: block;
        font-size: 16px;
        text-align: center;
        width: 296px;
        background-color: #e6e6e6;
    }

    .noti-dropdown-menu .noti-body > .not-found {
        padding: 18px 0px;
        display: block;
        font-size: 13px;
        text-align: center;
        width: 296px;
        background-color: #fff;
        color: #5d5d5d;
    }


    .noti-dropdown-menu .noti-body > .noti-card {
        min-height: 60px;
        max-height: 80px;
        display: inline-flex;
        width: 296px;
        padding-top: 5px;
        padding-bottom: 5px;
        cursor: pointer;
        /*margin-bottom: 5px;
            border-bottom: 1px solid #bbb;*/
    }


        .noti-dropdown-menu .noti-body > .noti-card.new {
            background-color: #ffefca;
        }

        .noti-dropdown-menu .noti-body > .noti-card:hover {
            background-color: #cde3f8;
        }

        .noti-dropdown-menu .noti-body > .noti-card > .image-frame {
            height: inherit;
            width: 80px;
            text-align: center;
        }

        .noti-dropdown-menu .noti-body > .noti-card > .noti-text {
            width: 210px;
            text-align: left;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-box-orient: vertical;
            padding-top: 2px;
        }

            .noti-dropdown-menu .noti-body > .noti-card > .noti-text > .noti-title {
                display: block;
                font-weight: bold;
                margin-bottom: 2px;
                color: #444;
                float: left;
                width: 130px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

            .noti-dropdown-menu .noti-body > .noti-card > .noti-text > .noti-time {
                display: block;
                color: #7d7d7d;
                text-align: right;
                float: right;
                margin-right: 5px;
                font-size: 10px;
            }

            .noti-dropdown-menu .noti-body > .noti-card > .noti-text > .noti-detail {
                width: 100%;
                overflow-wrap: break-word;
                font-size: 11px;
                line-height: 1.3em;
                color: #7d7d7d;
                float: left;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                text-overflow: ellipsis;
            }



        .noti-dropdown-menu .noti-body > .noti-card > .image-frame > img {
            border-radius: 50%;
            width: 60px;
            height: 60px;
            border: 1px solid #4d4d4d;
            background-color: #fff;
        }

        .noti-dropdown-menu .noti-body > .noti-card + .noti-card,
        .noti-dropdown-menu .noti-body > .noti-card + .load-card {
            border-top: 1px solid #bbb;
        }