@import url('../fonts/NanumSquareRound/nanumsquareround.min.css');

@-moz-document url-prefix() {
  .cover-bar {
    width: 20px !important;
  }
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Helvetica Neuel Roman', sans-serif !important;
}
html,
body {
    height: 100%;
    margin: 0 !important;
    color: #1f1f1f;
    background-color: #F5F7FB;
}
body.skin-purple-light{
    font-family: 'Helvetica Neuel Roman', sans-serif;
    /*font-family: 'Open Sans', sans-serif;*/
    letter-spacing: 0.2px;
    color: #101320;
}
body.skin-purple-light h1
{
    font-size: 18px;
    font-family: 'Helvetica Neuel Md', sans-serif;
    /*font-family: 'Montserrat', sans-serif;*/
    color: #333333;
    /*font-weight: 700;*/
    margin-top: 4px;
}
body.skin-purple-light h2
{
    font-size: 18px;
    font-family: 'Helvetica Neuel Md', sans-serif;
    /*font-family: 'Montserrat', sans-serif;*/
    color: #2D3144;
    /*font-weight: 700;*/
    margin-top: 0px;
}
body.skin-purple-light h3
{
    font-size: 14px;
    font-family: 'Helvetica Neuel Md', sans-serif;
    /*font-family: 'Montserrat', sans-serif;*/
    color: #2D3144;
    /*font-weight: 600;*/
}
body.skin-purple-light label{
    font-size: 12px;
    font-family: 'Helvetica Neuel Roman', sans-serif;
    /*font-family: 'Montserrat', sans-serif;*/
    /*color: #575A69;*/
    /*font-weight: 600;*/
    color: #333333;
}
label span.required{
    color: red;
}
div.help-block {
    word-wrap: break-word;
}
.datepicker{
    z-index: 9999 !important;  
}
.navbar-form .radio label{
    font-size: 13px;
}
.small-text{
    font-size: 12px;
    color: #81838F;
}
.white-space-normal{
    white-space: normal;
}
.main-preloader {
    position: fixed; 
    left: 0; top: 0; 
    z-index: 9994; 
    width: 100%; 
    height: 100%; 
    overflow: visible; 
    background: rgba(0,0,0,0.3)  url(../images/witty_preloader.gif) no-repeat center center;
    display: none;
}
.suprema-preloader {
    position: absolute;
    z-index: 9994;
    background-color: rgba(255, 255, 255, 0.9);
    margin: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    transition: opacity 0.3s;
    /*position: fixed; 
    left: 0; top: 0; 
    z-index: 9994; 
    width: 100%; 
    height: 100%; 
    overflow: visible; 
    background: rgba(0,0,0,0.3)  url(../images/preloader-common.gif) no-repeat center center;
    display: none;
    background-size: 180px;*/
}
.ant-time-picker-input{
    font-family: 'Helvetica Neuel Roman', sans-serif !important;
    font-weight: 500;
}
.ant-input{
    font-family: 'Helvetica Neuel Roman', sans-serif !important;
    font-weight: 500;
}
.btn{
    font-family: 'Helvetica Neuel Roman', sans-serif;
    font-weight: 500;
    /*font-family: 'Montserrat', sans-serif;*/
}
.login-page, .register-page{
    /*background: #fdfbfa;*/
    background: #F5F7FB;
}
.bdr-rad4{
    border-radius: 4px;
}
.login-box .demo-credentials .display-table{
    display: table;
    width: 100%;
    border: 1px solid #ccc;
}
.login-box .demo-credentials .display-table > div:first-child{
    border-right: 1px solid #ccc;
}
.login-box .demo-credentials .display-table > div{
    display: table-cell;
    vertical-align: middle;
    padding: 5px;
}
.login-box .demo-credentials .display-table > div > div:first-child{
    margin-bottom: 5px;
}
.login-box .demo-credentials .display-table > div > div:first-child code{
    font-weight: bold;
    text-transform: capitalize;
}
.login-box .demo-credentials .display-table > div code{    
    color: inherit;
    background-color: inherit;
}
.login-box h1, .signin-box h1{
    margin-top: 20px;
    margin-bottom: 10px;
    color: #666;
}
.signin-box h1{
        margin-bottom: 50px;
}
.login-box .login-logo img{
    width: 100%;
    float: right;
}
.login-box .login-logo{
    height: 10em;
    display: flex;
    align-items: center;
    vertical-align: middle;
}

.login-box, .register-box{
    width: 50%;
    margin: 10% auto;
}
.signin-box{
    margin: 3% auto;
    width: 80%;
}
.signin-box .witty-logo{
    background: url(/images/WIT_HR_Logo_2.png);
    background-repeat: no-repeat;
    height: 100px;
    width: 200px;
}

.login-box-body, .register-box-body{
    border-left: 1px solid #cecfce;
    background: transparent;
    padding: 10px 30px 30px 30px;
}

@media(max-width:992px){
    .login-box-body, .register-box-body{
        border-left: none;
    }
}

@media(max-width:768px){
    .login-box, .register-box{
        width: 100%;
    }
    .signin-box .witty-logo{
        margin: 0 auto;
        height: 60px;
        margin-top: 10%;
    }

    .signin-box .signin-box-body{
        width: 100%;
    }
    .signin-box .signin-box-body h1{
            font-size: 28px;
    }

    .login-box .login-logo{
        height: auto;
        margin: 0 auto;
        display: table;
    }
    .login-box .login-logo img{
        width: 100%;
    }
    .login-box-body, .register-box-body{
        border-left: none;
    }
}
.signin-box-body{
    width: 30%;
    margin: 0 auto;
}
.login-box-body input[type=text], .login-box-body input[type=password],
.signin-box-body input[type=text], .signin-box-body input[type=password]
{
    height: 44px;
}
.login-box-body button,
.signin-box-body button{
    padding: 12px !important;
    font-weight: normal;
}
.login-box-body .field-loginform-rememberme, .login-box-body .field-loginform-rememberme .checkbox{
    margin: 0;
}
.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap > .container {
    padding: 70px 15px 20px;
}

.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}


.timeline-container > ul > li.time-label > label,
.timeline-item > div.timeline-body > div > div > label > a,
.timeline-item > div.timeline-body > div > div > label > span,
.dump-list > div > div.col-md-3 > label > span.el-checkbox__label{
    font-family: 'Helvetica Neuel Roman', sans-serif !important;
    font-weight: normal !important;
}
#vue-app > div > section > div > div > div.dump-list > div > div.col-md-9 > div > label > span{
    font-family: 'Helvetica Neuel Roman', sans-serif !important;
    font-weight: 400 !important;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding: 15px;
    border: none;
}

@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 15px;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
}

.nav > li > form > button.logout:focus {
    outline: none;
}

.notifications-menu i{
    color: #922b87;
}

.skin-purple-light.dark-header .notifications-menu i{
    color: #fff;
}

.layout-top-nav.skin-purple-light .main-header .navbar, 
.layout-top-nav.skin-purple-light .main-header .logo{
    background-color: #fff;
    padding: 0px 15px 0px 40px;
}
.skin-purple-light .main-header .logo
{
    color: #000 !important;
}
.layout-top-nav .main-header #navbar-search-input.form-control{
    border-color: #922b87;
}
.layout-top-nav.skin-purple-light .content-wrapper{
    background-color: #F7F6FC; /*#F8F8F7;*/
}
.layout-top-nav.skin-purple-light .box{
    box-shadow: none;
}
.layout-top-nav.skin-purple-light .main-header .navbar .nav > li > a{
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 15px;
    padding-bottom: 13px;
    border-bottom: 0px solid #0f0426;
    color: #101320 !important;
    font-size: 20px;
}
.layout-top-nav.skin-purple-light .main-header .navbar .nav > li > a:hover, 
.layout-top-nav.skin-purple-light .main-header .navbar .nav > li > a:focus
{
    border-bottom: 2px solid #fff;
    color: #101320 !important;
}
.notifications-menu .caret, .no-caret .caret{
    display: none;
}
.navbar-nav>.notifications-menu>.dropdown-menu>li.menu ul, .navbar-nav>.user-menu>.dropdown-menu{
    max-height: 200px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: hidden;
}
.navbar-nav>.user-menu>.dropdown-menu>li.header{
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background-color: #ffffff;
    padding: 7px 10px;
    border-bottom: 1px solid #f4f4f4;
    color: #444444;
    font-size: 14px;
}
.navbar-nav>.notifications-menu>.dropdown-menu>li.menu ul>li>a, .navbar-nav>.user-menu>.dropdown-menu>li>a{
    color: #444444;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px;
    display: block;
    white-space: nowrap;
    border-bottom: 1px solid #f4f4f4;
}
.main-header{
    box-shadow: 0 1px 0 #4d4d4d inset, 0 2px 3px rgba(0,0,0,0.25);
}
.sidebar-account a{
    color: #fff;
    padding: 5px;
}
.sidebar-account a i{
    margin-right: 10px;
}
.navbar-menu .dropdown-submenu{
    position: relative;
    min-width: 180px;
}
.navbar-menu .dropdown-submenu:hover> ul{
    display: block;
}
.navbar-menu .dropdown-submenu> ul{
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    box-shadow: none;
    border-color: #eee;
    position: absolute;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 1px 12px rgba(0, 0, 0, .175);
}
.navbar-menu .dropdown-submenu> ul>li>a:hover {
    background-color: #e1e3e9;
    color: #333;
}
.navbar-menu .dropdown-submenu> ul > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #777;
    white-space: nowrap;
}
.navbar-menu .badge{
    position: absolute;
    right: 15px;
    margin-top: 1px;
}
.dropdown-submenu:hover>a:after {
    border-left-color: #ffffff;
}
.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
}
#qck-select-project .dropdown-menu
{
    width: 300px;
    top:-20px;
}
.table.table-no-border>tbody>tr>td{
    border-top: none;
    font-size: 14px;
}
.table .image-thumbnail{
    width: 30px;
    height: 30px;
    overflow: hidden;
}
.table .image-thumbnail img{
    max-width: 100%;
}
/* .sidebar .sidebar-menu>li>a{
    padding: 8px 5px 8px 15px;
} */
.sidebar-toggle{
    position: absolute;
    top: 0;
    left: 0;
}
.layout-top-nav .alert-danger.alert-danger-light{
    color: #a94442 !important;
    background-color: #f2dede !important;
    border-color: #ebccd1;
}
.bg-light-gray{
    color: #000;
    background-color: #F5F5F5 !important;
}
.layout-top-nav .alert a{
    color: #3c8dbc;
    text-decoration: none;
}
.layout-top-nav .alert a.btn{
    color: #fff;
}
.layout-top-nav textarea{
    padding: 5px;
    border-radius: 4px;
}
.wallPost .comment-icon{
    /*margin-left: 5px;*/
    color: #ADADAD;
    font-size: 11px;
}
.wallPost a.comment-read{
    margin-left: 5px;
    font-size: 11px;
    color: #ADADAD;
}
.wallPost .MarkasRead-button{
    margin-left: 15px;
    cursor: pointer;
    font-size: 11px;
}
.wallPost-comment, .wallPost-read{
    display: inline;
}
.wallPost-comment a.showCommentArea{
    font-size: 11px;
    cursor: pointer;
}
.wallPost .post-time{
    font-size:11px; 
    color: #ADADAD; 
    margin-left: 15px;
}
.wallPost .commentDiv{
    margin-bottom: 10px;
    background: #fff;
    border-radius: 4px;
    padding: 10px;
    font-size: 13px;
}
.wallPost .comment-time{
    font-size:11px; 
    color: #ADADAD; 
}
.wallPost .myComment .myComment-area{
    padding: 10px;
}
.wallPost .myComment textarea{
    width: 100%;
    font-size: 14px;
    height: 50px;
}
.wallPost .comments-load{
    font-size: 11px;
    /*margin-bottom: 10px;*/
    cursor: pointer;
    padding: 5px 5px;
    /*border-top: 1px solid #EEE;*/
}
.wallPost .editButton, .wallPost .deleteButton{
    margin-right: 10px;
}
.wallPost .editButton a, .wallPost .deleteCommentButton, .load_more-button{
    cursor: pointer;
}
#timeDiv h2{
    margin-top: 0;
}
#allTimesheet
{
    margin-top: 20px;
}
.all-timesheets
{
    border-bottom: 10px; 
    border-color: white;
}
.all-timesheets .saveButton 
{
    padding: 1px 5px !important;
}
.all-timesheets img, #clockedInTable img
{
    width: 100%;
    height: auto;
    margin-bottom:5px;
}
.all-timesheets .clock-range-edit input{
    height: 20px; 
    width: 80px;
    font-size: 11px; 
    display: inline;
}
.timesheet-notes textarea{
    margin-left: 42%; 
    width: 45%; 
    margin-bottom: 5px;
    height: 50px;
}
#timeSheetsTable table th
{
    border-bottom: 1px solid #f4f4f4;
}
.btn.btn-white {
    background-color: #fff;
    color: #444;
    border-color: #ddd;
}
.btn.btn-empty {
    color: #000;
    background: transparent;
    border: 0;
}
.btn-empty:hover, .btn-empty:focus, .btn-empty:active{
    color: #262261!important;
    border-color: unset !important;
}
.layout-top-nav .select2-container .select2-selection--single .select2-selection__rendered{
    margin-top: 0;
}
#clockedInTable{
    margin-top: 10px;
}
#calendar table .products-list .product-info {
    margin-left: 0px;
}
#calendar table .calendar-employee-position{
    font-size: 12px;
}
#calendar table li{
    list-style: none;
}

/*colors 
pending #F0AB4C, timeclock #0CAFEC, confirmed #8F8F8F*/
.schedule-status-filter.sched-request > .el-checkbox__input
> .el-checkbox__inner{
    border-color: #F0AB4C;
}

.schedule-status-filter.sched-request > .el-checkbox__input.is-checked
> .el-checkbox__inner{
    background-color: #F0AB4C;
    border-color: #F0AB4C;
}

.schedule-status-filter.sched-request > .el-checkbox__label{
    color: #F0AB4C !important;
}

/* confirmed */
.schedule-status-filter.sched-confirmed > .el-checkbox__input
> .el-checkbox__inner{
    border-color: #8F8F8F;
}

.schedule-status-filter.sched-confirmed > .el-checkbox__input.is-checked
> .el-checkbox__inner{
    background-color: #8F8F8F;
    border-color: #8F8F8F;
}

.schedule-status-filter.sched-confirmed > .el-checkbox__label{
    color: #8F8F8F !important;
}

/* timeclock */
.schedule-status-filter.sched-timeclock > .el-checkbox__input
> .el-checkbox__inner{
    border-color: #0CAFEC;
}

.schedule-status-filter.sched-timeclock > .el-checkbox__input.is-checked
> .el-checkbox__inner{
    background-color: #0CAFEC;
    border-color: #0CAFEC;
}

.schedule-status-filter.sched-timeclock > .el-checkbox__label{
    color: #0CAFEC !important;
}


/* overtime */
.schedule-status-filter.sched-overtime > .el-checkbox__input
> .el-checkbox__inner{
    border-color: #746bd6;
}

.schedule-status-filter.sched-overtime > .el-checkbox__input.is-checked
> .el-checkbox__inner{
    background-color: #746bd6;
    border-color: #746bd6;
}

.schedule-status-filter.sched-overtime > .el-checkbox__label{
    color: #746bd6 !important;
}

/* late */
.schedule-status-filter.sched-late > .el-checkbox__input
> .el-checkbox__inner{
    border-color: #df363b;
}

.schedule-status-filter.sched-late > .el-checkbox__input.is-checked
> .el-checkbox__inner{
    background-color: #df363b;
    border-color: #df363b;
}

.schedule-status-filter.sched-late > .el-checkbox__label{
    color: #df363b !important;
}

/* early_out */
.schedule-status-filter.sched-earlyout > .el-checkbox__input
> .el-checkbox__inner{
    border-color: #ea8800;
}

.schedule-status-filter.sched-earlyout > .el-checkbox__input.is-checked
> .el-checkbox__inner{
    background-color: #ea8800;
    border-color: #ea8800;
}

.schedule-status-filter.sched-earlyout > .el-checkbox__label{
    color: #ea8800 !important;
}

.calendar-cell-details.sched-timeclock{
    color: #746bd6 !important;
}

.calendar-cell-details.sched-request{
    color: #F0AB4C !important;
}

.calendar-cell-details.sched-confirmed{
    color: #8F8F8F !important;
}



.filter-employee-tag,
.filter-employee-tag-title{
    display: inline-grid;
    vertical-align: middle;
}
.filter-employee-tag-title{
    margin-right: 10px;
}
.filter-employee-tag{
    background-color: #fff;
    border: 2px solid #D8E1EE;
    border-radius: 5px;
    padding: 0px 5px;
    width: fit-content;
}
.filter-employee-tag > .name{
    font-weight: bold;
}
.filter-employee-tag > .info{
    font-size: 90%;
}
.timesheet-filter-tag{
    background-color: #fff;
    border: 1px solid #A5B8C9;
    border-radius: 3px;
    color: #343434;
    display: inline-block;
    margin: 0px 3px;
    padding: 2px 10px;
    vertical-align: top;
    width: fit-content;
}
.tag-employee-details{
    font-size: 85% !important;
}
.calendar-day-saturday{
    color: #2F65BD !important;
}
.calendar-day-sunday{
    color: #DF363B !important;
}
.no-padding-left{
    padding-left: 0;
}
.grid-container .summary{
    display: none;
}
.grid-container .dataTables_filter{
    margin-bottom: 20px;
}
.grid-container .dataTables_wrapper .dataTables_filter input{
    height: 34px;
    width: 250px;
    margin-left: 0px;
    font-size: 14px;
}
#budget-form table.table-bordered td:last-child{
    border-right-width: 1px;
}
.detail-view th{
    width: 35%;
}
.grid-view .summary{
    display: none;
}
.grid-view{
    margin-top: 10px;
}
.modal.bootstrap-dialog .modal-header{  
    background-color: #666;
    border-radius: 0;
}
.modal.bootstrap-dialog .modal-footer .btn-warning{  
    background-color: #666;
    border-color: #555;
}
.modal.bootstrap-dialog .modal-footer .btn-warning:hover{
    background-color: #555;
}
#attendance_filter input{
    width: 300px;
}
table.kv-grid-table.table-bordered.dataTable{
    border-collapse: collapse; 
}
.payroll-multipliers .row label{
    width: 100%;
    text-align: left;
    padding: 0;
    font-size: 90%
}
table.kv-grid-table.dataTable thead > tr > th{
    padding: 8px;
    font-family: 'Helvetica Neuel Md', sans-serif;
    /*font-family: 'Montserrat', sans-serif;*/
}
#timesheet-grid table td,#timesheet-grid table th{
    font-size: 12px;
}
#timesheetreport-grid table td,#timesheetreport-grid table th{
    font-size: 12px;
    width: 100px;
}
#payroll-attendance-grid td, #forecast-grid td{
    font-size: 12px;
}
.separator-icon::after{
    content: "|";
    cursor: default;
    position: relative; 
    top: 1px;
}
td.employee_count::before{
    content: "Team Members: ";
}
.layout-top-nav .input-group .input-group-addon{
    background-color: #eee;
}

.wallPost .image-url-preview{
    max-width: 100%;
}
.notifications-menu li.dropdown-header{
    padding: 0 !important;
}
.notifications-menu li.dropdown-header > a{
    padding: 5px;
}

.notifications-menu .dropdown-header img{
    width:30px; height:30px; border-radius: 30px; margin-right: 5px;
}
.notifications-menu .dropdown-header span{
    white-space: initial;
    font-size: 13px;
}
.notifications-menu .dropdown-header .time{
    font-size: 10px;
}
.site-notification .notifications-menu li.dropdown-header > a{
    display: block;
}
.site-notification .box.box-solid.alert{
  padding: 0;  
  margin-bottom: 1px;
  border-bottom: 1px solid #EEE;
}

/* Site Index */

.content-wrapper .site-index, .content-wrapper .schedule-calendar, 
.employee-view, .employee-create, .settings_section, .site_section,
.report_section, .payroll_section, .org_settings, .ticket-view, 
.account-list, .search-view, .board-view, .todo-view
{
    /*padding: 15px;*/
    color: #1f1f1f;
    /*background-color: #fcf8f4 !important;*/
    padding-bottom: 40px;
}
.content-wrapper .report_section,
.content-wrapper #loan-container, .content-wrapper .loan-management{
    height: 100%;
}
#wallmessage
{
    margin-bottom: 15px;
}

#wallmessage textarea, .myComment textarea.textareaComment
{
    width: 100%;
    border: none;
    background-color: #fff !important;
    height: 50px;
    border: 1px solid #F5F5F5;
    border-radius: 4px;
}
#wallmessage textarea
{
    height: 150px !important;
    padding: 10px 20px;
    margin-bottom: 10px;
}
#wallmessage textarea::-webkit-input-placeholder
{
    font-size: 24px;   
    color: #353535;
    font-weight: lighter;
    margin-top: -10px;
    line-height: 1;
    /*padding: 10px 20px;*/
}
#wallmessage textarea::-moz-placeholder
{
    font-size: 24px;   
}
#wallmessage textarea:-ms-input-placeholder
{
    font-size: 24px;   
}
.btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, 
.btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, 
.btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus{
    background-color: #262261;
    border-color: transparent;
}

.site.color-primary
{
    color: #262261;
}

.btn.btn-primary
{
    background-color: #262261;
    font-size: 14px;
    color: #fff;
    /*padding: 6px 12px !important;*/
    border-color: transparent;
}
.btn.btn-primary:hover{
    background-color: transparent;
    color: #262261;
    border-color: #262261;
}

.btn-group .btn-primary.btn-no-fill:first-child:hover{
    background-color: transparent;
    color: #262261;
    border-color: #262261;

}
.btn-primary.btn-no-fill{
    background-color: transparent;
    color: #262261;
    border-color: #262261;
}
.btn-primary.btn-no-fill:hover{
    background-color: #262261;
    color: #fff;
    border-color: transparent;
}
.btn-group .btn-primary.btn-no-fill:first-child{
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; 
}
.btn-group .btn-primary.btn-no-fill.dropdown-toggle{
    border-left: none;
    padding: 5px;
}
#wallmessage .controls p
{
    font-weight: 600;
    font-size:16px;
}

#wall_messages-div
{
    padding: 0px 0px;
}
#wallmessage .box
{
    background-color: transparent !important;
}

.csm-box
{
    background-color: #fcfafb;
}
.csm-wallbox
{
    background-color: #fff !important;
    box-shadow: 3px 3px 8px #EEE !important;
    border-radius: 4px !important;
    padding: 0px !important;
    border: 0px;
}
.csm-wallbox table 
{
    margin-bottom: 0px !important;
}
.csm-wallbox table tr td
{
    border: none !important;
}
.cms-wallImg
{
    width:50px;
}
.circle-avatar{
    /* make it responsive */
    max-width: 100%;
    width:100%;
    height:auto;
    display:block;
    padding-top:100%; /* div height to be the same as width*/
    border-radius:50%; /* make it a cirkle */
    background-position-y: center; /* Centering on image`s center*/
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: cover; /* it makes the clue thing, takes smaller dimention to fill div */
    margin: 0 auto; /* it is optional, for making this div centered in parent*/
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:url(http://hr.wittyly.com/images/employee/no-image-user.png);
    background-color: #DCDCDC;
}
.csm-wallbox  .lead
{
    font-size: 16px;
    font-weight: 600;
    padding-top: 14px;
    padding-left: 24px;
    margin-bottom: 0px !important;
}
.csm-wallbox .wallmessage-text
{
    margin-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
    font-size: 14px;
}
.csm-wallbox .commentread_container
{
    border-top: 1px solid #f0f0f0 !important;
    padding: 8px 24px;
}
.csm-wallbox .commentlist_container
{
    background: #f9f4fc;
    padding-left: 24px;
    padding-right: 24px;
}
.csm-wallbox p.comment_message
{
    font-size: 16px;
}
.csm-wallbox .wallPost
{
    padding-top: 12px;
}
#timeDiv h2
{
    font-weight: bold;
    margin:0px !important;
    font-size: 48px;
}
#timeDiv p
{
    margin:0px !important;
}
.left_side .box
{
    background-color: transparent !important;
    border-top: 1px solid #f0f0f0 !important; 
    margin-bottom: 10px;
}
.left_side .box h4
{
    font-size: 16px;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 25px;
    text-transform: uppercase;
    color: #1f1f1f;
}
.left_side .box-body
{
    padding: 0px !important;
}
#lefttop .box, #timeClockDiv .box
{
    border-top: none !important;
}
#lefttop .box
{
    margin-bottom: 10px;
}
#timeClockDiv .box-body
{
    padding-top: 0px !important;
}
#seeAllList .panel-default
{
    border: none !important;
    margin-bottom: 0px !important;
}
#seeAllList .modal-body
{
    padding: 0px 15px !important;
}
#seeAllList .modal-footer
{
    border-top-color: #f4f4f4 !important;    
    padding: 25px 30px 20px !important;
}
#seeAllList table tr td.image-thumbnail
{
    padding: 10px 10px 10px 30px!important;
    width: 45px;
}
#seeAllList table tr td.image-thumbnail .img_avatar
{
    width: 35px;
}
#seeAllList table tr td.timeTd
{
    padding: 10px 30px 10px 0px!important;
}
#seeAllList table tr td
{
    vertical-align: middle !important;
}
#seeAllList #employeeAllList
{
    max-height: 300px;
    overflow-y: auto;
    padding: 0px !important;
}
table tr td.online .fa
{
    font-size: 10px !important;
    color: #4cb944;
}
#birthday_anniversary
{
    border-top: 1px solid #f0f0f0 !important;
    padding-top: 30px;
}
#birthday_anniversary ul.nav li a
{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 0px !important; 
    text-transform: uppercase;
    color: #1f1f1f;
}
#birthday_anniversary  .nav-tabs
{
    border-bottom: none !important;
}
#birthday_anniversary .nav-tabs > li.active > a, 
#birthday_anniversary .nav-tabs > li.active > a:hover, 
#birthday_anniversary .nav-tabs > li.active > a:focus
{
    color: #3c8dbc !important;
    border: none !important;
    border-bottom: 2px solid #3c8dbc !important;
    background-color: transparent;
}
#birthday_anniversary .nav-tabs > li > a, 
#birthday_anniversary .nav-tabs > li > a, 
#birthday_anniversary .nav-tabs > li > a
{
    color: #1f1f1f !important;
}
#birthday_anniversary .fiestaDiv
{
    background: url(../images/withr_fiestabanner.png);
    height: 80px;
    background-size: contain;
    background-repeat: repeat-x;
    margin-bottom: 0px !important;
}
#birthday_anniversary .box, #birthday_anniversary .box table tr
{
    background: url(../images/withr_fiestabg.png);
    background-size: 100px;
    background-repeat: repeat-x;
    margin-top: -30px;    
}
#birthday_anniversary .box table
{
    margin-top: 30px;
}
#birthday_anniversary .box table tr
{
    background-repeat: repeat !important;
}
#birthday_anniversary .box table tr.tdSeeAll
{
    background: none !important;
}
#birthday_anniversary .box-body
{
    padding-top: 40px;
}
#birthday_anniversary .partyDiv
{
    width:40px;
    float:left;
}
#birthday_anniversary ul
{
    float: left;
}
#birthday_anniversary .tab-content
{
    float: left;   
    width: 100%;
}
#birthday_anniversary .img
{
    width: 95%;
}
#UpcomingShiftsDiv table tr td h3
{
    margin: 0px;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}
#UpcomingShiftsDiv table tr td
{
    padding-top: 0px !important;
    padding-bottom: 30px;
}
#UpcomingShiftsDiv table tr td h4
{
    margin-top: 0px !important;
    text-align: center;
    font-weight: 500 !important;
    font-size: 14px !important;
    margin-bottom: 50px !important;
}
#UpcomingShiftsDiv table tr td p
{
    margin-bottom: 0px !important;
    text-align: center;
    font-size: 12px;
}
#UpcomingShiftsDiv table tr td
{
    border: 1px solid #F0F0F0;
    border-top: 2px solid #F0F0F0 !important;
    border-bottom: none !important;
}
#UpcomingShiftsDiv table tr td:last-child
{
    border-right: none !important;
}
#UpcomingShiftsDiv table tr td:first-child
{
    border-left: none !important;
}


/* Site Dashboard */
.site-dashboard iframe
{
    width:100%;
    height: 800px;
    border: none;
}

.control-sidebar-menu .menu-info
{
    margin-left: 10px !important;
}
.layout-top-nav.skin-purple-light .main-header .navbar .nav>li>a:hover, 
.layout-top-nav.skin-purple-light .main-header .navbar .nav>li>a:active, 
.layout-top-nav.skin-purple-light .main-header .navbar .nav>li>a:focus, 
.layout-top-nav.skin-purple-light .main-header .navbar .nav .open>a, 
.layout-top-nav.skin-purple-light .main-header .navbar .nav .open>a:hover, 
.layout-top-nav.skin-purple-light .main-header .navbar .nav .open>a:focus, 
.layout-top-nav.skin-purple-light .main-header .navbar .nav>.active>a{
    background: transparent;
    /*color: #922b87;*/
    color: #fff;
}
.navbar-nav>.user-menu.account>.dropdown-menu>li>a{
    padding: 8px 20px;
    border-bottom: none !important;
    line-height: 1 !important
}
.navbar-nav>.user-menu.account>.dropdown-menu>li
{
    background-color: #fff;
    border-right: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    text-align: center;
}
.navbar-nav>.user-menu.account>.dropdown-menu > .active > a, 
.navbar-nav>.user-menu.account>.dropdown-menu > .active > a:focus
{
    color: #fff;
}
.navbar-nav>.user-menu.account>.dropdown-menu>li:last-child
{
    border-bottom: 1px solid #dddddd;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}
.navbar-nav>.user-menu.account>.dropdown-menu
{
    padding: 0px 0px;
    max-height: none !important;
    background: transparent;
    border: none;
    margin: 2px 0px 0px !important;
}
.navbar-nav>.user-menu.account>.dropdown-menu>.user-tip
{
    background-color: transparent !important;
    border-right: none !important;
    border-left: none !important;
    padding: 0px !important;
    text-align: right;
    margin-bottom: -3px;
    margin-right: 3px;
}
.navbar-nav>.user-menu.account>.dropdown-menu>.user-divider
{
    padding: 5px 0px;
    height: 50px;
}
.navbar-nav .header-name
{
    display: none;
}
.navbar-nav>.user-menu.account>.dropdown-menu>.user-logo
{
    line-height: 1;
    text-align: center;
    padding-top: 30px;
}
.navbar-nav>.user-menu>.dropdown-menu>li.user-header
{
    height: 120px !important;
    position: relative;
    background-color: #0F0326;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-right: none !important;
    border-left: none !important;
}
.navbar-nav>.user-menu>.dropdown-menu>li.user-header .user-header-img{
    position: absolute;
    bottom: -40px;
    z-index: 5;
    left: 50%;
    transform: translate(-50%,0);
    width:90px;
}
.navbar-nav>.user-menu .user-name-display h3{
    font-size: 18px;
    margin-top: 0px;
}
.navbar-nav>.user-menu .user-name-display h3 span{
    font-size: 12px;
    font-weight: 500;

}
.navbar-nav>.user-menu>.dropdown-menu>li>hr
{
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}
.navbar-nav>.user-menu>.dropdown-menu .user-btn a{
    background-color: #EB008B;
    padding: 10px 15px !important;
    border-radius: 30px;
    display: inline-block;
    color: #fff;
    font-family: 'Helvetica Neuel Md', sans-serif;
    /*font-family: 'Montserrat', sans-serif;*/
    font-size: 12px;
}
.navbar-nav>.user-menu>.dropdown-menu .user-btn a:hover{
    background-color: #EB008B !important;
    color: #fff !important;
}
.navbar-nav>.user-menu>.dropdown-menu .user-logout{
    padding: 30px 0 0 0;
}




/* Customized button */

.btn-secondary
{
    background-color: transparent !important;
    font-size: 14px;
    padding: 6px 8px !important;
    line-height: 1;
    display: inline-block;
    margin-bottom: 0;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    box-shadow: none;
    border: 1px solid transparent;
    border-radius: 4px !important;
    font-weight: 600;
    font-size: 14px;
}
.btn-secondary:focus
{
    outline: none;
}
.btn-csm-warning
{
    color: #ea8800;
    border-color: #ea8800 !important;
}
.btn-csm-primary
{
    color: #746bd6;
    border-color: #746bd6 !important;
}
.btn-csm-danger
{
    color: #df363b;
    border-color: #df363b !important;
}
.btn-csm-danger:hover, .btn-csm-danger.active
{
    background-color: #df363b !important;
    color: #fff;
}
.btn-csm-primary:hover, .btn-csm-primary.active
{
    background-color: #746bd6 !important;
    color: #fff;
}
.btn-csm-warning:hover, .btn-csm-warning.active
{
    background-color: #ea8800 !important;
    color: #fff;
}

/* Schedule Layout */
.schedule-calendar h1, .employee-view h1
{
    margin-bottom: 0px;
    margin-top: 0px;

}
.schedule-calendar h4
{
    font-size: 16px;
    font-weight: bold;
    color: #090909;
}
.schedule-calendar table.tftable thead tr th
{
    font-weight: bold;
}
p.inDay
{
    float: right !important;
    font-size: 18px !important;
    font-weight: bold;
    margin: 5px 0 0 !important;
}
.weekly table tr #scheduleCell .schedClass
{
    padding: 4px 16px !important;
}
.schedule-calendar .schedClass
{
    background-color: #3f8eed;
    float: left;
    width: 100%;
    padding: 8px 16px;

}
.schedule-calendar .leaveClass
{
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    text-align: center;

}
.schedule-calendar .leaveClass.halfLeave{
    width: 50%;
    left: 40%;
    top: 35%;
}
.schedule-calendar .WeeklyViewRow .leaveClass.halfLeave{
    width: 48%;
    left: 50%; 
}
.schedule-calendar .leaveClass span{
    font-weight: bold;
    color: #3f8eed;
    font-size: 12px;
}
.schedule-calendar input
{
    border-radius: 4px;
}

.schedule-calendar .schedClass p
{
    float: left;
    line-height: 1;
    color: #fff;
    font-size: 12px;
    margin: 0 0 0;
}
.schedule-calendar .schedClass p b
{
    font-size: 11px;
}

.schedule-calendar .noSchedClass
{
    float: left;
    width: 100%;
    padding: 8px 16px;
    color: #a4a4a4;
}
.schedule-calendar .newSchedClass
{
    position: absolute;
    bottom: 20px;
    width: 100%;

}
.schedule-calendar .newSchedClass button
{
    font-weight: bold;
    display:none;
}
.schedule-calendar .confirmedClass
{
    float: left;
    width: 100%;
    padding: 16px 16px;
    position: relative;

}
.schedule-calendar .confirmedClass p
{
    line-height: 1;
    margin: 0 0 0 !important;
    font-size: 12px;
}
.schedule-calendar .confirmedClass p b
{
    font-size: 16px;
}
.schedule-calendar .confirmedClass p small
{
    color: #3590d9;
}

.csm-confirmed-overtime {
    height: 0;
    width: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid #7679ee;
    border-bottom: 20px solid transparent;
    border-top: 20px solid #7679ee;
    position: absolute;
    top: 1px;
    right: 1px;
}
.csm-confirmed-late{
    height: 0;
    width: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid #db3934;
    border-bottom: 20px solid transparent;
    border-top: 20px solid #db3934;
    position: absolute;
    top: 1px;
    right: 1px;
}

.csm-confirmed-undertime{
    height: 0;
    width: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid #f18700;
    border-bottom: 20px solid transparent;
    border-top: 20px solid #f18700;
    position: absolute;
    top: 1px;
    right: 1px;
 }
.csm-confirm-move
{
    top:5px; 
    right:5px;
}
.headerTable .today, .headerTable .left, .headerTable .next
{
    cursor: pointer;
}
.schedule.regular
{
    background-color: rgb(216, 234, 197);

}
.schedule.special
{
    background-color: #f7f5d9;
}
.triangle {
    height: 0;
    width: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid #ff4136;
    border-bottom: 20px solid transparent;
    border-top: 20px solid #ff4136;
    position: absolute;
    top: 0;
    right: 0;
}


.headerTable
{
    margin-bottom: 0px;
    border-collapse: separate !important;
}
.headerTable h3
{
    margin-top: 0px;
    font-size: 24px;
    font-weight: 600;
}
.headerTable i
{
    font-size: 12px;
}
table.headerTable td
{
    padding: 10px 15px !important;
    border-top: 1px solid #cfcfcf !important;
    border-bottom: 1px solid #cfcfcf !important;
}
table.headerTable td:first-child
{
    border-top-left-radius: 4px;
}
table.headerTable td:last-child
{
    border-top-right-radius: 4px;
}
table.headerTable  td:first-child button
{
    font-size: 20px;
    color: #333333;
    background-color: transparent;
    border: none;
    padding: 0px;
}
table.headerTable  td:first-child button:hover
{
    color: #3c8dbc;
}

table.tftable tr:last-child td:last-child
{    
    border-bottom-right-radius: 4px;
}
.weekly table.tftable td:first-child
{
    padding-left:16px !important;
    padding-bottom:0px !important;
    vertical-align: middle;
}


.weekly-view-table > .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: #e9e9e9 !important;
    border-radius: 0 !important;
}

.weekly-view-table > .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 0 !important;
    background-color: #262261 !important;
}

.weekly-view-table .employee-name .name {
    color: #46a9ff;
}

.daily-view .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 0 !important;
    background-color: #262261 !important;
}

.monthly-table-view .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: #e9e9e9 !important;
    border-radius: 0 !important;
}

.monthly-table-view .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 0 !important;
    background-color: #262261 !important;
}

.monthly-table-view .employee-name {
    color: #46a9ff;
}

.yearly-table-view .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: #e9e9e9 !important;
    border-radius: 0 !important;
}

.yearly-table-view .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 0 !important;
    background-color: #262261 !important;
}

.yearly-table-view .employee-name {
    color: #46a9ff;
}

.schedule-calendar #loadContainer,
.timesheet #loadContainer,
.payroll_section #loadContainer, 
.loan_management .loadContainer,
.myTimeSheets #loadContainer,
.asset-list #loadContainer
{
    position: absolute; 
    height: 600px;
    width: 100%;
    padding: 150px 0px 0px;
}
.myTimeSheets #loadContainer
{    
    padding: 10px 0px 0px !important;
}
.showLoadContainer
{
    z-index: 5000;
    display: block;
}
.hideLoadContainer
{
    z-index: 0;
    display: none;
}
.opacityView
{
   opacity: 0.4 
}



/* Employee */

.filterContainer
{
    position: inherit;
    top: 0;
}
.filterContainer div
{
    float: left;
    margin-bottom: 10px;
    z-index: 1;
}
table.kv-grid-table
{
    border-collapse: separate !important;
}
#employee-table table.kv-grid-table tbody tr td
{
    vertical-align: middle;
}
#employee-table table.kv-grid-table tbody tr td:first-child
{
    border-right-color: transparent;
    padding-left: 16px;
}
table.kv-grid-table thead tr th:first-child
{
    border-top-left-radius: 4px;
}
#employee-table table.kv-grid-table thead tr th:first-child
{
    border-right-color: #f5f5f5;
}
#employee-table table.kv-grid-table thead tr th:last-child
{
    border-top-right-radius: 4px;
}
#employee-table table.kv-grid-table thead tr th:first-child:after
{
    display: none !important;
}
table.kv-grid-table thead tr th
{
    border-top: 1px solid #d1d1d1 !important;
    border-bottom: 1px solid #d1d1d1;
}
table.kv-grid-table.table-bordered thead tr th
{
    border-right: 1px solid #d1d1d1;
}
table.kv-grid-table tbody tr td:first-child, table.kv-grid-table thead tr th:first-child
{
    border-left: 1px solid #d1d1d1;
}
#ticket-table table.kv-grid-table tbody tr td, #ticket-table table.kv-grid-table thead tr th{
    border-left: 1px solid #eae8e8;
}
#ticket-table table.kv-grid-table tbody tr td a{
    font-weight: 600;
}
#ticket-table table.kv-grid-table tbody tr td{
    font-size: 13px;
}
#ticket-table table.kv-grid-table tbody tr:hover{
    background-color: #f1f0FA;
}
table.kv-grid-table tbody tr td:last-child, table.kv-grid-table thead tr th:last-child
{
    border-right: 1px solid #d1d1d1;
}
table.kv-grid-table tbody tr:last-child td
{
    border-bottom: 1px solid #d1d1d1;
}
table.kv-grid-table tbody tr:last-child td:first-child
{
    border-bottom-left-radius: 4px;
}
table.kv-grid-table tbody tr:last-child td:last-child
{
    border-bottom-right-radius: 4px;
}
table.kv-grid-table thead tr th:last-child
{
    border-top-right-radius: 4px;
}
table.kv-grid-table thead tr th
{
    background-color:  #f5f5f5;
}
.employee-view .btn-primary.create:before
{
    display: inline;
    font-family: 'FontAwesome';
    margin-right: 8px;
}
.employee-view .btn-primary.create:before
{
    content: "\f067";
}
.settings_section ul.sidebar-menu
{    
    white-space: unset !important;
}
.dataTables_wrapper .dataTables_filter label:after, 
.employee-create .nav-stacked>li>a:after, 
.org_settings .nav-stacked>li>a:after, 
.search_label:after
{
    position: absolute;
    top: 6px;
    right: 8px;
    display: block;
    font-family: 'FontAwesome';
}
.dataTables_wrapper .dataTables_filter label
{
    position: relative;
}
.dataTables_wrapper .dataTables_filter label:after, 
.search_label:after
{
    content: "\f002";
}
.search_label
{
    position: relative;
    font-weight: normal;
}
.dataTables_wrapper input
{
    border-radius: 4px;
}

.label-active
{
    background-color: #4cb944;
    font-size: 15px;
    padding: 4px 12px;
    font-weight: 600;
}
.label-inactive
{
    font-size: 15px;
    padding: 4px 16px;
    font-weight: 600;
}

.employee-side-list-table > div > .el-table__body tr.current-row,
.employee-side-list-table > div > .el-table__body tr.current-row > td {
    background-color: #2D7DD2;
    color: #fff;
}

.employee-side-list-table > div > .el-table__body tr.current-row > td:hover {
    background-color: #2D7DD2;
}

.employee-side-list-table > div > .el-table__body tr.current-row:hover > td {
    background-color: #2D7DD2;
}

/* Sorting table */
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after
{
    position: inherit !important;
    display: inline !important;
    margin-left: 8px !important;
    top: 0px !important;
    right: 0px !important;
    font-family: 'FontAwesome' !important;
}
table.dataTable thead .sorting:after
{
    content: "\f0dc" !important;
}
table.dataTable thead .sorting_asc:after
{
    content: "\f0de" !important;
}
table.dataTable thead .sorting_desc:after
{
    content: "\f0dd" !important;
}


/*Employee Add*/
/*employee-create ul
{
    float:left;
}*/
.employee-create .nav-stacked>li>a
{
    padding: 10px 90px 10px 40px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.org_settings .nav-stacked>li>a
{
    padding: 10px 50px 10px 40px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.employee-create .nav-stacked>li.active>a, .employee-create .nav-stacked>li.active>a:hover ,
.employee-create .nav-stacked>li>a:hover, .org_settings .nav-stacked>li.active>a, 
.org_settings .nav-stacked>li.active>a:hover ,
.org_settings .nav-stacked>li>a:hover
{
    border-left-color: transparent;
    background-color: #e9e9eb;
    color: #444;
}
.employee-create .nav-stacked>li>a:after, .org_settings .nav-stacked>li>a:after
{
    content: "\f054";
    top: 10px !important;
}
.employee_sideNav
{
    padding-top: 30px;
}
.employee_sideNav .nav-tabs
{
    border-bottom: none;
}
.employee_tabContent  .tab-content
{
    margin-top: 30px;
    margin-bottom: 50px;
}
.employee_tabContent .tab-content>div>h1>span
{
    font-weight: lighter;
    font-size: 14px;
    color: #1f1f1f;
    margin-left: 8px;
}
.employee_tabContent .btn-group
{
    display: flex !important;
}
.confirm_content input
{
    border-radius: 4px;
}
input.form-control,
select.form-control
{
    border-radius: 4px;
}
#addAddressModal #accountaddress-country{
    display: block !important;
}
.employee_tabContent .tab-content textarea
{
    border-radius: 4px;
}
.employee_tabContent .tab-content .input-group .form-control:first-child
{
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}
.employee_tabContent .tab-content .scroll_content
{
    width:auto;
    height: 500px;
    overflow-y: auto;
}
.employee-view .image_container
{
    float: left;
    width: auto;
}
.employee-view .detail_container
{
    margin-left: 20px;
    float: left;
}
.employee-view .detail_container h4
{
    font-weight: bold;
    margin-top: 5px;
}
.employee-view .detail_container p
{
    margin-bottom: 0px !important;
}
.employee-view .tab_details
{
    margin-top: 20px
}
/*.employee-view .tab_details>ul>li:first-child
{
    margin-left: 103px;
}*/
.employee-view .tab_details .nav-tabs > li.active > a, .employee-view .tab_details .nav-tabs > li.active > a:focus
{
    font-weight: bolder;
}
.tab_details h3
{
    font-weight: lighter;
}
.employee-view .tab_details .detail-view tbody tr th, .employee-view .tab_details .detail-view tbody tr td
{
    border-top: none !important;
    padding: 8px 0px;
}
.btn-pin
{
    border-color: #0F0326 !important;
    color: #0F0326 !important;
    font-weight: bold;
}
.btn
{
    border-radius: 4px;
    font-weight: normal;
    font-size: 14px;
}
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus
{
    outline: none !important;
}
.col-buttons
{
    margin-top: 60px;
}
.confirm_content 
{
    padding: 0px 50px 40px;
}
.confirm_content h3
{
    font-size: 50px;
    font-weight: bold;
}
.profile_topcontent p
{
    margin-top: 0px !important;
}
.profile_topcontent .kv-editable
{
    width: 100%;
}
.profile_topcontent .kv-editable>button
{
    margin: 0 auto;
    display: block;
    color: #353535;
    border-bottom-color: #428bca;
}
.profile_topcontent .kv-editable#w0-cont
{
    display: none;
}
#wall_messages-div::-webkit-scrollbar{
    width: 10px;
}
 
#wall_messages-div::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 
    box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 
    border-radius: 10px;
}
 
#wall_messages-div::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 
    box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 
}
.tab-content .box
{
    padding-top:20px;
}
.employee-view h3
{
    margin-top: 0px;
}
/* Settings */

/*.box-header, .box-body
{
    padding: 0px!important;
}*/
.box .box-body.bodyp
{
    padding: 10px !important;
}
.box .box-body.bodyp .box-title{
    margin-top: 0;
}

.box-header .box-title
{
    font-size: 24px !important;
}
.box-header hr
{
    margin-top: 15px;
    margin-bottom: 20px;
}

.payroll_section .dl-horizontal
{
    float: left;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.payroll_section .dl-horizontal dt
{
    text-align: left !important;
    width: 130px !important;

}
.payroll_section .dl-horizontal dd
{
    margin-left: 130px;
}

.right-addon .glyphicon {
    right: 0px;
}
.inner-addon .glyphicon {
    position: absolute;
    padding: 10px;
    pointer-events: none;
}
.inner-addon {
    position: relative;
}
.right-addon input {
    padding-right: 60px;
}
.sidebar .navbar-form
{
    margin-right: 0px;
    margin-left: 0px;
}

/*Timesheet */
.imageModal img
{
    width: 100%;
    height: auto;
}
.imageModal .modal-header
{    
    padding: 0px 8px;
    border-bottom-color: transparent;
}
.imageModal .modal-body
{    
    padding: 0px 15px;
}
.imageModal .modal-header .close {
    margin-top: 0px;
}
/* Project listing */
.scroll-list > li:hover {
    background-color: #ecf0f5;
}
/*.scroll-list > li {
    padding: 5px 30px 5px 30px;
}*/
.scroll-list > li  > a{
    padding: 5px 30px 5px 30px;
    display: block;
}
.scroll-list {
    height: 500px;
    overflow-y: scroll;
}
li.search-bar
{
    padding: 10px;
}
button.button_status
{
    padding: 5px 5px !important;
}
.clearfix
{
    margin-top: 15px;
}
form div.required label.control-label:after {
  content:" * ";
  color:red;
}

#welcomeModal .modal-body
{
    padding: 0px;
}
#welcomeModal .modal-body, #welcome_view_modal .modal-body, #welcome_add_modal .modal-body
{
    padding: 0px;
}
/*.welcome_button
{
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%, 0);
}*/
.welcome_content
{
    text-align: center;
    padding: 20px 20px 50px;
}
.welcome_imgcont
{
    background-image: url(../images/geometry2.png);
    background-repeat: repeat;
}
.welcome_imgcont img
{
    margin: 0 auto;
}
.welcome_content #welcome_title
{
    color: #0F0326;
}
.welcome_content #welcome_desc
{
    margin: 20px 10px;
    font-size: 16px;
}
.welcome_content .welcome_button
{
    padding: 10px 20px !important;
}
#tablelist
{
    margin-top: 20px;
}
#tablelist table tr th
{
    border-top: none;
}
#tablelist a.editButton, #tablelist a.saveButton, #tablelist a.endBreakEmployeeButton
{
    width: 80px;
}
.header-no-overlap > table > thead > tr > th:hover {
    white-space: normal !important;
}
ul.tags
{
    list-style: none;
    padding: 0px;
}
ul.tags li
{
    margin-top: 5px;
    padding: 2px 5px;
}

table.kv-grid-table
{
    margin-top: 7px;
}
div.summary
{
   margin-top: 8px; 
}


/*Header v2 */
.main-sidebar
{
    top: 34px !important;
}
.top-header
{
    position: relative;
    width: 100%;
    height:32px;
    font-size: 12px;
    padding: 0px 15px 0px 15px;
    background: #fff;
    color: #101320;
    z-index: 1500;
    border-bottom: 1px solid #EEE;
}
.top-header .nav
{
    margin-top:6px;
    margin-bottom:6px;
}
.top-header .nav>li
{
    float: left;
}
.top-header .nav>li>a
{
    padding-top:0px !important;
    padding-bottom:0px !important;
    padding-right:0px !important;
    padding-left:10px !important;
    color: #101320;
    background: none !important;
    font-family: 'Helvetica Neuel Md', sans-serif;
    /*font-family: 'Montserrat', sans-serif;*/
}
.top-header .nav>li:first-child
{
    border-right: 1px solid #fff;
}
.top-header .nav>li:first-child a
{
    padding-right:15px !important;
    padding-left:15px !important;
}
.top-header .nav>li:nth-child(2) a {
    padding-left:15px !important;
}
.top-header .nav>li:last-child a {
    padding-right:15px !important;
}
.top-header .nav>li>a:hover, .top-header .nav>li>a:active, .top-header .nav>li>a:focus
{
    background: none !important;
    /*color: #922b87;*/
    color: #fff;
}
.top-header .dropdown-menu>li
{
    width: 100%;
}
.top-header .dropdown-menu>li>a
{
    color: #777 !important;
}
.top-header .dropdown-menu>li>a:hover, 
.top-header .dropdown-menu>li>a:active,
.top-header .dropdown-menu>li>a:focus,
.top-header .dropdown-menu > .active > a {
    background-color: #e1e3e9 !important;
    color: #333 !important;
}
.top-header .dropdown-menu
{
    right: 0px;
    left: auto !important;
}  
li.navbar-brand > a
{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
li.navbar-brand > a:hover, li.navbar-brand > a:focus
{
    border-bottom: none !important;
}
li.navbar-brand > a .caret
{
    color: #ba2c73 !important;
}
li.navbar-brand > a .caret
{
    color: #ba2c73 !important;
}
li.navbar-brand .dropdown-menu
{
    font-size: 16px !important;
    min-width: 220px;
}
li.navbar-brand .dropdown-menu img
{
    height: 28px;
}
li.navbar-brand .dropdown-menu li a
{
    padding: 8px 20px;
}
.navbar-brand  img, .logo > img
{
    display: inline !important;
    height: 33px;
    width: auto;
}
.navbar-brand span, .logo > span
{
    vertical-align: middle;
    margin-left: 8px;
}
.navbar .navbar-brand {
    padding: 8px 8px ;
    font-family: 'Helvetica Neuel Md', sans-serif;
    /*font-family: 'Montserrat', sans-serif;*/
}
.navbar-brand, .logo
{
    font-size: 20px;
}

.label_hr
{
    color: #ba2c73;
}
.label_pms
{
    color: #573d7d;
}
.label_desk
{
    color: #767bed;
}
.search-header
{    
    float: left;
    width: 250px;
    margin-top: 8px;
    margin-right: 10px;
    position: relative;
}
#select2-header_select-results
{    
    max-height: 450px !important;
}
#select2-header_select-results li:hover a
{
    color:  #fff !important;
}
.open > .dropdown-menu {
  animation-name: slidenavAnimation;
  animation-duration:.5s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;

  -webkit-animation-name: slidenavAnimation;
  -webkit-animation-duration:.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-name: slidenavAnimation;
  -moz-animation-duration:.5s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: forwards;
}
@keyframes slidenavAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes slidenavAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fixed_header
{
    position: fixed !important;
    width: 100%;
    top: 0;
}

.select2-container--krajee li.select2-results__option{
    background: #fff;
    color: #2D3144;
}
.account-list .select2-container .select2-selection{
    border: none;
    box-shadow: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
}
.account-list .select2-container .select2-selection__arrow{
    border-left: none;
    display: none;
}
.account-list svg.select-arrow{
    position: absolute;
    top: 25%;
    right: 5%;
}
.account-list .address-info .name{
    margin-left: 5px;
}
.account-list .address-info .address{
    font-size: 11px;
    margin-left: 5px;
}
.account-list .input-lg.select2-container--krajee.select2-container--open .select2-selection{
    background: #fff;
    border: 1px solid #4A2563;
    border-radius: 2px;
}
.account-list .input-lg.select2-container--krajee .select2-selection--single{
    height: 60px;
    background: transparent;
}
.row-toolbar{
    border-bottom: 1px solid #ccc;
    padding-bottom: 25px;
    padding-top: 0px;
}
.toolbar .btn.create{
    position: relative;
}
.btn-filter.btn-lg.w-icon {
    padding-right: 5%;
    padding-left: inherit;
    position: relative;
}
.btn-filter.btn-lg.w-icon svg {
    position: absolute;
    right: 7%;
    top: 18%;
    left: auto
}
.btn-lg.w-icon{
    padding-left: 5%;
}
.btn-lg.w-icon svg{
    position: absolute;
    left: 8%;
    top: 18%;
}
.btn-group span.caret{
    visibility: hidden;
    display: none;
}
/*.btn-group svg.select-arrow{
    position: absolute;
    top: 20%;
    right: 20%;
}*/
.toolbar > div{
    float: none;
    vertical-align: middle;
    display: table-cell;
}
.toolbar > div:last-child{
    text-align: right;
}
.toolbar {
    display: table;
    width: 100%;
}
.toolbar .active-filters{
    display: none;
}
#ticket-table .active-filters{
    display: inline-block;
    width: 100%;
    text-align: left;

}
#ticket-table .active-filters label{
    margin-right: 10px;
}
#ticket-table .active-filters > div{
    display: inline-block;
}
#ticket-table .active-filters .ticket-status{
    cursor: pointer;
}
#ticket-table .active-filters  .badge{
    background-color: #821274;
    padding: 5px 10px;
}
#ticket-table .active-filters  .badge .fa{
    color: white;
    cursor: pointer;
}
.toolbar .search-container{
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
.toolbar .search-container label{
    margin-bottom: 0;
}
.toolbar .search-container input{
    height: 40px;
    width: 250px;
    font-size: 14px;
    border-color: #4A2563;
    background: transparent;
}
.toolbar .search-container svg{
    position: absolute;
    right: 5%;
    top: 20%;
}
.filter-container{
    display: none;
    position: fixed;
    width: 20%;
    height: 100%;
    right: 0;
    top:0;
    background: #fff;
    z-index: 9993;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.filter-container .title, .filter-container .form-group, .filter-container .buttons, .filter-container .btn-group{
    padding: 10px 15px;
}
#ticket-table{
    padding-top: 15px;
}
#ticket-table tbody tr:hover{
    cursor: pointer;
}
.select2-container--krajee .select2-dropdown{
    border-color: #4A2563;
    border-radius: 2px;
}
/*Loan Management */
.loan_management .btn-sm
{
    padding: 0px 5px !important;
}
.btn-nofill
{
    background: none;
    border: none;
}
.loan_management .tab-content
{
    padding: 15px;
}
.loan_management h2
{
    margin-bottom: 15px;
}
.editable-title{
    margin: 10px 0;
}
.editable-title .kv-editable-link{
    font-size: 20px;
    font-weight: 600;
}
.editable-description .kv-editable-link{
    font-size: 14px;
    width: 80%;
}
.editable-description{
    margin: 0px 0 10px 0;
}
.ticket-view div.dataTables_processing{
    top: 55%;
}
.ticket-view .editable-description .btn-group{
    float: right;
    cursor: pointer;
}
.ticket-view .editable-description .btn-group .dropdown-menu{
    right: 0;
    left: inherit;
    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);
}
.ticket-view .kv-editable-link{
    color: #101320;
    text-align: left;
    border-bottom: none;
    word-wrap: break-word;
    font-size: 14px;
}
.ticket-view .text-right .kv-editable-link{
    text-align: right;
    display: initial;
}
span.badge-due-date{
    background-color: #EC9488;
}
.ticket-view .kv-editable, .kv-editable-value{
    display: block;
}
.ticket-view .kv-editable-inline.kv-editable-content .panel{
    border:0;
    box-shadow: none;
    background: transparent;
}
.ticket-view .kv-editable-form-inline .form-group{
    display: block;
}
.last-activity{
    color: #81838F;
}
.badge{
    font-weight: 400;
}
.badge.badge-sm{
    padding: 3px 7px;
    font-size: 10px;
    border-radius: 7px;
}
.badge.badge-md{
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 12px;
}
.badge.badge-lg{
    padding: 8px 18px;
    font-size: 14px;
    border-radius: 18px;
}
.badge.badge-primary{
    background-color: #262261;
    color: #fff;
}
.ticket-view .ticket-header{
    display: inline-block;
}
.ticket-view .account-details{
    display: inline-block;
    position: relative;
}
.ticket-view .account-details p{
    margin:0;
    font-size: 12px;
}
.ticket-view .account-details p.wicon{
    padding-left: 8%;
    padding-top: 5px;
    position: relative;
}
.ticket-view .account-details p svg{
    width: 15px;
    position: absolute;
    left: 0%;
    top: 0;
}
.ticket-view .account-details .kv-editable-toggle{
    position: absolute;
    top: 0;
    right: 10%;
}
.ticket-view .ticket-header h3{
    margin-top: 0;
}
.ticket-view .activity-details label{
    font-size: 13px;
    text-transform: uppercase;
}
.ticket-view .activity-details p.wicon{
    font-size: 12px;
}
.ticket-view .activity-details .editable-date_start{
    margin: 0;
}
.ticket-view .activity-details .kv-editable button{
    padding: 0;
    margin: 0;
}
.ticket-view .activity-details p svg{
    float: left;
    margin-bottom: 25px;
    margin-right: 5px;
    width: 30px;
    height: 30px;
}
.ticket-view .editable-table .kv-editable-form-inline .form-control{
    width: 100%;
}
.activity-details .kv-editable button, .activity-details{
    font-size: 12px;
}
.activity-details > .row > div{
    padding-left: 0;
}
.activity-details .user-image{
    width: 30px;
}  
.select2-selection .user-image, .select2-results .user-image{
    width: 22px;
    margin-bottom: 0;
}
.user-image{ 
    float: left;
    margin-right: 5px;
    margin-bottom: 25px;
    width: 30px;
}
.activity-details .elapsed{
    color: #81838F;
}
.ticket-form, .project-form, .board-form {
    position: fixed;
    right: 0;
    background: #fff;
    z-index: 9992;
    top: 0;
    height: 100%;
    width: 60%;
    display: none;
}
.project-form, .board-form {
    width: 40%;
}
.ticket-form > .content, .project-form > .content, .board-form > .content {
    overflow: auto;
    height: 100%;
}
.ticket-form:before, .project-form:before, .board-form:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #FFF;
    z-index: -1;
}
.ticket-form:after, .project-form:after, .board-form:after {
    position: fixed;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.3);
    z-index: -2;
}
.ticket-form button[type='submit'], .form-button a.btn, .form-button button, .project-form button[type='submit'],
.board-form button[type='submit'] {
    margin-left: 6px;
}
.ticket-form p#ticket-description {
    min-height: 120px;
    padding: 5px;
    border-radius: 4px;
}
.tribute-container {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    max-height: 300px;
    max-width: 500px;
    overflow: auto;
    display: block;
    z-index: 999999; 
    border: 1px solid #922b87;
    border-radius: 3px;
    margin-top: 5px;
    background: #fff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.tribute-container ul {
    margin: 0;
    margin-top: 3px;
    list-style: none;
    background: #fff;
    padding: 0; 
}
.tribute-container li {
    padding: 5px 5px;
    cursor: pointer; 
    line-height: 2;
}
.tribute-container li.highlight, .tribute-container li:hover {
    background: #922b87;
    color: #fff;
}
.tribute-container li span {
    font-weight: bold; 
}
.tribute-container .menu-highlighted {
    font-weight: bold; 
}
.tribute-demo-input {
    height: auto !important;
}
.tribute-selected-item {
    background: rgba(158, 158, 158, 0.13);
    padding: 5px 14px;
    border-radius: 2px;
    border: 1px solid rgba(66, 66, 66, 0.04);
    line-height: 1.5;
    margin-top: 2px;
    display: inline-block;
    font-weight: 600;
    text-shadow: 0px 1px 0px #fff;
}

.ticket-view .add-task{
    font-size: 14px;
    padding: 5px;
    color: #81838F;
    cursor: pointer;
}
.ticket-view .add-task .user-image{
    width: 40px;
}
.ticket-view .add-task .task-preview{
    margin: 8px 60px;
}
.ticket-view .task-preview:hover{
    text-decoration: underline;
}

.ticket-view #addtask-form{
    display: none;
}
.ticket-view #addtask-form textarea{
    border: none;
    margin-top: -20px;
}
.ticket-view #addtask-form .date-due{
    text-align: right;
}
.ticket-view #addtask-form .date-due label{
    vertical-align: top;
    margin-right: 5px;
    margin-top: 5px;
}
.ticket-view #addtask-form .date-due .input-group{
    display: inline-table;
    width: 30%;
}
.ticket-view #ticket-detail-tab{
    border-bottom: 0;
}
.ticket-view .task-creation{
    border: 1px solid #ddd;
    padding: 15px;
    box-shadow: 1px 1px 2px #ddd;
    border-radius: 0 4px 4px 4px;
}
.ticket-view .task-container{
    padding: 0 15px;
    padding-bottom: 0;
    margin: 15px 0;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.ticket-view .task-container .task-series_no{
    font-size: 20px;
    font-weight: 700;
    color: #262161;
    text-align: center;
}
.ticket-view .task-container .task-description{
    font-size: 16px;
}
.ticket-view .task-container .task-description textarea{
    width: 100%;
    border: none;
}
.ticket-view .task-container .task-from_user{
    color: #81838F;
    font-size: 12px;
}
.ticket-view #ticket-table div.dt-buttons{
    display: none;
}
.ticket-view #tickettable .badge-tags{
    margin-right: 3px;
    font-weight: 500;
    margin-top: 1px;
}
.badge-tags{
    margin-right: 3px; 
    white-space: normal;
}
.ticket-view #ticket-table .ticket-title{
    font-size: 13px;
    font-weight: 600;
}
.ticket-view #ticket-table .ticket-title span{
    font-size: 12px;
    color: #575A69;
}
.task-container .assignee-list .user-image{
    width: 32px;
    height: 32px;
    margin-bottom: 0;
}
.ticket-view .assignee-list .editable-task-assignee{
    display: inline-block;
}
.ticket-view .assignee-list .editable-add-task-assignee{
    display: inline-block;
}
.ticket-view .assignee-list .kv-editable{
    display: inline-block;
    float: none;
}
.task-container .assignee-list .user-image .plus-assignee{
    position: relative;
}
.task-container .assignee-list .user-image .plus-assignee > span{
    position: absolute;
    top: -28%;
    font-size: 34px;
    left: 20%;
    margin: 0 auto;
    color: white;
}
.task-container .status-more{
    text-align: right;
}
.task-container .status-more .kv-editable{
    display: inline-block;
}
.task-container .status-more .more-actions{
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}
.task-container .status-more .more-actions > svg{
    color: #BBB;
}
.task-container .assignee-list{
    float: right;
    margin-top: 5px;
    width: 100%;
}
.task-container .assignee-list > div{
    display: inline-block;
}
.modal-open {
    padding-right: 0px !important;
}
.modal-open .top-header
{
    position: initial !important;
}
.edit-taskstatus{
    height: 34px;
    width: 100%;
}
.ticket-view .task-container .task-comment,.ticket-view .task-container .task-sync-bit{
    text-align: right;
    cursor: pointer;
}

.ticket-view .task-container .task-attachment{
    cursor: pointer;
}

.ticket-view .task-container .task-footer svg{
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
.ticket-view .task-container .task-footer span{
    font-size: 13px;
    vertical-align: middle;
    margin-left: 5px;
}
.ticket-view .task-container .task-footer .task-duration{
    text-align: center;
}
.ticket-view .task-container .task-body{
    /* padding-bottom: 15px; */
    display: flex;
}
.ticket-view .task-container .task-body > div{
    /*width: 100%;
    display: table;*/
    padding: 15px;
}
.ticket-view .task-container .task-body > div > div{
   /* padding: 15px;
    display: table-cell;
    float: none;
    vertical-align: top;*/
}
.ticket-view .task-container .task-body > div > div:first-child{
   /* vertical-align: middle;*/
}
.ticket-view .task-container .task-footer{
    background: #F1F0FA;
    padding: 10px 0;
}
.ticket-view .task-container .task-body .task-series{
    border-right: 1px solid #ddd;

}
.ticket-view .task-container .task-private_note{
    font-size: 12px;
    color: #2d3144;
}
.ticket-view .task-container .task-private_note textarea{
    width: 100%;
    border: none;
    border-bottom: 1px dashed;
    font-size: 12px;
    padding: 0;
}
.ticket-view .task-container .task-private_note svg{
    float: left;
    width: 16px;
    height: 16px;
    margin-top: 5px;
    margin-right: 5px;
}
.ticket-view .task-container .task-private_note .kv-editable{
    float: left;
    width: 80%;
}
.ticket-view .task-container .task-private_note button.kv-editable-link{
    padding: 5px 0;
}
/*.ticket-view .task-list .task-body .task-series:after{
    content: "\007C";
}*/
.ticket-view .task-list > .closed-task-count-container{
    display: none;
}
.ticket-view .comment-creation{
    background: #FDFDFE;
    padding: 15px;
}
.comment-creation .user-image{
    width: 32px;
    height: 32px;
    margin-bottom: 0;
}

.comment-creation .add-comment{
    background: #fff;
    padding: 15px;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.comment-creation .addcomment-form{
    display: none;
}
.comment-creation .comment-preview{
    margin: 5px 50px;
}
.comment-creation .addcomment-form textarea{
    border: none;
}
.comment-creation .add-comment{
    cursor: pointer;
}
.comment-container .user-image{
    width: 28px;
    height: 28px;
    margin-bottom: 0;
}
.comment-container .comment-info{
    display: flex;
    position: relative;
}
.comment-container .comment-info .comment-duration svg, .comment-container .comment-info .comment-duration .kv-editable{
    display: inline-block;
    vertical-align: middle;
}
.comment-container .comment-info .comment-duration svg{
    width: 20px;
    height: 20px;
    margin-right: 5px;
}
.comment-container .comment-info .comment-duration .kv-editable{
    width: 80%;
}
.comment-container .comment-info .comment-duration .duration-container{
    position: absolute;
    bottom: 0;
    font-size: 12px;
    width: 92%;
}
.comment-container .comment-info .comment-duration .duration-container .kv-editable-link{
    font-size: 12px;
}
.comment-container .comment-info .comment-duration .duration-container input{
    max-width: 100%;
    margin-top: 35px;
}

.comment-list{
    background: #FDFDFE;
    padding: 15px;
    max-height: 400px;
    overflow-y: scroll;
}
.comment-list::-webkit-scrollbar {
    width: 10px;
    cursor: pointer;
}
.comment-list::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}
.comment-list .comment-container{
    background: #fff;
    padding: 15px;
    margin-bottom: 15px;
    /*border: 1px solid #ddd; */
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.comment-list .comment-container:hover{
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.comment-list .comment-container .user-info .user-name, .comment-list .comment-container .user-info .user-elapsed{    
    margin: 5px 40px;
}
.comment-list .comment-container .user-info .user-name{
    font-size: 12px;
    color: #2D3144; 
}
.comment-list .comment-container .user-info .user-elapsed{
    font-size: 10px;
    color: #888;
}
.comment-list .comment-container .comment-description{
    padding-left: 55px;
}
.comment-list .comment-container .comment-description textarea{
    border: none;
    width: 100%;
}
.comment-list .comment-container .comment-editable .delete-container{
    text-align: right;
    visibility: hidden;
    cursor: pointer;
}
.comment-list .comment-container .comment-editable .delete-container svg{
    width: 20px;
    height: 20px;
}
.kv-editable-form-inline .kv-editable-close{
    margin-top:2px;
}
.kv-editable-form-inline .form-group:last-child{
    float: right;
}
.ticket-view .ticket-duration svg{
    vertical-align: middle;
}
.ticket-view .ticket-date_closed svg{
    vertical-align: middle;
}
.ticket-view .ticket-requester svg{
    vertical-align: middle;
}
.ticket-view .editable-description, .ticket-view .editable-reference, .ticket-view .editable-duration, 
.ticket-view .editable-date_closed, .ticket-view .editable-category-tags, .ticket-view .editable-priority-tags{
    margin-bottom: 15px;
}
.ticket-view .krajee-default .file-preview-image{
    height: auto !important;
    margin-top: 10%;
    max-height: 75%;
    font: 24px 'Montserrat', sans-serif;
    max-width: 100%;
    word-wrap: break-word;
}
.ticket-view .file-preview, .ticket-view .file-drop-zone, .ticket-view .krajee-default.file-preview-frame{
    border: none;
}
.ticket-view .file-drop-zone{
    height: auto;
}
.ticket-view .krajee-default.file-preview-frame:hover {
    box-shadow: 0 7px 14px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);
    background-color:rgba(0, 0, 0, 0.3);
}
.ticket-view .krajee-default.file-preview-frame{
    width: 30.3%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    background: #fff;
    margin: 15px;
    display: block;

}
.ticket-view .kv-upload-progress{
    display: none !important;
}
.ticket-view .file-caption-main{
    visibility: hidden;
}
.ticket-view .file-drop-zone-title{
    padding: 35px 10px;
    font-size: 18px;
    border: 1px dashed #eee;
}
.ticket-view .file-drop-zone-title span{
    font-size: 14px;
}
.ticket-view .attachment-container{
    background: #FDFDFE;
}
.ticket-view .file-drop-zone.clickable:hover{
    border: none;
}
.ticket-view .krajee-default.file-preview-frame .kv-file-content{
    width: auto;
}
.ticket-view .attachment-container .fileinput-remove{
    display:    none;
}
.ticket-view .krajee-default .file-footer-buttons, .ticket-view .krajee-default .file-drag-handle{
    visibility: hidden;
}
.ticket-view .btn.btn-white.dropdown-toggle{
    background: #fff;
    color: #81838F;
    box-shadow: none;
    border-color: transparent;
}
.ticket-view .task-container .more-actions .dropdown-menu{
    left: inherit;
    right: 0;
}
/* Timeclock */
.timeclock
{
    height: 100vh;
    background-color: #090218;
    padding: 120px 170px;
    color: #fff;
    min-height: 100%;
}
.timeclock #timeDiv
{
    text-align: center;
    padding: 100px 0px;
}
.timeclock #pincodeDiv
{
    text-align: center;
    padding: 20px;
}
.timeclock .pinContainer
{
    border-left: 1px solid #fff;
}
.timeclock p
{
    font-size: 22px;
}
.timeclock #timeContainer h2
{
    color: #fff !important;
    font-size: 70px !important;
}
.timeclock #timeContainer h2>span
{
    font-size: 40px !important;
}
.timeclock .wm-logo
{
    width: 150px;
    display: block;
    margin: auto;
}
.timeclock table
{
    width: 70%;
    margin: auto;
}
.timeclock .table>tbody>tr>td
{
    font-size: 20px;
    vertical-align: baseline;

}
.timeclock .pinCircle
{
    margin: 20px 0px;
}
.timeclock .pinCircle label
{
    margin: 0px 15px;
}
.timeclock .btn
{
    font-size: 20px;
}
.timeclock .clockDiv
{
    text-align: center;
}
.btn-circle
{
    border-radius: 50%;
    border-color: #fff;
    border-width: 2px;
    background-color: transparent;
    width: 70px;
    height: 70px;
}
.btn-circle:hover
{
    background-color: #221c30;
    color: #fff;
}
.btn-circle:focus
{
    color: #fff;
}
.timeclock .btn-nofill:hover
{
    color: #fff;
}
.timeclock .btn-nofill:focus
{
    color: #fff;
}
.pin-circle
{
    width: 23px;
    height: 23px;
    border: 2px solid #fff;
    border-radius: 50%;
}
.pin-fill
{
    background-color: #6f6e72;
}
.timeclock .btn-cancel, 
.timeclock .btn-clockIn, 
.timeclock .btn-clockOut, 
.timeclock .btn-retry, 
.timeclock .btn-okay, 
.timeclock .btn-done
{
    background-repeat: no-repeat;
    background-size: cover;
    width: 172px;
    height: 60px;
    margin: 10px;
    background-color: transparent !important;
}
.timeclock .btn-cancel { background-image:url(../images/Cancel_Btn.png); }
.timeclock .btn-clockIn {  background-image:url(../images/Clock_In_Btn.png); }
.timeclock .btn-clockOut { background-image:url(../images/Clock_out_Btn.png); }
.timeclock .btn-retry { background-image:url(../images/Retry2_btn.png); }
.timeclock .btn-okay { background-image:url(../images/okay_btn.png); }
.timeclock .btn-done { background-image:url(../images/Done_btn.png); }
.clockMessage img
{
    width: 30px;
    margin-right: 10px;
}

.timeclock .btn-cancel-req,
.timeclock .btn-ok-req,
.timeclock .btn-success-req {
    border: 2px solid #FF3366;
    border-radius: 30px 30px 30px 30px;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif; /*Montserrat Helvetica Neuel Roman  Helvetica Neuel Md*/
    font-size: 16px;
    height: 60px;
    margin: 10px 10px 0px 10px;
    width: 190px;
}

.timeclock .btn-ok-req {
    background-color: #FF3366;
}

.timeclock .btn-success-req {
    background-color: #1CBAB4;
    border: 2px solid #1CBAB4;
}

.timeclock .btn-cancel-req{
    background-color: transparent;
}

.btn-title-primary,
.btn-title-secondary{
    font-style: normal;
    letter-spacing: 1px;
}

.btn-title-primary{
    font-weight: 300;
    display: grid;
}

.btn-title-secondary{
    font-size: 60%;
    font-style: normal;
    font-weight: 200;
    float: right;
    margin-top: -32px;
}

a#setAsPrimary
{
    cursor: pointer;
}
.expand_row>td div table
{
    background-color: transparent !important; 
}
.expand_row>td
{
    padding: 8px 0px !important;
}
.expand_row .grid-view
{
    margin-top: 0px !important;
}
.expand_row table
{
    border-collapse: collapse !important;
    margin-bottom: 6px !important;
}

.expand_row table thead
{
    display: none;
}
.expand_row table.kv-grid-table tbody tr:last-child td {
    border-bottom: 1px solid #f4f4f4 !important;
}
.expand_row table.kv-grid-table tbody tr td:last-child
{
    border-right: none !important;
}
.expand_row table.kv-grid-table tbody tr td:first-child
{
    border-left: none !important;
}
.full-text-area {
    width: 100%;
    resize: vertical;
    min-height: 150px;
}
.modal.bootstrap-dialog .modal-header {
    background-color: #922b87;
}
#todayoverdue-grid .temporary-header, #upcoming-grid .temporary-header {
    margin: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    border-bottom: 0;
    background-color: #f5f5f5;
    margin-bottom: -12px;
}
#todayoverdue-grid .temporary-header > div, #upcoming-grid .temporary-header > div{
    display: inline-block;
    padding: 8px;
    font-weight: bold;
}
#todayoverdue-grid .temporary-header > div:first-child, #upcoming-grid .temporary-header > div:first-child{
    width: 34.9%;
    border-right: 1px solid #CCC;
}
#todayoverdue-grid-container thead tr:first-child, #upcoming-grid-container thead tr:first-child{
    display: none;
}
.todayoverdue-container .actiontoolbar{
    float: right;
}
.todayoverdue-container .panel-heading{
    background: transparent;
    border: none;
    padding: 0 0 10px 0;
}   
.todayoverdue-container .grid-view{
    margin-top: 0;
}
.todayoverdue-container .kv-panel-before, .todayoverdue-container .kv-panel-after, .todayoverdue-container .panel-footer{
    display: none;
}
.todayoverdue-container .table-responsive table.table-bordered{
    margin: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    border-top: 0;
}
.todayoverdue-container table tbody tr:hover{
    cursor: pointer;
}
.todayoverdue-container .panel-default{
    border: 0;
    box-shadow: none;
}
.todayoverdue-container .panel-title{
    font-size: 24px;
}
.todayoverdue-container small{
    font-size: 75%;
}
#js-legend ul {
  list-style: none;
}

#js-legend ul li {
  display: block;
  padding-left: 30px;
  position: relative;
  margin-bottom: 4px;
  border-radius: 5px;
  padding: 2px 8px 2px 28px;
  font-size: 14px;
  cursor: default;
  -webkit-transition: background-color 200ms ease-in-out;
  -moz-transition: background-color 200ms ease-in-out;
  -o-transition: background-color 200ms ease-in-out;
  transition: background-color 200ms ease-in-out;
}

#js-legend li span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 100%;
  border-radius: 5px;
}

@keyframes highlight {
  0% {
    background: yellow
  }
  100% {
    background: none;
  }
}

.fade-highlight {
  animation: highlight 2s;
}

.dropdown-menu > li > a {
    padding: 10px 20px;
}
.navbar-brand>.dropdown-menu>li>a:hover{
    background-color: #e1e3e9 !important;
    color: #333 !important;
}
.dropdown-menu>li>a:hover, .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    background-color: #262261 !important;
    color: #fff !important;
}
.search-form div.input-group input[type="text"], .search-form div.input-group-btn button[type="submit"]{
    height: 40px;
    color: #262261;
    border-color: #262261;
    background: transparent;
}
img.account-img
{
    border-radius: 50%;
    margin: 0 auto;
    display: block;
}

.img-loader-2 {
    background: url(../images/loading-2.gif);
    height: 20px;
    display: block;
    background-repeat: no-repeat;
}
    
.ticket-view .show-text-only{
    margin: 10px 15px;
}
.ticket-view .show-text-only label{
    font-weight: 500;
}
.ticket-view .closed-task-count{
    margin: 10px 15px;
}
.ticket-view .preview-wrapper img{
    max-width: 100%;
}
.top-header-gradient, .main-header-gradient{
    height: 3px;
    width: 100%;
    background: linear-gradient(to left, #EB008B, #262261);
}
.main-header-gradient{
    display: none;
}
.main-header.fixed_header .main-header-gradient{
    display: block;
}
.growl {
    opacity: 0.9;
}
.alert > [data-notify="message"] {
    display: block;
    margin: 5px 0 15px 0;
}
.alert.animated{
    top: 90px !important;
    width: 300px;
    margin: 0 auto;
}
.alert.animated .progress{
    margin: 0 -15px -15px -15px;
    height: 3px;
}
.alert.animated .progress-bar-success {
    background-color: #5cb85c;
}
.alert.alert-success{
    background-color: #dff0d8 !important;
    border: 1px solid #d6e9c6 !important;
    color: #3c763d !important;
}
.modal .modal-content {
    border-radius: 3px;
}
.modal .modal-header {
    background: #f7f7f7;
    border-radius: 3px;
}
.modal-header .close {
    margin-top: 0;
    font-size: 35px;
    font-weight: 100;
}
.share-form{
    width: 94%;
    margin: 0 auto;
}
/*.share-form .form-content,#shareModal .btn-back {
    display: none;
}*/
.share-options li {
    cursor: pointer;
}
.share-options li span, #shareModal .btn-back span{
    vertical-align: super;
}
.share-form .form-content .input-group {
    margin-bottom: 8px;
}
.share-form .form-content .input-group-container.has-error .help-block{
    color: #dd4b39;
}
.share-form .form-content .organization .input-group .input-group-addon {
    width: 65%;
    text-align: left;
}
/* Account */
.account-list table thead th>a
{
    color: #000 !important;
}
.account-view .top-label
{
    display: flex;
}
.account-view .top-label .top-title
{    
    font-size: 16px;
    font-weight: bold;
    margin-left: 5px;
    margin-top: 2px;
}
.account-view .account-detail
{
    margin-top: 20px
}
.account-view .account-detail th, .account-view .account-detail td
{    
    vertical-align: middle;
    padding: 2px 0px !important;
}
.account-view .account_input
{
    border: none;
    padding: 2px 12px;
}
.account-view .account_input:focus
{
    border: 1px solid #d2d6de;
}

/*Organizational Chart Dasboard View*/
.org-chart-selected-node {
    background-color: #e8e8e8;
    border-radius: 4px;
    width: 100%;
}

/* Projects */
.project-view .project-filter.toolbar{
    margin-bottom: 30px;
}
.project-view .project-filter label{
    font-weight: 500;
    margin-left: 15px;
}
.project-list .board-container .board-img, .project-detail .tab-content .board-container .board-img{
    border-radius: 25px;
    margin-right: 0;
    display: table-cell;
    vertical-align: middle;

}
.project-list .board-container .board-title a, .project-detail .tab-content .board-container .board-title span{
    display: table-cell;
    vertical-align: middle;
}
.project-list .board-container, .project-detail .tab-content .board-container{
    border-radius: 2px;
    border: 1px solid #eee;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.project-list .board-container:hover{
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

}
.project-list .board-container .box-header h3, .project-detail .tab-content .board-container .box-header h3{
    margin-top: 5px;
    display: table;
    width: 100%;
    font-family: 'Helvetica Neuel Roman', sans-serif;
    /*font-family: 'Open Sans', sans-serif;*/
}
.project-list .board-container .box-header .board-title span, .project-detail .tab-content .board-container .box-header .board-title span{
    cursor: pointer;
}
.project-list .board-container .box-header .board-title span:hover{
    text-decoration: underline;
}
.project-list .board-container-hover .actions, .project-detail .tab-content .board-container .box-header .actions{
    position: absolute;
    top: 20px;
    right: 5px;
    color: #9C9998;
}
.project-list .board-container .box-footer, .project-detail .tab-content .board-container .box-footer{
    font-size: 12px;
}
.project-list .project-header{
    width: 100%;
    height: 40px;
    margin-top: 30px;
}
.project-list .project-title{
    font-size: 20px;
    display: inline-block;
    float: left;
    margin: 0;
}
.project-list .project-title span{
    padding: 6px;
}
.project-list .project-star{
    display: inline-block;
    float: left;
    cursor: pointer;
    margin-left: 15px;
}
.project-list .project-settings a{
    color: #101320;
    padding-left: 10px;
}
.project-list .create-board{
    border: 2px dashed #eee;
}
.project-list  .create-board p{
    margin: 8% auto;
    text-align: center;
    font-size: 20px;
    position: relative;
    color: #9C9998;
    cursor: pointer;
}
.project-list  .create-board p svg{
    position: absolute;
    margin-left: -25px;
}

.project-detail .project-title{
    font-size: 20px;
    display: inline-block;
    float: left;
    margin: 0;
}
.project-detail .project-star{
    display: inline-block;
    float: left;
    cursor: pointer;
    margin-left: 15px;
}

.project-detail .kv-editable-link{
    color: #101320;
    text-align: left;
    border-bottom: none;
    word-wrap: break-word;
    font-size: 14px;
    width: 100%;
}
.project-detail .box.box-solid hr{
    margin: 0;
}
.project-detail table.project-details tr td{
    border:none;
}
.project-detail table.project-details tr td:first-child{
    width: 30%;
}
.project-detail table.project-details .editable-description .panel, 
.project-detail table.project-details .editable-description .kv-editable-parent,
.project-detail table.project-details .editable-description textarea
{
    border:none;
    width: 100%;
}
.project-detail #project-detail-tab{
    /*border-bottom: none;*/
}
.project-detail #project-detail-tab li{
    width: 33%;
    text-align: center;
}

.project-detail #project-detail-tab li a{
    border: none;
    color: #1f1f1f;
    font-weight: 600;
}
.project-detail #project-detail-tab li.active a{
    border-bottom: 3px solid #00B5D4;
}
.project-detail .tab-content .board-container{
    padding-top: 0;
    margin-bottom: 0;
    box-shadow: none;
}
.project-detail .tab-content{
    max-height: 620px;
    overflow-y: auto;
    overflow-x: hidden;
}

.project-detail .tab-content::-webkit-scrollbar {
    width: 10px;
    cursor: pointer;
}
.project-detail .tab-content::-webkit-scrollbar-track {
    /*-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.1); */
    border-radius: 10px;
}
 
.project-detail .tab-content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}
.project-detail .box-footer.activity-board-comment{
    padding: 10px 0;
}
.project-detail .comment-container,
.project-detail .activity-container{    
    border: 1px solid #eee;
    padding-top: 0;
}
.project-detail .comment-container .board-title, 
.project-detail .activity-container .activity-title{
    color: #81838F;
}
.project-detail .comment-container .user-image,
.project-detail .activity-container .user-image{
    width: 48px;
    height: 48px;
}
.project-detail .comment-container .comment-user,
.project-detail .activity-container .comment-user{
    color: #81838F;
    font-size: 12px;
}
.project-detail .comment-container .comment-user .user-elapsed,
.project-detail .activity-container .comment-user .user-elapsed{
    float: right;
}
.box .box-subtitle{
    color: #81838F;
    font-weight: 600;
}
.project-detail .project-dashboard .project-status .open-tasks{
    background: #FD2F69;
}

.project-detail .project-dashboard .project-status .closed-tasks{
    background: #00C2A2;
}

.project-detail .project-dashboard .project-status .working-hours-tasks{
    background: #00AFEF;
}
.project-detail .project-dashboard .project-status > div{
    padding-left: 7px;
    padding-right: 7px;
}
.project-detail .project-dashboard .project-status > div:first-child{
    padding-left: 15px;
}
.project-detail .project-dashboard .project-status > div:last-child{
    padding-right: 15px;
}
.project-detail .project-dashboard .project-status p{
    color: white;
    font-size: 16px;
}
.project-detail .project-dashboard .project-status p.task-count{
    font-size: 32px;
    font-weight: 600;
    margin: 0;
}
.project-detail .project-dashboard .project-status .task-status-container{
    display: table;
    width: 100%;
    height: 150px;
}
.project-detail .project-dashboard .project-status .task-status-container > div:first-child{
    width: 60%;
}
.project-detail .project-dashboard .project-status .task-status-container > div{
    display: table-cell;
    vertical-align: middle;
} 
.project-detail .box-body, .project-detail .box-header{
    padding: 15px;
}
.project-detail .assignee-list{
    border: 1px solid #eee;
}
.project-detail .assignee-list td{
    vertical-align: middle;
    border:none;
}
.project-detail .assignee-list tr td:first-child{
    width: 30%;
}
.project-detail .assignee-list .editable-project-assignee{
    display: inline-block;
}
.project-detail .assignee-list .editable-add-project-assignee{
    display: inline-block;
}
.project-detail .assignee-list .user-image{
    width: 32px;
    height: 32px;
    margin-bottom: 0;
    float: right;
}
.project-detail .assignee-list .user-image .plus-assignee{
    position: relative;
}
.project-detail .assignee-list .user-image .plus-assignee > span{
    position: absolute;
    top: -28%;
    font-size: 34px;
    left: 20%;
    margin: 0 auto;
    color: white;
}
.project-detail .todayoverdue-container table{
    table-layout: fixed;
}
.project-detail .todayoverdue-container td{
    border: none;
    border-top: 1px solid #ddd;
    vertical-align: middle;
}
.project-detail .todayoverdue-container table tr td:not(:first-child){
    padding-left: 30px;
}
.project-detail .todayoverdue-container table tr td:first-child{
    width: 50%;
}
.project-detail .todayoverdue-container table tr td:last-child{
    width: 20%;
}
.project-detail .todayoverdue-container table tr td:first-child p{
    margin-bottom: 0;
}
.project-detail .todayoverdue-container table tr td p.overdue-board{
    padding-left: 8%;
    color: #81838F;
}
.project-detail .todayoverdue-container table tr td p.overdue-status{
    padding-left: 8%;
}
.project-detail .todayoverdue-container table tr td:first-child p.ellipsis{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 30px;

}
.todayoverdue-container p.wicon{
    padding-left: 8%;
    padding-top: 2px;
    position: relative;
}
.todayoverdue-container p svg{
    position: absolute;
    left: 0%;
    top: 0;
    width: 20px;
}
.project-detail .todayoverdue-container .user-image{
    margin-bottom:  0;
}
.project-detail #todayoverdue-grid .temporary-header{
    display: table;
    width: 100%;
}
.project-detail #todayoverdue-grid .temporary-header > div:first-child{
    border-right:none;
}
.project-detail #todayoverdue-grid .temporary-header > div{
    display: table-cell;

}
.project-detail .table-striped > tbody > tr:nth-of-type(odd){
    background:none;
}
.project-detail .todayoverdue-container .panel-footer{
    display: block;
    background:none;
    padding: 10px 0;
    text-align: right;
}
.project-detail .avatar-initial{
    border-radius: 30px;
    width: 32px;
    height: 32px;
    margin-bottom: 0;
    float: right;
    margin-right: 5px;
}
.project-detail .todayoverdue-container .avatar-initial{
    float: left;
}
.full-width{
    width: 100% !important;
}

.width-60-percent{
    width: 60% !important;
}

.board-view  .board-header {

    h2 {
        display: flex;
        align-items: center;
        font-size: 20px;
        font-weight: 700;
        color: #101320;
    }
    a{
        color: #2D3144;
        font-weight: 600;
    }
}

/* Vue */
.sweet-content-content .v-select .dropdown-toggle
{
    margin-top: 0px !important;
}
.sweet-modal-overlay{
    background: rgba(255, 255, 255, 0.5) !important;
}
.modalUpdate .sweet-content
{
    min-height: 500px;
}
.svg 
{
    float: left;
    margin-right: 3px;
}
.svg_label
{
    padding-top: 5px !important;
}

/* Checkbox Toggle Design */
/* The container */
.container-csm-checkmark {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container-csm-checkmark input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.csm-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 6px;
    background-color: #d7dcde;
}

/* When the checkbox is checked, add a blue background */
.container-csm-checkmark input:checked ~ .csm-checkmark {
    background-color: #2196F3;
}

.checkmark-closed input:checked ~ .csm-checkmark {
    background-color: #7f7f7f !important;
}

/* Create the checkmark/indicator (hidden when not checked) */
.csm-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container-csm-checkmark input:checked ~ .csm-checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container-csm-checkmark .csm-checkmark:after {
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


#globalSearch{
    padding: 5px 12px 4px 12px !important;
}
.intel-search, .intel-select{
    padding: 20px 40px;
    position: absolute;
    background-color: rgba(19,15,47,0.5);
    width: 100%;
    color: #a2a2a2;
    font-size: 13px;
    display: none;
}
/* Customized checkmark for search */
.intel-select .container-csm-checkmark{
    margin-bottom: 7px !important;
    color: #fff;
}
.intel-select .csm-checkmark{
    height: 15px !important;
    width: 15px !important;
    border-radius: 3px !important;
}
.intel-select .csm-checkmark:after{
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
}

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/material/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2') format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
/* Status color scheme */
.status.pending{ color: green;}
.status.approved{ color: blue;}
.status.denied{ color: red;}
.status.processed{ color: orange;}

.break-word { word-wrap: break-word; }

.action-toolbar{
    position: absolute;
    right: 15px;
    top: 12px;
    z-index: 1;
}
    .action-toolbar>div{
        display: inline-flex;
    }
    .action-toolbar>div.status-filter{
        width: 180px;
    }
.kv-editable-form > span{
    font-size: 12px;
    color: #757575;
}


/* Element UI modifictions */
.el-dialog__body{
    padding-top: 10px !important;
}

.b-600{
    font-weight: 600;
}

/* .org-chart-selection-details table > thead > tr > th {
    background-color: #f3f3f3 !important;
}

.org-chart-selection-details div.el-table__header-wrapper {
    border: 1px solid rgb(233, 233, 233);
    border-bottom: none;
}

.org-chart-selection-details div.el-table__body-wrapper{
    border: 1px solid rgb(233, 233, 233);
    border-bottom: none;
    border-top: none;
} */


.el-date-table td.today span {
    border: 1px solid;
    font-weight: normal;
}

@keyframes myslide {
    from {left: -300px;}
    to {left: 100px;}
}

@-webkit-keyframes myslide {
    from {left: -300px;}
    to {left: 100px;}
}

@keyframes myback {
    to {
        left: 100px;
    }
}

/*td.today > div > span {
    border: 1px solid;
}
*/
.skin-purple-light.menu-sidebar .top-header,
.skin-purple-light.menu-sidebar .top-header-gradient,
.skin-purple-light.menu-sidebar .main-header-gradient{
    display: none;

}
.skin-purple-light.menu-sidebar .top-header.public-link{
    display: block;
}
.skin-purple-light.menu-sidebar .main-header{
    box-shadow: 0 1px 0 #4d4d4d inset, 0 1px 2px rgba(156,153,152,0.5);
}
.skin-purple-light.menu-sidebar:not(.guest) .content-wrapper{
    background: #FFFFFF;
    padding-top: 50px;
    padding-bottom: 80px;
    height: calc(100vh);
    overflow: auto;
    min-height: 0 !important;
}
.skin-purple-light.menu-sidebar:not(.guest) .content-wrapper .content{
    height: 100%;
}
.skin-purple-light.menu-sidebar:not(.guest) .content-wrapper .content > div{
}
.skin-purple-light.menu-sidebar:not(.guest) .content-wrapper .content > div:not(.fit){
    /*overflow: auto;
    height: calc(100vh - 120px);*/
}
.skin-purple-light.menu-sidebar:not(.guest) .content-wrapper .content > div.project-view{
    margin-top: -15px;
    margin-left: -15px;
    margin-right: -15px;
}
.skin-purple-light.menu-sidebar .notifications-menu > a{
    font-size: 18px;
}
.skin-purple-light.menu-sidebar .user-menu > a{
    padding-top: 13px !important;
}
.skin-purple-light.menu-sidebar .user-menu > a > div{
    width: 35px !important;
}

.skin-purple-light.menu-sidebar .main-header .quick-create-button li.disabled a{
    color: #ccc;
}

@media(min-width:768px){
    .skin-purple-light.menu-sidebar .main-header .navbar{
        padding-left: 10px;
    }
    .skin-purple-light.menu-sidebar .main-header .quick-create-button > a{
        padding: 5px !important;
    }
    .skin-purple-light.menu-sidebar .main-header .quick-create-button > a > img{
        width: 42px;
        margin-right: 5px;

    }

    .skin-purple-light.menu-sidebar .main-header .quick-create-button > a > span{
        font-size: 14px;
        vertical-align: middle;
        color: #888;

    }

    .skin-purple-light.menu-sidebar .sidebar-menu >  li.active>a>.pull-right-container,
    .skin-purple-light.menu-sidebar .sidebar-menu >  li.treeview.menu-open>a>.pull-right-container{
    
        display: none;
        position: fixed;
        top: 75px;
        left: 100px;
        right: auto;
        z-index: 99;
    }

    .skin-purple-light.menu-sidebar .sidebar-menu >  li.active>a>.pull-right-container,
    .skin-purple-light.menu-sidebar .sidebar-menu >  li.treeview.menu-open>a>.pull-right-container{
        display: block;
        -webkit-animation: myback 0.5s forwards;
        animation: myback 0.5s forwards;
    }

    .skin-purple-light.menu-sidebar .sidebar-menu > li.active>a>.pull-right-container >.fa-angle-left,
    .skin-purple-light.menu-sidebar .sidebar-menu > li.treeview.menu-open>a>.pull-right-container >.fa-angle-left{
        transform: rotate(0deg);
        font-size: 30px;
        margin-left: 30px;
        width: 20px;
        visibility: hidden;
    }

    .skin-purple-light.menu-sidebar .sidebar-menu  li:hover > a,
    .skin-purple-light.menu-sidebar .sidebar-menu  li.active > a{
        color: #EB008B;
        background: none;
    }

    .skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu > li > .treeview-menu{
        position: fixed;
        top: 50px;
        left: -300px;
        width: 300px;
        background: #fff;
        height: 100%;        
        height: -webkit-fill-available;
        border-right: 1px solid rgba(156,153,152,0.5);
        padding-left: 0;
        z-index: -1;
        overflow-y: scroll;
        padding-bottom: 100px;
        -webkit-transition: left .3s ease;
    } 

    .skin-purple-light.menu-sidebar .main-sidebar.web-sidebar.suprema{
        height: 105%;
        overflow: scroll;
        border-right: 1px solid #e9e9e9 !important;
    }

    .skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu > li > .treeview-menu.menu-open .submenu-header,
    .skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu > li.treeview.menu-open > .treeview-menu .submenu-header
    {
        font-size: 18px;
        padding-left: 50px;
        border-bottom: 1px solid rgba(156,153,152,0.5);
        height: 50px;
        width: 300px;
        display: table-cell;
        vertical-align: middle;
    }
    .skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu > li > .treeview-menu.menu-open .submenu-header::before,
    .skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu > li.treeview.menu-open > .treeview-menu .submenu-header::before
    {
        content: "\74";
        position: absolute;
        left: 30px;
        font-size: 18px;
        color: #EB008B;
        font-family: "posbangcon-1" !important;
    }

    .skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu .dropdown-submenu a::after{
        display: none;
    }
    .skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu .dropdown-submenu .pull-right-container{
        top: auto;
        margin-top: -2px;
    }

    .skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu .dropdown-submenu .pull-right-container > .fa-angle-left{
        transform: rotate(180deg);
        font-size: 30px;
        margin-right: 20px;
    }

    .skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu .dropdown-submenu.active .pull-right-container > .fa-angle-left{
        transform: rotate(-90deg);
        margin-top: -10px;
    }



    .skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu .dropdown-submenu .treeview-menu{
        padding: 0 15px;
        background: #f1f0fa;
    }

    .skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu .dropdown-submenu .treeview-menu > li > a{
        /*border-bottom: 1px solid rgba(156,153,152,0.5);*/
        height: 35px;
        display: table-cell;
        vertical-align: middle;
        width: 300px;
    }

    .skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu .dropdown-submenu .treeview-menu > li > a > .fa{
        margin-left: 15px;
        visibility: hidden;
    }

    .skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu .dropdown-submenu .treeview-menu > li > a > span{
        padding-left: 10px;
    }

    .skin-purple-light.menu-sidebar .sidebar-menu > li > .treeview-menu > li .fa {
        margin-left: 0px !important;
    }

    /*.skin-purple-light.menu-sidebar .sidebar-menu > li > .treeview-menu{
        height:  0 !important;
        width: 0;
        left: -200px;
        z-index: -1;
        transform: {translateX(-100%);}
        transition: transform 0.5s;

    }*/
    .skin-purple-light.menu-sidebar .sidebar-menu > li.treeview.menu-open.active ul.treeview-menu{
        display: none;
    }

    .skin-purple-light.menu-sidebar .sidebar-menu > li.active > .treeview-menu.menu-open, 
    .skin-purple-light.menu-sidebar .sidebar-menu > li.treeview.menu-open ul.treeview-menu{
        left: 100px;
    }

    .skin-purple-light.menu-sidebar .sidebar-menu > li.active > .treeview-menu.menu-open > li > a, 
    .skin-purple-light.menu-sidebar .sidebar-menu > li.treeview.menu-open ul.treeview-menu > li > a{
        /*height: 70px;*/
        /* height: 40px; */
        /* display: table-cell; */
        vertical-align: middle;
        width: 300px;
    }

    .skin-purple-light.menu-sidebar .sidebar-menu > li.active > .treeview-menu.menu-open > li > a > i.fa,
    .skin-purple-light.menu-sidebar .sidebar-menu > li.treeview.menu-open ul.treeview-menu > li > a > i.fa{
        margin-left: 15px;
    }

    .skin-purple-light.menu-sidebar .sidebar-menu > li.active > .treeview-menu.menu-open > li > a > span,
    .skin-purple-light.menu-sidebar .sidebar-menu > li.treeview.menu-open > .treeview-menu > li > a > span{
        padding-left: 10px;
    }

    .skin-purple-light.menu-sidebar .sidebar-menu > li.active > .treeview-menu,
    .skin-purple-light.menu-sidebar .sidebar-menu > li.treeview.menu-open ul.treeview-menu{
        height: 100% !important;
        height: -webkit-fill-available !important;
    }

    .skin-purple-light.menu-sidebar .sidebar-menu > li >  .treeview-menu .fa{
        font-size: 20px;
        width: 30px;
        visibility: hidden;
    }

    .skin-purple-light.menu-sidebar .sidebar-menu > li >  .treeview-menu > li .fa{
        width: 5px;
    }

    .skin-purple-light.menu-sidebar .sidebar-menu > li >  .treeview-menu>li>a{
        /*padding: 20px 15px;*/
        /* padding: 15px 15px; */
        padding: 8px !important;
        border-bottom: 1px solid rgba(156,153,152,0.5);
    }

    .skin-purple-light.menu-sidebar:not(.guest) .content-wrapper{
        padding-left: 100px;
    }

    .main-footer{
        padding: 15px 15px 15px 115px !important;
    }
}

.wit-sidebar.control-sidebar.control-sidebar-open{
    right: 0 !important;
}

.skin-purple-light .wit-sidebar.control-sidebar{
    box-shadow: 1px 3px 7px #DDD;
    background-color: #fff;
    position: fixed;
    width: 350px;
    right: -350px;
    /*left: 0;
    display: none;
    padding-top: 50px;
    z-index: 810;  
     min-height: 100%;
    -webkit-transition: -webkit-transform .3s ease-in-out,width .3s ease-in-out;
    -moz-transition: -moz-transform .3s ease-in-out,width .3s ease-in-out;
    -o-transition: -o-transform .3s ease-in-out,width .3s ease-in-out;
    transition: transform .3s ease-in-out,width .3s ease-in-out;*/
}
.skin-purple-light .wit-sidebar.control-sidebar::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
}
/*.skin-purple-light .wit-sidebar.control-sidebar:after {
    position: fixed;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -2;
}*/
.skin-purple-light .wit-sidebar.control-sidebar h3
{
    /*color: white;*/
    padding: 0 5px;
}

.wit-sidebar.control-sidebar .sidebar .module-section{
    padding-bottom: 30px;
}
.sidebar-task-toggle{
    position: absolute;
    z-index: 999999;
    background: #130e2f;
    height: 50px;
    width: 50px;
    padding: 12px;
    cursor: pointer;
}
.sidebar-task-toggle svg{
    color: white;
    width: 25px;
    height: 25px;
}
.show.collapse .card-body{
    display: none;
}
.show.collapse.in .card-body{
    display: block;
}
.wit-sidebar.control-sidebar .card-list .card-header{
    padding: 0 15px;
}
.wit-sidebar.control-sidebar .card-list .card-header h5{
    background: #202332;
}
.wit-sidebar.control-sidebar .card-list .card-header h5 button{
    color: white;
    text-decoration: none;

}
.wit-sidebar.control-sidebar .card-list{
    padding: 0 15px;
    overflow-y: auto;
}

.wit-sidebar.control-sidebar .card-list .task-card{
    background: #f1effa;
    margin: 15px 0px;
    border-radius: 5px 3px 3px 5px;
    padding: 10px 0px;
}
.wit-sidebar.control-sidebar .card-list .task-card .card-title{
    font-weight: bold;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    margin-bottom: 0px;
}
.wit-sidebar.control-sidebar .card-list .task-card .card-title p{
    margin: 0;
}
.wit-sidebar.control-sidebar .card-list .task-card .card-due{
    color: #666;
    font-size: 10px;
}
.wit-sidebar.control-sidebar .card-list .task-card .col-md-2{
    vertical-align: middle;
    height: 50px;
    line-height: 50px;
}
.wit-sidebar.control-sidebar .card-list .task-card .col-md-8{
    padding: 5px;
    font-size: 85%;
    height: 50px;
}
.wit-sidebar.control-sidebar .card-list .task-card .col-md-2:first-child{
    color: #fff;
    font-weight: bold;
    border-radius: 3px 0 0 3px;
    text-align: center;
}
.wit-sidebar.control-sidebar .card-list .task-card.pms-card .col-md-2:first-child{
    background: #573D7D;
}
.wit-sidebar.control-sidebar .card-list .task-card.desk-card .col-md-2:first-child{
    background: #767bed;
}
.wit-sidebar.control-sidebar .card-list .task-card.hr-card .col-md-2:first-child{
    background: #c44d89;
}
.wit-sidebar.control-sidebar .card-list .task-card .col-md-2:last-child{
    padding-left: 0;
}
.wit-sidebar.control-sidebar .card-list .task-card .take-button{
    background-color: transparent;
    border-color: #DDD;
    font-size: 10px;
    color: #39B54A;  
}
.layout-top-nav.skin-purple-light.dark-header:not(.guest) .content-wrapper{
    background: #F5F7FB;
    padding-top: 50px;
    padding-bottom: 30px;
}

.skin-purple-light.dark-header .top-header-gradient{
    display: none;
}
.skin-purple-light.dark-header .top-header{
    background-color: #130e2f;
     color: #fff;
}
.skin-purple-light.dark-header:not(.guest) .top-header{
    display: none;
}
.skin-purple-light.dark-header .top-header .pull-right .nav>li>a{
    color: #fff;
}
.layout-top-nav.skin-purple-light.dark-header .main-header .navbar{
    background-color: #130e2f;
}
.layout-top-nav.skin-purple-light.dark-header .main-header .navbar .nav > li > a{
    color: #f6f6f6;
    font-size: 13px;
}
.layout-top-nav.skin-purple-light.dark-header .main-header .navbar-brand span{
    font-size: 20px;
}
.layout-top-nav.skin-purple-light.dark-header .search-header input#keywordSearch, 
.layout-top-nav.skin-purple-light.dark-header .search-header button#globalSearch{
    background: transparent;
    border: 1px solid #888;
}
.layout-top-nav.skin-purple-light.dark-header .search-header input#keywordSearch{
    border-right: none;
}
.layout-top-nav.skin-purple-light.dark-header .search-header button#globalSearch{
    border-left: none;
}
.layout-top-nav.skin-purple-light.dark-header .search-header button#globalSearch svg{
    color: #F5F5F5;
}
.layout-top-nav.skin-purple-light.dark-header .main-header{
    box-shadow: none;
}
.skin-purple-light.dark-header .main-footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #130e2f;
    color:  #f6f6f6;
    border: none;
    font-size: 11px;
    padding: 10px;
}
.skin-purple-light.menu-sidebar .main-footer{
    position: fixed;
    width: 100%;
    bottom: 0;
    font-size: 11px;
    padding: 10px;
}
.subscription-data > div{
    padding-left: 15px;
    display: inline-block;
}
.skin-purple-light.dark-header .main-header-gradient{
    display: none;
}
.skin-purple-light.dark-header .lang-picker{
    text-align: center;
    height: 32px;
    display: inline-flex;
}
.skin-purple-light.dark-header .navbar-custom-menu.pull-right .caret{
    display: none;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    cursor: pointer;
}
::-webkit-scrollbar-track {
    /*-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.1); */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}/*
.global-search-toggle{
    position: fixed;
    bottom: 10%;
    right: 3%;
    background: #2C2557;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 12px;
    color: white;
    cursor: pointer;
    z-index: 99999;
}
.global-search-toggle svg{
    color: white;
}*/
.global-search-container{

  /*position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999999999;
    background-color: rgba(0,0,0,0.5);
    display: none;
    transition: opacity .4s ease;*/
}

.global-search-container .search-engine{

    /*width: 50%;
    margin: 20% auto;*/
}
.global-search-container .search-engine .input-group{
    width: 100%;
}
.global-search-container input{
    height: 80px !important;
}
.global-search-container .search-engine .intel-search, .intel-select{
    width: 60%;
}
#perspective .container{
    width: 100%;
    padding: 0;
}
div#wall_messages-div{
    height: auto !important;
}

.search-input {
    width: 60%;
    height: 80px;   
     position: absolute;
    top: 50%;
    left: 50px;
    margin-top: -40px;
    pointer-events: none;
    opacity: 0;
    transform: translate( 40px, 0);
    transition: all 0.3s ease-in-out;
    z-index: 5001;
}
.search-input input {
    color: #fff;
    font-size: 54px;
    border: 0;
    background: transparent;
    -webkit-appearance: none;
    box-sizing: border-box;
    outline: 0;
    font-weight: 200;
    margin-left: 60px;
}
.search-input  ::-webkit-input-placeholder {
    color: #EEE;
}
.search-input  :-moz-placeholder {
    color: #EEE;
    opacity: 1;
}
.search-input  ::-moz-placeholder {
    color: #EEE;
    opacity: 1;
}
.search-input  :-ms-input-placeholder {
    color: #EEE;
}
.icon-close.material-icons{
    display: none;
}
.search-active .icon-close.material-icons{
    display: block;
    position: fixed;
    top: 60px;
    right: 30px;
    color: #FFF;
    cursor: pointer;
    font-size: 70px;
    opacity: 1;
    transition: all 0.3s ease-in-out;
    z-index: 5001;
}
.icon-close:hover {
    transform: rotate(0);
}

/* Control btn */

.control {
    cursor: pointer;
}
.control .btn-material {
    z-index: 1;
    position: fixed;
    top: 1px;
    width: 30px;
    height: 30px;
    right: 1px;
    opacity: 0;
    border-radius: 100%;
    box-sizing: border-box;
    background: #2C2557;
    outline: 0;
    transform-origin: 50%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 60px;
    text-align: center;
}
.control .btn-material:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.control .icon-material-search {
    color: #FFF;
    z-index: 99;
    position: fixed;
    bottom: 10%;
    width: 40px;
    height: 60px;
    right: 120px;
    line-height: 60px;
    transition: opacity 0.3s ease-in-out;
}



body.search-active {
    overflow: hidden;
}
body.search-active .search-input {
    opacity: 1;
    transform: none;
    pointer-events: all;
}
body.search-active .icon-close {
    opacity: 1;
    transform: rotate(-90deg);
}
body.search-active .control {
    cursor: default;
}
body.search-active .control .btn-material {
    transform: scale(250);
    opacity: 0.6;
    z-index: 5000;
}
body.search-active .control .icon-material-search {
    opacity: 0;
}
[class^="pb-"]:before, [class*=" pb-"]:before{
    vertical-align: middle;
}

.skin-purple-light .el-radio-group .multiselect, 
.skin-purple-light .el-radio-group .multiselect__input, 
.skin-purple-light .el-radio-group .multiselect__single{
    font-size: 12px;
}

hr{
    margin-top: 5px;
    margin-bottom: 5px;
}

mark {
    padding: 0px !important;
    background: #ff0 !important;
}


.el-input__suffix{
    font-size: 20px;
}

/*HEADER CHANGES MENU */
.language-picker.large i{
    border: 1px solid #ddd;
}

.navbar-nav>.user-language>.dropdown-menu{
    width: auto;
    min-width: 60px;
    background: #fff;
    padding: 0px 0px;
    max-height: none !important;
    border: none;
    margin: 10px 0px 0px !important;
}

.navbar-nav>.user-language>.dropdown-menu .user-language-list{
    padding: 5px 0px !important;
    background-color: #fff;
    border-radius: 3px;

}
.user-language .user-tip{
    background-color: transparent !important;
    border-right: none !important;
    border-left: none !important;
    padding: 0px !important;
    margin-bottom: -5px;
    margin-right: 3px;
}
.user-language .user-tip img{
    display: block;
    position: relative;
    margin: 0 auto;
    width: 20px;
}
.user-language .language-picker.button-list a{
    float: left !important;
    padding: 5px 15px;
    margin: 0px !important;
    opacity: 1 !important;
    width: 100%;
    color: #777;
}
.user-language .language-picker{
    width: 100%;
}
.user-language .language-picker i{
    position: relative;
    display: block !important;
    margin: 0 auto !important;
}
.language-picker.button-list a.active{
    background-color: #262261;
    color: white;
}

.navbar-nav>.user-board>.dropdown-menu::before{
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    right: 5px;
    /*transform: translate(-50%,0);*/
    top: -15px;
    background-image: url('/images/tip_white.png');
    background-size: 20px 20px;
    background-repeat: no-repeat;
}

.navbar-nav>.user-board>.dropdown-menu{
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    margin-top:20px;
    background-color: #fff;
    border: none !important;
    border-radius: 3px;
    padding: 10px 15px !important;
}

.navbar-nav>.user-board>.dropdown-menu>li{
    background-color: #fff;
    text-align: center;
    padding: 0px;
}
.navbar-nav>.user-board>.dropdown-menu>li a{
    padding: 10px 10px !important;
}
.navbar-nav>.user-board>.dropdown-menu>li i{
    font-size: 25px;
}

.navbar-nav>.user-board>.dropdown-menu li.user-sub-menu>ul{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    list-style: none;
    padding: 10px 0px 30px;
    background-color: #fff;
    min-height: 100%;
    display: none;
    border-radius: 3px;
}
.navbar-nav>.user-board>.dropdown-menu li.user-sub-menu>ul>li>a{
    display: block;
    padding: 5px 10px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #2D3144;
    white-space: nowrap;
}
.navbar-nav>.user-board>.dropdown-menu li.user-sub-menu>ul>li>a:hover{
    background-color: #262261 !important;
    color: #fff !important;
}
.navbar-nav>.user-board .sub-close{
    background-color: #262261 !important;
    color: #fff !important;
    position: absolute;
    width: 100%;
    bottom: 0px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    cursor: pointer;
}
.no-caret.dropdown-submenu>a:after{
    display: none !important;
}
.label-posbang{
    background-color: #EB008B;
}
.main-header .navbar .nav>li>a>.label{
    border-radius: 5px;
    line-height: 1;
}
.skin-purple-light.menu-sidebar .web-sidebar .pro-label{
    background: #EB008B;
    padding: 1px 3px;
    border-radius: 2px;
    font-size: 8px;
    color: white;
    top: 20px;
    margin-left: 5px;
}

.sub-menu-tree i {
    display: none !important;
}

.treeview-menu li.active   i {
    display: none !important;
}

.skin-purple-light.menu-sidebar .web-sidebar .disabled-menu{
    opacity: 0.5;
}
.skin-purple-light.menu-sidebar .web-sidebar .disabled-menu:hover > a{
    color: #444;
}

.view-general .general-view-detail{
    margin-top: 20px; 
}

#newUpdates .modal-body ul li p{
    font-size: 12px;
}
#newUpdates .modal-header{
    background: #2B2861
}
#newUpdates .modal-header h4{
    color: white;
}


/* sidebar menu */
.skin-purple-light.menu-sidebar .main-sidebar.web-sidebar{
    display: block;
    position: fixed;
    background: #fff;
    margin-top: -33px;
    width: 100px;
    border-right: 1px solid rgba(156,153,152,0.5);
    height: 100%;
    overflow: scroll;
}
 
.skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu{
    background: #fff;
}

.sidebar-scroll::-webkit-scrollbar {
    width: 10px;
}
.sidebar-scroll::-webkit-scrollbar,
.sidebar-scroll::-webkit-scrollbar-thumb {
    overflow:visible;
    border-radius: 4px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.2);
}

.el-dialog__wrapper::-webkit-scrollbar {
    width: 10px;
}
.el-dialog__wrapper::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.8);
}
.el-dialog__wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,1);
}


.skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .cover-bar{
    position: absolute;
    background: #fff;;
    height: 100%;  
    top: 0;
    right: 0;
    width: 10px;
    -webkit-transition: all .5s;
    transition: all .5s;
    opacity: 1;
    display: block;
}

.skin-purple-light.menu-sidebar .main-sidebar.web-sidebar:hover .cover-bar {
   opacity: 0;
  -webkit-transition: all .5s;
  transition: all .5s;
  display: none;
}

.skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu > li > a{
    /* padding: 8px 5px; */
    text-align: center;
    /* height: 100px; */
    display: block;
    /* vertical-align: middle; */
    /* width: 100px; */
    padding: 10px;
}

.skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu > li > a > .fa{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 25px;
}

.skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu > li > a > span{
    font-size: 12px;
}

.skin-purple-light.menu-sidebar .sidebar-menu > li >a>.pull-right-container{

    display: none;
    position: fixed;
    top: 75px;
    left: 100px;
    right: auto;
    z-index: 99;
}

.skin-purple-light.menu-sidebar .sidebar-menu >  li.active>a>.pull-right-container,
.skin-purple-light.menu-sidebar .sidebar-menu >  li.treeview.menu-open>a>.pull-right-container{

    display: block;
    -webkit-animation: myback 0.5s forwards;
    animation: myback 0.5s forwards;
}

.skin-purple-light.menu-sidebar .sidebar-menu > li.active>a>.pull-right-container >.fa-angle-left,
.skin-purple-light.menu-sidebar .sidebar-menu > li.treeview.menu-open>a>.pull-right-container >.fa-angle-left{
    transform: rotate(0deg);
    font-size: 30px;
    margin-left: 30px;
    width: 20px;
    visibility: hidden;
}

.skin-purple-light.menu-sidebar .sidebar-menu  li:hover > a,
.skin-purple-light.menu-sidebar .sidebar-menu  li.active > a{
    color: #EB008B;
    background: none;
}

.skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu > li > .treeview-menu{
    position: fixed;
    top: 50px;
    left: -300px;
    width: 300px;
    background: #fff;
    height: 100%;        
    height: -webkit-fill-available;
    border-right: 1px solid rgba(156,153,152,0.5);
    padding-left: 0;
    padding-bottom: 100px !important;
    z-index: -1;
    -webkit-transition: left .3s ease;
    transition: left .3s ease;
} 

.skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu > li > .treeview-menu.menu-open .submenu-header,
.skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu > li.treeview.menu-open > .treeview-menu .submenu-header
{
    font-size: 18px;
    padding-left: 60px;
    border-bottom: 1px solid rgba(156,153,152,0.5);
    height: 40px;
    width: 300px;
    display: table-cell;
    vertical-align: middle;
}
.skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu > li > .treeview-menu.menu-open .submenu-header::before,
.skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu > li.treeview.menu-open > .treeview-menu .submenu-header::before
{
    content: "\74";
    position: absolute;
    left: 15px;
    font-size: 18px;
    color: #EB008B;
    font-family: "posbangcon-1" !important;
}

.skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu .dropdown-submenu a::after{
    display: none;
}
.skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu .dropdown-submenu .pull-right-container{
    top: auto;
    margin-top: -2px;
}

.skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu .dropdown-submenu .pull-right-container > .fa-angle-left{
    transform: rotate(180deg);
    font-size: 30px;
    margin-right: 20px;
}

.skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu .dropdown-submenu.active .pull-right-container > .fa-angle-left{
    transform: rotate(-90deg);
    margin-top: -10px;
}



.skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu .dropdown-submenu .treeview-menu{
    padding: 0 15px;
    background: #f1f0fa;
}

.skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu .dropdown-submenu .treeview-menu > li > a{
    /*border-bottom: 1px solid rgba(156,153,152,0.5);*/
    height: 35px;
    display: table-cell;
    vertical-align: middle;
    width: 300px;
}

.skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu .dropdown-submenu .treeview-menu > li > a > .fa{
    margin-left: 15px;
    visibility: hidden;
}

.skin-purple-light.menu-sidebar .main-sidebar.web-sidebar .sidebar-menu .dropdown-submenu .treeview-menu > li > a > span{
    padding-left: 10px;
}

/*.skin-purple-light.menu-sidebar .sidebar-menu > li > .treeview-menu{
    height:  0 !important;
    width: 0;
    left: -200px;
    z-index: -1;
    transform: {translateX(-100%);}
    transition: transform 0.5s;

}*/
.skin-purple-light.menu-sidebar .sidebar-menu > li.treeview.menu-open.active ul.treeview-menu{
    display: none;
}

.skin-purple-light.menu-sidebar .sidebar-menu > li.active > .treeview-menu.menu-open, 
.skin-purple-light.menu-sidebar .sidebar-menu > li.treeview.menu-open ul.treeview-menu{
    left: 100px;
}

.skin-purple-light.menu-sidebar .sidebar-menu > li.active > .treeview-menu.menu-open > li > a, 
.skin-purple-light.menu-sidebar .sidebar-menu > li.treeview.menu-open ul.treeview-menu > li > a{
    /*height: 70px;*/
    /* height: 55px; */
    /* display: table-cell; */
    vertical-align: middle;
    width: 300px;
}

.skin-purple-light.menu-sidebar .sidebar-menu > li.active > .treeview-menu.menu-open > li > a > i.fa,
.skin-purple-light.menu-sidebar .sidebar-menu > li.treeview.menu-open ul.treeview-menu > li > a > i.fa{
    margin-left: 15px;
}

.skin-purple-light.menu-sidebar .sidebar-menu > li.active > .treeview-menu.menu-open > li > a > span,
.skin-purple-light.menu-sidebar .sidebar-menu > li.treeview.menu-open > .treeview-menu > li > a > span{
    padding-left: 30px;
}

.skin-purple-light.menu-sidebar .sidebar-menu > li.active > .treeview-menu,
.skin-purple-light.menu-sidebar .sidebar-menu > li.treeview.menu-open ul.treeview-menu{
    height: 100% !important;
    height: -webkit-fill-available !important;
}

.skin-purple-light.menu-sidebar .sidebar-menu > li >  .treeview-menu .fa{
    font-size: 20px;
    width: 30px;
    visibility: hidden;
}

.skin-purple-light.menu-sidebar .sidebar-menu > li >  .treeview-menu>li>a{
    /*padding: 20px 15px;*/
    /* padding: 15px 15px; */
    border-bottom: 1px solid rgba(156,153,152,0.5);
}

ol > li{
    list-style: decimal; 
}

.link-btn a {
    color: inherit;
}

.section-header__title h5 { 
    font-weight: 600;
    margin: 0;
}

.select-action-btn{

}

.select-action-btn > div > span{
    height: 110%;
}

.select-action-btn > .el-input--suffix .el-input__inner{
    background-color: #1F5FA1;
    color: #fff;
}

.select-action-btn > .el-input__suffix > .el-input__suffix-inner > .el-input__suffix > .el-select__caret{
    color: #fff;
}

.select-action-btn > div > input{
    height: 35px;
}

.select-action-btn > div.el-input.el-input--large.el-input--suffix > span > span > i {
    color: #fff;
}

/*--Request--*/
.request-approval-dialog > .el-dialog > .el-dialog__header{
    background: #262261 !important;
}

.request-approval-dialog > .el-dialog > .el-dialog__header > button{
    display: none;
}

.request-approval-dialog > .el-dialog > .el-dialog__header > span > div {
    margin-bottom: 10px;
    margin-top: 20px;
}

.request-approval-dialog > .el-dialog > .el-dialog__header > span > div > span{
    color: #ffff;
    font-size: 18px;
}

.request-approval-dialog > .el-dialog > .el-dialog__header > span > div > span{
    color: #ffff;
    font-size: 18px;
}

.req-list-approval-form > .approval-notes {
    margin-top: 20px;
}

.req-list-approval-form > .btn-group {
    margin-top: 24px;
    text-align: center;
    width: 100%;
}

.req-list-approval-form > .btn-group > button {
    margin-left: 2px;
    margin-right: 2px;
}

.btn-width-90{
    width: 90px;
}

.btn-min-width-90{
    min-width: 90px;
    max-width: 100%;
    white-space: normal !important;
    word-break: break-word;
}

.request-pop-up-modal > div > .el-dialog__header {
    border-bottom: none !important;
}

.request-list.right-toolbar.toolbar-action {
    align-items: center;
    display: inline-flex;
    justify-content: flex-end;
    width: 100%;
}

/*Leave Management*/
.employee-attendance-status-popover {
    padding: 4px !important;
    border-radius: 50% !important;
}

.attendance-status-button.el-button--info {
    color: #FDFDFE;
    background-color: #BFBFBF;
    border-color: #BFBFBF;
}

.attendance-status-button.el-button--warning {
    background-color: #D1BC00;
    border-color: #CF3306;
}

.attendance-status-button.el-button--success {
    background-color: #3A9F2E;
    border-color: #3A9F2E;
}


/* ------------ mobile footer -------------- */
@media (max-width: 768px){
    .skin-purple-light.menu-sidebar .main-footer{
        display: none;
    }
}


/* ------------ mobile - header -------------- */
@media (max-width: 768px){
    .skin-purple-light header .mobile-header{
        height: 48px;
        background: #fff;
    }

    header .mobile-header i{
        font-size: 20px;
    }

    header .mobile-header .sidebar-toggle{
        font-size: 21px;
        padding: 8px 15px;
    }

    header .mobile-header .global-search{     
        float: right;
        background-color: transparent;
        padding: 8px 15px;
    }

    header .mobile-header .mobile-navbar-menu{
        margin: 0;
    }

    header .mobile-header .mobile-navbar-menu .quick-create-button{
        position: absolute;
        left: 40px;
    }

    header .mobile-header .mobile-navbar-menu .quick-create-button.open > a{
        background: #fff;
    }

    header .mobile-header .mobile-navbar-menu .quick-create-button .dropdown-toggle > img{
        width: 30px;
        height: 30px;
    }

    header .mobile-header .mobile-navbar-menu .quick-create-button .dropdown-toggle > span{
        display: none;
    }

    header .mobile-header .mobile-navbar-menu .quick-create-button .dropdown-menu{
        background: #fff;
        box-shadow: 0 0 0 #4d4d4d inset, 0 1px 2px rgba(156,153,152,0.5);
    }

    .web-sidebar.mobile-sidebar.sidebar-active{
        left: 230px;
        width: 100% !important;
        top: 0 !important;
        z-index: 1050 !important;
        background: #fff !important;
    }
    .mobile-sidebar .mobile-top{
        position: absolute;
        top: 0;
        width: 100%;
        height: 48px;
        background: #fff;
        box-shadow: 0 0px 0 #4d4d4d inset, 0 1px 2px rgba(156,153,152,0.5);
        padding: 10px 15px;
    }
    .mobile-sidebar .mobile-top .sidebar-close{
        width: 60px;
        text-align: center;
    }
    .mobile-sidebar .mobile-top .logo img{
        height: 27px;
    }
    .mobile-sidebar .mobile-top .navbar-nav{
        position: absolute;
        right: 0;
        top: 0;
        margin: 0;
    }
    .mobile-sidebar .mobile-top .navbar-nav > li{
        display: inline-block;
    }
    .mobile-sidebar .mobile-top .navbar-nav > li > a{
        line-height: 24px;
    }
    .mobile-sidebar .mobile-top .navbar-nav >  li a i {
        font-size: 20px;
        color: #555;
    }
    .mobile-sidebar .mobile-top .navbar-nav .user-language ul.dropdown-menu{
        position: absolute;
        margin: 0 !important;
    }
    .mobile-sidebar .mobile-top .navbar-nav .user-language ul.dropdown-menu .user-tip{
        display: none;
    }
    .mobile-sidebar .mobile-top .navbar-nav .user-language ul.dropdown-menu .user-language-list{
        padding: 0 !important;
    }
    .mobile-sidebar .mobile-top .navbar-nav .user-language ul.dropdown-menu .language-picker{
        box-shadow: 0 0px 0 #4d4d4d inset, 0 1px 2px rgba(156,153,152,0.5);
    }
    .mobile-sidebar .mobile-top .navbar-nav .user-language ul.dropdown-menu .language-picker a{
        padding: 10px;
        display: inline-block;
        line-height: 0;
    }
    .mobile-sidebar .mobile-top .navbar-nav .user-board ul.dropdown-menu{   
        position: fixed;
        top: 48px;
        width: calc(100vw - 80px);
        left: 80px;
        height: calc(100vh);
    }
    .mobile-sidebar .sidebar-scroll{
        width: 80px;
        display: inline-block;
        border-right: 1px solid #DDD; 
        height: calc(100vh - 50px);
    }
    .mobile-sidebar .sidebar .sidebar-menu > li > a{
        text-align: center;
        padding: 8px 5px;
    }

    .mobile-sidebar .sidebar .sidebar-menu > li > .treeview-menu.menu-open .submenu-header,
    .mobile-sidebar .sidebar .sidebar-menu > li.treeview.menu-open > .treeview-menu .submenu-header
    {
        width: calc(100vw - 80px) !important;
    }
    .mobile-sidebar .sidebar .sidebar-menu > li > .treeview-menu.menu-open .submenu-header::before,
    .mobile-sidebar .sidebar .sidebar-menu > li.treeview.menu-open > .treeview-menu .submenu-header::before
    {
        content: "\74";
        position: absolute;
        left: 30px;
        font-size: 18px;
        color: #EB008B;
        font-family: "posbangcon-1" !important;
    }
    .mobile-sidebar .sidebar .sidebar-menu > li >a>.pull-right-container{
    
        display: none;
        position: fixed;
        top: 75px;
        left: 80px;
        right: auto;
        z-index: 1071;
    }
     
    .mobile-sidebar .sidebar .sidebar-menu >  li.active>a>.pull-right-container,
    .mobile-sidebar .sidebar .sidebar-menu >  li.treeview.menu-open>a>.pull-right-container{
    
        display: block;
        -webkit-animation: myback 0.5s forwards;
        animation: myback 0.5s forwards;
    }

    .mobile-sidebar .sidebar .sidebar-menu > li.active>a>.pull-right-container >.fa-angle-left,
    .mobile-sidebar .sidebar .sidebar-menu > li.treeview.menu-open>a>.pull-right-container >.fa-angle-left{
        transform: rotate(0deg);
        font-size: 30px;
        margin-left: 0;
        width: 20px;
        visibility: hidden;
    }
    .mobile-sidebar .sidebar .sidebar-menu > li > a > .fa{
        font-size: 26px;
    }

    .mobile-sidebar .sidebar .sidebar-menu > li > a > span{
        font-size: 10px !important;
    }

    .skin-purple-light.menu-sidebar .main-sidebar.web-sidebar.mobile-sidebar .sidebar-menu > li > .treeview-menu{
        position: fixed;
        top: 50px;
        left: -300px;
        width: 300px;
        background: #fff;
        height: 100%;        
        height: -webkit-fill-available;
        padding-left: 0;
        z-index: -1;
        -webkit-transition: left .3s ease;
        transition: left .3s ease;
    } 



    .skin-purple-light.menu-sidebar .main-sidebar.mobile-sidebar .sidebar-menu > li.active > .treeview-menu.menu-open, 
    .skin-purple-light.menu-sidebar .main-sidebar.mobile-sidebar .sidebar-menu > li.treeview.menu-open ul.treeview-menu{
        left: 80px !important;
        z-index: 1070 !important;
        width: calc(100vw - 80px);
    }

    .mobile-sidebar .sidebar .sidebar-menu .treeview-menu .pull-right-container{
        display: none;
    }

    .mobile-sidebar .sidebar .sidebar-menu .treeview-menu .sub-menu-tree i{
        visibility: hidden;
    }

    .mobile-sidebar .sidebar .sidebar-menu .treeview-menu .sub-menu-tree > a{
        width: calc(100vw - 80px) !important;
        height: 40px !important;
    }

    .mobile-sidebar .sidebar .sidebar-menu .treeview-menu .treeview-menu{
        padding-left: 30px;
    }

    .mobile-sidebar .mobile-right{
        width: calc(100vw - 90px) !important;
        display: inline-block;
        vertical-align: top;
    }

    .mobile-sidebar .mobile-right .profile{
        text-align: center;
        margin-top: 80px;
    }

    .mobile-sidebar .mobile-right .profile .user-header-img{
        width: 68px;
        height: 68px;
        display: inline-block;
    }
    .mobile-sidebar .mobile-right .profile .user-name{
        font-size: 16px;
    }
    .mobile-sidebar .mobile-right .profile .user-email{
        font-size: 14px;
        color: #555;
    }
    .mobile-sidebar .mobile-right .profile .user-btn a{
        background-color: #EB008B;
        padding: 10px 30px !important;
        border-radius: 30px;
        display: inline-block;
        color: #fff;
        font-size: 12px;
        margin-bottom: 10px;
        
    }
    .mobile-sidebar .mobile-right .profile .user-logout a{
        background-color: #fff;
        border: 1px solid #CCC;
        padding: 10px 30px !important;
        border-radius: 30px;
        display: inline-block;
        color: #333;
        font-size: 12px;
        
    }

    .wit-sidebar.control-sidebar.control-sidebar-open{
        z-index: 1060;      
        padding-top: 0;
        margin-top: 50px;
        width: calc(100vw - 80px);
    }
}

.toolbar-action > span, .toolbar-action > div, .toolbar-action > button, .toolbar-action > a{
    margin: 0 2px !important;
}

.action-search.el-input{
    width: auto !important;
}

/* ------------ mobile - content -------------- */
@media (max-width: 768px){
    .skin-purple-light.menu-sidebar .content-wrapper{
        border: 0;
    }
    .skin-purple-light .content-wrapper section.content{
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ------------ mobile - homepage - dump -------------- */
@media (max-width: 768px){
    
    .content .home-page h1{
        font-size: 16px;
    }

    .content  .home-page .dump-list .el-checkbox__label{
        font-size: 12px;
    }

    .content .home-page .dump-list .el-radio-group{
        display: table;
        width: 100%;
    }

    .content .home-page .dump-list .el-radio-group label{
        display: table-cell;
        padding-right: 2px;
    }
    .content .home-page .dump-list .el-radio-group label::last-child{
        padding-right: 0px;
    }

    .content .home-page .dump-list .el-radio-group label span.el-radio-button__inner{
        width: 100%;
    }

    .content .home-page .dump-list .dump-content{
        padding-bottom: 10px;
    }

    .content .home-page .dump-list .dump-button{
        display: table;
        width: 100%;
    }

    .content .home-page .dump-list .dump-button > button,
    .content .home-page .dump-list .dump-button > .el-select{
        display: table-cell;
        width: 50%;
    }
    .content .home-page .dump-list .dump-button > button,
    .content .home-page .dump-list .dump-button > .el-select .el-input__inner{
        height: 40px;
    }

   .content .home-page .dump-list .dump-button > .el-select{
        padding-right: 2px;
    }

    .content .home-page .dump-list .dump-button > button{
        margin-left: 0;
    }

    .content .home-page .activity-feed .el-col-6{
        width: 50%;
    }

}

/*El Table Styling Match Datatable*/

    .default-el-table-styling {
        border-left: 1px solid #DDD !important;
        border-right: 1px solid #DDD !important;
        border-top: 1px solid #DDD !important;
    }

    .default-el-table-styling > div.el-table__header-wrapper > table > thead > tr > th{
        background-color: #F3F3F3 !important;
    }

    .default-el-table-styling > div.el-table__header-wrapper > table > thead > tr > th > div {
        color: #757575 !important;
    }

/**
    Spacing for reusabilty and to avoid redundancy :(
*/
    /* Margin All */
.m-5 { margin: 5px !important; }
.m-10 { margin: 10px !important; }
.m-15 { margin: 15px !important; }
.m-20 { margin: 20px !important; }
.m-25 { margin: 25px !important; }
.m-30 { margin: 30px !important; }
.m-40 { margin: 40px !important; }
.m-50 { margin: 50px !important; }
.m-100 { margin: 100px !important; }

/* Margin Top */
.mt-5 { margin-top: 5px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-25 { margin-top: 25px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-50 { margin-top: 50px !important; }
.mt-100 { margin-top: 100px !important; }

/* Margin Left */
.ml-5 { margin-left: 5px !important; }
.ml-10 { margin-left: 10px !important; }
.ml-15 { margin-left: 15px !important; }
.ml-20 { margin-left: 20px !important; }
.ml-25 { margin-left: 25px !important; }
.ml-30 { margin-left: 30px !important; }
.ml-40 { margin-left: 40px !important; }
.ml-50 { margin-left: 50px !important; }
.ml-100 { margin-left: 100px !important; }

/* Margin Right */
.mr-5 { margin-right: 5px !important; }
.mr-10 { margin-right: 10px !important; }
.mr-15 { margin-right: 15px !important; }
.mr-20 { margin-right: 20px !important; }
.mr-25 { margin-right: 25px !important; }
.mr-30 { margin-right: 30px !important; }
.mr-40 { margin-right: 40px !important; }
.mr-50 { margin-right: 50px !important; }
.mr-100 { margin-right: 100px !important; }

/* Margin Bottom */
.mb-5 { margin-bottom: 5px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-15 { margin-bottom: 15px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-25 { margin-bottom: 25px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-50 { margin-bottom: 50px !important; }
.mb-100 { margin-bottom: 100px !important; }

/* Padding All */
.p-5 { padding: 5px !important; }
.p-10 { padding: 10px !important; }
.p-15 { padding: 15px !important; }
.p-20 { padding: 20px !important; }
.p-25 { padding: 25px !important; }
.p-30 { padding: 30px !important; }
.p-40 { padding: 40px !important; }
.p-50 { padding: 50px !important; }
.p-100 { padding: 100px !important; }

/* Padding Top */
.pt-5 { padding-top: 5px !important; }
.pt-10 { padding-top: 10px !important; }
.pt-15 { padding-top: 15px !important; }
.pt-20 { padding-top: 20px !important; }
.pt-25 { padding-top: 25px !important; }
.pt-30 { padding-top: 30px !important; }
.pt-40 { padding-top: 40px !important; }
.pt-50 { padding-top: 50px !important; }
.pt-100 { padding-top: 100px !important; }

/* Padding Left */
.pl-5 { padding-left: 5px !important; }
.pl-10 { padding-left: 10px !important; }
.pl-15 { padding-left: 15px !important; }
.pl-20 { padding-left: 20px !important; }
.pl-25 { padding-left: 25px !important; }
.pl-30 { padding-left: 30px !important; }
.pl-40 { padding-left: 40px !important; }
.pl-50 { padding-left: 50px !important; }
.pl-100 { padding-left: 100px !important; }

/* Padding Right */
.pr-5 { padding-right: 5px !important; }
.pr-10 { padding-right: 10px !important; }
.pr-15 { padding-right: 15px !important; }
.pr-20 { padding-right: 20px !important; }
.pr-25 { padding-right: 25px !important; }
.pr-30 { padding-right: 30px !important; }
.pr-40 { padding-right: 40px !important; }
.pr-50 { padding-right: 50px !important; }
.pr-100 { padding-right: 100px !important; }

/* Padding Bottom */
.pd-5 { padding-bottom: 5px !important; }
.pd-10 { padding-bottom: 10px !important; }
.pd-15 { padding-bottom: 15px !important; }
.pd-20 { padding-bottom: 20px !important; }
.pd-25 { padding-bottom: 25px !important; }
.pd-30 { padding-bottom: 30px !important; }
.pd-40 { padding-bottom: 40px !important; }
.pd-50 { padding-bottom: 50px !important; }
.pd-100 { padding-bottom: 100px !important; }


.border-btm-so-1 {
    border-bottom: 1px solid #dddddd;
}

.text-underline{
    text-decoration: underline;
}

/*Position Relative*/
.pstn-relative {
    position: relative !important;
}

.mg-none {
    margin: 0 !important;
}

.pd-none{
    padding: 0 !important;
}

.border-none {
    border: none !important;
}

.item-color-disabled { color: #ADADAD/*#6c6e76*/; }

.table-bg-transparent, 
.table-bg-transparent > tr,
.table-bg-transparent > tr > td{
    background-color: transparent !important;
}

/*btx*/

.menu-sidebar.theme-default.layout-top-nav.skin-purple-light .main-header .navbar, 
.menu-sidebar.theme-default.layout-top-nav.skin-purple-light .main-header .logo{
    background-color: #262262;
    padding: 0px 15px 0px 40px;
}

.menu-sidebar.theme-default .navbar-nav>.user-menu>.dropdown-toggle>span{
    color: white;
    margin-left: 10px;
    font-size: 13px;
}  

/* Settings Menu Navigation */

    .el-main {
        padding:0px;
    }

    .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
        background-color: #2D7DD2 !important;
        color: #ffffff !important;
    }
    .el-tabs__active-bar {
        background-color: #2D7DD2;

    }
    .el-tabs__item.is-active {
        color: #2D7DD2;
    }

/* End of Settings Menu Navigation */

/* Attendance Summary */

.attendance-summary-by-department .el-table th > .cell {
    text-align: center;
}

/* End of Attendance Summary */

.witty-label.is-item-required::before{
    content: '*';
    color: #A30000;
    margin-right: 4px;
}

input.el-select__input {
    height: 30px !important;
}

input.el-select__input {
    min-width: fit-content !important;
}