/* here you can put your own css to customize and override the theme */

.help-table td {
    vertical-align: top;
}

.application-logo {
    width: 200px;
}

.approval-request-approved {
    color: #3c763d !important;
    background-color: #dff0d8 !important;
    border-color: #d6e9c6 !important;
}

.approval-request-approved:before {
    border-right: 12px solid #dff0d8 !important;
}

.approval-request-rejected {
    color: #a94442 !important;
    background-color: #f2dede !important;
    border-color: #ebccd1 !important;
}

.approval-request-rejected:before {
    border-right: 12px solid #f2dede !important;
}

.participant-source-all-buttons {
    margin-right: 30px;
}

.custom-filter-help {
    margin-top: 10px;
    margin-left: 3px;
}

.status {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 18px;
}

.custom-table-list td {
    width: 33%;
}

.crediting-source-table-field {
    min-width: 300px;
    margin-bottom: 5px;
}

div.sub-group {
    padding-left: 16px;
    padding-top: 10px;
}

.job-title-description {
    padding-left: 10px;
    font-size: 14px;
}

.truncate-with-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.salesforce {
    float: right;
    position: relative;
    top: -15px;
}

.explanation {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 300 !important;
    margin-top: 6px;
    margin-bottom: 8px;
}

.dropdown-menu li > a {
    padding: 6px 6px 6px 13px;
}

.dashboard-report.dropdown-menu li > a:hover {
    cursor: pointer;
}

.tour.popover h3.popover-title {
    padding: 0;
    margin: 0;
    font-size: 24px;
    line-height: 26px;
    border-bottom: 0;
    background-color: white;
}

.tour .popover-navigation > [data-role='next'] {
    background: #5ebd3f;
    color: white;
}

.tour .popover-navigation > .disabled {
    background-color: #cdcece !important;
    color: darkgray;
}

.logging-pre {
    width: 890px;
    background-color: white;
}

.tour .popover-hr {
    margin: 15px 0;
}

.tour .popover-hr-short {
    border-bottom: 0 !important;
    border-top: 2px solid black;
}

.tour.popover {
    padding: 70px !important;
    min-width: 500px;
    height: 400px;
}

.tour .popover-navigation {
    bottom: 0;
    position: absolute;
    text-align: left;
    padding: 0 !important;
    height: 100px;
    width: 358px;
    right: 70px;
}

.tour.popover-content {
    padding: 0 !important;
}

.logging-block {
    height: 500px;
    width: 100%;
    display: block;
    overflow: scroll;
    white-space: pre;
}

#custom-table-fields th {
    text-align: center;
}

.popover {
    font-size: 13px;
    font-weight: normal;
}

.tab-title {
    font-size: 18px;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
}

.tab-title-margin {
    margin-bottom: 10px;
}

.table-section {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300 !important;
    font-size: 18px;
    line-height: 50px;
}

.snippet-note {
    width: 655px;
    padding-top: 10px;
    padding-bottom: 10px;
}

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

.rc-anchor-light {
    background: inherit !important;
}

.query-builder .error-container {
    color: #a94442 !important;
}

.query-builder .has-error {
    background-color: #f2dede !important;
    border-color: #ebccd1 !important;
}

.table-pval {
    margin-bottom: 0px;
}

#spinner {
    position: absolute;
    left: 47%;
    top: 50%;
    color: black;
    font-size: 24px;
    text-align: center;
}

#spinner-overlay {
    background-color: white;
    opacity: 0.8;
    position: absolute;
    left: 225px;
    top: 0px;
    z-index: 9999;
    height: 100%;
    width: 944px;
    overflow: hidden;
    display: none;
}

#table-spinner {
    position: absolute;
    left: 28%;
    top: 320px;
    color: black;
    font-size: 24px;
    text-align: center;
}

#table-spinner-overlay {
    background-color: white;
    opacity: 0.8;
    position: absolute;
    left: 225px;
    top: 0px;
    z-index: 9999;
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: none;
}

.nowrap {
    white-space: nowrap;
}

.job-title {
    text-overflow: ellipsis;
    overflow: hidden;
}

.period-status-table {
    border-collapse: separate;
    border-spacing: 5px;
}

.job-title-checkbox-table {
    border-collapse: separate;
    border-spacing: 5px;
}

.task-assignee-name {
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
    padding-top: 5px;
    display: block;
}

.message-list-formatted-name {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
}

.formatted-name {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 140px;
    white-space: nowrap;
}

.btn-danger[disabled] {
    background-color: #d9534f !important;
}

.text-field-small {
    width: 80px;
}

.st-description input {
    width: 470px;
}

/**
This is used for showing the description of batches and things that go into batches. Most use the id version but nested batch options use the class
so it's also included
 */
#description-static,
.description-static {
    white-space: pre-wrap;
}

.user-selector {
    font-size: 22px;
}

.gauge-relative-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.gauge-barbox .midsep_img {
    margin-left: -15px;
}

.gauge-absolute-container {
    position: absolute;
    width: 100%;
}

.gauge {
    height: 60px;
}

.gauge-barbox {
    padding-bottom: 0px !important;
    height: 70px;
}

.group-email-table-spacer {
    margin-top: 20px;
}

.group-email-table {
    width: 100%;
}

.group-email-table td:first-child {
    width: 200px;
}

#pvals-no-more {
    font-weight: 600;
    padding-top: 20px;
    padding-bottom: 10px;
}

.vertical-center {
    vertical-align: middle !important;
}

.fraction-digits {
    width: 50px;
    margin: 0 auto !important;
}

.approval-status-table {
    margin-top: 60px;
    margin-bottom: 60px;
}

.approval-buttons {
    white-space: nowrap;
}

.top-actions {
    margin-top: 0px;
    padding: 0px;
    border-top: 0px;
}

#approval-pval-select-table > thead > tr > th:nth-child(5) {
    width: 110px;
}

#approval-pval-select-table thead tr {
    border: 0px;
}

div.bootbox.modal.fade.in {
    z-index: 1070;
}

.failed-job {
    color: #a94442;
    font-weight: 600;
}

.login-processing {
    display: none;
}

.approve-processing {
    display: none;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 8px;
}

.sip_component {
    font-weight: 300;
    font-size: medium;
    padding-left: 10px;
}

td.indent {
    padding-left: 30px !important;
}

td.double-indent {
    padding-left: 60px !important;
}

.no-wrap {
    white-space: pre;
    word-wrap: normal;
    overflow-x: scroll;
}

.icon-row {
    height: 50px;
}

.page-container {
    background-color: #fafafa;
    border-left: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
}

.ie-inline-block {
    display: inline-block;
}

.navbar-logo {
    max-width: 210px;
    max-height: 57px;
    padding-top: 10px;
}

.participant-form .row {
    margin-bottom: 5px;
}

.page-boxed {
    background-color: #e8e8e8 !important;
}

.page-sidebar {
    min-height: 780px;
}

.navbar-dropdown,
.navbar-dropdown:hover,
.navbar-dropdown:focus {
    border: 0px !important;
    color: inherit;
    background-color: inherit;
}

.navbar-second-row .navbar-dropdown,
.navbar-second-row .navbar-dropdown:hover,
.navbar-second-row .navbar-dropdown:focus {
    background-color: #434343;
}

.logo-bar .navbar-dropdown,
.logo-bar .navbar-dropdown:hover,
.logo-bar .navbar-dropdown:focus {
    background-color: #e8e8e8;
}

.fa-large {
    font-size: 18px;
}

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

.table-no-border > thead > tr > th,
.table-no-border > tbody > tr > th,
.table-no-border > tfoot > tr > th,
.table-no-border > thead > tr > td,
.table-no-border > tbody > tr > td,
.table-no-border > tfoot > tr > td {
    border-top: none;
}

.checkbox-table .checkbox-inline {
    margin-right: 20px;
}

.target-values {
    width: 100%;
    margin-right: 0px;
}

.right-align {
    text-align: right;
}

.left-align {
    text-align: left;
}

.center-align {
    text-align: center;
}

.user-selector {
    color: #666;
}

.period-selector,
.hamburger-menu {
    color: #ddd !important;
}

.scrollable-region {
    height: 670px;
    overflow-y: scroll;
}

.ie8 .page-sidebar {
    margin-left: 0px !important;
}

a.logout,
a.dropdown-toggle {
    color: #666;
}

.dropdown-menu li > a {
    color: #333 !important;
    background-color: #ffffff !important;
}

.btn {
    border: 1px solid #e5e5e5;
}

.btn.html-report-btn {
    height: 20px;
    padding-top: 0px;
}

.calendar-btn {
    border: none;
    height: 34px;
}

.login-data {
    font-size: 10px;
}

.slider-container {
    padding: 0px;
}

.what-if-slider {
    margin-left: 0px;
    margin-right: 10px;
}

.what-if {
    color: #666666;
    font-size: 13px;
    padding: 0px;
}

.period {
    color: #fff;
}

.avatar {
    margin-left: 5px;
}

.enforced-full-width {
    width: 100% !important;
}

.full-width {
    width: 100%;
}

.full-width-table {
    width: 100%;
}

.table-column-centered {
    text-align: center;
}

.clear-button {
    padding: 7px 3px;
}

.clear-button i[class*='fa-'] {
    color: #888;
    font-size: 18px !important;
}

.action-buttons {
    margin-bottom: 25px;
}

.crud-actions {
    margin-top: 25px;
}

.btn-xs {
    margin-left: 2px;
}

.group-table {
    margin-bottom: -1px;
}

.group-table > thead > tr > th,
.group-table > tbody > tr > td {
    width: 25%;
    text-align: center;
    border-top: 0px !important;
}

.job-title-table > thead > tr > th,
.job-title-table > tbody > tr > td {
    width: 20%;
}

.tab-pane {
    margin: 15px;
}

.excel-download {
    margin: 10px;
}

.pc-navbar {
    display: block;
    vertical-align: middle;
    padding-left: 15px;
    padding-right: 15px;
}

.chart-toggle a {
    color: #000 !important;
}

.logo-bar {
    line-height: 59px;
    /*height: 60px;*/
    font-size: 12px;
    color: #666;
}

.navbar-second-row {
    line-height: 39px;
    height: 43px;
    font-size: 12px;
    border-bottom: 1px solid #ddd;
    background-color: #434343;
}

.navbar-stat {
    color: #ddd;
    padding: 0px 0px 0px 13px;
}

.navbar-value {
    color: #ddd;
}

.navbar-toggle {
    margin: 0px !important;
    padding: 0px !important;
    line-height: 39px;
}

.component-list {
    list-style: none;
    padding: 0px;
    -webkit-padding-start: 0px;
}

.filter-list {
    list-style: none;
    -webkit-padding-start: 0px;
    padding-left: 0px;
}

.filter-list li {
    margin-bottom: 2px;
}

.filter-list-add {
}

.filter-list-remove {
    width: 39px;
}

#filterFieldsPopoverContainer .popover {
    width: 500px;
    max-width: none;
}

#targetFilterFieldsPopoverContainer .popover {
    width: 500px;
    max-width: none;
}

.dropdown-editable-group {
}

.dropdown-editable-group input {
    border-right: 0;
}

.dropdown-editable-input {
    background-color: #fff !important;
    color: #333333 !important;
}

.dropdown-editable-group span {
    background-color: #fff !important;
    color: #000 !important;
}

.fields-list {
    list-style: none;
    -webkit-padding-start: 0px;
    padding-left: 0px;
}

.fields-list li {
    margin-bottom: 10px;
}

.import-fields-list {
    list-style: none;
    -webkit-padding-start: 0px;
    padding-left: 0px;
}

.import-fields-list .form-control {
    display: inline;
    width: initial;
}

.fields-list .form-control {
    display: inline;
    width: 96%;
}

.fields-list .form-control {
    display: inline;
    width: 94% !important;
}

.import-select {
    width: 350px !important;
}

.import-text {
    width: 300px !important;
}

.import-checkbox {
    margin-left: 40px !important;
}

.component-list li {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 10px;
}

.lang-dropdown {
    padding-left: 20px;
    color: #ddd;
}

.fields-no-more {
    display: none;
}

.language-dropdown {
    padding-left: 20px;
}

.filter-select {
    padding-right: 40px;
}

.pval-schema-foreign-key {
    width: 100px;
}

.pval-schema-type {
    width: 100px;
}

.mono-text {
    font-family: courier;
}

a.btn {
    text-decoration: none !important;
}

.default-table {
    width: 100%;
}

.fields-min,
.fields-max {
    width: 50px;
}

.fields-size {
    width: 70px;
}

.fields-checkbox {
    text-align: center;
}

.tiny-padding {
    padding-left: 8px !important;
    padding-right: 0px !important;
}

.medium-padding {
    padding-left: 30px !important;
    padding-right: 0px !important;
}

.default-table th.title {
    font-size: 16px;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
    background-color: #fff;
}

.default-table thead tr {
    border: 1px solid #ddd;
}

.default-table th {
    font-size: 14px;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
}

.default-table th.centre {
    text-align: center !important;
}

.default-table .label {
    font-size: 16px;
    text-align: left;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0px;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
    width: 250px;
}

.default-label {
    font-size: 16px;
    text-align: left;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0px;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
}

.default-table .input {
    min-width: 430px;
    max-width: 430px;
}

.narrow-first-column .label {
    width: 120px !important;
}

.sub-label {
    font-size: 13px;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
    width: 300px;
}

.default-table input[type='checkbox'] {
    margin: 0px 5px !important;
    border: 1px solid black;
}

.delete-script-button {
    padding-left: 0px;
    padding-top: 8px;
}

.script-block {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 15px;
}

.script-block .form-group {
    margin-bottom: 5px;
    margin-top: 5px;
}

.table-no-lines td {
    border: 0px solid black !important;
}

.table .title {
    padding: 0px;
    font-size: 22px;
    letter-spacing: -1px;
    color: #666;
    margin: 0px 0px 15px 0px;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
}

.search-table td.buttons {
    font-size: 11px;
    padding-left: 0;
    padding-right: 10px;
    text-align: right;
    padding: 20px 10px;
    margin-top: 20px;
    border-left: 0px;
    border-right: 0px;
}

.search-table .label {
    text-align: left;
}

.configure-table thead tr th {
    font-weight: normal;
    text-align: center;
}

.configure-table td {
    word-wrap: break-word;
}

.delete-row {
    vertical-align: middle !important;
}

.dropdown a {
    text-decoration: none;
}

.configure-menu {
    background-color: #fafafa;
}

.configure-menu > tbody > tr > td {
    padding: 0px;
    margin: 0px;
}

.name-dropdown {
    padding-left: 5px;
}

#reportFrame {
    height: 200px;
    width: 100%;
    border: none;
    margin-top: 30px;
}

.progressCapsules {
    padding: 10px 0px 10px 0px;
}

.bgcolor-pci-green {
    background-color: #57ad46;
}

.fgcolor-white {
    color: #fff;
}

.fg-color-grey {
    color: #333;
}

.fgcolor-black {
    color: #000000 !important;
}

.fgcolor-yellow {
    color: #ffb848;
}

.fgcolor-red {
    color: #cc1010;
}

.bgcolor-black {
    background-color: #000000;
}

.bgcolor-white {
    background-color: #ffffff;
}

ul.page-sidebar-menu > li.active > a {
    background: #3B71DE !important;
}

.dashboard-stat {
    height: 125px;
    padding-top: 15px;
}

.dashboard-stat.green {
    background: #57ad46;
}

.dashboard-stat .visual i {
    font-size: 75px;
    line-height: 50px;
}

.dashboard-stat .details .number {
    font-size: 50px;
}

.dashboard-stat .details .desc {
    font-size: 24px;
}

.progress-bar {
    text-align: left;
    padding-left: 10px;
}

.five-column-table {
    width: 100%;
}

.five-column-table td {
    width: 24%;
}

.five-column-table td:nth-child(3) {
    width: 4%;
}

.modal-dialog {
    text-align: left;
}

td.label {
    font-weight: 400;
    font-size: 14px;
    color: #000;
}

td.inout {
    color: #000;
}

.vertical-centered {
    vertical-align: middle !important;
}

.progress {
    margin-bottom: 0px;
}

.capsulesLabel {
    margin-bottom: 5px;
}

.capsuleLabel {
    margin-bottom: 5px;
}

.footer {
    padding: 10px 0px 10px 10px !important;
    background-color: #292b30;
    color: #ddd;
}

.footer-logo {
    position: relative;
    right: 10px;
}

.pcadmin-big-numbers .col-md-3:first-child {
    padding-left: 0px;
}

.pcadmin-big-numbers .col-md-3:last-child {
    padding-right: 0px;
}

.portlet-button {
    margin-bottom: 7px;
}

.pcadmin-tasks-section {
    border: 1px solid #eaeaea;
}

.pcadmin-tasks-calendar.datepicker-inline,
.pcadmin-tasks-calendar .datepicker-inline {
    width: 280px;
}

.pcadmin-tasks-calendar th.datepicker-switch {
    width: 280px;
}

.pcadmin-tasks-calendar .datepicker td {
    width: 40px;
    height: 50px;
}

.task-field-input {
    width: 100%;
    height: 18px;
    font-size: 13px;
}

.pcadmin-tasks {
    height: 364px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.task-list #title {
    padding: 0px;
}

.task-icon {
    color: #ddd;
}

.task-icon:hover {
    color: #aaa;
}

.task-starred,
.task-starred:hover {
    color: #cc1010;
}

.task-notes {
    height: 100px !important;
}

li.task-done,
.task-title-sp {
    text-decoration: none !important;
}

li.task-done:before {
    border-top: 1px solid #999;
    margin-left: 10px;
    margin-right: 120px;
    margin-top: 10px;
    position: absolute;
    width: 455px;
}

.task-assignee {
    border-right: 1px solid #ddd;
    overflow: hidden;
}

.copyright {
    line-height: 3;
}

.footer-links a {
    text-decoration: underline;
    color: #ddd;
}

.logout {
    text-decoration: underline;
}

.navbar-width {
    width: 210px;
    display: inline-block;
    cursor: pointer;
}

.sidebar-selector {
    padding: 25px 20px 0px 20px;
}

.page-title {
    font-size: 22px;
}

.sub-title {
    font-size: 20px;
    font-weight: 300;
    margin-top: 15px;
}

.top {
    overflow-x: hidden;
}

.subtitle {
    padding: 0px;
    font-size: 18px;
    letter-spacing: -1px;
    display: block;
    color: #666;
    margin: 0px 0px 15px 0px;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
}

.pcitree {
    color: #ddd;
}

.welcomeHeader1 {
    font-size: large;
}

.welcomeHeader2 {
}

.dropdown-menu {
    max-height: 550px;
    overflow-y: auto;
    overflow-x: hidden;
}

.dropdown-chart {
    padding-right: 15px;
}

.content-password {
    width: 500px !important;
}

.pc-container {
    padding-left: 0px;
    padding-right: 0px;
}

.module-container {
    width: 913px;
    margin-left: 0px;
}

.pcadmin-container {
    max-width: 1440px;
    margin-left: 0px;
}

.login .content .form-actions {
    border-bottom: 0px !important;
}

.login .content .security-question-form {
    display: none;
}

.page-sidebar {
    padding-top: 25px !important;
}

.icon-large {
    height: 50px !important;
    width: 50px !important;
    background-size: 50px 50px !important;
}

.btn-medium {
    width: 100px;
}

.pcadmin-desc {
    font-size: 14px !important;
}

.sip-component-table {
    width: 100%;
}

.sip-component-table > tbody > tr > td:first-child {
    width: 300px;
}

.sip-component-table-indent {
    padding-left: 30px;
    min-height: 36px;
    height: 36px;
}

.sip-component-table td {
    min-height: 36px;
    height: 36px;
    vertical-align: top;
}

#Matrix > tbody > tr > td:first-child {
    width: 315px;
    text-align: right;
}

.two-column-table {
    width: 50%;
}

.two-column-table td {
    vertical-align: top;
}

.two-column-table td:first-child {
    width: 150px;
}

.pcadmin-row {
    margin-top: 15px;
}

.pcadmin-menu-title {
    font-size: 16px;
}

.header-pcadmin {
    background-color: #cc1010 !important;
}

.header {
    height: inherit;
    min-height: 0px !important;
    background-color: #e8e8e8 !important;
}

.organisation-tree {
    padding-right: 15px;
}

.organisation-tree-error {
    padding: 5px;
    width: 250px;
    line-height: 100%;
    color: #a94442;
}

.organisation-tree i {
    color: #bbb;
}

.organisation-tree li > a {
    display: inline;
    padding: 0px;
}

.page-header-fixed .page-container {
    margin-top: 0px !important;
}

.dropdown-organisation-tree {
    background-color: #fff;
    margin-top: 13px;
    padding-right: 10px;
    position: absolute;
    top: 100%;
    left: 64px;
    background-color: #ffffff;
    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
    border: 1px solid #ddd;
    min-width: 130px;
    z-index: 1000;
}

/* Progress Capsules */

.progress_barboxmain {
    float: left;
    width: 100%;
    padding: 0 0 15px;
    color: #666666;
    font-size: 13px;
    display: flex;
    flex-direction: column;
}

.per_text {
    font-weight: 700;
    display: flex;
    justify-content: flex-end;
    align-self: end;
}

.progress_barbox {
    float: left;
    width: 100%;
    padding: 7px;
    border: 1px solid #ebebeb;
    margin: 5px 0 0;
    border-radius: 10px !important;
}

.progress_barb {
    float: left;
    height: 44px;
    position: relative;
    border-radius: 10px !important;
}

.progress_barb2 {
    float: left;
    width: 100%;
    background: #e7e7e7;
    height: 44px;
    position: relative;
    border-radius: 10px !important;
}

.progress_barbox .col-md-6,
.progress_barbox .col-md-6 {
    padding: 0;
}

.progress_barbox .col-md-4 {
    padding: 0 0 0 10px;
}

.progress_bar {
    position: absolute;
    left: 0;
    height: 100%;
}

.progress_bar.red {
    background: #ff4242;
}

.progress_bar.yellow {
    background: #ffb742;
}

.progress_bar.green {
    background: #52ab44;
}

.prograss_b {
    float: left;
    width: 100%;
    height: 44px;
    position: relative;
    border-radius: 10px !important;
    overflow: hidden;
}

.col-md-6.progress_barb {
    padding-right: 10px;
}

.midsep_img {
    position: absolute;
    background: url(/static/images/arrow_img.png) no-repeat;
    width: 23px;
    height: 58px;
    position: absolute;
    top: -7px;
    left: 50%;
    margin: 0 0 0 -11px;
}

.midsep_img2 {
    position: absolute;
    background: url(/static/images/arrow_img2.png) no-repeat;
    width: 23px;
    height: 15px;
    position: absolute;
    top: -7px;
    left: 50%;
    margin: 0 0 0 -14px;
}

.prograsstop_text {
    padding: 2px 0 0 8px;
    width: 85%;
}

.progress_barbox .col-md-6.progress_barb {
    width: 48%;
    float: left;
}

.progress_barbox .col-md-6.progress_barbtext {
    width: 52%;
    float: left;
}

.roster-button-group {
    margin-left: 119px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.btn-roster {
    width: 150px;
}

.roster-calendar-input {
    width: 300px !important;
}

@media (min-width: 992px) {
    .col-md-6.progress_barb {
        width: 57.667%;
    }

    .col-md-6.progress_barbtext {
        width: 42.333%;
    }
}

.pcadmin-logo-bar {
    background-color: #cc1010 !important;
}

.search-actions {
    margin-top: 10px;
    margin-bottom: 10px;
}

.form-actions-top {
    border-top: 0px;
    padding: 10px 0px;
}

.page-content-warning {
    border-bottom: 1px solid #e2e2e2 !important;
}

.page-content-warning {
    margin-left: 0x;
    margin-top: 0px;
    min-height: 640px;
    padding: 25px 20px 20px;
}

/*************************************************************************
SIZE SPECIFIC CSS
*************************************************************************/
@media (min-width: 30px) and (max-width: 648px) {
    /* Mobile devices */
    .gauge {
        height: 70px;
    }

    .gauge-barbox {
        height: 80px;
    }

    .progress_barbox .col-md-6.progress_barb {
        width: 28%;
        float: left;
    }

    .progress_barbox .col-md-6.progress_barbtext {
        width: 72%;
        float: left;
    }

    .visible-mobile {
        display: inline-block;
    }

    .hidden-mobile {
        display: none;
    }

    .navbar-logo {
        max-width: 105px;
        max-height: 29px;
        padding-top: 10px;
    }

    .dropdown-menu-orgtree {
        line-height: 20px;
    }

    input#navbar-org-tree_search {
        width: 100%;
    }

    .dropdown-menu-orgtree {
        line-height: 20px;
    }

    input#navbar-org-tree_search {
        width: 100%;
    }

    ul.dropdown-menu.dropdown-menu-orgtree {
        position: fixed;
        left: 0px;
        top: 60px;
        width: 100%;
        height: 85%;
        overflow-y: scroll;
        /* has to be scroll, not auto */
        -webkit-overflow-scrolling: touch;
    }

    div.dropdown-menu.dropdown-menu-orgtree {
        left: -170px;
        top: 43px;
        width: 300px;
        padding-bottom: 100px;
    }

    div.page-sidebar.navbar-collapse {
        width: 85%;
        height: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .copyright {
        line-height: 3;
        font-size: 9px;
    }

    .login-data {
        font-size: 9px;
    }

    .roster-button-group {
        margin-left: 0px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .btn-roster {
        width: 130px;
    }

    .roster-calendar-input {
        width: 208px !important;
    }
}

@media (min-width: 649px) {
    .visible-mobile {
        display: none;
    }

    .hidden-mobile {
        display: inline-block;
    }

    .navbar-logo {
        max-width: 210px;
        max-height: 57px;
        padding-top: 10px;
    }
}

@media (max-width: 767px) {
    .footer .go-top {
        float: left !important;
        display: inline !important;
    }
}

@media (max-width: 991px) {
    .footer {
        clear: left;
    }

    .page-header-fixed .page-container {
        margin-top: 183px;
    }

    .avatar {
        display: none;
    }

    .username {
        margin-left: 15px;
    }

    .current-participant {
        display: none;
    }

    .visible-desktop {
        display: none;
    }

    .navbar-width {
        width: auto;
    }

    .dropdown-menu-orgtree {
        line-height: 20px;
        left: -70px;
    }

    input dropdown-menu-orgtree {
        height: 20px;
    }

    /* Progress Capsules */
    .progress_barb {
        width: 100%;
    }

    .progress_barbtext .col-md-6 {
        float: left;
        padding: 0 10px 0 0;
        min-width: 80px;
    }

    .progress_barbox .col-md-6.progress_barb {
        width: 70%;
        float: left;
    }

    .progress_barbox .col-md-6.progress_barbtext {
        width: 30%;
        float: left;
    }

    .news-text {
        display: none;
    }
}

@media (max-width: 1199px) {
    .progress_barbtext {
        font-size: 10px;
    }
}

@media (min-width: 992px) {
    .news-text {
        background-color: white;
        border: 1px solid #ddd;
        padding: 10px;
        margin-bottom: 5px;
        margin: 5px;
        height: 200px;
        overflow-y: scroll;
    }

    .sidebar-toggler {
        display: none !important;
    }

    .col-md-8.progress_barb {
        width: 57.667%;
    }

    .col-md-4.progress_barbtext {
        width: 42.333%;
    }

    .hidden-desktop {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1159px) {
    /* Tablet portrait */
    .gauge {
        height: 37px;
    }

    .progress_barbtext {
        font-size: 9px;
    }
}

@media (min-width: 1160px) and (max-width: 1280px) {
    /* Tablet portrait */
    .gauge {
        height: 45px;
        width: 100%;
    }

    .progress_barbtext {
        font-size: 10px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    /* Tablet portrait */
    .gauge-barbox {
        height: 55px;
    }

    .avatar {
        display: none;
    }

    .username {
        display: inline !important;
        margin-left: 15px;
    }

    .number {
        font-size: 20px !important;
        line-height: 27px !important;
        font-weight: 300 !important;
    }
}

@media (min-width: 992px) and (max-width: 1500px) {
    .dashboard-stat .visual i {
        font-size: 30px;
        line-height: 35px;
    }

    .dashboard-stat {
        margin-bottom: 25px;
        padding-top: 0px;
        height: 90px;
    }

    .dashboard-stat .visual {
        width: 80px;
        height: 80px;
        display: block;
        float: left;
        padding-top: 10px;
        padding-left: 15px;
        margin-bottom: 10px;
    }

    .dashboard-stat .details .number {
        padding-top: 15px;
        text-align: right;
        font-size: 34px;
        line-height: 34px;
        letter-spacing: -1px;
        margin-bottom: 5px;
        font-weight: 300;
        color: #fff;
    }

    .dashboard-stat .details .desc {
        text-align: right;
        font-size: 16px;
        letter-spacing: 0px;
        font-weight: 300;
        color: #fff;
    }
}

/* Task & Message Section */
.task-msg-section {
    width: 100%;
    float: left;
}

.task-msg-section .task-section {
    padding-left: 0;
}

.task-msg-section .task-section .row1 {
    padding: 0;
}

.task-msg-section .task-section h4 {
    float: left;
    margin: 0;
    padding-right: 35px;
    line-height: 32px;
    font-size: 20px;
}

.task-msg-section .task-section select {
    padding: 5px;
    width: 125px;
    outline: none;
    border: #e7e7e7 solid 1px;
    margin-right: 5px;
    height: 32px;
}

.task-msg-section .task-section .row1 a.export-tasks-to-excel {
    background: #5ebd3f;
    color: #fff;
    font-size: 13px;
    padding: 7px 12px;
    float: right;
    text-decoration: none;
    cursor: pointer;
}

.task-msg-section .task-section .row1 a.export-tasks-to-excel .fa,
.task-msg-section .task-section .row1 a.export-tasks-to-excel .fas,
.task-msg-section .task-section .row1 a.export-tasks-to-excel .far,
.task-msg-section .task-section .row1 a.export-tasks-to-excel .fab,
.task-msg-section .task-section .row1 a.export-tasks-to-excel .fad {
    font-size: 16px;
    padding-right: 10px;
}

.task-msg-section .task-section .row1 a.new-task {
    background: #5ebd3f;
    color: #fff;
    font-size: 13px;
    padding: 7px 12px;
    float: right;
    text-decoration: none;
    cursor: pointer;
}

.task-msg-section .task-section .row1 a.new-task .fa,
.task-msg-section .task-section .row1 a.new-task .fas,
.task-msg-section .task-section .row1 a.new-task .far,
.task-msg-section .task-section .row1 a.new-task .fab,
.task-msg-section .task-section .row1 a.new-task .fad {
    font-size: 16px;
    padding-right: 10px;
}

.task-msg-section .task-section .row2 {
    padding: 15px 0;
}

.task-msg-section .task-section .row2 .task-title {
    padding: 0;
    font-size: 10px;
    line-height: 30px;
}

.task-msg-section .task-section .row2 .task-title .tsk-done {
    padding: 0;
}

.task-msg-section .task-section .row2 .task-title .tsk-details {
    padding-left: 50px;
}

.task-msg-section .task-section .row2 .task-title .tsk-assigned {
    padding-left: 0;
}

.task-msg-section .task-section .row2 .task-title .tsk-actions {
    padding-left: 0;
}

.task-msg-section .task-section .row2 .task-row {
    padding: 0;
    margin-bottom: 7px;
    cursor: pointer;
}

.task-msg-section .task-section .row2 .task-row .taskdone {
    border: #ebebeb solid 1px;
    height: 50px !important;
    width: 50px !important;
}

.task-msg-section .task-section .row2 .task-row .taskdone input[type='checkbox'] {
    margin-top: 0 !important;
}

.task-msg-section .task-section .row2 .task-row .task-description {
    width: auto;
}

div .task-title-sp .task-description {
    width: auto !important;
}

div .taskdone {
    background-color: white;
    width: 50px !important;
    float: left;
    min-height: 50px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.task-msg-section .task-section .row2 .task-row .taskdone div.checker input {
    -webkit-appearance: checkbox;
    opacity: 1;
    margin-top: 15px !important;
}

.task-msg-section .task-section .row2 .task-row .taskdetails {
    background: #f4f4f4;
    height: 50px;
    margin-left: 50px;
    width: auto;
    padding: 5px 20px 5px 15px;
    font-size: 12px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    /* Fallback for non-webkit */
    display: -webkit-box;
    /* Fallback for non-webkit */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.task-msg-section .task-section .row2 .task-row .taskassigned {
    padding: 5px 20px 5px 15px;
    background: #f4f4f4;
    height: 50px;
    overflow: hidden;
    white-space: nowrap;
}

.task-msg-section .task-section .row2 .task-row .taskassigned img {
    margin: 5px 10px 0 0;

    border-radius: 50% !important;
    float: left;
    width: 40px;
    height: 40px;
}

.task-msg-section .task-section .row2 .task-row .taskassigned img.img-placeholder {
    border: 1px dashed;
}

.task-msg-section #recipientTitle {
    font-weight: 300 !important;
}

.task-msg-section .task-section .row2 .task-row .taskassigned h6 {
    font-weight: 400 !important;
    color: #000;
    margin-bottom: 5px;
}

.task-msg-section .task-section .row2 .task-row .taskassigned h6 a {
    position: relative;
    font-size: 12px;
    color: #000;
    text-decoration: none;
}

.task-msg-section .task-section .row2 .task-row .taskactions {
    padding: 0;
}

.task-msg-section .task-section .row2 .task-row .taskactions .edit {
    width: 50%;
    float: left;
    padding: 0 15px;
    min-height: 50px;
    background: #d8d8d8;
    text-align: center;
}

.task-msg-section .task-section .row2 .task-row .taskassigned .delete {
    float: right;
    width: 50px;
    height: 50px;
    background: #d8d8d8;
    text-align: center;
}

.task-msg-section .task-section .row2 .task-row .taskassigned .delete .fa,
.task-msg-section .task-section .row2 .task-row .taskassigned .delete .fas,
.task-msg-section .task-section .row2 .task-row .taskassigned .delete .far,
.task-msg-section .task-section .row2 .task-row .taskassigned .delete .fab,
.task-msg-section .task-section .row2 .task-row .taskassigned .delete .fad {
    font-size: 24px;
    padding-top: 15px;
    color: #fff;
    padding-top: 16px;
}

.task-msg-section .task-section .row2 div.completed-task {
    background: #5db839;
    color: #fff;
    text-decoration: none;
    padding: 7px 10px;
    margin-top: 5px;
    display: inline-block;
    cursor: pointer;
}

.task-msg-section .task-section .row2 div.completed-task .fa,
.task-msg-section .task-section .row2 div.completed-task .fas,
.task-msg-section .task-section .row2 div.completed-task .far,
.task-msg-section .task-section .row2 div.completed-task .fab,
.task-msg-section .task-section .row2 div.completed-task .fad {
    padding-right: 10px;
}

.task-msg-section .task-section .row2 .task-row:hover .taskdetails,
.task-msg-section .task-section .row2 .task-row:hover .taskassigned {
    background: #ebebeb;
}

.task-msg-section .task-section .row2 .task-row:hover .taskassigned .delete {
    background: #dc242c;
}

.task-msg-section .message-section {
    padding-right: 0;
}

.task-msg-section .message-section .msg-row1 {
    padding: 0;
}

.task-msg-section .message-section .msg-row1 a.new-message {
    background: #5ebd3f;
    color: #fff;
    font-size: 13px;
    padding: 7px 12px;
    float: right;
    text-decoration: none;
}

.task-msg-section .message-section .msg-row1 a.new-message .fa,
.task-msg-section .message-section .msg-row1 a.new-message .fas,
.task-msg-section .message-section .msg-row1 a.new-message .far,
.task-msg-section .message-section .msg-row1 a.new-message .fab,
.task-msg-section .message-section .msg-row1 a.new-message .fad {
    font-size: 16px;
    padding-right: 10px;
}

.task-msg-section .message-section h4 {
    float: left;
    margin: 0;
    padding-right: 50px;
    line-height: 32px;
    font-size: 20px;
}

.task-msg-section .message-section .msg-row2 {
    padding: 15px 0;
    position: static;
}

.task-msg-section .message-section .msg-row2 .msg-title {
    font-size: 10px;
    line-height: 30px;
}

.task-msg-section .message-section .msg-row2 .msg-title,
.task-msg-section .message-section .msg-row2 .msg-title .msg-with,
.task-msg-section .message-section .msg-row2 .msg-actions-title,
.task-msg-section .message-section .msg-row2 .msg-row,
.task-msg-section .message-section .msg-row2 .msg-row .msg-image {
    padding: 0;
}

.task-msg-section .message-section .msg-row2 .msg-actions-title {
    text-align: right;
}

.task-msg-section .message-section .msg-row2 .msg-row {
    padding: 5px 10px 2px;
    border-top: #ebebeb solid 1px;
    border-bottom: #ebebeb solid 1px;
    cursor: pointer;
    margin-bottom: 8px;
}

.task-msg-section .message-section .msg-row2 .msg-row .msg-image img {
    border-radius: 50% !important;
    width: 40px;
    max-height: 40px;
}

.task-msg-section .message-section .msg-row2 .msg-row .msg-detail {
    padding-right: 0;
}

.task-msg-section .message-section .msg-row2 .msg-row .msg-person h6 {
    font-weight: 500 !important;
    color: #000;
    margin: 2px 0 0;
}

#jobtitle {
    font-weight: 400 !important;
    color: #000;
    margin: 2px 0 0;
    font-size: 10px;
}

.task-msg-section .message-section .msg-row2 .msg-row .msg-person h6 a {
    position: relative;
    font-size: 12px;
    color: #000;
    text-decoration: none;
    font-weight: 400;
}

.task-msg-section .message-section .msg-row2 .msg-row .msg-person h6 a:before {
    position: absolute;
    content: '';
    right: -10px;
    bottom: 5px;
    width: 5px;
    height: 5px;
    background: #4dee2e;
    border-radius: 50%;
}

.task-msg-section .message-section .msg-row2 .msg-row .msg-person {
    padding: 0 5px 5px 0;
    width: 80%;
    float: left;
    position: relative;
}

.task-msg-section .message-section .msg-row2 .msg-row .msg-comments {
    width: 20%;
    float: left;
    color: #c0c0c0;
    text-align: right;
    padding-top: 10px;
}

.task-msg-section .message-section .msg-row2 .msg-row .msg-comments .fa,
.task-msg-section .message-section .msg-row2 .msg-row .msg-comments .fas,
.task-msg-section .message-section .msg-row2 .msg-row .msg-comments .far,
.task-msg-section .message-section .msg-row2 .msg-row .msg-comments .fab,
.task-msg-section .message-section .msg-row2 .msg-row .msg-comments .fad {
    padding-left: 5px;
}

.task-msg-section .message-section .msg-row2 .msg-row .msg-person .designation {
    font-size: 12px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.task-msg-section .message-section .msg-row2 .msg-row .msg-content {
    font-size: 10px;
    font-style: italic;
    padding-right: 0;
    width: 88%;
    float: left;
    line-height: 20px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.task-msg-section .message-section .msg-row2 .msg-row .msg-delete {
    width: 12%;
    float: left;
    color: #c0c0c0;
    text-align: right;
    padding-top: 5px;
}

.task-msg-section .message-section .msg-row2 .msg-row .msg-delete a {
    color: #c0c0c0;
    text-decoration: none;
}

.task-msg-section .message-section .msg-row2 .msg-row .msg-content-section {
    width: 100%;
    float: left;
    border-top: #ebebeb solid 1px;
}

.task-msg-section .message-section .msg-row2 .msg-row:hover {
    background: #ebebeb;
}

.task-msg-section .message-section .msg-row2 .msg-row:hover .msg-comments {
    color: #57ad46;
}

.task-msg-section .message-section .msg-row2 .msg-row .item-title {
    margin-left: -20px;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: bold;
}

.fancybox-lock .fancybox-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.popup-box h6 {
    font-weight: 400 !important;
    color: #000;
    margin: 2px 0 0;
    font-size: 15px;
    float: left;
}

.popup-box .popup-title {
    border-bottom: #ebebeb solid 1px;
    padding-bottom: 10px;
    float: left;
    width: 100%;
}

.popup-box .save-btn {
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    float: right;
    background: #5db837;
}

.popup-box .save-btn .fa,
.popup-box .save-btn .fas,
.popup-box .save-btn .far,
.popup-box .save-btn .fab,
.popup-box .save-btn .fad {
    padding-right: 10px;
}

.popup-box .cancel-btn {
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    float: right;
    background: #d9534f;
}

.popup-box .cancel-btn .fa,
.popup-box .cancel-btn .fas,
.popup-box .cancel-btn .far,
.popup-box .cancel-btn .fab,
.popup-box .cancel-btn .fad {
    padding-right: 10px;
}

.popup-box form {
    width: 100%;
    float: left;
    padding: 10px 0;
}

.popup-box form label {
    width: 100%;
    float: left;
    font-size: 10px;
}

.popup-box form .description {
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.popup-box form input[type='text'],
.popup-box form input[type='date'] {
    width: 100%;
    height: 30px;
    border: #eaeaea solid 1px;
    padding: 0 15px;
    outline: none;
}

.popup-box form .assigned-to {
    width: 33.33%;
    float: left;
    padding-right: 15px;
    margin-bottom: 10px;
}

.popup-box form .popup-duedate {
    width: 33.33%;
    float: left;
    padding: 0 15px;
    margin-bottom: 10px;
}

.popup-box form .popup-period {
    width: 33.33%;
    float: left;
    padding-left: 15px;
    margin-bottom: 10px;
}

.popup-box form select {
    width: 100%;
    float: left;
    outline: none;
    border: #eaeaea solid 1px;
    padding: 5px;
}

.popup-box form .full-detail {
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.popup-box form textarea {
    width: 100%;
    float: left;
    padding: 10px 15px;
    outline: none;
    resize: none;
    border: #eaeaea solid 1px;
}

textarea.key {
    resize: none;
}

.popup-box form .attachment {
    width: 100%;
    float: left;
}

.popup-box form .attachment .attach-box {
    width: 100%;
    float: left;
    background: #dfeed9;
    text-align: center;
    padding: 15px;
    border: solid 2px #5db839;
    color: #5db839;
    margin-bottom: 10px;
}

.popup-box form .attachment .attach-box span {
    display: block;
    text-transform: uppercase;
}

.popup-box form .download-file {
    background: #ebebeb;
    padding: 0 0 0 7px;
    min-height: 35px;
    width: 100%;
    float: left;
}

.popup-box form .download-file span {
    line-height: 35px;
}

a.file-delete {
    background: #d8d8d8;
    padding: 5px 10px;
    float: right;
    min-height: 35px;
    color: #fff;
    width: 7%;
    text-align: center;
}

a.file-delete:hover {
    color: #fff;
}

#task-attachment {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

#task-attachment .file-delete:hover {
    background: #da252c;
}

#task-attachment .attachment-row {
    float: left;
    width: 100%;
    margin-bottom: 5px;
}

#task-attachment h6 {
    width: 100%;
    float: left;
    font-size: 10px;
}

#task-attachment .attachment-description {
    width: 93%;
    float: left;
    background: #ebebeb;
    padding: 5px;
    line-height: 25px;
}

span .task-due-date {
    font-style: italic !important;
    font-size: 10px;
}

.subtask-section {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.subtask-section .st-row {
    float: left;
    width: 100%;
    margin-bottom: 5px;
}

.subtask-section .st-row:hover .file-delete {
    background: #da252c;
}

.subtask-section h6 {
    width: 100%;
    float: left;
    font-size: 10px;
}

.subtask-section .st-action {
    text-align: center;
    width: 7%;
    float: left;
    min-height: 35px;
    border: #ebebeb solid 1px;
}

.subtask-section .st-action input[type='checkbox'] {
    margin-top: 10px;
}

.subtask-section .st-description {
    width: 86%;
    float: left;
    background: #ebebeb;
    padding: 5px;
    line-height: 25px;
}

.addtask-section {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.addtask-section input[type='text'] {
    width: 93%;
    height: 35px;
    padding: 0 15px;
    border: #ebebeb solid 1px;
    float: left;
    outline: none;
}

.addtask-section a.add-subtask,
a.add-subtask-new-task {
    width: 7%;
    text-align: center;
    float: left;
    background: #5fb836;
    padding: 7px;
    min-height: 35px;
    color: #fff;
}

.addtask-section h6 {
    width: 100%;
    float: left;
    font-size: 10px;
}

.popup-box .addmsg-section {
    float: left;
    width: 100%;
    margin-top: 10px;
    margin-bottom: -20px;
}

.popup-box .addmsg-section input[type='text'] {
    width: 93%;
    height: 35px;
    padding: 0 15px;
    border: #ebebeb solid 1px;
    float: left;
    outline: none;
}

.popup-box .addmsg-section a.add-subtask {
    width: 7%;
    text-align: center;
    float: left;
    background: #5fb836;
    padding: 7px;
    min-height: 35px;
    color: #fff;
}

.popup-box .addmsg-section a.add-subtask-frontend {
    width: 7%;
    text-align: center;
    float: left;
    background: #5fb836;
    height: 35px;
    color: #fff;
}

.popup-box .message-box {
    float: left;
    width: 100%;
    margin-bottom: 10px;
    line-height: 1.428571429;
}

.popup-box .message-box .message-left {
    padding-left: 0;
    width: 38%;
}

.popup-box .message-box .message-left img {
    border-radius: 50% !important;
    float: left;
    width: 40px;
    height: 40px;
}

.popup-box .message-box .message-left .sender {
    float: left;
    padding-left: 10px;
    position: relative;
}

.popup-box .message-box .message-left .sender h6 {
    font-size: 12px;
}

.popup-box .message-box .message-left .sender .send-date,
.popup-box .message-box .message-left .sender .send-time {
    display: block;
    font-size: 10px;
}

.popup-box .message-box .message-right {
    width: 62%;
    background: #ebebeb;
    padding: 12px 30px 20px 15px;
    position: relative;
    font-size: 11.2px;
    font-style: italic;
    color: #000;
    -ms-word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

.popup-box .message-box .message-right:before {
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 12px solid #ebebeb;
    position: absolute;
    content: '';
    left: -15px;
    top: 15px;
    width: 15px;
    height: 15px;
}

.popup-box .message-box .message-right a {
    color: #4cb72d;
    text-decoration: none;
    font-size: 11.2px;
}

.popup-box .select-person {
    font-size: 10px;
    width: 100%;
    float: left;
    padding: 8px 0;
}

.popup-box .msg-person {
    padding-left: 0;
    margin-bottom: 15px;
}

.popup-box .msg-person img {
    border-radius: 50% !important;
    float: left;
    margin-right: 10px;
}

.popup-box .msg-person input[type='radio'] {
    float: left;
    margin: 12px 10px 5px 0;
}

.popup-box .msg-person .msgperson-detail {
    padding: 7px 0;
}

.popup-box .msg-person .msgperson-detail h6 {
    float: left;
    font-size: 12px;
}

.popup-box .msg-person .msgperson-detail .designation {
    float: left;
    font-size: 10px;
    color: #000;
}

.popup-box .newmsg-section {
    float: left;
    width: 100%;
    margin: 10px 0;
}

.popup-box .newmsg-section input[type='text'] {
    width: 93%;
    height: 35px;
    padding: 0 15px;
    border: #ebebeb solid 1px;
    float: left;
    outline: none;
}

.popup-box .newmsg-section a.add-newmsg {
    width: 7%;
    text-align: center;
    float: left;
    background: #5fb836;
    padding: 7px;
    min-height: 35px;
    color: #fff;
}

.completed-task-section {
    width: 100%;
    float: left;
    padding-top: 10px;
}

.completed-task-section .task-row:hover .taskdone {
    background: #5db839;
}

.datepicker {
    z-index: 99;
    position: relative;
}

@media (min-width: 1200px) {
    .container {
        width: 1180px;
    }
}

@media (min-width: 992px) and (max-width: 1240px) {
    .task-msg-section .task-section h4 {
        padding-right: 10px;
    }

    .task-msg-section .task-section select {
        width: 89px;
    }

    .task-msg-section .task-section .row2 .task-row {
        background: #f4f4f4;
        margin-bottom: 7px;
    }

    .task-msg-section .task-section .row2 .task-row .taskactions .edit {
        padding: 0;
    }
}

@media (min-width: 361px) and (max-width: 991px) {
    .task-msg-section .task-section {
        width: 100%;
        float: left;
        padding: 0;
    }

    .task-msg-section .message-section .msg-row2 {
        width: 100%;
        float: left;
    }

    .task-msg-section .task-section .row2 .task-title {
        width: 100%;
        float: left;
    }

    .task-msg-section .task-section .row2 .task-row {
        width: 100%;
        float: left;
        padding: 0;
    }

    .task-msg-section .task-section .row2 .task-done-details,
    .task-msg-section .task-section .row2 .tsk-details {
        width: 55%;
        float: left;
    }

    .task-msg-section .task-section .row2 .task-row .taskassigned,
    .task-msg-section .task-section .row2 .task-title .tsk-assigned {
        width: 45%;
        float: left;
    }

    .task-msg-section .message-section,
    .task-msg-section .message-section .msg-row1 {
        width: 100%;
        float: left;
        padding: 0;
    }

    .task-msg-section .message-section .msg-row2 .msg-title,
    .task-msg-section .message-section .msg-row2 .msg-row {
        float: left;
        width: 100%;
    }

    .task-msg-section .message-section .msg-row2 .msg-row .msg-image {
        width: 10%;
        float: left;
    }

    .task-msg-section .message-section .msg-row2 .msg-row .msg-detail {
        width: 90%;
        float: left;
    }
}

@media (min-width: 761px) and (max-width: 991px) {
    .page-content {
        min-height: 730px;
        width: 100%;
        float: left;
    }

    .message-section .msg-row2 .msg-title .msg-with {
        width: 50%;
        float: left;
    }

    .message-section .msg-row2 .msg-title .msg-actions-title {
        width: 50%;
        float: left;
        text-align: right;
    }

    .popup-box .msg-person {
        width: 50%;
        float: left;
    }

    .popup-box .message-box .message-left {
        width: 40%;
        float: left;
    }

    .popup-box .message-box .message-right {
        width: 60%;
        float: left;
    }
}

@media (min-width: 30px) and (max-width: 760px) {
    .message-section .msg-row2 .msg-title .msg-with {
        width: 50%;
        float: left;
    }

    .message-section .msg-row2 .msg-title .msg-actions-title {
        width: 50%;
        float: left;
        text-align: right;
    }

    .w500-none {
        width: 100%;
        overflow-x: hidden;
    }

    .popup-box .msg-person {
        width: 100%;
        float: left;
    }

    .popup-box .msg-person .msgperson-detail {
        float: left;
    }

    .popup-box .msg-person .msgperson-detail h6 {
        width: 100%;
    }

    .popup-box .message-box .message-left {
        width: 40%;
        float: left;
    }

    .popup-box .message-box .message-right {
        width: 60%;
        float: left;
    }
}

@media (max-width: 480px) {
    #rc-imageselect,
    .g-recaptcha {
        transform: scale(0.73);
        -webkit-transform: scale(0.73);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
    }

    .popup-box form .assigned-to,
    .popup-box form .popup-duedate,
    .popup-box form .popup-period {
        width: 100%;
        padding: 0;
    }

    .popup-box form .download-file {
        text-align: center;
    }

    .popup-box form .download-file span {
        float: none;
        display: inline-block;
        width: 100%;
    }

    .download-file a.file-delete {
        width: 30px;
        float: none;
        display: inline-block;
    }

    .subtask-section .st-row {
        text-align: center;
    }

    .subtask-section .st-action {
        width: 30px;
        float: none;
        display: inline-block;
        margin-bottom: 10px;
    }

    .subtask-section .st-description {
        width: 100%;
    }

    .subtask-section .fd-deletebox {
        width: 100%;
        float: left;
    }

    .subtask-section .fd-deletebox a.file-delete {
        float: none;
        display: inline-block;
        width: 35px;
    }

    .addtask-section input[type='text'],
    .popup-box .newmsg-section input[type='text'],
    .popup-box .addmsg-section input[type='text'] {
        width: 85%;
    }

    .addtask-section a.add-subtask,
    .popup-box .newmsg-section a.add-newmsg,
    .popup-box .addmsg-section a.add-subtask {
        width: 15%;
    }

    .popup-box .message-box .message-left,
    .popup-box .message-box .message-right {
        width: 100%;
        margin-bottom: 10px;
    }

    .popup-box .message-box .message-right:before {
        display: none;
    }
}

.st-description .input-sm {
    height: 25px;
}

.st-description .btn-sm,
.st-description .btn-xs {
    line-height: 0.5;
}

.editable-click,
a.editable-click {
    color: #333 !important;
    border-bottom: 0px !important;
}

#task-block {
    height: 420px;
    overflow: hidden;
}

#pcadmin-tasks {
    height: 250px;
    display: inline-block;
    overflow: auto;
    width: 100%;
}

#pcadmin-completed-tasks {
    height: 120px;
    display: inline-block;
    overflow: auto;
    width: 100%;
}

input.taskdone {
    margin-top: 0;
}

#task-notes-static {
    margin-top: 10px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    white-space: -moz-pre-wrap;
    /* Firefox */
    white-space: -pre-wrap;
    /* ancient Opera */
    white-space: -o-pre-wrap;
    /* newer Opera */
    white-space: pre-wrap;
    /* Chrome; W3C standard */
    word-wrap: break-word;
    /* IE */
}

#task-notes-button {
    border-top: 1px solid #ddd;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-top: 5px;
}

#pcadmin-tasks .ui-sortable-placeholder {
    height: 50px !important;
}

#subtask-list .ui-sortable-placeholder {
    height: 35px !important;
}

#thread-posts {
    height: 350px;
    display: inline-block;
    overflow: auto;
    width: 100%;
}

#thread-list,
#thread-query-posts {
    height: 355px;
    display: inline-block;
    overflow: auto;
    width: 100%;
}

#thread-list-dashboard {
    height: 350px;
    display: inline-block;
    overflow: auto;
    width: 100%;
}

.img-placeholder {
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
}

.btn-messages-participant,
.btn-messages-participant:hover,
.btn-messages-participant:active,
.btn-messages-participant:focus {
    background-color: transparent;
    color: #ddd;
    border: 0;
}

.ctt-desc {
    font-size: 14px;
    font-weight: normal;
    color: #333333;
}

.otc-wrap {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-combobox {
    position: relative;
    display: inline-block;
    width: 220px;
    height: 19px;
    margin-left: 5px;
}

/*
This CSS is in place to remove padding attribute in jquery ui button for version 1.12.1.
Having padding will cause the input misaligned with the narrow icon attached to the right.
*/
.custom-combobox .ui-button {
    padding: 0 !important;
}

.custom-item-input {
    height: 22px;
    vertical-align: top;
    font-family: courier;
    border: 1px solid #d3d3d3;
    background: white;
    font-weight: normal;
    color: black;
    width: 198px;
}

.custom-item-button {
    height: 22px;
    vertical-align: top;
    font-family: courier;
    border: 1px solid #d3d3d3;
    background: white;
    font-weight: normal;
    color: black;
    width: 1.4em;
}

@-moz-document url-prefix() {
    #task-attachment-input.form-control {
        height: auto;
        padding-top: 2px;
        padding-bottom: 1px;
    }
}

/***
	iphone 6 plus
***/
@media (max-width: 480px) and (min-width: 401px) {
    .page-content {
        min-height: 530px;
    }
}

/***
	other mobile devices
***/
@media (max-width: 400px) {
    .page-content {
        min-height: 425px;
    }
}

/***
	small andriod tablets
***/
@media (max-width: 767px) and (min-width: 481px) {
    .page-content {
        min-height: 760px;
    }
}

/***
	ipad
***/
@media (min-width: 768px) and (max-width: 800px) {
    .page-content {
        min-height: 815px;
    }
}

/***
	large andriod tablets
***/
@media (min-width: 800px) and (max-width: 1024px) {
    .page-content {
        min-height: 1080px;
    }
}

.measureName {
    font-size: small;
}

.panel-title > a {
    text-decoration: none;
}

.configure-dropdown {
    margin-top: 6px;
}

.configure-dropdown > a {
    cursor: pointer;
    border: none;
}

.dropdown-toggle > i {
    font-size: x-large;
    color: #fff;
}

.dashboard-report.dropdown-toggle > i {
    font-size: initial;
    color: #000;
}

.dropdown-toggle > .caret {
    color: #fff;
}

.btn-group-default > .dropdown-toggle > .caret {
    color: #333 !important;
}

.dropdown-menu .divider {
    height: 2px;
    margin: 0;
    background-color: #e5e5e5 !important;
}

.modal-content iframe {
    width: 100%;
    height: 345px;
    margin: 0 auto;
    display: block;
}

.video-button {
    font-size: large;
}

.popover.top {
    overflow-x: visible;
}

.badge-unread {
    color: #fff !important;
    background-color: #f00 !important;
    font-weight: bold;
    position: relative;
    top: -5px;
    left: 25px;
    z-index: 99;
    height: 15px;
    font-size: 9px !important;
}

.msg-comments-unread {
    color: #f00 !important;
}

table.table-bordered tbody td {
    vertical-align: middle;
}

.force-wrap {
    word-break: break-all;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
}

.nps-padding {
    padding: 6px 12px;
}

.nps-font {
    font-size: 0.83em;
}

.highlight {
    font-weight: bold;
}

.icon-btn-stretch {
    display: table-cell !important;
}

.icon-btn-stretch i {
    margin-top: 10px;
    font-size: 24px;
}

.icon-btn-stretch div {
    font-size: 14px;
}

.pcadmin-small-numbers {
    display: inline-block;
    padding: 7px 14px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-image: none;
    border: 1px solid #e5e5e5;
    outline: none !important;
}

.pcadmin-small-numbers.blue {
    color: white;
    text-shadow: none;
    background-color: #4d90fe;
}

.pcadmin-small-numbers.purple {
    color: white;
    text-shadow: none;
    background-color: #852b99;
}

.pcadmin-small-numbers.yellow {
    color: white;
    text-shadow: none;
    background-color: #ffb848;
}

.table-no-warp {
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.participant-action-btn {
    width: 72px;
}

.participant-action-div {
    width: 125px;
}

.sync-ignore-btn.disabled {
    opacity: 0.3;
}

.sync-action-btn.disabled {
    opacity: 0.3;
}

.query-closed {
    background-color: #e4e4e4;
}

.action-title {
    font-size: 18px;
    padding: 0;
    letter-spacing: -1px;
    display: block;
    color: #666;
    margin: 0 0 15px 0;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
}

.hyperlink-inline-block {
    text-decoration: none;
    color: #646464 !important;
    display: inline-block;
    padding-top: 12px;
    width: 100%;
    height: auto;
}

.icon-btn .tooltip {
    text-shadow: none !important;
}

.icon-btn .hyperlink-inline-block:hover {
    text-decoration: none;
    color: #ffffff !important;
    background-color: #3B71DE;
    font-size: 12px;
    font-weight: 300;
}

.icon-btn .hyperlink-inline-block:hover div {
    color: #ffffff !important;
}

.icon-btn .tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    background-color: #000000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

li.active {
    font-weight: bold;
}

.report-list {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 10px;
}

.multi-recipient .twitter-typeahead {
    vertical-align: top;
}

.query-envelope-badge {
    width: 70px;
    margin: auto;
}

table.fixed {
    table-layout: fixed;
}

table.fixed button.multiselect {
    max-width: 100%;
    overflow-x: hidden;
}

table.fixed div.btn-group {
    max-width: 100%;
}

/* Card flip begin */
.card-container {
    cursor: pointer;
    perspective: 800px;
    position: relative;
}

.card {
    height: 100%;
    width: 100%;
    cursor: pointer;
    position: relative;
    -webkit-perspective: 1000px;
}

.flip {
    transform: rotateX(90deg);
    transition: transform 0.5s;
    transition-timing-function: linear;
}

.flip-return {
    transform: rotateX(0deg);
    transition-duration: 0.5s;
    transition-delay: 0.5s;
    transition-timing-function: linear;
}

.front {
    position: absolute;
    height: 100%;
    width: 100%;
}

.back {
    position: absolute;
    height: 100%;
    width: 100%;
}

.back-flip {
    transition-duration: 0.5s;
    transition-delay: 0.5s;
    transform: rotateX(0deg);
    transition-timing-function: linear;
}

.back-flip-return {
    transition-duration: 0.5s;
    transform: rotateX(-90deg);
    transition-timing-function: linear;
}

.back-init {
    transform: rotateX(-90deg);
}

.front-init {
    transform: rotateX(0deg);
}

/* Card flip end */

/* for big number only, has to hide back for visual otherwise the back element will display together */
.big-number-flip {
    padding-top: 0px;
}

.big-number-flip .visual {
    padding-top: 25px;
}

.big-number-flip .details {
    padding-top: 15px;
}

.big-number-flip .priorMonth {
    position: absolute;
    margin-left: 38%;
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    padding: 0px;
}

.big-number-flip .priorFlip {
    display: inline;
    padding-top: 100px;
    padding-right: 5px;
    float: right;
    color: #fff;
}

.big-number-flip .priorFlip i {
    font-size: 20px;
}

/* Increase tooltip to fit the text for big number */
.big-number-flip .tooltip-inner {
    max-width: 300px;
}

@media (max-width: 992px) {
    .big-number-flip .priorMonth {
        margin-left: 38%;
    }
}

/* for centralise the text in the middle for different device screen size */
@media (min-width: 992px) and (max-width: 1500px) {
    .big-number-flip .prior {
        text-align: center;
        margin-right: 50px;
        padding: 0px;
    }

    .big-number-flip .priorMonth {
        margin-left: 30%;
        font-size: 14px;
    }

    .big-number-flip .priorFlip {
        padding-top: 70px;
    }

    .big-number-flip .priorFlip i {
        font-size: 16px;
    }

    .big-number-flip .prior .desc {
        font-size: 10px;
    }

    .big-number-flip .visual {
        padding-top: 15px;
    }

    .big-number-flip .details {
        padding-top: 0;
    }
}

.capsules-advanced-help-bubble {
    margin-top: 10px;
    margin-left: -20px;
}

.insight-stat {
    height: 100px;
    padding-top: 5px;
}

@media (min-width: 992px) and (max-width: 1700px) {
    .insight-stat .visual i {
        font-size: 30px;
        line-height: 35px;
    }

    .insight-stat {
        margin-bottom: 10px;
        padding-top: 0px;
        height: 80px;
    }

    .insight-stat .visual {
        width: 80px;
        height: 80px;
        display: block;
        float: left;
        padding-top: 10px;
        padding-left: 15px;
        margin-bottom: 10px;
    }

    .insight-stat .details .number {
        padding-top: 10px;
        text-align: right;
        font-size: 34px;
        line-height: 34px;
        letter-spacing: -1px;
        margin-bottom: 5px;
        font-weight: 300;
        color: #fff;
    }

    .insight-stat .details .desc {
        text-align: right;
        font-size: 16px;
        letter-spacing: 0px;
        font-weight: 300;
        color: #fff;
    }
}

.insight-filter-table {
    margin-top: -15px;
    margin-bottom: 10px;
}

.insight-filter-table > thead > tr > th,
.insight-filter-table > tbody > tr > td {
    border-top: 0;
    padding: 2px;
    text-align: center;
}

.full-width-multiselect .multiselect {
    width: 500px;
}

@media only screen and (max-width: 768px) {
    /* Force table to not be like tables anymore */
    .pci-responsive-table table,
    .pci-responsive-table thead,
    .pci-responsive-table tbody,
    .pci-responsive-table th,
    .pci-responsive-table td,
    .pci-responsive-table tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .pci-responsive-table thead tr {
        display: none;
    }

    .pci-responsive-table td {
        /* Behave like a "row" */
        position: relative;
        padding-left: 30% !important;
        white-space: normal;
        text-align: left;
    }

    .pci-responsive-table td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 30%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }

    /* Label the data */
    .pci-responsive-table td:before {
        content: attr(data-title);
    }
}

.show-icon-hover {
    visibility: hidden;
}

#thread-query-modal .modal-content:hover .show-icon-hover,
#new-query-modal .modal-content:hover .show-icon-hover {
    visibility: visible;
}

#thread-query-modal .modal-dialog,
#new-query-modal .modal-dialog {
    cursor: grabbing;
}

/* Used for our custom select2 multiselect */
.select2-result-label {
    min-height: 2em !important;
}

.select2-result-label .wrap:before {
    padding-right: 5px;
    color: black;
    content: '\f096';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    text-align: left;
}

/* Used for our custom select2 multiselect */
.select2-result-label .wrap.checked:before {
    content: '\f14a';
    color: #0b94ea;
}

.element-top {
    position: relative;
    z-index: 99;
}

.report-container {
    /**make table can scroll**/
    max-height: 800px;
    overflow: auto;
}

/* =================================================================
*        Additional CSS to override Bootstrap 3.4.1 default
*  =================================================================
*/
/*
This CSS is in place to override the “.focus” class, which is added to Bootstrap buttons (.btn .btn-<>) during a focus event.
This behaviour appears to have been added in Bootstrap 3.4.1, and it makes it difficult to tell if a “.btn-default” button has been clicked.
*/
.btn-default.active.focus {
    color: #333 !important;
    background-color: #e6e6e6 !important;
    border-color: #adadad !important;
}

.btn-default.focus,
.btn-default:focus {
    color: #333 !important;
    background-color: #fff !important;
    border-color: #ccc !important;
}

/*
This CSS is in place to add additional event to the “.disabled” class for buttons.
This behaviour appears to have been removed in Bootstrap 3.4.1, and the result turns out make the button still clickable.
Add "pointer-events" will make it un-clickable.
*/
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    pointer-events: none;
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.p-5 {
    padding: 5px !important;
}

.px-5 {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mb-5 {
    margin-bottom: 5px !important;
}

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

.no-padding {
    padding: 0 !important;
}

.vertical-top {
    vertical-align: text-top !important;
}

.text-center {
    text-align: center !important;
}

.w20 {
    width: 20% !important;
}

.w55 {
    width: 55% !important;
}

.w60 {
    width: 60% !important;
}

.h35 {
    height: 35px !important;
}

.font-bold {
    font-weight: bold !important;
}

.dropdown-big-number-icon {
    background-color: #fff;
    cursor: default;
}

/*
 * Used for big number icon dropdown only by overriding default iconSelect caret
 */
.iconSelect .dropdown-toggle > .caret {
    color: black;
}

.custom-table-foreign-key {
    max-width: 350px;
}

@media (max-width: 1280px) {
    .custom-table-foreign-key {
        max-width: 250px;
    }
}

.cursor-move {
    cursor: move;
}

.drag-row-li div {
    height: auto;
    border-bottom: none;
    border-right: none;
}

.drag-row-li div:last-child {
    border-right: 1px solid #e5e5e5;
}

.drag-row-li:last-child div {
    border-bottom: 1px solid #e5e5e5;
}

.drag-row-li div label {
    width: 300px;
    margin-bottom: -5px;
    color: #2a628b;
}

/* new participant dashboard css changes start */

.enable-css-changes,
.enable-css-changes .page-title {
    font-family: 'Inter';
}

.enable-css-changes .btn {
    padding: 9px 16px;
    border-radius: 8px !important;
}

/* Revert back to the original padding for this button as the text was cut off */
.enable-css-changes .btn.html-report-btn {
    padding: 0px 14px 20px;
}

.enable-css-changes .alert {
    font-size: 14px;
    font-weight: 500;
    font-family: 'Inter';
}

.enable-css-changes .alert-success {
    background-color: #f7fcf7;
    border: 1px solid #d6edd6;
    color: #5cb75c;
}

.enable-css-changes .alert-danger {
    background-color: #fef9f9;
    border: 1px solid #fce1e1;
    color: #ed4a4a;
}

.enable-css-changes .alert-info {
    background-color: #fffaef;
    border: 1px solid #ffe4a9;
    color: #ba5a1c;
}

.enable-css-changes .alert-heading {
    font-weight: 700;
}

.big-number-wrapper {
    margin-right: 0px;
}

.commission-search-field {
    width: 200px;
}

.current-participant .avatar {
    width: 40px;
    height: 40px;
}

.enable-css-changes .header.pc-container {
    position: fixed;
    z-index: 999;
}

.enable-css-changes .header.pc-container .pc-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

.enable-css-changes .header.pc-container .pc-navbar.logo-bar {
    line-height: 52px;
}

.enable-css-changes .page-container {
    top: 108px;
}

.enable-css-changes .big-number-wrapper {
    margin-left: 0px;
}

.enable-css-changes .navbar-second-row {
    height: 48px;
    line-height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.enable-css-changes .navbar-logo {
    padding-top: 0;
}

.enable-css-changes .navbar-second-row .period-selector-wrapper {
    display: flex;
    align-items: center;
}

.enable-css-changes #period_selector:focus {
    background-color: #f9f9f91a;
}

.enable-css-changes #period_selector:focus .seconday-header-active-color,
.enable-css-changes .seconday-header-active-color:focus {
    color: #d4d4d4 !important;
}

.enable-css-changes .navbar-second-row .navbar-width {
    width: auto;
    margin-right: 44px;
}

.enable-css-changes .navbar-second-row #messages,
.enable-css-changes .navbar-second-row #menuToggler {
    height: 40px;
    width: 40px;
    border-radius: 8px !important;
    border: 1px solid #d4d4d43d;
    background-color: #f9f9f924;
    color: #bababa;
    padding: inherit;
}

.enable-css-changes .navbar-second-row #messages.focus,
.enable-css-changes .navbar-second-row #messages:focus {
    background-color: #f9f9f91a !important;
    border: 1px solid #d4d4d43d !important;
}

.enable-css-changes .navbar-second-row #menuToggler.focus,
.enable-css-changes .navbar-second-row #menuToggler:focus {
    border: 1px solid #d4d4d43d !important;
    background-color: #f9f9f924 !important;
}

.enable-css-changes .navbar-second-row .badge-unread {
    top: -15px;
    left: 48px;
    font-weight: 500;
    font-size: 8px !important;
    width: 16px;
    height: 15px;
    padding: 3px 0 0 0;
}

.enable-css-changes .navbar-second-row .navbar-dropdown {
    font-size: 14px;
    border-radius: 8px !important;
    font-weight: 600;
    background-color: #f9f9f924;
    border: 1px solid rgba(212, 212, 212, 0.24) !important;
    height: 40px;
}

.enable-css-changes .navbar-second-row .navbar-dropdown .period-selector {
    background-color: initial;
}

.enable-css-changes .period-selector {
    color: #bababa !important;
}

.enable-css-changes .navbar-second-row .navbar-dropdown i {
    margin-left: 8px;
}

.enable-css-changes .navbar-second-row .navbar-dropdown:hover,
.enable-css-changes .navbar-second-row #messages:hover,
.enable-css-changes .navbar-second-row #menuToggler:hover {
    background-color: #d4d4d43d;
}

.enable-css-changes .navbar-second-row .dropdown-menu,
.enable-css-changes .tabs-container .dropdown-menu {
    left: 0;
    top: 44px;
    padding: 4px;
}

.enable-css-changes .navbar-second-row .display-options {
    border-radius: 999px;
    background-color: #f9f9f914;
    padding: 0px 16px 0px 16px;
    height: 36px;
}

.enable-css-changes .navbar-second-row .display-options .navbar-value:not(:last-child)::after {
    content: '  |  ';
}

.enable-css-changes .navbar-second-row .display-options .navbar-stat {
    padding-left: 0;
    background-color: initial;
}

.enable-css-changes .navbar-second-row .display-options .navbar-value {
    background-color: initial;
}

.enable-css-changes .navbar-second-row .dropdown-menu a,
.enable-css-changes .tabs-container .dropdown-menu a {
    padding: 8px;
    margin-bottom: 4px;
    border-radius: 4px;
}

.enable-css-changes .navbar-second-row .dropdown-menu a:last-child,
.enable-css-changes .tabs-container .dropdown-menu a:last-child {
    margin-bottom: 0px;
}

.enable-css-changes .navbar-second-row .dropdown-menu a:hover,
.enable-css-changes .tabs-container .dropdown-menu a:hover,
.enable-css-changes .tabs-container .dropdown-menu li.active {
    background-color: #ebebeb !important;
}

.enable-css-changes .dashboard-stat {
    display: flex;
    padding: 10px;
}

.enable-css-changes .dashboard-stat .visual {
    width: initial;
    height: initial;
    padding-left: initial;
    margin-bottom: initial;
}

.enable-css-changes .dashboard-stat .visual i {
    font-size: 24px;
}

.enable-css-changes .avatar {
    border-radius: 50%;
    border: 1px solid #d4d4d4;
    margin-left: 7px;
}

.enable-css-changes .page-title .username {
    font-size: 16px;
    font-weight: 400;
    margin-left: 4px;
    width: 100%;
    justify-content: space-between;
    display: flex !important;
    align-items: center;
    color: #000000;
}

.enable-css-changes .page-title .username i {
    margin-right: 18px;
}

.enable-css-changes .current-participant .dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 12px 0px;
    margin-bottom: 14px;
}

.enable-css-changes .current-participant .dropdown .dropdown-toggle:hover {
    background-color: #eeeeee;
}

.enable-css-changes .current-participant .dropdown.open .dropdown-toggle {
    background-color: #3B71DE;
}

.enable-css-changes .dropdown-menu-orgtree {
    padding: 8px 12px;
    top: 106%;
    box-shadow: 0px 8px 12px 0px #2525251f;
}

.enable-css-changes .dropdown-menu-orgtree form input {
    width: 100%;
    padding: 8px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
}

.enable-css-changes .dropdown.open .dropdown-toggle .user-selector {
    color: #fbfdfb;
}

.enable-css-changes .current-participant .avatar {
    width: 28px;
    height: 28px;
}

.enable-css-changes .menu-current-participant {
    display: flex;
    align-items: center;
}

.enable-css-changes ul.page-sidebar-menu > li > a {
    border-top: none !important;
    margin-top: 2px;
    padding: 10px 12px;
    display: flex;
    width: 100%;
}

.enable-css-changes ul.page-sidebar-menu > li:first-child a {
    margin-top: 0px;
}

.enable-css-changes ul.page-sidebar-menu > li > a .title {
    overflow: hidden;
    white-space: wrap;
}

.enable-css-changes .page-sidebar-menu > li > ul.sub-menu > li > a .container-nav-item {
    display: flex;
    gap: 4px;
}

.enable-css-changes .page-sidebar-menu > li > ul.sub-menu > li > a .container-nav-item i,
.enable-css-changes ul.page-sidebar-menu > li > a .container-nav-item i {
    margin-right: 0;
    margin-top: 4px;
}

.enable-css-changes ul.page-sidebar-menu > li > a .container-nav-item {
    width: 90%;
    display: flex;
    gap: 4px;
}

.enable-css-changes .non-parent-item {
    width: 100% !important;
}

.enable-css-changes ul.page-sidebar-menu > li > a .arrow {
    text-align: right;
    width: 10%;
}
/* 
.enable-css-changes ul.page-sidebar-menu>li>a:last-child, */
.enable-css-changes .page-sidebar ul > li.last,
.enable-css-changes .admin-view a {
    margin-bottom: 2px;
}

.enable-css-changes ul.page-sidebar-menu > li.open > a,
.enable-css-changes ul.page-sidebar-menu > li > a:hover,
.enable-css-changes ul.page-sidebar-menu > li:hover > a,
.enable-css-changes ul.page-sidebar-menu > li.active > a,
.pdf-object-container {
    border-radius: 8px;
}

.enable-css-changes .admin-view,
.enable-css-changes .last.hidden-desktop {
    border-top: 1px solid #e7e7e7;
}

.enable-css-changes .page-sidebar {
    background-color: #ffffff !important;
}

.branding-banner-top-row .visible-desktop .fileinput-button {
    width: 40px;
    height: 40px;
    margin-right: 5px;
    background-size: 40px 40px;
}

.enable-css-changes .page-sidebar ul > li > a > .arrow:before {
    transform: rotate(270deg);
}

.enable-css-changes .page-sidebar ul > li.active {
    background-color: #d4d4d430;
    border-radius: 8px;
}

.enable-css-changes .page-sidebar-menu > li.active > ul.sub-menu {
    margin: 0;
}

.enable-css-changes .page-sidebar-menu > li > ul.sub-menu > li:last-child {
    padding-bottom: 4px;
}

.enable-css-changes .page-sidebar-menu > li > ul.sub-menu > li:first-child a {
    margin-top: 4px;
}

.enable-css-changes .page-sidebar-menu > li > ul.sub-menu > li > a {
    border-radius: 8px;
    padding: 10px;
    padding-left: 32px !important;
    margin-top: 2px;
    color: initial !important;
    overflow: hidden;
    white-space: wrap;
}

.enable-css-changes .page-sidebar-menu > li > ul.sub-menu > li > a i {
    margin-right: 6px;
}

.enable-css-changes .page-sidebar-menu > li > ul.sub-menu > li > a:hover {
    color: initial !important;
}

.enable-css-changes ul.page-sidebar-menu ul.sub-menu > li > a i {
    font-size: 16px;
}

.enable-css-changes .nav-bar-container {
    overflow-x: auto;
}

.enable-css-changes .nav-footer {
    background-color: white;
    padding-top: 16px;
    padding-left: 8px;
}

.enable-css-changes .nav-footer .application-logo {
    width: 106px;
}

.enable-css-changes .nav-footer .copyright {
    font-size: 10px;
}

.enable-css-changes .nav-footer .copyright a {
    text-decoration: underline;
    color: #000;
}

.enable-css-changes .footer {
    display: none;
}

.enable-css-changes .dashboard-stat-new-flip {
    height: 160px;
    margin-bottom: 24px;
}

.enable-css-changes .dashboard-stat-new,
.enable-css-changes .dashboard-stat-new-flip .card .front,
.enable-css-changes .dashboard-stat-new-flip .card .back {
    border-radius: 8px;
    padding: 16px;
    color: #ffffff;
    height: 160px;
    margin-bottom: 24px;
    box-shadow:
        0px 0px 8px 0px rgba(37, 37, 37, 0.02),
        0px 2px 4px 0px rgba(37, 37, 37, 0.08);
}

.enable-css-changes .dashboard-stat-new .visual,
.enable-css-changes .dashboard-stat-new-flip .card .front .visual,
.enable-css-changes .dashboard-stat-new-flip .card .back .visual {
    height: 32px;
}

.enable-css-changes .dashboard-stat-new .visual.icon,
.enable-css-changes .dashboard-stat-new-flip .card .front .visual.icon,
.enable-css-changes .dashboard-stat-new-flip .card .back .visual.icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.enable-css-changes .dashboard-stat-new .visual.icon i,
.enable-css-changes .dashboard-stat-new-flip .card .front .visual.icon i,
.enable-css-changes .dashboard-stat-new-flip .card .back .visual.icon i {
    font-size: 24px;
    font-weight: 400;
}

.enable-css-changes .dashboard-stat-new .details,
.enable-css-changes .dashboard-stat-new-flip .card .front .details,
.enable-css-changes .dashboard-stat-new-flip .card .back .details {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    height: 88px;
    margin-top: 8px;
}

.enable-css-changes .dashboard-stat-new .number,
.enable-css-changes .dashboard-stat-new-flip .card .front .number,
.enable-css-changes .dashboard-stat-new-flip .card .back .number {
    font-size: 28px !important;
    line-height: 32px !important;
    font-weight: 500 !important;
}

.enable-css-changes .dashboard-stat-new .desc,
.enable-css-changes .dashboard-stat-new-flip .card .front .desc,
.enable-css-changes .dashboard-stat-new-flip .card .back .desc {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
}

.enable-css-changes .big-number-flip .visual {
    padding-top: initial;
}

.enable-css-changes .dashboard-stat-new-flip .details .prior-month,
.enable-css-changes .dashboard-stat-new .details .prior-month {
    font-size: 14px;
    font-weight: 500;
    margin-top: 5px;
}

.enable-css-changes .dashboard-stat-new-flip .visual-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.enable-css-changes .dashboard-stat-new-flip .visual-container .priorFlip i {
    font-size: 20px;
    font-weight: 900;
}

.enable-css-changes .big-number-flip .details,
.enable-css-changes .big-number-flip .priorFlip {
    padding-top: 0px;
}

.enable-css-changes .task-msg-section #new-message {
    border-radius: 8px !important;
    height: 40px;
}

.enable-css-changes .task-msg-section .message-section {
    padding-left: 0;
}

.enable-css-changes .task-msg-section .message-section .msg-row2 .msg-row {
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #e7e7e7;
    margin-bottom: 12px;
}

.enable-css-changes .task-msg-section .message-section .msg-row2 .msg-row .msg-person {
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    padding: 0;
}

.enable-css-changes .task-msg-section .message-section .msg-row2 .msg-row .closed {
    left: 50px;
    top: 5px;
    font-size: 10px !important;
    margin-left: 0 !important;
    font-weight: 600;
    position: relative;
    padding: 2px 10px;
    border-radius: 999px;
}

.enable-css-changes .task-msg-section .message-section .msg-row2 .msg-row .fgcolor-red {
    border: 1px solid #fac8c83d;
    color: #d24141 !important;
    background-color: #fac8c83d;
}

.enable-css-changes .task-msg-section .message-section .msg-row2 .msg-row .fgcolor-pci-green {
    border: 1px solid #b5deb53d;
    color: #428342 !important;
    background-color: #b5deb53d;
}

.enable-css-changes .task-msg-section .message-section .msg-row2 .msg-row .approval-id-new {
    font-size: 10px;
    font-weight: 600;
    color: #252525;
    float: right;
    padding-top: 4px;
}

.enable-css-changes .task-msg-section .message-section .msg-row2 .msg-row .msg-comments-new {
    padding-top: 2px;
    height: 20px;
    width: 23px;
    border-radius: 50%;
    color: #606060;
    background-color: #d4d4d43d;
    border: 1px solid #d4d4d43d;
    text-align: center;
    float: right;
    font-weight: 600;
    font-size: 10px;
}

.enable-css-changes .task-msg-section .message-list-formatted-name,
.enable-css-changes .task-msg-section .query-list-formatted-name {
    color: #757575;
    padding-bottom: 4px;
    font-size: 12px;
}

.enable-css-changes .closed-status-tag {
    left: -5px !important;
}

.enable-css-changes .task-msg-section .designation {
    color: #252525;
}

.enable-css-changes .messages-section {
    padding-left: 24px;
    padding-right: 0;
}

.enable-css-changes .individual-record-side {
    border-right: 1px solid #e7e7e7;
    padding-left: 0;
    padding-right: 24px;
}

.enable-css-changes .task-msg-section .query-closed {
    background-color: initial;
}

.enable-css-changes .task-msg-section .message-section .msg-row2 .msg-row .msg-content-section {
    font-size: 12px;
    font-weight: 400;
    color: #bababa;
    border-bottom: 1px solid #e7e7e7;
    border-top: none;
}

.enable-css-changes .task-msg-section .msg-title,
.enable-css-changes .task-msg-section #jobtitle,
.enable-css-changes .task-msg-section .message-section .msg-row2 .msg-row .item-title {
    display: none;
}

.enable-css-changes .task-msg-section .message-section .msg-row2 {
    padding: 16px 0 0;
}

.enable-css-changes .task-msg-section .message-section .msg-row2 .msg-row .msg-content {
    font-size: 12px;
    font-style: normal;
}

.enable-css-changes .task-msg-section .bottom-hell {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.enable-css-changes .page-sidebar-menu i {
    font-weight: 500;
}

.enable-css-changes .form-action-buttons {
    padding-right: 0;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    padding-bottom: 0;
}

.enable-css-changes .form-action-buttons::after {
    content: none;
}

.enable-css-changes .btn-outline-danger {
    color: #ed4a4a;
    border-color: #ed4a4a;
}

.enable-css-changes .btn-outline-danger:hover {
    background-color: rgba(250, 200, 200, 0.4);
    color: #a03232;
    border-color: #a03232;
}

.enable-css-changes .btn-outline-danger.disabled,
.enable-css-changes .btn-outline-danger:disabled {
    color: #ed4a4a;
    background-color: transparent;
}

.enable-css-changes .graph-charts .no-capsules-configured {
    border-radius: 8px;
    padding: 24px;
    background-color: #ffffff;
    margin-left: -10px;
    margin-right: -10px;
    box-shadow:
        0px 0px 8px 0px rgba(37, 37, 37, 0.02),
        0px 2px 4px 0px rgba(37, 37, 37, 0.08);
}

.enable-css-changes .secondary-navbar-toggle {
    display: flex;
    flex-direction: row-reverse;
}

@media (min-width: 992px) {
    .enable-css-changes .menu-org-tree-enableParticipantStyleChanges.open #user-list {
        display: block;
        top: 184px;
        position: fixed;
        left: 8px;
    }

    .enable-css-changes .menu-org-tree-enableParticipantStyleChanges #user-list {
        display: none;
    }

    .enable-css-changes .page-content-wrapper {
        padding-left: 240px;
    }

    .enable-css-changes .page-container .page-content {
        margin-left: 0;
        padding: 32px;
        background-color: #fbfbfb;
    }

    .enable-css-changes .page-sidebar-wrapper {
        width: 240px;
    }

    .enable-css-changes .page-sidebar-wrapper .page-sidebar {
        /* width: inherit; */
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        padding: 12px 8px 12px 8px;
        height: calc(100vh - 108px) !important;
        position: fixed;
        width: 240px;
        padding-top: 20px !important;
        min-height: initial !important;
    }

    .enable-css-changes .page-sidebar-wrapper .navbar-collapse::before,
    .enable-css-changes .page-sidebar-wrapper .navbar-collapse::after {
        content: none;
    }

    .enable-css-changes .branding-banner-top-row .visible-desktop {
        display: flex;
        align-items: center;
    }

    .enable-css-changes .branding-banner-top-row .log-container {
        display: flex;
        flex-direction: column;
        line-height: initial;
    }

    .enable-css-changes .branding-banner-top-row .log-container .logged-in {
        font-size: 12px;
        font-weight: 500;
        color: #757575;
    }

    .enable-css-changes .branding-banner-top-row .log-container .log-out {
        font-size: 14px;
        font-weight: 500;
    }

    .enable-css-changes .branding-banner-top-row .log-container a {
        font-size: 14px;
        font-weight: 500;
        color: #26a7e3;
    }

    .enable-css-changes .branding-banner-top-row .visible-desktop .fileinput-button {
        margin-right: 10px;
        border-radius: 50% !important;
        background-size: 28px 28px;
        height: 28px;
        width: 28px;
        padding: inherit;
    }

    .enable-css-changes .log-container .username {
        margin-left: initial;
    }

    .enable-css-changes .big-number-flip .priorFlip {
        padding-top: 0px;
    }

    .enable-css-changes .avatar {
        display: initial;
    }

    .enable-css-changes .module-container-wrapper .password-change-container,
    .enable-css-changes .module-container-wrapper .module-survey-container {
        width: 50vw !important;
    }

    .enable-css-changes .task-msg-section .message-section .msg-row2 .msg-row .closed {
        left: 72px;
        top: 0;
    }
}

@media (max-width: 480px) {
    .enable-css-changes .page-sidebar,
    .enable-css-changes .page-sidebar.in {
        margin: 0;
        width: 100% !important;
        padding: 12px;
    }

    .enable-css-changes .nav-footer {
        background-color: #fbfbfb;
    }

    .enable-css-changes .search-actions .global-searchfield input {
        width: 316px !important;
    }

    .enable-css-changes .action-buttons .export-button-right {
        position: static !important;
    }

    .enable-css-changes .dataTables_length {
        text-align: initial !important;
    }
}

@media (max-width: 991px) {
    .enable-css-changes .page-sidebar-wrapper .page-sidebar {
        width: 100%;
        position: fixed;
        z-index: 999;
        overflow: scroll;
        height: calc(100vh - 108px) !important;
        background-color: #fbfbfb !important;
        padding: 12px;
        margin: auto;
        min-height: initial !important;
    }

    .enable-css-changes .nav-footer {
        position: fixed;
        bottom: 0px;
        width: 100%;
    }
}

/*  Tabs css changes   */

.enable-css-changes .progress_label {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.enable-css-changes .nav-tabs {
    border-bottom: 1px solid #e7e7e7;
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
}

.enable-css-changes .nav-tabs > li.active > a,
.enable-css-changes .nav-tabs > li.active > a:hover,
.enable-css-changes .nav-tabs > li.active > a:focus {
    cursor: default;
    border: none;
    color: #252525;
    font-size: 14px;
    font-weight: 600;
    background-color: transparent;
    padding: 4px 12px 12px 12px !important;
    margin-bottom: none;
}

.enable-css-changes .nav-tabs > li {
    float: left;
    margin-bottom: 0px !important;
}

.enable-css-changes .nav-tabs > li > a:hover {
    border-color: transparent !important;
}

.enable-css-changes .nav-tabs > li.active {
    font-weight: bold;
    display: block;
    border-bottom: 2px solid #26a7e3;
}

.enable-css-changes .nav-tabs li a:hover {
    background-color: transparent;
}

.enable-css-changes .nav-tabs > li > a {
    color: #757575;
    size: 14px;
    font-weight: 600;
    background-color: none;
    padding: 4px 12px 8px 12px !important;
}

/* Capsule change  */
.enable-css-changes .progress_barboxmain {
    color: #252525;
    font-size: 14px;
    font-weight: 600;
    padding: 0;
    /* inside element speedometer main div */
}

.enable-css-changes .progress_barboxmain > .progress_barbox.gauge-barbox {
    border: 1px solid #e7e7e7;
    /* this is for the whole box  */
}

.enable-css-changes .progress_barbox .col-md-6,
.enable-css-changes .progress_barbox .col-md-6 {
    color: #595959;
    font-size: 12px;
    font-weight: 500;
    margin-right: 12px;
    /* inside the speedo meter */
}

@media (width > 2040px) {
    /* Large screen  */
    .enable-css-changes .row.graph-charts {
        display: flex;
        gap: 24px;
        flex: 1;
    }

    .enable-css-changes .graph-charts .col-md-9 {
        border-radius: 8px;
        padding: 24px;
        background-color: #ffffff;
        margin-left: -10px;
        display: flex;
        flex-direction: column;
        flex: 3;
        box-shadow:
            0px 0px 8px 0px rgba(37, 37, 37, 0.02),
            0px 2px 4px 0px rgba(37, 37, 37, 0.08);
    }

    .enable-css-changes .graph-charts .col-md-3 {
        background-color: #ffffff;
        border-radius: 8px;
        padding: 24px;
        margin-right: -10px;
        display: flex;
        flex-direction: column;
        flex: 1;
        box-shadow:
            0px 0px 8px 0px rgba(37, 37, 37, 0.02),
            0px 2px 4px 0px rgba(37, 37, 37, 0.08);
    }

    .enable-css-changes .progress_barboxmain {
        color: #252525;
        font-size: 14px;
        font-weight: 600;
        padding: 0;
        /* header for the capsules  */
    }

    .enable-css-changes .progress_barboxmain > .progress_barbox.gauge-barbox {
        border: 1px solid #e7e7e7;
        margin-bottom: 24px;
        width: initial;
        min-height: 85px;
        /* for the each capsule item  */
    }

    .enable-css-changes .progress_barbox {
        border: 1px solid #e7e7e7 !important;
        margin-bottom: 24px !important;
        padding: 7px 7px 12px 12px !important;
        /* for the each bar capsule item  */
    }

    .scoreLabel_capsule {
        display: flex;
        gap: 8px;
        flex-direction: column;
        /* flex-wrap: wrap; */
    }

    .column_text {
        display: flex;
        flex-direction: column;
        color: #595959;
        font-size: 12px;
        font-weight: 500;
        width: 100%;
        justify-content: space-around;
    }

    .enable-css-changes .gauge-barbox {
        padding: 7px 7px 12px 12px !important;
        height: max-content;
    }
}

@media (width <=2040px) {
    /* Large screen  */
    .enable-css-changes .row.graph-charts {
        display: flex;
        gap: 24px;
        flex: 1;
    }

    .enable-css-changes .graph-charts .col-md-9 {
        border-radius: 8px;
        padding: 24px;
        background-color: #ffffff;
        margin-left: -10px;
        display: flex;
        flex-direction: column;
        flex: 3;
        box-shadow:
            0px 0px 8px 0px rgba(37, 37, 37, 0.02),
            0px 2px 4px 0px rgba(37, 37, 37, 0.08);
    }

    .enable-css-changes .graph-charts .col-md-3 {
        background-color: #ffffff;
        border-radius: 8px;
        padding: 24px;
        margin-right: -10px;
        display: flex;
        flex-direction: column;
        flex: 1;
        box-shadow:
            0px 0px 8px 0px rgba(37, 37, 37, 0.02),
            0px 2px 4px 0px rgba(37, 37, 37, 0.08);
    }

    .enable-css-changes .progress_barboxmain {
        color: #252525;
        font-size: 14px;
        font-weight: 600;
        padding: 0;
        /* header for the capsules  */
    }

    .enable-css-changes .progress_barboxmain > .progress_barbox.gauge-barbox {
        border: 1px solid #e7e7e7;
        margin-bottom: 24px;
        width: initial;
        height: max-content;
        /* for the each capsule item  */
    }

    .enable-css-changes .progress_barbox {
        border: 1px solid #e7e7e7 !important;
        margin-bottom: 24px !important;
        /* for the each bar capsule item  */
    }

    .scoreLabel_capsule {
        display: flex;
        gap: 16px;
        flex-direction: column;
        /* flex-wrap: wrap; */
    }

    .enable-css-changes .gauge-barbox {
        padding: 7px 7px 24px 12px !important;
    }

    .column_text {
        display: flex;
        flex-direction: column;
        color: #595959;
        font-size: 12px;
        font-weight: 500;
        width: 40px;
    }
}

@media (width <=1920px) {
    /* Large screen  */
    .enable-css-changes .row.graph-charts {
        display: flex;
        gap: 24px;
        flex: 3;
    }

    .enable-css-changes .graph-charts .col-md-9 {
        border-radius: 8px;
        padding: 24px;
        background-color: #ffffff;
        margin-left: -10px;
        display: flex;
        flex-direction: column;
        flex: 3;
        box-shadow:
            0px 0px 8px 0px rgba(37, 37, 37, 0.02),
            0px 2px 4px 0px rgba(37, 37, 37, 0.08);
    }

    .enable-css-changes .graph-charts .col-md-3 {
        background-color: #ffffff;
        border-radius: 8px;
        padding: 24px;
        margin-right: -10px;
        display: flex;
        flex-direction: column;
        flex: 1;
        box-shadow:
            0px 0px 8px 0px rgba(37, 37, 37, 0.02),
            0px 2px 4px 0px rgba(37, 37, 37, 0.08);
    }

    .enable-css-changes .progress_barboxmain {
        color: #252525;
        font-size: 14px;
        font-weight: 600;
        padding: 0;
        /* header for the capsules  */
    }

    .enable-css-changes .progress_barboxmain > .progress_barbox.gauge-barbox {
        border: 1px solid #e7e7e7;
        margin-bottom: 24px;
        width: initial;
        height: max-content;
        /* for the each capsule item  */
    }

    .enable-css-changes .progress_barbox {
        border: 1px solid #e7e7e7 !important;
        margin-bottom: 24px !important;
        /* for the each bar capsule item  */
    }

    .scoreLabel_capsule {
        display: flex;
        gap: 16px;
        flex-direction: column;
        /* flex-wrap: wrap; */
    }

    .column_text {
        display: flex;
        flex-direction: column;
        color: #595959;
        font-size: 12px;
        font-weight: 500;
        width: 100%;
        justify-content: space-around;
    }

    .enable-css-changes .gauge-barbox {
        padding: 7px 7px 24px 12px !important;
    }
}

@media (width <=1620px) {
    .enable-css-changes .progress_barboxmain > .progress_barbox.gauge-barbox {
        border: 1px solid #e7e7e7;
        margin-bottom: 24px;
        width: 100%;
        /* for the each capsule item  */
    }

    .enable-css-changes .col-md-9 {
        width: 65%;
    }
}

@media (width <=1440px) {
    .enable-css-changes .row.graph-charts {
        display: flex;
        gap: 24px;
        flex: 10;
    }

    .enable-css-changes .graph-charts .col-md-9 {
        border-radius: 8px;
        padding: 24px;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        flex: 3;
        box-shadow:
            0px 0px 8px 0px rgba(37, 37, 37, 0.02),
            0px 2px 4px 0px rgba(37, 37, 37, 0.08);
    }

    .enable-css-changes .graph-charts .col-md-3 {
        background-color: #ffffff;
        border-radius: 8px;
        padding: 24px;
        display: flex;
        flex: 1;
        box-shadow:
            0px 0px 8px 0px rgba(37, 37, 37, 0.02),
            0px 2px 4px 0px rgba(37, 37, 37, 0.08);
    }

    .enable-css-changes .progress_barboxmain > .progress_barbox.gauge-barbox {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    .enable-css-changes .progress_barboxmain > .progress_barbox.gauge-barbox > .progress_barbtext {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 24px;
    }

    .enable-css-changes .page-container .page-content {
        margin-left: 0;
        padding: 24px !important;
        background-color: #fbfbfb;
    }

    .enable-css-changes .progress_barbox {
        border: 1px solid #e7e7e7 !important;
        margin-bottom: 24px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        width: 100%;
        /* for the each bar capsule item  */
    }

    .enable-css-changes .progress_barbox > .progress_barbtext {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 24px;
        margin-left: -5px;
        /* for the each bar capsule item  */
    }

    .scoreLabel_capsule {
        display: flex;
        gap: 50px;
        flex-direction: row;
    }

    .column_text {
        display: flex;
        flex-direction: column;
        color: #595959;
        font-size: 12px;
        font-weight: 500;
        width: 100%;
        justify-content: space-around;
    }

    .enable-css-changes .col-md-9 {
        width: 70%;
    }

    .enable-css-changes .gauge-barbox {
        padding: 0px !important;
        padding-top: 7px !important;
    }
}

@media (width <=1280px) {
    /* Tablets screen  */
    .enable-css-changes .row.graph-charts {
        display: flex;
        gap: 24px;
        flex: 1;
        flex-direction: column;
        margin-top: -24px;
        width: 100%;
    }

    .enable-css-changes .graph-charts .col-md-9 {
        border-radius: 8px;
        padding: 24px;
        background-color: #ffffff;
        margin-left: 15px;
        margin-right: 15px;
        display: flex;
        flex-direction: column;
        flex: 3;
        box-shadow:
            0px 0px 8px 0px rgba(37, 37, 37, 0.02),
            0px 2px 4px 0px rgba(37, 37, 37, 0.08);
    }

    .enable-css-changes .graph-charts .col-md-3 {
        background-color: #ffffff;
        border-radius: 8px;
        padding: 24px;
        margin-left: 15px;
        margin-right: 15px;
        display: flex;
        flex-direction: row;
        flex: 1;
        gap: 24px;
        flex-wrap: wrap;
        box-shadow:
            0px 0px 8px 0px rgba(37, 37, 37, 0.02),
            0px 2px 4px 0px rgba(37, 37, 37, 0.08);
    }

    .enable-css-changes .progress_barboxmain > .progress_barbox.gauge-barbox {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 0px 12px 12px 12px;
        margin-bottom: 0px;
        padding: 12px !important;
        width: 250px;
        height: 170px;
    }

    .enable-css-changes .progress_barboxmain > .progress_barbox.gauge-barbox > .progress_barbtext {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 24px;
        width: 250px;
        height: 170px;
    }

    .enable-css-changes .progress_barbox {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 12px !important;
        margin-bottom: 0px !important;
        width: 250px;
        height: 170px;
        /*  bar capsule css */
    }

    .enable-css-changes .progress_barbox > .progress_barbtext {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 24px;
    }

    .enable-css-changes .page-container .page-content {
        margin-left: 0;
        padding: 24px !important;
        background-color: #fbfbfb;
    }

    .enable-css-changes .progress_barboxmain {
        width: max-content;
    }

    .enable-css-changes.progress_barbtext .col-md-6 {
        float: left;
        padding: 0 10px 0 0;
        min-width: min-content;
    }

    .scoreLabel_capsule {
        display: flex;
        gap: 8px;
        justify-content: space-around;
        width: 100%;
    }

    .column_text {
        display: flex;
        flex-direction: column;
        color: #595959;
        font-size: 12px;
        font-weight: 500;
        width: 100%;
        justify-content: space-around;
    }

    .enable-css-changes .gauge-barbox {
        padding: 0px !important;
        padding-top: 7px !important;
        margin-bottom: 0px !important;
    }

    .enable-css-changes .graph-charts .col-md-9 {
        width: 100%;
    }

    .enable-css-changes .graph-charts .col-md-3 {
        width: 100%;
    }
}

@media (width <=993px) {
    .enable-css-changes .progress_barboxmain > .progress_barbox.gauge-barbox {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        padding: 0px 12px 12px 12px;
        margin-bottom: 0px;
        padding: 12px !important;
        width: 250px;
        height: 170px;
    }

    .enable-css-changes .progress_barbox {
        gap: 24px;
    }
}

@media (width <=768px) {
    /* Tablets screen  */
    .enable-css-changes .row.graph-charts {
        display: flex;
        gap: 24px;
        flex: 1;
        flex-direction: column;
        margin-top: -24px;
        width: 100%;
    }

    .enable-css-changes .graph-charts .col-md-9 {
        border-radius: 8px;
        padding: 24px;
        background-color: #ffffff;
        margin-left: 15px;
        margin-right: 15px;
        display: flex;
        flex-direction: column;
        flex: 3;
        box-shadow:
            0px 0px 8px 0px rgba(37, 37, 37, 0.02),
            0px 2px 4px 0px rgba(37, 37, 37, 0.08);
    }

    .enable-css-changes .graph-charts .col-md-3 {
        background-color: #ffffff;
        border-radius: 8px;
        padding: 24px;
        margin-left: 15px;
        margin-right: 15px;
        display: flex;
        flex-direction: row;
        flex: 1;
        gap: 24px;
        flex-wrap: wrap;
        box-shadow:
            0px 0px 8px 0px rgba(37, 37, 37, 0.02),
            0px 2px 4px 0px rgba(37, 37, 37, 0.08);
    }

    .enable-css-changes .progress_barboxmain > .progress_barbox.gauge-barbox {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        padding: 0px 12px 12px 12px;
        margin-bottom: 0px;
        padding: 12px !important;
    }

    .enable-css-changes .progress_barboxmain > .progress_barbox.gauge-barbox > .progress_barbtext {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 24px;
    }

    .enable-css-changes .progress_barbox {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 12px !important;
        /*  bar capsule css */
    }

    .enable-css-changes .progress_barbox > .progress_barbtext {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 24px;
    }

    .enable-css-changes .page-container .page-content {
        margin-left: 0;
        padding: 24px !important;
        background-color: #fbfbfb;
    }

    .enable-css-changes .progress_barboxmain {
        width: max-content;
    }

    .enable-css-changes.progress_barbtext .col-md-6 {
        float: left;
        padding: 0 10px 0 0;
        min-width: min-content;
    }

    .scoreLabel_capsule {
        display: flex;
        gap: 8px;
        justify-content: space-around;
        width: 100%;
    }

    .column_text {
        display: flex;
        flex-direction: column;
        color: #595959;
        font-size: 12px;
        font-weight: 500;
        width: 100%;
        justify-content: space-around;
    }

    .enable-css-changes .gauge-barbox {
        padding: 0px !important;
        padding-top: 7px !important;
    }

    .enable-css-changes .col-md-9 {
        width: 100%;
    }

    .enable-css-changes .col-md-3 {
        width: 100%;
    }

    .enable-css-changes .progress_barbox .col-md-6,
    .progress_barbox .col-md-6 {
        padding: 0;
        color: #595959;
        font-size: 12px;
        font-weight: 500;
        margin-top: -6px;
        /* inside the speedo meter */
    }
}

.enable-css-changes .page-title {
    color: #252525;
    font-weight: 600;
    font-size: 24px;
    font-family: 'Inter';
}

.enable-css-changes .table-container-wrapper,
.enable-css-changes .module-container-wrapper {
    border-radius: 8px;
    padding: 24px;
    background-color: #ffffff;
    box-shadow:
        0px 0px 8px 0px rgba(37, 37, 37, 0.02),
        0px 2px 4px 0px rgba(37, 37, 37, 0.08);
    display: flex;
    flex-grow: 1;
    min-height: 100%;
    flex-direction: column;
}

.enable-css-changes .module-label-text {
    color: #606060;
    font-size: 14x;
    font-weight: 500;
}

.enable-css-changes .plan-template-wrapper textarea,
.enable-css-changes .module-survey-container textarea {
    border-radius: 8px;
    background-color: #fbfbfb;
    border: 1px solid #d4d4d4 !important;
    padding: 12px !important;
    width: 100%;
}

.enable-css-changes .border-top-none {
    border-top: none;
    padding-right: 0;
}

.enable-css-changes .plan-template-wrapper .table-scrollable {
    border-radius: 8px;
    border: 1px solid #e7e7e7;
}

.enable-css-changes .table-container-wrapper .dataTables_scrollHead table,
.enable-css-changes .table-container-wrapper .dataTables_scrollBody table {
    border: 1px solid #e7e7e7;
}

.enable-css-changes .table-container-wrapper .dataTables_scrollHead table {
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.enable-css-changes .table-container-wrapper .dataTables_scrollHead table th {
    padding-top: 12px;
    font-weight: 500;
    padding-bottom: 12px;
}

.enable-css-changes .table-container-wrapper .dataTables_scrollHead table thead {
    color: #595959;
    font-size: 14px;
    font-weight: 500;
    background-color: #fbfbfb;
    border-radius: 8px 8px 0 0;
}

.enable-css-changes .table-container-wrapper .dataTables_scrollBody table {
    border-radius: 0 0 8px 8px;
}

.enable-css-changes .table-container-wrapper .dataTables_scrollBody table td,
.enable-css-changes .plan-template-wrapper .table-scrollable table td {
    padding: 16px;
}

.enable-css-changes .table-container-wrapper .action-buttons {
    margin-bottom: initial;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}

/*  Tabs and capsule css changes  */

/*  Tables css changes   */

.enable-css-changes .module-content-desc {
    margin: -6px 0 18px;
}

.enable-css-changes .element-top {
    float: initial !important;
    display: flex;
    gap: 8px;
    justify-content: flex-start;
}

.enable-css-changes .table-container-wrapper .big-numbers-top .pcadmin-small-numbers {
    margin-top: 0;
}

.enable-css-changes .pcadmin-small-numbers {
    flex: 1;
    border-radius: 8px;
    border: 1px solid #e7e7e7;
    text-align: left;
    margin: 18px 0;
    max-width: 33%;
}

.enable-css-changes .pcadmin-small-numbers .small-number-label {
    font-size: 12px;
    font-weight: 500;
    color: #757575;
}

.enable-css-changes .pcadmin-small-numbers .small-number-value {
    font-size: 16px;
    font-weight: 600;
    color: #252525;
}

.enable-css-changes .search-actions,
.enable-css-changes .search-actions form,
.enable-css-changes .search-fields {
    margin-top: initial;
    margin-bottom: 9px;
}

.search-fields {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

.enable-css-changes .add-new-record-container {
    display: flex;
    justify-content: end;
    margin-top: 20px;
}

.enable-css-changes .add-new-record {
    border-radius: 8px !important;
    height: 40px;
    font-weight: 600;
    border: 1px solid #5cb75c00;
}

.enable-css-changes .search-fields {
    gap: 0;
}

.enable-css-changes .search-fields .searchfield {
    margin-right: 24px;
    margin-top: 12px;
}

.enable-css-changes .search-actions .clear-search {
    border: none;
    padding: 9px 16px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    height: 40px;
}

.enable-css-changes .search-actions .clear-search:hover {
    background-color: transparent;
}

.enable-css-changes .search-actions .clear-search a {
    color: #26a7e3;
}

.enable-css-changes .search-actions .clear-search a:hover {
    color: #165f80;
}

.enable-css-changes .search-actions .global-searchfield {
    position: relative;
    display: inline-block;
    margin-right: 16px;
}

.enable-css-changes .search-actions .global-searchfield input {
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    height: 40px;
    background-color: #fbfbfb !important;
    width: 384px;
    padding-right: 32px;
    color: #898989;
    box-sizing: border-box;
}

.enable-css-changes .search-actions .global-searchfield .search-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #898989;
    cursor: pointer;
}

.enable-css-changes .search-fields .searchfield input {
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    height: 40px;
    width: 300px;
    background-color: #fbfbfb;
    color: #898989;
}

.enable-css-changes .search-fields .select2-container .select2-choice,
.enable-css-changes .search-fields select {
    height: 40px;
    padding-top: 6px;
    background-color: #fbfbfb;
    color: #898989;
    border-color: #d4d4d4;
    border-radius: 8px;
}

.enable-css-changes .search-fields .select2-container .select2-choice .select2-arrow {
    padding-top: 6px;
}

.enable-css-changes .search-actions .search {
    background-color: #fbfbfb;
    border-radius: 8px !important;
    border: 1px solid #d4d4d4;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #606060;
    height: 40px;
    margin-right: 14px;
}

.enable-css-changes .search-actions .search:hover {
    background-color: #fbfbfb;
}

.enable-css-changes .search-actions .search:active,
.enable-css-changes .search-actions .search:focus {
    background-color: #4a4a4a !important;
    border: 1px solid #4a4a4a00;
    color: #fdfdfd !important;
}

.enable-css-changes .dataTables_wrapper select.element-top {
    height: 40px;
    width: 120px;
    padding: 0 8px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    margin-right: 8px;
    margin-bottom: 18px;
    margin-top: 12px;
}

.enable-css-changes .dataTables_wrapper .dataTables_info {
    padding-top: 24px;
}

.enable-css-changes .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .pagination {
    padding-top: 14px;
}

.enable-css-changes .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .pagination {
    padding-top: 14px;
}

.enable-css-changes .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .pagination li a {
    border-radius: 8px;
    margin-right: 4px;
    border: 1px solid #e7e7e7;
}

.enable-css-changes .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .pagination li.active a {
    border: 1px solid #3b3b3b;
    background-color: #4a4a4a;
    color: #fdfdfd;
}

.enable-css-changes .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .pagination li:last-child a {
    margin-right: initial;
}

.enable-css-changes .action-buttons .button-export,
.enable-css-changes .module-container-wrapper .module-survey-container button[type='button'] {
    border-radius: 8px !important;
    color: #606060;
    background-color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 16px;
    border: 1px solid #d4d4d4;
}

.enable-css-changes .action-buttons .export-button-right {
    position: absolute;
    right: 0;
    top: 0;
}

.enable-css-changes .action-buttons .button-export:hover,
.enable-css-changes .search-actions .search:hover,
.enable-css-changes .download-option-html-report a:hover,
.enable-css-changes .printIconCss a:hover,
.enable-css-changes .module-container-wrapper .module-survey-container button[type='button']:hover,
.enable-css-changes #showHidePDF:hover {
    border: 1px solid #595959;
    background-color: #d4d4d466 !important;
    color: #595959 !important;
}

.enable-css-changes .search-actions .search.search-fields-show {
    border: 1px solid #595959 !important;
    background-color: #4a4a4a !important;
    color: #fdfdfd !important;
}

.enable-css-changes .form-actions.nobg.right input,
.enable-css-changes .action-buttons .approval-buttons div,
.enable-css-changes .action-buttons .approval-buttons a {
    border-radius: 8px !important;
    padding: 9.45px 16px;
    font-size: 14px;
    font-weight: 600;
}

.enable-css-changes .action-buttons .approval-buttons div,
.enable-css-changes .action-buttons .approval-buttons a {
    margin-right: 12px;
}

.enable-css-changes .action-buttons .approval-buttons div:last-child,
.enable-css-changes .action-buttons .approval-buttons a:last-child {
    margin-right: 0;
}

.enable-css-changes .action-buttons .export-approval-container {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.enable-css-changes .table-container-wrapper .search-actions .commission-clear {
    height: 40px;
}

.enable-css-changes .download-option-html-report a,
.enable-css-changes .printIconCss a,
.enable-css-changes #showHidePDF {
    background-color: transparent;
    color: #606060;
    border-radius: 8px !important;
    border: 1px solid #d4d4d4;
    padding: 9.45px 16px;
    margin-right: 10px;
}

.enable-css-changes .download-option-html-report a:last-child {
    margin-right: inherit;
}

.enable-css-changes .table-container-wrapper .report-container {
    border-radius: 8px;
    border: 1px solid #e7e7e7;
}

.enable-css-changes .table-container-wrapper .report-container .table thead tr th,
.enable-css-changes .plan-template-wrapper .table-scrollable thead tr th {
    background-color: #fbfbfb;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #595959;
}

.enable-css-changes .table-container-wrapper .report-container .table thead tr th span {
    color: #595959 !important;
}

.enable-css-changes .table-container-wrapper .report-container .table tbody tr td,
.enable-css-changes .table-container-wrapper .dataTables_scrollBody table td,
.enable-css-changes .plan-template-wrapper .table-scrollable table td {
    padding: 16px;
}

.enable-css-changes .table-container-wrapper .report-container .table-striped > tbody > tr:nth-of-type(odd):hover,
.enable-css-changes .table-container-wrapper .report-container .table-striped > tbody > tr:nth-of-type(even):hover {
    background-color: #f5f5f5;
}

.enable-css-changes .table-container-wrapper .report-container .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fff;
}

.enable-css-changes .participant-view-row {
    width: 100%;
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.enable-css-changes .participant-view-row .participant-view-row-action input {
    padding: 9.5px 16px;
    color: #fbfdfb;
    border-radius: 8px !important;
}

.enable-css-changes .participant-view-row .participant-view-row-title {
    width: 150px;
}

.enable-css-changes .participant-view-row .participant-view-row-select select {
    width: 400px;
    border-radius: 8px;
}

.enable-css-changes .module-container-wrapper .password-change-container,
.enable-css-changes .module-container-wrapper .module-survey-container {
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    color: #606060;
}

.enable-css-changes .module-container-wrapper.password-change-wrapper,
.enable-css-changes .module-container-wrapper.module-survey-wrapper {
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.enable-css-changes .module-container-wrapper .password-change-container input[type='password'],
.enable-css-changes .module-container-wrapper .password-change-container #security-questions select,
.enable-css-changes .module-container-wrapper .password-change-container #security-questions input[type='text'] {
    border-radius: 8px;
    border: 1px solid #d4d4d4;
    padding: 12px 16px;
    width: 100%;
    height: 40px;
}

.enable-css-changes .module-container-wrapper .password-change-container .password-change-security-question {
    padding: 16px 0;
    border-top: 1px solid #e7e7e7;
}

.enable-css-changes .module-container-wrapper .password-change-container .password-change-security-question span {
    font-size: 20px;
    font-weight: 600;
    color: #000000;
}

.enable-css-changes .module-container-wrapper .module-survey-container button {
    border-radius: 8px !important;
    height: 40px;
    font-weight: 600;
}

@media (max-width: 991px) {
    .header .navbar-toggle {
        display: inline-block;
    }
}

@media (max-width: 648px) {
    .enable-css-changes .task-msg-section .message-section .msg-row2 .msg-row .closed {
        left: 34px;
        top: 20px;
    }

    .enable-css-changes .task-msg-section .message-section .msg-row2 .msg-row {
        min-height: 105px;
    }
}

.enable-css-changes .fa-caret-left:before {
    content: '\f104';
    font-weight: 400;
}

.enable-css-changes #add-query-post {
    padding: 7px 16px;
}

.enable-css-changes .row-data-edit-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    width: 100%;
}

.enable-css-changes .page-content {
    min-height: calc(100vh - 108px) !important;
    display: flex;
    flex-direction: column;
}

.enable-css-changes .chart-dropdown-button {
    min-width: 312px;
    background-color: transparent;
    padding: 10px 16px;
}

.enable-css-changes .tabs-container .dropdown-menu li a {
    background-color: transparent !important;
}

.enable-css-changes .tabs-container .dropdown-menu li {
    border-radius: 4px;
    margin-bottom: 2px;
}

.enable-css-changes .chart-dropdown-button .btn-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
}

.enable-css-changes .chart-dropdown-button .btn-label i {
    font-size: 14px;
    font-weight: 400;
    color: #898989;
}

.enable-css-changes .nav-tabs-container.dropdown-menu {
    max-height: 360px;
}

/* new participant dashboard css changes end */

/* new admin dashboard tasks start */

.view-add-task-container {
    font-family: Inter;
}

.bootbox.modal {
    z-index: 99999 !important;
}

.view-add-task-container .modal-title {
    font-size: 20px;
    font-weight: 600;
}

.view-add-task-container input[type='text'],
.view-add-task-container select,
.view-add-task-container input[type='date'] {
    height: 40px !important;
}

.view-add-task-container .control-label {
    margin-bottom: 6px;
    font-size: 14px;
}

.view-add-task-container .addtask-section input[type='text'],
.view-add-task-container .attachment-description {
    margin-right: 16px;
    height: 40px;
    border-radius: 8px !important;
}

.view-add-task-container .addtask-section input[type='text'] {
    width: 90% !important;
}

.view-add-task-container .task-section-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.view-add-task-container #task-block {
    height: 335px;
}

.view-add-task-container i {
    font-weight: 400;
}

.view-add-task-container input,
.view-add-task-container select,
.view-add-task-container textarea,
.view-add-task-container a,
.view-add-task-container button {
    border-radius: 8px !important;
}

.view-add-task-container .buttons-haha {
    display: flex;
    gap: 16px;
    margin-bottom: 0;
}

.view-add-task-container .buttons-haha a,
.view-add-task-container .completed-task,
.view-add-task-container .fileinput-button,
.view-add-task-container button {
    padding: 9px 16px !important;
    font-weight: 600;
    font-size: 14px !important;
}

.view-add-task-container .attachment-file-delete {
    height: 44px;
    display: flex;
    align-items: center;
    padding: 10px;
    justify-content: center;
}

.view-add-task-container .task-msg-section .task-section .row1 a.export-tasks-to-excel,
.view-add-task-container .completed-task,
.view-add-task-container .fileinput-button {
    border-radius: 8px !important;
    border: 1px solid #d4d4d4;
    background: rgba(96, 96, 96, 0) !important;
    color: #606060 !important;
}

.view-add-task-container .filters-cotainer {
    display: flex;
    gap: 20px;
}

.view-add-task-container .task-msg-section .task-section .row2 {
    padding: 0;
}

.view-add-task-container .delete-task {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.view-add-task-container .taskdone {
    background-color: #f4f4f4;
    border: none !important;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.view-add-task-container .taskdone:hover {
    background-color: #ebebeb;
}

.view-add-task-container .taskdetails {
    padding-top: 12px !important;
    padding-left: 0 !important;
}

.view-add-task-container .modal-open .datepicker {
    z-index: 10061 !important;
}

.view-add-task-container .st-row {
    display: flex;
}

.view-add-task-container .st-row .st-action,
.view-add-task-container .attachment-description {
    min-height: 44px;
    display: flex;
    align-items: center;
}

.view-add-task-container .st-row input[type='text'] {
    height: 34px !important;
    width: 98%;
}

.view-add-task-container .subtask-section .st-action {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    background-color: #ebebeb;
    width: 44px;
}

.view-add-task-container .delete-subtask {
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
    background-color: #ebebeb;
    color: #606060;
}

.view-add-task-container .subtask-section .st-action input[type='checkbox'] {
    margin-top: 0;
}

.view-add-task-container .task-msg-section .task-section .row2 .task-row:hover .taskdone {
    background-color: #ebebeb !important;
}

.view-add-task-container .attachment-container,
.view-add-task-container .delete-subtask {
    display: flex;
    align-items: center;
}

.view-add-task-container .attachment-container .attachment-description {
    margin-right: 0 !important;
    padding: 8px 12px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.view-add-task-container .st-row .delete-subtask-new-task,
.view-add-task-container .st-row .delete-subtask {
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-add-task-container .attachment-container .attachment-file-delete,
.view-add-task-container .st-row .delete-subtask-new-task,
.view-add-task-container .st-row .delete-subtask {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    background-color: #ebebeb !important;
}

.view-add-task-container .attachment-container .attachment-file-delete i,
.view-add-task-container .st-row .delete-subtask-new-task i,
.view-add-task-container .st-row .delete-subtask i {
    color: #999;
}

.view-add-task-container .addtask-section a.add-subtask,
.view-add-task-container a.add-subtask-new-task {
    padding: 10px;
}

.view-add-task-container .attachment-container .attachment-file-delete i:hover,
.view-add-task-container .st-row .delete-subtask-new-task i:hover,
.view-add-task-container .st-row .delete-subtask i:hover {
    padding: 10px;
    background-color: #ed4a4a;
    color: #fff;
    border-radius: 8px;
    margin-right: 4px;
}

.view-add-task-container .editable-input,
.view-add-task-container .editable-input input,
.view-add-task-container .editableform .control-group {
    width: 100% !important ;
}

.view-add-task-container .editable-container.editable-inline {
    width: 76% !important;
}

.view-add-task-container .modal-header-close {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.view-add-task-container .modal-body {
    max-height: 74vh;
    overflow-y: auto;
}

body.modal-open {
    overflow-y: hidden !important;
}

.datepicker.datepicker-dropdown {
    position: absolute !important;
}

#close-button-view-tasks-modal {
    font-size: 26px !important;
    color: #606060;
    display: contents;
}

.view-add-task-container #task-due-date {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.view-add-task-container #tasks-notes-label {
    position: absolute;
    margin-top: 0;
    top: 1px;
    left: 12px;
    font-size: 14px;
    line-height: 10px;
    color: #a9a9a9;
    background-color: #fff;
    width: 100%;
    padding-top: 8px;
}

.view-add-task-container .task-notes {
    padding-top: 20px;
}

.view-add-task-container #task-attachment {
    margin-bottom: 2px !important;
}

/* new admin dashboard tasks end */

/* highcharts upgrade css changes */

.gauge-absolute-container g.highcharts-axis-labels.highcharts-yaxis-labels.highcharts-radial-axis-labels {
    display: none;
}

/* green to blue update start */
.btn-primary {
    color: #F7F9FE !important;
    background-color: #3B71DE !important;
}
.btn-primary:hover {
    color: #F7F9FE !important;
    background-color: #2D56A9 !important;
}
.btn-primary:active, .btn-primary.active, .btn-primary:active:hover {
    color: #F7F9FE !important;
    background-color: #213F7C !important;
}
.btn-primary:focus, .btn-primary:active:focus, .btn-primary:active.focus {
    color: #F7F9FE !important;
    background-color: #213F7C !important;
}
.btn-primary[disabled] {
    color: #F7F9FE !important;
    background-color: #3B71DE !important;
}
.fgcolor-pci-green {
    color: #3B71DE !important;
}
.btn-success, .btn.green,
 .open > .dropdown-toggle.btn-success {
    color: #F6FBF8 !important;
    background-color: #219C5A !important;
}
.btn-success:hover, .btn.green:hover {
    color: #F6FBF8 !important;
    background-color: #197744 !important;
}
.btn-success:active, .btn-success.active, .btn-success:active:hover,
.btn.green:active, .btn.green.active,
.open > .dropdown-toggle.btn-success:hover {
    color: #F6FBF8 !important;
    background-color: #125732 !important;
}
.btn-success:focus, .btn-success:active:focus, .btn-success:active.focus,
.open > .dropdown-toggle.btn-success:focus,
.btn.green:focus, .btn.green.focus {
    color: #F6FBF8 !important;
    background-color: #125732 !important;
}
/* green to blue update end */