.user-profile{
    background: url('../plugins/images/profile-menu-dark.png') center center/cover no-repeat;
}

.user-profile .user-pro-body .u-dropdown{
    color: #ffffff;
}

#project-timeline .steamline .sl-left{
    margin-left: -7px;
}

#section-line-1, #section-line-2, #section-line-3{
    padding: 0;
}


.select2-container-multi .select2-choices .select2-search-choice{
    border: 1px solid #929291;
    border-radius: 60px;
    background: #edda54;
    padding: 10px 10px 10px 20px;
}

.select2-container-multi .select2-search-choice-close{
    left: 7px;
    top: 9px;
}

.task-checkbox{
    display: inline;
}

.task-completed{
    background: #defbe3;
}

.task-completed label{
    color: #c5c5c5;
}

.task-completed .edit-task{
    text-decoration: line-through;
}

/*task ease transition*/
#task-list-panel {
    -webkit-transition: width 0.3s ease, margin 0.3s ease;
    -moz-transition: width 0.3s ease, margin 0.3s ease;
    -o-transition: width 0.3s ease, margin 0.3s ease;
    transition: width 0.3s ease, margin 0.3s ease;
}

.stop-timer-modal{
    width: 170px;
}

#active-timer-modal{
    font-size: xx-large;
}

@media (min-width: 768px){
    .sidebar {
        padding-top: 83px;
    }
}
.client-panel-name{
    padding: 3px 0 0 8px;
    color: white;
    text-align: center;
    text-transform: uppercase;
    background: #00c292;
}

.member-panel-name{
    padding: 3px 0 0 8px;
    color: white;
    text-align: center;
    text-transform: uppercase;
    background: #f1c411;
}


.admin-panel-name{
    padding: 3px 0 0 8px;
    color: white;
    text-align: center;
    text-transform: uppercase;
    background: #ed4040;
}

.project-admin-panel-name{
    padding: 3px 0 0 8px;
    color: white;
    text-align: center;
    text-transform: uppercase;
    background: #5475ed;
}

.chat-main-box .chat-left-aside{
    border: 0;
}

.chat-right-aside{
    border-left: 1px solid rgba(120,130,140,.13);
}

.logo{
    overflow: hidden;
    display: block;
}

.logo b{
    float: left;
}

.logo span{
    display: block;
    margin-top: 19px;
}

.logo img{
    max-height:40px;
    display:inline-block;
    max-width:200px;
    line-height:60px;
    text-align:center;
    margin: 10px 0;
}
/*.admin-logo{*/
    /*background-color: #ed4040;*/
/*}*/
/*.member-logo{*/
    /*background-color: #f7c80c;*/
/*}*/
/*.client-logo{*/
    /*background-color: #00c292;*/
/*}*/
/*.project-admin-logo{*/
    /*background-color: #5475ed;*/
/*}*/

.error-box{background:url(../plugins/images/error-bg.jpg) center center no-repeat #fff!important;}

.login-register{
    background: url(../hrm.gif) center center/auto 90vh no-repeat!important;
    max-width: calc(100% - 400px);
}

.form-material .form-control, .form-material .form-control.focus, .form-material .form-control:focus{
    background-image: linear-gradient(#000000,#a4a3a5),linear-gradient(rgba(120,130,140,.13),rgba(120,130,140,.13));
}

.auth-logo{
    font-size: 25px;
    margin: 7px 10px;
}

.language-switcher{
    margin: 12px 5px 0 0;
}

.language-switcher .dropdown-toggle, .language-switcher .dropdown-toggle:hover, .language-switcher .dropdown-toggle:focus, .language-switcher .dropdown-toggle:active{
    background: rgba(255, 255, 255, 0.05);
    font-weight: 200;
    color: #FFFFFF;
}

.datepicker-dropdown{
    z-index: 9999 !important;
}

.vtabs{
    width: 100%;
}
.vtabs .tabs-vertical{
    width: 250px;
}

@media screen and (max-width: 58em){
    .sttabs nav a span {
        display: block;
    }
}

.table-responsive{
    overflow: visible;
}

.table-responsive .dropdown-menu{
    right: 0;
    left: auto;
}

.top-left-part a{
    height: 60px;
}

#ticket-messages{
    max-height: 350px;
    overflow-y: auto;
}

#footer-sticky-notes{
    right: 12px;
    background: rgba(0, 0, 0, 0.80);
    bottom: 0;
    position: fixed;
    width: 300px;
    z-index: 3;
}

#sticky-note-header{
    padding: 10px;
    color: #ffffff;
    border-bottom: 1px solid #ccc;
}

#sticky-note-list{
    padding: 0 5px;
    overflow-y: auto;
}

#sticky-note-list .sticky-note{
    margin: 5px 0;
    color: #FFFFFF;
}

#sticky-note-list .sticky-note .well{
    margin-bottom: 0;
}

#sticky-note-list .sticky-note .well hr{
    border-color: #FFFFFF;
}

.board-column{
    background-color: #fbfbfb;
    /*margin-left: 10px;*/
}

.board-column .panel-body{
    padding: 10px;
}

.lobipanel .panel-body{
    cursor: move;
}

.board-column .panel-heading a i{
    font-size: 18px;
}

.p-t-5{
    padding-top: 5px !important;
}
.p-b-5{
    padding-bottom: 5px !important;
}
.p-t-15{
    padding-top: 15px !important;
}
.p-b-15{
    padding-bottom: 15px !important;
}

@media (min-width: 992px) {
    .container-scroll > .container-row {
        overflow-x: auto;
        white-space: nowrap;
    }

    .container-scroll > .container-row > .col-md-3 {
        display: inline-block;
        float: none;
        white-space: normal;
    }

    .container-scroll > .container-row > .col-md-2 {
        display: inline-block;
        float: none;
        white-space: normal;
    }

    /* Overwrite the default to keep the scrollbar always visible */

    ::-webkit-scrollbar {
        -webkit-appearance: none;
        height: 7px;
        width: 7px;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: rgba(0,0,0,.5);
        -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
    }
}

.container-scroll > .container-row {
    margin-top: 24px;
}

.two-part li span, .two-part li i{
    font-size: 25px;
}

.permission-section{
    background: #fdfdfd;
    padding: 0;
}

.role-members{
    padding-bottom: 16px !important;
    padding-top: 17px !important;
}

ul.thumbnails.image_picker_selector li{
    margin-right: 5px;
}

/*****************Date Picker ******************/
.bootstrap-datetimepicker-widget{
    padding:0!important;
    margin:0!important;
    width:auto!important
}
.bootstrap-datetimepicker-widget:after,.bootstrap-datetimepicker-widget:before{
    display:none!important
}
.bootstrap-datetimepicker-widget table td{
    text-shadow:none
}
.bootstrap-datetimepicker-widget table td span{
    margin:0
}
.bootstrap-datetimepicker-widget table td span:hover{
    background:transparent
}
.bootstrap-datetimepicker-widget [data-action=togglePicker] span{
    font-size:25px;
    color:#ccc
}
.bootstrap-datetimepicker-widget [data-action=togglePicker] span:hover{
    color:#333
}
.bootstrap-datetimepicker-widget a[data-action]{
    color:#009688
}
.timepicker-picker .btn{
    box-shadow:none!important
}
.timepicker-picker table tbody tr+tr:not(:last-child){
    background:#009688;
    color:#fff
}
.timepicker-picker table tbody tr+tr:not(:last-child) td{
    border-radius:0
}
.timepicker-picker .btn,.timepicker-picker .btn:hover{
    background:#fff;
    color:#333
}
.datepicker.top{
    -webkit-transform-origin:0 100%!important;
    -moz-transform-origin:0 100%!important;
    -ms-transform-origin:0 100%!important;
    transform-origin:0 100%!important
}
.datepicker table thead tr th{
    border-radius:0;
    color:#fff;
    background:#456d9f;
}
.datepicker table thead tr th .glyphicon{
    width:30px;
    height:30px;
    border-radius:50%;
    line-height:29px
}
.datepicker table thead tr th:hover .glyphicon{
    background:rgba(0,0,0,.2)
}
.datepicker table thead tr:first-child th{
    background:#009688;
    padding:20px 0
}
.datepicker table thead tr:first-child th:hover{
    background:#009688
}
.datepicker table thead tr:first-child th.picker-switch{
    font-size:16px;
    font-weight:400;
    text-transform:uppercase
}
.datepicker table thead tr:last-child th{
    text-transform:uppercase;
    font-weight:400;
    font-size:11px
}
.datepicker table thead tr:last-child th:first-child{
    padding-left:20px
}
.datepicker table thead tr:last-child th:last-child{
    padding-right:20px
}
.datepicker table thead tr:last-child:not(:only-child){
    background:#00877a
}
.datepicker table tbody tr:last-child td{
    padding-bottom:25px
}
.datepicker table tbody tr td:first-child{
    padding-left:13px
}
.datepicker table tbody tr td:last-child{
    padding-right:13px
}
.datepicker table td.day{
    width:35px;
    height:35px;
    line-height:20px;
    color:#333;
    position:relative;
    padding:0;
    background:transparent
}
.datepicker table td.day:hover{
    background:none
}
.datepicker table td.day:before{
    content:"";
    width:35px;
    height:35px;
    border-radius:50%;
    margin-bottom:-33px;
    display:inline-block;
    background:transparent;
    position:static;
    text-shadow:none
}
.datepicker table td.day.new,.datepicker table td.day.old{
    color:#cdcdcd
}
.datepicker table td:not(.today):not(.active):hover:before{
    background:#f0f0f0
}
.datepicker table td.today{
    color:#333
}
.datepicker table td.today:before{
    background-color:#e2e2e2
}
.datepicker table td.active{
    color:#fff
}
.datepicker table td.active:before{
    background-color:#009688
}
.datepicker-months .month,.datepicker-years .year,.timepicker-hours .hour,.timepicker-minutes .minute{
    border-radius:50%
}
.datepicker-months .month:not(.active):hover,.datepicker-years .year:not(.active):hover,.timepicker-hours .hour:not(.active):hover,.timepicker-minutes .minute:not(.active):hover{
    background:#f0f0f0
}
.datepicker-months .month.active,.datepicker-years .year.active,.timepicker-hours .hour.active,.timepicker-minutes .minute.active{
    background:#009688
}
.timepicker-hours .hour,.timepicker-minutes .minute{
    padding:0
}
.bootstrap-datetimepicker-widget table td.today:before{
    border-width:0
}
.picker-switch table tr td{
    padding:5px 0!important
}
.bootstrap-datetimepicker-widget a[data-action]{
    color:#fff
}
.bootstrap-datetimepicker-widget table td,.bootstrap-datetimepicker-widget table th{
    border-radius:0
}
.bootstrap-datetimepicker-widget .picker-switch td span.zmdi{
    width:30px;
    height:30px;
    border-radius:50%;
    line-height:30px;
    font-size:16px
}
.picker-switch table tr td a:hover span.zmdi{
    background:rgba(0,0,0,.2)
}
.bootstrap-datetimepicker-widget [data-action=togglePicker] span,.bootstrap-datetimepicker-widget [data-action=togglePicker] span:hover{
    color:#fff
}
.timepicker-picker .btn,.timepicker-picker .btn:hover{
    color:#333!important
}
.bootstrap-datetimepicker-widget table td span.timepicker-hour,.bootstrap-datetimepicker-widget table td span.timepicker-minute{
    height:40px;
    width:40px;
    line-height:40px
}
.bootstrap-datetimepicker-widget table td span.timepicker-hour:hover,.bootstrap-datetimepicker-widget table td span.timepicker-minute:hover{
    background:rgba(0,0,0,.2)
}
.bootstrap-datetimepicker-widget table td a:hover span.zmdi{
    color:#fff
}
.daterangepicker_input .input-mini.form-control{
    padding-left:25px;
    border:1px solid #ccc
}
.daterangepicker_input .input-mini.form-control.active{
    border:1px solid #08c
}
.bootstrap-datetimepicker-widget{
    z-index:99
}
.datepicker table tr td.active,.datepicker table tr td.active.disabled,.datepicker table tr td.active.disabled:hover,.datepicker table tr td.active:hover{
    background-color:#fff
}
.datepicker table tr td.active.active,.datepicker table tr td.active.disabled,.datepicker table tr td.active.disabled.active,.datepicker table tr td.active.disabled.disabled,.datepicker table tr td.active.disabled:active,.datepicker table tr td.active.disabled:hover,.datepicker table tr td.active.disabled:hover.active,.datepicker table tr td.active.disabled:hover.disabled,.datepicker table tr td.active.disabled:hover:active,.datepicker table tr td.active.disabled:hover:hover,.datepicker table tr td.active.disabled:hover[disabled],.datepicker table tr td.active.disabled[disabled],.datepicker table tr td.active:active,.datepicker table tr td.active:hover,.datepicker table tr td.active:hover.active,.datepicker table tr td.active:hover.disabled,.datepicker table tr td.active:hover:active,.datepicker table tr td.active:hover:hover,.datepicker table tr td.active:hover[disabled],.datepicker table tr td.active[disabled]{
    background-color:#fff;
    background-image:none
}
.datepicker table tr td.today,.datepicker table tr td.today.disabled,.datepicker table tr td.today.disabled:hover,.datepicker table tr td.today:hover{
    background-color:transparent;
    background-image:none
}
.datepicker table tr td.day:hover{
    background:transparent;
    background-image:none
}
.input-group .dtp-container.fg-line .form-control{
    z-index:0
}
.datepicker table thead tr:first-child th,.datepicker table thead tr:first-child th:hover{
    background:#456d9f
}
.datepicker table thead tr:last-child:not(:only-child){
    background:#3e6595
}
.picker-switch table tr td{
    background:#456d9f
}
.datepicker table td.active:before{
    background-color:#3e6595
}
.datepicker table tr td span.active.active,.datepicker table tr td span.active.disabled,.datepicker table tr td span.active.disabled.active,.datepicker table tr td span.active.disabled.disabled,.datepicker table tr td span.active.disabled:active,.datepicker table tr td span.active.disabled:hover,.datepicker table tr td span.active.disabled:hover.active,.datepicker table tr td span.active.disabled:hover.disabled,.datepicker table tr td span.active.disabled:hover:active,.datepicker table tr td span.active.disabled:hover:hover,.datepicker table tr td span.active.disabled:hover[disabled],.datepicker table tr td span.active.disabled[disabled],.datepicker table tr td span.active:active,.datepicker table tr td span.active:hover,.datepicker table tr td span.active:hover.active,.datepicker table tr td span.active:hover.disabled,.datepicker table tr td span.active:hover:active,.datepicker table tr td span.active:hover:hover,.datepicker table tr td span.active:hover[disabled],.datepicker table tr td span.active[disabled]{
    background-color:#3e6595;
    background-image:none;
    background:#3e6595
}
.timepicker-hours .hour,.vtable-search+.bootstrap-datetimepicker-widget .datepicker-months .month,.vtable-search+.bootstrap-datetimepicker-widget .datepicker-years .year,.vtable-search+.bootstrap-datetimepicker-widget .timepicker-minutes .minute{
    border-radius:4px
}
.vtable-search+.bootstrap-datetimepicker-widget .datepicker table tr td span{
    height:40px;
    line-height:40px
}
.bootstrap-datetimepicker-widget table td a:hover span.zmdi,.timepicker-picker table tbody tr+tr:not(:last-child),.toggle-switch:not([data-ts-color]) input:not(:disabled):checked+.ts-helper:before{
    background:#3e6595
}
.toggle-switch:not([data-ts-color]) input:not(:disabled):checked+.ts-helper{
    background:rgba(62,101,149,.58)
}

.datepicker table tr td.today.active,.datepicker table tr td.today.disabled,.datepicker table tr td.today.disabled.active,.datepicker table tr td.today.disabled.disabled,.datepicker table tr td.today.disabled:active,.datepicker table tr td.today.disabled:hover,.datepicker table tr td.today.disabled:hover.active,.datepicker table tr td.today.disabled:hover.disabled,.datepicker table tr td.today.disabled:hover:active,.datepicker table tr td.today.disabled:hover:hover,.datepicker table tr td.today.disabled:hover[disabled],.datepicker table tr td.today.disabled[disabled],.datepicker table tr td.today:active,.datepicker table tr td.today:hover,.datepicker table tr td.today:hover.active,.datepicker table tr td.today:hover.disabled,.datepicker table tr td.today:hover:active,.datepicker table tr td.today:hover:hover,.datepicker table tr td.today:hover[disabled],.datepicker table tr td.today[disabled]{
    background-color:transparent
}
.bootstrap-datetimepicker-widget>div.row{
    display:flex;
    align-items:center;
    padding:5px
}
.bootstrap-datetimepicker-widget{
    padding:15px
}

/************ Team Page ****************/

.person-image-container {
    display: inline-block;
    z-index: 1;
    max-width: 100%;
    vertical-align: bottom;
    margin-bottom:30px;
    max-height: 150px;
}
.hover-type-zoomin{
    overflow:hidden
}

.hover-type-zoomin img{
    opacity:1;
    transition:opacity 1s,-webkit-transform 1s;
    transition:opacity 1s,transform 1s;
    transition:opacity 1s,transform 1s,-webkit-transform 1s
}
.hover-type-zoomin:hover img{
    opacity:.9;
    -webkit-transform:scale3d(1.1,1.1,1);
    transform:scale3d(1.1,1.1,1)
}
.users-list{
    list-style: none;
    margin: 0;
    padding: 0;
}

.users-list>li{
    float:left;
    padding:25px;
    text-align:center;
    margin-bottom:20px;
    cursor:pointer;
}
.users-list>li img{
    max-width:100%;
    height: 150px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
    border: 10px solid #efefef;
}

.users-list>li>a:hover,.users-list>li>a:hover .user-name{
    color:#999
}

.person_name {
  font-size:18px;
}

.user-name,.user-designation{
    display:block;
}
.user-name{
    font-weight:600;
    color:#444;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis
}
.user-designation{
    color:#999;
    font-size:14px;
    min-height:60px;
}

.palette-Light-Blue-700.bg {
    background-color: #0288d1;
}

#jobApplicationModal .modal-header {
    padding: 26px 26px;
    color:#fff !important;
}
#jobApplicationModal .modal-header h4, #jobApplicationModal .modal-header .close {color:#fff !important;}
.palette-Grey-200.bg {
    background-color: #eee;
}
.publicLink {
    border: 0 none;
    width: 100%;
    padding: 5px;
}
.f-700 {
  font-weight: 700!important;
}

.palette-Yellow.text {
  color: #ffeb3b;
}

.palette-Pink-700.bg {
  background-color: #c2185b;
}

#calendar .fc-day-grid-event {
    margin: 1px 3px;
}
.white-box{
    border-radius: 8px;
}
.card {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

.card-img-top {
    border-top-right-radius: calc(.25rem - 1px);
    border-top-left-radius: calc(.25rem - 1px);
}

.card-block {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}

.card-title {
    margin-bottom: .75rem;
}


@media (min-width: 768px){

    .tableFixHead          { overflow-y: auto; max-height: 700px; }
    .tableFixHead thead th { position: sticky; top: 0; }

    /* Just common table stuff. Really. */
    table  { border-collapse: collapse; width: 100%; }
    th, td { padding: 8px 16px; }
    th     { background:#fff; }
}

/* attendance info */
.punch-det {
    background-color: #f9f9f9;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 10px 15px;
}

.punch-det h6 {
    line-height: 20px;
    margin-bottom: 0;
}

.punch-det p {
    color: #727272;
    font-size: 14px;
    margin-bottom: 0;
}

.punch-info {
    margin-bottom: 20px;
}

.punch-hours {
    align-items: center;
    border: 5px solid #5fc798;
    border-radius: 50%;
    display: flex;
    font-size: 18px;
    height: 120px;
    justify-content: center;
    margin: 0 auto;
    width: 120px;
}

.recent-activity .res-activity-list {
    max-height: 336px;
    list-style-type: none;
    margin-bottom: 0;
    overflow-y: auto;
    padding-left: 30px;
    position: relative;
}

.recent-activity .res-activity-list li {
    margin-bottom: 15px;
    position: relative;
}

.recent-activity .res-activity-list li:before {
    content: "";
    position: absolute;
    border-radius: 100%;
    width: 10px;
    height: 10px;
    left: -30px;
    top: 0px;
    border: 2px solid #ff9b44;
    margin-right: 15px;
    z-index: 2;
    background: #fff;
}
.recent-activity p {
    font-size: 13px;
    margin-bottom: 0;
}

.recent-activity .res-activity-time {
    color: #bbb;
    font-size: 12px;
}

.recent-activity .res-activity-list:after {
    content: "";
    border: 1px solid #e5e5e5;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
}
.radio-info input[type="radio"] + label:before {
    border-color: #5e5e5e;
}

@media (max-width:1400px){
    .users-list > li img{height: 100px;}
}
@media (max-width:1024px){
    .users-list > li{margin-bottom: 0;padding-bottom: 10px;}
}
@media (max-width:480px){
    .users-list > li{width: 100%;}
    .person-image-container{max-height: none;}
    .users-list > li img {height: 200px;}
}