/* Move down content because we have a fixed navbar that is 50px tall */
* {
    font-family: Meiryo, Open Sans, serif;
}

body {
    padding-top: 50px;
    padding-bottom: 0;
}

iframe {
    height: 0px;
}

.chatting-iframe {
    height: 700px;
    border: 0px;
}

.theme-default {
    background: #FFF !important;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
}

#main-navbar {
    position: fixed !important;
}

#mainMenu .navigation a {
    overflow: hidden;
}

#mainMenu .navigation .menu-icon {
    background-repeat: no-repeat;
    background-position: center center;
    float: left;
}

#mainMenu .navigation .mm-text {
    float: left;
    width: 70%;
    cursor: pointer;
}

.menu-icon.my-task-icon {
    background-image: url(../Images/tms_icon_my_tasks.png);
}

.selected .menu-icon.my-task-icon {
    background-image: url(../Images/tms_icon_my_tasks_w.png);
}

.menu-icon.project-icon {
    background-image: url(../Images/tms_icon_project.png);
}

.selected .menu-icon.project-icon {
    background-image: url(../Images/tms_icon_project_w.png);
}

.menu-icon.user-icon {
    background-image: url(../Images/tms_icon_user.png);
}

.selected .menu-icon.user-icon {
    background-image: url(../Images/tms_icon_user_w.png);
}

.menu-icon.client-icon {
    background-image: url(../Images/tms_icon_client.png);
}

.selected .menu-icon.client-icon {
    background-image: url(../Images/tms_icon_client_w.png);
}

#mainMenu .navigation li.item-margin {
    margin-top: 10px;
}

#mainMenu .navigation b {
    color: #000000;
}

#mainMenu .navigation i.subprojectdropdown {
    float: right;
    position: relative;
    top: -20px;
    right: 30px;
    height: 0px;
    cursor: pointer;
}

#mainMenu .navigation .fa-plus-circle {
    float: right;
    margin-right: 10px;
    cursor: pointer;
    padding: 3px 4px;
    font-size: 16px;
    line-height: 16px;
    position: relative;
    top: -25px;
    right: 15px;
    height: 0px;
    color: #808b9c;
}

    #mainMenu .navigation .fa-plus-circle:hover {
        color: #FFFFFF;
    }

.middle-content {
    padding: 2px 10px 2px 10px;
}

#notification {
    position: fixed;
    z-index: 99999999;
    top: 15px;
    left: 135px;
    width: 80%;
}


.AddTaskForm {
    margin: 10px auto;
}

.TaskCreateForm {
    height: auto;
}

    .TaskCreateForm .form-control {
        overflow: hidden;
        height: auto;
        box-shadow: 2px 2px 8px 2px;
        top: -47px;
        position: relative;
        z-index: 1000;
    }

        .TaskCreateForm .form-control .col-sm-12 {
            padding: 0px;
            margin: 0px;
            margin-bottom: 8px;
        }

            .TaskCreateForm .form-control .col-sm-12 .col-sm-6:first-child {
                padding-left: 0px;
            }

            .TaskCreateForm .form-control .col-sm-12 .col-sm-6:last-child, .TaskCreateForm .form-control .col-sm-12 .col-sm-3 {
                padding-right: 0px;
            }

        .TaskCreateForm .form-control label {
            color: #999;
            font-size: 12px;
            padding-left: 0px;
            text-transform: capitalize;
        }

        .TaskCreateForm .form-control select, .TaskCreateForm .form-control input, .TaskCreateForm .form-control textarea {
            border: 1px solid #CCC;
            border-radius: 3px;
            padding: 6px;
            width: 100%;
            font-weight: 600;
            color: #1a1a1a;
            font-size: 12px;
        }

        .TaskCreateForm .form-control select {
            text-transform: capitalize;
        }

.modal-body .TaskCreateForm .form-control {
    overflow: hidden;
    height: auto;
    box-shadow: none;
    top: 0;
    position: relative;
    z-index: 1000;
}
/*.TaskCreateForm .form-control select option:first-child {
            color: #999;
        }*/
.TaskCreateForm .form-control select option {
    color: #1a1a1a;
}

.recurrentTaskForm {
    position: relative;
    background-color: #F5F5F5;
    margin: 0 -10px;
    padding: 0 15px;
}

    .recurrentTaskForm .cancel {
        position: absolute;
        top: 3px;
        right: 15px;
        font-weight: bold;
        font-size: 20px;
        cursor: pointer;
    }

        .recurrentTaskForm .cancel:hover {
            opacity: 0.7;
        }

    .recurrentTaskForm .form-title {
        font-weight: bold;
        font-size: 15px;
        margin-top: 8px;
    }

    .recurrentTaskForm #weekly-weekdays {
        margin-top: 10px;
    }

    .recurrentTaskForm form {
        overflow: hidden;
    }

.taskTitle {
    border: 1px solid #00DA9D;
    border-radius: 3px;
    padding: 0px;
    overflow: hidden;
}

    .taskTitle input:first-child {
        width: 82%;
        float: left;
        padding: 10px 5px;
        border: none;
        max-width: 100% !important;
        height: 100%;
    }


    .taskTitle input:last-child {
        float: right;
        width: 17%;
        background: #00DA9D;
        padding: 10px;
        color: #FFF;
        border: none;
        font-weight: bold;
        font-size: 14px;
    }

.CancelButton {
    text-align: right;
    padding-right: 0px;
    height: 0px;
}

    .CancelButton img {
        position: relative;
        top: -60px;
        right: -15px;
        z-index: 3000;
    }

.font-size-11 {
    font-size: 11px;
}

.menu-number-control {
    width: 24px !important;
    padding-top: 3px;
}

.hr-style {
    float: left;
    padding-top: 2px;
}

.taskTitle02 {
    padding: 0;
}

.menu-padding-margin {
    padding-top: 7px;
    margin-bottom: 8px;
}

.project-menu-container {
    display: inline-block;
}

.project-menu-container-02 {
    display: inline-block;
}

.project-menu-container-03 {
    display: inline-block;
}

.project-menu-container-04 {
    display: inline-block;
}

.project-menu-container-05 {
    display: inline-block;
}

.taskTitle02-project {
    width: 120px;
}

.taskTitle02-category {
    width: 120px;
}

.taskTitle02 select {
    border: 0px;
    float: left;
    background-color: transparent;
}

.taskTitle02 input {
    border: 0;
    width: 110px;
    float: left;
    background-color: transparent;
    padding-left: 4px;
}

.icon-menu {
    width: 12px;
    display: inline-block;
    height: 15px;
    background-repeat: no-repeat;
    vertical-align: middle;
    background-size: 100%;
    float: left;
    margin-top: 2px;
}

.padding-right-0 {
    padding-right: 0px;
}

.taskTitle02-select-small {
    width: 54px !important;
}

.error-content {
    background-color: #f3b6b6;
    padding: 5px;
}

.icon-project {
    background-image: url(/Content/icons/tms_icon_project.png);
}

.icon-category {
    background-image: url('/Content/icons/tms_icon_category.png');
}

.icon-calender {
    background-image: url('/Content/icons/tms_icon_calendar.png');
}

.icon-clock {
    background-image: url('/Content/icons/tms_icon_estimation.png');
    margin-top: 4px;
}

.icon-mailTo {
    font-size: 17px;
    font-weight: 900;
    color: #6ad99c;
    cursor: pointer;
}


.icon-attachment {
    background: url('/Content/icons/tms_icon_attachment.png') center right no-repeat;
    width: 11px;
    height: 14px;
    background-size: cover;
}

.attachment-icon-container {
    width: 8px;
    height: 15px;
    display: inline-block;
    padding: 6px 0px;
}

.icon-endDate {
    width: 0px;
}

.icon-priority {
    width: 4px;
    height: 14px;
}



.nav-bar-float {
    position: absolute;
    z-index: 100;
    width: 100%;
    border: 1px solid rgba(216, 215, 215, 0);
    background-color: rgb(255, 255, 255);
    border-color: #d4d4d4;
    border-top: 0;
}

.padding-top-10 {
    padding-top: 10px;
}
/*--------- Master Page CSS ------*/
#main-navbar .user-menu > img {
    height: 32px !important;
    width: 32px !important;
}

.theme-default #main-navbar {
    background: #1A1A1A !important;
}

    .theme-default #main-navbar #main-menu-toggle {
        background: #1A1A1A !important;
    }

    .theme-default #main-navbar .navbar-header {
        background: #1A1A1A !important;
    }

    .theme-default #main-navbar .navbar-collapse {
        background: #1A1A1A !important;
        border-top: none;
    }

    .theme-default #main-navbar .right > .navbar-nav > li {
        border: none !important;
    }
/*.theme-default #main-navbar .right > .navbar-nav > li.nav-icon-btn {
        width: 35px !important;
    }
    .theme-default #main-navbar .right > .navbar-nav > li.nav-icon-btn:hover {
        width: 35px !important;
    }*/

#main-menu-inner {
    background: #ebebeb;
    padding: 10px;
}

.navbar-brand {
    width: 200px !important;
}

#logo {
    width: 200px !important;
    float: left;
    margin-top: 10px;
}

    #logo img {
        width: 125px !important;
        height: auto !important;
    }

.mmc #mainMenu {
    left: -240px !important;
}

    .mmc #mainMenu #main-menu-inner {
    }

#content-wrapper {
    padding: 0px !important;
    padding-left: 15px !important;
}

.mmc #main-wrapper {
    padding-left: 0px !important;
}

.theme-default #main-navbar .navbar-brand div, .theme-default .demo-logo {
    background: none !important;
}

.search-field {
    margin-top: 31px;
    margin-left: 0px;
    background: #FFF;
    width: 100%;
    border-radius: 3px;
    color: #999;
    padding-left: 12px;
}

#main-navbar .navbar-inner {
    min-height: 50px !important;
}

.search-field input {
    padding: 6px 3px 6px 6px;
    border: none;
}

input[type="text"], input[type="password"], textarea, select {
    outline: none !important;
}

.theme-default .form-control.focus, .theme-default .form-control:focus {
    border: 1px solid #ccc;
}

#main-menu-inner ul.navigation {
    /* padding-top: 10px !important; */
}

    #main-menu-inner ul.navigation ul {
        padding-left: 0px;
    }

        #main-menu-inner ul.navigation ul li {
            padding-left: 25px;
            float: left;
        }

            #main-menu-inner ul.navigation ul li ul li {
                color: #000;
                float: left;
            }

#mainMenu li {
    float: left;
    width: 100%;
}

    #mainMenu li#liMyTasks {
        background-color: transparent;
        border: solid 1px #d4d4d4;
        border-radius: 3px;
        margin-top: 6px;
        margin-bottom: 6px;
    }

        #mainMenu li#liMyTasks a {
            color: #999 !important;
        }

        #mainMenu li#liMyTasks.selected .my-task-icon {
            background-image: url(../Images/tms_icon_my_tasks.png);
        }

.theme-default #mainMenu .navigation a:after {
    background-color: transparent;
}

#mainMenu li#liMyProjects {
    background-color: #5c5c5c;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 3px;
}

#mainMenu .mmc-dropdown-open-ul a, #mainMenu .navigation a {
    padding: 4px 10px !important;
}

    #mainMenu .mmc-dropdown-open-ul a, #mainMenu .navigation a:before {
        top: 10px !important;
        right: 32px !important;
        font-size: 16px !important;
    }

.theme-default #mainMenu .mm-dropdown.open > a {
    color: inherit;
}

.theme-default #mainMenu .mm-dropdown > ul.subProjList {
    background: transparent !important;
}

.successMessage {
    color: green;
    font-size: 13px;
}

.fa-question-circle, .fa-cog, .fa-caret-down, .fa-angle-down {
    font-size: 20px;
    color: #999;
}

/*--------- Left Navigation CSS ------*/
.navigation .selected {
    background-color: #00da9d;
}

.theme-default #mainMenu .mmc-dropdown-open-ul a, .theme-default #mainMenu .navigation a {
    text-transform: capitalize;
}

    .theme-default #mainMenu .navigation a:hover {
        color: #000;
    }

    .theme-default #mainMenu .navigation a.selected {
        color: #FFF !important;
    }

.theme-default #mainMenu .navigation .selected a {
    color: #FFF !important;
}

.status {
    padding: 1px 10px;
    font-weight: bold;
    background-color: #58B856;
    color: #fff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.navigation-accordion .fa {
    font-family: FontAwesome;
}

.navigation-accordion {
    margin-top: 10px;
    margin-bottom: 0px;
}

    .navigation-accordion .panel {
        background-color: transparent;
        border: none;
        box-shadow: none !important;
    }

    .navigation-accordion .panel-heading {
        background-color: transparent;
    }

    .navigation-accordion .panel .panel-title,
    .navigation-accordion #myTaskPanel {
        padding: 5px 10px 5px 10px;
        background-color: #5c5c5c;
        color: #ccc;
        border-radius: 2px;
    }

        .navigation-accordion .panel .panel-title .project-icon {
            background-image: url(../Images/tms_icon_project.png);
        }

        .navigation-accordion .panel .panel-title .user-icon {
            background-image: url(../Images/tms_icon_user.png);
        }

        .navigation-accordion .panel .panel-title .client-icon {
            background-image: url(../Images/tms_icon_client.png);
        }

        .navigation-accordion .panel .panel-title.nav-selected {
            background-color: #00d99b;
        }

        .navigation-accordion .panel .panel-title .openCloser-wrapper {
            display: block;
            float: left;
            margin: -5px 0px 0px -10px;
            padding: 5px 0px 5px 10px;
            cursor: pointer;
        }

        .navigation-accordion .panel .panel-title .openCloser {
            float: left;
            padding: 0px 5px 0px 0px;
            cursor: pointer;
            color: #cccccc;
            font-size: 20px;
            min-width: 17px;
        }

        .navigation-accordion .panel .panel-title .fa-plus-circle {
            float: right;
            cursor: pointer;
            padding: 0px 0px 0px 0px;
            font-size: 16px;
            line-height: 20px;
            color: #00d99b;
        }

        .navigation-accordion .panel .panel-title .menu-icon {
            display: inline-block;
            margin-right: 5px;
            line-height: 20px;
            height: 20px;
            width: 20px;
            text-align: center;
            font-size: 14px;
            background-repeat: no-repeat;
            background-position: center center;
            float: left;
        }

        .navigation-accordion .panel .panel-title .mm-text {
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            min-width: 65%;
            display: inline-block;
        }

        .navigation-accordion .panel .panel-title.nav-selected .openCloser,
        .navigation-accordion .panel .panel-title.nav-selected .fa-plus-circle,
        .navigation-accordion .panel .panel-title.nav-selected .mm-text {
            color: #fff;
        }

        .navigation-accordion .panel .panel-title.nav-selected .project-icon {
            background-image: url(../Images/tms_icon_project_w.png);
        }

        .navigation-accordion .panel .panel-title.nav-selected .user-icon {
            background-image: url(../Images/tms_icon_user_w.png);
        }

        .navigation-accordion .panel .panel-title.nav-selected .client-icon {
            background-image: url(../Images/tms_icon_client_w.png);
        }


    .navigation-accordion .collapse .panel-body {
        padding: 0;
        padding-top: 0;
    }

    .navigation-accordion .collapse.in .panel-body,
    .navigation-accordion .collapsing .panel-body {
        background-color: transparent;
        border: none;
        padding: 0px;
        border-top: none !important;
    }

        .navigation-accordion .collapsing .panel-body::before {
            content: none !important;
            display: none !important;
        }

    .navigation-accordion .panel-body ul {
        margin: 0;
    }

        .navigation-accordion .panel-body ul li img.company-user {
            margin-left: 5px;
            margin-top: 10px;
        }

        .navigation-accordion .panel-body ul li a,
        .navigation-accordion .panel-body ul li a:active,
        .navigation-accordion .panel-body ul li a:visited {
            color: #666;
            font-weight: 500;
            font-size: 13px;
            text-decoration: none;
            padding: 6px 4px 6px 10px;
            display: block;
            margin-top: 6px;
        }

            .navigation-accordion .panel-body ul li a.nav-selected {
                background-color: #00d99b;
                border-radius: 2px;
            }

            .navigation-accordion .panel-body ul li a.nav-selected {
                color: #fff;
            }

            .navigation-accordion .panel-body ul li a .subProjectOpenCloser {
                float: left;
                padding: 0px 5px 0px 0px;
                cursor: pointer;
                color: #cccccc;
                font-size: 20px;
            }

            .navigation-accordion .panel-body ul li a.nav-selected .subProjectOpenCloser {
                color: #fff;
            }

            .navigation-accordion .panel-body ul li a .counter {
                float: right;
                background-color: #bababa;
                border-radius: 20px;
                color: #fff;
                padding: 2px 10px;
                font-weight: 700;
                font-size: 11px;
            }

            .navigation-accordion .panel-body ul li a.nav-selected .counter {
                background-color: #fff;
                color: #00d99b;
            }

        .navigation-accordion .panel-body ul li .subProjectOpenCloser-wrapper {
            display: block;
            float: left;
            margin: 5px 0px 0px 0px;
            padding: 6px 0px 5px 10px;
            cursor: pointer;
        }

            .navigation-accordion .panel-body ul li .subProjectOpenCloser-wrapper .subProjectOpenCloser {
                float: left;
                padding: 0px 5px 0px 0px;
                cursor: pointer;
                color: #a9a7a7;
                font-size: 20px;
            }

                .navigation-accordion .panel-body ul li .subProjectOpenCloser-wrapper .subProjectOpenCloser.openCloser-selected {
                    color: #fff;
                }

        .navigation-accordion .panel-body ul li a + ul li a {
            padding-left: 25px !important;
        }

        .navigation-accordion .panel-body ul li .company-user.companyUser-selected {
            background-color: #fff;
        }

    .navigation-accordion #myTaskPanel {
        color: #999;
        width: 100%;
        display: block;
        background-color: transparent;
        border: solid 1px #d4d4d4;
        margin-top: 0px;
        margin-bottom: 5px;
        border-radius: 2px;
        cursor: pointer;
    }

        .navigation-accordion #myTaskPanel.panel-title-span.nav-selected {
            color: #fff;
            background-color: #00d99b;
            border: solid 1px #00d99b;
            cursor: pointer;
        }

        .navigation-accordion #myTaskPanel .menu-icon {
            display: inline-block;
            margin-right: 5px;
            line-height: 20px;
            height: 20px;
            width: 20px;
            text-align: center;
            font-size: 14px;
            background-repeat: no-repeat;
            background-position: center center;
            float: left;
        }

        .navigation-accordion #myTaskPanel.nav-selected .my-task-icon {
            background-image: url(../Images/tms_icon_my_tasks_w.png);
        }

        .navigation-accordion #myTaskPanel .my-task-icon {
            background-image: url(../Images/tms_icon_my_tasks.png);
        }

        .navigation-accordion #myTaskPanel .mm-text {
            cursor: pointer;
            min-width: 60%;
            display: inline-block;
        }

    .navigation-accordion ul > li > a:hover {
        color: #00d99b !important;
    }

    .navigation-accordion ul > li > a.nav-selected:hover {
        color: #fff !important;
    }

    .navigation-accordion .menu-icon {
        cursor: pointer;
    }
/*--------- project Details page css Start------*/
.project-menu-bar {
}

    .project-menu-bar ul li {
        display: inline-block;
        border-right: 1px solid #cccccc;
        width: auto;
        padding: 6px 4px;
    }

    .project-menu-bar ul {
        width: auto;
        border: 1px solid #CCC;
        margin: 0px;
        padding: 0px;
        position: relative;
        overflow: hidden;
    }



.projectDetails .project-details-itemDetails {
    border-left: 1px solid #EAEBEB;
    padding-left: 10px;
    padding-top: 10px;
    border-right: 1px solid #EAEBEB;
    min-height: 700px;
}

.projectDetails .project-details-itemList {
    padding: 0px;
    z-index: 1000;
}

    .projectDetails .project-details-itemList a {
        border: none !important;
        padding: 12px !important;
    }

        .projectDetails .project-details-itemList a.active {
            border: none !important;
        }

    .projectDetails .project-details-itemList .item {
        color: #999;
        float: left;
        width: 100%;
        text-align: left;
        font-size: 14px;
        font-weight: 600;
    }

    .projectDetails .project-details-itemList .selected {
        background: #E4FBF5;
    }

.DetailsContainer h4 {
    font-size: 12px;
    font-weight: bold;
    color: #333;
}

.DetailsContainer label:first-child {
    font-size: 12px;
    font-weight: normal;
    color: #999999;
}

.DetailsContainer label:last-child,
.DetailsContainer label:last-child a {
    font-size: 13px;
    font-weight: normal;
    color: #333;
}

.DetailsContainer .detailsHeader {
    margin-bottom: -30px;
    z-index: 1000;
}

.DetailsContainer .detailsContent {
    z-index: 0;
}

.task-title-duration .CatActiveButton {
    border: 1px solid #58b856;
    border-radius: 4px;
    padding: 2px 8px;
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    color: #58b856;
    position: relative;
}

.task-title-duration .CatGlobalButton {
    border: 1px solid #999;
    background: #999;
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 2px 10px;
    color: #fff;
    position: relative;
}

.Containerbox .task-list li {
    height: 55px;
}

    .Containerbox .task-list li .task-title-duration {
        overflow: visible !important;
        width: 100%;
        max-width: 100%;
    }

.Containerbox a:hover {
    color: #333 !important;
    text-decoration: none;
}

.task-title-duration .project-name {
    font-size: 11px;
}

.Right-top-Button {
    float: right;
    width: auto;
    border-radius: 4px;
    background: #00DA9D;
    color: #FFF;
    padding: 4px 6px;
    cursor: pointer;
}

    .Right-top-Button span {
    }

.datepicker-dropdown.datepicker-orient-bottom, .datepicker-dropdown.datepicker-orient-top {
    z-index: 10000 !important;
    overflow: hidden;
}

#SubProjectForm {
}

    #SubProjectForm .modal-body {
        overflow: hidden;
        height: auto;
    }

        #SubProjectForm .modal-body .form-control {
            overflow: visible;
            position: inherit;
            box-shadow: none;
            border: none;
            z-index: 0;
        }



.PermissionsContainer ul {
    padding-left: 10px;
}

    .PermissionsContainer ul li {
        border-bottom: 1px solid #CCC;
        height: auto;
        display: inline-block;
        width: 100%;
        min-height: 55px;
    }

        .PermissionsContainer ul li .ModuleNameContainer {
            font-weight: 600;
            margin-bottom: 10px;
        }

        .PermissionsContainer ul li .ActionWithPermissionContainer .ActionBlock {
            max-width: 70px !important;
            min-width: 60px !important;
        }

.PermissionsContainer select {
    border: 1px solid #CCC;
    padding: 6px;
    margin-bottom: 20px;
    border-radius: 4px;
    color: #9C9C9C;
    font-weight: bold;
    font-size: 14px;
}

.PermissionsContainer .RoleSelectionArea {
    padding-left: 20px;
    border-bottom: 1px solid #CCC;
    margin-bottom: 9px;
}

    .PermissionsContainer .RoleSelectionArea span {
        font-weight: bold;
        font-size: 14px;
        margin-right: 6px;
    }

.switcher-state-on {
    background: #000 !important;
}

.ng-binding .unchecked {
    opacity: .6;
}

.switcher-sm {
    width: 110px !important;
    height: 20px !important;
}

    .switcher-sm .switcher-toggler {
        height: 14px !important;
        width: 14px !important;
    }

    .switcher-sm .switcher-state-on {
        margin-right: -4px !important;
    }

    .switcher-sm .switcher-state-off {
        padding-left: 20px !important;
    }

.unchecked .switcher-toggler {
    margin-left: 6px !important;
}

.SavePermission {
    background: #09DBA1;
    width: auto;
    float: right;
    padding: 3px 8px;
    color: #FFF;
    border-radius: 4px;
}

    .SavePermission button {
        background: transparent;
        border: none;
    }
/*--------- project Details page css End------*/

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .modal-dialog {
        z-index: 10500;
    }

    .changeAssigneeForm {
        z-index: 100 !important;
    }

    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
}


/* Start of Index Page Harun */



ul li {
    list-style: none;
}

hr {
    margin: 5px;
    float: left;
    width: 100%;
}

.project-name {
    color: #00DA9D;
    font-size: 14px;
    font-weight: 600;
}

#timeSheetPage .project-name, #timeSheetPage .project_client {
    font-size: 12px;
}

.project_client {
    color: #999999;
    font-size: 14px;
    font-weight: 400;
}

.project_shipment {
    color: #999999;
    font-size: 10px;
    font-weight: 400;
}

.task-title {
    font-weight: 600;
    color: #333333;
    font-size: 13px;
}

.task-duration {
    color: #FFF;
    font-size: 10px;
    font-weight: 600;
    margin-right: 10px;
    background: #C6C6C6;
    padding: 2px;
}

.btn-info, .btn-info:focus, .btn-info:active, .btn-info:hover {
    background: #00DA9D !important;
    border-color: #00DA9D !important;
}

.btn-info-reverse {
    color: #00DA9D;
    border: 2px solid #00DA9D !important;
    background-color: #FFFFFF;
    background-image: none;
    padding: 7px 4px !important;
}

.modal-footer .btn + .btn {
    background: #00DA9D;
    border-color: #00DA9D;
}

.modal-footer .btn-default {
    background-color: #ECECEC !important;
    border-color: #BCBCBC !important;
    margin-left: 10px;
}

.project-list {
    padding: 10px 0;
    margin: 0;
    float: left;
    width: 100%;
}

.task-list {
    display: table;
    padding: 10px 0 10px 0px;
    margin: 0;
    float: left;
    width: 100%;
    table-layout: fixed;
}

.show-scroll {
    width: 98% !important;
}

.task-row {
    display: table-row;
    vertical-align: middle;
    width: 100%;
    padding: 10px 0;
}

    .task-row td {
        padding-top: 8px;
        padding-left: 5px;
    }

    .task-row:focus {
        background-color: #F1FDFA;
    }

    .task-row:hover {
        background-color: #F1FDFA;
    }

li.selected, tr.selected {
    background-color: #e4fbf5;
}

.Containerbox .task-list li:hover {
    background: #FFF !important;
}

.task-row:active {
    background-color: #F1FDFA;
}

.task-row:current {
    background-color: #F1FDFA;
}

.task-title-duration {
    float: left;
    max-width: 56%;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-left: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.client-task-title-duration {
    width: 53%;
}

.task-options-1 {
    float: right;
    width: 23%;
}

.task-options-2 {
    float: right;
    color: #999999;
    margin: 1px 5px;
}

.time-left {
    font-size: 12px;
    font-weight: 600;
    color: #999;
}

.time_overdue {
    color: #DA534B;
    font-size: 12px;
    font-weight: 600;
}

.loghr {
    width: 56px;
    margin: 0 10px;
    border: 1px solid #cccccc;
    padding: 4px 5px;
    color: #333;
    border-radius: 3px;
    text-align: right;
    font-size: 12px;
}

.tasks-topbar {
    width: 100%;
    margin-top: 10px;
    padding: 0px;
    margin-bottom: 15px;
}

    .tasks-topbar select {
        border: 1px solid #CCC;
        color: #1a1a1a;
        font-weight: 600;
        padding: 5px 6px;
        border-radius: 3px;
        width: 125px;
    }

    .tasks-topbar input {
        border: none;
        box-shadow: none;
        color: #333;
        font-weight: normal;
        padding: 2px 6px;
        border-radius: 3px;
    }

        .tasks-topbar input.focus {
            border: none !important;
        }

    .tasks-topbar.uploaded-files {
        width: 100%;
        margin-top: 0;
        margin-bottom: 0;
    }

        .tasks-topbar.uploaded-files .TaskSearch {
            border: 1px solid #cccccc;
            font-size: 13px;
            font-weight: 400;
            color: #333333;
            border-radius: 3px;
            padding: 3px 8px;
            height: 34px;
            margin-bottom: 22px;
        }

            .tasks-topbar.uploaded-files .TaskSearch .fa-search {
                font-family: FontAwesome;
                font-style: normal;
                font-size: 14px;
                font-weight: 400;
                color: #ccc;
                line-height: 1.9;
            }

            .tasks-topbar.uploaded-files .TaskSearch input::placeholder {
                color: #999999;
                opacity: 1; /* Firefox */
            }

            .tasks-topbar.uploaded-files .TaskSearch input:-ms-input-placeholder {
                color: #999999;
            }

            .tasks-topbar.uploaded-files .TaskSearch input::-ms-input-placeholder {
                color: #999999;
            }

        .tasks-topbar.uploaded-files .btn-group .btn-outline {
            line-height: 18px;
        }

#ShowHideTimeLog {
    width: 54%;
    background: #E4FBF5;
    position: fixed;
    bottom: 0px;
    padding: 14px 0px;
    z-index: 300;
    display: none;
    border-top: 1px solid #ddd;
    margin-left: -15px;
}


.save-timelog-area {
    padding: 0px !important;
    text-align: right;
}

    .save-timelog-area h5 {
        font-weight: 600;
    }

    .save-timelog-area .LogTimeFor {
        color: #999;
        font-size: 12px;
    }

    .save-timelog-area .timelogField {
        border: 1px solid #CCC;
        border-radius: 3px;
        padding: 5px;
        background: #FFF;
        display: inline-block;
        font-family: FontAwesome;
    }

        .save-timelog-area .timelogField input {
            width: 110px;
            margin-left: 2px;
            font-size: 12px;
            color: #999;
            font-weight: bold;
            padding: 0px;
            height: 20px;
            border: none;
        }

        .save-timelog-area .timelogField button {
            padding: 8px 3px !important;
        }

.TaskSearch {
    border: 1px solid #CCC;
    color: #ccc;
    border-radius: 3px;
    padding: 3px 8px;
    height: 32px;
}

.btn-icon-only {
    padding: 6px 10px;
    background: #FFF;
    box-shadow: none;
    border: 1px solid #CCC;
    border-radius: 3px;
}

.search-input {
    width: 100px;
    border: none;
    box-shadow: none;
    font-size: 13px;
    padding: 2px 6px;
    color: #555;
}

.search-input-length {
    width: 200px !important;
}

.show-upcoming {
    float: left;
    margin-right: 5px;
    border-color: #00DA9D !important;
    color: #00DA9D !important;
    margin-top: 20px;
    padding: 9px;
    box-sizing: border-box;
    margin-bottom: 4px;
}

.comment-text {
    width: 100%;
    max-width: 100%;
    margin-bottom: 5px;
}

.marker {
    display: none;
}

    .marker + label {
        background-image: url('/Images/mark_as_done.png');
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        white-space: nowrap;
    }

.mark-as-done {
    font-size: 10px;
    font-weight: 400;
}

.marker:checked + label {
    background-image: url('/Images/marked_as_done.png');
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    white-space: nowrap;
}

.DoneIcon {
    background-image: url('/Images/marked_as_done.png');
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    white-space: nowrap;
    padding-left: 22px;
}

.marker + label span.mark-as-done {
    margin-left: 20px;
    display: inline;
    color: #ccc;
    font-size: 11px;
    font-weight: 600;
}

.marker + label span.marked-as-done {
    margin-left: 20px;
    display: none;
    color: #999999;
}

.marker:checked + label span.mark-as-done {
    display: none;
}

.marker:checked + label span.marked-as-done {
    display: inline;
}

.has-comment {
    color: red;
    font-weight: bold;
}

.task-detail-panel {
    width: 100%;
}

.task-detail-row {
    width: 100%;
    padding: 5px;
    float: left;
}

    .task-detail-row span a {
        color: #333333;
    }

    .task-detail-row .progress {
        height: 12px;
    }

    .task-detail-row .add-comment-icon {
        float: right;
        cursor: pointer;
        padding: 3px 4px;
        font-size: 16px;
        line-height: 16px;
        color: #808b9c;
    }

        .task-detail-row .add-comment-icon:hover {
            color: #00DA9D;
        }

.task-no {
    font-size: 13px;
    font-weight: normal;
    color: #3F89C8;
    float: left;
    margin-top: 5px;
}

.delete-close {
    float: right;
}

    .delete-close a {
        box-shadow: none;
        border: 1px solid #FFF !important;
        font-weight: 600;
        padding: 2px 2px;
        color: #999 !important;
        top: 1px;
        position: relative;
    }

    .delete-close button {
        margin: 0 5px;
    }

    .delete-close i {
        cursor: pointer;
        font-size: 12px;
    }

.close-attachment {
    float: right;
    top: 16px;
    position: relative;
    font-size: 15px !important;
    right: 3px;
    cursor: pointer;
    opacity: 0;
}

label.task-title {
    font-size: 14px;
    font-weight: normal;
    color: #333333;
}

.task-heading {
    font-size: 12px;
    font-weight: bold;
    color: #333333;
}

.task-prop-label {
    font-size: 12px;
    font-weight: normal;
    color: #999999;
    width: 90px;
    float: left;
}

.task-prop-label-line {
    font-size: 12px;
    font-weight: normal;
    color: #999999;
    width: 100%;
    float: left;
}

    .task-prop-label-line i {
        font-size: 9px !important;
        margin: 0 5px 5px 0;
    }

    .task-prop-label-line li {
        overflow: hidden;
        width: 100%;
        margin-bottom: 0px !important;
    }


.task-prop-value {
    font-size: 13px;
    font-weight: normal;
    color: #333333;
    float: left;
}

.task-assignee {
    font-size: 11px;
    font-weight: normal;
    color: #333333;
    float: left;
}

    .task-assignee img {
        border-radius: 999999px;
        -webkit-border-radius: 999999px;
        -moz-border-radius: 999999px;
        width: 20px;
        height: 20px;
    }

.hrs {
    width: auto;
    text-align: left;
    margin-right: 2px;
    color: #333333 !important;
    font-weight: bold !important;
    font-size: 11px !important;
    float: left;
}

.editable-controls {
    z-index: 1000;
    position: relative;
    background: #FFF;
}

.flexRow {
    display: flex;
}

    .flexRow .takeRemainingWidth {
        float: left;
        flex-grow: 100;
    }

.status {
    padding: 1px 10px;
    font-weight: bold;
    background-color: #58B856;
    color: #fff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    text-transform: uppercase;
}

.priority {
    color: #1a1a1a;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    position: relative;
    top: -2px;
    text-transform: uppercase;
}

.priorityvalue {
    width: 5px;
    height: 15px;
    float: left;
}

.High {
    background-color: #da534b;
}

.Medium {
    background-color: #f7931e;
}

.Low {
    background-color: #58b856;
}

.fc-event.High {
    background-color: #F8E5E4 !important;
}

.fc-event.Medium {
    background-color: #FFF3E6 !important;
}

.fc-event.Low {
    background-color: #E8FAF1 !important;
}

#main-wrapper .fc-icon:after {
    margin: 0;
}


.HighTask {
    border-left: 4px solid #da534b;
}



.MediumTask {
    border-left: 4px solid #f7931e;
}

.LowTask {
    border-left: 4px solid #58b856;
}

.container {
    padding: 0;
    margin: 0;
    width: 100%;
}

.progress-container {
    padding: 0 !important;
}

.progress {
    background-color: #EAEBEB;
    height: 17px;
    width: 90%;
    margin: 3px auto !important;
}

.hideme {
    display: none;
}

.alert {
    margin-bottom: 0 !important;
}

.progressing {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 99999;
    background-color: transparent;
    bottom: 0;
    right: 0;
    opacity: 1.0;
}

    .progressing img {
        /*margin: 38% 0 0 45%;
        width: 100px;*/
        margin: 35% 0 0 40%;
        width: 150px;
    }

.progressingInTaskDetails, .progressingInTaskDetailsModal {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 99999;
    background-color: transparent;
    bottom: 0;
    right: 0;
    opacity: 1.0;
    height: 0px;
}

    .progressingInTaskDetails img, .progressingInTaskDetailsModal img {
        margin: 0% 0 0 45%;
        width: 50px;
    }
/* End of Index Page harun*/


/* Start of Login Page by Mazharul */
.login-page-panel {
    width: 100%;
    margin: 130px auto;
    background: #FFF;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.login-header {
    text-align: center;
    position: relative;
    top: 14px;
}

.login-page-panel .UserNameField, .login-page-panel .UserPasswordField {
    border: 1px solid #CCC;
    border-radius: 4px;
    width: 100%;
    padding: 3px;
    overflow: hidden;
}

    .login-page-panel .UserNameField input, .login-page-panel .UserPasswordField input {
        border-left: 1px solid #CCC !important;
        border: none;
        width: 87%;
        margin-left: 20px;
        float: left;
        font-size: 15px;
        color: #1a1a1a;
        box-shadow: none;
    }

    .login-page-panel .UserNameField img, .login-page-panel .UserPasswordField img {
        width: 20px;
    }

ul.dropdown-menu .fa-user:before {
    font-size: 14px;
    top: 0px;
    left: 0px;
}

.fa-user:before, .fa-key:before {
    float: left;
    position: relative;
    top: 10px;
    left: 11px;
    font-size: 16px;
    color: #CCC;
}

.login-button {
    background: #00DA9D;
    color: #FFF;
    text-align: center;
    padding: 10px;
    border-radius: 4px;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    border: none;
}

    .login-button a {
        color: #FFF;
        font-size: 14px;
        font-weight: bold;
    }

.login-page-panel .externalLoginArea {
    background: #EAEBEB;
    border-right: 2px solid #DDD;
    padding: 0px 20px;
    height: 100%;
    position: absolute;
}

.login-page-panel .loginArea {
    padding: 0px 20px;
}


.login-page-panel .externalLoginArea .FacebookLogin {
    background: #36609F;
    color: #FFF;
    margin: 10px 5px;
    padding: 8px;
    border-radius: 4px;
    display: none;
}

.login-page-panel .externalLoginArea .GoogleLogin {
    background: #DB5442;
    color: #FFF;
    margin: 10px 5px;
    padding: 8px;
    border-radius: 4px;
    display: none;
}

.login-page-panel .externalLoginArea .Office365Login {
    background: #0072C5;
    color: #FFF;
    margin: 10px 5px;
    padding: 8px;
    border-radius: 4px;
    display: none;
    height: 100px;
}

    .login-page-panel .externalLoginArea .FacebookLogin span, .login-page-panel .externalLoginArea .GoogleLogin span, .login-page-panel .externalLoginArea .Office365Login span {
        margin-left: 20px;
    }

.login-page-panel .externalLoginArea .headerText {
    margin: 50px 0px;
    font-size: 13px;
    color: #333;
    font-weight: 600;
    text-align: center;
}

.login-page-panel .externalLoginArea .bottomText {
    position: absolute;
    bottom: 20px;
}

    .login-page-panel .externalLoginArea .bottomText p {
        text-align: center;
        font-size: 12px;
        padding: 10px;
        color: #999;
        font-weight: 600;
    }

.rememberMeOption {
    color: #CCC;
    font-size: 12px;
}

.forgotPassword {
    text-align: right;
}

    .forgotPassword a {
        font-weight: 600;
        color: #00DA9D;
        font-size: 12px;
    }

.LoginAgain {
    text-align: left;
}

    .LoginAgain a {
        font-weight: bold;
        color: #00DA9D;
        font-size: 13px;
    }

.forgotPasswordContainer {
    background: #FFF;
    width: 40%;
    margin: 100px auto;
    border-radius: 4px;
    /* height: 260px; */
    padding: 50px;
}

.successIcon {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin: 10px auto;
}

    .successIcon span {
        color: #00DA9D;
        font-size: 60px;
    }

.passwordResetSucc {
    text-align: center;
}

    .passwordResetSucc strong {
        font-size: 15px;
        color: #00DA9D;
    }

.forgot-password-header strong {
    font-size: 15px;
    color: #333;
}

.forgot-password-header p {
    color: #999;
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
}

.set-password-panel {
    width: 30% !important;
}

    .set-password-panel .UserNameField input, .set-password-panel .UserPasswordField input {
        border-left: none !important;
        margin-left: 0px !important;
    }


/*------index page css take from harun vai inline css---------*/

.buttons-with-margins .btn {
    margin-bottom: 10px;
}

.btn-group .btn.active {
    background: none !important;
    background-color: #e4fbf5 !important;
    border: 1px solid #00da9d !important;
    color: #00da9d !important;
    font-weight: bold !important;
    box-shadow: none;
    pointer-events: none;
}

#view-header .panel {
    border: none;
    border-bottom: 2px solid #EAEBEB;
    margin: 0;
    padding: 2px 10px 0 10px;
}

#view-content, #middle-content-header {
    padding-left: 10px;
}

.mytask-title {
    font-size: 25px;
    padding: 0 0 10px;
    font-weight: 600;
}

.task-option-bar {
    float: left;
    width: 100%;
}


.task-option-bar-button {
    width: auto;
}

.btns-task-calendar {
    float: left;
    width: 100%;
}

    .btns-task-calendar .btn {
        text-transform: capitalize;
    }

.top-taskbar {
    background: none !important;
    background-color: #ffffff !important;
    border: none !important;
    padding-top: 0 !important;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
}

.projecttasks {
    max-height: 1800px !important;
    float: left !important;
    width: 100% !important;
    height: auto;
    overflow-y: hidden !important;
    margin: 10px 0 !important;
}

.MyTaskListViewer {
    padding: 0;
    margin: 0;
}

.comment {
    float: left;
    width: 100%;
    vertical-align: middle;
}

.comment-detail {
    float: left;
    color: #000000;
    font-size: 11px;
    padding-left: 25px;
    font-weight: 400;
    padding-bottom: 20px;
    width: 100%;
}

    .comment-detail .comment-html {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .comment-detail * {
        white-space: normal !important;
    }

.commenter {
    font-size: 13px;
    font-weight: bold;
    color: #333333;
    float: left;
    display: block;
    width: 100%;
}

    .commenter span {
        text-transform: capitalize;
    }

    .commenter img {
        border-radius: 999999px;
        -webkit-border-radius: 999999px;
        -moz-border-radius: 999999px;
        width: 20px;
        height: 20px;
    }

.comment-container-parent {
    background-color: #f7f7f7;
    padding: 5px;
    border-radius: 3px;
}

.comment-time {
    font-size: 10px;
    font-weight: normal;
    margin-top: 0px;
    color: #9e9e9e;
    padding-left: 10px;
}

.timelog-user {
    font-size: 10px;
    font-weight: 600;
    color: #333333;
}

.timelog-date {
    font-size: 10px;
    font-weight: normal;
    margin-top: 3px;
}

.timelog-hrs {
    color: #333333 !important;
    font-weight: bold !important;
    font-size: 10px !important;
    margin-top: 3px;
}

#timelogviewer, #ShowMoreButton, #showHideRecentActivity {
    cursor: pointer;
    margin-right: 4px;
}

#timelogcontainer {
    margin: 10px 0;
}

.recent-activity-header, .rightContentHeader {
    font-size: 16px;
    font-weight: 600;
    color: #1A1A1A;
    width: 100%;
    text-align: center;
}


.user {
    font-size: 13px;
    font-weight: bold;
    color: #1a1a1a;
    float: left;
    margin-right: 3px;
    text-transform: capitalize;
}

.project {
    color: #3F89C8;
    font-size: 13px;
    font-weight: 400;
}

.task {
    color: #3F89C8;
    font-size: 13px;
    font-weight: 400;
}

.loghrs {
    color: #000;
    font-style: italic;
}

.time-ago {
    color: #999999;
    font-size: 10px;
    font-weight: 600;
}

.dt_topbar {
    float: left;
}

    .dt_topbar .dataTables_filter {
        float: left !important;
    }

    .dt_topbar .dataTables_length {
        float: right !important;
    }

.dt_rows {
    float: left;
}

.dt_bottombar {
    float: left;
}

    .dt_bottombar .dataTables_info {
        float: left !important;
    }

    .dt_bottombar .dataTables_paginate {
        float: right !important;
    }

.task-loading {
    padding-left: 3px;
}

    .task-loading img {
        width: 16px;
        height: 16px;
    }

.hr {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    height: 10px;
    margin: 10px 0;
    width: 760px;
}

.fa-comment-o {
    position: relative !important;
}

.comment-badge {
    position: absolute !important;
    top: -9px !important;
    line-height: 10px !important;
    padding: 0 2px !important;
    right: -8px;
}

.unreadMsgCount {
    font-size: 13px !important;
    display: inline;
    position: absolute !important;
    top: 5px !important;
    right: 2px !important;
    background: #ffffff00;
    border: none;
    left: 23px;
    color: white;
}

select[ng-model='Priority'] option:nth-child(1) {
    color: #da534b !important;
    background: url(../Images/tms_icon_permission.png) no-repeat;
}

select[ng-model='Priority'] option:nth-child(2) {
    color: #f7931e !important;
}

select[ng-model='Priority'] option:nth-child(3) {
    color: #58b856 !important;
}

.dd .ddTitle .ddTitleText img {
    width: 30px !important;
}

.ddcommon .ddChild li img {
    width: 25px !important;
}

#tech_msdd {
    width: 100px !important;
    outline: none !important;
}


.projecttaskstat {
    position: relative;
    float: left;
    margin: 5px;
}

.projectmember {
    border-radius: 32px;
    float: left;
    margin-right: 0;
    width: 32px;
    height: 32px;
    border: 1px solid #cbcbcb;
}

.addprojectmember {
    background-color: #cbcbcb;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
    padding: 5px;
    font-weight: bolder;
    cursor: pointer;
}

.stat-badge {
    position: absolute !important;
    bottom: -5px !important;
    left: -5px;
    line-height: 10px !important;
    padding: 0 3px !important;
    color: #ffffff !important;
    background-color: #333333 !important;
}

.closedstat {
    float: left;
}

.activestat {
    float: right;
}

.statlabel {
    font-size: 14px;
    font-weight: normal;
    color: #707070;
}

.stat-value {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
}

.stat-rect {
    padding: 2px 10px;
    margin-right: 5px;
}

.closed-rect {
    background-color: #00DA9D;
}

.active-rect {
    background-color: #EAEBEB;
}

.taskuser {
    border-radius: 30px;
    float: left;
    width: 30px;
    height: 30px;
    margin-top: 4px;
}

.profile-manage-block {
    text-align: right;
}

    .profile-manage-block .row {
        margin-bottom: 10px;
    }

.profile-photo-container {
    width: 100px;
    height: 100px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    -khtml-border-radius: 60px;
    overflow: hidden;
    padding: 0px;
    margin: 0px auto;
    float: none;
    border: 1px solid #AAA;
}

.profile-photo {
    width: 100px;
    height: auto;
    min-height: 100px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    -khtml-border-radius: 60px;
    z-index: 0;
}

.link-info {
    color: #00DA9D;
    cursor: pointer;
    border: none;
    background: none;
}

.userprofile-label {
    font-size: 12px;
    font-weight: normal;
    color: #999999;
    margin-bottom: 10px;
}

.userprofile-value {
    font-size: 13px;
    font-weight: normal;
    color: #333333;
    float: left;
}

.user-project-list {
    padding: 0;
    margin: 0;
}

    .user-project-list li {
        border-bottom: 1px solid #e2e2e2;
        margin: 5px 0;
        padding-bottom: 10px;
    }

        .user-project-list li .status {
            border: 1px solid #00DA9D;
            color: #00DA9D;
            background: none;
            padding: 0 10px;
            margin-left: 5px;
            margin-right: 5px;
        }

        .user-project-list li .project-type {
            background-color: #999999;
            color: #FFFFFF;
            padding: 0 5px;
            border-radius: 5px;
        }

.companyname {
    color: #8D8D8D;
    padding: 10px 0px 0 10px;
    font-size: 15px;
    font-weight: 600;
}

.recurrent-interval {
    width: 80px !important;
    text-align: right;
}

.weekday {
    margin: 1px 5px;
}

    .weekday input[type='checkbox'] {
        margin-top: -5px;
        margin-right: 3px;
    }

    .weekday label {
        margin-top: -5px;
    }

.weekly-interval {
    text-transform: none;
}

    .weekly-interval input[type='number'] {
        margin: 1px 5px;
    }

.daily-interval {
    text-transform: none;
}

    .daily-interval input[type=radio] {
        margin: 1px 2px;
    }

    .daily-interval input[type=number] {
        margin: 1px 5px;
    }

    .daily-interval label {
        margin: 1px 3px;
    }

.languagelist {
    margin-top: 12px;
    background-color: #1A1A1A;
    border: 0;
    color: #8D8D8D;
    font-weight: 800;
}

ul.task-list li:after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    margin: 8px 0px;
    background: #e2e2e2;
    float: left;
}


tr.task-row td:after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    margin: 0px;
    background: #e2e2e2;
    float: left;
}

.editable {
    border: none;
}

    .editable:hover {
        border-bottom: dashed 1px #08c;
        cursor: text;
    }

.text-decoration-none {
    text-decoration: none !important;
    border-bottom: none !important;
}

    .text-decoration-none:hover {
        font-style: normal !important;
    }

.editable-click, a.editable-click {
    text-decoration: none;
    color: #333333 !important;
}

.task-detail-row pre {
    overflow: visible;
    word-break: unset;
    white-space: pre-line;
    background-color: transparent;
    font-size: 14px;
    padding: 0;
    font-style: normal;
    overflow-x: auto;
}

.company-user {
    border-radius: 32px;
    float: left;
    margin-right: 5px;
    width: 20px;
    height: 20px;
    margin-top: 5px;
}

#AddUserWindow .modal-dialog, #roleForm .modal-dialog, #AddCategoryWindow .modal-dialog {
    width: 330px;
    height: 300px;
    margin-top: 130px;
}

#AddUserWindow .modal-content {
    height: 300px;
    -webkit-box-shadow: 0 0 5px 0px rgba(245,242,245,1);
    -moz-box-shadow: 0 0 5px 0px rgba(245,242,245,1);
    box-shadow: 0 0 5px 0px rgba(245,242,245,1), 0 0 5px 0px rgba(245,242,245,1);
}

#AddUserWindow .modal-header {
    background: none;
    border-bottom: none;
}

    #AddUserWindow .modal-header h4 {
        color: #1a1a1a;
        font-size: 21px;
    }

#AddUserWindow .modal-footer {
    border-top: none;
    float: right;
    margin-right: 10px;
}

    #AddUserWindow .modal-footer button {
        padding: 5px 12px;
        font-size: 13px;
        font-weight: 600;
    }

    #AddUserWindow .modal-footer .btn {
        background: #00DA9D;
        border-color: #00DA9D;
        border-radius: 3px;
    }

        #AddUserWindow .modal-footer .btn:hover {
            background: #00DA9D !important;
        }

        #AddUserWindow .modal-footer .btn + .btn:hover, #AddUserWindow .modal-footer .btn-cancel:hover {
            background: #ECECEC !important;
        }

#AddUserWindow .modal-body {
    padding: 12px;
    overflow: hidden;
    height: 165px;
}

#AddUserWindow .select2-container {
    overflow-y: auto;
    max-height: 170px;
}

.assign-window .modal-dialog {
    width: 330px;
    height: 400px;
    margin-top: 130px;
}

.assign-window .modal-content {
    height: 300px;
    -webkit-box-shadow: 0 0 5px 0px rgba(245,242,245,1);
    -moz-box-shadow: 0 0 5px 0px rgba(245,242,245,1);
    box-shadow: 0 0 5px 0px rgba(245,242,245,1), 0 0 5px 0px rgba(245,242,245,1);
}

.assign-window .modal-header {
    background: none;
    border-bottom: none;
}

    .assign-window .modal-header h4 {
        color: #1a1a1a;
        font-size: 21px;
    }

.assign-window .modal-footer {
    border-top: none;
    float: right;
    margin-top: 30px;
    margin-right: 10px;
}

    .assign-window .modal-footer button {
        padding: 5px 12px;
        font-size: 12px;
        font-weight: 600;
    }

    .assign-window .modal-footer .btn {
        background: #00DA9D;
        border-color: #00DA9D;
        border-radius: 3px;
    }

        .assign-window .modal-footer .btn:hover {
            background: #00DA9D !important;
        }

        .assign-window .modal-footer .btn + .btn:hover {
            background: #ECECEC !important;
        }

.assign-window .modal-body {
    padding: 12px;
    overflow: hidden;
    height: 165px;
}

.change-assignee-instruction {
    font-size: 12px;
    margin-bottom: 10px;
}

.Containerbox {
    padding: 10px;
}

    .Containerbox button#addUserRole {
        float: right;
        background: white;
        box-shadow: none;
        border: 1px solid #00DA9D;
        color: #00DA9D;
        font-size: 12px;
        font-weight: bold;
        border-radius: 4px;
        padding: 6px 12px;
    }

ul#assigned-users {
    width: 100%;
}

    ul#assigned-users li {
        float: left;
        margin: 5px;
        border: none;
        height: auto;
        position: relative;
        width: auto;
    }

        ul#assigned-users li img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        ul#assigned-users li .glyphicon {
            position: absolute;
            top: 0;
            left: 0;
            color: #FFFFFF;
            width: 100%;
            height: 100%;
            background-color: #000000;
            opacity: 0.3;
            padding: 20px;
            cursor: pointer;
        }

        ul#assigned-users li.assigned-true .glyphicon {
            display: none;
        }

.user-with-role img {
    border-radius: 40px;
    float: left;
    margin-right: 10px;
    width: 40px;
    height: 40px;
}

.user-with-role .userList {
    float: left;
    width: 72%;
}

    .user-with-role .userList label {
        color: #999;
        font-size: 12px;
        font-weight: 600;
        margin-right: 10px;
    }

.add-comment-box .popover-title {
    font-size: 12px;
    background: #FFF !important;
    border-bottom: none;
    font-weight: 600;
    color: #333;
}

.add-comment-box textarea {
    width: 100% !important;
    margin-bottom: 10px !important;
}

    .add-comment-box textarea:focus {
        border: 1px solid #00DA9D !important;
    }

.add-comment-box button {
    font-size: 11px !important;
}

.add-comment-box .popover {
    width: 255px !important;
}

    .add-comment-box .popover.bottom > .arrow {
        top: -8px !important;
    }

.add-comment-box button + button {
    background: #FFF !important;
}

.badge.badge-info {
    background: #00DA9D;
    border: 1px solid #00DA9D;
}

#AddCategoryWindow input {
    border: 1px solid #CCC;
    color: #333333;
    width: 100%;
    border-radius: 4px;
    padding: 6px;
    margin: 10px 0px;
}

.EditCategoryWindow input {
    border: 1px solid #CCC;
    color: #333333;
    padding: 4px 6px;
    border-radius: 3px;
}

#AddCategoryWindow label {
    padding-left: 0px !important;
    color: #999;
    font-size: 12px;
}

#AddCategoryWindow .modal-footer, .modal-footer {
    border-top: none !important;
    float: right;
}

.EditCategoryWindow .modal-footer {
    border-top: none;
}

.efficiency-area {
    text-align: center;
    margin-bottom: 25px;
}

.assigned-project-area table th {
    background: #e4fbf5;
    color: #00da9d;
    padding: 10px 4px;
}

.assigned-project-area table td {
    padding: 10px 4px;
}

.assigned-project-area table {
    margin: 10px 23px;
}

.full-calendar {
    margin: 15px;
}

    .full-calendar .event-photo {
        width: 17px;
        height: 17px;
        margin: 0 5px;
        border-radius: 50%;
    }

.fc-event, .fc-event:hover, .ui-widget .fc-event {
    color: #333333 !important;
}

.fc-event {
    border: none !important;
    background-color: #e4fbf5 !important;
    border-radius: 5px !important;
}

.fc-day-grid-event {
    margin: 2px !important;
    padding: 2px !important;
}

.full-calendar .closed {
    text-decoration: line-through;
}

.tooltipevent, .changeAssigneeForm {
    border-radius: 3px;
    color: black;
    content: attr(title);
    display: block;
    background-color: #FFFFFF;
    border: 1px solid #5a5858;
    padding: 0px 15px 15px 15px;
    z-index: 98;
    width: 300px;
    font-size: 13px;
    font-weight: normal;
    position: absolute;
    z-index: 10001;
}

    .tooltipevent table tr td {
        text-align: left;
        vertical-align: top;
        padding-top: 5px;
    }

        .tooltipevent table tr td label {
            font-weight: bold;
            padding-right: 10px;
        }

.changeAssigneeForm {
    border: none;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
    background-color: #FFFFFF;
    padding-top: 20px;
}

    .unread-msg-box .ix-caret-top, .changeAssigneeForm .ix-caret-top, .tooltipevent .ix-caret-top, .commentBox .ix-caret-top {
        width: 30px;
        height: 15px;
        display: block;
        background-image: url(../Images/ix_caret_top.png);
        position: absolute;
        top: -15px;
        left: calc(50% - 15px);
    }

.ui-autocomplete .profile-picture {
    width: 100%;
    margin: 0 5px;
    border-radius: 50%;
}

.picOuterContainer {
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 5px;
    overflow: hidden;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
}

    .picOuterContainer .profile-picture {
        min-height: 20px;
        margin: 0 !important;
        -webkit-border-radius: 60px !important;
        -moz-border-radius: 60px !important;
        border-radius: 60px !important;
    }

.ui-state-focus {
    background-color: #00da9d !important;
}

.Task-Ratio-Area #hero-donut {
    height: 260px;
    margin-top: -20px !important;
}

.fc-calendar-icon {
    float: left;
    cursor: pointer;
    color: #B8C1BF;
}

.dyaInWeek {
    height: 50px;
    background: #FCFCFC;
    margin-top: -26px;
    position: relative;
}

    .dyaInWeek li {
        float: right;
        width: 13%;
        margin-right: 3px;
        margin-bottom: 30px;
    }

.monthInYear {
    height: 50px;
    background: #FFF;
    margin-top: -26px;
    position: relative;
    margin-left: -10px;
}

    .monthInYear li {
        float: right;
        width: 8%;
        margin-bottom: 30px;
        font-size: 9px;
    }

.weekInMonth {
    height: 50px;
    background: #FFF;
    margin-top: -26px;
    position: relative;
    margin-right: -18px;
}

    .weekInMonth li {
        float: right;
        width: 20%;
        margin-bottom: 30px;
    }

.theme-default .mytask-progress-bar .progress-bar {
    background: #00DA9D !important;
    border-color: #00DA9D !important;
}

.progress-bar-info {
    background-color: #00DA9D !important;
    border-color: #00DA9D !important;
}

.progress-bar-title {
    color: #999;
    font-size: 14px;
    font-weight: bold;
    width: 90%;
    margin: 0px auto;
}

    .progress-bar-title strong {
        color: #333;
        font-size: 14px;
        font-weight: bold;
    }
/*.datepicker table tr td.today {
    background: #1D89CF !important;
    color: #FFF !important;
}*/


/*-------------Nano scroller start*/


.mainNano {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    max-height: 330px;
    margin: auto;
}

.nano > .nano-pane > .nano-slider {
    background: #C1F6E7 !important;
}

.mainNano .nano {
    max-height: 220px;
}

.task-list-nano .nano {
    min-height: 625px;
}

.task-list-nano .nano-content {
    padding-right: 3px;
}
/*------------- Nano end*/

#hero-area {
    height: 240px;
}

.theme-default .btn-primary, .theme-default .btn-primary:focus, .theme-default .btn-primary:hover {
    background: #00DA9D !important;
    border-color: #00DA9D !important;
}

.theme-default .pagination > li.active > a, .theme-default .pagination > li.active > a:focus, .theme-default .pagination > li.active > a:hover, .theme-default .pagination > li.active > span {
    background: #00DA9D !important;
    border-color: #00DA9D !important;
}

.theme-default .datepicker thead tr:first-child {
    background: #00DA9D !important;
    border-color: #00DA9D !important;
}

.theme-default .datepicker thead th.next, .theme-default .datepicker thead th.prev {
    background: #00DA9D !important;
    border-color: #00DA9D !important;
}

.theme-default .datepicker thead tr {
    background: #C1F6E7 !important;
}

.theme-default .datepicker table tr td.active {
    background: #00DA9D !important;
}

.datepicker thead th {
    color: #000;
}

.top-icon-area, .top-icon-area .col-md-8, .top-icon-area .col-md-4 {
    padding: 0px !important;
}

    .top-icon-area button {
        float: right !important;
        margin-left: 5px;
    }

.categoryListForProject .fa {
    color: #9A9A9A;
    font-size: 16px;
    margin-right: 12px;
    position: relative;
    top: 20px;
    cursor: pointer;
}

.filter-area {
    background: #f5f5f5 none repeat scroll 0 0;
    box-sizing: unset;
    display: inline-block;
    margin-bottom: 12px;
    margin-left: -20px;
    margin-right: -20px;
    padding: 15px;
    width: 100%;
}

.mytask-filter-area {
    /*padding: 20px !important;*/
}

.filter-area label {
    font-size: 13px;
    color: black;
    padding-left: 5px;
}

.filter-area table {
    display: inline-block;
    margin-right: -20px;
    width: 100%;
}

    .filter-area table td {
        padding: 3px;
        width: 25%;
    }

        .filter-area table td input {
            border-radius: 3px;
            box-shadow: none;
            border: 1px solid #CCC;
            padding: 1px 3px;
        }

        .filter-area table td:last-child {
            margin-right: 0px;
        }

.filter-area select {
    width: 100%;
    border-radius: 3px;
    border: 1px solid #9a9a9a;
    padding: 2px;
    box-shadow: none;
}

.filter-area table td .inputDateField {
    margin-top: 5px;
    border-radius: 3px;
    border: 1px solid #9a9a9a;
    background: white;
    padding: 2px 3px;
}

    .filter-area table td .inputDateField input {
        width: 100%;
        border: none;
    }


.filter-area select:required:invalid, .time-sheet-filter select:required:invalid, .modal-body select:required:invalid {
    color: #ccc !important;
}

.filter-area option[value=""][disabled], .time-sheet-filter option[value=""][disabled] {
    display: none;
}

.filter-area option, .time-sheet-filter option {
    color: black;
}

.FindButton {
    background: none !important;
    background-color: #e4fbf5 !important;
    border: 1px solid #00da9d !important;
    color: #00da9d !important;
    font-weight: bold !important;
    box-shadow: none;
    padding: 3px 30px;
    margin-top: 6px;
    border-radius: 3px;
}

.btn-reset-customize {
    background-color: #ffffff !important;
    border-color: #bdbdbd !important;
    color: #a0a0a0 !important;
    font-weight: normal !important;
    float: right;
    margin-right: 5px;
}

#importContainer span {
    color: #999;
}

.filter-area input[type=file] {
    width: 88px;
    color: transparent;
}

.choose-file-container {
    padding: 30px 10px;
    background: white;
    float: left;
}

    .choose-file-container input {
        float: left;
        border-radius: 4px;
        color: #333;
        width: 15%;
    }

    .choose-file-container label {
        float: left;
        color: #999;
        width: 85%;
    }

.filter-area .button-area {
    width: 100%;
    float: left;
    margin-top: 10px;
}

#importedTaskInForm {
    margin-top: 12px;
    float: left;
}

    #importedTaskInForm .modal-dialog {
        width: 800px;
    }

        #importedTaskInForm .modal-dialog .modal-content {
            padding: 1px;
            /*overflow-y: scroll;*/
        }

            #importedTaskInForm .modal-dialog .modal-content .modal-footer {
                border-top: none;
            }

            #importedTaskInForm .modal-dialog .modal-content .modal-header {
                margin-bottom: 15px;
                padding-left: 5px;
            }

            #importedTaskInForm .modal-dialog .modal-content .mainNano {
                padding: 10px;
            }

    #importedTaskInForm table th {
        border: 1px solid #DADADA;
        background: #DADADA;
        padding-left: 2px;
    }

#importedTaskInForm {
    font-size: 12px !important;
}

.importTaskSave {
    padding: 5px 20px !important;
    margin: 14px 0px;
}

#waitForBackgroundProcess {
    display: none;
    position: absolute;
    top: 45%;
    left: 45%;
    width: 90px;
    height: 90px;
    padding: 30px 15px 0px;
    border: 0px solid #ababab;
    box-shadow: 0px 0px 0px #ababab;
    border-radius: 20px;
    background-color: none;
    z-index: 9999999999999;
    text-align: center;
    overflow: auto;
}

#fade {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #ababab;
    z-index: 999999999999;
    -moz-opacity: 0.4;
    opacity: .40;
    filter: alpha(opacity=40);
}

#timeSheetPage .weeklyTimeLog {
}

.CalendarDayName {
    text-align: right;
    padding-right: 10px;
}

    .CalendarDayName ul {
        padding: 0px;
    }

        .CalendarDayName ul li {
            display: inline-block;
            background: #E4FBF5;
            border-radius: 3px;
            padding: 0px 10px;
            border: 1px solid #CCC;
            margin: 0px 3px;
            text-align: center;
            height: 33px;
            width: 11%;
        }

            .CalendarDayName ul li:last-child {
                margin: 0px;
                padding: 2px 0px;
            }

            .CalendarDayName ul li span {
                font-size: 10px;
                color: #CCC;
            }

            .CalendarDayName ul li p {
                font-size: 12px;
                color: #000;
                font-weight: bold;
                margin: 0px;
                padding: 0px;
                position: relative;
                top: -4px;
            }

.DateRangeForTimelog {
    border-radius: 4px;
    border: 1px solid #CCC;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}

    .DateRangeForTimelog #leftArrow, .DateRangeForTimelog #RightArrow {
        background: #F5F5F5;
        color: #999999;
        padding: 7px 5px;
        cursor: pointer;
    }

.TimelogWithDate ul li {
    background: none;
    padding: 2px 0px;
    border: none;
    text-align: left;
}

    .TimelogWithDate ul li b {
        position: relative;
        top: 4px;
        left: 2px;
    }

    .TimelogWithDate ul li input {
        width: 100%;
        border: 1px solid #CCC;
        border-radius: 3px;
        padding: 7px 3px;
    }

.TotalCountPerWeek {
    background: #FFF !important;
    border: none !important;
    position: relative;
    top: -10px;
}

.TotalTimeLogForAllTask {
    float: left;
    text-align: right;
    padding-right: 10px;
}

    .TotalTimeLogForAllTask ul {
        padding: 0px;
    }

        .TotalTimeLogForAllTask ul li {
            display: inline-block;
            background: #F5F5F5;
            border-radius: 3px;
            padding: 7px 5px;
            border: 1px solid #CCC;
            margin: 0px 2px;
            text-align: left;
            height: 33px;
            width: 11%;
        }

.date-rang-per-week {
    text-align: center;
    color: #333;
}

.TotalForEveryWeek {
    background: #F5F5F5 !important;
    border: 1px solid #CCC !important;
    height: 33px !important;
    position: relative;
    width: 42px;
    top: -4px;
}

.time-sheet-filter {
}

    .time-sheet-filter select {
        width: 45%;
        float: left;
        margin-right: 12px;
        padding: 6px 6px;
        box-shadow: none;
    }

.AddTask-rightText span {
    color: #ccc;
    font-size: 11px;
    line-height: 1;
    position: relative;
    top: 12px;
}

.DesignationContainer, .DefaultTaskContainer {
    background: #F5F5F5;
    margin: 10px auto;
    overflow: hidden;
    padding: 10px;
}

    .DesignationContainer h5, .DefaultTaskContainer h5 {
        color: #333;
        font-size: 14px;
        font-weight: 600;
        margin-top: 0px;
    }

.general-info-item h5, .general-info-item-edit h5 {
    color: #333;
    font-size: 14px;
    font-weight: 600;
    margin-top: 0px;
}

.DesignationContainer span, .DefaultTaskContainer span {
    color: #00DA9D;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.general-info-item .pull-right span {
    color: #00DA9D;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.DesignationContainer table, .DefaultTaskContainer table {
    width: 100%;
}

.general-info-item table {
    width: 100%;
}

.DesignationContainer .EditDeleteButton, .DefaultTaskContainer .EditDeleteButton {
    width: 22px;
    float: right;
    color: #9A9A9A;
}

.general-info-item .EditDeleteButton {
    width: 22px;
    float: right;
    color: #9A9A9A;
}

.DesignationContainer .EditDeleteButton i, .DefaultTaskContainer .EditDeleteButton i {
    font-size: 14px;
    padding: 7px 5px;
    cursor: pointer;
}

.general-info-item .EditDeleteButton i {
    font-size: 14px;
    padding: 7px 5px;
    cursor: pointer;
}

.DesignationContainer .admin-filter-area, .DefaultTaskContainer .admin-filter-area {
    width: 100%;
    margin-bottom: 10px;
    overflow: hidden;
}

    .DesignationContainer .admin-filter-area input, .DefaultTaskContainer .admin-filter-area input {
        border-radius: 3px;
        border: 1px solid #CCC;
        padding: 4px;
        font-size: 12px;
        width: 70%;
    }

.admin-filter-area .searchInput {
    width: 250px;
    float: left;
}

    .admin-filter-area .searchInput i {
        position: relative;
        left: -34px;
        color: #CCC;
        margin-left: 2px;
    }

.DesignationContainer table th, .DefaultTaskContainer table th {
    color: #999;
    font-size: 12px;
    font-weight: 600;
}

.DesignationContainer table td, .DefaultTaskContainer table td {
    color: #333;
    font-size: 13px;
    width: 30%;
}

    .DefaultTaskContainer table td .fa-download {
        cursor: pointer;
        padding: 5px;
    }

    .DefaultTaskContainer table td .fa-check {
        font-size: 15px;
        color: #00DA9D !important;
    }

.admin-filter-area .searchSelect {
    width: 200px;
    text-align: right;
    color: #999;
    font-size: 12px;
}

    .admin-filter-area .searchSelect select {
        border-radius: 3px;
        border: 1px solid #CCC;
        margin: 3px;
        padding: 1px 4px;
    }

.general-info-item {
    background: #F5F5F5;
    margin: 10px auto;
    overflow: hidden;
    padding: 10px;
    min-height: 100px !important;
}

.comapny-basic-info p {
    color: #9a9a9a;
    font-size: 12px;
    margin: 0px;
    padding: 0px;
}

    .comapny-basic-info p a {
        color: #00DA9D;
        padding-left: 3px;
        font-weight: 600;
        cursor: pointer;
    }

.task-detail-row .status-label {
    padding-left: 5px;
    color: #555;
}

.task-detail-row .status-value {
    color: #000000;
    font-weight: bold;
}

#AddMoreAdmin .modal-body {
    overflow: hidden;
}

#AddMoreAdmin .modal-footer {
    border-top: 1px solid #FFF;
}

.LowOpacity i {
    opacity: .3;
}

.general-info-item-edit {
    background: #FFF;
    margin: 10px auto;
    overflow: hidden;
    padding: 10px;
    min-height: 100px !important;
    border: 1px solid #CCC;
    border-radius: 4px;
    width: 100%;
}

    .general-info-item-edit label {
        color: #999;
        font-size: 13px;
        margin: 0px;
        padding: 0px;
    }

    .general-info-item-edit ul {
        padding: 0px;
    }

        .general-info-item-edit ul li {
            display: inline-block;
        }

    .general-info-item-edit .row {
        margin-bottom: 15px;
    }

    .general-info-item-edit input, .general-info-item-edit select {
        width: 100%;
        border-radius: 3px;
        border: 1px solid #CCC;
    }

.comapny-basic-info input[type=radio] {
    width: auto !important;
    position: relative;
    top: 2px;
    margin: 6px 0px;
}

ul {
    padding-left: 0px;
}

#timesheet-taskscontainer ul li {
    display: inline;
}

.commentBox .button-block {
    margin-top: 10px;
}

.commentBox #addComment {
    margin-right: 10px;
}

.paging-content {
    margin-top: 10px;
}

.pagination > li > a, .pagination > li > span {
    padding: 3px 6px !important;
}
/* Drag and Drop Begin*/
#mainMenu {
    z-index: 100;
    height: 100%;
    position: fixed;
    top: 50px;
    left: 0;
    overflow: hidden;
    width: 240px;
    -webkit-transition: all .5s;
    transition: all .5s;
    user-select: none;
    display: block;
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

[ng-drag], [ng-drag-clone] {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
}

    [ng-drag] .drag-handle {
        width: 16px;
        height: 100%;
        margin-right: 5px;
        overflow: hidden;
        display: none;
        position: absolute;
        cursor: pointer;
        background: url(../Images/tms_icon_drag.png) repeat-y;
        left: -10px;
        top: 0;
    }

    [ng-drag]:hover .drag-handle {
        display: block;
    }

.drag-object, [ng-drag-clone], [ng-drop] [ng-drag] {
    width: 100px;
    height: 100px;
    background: rgba(255,0,0, 0.5);
    color: white;
    text-align: center;
    padding-top: 40px;
    display: inline-block;
    margin: 0 10px;
    cursor: move;
    position: relative;
    overflow: hidden;
}

    .drag-object [ng-drag] {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        margin: 0;
    }

[ng-drag-clone] {
    margin: 0;
}

[ng-drag].drag-over {
    border: dashed 1px #999999;
}

[ng-drag].dragging {
    opacity: 0.9;
    background-color: #FFFFFF;
    z-index: 99999;
}

[ng-drop] {
    position: relative;
}

    [ng-drop].drag-enter {
        border: solid 1px #00DA9D;
        background-color: #E3FAF5;
    }

    [ng-drop] span.title {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 20px;
        margin-left: -100px;
        margin-top: -10px;
    }

    [ng-drop] div {
        position: relative;
        z-index: 2;
    }
/* Drag and Drop End*/

/* Right Side Graph Begin*/
#efficiency-donut {
    height: 250px;
}

#working-bar {
    height: 250px;
}
/* Right Side Graph End*/

.package-details h2 {
    color: #777;
}

.package-details p {
    font-size: 18px;
    color: #a3aab3;
}

    .package-details p a {
        color: #00DA9D;
        font-size: 13px;
    }

.package-details .packagebox {
    border: 1px solid #00DA9D;
    border-radius: 2px;
    padding: 20px;
    text-align: left;
    margin: 41px auto 5px;
    float: none;
    overflow: hidden;
}

    .package-details .packagebox input, .package-details .packagebox select {
        border: 1px solid #CCC;
        border-radius: 4px;
        padding: 5px 2px;
        width: 100%;
    }

    .package-details .packagebox .row {
        margin: 10px 0px;
        float: none;
    }

    .package-details .packagebox h1 {
        color: #2e2e2e;
        font-weight: bold;
        font-size: 25px;
        text-align: center;
    }

    .package-details .packagebox p {
        color: #ccc;
        font-weight: 600;
        font-size: 30px;
        text-align: center;
    }

    .package-details .packagebox label {
        color: #CCC;
        font-weight: normal;
        font-size: 13px;
    }

    .package-details .packagebox .totalCost label {
        color: #2e2e2e;
        font-weight: 600;
        font-size: 18px;
    }

    .package-details .packagebox .totalCost span {
        color: #00DA9D;
        font-weight: 600;
        font-size: 25px;
    }

.signup-box .headerText h1 {
    color: #2e2e2e;
    font-weight: 600;
    font-size: 30px;
}

span.package-reg-detail-info {
    color: #D6DADE;
    font-weight: normal;
    font-size: 12px;
}

.signup-box input, .signup-box select {
    border-radius: 4px;
}

.theme-default #main-navbar .navbar-nav > li.active > a, .theme-default #main-navbar .navbar-nav > li.dropdown.open > a, .theme-default #main-navbar .navbar-nav > li > a:hover {
    background-color: #000000;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

.deletePUC .deleteButton {
    padding: 7px 22px;
    color: #999;
    font-weight: 600;
}

.taskuser, .profile-photo, .company-user, .user-with-role img, .task-assignee img {
    /*border: 1px solid #AAAAAA;*/
}

.ToolTip {
    background: #E4FBF5 !important;
}

#dashboard-content {
    padding-left: 20px;
}

    #dashboard-content label {
        display: block;
        font-weight: bold;
        margin-top: 10px;
    }

.dashboard-count span.count {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    font-size: 45px;
    color: #999999;
}

.dashboard-graph-section {
    padding: 10px 15px;
}

.tabbing-buttons {
    background-color: #F5F5F5;
    margin-top: 10px;
}

    .tabbing-buttons .task-option-bar-button {
        width: 90px;
        padding: 5px 10px;
    }

    .tabbing-buttons .btn.active {
        background-color: #FFFFFF !important;
        border-color: #E0E0E0 !important;
        color: #000000 !important;
    }

#spent-time-donut {
    height: 250px;
    width: 100%;
    /*margin: 0 auto -20px;*/
    float: left;
}

.progress-caption {
    color: #999999;
    font-weight: normal !important;
    font-size: 12px;
}

.lower-progress {
    color: #D54848;
}

.timelogTimeSpent {
    padding-right: 5px;
}

    .timelogTimeSpent b {
        color: #000;
    }

#project-hour-status {
    height: 270px;
}

.area-graph-footer {
    height: 50px;
    background: #FFF;
    margin-top: -26px;
    position: relative;
    width: 100%;
    display: table;
}

    .area-graph-footer li {
        display: table-cell;
        margin-right: 3px;
    }

        .area-graph-footer li:last-child {
            text-align: right;
        }

.vertical-style {
    vertical-align: top;
    text-align: center;
    padding-left: 10px;
}

    .vertical-style span {
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }

#timesheetPaging .col-md-7 {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.projects-list {
    padding: 0;
    margin: 0;
    float: left;
    width: 100%;
    border: 1px solid #e2e2e2;
}

    .projects-list li, .projects-list td {
        border-bottom: 1px solid #e2e2e2;
        padding: 8px 0;
        width: 100%;
        float: left;
    }

        .projects-list li label, .projects-list td label {
            margin-top: 0 !important;
        }

        .projects-list li:hover, .projects-list td:hover {
            background: #EAEBEB;
        }

        .projects-list li .responsible, .projects-list .actions {
            text-align: right;
        }

        .projects-list li .child-indicator {
            float: left;
            display: none;
        }

    .projects-list .glyphicon {
        padding-right: 5px;
        padding-top: 15px;
        cursor: pointer;
    }

    .projects-list li.has-child {
        padding-bottom: 0;
    }

        .projects-list li.has-child .child-indicator {
            display: block;
        }

    .projects-list li .child-list-container {
        border-top: 1px solid #e2e2e2;
        float: left;
        margin-top: 10px;
        width: 100%;
    }

        .projects-list li .child-list-container ul {
            width: 100% !important;
        }

            .projects-list li .child-list-container ul li {
                background: #FFF !important;
                padding-left: 30px;
            }

                .projects-list li .child-list-container ul li:last-child {
                    border: none;
                }

                .projects-list li .child-list-container ul li:hover {
                    background: #EAEBEB !important;
                }

    .projects-list li label {
        padding: 0;
        margin-top: 0 !important;
    }

    .projects-list li .status, .projects-list td .status {
        border: 1px solid #58B856;
        color: #58B856;
        background: none;
        padding: 0 10px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .projects-list li .project-type, .projects-list td .project-type {
        background-color: #999999;
        color: #FFFFFF;
        padding: 0 5px;
        border-radius: 5px;
    }

    .projects-list ul {
        float: left;
    }

.projects-topbar {
    float: left;
    width: 100%;
    margin-top: 20px;
    padding: 0px;
    margin-bottom: 25px;
}

#dashboard-content .filter-area label, #dashboard-content .FindButton {
    margin-top: 0;
}

select[multiple], select[size] {
    height: 32px !important;
}

.activity-message {
    width: 82%;
    color: #333333;
    font-size: 13px;
    font-weight: normal;
    float: left;
    margin-left: 7px;
}

    .activity-message .notifcaion-msg {
        cursor: pointer;
    }

    .activity-message .notification-action-part {
        margin-bottom: 22px;
        margin-top: 8px;
    }

.estimatedAndTotalSpentArea span {
    font-size: 10px;
}

#main-wrapper {
    position: relative;
    min-height: 100vh;
}

#main-navbar .navbar-nav > li > a {
    height: 50px !important;
}

.dashboard-graph-section .graph-container {
    overflow: hidden;
}

button[disabled], html input[disabled] {
    color: grey;
    cursor: default;
    opacity: 0.4;
}

#AddMoreAttachment {
    color: #00DA9D;
    font-weight: bold;
    cursor: pointer;
}

.commentAttachmentBox {
    border: 1px solid #cccccc;
    border-radius: 4px;
    overflow: hidden;
}

    .commentAttachmentBox textarea {
        border: none;
        margin: 5px;
    }

        .commentAttachmentBox textarea:focus {
            border: none !important;
        }

    .commentAttachmentBox .attach-file {
        border-top: 1px solid #CCC;
        width: 100%;
        padding: 4px;
    }

        .commentAttachmentBox .attach-file span {
            padding-left: 6px;
            cursor: pointer;
        }


    .commentAttachmentBox #fileList, .commentAttachmentBox #imageList, .commentAttachmentBox #videoList,
    .commentAttachmentBox #fileListmodal, .commentAttachmentBox #imageListmodal, .commentAttachmentBox #videoListmodal {
        background: #F4F4F4;
        font-size: 13px;
    }

        .commentAttachmentBox #fileList ul, .commentAttachmentBox #imageList ul, .commentAttachmentBox #videoList ul,
        .commentAttachmentBox #fileListmodal ul, .commentAttachmentBox #imageListmodal ul, .commentAttachmentBox #videoListmodal ul {
            margin: 0px;
        }

        .commentAttachmentBox #fileList li, .commentAttachmentBox #imageList li, .commentAttachmentBox #videoList li,
        .commentAttachmentBox #fileListmodal li, .commentAttachmentBox #imageListmodal li, .commentAttachmentBox #videoListmodal li {
            list-style-type: none;
            padding: 1px 6px;
            color: #333;
            font-weight: 600;
        }

.comment-file ul {
    margin: 0px 10px 28px 11px;
    padding: 0px;
}

.overflow-hidden {
    overflow: hidden;
}

.comment-file ul li {
    width: auto;
    float: left;
    text-align: center;
    padding: 3px;
    cursor: pointer;
    text-decoration: underline;
    font-weight: 600;
}

    .comment-file ul li:first-child {
        text-decoration: none !important;
    }

    .comment-file ul li img {
        width: 100%;
        max-height: 200px;
        cursor: pointer;
    }

.Attachment-details p {
    color: #1a1a1a;
    font-size: 12px;
    word-wrap: break-word;
    max-height: 35px;
    overflow: hidden;
    margin-bottom: 5px;
}

.Attachment-details span {
    color: #989898;
    font-size: 11px;
    margin-top: 5px;
    text-transform: lowercase;
}

.Attachment-details label {
    padding-left: 4px;
    font-size: 13px;
    cursor: pointer;
    color: #999;
}

.file-attach-container li .col-xs-5:first-child {
    overflow: hidden;
    border-radius: 3px;
    border: 1px solid #ccc;
}

.file-attach-container li {
    margin-bottom: 20px;
    padding: 0px;
}

.file-attach-container video {
    width: 145% !important;
    height: 92px;
}

.checkListContainer ul {
    padding: 0px;
    margin: 0px;
    float: left;
    min-width: 50%;
}

    .checkListContainer ul li {
        list-style-type: none;
        float: left;
        width: 100%;
        cursor: pointer !important;
        display: inline-flex;
        margin: 2px 0 2px 0;
        min-height: 28px;
    }

        .checkListContainer ul li:hover {
            background: url(../Images/tms_icon_drag.png) repeat-y !important;
            color: black !important;
            background-color: #e4fbf5 !important;
        }

.checkListContainer .progress {
    width: calc(100% - 70px) !important;
    padding: 0px;
}


.checkListContainer input {
    top: 2px;
    position: relative;
}

    .checkListContainer input:checked {
        text-decoration: line-through;
    }

.checkListContainer label {
    font-size: 12px;
    padding-left: 4px;
    color: #999;
}

.checkListContainer form {
    width: Calc(100% - 13px) !important;
}


.checkListContainerEdit input {
    border-radius: 4px !important;
    border: 1px solid #CCC !important;
    padding: 6px 3px !important;
    width: calc(100% - 120px) !important;
    margin-left: 5px;
}

.checkListContainerEdit .editable-buttons {
    margin-left: 0px !important;
}

#ShowMoreButtonTask {
    cursor: pointer;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#rightBottomPart .task-option-bar-button {
    width: 23%;
    font-size: 11px;
    padding-left: 1px;
    padding-right: 1px;
}

#PasswordChanger .modal-dialog {
    width: 400px !important;
}

.DisableDeleteBtn, .DisableProgressBar {
    opacity: .4;
    pointer-events: none;
    cursor: default;
}

.showTaskDetail {
    display: block !important;
}

.hideTaskDetail {
    display: none !important;
}

.progress-bar {
    border: 0px !important;
}

#desginationForm .modal-dialog, .EditDesignationWindow .modal-dialog {
    width: 400px;
    top: 250px;
}

.add-client-icon {
    background: #00DA9D;
    color: white;
    padding: 7px;
    text-align: center;
    font-size: 12px;
}

.outerClientAddDiv {
    width: 300px;
    margin: 0 auto;
    display: block;
    position: absolute;
    top: 47px;
    -moz-box-shadow: 1px 1px 1px 1px;
    -webkit-box-shadow: 1px 1px 1px 1px;
    box-shadow: 1px 1px 1px 1px;
    z-index: 300;
    left: calc(50% - 119px);
    background: #FFF;
}

    .outerClientAddDiv .ix-caret-top {
        width: 30px;
        height: 15px;
        display: block;
        background-image: url(../Images/ix_caret_top.png);
        position: relative;
        top: -15px;
        left: calc(50% - 45px);
        z-index: 1000;
    }

.minHeight {
    height: 30px;
}

.legendContainer {
    margin: 5px 0 5px 0;
    overflow: hidden;
}

    .legendContainer .legendMarker {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        padding: 0;
        margin: 4px 1px;
    }

    .legendContainer .greenMarker {
        background: #B8FBE9;
    }

    .legendContainer .orangeMarker {
        background: #FCDBBC;
    }

    .legendContainer .pinkMarker {
        background: #F7BDC2;
    }

    .legendContainer label {
        font-size: 9px;
        padding-left: 4px;
    }

#leftDetailsPart {
    /*background: #FCFCFC;*/
}

.upcomingTaskContainer {
    float: left;
    padding: 0;
}

    .upcomingTaskContainer .upcomingHeaderText {
        width: 100%;
        margin: 5px 0;
        color: #999;
        margin-top: 20px;
        padding: 9px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin-bottom: 4px;
    }

        .upcomingTaskContainer .upcomingHeaderText b {
            color: #333;
        }

    .upcomingTaskContainer .showUpcomingButton {
        width: 60%;
        margin: 0 auto;
    }

.middleContentHeader {
    font-size: 18px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
}

.unread-msg-box {
    top: 33px !important;
    left: -100px !important;
    width: 250px !important;
    position: absolute;
    background: white;
    border: 1px solid #989898;
    border-radius: 10px 10px 4px 4px;
    display: none !important;
}

.backgroundCalendarIcon {
    background: #FFF url(../Images/tms_icon_calendar.png) no-repeat right;
    background-position: 98%;
}

.modal-footer .btn-success {
    float: left;
}

input[type=number] {
    -moz-appearance: textfield;
}

#notification-icon i {
    font-size: 20px;
}

#notification-icon .fa-bell-green {
    color: #00DA9D !important;
}

.fa-comment-green {
    color: #00DA9D !important;
}

#notification-icon #notification-count {
    font-size: 13px !important;
    display: inline;
    position: absolute !important;
    top: 8px !important;
    right: 2px !important;
    background: transparent;
    border: none;
    left: 23px;
}

#notification-icon .notificationList li {
    background: #edf2fa;
    border-bottom: 1px solid #dddfe2;
    padding-top: 4px;
}

    #notification-icon .notificationList li .notify-user-img {
        float: left;
        padding-left: 5px;
        width: 35px;
    }

    #notification-icon .notificationList li:hover {
        background: #E4E9F1;
    }

#notification-icon .notificationList .NotificationSeen {
    background: #FFF;
}

    #notification-icon .notificationList .NotificationSeen:hover {
        background: #F6F6F6;
    }



#NotificationScroll {
    margin: 0px auto;
    padding: 0px !important;
    width: 340px;
    max-height: 500px;
    overflow: auto;
}

    #NotificationScroll .notificationList li:first-child {
        padding: 5px 0 !important;
    }

.markAsReadContainer {
    height: 20px;
}

    .markAsReadContainer .markAsReadItem span {
        font-size: 11px;
        float: left;
        color: #999;
    }

        .markAsReadContainer .markAsReadItem span span:first-child {
            cursor: pointer;
            padding-right: 3px;
        }

    .markAsReadContainer .markAsReadItem .remove-notification {
        float: right;
    }

        .markAsReadContainer .markAsReadItem .remove-notification i {
            font-size: 12px !important;
            cursor: pointer;
        }

#notificationBox {
    position: absolute;
    top: 35px;
    width: 230px;
    text-align: center;
    font-weight: normal;
    font-size: 14px;
    font-weight: bold;
    color: #00D99B;
    background-color: #FFF;
    padding: 5px;
    border: 1px solid #CCC;
}

    #notificationBox:before {
        width: 20px;
        height: 20px;
        transform: rotate(45deg);
        border: 1px solid #CCC;
    }

    #notificationBox span.dismiss {
        border: 2px solid #FFF;
        padding: 0 1px;
        cursor: pointer;
        /* float: right; */
        margin-right: 10px;
    }

    #notificationBox a {
        color: #00D99B;
        text-decoration: none;
        font-weight: normal;
        font-size: 13px;
    }

    #notificationBox .ix-caret-top {
        left: 10px !important;
    }

/*-------------- Mobile Responsiveness -----------*/
@media screen and (max-width: 767px) {
    .FindButton {
        padding: 3px 15px;
    }

    .mme #content-wrapper {
        left: 0;
    }

    #mainMenu {
        left: -240px;
        width: 240px;
    }

    .mme #mainMenu, .mmc #mainMenu {
        left: 0px !important;
    }

    #desginationForm .modal-dialog, .EditDesignationWindow .modal-dialog {
        width: 95%;
        top: 150px;
    }

    #PasswordChanger .modal-dialog {
        width: 100% !important;
    }

    .delete-close a:first-child {
        padding-top: 3px !important;
        padding-bottom: 6px;
    }

    #toggleimport {
        display: none;
    }

    .task-list-nano .nano {
        min-height: 300px !important;
    }

    .loading-image-position {
        margin-top: 0px !important;
    }

    .task-list-nano .nano {
        float: left;
    }

    .task-list-nano .remove-min-height {
        min-height: 0 !important;
        height: 0 !important;
    }

    .middle-content {
        overflow: hidden;
    }

    #PasswordChanger {
        padding: 0px !important;
    }

    .dd .ddTitle .ddTitleText img {
        width: 25px !important;
    }

    #leftDetailsPart {
        border-left: none !important;
    }

    /*#timesheet-taskscontainer {
        float: left !important;
    }*/

    .search-input, .search-input-length {
        width: 88% !important;
    }

    .projectDetails .project-details-itemList .item {
        width: 25%;
        font-size: 11px;
    }

    .projectDetails .project-details-itemList .btns-task-calendar {
        border-bottom: 1px solid #CCC;
        margin: 10px 0px;
    }

    .task-option-bar .btn-time-sheet, .task-option-bar .btn-plan {
        display: none;
    }

    .middle-content {
        min-height: 0px;
    }

    .login-page-panel {
        background: #1a1a1a;
    }

    #main-wrapper {
        padding-left: 0px;
    }

    .mme #main-wrapper {
        padding-left: 0px;
    }

    .mme #main-navbar .navbar-inner {
        left: 0px;
        padding-left: 56px;
    }

    .mme #main-navbar #main-menu-toggle {
        width: 56px;
    }

    /*-------header area------------*/
    .theme-default #main-navbar .right > .navbar-nav > li {
        width: auto;
        display: inline-block;
    }

        .theme-default #main-navbar .right > .navbar-nav > li:last-child {
            width: 78px;
            float: right;
        }

        .theme-default #main-navbar .right > .navbar-nav > li a::after {
            content: "";
        }

    #main-navbar-collapse {
        height: 80px !important;
        overflow: visible !important;
    }

        #main-navbar-collapse .slimScrollDiv {
            overflow: visible !important;
        }

            #main-navbar-collapse .slimScrollDiv > div {
                overflow: visible !important;
            }

    #main-navbar .dropdown-menu {
        background: #1a1a1a;
    }

    .navbar-nav .open .dropdown-menu {
        position: absolute !important;
    }

    #main-navbar li a {
        padding-left: 0px;
        padding-right: 0px;
    }

    #main-navbar li ul li a {
        padding-left: 10px;
        padding-right: 10px;
    }

    .companyname {
        font-size: 13px;
        padding: 12px 1px;
        position: relative;
        top: -6px;
    }

    .theme-default #main-navbar .dropdown.open > a {
        border: none;
    }

    .theme-default #main-navbar .navbar-collapse {
        padding-top: 22px;
    }

    .ddcommon .ddTitle {
        float: left !important;
    }

    .nav-icon-btn {
        position: relative;
        top: -4px;
        left: -10px;
    }

    #rightBottomPart {
        margin: 25px auto !important;
        overflow: hidden !important;
        width: 75%;
    }

    .tasks-topbar .form-group {
        width: 80%;
        float: left;
    }

    .timesheet-topbar .date-rang-per-week {
        font-size: 11px;
    }

    .TaskCreateForm .form-control .col-sm-12 .col-sm-6:first-child {
        padding-left: 10px;
    }

    .TaskCreateForm .form-control .col-sm-12 .col-sm-6:last-child, .TaskCreateForm .form-control .col-sm-12 .col-sm-3 {
        padding-right: 10px;
    }

    .TaskCreateForm .form-control .col-sm-12 {
        padding: 0px 10px;
    }

    #AddCategoryWindow .modal-footer, .modal-footer {
        float: left;
        width: 100%;
    }

    #ShowHideTimeLog {
        width: 100%;
        left: 0;
        margin: 0;
    }

    .task-option-bar-button {
        font-size: 11px;
        min-width: 70px;
    }

    .login-page-panel {
        margin: 0px auto;
    }

        .login-page-panel .externalLoginArea {
            background: none;
            border-right: none;
            float: left;
            width: 100%;
            position: relative;
        }

    .login-page-panel {
        background: #1a1a1a;
    }

        .login-page-panel .UserNameField, .login-page-panel .UserPasswordField {
            background: #FFF;
        }

            .login-page-panel .UserNameField input, .login-page-panel .UserPasswordField input {
                width: 85%;
            }

        .login-page-panel .externalLoginArea .bottomText {
            position: relative;
        }

        .login-page-panel .externalLoginArea .headerText a {
            color: #333;
        }

    .taskTitle input:last-child {
        width: 26%;
        font-size: 12px;
        padding: 7px;
        margin-top: -1px;
    }

    .taskTitle input:first-child {
        width: 74%;
        padding: 6px 5px;
    }

    .nav-bar-float {
        width: 74%;
    }

    .general-info-item .pull-right span, .DesignationContainer span, .DefaultTaskContainer span {
        font-size: 12px;
    }

    .table-responsive .status {
        font-size: 9px;
        padding: 1px 3px;
    }

    .general-info-item .EditDeleteButton {
        width: 10px;
    }

        .general-info-item .EditDeleteButton i {
            font-size: 11px;
        }

    .recent-activity-header, .rightContentHeader {
        font-size: 15px;
    }

    .profile-photo-container {
        width: 80px;
        height: 80px;
    }

    .profile-photo {
        width: 80px;
        min-height: 80px;
    }

    .btn-info, .btn-info:focus, .btn-info:active, .btn-info:hover {
        font-size: 11px;
        padding: 3px 5px;
    }

    .deletePUC .deleteButton {
        font-size: 11px;
        padding: 3px 15px;
    }

    .pagination > li > a, .pagination > li > span {
        padding: 1px 4px !important;
    }

    .save-timelog-area h5 {
        font-size: 11px;
    }

    .save-timelog-area .timelogField {
        padding: 1px;
    }

        .save-timelog-area .timelogField input {
            font-size: 9px;
            padding: 0 !important;
            width: 65px !important;
        }

    #notification {
        left: 0px !important;
        width: 100% !important;
    }

    .save-timelog-area #btnSave {
        font-size: 9px;
        padding: 3px 0;
    }

    .save-timelog-area .LogTimeFor {
        font-size: 9px;
    }

    #cancelComment {
        padding: 2px;
        font-size: 11px;
    }

    .outerClientAddDiv {
        width: 200px;
        right: 0;
        left: inherit;
    }

        .outerClientAddDiv .ix-caret-top {
            left: 0;
            float: right;
        }

    .task-options-1 .estimatedAndTotalSpentArea {
        display: none;
    }

    .marker + label span.mark-as-done {
        display: none;
    }

    .task-options-1 {
        width: 4%;
        padding-top: 8px;
    }

    .marker:checked + label span.marked-as-done {
        display: none;
    }

    .task-detail-panel .container {
        clear: both;
    }
}

@media screen and (max-width: 418px) {
    #NotificationScroll {
        left: -100px;
        width: 300px;
    }

    #notification-icon #notification-count {
        left: 10px;
    }

    .backgroundCalendarIcon {
        background-size: 12px;
    }

    .DetailsContainer {
        margin-top: 70px;
    }

    .btn-cancel {
        padding: 3px 2px;
        font-size: 11px;
    }

    .recurrentTaskForm {
        margin: 70px 0 0 -7px;
        padding: 0 15px;
        width: 100%;
    }

    .filter-area table td input {
        padding: 0px 1px;
    }

    .mytask-filter-area {
        margin-left: -10px !important;
        width: 98%;
    }

    .timesheet-topbar .date-rang-per-week {
        font-size: 8px;
        padding: 10px 3px;
    }

    .timesheet-topbar {
        margin-top: 84px !important;
    }

    .btn-info-reverse {
        padding: 3px 1px !important;
        font-size: 9px !important;
    }

    .assigned-project-area .TaskSearch {
        padding: 1px 6px !important;
    }

    body {
        font-size: 10px;
    }

    .search-input, .search-input-length {
        width: 85% !important;
    }

    .tasks-topbar .form-group {
        width: 70%;
        float: left;
    }

    #middle-content-header {
        margin-bottom: 48px;
        margin-top: -8px;
        max-height: 69px;
    }

    #main-navbar .navbar-inner {
        min-height: 52px;
    }

    .tasks-topbar {
        margin-bottom: 0px;
    }

    .task-option-bar .task-option-bar-button {
        padding-left: 5px;
        padding-right: 5px;
        min-width: 50px;
    }

    .commentBox #addComment {
    }

    .xs-hide {
        display: none;
    }

    .middle-content {
        min-height: 0px;
        border-right: none;
        padding: 2px 1px 2px 0px;
    }

    .AddTaskForm {
        margin: 15px auto 40px;
    }

    .taskTitle input:last-child {
        width: 26%;
        font-size: 12px;
        border-radius: 0px 4px 4px 0px;
        padding: 7px;
        margin-top: -1px;
    }

    .taskTitle input:first-child {
        width: 74%;
        padding: 8px 5px;
        border-radius: 4px 0px 0px 4px;
    }

    .nav-bar-float {
        width: 74%;
        width: -moz-calc(74% + 6px);
        width: -webkit-calc(74% + 6px);
        width: -o-calc(74% + 6px);
        width: calc(74% + 6px);
    }

    .task-title-duration {
        max-width: 65% !important;
    }

    .loghr {
        width: 42px;
        padding: 3px;
        margin: 3px 2px;
        font-size: 9px;
    }

    .marker + label {
        background-size: 15px 15px;
    }

    .task-options-2 {
        margin: 1px 4px;
    }

    .taskTitle {
        overflow: hidden;
    }

    .commentBox {
        left: 100px !important;
        right: 15px !important;
        width: 70%;
    }

        .changeAssigneeForm .ix-caret-top, .tooltipevent .ix-caret-top, .commentBox .ix-caret-top {
            left: calc(50% - -52px) !important;
        }

    #rightBottomPart {
        width: 100%;
    }

    .taskuser {
        width: 25px;
        height: 25px;
        margin-right: 0px;
    }

    .task-title {
        font-size: 11px;
    }

    .time_overdue {
        font-size: 10px;
    }

    .upcomingTaskContainer .showUpcomingButton {
        width: 100%;
    }

    .show-upcoming {
        font-size: 11px;
        padding: 7px;
    }
}

@media (min-width: 992px) and (max-width: 1060px) {
    .task-title-duration {
        max-width: 44%;
        padding-left: 0px;
    }

    .task-options-1 {
        width: 23%;
    }

    #rightBottomPart .task-option-bar-button {
        width: 75px;
        font-size: 11px;
        padding-left: 1px;
        padding-right: 1px;
    }

    .dyaInWeek li {
        font-size: 11px;
        margin-right: 5px;
        width: 11%;
    }

    .recent-activity-header, .rightContentHeader {
        font-size: 15px;
    }

    .tk-calendar table {
        font-size: 10px !important;
    }

        .tk-calendar table td span {
            font-size: 10px !important;
            height: 22px !important;
            line-height: 22px !important;
            margin: 2px !important;
            width: 22px !important;
        }

    .task-detail-row .status-value {
        font-size: 11px;
    }

    .task-detail-row .status-label {
        font-size: 11px;
    }

    .activity-message {
        width: 80%;
    }

    .login-window {
        width: 70% !important;
    }
}

@media (min-width: 1061px) and (max-width: 1280px) {
    .login-page-panel .UserNameField input, .login-page-panel .UserPasswordField input {
        font-size: 14px;
        padding-left: 19px;
        width: 80%;
    }

    #rightBottomPart .task-option-bar-button {
        width: 23%;
        font-size: 11px;
        padding-left: 1px;
        padding-right: 1px;
    }

    .dyaInWeek li {
        font-size: 11px;
        margin-right: 2px;
    }

    .task-detail-row .status-value {
        font-size: 12px;
    }

    .task-detail-row .status-label {
        font-size: 12px;
    }

    .client-task-title-duration {
        width: 50%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .task-title-duration {
        max-width: 50%;
    }

    .msTeamTasks {
        width: 70% !important;
        float: left;
    }

    .msTeamTaskDetails {
        width: 30% !important;
        float: right;
        border-left: 1px solid #eaebeb;
    }

    .task-options-1 {
        width: 17%;
    }

    .middle-content {
        min-height: 0px !important;
    }

    #leftDetailsPart {
        border-left: none !important;
    }

    .login-window {
        width: 80% !important;
        margin: 0;
    }

    .estimatedAndTotalSpentArea span {
        font-size: 10px !important;
    }

    .marker + label span.mark-as-done {
        font-size: 10px;
    }

    #rightBottomPart {
        margin: 25px auto !important;
        overflow: hidden !important;
    }

    .time-sheet-filter select {
        width: 42%;
    }

    .DateRangeForTimelog #leftArrow, .DateRangeForTimelog #RightArrow {
        padding: 17px 5px;
    }

    .timesheet-topbar .DateRangeForTimelog #leftArrow, .DateRangeForTimelog #RightArrow {
        padding: 7px 5px;
    }

    .timesheet-topbar span {
        font-size: 9px;
    }

    .timesheet-topbar .date-rang-per-week {
        font-size: 9px;
        padding: 10px 4px;
    }

    .CalendarDayName ul li {
        width: 9%;
        padding: 0 5px;
    }

    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }


    .TimelogWithDate ul li input {
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 4px 2px;
        width: 20px;
    }

    .TotalTimeLogForAllTask ul li {
        width: 10%;
        font-size: 9px;
    }

    #timeSheetPage #btnSave {
        position: relative;
        right: 60px;
    }

    .search-input, .search-input-length {
        width: 85% !important;
    }

    .timesheet-topbar .search-input {
        width: 50px;
        font-size: 11px;
    }

    .projectDetails .project-details-itemList .item {
        width: 25%;
    }

    .projectDetails .project-details-itemList .btns-task-calendar {
        border-bottom: 1px solid #CCC;
        margin: 10px 0px;
    }

    #ShowHideTimeLog {
        width: 70%;
    }

    .task-option-bar-button {
        width: 92px;
        font-size: 12px;
    }

    .client-task-title-duration {
        width: 48%;
    }

    .taskTitle input:last-child {
        width: 20%;
        padding: 7px;
        font-size: 13px;
    }

    .taskTitle input:first-child {
        width: 80%;
        padding: 7px 5px;
    }

    .nav-bar-float {
        width: 80%;
    }

    .table-responsive .status {
        font-size: 9px;
        padding: 1px 3px;
    }

    .general-info-item .pull-right span, .DesignationContainer span, .DefaultTaskContainer span {
        font-size: 13px;
    }

    .general-info-item .EditDeleteButton {
        width: 12px;
    }

        .general-info-item .EditDeleteButton i {
            font-size: 12px;
        }

    .recent-activity-header, .rightContentHeader {
        font-size: 15px;
    }
}

.drop-highlight {
    border: 2px dashed black !important;
}

.modal-header .close {
    position: absolute;
    top: 5px;
    right: 8px;
}

.search-field-plan {
    margin: 0;
    border: 1px solid #eee;
    padding: 1px 0px 1px 5px !important;
    width: 100% !important;
}

.lablel-gray {
    font-size: 11px;
    color: #999;
    padding: 15px 0 15px 3px;
}

.project-plan-container .recent-activity-header {
    text-align: left;
    font-weight: bold;
    font-size: 17px;
}

.project-plan-container .fc-center {
    display: block !important;
}

.project-plan-container .project-status-row {
    display: none !important;
}

.project-plan-container .row-project-member {
    margin: 0px;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.project-plan-container .row-project-calender {
    margin: 0px;
    border-left: 1px solid #eee;
    padding-top: 20px;
}

.project-plan-container .fc-button {
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid #cecece;
    white-space: nowrap;
    border-radius: 2px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 77px;
    background-color: white;
    text-transform: capitalize;
}

    .project-plan-container .fc-button:hover {
        background-color: #eee;
    }

.project-plan-container .fc-today-button {
    font-weight: bold;
}

.project-plan-container .fc-state-active {
    background: none !important;
    background-color: #e4fbf5 !important;
    border: 1px solid #00da9d !important;
    color: #00da9d !important;
    font-weight: bold !important;
    box-shadow: none;
}

.project-plan-container .fc-prev-button {
    width: 40px;
}

.project-plan-container .fc-next-button {
    width: 40px;
}

.project-plan-menu ul {
    margin-bottom: 0px !important;
}

.project-plan-menu li {
    padding: 5px 0 5px 10px;
    margin-top: 4px;
    font-size: 11px;
    cursor: pointer;
    list-style-type: none;
    border-radius: 5px !important;
}

    .project-plan-menu li:hover {
        background: url(../Images/tms_icon_drag.png) repeat-y;
        margin-left: -10px;
        padding-left: 20px !important;
        color: black !important;
    }

.high {
    background-color: #F8E5E4;
}

.medium {
    background-color: #FFF3E6;
}

.low {
    background-color: #E8FAF1;
}

.project-plan-menu .search-field {
    background: #FFF;
    width: 90%;
    border-radius: 3px;
    padding: 2px 8px;
    color: #999;
}

.project-plan-container .label-dark-gray-2 {
    display: block !important;
    padding-top: 4px;
    font-size: 11px;
}

.project-plan-container .recent-activity-header {
    width: 170px;
}


.padding-0 {
    padding: 0;
}

.padding-left-right-5 {
    padding-left: 5px;
    padding-right: 5px;
}

.project-plan-container .row-project-calender .full-calendar .fc-center h2 {
    font-size: 21px;
    font-weight: bold;
}


/*Chatting CSS Start*/
.clearFix {
    clear: both;
}

.panel.panel-chat {
    position: fixed;
    bottom: 0;
    right: 0;
    max-width: 300px;
    box-shadow: none;
    -webkit-box-shadow: none;
    margin-bottom: 0px;
    z-index: 100;
    width: 300px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

    .panel.panel-chat * {
        background: none;
        border: none;
    }

    .panel.panel-chat .panel-heading {
        background: rgb(26, 26, 26);
        border: 1px solid #1a1a1a;
        color: #FFF;
        padding: 2px 11px 2px 10px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

        .panel.panel-chat .panel-heading .chat-icon {
            float: left;
            margin-right: 10px;
            font-size: 19px;
        }

    .panel.panel-chat .icon-live-chat {
        color: #0ae21b;
        margin-right: 5px;
    }

    .panel.panel-chat .panel-sub-heading {
        background: #9a9a9a;
        color: #FFF;
        padding-bottom: 5px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 5px;
    }

    .panel.panel-chat .panel-heading a:nth-of-type(1) {
        text-decoration: none;
        width: 208px;
        color: #FFF;
        font-weight: bold;
        float: left;
        padding-top: 4px;
    }

    .panel.panel-chat .panel-heading a:nth-of-type(2) {
        text-decoration: none;
        max-width: 11px;
        width: 11px;
        color: #FFF;
        float: right;
    }

    .panel.panel-chat .panel-body {
        display: block;
        padding: 0px;
        margin: 0;
        background: #ffffff;
        overflow-y: scroll;
    }

    .panel.panel-chat .panel-body-middle {
        width: 100%;
        padding: 5px;
        overflow: auto;
        height: 297px;
    }

    .panel.panel-chat.panel-chat-admin .panel-body-middle {
        height: 390px !important;
        border-left: 1px solid #eee;
    }


    .panel.panel-chat .panel-body::-webkit-scrollbar {
        display: none;
    }

    .panel.panel-chat .panel-body .messageMe {
        margin-bottom: 10px;
    }

    .panel.panel-chat .remove-circle {
        font-size: 16px;
        padding-top: 5px;
        color: white;
    }

    .panel.panel-chat .panel-body .messageMe img {
        float: left;
        width: 30px;
        height: 30px;
        border-radius: 25px;
    }

    .panel.panel-chat .panel-body .messageMe span {
        display: block;
        float: left;
        padding: 5px 20px;
        background: #b8fbe9;
        max-width: 200px;
        word-break: break-word;
        border-radius: 10px;
        margin-left: 5px;
    }

    .panel.panel-chat .panel-body .messageHer {
        margin-bottom: 10px;
    }

        .panel.panel-chat .panel-body .messageHer img {
            float: right;
            width: 30px;
            height: 30px;
            border-radius: 25px;
            border: 1px solid #4c4c4c;
        }

        .panel.panel-chat .panel-body .messageHer span {
            display: inline;
            float: right;
            padding: 5px 20px;
            background: #ececec;
            max-width: 200px;
            word-break: break-word;
            border-radius: 5px;
            margin-right: 5px;
        }

        .panel.panel-chat .panel-body .messageHer .user-name {
            float: right;
        }

        .panel.panel-chat .panel-body .messageHer .msg-time {
            float: right;
            padding: 2px 47px 0 0;
            font-size: 9px;
            color: #7b7b7b;
            font-style: italic;
        }

    .panel.panel-chat .panel-body .messageMe .msg-time {
        float: left;
        padding: 2px 0 0 48px;
        font-size: 9px;
        color: #7b7b7b;
        font-style: italic;
    }



    .panel.panel-chat .panel-body .messageMe .user-name {
        float: left;
    }

    .panel.panel-chat .panel-footer {
        padding: 10px;
        margin: 0;
        border-top: 1px solid #eee;
        max-height: 75px;
        height: 75px;
        position: absolute;
        bottom: 0px;
        width: 100%;
        background-color: white;
        margin-left: 1px;
    }

.panel.panel-chat-admin .panel-footer {
    bottom: auto;
}

.panel.panel-chat .panel-footer textarea {
    margin-bottom: -5px;
    resize: none;
    width: 209px;
    height: 100%;
    border-radius: 5px;
    border: 1px solid #00da9d;
    font-weight: normal;
}

.panel.panel-chat-admin .panel-footer textarea {
    width: 243px !important;
}

.panel.panel-chat .panel-footer .btn-send {
    float: right;
    width: 63px;
    background: #00DA9D;
    color: #FFF;
    border: none;
    font-weight: bold;
    font-size: 14px;
    height: 90%;
    margin-top: 3px;
    border-radius: 5px;
}

.panel.panel-chat .slideDown.ng-hide {
    height: 0;
    transition: height 0.35s ease;
    overflow: hidden;
    position: relative;
}

.panel.panel-chat-admin .slideDown.ng-hide {
    height: 0;
    transition: height 0.35s ease;
    overflow: hidden;
    position: relative;
}

.panel.panel-chat .arrow-expand {
    display: block;
}

.panel.panel-chat .arrow-collapsed {
    display: none;
}

.panel.panel-chat .arrow-expanded-left {
    display: none;
}

.panel.panel-chat .arrow-collapsed-left {
    display: block;
}

.display-show {
    display: block;
}

.display-none {
    display: none;
}

.panel.panel-chat .slideDown {
    height: 400px;
    transition: height 0.35s ease;
    overflow: hidden;
    position: relative;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}

.panel.panel-chat.panel-chat-admin .slideDown {
    height: 500px;
    transition: height 0.35s ease;
    overflow: hidden;
    position: relative;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}

.panel-chat-admin .img-container {
    float: left;
    padding: 5px 0;
    margin-right: 5px;
    width: 31px;
    height: 40px;
}

.panel-chat-admin .img-container-top {
    padding: 0 !important;
}

.panel-chat-admin .float-right {
    float: right;
}

.panel-chat-admin .name-container {
    float: left;
    padding: 12px 0 12px 5px;
}

    .panel-chat-admin .name-container a {
        word-wrap: break-word;
        text-decoration: none;
        color: #292929;
    }

        .panel-chat-admin .name-container a:hover {
            word-wrap: break-word;
            text-decoration: none;
            color: #292929;
        }

.panel-chat-admin li img {
    float: left;
    border-radius: 25px;
    width: 100%;
    height: 100%;
    border: 1px solid #b3b3b3 !important;
}

.panel-chat-admin .slideDown {
    border-left: 0 !important;
}

.panel-chat-admin .user-msg-container {
    padding: 0;
}

.panel.panel-chat.panel-chat-admin {
    right: 0;
    max-width: 500px;
    width: 500px;
}

.tabs-left > :first-child {
    border-top: 0 !important;
}

.panel-chat-admin .tabs-left > li {
    float: none;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.panel-chat-admin .tabs-left > li {
    margin-right: -1px;
    font-size: 11px;
    padding: 2px 0px 2px 0;
    border-bottom: 1px solid #eee;
    padding-left: 5px;
    overflow: hidden;
}

    .panel-chat-admin .tabs-left > li.active {
        border-left: 6px solid #16b923;
        background-color: #eee;
    }

        .panel-chat-admin .tabs-left > li.active > a:hover,
        .panel-chat-admin .tabs-left > li.active > a:focus {
            border-bottom-color: #ddd;
            border-right-color: transparent;
        }

.panel-chat-admin .user-list-container {
    padding-right: 0;
    border-right: 0;
    padding-left: 0;
}

.tabs-left > li > a {
    background-color: transparent !important;
    color: #5a5a5f !important;
    border: 0 !important;
    border-radius: 4px 0 0 4px;
    margin-right: 0;
    display: block;
    border-bottom: 1px solid #ddd;
    border-right-color: transparent;
    border-radius: 4px 4px 0px 0px;
    padding: 12px 0 12px 5px;
}

/*scrollbar*/
.panel.panel-chat .chat-scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

.panel.panel-chat .chat-scrollbar::-webkit-scrollbar {
    width: 9px;
    background-color: #a728a9;
}

.panel.panel-chat .chat-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #1a1a1a;
}

.margin-bottom-15 {
    margin-bottom: 15px !important;
}

.margin-bottom-5 {
    margin-bottom: 5px !important;
}

.margin-bottom-0 {
    margin-bottom: 0px !important;
}

.margin-left-5 {
    margin-left: 5px;
}

.margin-left-10 {
    margin-left: 10px;
}

.span-unread-sms {
    background-color: #FF9800 !important;
    border-radius: 15px;
    border: 1px solid #FF5722 !important;
    width: 17px;
    height: 17px;
    text-align: center;
    color: white;
    margin-right: 3px;
    position: absolute;
    right: 0;
    font-size: 11px;
    padding-top: 0px;
}

.panel.panel-chat .chat-user-notification {
    width: 222px;
    float: left;
    overflow: hidden;
    padding-top: 0px;
    height: 32px;
}

    .panel.panel-chat .chat-user-notification img {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        border: 1px solid #463535;
        margin-right: 5px;
    }

.panel.panel-chat h2 {
    width: 90%;
    text-align: center;
    border-bottom: 1px solid #dadada;
    line-height: 0.1em;
    margin: 15px 0 15px;
    font-size: 10px;
    margin-left: 14px;
}

    .panel.panel-chat h2 span {
        background: #fff;
        padding: 0 10px;
    }


.background-low-red {
    background-color: #d23838 !important;
}

.big-image {
    width: 100px;
    height: 100px;
    border-radius: 10px;
}

.big-div {
    height: 110px;
    margin-bottom: 20px;
    padding: 0px;
}
/*Chatting CSS End*/
.project-plan-serachbox {
    max-width: 80%;
    width: 175px;
}

.over {
    border: solid 5px #00da9d;
}

.over-bg {
    background-color: #00da9d !important;
}

.dragging-style {
    font-size: 11px;
    list-style: none;
    padding: 3px 0 0 5px;
    overflow: hidden;
    z-index: 1000;
}

.float-right {
    float: right !important;
}

/* Use smaller input for time in task detail and show a big description input */
.editable-buttons {
    margin-left: 0;
}

input[type="number"].editable-has-buttons {
    padding: 6px 6px;
    width: 50px;
}

.editable-textarea, .editable-textarea .form-group,
.editable-text, .editable-text .form-group {
    width: 100%;
}

textarea.editable-has-buttons, input[type="text"].editable-has-buttons {
    width: Calc(100% - 80px) !important;
}

.filter-area-table {
    display: table !important;
}

.margin-top-0px {
    margin-top: 0 !important;
}

.fc-scroller.fc-day-grid-container {
    overflow: visible !important;
}


.close-icon {
    position: relative;
    padding: 10px;
}

.close-icon {
    border: 1px solid transparent;
    background-color: transparent;
    display: inline-block;
    vertical-align: middle;
    outline: 0;
    cursor: pointer;
}

    .close-icon:after {
        content: "X";
        display: block;
        width: 15px;
        height: 15px;
        position: absolute;
        background-color: #FA9595;
        z-index: 1;
        right: 35px;
        top: 0;
        bottom: 0;
        margin: auto;
        padding: 2px;
        border-radius: 50%;
        text-align: center;
        color: white;
        font-weight: normal;
        font-size: 12px;
        box-shadow: 0 0 2px #E50F0F;
        cursor: pointer;
    }

.search-input:not(:valid) ~ .close-icon {
    display: none;
}

.custom-menu-search {
    width: 80%;
}

.required-color {
    color: red !important;
    padding-left: 3px !important;
    font-weight: bold !important;
}

.padding-left-right-2 {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.is-focused:focus {
    border-color: #b2c5aa !important;
    -moz-box-shadow: 0 0 6px #8bde91 !important;
    box-shadow: 0 0 6px #8bde91 !important;
}

.padding-top-15 {
    padding-top: 15px !important;
}

.fa-plus-circle-custom-white {
    float: right;
    cursor: pointer;
    padding: 0px 0px 0px 0px;
    font-size: 16px;
    line-height: 20px;
}

.fa-plus-circle-customm-green {
    cursor: pointer;
    padding: 0px 0px 0px 0px;
    font-size: 16px;
    color: #00d99b;
}

.add-more-seperator {
    padding-top: 7px !important;
    border-top: 2px solid #eee;
    margin-top: 10px !important;
}

.attachment-details-width {
    float: left;
    height: 90px;
}

.attachment-action-width {
    width: 50px;
    float: left;
}

.attachment-parent {
    height: 90px;
    max-width: 140px;
}

.addtask-check-div input {
    width: 80% !important;
}

.check-input {
    width: auto !important;
}

.check-label {
    padding: 4px 0 0px 5px !important;
    width: 85%;
}

.cursor-pointer {
    cursor: pointer !important;
}

.add-more-images {
    color: #999;
    cursor: pointer;
}

.w-100 {
    width: 100% !important;
}

.w-85 {
    width: 85% !important
}

.w-88 {
    width: 88% !important
}

.w-995 {
    width: 99.5%
}

.btn-cross-box {
    cursor: pointer;
    float: right;
}

.red-bold {
    color: red;
    font-weight: bold;
}

#attachment-container {
    padding: 5px 0 5px 0;
    margin: auto;
    border-bottom: 1px solid #eee;
}

    #attachment-container:hover {
        background-color: #e4fbf5;
    }

.attachment-img-container {
    overflow: hidden;
    height: 90px;
    border: 1px solid #eee;
    border-radius: 5px;
}

.attachment-img {
    background-color: rgba(89, 133, 210, 0.75);
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 3px;
    height: 90px;
    left: 0;
    text-align: center;
    text-decoration: none;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attachment-imgtag {
    max-width: 100%;
    max-height: 90px;
    width: auto;
    height: auto;
}

.attachment-videotag {
    width: 100% !important;
    height: auto;
    max-height: none;
}

.attachment-preview-img-parent {
    text-align: left;
    overflow: hidden;
    border-radius: 5px;
}

.attachment-preview-img {
    width: 100%;
    border-radius: 5px;
    border: 1px solid #eee;
}

.padding-bottom-10 {
    padding-bottom: 10px !important;
}

.padding-bottom-15 {
    padding-bottom: 15px !important;
}

.padding-left-25 {
    padding-left: 25px !important;
}

.m-top30 {
    margin-top: 30px;
}

.btn-add-more {
    color: #00DA9D;
    cursor: pointer;
    font-weight: bold;
}

    .btn-add-more:hover {
        color: #00DA9D;
    }

/*For momemt date picker*/
* {
    outline: none !important;
}

.moment-date-picker {
    cursor: pointer;
}

.moment-picker .month-view td {
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
}

.moment-picker .moment-picker-container {
    padding: 0;
    border: 2px solid #eee;
}

.moment-picker-container table.header-view {
    background-color: #00DA9D;
}

    .moment-picker-container table.header-view tr th:last-child,
    .moment-picker-container table.header-view tr th:first-child {
        color: #fff;
    }

.moment-picker th, .moment-picker td {
    -ms-text-shadow: none;
    text-shadow: none;
    -ms-border-radius: 0 !important;
    border-radius: 0 !important;
    padding: 8px 6px !important;
}

.task-progress-delete-btn {
    float: right !important;
    width: 20px !important;
    position: relative !important;
}

.moment-picker th {
    color: #000;
    font-weight: 600;
}

.moment-picker-container table.header-view tr th:hover {
    background: #00DA9D;
}

.moment-picker td {
    font-weight: 400;
    color: #555;
}

.moment-picker-specific-views table thead {
    background-color: #C1F6E7;
}

.moment-picker th:hover,
.moment-picker td:hover {
    background: none;
}

.moment-picker td.selected {
    background: #00DA9D !important;
}

.moment-picker td.today {
    background: #f3f3f3;
    font-weight: 700 !important;
    -ms-text-shadow: none;
    text-shadow: none;
}

.header-view table {
    color: #fff !important;
}

.moment-date-picker a,
.moment-date-picker a:hover {
    color: #555 !important;
}

}

.modal-body option {
    color: #1a1a1a;
}

.editable.task-title {
    color: #1a1a1a !important;
}

.btn-custom-style {
    font-weight: normal !important;
    color: #555 !important;
}

.nopadding {
    padding: 0 !important;
}

.nomargin {
    margin: 0 !important;
}

.w-20 {
    width: 20px !important;
}

.file-action-container {
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 180px;
    display: inline;
    font-size: 11px;
}

.file-action-parts {
    width: 17px;
    color: #7b7b7b;
}

.file-action-parts-container {
    float: left;
    width: 80px;
    cursor: pointer;
}

.f-11 {
    font-size: 11px;
}

.file-detail-container {
    padding-left: 5px;
}

.file-list-parent {
    width: 100%;
    overflow: hidden;
}

    .file-list-parent li {
        overflow: hidden;
        border: 1px solid #d6d6d6;
        padding: 4px;
    }

.commentAttachmentBox li a {
    float: right;
    color: inherit;
}

    .commentAttachmentBox li a:hover {
        color: #00da9d;
    }

.show-all-attachment {
    float: right;
    cursor: pointer;
}

.margin-top-2 {
    margin-top: 2px;
}

.tabbed-view {
    display: flex;
    width: 100%;
}

.tabbed-view-item {
    flex: 1;
    text-align: center;
}

.editable-moment-picker .error {
    background: #f2dede;
    border-color: #ebccd1;
    color: #b94a48;
    background-size: 20px 20px;
    display: block;
    border: 1px solid;
    padding: 5px 10px;
    border-radius: 2px;
    margin-top: 2px;
    position: relative;
}

.fc-content .fc-time {
    display: none;
}

.timesheet-topbar, .timesheet-topbar > div:nth-child(2) {
    display: flex;
    align-items: flex-start;
}

.p-details-container {
    font-size: 12px;
    font-weight: normal;
}

.f-weight-normal label {
    font-weight: normal !important;
}

.popover-container {
    font-size: 12px;
}

    .popover-container .popover-value {
        word-break: break-all;
    }

.font-meiryo {
    font-family: Meiryo, Open Sans, serif !important;
}

.opacity-none {
    opacity: 0;
}

.opacity-inherit {
    opacity: inherit;
}

body.modal-open {
    overflow: hidden !important;
}

body.bootbox.modal {
    overflow: hidden !important;
}

.td-style {
    color: #9a9a9a;
    padding-bottom: 12px;
}

.company-name-ddl, company-name-ddl:focus {
    background: transparent;
    border: 0;
}

.dropdown-item-checked::before {
    position: absolute;
    left: .4rem;
    content: '&#10004';
    font-weight: 600;
}

.company-name-ddl select {
    font-size: 2em;
}

.company-name-ddl option {
    color: #000000db;
    font-weight: bold;
    padding: 5px;
    font-size: 14px;
    border: 1px solid green;
}

.company-name-ddl option-btn {
    border-top: 1px solid #7c7c7c;
}

.company-name-ddl option:hover {
    color: blue;
}

.company-dropdown-toggle {
    background: transparent !important;
    border: 0;
    color: #bdbdbd;
    font-weight: bold;
    font-size: 15px;
}

.ddl-menu-company {
    border: 1px solid #ccc !important;
    top: 48px;
    box-shadow: 2px 2px 7px #a9a9a9;
}

.active-tick::after {
    content: '\f00c';
    font-family: 'FontAwesome';
    float: right;
}

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

.dropdown-menu-company {
    border: 1px solid #ccc;
}

.li-button :hover {
    background-color: #00da9d !important;
}

.anchor-button {
    color: #ffffff !important;
    margin: 10px !important;
    border: 1px solid #00da9d;
    background-color: #00da9d;
    font-weight: bold !important;
    border-radius: 5%;
}

    .anchor-button :hover {
        background-color: #00da9d !important;
    }

.title-4 {
    font-size: 14px;
    padding-left: 10px;
    color: #025a42;
}

.rating {
    color: #a9a9a9;
    margin: 0;
    padding: 0;
    width: 100%;
}

ul.rating {
    display: inline-block;
}

.rating li {
    list-style-type: none;
    display: inline-block;
    padding: 2px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    font-size: 20px;
    width: 20%;
}

.rating .filled .bar {
    background-color: #00da9d !important;
}

.rating li .bar {
    background-color: #cecece;
    height: 8px;
    width: 100%;
}

    .rating li .bar:hover {
        background-color: #d2e4cf;
    }

.rating-display-container {
    width: 100%;
}

    .rating-display-container li {
        background-color: #cecece;
        margin-right: 1px;
        height: 3px;
        width: 18%;
        cursor: text;
    }

        .rating-display-container li .bar {
            background-color: #cecece;
            height: 2px;
            width: 100%;
        }

.rating-part-by-part {
    height: 4px;
    margin-right: 2px;
    width: 17%;
    float: left;
    background-color: #cecece;
}

.task-card-project-name {
    color: #B3B3B3;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 2px;
}

.ToDoTag {
    background-color: #9DD763;
    color: white;
    padding: 0 8px;
    border-radius: 8px;
    font-weight: 600;
}

.OnReviewTag {
    background-color: #D7CB63;
    color: white;
    padding: 0 8px;
    border-radius: 8px;
    font-weight: 600;
}

.InProgressTag {
    background-color: #63D76F;
    color: white;
    padding: 0 8px;
    border-radius: 8px;
    font-weight: 600;
}

.ClosedTag {
    background-color: #5D6187;
    color: white;
    padding: 0 8px;
    border-radius: 8px;
    font-weight: 600;
}

.ProjectTag {
    color: #00DA9D;
    font-weight: 600;
    border: 0.5px solid #00DA9D;
    border-radius: 15px;
}

.rating-display-container .filled {
    background-color: #00da9d !important;
}

.bar-small {
    background-color: #cecece;
}

.search-textbox-border {
    border-radius: 3px;
    border: 1px solid #CCC;
    padding: 4px;
    font-size: 12px;
    width: 70%;
}

.inactive {
    background-color: #CCC !important;
    border-color: #CCC !important;
    color: #7b7b7b !important;
}

.margin-top-10 {
    margin-top: 10px;
}

.popup-doc {
    height: 600px !important;
    width: 600px;
    max-width: 100%;
    text-align: center;
}

.popup-container {
    display: inline-block !important;
    min-width: 200px;
    max-width: 700px;
    min-height: 100px;
    text-align: center;
    box-shadow: 0 5px 14px 13px rgb(97, 97, 97);
}

.modal-center {
    text-align: center;
}

.hidden-iframe-container {
    width: 150px;
    height: 150px;
    overflow: hidden;
    display: none;
}

.img-viewerjs {
    max-width: 100%;
    height: auto;
}

.width-50p {
    width: 50px;
}

.width-100pr {
    width: 100%;
}

.margin-0p {
    margin: 0 !important;
}

.img-container-modal {
    box-shadow: 3px 3px 13px #c7c7c7;
}

.img-container-big {
    max-width: 85% !important;
}



.chatting-download-notification-bar {
    background-color: #00BA80;
    color: white;
    font-size: 16px;
    height: 40px;
    display: inline-block;
    width: 100%;
    padding: 4px 10px 0 10px;
    margin: 0;
    position: fixed;
    top: 0;
    z-index: 5000;
}

.chatting-logo-container {
    float: left;
}

.notification-header {
    float: left;
    padding: 6px 0 0 6px;
    font-size: 14px;
}

.logo-container-parent {
    float: left;
    padding: 4px 10px 0 20px;
    width: 200px;
}

.fa-operating-system {
    font-size: 17px;
    border: 1px solid white;
    color: white;
    padding: 1px 8px 1px 8px;
    border-radius: 5px;
}

.span-cross-button-download {
    float: right;
    margin-right: 10px;
    padding-top: 3px;
}

    .span-cross-button-download a {
        color: white;
    }

.download-notification-margin {
    margin-left: -240px !important;
}

.check-list-input-container {
    padding: 0;
    float: left;
    width: 95%;
    margin-left: 10px;
}

.custom-modal-body {
    float: left;
    width: 100%;
    padding: 10px 5px 10px 5px;
}

.comment-img-preview-parent {
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 3px;
    min-height: 90px;
    left: 0;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cacaca;
    background-color: #eee;
}

.comment-msg-docs {
    width: 100px;
    height: 80px;
}

    .comment-msg-docs img {
        max-width: 50px;
    }

.modal-content {
    border: none;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1);
    box-shadow: 0 7px 8px rgba(150, 150, 150, 0.97);
}

.msg-delete-btn {
    color: #848484;
    cursor: pointer;
}

    .msg-delete-btn:hover {
        color: #080808;
    }

.font-size-12 {
    font-size: 12px;
}

.task-description {
    color: #333333 !important;
}

.attachment-comment-parent {
    width: 33%;
    float: left;
    overflow: hidden;
    margin-bottom: 10px;
}

.height-90px {
    height: 90px;
}

.attachment-comment-parent-detail {
    width: 50%;
    float: left;
    height: 90px;
}

.comment-file-icon {
    width: 30px;
    height: 30px;
}

.comment-file-text {
    color: #525252;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 5px;
}

.comment-preview-file-type {
    display: inline-flex;
}

.comment-action-button-parent {
    display: inline-flex;
    float: right;
}

.comment-action-button {
    margin: 0 5px 0 5px;
}

.comment-anchor {
    display: inline;
    margin: 2px 0 2px 0;
    color: #00d99b !important;
}

canvas {
    display: none;
}

.width-95p {
    width: 95%;
}

.padding-5px {
    padding: 5px;
}

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

.file-no-preview {
    background-image: url(../Images/no_preview_img_color.png);
    background-size: 30px;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    float: left;
}

.play-btn {
    background-image: url(../Images/play-btn.png);
    background-size: 30px;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    position: absolute;
}

.video-file {
    -webkit-filter: contrast(50%) !important;
}

.popup-text {
    display: inline-block;
    width: 350px;
}

.margin-top-5px {
    margin-top: 5px;
}

.thin-notification-top {
    background-color: #00d99b;
    color: white;
    padding: 3px 0 3px 0;
    -moz-animation: cssAnimation 0s ease-in 15s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 15s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 15s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 15s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    border-radius: 0 0 5px 5px;
}

    .thin-notification-top i {
        margin: 0 5px 0 10px;
    }

@keyframes cssAnimation {
    to {
        opacity: 0;
        transition: visibility 0s, opacity 1s linear;
    }
}

@-webkit-keyframes cssAnimation {
    to {
        opacity: 0;
        transition: visibility 0s, opacity 1s linear;
    }
}

.cookie-information-outer {
    display: none !important;
    bottom: 15px;
    right: 20px;
    position: fixed;
    height: 45px;
    background-color: #5c5c5c;
    color: #ebebeb;
    border-radius: 3px;
    font-family: inherit;
}

    .cookie-information-outer .text-section {
        float: left;
        padding: 11px 0px 0 8px;
    }

    .cookie-information-outer .btn-section {
        margin: 8px;
        float: left;
    }

.deleted-timelog span {
    text-decoration: line-through;
    color: #cecece !important;
    font-weight: normal !important;
}

.modal-loading-container {
    position: absolute;
    padding: 30px;
    background: white;
    height: 600px;
    width: 600px;
    text-align: center;
    padding: 100px;
}

    .modal-loading-container img {
        width: 110px;
    }


.bg-none {
    background: none !important;
    background-color: transparent !important;
}

.border-none {
    border: none;
}

.text-ccc {
    color: #ccc;
}

.pl-0 {
    padding-left: 0;
}

.pl-5 {
    padding-left: 5px;
}

.pl-15 {
    padding-left: 15px;
}

.pr-0 {
    padding-right: 0
}

.pr-5 {
    padding-right: 5px;
}

.pt-0 {
    padding-top: 0
}

.pb-0 {
    padding-bottom: 0
}


.pt-2px {
    padding-top: 2px !important;
}

.pt-4px {
    padding-top: 4px !important;
}

.pt-0 {
    padding-top: 0;
}

.page-title {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
    color: #333333;
    margin-bottom: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.text-summary {
    font-size: 13px;
    font-weight: 400;
    color: #999999;
}

.text-summary-highlight {
    font-size: 13px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 22px;
}

.float-left {
    float: left;
}

.lh-0 {
    line-height: 0;
}

.lh-0-5 {
    line-height: 0.5;
}

.lh-1 {
    line-height: 1;
}

.lh-1-7 {
    line-height: 1.7;
}

.lh-3-5 {
    line-height: 3.5;
}

.lh-2 {
    line-height: 2;
}

.lh-3 {
    line-height: 2;
}

.lh-4 {
    line-height: 4;
}

.lh-5 {
    line-height: 5;
}

.lh-10 {
    line-height: 10px;
}

.lh-12 {
    line-height: 12px;
}

.lh-14 {
    line-height: 14px;
}

.lh-16 {
    line-height: 16px;
}

.lh-18 {
    line-height: 18px;
}

.lh-20 {
    line-height: 20px;
}

.lh-22 {
    line-height: 22px;
}

.lh-24 {
    line-height: 24px;
}

.lh-26 {
    line-height: 26px;
}

.lh-28 {
    line-height: 28px;
}

.lh-30 {
    line-height: 30px;
}

.lh-32 {
    line-height: 32px;
}

.w-85-px {
    width: 85px;
}

.d-blok {
    display: block
}

.d-block {
    display: block
}

.d-table {
    display: table
}

.d-inline-block {
    display: inline-block
}

.d-inline {
    display: inline
}

.w-25 {
    width: 25%;
}

.w-50 {
    width: 50%
}

.w-75 {
    width: 75%
}

.w-100 {
    width: 100%
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-5 {
    margin-top: 5px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-40 {
    margin-top: 40px;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-5 {
    margin-bottom: 5px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-40 {
    margin-bottom: 40px;
}

.ml-0 {
    margin-left: 0 !important;
}

.ml-5 {
    margin-left: 5px !important;
}

.ml-10 {
    margin-left: 10px !important;
}

.mr-11 {
    margin-right: 11px !important;
}

.ml-15 {
    margin-left: 15px !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mr-5 {
    margin-right: 5px !important;
}

.mr-10 {
    margin-right: 10px !important;
}

.mr-11 {
    margin-right: 11px !important;
}

.mr-15 {
    margin-right: 15px !important;
}

.position-relative {
    position: relative;
}

.bs-bb {
    box-sizing: border-box;
}

.text-left {
    text-align: left;
}

.of-hidden {
    overflow: hidden;
}

.mxh-400px {
    max-height: 400px
}

.mnh-400px {
    min-height: 400px;
}

.trialDaysNotifyDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25px;
    background: #DA534B;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
}

.trialDaysText {
    font-size: 12px;
    letter-spacing: 0.035em;
    color: #FFFFFF;
}

.closebtn {
    position: fixed;
    right: 10px;
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

    .closebtn:hover {
        color: black;
    }

@media (max-width: 767.98px) {
    .mxh-sm-550px {
        max-height: 550px;
    }

    .mxh-sm-650px {
        max-height: 650px;
    }

    .w-sm-88 {
        width: 88% !important
    }

    .float-sm-left {
        float: left !important
    }

    .text-sm-left {
        text-align: left !important
    }

    .mnh-sm-650 {
        min-height: 650px;
    }
}

.SavePlanBtn {
    margin-left: 10px !important;
}

.paymentImg {
    width: 85%
}

.paymentHeader {
    font-size: 12px;
    color: #B3B3B3
}

.alertNavigate {
    color: #FFFFFF;
}

    .alertNavigate:hover {
        color: #FFFFFF;
        text-decoration: underline
    }

    .alertNavigate:active {
        color: #FFFFFF;
    }

    .alertNavigate:focus {
        color: #FFFFFF;
    }

.introjs-tooltip {
    min-width: 400px !important;
}

.customTooltip * {
    color: #4a4a4a;
    font-size: 18px
}

.customTooltip .introjs-tooltip-title {
    color: #00DA9D;
    font-family: Open Sans;
    font-size: 17px;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: 0em;
    text-align: left;
}

.customTooltip .introjs-tooltiptext {
    color: #555555;
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: left;
}

.customTooltip .introjs-dontShowAgain label {
    color: #555555;
    font-family: 'Open Sans';
    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
    font-style: normal;
}

.customTooltip .introjs-button:focus {
    box-shadow: none;
}

.customTooltip .introjs-nextbutton {
    color: #FFFFFF;
    font-family: 'Open Sans';
    background: #00DA9D;
    border: 1px solid #00DA9D;
    border-radius: 4px;
    text-shadow: none;
}

    .customTooltip .introjs-nextbutton:hover {
        color: #FFFFFF;
        font-family: 'Open Sans';
        background: #00DA9D;
        border: 1px solid #00DA9D;
        border-radius: 4px;
        text-shadow: none;
    }

    .customTooltip .introjs-nextbutton:focus {
        color: #FFFFFF;
        font-family: 'Open Sans';
        background: #00DA9D;
        border: 1px solid #00DA9D;
        border-radius: 4px;
        text-shadow: none;
    }

.customTooltip .introjs-prevbutton {
    color: #B3B3B3;
    font-family: 'Open Sans';
    background: #FFFFFF;
    border: 1px solid #B3B3B3;
    border-radius: 4px;
    text-shadow: none;
}

    .customTooltip .introjs-prevbutton:hover {
        color: #B3B3B3;
        font-family: 'Open Sans';
        background: #FFFFFF;
        border: 1px solid #B3B3B3;
        border-radius: 4px;
        text-shadow: none;
    }

    .customTooltip .introjs-prevbutton:focus {
        color: #B3B3B3;
        font-family: 'Open Sans';
        background: #FFFFFF;
        border: 1px solid #B3B3B3;
        border-radius: 4px;
        text-shadow: none;
    }

.customTooltip .introjs-progress {
    margin: 20px !important;
}

.customTooltip .introjs-progressbar {
    background-color: #00DA9D !important;
}