/* General */

body {
	transition: all 280ms ease;
}

.button {
	border: 0;
	border-radius: 5px;
	transition: all 280ms ease;
}

.button:disabled {
	filter: grayscale(1);
	cursor: not-allowed;
}

#alert {
	transform: translateY(calc(-100% - 40px));
	opacity: 0;
	transition: all 360ms ease;
}

#alert.active {
	transform: translateY(0);
	opacity: 1;
}

#alert > div {
	border-radius: 0 0 10px 10px;
}

#alert.error > div {
	border-top: 3px solid #ff4b00;
}

#alert.success > div {
	border-top: 3px solid #52cbcb;
}

#alert.info > div {
	border-top: 3px solid #14bebe;
}

#alert .close {
	top: 10px;
	right: 10px;
}

#alert .close svg {
	width: 18px;
	color: #ccc;
}

/* Login */

#login form figure img {
	width: 60px;
}

/* Header */

#header {
	height: 70px;
	background-color: #fff;
}

#header figure img {
	width: 38px;
	height: 40px;
}

#header input {
	width: 260px;
	padding-left: 50px;
	border: 0;
	background-color: var(--softgrey);
	transition: all 360ms ease;
}

#header input::placeholder {
	color: var(--black);
}

#header input {
	padding-left: 45px;
	background-repeat: no-repeat;
	background-position: center left 15px;
	background-color: var(--softgrey);
}

#header input[name="search"] {
	background-image: url('../images/hash.svg');
}

#header input.flatpickr {
	background-image: url('../images/calendar.svg');
}

#header form select {
	width: 260px;
	height: 40px;
	padding-left: 45px;
	font-weight: var(--weight-600);
	font-size: var(--size-100);
	color: var(--black);
	border: 0;
	border-radius: 10px;
	background: url('../images/activity.svg');
	background-repeat: no-repeat;
	background-position: center left 15px;
	background-color: var(--softgrey);
	color: var(--black);
	appearance: none;
	transition: all 360ms ease;
}

#header #menu {
	width: 35px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: none;
	appearance: none;
	background: transparent;
	transition: all 320ms ease;
	z-index: 11;
	transition-delay: 0;
}

#header #menu span,
#header #menu::before,
#header #menu::after {
	content: '';
	width: 100%;
	height: 2px;
	position: absolute;
	background-color: var(--darkgrey);
	transition: all 320ms ease;
}

#header #menu::before {
	top: 0;
}

#header #menu::after {
	top: calc(100% - 2px);
}

#header.active #menu span {
	width: 0;
}

#header.active #menu::before {
	top: 50%;
}

#header.active #menu::after {
	top: 50%;
}

#header.active #menu::before {
	transform: rotate(-45deg);
}

#header.active #menu::after {
	transform: rotate(45deg);
}

#header #dropdown {
	width: 150px;
	border-radius: 0 0 5px 5px;
	opacity: 0;
	transform: translateY(-20px);
	pointer-events: none;
	transition: all 280ms ease;
	top: 70px;
	right: 20px;
}

#header.active #dropdown {
	opacity: 1;
	transform: translateY(0);
	pointer-events: all;
}

#header #dropdown a:not(:last-child) {
	border-bottom: 1px solid var(--softgrey);
}

/* Main */

#orders article .grid {
	justify-items: end;
	grid-template-columns: 1fr 160px;
}

#orders article.locked {
	padding-left: 55px;
}

#orders article.locked .locked-icon {
	width: 25px;
	height: 25px;
	left: 20px;
	display: flex;
}

#orders article.locked .locked-icon svg {
	width: 14px;
	height: 14px;
	transform: translateY(-1px);
}

#orders article .items .checked::after {
	content: '';
	width: 4px;
	height: 100%;
	background-color: var(--grey);
	transform: skew(-13deg);
	position: absolute;
	top: 1px;
	right: -2px;
}

#orders article .status {
	border-width: 1px;
	border-style: solid;
}

#orders article[data-substatus="pending"] .status.warning,
#orders article[data-substatus="unassigned"] .status.warning {
	display: block;
}

#orders article[data-substatus="processing"] .status.info,
#orders article[data-substatus="assigned"] .status.info {
	display: block;
}

#orders article[data-substatus="processed"] .status.success,
#orders article[data-substatus="delivered"] .status.success {
	display: block;
}

/* Popup */

#popup {
	background-color: rgba(0 0 0 / 50%);
	opacity: 0;
	pointer-events: none;
	transition: all 360ms ease;
	backdrop-filter: grayscale(1);
}

#popup.active {
	opacity: 1;
	pointer-events: all;
	transition: all 360ms ease;
}

#popup > div {
	width: calc(100% - 40px);
	max-width: 920px;
	opacity: 0;
	transform: translateY(50px);
	transition: all 360ms ease;
}

#popup.active > div {
	opacity: 1;
	transform: translateY(0);
	transition: all 360ms ease;
}

#popup > div .close {
	width: 50px;
	height: 50px;
	color: var(--grey);
	transition: all 280ms ease;
}

#popup > div .close:hover {
	color: var(--black);
}

#popup > div .close svg {
	width: 28px;
	height: 28px;
}

#popup #popup-content header {
	border-bottom: 2px solid var(--softgrey);
}

#popup #popup-content header .order-note {
	background: repeating-linear-gradient(45deg,rgb(118 172 44 / 15%),rgb(118 172 44 / 15%) 10px,rgb(118 172 44 / 10%) 10px,rgb(118 172 44 / 10%) 20px);
}

#popup #popup-content header .order-note p {
	color: rgb(118 172 44);
}

#popup #popup-content header a {
	padding-left: 0;
}

#popup #popup-content header a svg {
	height: 14px;
	transform: rotate(45deg);
}

#popup #popup-content header .info .bags svg {
	width: 24px;
	transform: translateY(-1px);
}

#popup #popup-content header .info .payment svg {
	width: 32px;
}

#popup #popup-content header .info .shipping svg {
	width: 38px;
}

#popup #popup-content header .info span:not(:last-child) {
	border-right: 1px solid #eaeaea;
}

#popup #popup-content .items {
	max-height: 50vh;
	overflow: auto;
}

#popup #popup-content .items article {
	border-top: 2px solid var(--softgrey);
	border-radius: 20px;
}

#popup #popup-content .items article::after {
	content: '';
	width: 0;
	height: 4px;
	border-radius: 50vw;
	background-color: var(--main);
	transition: all 360ms ease;
	transform: translateY(-2px);
	pointer-events: none;
	position: absolute;
	top: 50%;
	left: 50%;
	display: none;
}

#popup #popup-content .items article > * {
	transition: all 280ms ease;
}

#popup #popup-content .items article .check {
	width: 30px;
	height: 30px;
	border: 2px solid var(--softgrey);
}

#popup #popup-content .items article figure {
	min-width: 80px;
	height: 80px;
	padding: 3px;
	border-radius: 20px;
	border: 2px solid var(--softgrey);
}

#popup #popup-content .items article figure img {
	border-radius: 15px;
}

#popup #popup-content .items article[data-status="1"]::after {
	width: calc(100% - 75px);
	left: 55px;
}

#popup #popup-content .items article[data-status="1"] > * {
	opacity: 0.5;
}

#popup #popup-content .items article[data-status="1"] .edit {
	opacity: 0;
}

#popup #popup-content .items article[data-status="1"] [data-action="check-item"],
#popup #popup-content .riders article[data-status="1"] [data-action="choose-rider"] {
	color: var(--secondary);
}

#popup #popup-content .items article[data-status="1"] .actions {
	opacity: 0.25;
}

#popup #popup-content .edit {
	opacity: 0;
	pointer-events: none;
	transition: all 280ms ease;
}

#popup #popup-content .edit.active {
	opacity: 1;
	pointer-events: all;
}

#popup #popup-content .edit .inputs button {
	height: 40px;
	background-color: #eaeaea;
}

#popup #popup-content .edit .inputs button:first-of-type {
	border-radius: 10px 0 0 10px;
}

#popup #popup-content .edit .inputs button:last-of-type {
	border-radius: 0 10px 10px 0;
}

#popup #popup-content .edit .inputs input {
	padding-left: 0;
	border-radius: 0;
}

#popup #popup-content .edit > button {
	height: 40px;
	background-color: var(--secondary);
}

#popup #popup-content .map {
	max-height: 250px;
}

#popup #popup-content footer {
	border-top: 2px solid var(--softgrey);
}

/* Misc */

.status.info {
	background-color: rgba(102,209,209,.1);
	color: #52cbcb;
	border-color: rgba(102,209,209,.2);
}

.status.warning {
	background-color: rgba(251,188,6,.1);
	color: #e4aa04;
	border-color: rgba(251,188,6,.2);
}

.status.success {
	background-color: rgba(101,113,255,.1);
	color: #4c59ff;
	border-color: rgba(101,113,255,.2);
}

.status.danger {
	background-color: rgba(255,51,102,.1);
	color: #ff1a53;
	border-color: rgba(255,51,102,.2);
}

.status.neutral {
	background-color: rgba(121,135,161,.1);
	color: #6a7a96;
	border-color: rgba(121,135,161,.2);
}

.feather-loader {
	animation-name: spin;
	animation-duration: 1000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes spin {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}

#overlay {
	pointer-events: none;
	opacity: 0;
	background-color: rgba(0 0 0 / 50%);
	pointer-events: none;
	transition: all 360ms ease;
	backdrop-filter: grayscale(1);
}

#overlay.active {
	opacity: 1;
	pointer-events: all;
}

.tooltip::after {
	content: attr(title);
	padding: 5px 10px;
	font-size: 16px;
	border-radius: 5px;
	background: rgba(0, 0, 0, .8);
	color: #fff;
	white-space: nowrap;
    transform: translateY(110%) translateX(-50%);
    opacity: 0;
    pointer-events: none;
    transition: all 280ms ease;
	position: absolute;
	bottom: 0;
    left: 50%;
	z-index: 5;
}

.tooltip:hover::after {
	pointer-events: all;
	opacity: 1;
	transform: translateY(100%) translateX(-50%);
}