@font-face {
	font-family: "wondr";
	src: url(../../assets/fonts/wondr_regular.ttf);
}

@font-face {
	font-family: "wondr";
	src: url(../../assets/fonts/wondr_bold.ttf);
	font-weight: bold;
}

@font-face {
	font-family: "wondr";
	src: url(../../assets/fonts/wondr_bold.ttf);
	font-weight: bolder;
}

:root {
	--white: #FFFFFF;
	--excel-bg: #27663F;
	--arrow-up-logo: "\f0d8";
	--arrow-down-logo: "\f0d7";
	--arrow-both-logo: "\f0dc";
	/* 	--custom-font: "ComoW01-Bold", "Arial Black", "Montserrat",
		"Helvetica Neue", Helvetica, Arial, sans-serif; */
	--custom-font: "wondr", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--custom-blue: #6184FF;
	--paging-bg: linear-gradient(328deg, #ffffff 27%, #47ae91 25%);
	--paging-border: 2px solid #52171C;
	--base-color1: #52171C;
	--base-color2: #e17b64a6;
	--base-color3: #C9E8EB;
	--base-color4: #CE1A22;
	--base-yellow: #FFA900;
	--base-blue: #0000ff;
	--custom-blue: #002459;
	--base-grey: #F2F2F2;
	--base-gray: #F2F2F2;
	--base-shadow: 0 0 5px var(--base-color1);
	--base-red: #D30E0E;
	--base-bg : linear-gradient(#5A1221, #100A0B);
	--font-size: 14px;
}

.body {
	font-family: var(--custom-font);
	font-size: var(--font-size);
}

#fmlogin {
	background: #FFFFFF;
	padding-top: 40px;
	padding-bottom: 10px;
	border-radius: 2.5rem;
}

/* Logout Button */
.logout-button {
	width: 150px;
	border-radius: 1rem !important;
	font-weight: bold !important;
	background-color: var(--base-color3);
	color: var(--base-color2);
	margin-right: 2rem;
}

:is(.logout-button:active, .logout-button:hover) {
	background-color: var(--base-color4);
	color: var(--base-gray);
}

.logout-button:focus {
	background-color: var(--base-color4);
	color: white;
}

.fa-circle:before {
	color: var(--base-color1);
}

/* UNTUK ROW MENU YANG AKTIF */
.list-group-item.active .fa-circle:before {
	color: var(--white);
}

/* UNTUK ROW MENU YANG TIDAK AKTIF DI HOVER  */
.list-group-item-action:hover .fa-circle:before {
	color: var(--white);
}

/* UNTUK ROW MENU YANG AKTIF DI HOVER */
.list-group-item+.list-group-item.active .fa-circle:before {
	color: var(--white);
}

/* Radio Item */
input[type="radio"]:checked {
	border-color: var(--base-color1);
	box-shadow: var() !important;
}

input[type="radio"]:checked:before {
	background-color: var(--base-color1);
}

input[type="radio"]:hover {
	border-color: var(--base-color1);
	box-shadow: var(--base-shadow) !important;
}

body {
	background-color: #fbfbfb;
}

@media ( min-width : 991.98px) {
	main {
		padding-left: 300px;
	}
}

@media ( max-width : 991.98px) {
	.sidebar {
		width: 100%;
	}
}

/* Sidebar */
.sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	/* padding: 100px 0 0; Height of navbar */
	box-shadow: 0 2px 5px 0 rgb(0 0 0/ 5%), 0 2px 10px 0 rgb(0 0 0/ 5%);
	width: 320px;
	z-index: 600;
	background-color: #5A1221 !important;
}

.sidebar .active {
	border-radius: 5px;
	box-shadow: 0 2px 5px 0 rgb(0 0 0/ 16%), 0 2px 10px 0 rgb(0 0 0/ 12%);
}

.sidebar-sticky {
	position: relative;
	top: 0;
	height: calc(100vh - 48px);
	padding-top: 0.5rem;
	overflow-x: hidden;
	overflow-y: auto;
	/* Scrollable contents if viewport is shorter than content. */
}

.data-selected {
	position: fixed !important;
	z-index: 2000 !important;
	bottom: 0;
	left: 321px;
}

.z-groupbox-content {
	font-family: var(--custom-font);
	font-size: 16px;
	font-weight: normal;
	font-style: normal;
	color: rgba(0, 0, 0, 0.9);
	background: var(--white);
	display: block;
	height: inherit;
	border: 1px solid #D9D9D9;
	border-top: 0;
	padding: 0px !important;
	overflow: hidden;
	zoom: 1;
}

.z-datebox-popup {
	position: absolute;
	z-index: 2000 !important;
}

.z-tree {
	background-color: #000000 !important;
}

.z-treerow-selected>.z-treecell {
	background: #000000 !important;
	color: #000000 !important;
}

.z-treerow.z-treerow-selected>.z-treecell>.z-treecell-content>.z-hlayout>.z-hlayout-inner>.z-label
	{
	color: #000000 !important;
	font-family: var(--custom-font);
	font-weight: bold;
}

.z-div.z-div-selected>.z-div>.accordion-header {
	z-index: 2;
	color: #fff;
	background-color: #091D8B;
	border-color: #091D8B;
}

.list-group-item {
	z-index: 2;
	border-color: #005E6A;
	border: none;
}

.accordion-body-selected>.list-group-item-action>.z-label:hover {
	color: #000000 !important;
	font-family: var(--custom-font);
	font-weight: bold;
}

.list-group-item.active {
	z-index: 2;
	color: #fff;
	background-color: var(--base-color1);
	border-color: var(--base-color2);
}

@media ( max-width : 991.98px) {
	.sidebar {
		width: 100%;
	}
}

.card-footer {
	background-color: transparent;
	border-top: 0;
	box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.1);
	padding: .75rem 1.25rem;
	padding-left: 80px;
	transition: all 0.3s ease-in-out;
	font-size: 1rem;
	min-height: 60px;
	border-bottom-left-radius: 8px !important;
	border-bottom-right-radius: 8px !important;
}

.card-footer:not(:has(.footer-buttons, .z-div)) {
  display: flex;
  gap: 1rem;
}

.card-footer > div[role="group"]{
	display:flex;
	gap: 1rem;
}

.z-auxheader {
	border: 0 !important;
	padding: 0;
	background-color: var(--white) !important;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}

.z-paging {
	background: #FFFFFF;
}

.z-paging-os .z-paging-button {
	border-radius: 16px;
	border: var(--paging-border);
	color: var(--black);
	font-size: 0.7rem;
	padding: 2px 3px;
}

.z-paging-navigate {
color: white;
}

.z-paging-noborder:hover {
	color: var(--base-color1) !important;
	background: var(--base-color3) !important;
}

.z-paging-button:hover {
	background-color: var(--base-color4) !important;
	color: var(--white) !important;
	border-color: var(
 --base-color4) !important;
}

.z-paging-noborder {
	border: 0 !important;
}

.z-paging-selected {
	color: #FFFFFF !important;
	background: var(--base-color2);
	font-weight:bold;
}

.z-auxhead-bar {
	border: 0 !important;
}

.card-footer span {
	display: block;
	font-style: italic;
	font-size: 0.9rem;
	color: #666;
	margin-top: 5px;
}

.card-footer-productgroup {
	padding: .75rem 1.25rem;
	background-color: rgb(220, 219, 255);
	border-top: 1px solid rgba(0, 0, 0, .125);
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}

.tb-column {
	background: #ffeae3;
}

.card-header-productgroup {
	padding: .75rem 1.25rem;
	margin-bottom: 0;
	background-color: grey;
	color: var(--white);
	border-top-left-radius: 15px !important;
	border-top-right-radius: 15px !important;
}

.card-header {
	padding: .5rem 1rem 4.5rem 1rem !important;
	/* background-color: var(--base-color2); */
	background-color: var(--base-color1);
	color: var(--white);
	height: 85px;
	font-weight: bold;
}

.card-header .z-label {
	font-size: 0.9rem;
	font-weight: bold;
}

.btn {
	vertical-align: bottom;
	border: 0;
	-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .2), 0 2px 10px 0
		rgba(0, 0, 0, .1);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .2), 0 2px 10px 0
		rgba(0, 0, 0, .1);
	font-weight: 500;
	padding: .625rem 1.5rem .5rem;
	font-size: .75rem;
	line-height: 1.5;
	border-radius: 8px;
}

.btn-orange {
	background-color: #ffa500;
	color: white;
}

.btn-hover {
	background-color: #ddd;
	border: none;
	color: black;
	padding: 10px 10px;
	text-align: center;
	font-size: 16px;
	margin: 4px 2px;
	transition: 0.3s;
}

.btn-hover:hover {
	background-color: #ffa500;
	color: white;
}

.btn-table, .btn-table-success, .btn-table-danger, .btn-table-primary,
	.btn-table-secondary, .btn-table-info, .btn-table-warning {
	background-color: #ddd;
	border: none;
	color: black;
	text-align: center;
	font-size: 16px;
	margin: 4px 2px;
	transition: 0.3s;
	border-radius: 50rem !important;
	padding: .375rem 1rem .3125rem;
	line-height: 1.5;
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .18), 0 4px 15px 0
		rgba(0, 0, 0, .15);
}

.btn-table-default {
	background-color: grey;
	border: none;
	color: white;
	text-align: center;
	font-size: 16px;
	margin: 4px 2px;
	transition: 0.3s;
	border-radius: 50rem !important;
	padding: .375rem 1rem .3125rem;
	line-height: 1.5;
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .18), 0 4px 15px 0
		rgba(0, 0, 0, .15);
}

.btn-table-light {
	background-color: #fbfbfb;
	border: none;
	color: grey;
	text-align: center;
	font-size: 16px;
	margin: 4px 2px;
	transition: 0.3s;
	border-radius: 8px !important;
	padding: .375rem 1rem .3125rem;
	line-height: 1.5;
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .18), 0 4px 5px 0
		rgba(0, 0, 0, .15);
}

.btn-table-warning:hover {
	background-color: #ffa500;
	color: white;
}

.btn-table-success:hover {
	background-color: #00b74a;
	color: white;
}

.btn-table-danger:hover {
	background-color: #f93154;
	color: white;
}

.btn-table-primary:hover {
	background-color: #1266f1;
	color: white;
}

.btn-table-secondary:hover {
	background-color: #6610f2;
	color: white;
}

.btn-table-info:hover {
	background-color: #39c0ed;
	color: white;
}

.btn-reset-hover {
	background-color: #ddd;
	border: none;
	color: black;
	text-align: center;
	font-size: 16px;
	margin: 4px 2px;
	transition: 0.3s;
}

.btn-reset-hover:hover {
	background-color: red;
	color: white;
}

.btn-process-hover {
	background-color: #ddd;
	border: none;
	color: black;
	text-align: center;
	font-size: 16px;
	margin: 4px 2px;
	transition: 0.3s;
}

.btn-process-hover:hover {
	background-color: blue;
	color: white;
}

.column-table {
	/* background-color: #005E6A; */
	background-color: var(--base-color2);
	border-color: #f1f2f2;
	height: 40px;
	font-size: 24px;
	font-weight: bold !important;
}

.column-table :is(.z-textbox, .z-decimalbox, .z-intbox, .z-datebox-input)
	{
	border-color: var(--white);
	color: white;
	background: none;
	resize: none;
	font-weight: bold;
	width: 50%;
	min-width: 125px;
}

.column-table :is(.z-textbox, .z-decimalbox, .z-intbox, .z-datebox-input)::placeholder
	{
	color: white !important;
}

.grid-wrap .z-column-content{
	text-wrap: auto;
}

.z-column-content {
	color: var(--white) !important;
	font-weight: bold !important;
}

.z-listheader-content {
	color: var(--white) !important;
	font-weight: bold !important;
}

.btn-default {
	background-color: #FFFFFF !important;
	color: var(--base-color4) !important;
	border: 1px solid var(--base-color4);
	font-weight:bold;
}

.btn-danger{
	background: #FFDADB;
	color: var(--base-color4);
	font-weight:bold;
	border: 1px solid #FFDADB;
}

.btn-2 {
	letter-spacing: 0;
}

.btn-2:hover, .btn-2:active {
	letter-spacing: 5px;
}

.btn-2:after, .btn-2:before {
	backface-visibility: hidden;
	border: 1px solid rgba(#fff, 0);
	bottom: 0px;
	content: " ";
	display: block;
	margin: 0 auto;
	position: relative;
	transition: all 280ms ease-in-out;
	width: 0;
}

.btn-2:hover:after, .btn-2:hover:before {
	backface-visibility: hidden;
	border-color: #fff;
	transition: width 350ms ease-in-out;
	width: 70%;
}

.btn-2:hover:before {
	bottom: auto;
	top: 0;
	width: 70%;
}

.btn-5 {
	border: 0 solid;
	box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
	outline: 1px solid;
	outline-color: rgba(255, 255, 255, .5);
	outline-offset: 0px;
	text-shadow: none;
	transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-5:hover {
	border: 1px solid;
	box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px
		rgba(255, 255, 255, .2);
	outline-color: rgba(255, 255, 255, 0);
	outline-offset: 15px;
	text-shadow: 1px 1px 2px #427388;
}

div.card {
	border: 0;
	margin-top: 30px;
	color: rgba(0, 0, 0, .87);
	background: #fff;
	width: 100%;
	border-radius: 15px;
}

div.card.card-plain {
	background: transparent;
	box-shadow: none;
}

div.card .card-header {
	border-top-left-radius: 15px !important;
	border-top-right-radius: 15px !important;
}

div.card .card-footer .footer-buttons {
	display: flex;
	flex-direction: row-reverse;
	gap: 1vw;
	border-bottom-left-radius: 15px !important;
	border-bottom-right-radius: 15px !important;
	justify-content: flex-start;
}

div.card .card-header-productgroup {
	border-radius: 15px !important;
	padding: 1rem 15px;
	margin-left: 15px;
	margin-right: 15px;
	margin-top: -30px;
	border: 0;
}

div.card .card-footer-productgroup {
	padding: 1rem 15px;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: -30px;
	border: 0;
	border-radius: 15px !important;
}

.label-input {
	font-weight: bold !important;
	font-size: 14px;
	color: #0C51A0;
	padding: 8px;
}

.label-search {
	font-weight: bold !important;
	font-size: 16px;
	color: #0C51A0;
	padding-bottom: 8px;
}

.text-input {
	z-index: 2;
	height: 40px !important;
	width: 70%
}

.checkbox-input {
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .18), 0 4px 5px 0
		rgba(0, 0, 0, .15) !important;
}

.text-search {
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .18), 0 4px 5px 0
		rgba(0, 0, 0, .15);
	border-radius: 8px !important;
	height: 35px;
}

.btn-excel {
	background-color: grey;
	border: none;
	color: white;
	text-align: center;
	font-size: 16px;
	margin: 4px 2px;
	margin-bottom: 15px;
	transition: 0.3s;
	border-radius: 50rem !important;
	padding: .375rem 1rem .3125rem;
	line-height: 1.5;
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .18), 0 4px 15px 0
		rgba(0, 0, 0, .15);
}

.btn-excel:hover:after {
	transform: translateX(100%);
	transition-delay: 5s;
	transition: all .3s ease-in-out;
	content: "Excel to Export";
}

.btn-search {
	background-color: blue;
	border: none;
	color: white;
	text-align: center;
	font-size: 16px;
	margin: 4px 2px;
	margin-bottom: 15px;
	transition: 0.3s;
	border-radius: 50rem !important;
	padding: .375rem 1rem .3125rem;
	line-height: 1.5;
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .18), 0 4px 15px 0
		rgba(0, 0, 0, .15);
}

:is(.btn-search:focus, .btn-search:active, .btn-search:hover) {
	color: white;
	background-color: blue;
}

/* .btn-search:hover:after {
	transform: translateX(100%);
	transition-delay: 5s;
	transition: all .3s ease-in-out;
	content: "Search";
} */
.btn-reset {
	background-color: #f93154;
	border: none;
	color: white;
	text-align: center;
	font-size: 16px;
	margin: 4px 2px;
	margin-bottom: 15px;
	transition: 0.3s;
	border-radius: 50rem !important;
	padding: .375rem 1rem .3125rem;
	line-height: 1.5;
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .18), 0 4px 15px 0
		rgba(0, 0, 0, .15);
}

/* .btn-reset:hover:after {
	transform: translateX(100%);
	transition-delay: 5s;
	transition: all .3s ease-in-out;
	content: "Reset";
} */
.btn-add {
	background-color: #6610f2;
	border: none;
	color: white;
	text-align: center;
	font-size: 16px;
	margin: 4px 2px;
	transition: 0.3s;
	border-radius: 50rem !important;
	padding: .375rem 1rem .3125rem;
	line-height: 1.5;
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .18), 0 4px 15px 0
		rgba(0, 0, 0, .15);
}

.list-group-item-action:hover {
	z-index: 1000;
	color: #ffffff;
	text-decoration: none;
	border-radius: 5px;
	background-color: var(--base-color2);
}

.div-label-success {
	background-color: #00b74a;
	color: var(--white);
	border-radius: 50rem
}

.div-label-warning {
	background-color: #ffa500;
	color: var(--white);
	border-radius: 50rem
}

.div-label-primary {
	background-color: #1266f1;
	color: var(--white);
	border-radius: 50rem
}

.div-action {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
	gap:0.5vw;
}

/* Input Border Color  */
:is(.z-combobox-popup, .z-bandbox-popup, .z-datebox-popup,
	.z-timebox-popup) {
	border: 1px solid var(--base-color1) !important;
}

:is(.z-textbox, .z-decimalbox, .z-intbox, .z-longbox, .z-doublebox,
	.z-combobox-input, .z-datebox-input):focus {
	border-color: var(--base-color1) !important;
	box-shadow: var(--base-shadow) !important;
}

:is(.z-combobox-open .z-combobox-button, .z-combobox-hover,
	.z-bandbox-open .z-bandbox-button, .z-datebox-open .z-datebox-button) {
	border-color: var(--base-color1) !important;
	box-shadow: var(--base-shadow) !important;
}

/* Global Input Box */
:is(.z-textbox, .z-decimalbox, .z-intbox, .z-datebox, .z-datebox-input.z-datebox-hover,
	.z-datebox-input.z-datebox-hover+.z-datebox-button):hover {
	border-color: var(--base-color1);
	box-shadow: var(--base-shadow);
}

/* Datebox */
:is(.z-datebox-button):hover {
	border-color: var(--base-color1) !important;
}

:is(.z-datebox-button):active {
	border-color: var(--base-color1) !important;
}

.z-datebox-input:focus+.z-datebox-button {
	border: 1px solid var(--base-color1);
}

.z-datebox-input:focus+.z-datebox-button:focus {
	border: 1px solid var(--base-color1);
}

.z-datebox a:hover {
	color: var(--base-color-1);
}

.z-datebox-button:hover {
	background: var(--base-color3);
}

.z-datebox-button:active {
	color: var(--base-gray);
	background-color: var(--base-color1);
}

:is(.z-combobox-popup) {
	border: 1px solid var(--base-color1) !important;
}

.z-combobox-input:focus-within {
	box-shadow: var(--base-shadow) !important;
}

.z-listitem>.z-listcell {
	background-color: var(--white) !important;
	/* Putih */
	color: #000000 !important;
	/* Hitam untuk teks */
	transition: background-color 0.3s, color 0.3s !important;
}

/* Saat Listcell dalam keadaan dipilih (clicked) */
.z-listitem.z-listitem-selected>.z-listcell {
	background-color: #C9E8EB !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
	transition: background-color 0.3s, color 0.3s, box-shadow 0.3s, border
		0.3s !important;
}

/* Saat Listcell dipilih dan sedang di-hover */
.z-listitem.z-listitem-selected:hover>.z-listcell {
	background-color: #C9E8EB !important;
}

/* Saat Listcell dipilih tetapi fokus kursor tidak lagi di sana */
.z-listitem.z-listitem-selected.z-listitem-focus>.z-listcell {
	background-color: #C9E8EB !important;
}

/* Saat Listcell di-hover (umum, tidak harus dipilih) */
.z-listitem:hover>.z-listcell {
	background-color: #e5e5e5 !important;
}

.z-listitem.z-listitem-selected>.z-listcell>.z-listcell-content {
	color: #005E6A;
}

.z-listitem.z-listitem-selected.z-listitem-focus:hover .z-listcell-content
	{
	color: #005E6A;
}

.z-listitem.z-listitem-selected.z-listitem-focus>.z-listcell>.z-listcell-content
	{
	color: #005E6A;
}

/* // combobox style  */
.z-combobox-input {
	outline: none;
	/* Menghilangkan outline saat fokus */
	padding: 5px;
	font-size: 14px;
	/* Ukuran font */
}

.z-combobox-btn {
	background-color: transparent;
	/* Transparan */
	border: none;
	/* Menghilangkan border */
	outline: none;
	/* Menghilangkan outline */
	cursor: pointer;
	/* Menambahkan pointer */
	padding: 0 10px;
	border: none;
}

.z-combobox-button:active {
	background-color: var(--base-color1);
}

.z-combobox-button:active .z-combobox-icon {
	color: var(--base-gray);
}

.z-combobox-button:hover {
	background: var(--base-color1);
}

.z-combobox-button {
	background: transparent;
	border: none;
}

.z-combobox-readonly .z-combobox-button {
	background: transparent;
}

.z-combobox-icon {
	font-size: 16px;
	/* Ukuran icon panah */
	color: #000000;
	/* Warna icon panah */
}

.z-combobox-input:focus+.z-combobox-button {
	border: none;
}

.z-combobox-input:focus {
	border-color: var(--base-color1);
}

.z-combobox:focus-within {
	box-shadow: 0 0 5px #c32f37;
	/* Efek bayangan saat fokus */
}

.z-comboitem-selected {
	color: #c73039;
}

.z-combobox-popup {
	border: 1px solid #c73039;
}

.z-comboitem:hover {
	background-color: #bababa;
	/* Warna latar belakang saat hover */
}

.cheader::placeholder {
	color: white !important;
}

.searchableheader {
	border-color: var(--white);
	color: white;
	background: none;
	resize: none;
}

.searchableheader:hover {
	border-color: var(--base-color3) !important;
}

.searchableheader::placeholder {
	color: white !important;
}

.dontresize {
	resize: none !important;
}

.z-loading {
	animation: fadeIn 1.5s !important;
	-webkit-animation: fadeIn 1.5s !important;
	-moz-animation: fadeIn 1.5s !important;
	-o-animation: fadeIn 1.5s !important;
	-ms-animation: fadeIn 1.5s !important;
	animation: fadeIn 1.5s !important;
	-webkit-animation: fadeIn 1.5s !important;
	-moz-animation: fadeIn 1.5s !important;
	-o-animation: fadeIn 1.5s !important;
	-ms-animation: fadeIn 1.5s !important;
}

:is(.buttonAttachment, .button-attachment, .button-upload) {
	color: var(--white) !important;
	background-color: #051e55 !important;
}

:is(.buttonAttachment, .button-attachment, .button-upload, .z-button[disabled]):disabled {
	color: rgba(0, 0, 0, 0.34) !important;
    border-color: transparent !important;
    background-color: #D9D9D9 !important;
}

:is(.z-datebox-readonly, .z-combobox-readonly)>input {
	background: var(--white);
}

.card-status {
	border-bottom: 5px solid #eaeaea;
	background-color: var(--base-gray);
	padding: 1rem;
}

.card-status .status-action {
	display: flex;
	justify-content: space-between;
}

.buttonexcel {
	border-radius: 50rem !important;
	background-color: #27663F !important;
	color: var(--white) !important;
}

.buttonexcel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #27663F;
	color: var(--white);
	border: none;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: 0.3s;
	position: relative;
}

.buttonexcel:hover{
	background-color: #d1d1d1;
}

.buttonexcel::before {
	content: "";
	background: url('/images/excel.png') no-repeat center;
	background-size: contain;
	width: 20px;
	/* Adjust icon size */
	height: 20px;
	display: inline-block;
}

:is(.button-template, .btn-template){
	border-radius: 8px;
	background-color: #4db451 !important;
	color: var(--white) !important;
	font-weight: bold;
}

:is(.button-template, .btn-template):hover {
	background-color: #d1d1d1;
	/* Darker */
}


:is(.button-template, .btn-template) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #27663F;
	color: var(--white);
	border: none;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: 0.3s;
	position: relative;
}

.buttonaction4line {
	border-radius: 50rem !important;
	background-color: var(--white) !important;
	color: #000000 !important;
}

.buttonaction4line {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50rem;
	background-color: var(--white);
	color: #000000;
	border: none;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: 0.3s;
	position: relative;
}

.buttonaction4line:hover {
	background-color: #1e4f30;
	/* Darker green on hover */
}

.buttonaction4line::before {
	content: "";
	background: url('/files/img/action4linestack.png') no-repeat center;
	background-size: contain;
	width: 20px;
	/* Adjust icon size */
	height: 20px;
	display: inline-block;
}

.buttonresetsmall {
	padding: 0px !important;
}

:is(.buttonsearchsmall, .buttonresetsmall) {
	height: 1rem;
	width: auto;
	padding: 0 1rem !important;
	border-radius: 50rem !important;
	font-size: 14px;
	line-height: 1rem;
	white-space: nowrap;
	margin: 0;
}

.datefilter .z-button, .datefilter .z-datebox {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

.export-header .btn-default {
	height: 1rem;
	width: auto;
	padding: 0 1rem;
	font-size: 14px;
	line-height: 1rem;
	white-space: nowrap;
}

.z-paging ul>li>.z-paging-noborder {
	border: 2px solid var(--white) !important;
	background: var(--base-color1);
	padding-right: 0.5rem;
	padding-left: 0.5rem;
}

.approval-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0 2vh;
}

.export-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
}

.required-label {
	color: red;
}

.approvalradio {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: baseline !important;
	gap: 1rem;
}

.approvalmemo {
	display: flex;
	justify-content: flex-end;
	align-items: center !important;
}

:is(.importantbox, .importantbox:hover, .importantdatebox .z-datebox-input,
	.importantdatebox .z-datebox-button) {
	border: 2px solid #FF0000;
}

.groupboxbottomcurved>.z-groupbox-content {
	border-bottom-left-radius: 1rem !important;
	border-bottom-right-radius: 1rem !important;
}

.div-selectedcount {
	background: var(--base-grey);
	display: flex;
	flex-direction: row;
	padding: 0.5rem 0 0.5rem 0;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 1rem;
}

.div-selectedcount>.z-label {
	font-size: 16px;
	font-weight: bold;
}

.captionUserDetail>.z-caption-content, .captionUserDetail>.z-groupbox-title-content
	{
	font-size: 16px !important;
}

.subtitle {
	font-size: 1rem;
	font-weight: bold;
}

:is(.button-disabled, .btn-disabled) {
	pointer-events: none;
	background-color: gray;
	color: black;
}

:is(.button-yellow, .button-yellow:active) {
	pointer-events: none;
	background-color: #FFF196 !important;
	color: #D29A00;
}

:is(.button-green, .button-green:active) {
	pointer-events: none;
	background-color: #CFF0AB !important;
	color: #0C8045;
}

:is(.button-red, .button-red:active) {
	pointer-events: none;
	background-color: #FFE7E7 !important;
	color: #DF0000;
}

:is(.button-green, .button-red, .button-yellow) {
	min-width: 20rem;
}

.card>.row {
	padding-right: 2vh;
}

.approval-count {
	margin: 1rem;
	border: 2px solid var(--base-color1);
	border-radius: 10px;
	padding: 10px;
	width: 12rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.approval-count::before {
	content: "";
	background-color: #C48A00;
	width: 5px;
	height: 85%;
	position: absolute;
	left: -2px;
	border-radius: 20px;
}

.approval-count-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	padding-left: 10px;
}

.approval-label {
	font-size: 1rem !important;
	font-weight: bold;
	color: var(--base-color1);
}

.approval-number {
	font-size: 2rem !important;
	font-weight: bold;
	color: var(--base-color2);
}

.cardgrid :is(.z-column, .z-row-inner) {
	width: 125px !important;
	min-height: 40px;
}

.cardgrid .z-row-inner {
	height: 55px;
}

.div-search-reset {
	display: flex;
	justify-content: space-between;
}

.pagesize-change {
	display: flex;
	align-items: center;
	font-size: 14px;
	gap: 0.5rem;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
}

.pagesize-change .z-combobox-input {
	width: 50px;
	margin: 0 5px;
	border-radius: 5px;
}

.pagesize-change .z-combobox:focus-within {
	box-shadow: none !important;
	/* Efek bayangan saat fokus */
}

.cardgrid {
	/*	padding: 0 1.0rem 0 1rem; */
	border: 0 !important;
	border-radius: 0 !important;
}

:is(.cardgrid :is( div[role="grid"], div[class="z-listbox"] ))
	{
	width: 100%;
	min-height: 450px;
	border: 0 !important;
}

.cardgrid :is(div[role="grid"] .z-grid-body, div[class="z-listbox"] .z-listbox-body)
	{
	width: 100%;
	min-height: 415px;
	max-height: 415px;
}

.cardgrid>:is(.z-grid) {
	border: 0;
}

.z-listbox-paging-top {
	border-bottom: 0 !important;
}

.cardgrid :is(.z-columns-bar, .z-listhead-bar) {
	background: var(--base-color2) !important;
	border-left: none !important;
	border-bottom: none !important;
}

.card :is(.z-columns-bar, .z-listhead-bar) {
	background: var(--base-color2) !important;
	border-left: none !important;
	border-bottom: none !important;
}

.pagetotalsize {
	font-weight: bold;
	font-size: 14px;
}

:is(.z-column-sort .z-column-sorticon, .z-listheader-sort .z-listheader-sorticon)
	{
	top: 8px !important;
	left: 90% !important;
}

:is(.z-column-sort .z-column-content, .z-listheader-sort .z-listheader-content):active
	{
	background: none !important;
}

.z-column-sort>.z-column-content>.z-column-sorticon>i,
	.z-listheader-sort>.z-listheader-content>.z-listheader-sorticon>i {
	font-style: normal !important;
	font-family: FontAwesome;
	color: white;
	visibility: visible !important;
	opacity: 1 !important;
}

.z-column-sort>.z-column-content>.z-column-sorticon>i::before,
	.z-listheader-sort>.z-listheader-content>.z-listheader-sorticon>i::before
	{
	content: var(--arrow-both-logo);
}

.z-icon-caret-up::before {
	content: var(--arrow-up-logo) !important;
}

.z-icon-caret-down::before {
	content: var(--arrow-down-logo) !important;
}

.button-approved {
	background-color: #CFF0AB;
	border-radius: 100px;
	box-shadow: rgba(124, 252, 0, .2) 0 -25px 18px -14px inset,
		rgba(124, 252, 0, .15) 0 1px 2px, rgba(124, 252, 0, .15) 0 2px 4px,
		rgba(124, 252, 0, .15) 0 4px 8px, rgba(124, 252, 0, .15) 0 8px 16px,
		rgba(124, 252, 0, .15) 0 16px 32px;
	color: #0C8045;
	cursor: not-allowed;
	display: inline-block;
	font-family: var(--custom-font);
	padding: 4px 13px;
	text-align: center;
	text-decoration: none;
	transition: all 250ms;
	border: 0;
	font-size: 12px;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	pointer-events: none;
	font-weight: bold;
}

.button-approved:hover {
	background-color: #b1e776;
	box-shadow: rgba(124, 252, 0, .6) 0 -25px 18px -14px inset,
		rgba(124, 252, 0, .5) 0 3px 6px, rgba(124, 252, 0, .5) 0 6px 12px,
		rgba(124, 252, 0, .5) 0 12px 24px, rgba(124, 252, 0, .5) 0 24px 48px,
		rgba(124, 252, 0, .5) 0 48px 96px;
	/* Box shadow lebih terang saat hover */
	transform: scale(1.05) rotate(-1deg);
}

.button-approved:active {
	background-color: #CFF0AB;
	box-shadow: rgba(124, 252, 0, .5) 0 -25px 18px -14px inset,
		rgba(124, 252, 0, .4) 0 3px 6px, rgba(124, 252, 0, .4) 0 6px 12px,
		rgba(124, 252, 0, .4) 0 12px 24px, rgba(124, 252, 0, .4) 0 24px 48px,
		rgba(124, 252, 0, .4) 0 48px 96px;
	transform: scale(1.05) rotate(-1deg);
}

.button-waitingappr {
	background-color: #FFF196;
	border-radius: 100px;
	box-shadow: rgba(124, 252, 0, .2) 0 -25px 18px -14px inset,
		rgba(124, 252, 0, .15) 0 1px 2px, rgba(124, 252, 0, .15) 0 2px 4px,
		rgba(124, 252, 0, .15) 0 4px 8px, rgba(124, 252, 0, .15) 0 8px 16px,
		rgba(124, 252, 0, .15) 0 16px 32px;
	color: #D29A00;
	cursor: not-allowed;
	display: inline-block;
	font-family: var(--custom-font);
	padding: 4px 13px;
	text-align: center;
	text-decoration: none;
	transition: all 250ms;
	border: 0;
	font-size: 12px;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	pointer-events: none;
	font-weight: bold;
}

.button-waitingappr:hover {
	background-color: #ffed6a;
	box-shadow: rgba(124, 252, 0, .6) 0 -25px 18px -14px inset,
		rgba(124, 252, 0, .5) 0 3px 6px, rgba(124, 252, 0, .5) 0 6px 12px,
		rgba(124, 252, 0, .5) 0 12px 24px, rgba(124, 252, 0, .5) 0 24px 48px,
		rgba(124, 252, 0, .5) 0 48px 96px;
	/* Box shadow lebih terang saat hover */
	transform: scale(1.05) rotate(-1deg);
}

.button-waitingappr:active {
	background-color: #FFF196;
	box-shadow: rgba(124, 252, 0, .5) 0 -25px 18px -14px inset,
		rgba(124, 252, 0, .4) 0 3px 6px, rgba(124, 252, 0, .4) 0 6px 12px,
		rgba(124, 252, 0, .4) 0 12px 24px, rgba(124, 252, 0, .4) 0 24px 48px,
		rgba(124, 252, 0, .4) 0 48px 96px;
	transform: scale(1.05) rotate(-1deg);
}

.button-declined {
	background-color: #FFE7E7;
	border-radius: 100px;
	box-shadow: rgba(124, 252, 0, .2) 0 -25px 18px -14px inset,
		rgba(124, 252, 0, .15) 0 1px 2px, rgba(124, 252, 0, .15) 0 2px 4px,
		rgba(124, 252, 0, .15) 0 4px 8px, rgba(124, 252, 0, .15) 0 8px 16px,
		rgba(124, 252, 0, .15) 0 16px 32px;
	color: #DF0000;
	cursor: not-allowed;
	display: inline-block;
	font-family: var(--custom-font);
	padding: 4px 13px;
	text-align: center;
	text-decoration: none;
	transition: all 250ms;
	border: 0;
	font-size: 12px;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	pointer-events: none;
	font-weight: bold;
}

.button-declined:hover {
	background-color: #b30000;
	box-shadow: rgba(124, 252, 0, .6) 0 -25px 18px -14px inset,
		rgba(124, 252, 0, .5) 0 3px 6px, rgba(124, 252, 0, .5) 0 6px 12px,
		rgba(124, 252, 0, .5) 0 12px 24px, rgba(124, 252, 0, .5) 0 24px 48px,
		rgba(124, 252, 0, .5) 0 48px 96px;
	/* Box shadow lebih terang saat hover */
	transform: scale(1.05) rotate(-1deg);
}

.button-declined:active {
	background-color: #DF0000;
	box-shadow: rgba(124, 252, 0, .5) 0 -25px 18px -14px inset,
		rgba(124, 252, 0, .4) 0 3px 6px, rgba(124, 252, 0, .4) 0 6px 12px,
		rgba(124, 252, 0, .4) 0 12px 24px, rgba(124, 252, 0, .4) 0 24px 48px,
		rgba(124, 252, 0, .4) 0 48px 96px;
	transform: scale(1.05) rotate(-1deg);
}

.z-panelchildren .card {
	margin-top: 0 !important;
}

.totalDiv .z-column-content {
	background-color: var(--base-color2);
}

/* Gradient Welcome */
.welcome-window {
	min-height: calc(95vh - 75px) !important;
	background: linear-gradient(to right, var(--base-color1), #006885);
	background-size: 200% 100%;
	animation: gradient-anime 5s infinite linear alternate;
	position: relative;
	opacity: 0;
	animation-fill-mode: forwards;
	display: contents;
}

.welcome-window .z-window-content {
	margin-top: 16vh;
	background: transparent !important;
}

.welcome-window::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: inherit;
	animation: fadeIn 3s;
}

:is(.welcome-message-lbl, .welcome-user-lbl .z-label) {
	font-size: 2.5rem;
	color: #f2f2f2;
	text-shadow: 0 0 2px white;
	font-family: var(--custom-font);
}

/* NAV TAB .z-tabbox */
.card .z-tabbox {
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}

.nav_tabs .z-tabs {
	background-color: var(--base-color2);
}

.nav_tabs .z-tab {
	background: transparent !important;
	color: white !important;
	font-size: 18px;
}

.nav_tabs .z-tab-selected {
	border-color: var(--base-color1) !important;
	background-color: var(--base-color1) !important;
}

.nav_tabs .z-tab-text {
	color: #FFFFFF;
	font-weight: bold;
	opacity: 0.8;
}

.nav_tabs .z-tab-selected .z-tab-text {
	opacity: 1;
	color: var(--white);
	font-weight: bold;
}

.nav_tabs .z-tab-selected:hover .z-tab-text {
	pointer-events: none;
}

.nav_tabs .z-tabbox-icon {
	background: var(--base-color4);
}

.nav_tabs .z-tabbox-left-scroll {
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
}

.nav_tabs .z-tab-selected {
	border-color: var(--base-color1) !important;
	background-color: var(--base-color1) !important;
	border-radius: 15px;
}

/* .nav_tabs .z-tab-selected:last-child{
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
} */

/* .custom-tabbox .z-tab-selected:last-child{
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
} */

.nav_tabs .z-tab-selected:first-child {
	border-radius: 0 !important;
	border-top-right-radius: 15px !important;
	border-bottom-right-radius: 15px !important;
}

.nav_tabs .z-tabbox-right-scroll {
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
}

.z-tab-selected .z-tab-text:hover {
	color: var(--white);
}

.z-tab-selected .z-tab-text:active {
	color: var(--white);
	font-weight: bold;
}

.datefilter-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.5rem;
	width: 100%;
}

.datefilter-header .datefilter-filters {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.datefilter-header .datefilter-content {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 1rem;
}

.datefilter-header .datefilter-buttons {
	display: flex;
	gap: 2rem;
	margin-left: auto;
}

.totalDiv {
	margin: 1rem;
}

.totalDiv .z-row-content {
	margin: 0.5rem 0;
}

.progressbar {
	counter-reset: step;
	z-index: 5 !important;
	position: sticky;
}

.progressbar li {
	list-style-type: none;
	float: left;
	font-size: 12px;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	color: #000000;
}

.progressbar li:before {
	width: 50px;
	height: 50px;
	content: '';
	line-height: 30px;
	border: 2px solid #7d7d7d;
	background-color: #7d7d7d;
	display: block;
	text-align: center;
	margin: 0 auto 10px auto;
	border-radius: 50%;
	transition: all .8s;
}

.progressbar li:after {
	width: 100%;
	height: 2px;
	content: '';
	position: absolute;
	background-color: #7d7d7d;
	top: 25px;
	left: -50%;
	z-index: -1;
	transition: all .8s;
}

.progressbar li:first-child:after {
	content: none;
}

.progressbar li.active:before {
	border-color: #55b776;
	background-color: #55b776;
	transition: all .8s;
}

.progressbar li.active:after {
	background-color: #55b776;
	transition: all .8s;
}

.progressbar li.inactive:before {
	border-color: #cd3f42;
	background-color: #cd3f42;
	transition: all .8s;
}

.progressbar li.inactive:after {
	background-color: #cd3f42;
	transition: all .8s;
}

.card-status .detail-status {
	padding-top: 1rem;
	margin-top: 0.5rem;
	border-top: 2px solid #eaeaea;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	gap: 1.5rem;
}

.detail-status .button-status-email {
	pointer-events: none;
	background-color: #6184FF;
	color: var(--white);
}

.detail-status .button-status-email {
	pointer-events: none;
	background-color: var(--base-color4);
	color: var(--white);
}

:is(.detail-status .button-sent, .detail-status .button-download) {
	border-color: var(--base-color4);
	background-color: var(--white);
	color: var(--base-color4);
	border: 2px solid var(--base-color4);
}

:is(.detail-status .button-sent, .detail-status .button-download):focus
	{
	box-shadow: 0 0 8px rgba(97, 132, 255, 0.6);
	transform: scale(1.05);
}

:is(.detail-status .button-sent, .detail-status .button-download):active
	{
	background-color: var(--base-color3);
	color: var(--base-color1);
	transform: scale(0.95);
	box-shadow: 0 4px 12px var(--base-color1);
}

.action-button-group {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 0.8rem;
}

.button-back {
	margin-top: 0.5rem;
	margin-left: 0.5rem;
	background-color: #90908f;
	color: #fff;
	border: none;
	padding: 10px 15px 10px 10px;
	border-radius: 5px;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
}

.button-back>i {
	display: contents;
}

.button-back:hover {
	background-color: #787878;
}

.button-back:focus {
	background-color: #90908f;
	color: #fff;
	outline: none;
	box-shadow: 0 0 5px rgba(144, 144, 143, 0.8);
}

.button-back:active {
	background-color: #606060;
	transform: scale(0.95);
}

.header-title {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: 1.25rem 0 0 1.96rem !important;
}

.header-title .z-label {
	font-size: 1.75rem;
	font-weight: bold !Important;
	font-family: var(--custom-font) !important;
}

.header-title .z-label:last-child {
	font-size: 0.9rem;
}

.z-label, .z-radio-content, .z-checkbox-content, .z-loading {
	font-family: var(--custom-font) !important;
}

.card-form {
	padding-left: 2rem !important;
	padding-right: 2rem !important;
}

.card-form :is(.z-textbox, .z-datebox, .z-intbox, .z-decimalbox,
	.z-combobox) {
	width: 100% !important;
}

.card-form>.row div {
	margin-bottom: 0.5rem;
}

:is(.z-intbox, .z-decimalbox) {
	text-align: right !important;
}

:is(.card-header>h4, .card-header>h3) {
	font-size: 1.75rem;
	font-weight: bold;
}

.column-table-submit {
	background-color: #FFFFFF;
	/* background-color: rgb(168, 168, 168); */
	border-color: #f1f2f2;
	height: 40px;
	font-size: 24px;
	font-weight: bold !important;
}

.data-selected {
	position: fixed !important;
	z-index: 2000 !important;
	bottom: 0;
	left: 321px;
}

.div-total {
	padding: 0.25rem 1rem;
	background: var(--base-color2);
	display: flex;
	flex-direction: row;
	gap: 2rem;
}

.div-total .z-label {
	width: 60% !important;
	margin-right: 5%;
	font-size: 1.25rem;
	font-weight: bold;
	color: var(--white);
}

.div-total :is(.z-decimalbox, .z-intbox) {
	width: 15% !important;
	font-weight: bold;
	font-size: 1rem;
}

.z-paging ul>li>.z-paging-noborder:active {
	border: 2px solid var(--base-color1) !important;
	background: var(--base-color1) !important;
	color: var(--white) !important;
}

.z-paging-button:active {
	background: var(--base-color1) !important;
	color: var(--white) !important;
	border-color: var(--base-color1) !important;
}

/* .btn-add:hover:after {
	transform: translateX(100%);
	transition-delay: 5s;
	transition: all .3s ease-in-out;
	content: "New Data";
} */
.loginbtn {
	background-color: var(--base-color1) !important;
	color: var(--white) !important;
	font-weight: bold !important;
}

.detail-approval {
	padding-right: 1rem;
}

.approvalaction {
	padding: 0.5rem 1rem;
}

.desc-header {
	background-color: var(--base-color3);
}

.desc-header .z-label {
	font-size: 1.25rem;
	font-family: var(--custom-font);
}

.label-clickable {
	font-weight: bold;
	color: var(--base-color2);
	cursor: pointer;
	text-decoration: underline;
}

.label-clickable:hover {
	color: var(--base-color1);
}

.label-clickable:active {
	color: var(--base-color4);
}

.search-header {
	border: 1px solid;
}

:is(.search-header .z-label, .search-header .z-icon-search) {
	font-size: 1rem;
}

.search-header .head {
	background-color: var(--base-color2);
	border-bottom: 1px solid;
	padding-left: 0.5vh;
}

.search-header .head .z-label {
	font-weight: bold;
}

.search-header .body {
	padding-left: 1rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 1vh;
	background-color: var(--base-gray);
}

.search-header .body .body-content {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
}

.search-header .body .body-content .z-radiogroup {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
}

.search-header .body .body-content .z-label {
	min-width: 10vw;
	white-space: nowrap;
}

.search-header .body {
	padding-left: 1rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 1vh;
	background-color: var(--base-gray);
}

.search-header .body>div {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
}

.search-header .body>div .z-radiogroup {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
}

.search-header .body>div .z-label {
	min-width: 10vw;
	white-space: nowrap;
}

/* Select Input */
.search-header .body>div :is(.z-textbox, .z-combobox-input,
	.z-datebox-input, .z-decimalbox, .z-intbox) {
	min-width: 200px;
}

.search-header .foot {
	background-color: #FFFFFF;
	padding-top: 1vh;
	padding-left: 5vh;
	padding-bottom: 1vh;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: 5vh;
}

.search-header .body .body-content :is(.z-intbox, .z-combobox,
	.z-textbox, .z-datebox, .z-decimalbox) {
	min-width: 200px;
}

.search-header .foot .z-button {
	border-radius: 1rem;
}

.search-header .foot .col {
    display: flex;
    gap: 1rem;
}
.search-header .foot .col:last-child{
	display:flex;
	flex-direction: row;
	justify-content: flex-end;
	margin-right: 1rem;
}

/* Upload-Header */
.upload-header {
	border: 1px solid;
}

:is(.upload-header .z-label, .upload-header .z-icon-search) {
	font-size: 1rem;
}

.upload-header .head {
	background-color: var(--base-color3);
	border-bottom: 1px solid;
	padding-left: 0.5vh;
}

.upload-header .head .z-label {
	font-weight: bold;
}

.upload-header .body {
	padding-left: 1rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 1vh;
	background-color: var(--base-gray);
}

.upload-header .body .body-content {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
}

.upload-header .body .body-content .z-label {
	min-width: 120px;
	white-space: nowrap;
}

:is(.upload-header .body .body-content .filename, .filename) {
	color: var(--base-color1);
	opacity: .65;
	font-weight: bold;
	margin-left: 1rem;
}

/* Product-Card */
.product-card .card .card-header {
	height: 100%;
	text-align: center;
	background: var(--base-bg);
}

.product-card .card .card-header .z-label {
	font-weight: bold;
	font-size: 1rem;
}

.product-card .card .card-body {
	background-color: var(--base-grey);
}

.product-card .card .card-footer {
	background-color: #FFFFFF;
}

.product-card .card .card-footer button {
	border-radius: 8px;
	background-color: var(--base-color2) !important;
	color: white;
	float: right;
}

.metal-plate {
	height: 100%;
	background: linear-gradient(45deg, var(--base-color1),
		var(--base-color2));
	border-radius: 1rem;
	position: relative;
	display: flex;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), inset 0 -5px 15px
		rgba(0, 0, 0, 0.1), inset 0 5px 15px rgba(255, 255, 255, 0.8);
	border: 1px solid #999;
	overflow: hidden;
	align-items: center;
	justify-content: flex-start;
	flex-direction: row;
	gap: 1vw;
	padding-left: 1.5vw;
	padding-right: 1.5vw;
}

/* .metal-plate::before {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.5) 50%,
		rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0) 100%);
	transform: rotate(30deg);
	animation: shine 5s infinite linear;
	pointer-events: none;
	z-index: 1;
} */
/* @
keyframes shine { 0% {
	transform: translateX(-100%) translateY(-100%) rotate(30deg);
}

100
%
{
transform
:
translateX(
100%
)
translateY(
100%
)
rotate(
30deg
);
}
} */
.button-foot {
	width: 95%;
	margin: 0.5rem 0;
}

.plate-text {
	font-weight: bold;
	color: #333;
	text-align: center;
	line-height: 1.5;
	position: relative;
	z-index: 2;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}

.plate-text .z-label {
	font-family: var(--custom-font);
	font-size: 0.9rem;
	font-weight: bold;
	color: white;
}

.bolt {
	position: absolute;
	width: 12px;
	height: 12px;
	background: radial-gradient(circle at 40% 40%, #f0f0f0, #a0a0a0);
	border-radius: 50%;
	box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
	z-index: 2;
}

.bolt::after {
	content: "";
	position: absolute;
	width: 6px;
	height: 2px;
	background: #666;
	top: 5px;
	left: 3px;
}

.bolt-top-left {
	top: 8px;
	left: 8px;
}

.bolt-top-right {
	top: 8px;
	right: 8px;
}

.bolt-bottom-left {
	bottom: 8px;
	left: 8px;
}

.bolt-bottom-right {
	bottom: 8px;
	right: 8px;
}

.user-info{
	display:flex;
	margin-left: 1rem;
	margin-right: 1rem;
	text-align: left;
}

.user-info .detail-info{
	display:flex;
	border-left:1px solid;
	margin-left: 1rem;
	padding-left: 0.5rem;
	flex-direction: column;
	min-width: 4.5rem;
}

.user-info .detail-info:first-child{
	border:0;
}

.detail-info .z-label {
    font-size: 1rem;
}

.detail-info .z-label:last-child {
    font-weight: bold;
}

.notification-btn {
    border: 0;
    background: transparent;
    display: flex;
    align-items: flex-start;
}

.btn-primary {
	background: #4784DA;
	font-weight: bold;
	border: 1px solid #4784DA;
}



.form-container-border {
	width: 75%;
	margin: 2vh;
	padding-left: 1rem;
	padding-right: 1rem;
	border: 1px solid var(--base-gray);
}

.form-container-border>div {
	margin-top: 1vh;
	margin-bottom: 1vh;
}

.double-col-form {
	display: flex;
	justify-content: space-around;
}

.double-col-form>div>div {
	display: flex;
	justify-content: space-between;
	gap: 5vw;
}

.double-col-form>div>div .z-label:first-of-type {
	font-weight: bold;
}

.label-bold-bigger {
	font-weight: bold;
	font-size: 1rem;
}

.div-button {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.div-switch {
	margin: 0.5rem;
	padding: 0.5rem;
	background-color: var(--base-grey);
}

.z-checkbox-switch-on>.z-checkbox-mold {
	background-color: var(--base-color1);
}

.z-checkbox-switch-off>.z-checkbox-mold {
	background-color: var(--base-color2);
}

.button-outgoing {
	font-size: 1rem !important;
	padding: 0.5rem 1rem;
	color: var(--base-grey);
	background-color: var(--base-color2);
}

.div-line {
	background: var(--base-color1);
	border-radius: 0.25rem;
	padding: 0.5rem;
	margin-top: 1rem;
	display: flex;
	justify-content: center;
	gap: 1rem;
	color: #FFFFFF;
}

.div-2-column {
	display: flex;
	flex-direction: row;
	gap: 2rem;
}

.div-export {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	margin-top: 0.5rem;
}

.div-upload{
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.notification-item:first-child {
    padding-top: 0;
}

.notification-item {
    text-wrap-mode: wrap;
    border-bottom: 1px;
    border-style: inset;
    border-color: var(--base-color2);
    padding-bottom: 1rem;
    overflow-x: hidden;
    width: 285px;
    word-break: break-word;
}

.notification-item.read {
	 background: var(--base-grey);
}

.notification-item.new {
	 background: #f5f4efcc;
}

.notification-item a{
	color:var(--base-color2);
	font-weight:bold;
	border-block-end-style: solid;
}
	
.notif-header {
    background: var(--base-bg);
    color: white;
}

.fw-semibold .z-label {
    font-weight: bold;
    text-decoration: underline;
}

.button-choose {
    background: var(--base-color1);
    color: var(--white);
    border: 3px solid var(--base-yellow);
    border-radius: 1rem;
}

.button-choose:hover {
    background: var(--base-yellow);
    border-color: var(--white);
    color: var(--white);
}

.button-choose:focus {
    background: var(--base-color1);
}

.button-choose:active {
    background: var(--white);
    border-color: var(--base-color2);
    color: var(--base-color1);
}

.email-header {
    background: var(--base-color3);
}

.email-header .z-div {
    margin-left: 0.25rem;
    margin-top: 0.25rem;
    padding-top: 0.2rem;
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px gray;
    border-bottom-style: double;
}

:is(.card-email, .email-header) .z-label {
    font-weight: bold;
    padding-left: 0.5rem;
}

.email-footer {
    background: var(--base-color3);
    padding-bottom: 1rem;
}

.email-header .z-div > .z-button {
    background: linear-gradient(101deg, var(--base-color2), var(--base-color4));
    border-radius: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border: 0;
    pointer-events: none;
}

.cardgrid :is(.z-columns .z-column, .z-listheader .z-listheader-content) {
	text-align: center !important;
}

.card :is(.z-columns .z-column, .z-listheader .z-listheader-content) {
	text-align: center !important;
	background: inherit;
	border-color: white;
}

:is(.z-calendar-selected, .z-calendar-selected:hover){
	color: #FFFFFF;
    background: var(--base-color1);
}

.z-calendar-cell:hover{
	color: #FFFFFF;
	background: var(--base-color2);
}

.btn-default-lama {
  background-color: #2bbbad !important;
  color: #fff; }
  .btn-default-lama:hover {
    background-color: #30cfc0;
    color: #fff; }
  .btn-default-lama:focus, .btn-default-lama.focus {
    -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); }
  .btn-default-lama:focus, .btn-default-lama:active, .btn-default-lama.active {
    background-color: #186860; }
  .btn-default-lama.dropdown-toggle {
    background-color: #2bbbad !important; }
    .btn-default-lama.dropdown-toggle:hover, .btn-default-lama.dropdown-toggle:focus {
      background-color: #30cfc0 !important; }
  .btn-default-lama:not([disabled]):not(.disabled):active, .btn-default-lama:not([disabled]):not(.disabled).active,
  .show > .btn-default-lama.dropdown-toggle {
    -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    background-color: #186860 !important; }
  .btn-default-lama:not([disabled]):not(.disabled):active:focus, .btn-default-lama:not([disabled]):not(.disabled).active:focus,
  .show > .btn-default-lama.dropdown-toggle:focus {
    -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); }

/* override ZK component font */
:is([class*=" z"], [class^="z"], [class*=" z"]) {
	font-family: var(--custom-font) !important;
	font-size: var(--font-size);
}

[class^="z-icon-"], [class*=" z-icon-"] {
	font-family: ZK85Icons, FontAwesome !important;
}

.z-grid-header , .z-listbox-header {
	background-color: var(--base-color2);
}

.custom-tab {
    transition: background-color 0.3s ease;
}

.z-tab-selected .z-tab-text:hover {
    color: black !important;
    background-color: #e0e0e0;
}

input[type="checkbox"]:checked {
    background: var(--base-color1);
    color: #FFFFFF;
}

input[type="checkbox"]:hover {
    border-color: var(--base-color4);
}

.z-messagebox-window {
    background: var(--base-bg);
}

.z-messagebox-window .z-window-content{
	background: #FFFFFF;
}

.z-messagebox-window .z-messagebox-buttons .z-messagebox-button:only-child {
    background: var(--base-color1);
    color: #FFFFFF;
    font-weight: bold;
}

.button-group {
    display: flex;
    gap: 1rem;
}


.button-group-reverse {
    display: flex;
    gap: 1rem;
    flex-direction: row-reverse;
}

html {
  filter: saturate(1.6);
  text-rendering: optimizeSpeed;
   -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
}