.smart-style-3 body, body.smart-style-3 {
    letter-spacing: 0.025em;
    color: #555555;
    -webkit-font-smoothing: antialiased;
    font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}
@media (min-width: 679px) {
    #header > :first-child, aside {
        width: 250px;
    }
    #main {
        margin-left: 250px;
    }
    #logo {
        margin-left: 22px;
    }
}

#header {
    background: #ea4781 !important;
    border-bottom: 3px solid #d83375;
}
#content {
    /*height: 490px;*/
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 10px;
}
.smart-style-3 .btn-header > :first-child > a {
    background: none;
    color: #fff !important;
    border: none;
    cursor: pointer !important;
    margin-top: 8px;
}

    .smart-style-3 .btn-header > :first-child > a:active, .smart-style-3 .btn-header > :first-child > a:hover {
        background: none;
        border: none;
        box-shadow: none;
    }

.smart-style-3 span#activity {
    cursor: pointer !important;
    height: 35px;
    width: 35px;
    padding: 0px;
    background:none;
    margin: 6px 0 0;
    position: relative;
    margin-left: 15px
}

#speech-btn {
    position: relative;
}
    #speech-btn #phanhe {
        position: absolute;
    }
#speech-btn .popover {
    display: none;
    top: 42px;
    left: initial;
    width: 210px;
    right: 0;
}
#speech-btn .popover.bottom > .arrow {
    border-bottom: none
}
#speech-btn .popover-content {
    padding:0 !important;
}
#speech-btn .open > div > a {
    background: #a90329 !important;
    border: 1px solid #8B0913 !important;
    color: rgba(255,255,255,.9) !important;
    padding: 0 !important;
}
#speech-btn .open > #phanhe {
    display:block;
}
#speech-btn a.SOM > span {
    background: #9f1f63;
}

#speech-btn a.SCM > span {
    background: #f7adbf;
}

#speech-btn a.HRM > span {
    background: #93c8e7;
}

#speech-btn a.MBM > span {
    background: #455eab;
}

#speech-btn a.RPT > span {
    background: #a0c68c;
}

#speech-btn a.COC > span {
    background: #e7bb5e;
}
.app-shortcuts {
    margin: 0;
    padding: 1rem
}
.app-shortcuts__item {
    padding: 1rem 0;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    transition: background-color .3s;
    text-align: center;
    border: 1px solid #fff;
}
.app-shortcuts__item:hover {
    border:1px solid #ccc;
}

.app-shortcuts__item > span {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50%;
    color: #FFF;
    font-weight: bold !important;
    line-height: 45px !important;
    font-size: 1.5rem;
    text-align: center;
    transition: background-color .5s
}

/*.app-shortcuts__item > small {
    display: block;
    margin-top: .5rem;
    font-size: .95rem;
    color: #9c9c9c;
    transition: color .5s
}*/

.app-shortcuts__helper {
    position: absolute;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    top: 13px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s,-webkit-transform .5s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.menu-item-parent {
    text-transform: capitalize;
}

.table-forum tr td h4 small {
    margin-top: 5px;
}

.table-forum a {
    text-transform: initial;
}

.table-forum tr td h4 {
    font-size: 13px;
}

.popover.bottom {
    margin-top: 6px;
}

.popover.bottom > .arrow:after {
    content: " ";
    top: 1px;
    margin-left: -7px;
    border-top-width: 3px;
    border-bottom-color: #fff;
}

.popover > .arrow:after {
    border-width: 7px;
    content: "";
}

.popover.bottom > .arrow {
    left: initial;
    right: 3px;
}

/*loginuser-control*/
.open .loginuser-control {
    display: block !important;
    -webkit-animation-duration: .4s;
    -moz-animation-duration: .4s;
    -o-animation-duration: .4s;
    animation-duration: .4s;
}
ul.loginuser-control {
    position: absolute;
    border-radius: 6px;
    border-bottom: 2px solid #e1e2e3;
    background: #fefefe;
    top: 100%;
    right: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 4px 0 0 0;
    list-style: none;
    font-size: 13px;
    text-align: left;
    border: 1px solid rgba(0,0,0,.15);
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    background-clip: padding-box;
}
ul.loginuser-control > li > a {
    color: #777779;
    padding: 8px 20px;
    display: block;
    text-decoration: none;
}

ul.loginuser-control > li {
border-bottom: 1px solid #e1e2e3;
}

ul.loginuser-control > li:last-child {
border-bottom: none;
}

ul.loginuser-control > .active > a, ul.loginuser-control > .active > a:hover, ul.loginuser-control > li > a:focus, ul.loginuser-control > li > a:hover{
background: none;
color: #25aae1;
}
/*loginuser-control*/
.smart-style-3 .login-info {
    background: none;
    height: 82px;
    padding: 0 10px 0 25px;
    width: auto;
    border-bottom: none;
}
.login-info a span {
    font-size: 15px;
}
.smart-style-3 .login-info img {
    border: none;
    margin: 0;
    width: 42px;
    height: 42px
}
.smart-style-3 .login-info .avatar {
    width: 42px;
    height: 42px;
    border: 3px solid #fff;
    margin-right: 5px;
    background-image: url('../img/avatars/avatar_default.png');
    background-repeat: no-repeat;
    background-size: 42px 42px;
}

.smart-style-3 .login-info div {
    border-bottom: 1px solid #fff;
    padding-bottom: 5px;
}
.smart-style-3 .login-info a {
    font-weight: bold;
    padding: 5px 0;
}

/*Menu*/
.smart-style-3 aside {
    background: none;
    border-right: none;
}
/*.smart-style-3 nav {
    margin-top: 15px;
}*/
.smart-style-3 nav > ul > li {
    background: none;
    border-bottom: none;
    margin-bottom: 1px;
    position: relative;
}
.smart-style-3 nav > ul > li > a {
    font-weight: 500;
    font-size: 13px;
}
.smart-style-3 nav ul li:hover > a {
    background: #fff !important;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    color: #ee3a80 !important;
}
/*.smart-style-3 nav ul li a:hover i.line {
    background: #ee3a80; 
}*/
/*.smart-style-3 nav ul li a:hover span.title {
    color: #ee3a80;
}*/
.smart-style-3 nav ul li a > span.title {
    margin-left: 15px;
    
}
/*.smart-style-3 nav ul li a > span.number {
    margin-left: 5px;
    top: -8px;
    position: relative;
    border-radius: 8px;
    border-bottom-left-radius: 0;
    background: #ee3a80;
    font-weight: normal;
    min-width: 25px;
    font-size: 10px;
}*/
/*.smart-style-3 nav ul li a > span.number-fix {
    position: absolute;
    top: -1px;
    right: 0px;
}*/
.smart-style-3 nav ul li > span {
    position: absolute;
    top: 0;
    right: 0;
    display:none;
}
.smart-style-3 nav ul li > span > a.iconlink {
    padding-top: 12px;
    background: none !important;
}

nav ul li.active > span {
    display: block;
}
.smart-style-3 nav ul li:hover > span {
    display: block;
}
.smart-style-3 nav ul li span > a.badge {
    margin-top: 10px;
    margin-right: 10px;
    background: #ee3a80;
    color: #fff !important;
}
.smart-style-3 nav ul li span > a.badge:hover {
    background: #d83375 !important;
    border-radius: 10px;
}
nav ul li.active > a:before {
    content: "";
}
nav ul li.loading > a {
    color: #A7A4A5 !important;
}
nav ul li.active > a {
    color: #ee3a80 !important;
    background: #fff !important;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.smart-style-3 nav > ul > li i.line {
    height: 18px;
    width: 5px;
    display: none;
    left: 0;
    position: absolute;
}
.smart-style-3 nav > ul > li.active i.line {
    background: #ee3a80;
}

/*End menu*/
/*Button*/
.btnQuickAcc {
    padding: 17px 15px;
    margin-right: 5px;
}
.btnQuickAcc .btn {
    background: #FEFEFE;
    box-shadow: none;
    border: 1px solid #e1e2e3;
    border-radius: 6px;
    color: #777779;
    font-size: 13px;
    padding: 8px 14px;
    margin-right: 10px;
}

.btnQuickAcc .btn i {
    color: #ee3a80;
    margin-right: 5px;
    font-size: 13px;
}
.btnQuickAcc .btn .caret {
    margin-left: 5px;
}
.smart-style-3 .dropdown-menu {
    border-radius: 6px;
    border-bottom: 2px solid #e1e2e3;
    background: #fefefe;
}
.smart-style-3 .dropdown-menu > li > a {
    color: #777779;
    padding: 8px 20px;
}
.smart-style-3 .dropdown-menu > li{
    border-bottom: 1px solid #e1e2e3;
}
.smart-style-3 .dropdown-menu > li:last-child {
    border-bottom:none;
}
.smart-style-3 .dropdown-menu > .active > a, .smart-style-3 .dropdown-menu > .active > a:hover, .smart-style-3 .dropdown-menu > li > a:focus, .smart-style-3 .dropdown-menu > li > a:hover, .smart-style-3 .tt-suggestion.tt-is-under-cursor {
    background: none;
    color: #25aae1;
    
}
/*End button*/

/*Content box*/
#content .content-box {
    padding-left: 15px;
    padding-right: 25px;
    background: #ffffff;
}
.content-box .mail-item {
    width: 100%;
    display: table;
    padding: 15px 0px;
    border-bottom: 1px solid #e1e2e3;
    font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    animation-duration: 0.5s;
}
.content-box .mail-item h4:hover > a {
    color: #25aae1;
}
.content-box .mail-item h4:hover > small {
    color: #25aae1;
}
.content-box>div.mail-item:last-child {
    border-bottom: none;
}
.content-box .mail-item .col-1 {
    padding: 0;
    display: table;
    vertical-align: middle;
}
.content-box .mail-item .col-2 {
    padding: 0;
    text-align: right;
    color: #a1a1a4;
    height: 50px;
    display: table;
}
.content-box .mail-item .col-2 small {
    display: table-cell;
    vertical-align: middle;
}

.content-box .mail-item .col-2 i {
    color: #25aae1;
}
.mail-item span.avatar {
    float: left;
    margin-right: 15px;
    width: 50px;
    height: 50px;
    background-image: url('../img/avatars/avatar_default.png');
    background-repeat: no-repeat;
    background-size: 50px 50px;
}
.mail-item .avatar img {
    width: 50px;
    height: 50px;
}
.mail-item h4 {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    width: 100%;
}
.mail-item h4 a {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #58585a
}
.mail-item h4 small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    margin-top: 10px;
    color: #a1a1a4;
}
.mail-item h4 .icon-group {
    display: block;
    margin-top: 10px;
    font-size: 18px;
    color: #9a9c9e;
}
.content-box .active h4 a {
    font-weight: bold;
    color: #3c3c3c;
}
.content-box .active img.avatar {
    /*border: 2px solid #ee3a80;*/
}
.content-box .active .col-2 {
    color: #58585a;
}
.paging {
    padding: 15px 0px;
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    animation-duration: 0.5s;
}
    .paging .btn {
        background: #d1d2d4;
        color: #ffffff;
    }
        .paging .btn.focus, .paging .btn:focus, .paging .btn:hover {
            color: #ffffff;
            background: #939598;
            text-decoration: none;
        }
.paging .paging-btn {
    padding-left: 60px;
    color: #fff;
        
}
.paging p{
margin: 0;
}
/*End content box*/
/*Footer*/
.page-footer {
    background: #f2f2f2 !important;
    border-top: none;
    color: #333333 !important;
    height: 50px;
    padding-top: 0;
}
#footer-hr {
    width: 100%;
    position: absolute;
    display: block;
    bottom: 0;
    height: 20px;
}
#footer-hr .hr-s1 > div {
    width: 50%;
    float: left;
    height: 8px;
}
#footer-hr .hr-s1 .color-item {
    height: 8px;
    float: left;
    display: block;
    width: 25%;
}
    #footer-hr .hr-s2 {
        background: #323231;
        display: block;
        width: 100%;
        height: 20px;
    }
/*End footer*/
.open > .dropdown-menu {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: .4s;
    -moz-animation-duration: .4s;
    -o-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both
}

/*keepingcontent*/
#modalKeeping .item {
    margin-bottom: 10px;
}
#modalKeeping .item label {
    margin-right: 10px;
    width: 150px;
}
#modalKeeping .item .TimeCheckIn {
    font-size: 15px;
    font-weight: bold;
    color: #ee3a80;
    letter-spacing: 0.1em;
}

/*keepingcontent*/

#div-notes .item-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 70%;
    float: left;
}
#div-notes .item-date {
    float: left;
    width: 20%;
    text-align: right;
}
#div-notes .item-del {
    float: left;
    width: 5%;
    padding-left: 5px;
}
.fullnote {
    height: auto !important;
    white-space: normal !important;
}
.divMessageBox {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.6);
    z-index: 100000
}

.MessageBoxContainer {
    top: 35%;
    color: #fff;
    position: relative;
    width: 100%;
    background-color: #232323;
    background-color: rgba(0,0,0,.8);
    padding: 20px
}

.MessageBoxMiddle {
    position: relative;
    left: 20%;
    width: 60%
}

    .MessageBoxMiddle .MsgTitle {
        letter-spacing: -1px;
        font-size: 24px;
        font-weight: 300
    }

    .MessageBoxMiddle .pText {
        font-size: 13px
    }

.MessageBoxContainer input, .MessageBoxContainer select {
    width: 50%;
    padding: 5px
}

.MessageBoxButtonSection {
    width: 100%;
    height: 30px
}

.MessageBoxButtonSection button {
    float: right;
    margin-right: 7px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 14px;
    font-weight: 700
}
/*Custom modal*/
.modal-cus .modal-header {
    padding: 15px;
    /*border-bottom: 1px solid #e5e5e5;
    background: #ee3e80;
    color: #fff;*/
}
.modal-cus .close {
    /*line-height: 1;*/
    width: 22px;
    height: 22px;
    background: #9a9a9a !important;
    border-radius: 50%;
    color: #FFF;
    text-shadow: none;
    opacity: 1;
    filter: alpha(opacity=1);
}
.modal-cus .close img{
    position:relative;
    top:-3px;
}
    /*End Custom Modal*/
    @media (max-width:767px) {
        .btnQuickAcc {
        padding: 20px 3px;
    }
    .btnQuickAcc .btn {
        margin-bottom: 3px;
    }
    #content .content-box {
        padding-left: 10px;
        padding-right: 10px;
    }
    .mail-item img.avatar {
        margin-right: 10px;
    }
    .mail-item h4 {
        padding-left: 70px;
    }
    .content-box .mail-item .col-2 {
        text-align: left;
        padding-left: 70px;
    }
    .content-box .mail-item {
        padding: 10px 0px;
    }
    .mail-item h4 small {
        margin-top: 6px;
    }
    .mail-item h4 .icon-group {
        margin-top: 6px;
    }
}
.cc-btn-default {
    color: #777779;
    background-color: #FEFEFE;
    border-color: #e1e2e3;
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2);
    box-shadow: 0 2px 2px rgba(0,0,0,.2);
    font-size: 15px;
}
.cc-btn-default:focus, .cc-btn-default:active, .cc-btn-default:hover {
    /*color: #fff;
    background-color: #ca2865;
    border-color: #ca2865;*/
    box-shadow: 0 1px 3px 0 rgba(60,64,67,0.302), 0 4px 8px 3px rgba(60,64,67,0.149);
    background-color: #fafafb;
}

/*box loading*/
.loading-item{
    width: 100%;
    display: table;
    padding: 15px 0px;
}
.loading-item .col-1 {
    padding: 0;
    display: table;
    vertical-align: middle;
}
.loading-item .col-2 {
    padding: 0;
    text-align: right;
    color: #a1a1a4;
    height: 50px;
    display: table;
}
.loading-item span.avatar {
    float: left;
    margin-right: 15px;
    width: 50px;
    height: 50px;
    background-color:#ccc;
    border-radius:50%;
}

.loading-item h4 {
display: table-cell;
vertical-align: middle;
height: 100%;
width: 100%;
}

.loading-item h4 span {
    display: block;
    height: 14px;
    background-color: #ccc;
}

.loading-item h4 small {
    display: block;
    height: 12px;
    margin-top: 10px;
    background-color: #ccc;
}
.loading-item .col-2 {
padding: 0;
text-align: right;
height: 50px;
display: table;
}
.loading-item .col-2 span {
    display: table-cell;
    height: 12px;
    vertical-align: middle;
}
.loading-item .col-2 span small {
    height: 12px;
    background-color: #ccc;
    display: inline-block;
    width: 115px;
}
@keyframes placeHolderShimmer {
    0% {
        background-position: -468px 0
    }

    100% {
        background-position: 468px 0
    }
}

.animated-background {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 1000px 50px;
    height: 50px;
    position: relative;
}
/*end box loading*/
.scrollbar {
    height: 100%;
    position: relative;
}

.scrollbar__container {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.scrollbar__track {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}

.scrollbar__handle {
    width: 100%;
    min-height: 10px;
    position: absolute;
    top: 0;
}
.scrollbar {
    /*padding-right: 15px;*/
}

.scrollbar__track {
    width: 10px;
}

.scrollbar__handle {
    background-color: gray;
    opacity: 0;
}

.scrollbar:hover .scrollbar__handle {
    opacity: 0.5;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.scrollbar .scrollbar__handle:hover, .scrollbar_state_move .scrollbar__handle {
    opacity: 1;
}

.scrollbar__track {
    background-color: #eee;
}
.scrollbar_mode_mobile .scrollbar__container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/*end scroll*/