:root {
	--light_color: #f5f7fb;
	--main_color: #020066;
	--main_orange: #ff4500;
	--muted_text_color: #aaa;
	--lighter_color: #3f3f3f;
	--dark_color: #222;
}

.bg-main_color {
	background-color:var(--main_color);
}

.bg-main_color_white_font {
	background-color:var(--main_color);
	color:white;
}

@font-face {
	font-family: Main-Font;
	src: url(../../fonts/Roboto-Regular.ttf);
}

@font-face {
	font-family: Secondary-Font;
	src: url(../../fonts/Roboto-Regular.ttf);
}

body, html {
	/* height: 100%; */
  	margin: 0;
	background-color:black;
}

body, .form-control, .btn {
	font-family: Main-Font;
	font-size:0.8rem;
	
	/* background-color:#f5f7fb; */
}

.login {
	min-height: 100vh;
}
  
.bg-image {
	background-image:url('../../images/login_bg/login_bg1.jpg');
	background-size: cover;
	background-position: center;
}
  
.login-heading {
	font-weight: 300;
}

.image-text {
	background-color: rgba(0,0,0,0.5);
	
	padding:2rem;
	border-radius:12px;
	color:white;
}

@media only screen and (min-width: 1200px) {
	.image-text {
		display:block;
		height:500px;
		width:500px;
	}
}

@media only screen and (max-width: 1200px) {
	.image-text {
		display:none;
	}
}


/* .login-box {
	background-color: white;
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
	border-radius: 6px;
} */

/* .login-details {
	padding:3rem 3rem 6rem 3rem;
	width:100%;
} */

h6, h5, h4, h3 {
	font-weight: bold;
	font-family: Secondary-Font;
	color:var(--light_color);
}

h3 {
	font-size:1.4rem;
}

/* width */
::-webkit-scrollbar {
	width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
	background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #a0a4a7;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #c4c6cc;
}

.main-page {
	background-color: #121212;
	padding-top:1rem;
}

.flex-inline {
	display:inline-flex;
	width:100%;
}

.border-esrow {
	border:1px solid #ddd;
	border-left:5px solid #814796;
}

#footer {
	color:var(--muted_text_color);
	background-color:#111;
	padding:20px 0px;
}

#footer a {
	color:white;
}

#sidebar {
	display:inline-block;
	width:40px;
	background-color: #444;
	color:white;
}

#sidebar .links {
	text-align:center;
	font-size:1rem;
	height:40px;
	padding-top:10px;
}

#sidebar .links:hover {
	background-color:var(--muted_text_color);
	cursor:pointer;
	color:white;
}

#nav_bar {
	background-color: var(--main_color);
	border-bottom: 4px solid orangered;
}

#current_module {
	color:white;
	font-weight:bold;
	background-color: #060528;
	padding:0.5rem;
	text-align:center;
}

#nav_bar a {
	color:white;
	display:block;
	padding:1rem;
}

#nav_bar a:hover {
	text-decoration: none;
}

#nav_bar .inline-flex-row .links:hover {
	background-color: #c73600;
	cursor:pointer;
}

#nav_bar .inline-flex-row .active {
	background-color: orangered;
}

#subnav_bar {
	border-bottom:1px solid #ddd;
	background-color:white;
	height:100%;
}

#subnav_bar a {
	display:block;
	padding:0.75rem 1rem;
	background-color:white;
	border-bottom: 4px solid white;
}

#subnav_bar a:hover {
	text-decoration:none;
	background-color: #ccd8ec;
	border-bottom: 4px solid #2a27cc;
}

#subnav_bar .active {
	border-bottom: 4px solid var(--main_color);
}

#collapse-menu {
	color:white;
}

#collapse-menu .link {
	padding:1rem 0.75rem;
	font-size: 0.9rem;
	background-color: #040341;
}

#collapse-menu .link:hover {
	background-color: orangered;
	cursor: pointer;
}

#collapse-menu-links {
	display:none;
}

.menu-link {
	padding:0.25rem 1rem;
	border-radius:6px;
	margin-bottom:0.25rem;
	margin-right:0.25rem;
	border:2px solid #ddd;
	flex-grow: 1;
	text-align:center;
}

.menu-link:hover {
	background-color: var(--main_orange);
	border:2px solid var(--main_orange);
	color:white;
	cursor:pointer;
}

.menu-link.active {
	background-color: var(--main_orange);
	border:2px solid var(--main_orange);
	color:white;
}


.header-link {
	display:block;
	height:55px;
	padding:1rem;
	font-size:1rem;
	font-weight:bold;
}

.header-link:hover {
	background-color:#eee;
	text-decoration:none;
}

.header-link.active{
	background-color:#020044;
}

.table .thead-dark th {
	background-color:#020044 !important;
}

.btn-primary {
	border-color:var(--main_color);
	background-color:var(--main_color);
}

.badge-primary {
	background-color:var(--main_color);
}

.bg-navbar {
	border-color:var(--main_color);
	background-color:var(--main_color);
	color:white;
}

.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .show>.nav-link  {
	color:white;
	font-size:0.9rem;
}

.navbar-light .navbar-nav .nav-link:hover {
	color:#d5d5d5;
	font-size:0.9rem;
}

.navbar-nav .nav-item {
	padding:0rem 0.5rem;
}

.dropdown-menu .dropdown-item {
	font-size:0.9rem;
}

.dropdown-item:active {
	background-color: var(--main_color);
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
	background-color:var(--main_color);
}

.panel {
	overflow:auto;
	background-color: black;
	border-radius: 10px;
}

.panel-outline {
	border:1px solid #ddd;
}

.panel-hover {
	border-radius:6px;
	border:1px solid #ddd;
	background-color: white;
}

.panel-hover:hover {
	cursor:pointer;
}

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

.inline-flex-row {
	display:inline-flex;
	flex-wrap: wrap;
}

.flex-row {
	display:flex;
}

.space-between {
	justify-content: space-between;
}

.recipient-box {
	position:relative;
	padding:5px 30px 5px 10px;
	margin-right:5px;
	border:1px solid var(--muted_text_color);
	background-color:#efefef;
	margin-bottom:5px;
	font-size: 0.8rem;
	border-radius: 6px;
}

.remove-recipient {
	position:absolute;
	color:var(--muted_text_color);
	right:10px;
}

.remove-recipient:hover {
	cursor:pointer;
}

.task .overdue, .overdue {
	background-color: #e0394e;
}

.task .ongoing, .soon {
	background-color: #eda340;
}

.task .completed, .lots_days {
	background-color: #00b86b;
}

.deadline {
	font-size: 0.7rem;
	color: white;
	height: 18px;
	width: 100%;
	text-align: center;
	border-radius:20px;
}

.deadline:hover {
	cursor:pointer;
}

.edocs_completion {
	font-size: 0.7rem;
	color: white;
	height: 6px;
	width: 100%;
	text-align: center;
}

.days_left {
	display:none;
}

.lot-status {
	color: white;
	display: inline-block;
	padding: 0.25rem 0.5rem;
	text-align: center;
	min-width: 150px;
}

.fs-status {
	background-color:var(--muted_text_color);
	min-height:20px;
	border-right:1px solid white;
	text-align:center;
	color:white;
}

.sent {
	background-color: var(--muted_text_color);
}

.inventory-status {
	color: white;
	padding:0.25rem 0.75rem;
	display: inline-block;
}

.text-poor {
	color: #cf475d;
}

.text-unsatisfactory {
	color: #eda340;
}

.text-satisfactory {
	color: #c1c414;
}

.text-very_satisfactory {
	color: #99c731;
}

.text-outstanding {
	color: #17be79;
}

.bg-light_gray {
	background-color: #ddd;
}

.bg-poor, .risk-score-3 {
	background-color: #cf475d;
	color:#7e1627;
}

.bg-unsatisfactory, .risk-score-2 {
	background-color: #eda340;
	color:#7a4c0d;
}

.bg-satisfactory, .risk-score-1 {
	background-color: #e3e726;
	color:#888b0f;
}

.bg-very_satisfactory, .opp-score-1 {
	background-color: #99c731;
	color:#557017;
}

.bg-outstanding, .opp-score-3 {
	background-color: #17be79;
	color:#0d754a;
}

.opp-score-2 {
	background-color: #17aabe;
	color:#136874;
}
.risk-score-0, .opp-score-0 {
	background-color: #ddd;
	color:#555;
}

.risk-score, .opp-score {
	font-weight: bold;
	border:1px solid white;
}

.risk-score-0, .opp-score-0 {
	color:#555;
}


.working,
.submitted, .parcel-ongoing, .for-appraisal, .status-ongoing, .status-for_review, .status-for_approval, .malfunctioning, .for-bidding,
.pending, .for-approval, .technical .for-maintenance, .poor, .conflict, .plantilla-vacant, .vacant, .in-storage, .return, .enva, .obligated {
	background-color: #eda340;
}

.bid-bulletin {
	background-color: #b46d11;
}

.dots {
	background-color: #175abe;
}

.pending-text {
	color: #eda340;
}

.approved, .appraised, 
.parcel-approved, .status-complete, .status-approved_pp, .in-use, .bid-out, .fulfilled, .available, 
.approved, .supervisory, .operational, .very-good, .valid, .in-stock, .concluded, .committed, .complete, 
.calibrated, .going, .plantilla-active, .initial, .covered, .va, .completion, .paid, .fully-paid {
	background-color: #0a8a54;
}

.approved-text, .complete-text {
	color: #17be79;
}

.for-prebidding, .parcel-complete, .managerial, .working-condition, .good, .confirmed, .ready, .ongoing, .plantilla-reassigned, .transfer, .borrowed, .ecc, .partially-paid {
	background-color: #17aabe;
}

.technical {
	background-color: #777;
}

.ongoing-text {
	color: #17aabe;
}

.ready_to_send, .returned, .for-preproc, .preprocurement, .submitted, .acceptable, .for-approval, .cnc, .ready-for-payment {
	background-color: #99c731;
}

.requires_action,
.parcel-not_started,
.rejected,
.submitted-for-appraisal,
.status-not_started,
.status-not_yet_started, 
.unuseable,
.lost,
.for-scheduling,
.unavailable, .not-submitted,
.for-repair,
.expired,
.out-of-stock,
.cancelled,
.suspended,
.needs-calibration,
.draft,
.not-going,
.plantilla-resigned,
.surrendered,
.surrender,
.invalid,
.not-covered,
.nva,
.for-expropriation {
	background-color: #cf475d;
}

.zero-value {
	border:1px solid #cf475d;
}

.grey {
	background-color: #aaa;
}

.original {
	background-color: #020066;
}

.suspended-text {
	color: #cf475d;
}

.unknown {
	background-color: var(--muted_text_color);
}

.filed {
	background-color: #333;
}

.not-applicable {
	color:#ccc;
	font-style: italic;
}

.released, .for-advertisement, .advertisement {
	background-color: #4a39b3;
}

.transaction-status {
	font-size: 0.7rem;
	color:white;
	padding:5px 10px;
	text-align:center;
}

.transaction {
	border:1px solid #ddd;
	background-color:white;
	border-radius:6px;
}

.transaction:hover {
	/* box-shadow: 0px 0px 7px rgba(50, 50, 50, 0.2); */
	cursor: pointer;
	border: 1px solid var(--muted_text_color);
}

.trans_actions {
	display:none;
}

.urgent {
	font-size: 0.7rem;
	text-align:center;
	color:white;
	background-color:#e41a1a;
	padding:5px 10px;
	width:100px;
}

.normal {
	font-size: 0.7rem;
	text-align:center;
	color:white;
	background-color:#2d5aac;
	padding:5px 10px;
	width:100px;
}

.milestone {
	border:1px solid #ddd;
	margin:2px;
	padding:5px 20px;
	border-radius:4px;
}

#calendar, .cal-row {
	width:100%;
}

#calendar .cal-row .cal-cell {
	width:14.2857142857%;
	padding:5px 20px;
}

#calendar .cal-row .cal-days-first {
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
}

#calendar .cal-row .cal-days-others {
	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
}

#calendar .cal-row .cal-days {
	text-align:center;
}

#calendar .cal-row .cal-dates {
	text-align:right;
	min-height:100px;
}

#calendar .cal-row .cal-offset {
	min-height:100px;
	background-color: #efefef;
	color:var(--muted_text_color);
}

#TransForPrinting {
	overflow:auto;
	max-height:400px;
}

.parcel-plan .status {
	padding: 0.25rem 1rem;
	border-radius: 20px;
	border: 1px solid #ddd;
}

.parcel-plan .status i {
	color: #ddd;
}

.parcel-plan .done {
	background-color: #17be79;
	border: 1px solid #17be79;
	color: white;
}

.parcel-plan .done i {
	color: white;
}

.lots {
	padding: 0.5rem;
	border-bottom: 1px solid #ddd;
}

/* OVERRIDES */

.form-hide {
	display:none;
}

a {
	color: #b7b7b7;
}


/* The Modal (background) */
.notifModal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
}

.class_1 { background-color: #264653; }
.class_2 { background-color: #2A9D8F; }
.class_3 { background-color: #E9C46A; }
.class_4 { background-color: #F4A261; }

/* Modal Content/Box */
.notif-content {
	background-color: #fefefe;
	position:absolute;
	top:60px;
	right:80px;
	padding: 20px;
	border: 1px solid #ddd;
	width: 400px; /* Could be more or less, depending on screen size */
	z-index:1;
	display:none;
	max-height:600px;
}

.notif-unread {
	/* background-color: #f6fbff; */
	border-left: 5px solid var(--main_color);
}

.notif-details {
	border-bottom: 1px solid #ddd;
	padding:1rem 0.5rem;
	margin-bottom: 0.5rem;
}

#notifications {
	max-height:400px;
	overflow:auto;
}

.button-toolbar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background-color:var(--dark_color);
	text-align: center;
	vertical-align: middle;
}

.button-toolbar:hover {
	background-color: var(--lighter_color);
}

.button-toolbar:focus {
	outline: none;
}

.button-toolbar.active {
	/* color: white; */
	background-color: #ccc;
}

.button-toolbar-danger {
	background-color:#e41a1a;
	color:white;
}

.button-toolbar-danger:hover {
	background-color: #fc2727;
}

.button-toolbar:focus {
	outline: none;
}

.button-toolbar.active {
	/* color: white; */
	background-color: #ccc;
}


.button-mini {
	border: none;
	background-color:var(--dark_color);
	text-align: center;
	vertical-align: middle;
	filter:opacity(0.5);
}

.button-mini:hover {
	filter:opacity(1);
}

.button-mini:focus {
	outline: none;
}

#comments {
	max-height:600px;
	overflow: auto;
}

.comment-box {
	border:1px solid #ddd;
	border-radius:6px;
	background-color: #fafafa;
	padding:1rem;
	margin-bottom:0.6rem;
}

.comment-box.thread {
	border:1px solid #777;
}

.progress-bar {
	background-color: var(--main_color);
}

#allActivities {
	max-height: 400px;
	overflow: auto;
}

#totalAppraise {
	color: orangered;
}

.prop-count {
	background-color: #92929d;
	color: white;
	padding:0.25rem 0.5rem;
	border-radius: 6px;
}

.see-more {
	border:none;
	background-color: white;
	color: orangered;
	font-weight: bold;
}

.see-more:focus {
	outline:none;
}

.seeMore {
	border:none;
	background-color: white;
	color: orangered;
	font-weight: bold;
}

.seeMore:focus {
	outline:none;
}

.badge-unachieved {
	filter: grayscale(100%);
	opacity: 0.5;
}

.external-suggest:hover {
	cursor: pointer;
	background-color: #ddd;
}

.page-link {
	color: var(--main_color);
}

.page-item.active .page-link {
	background-color: var(--main_color);
    border-color: var(--main_color);
}

.status-tabs {
	padding: 0.25rem 0.75rem;
	border-radius: 6px;
	margin-right: 0.25rem;
	border:2px solid rgba(0,0,0,0);
}

.status-tabs:hover {
	text-decoration:none;
	border:2px solid orangered;
	color: orangered;
}

.status-tabs.active {
	color:white;
	background-color:orangered;
}

.card-control {
	display:none;
}

.circle-rating {
	border-radius: 50%;
	height: 50px;
	width: 50px;
	text-align: center;
	background-color: var(--main_color);
	color: white;
	font-size: 2rem;
	display: inline-block;
}

/* TASK CSS */
.task.toggleComplete {
	border:1px solid #888;
	width:16px;
	height:16px;
	border-radius:50%;
	font-size:0.7rem;
	text-align:center;
	color:white;
}

.task.toggleComplete:hover {
	background-color: var(--main_color);
	border:1px solid var(--main_color);
}

.task.complete {
	background-color: var(--main_color);
	border:1px solid var(--main_color);
}

.task.toggleImportant:hover {
	opacity:0.5;
}

.task.important {
	color:orangered;
}

.task:hover {
	cursor:pointer;
}

.task.task-details {
	flex-grow:2;
}

.btn-favorite {
	color:orangered;
	border:none;
	background-color: white;
	outline:none;
}

.btn-favorite:hover {
	cursor:pointer;
	filter:opacity(75%);
}

.btn-favorite:focus {
	outline:none;
}

.rbp, .cmpd {
	background-color:#055459;
	border-radius:5px;
	color:white;
}

.nep {
	background-color:#14c285;
	border-radius:5px;
	color:white;
}

.nep-color {
	color:#ff8a00;
}

.nepe {
	background-color:#fcbf54;
	border-radius:5px;
}

.nepe-color {
	color:#e71919;
}

.hgab, .custom {
	background-color:#ee6c3b;
	border-radius:5px;
	color:white;
}

.hgab-color {
	color:#019875;
}

.gaa {
	background-color:#ec0e47;
	border-radius:5px;
	color:white;
}

.gaa-color {
	color:#037fc4;
}

.pdm {
	background-color:#710461;
	border-radius:5px;
	color:white;
}

.modi {
	background-color:#022b7a;
	border-radius:5px;
	color:white;
}

.viewmode-item {
	border-bottom:1px solid #ddd;
	padding:0.25rem 1rem;
}

.viewmode-item:hover {
	cursor:pointer;
	background-color:#ddd;
}

#btnViewMode {
	padding:0.25rem 1rem;
	color:white;
	border-radius:20px;
}

#viewmodeModal {
	width:190px;
	position:absolute;
	top:40px; box-shadow:0px 3px 8px rgba(0,0,0,0.2);
	right:0px; background-color:white;
	border-radius:6px;
	border:1px solid #ddd;
	z-index:5;
	display:none;
}

.searhProjRow {
	border-bottom:1px solid #999;
}

.searhProjRow:hover {
	background-color:#ddd;
	cursor:pointer;
}

.scheduleProj {
	border:1px solid #ddd;
	border-radius:6px;
}

.pills {
	border-radius:20px;
	padding:0.15rem 0.5rem;
	font-size:0.7rem;
	width:fit-content;
}

.rowtier-1 {
	background-color: #17be79;
	color:white;
}

.rowtier-2 {
	background-color: #69b415;
	color:white;
}

.rowtier-3 {
	background-color: #e08e39;
	color:white;
}

.rowtier-4 {
	background-color: #e0394e;
	color:white;
}

.subtext {
	color:#777;
	font-size:0.7rem;
}

.spacer {
	height:200px;
}

.td-yellow {
	background-color: #ffd12e;
}

.tbl {
	width:100%;
}

.tbl th {
	background-color: #151515;
}

.tbl.tbl-col-2 {
	border:2px solid #151515;
}

.tbl.tbl-col-2 td:first-child{
	background-color: #151515;
	font-weight:bold;
}

.tbl td, .tbl th {
	border:1px solid #ddd;
	padding:0.75rem;
}

.tbl.first-col td:first-child {
	font-weight:bold;
	background-color:#151515;
}

.tbl .tbl-grey {
	background-color:#151515;
}

.tbl-hover tr:hover {
	background-color:#151515;
}

.tbl-responsive {
	overflow:auto;
}

.tbl-2col {
	width:100%;
}

.tbl-2col td {
	padding:0.5rem;
	border:1px solid white;
}

.tbl-2col td:first-child {
	font-weight:bold;
	background-color: #151515;
}

.tbl-component, .tbl-ded_component {
	font-size:0.7rem;
	width:100%;
}

.tbl-component td {
	padding:0.3rem;
}

.tbl-ded_component {
	padding:0.5rem;
}

.tbl-ded_component th {
	padding:0.5rem;
}

.tbl-vehicle {
	font-size:0.7rem;
	width:100%;
}

.tbl-vehicle td {
	padding:0.3rem;
}

.tbl-vehicle td:first-child {
	font-weight:bold;
	background-color:#efefef;
}

.tbl-mapboxInfo {
	width:100%;
}

.tbl-mapboxInfo td {
	padding:0.5rem;
	border:1px solid #ddd;
}

.tbl-mapboxInfo td:first-child {
	font-weight:bold;
	background-color:#ddd;
}


.infra_link {
	display:block;
	background-color: #ddd;
	border:1px solid #ccc;
	color:var(--muted_text_color);
	padding:0.5rem 0.75rem;
	border-radius:6px;
}

.infra_link.active {
	background-color: var(--main_color);
	color:white;
}

.infra_link:hover {
	text-decoration: none;
}

.sub-panel .header {
	font-size:1rem;
	background-color:var(--main_color);
	border-radius:6px 6px 0px 0px;
	color:white;
	border-bottom:3px solid orangered;
}

.modAmount {
	border:none;
	width:30px;
	color:white;
	background-color:orangered;
	border-radius:4px;
	font-size:1rem;
}

.modAmount:hover {
	filter:brightness(1.2);
}

.plate_num {
	width:fit-content;
	text-align:center;
	margin:auto;
	padding:0.25rem 0.75rem;
	border-radius:6px;
}

.green_plate {
	border:2px solid #000;
	color:#000;
}

.red_plate {
	border:2px solid red;
	color:red;
}

.status-box {
	width:fit-content;
	padding:0.25rem 0.75rem;
	font-size:0.7rem;
	text-align:center;
	margin:auto;
	color:white;
	border-radius:4px;
}

.status-permanent {
	background-color: var(--main_color);
}

.status-job-order {
	background-color: #aaa;
}

.my_cart {
	z-index:0;
	font-size:1rem;
	border:1px solid #ddd;
	bottom:30px;
	box-shadow:0px 0px 10px rgba(0,0,0,0.2);
	right:40px;
	border-radius:12px;
	position:fixed;
	padding:1rem;
	min-width:fit-content;
	height:56px;
	background-color:white;
}

.my_cart:hover {
	cursor:pointer;
	border:1px solid var(--muted_text_color);
}

.out-of-stock-card {
	display:none;
}

.star_rating:hover {
	cursor:pointer;
}

.toggle-priority:hover {
	cursor:pointer;
	filter:brightness(120%);
}


/* .task-week-calendar {
	width:14.29%;
	border:1px solid white;
	height:100%;
	border-radius:6px;
	background-color:#efefef;
} */

.task-week-calendar {
	width:14.29%;
	border-right:1px solid #ddd;;
	height:100%;
}

/* .task-week-calendar:hover {
	cursor:pointer;
	filter:brightness(0.9);
} */

.task-week-calendar.current_day {
	background-color:#dfdfdf;
	color:white;
}

.task-week-calendar.sunday {
	background-color:#ffcbcb;
}

.toggleStar:hover {
	filter: brightness(1.5);
	cursor: pointer;
}

.task-bar {
	border:1px solid rgb(168, 168, 168);
	background-color: rgba(168, 168, 168, 0.5);
	overflow: auto;
}

.task-bar:hover {
	cursor:pointer;
}

.task-bar-suspended {
	border:1px solid rgb(207, 71, 93);
	background-color: rgba(207, 71, 93, 0.5);
}

.task-bar-ongoing {
	border:1px solid rgb(23, 170, 190);
	background-color: rgba(23, 170, 190, 0.5);
}

.task-bar-complete {
	border:1px solid rgb(23, 190, 121);
	background-color: rgba(23, 190, 121, 0.5);
}

.task-bar-pending {
	border:1px solid rgb(237, 163, 64);
	background-color: rgba(237, 163, 64, 0.5);
}

.task-bar-meeting {
	border:1px solid rgb(190, 123, 207);
	background-color: rgba(190, 123, 207, 0.5);
}

.task-bar-edocs {
	border:1px solid rgb(128, 19, 19);
	background-color: rgba(128, 19, 19, 0.5);
}

.btn-complexity:hover {
	cursor:pointer;
}

.searchBar {
	width:100%;
	padding: 10px 14px;
	border:1px solid #ddd;
	box-sizing: border-box;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}

.searchBar-icon {
	padding-top:10px;
	width:60px;
	border:1px solid #ddd;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}

.searchBar:focus {
	outline:none;
	border:1px solid var(--muted_text_color);
}

.search-result {
	padding:1rem;
}

.search-result:hover {
	background-color: #efefef;
	cursor:pointer;
}

.search-results {
	/* display:none; */
	position:absolute;
	max-height:400px;
	background-color:white;
	width:100%;
	border:1px solid #ddd;
	box-shadow:0px 5px 5px rgba(0,0,0,0.2);
	top:50px;
	left:0;
	z-index:20;
	overflow:auto;
	display:none;
}


.btn-seemore {
	color: #1170cf;
	border: none;
	background: none;
}

.btn-seemore:focus {
	outline: none;
}

#drop-area {
	border: 2px dotted var(--muted_text_color);;
	min-height:200px;
	padding:1rem;
	border-radius:6px;
}

.select-hover:hover {
	background-color: #ddd;
	cursor:pointer;
}

.loading {
	background-color: rgba(100,100,100,0.1);
	position:absolute;
	top:0;
	width:100%;
	height:100%;
	z-index:1;
	display:none;
}

.panel-inset {
	border-radius:6px;
	border:1px solid #ddd;
}

.val-0 {
	background-color: #fff3cd;
}

.propositum-issue-card:hover {
	cursor:pointer;
}

.copymode {
	padding:0.5rem 0.75rem;
	border:1px solid var(--muted_text_color);
	color:var(--muted_text_color);
	border-radius:6px;
	text-align:center;
	display:inline-block;
}

.copymode:hover {
	cursor: pointer;
}

.copymode.active {
	background-color: var(--main_color);
	border:1px solid var(--main_color);
	color:#fff;
}

.color-picker {
	background-color: rgb(255, 115, 0);
	background-color:rgb(119, 56, 161)
}


.image-row {
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
	padding: 0 4px;
}

.image-column {
	-ms-flex: 25%; /* IE10 */
	flex: 25%;
	max-width: 25%;
	padding: 0 4px;
}	

.image-column img {
	margin-top: 8px;
	vertical-align: middle;
	width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
	.image-column {
		-ms-flex: 50%;
		flex: 50%;
		max-width: 50%;
	}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
	.image-column {
		-ms-flex: 100%;
		flex: 100%;
		max-width: 100%;
	}
}

.see-more-responsible {
	color:var(--main_color);
}

.see-more-responsible:hover {
	cursor: pointer;
}

.breadcrumbs {
	border:1px solid #ddd;
	background-color:white;
	border-radius:6px;
}


.trial {
	color: rgb(246, 150, 47);
	color: rgb(20, 60, 65);
	color: rgb(49, 130, 153);
}

.photo-thumbnail:hover {
	cursor: pointer;
}

.definition {
	background-color:var(--main_color);
	color:white;
	padding:1rem;
	border-radius:6px;
	margin-top:0.5rem;
	margin-bottom:0.5rem;
}

.definition .term {
	font-size:1.5rem;
	border-bottom:1px solid white;
	margin-bottom:0.5rem;
}

.clauses {
	font-size:1rem;
}

.subclause {
	color:orangered;
	font-size:1.2rem;
	margin:1rem 0;
	font-weight:bold;
}

.subsubclause {
	font-size:1.1rem;
	margin:1rem 0;
	font-weight:bold;
}

.remove {
	filter:opacity(50%);
	position:absolute;
	top:6px;
	right:10px;
}

.remove:hover {
	filter:opacity(100%);
	cursor: pointer;
}

.light-text {
	color:var(--muted_text_color);
}

.orange-text {
	color:var(--main_orange);
}

.property-category {
	border:1px solid #ddd;
	border-radius:6px;
	
}

.property-category:hover {
	border:1px solid var(--muted_text_color);
	cursor: pointer;
	box-shadow:0px 5px 5px rgba(0,0,0,0.2);
}

.uploadGCPPhoto:hover {
	cursor: pointer;
	filter: brightness(1.1);
}

.program-status.new {
	
	background-color: #0a8a54;
	
}

.designer-status, .procurement-status {
	font-size:0.7rem;
	border-radius: 4px;
	text-align:center;
	padding:0.2rem;
}

.designer-status.previous, .procurement-status.pending {
	background-color: #ddd;
	color:var(--muted_text_color);
}

.designer-status.current, .procurement-status.bidout {
	background-color: #0a8a54;
	color:white;
}

.procurement-status.preproc {
	background-color: #7fac19;;
	color:white;
}

.procurement-status.advertised {
	background-color: #be370e;    
	color:white;
}


.borehole-log {
	display: grid;
	grid-template-columns: auto auto;
	width:100%;
	border:2px solid #222;
}

.borehole-item {
	border:1px solid #ddd;
	border-bottom:2px solid #ddd;
	align-content: center;
}

.borehole-depth {
	border:1px solid #ddd;
	align-content: center;
}

.borehole-item.content {
	display:flex;
	align-items: flex-end;
}

.borehole-item.content div {
	width:100%;
}

.borehole-item.header {
	font-weight: bold;
	background-color: #222;
	color:white;
	height:100px;
	text-align:center;
}

.borehole-spt-dot {
	background-color:#ec0000;
	border:3px solid #fff;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
	width:16px;
	height:16px;
	border-radius: 50%;
	z-index: 1;
}

.borehole-water-table {
	/* position:absolute; 
	display:flex;
	align-items: flex-end;
	top:120px;
	width:100%;
	color:rgba(20, 63, 253, 0.3);
	border-bottom:4px solid rgba(20, 63, 253, 0.3);
	position:absolute; */
	background-color: rgb(30, 56, 170);
}

.borehole-spacer {
	height:20px;
	background-color: #efefef;
}

.badge-new {
	background-color: #17be79;
	color:white;
}

.badge-retained {
	background-color: #eda340;
	color:white;
}

/* .profile-pic:hover {
	border:3px solid #00b86b;
	cursor:pointer;
	transform: scale(1.5);
	box-shadow: 0, 0, 5px rgba(0,0,0,0.4);
} */

.competency-remove {
	position:absolute;
	top:5px;
	right:10px;
}

.competency-remove:hover {
	cursor:pointer;
}

.training_competency {
	position:relative;
	border-radius:6px;
	background-color:#020066;
	color:white;
	padding:5px 30px 5px 10px;
}

.table-numbering {
	text-align:right;
	color:#aaa;
}

.greyed-out {
	filter: grayscale(100%) opacity(20%);
}

.login_bg {
	height: 100%; 
	background-position: center;
	background-repeat: no-repeat;
	/* background-size: cover; */
}

.login_bg1 {
	background-image:url('../../images/login_bg/login_bg1.jpg');
}
.login_bg2 {
	background-image:url('../../images/login_bg/login_bg2.jpg');
}
.login_bg3 {
	background-image:url('../../images/login_bg/login_bg3.jpg');
}

.shortcut-toolbar {
	padding:0.5rem;
	border-radius:6px;
	border:1px solid #ddd;
	position:fixed; bottom:10px;
	left:10px;
	background-color:white;
	display:inline-flex;
	box-shadow:0px 0px 4px rgba(0,0,0,0.3);
}

.btn-shortcut {
	width:40px;
	height:40px;
	outline:none;
	border-radius:50%;
	border:none;
}

.btn-shortcut:hover {
	background-color: #ddd;
}

.btn-shortcut:active {
	outline:none;
}

.cursor-pointer:hover {
	cursor: pointer;
}

.custom-tabs {
	display: block;
	padding:0.5rem 1rem;
	margin-right:0.25rem;
	border:1px solid #ddd;
	border-radius:6px;
	text-decoration: none;
}

.custom-tabs.active {
	background-color: #020066;
	color:white;
}

.custom-tabs:hover {
	background-color: #020066;
	color:white;
	cursor:pointer;
}

.edocs-filter-tabs {
	display: block;
	padding:0.25rem 0.5rem;
	margin-right:0.25rem;
	margin-bottom:0.25rem;
	border:1px solid #ddd;
	border-radius:6px;
	text-decoration: none;
}

.edocs-filter-tabs.active {
	background-color: #ddd;
}

.edocs-filter-tabs:hover {
	background-color: #ddd;
	cursor: pointer;
}

.q-bg {
	background-color: #143c41;
	color:white;
}

.e-bg {
	background-color: #318299;
	color:white;
}

.t-bg {
	background-color: #f6962f;
	color:white;
}

.q-font {
	color: #143c41;
	font-weight:bold;
}

.e-font {
	color: #318299;
	font-weight:bold;
}

.t-font {
	color: #f6962f;
	font-weight:bold;
}

.scope_svg:hover {
	cursor:pointer;
	filter:brightness(1.2);
}

.clickable:hover {
	cursor:pointer;
	filter:brightness(1.3);
}

/* Mobile First Styles (Vertical) */
.arrow-steps {
	display: flex;
	flex-direction: column; /* Stacked vertically */
	list-style: none;
	padding: 0;
	gap: 4px;
}

.step {
	padding: 20px;
	background: #e0e0e0;
	color: #666;
	text-align: center;
	font-family: sans-serif;
	/* Arrow points downward on mobile */
	clip-path: polygon(
		0% 0%, 
		50% 10px, 
		100% 0%, 
		100% calc(100% - 10px), 
		50% 100%, 
		0% calc(100% - 10px)
	);
}

.step:first-child {
	clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), 50% 100%, 0% calc(100% - 10px));
}

/* Desktop Styles (Horizontal) */
@media (min-width: 768px) {
	.arrow-steps {
		flex-direction: row; /* Side by side */
		gap: 2px;
	}

	.step {
		flex: 1;
		padding: 15px 15px 15px 25px;
		/* Arrow points right on desktop */
		clip-path: polygon(
			0% 0%, 
			calc(100% - 10px) 0%, 
			100% 50%, 
			calc(100% - 10px) 100%, 
			0% 100%, 
			10px 50%
		);
	}

	.step:first-child {
		padding-left: 15px;
		clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%);
	}
}

/* Colors remain the same */
.step.completed { background-color: #0a8a54; color: white; }
.step.active { background-color: #ff3300; color: white; }

/* Images */
.img-white, .r4aid-logo {
	filter: brightness(0) invert(1);
}