@font-face {
	font-family: 'roibos-opensans';
	font-weight: 500;
	src: url('../fonts/opensans-bold.ttf') format('truetype');
}

@font-face {
	font-family: 'roibos-opensans';
	font-weight: bold;
	font-style: italic;
	src: url('../fonts/opensans-bolditalic.ttf') format('truetype');
}

@font-face {
	font-family: 'roibos-opensans';
	font-weight: bolder;
	src: url('../fonts/opensans-extrabold.ttf') format('truetype');
}

@font-face {
	font-family: 'roibos-opensans';
	font-weight: bolder;
	font-style: italic;
	src: url('../fonts/opensans-extrabolditalic.ttf') format('truetype');
}

@font-face {
	font-family: 'roibos-opensans';
	font-style: italic;
	src: url('../fonts/opensans-italic.ttf') format('truetype');
}

@font-face {
	font-family: 'roibos-opensans';
	font-weight: 100;
	src: url('../fonts/opensans-light.ttf') format('truetype');
}

@font-face {
	font-family: 'roibos-opensans';
	font-weight: 100;
	font-style: italic;
	src: url('../fonts/opensans-lightitalic.ttf') format('truetype');
}

@font-face {
	font-family: 'roibos-opensans';
	src: url('../fonts/opensans-regular.ttf') format('truetype');
}

@font-face {
	font-family: 'roibos-opensans';
	font-weight: 300;
	src: url('../fonts/opensans-semibold.ttf') format('truetype');
}

@font-face {
	font-family: 'roibos-opensans';
	font-weight: 300;
	font-style: italic;
	src: url('../fonts/opensans-semibolditalic.ttf') format('truetype');
}

html, body {
	height: 100%;
	overflow-x: hidden;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: 'Segoe UI', sans-serif !important;
	color: #172b4d;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.471;
	background-color: #eff2f4;
}

label {
	margin-bottom: 0.25rem;
}

.hide {
	display: none !important;
}

div, button {
	position: relative;
}

	div:focus {
		outline: none;
	}

.noimg {
	object-fit: contain !important;
}

.color-red {
	color: red;
}

.rb_small_header {
	font-size: 15px;
	text-transform: uppercase;
	margin-bottom: 10px;
	font-weight: 500;
}

.rb_imgcontainer {
	overflow: hidden;
	position: relative;
}

	.rb_imgcontainer img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}


/*Profile Menu Header*/

.rb_profile_menu_btn svg {
	fill: white;
}

/*Menu*/

.rb_menu_item svg {
	width: auto;
	height: 27px !important;
	transition: all 0.3s;
}

.rb_menu_item[active] svg, .rb_menu_item[active] svg g, .rb_menu_item[active] svg path, .rb_menu_item[active] svg polygon {
	fill: var(--color-red-1) !important;
	filter: saturate(1) opacity(1) !important;
}

.rb_menu:hover .rb_menu_item svg, .rb_menu:hover .rb_menu_item svg g, .rb_menu:hover .rb_menu_item svg path, .rb_menu:hover .rb_menu_item svg polygon {
	filter: saturate(1) opacity(1);
}

.rb_menu_item svg, .rb_menu_item svg g, .rb_menu_item svg path, .rb_menu_item svg polygon {
	filter: saturate(0) opacity(0.8);
	transition: all 0.3s;
}

.rb_menu_item_down svg {
	fill: #909090;
	width: 15px;
	height: auto !important;
}

/*Modal*/
.rb_modal_close svg {
	fill: #606c79;
	height: 15px;
	width: auto;
}

::-webkit-scrollbar {
	width: 14px;
}

::-webkit-scrollbar-track {
	background-color: #ffffff;
	border-radius: 100px;
}

::-webkit-scrollbar-thumb {
	border-radius: 100px;
	border: 3px solid transparent;
	background-clip: content-box;
	background-color: #828282;
}

/*Table*/
.rb_table thead tr th {
	font-weight: 500;
	padding: 10px 8px;
}

.rb_table tbody tr td {
	padding: 4px 8px;
	border-left: 1px solid #eee;
}

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

.bold {
	font-weight: 500 !important;
}

.remark {
	padding: 8px;
	background-color: #f6f6f6;
	border-left: 5px solid #ddd;
}

.nowrap {
	white-space: nowrap;
}

.flex-content-right {
	display: flex;
	justify-content: right;
}

.green_icon {
	fill: var(--color-green-1);
}

.red_icon {
	fill: var(--color-red-1);
}

.text-center {
	text-align: center;
}

.top-section {
	display: flex;
	justify-content: space-between;
}

.contentDistributionHealth {
	display: flex;
	align-items: center;
	padding: 4px 7px;
	border-radius: 5px;
	height: 27px;
	margin-top: 6px;
}

	.contentDistributionHealth svg {
		min-width: 17px;
		margin-right: 6px;
		fill: white;
	}

.contentDistributionHealth_info {
	color: white;
	font-weight: 500;
}

.contentDistributionHealth .rb_container_single {
	display: flex;
	align-items: center;
}

.contentDistributionHealth a:hover {
	text-decoration: none !important;
}

.chart-base {
	/*height: calc(100% - 11px) !important;*/
}

.chart-s {
	height: 145px !important;
}

.chart-m {
	height: 250px !important;
}

.chart-l {
	height: 300px !important;
}

.chart-xl {
	height: 400px !important;
}

.filter::before {
	content: "\f0b0";
	font-family: "Font Awesome 6 Pro";
	font-size: 16px;
	font-weight: 300;
	margin-right: 8px;
	margin-top: 2px;
	text-align: center;
	width: 1.25em;
}

.advanced-filter::before {
	content: "\e005";
	font-family: "Font Awesome Kit";
	font-size: 16px;
	font-weight: 300;
	margin-right: 8px;
	margin-top: 2px;
	text-align: center;
	width: 1.25em;
}

.clean-filter::before {
	content: "\e17d";
	font-family: "Font Awesome 6 Pro";
	font-size: 16px;
	font-weight: 300;
	margin-right: 8px;
	margin-top: 2px;
	text-align: center;
	width: 1.25em;
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.confirm::before {
	content: "\f00c";
	font-family: "Font Awesome 6 Pro";
	font-size: 16px;
	font-weight: 300;
	margin-right: 8px;
	text-align: center;
	width: 1.25em;
}

.cancel::before {
	content: "\f00d";
	font-family: "Font Awesome 6 Pro";
	font-size: 16px;
	font-weight: 300;
	margin-right: 8px;
	text-align: center;
	width: 1.25em;
}

.delete::before {
	content: "\f2ed";
	font-family: "Font Awesome 6 Pro";
	font-size: 16px;
	font-weight: 300;
	margin-right: 8px;
	text-align: center;
	width: 1.25em;
}

	.delete.empty::before {
		margin-right: 0;
	}

.view-detail::before {
	content: "\e49a";
	font-family: "Font Awesome 6 Pro";
	font-size: 16px;
	font-weight: 300;
	margin-right: 8px;
	text-align: center;
	width: 1.25em;
}

.login::before {
	content: "\f2f6";
	font-family: "Font Awesome 6 Pro";
	font-size: 16px;
	font-weight: 300;
	margin-right: 8px;
	text-align: center;
	width: 1.25em;
}

.add::before {
	content: "\2b";
	font-family: "Font Awesome 6 Pro";
	font-size: 16px;
	font-weight: 300;
	margin-right: 8px;
	text-align: center;
	width: 1.25em;
}

.add-circle::before {
	content: "\f055";
	font-family: "Font Awesome 6 Pro";
	font-size: 16px;
	font-weight: 300;
	margin-right: 8px;
	text-align: center;
	width: 1.25em;
}

.download::before {
	content: "\f019";
	font-family: "Font Awesome 6 Pro";
	font-size: 16px;
	font-weight: 300;
	margin-right: 8px;
	text-align: center;
	width: 1.25em;
}

.down::after {
	content: "\f078";
	font-family: "Font Awesome 6 Pro";
	font-size: 16px;
	font-weight: 300;
	margin-right: 4px;
	text-align: center;
	width: 1.25em;
}

.up::after {
	content: "\f077";
	font-family: "Font Awesome 6 Pro";
	font-size: 16px;
	font-weight: 300;
	margin-right: 4px;
	text-align: center;
	width: 1.25em;
}

.file-invoice::before {
	content: "\f570";
	font-family: "Font Awesome 6 Pro";
	font-size: 16px;
	font-weight: 300;
	margin-right: 8px;
	text-align: center;
	width: 1.25em;
}

.save::before {
	content: "\f0ee";
	font-family: "Font Awesome 6 Pro";
	font-size: 16px;
	font-weight: 300;
	margin-right: 8px;
	text-align: center;
	width: 1.25em;
}

.edit::before {
	content: "\f044";
	font-family: "Font Awesome 6 Pro";
	font-size: 16px;
	font-weight: 300;
	margin-right: 8px;
	text-align: center;
	width: 1.25em;
}

.search::before {
	content: "\f002";
	font-family: "Font Awesome 6 Pro";
	font-size: 16px;
	font-weight: 300;
	margin-right: 8px;
	text-align: center;
	width: 1.25em;
}

.viewport-heigh-130 {
	height: calc(100vh - 130px);
}

.viewport-full-page {
	height: calc(100vh - 136px);
}

.w-33 {
	width: 33% !important;
}

.gap-2 {
	gap: 0.5rem;
}

.al {
	text-align: left !important;
}

.ar {
	text-align: right !important;
}

.fs-16 {
	font-size: 16px !important;
}

.fs-18 {
	font-size: 18px !important;
}

.fs-20 {
	font-size: 20px !important;
}

.iti__dropdown-content {
	z-index: 100 !important;
}

.iti {
	width: 100%;
}