@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/**   Custom properties & general styling   *********************************************/
/****************************************************************************************/

:root {
	--bpm-modal-body-color: #f8f9fa;
	
	--clr-accent-darker: #146663; /* hsl(185, 95%, 32%); */
	--clr-accent-dark: #1b8885; /* hsl(185, 95%, 37%); */
	--clr-accent: #20a39e; /* hsl(205, 73%, 28%); */
	--clr-accent-light: #28ccc7; /* hsl(184, 95%, 45%); */
	--clr-accent-lighter: #44dad5; /* hsl(185, 83%, 65%); */
	--clr-accent-faded: #66e1dd; /* hsl(187, 66%, 92%); */ 
	
	--clr-bluegray-95: hsl(209, 61%, 16%);
	--clr-bluegray-85: hsl(211, 39%, 23%);
	--clr-bluegray-75: hsl(209, 34%, 30%);
	--clr-bluegray-65: hsl(209, 28%, 39%);
	--clr-bluegray-55: hsl(210, 22%, 49%);
	--clr-bluegray-45: hsl(209, 23%, 60%);
	--clr-bluegray-35: hsl(211, 27%, 70%);
	--clr-bluegray-25: hsl(210, 31%, 80%);
	--clr-bluegray-20: hsl(211, 32%, 85%); /* extra */
	--clr-bluegray-15: hsl(212, 33%, 89%);
	--clr-bluegray-05: hsl(210, 36%, 96%);
	
	--clr-warmgray-95: hsl(42, 15%, 13%);
	--clr-warmgray-85: hsl(40, 13%, 23%);
	--clr-warmgray-75: hsl(37, 11%, 28%);
	--clr-warmgray-65: hsl(41, 9%, 35%);
	--clr-warmgray-55: hsl(41, 8%, 48%);
	--clr-warmgray-45: hsl(41, 8%, 61%);
	--clr-warmgray-35: hsl(39, 11%, 69%);
	--clr-warmgray-25: hsl(40, 15%, 80%);
	--clr-warmgray-15: hsl(43, 13%, 90%);
	--clr-warmgray-05: hsl(40, 23%, 97%);
	
	--clr-cyan-95: hsl(184, 91%, 17%);
	--clr-cyan-85: hsl(185, 84%, 25%);
	--clr-cyan-75: hsl(185, 81%, 29%);
	--clr-cyan-65: hsl(184, 77%, 34%);
	--clr-cyan-55: hsl(185, 62%, 45%);
	--clr-cyan-45: hsl(185, 57%, 50%);
	--clr-cyan-35: hsl(184, 65%, 59%);
	--clr-cyan-25: hsl(184, 80%, 74%);
	--clr-cyan-15: hsl(185, 94%, 87%);
	--clr-cyan-05: hsl(186, 100%, 94%);
	
	--clr-blue-85: hsl(203, 87%, 34%);
	--clr-blue-65: hsl(201, 79%, 46%);
	--clr-blue-45: hsl(197, 92%, 61%);
	--clr-blue-25: hsl(195, 97%, 75%);
	--clr-blue-05: hsl(195, 100%, 95%);
	
	--clr-green-85: hsl(168, 80%, 23%);
	--clr-green-65: hsl(164, 71%, 34%);
	--clr-green-45: hsl(160, 51%, 49%);
	--clr-green-25: hsl(156, 73%, 74%);
	--clr-green-05: hsl(152, 68%, 96%);
	
	--clr-indigo-85: hsl(232, 86%, 32%);
	--clr-indigo-65: hsl(228, 74%, 43%);
	--clr-indigo-45: hsl(224, 69%, 54%);
	--clr-indigo-25: hsl(219, 95%, 76%);
	--clr-indigo-05: hsl(216, 100%, 93%);
	
	--clr-orange-85: hsl(22, 80%, 26%);
	--clr-orange-65: hsl(22, 74%, 38%);
	--clr-orange-45: hsl(22, 78%, 55%);
	--clr-orange-25: hsl(22, 92%, 76%);
	--clr-orange-05: hsl(22, 100%, 95%);
	
	--clr-pink-85: hsl(331, 74%, 27%);
	--clr-pink-65: hsl(330, 68%, 40%);
	--clr-pink-45: hsl(330, 66%, 57%);
	--clr-pink-25: hsl(330, 77%, 76%);
	--clr-pink-05: hsl(329, 100%, 94%);
	
	--clr-yellow-85: hsl(15, 86%, 30%);
	--clr-yellow-65: hsl(29, 80%, 44%);
	--clr-yellow-45: hsl(42, 87%, 55%);
	--clr-yellow-25: hsl(48, 94%, 68%);
	--clr-yellow-05: hsl(48, 100%, 88%);

	--shadow:   0 1px 1px rgba(0, 0, 0, .05),
		0 2px 2px rgba(0, 0, 0, .05),
		0 4px 4px rgba(0, 0, 0, .05),
		0 8px 6px rgba(0, 0, 0, .05);
	--shadow-lg:   0 4px 4px rgba(0, 0, 0, .05),
		0 8px 8px rgba(0, 0, 0, .05),
		0 14px 14px rgba(0, 0, 0, .05),
		0 24px 24px rgba(0, 0, 0, .05);
	--shadow-upturned:	0 -1px 1px rgba(0, 0, 0, .05),
		0 -2px 2px rgba(0, 0, 0, .05),
		0 -4px 4px rgba(0, 0, 0, .05),
		0 -8px 6px rgba(0, 0, 0, .05);

	--step-xs: 2px;
	--step-sm: 4px;
	--step-md: 8px;
	--step-lg: 14px;
	--step-xl: 24px;

	--font-size-xs: 8px;
	--font-size-sm: 12px;
	--font-size-md: 14px;
	--font-size-lg: 18px;
	--font-size-xl: 24px;

	--swoosh: all .2s ease-in-out;
}

body,
html {
	font-family: Inter, Poppins, Roboto, Helvetica, sans-serif;
}

body {
	padding-top: 60px;
}

.text-bluegray-05 {
	color: var(--clr-bluegray-05)!important;
}

.text-bluegray-15 {
	color: var(--clr-bluegray-15)!important;
}

.text-bluegray-25 {
	color: var(--clr-bluegray-25)!important;
}

.text-bluegray-35 {
	color: var(--clr-bluegray-35)!important;
}

.text-bluegray-45 {
	color: var(--clr-bluegray-45)!important;
}

.text-bluegray-55 {
	color: var(--clr-bluegray-55)!important;
}

.text-bluegray-65 {
	color: var(--clr-bluegray-65)!important;
}

.text-bluegray-75 {
	color: var(--clr-bluegray-75)!important;
}

.text-bluegray-85 {
	color: var(--clr-bluegray-85)!important;
}

.text-bluegray-95 {
	color: var(--clr-bluegray-95)!important;
}

.text-primary {
	color: var(--clr-cyan-55)!important;
}

.text-danger {
	color: var(--clr-pink-45)!important;
}

.text-success {
	color: var(--clr-green-45)!important;
}

.bg-bluegray {
	background-color: #e7eef3;
}

.bg-weekend {
	background-color: hsl(45 100% 93% / 1) !important;
}

.bg-today {
	background-color: hsl(212 100% 92% / 1) !important;
}

.bg-vacation-day {
	background-color: #ffc107a1 !important;
}

.bg-holiday {
	background-color: hsl(188 70% 86% / 1) !important;
}

* { box-sizing: border-box; }

::selection {
	color: white;
	background: var(--clr-accent);
}

.px-custom {
	margin-left: -4px;
	margin-right: -4px;
	padding-left: 4px;
	padding-right: 4px;
}

.btn, .btn-sm, .btn-lg {
	border-radius: var(--step-md);
	/* box-shadow: var(--shadow); */
	box-shadow: none;
}

.btn-zoom {
	transition: var(--swoosh);
}

.btn-zoom:hover {
	transform: scale(1.03);
}

.btn-w-md {
	width: 150px;
}

.btn-masked {
	background-color: transparent;
	border-color: transparent;
	color: var(--clr-accent);
	transform: translateX(12px);
	transition: var(--swoosh);
}

.btn-masked:hover {
	background-color: rgba(0, 0, 0, .05);
	border-color: transparent;
	color: var(--clr-accent-dark);
	transform: translateX(0px);
}

.table-arggo .btn-masked {
	transform: unset;
	transition: background-color .2s ease-in-out;
}

.table-arggo .btn-masked:hover {
	transform: unset;
}

.btn-light {
	background-color: hsl(from var(--clr-bluegray-25) h s l / .1);
	border: none;
}

.btn-light:hover {
	background-color: hsl(from var(--clr-bluegray-25) h s l / .25);
	border: none;
}

.btn-faded-alt {
	background-color: var(--clr-bluegray-25);
	border-color: transparent;
	color: var(--clr-bluegray-65);
}

.btn-faded-alt:hover {
	background-color: var(--clr-bluegray-35);
	border-color: transparent;
	color: var(--clr-bluegray-85);
}

.btn-faded {
	background-color: var(--clr-accent-faded);
	border-color: var(--clr-accent-faded);
	color: var(--clr-accent-darker);
	background-color: transparent;
	border-color: var(--clr-accent);
	color: var(--clr-accent-dark);
}

.btn-faded:hover {
	background-color: var(--clr-accent);
	border-color: var(--clr-accent);
	color: white;
	background-color: var(--clr-bluegray-25);
	border-color: transparent;
	color: var(--clr-accent-darker);
}

.btn-transparent {
	background-color: transparent;
	border-color: transparent;
	color: var(--clr-accent-dark);
}

.btn-transparent:hover {
	background-color: rgba(0, 0, 0, .05);
	border-color: transparent;
	color: var(--clr-accent-darker);
}

.btn-reject,
.btn-approve {
	background-color: transparent;
	border-color: transparent;
	color: var(--clr-bluegray-55);
}

.btn-reject:hover {
	background-color: rgba(0, 0, 0, .05);
	background-color: var(--clr-pink-05);
	border-color: transparent;
	color: var(--clr-pink-65);
}

.btn-approve:hover {
	background-color: rgba(0, 0, 0, .05);
	background-color: var(--clr-accent-faded);
	border-color: transparent;
	color: var(--clr-accent-dark);
}

.subtle,
.subtle:active,
.subtle:focus {
	outline:0px !important;
	-webkit-appearance:none;
	box-shadow: none !important;
}

.stage {
	border-radius: 20px;
	font-size: smaller;
	font-weight: 400;
	margin-bottom: 0;
	padding: 4px 16px;
}

.stage.primary {
	background: var(--clr-indigo-05);
	color: var(--clr-indigo-45);
}

.stage.secondary {
	background: var(--clr-bluegray-05);
	color: var(--clr-bluegray-65);
}

.stage.warning {
	background: var(--clr-yellow-05);
	color: var(--clr-yellow-45);
}

.stage.danger {
	background: var(--clr-pink-05);
	color: var(--clr-pink-45);
}

.stage.success {
	background: var(--clr-green-05);
	color: var(--clr-green-45);
}

.stage-alt {
	background: white;
	border: 1px solid var(--clr-bluegray-25);
	border-radius: 20px;
	box-shadow: var(--shadow);
	font-size: smaller;
	font-weight: 400;
	margin-bottom: 0;
	padding: 4px 16px 4px 8px;
}

.stage-alt-bullet {
	border-radius: 4px;
	display: inline-block;
	height: 8px;
	margin-right: 16px;
	width: 8px;
}

.stage-alt.primary {
	color: var(--clr-indigo-45);
}

.stage-alt.primary .stage-alt-bullet {
	background: var(--clr-indigo-25);
}

.stage-alt.secondary {
	color: var(--clr-bluegray-65);
}

.stage-alt.secondary .stage-alt-bullet {
	background: var(--clr-bluegray-25);
}

.stage-alt.warning {
	color: var(--clr-yellow-45);
}

.stage-alt.warning .stage-alt-bullet {
	background: var(--clr-yellow-25);
}

.stage-alt.danger {
	color: var(--clr-pink-45);
}

.stage-alt.danger .stage-alt-bullet {
	background: var(--clr-pink-25);
}

.stage-alt.success {
	color: var(--clr-green-45);
}

.stage-alt.success .stage-alt-bullet {
	background: var(--clr-green-25);
}

.legend {
	color: var(--clr-bluegray-45);
	font-size: small;
	margin-bottom: 0;
}

.legend:focus,
.legend:hover {
	color: var(--clr-bluegray-45);
	text-decoration: none;
}

.legend-bullet {
	border-radius: 5px;
	display: inline-block;
	height: 10px;
	margin-left: 12px;
	margin-right: 4px;
	width: 10px;
}

.report-line-stage-bullet,
.order-list-stage-bullet {
	border-radius: 5px;
	display: inline-block;
	height: 10px;
	width: 10px;
}

.report-line-stage.primary,
.report-line-stage-bullet.primary,
.order-list-stage-bullet.primary,
.legend-bullet.primary {
	background-color: var(--clr-indigo-25);
}

.report-line-stage.secondary,
.report-line-stage-bullet.secondary,
.order-list-stage-bullet.secondary,
.legend-bullet.secondary {
	background-color: var(--clr-bluegray-25);
}

.report-line-stage.warning,
.report-line-stage-bullet.warning,
.order-list-stage-bullet.warning,
.legend-bullet.warning {
	background-color: var(--clr-yellow-05);
}

.report-line-stage.danger,
.report-line-stage-bullet.danger,
.order-list-stage-bullet.danger,
.legend-bullet.danger {
	background-color: var(--clr-pink-25);
}

.report-line-stage.success,
.report-line-stage-bullet.success,
.order-list-stage-bullet.success,
.legend-bullet.success {
	background-color: var(--clr-green-25);
}

.btn-bg-05 {
	background-color: var(--clr-bluegray-05);
	color: var(--clr-accent);
}

.btn-bg-05:hover {
	background-color: var(--clr-bluegray-15);
	color: var(--clr-accent-dark);
}

.btn-bg-35 {
	background-color: var(--clr-bluegray-35);
	color: white;
}

.btn-bg-35:hover {
	background-color: var(--clr-bluegray-45);
	color: white;
}

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
	color: #fff;
	background-color: var(--clr-cyan-55);
	border-color: var(--clr-cyan-55);
}

.btn-primary.focus, 
.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgb(20 145 153 / 50%);
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
	background-color: var(--clr-cyan-75);
	border-color: var(--clr-cyan-65);
}

.scale-75 {
	transform: scale(0.75);
}

.ghost {
	visibility: hidden;
}

.table-arggo tr:hover .ghost,
.ghost-row:hover .ghost {
	visibility: visible;
}

.control-p {
	color: var(--clr-bluegray-65);
	font-weight: 600;
	margin-bottom: 0;
}

.details {
	background-color: var(--clr-bluegray-05);
	color: var(--clr-bluegray-55);
	font-size: small;
	padding: 2px 4px;
	border-radius: var(--step-sm);
	margin-bottom: 0;
	display: table;
	font-weight: lighter;
}

.optional {
	color: var(--clr-bluegray-35);
}

.btn-decoy {
	cursor: not-allowed!important;
	opacity: .5;
}

.border-muted {
	border-color: var(--clr-bluegray-15)!important;
}

.fw-400 {
	font-weight: 400;
}

.fw-500 {
	font-weight: 500;
}

.fw-600 {
	font-weight: 600;
}

.tooltip.tooltip-lg .tooltip-inner {
	max-width: 350px;
}

.tooltip.tooltip-light .tooltip-inner {
	background-color: var(--clr-bluegray-75);
	border-radius: var(--step-md);
	/* box-shadow: var(--shadow); */
	box-shadow: none;	
	color: white;
	opacity: .95;
}

.tooltip.tooltip-light .arrow {
	display: none;
}

.link-muted {
	color: var(--clr-bluegray-35);
}

.link-muted:hover {
	color: var(--clr-bluegray-45);
}

.col-owner {
	align-items: center;
	display: flex;
}

.owner a {
	color: var(--clr-background-dark);
}

.owner:hover a {
	color: var(--clr-accent);
}

.owner-edit {
	align-items: center;
	display: flex;
}

.owner-select {
	border: 1px solid var(--clr-background);
	border-radius: 32px;
	box-shadow: var(--shadow);
	color: var(--clr-accent);
	font-size: smaller;
	outline: none;
	padding: 5px 12px;
}

.owner-select:focused, .owner-select:active {
	outline: 2px solid var(--clr-accent);
}

.cards-container .jumbotron-arggo>[class^="col-"] {
	display: flex;
}

.cards-container .jumbotron-arggo .control-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cards-container .tiny {
	border-radius: var(--step-md);
	margin-left: .5rem;
	transform: scale(0.75) translateY(-5px);
	width: 40px;
}

.system-menu .top-bar-brand {
	display: block;
}

.system-menu:hover .top-bar-brand {
	display: none;
}

.collapsed .truncate-collapsed {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}



/**   Overwriting system styles   *******************************************************/
/****************************************************************************************/

a {
	color: var(--clr-accent);
}

a:hover {
	color: var(--clr-accent-dark);
	text-decoration: none;
}

a.text-primary:focus, a.text-primary:hover {
	color: var(--clr-accent-dark)!important;
}

.navbar {
	min-height: 60px;
	box-shadow: none;
}

.navbar-light .navbar-nav .nav-link {
	border-radius: var(--step-md);
	color: var(--clr-accent-faded)!important;
	/* font-family: 'Open Sans', sans-serif; */
	font-weight: 400;
	transition: var(--swoosh);
  padding: 4px 12px;
	margin: 0;
}

.navbar .nav-item > .nav-link:hover {
	background-color: var(--clr-cyan-65);
	color: #fff;
}

.navbar-light .navbar-toggler {
	border-color: transparent;
	color: unset;
	padding: .05rem 0.1rem;
}

.navbar-light .navbar-toggler-icon {
	/* background: url("../resources/hamburger-menu-white.svg") center center / 20px no-repeat; */
	background: none;
}

.dropdown-menu[aria-labelledby="navbarSysMenu"] {
	/* font-family: 'Open Sans', sans-serif; */
}

.dropdown-menu[aria-labelledby="navbarSysMenu"] .dropdown-item {
	color: var(--clr-bluegray-55);
}

.navbar .navbar-collapse {
	margin-top: 0;
	border-top: 0;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: var(--clr-bluegray-35);
	opacity: 1; /* Firefox */
}

.modal-content {
	box-shadow: var(--shadow-lg);
}

.modal-header {
	padding: 10px 1rem;
}

.modal-title {
	color: var(--clr-text);
	font-size: 24px;
}

.modal-body .panel-footer {
	padding: .75em 0 !important;
}

.bpm-file-preview {
	width: 100%;
	height: auto;
	max-height: 600px;
	object-fit: contain;
}

.bpm-instance .panel .panel-header {
	/* background-color: #e4e1d8; */
	background-color: transparent;
	border-bottom: none;
}

.bpm-instance .panel .panel-title {
	color: var(--clr-cyan-95);
}

.bpm-instance .panel .panel-body {
	/* background-color: #e4e1d8; */
	background-color: transparent;
}

.bpm-modal .panel .panel-body {
    padding-top: 0;
}

.bpm-instance .panel .panel-footer {
	/* background-color: #e4e1d8; */
	background-color: transparent;
	border-top: none;
}

.panel-header .btn-link {
	color: var(--clr-cyan-95);
}

.login-content .modal-footer {
	border-top: none;
}

@media (min-width: 576px) {
	.modal-content {
		border-radius: var(--step-lg);
	}

	.modal-content .modal-footer {
		border-bottom-right-radius: var(--step-lg);
		border-bottom-left-radius: var(--step-lg);
	}
	
	.modal-header {
		border-top-left-radius: var(--step-lg);
		border-top-right-radius: var(--step-lg);
	}

	.modal-body {
		border-bottom-left-radius: var(--step-lg);
		border-bottom-right-radius: var(--step-lg);
	}

	.modal-body .panel-footer {
		border-bottom-left-radius: var(--step-lg);
		border-bottom-right-radius: var(--step-lg);
	}
}

.rounded-md {
	border-radius: var(--step-md);
}

.custom-control-input:checked~.custom-control-label::before {
	border-color: var(--clr-cyan-65);
	background-color: var(--clr-cyan-65);
}

.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before {
	background-color: var(--clr-accent-lighter);
	border-color: var(--clr-cyan-35)
}

.control-label {
	/* color: var(--clr-bluegray-85); */
	color: var(--clr-bluegray-45);
}

hr {
	border-color: var(--clr-bluegray-25);
}

.form-control:focus,
.custom-control-input:focus~.custom-control-label::before {
	border-color: var(--clr-accent);
	box-shadow: 0 0 0 0.2rem hsl(185deg 95% 41% / 25%);
}

.form-control::placeholder {
    color: #ced4da;);
}

.dropdown-menu,
.navbar .dropdown-menu {
	/* box-shadow: var(--shadow); */
	box-shadow: none;
	min-width: auto;
	margin: 6px 0 0;
	border-radius: var(--step-md);
}

client-combo-box.rounded-md .bpm-control.dropdown-toggle.ui-select-toggle,
client-combo-box.rounded-md .bpm-control.ui-select-search {
	border-radius: var(--step-md);
}

client-combo-box .ui-select-match.btn-default-focus {
	background-color: unset;
	border-color: unset;
	outline: unset;
	outline-offset: unset;
	box-shadow: unset;
}

/* .client-combo-box .dropdown-toggle[disabled="disabled"],
.form-control:disabled, 
.form-control[readonly] {
cursor: not-allowed!important;
} */

client-combo-box > div > div > .dropdown-toggle[disabled="disabled"],
.form-control:disabled, 
.form-control[readonly] {
	background-color: var(--clr-bluegray-05)!important;
	cursor: not-allowed!important;
}

.custom-file.rounded-md label {
	border-radius: var(--step-md);
}

.custom-file-input:disabled~.custom-file-label, 
.custom-file-input[disabled]~.custom-file-label {
	background-color: var(--clr-bluegray-05);
}

.ss-main .ss-single-selected.ss-disabled {
    background-color: var(--clr-bluegray-05);
}

input[disabled],
input.disabled,
client-toggle input[disabled] span,
.checkbox-slider--b input[disabled]+span {
	cursor: not-allowed!important;
}

.dropdown-item, 
.dropdown-item:focus {
	outline: none;
}

.dropdown-item.active, 
.dropdown-item:active {
	color: #fff!important;
	text-decoration: none;
	background: var(--clr-cyan-45);
}

.dropdown-item.text-danger.active, 
.dropdown-item.text-danger:active {
	background: var(--clr-pink-45);
	color: #fff!important;
}

a.text-danger:focus,
a.text-danger:hover {
	color: var(--clr-pink-85)!important;
}
.btn-danger {
	background-color: var(--clr-pink-45);
	border-color: var(--clr-pink-45);
}

.btn-delete {
	border-color: transparent;
	box-shadow: none;
}

.btn-danger:hover {
	background-color: var(--clr-pink-65);
	border-color: var(--clr-pink-65);
}

.dropdown-toggle.arrow-none::after,
.dropdown-toggle.arrow-none::before {
	display: none;
}

.ui-notification {
	border-left-width: 1px;
	border-left-width: var(--step-md);
	border-left-style: solid;
	border-radius: var(--step-md);
	box-shadow: var(--shadow);
}

.ui-notification.info {
	background: white;
	border-left-color: var(--clr-accent);
	color: var(--clr-bluegray-55);
}

.ui-notification.info>h3 {
	color: var(--clr-accent);
	border-bottom: 1px solid var(--clr-accent);
}

.ui-notification.error {
	background: white;
	border-left-color: var(--clr-pink-45);
	color: var(--clr-bluegray-55);
}

.ui-notification.error>h3 {
	color: var(--clr-pink-45);
	border-bottom: 1px solid var(--clr-bluegray-15);
}

.ui-notification.success {
	background: white;
	border-left-color: var(--clr-green-45);
	color: var(--clr-bluegray-55);
}

.ui-notification.success>h3 {
	color: var(--clr-green-45);
	border-bottom: 1px solid var(--clr-bluegray-15);
}

.has-error.form-control, .has-error .bpm-control {
	border-color: var(--clr-pink-45);
}

.has-error.form-control:focus, .has-error .bpm-control:focus {
	border-color: var(--clr-pink-45);
	-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 4px var(--clr-pink-45);
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 4px var(--clr-pink-45);
}

.alert {
	border-radius: var(--step-md);
}

.alert-warning {
	color: var(--clr-yellow-85);
	background-color: var(--clr-yellow-05);
	border-color: var(--clr-yellow-25);
}

.checkbox-slider--b input:checked+span:before, 
.checkbox-slider--b-flat input:checked+span:before {
	background: var(--clr-accent);
}

.checkbox-slider input[type=checkbox]:focus+:before, 
.checkbox-slider--a input[type=checkbox]:focus+:before, 
.checkbox-slider--a-rounded input[type=checkbox]:focus+:before, 
.checkbox-slider--b input[type=checkbox]:focus+:before, 
.checkbox-slider--b-flat input[type=checkbox]:focus+:before, 
.checkbox-slider--c input[type=checkbox]:focus+:before, 
.checkbox-slider--c-weight input[type=checkbox]:focus+:before, 
.checkbox-slider--default input[type=checkbox]:focus+:before, 
.checkbox-toggle input[type=checkbox]:focus+:before {
	outline: none;
}

.ui-select-bootstrap4 .ui-select-choices-row.active > span {
	color: var(--clr-accent-dark);
	background-color: var(--clr-accent-faded);
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
	/* color: #fff; */
	color: #022b3a;
	background-color: var(--clr-accent);
}

.scrollbar-none::-webkit-scrollbar {
	display: none;
}

.scrollbar-none {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

.bpm-modal-confirmation {
	display: flex!important;
	align-items: center;
	justify-content: center;
}

.bpm-modal-confirmation .modal-dialog {
	margin: 0 1rem;
	width: 100%
}

.bpm-modal-confirmation .modal-dialog .modal-content {
	border-radius: var(--step-md);
}

.bpm-modal-confirmation .modal-dialog .modal-content .modal-body {
	font-weight: 400;
	background-color: transparent;
	color: var(--clr-bluegray-55);
}

.bpm-modal-confirmation .modal-dialog .modal-content .modal-footer {
	border-top: none;
	display: flex;
}

.bpm-modal-confirmation .modal-dialog .modal-content .modal-footer button:first-child {
	background-color: var(--clr-accent);
	border-color: transparent;
	box-shadow: none;
	color: white;
	order: 2;
	transition: var(--swoosh);
}

.bpm-modal-confirmation .modal-dialog .modal-content .modal-footer button:first-child:hover {
	background-color: var(--clr-accent-dark);
}

.bpm-modal-confirmation .modal-dialog .modal-content .modal-footer button:last-child {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
	color: var(--clr-bluegray-55);
	order: 1;
}

.btn-outline-primary {
	color: var(--clr-accent);
	border-color: var(--clr-accent);
}

.btn-outline-primary:hover {
	background-color: var(--clr-accent);
	border-color: var(--clr-accent);
}

.btn-outline-primary.focus,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgb(32 163 158 / 56%);
}

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle {
	background-color: var(--clr-accent-darker);
	border-color: var(--clr-accent-dark);
}

.ss-main .ss-multi-selected .ss-values .ss-value {
	background-color: var(--clr-accent-light);
}

.ss-main .ss-multi-selected .ss-values .ss-value .fa.fa-times {
	color: var(--clr-accent-dark) !important;
}

.ss-content .ss-list .ss-option.ss-highlighted, .ss-content .ss-list .ss-option:hover {
    background-color: var(--clr-accent-light);
}



/**   Dashboard   ***********************************************************************/
/****************************************************************************************/

.activities-dashboard ul.tablist {
	background-color: var(--clr-cyan-95);
	display: flex;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.activities-dashboard ul.tablist li {
	flex: 1 1 0%;
	text-align: center;
}

/* .activities-dashboard ul.tablist li+li {
	margin-left: 12px;
} */

.activities-dashboard ul.tablist a {
	border-top: 3px solid transparent;
	/* color: var(--clr-cyan-05); */
	color: var(--clr-cyan-35);
	padding: 12px 0;
}

.activities-dashboard ul.tablist a.active {
	background-color: var(--clr-cyan-85);
	/* color: var(--clr-cyan-35); */
	color: var(--clr-cyan-05);
}

.activities-dashboard .dashboard-menu a {
	font-size: 10px;
}

.activities-dashboard .dashboard-menu a i {
	display: block;
	font-size: initial;
	margin-bottom: 2px;
}

.dashboard-activities-batch-content {
	padding-bottom: 1em;
}

.activities-dashboard .point-counter {
	background-color: #fff;
	border-radius: 10px;
	padding: 4px 10px;
	box-shadow: none;
}

.activities-dashboard .jumbotron-arggo {
	border-radius: 10px;
	padding: 10px;
}

.activities-dashboard .tab-tasks .jumbotron-arggo,
.activities-dashboard .tab-shifts .jumbotron-arggo {
	border-left: 12px solid var(--clr-bluegray-05);
}

.activities-dashboard .jumbotron-arggo.active {
	border-left: 12px solid var(--clr-accent);
}

.activities-dashboard .jumbotron-arggo.active.weekend-day {
	border-color: var(--clr-pink-45);
}

.activities-dashboard .jumbotron-arggo:not(.active) i.ph-calendar-check,
.activities-dashboard .jumbotron-arggo.active i.ph-calendar-blank {
	display: none;
}

.activities-dashboard .jumbotron-arggo.weekend-day .shift-title span {
	color: var(--clr-pink-45);
}

.activities-dashboard .jumbotron-arggo.active .shift-title i.ph-calendar-check {
	color: var(--clr-accent);
}

.activities-dashboard .jumbotron-arggo.active.weekend-day .shift-title i.ph-calendar-check {
	color: var(--clr-pink-45);
}

.activities-dashboard .overdue-indicator,
.activities-dashboard .completed-indicator,
.activities-dashboard .notvalid-indicator {
	display: none;
}

.activities-dashboard .jumbotron-arggo.overdue,
.activities-dashboard .jumbotron-arggo.notvalid {
	border-color: palevioletred;
}

.activities-dashboard .jumbotron-arggo.completed {
	border-color: #74c28a;
}

.activities-dashboard .jumbotron-arggo.overdue .overdue-indicator,
.activities-dashboard .jumbotron-arggo.completed .completed-indicator,
.activities-dashboard .jumbotron-arggo.notvalid .notvalid-indicator {
  display: inline;
}

.activities-dashboard .jumbotron-title {
	font-weight: 600;
	margin: 0;
}

.activities-dashboard .jumbotron-arggo .btn-primary {
	border: none !important;
	box-shadow: none !important;
}

.activities-dashboard .progress {
	background-color: var(--clr-warmgray-25);
}

.activities-dashboard .progress.time {
	background-color: var(--clr-green-45);
}

.activities-dashboard .progress-bar {
	background-color: var(--clr-accent);
}

.activities-dashboard .category-title {
	font-weight: 500;
	margin-bottom: 0;
}

.activities-dashboard .jumbotron-arggo a.btn-primary {
	background-color: var(--clr-warmgray-15);
	background-color: var(--clr-bluegray-05);
	color: var(--clr-cyan-65);
}

.activities-dashboard .jumbotron-arggo a.btn-primary:not(:disabled):not(.disabled).active,
.activities-dashboard .jumbotron-arggo a.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--clr-cyan-65);
	color: rgb(255, 255, 255);
}

.activities-dashboard ul.activity-checklist {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.activities-dashboard .activity-checklist-item.completed span {
	opacity: 0.5;
	text-decoration: line-through;
}

.activities-dashboard .employee-shift-details .shift-colleagues i.ph-caret-down {
	transition: transform .3s ease-in-out;
	transform: rotate(0deg);
}

.activities-dashboard .employee-shift-details .shift-colleagues[aria-expanded="true"] i.ph-caret-down {
	transform: rotate(180deg);
}

.activities-dashboard .date-picker {
	background-color: white;
	border-radius: 10px;
	/* box-shadow: var(--shadow); */
	box-shadow: none;
	font-weight: bold;
	padding: 8px 16px;
	position: absolute;
	bottom: 56px;
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
}

.activities-dashboard .bottom-control {
	background-color: white;
	border-radius: 10px;
	/* box-shadow: var(--shadow); */
	box-shadow: none;
	font-weight: bold;
	padding: 10px 0;
}

.activity-confirmation-thumbnail {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: var(--step-lg);
	/* box-shadow: var(--shadow); */
	box-shadow: none;
	height: 200px;
	width: 100%;
}

.activity-confirmation-thumbnail i {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%) scale(4.5);
	color: rgba(0, 0, 0, 0.25);
}

.activity-confirmation-fullscreen {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: black;
	width: 100%;
	height: 100%;
}

.modal-content .modal-body:has(.activity-confirmation-fullscreen) {
	padding: 0;
	border-radius: 0;
}

.activity-confirmation-fullscreen a.close-modal {
	position: absolute;
	right: 0;
	top: 0;
	padding: 10px 16px;
}

div.dropdown.hide-arrow .dropdown-toggle::after {
	display: none;
}

.close-modal-anchor {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	display: inline-block;
}

.p-placeholder {
	margin: 0;
	font-style: inherit;
	font-weight: 300;
	color: var(--clr-bluegray-45);
}

.activities-dashboard .profile-pic {
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	margin: 16px auto;
}

.time-indicator {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	margin-right: 6px;
}

.negative-score-icon {
	height: 14px;
	margin-right: 4px;
	position: relative; 
	top: 4px;  
}

.user-achievement {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
}

.user-achievement .achievement-thumbnail {
	height: 70px;
	width: auto;
	border-radius: 10px;
	position: relative;
}

.user-achievement .achievement-thumbnail-lock {
	position: absolute;
	height: 20px;
	display: none;
	top: 16px;
	left: 16px;
}

.user-achievement.locked .achievement-thumbnail {
	filter: grayscale(1) opacity(.4);
}

.user-achievement.locked .achievement-thumbnail-lock {
	display: block;
}

.progress.user-star-ratio {
	background-color: var(--clr-accent);
	height: .5rem;
}

.progress.user-star-ratio .progress-bar {
	background-color: var(--clr-pink-45);
	border-right: 2px solid white;
}

.progress.user-star-ratio .progress-bar[aria-valuenow="100"],
.progress.user-star-ratio .progress-bar[aria-valuenow="0"] {
	border-right: none;
}

.dashboard-greeting img {
	display: inline;
	width: 16px;
	height: auto;
}

.current-league-badge-background {
	border-radius: 20%;
	background: linear-gradient(0deg, #ededed, #fbfbfb);
	width: 80%;
	height: 80%;
	left: 10%;
	top: 10%;
	position: absolute;
}

.current-league-badge {
	height: 88px;
	width: auto;
	position: relative;
}

.current-league-label,
.current-league-entered-label {
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	color: var(--clr-bluegray-65);
	display: block;
}

.current-league-title {
	margin: 4px 0;
	padding: 6px 12px;
	font-size: 26px;
	display: inline-block;
	border-radius: var(--step-md);
	background: var(--clr-bluegray-15);
	color: var(--clr-bluegray-65);
}

.current-league-title.coal {
	background: hsl(0deg 0% 48% / 30%);
	color: hsl(0deg 0% 16%);
}

.current-league-title.bronze {
	background: hsl(18deg 63% 56% / 30%);
	color: hsl(3deg 74% 24%);
}

.current-league-title.silver {
	background: hsl(209deg 48% 86% / 30%);
    color: hsl(203deg 12% 41%);
}

.current-league-title.gold {
	background: hsl(44deg 86% 56% / 30%);
	color: hsl(18deg 55% 50%);
}

.current-league-title.platinum {
	background: hsl(265deg 73% 73% / 30%);
	color: hsl(251deg 47% 32%);
}

.current-league-title.emerald {
	background: hsl(146deg 61% 66% / 30%);
	color: hsl(131deg 22% 36%);
}

.current-league-title.diamond {
	background: hsl(189deg 74% 68% / 30%);
	color: hsl(197deg 28% 37%);
}

.league-finishes-counter {
	text-align: center;
}

.league-finishes-counter.locked {
	filter: grayscale(1);
	background: #f8f8f8;
}

.league-calendar-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--clr-bluegray-05);
	padding: 10px;
	border-radius: 8px;
}

.league-calendar-entry {
	--size: calc((100vw - 200px) / 12);
	width: var(--size);
	height: var(--size);
	background: var(--clr-bluegray-25);
	border-radius: 4px;
}

.league-calendar-entry.coal {
	background: hsl(0deg 0% 48%);
}

.league-calendar-entry.bronze {
	background: hsl(18deg 63% 56%);
}

.league-calendar-entry.silver {
	background: hsl(209deg 48% 86%);
}

.league-calendar-entry.gold {
	background: hsl(44deg 86% 56%);
}

.league-calendar-entry.platinum {
	background: hsl(265deg 73% 73%);
}

.league-calendar-entry.emerald {
	background: hsl(146deg 61% 66%);
}

.league-calendar-entry.diamond {
	background: hsl(189deg 74% 68%);
}

.dashboard-activities-batch {
	position: relative;
	transform: translateZ(0);
}

.dashboard-activities-batch-title {
	align-items: center;
	background: #e7eef3;
	display: flex;
	gap: 8px;
	height: 32px;
	outline: 4px solid #e7eef3;
	position: sticky;
	top: 0;
	z-index: 10;
}

span.batch-title-hr {
	flex: 1;
	width: 100%;
	height: 2px;
	background: var(--clr-bluegray-15);
}

.batch-title-text {
	font-weight: bold;
}

.batch-title-count {
	font-size: 0.6em;
	padding: 2px 8px;
	background: var(--clr-bluegray-35);
	border-radius: 8px;
	color: #fff;
	font-weight: bold;
}

.side-menu {
	height: 100%;
	display: flex;
	flex-direction: column; 
}

.side-menu .shadow {
	box-shadow: var(--shadow) !important;
}

.side-menu .nav-pills {
	transition: width .5s ease;
	width: 270px;
}

.side-menu .nav-item {
	margin-top: .25em;
	margin-bottom: .25em;
}

.side-menu .nav-item.nav-divider {
	margin-top: 0;
}

.side-menu .nav-link, .sidemenu .nav-item .nav-link {
	width: 100%;
	color: var(--clr-bluegray-45);
	font-weight: 300;
}

[side-menu] .nav-link>div:first-child
{
	display: flex;
	align-items: center !important;
}

.side-menu .nav-link:hover, .side-menu .nav-link.active {
    background-color: var(--clr-bluegray-05);
    color: var(--clr-accent);
}

.side-menu .nav-link.active {
	font-weight: 400;
}

.side-menu-item {
	align-items: center;
	cursor: pointer;
	display: flex;
	padding: .25em 75em;
}

.side-menu-item-icon {
	font-size: 1.2em;
	text-align: center;
	opacity: .6;
}

.side-menu-item-text, .sidemenu .nav-item .nav-link > div:nth-child(2) {
	font-size: 1.15em;
	margin-left: 1em;
	overflow: hidden;
	transition: width .5s, margin .5s ease;
	white-space: nowrap;
	width: 100%;
}

.side-menu .nav-item a {
	transition: padding-left .5s ease;
}

.side-menu:not(:has(div.sidemenu-expanded)) .nav-pills {
	width: 58px;
}

.side-menu:not(:has(div.sidemenu-expanded)) .nav-item a {
    padding-left: .5em;
}

.side-menu:not(:has(div.sidemenu-expanded)) .side-menu-item-text {
	width: 0 !important;
	margin-left: 0;
}

.side-menu .side-menu-toggle-button .side-menu-item-icon {
	transform: rotate(0deg);
	transition: transform .5s ease;
}

.side-menu:not(:has(div.sidemenu-expanded)) .side-menu-toggle-button .side-menu-item-icon {
	transform: rotate(180deg);
}

.tab-files [data-toggle="collapse"][aria-expanded="true"] .text-truncate {
	white-space: unset;
}

.side-menu {
	min-width: 66px;
	transition: min-width .5s ease;
}

.side-menu:has(div.sidemenu-expanded) {
	min-width: 278px;
}



/**   Reports   *************************************************************************/
/****************************************************************************************/

.tabs-container {
	background: white;
	border-radius: var(--step-md);
	/* box-shadow: var(--shadow); */
	box-shadow: none;
}

.tabs-container ul.tablist {
	display: flex;
	gap: 4px;
	list-style-type: none;
	margin: 0;
	padding: 4px;
}

.tabs-container a.nav-link {
	border-radius: var(--step-sm);
	color: var(--clr-bluegray-55);
	font: 300 12px / 8px sans-serif;
}

.tabs-container a.nav-link:hover {
	background: hsl(0 0% 0% / 3%);
}

.tabs-container a.nav-link.active {
	background: var(--clr-accent-dark);
	color: white;
	font-weight: 400;
}



/*****************************************************************/
/****************************************************************************************/

.text-arggo {
	color: var(--clr-accent);
}

.border-arggo {
	border-color: var(--clr-accent)!important;
}

.container-arggo {
	background-color: var(--clr-bluegray-15);
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
	width: 100%;
}

.container-arggo * {
	font-family: inherit;
}

.container-arggo h1,
.container-arggo h2,
.container-arggo h3,
.container-arggo h4,
.container-arggo h5,
.container-arggo h6,
.container-arggo h1 *,
.container-arggo h2 *,
.container-arggo h3 *,
.container-arggo h4 *,
.container-arggo h5 *,
.container-arggo h6 * {
	font-family: inherit;
}

.btn-arggo {
	background-color: var(--clr-accent);
	border-color: transparent;
	color: white;
	font-weight: 600;
}

.btn-arggo:hover {
	background-color: var(--clr-accent-dark);
	color: white;
}

.btn-outline-arggo {
	background-color: transparent;
	border-color: var(--clr-accent);
	color: var(--clr-accent);
	font-weight: 600;
}

.btn-outline-arggo:hover {
	background-color: var(--clr-accent);
	border-color: var(--clr-accent);
	color: white;
}

.container-arggo .simple-scrolltable {
	border-radius: var(--step-md);
	/* -webkit-box-shadow: var(--shadow); */
	/* box-shadow: var(--shadow); */
	box-shadow: none;
}

.jumbotron-arggo {
	background-color: white;
	border-radius: var(--step-md);
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
	border: 1px solid var(--clr-bluegray-15);
}

.jumbotron-arggo.grid-content {
	margin-bottom: var(--step-md);
	padding: var(--step-md) var(--step-lg);
}

.jumbotron-arggo.grid-content:last-child {
	margin-bottom: var(--step-lg);
}

.table-arggo {
	background-color: white;
	border-spacing: 0;
	text-align: left;
	width: 100%;
}

.table-arggo tr>*:last-child {
	padding-right: 8px;
}

.table-arggo th {
	border-bottom: 1px solid var(--clr-bluegray-15);
	color: var(--clr-bluegray-65);
	font-size: 12px;
	font-weight: 400;
	padding: 8px 0 8px 8px;
}

.table-arggo td {
	border-bottom: .5px solid var(--clr-bluegray-05);
	padding: 8px 0 8px 8px;
}

.table-arggo tbody tr:last-child td {
	border-bottom: none;
}

.table-arggo tbody tr:hover {
	background-color: var(--clr-bluegray-05);
}

.link-arggo {
	color: var(--clr-accent);
	font-weight: 600;
}

.link-arggo:hover {
	color: var(--clr-accent-dark);
}

.link-fixed {
	color: var(--clr-accent) !important;
	text-decoration: none !important;
}

.badge {
	box-shadow: none !important;
}

.badge-secondary {
	background-color: var(--clr-bluegray-45);
}

.badge-danger {
	background-color: var(--clr-pink-45);
}

.table-arggo tr.inactive,
.table-arggo tr.inactive a,
.table-arggo tr.inactive a:hover, 
.table-arggo tr.inactive input,
.jumbotron-arggo.inactive * {
	color: var(--clr-bluegray-25)!important;
}

.table-arggo tr.selected {
	background-color: var(--clr-accent-faded)!important;
	color: var(--clr-accent-darker)!important;
}

.table-arggo tr.selected td {
	border-color: var(--clr-accent-faded);
}

.jumbotron-arggo.selected {
	background-color: var(--clr-accent-faded)!important;
}

.jumbotron-arggo.selected * {
	color: var(--clr-accent-darker)!important;
}

.jumbotron-arggo.selected hr,
.jumbotron-arggo.selected .border-muted {
	border-color: var(--clr-accent-darker)!important;
}

.table-arggo.fixed {
	width: 100%; 
	white-space: nowrap; 
	table-layout: fixed;
}

.nav-tabs-simple {
	border-bottom-width: 0;
}

.nav-tabs-simple .nav-item .nav-link {
	border-width: 0 0 2px 0;
	background-color: transparent;
	margin-left: 0;
	font-weight: bolder;
}

.nav-tabs-simple .nav-item {
	margin-bottom: 0;
}

.nav-tabs-simple .nav-item .nav-link.active {
	border-bottom: 2px solid #296187;
}

.table tbody a:has(i.ph-bold):not(.omit-ph) {
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--step-sm);
	transition: background .1s ease-in-out;
}

.table tbody a:has(i.ph-bold):hover {
	background: hsl(from var(--clr-bluegray-65) h s l / .1);
}

.table thead th {
	font-size: 14px;
	border-bottom: 1px solid var(--clr-bluegray-15);
}

.table tbody tr td {
	border-top: 1px solid var(--clr-bluegray-15);
}

.table tbody tr:first-child td {
	border-top: none;
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: hsl(from var(--clr-bluegray-15) h s l / 0.25);
}

.table-hover tbody tr:hover {
	background: hsl(from var(--clr-bluegray-15) h s l / 0.45);
}

/**   Media queries   *******************************************************************/
/****************************************************************************************/

@media (max-width: 576px) {
	.pb-xs-custom {
		margin-bottom: -10px;
		padding-bottom: 10px;
	}
}

@media (max-width: 768px) {
	.ghost {
		visibility: visible;
	}

	/* mobile tabs */
	.nav-tabs {
		background-color: transparent;
		border-bottom: none;
		height: 30px;
	}

	.nav-tabs .nav-item {
		height: calc(100% - 3px); /* subtract the bottom border */
		margin-right: 24px;
	}

	.nav-tabs .nav-link {
		color: var(--clr-bluegray-35);
		padding: unset;
		margin-left: unset;
		border: none;
		border-bottom: 3px solid transparent;
		border-radius: 0;
		font-size: smaller;
		font-weight: 600;
		height: 100%;
		text-align: center;
		/* line-height: 3.25; */
	}

	.nav-tabs .nav-link.active {
		background-color: transparent;
		border-bottom-color: var(--clr-accent);
		color: var(--clr-accent);
	}
	
	.bpm-file-preview-wrapper {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.bpm-file-preview {
		max-height: calc(100vh - 104px);
	}
}

@media (min-width: 768px) {
	.container-arggo ul[role="tablist"] {
		display: flex;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.container-arggo .nav-link {
		padding: 0;
		font-size: 20px;
		font-weight: 500;
		color: var(--clr-bluegray-35);
		transition: all 150ms ease-in;
	}

	.container-arggo .nav-link:hover,
	.container-arggo .nav-link.active {
		color: var(--clr-bluegray-55);
	}

	.container-arggo ul[role="tablist"] li+li {
		margin-left: 16px;
	}

	.container-arggo ul[role="tablist"] * {
		font-family: inherit;
	}
}



/**   Shift recap   *********************************************************************/
/****************************************************************************************/

.shift-recap-container {
	padding: 32px;
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: scroll;
}

.recap-header {
	color: var(--clr-accent-darker);
	text-transform: uppercase;
	font-weight: 600;
	text-align: center;
	margin-top: .7em;
}

.recap-description {
	color: var(--clr-bluegray-55);
	text-align: center;
	font-size: 1.2em;
	line-height: 1.25;
}

.recap-section {
	border-top: 1px solid var(--clr-bluegray-20);
	padding: 1.5em 0px;
}

.recap-section label {
	font-size: .8em;
	margin: 0;
	color: var(--clr-bluegray-45);
}

.recap-section p {
	margin: .25em 0 0;
	/* font-size: 1.25em; */
	color: var(--clr-bluegray-65);
}

.recap-stats-container {
	display: flex;
	gap: 10px;
	margin-top: 8px;
}

.recap-stats {
	flex: 1;
	height: calc(50vw - 37px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: conic-gradient(var(--clr-accent-light) var(--clr-stat-progress, 0), var(--clr-bluegray-15) var(--clr-stat-progress, 0));
	border-radius: 50%;
	position: relative;
}

.recap-stats * {
	z-index: 1;
}

.recap-stats::before {
	content: '';
	background-color: var(--bpm-modal-body-color);
	border-radius: 50%;
	position: absolute;
	top: 5px;
	left: 5px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
}

.recap-section .recap-stats p {
	font-size: 1.5em;
	font-weight: 500;
	color: var(--clr-bluegray-55);
	margin: 0;
}

.recap-section .recap-stats span {
	font-size: .75em;
	color: var(--clr-bluegray-45);
}

.recap-deliverable,
.recap-conclusion {
	align-items: center;
	display: flex;
	background: var(--clr-bluegray-15);
	border-radius: var(--step-md);
	padding: 10px 14px;
	gap: 10px;
	margin-top: 4px;
}

.recap-deliverable img {
	width: 1em;
	height: auto;
	display: none;
}

.recap-deliverable.True img[alt="check"],
.recap-deliverable.False img[alt="cross"] {
	display: block;
}

.recap-conclusion img {
	width: 3em;
	height: auto;
}

.recap-deliverable p,
.recap-conclusion p {
	margin: 0;
}

.recap-streak {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .5em 0;
}

.recap-streak-entry {
	width: 16px;
	height: 16px;
	background: var(--entry-background, var(--clr-bluegray-15));
	border-radius: 4px;
	/* border: 1px solid var(--entry-border, transparent); */
}

.recap-streak-entry.stone {
	--entry-background: #7a7a7a;
	--entry-border: #2b2b2b;
}

.recap-streak-entry.bronze {
	--entry-background: #d6754a;
	--entry-border: #6f1610;
}

.recap-streak-entry.silver {
	--entry-background: #ccdded;
	--entry-border: #5d6e78;
}

.recap-streak-entry.gold {
	--entry-background: #f0bf32;
	--entry-border: #c7683c;
}

.recap-streak-entry.platinum {
	--entry-background: #b086ec;
	--entry-border: #3b2d7c;
}

.recap-streak-entry.diamond {
	--entry-background: #73d9ea;
	--entry-border: #446a7a;
}



/**   IcoMoon   *************************************************************************/
/****************************************************************************************/

@font-face {
	font-family: 'catapeteasmagia';
	src:  url('../catapeteasmagia.ttf/') format('truetype'),
		url('../catapeteasmagia.woff/') format('woff'),
		url('../catapeteasmagia.svg/') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

[class^="cat-"], [class*=" cat-"] {
	display: inline-block;
	font: normal normal normal 14px/1 'catapeteasmagia'!important;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.cat-arrow-down:before {
	content: "\e920";
}
.cat-arrow-left:before {
	content: "\e945";
}
.cat-arrow-right:before {
	content: "\e946";
}
.cat-arrow-up:before {
	content: "\e947";
}
.cat-attach:before {
	content: "\e900";
}
.cat-bell:before {
	content: "\e901";
}
.cat-bin:before {
	content: "\e902";
}
.cat-box-checked:before {
	content: "\e903";
}
.cat-box-crossed:before {
	content: "\e904";
}
.cat-bricks:before {
	content: "\e905";
}
.cat-building:before {
	content: "\e93c";
}
.cat-bullet:before {
	content: "\e94e";
}
.cat-by:before {
	content: "\e906";
}
.cat-caret-down:before {
	content: "\e948";
}
.cat-caret-left:before {
	content: "\e949";
}
.cat-caret-right:before {
	content: "\e94a";
}
.cat-caret-up:before {
	content: "\e94b";
}
.cat-chat:before {
	content: "\e907";
}
.cat-check:before {
	content: "\e93a";
}
.cat-chevron-down:before {
	content: "\e93d";
}
.cat-chevron-left:before {
	content: "\e93e";
}
.cat-chevron-right:before {
	content: "\e93f";
}
.cat-chevron-up:before {
	content: "\e940";
}
.cat-chinese:before {
	content: "\e908";
}
.cat-circle-bar:before {
	content: "\e94f";
}
.cat-circle-bar-alt:before {
	content: "\e950";
}
.cat-circle-checked:before {
	content: "\e909";
}
.cat-circle-checked-alt:before {
	content: "\e951";
}
.cat-circle-crossed:before {
	content: "\e90a";
}
.cat-circle-crossed-alt:before {
	content: "\e952";
}
.cat-clipboard:before {
	content: "\e90b";
}
.cat-content:before {
	content: "\e90c";
}
.cat-copy:before {
	content: "\e93b";
}
.cat-deny:before {
	content: "\e90d";
}
.cat-dislike:before {
	content: "\e90e";
}
.cat-download:before {
	content: "\e90f";
}
.cat-envelope:before {
	content: "\e910";
}
.cat-equal:before {
	content: "\e94c";
}
.cat-exclamation-circle:before {
	content: "\e911";
}
.cat-file:before {
	content: "\e912";
}
.cat-finish:before {
	content: "\e913";
}
.cat-form:before {
	content: "\e914";
}
.cat-hamburger:before {
	content: "\e944";
}
.cat-hamburger-thin:before {
	content: "\e94d";
}
.cat-heart:before {
	content: "\e915";
}
.cat-history:before {
	content: "\e916";
}
.cat-info-circle:before {
	content: "\e917";
}
.cat-key:before {
	content: "\e918";
}
.cat-like:before {
	content: "\e919";
}
.cat-link:before {
	content: "\e91a";
}
.cat-list:before {
	content: "\e91b";
}
.cat-lock:before {
	content: "\e91c";
}
.cat-media-jump-left:before {
	content: "\e91d";
}
.cat-media-jump-right:before {
	content: "\e91e";
}
.cat-media-pause:before {
	content: "\e91f";
}
.cat-media-play:before {
	content: "\1f300";
}
.cat-media-skip-left:before {
	content: "\e921";
}
.cat-media-skip-right:before {
	content: "\e922";
}
.cat-media-stop:before {
	content: "\e923";
}
.cat-message:before {
	content: "\e924";
}
.cat-minus:before {
	content: "\e925";
}
.cat-more:before {
	content: "\e941";
}
.cat-open-link:before {
	content: "\e926";
}
.cat-pencil:before {
	content: "\e927";
}
.cat-plus:before {
	content: "\e928";
}
.cat-power:before {
	content: "\e929";
}
.cat-print:before {
	content: "\e942";
}
.cat-question-circle:before {
	content: "\e92a";
}
.cat-recur:before {
	content: "\e92b";
}
.cat-recur-double:before {
	content: "\e92c";
}
.cat-save:before {
	content: "\e92d";
}
.cat-save-alt:before {
	content: "\e92e";
}
.cat-search:before {
	content: "\e943";
}
.cat-send:before {
	content: "\e92f";
}
.cat-settings:before {
	content: "\e930";
}
.cat-star:before {
	content: "\e931";
}
.cat-subcategories:before {
	content: "\e932";
}
.cat-table:before {
	content: "\e933";
}
.cat-tabs:before {
	content: "\e934";
}
.cat-times:before {
	content: "\e935";
}
.cat-upload:before {
	content: "\e936";
}
.cat-user:before {
	content: "\e937";
}
.cat-whatsapp:before {
	content: "\e938";
}
.cat-www:before {
	content: "\e939";
}

.bpm-modal .modal-content {
	overflow: hidden;
}

.bpm-modal .modal-body {
	background-color: var(--bpm-modal-body-color);
	padding: 0;
}

.dialog-button-bar {
    padding: 5px 3px 3px 5px;
}

.rounded-scrollbar ::-webkit-scrollbar-track, .rounded-scrollbar ::-webkit-scrollbar-thumb {
	border-radius: 2em;
}

.rounded-scrollbar ::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.calendar-parent .simple-scrolltable {
	/* border-top: 1px solid lightgray; */
}

.calendar td:nth-child(even), .calendar th:nth-child(even) {
	background:	#f9fafc;
}

.calendar tbody:nth-child(n + 3) tr:first-child td {
	border-top: 1px solid #dee2e6 !important;
}

.calendar td .add-shift {
	display: none;
	align-items: center;
}

.calendar td:hover .add-shift {
	display: inline-flex;
}

.calendar .jumbotron-arggo {
	border-left: 6px solid var(--clr-bluegray-15);
	border-radius: var(--step-sm);
	padding: 4px 0 2px 6px;
}

.calendar .jumbotron-arggo:hover {
	background-color: var(--clr-bluegray-05);
}

.calendar .present {
	border-left-color: var(--clr-green-45);
}

.calendar .absent {
	border-left-color: lightcoral;
}

.calendar .vacation {
	border-left-color: #ffc107a1;
}

.calendar .reasoned-leave {
	border-left-color: var(--clr-blue-45);
}

.calendar .weekend-day {
	color: var(--clr-pink-45);
}

.check-in-overlay {
	position: absolute;
	z-index: 100;
	width: 100%;
	height: 100%;
}

.check-in-overlay:before {
	content: "";
  position: absolute;
	background-color: black;
	top: 0;
  right: 0;
  bottom: 0;
  left: 0;
	opacity: 0.6;
}

@keyframes tilt-n-move-shaking {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, 5px) rotate(5deg); }
  50% { transform: translate(0, 0) rotate(0eg); }
  75% { transform: translate(-5px, 5px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes skew-y-shakeing{
 0% { transform: skewY(-15deg); }
 5% { transform: skewY(15deg); }
 10% { transform: skewY(-15deg); }
 15% { transform: skewY(15deg); }
 20% { transform: skewY(0deg); }
 100% { transform: skewY(0deg); }
}

.check-in-overlay button:not(.check-in-reset) {
	animation: tilt-n-move-shaking 0.25s 2;
}

.check-in-overlay button.wrong-check-in {
	animation: skew-y-shakeing 0.5s 1;
}

.modal-dialog .modal-header {
	color: var(--clr-cyan-95);
  background-color: var(--bpm-modal-body-color);
}

.bpm-modal .modal-dialog .modal-header {
	border-bottom: none;
}

.modal-dialog .modal-content {
	/*background-color: transparent;*/
}

.modal-dialog .modal-header .close {
	color: var(--clr-cyan-95);
	text-shadow: none;
}

.modal-dialog .modal-header .close:hover {
	color: var(--clr-cyan-95);
}

.bpm-modal .modal-content {
	border: none;
}

.bpm-modal .modal-body .panel .panel-footer {
	border-top: none;
	background-color: transparent;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
    .sticky-left {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 99 !important;
    }
	
		.sticky-right {
					position: -webkit-sticky;
					position: sticky;
					right: 0;
					z-index: 99 !important;
			}
}

td.sticky-left, td.sticky-right {
	background: white;
}

th.sticky-left, th.sticky-right {
	z-index: 100 !important;
}

.table-striped tbody tr:nth-of-type(odd) td.sticky-left,
.table-striped tbody tr:nth-of-type(odd) td.sticky-right {
	background: rgb(242 242 242);
}

.table-striped tbody tr:hover td.sticky-left,
.table-striped tbody tr:hover td.sticky-right {
	background: #ececec !important;
}

.font-size-smaller {
	font-size: smaller !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu.tempusdominus-bootstrap-datetimepicker-widget-with-calendar-weeks {
    width: 16rem !important;
}

.input-group-append > .form-control:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

div.override-hour-input:hover > div.override-hour-dropdown {
	display: block !important;
}