/* vietnamese */
@font-face {
    font-family: 'Roboto';
    src: url(../../lib/font_roboto/Roboto-Regular.ttf);
}
.tblCustomer tr td:nth-child(1){
    width: 30%;
}
.tblCustomer tr td:nth-child(2){
    width: 70%;
}
body {
    font-family: 'Roboto' !important;
    /*max-width: 1440px;*/
    /*margin: 0 auto !important;*/
    background: #F0F3F6;
}
.icdel{
    background-image:url('../../images/newui/icondelete.png') !important;
}
.icclose {
    background-image: url('../../images/newui/iconclose.png') !important;
}
.header-new {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 32px 8px 8px;
    /* Foreground */
    background: #FFFFFF;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.06);
}

.frame15 {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    left: 8px;
    top: 8px;
    /* Inside Auto Layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

.frame16 {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0px;
    /* Inside Auto Layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}
.logo15 {
    /*width: 43px;*/
    height: 43px;
    /* Inside Auto Layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}
.text15 {
    /* H2/Roboto Bold 18px */
    
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 27px;
    /* identical to box height, or 150% */
    color: #3A3A3A;
    margin-left:8px;
}
.imginfo {
    flex: none;
    order: 6;
    flex-grow: 0;
    width: 26px;
    height: 26px;
}
.imgline {
    border: 1px solid #E2E3EE;
    transform: rotate(180deg);
    /* Inside Auto Layout */
    flex: none;
    order: 5;
    flex-grow: 0;
    margin-right:32px;
    height:25px;
}
.imgnoti {
    flex: none;
    order: 3;
    flex-grow: 0;
    margin-right:32px;
}
.imgchat {
    flex: none;
    order: 2;
    flex-grow: 0;
    margin-right:32px;
}
.imgmail {
    flex: none;
    order: 1;
    flex-grow: 0;
    margin-right:32px;
}
.imgquestion {
    flex: none;
    order: 4;
    flex-grow: 0;
    margin-right:32px;
}
.imgtrogiupluat {
    flex: none;
    order: 0;
    flex-grow: 0;
    margin-right: 32px;
}
.rednoti {
    width: 10px;
    height: 10px;
    background: #EB5757;
    border-radius: 5px;
    position: absolute;
    top: 7px;
    left: 14px;
    display: none;
    border: 2px solid #FFFFFF;
}
/*.leftside:hover {
    width: 200px;
    overflow: visible;
}*/
.leftside {
    position: absolute;
    width: 60px;
    min-height: 650px;
    left: 0px;
    top: 59px;
    /* Background */
    background: #F8FAFF;
    overflow: hidden;
    -webkit-transition: width .05s linear;
    transition: width .05s linear;
    -webkit-transform: translateZ(0) scale(1,1);
    /*z-index: 1000;*/
}
    .leftside ul {
        /*width: 60px;
        height: 300px;
        list-style: none;
        padding-left: 0;
        margin: 0 auto;
        margin-top: 40px;
        text-align:center;*/
        margin: 24px 0;
    }
        .leftside ul li {
            position: relative;
            display: block;
            width: 200px;
            height: 60px;
        }
        .leftside ul li .left-rectangle {
            display: none;
            position: relative;
            width:10px;
            margin-left: 50px;
            margin-top: -41px;
            background: #F0F3F6;
            transform: rotate(0deg);
            border-top: 10px solid transparent;
            border-right: 10px solid #353FAD;
            border-bottom: 10px solid transparent;
        }
        .leftside ul li .act{
            display: block;
        }
.aleftmenu {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-collapse: collapse;
    border-spacing: 0;
    color: #999;
    font-family: arial;
    font-size: 14px;
    text-decoration: none;
    -webkit-transform: translateZ(0) scale(1,1);
    -webkit-transition: all .1s linear;
    transition: all .1s linear;
}
    .aleftmenu img {
        position: relative;
        font-size: 20px;
        margin:0 20px;
    }
    .aleftmenu .nav-text {
        position: relative;
        width: 190px;
        color: #AFBCDF;
        
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
    }
        .aleftmenu .nav-text.textact {
            color: #353FAD;
        }
        .newmain {
        }
.submenu {
    position: absolute;
    left: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 16px;
    min-height: 650px;
    background: #353FAD;
    border-radius: 0px;
    width: 242px;
    transition: left .05s linear;
}
.h2title {
    /* H2 */
    
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 21px;
    /* identical to box height */
    /* Foreground */
    color: #FFFFFF;
    /* Inside Auto Layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;
}
.line22 {
    opacity: 0.15;
    /* Border & line */
    border: 1px solid #E2E3EE;
    /* Inside Auto Layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;
    margin: 10px 0px;
}
.frame1148, frame1149 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    /* Inside Auto Layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;
}
/* width */
::-webkit-scrollbar {
  width: 3px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #000; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
.frame1149 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    flex: none;
    align-self: stretch;
    flex-grow: 0;
    height: 650px;
    overflow-y: auto;
}
.divsearch, .divadd {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 9px 16px 9px 8px;
    width: 210px;
    /* Primary 1 */
    background: #353FAD;
    border-radius: 3px;
}
.iconsearch {
    /* Inside Auto Layout */
    display:flex;
    flex: none;
    flex-grow: 0;
}
.texticon {
    /* Button 1 */
    
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    /* identical to box height, or 157% */
    /* Placeholder & Caption */
    color: #AFBCDF;
    /* Inside Auto Layout */
    flex: none;
    flex-grow: 1;
    margin: 0px 8px;
}
.subcatmenu {
    cursor:pointer;
    border-radius: 3px;
    /* Inside Auto Layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;
    margin: 5px 0px;
    display: flex;
    flex-wrap: wrap;
    height: 44px;
    line-height:22px;
    align-content:center;
}
.actsub {
    background: #4164C3;
}
.textleft {
    
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    /* identical to box height, or 157% */
    /* Foreground */
    color: #FFFFFF;
    position:relative;
    left:10px;
    width:40px;
    overflow:hidden;
}
.textright {
    
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    /* identical to box height, or 157% */
    /* Foreground */
    color: #FFFFFF;
    position: relative;
    left: 15px;
    width: 115px;
    white-space: nowrap;
    overflow: hidden;
    /*text-overflow: ellipsis;*/
}
.threedot {
    cursor: pointer;
    position:relative;
    left:30px;
    display:none;
}
.morefunc {
    background: #FFFFFF;
    /* Drop Shadow_ Popup 2 */
    box-shadow: 2px 4px 6px rgba(210, 213, 221, 0.25);
    border-radius: 3px;
}
    .morefunc .dropdown-item {
        cursor: pointer;
        padding: 0;
        text-align: center;
        height:35px;
        line-height:35px;
    }

.newcontent {
    position: absolute;
    left: 300px;
    min-height:650px;
    margin: 20px 0 30px 20px;
    transition: left .05s linear;
    width: calc(100% - 330px);
}
    .newcontent-header{
        margin-bottom:7px;
        line-height:40px;
        display:flex;
        flex-wrap:wrap;
    }
.title-header {
    /* H1 */
    
    font-style: normal;
    font-weight: bold;
    font-size: 28px;
    line-height: 33px;
    /* identical to box height */
    color: #3A3A3A;
}
.action-header{
    display:flex;
    flex-wrap:wrap;
    margin-left:auto;
    /*margin-right:20px;*/
}
.search-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 9px 10px 9px 9px;
    width: 200px;
    height: 35px;
    background: #FFFFFF;
    /* Border & line */
    border: 1px solid #E2E3EE;
    box-sizing: border-box;
    border-radius: 3px;
}
.button-add-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 9px 16px;
    height: 35px;
    /* Secondary 1 */
    background: #F9B663;
    border-radius: 3px;
    cursor:pointer;
}
.iconadd {
    /* Inside Auto Layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}
.textadd {
    /* Button 1 */
    
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    /* identical to box height, or 157% */
    color: #FFFFFF;
    /* Inside Auto Layout */
    flex: none;
    order: 1;
    flex-grow: 0;
    margin: 0px 8px;
}
.textsearch {
    
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    /* identical to box height, or 157% */
    /* Placeholder & Caption */
    color: #000;
    /* Inside Auto Layout */
    flex: none;
    order: 1;
    flex-grow: 1;
    margin: 0px 10px;
    width: 155px;
    height: 22px;
    border:none;
}
    .textsearch:focus {
        outline: none;
    }
    .textsearch::placeholder {
        color: #AFBCDF;
    }
.textform {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 9px 5px;
    background: #FFFFFF;
    /* Border & line */
    border: 1px solid #E2E3EE;
    box-sizing: border-box;
    border-radius: 3px;
    height: 35px;
    color: #000;
    width:100%;
}
    .textform:focus {
        outline: none;
    }

    .textform::placeholder {
        color: #AFBCDF;
    }

/*grid*/
.k-grid .k-grid-header-wrap{border-right:unset}
.k-grid .k-grid-header, .k-grid .k-grid-header th {
    background: #F9FBFE;
    border-bottom-color: #F0F3F6;
}
.k-grid .k-grid-header th label.k-checkbox-label{
    margin-top:18px !important;
}
    .k-grid .k-grid-header th.k-header {
        
        font-style: normal;
        font-weight: bold;
        font-size: 14px;
        /* identical to box height, or 157% */
        color: #000; /*#F9AB63*/
        line-height: 55px;
    }
    .k-grid .k-grid-header th a.k-link {
        
        font-style: normal;
        font-weight: bold;
        font-size: 14px;
        /* identical to box height, or 157% */
        color: #4D5052;
        line-height: 55px;
    }
    .k-grid .k-grid-content {
        overflow-y: auto;
    }
.k-grid .k-grid-header th.k-header {
    border-style: unset;
}
.k-grid tr:hover, .k-grid .k-state-selected {
    background: #F3F8FF !important;
    color: #1054CC !important;
    border-radius: 3px;
}
.k-grid table tbody tr{
    border-bottom:unset !important;
}
.k-grid td {
    border-style: unset !important;
    padding: .4em .6em !important;
}
/*modal right*/
/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
.modal.left .modal-dialog,
.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 320px;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
    padding: 27px 20px 80px 30px;
}

/*Left*/
.modal.left.fade .modal-dialog {
    left: -320px;
    -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
    -o-transition: opacity 0.3s linear, left 0.3s ease-out;
    transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.in .modal-dialog {
    left: 0;
}

/*Right*/
.modal.right.fade .modal-dialog {
    right: -320px;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.show .modal-dialog {
    right: 0;
}

/* ----- MODAL STYLE ----- */
.modal-content {
    border-radius: 0;
    border: none;
}

.modal-header {
    border-bottom-color: #fff;
    /*background-color: #FAFAFA;*/
    padding: 10px 20px 10px 30px;
}
.modal-content .close {
    padding: 27px 0 0 27px;
    text-align:left;
    width:50px;

}
button:focus{outline: unset !important}
.btnclosemodal {
    
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    background: #F0F3F6;
    border-radius: 3px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 9px 16px;
    width: 120px;
    height: 35px;
    text-align: center;
    /* Body */
    color: #4D5052;
    cursor:pointer;
}
.btnsavemodal {
    
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    background: #1054CC;
    border-radius: 3px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 9px 16px;
    width: 120px;
    height: 35px;
    text-align: center;
    color: #FFFFFF;
    cursor: pointer;
    margin-left:15px;
}
.btnsavemodal:hover{color:#fff}
.btnacceptmodal {
    
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    background: #DD4040;
    border-radius: 3px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 9px 16px;
    width: 120px;
    height: 35px;
    text-align: center;
    color: #FFFFFF;
    cursor: pointer;
    margin-left: 15px;
}
.btnacceptmodal:hover {
    color: #fff
}
.content-remove {
    
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
}
.k-datepicker{padding:unset!important}
.icunion{
    background-image: url(../../images/newui/icunion.png);
}
.boxnv, .boxct {
    display: flex;
    background: #F0F3F6;
    border-radius: 5px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /*padding: 4px 10px 4px 16px;*/
    height: 30px;
    margin-right:10px;
    margin-bottom:10px;
    /*max-width:180px;*/
}
.boxtext {
    font-size: 13px;
    margin: 0 16px;
    overflow: hidden;
    /*max-width: 110px;*/
    white-space: nowrap;
    text-overflow: ellipsis;
}
.imgx {
    width: 8px;
    height: 8px;
    margin: 0 16px 0 0;
    cursor: pointer;
}
.clfoot {
    padding: .4em .6em;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 22px;
    color: #4D5052;
}
.clconlai {
    padding: .4em .6em;
}
.cllink {
    color: #1054CC;
}
.colorblue {
    color: blue;
}
.colorgreen{
    color:green;
}
.colorred{
    color:red;
}
.coloryellow {
    color: #F9B663;
}

.divaccess{
    display:flex;
    justify-content:center;
}
.accessline{
    position:absolute;
    z-index:111;
    height:2px;
    margin-top:55px;
    width:773px;
}
.accessitem {
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    z-index:1111;
    margin:20px 0 40px 0;
    cursor:pointer;
}
.accessimg {
    margin-bottom:20px;
    width:70px;
    height:70px;
    background-image: url(../../images/newui/bgstate.png);
}
.accessact {
    margin-bottom: 20px;
    width: 70px;
    height: 70px;
    background-image: url(../../images/newui/bgstateselect.png);
}
.hidetab{
    display:none;
}

.k-command-cell .badge {
    position: absolute;
    top: 50%;
    left: 60%;
    margin-top: -12px;
    margin-left: 0;
    padding: 2px 4px;
}

.modstate {
    display: flex;
    flex-wrap: wrap;
}

.imgavatar {
    position: relative;
    border-radius: 50em;
    border: 1px solid #FFFFFF;
}

    .imgavatar:not(:first-child) {
        /*margin-left: -10px;*/
    }

.imgavatar2 {
    position: relative;
    border-radius: 50em;
    background-color: #1054CC;
    width: 30px;
    height: 30px;
    margin-left: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #FFFFFF;
}

.textmoreimg {
    
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 25px;
    /* identical to box height, or 218% */
    color: #F6F7FF;
}

.cke_editable {
    padding: 9px 10px;
    background-color: #FFFFFF !important;
    border: 1px solid #E2E3EE;
    box-sizing: border-box;
    border-radius: 3px;
    color: #AFBCDF;
}

input[type=checkbox] {
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    /*padding: 10px;*/
    /*margin-left: 40px;*/
    margin: 0 10px;
    cursor: pointer;
    border-color: cornflowerblue;
}

.k-grid-footer, .k-footer-template td {
    background-color: #fff !important;
    border-color: #fff !important;
    color: #000 !important;
    padding-right:unset!important;
}
.k-grid-header {
    /*padding-right: unset !important;*/
}
.k-grid-footer-wrap {
    border-style:unset!important;
}
label {
    color: #75778F;
}
.imgstate{
    position:absolute;
    margin-top:25px;
}
.k-grid-content {
    min-height: 400px!important;
}


.itemcoll {
    padding: 20px;
    background: #F0F3F6;
    /* Border & line */
    border: 1px solid #E2E3EE;
    box-sizing: border-box;
    border-radius: 3px;
    margin-bottom: 20px;
}
.itemcollheader {
    /* Inside Auto Layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;
    border-bottom:none;
    cursor:pointer;
}
.pcoltop {
    
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 21px;
    /* identical to box height */
    /* Primary 2 */
    color: #1054CC;
    margin-bottom:8px;
    margin-right:50px;
}
.pcolmid {
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 15px;
    /* Placeholder & Caption */
    color: #AFBCDF;
    margin-bottom: 8px;
    margin-right: 50px;
}
.pcolbot {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    /* identical to box height, or 157% */
    /* Label */
    color: #75778F;
    margin-bottom: 0px;
    margin-right: 50px;
}
.pcoltopchild {
    
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    /* identical to box height */
    /* Primary 2 */
    color: #1054CC;
    margin-bottom: 4px;
}
.pcolmidchild {
    
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    /* identical to box height, or 157% */
    /* Label */
    color: #75778F;
}
.itcc {
    border-radius: 3px 0px 0px 3px;
    background: #F0F3F6;
    /* Border & line */
    border: 1px solid #E2E3EE;
    box-sizing: border-box;
    border-left: 4px solid #4164C3;
    padding: 16px;
    margin-bottom: 8px;
}
.bgwhite {
    background: #fff;
}
.bgdone {
    background: #67DC6C;
}
.bgnew {
    background: #F9B663;
}
.bginprocess {
    background: #4164C3;
}
.nav-tabs .nav-item {
    min-width: 120px;
    text-align: center;
    /*background: #F0F3F6;
    border-radius: 3px 3px 0px 0px;
    margin-right: 10px;*/
}
.nav-tabs .nav-item .nav-link {
    border: 1px solid #E2E3EE;
}
.nav-tabs .nav-item .active {
    background: #fff;
    box-sizing: border-box;
    border: 1px solid #E2E3EE;
    border-bottom-color: #fff;
}
.nav-tabs .nav-link.active:focus {
    border: 1px solid #E2E3EE;
    border-bottom-color: #fff;
}

.tab-content {
    border: 1px solid #E2E3EE;
    box-sizing: border-box;
    border-radius: 3px;
}
.menuthuvien {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 35px;
    position: relative;
    margin-top: -60px;
    float: right;
    cursor: pointer;
}

.cellfolder {
    display: flex;
    flex-wrap: wrap;
    width: 130px;
    height: 145px;
    background: #F3F8FF;
    border-radius: 3px;
    margin: 0 10px 20px 10px;
    cursor:pointer;
}
.cellfolder-text {
    
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 20px;
    /* or 154% */
    text-align: center;
    /* Body */
    color: #4D5052;
    width: 120px;
    height: 40px;
    margin: 0 5px 10px 5px;
    overflow: hidden;
    white-space: pre-wrap;
    text-overflow: ellipsis;
}
.cellfolder-img {
    margin: 22px 30px 22px 30px;
    width: 70px;
    height: 55px;
}
.minibtn-img{
    width:16px;
    height:16px;
    margin: auto;
}
.minibtn-text {
    
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    /* identical to box height, or 157% */
    /* Body */
    color: #4D5052;
    margin-left: 8px;
    padding-top: 1.7px;
}
.mininavi {
    width: 40%;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    /* identical to box height, or 157% */
    /* Body */
    color: #4D5052;
}
.insidenavi {
    height: 55px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #F0F3F6;
}
.linknavi {
    
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 22px;
    margin-left: 20px;
    color: #4D5052;
    display:none;
}
.linknavi:hover{
    text-decoration:none;
}
.shdiv{margin-bottom:50px}
.header-collapse {
    background: #353FAD;
    border-radius: 4px 4px 0px 0px;
    display: flex;
    align-items: center;
    height: 55px;
    cursor: pointer;
}
    .header-collapse i {
        margin: 0 20px;
        color: #fff;
        cursor:pointer;
    }
    .header-collapse div {
        color: #fff;
        
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 19px;
        cursor: pointer;
        margin-right:20px;
    }
    .inpCheckbox{
        margin-left: 5px!important;
    }
.lblCheckbox {
    margin-left: 10px;
    margin-bottom: 15px;
    cursor: pointer;
}
.divCheckbox {
    display: flex;
    align-items: baseline;
}
.commoninfocty {
    width: 400px;
    min-height: 590px;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 25px 20px 25px 20px;
    margin-bottom: 10px;
}
.linkeditcty {
    position: relative;
    margin-left: 295px;
    margin-top: -134px;
    width: 90px;
    text-align: center;
    height: 25px;
}
.logocty {
    margin:0 auto;
    margin-bottom:15px;
}
.namecty {
    margin: 0 auto;
    width: 300px;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 21px;
    text-align: center;
    color: #333537;
    margin-bottom:20px;
    text-transform:uppercase;
}
.cllogo{
    width:100px;
    height:100px;
}
.closelogo{
    position:relative;
    margin-left:25px;
    cursor:pointer;
}
.representpeople {
    margin: 0 10px 10px 10px;
    min-height: 590px;
    background-color: #fff;
    width: 280px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 25px 20px 25px 20px;
}
.repreheader, .ctypicturesheader {
    display: flex;
}
.repreheader-text, .ctypicturesheader-text {
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 21px;
    color: #333537;
}
.linkaddrepre {
    position: relative;
    margin-left: auto;
    text-align: center;
    width: 70px;
    height:25px;
}
.linkaddpicture {
    position: relative;
    margin-left: auto;/*510px*/
    text-align: center;
    width: 70px;
    height: 25px;
}
.ongba {
    font-style: normal;
    font-weight: bold;
    font-size: 13px;
    line-height: 20px;
    color: #75778F;
    width: 100%;
}
.repre-name {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: #333537;
    width: 100%;
}
.repre-email, .repre-phone {
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 20px;
    color: #75778F;
    width: 100%;
}
.box-repre {
    display: flex;
    height: 108px;
    flex-wrap: wrap;
    margin: 10px -10px;
    padding: 10px;
}
.box-repre:hover {
    background: #F3F8FF;
}
.repre-tool {
    display:none;
    position: absolute;
    margin: 30px 0 0 225px;
    cursor:pointer;
}
.ctypictures {
    min-width: 310px; /*725px*/
    width: calc(100% - 750px);
    min-height: 590px;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 25px 20px 25px 20px;
    margin-bottom: 10px;
}
.clpicture {
    width: 120px;
    height: 120px;
    cursor: pointer;
    object-fit: cover;
}
.removepicture {
    position: relative;
    margin-left: -30px;
    margin-top: -90px;
    cursor: pointer;
}
.divmorenoti {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 100px;
    /* Foreground */
    background: #FFFFFF;
    /* Drop Shadow_ Popup 2 */
    box-shadow: 2px 4px 6px rgba(210, 213, 221, 0.25);
    border-radius: 3px;
    border-top: 1px solid #E2E3EE;
    cursor:pointer;
}
.areadall {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    color: #1054CC;
}
.noti-header {
    height: 60px;
    padding: 20px;
    border-bottom: 1px solid #E2E3EE;
}
.notiheader-text {
    float: left;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 21px;
}
.item-noti{
    margin:20px 20px 20px 20px;
    display:flex;
}
.text-noti {
    display: flex;
    flex-wrap: wrap;
    margin-left: 16px;
    font-style: normal;
    font-weight: bold;
    font-size: 13px;
    line-height: 140%;
    /* or 18px */
    /* Header, title & Input text */
    color: #333537;
}
.lastday-noti {
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 15px;
    /* Placeholder & Caption */
    color: #AFBCDF;
    margin-top:5px;
}
.dotrednoti {
    min-width: 8px;
    height: 8px;
    background: #DC5B6A;
    position: relative;
    border-radius: 10px;
    margin-left: auto;
    margin-top: 3px;
}
.btnphanquyen {
    position: relative;
    float: right;
    margin-top: -37px;
    color: #fff;
    margin-right: 25px;
    cursor: pointer;
}

.leftstep {
    width: 55px;
    height: auto;
    background: #F0F3F6;
    /* Border & line */
    border: 1px solid #E2E3EE;
    box-sizing: border-box;
    border-radius: 3px 3px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rightstep {
    width: 55px;
    height: auto;
    /* Border & line */
    border: 1px solid #E2E3EE;
    box-sizing: border-box;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
     cursor:pointer;
}
.contentstep {
    width: 695px;
    padding: 20px;
    border-top: 1px solid #E2E3EE;
    border-bottom: 1px solid #E2E3EE;
    box-sizing: border-box;
}
.headerstep {
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 21px;
    /* identical to box height */
    /* Label */
    color: #75778F;
    margin-bottom:20px;
}
.contenttask {
    background: #FFFFFF;
    /* Border & line */
    border: 1px solid #E2E3EE;
    box-sizing: border-box;
    border-radius: 3px;
    padding: 20px;
    margin-bottom:12px;
}
.headertask {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    /* identical to box height */
    /* Label */
    color: #75778F;
    margin-bottom: 20px;
}
.stepitem {
    display: flex;
    margin-bottom: 15px
}
.cellfolder-tool {
    margin-left: 105px;
    margin-top: -145px;
    height: 25px;
    width: 25px;
    text-align: center;
    cursor: pointer;
}
.k-picker-wrap.k-state-default, .k-dropdown-wrap.k-state-default {
    /*background-color: #353FAD !important;
    border-color: #353FAD !important;*/
}
.k-widget .k-select .k-icon {
    vertical-align: -webkit-baseline-middle!important;
}
.k-grid .k-select .k-icon {
    vertical-align: middle !important;
}
.btnfilter{
    width:80px;
    height:37px;
}
.cke_editable {
    /*max-height: 300px;*/
    overflow: auto;
}
.divgroupbtnlist {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -23px;
    float:right;
    height:10px;
}
.clList, .clGantt, .clKanban, .clScheduler, .clGridView, .clListView, .clTable, .clChart, .clDanhsach, .clLuoi {
    margin-left: 20px;
    cursor: pointer
}
h4.modal-title {
    /*font-size: unset !important;*/
    width: 100%;
}
.searchresult-item{
    margin: 20px 0;
}
.searchresult-title {
    
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 130%;
    /* or 23px */
    /* Primary 2 */
    color: #1054CC;
    cursor:pointer;
}
.searchresult-subtitle {
    
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    /* or 157% */
    /* Body */
    color: #4D5052;
}
.detailresult-title {
    
    font-style: normal;
    font-weight: bold;
    font-size: 28px;
    line-height: 33px;
    /* identical to box height */
    /* Header, title & Input text */
    color: #333537;
    margin: 10px 0;
}
.detailresult-subtitle {
    font-size: 18px;
    line-height: 23px;
}
.backtoresult {
    
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    /* identical to box height, or 157% */
    /* Primary 2 */
    color: #1054CC;
}



a:hover, a:focus {
    text-decoration: none;
}

nav {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

    nav ul, nav li {
        outline: 0;
        margin: 0;
        padding: 0;
    }

.cke_editable {
    min-height: 80px !important;
    /*max-height: 300px;*/
    overflow: auto;
    color: #000;
}

.morefunc .dropdown-item{
    padding:0 30px;
    width:unset!important;
    text-align:unset!important;
}
.morefunc .dropdown-item i {
    margin-right:unset!important;
    margin-left: unset!important;
    color: #1054CC!important;
    text-align: unset !important;
    width:1em!important;
}
.morefunc .dropdown-item span{
    margin-left:10px;
}
.highlight-bold{font-weight:bold}
.k-treelist .k-i-expand:before {
    content: "\E014";
}

.k-treelist .k-i-collapse:before {
    content: "\E015";
    color: #1054CC;
}
.k-i-expand, .k-i-collapse, .k-i-none {
    font-size: 13pt !important;
}
.div54176 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 16px;
    /* Background */
    background: #F0F3F6;
    /* Inside Auto Layout */
    flex: none;
    order: 1;
    flex-grow: 0;
    margin: 0px 1px;
    width: 110px;
    height: 22px;
    cursor:pointer;
}
.divoutsideleft {
    border-radius: 3px 0px 0px 3px;
}
.divoutsideright {
    border-radius: 0px 3px 3px 0px;
}
.divact {
    background: #1054CC;
    color:#fff;
}
.kanban-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    width: 333px;
    /* Background */
    background: #F0F3F6;
    border-radius: 3px;
    margin-right: 16px;
    margin-bottom: 16px;
    margin: 10px auto;
}
.kanban-item-text {
    
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 130%;
    /* or 23px */
    /* Header, title & Input text */
    color: #333537;
    /* Inside Auto Layout */
    flex: none;
    flex-grow: 0;
}
.kanban-item-addactivity {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 142px;
    width: 301px;
    height: 38px;
    /* Foreground */
    background: #FFFFFF;
    /* Drop Shadow_ Popup 2 */
    box-shadow: 2px 4px 6px rgba(210, 213, 221, 0.25);
    border-radius: 3px;
    /* Inside Auto Layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;
    margin: 8px 0px;
    cursor:pointer;
}
.kanban-miniitem {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    width: 301px;
    /* Foreground */
    background: #FFFFFF;
    /* Drop Shadow_ Popup 2 */
    box-shadow: 2px 4px 6px rgba(210, 213, 221, 0.25);
    border-radius: 5px;
    /* Inside Auto Layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;
    margin: 8px 0px;
}
.kanban-1285 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px 8px;
    height: 20px;
    /* Background */
    background: #F0F3F6;
    border-radius: 3px;
    /* Inside Auto Layout */
    flex: none;
    flex-grow: 0;
    color:#000;
}
.kanban-1284 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px 8px;
    height: 20px;
    /* Secondary 1 */
    border-radius: 3px;
    /* Inside Auto Layout */
    flex: none;
    flex-grow: 0;
    margin: 0px 4px;
    color: #fff;
}
.kanban-miniitem-img {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    /* Inside Auto Layout */
    flex: none;
    flex-grow: 0;
    margin: 16px 0px;
}
.kanban-miniitem-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 269px;
    height: 40px;
    /* Inside Auto Layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;
}
.kanban-miniitem-divtime {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    height: 37px;
    /* Inside Auto Layout */
    flex: none;
    flex-grow: 0;
}
.divtime-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 120px;
    height: 37px;
    /* Inside Auto Layout */
    flex: none;
    flex-grow: 1;
}
.divtime-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 120px;
    height: 37px;
    /* Inside Auto Layout */
    flex: none;
    flex-grow: 1;
    margin: 0px 20px;
}
.divtime-label {
    width: 120px;
    height: 15px;
    /* Caption */
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 15px;
    /* Label */
    color: #75778F;
    /* Inside Auto Layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;
    margin: 0px 0px;
}
.divtime-text {
    width: 120px;
    height: 22px;
    /* Body 1 - Bold */
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 22px;
    /* identical to box height, or 157% */
    /* Body */
    color: #4D5052;
    /* Inside Auto Layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;
    margin: 0px 0px;
}
.spaddblue {
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 22px;
    /* identical to box height, or 169% */
    /* Primary 2 */
    color: #1054CC;
    /* Inside Auto Layout */
    flex: none;
    margin-left:8px;
}
.dot {
    height: 6px;
    width: 6px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
    margin-right: 5px;
}
.clopen {
    background: #DC5B6A;
}
.clsign {
    background: #F9B663;
}
.clcharge {
    background: #4198D7;
}
.cldoing {
    background: #67DC6C;
}
.clclose {
    background: #E2E3EE;
}
.h4SearchTGL{
    margin-top:10px;
}
.textcompleteHD, .textcompleteVBPL, .textcompleteDP {
    display: none;
}
.textmoreHD, .textmoreVBPL, .textmoreDP {
    text-align: center;
    cursor: pointer
}
.flexalicenter{
    display:flex;
    align-items:center;
}
.threedotfunc {
    height: 35px;
    text-align: center;
    cursor:pointer;
}
.k-i-x {
    margin-top: 6px;
}
.minibtn-imgjob {
    width: 16px;
    height: 16px;
    margin: auto;
    margin-left: 34px;
    margin-right: 0;
}
.minibtn-textjob {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    /* identical to box height, or 157% */
    /* Body */
    color: #1054CC;
    margin-left: 8px;
    padding-top: 1.7px;
}
.divdira {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 200px
}
.divdivo {
    display:none;
    cursor: pointer;
    margin-left: 150px;
    margin-top: 200px;
}
.boxchat {
    display:none;
    width: 352px;
    height: 570px;
    position:absolute;
    top: -1px;
    left:-360px;
    background: #fff;
    border: 1px solid #c8ced3;
    border-radius: 0.25rem;
}
.btnmessall {
    width: 50%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F0F3F6;
    border-radius: 3px 0px 0px 3px;
    color: #000;
    cursor: pointer;
}
.btnmessbus {
    width: 50%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F0F3F6;
    border-radius: 0px 3px 3px 0px;
    color: #000;
    cursor: pointer;
}
.btnmessall.actt, .btnmessbus.actt {
    background: #1054CC;
    color: #fff;
}
.item-peoplemess {
    padding: 20px;
    display: flex;
    cursor:pointer;
}
.item-peoplemess:hover{background: #F3F8FF;}
.boxchat-header {
    height: 61px;
    background: #1054CC;
    border-radius: 4px 4px 0px 0px;
    display:flex;
    align-items:center;
    padding:15px 20px;
}
.item-peopletext {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 22px;
    /* identical to box height, or 157% */
    /* Header, title & Input text */
    color: #333537;
    width:220px;
    overflow:hidden;
}
.item-messtext {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    /* or 157% */
    /* Body */
    color: #4D5052;
    width: 220px;
    overflow:hidden;
}
.dotredmess {
    width: 10px;
    height: 8px;
    background: #DC5B6A;
    border-radius: 20px;
    position: absolute;
    left: 315px;
    top: 20px;
}
.divsearchresult {
    position: absolute;
    display: none;
    z-index: 98;
    background-color: #fff;
    width: 310px;
    height: 400px;
    border: 1px solid #c8ced3;
    border-radius: 0.25rem;
    overflow-y:auto;
}
.searchpeople-item{
    display:flex;
    align-items:center;
    padding:10px 20px;
    cursor:pointer;
}
.searchpeople-item:hover {
    background: #F3F8FF;
}
.searchpeople-item img{
    border-radius: 50em;
    margin-right:15px;
}
.searchpeople-item span{
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 22px;
    color: #333537;
}
.boxchat-content{
    height:450px;
    padding: 30px 25px 50px 20px;
}
.boxchat-textbox {
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-top: 1px solid #E2E3EE;
    padding:20px;
}
.boxchat-textbox input{
    margin-right:10px;
    border:none;
}
.boxchat-textbox img{cursor:pointer}
.dotlv4 {
    width:5px!important;
    height:5px!important;
    background: #1054CC;
    border-radius:20px;
    margin:0 5px 0 -10px;
}
.host-text {
    background: #E3EEFF;
    border-radius: 4px;
    padding: 9px 15px 10px 15px;
    max-width: 208px;
    font-size: 14px;
    line-height: 140%;
    /* identical to box height, or 20px */
    text-align: left;
    /* Body */
    color: #4D5052;
    margin-bottom:5px;
}
.client-text {
    display:flex;
}
.client-text span {
    padding: 9px 15px 10px 15px;
    max-width: 208px;
    background: #F0F3F6;
    border-radius: 4px;
    font-size: 14px;
    line-height: 140%;
    /* identical to box height, or 20px */
    text-align: left;
    /* Body */
    color: #4D5052;
    margin-bottom: 5px;
    margin-left:9px;
}
.moitao {
    color: #DC5B6A;
}
.dangxuly {
    color: #67DC6C;
}
.daxong {
    color: #AFBCDF;
}
.rpbox {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-left: 8px;
}
.rptime {
    font-size: 13px;
    line-height: 15px;
    color: #75778F;
    width: 100%;
    margin-bottom:8px;
}
.rpname {
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: #4D5052;
    width: 100%;
    margin-bottom: 4px;
}
.rpcontent {
    width: 100%;
    font-size: 14px;
    line-height: 22px;
    color: #333537;
    margin-bottom: 8px;
}
.itembusheader{display:flex;margin:10px 20px 0 20px;cursor:pointer;}
.itembusname {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 22px;
    color: #4D5052;
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.itembuscount {
    font-size: 13px;
    line-height: 120%;
    color: #AFBCDF;
}
.dotredmessinbus {
    width: 10px;
    height: 8px;
    background: #DC5B6A;
    border-radius: 20px;
    position: absolute;
    left: 315px;
    top: 72px;
}
.dotredmessinbusgroup {
    width: 10px;
    height: 8px;
    background: #DC5B6A;
    border-radius: 20px;
    position: absolute;
    left: 315px;
    top: 5px;
}
.charttooltip {
    background: #FFFFFF;
}
.chartpercent {
    font-weight: bold;
    font-size: 13px;
    line-height: 120%;
    color: #1054CC;
    margin: 10px;
    width: 25%;
}
.chartnamecty {
    font-size: 13px;
    line-height: 120%;
    color: #75778F;
    margin: 10px;
    width:60%;
}
.chartmoney {
    font-size: 13px;
    line-height: 120%;
    color: #75778F;
    margin: 10px;
    width:15%;
}
img{object-fit:cover}