::-webkit-scrollbar-thumb:hover {
    background: #0cbd18;
}

::-webkit-scrollbar-thumb {
    background: #bbb8b8;
    border-radius: 5px;
}
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-track {
    background: #f7f7f7;
}

.card-header h5 {
	cursor: pointer; 
}

/* .btn-re / .btn-re-a removed 2026-08-21 — both were the exact same rest-state
   colour as .btn-inverse (#37474f), only differing in hover (brand green
   #0cbd18 vs .btn-inverse's grey #4c626d). Every usage of both classes was
   renamed to .btn-inverse across both repos; the classes below no longer
   have any caller. */
.cursor {
	cursor: pointer; 
}

.user-verified {

}
.user-unverified {	
	background: #f1f1f1; 
}

.table-striped .project-row.drillbit-report {
    background-color: rgba(0, 0, 0, .23);
}

.project-row.delivered td:first-child {
	background: limegreen; 
}
.project-row.paused td:first-child {
	background: lightgrey; 
}
.project-row.rejected td:first-child {
	background: #808080; 
}
.project-row.matured td:first-child {
	background: #008577; 
}
.project-row.started td:first-child {
	background: #FF4500; 
}
.project-row.pending td:first-child {
	background: #FF8C00; 
}
.project-row.completed td:first-child {
	background: #FF0000; 
}
.project-row.accepted td:first-child {
	background: #87CEFA; 
}
.project-row.unassigned {
    background: #FEB8E1
}
.project-row.wave td:first-child { 
  transform: matrix(1, 0, 0, 1, 0, 0); 
  overflow: hidden; 
  transition: all 1s; 
} 
.project-row.wave td:first-child:before{ 
  content: ""; 
  position: absolute; 
  width: 320px; 
  height: 320px; 
  border-radius: 130px; 
  background-color: #0097e6; 
  top: 80px; 
  left: 50%; 
  transform: translate(-50%); 
  animation: wave 5s infinite linear; 
  transition: all 1s; 
} 
@keyframes wave { 
	0% { 
		transform: translate(-50%) rotate(-180deg);    
	} 
	100% { 
		transform: translate(-50%) rotate(360deg); 
	} 
} 

.project-row.is_paused td:first-child { 
  transform: matrix(1, 0, 0, 1, 0, 0); 
  overflow: hidden; 
} 
.project-row.is_paused td:first-child:before{ 
  content: ""; 
  position: absolute; 
  width: 80px;
  height: 150px;
  background-color: #ffb64d; 
  top: 100px; 
  transform: translate(-50%); 
}
.project-row.auto_check td:first-child {
  transform: matrix(1, 0, 0, 1, 0, 0);
  overflow: hidden;
}
.project-row.auto_check td:first-child:before{
  content: "";
  position: absolute;
  width: 80px;
  height: 150px;
  background-color: #000000;
  top: 100px;
  transform: translate(-50%);
}
.project-row.is_finished td:first-child { 
  transform: matrix(1, 0, 0, 1, 0, 0); 
  overflow: hidden; 
} 
.project-row.is_finished td:first-child:before{ 
  content: ""; 
  position: absolute; 
  width: 320px; 
  height: 320px; 
  background-color: #FF0000; 
  top: 100px; 
  transform: translate(-50%); 
} 
/* .project-row.hot td:first-child { */
	/* background: red;  */
/* } */
/* .project-row.advance-awaited td:first-child { */
	/* background: red;  */
/* } */
/* .project-row.cold td:first-child { */
	/* background: red;  */
/* } */
/* .project-row.mo-lead td:first-child { */
	/* background: red;  */
/* } */
.card-completed,
.card-advance-awaited{
    background: var(--orange) !important;
    color: var(--white) !important;
}
.card-rejected{
    background: #ff5370 !important;
    color: var(--white) !important;
}
.card-delivered{
    background: #2ed8b6 !important;
    color: var(--white) !important;
}
.card-started{
    background: var(--info) !important;
    color: var(--white) !important;
}
.card-refunded{
    background: var(--warning) !important;
    color: var(--primary) !important;
}


.text-danger {
	color: #ff5370; 
}
.text-success {
	color: #2ed8b6; 
}
.text-info {
	color: #00bcd4; 
}
.text-orange {
	color: #ff5c0e;
}

.rel-border-danger {
	border-left-color: #DC3548 !important;
}
.rel-border-success {
	border-left-color: #2ed8b6 !important;
}
.rel-border-info {
	border-left-color: #00bcd4 !important;
}
.rel-border-orange {
	border-left-color: #ff5c0e !important;
}
.rel-editable:hover .rel-editable-value::after {
    visibility: visible;
}
.rel-editable{
	display: flex;
    align-items: center;
}
.rel-editable-input {
	/* width: 100%;  */
}
.rel-editable-value::after {
    /* content: "\f044"; */
    /* color: blue; */
    /* padding-left: 5px; */
    /* font-size: 15px; */
    /* visibility: hidden; */
	/* font-family: Font Awesome\ 5 Free; */
}
.rel-editable-actions {
	display: none;
}
.rel-editable:hover {
    border-bottom: 1px solid #aaa;
    background: #fff;
}
.rel-editable:hover .rel-editable-actions {
	display: inline; 
	margin-right: 5px;
	margin-left: 3px;
	padding: 5px;
	border-radius: 50%;
	border: 1px solid;
	text-align: center;
	cursor : pointer;
}
.rel-editable:hover .rel-editable-value {
	cursor: pointer;
    position: relative;
    transition: 0.9s ease-in all;
    display: inline;
}
.rel-editable:hover .rel-editable-value::before {
    content: "\f044";
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    right: 0;
    bottom: 3px;
    background: red;
    color: #fff;
    text-align: center;
    padding: 0 3px 0 6px;
}
.rel-editable-edit, 
.rel-editable-delete {
	color: grey; 
	margin-right: 5px; 
}
.rel-editable-delete {	
	color: red;
}
.rel-editable-value {
    width: -webkit-fill-available;
    padding: 5px;
}
.rel-editable-textarea .rel-editable-value {
	padding: 5px;
	/*padding: 0 3px;*/
    border: 1px solid #e1e1e1;
    background: #f0f8ff;
    display: block;
    font-size: 12px;
	white-space: normal; 
}
.rel-editable.select_searchable .rel-editable-value {
    display: none;
}
.rel-editable.select2 .rel-editable-value {
    /*display: none;*/
    padding: 5px;
    /*padding: 0 3px;*/
    border: 1px solid #e1e1e1;
    background: #f0f8ff;
    display: block;
    font-size: 12px;
    white-space: normal;
}
.text-wrap{
	white-space: normal;
    word-break: normal;
}
.re-green{
	color: #0cbd18;
}
.rel-box{
	width: fit-content;
    padding: 5px 10px 5px 10px;
}
.rel-bg-dark{
	background-color: #263544;
}
.projects-like-datatable tfoot {
	display: table-header-group !important;
}
.table td, .table th {
    padding: .25rem .75rem;
}

div.dataTables_wrapper div.dataTables_processing {
    position: fixed;
    bottom: 40px;
    top: auto;
    left: calc(50% - 20px);
}
.blank_row
{
    height: 20px !important; /* overwrites any other rules */
    background-color: #FFFFFF;
}
.disabled-content {
    pointer-events: none !important;
    opacity: 0.3 !important;
    background: #efefef !important;
}
.mail_btn_actions {
    padding: 2px 5px;   
    border: 3px solid #d6d6d6;
}
.re-reporting-box{
    border: 2px solid #00bcd4;
    padding: 10px 15px;
    border-radius: 10px;
    width: 225px;
    margin: 1rem auto;
}

.fa-reporting {
    font-size: 47px;
    border: 2px solid #ccc;
    padding: 12px 15px;
    border-radius: 50px;
    color: #efefef;
    background: -webkit-linear-gradient(left, #00bcd4, #0cbc18a6);
}
.re-reporting-table th {
    border-bottom: none !important;
    border-top: none !important;
}
.re-reporting-table td {
    border-top: none !important;
}
.re-reporting-count {
    background: #0cbd18;
    padding: 1px 15px;
    border-radius: 25px;
    font-size: 30px;
    color: #fff;
    background: -webkit-linear-gradient(left, #00bcd4, #0cbc18a6);
}
.bg-border-red {
	border: 3px solid red;
	border-radius: 10px;
}
.d-contents{
	display:contents!important;
}
.select2-container{
	width: 100% !important;
}
.pub_list{
    width: auto;
    margin-right: 27px;
    margin-top: 2px;
}
.each_publishing_list {
	cursor: pointer; 
	background: #f1f1f1;
    padding: 5px 10px;
    vertical-align: middle;
	transition: ease-in all 0.2s;
}
.each_publishing_list:hover, .each_publishing_list.active {
	background: lightblue; 
}.min-charge-notice {
    font-weight: bold;
    font-size: 0.9em;
    background: red;
    color: #EFEFEF;
    padding: 0.5rem;
    margin: 0 0;
}
.w-inherit{
    width: inherit;
}
.rel-dt-common {
    width: 100% !important;
}

.dataTables_wrapper {
    width: 100% !important;
}

.dataTables_wrapper .dataTables_scroll {
    width: 100% !important;
}
/* Added to fix Bootstrap 3 and Datatable Boostrap 4 for fullwidth */
.dataTables_wrapper .col-xs-12 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

.rel-dt-filters{
    border-radius: 2px;
}
.dt-loading {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}
.box{
    border: 1px solid #ccc;
    padding: 15px;
}
.d-grid{
    display: grid;
}
td.re-pc-msg {
    background: lightblue;
    padding: 20px;
}
td.re-pc-msg a {
    font-weight: bold;
    color: black;
}.pac-container{
    z-index: 1051 !important;
}
.bg-rel{
    background: #0cbd18;
    color: #fff;
}
.bg-ijl{
    background: #1a7a98;
    color: #fff;
}
#devon-daterangepicker{
    background: #fff;
    cursor: pointer;
    padding: 7px 5px;
    border: 1px solid #ccc;
    width: 100%;
    font-size: 0.85em;
    color:#495057
}
td.dt-body-center.text-wrap.dtr-control {
    padding-left: 20px!important;
}
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
    top: 40px !important;
    left: 17px !important;
}
.modal_actions,
.btn-ajaxy{
    cursor: pointer;
}
b, strong {
    font-weight: bold;
}
.rel-status-area {
    background: #dc3545;
    padding: 10px;
    text-align: center;
    color: #ffffff;
}
.rel-editable-value1 {
    display: block;
    margin-bottom: 2px;
    padding: 0px 5px;
    border: 1px solid #28a745;
}
.inline .rel-editable {
  display: inline-flex;
}
.d-inherit{
    display: inherit !important;
}
.b-none {
    border: none!important;
}
/*
 * styles related to upload file field
 */
.upload-field{ border: 1px solid; padding:15px; width:100%; border-radius:6px; height:50px; }
.upload-icon-x{ position:absolute; left:30px; top:45px; font-size:larger; }
.input-field{ width:100%; cursor:pointer; }
.upload-field>input { opacity:0; position:relative; z-index:999; cursor: pointer; padding:15px 9px; top: -15px; left:2px; }
.upload-text{ position:absolute; left:62px; top:43px; color:#9ea0a4; }

.header-navbar .navbar-wrapper .navbar-container .nav-left li, .header-navbar .navbar-wrapper .navbar-container .nav-right li{
    padding: 0 10px !important;
}
.swal-lg{
    width: 720px !important;
}
ul.nav-right li.user-profile div.dropdown ul.profile-notification li {
    padding: 10px 10px !important;
}
/** replicate from card-block for button in card-header : Start */
.dropdown-menu a.dropdown-item:hover{
    color: #fff!important;
}
.card .card-header .dropdown-menu{
    background-color: #fff;
    padding: 0;
}
.card .card-header .dropdown-menu > a {
    padding: 10px 16px;
    line-height: 1.429;
}
.card .card-header a.dropdown-item {
    margin-bottom: 0;
    font-size: 14px;
    -webkit-transition: .25s;
  transition: .25s;
}
/** replicate from card-block for button in card-header : End */
svg#line_loader {
    position: relative; float: left; clear: none; display: block;
    width: 100%; height: 8px; margin: 0; padding: 0;
    stroke: rgb(40 167 69);

    stroke-width: 10; stroke-linecap: round;

    stroke-dasharray: 100;
    stroke-dashoffset: 0;

    animation: dash 1s linear forwards infinite;
}
span.rel-editable-value.no-value {
    font-size: 12px;
    color: red;
    font-weight: 600;
}

/** Added temporarily until code editor fixed */
.code {
    font-family: Consolas,"courier new";
    color: crimson;
    background-color: #f1f1f1;
    padding: 2px;
    font-size: 105%;
}
.available {
    font-weight: 600;
}
.grid-projects:after {
    content: '';
    display: block;
    clear: both;
}

/**
Styles for widget.css override
 */
.st-cir-card .ct-series-b .ct-slice-donut {
    stroke: #d6d6d6
}
.st-cir-card.card-plag-ok .ct-series-a path {
    stroke: green;
}
.st-cir-card.card-plag-warning .ct-series-a path {
    stroke: orange;
}
.st-cir-card.card-plag-danger .ct-series-a path {
    stroke: red;
}

/* hourglass animation css */
@keyframes top-clip { 0%{} 50%{transform: translateY(21px); } 100%{transform: translateY(21px); } }
@keyframes bottom-sand-path { 0%{} 50%{transform: translateY(0); } 100%{transform: translateY(0); } }
@keyframes bottom-sand-g { 0%{} 85%{transform: translateY(0);} 100%{transform: translateY(-9px); } }
@keyframes hourglass-rotation { 50%{transform: rotateZ(0);} 100%{transform: rotateZ(180deg);} }
#top-sand #top-clip-path rect,
#bottom-sand path,
#bottom-sand g,
svg.hourglass { animation-duration: 5s; animation-delay: 1s; animation-iteration-count: infinite; }
#top-sand #top-clip-path rect { animation-name: top-clip; }
#bottom-sand path { transform: translateY(21px); animation-name: bottom-sand-path; }
#bottom-sand g { animation-name: bottom-sand-g; }
svg.hourglass { animation-name: hourglass-rotation; }

span.price_discounted {
    margin-left: 0.5rem;
    color: green;
    font-weight: 700;
}
span.price_or {
    text-decoration: line-through;
    color: red;
    font-size: 20px;
}
.rel-close-icon {
    position: absolute;
    right: 19px;
    top: 18px;
    cursor: pointer;
}
.filter-has-value {
    border: 1px solid #ffb6c1;
    background: #ffb6c1;
    color: black;
}
/* Clear Icon for filters in col-md */
i.fa-clear-filter {
    position: absolute;
    right: 17px;
    top: 10px;
    display: none;
    cursor: pointer;
}
/* Clear Icon for Select filters */
i.fa-clear-filter.fa-clear-filter-for-select {
    right: 36px;
    top: 12px;
    z-index: 1;
}
/* Clear Icon for filters in input-group */
.input-group i.fa-clear-filter {
    right: 2px;
}
.display-option-details {
    border-bottom: 1px solid #efefef;
}
.search-clear{
    position: absolute;
    top: 62px;
    right: 15px;
    cursor: pointer;
    color: red;
}

.swal-otp label.swal2-input-label {
    line-height: 1.3em;
    margin: 0 1rem;
    text-align: center;
}

.swal-otp input#swal2-input {
    padding: 0;
    margin: 10px auto;
    max-width: 120px !important;
    height: 40px;
}

/** Hide Arrows on Number Input Field **/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

@media only screen and (max-width: 575px) {
    .card-block-mobile-hidden{
        display: none;
    }
    .d-xs-block{
        display:block!important
    }
}
@media only screen and (max-width: 768px) {
    .card-block-mobile-hidden{
        display: none;
    }
}
#search-menu{
    border: 1px solid #1d262e;
    background-color: #1d262e;
}
.icon-card{
    background-color: white;
    margin-bottom: 15px;
    padding: 0.6rem 1rem;
    font-size: 25px;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 0 5px 0 rgb(43 43 43 / 10%), 0 11px 6px -7px rgb(43 43 43 / 10%);
}
/** Styles Modal Right open **/
.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 1000px;
    max-width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}
.modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
}
.modal.right .modal-body {
    padding: 15px 15px 80px;
}
.modal.right.fade .modal-dialog {
    right: 0;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}
.modal.right.fade.in .modal-dialog {
    right: 0;
}
/* Effect: Slide from the right */
.right-in .modal-content {
    -webkit-transform: translateX(20%);
    -moz-transform: translateX(20%);
    -ms-transform: translateX(20%);
    transform: translateX(20%);
    opacity: 0;
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.show.right-in .modal-content {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
}
/*********************************/
/** Skeleton Animation Screen **/
.skeleton-screen {
    padding: 10px;
    background-color: #fff;
    width: 100%;
}
.skeleton-bg-masker {
    background-color: #fff;
    position: absolute;
}
.skeleton-divide-left {
    top: 0;
    left: 25%;
    height: 100%;
    width: 5%;
}
@keyframes skeleton-shimmer {
    0% {
        background-position: -800px 0
    }
    100% {
        background-position: 800px 0
    }
}
.skeleton-animation {
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: skeleton-shimmer;
    animation-timing-function: linear;
    background-color: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
    background-size: 800px 104px;
    height: 70px;
    position: relative;
}
/********************************************/
/********Datatable related***********/
.dataTables_length label{
    margin-bottom: unset!important;
}
div.dataTables_wrapper div.dataTables_info{
    padding-top:unset!important;
}
.rel-expose{
    position: relative;
}
#rel-overlay{
    background:rgba(0,0,0,0.5);
    display:none;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}
.rel-icon-dark b.fad.fa-person-through-window::after,
.rel-icon-dark b.fad.fa-user-tag::after {
    color: black !important;
}
a#btn-edit-project:hover{
    color: black!important;
}

.accordion .card-header:after {
    font-family: 'FontAwesome';
    content: "\f139";
    float: right;
    font-size: 2em;
    position: absolute;
    right: 20px;
    top: 15px;
}
.accordion .card-header.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\f13a";
}
.col-auto.icon-value {
    width: 100px;
    padding-right: 0;
}

.pc-features-list {

}
.pc-features-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
}
.pc-features-list li:before{
    content: "\f058";
    font-family: "FontAwesome";
    left: 0;
    position: absolute;
    top: 0;
    color: #2ed8b6;
    font-size: 16px;
}
.pc-features-list li.li-icon-info:before {
    content: "\f05a";
    color: #4680ff;
}
.pc-features-list li.li-icon-times:before {
    content: "\f057";
    color: #dc3545;
}
.pc-features-list li i {
    display: none;
}
i#rel-eye {
    position: absolute;
    top: 16px;
    right: 3px;
    cursor: pointer;
}
.login-as-user.login-as-user-top {
     width: 25% !important;
     bottom: 0 !important;
     top: unset !important;
 }
.login-as-user.login-as-user-bottom {
    width: 18% !important;
    bottom: 0 !important;
    top: unset !important;
    right: 0 !important;
    left: unset;
}

.form-check-date {
    padding: 5px 30px;
    margin: 5px 10px;
    border: 1px solid #ccc;
    background: #333;
    color: #fff;
}
.form-check-date.disabled {
    background: #bbb;
}
.form-check-date .form-check-input:disabled~.form-check-label {
    color: #333;
}

.copy-container {
    display: inline-flex;
    align-items: center;
    position: relative;
    /* No pointer on the text — only the icon copies, and only it should
       promise a click (owner, 2026-08-15). The icon carries .cursor itself. */
    cursor: default;
    padding: 0px;
    border-radius: 5px;
}

.copy-icon {
    margin-left: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}

.copy-container:hover .copy-icon {
    opacity: 1;
}


/* ============================================================================
   THE PANEL'S TYPEFACE — owner decision, 2026-09-02
   ============================================================================
   AdminDek ships `font-family: open sans` on body and Quicksand on a handful of
   headings. Every screen of the customer-facing redesign is drawn in IBM Plex
   Sans at 14px/1.55 with Quicksand headings, and the difference is not subtle:
   Open Sans has a larger x-height and wider letterforms, so the same markup
   reads heavier and more crowded than the design it was built from. The owner
   reviewed both side by side and asked for Plex across the template.

   It lives HERE, not in css/style.css, for the reason this file exists at all:
   style.css is compiled into minified/styles.min.css by webpack, so a change
   there does not reach a browser until someone runs the build. This file is
   enqueued directly, after the bundle, on every dashboard page.

   The families come from the `rel-typeface` handle registered in
   functions-assets.php. If that request ever fails, every rule below falls back
   to the system stack rather than to Open Sans — deliberate: a consistent
   system font is better than half a page in each.
   ========================================================================== */

body,
.pcoded-main-container,
.page-header,
.card,
.card-header h5,
.card-block,
input, select, textarea, button, .btn,
.dataTables_wrapper,
.modal-content,
.dropdown-menu,
.nav-link,
.pcoded-navbar {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

/* Headings keep Quicksand — AdminDek already used it in places, and it is the
   display face the design pairs with Plex. Weight 700 rather than the template's
   inconsistent 500/600. */
h1, h2, h3, h4, h5, h6,
.card-header h5,
.page-header h5,
.pcoded-navbar .pcoded-inner-navbar > li > a {
    font-family: 'Quicksand', ui-rounded, system-ui, sans-serif;
}

/* Body copy at the design's measure. AdminDek's 14px with a 1.4-ish leading is
   what makes dense cards feel airless. */
body {
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Figures, ids, timestamps and money line up when the digits are monospaced —
   the design uses Plex Mono for exactly these. */
.re-pd-pid,
.re-pd-kbtag,
.re-pd-deliver-k,
code, kbd, pre, samp {
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}