@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700;800&display=swap");

:root {
	--primary-blue: #0082c8;
	--primary-grey: #605c5c;
	--primary-red: #c71006;
	--primary-white: #feffff;
	--blue: #0000ff;
	--red: #ff0000;
	--green: #00ff00;
	--white: #ffffff;
}

::-webkit-scrollbar {
	width: 0.75rem;
	height: 0.75rem;
}

::-webkit-scrollbar-thumb {
	background: var(--primary-grey);
}

::-webkit-scrollbar-track {
	background: #e1e1e1;
}

::placeholder {
	font-weight: 600 !important;
	font-size: 0.875rem;
	font-size: clamp(0.875rem, 0.875rem + 0.125vw, 1rem);
}

::-webkit-input-placeholder {
	font-weight: 600 !important;
	font-size: 0.875rem;
	font-size: clamp(0.875rem, 0.875rem + 0.125vw, 1rem);
}

::-moz-placeholder {
	font-weight: 600 !important;
	font-size: 0.875rem;
	font-size: clamp(0.875rem, 0.875rem + 0.125vw, 1rem);
}

:-moz-placeholder {
	font-weight: 600 !important;
	font-size: 0.875rem;
	font-size: clamp(0.875rem, 0.875rem + 0.125vw, 1rem);
}

::-ms-input-placeholder {
	font-weight: 600 !important;
	font-size: 0.875rem;
	font-size: clamp(0.875rem, 0.875rem + 0.125vw, 1rem);
}

:-ms-input-placeholder {
	font-weight: 600 !important;
	font-size: 0.875rem;
	font-size: clamp(0.875rem, 0.875rem + 0.125vw, 1rem);
}

* {
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--primary-grey) #e1e1e1;
	box-sizing: border-box;
}

body {
	background: #f5f8fa;
	font-family: "Inter Tight", Arial, Helvetica, sans-serif;
}

main {
	padding: 1rem 0.25rem;
}

.preloader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background-color: var(--primary-white);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: opacity 0.5s ease-in-out, z-index 0.5s ease-in-out;
}

.preloader.hide {
	opacity: 0;
	z-index: -1;
}

.preloader > .loading {
	max-width: 120px;
}

body.preloading {
	overflow: hidden;
}

.loading {
	-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
	animation: spinner 0.8s infinite linear;
	aspect-ratio: 1;
	background: radial-gradient(farthest-side, var(--primary-red) 94%, #0000)
			top/8px 8px no-repeat,
		conic-gradient(#0000 30%, var(--primary-red));
	border-radius: 50%;
	margin: 0.75rem auto;
	mask: radial-gradient(
		farthest-side at center,
		#0000 calc(100% - 8px),
		#000 0
	);
	max-width: 56px;
	width: 100%;
}

@keyframes spinner {
	100% {
		transform: rotate(1turn);
	}
}

.white-container,
.form-container {
	background: var(--primary-white);
	border-radius: 0.5rem;
	padding: 0.875rem;
}

pre {
	font-family: "Fira Code", monospace, sans-serif;
	font-size: 0.75rem;
	font-size: clamp(0.75rem, 0.725rem + 0.125vw, 0.875rem);
	font-weight: 600;
	line-height: normal;
	margin: 0;
	max-height: 36rem;
	overflow: auto;
	padding: 0 0.375rem 0.375rem 0;
}

@-webkit-keyframes fade-in {
	from {
		visibility: hidden;
		opacity: 0;
	}

	to {
		visibility: visible;
		opacity: 1;
	}
}

@keyframes fade-in {
	from {
		visibility: hidden;
		opacity: 0;
	}

	to {
		visibility: visible;
		opacity: 1;
	}
}

.notification {
	align-items: center;
	box-shadow: none;
	display: flex;
	font-weight: 500;
	justify-content: space-evenly;
	left: 50%;
	margin: 15px 0;
	opacity: 0;
	position: fixed;
	transform: translateX(-50%);
	visibility: hidden;
	z-index: 9999;
}

.notification-body {
	padding: 0.75rem 0.875rem;
}

.notification .btn-close {
	margin: auto;
	margin-right: 0.75rem;
	padding: 0.25em 0;
	opacity: 0.75;
}

.notification.show {
	animation: fade-in 0.5s ease-in-out forwards,
		fade-in 0.5s ease-in-out reverse forwards 3s;
}

.select2-results__options::-webkit-scrollbar,
embed::-webkit-scrollbar,
pre::-webkit-scrollbar,
input::-webkit-scrollbar,
textarea::-webkit-scrollbar {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 2rem;
}

.select2-results__options::-webkit-scrollbar-thumb,
embed::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb,
input::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
	border-radius: 2rem;
}

.select2-results__options::-webkit-scrollbar-track,
embed::-webkit-scrollbar-track,
input::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
	border-radius: 2rem;
	background: transparent;
}

pre::-webkit-scrollbar-track {
	border-radius: 2rem;
}

.navbar .logo {
	border-radius: 0.375rem;
	max-width: 3rem;
	width: 100%;
}

.navbar {
	background: var(--primary-red);
	padding: 0.5rem 0.25rem;
}

.navbar-dark .navbar-nav .nav-link {
	color: var(--primary-white) !important;
}

.navbar-brand {
	align-items: center;
	color: var(--primary-white);
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin: 0;
	padding: 0;
}

.navbar-brand .app-title {
	font-weight: bold;
	line-height: normal;
}

.org-info {
	font-size: 0.875rem;
	font-weight: 500;
}

.navbar-light .navbar-toggler {
	border-color: rgba(0, 0, 0, 0.25);
}

.navbar-toggler {
	padding: 0.25rem 0.5rem !important;
}

.navbar-toggler:focus {
	box-shadow: 0 0 0 0.125rem !important;
}

.navbar-nav li.nav-item {
	border-radius: 0.375rem !important;
}

.navbar-nav .nav-link {
	padding: 0.5rem 0.875rem !important;
}

.navbar-nav .dropdown-menu {
	padding: 0.25rem 0 !important;
}

.navbar-nav .dropdown-menu.show {
	display: flex;
	flex-direction: column;
	justify-content: center;
	row-gap: 0.25rem;
}

.navbar-nav .dropdown-menu a.dropdown-item {
	font-weight: 500;
	padding: 0.375rem 0.625rem !important;
	transition: 0.5s all ease;
}

.dropdown-item:focus,
.dropdown-item:hover,
.dropdown-item.active,
.dropdown-item:active {
	background-color: var(--primary-red);
	color: var(--primary-white);
	transition: 0.5s all ease;
}

.navbar .dropdown-menu:last-of-type {
	right: 0;
	left: unset;
}

.navbar-nav li.nav-item > a.nav-link {
	border-radius: 0.375rem;
	color: var(--primary-white);
	margin-left: 0.5rem !important;
	transition: 0.5s all ease;
	font-weight: bold;
	text-transform: uppercase;
}

.navbar-nav li.nav-item:first-child > a.nav-link {
	margin-left: 0 !important;
}

.navbar-nav li.nav-item > a.nav-link:hover,
.navbar-nav li.nav-item > a.nav-link.active {
	background-color: var(--primary-white) !important;
	color: var(--primary-red) !important;
	transition: 0.5s all ease !important;
}

.navbar-nav li.nav-item.logout > a.nav-link:hover {
	background-color: var(--primary-white) !important;
	color: var(--primary-red) !important;
	transition: 0.5s all ease;
}

.hero-logo {
	border-radius: 0.375rem !important;
	max-width: 253px !important;
	padding: 0.25rem;
	width: 100%;
}

.modal-dialog {
	margin: 4rem auto !important;
	max-width: 66.67%;
}

.modal-dialog .btn {
	text-transform: uppercase;
}

.modal-header {
	padding: 0.75rem !important;
	border-top-left-radius: 0.375rem !important;
	border-top-right-radius: 0.375rem !important;
}

.modal-title {
	line-height: 1;
}

.modal-content {
	border-radius: 0.375rem !important;
	border: 0 !important;
}

.modal-body {
	padding: 0.75rem !important;
	max-height: 40rem !important;
}

.modal-body hr {
	margin: 0.5rem 0;
}

.modal-body :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
}

.modal-body p {
	margin-bottom: 0.5rem;
}

#data-modal-content .copy-button {
	border-width: 0.125rem;
	display: none;
	padding: 0.5rem 0.375rem !important;
	position: absolute;
	right: 24px;
	top: 12px;
}

.modal-footer {
	padding: 0.75rem !important;
}

.form-select,
.form-control {
	padding: 0.5rem !important;
	border-width: 0.125rem !important;
	transition: 0.5s all ease;
}

.form-control.form-control-lg {
	padding: 0.5rem 1rem !important;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
	background: var(--primary-red);
	border-bottom-left-radius: 0.375rem;
	border-top-left-radius: 0.375rem;
	color: var(--primary-white);
	cursor: pointer;
}

.form-select {
	padding-right: 2.25rem !important;
}

.btn,
.form-select,
.form-control,
label,
footer {
	font-size: 0.875rem;
	font-size: clamp(0.875rem, 0.875rem + 0.125vw, 1rem);
}

.form-select,
.form-control,
option {
	font-weight: 500;
}

.form-label {
	font-size: 0.875rem;
	font-size: clamp(0.875rem, 0.875rem + 0.125vw, 1rem);
	text-transform: uppercase;
	font-weight: 700;
}

.form-check-label {
	font-size: 1rem;
	font-weight: 700;
}

.form-check-input:hover .form-check-input:focus .form-control:focus,
.form-control:hover,
.form-select:focus,
.form-select:hover {
	transition: 0.5s all ease !important;
}

.form-control.is-valid:focus,
.form-control:valid:focus,
.form-select.is-valid:focus,
.form-select:valid:focus,
.form-control.is-invalid:focus,
.form-control:invalid:focus,
.form-select.is-invalid:focus,
.form-select:invalid:focus,
.form-control:focus:not(.is-valid, .is-invalid),
.form-control:hover:not(.is-valid, .is-invalid),
.form-select:focus:not(.is-valid, .is-invalid),
.form-select:hover:not(.is-valid, .is-invalid) {
	box-shadow: unset !important;
}

.form-control:focus:not(.is-valid, .is-invalid),
.form-control:hover:not(.is-valid, .is-invalid),
.form-select:focus:not(.is-valid, .is-invalid),
.form-select:hover:not(.is-valid, .is-invalid) {
	border-color: var(--primary-red);
}

.form-check-input:focus {
	border-color: #dee2e6 !important;
	box-shadow: unset !important;
}

.select2-container {
	display: block !important;
	width: 100% !important;
}

.select2-container .select2-selection--single {
	height: unset !important;
}

.select2-container--default .select2-selection--single {
	background-color: var(--bs-body-bg) !important;
	background-image: var(--bs-form-select-bg-img) !important;
	border-radius: 0.375rem !important;
	border-width: 0.125rem !important;
}

.select2-container--open .select2-dropdown--below {
	border-bottom-left-radius: 0.375rem;
	border-bottom-right-radius: 0.375rem;
}

.select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 !important;
}

.select2-selection__choice {
	margin: 0 !important;
}

.select2-container--default
	.select2-selection--single
	.select2-selection__arrow {
	display: none !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	border-radius: 0.375rem;
}

.select2-search--dropdown .select2-search__field {
	padding: 0.25rem 0.5rem !important;
}

.select2-container--default .select2-selection--multiple {
	border-radius: 0.375rem !important;
	border-color: #ced4da !important;
}

.select2-container--default
	.select2-results__option--highlighted[aria-selected] {
	background-color: var(--primary-red) !important;
	border-color: var(--primary-red) !important;
}

.select2-container--default .select2-selection--multiple:hover,
.select2-container--default .select2-selection--multiple:focus {
	outline: none !important;
	box-shadow: none !important;
	border-color: var(--primary-red) !important;
	transition: 0.5s all ease !important;
}

.select2-container .select2-search--inline .select2-search__field,
.select2-container--default .select2-selection--multiple {
	margin: 0 !important;
}

.select2-container--default
	.select2-selection--multiple
	.select2-selection__choice,
.select2-container--default
	.select2-selection--single
	.select2-selection__rendered {
	margin-right: 0.25rem !important;
	max-height: 1.5rem !important;
	line-height: 1.5rem !important;
}

.select2-container--default
	.select2-selection--multiple
	.select2-selection__choice:last-child {
	margin-right: 0 !important;
}

.select2-container--default.select2-container--focus
	.select2-selection--multiple {
	border-color: var(--primary-red) !important;
}

.select2-container--default
	.select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--primary-red) !important;
}

.select2-results__options
	.select2-results__options--nested
	> .select2-results__option {
	padding: 0.375rem 0.75rem !important;
}

.opt-title {
	font-weight: 600;
}

.opt-desc {
	font-size: 0.875rem;
	font-weight: 500;
}

.hidden-div {
	z-index: -999;
	display: none;
	opacity: 0;
}

table > * {
	font-size: 0.875rem;
	transition: 0.5s all ease;
}

table > *:hover {
	transition: 0.5s all ease;
}

th {
	font-weight: bold !important;
	text-transform: uppercase;
}

th:not(table.dataTable th) {
	padding: 6px !important;
}

td {
	font-weight: 500 !important;
	padding: 6px !important;
	text-align: center;
}

.btn {
	font-weight: 600;
	text-transform: uppercase;
}

.filter-btn {
	padding: 0.5rem 0.75rem;
}

.view-btn,
.actions > .btn {
	border-width: 0.125rem;
	font-size: 0.875rem !important;
	line-height: 1 !important;
	padding: 0.5rem 0.375rem !important;
	word-break: keep-all;
}

.btn:not(#btn-back-to-top, .filter-btn, .refresh-btn, .buttons-collection) {
	line-height: 1;
	padding: 0.75rem 1.125rem;
}

#btn-back-to-top {
	border-radius: 50%;
	bottom: 16px;
	box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
		rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
		rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
	display: none;
	font-size: 20px;
	padding: 5px 10px !important;
	position: fixed;
	right: 16px;
	z-index: 5;
}

.btn:not(#btn-back-to-top) {
	transition: 0.5s all ease !important;
}

.btn:focus-visible,
.page-link:focus {
	box-shadow: unset;
}

.actions {
	align-items: center;
	display: flex;
	font-size: 1.125rem;
	gap: 0.5rem;
	justify-content: center;
	flex-wrap: wrap;
}

.success-code,
.error-code {
	font-size: 1rem;
	font-weight: 500;
}

.status-0,
.status-100-200,
.status-200-300,
.status-300-400,
.status-400-500,
.http-delete,
.http-get,
.http-patch,
.http-post,
.http-put,
.text-bg-hubspot,
.text-bg-stripe,
.text-bg-airtel {
	border-radius: 0.375rem;
	border: 0;
	color: white;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
}

.text-bg-hubspot {
	background-color: #ff7a59;
}

.text-bg-stripe {
	background-color: #5433ff;
}

.text-bg-airtel {
	background-color: var(--primary-red);
}

i.inactive {
	color: #808080 !important;
}

i.active,
.success-code {
	color: #07c007 !important;
}

i.cancelled,
.error-code {
	color: #ff0000 !important;
}

i.success-code,
i.error-code,
i.active,
i.cancelled,
i.inactive {
	font-size: 1.5rem;
}

.http-delete {
	background-color: #ff0000;
}

.http-get {
	background-color: #41b883;
}

.http-patch {
	background-color: #9b26d4;
}

.http-post {
	background-color: #e8c223;
}

.http-put {
	background-color: #54a3ff;
}

.status-0 {
	background-color: #000000;
}

.status-100-200 {
	background-color: #808080;
}

.status-200-300 {
	background-color: #07c007;
}

.status-300-400 {
	background-color: #10107a;
}

.status-400-500 {
	background-color: #ff0000;
}

textarea {
	cursor: text;
	overflow-y: auto;
	resize: none;
}

.req {
	color: #ff0000 !important;
	font-size: 0.875rem;
	font-weight: 800;
}

.alert {
	border-width: 0.125rem !important;
	font-weight: bold;
	line-height: normal;
	margin: 0;
	padding: 0.875rem;
	text-align: center;
	transition: 0.5s all ease;
}

.modal-body:not(#data-modal-content) > .alert {
	margin-bottom: 0.75rem;
}

ul.pagination {
	gap: 0.5rem;
	margin: 0 !important;
	flex-wrap: wrap;
}

.page-link {
	border-radius: 0.375rem !important;
	border-width: 0.125rem;
	color: var(--primary-red);
	font-size: 0.875rem;
	font-weight: 700;
	margin: 0 !important;
	padding: 0.5rem 1rem !important;
	transition: 0.5s all ease;
}

.page-link:focus {
	outline: none;
	background-color: transparent !important;
	border-color: var(--primary-red);
	transition: 0.5s all ease;
}

.page-link:hover {
	z-index: 2 !important;
	color: var(--primary-white) !important;
	transition: 0.5s all ease;
}

.page-link.active,
.page-link:hover,
.page-item.active .page-link,
.page-item.active .page-link:hover {
	background-color: var(--primary-red) !important;
	border-color: var(--primary-red) !important;
}

footer {
	align-items: center;
	display: flex;
	justify-content: center;
	padding: 0.75rem 1rem;
}

footer span,
footer span a,
footer span a:hover {
	text-decoration: none;
}

@media screen and (max-width: 996px) {
	.navbar-nav .nav-link {
		padding: 0.5rem 0.75rem !important;
	}

	.navbar-nav li.nav-item:first-of-type > a.nav-link {
		margin-left: 0 !important;
		margin-top: 0.5rem !important;
	}

	.navbar-nav li.nav-item > a.nav-link {
		margin-left: 0 !important;
		margin-top: 0.25rem !important;
	}
}

@media screen and (max-width: 480px) {
	.modal-dialog {
		max-width: 90% !important;
	}

	.modal-header,
	.modal-body {
		padding: 0.625rem !important;
	}
}

@media screen and (max-width: 400px) {
	footer {
		padding: 0.5rem;
		flex-direction: column;
	}

	.footer-copyright {
		order: 1;
		margin-top: 0.5rem;
	}

	.footer-link {
		order: 0;
	}
}