body {
	height: 100%;
	font-family: 'Lato', sans-serif;
	font-size: 13px;
	/* color: #555555; */
	width: auto;
}

h1 {
	color: #cc042fe5;
}

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
	background-color: #cfff0717 !important;
}

div.dt-container>div.row {
    margin-bottom: .5rem !important;
}

.row {
	margin-right: -15px !important;
    margin-left: -15px !important;
}

div.dt-container .dt-paging .dt-paging-button {
    padding: 0 !important;
    margin-left: 0 !important;
}

.logo {
	margin-bottom: 0px;
	justify-content: center;
	display: flex;
	align-items: center;
}

.logo-image {
	max-height: 60px;
	max-width: 70px;
	float: none;
	text-align: center;
	margin-bottom: 0px;
	justify-content: center;
	display: flex;
}

.title {
	text-align: center;
}

.title h1 {
	margin-top: 10px;
}

.qty {
	background-color: lightgoldenrodyellow;
}

#success,
#error {
	display: none;
	text-align: right;
}

#success {
	color: green;
}

#error {
	color: red;
}

/* th {
	background-color: #f2f2f2;
} */

.user-table {
	margin-top: 20px;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 30%;
	text-align: center;
}

.main-content {
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width: 70%;
}


.form-content {
	background-color: #fff;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 30px;
	padding-right: 30px;
	border-radius: 10px;
	box-shadow: 0px 0px 3px 0px #c1c1c1;
	height: auto;
}

button, .buttons, .btn, .modal-footer .btn+.btn {
    margin-bottom: 0 !important;
}

.grand-total {
	margin-top: 20px;
	border-radius: 10px;
	box-shadow: inset 0px 0px 5px 0px #6900ff;
	padding: 20px;
}

.bisque {
	background-color: transparent !important;
	color: rgba(105, 0, 255, 0.81);
	border-color: rgba(105, 0, 255, 0.81);
}

.col-form-label-lg {
	padding-bottom: 0px !important;
}

#btn_update {
	display: none;
}

thead {
	cursor: pointer;
	-moz-user-select: none;
	-webkit-user-select: none;
	/*
	 Introduced in Internet Explorer 10.
	 See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
	*/
	-ms-user-select: none;
	user-select: none;
}

.column_sort,
.column_sort_svp,
.sort_both,
.sort_asc,
.sort_desc {
	background-repeat: no-repeat;
	background-position: center right;
	padding-right: 14px !important;
}

.sort_both,
.sort_asc,
.sort_desc {
	background-image: url("../images/sort_both.png");
}

.sort_asc {
	background-image: url("../images/sort_asc.png");
}

.sort_desc {
	background-image: url("../images/sort_desc.png");
}

@media only screen and (max-width: 1199px) {
	.user-table {
		width: 50%;
	}

	.main-content {
		width: 85%;
	}
}

@media only screen and (max-width: 999px) {
	.user-table {
		width: 50%;
	}

	.main-content {
		width: 85%;
	}
}

@media only screen and (max-width: 707px) {
	.user-table {
		width: 50%;
	}

	.main-content {
		width: 97%;
	}
}

@media only screen and (max-width: 450px) {
	.user-table {
		width: 80%;
	}
}

.dataTables_empty {
	text-align: center;
}

.gradient-text {
	font-weight: 700;
	background-image: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	animation: animateGradient 10s linear infinite alternate, animatePosition 10s linear infinite alternate;
	transition: opacity .3s ease-in-out;
}

@keyframes animateGradient {

	/* 0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    } */
	0% {
		background-position: 0 0;
	}

	50% {
		background-position: 400% 0;
	}

	100% {
		background-position: 0 0;
	}
}

@keyframes animatePosition {
	0% {
		background-size: 200% 100%;
	}

	50% {
		background-size: 200% 100%;
	}

	100% {
		background-size: 200% 100%;
		background-position: -100% 50%;
	}
}


/* CSS Buttons */
.button-33 {
	background-color: #c2fbd7;
	border-radius: 100px;
	box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset, rgba(44, 187, 99, .15) 0 1px 2px, rgba(44, 187, 99, .15) 0 2px 4px, rgba(44, 187, 99, .15) 0 4px 8px, rgba(44, 187, 99, .15) 0 8px 16px, rgba(44, 187, 99, .15) 0 16px 32px;
	color: green;
	cursor: pointer;
	display: inline-block;
	font-family: CerebriSans-Regular, -apple-system, system-ui, Roboto, sans-serif;
	padding: 7px 20px;
	text-align: center;
	text-decoration: none;
	transition: all 250ms;
	border: 0;
	font-size: 16px;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

.button-33:hover {
	box-shadow: rgba(44, 187, 99, .35) 0 -25px 18px -14px inset, rgba(44, 187, 99, .25) 0 1px 2px, rgba(44, 187, 99, .25) 0 2px 4px, rgba(44, 187, 99, .25) 0 4px 8px, rgba(44, 187, 99, .25) 0 8px 16px, rgba(44, 187, 99, .25) 0 16px 32px;
	color: green;
}


.button-34 {
	display: inline-block;
	outline: none;
	cursor: pointer;
	font-weight: 500;
	border-radius: 3px;
	/* padding: 0 16px; */
	border-radius: 4px;
	color: #fff;
	background: #6200ee;
	/* line-height: 1.15; */
	font-size: 14px;
	height: 36px;
	word-spacing: 0px;
	letter-spacing: .0892857143em;
	text-decoration: none;
	text-transform: uppercase;
	min-width: 64px;
	border: none;
	text-align: center;
	box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
	transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.button-34:hover {
	background: rgb(98, 0, 238);
	box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
}

/* DataTable Custom Configuration */
.dataTables_wrapper .dataTables_length select {
	width: 60px;
}


.button-login {
	min-width: 150px;
	min-height: auto;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0px;
	/* font-weight: 700; */
	color: white !important;
	background: rgba(221, 3, 50, 0.898);
	background: linear-gradient(90deg, rgba(204, 36, 72, 0.898) 0%, rgba(204, 4, 47, 0.898) 100%);
	border: none;
	border-radius: 1000px;
	box-shadow: 2px 2px 2px rgb(155, 2, 35);
	transition: all 0.3s ease-in-out 0s;
	cursor: pointer;
	outline: none;
	position: relative;
	padding: 10px;
}

.button-login::before {
	content: '';
	border-radius: 1000px;
	min-width: calc(100% + 12px);
	min-height: calc(100% + 12px);
	border: 3px solid rgba(204, 4, 47, 0.898);
	;
	box-shadow: 0 0 20px rgba(204, 4, 47, 0.898);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: all .3s ease-in-out 0s;
}

.button-login:hover,
.button-login:focus {
	color: #fdfdfd;
	transform: translateY(-6px);
	box-shadow: 0 0 0px;
}

.button-login:hover::before,
.button-login:focus::before {
	opacity: 1;
}

.button-login::after {
	content: '';
	width: 30px;
	height: 30px;
	border-radius: 100%;
	border: 6px solid rgba(204, 4, 47, 0.898);
	;
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: ring 1.5s infinite;
}

.button-login:hover::after,
.button-login:focus::after {
	animation: none;
	display: none;
}

@keyframes ring {
	0% {
		width: 30px;
		height: 30px;
		opacity: 1;
	}

	100% {
		width: 200px;
		height: 200px;
		opacity: 0;
	}
}

/* New Memo Page */
.editableDropDown {
	font-size: inherit !important;
	height: auto !important;
}

.editableNumberInput {
	font-size: inherit !important;
	height: auto !important;
}

.bootstrap-select {
	border: 1px solid #ced4da !important;
}

.memoTypeSelector {
	background-color: #fff;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 30px;
	padding-right: 30px;
	border-radius: 10px;
	box-shadow: 0px 0px 3px 0px #c1c1c1;
	height: auto;
}

.wrapper-module {
	background-image: linear-gradient(to right, red, purple);
	border-radius: 10px;
	padding: 3px;
}

.valid-feedback,
.invalid-feedback {
	font-size: 90% !important;
}

.dropdown-item:focus,
.dropdown-item:hover {
	color: white;
	text-decoration: none;
	background-color: #067bf1;
}

.text-shadow {
	text-shadow: 1px 1px 1px #15233e, 1px 2px 1px #15233e, 1px 3px 1px #15233e, 1px 4px 1px #15233e, 1px 5px 1px #15233e, 1px 6px 1px #15233e, 1px 10px 5px rgba(16, 16, 16, 0.5), 1px 15px 10px rgba(16, 16, 16, 0.4), 1px 20px 30px rgba(16, 16, 16, 0.3), 1px 25px 50px rgba(16, 16, 16, 0.2);
}

.pending-task {
	background-image: linear-gradient(to right, #103566 0%, #073d66 100%);
	border: 0px;
}

.message-container {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 1000;
	/* Ensure the toast is displayed above other content */
}

#sidebar-menu .fa-solid,
.fa-brands {
	margin-right: 5px;
}

table.dataTable tbody th,
table.dataTable tbody td {
	padding: 5px 5px;
}

.text-muted {
	color: #373b3e !important;
}

.alert {
	padding: inherit !important;
	margin-bottom: 1rem;
	border: 1px solid transparent !important;
	border-radius: 0.25rem !important;
}

.alert-success {
	color: #155724 !important;
	background-color: #d4edda !important;
	border-color: #c3e6cb !important;
}

.alert-danger {
	color: #721c24 !important;
	background-color: #f8d7da !important;
	border-color: #f5c6cb !important;
}

/* CSS to style the modal preloader */
.modal-preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.7);
	/* Adjust opacity as needed */
	z-index: 9999;
	/* Set a high z-index to ensure it appears above other elements */
}

.modal-preloader_status {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* Additional styling for the preloader status */
}

/* Adjust the width of the search box */
.fixed-table-toolbar .search {
	width: 100%;
	/* Set width to 100% */
	box-sizing: border-box;
	/* Include padding and border in the width */
}

.th-inner {
	color: rgb(155, 2, 35);
}

#yesNoModal .modal-danger .modal-header {
	background-color: #ff3547;
	color: white;
}

#yesNoModal .modal-danger .modal-header span {
	color: white;
}

#yesNoModal .modal-danger .modal-header,
#successModal .modal-success .modal-header {
	border: 0;
	-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

#yesNoModal .modal-danger .modal-body .alert-icon {
	color: var(--danger);
}

/* Success Modal and Success Modal with Yes/No Button */
#successModal .modal-success .modal-header,
#successModalYesNo .modal-success .modal-header {
	background-color: var(--success);
	color: white;
}

#successModal .modal-success .modal-header span,
#successModalYesNo .modal-success .modal-header span {
	color: white;
}

#successModal .modal-success .modal-header,
#successModal .modal-success .modal-header,
#successModalYesNo .modal-success .modal-header,
#successModalYesNo .modal-success .modal-header {
	border: 0;
	-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

#successModal .modal-success .modal-body .alert-icon,
#successModalYesNo .modal-success .modal-body .alert-icon {
	color: var(--success);
}

/* Error Modal */
#errorModal .modal-danger .modal-header {
	background-color: var(--danger);
	color: white;
}

#errorModal .modal-danger .modal-header span {
	color: white;
}

#errorModal .modal-danger .modal-header,
#errorModal .modal-danger .modal-header {
	border: 0;
	-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

#errorModal .modal-danger .modal-body .alert-icon {
	color: var(--danger);
}

/* user define color */

:root {
	--lccolor: #003c5c;
	/* Left Background */
	--bgcolor: #F7F7F7;
	/* Right_Col And Form Background */
	--right-txt-color: #161616;
	/* Right Text */
	--bcolor: lightgray;
	/* Table Border */
	--tabletxtcolor: #161616;
	/* Table Text Color */
	--form-txt-color: #161616;
	/* Form Text Color */
	--label-color: #161616;
	/* Label */
	--form-control-color: rgb(247, 243, 243);
	/* Form-Control-Border */
	--input-group-txt-color: lightgray;
	/* Input-Group Text Color */
}

.left_col {
	background-color: #0c343d;
	color: #dd7e6b;
  }

  .main_container, html {
	background-color: #0c343d;
  }
  
  .left_col a {
	color: #e79382 !important;
  }

/* 
  
  .right_col, footer {
	background-color: white !important;
	color: black;
  }
  
  form.form-content {
	color: black;
	background-color:transparent;
	border: 1px solid #0288d1;
  }
  
  select.form-control {
	background-color: #ede7f6;
  }
  
  div.memoTypeSelector {
	background-color: #ede7f6;
  }
  
  input.form-control {
	background-color: transparent;
  }
  
  input.form-control:disabled, select.form-control:disabled {
	background-color: rgb(0, 0, 0, 0.05);
  }
  
  button.btn.dropdown-toggle.bs-placeholder.btn-light {
	background-color: #fff8e1;
	
  }
  
  table, td, th, tr, .dataTable th, .dataTable tr, .dataTable td {
	color: black;
	border: none;
	border-collapse: collapse !important;
  }
  
  .table-bordered th, .table-bordered tr, .table-bordered td {
	color: black;
	border: 1px solid rgb(0, 0, 0, 0.3) !important;
  }
  
  div.filter-option-inner-inner {
	color: black;
  }
  
  button.btn.dropdown-toggle.btn-light {
	color: black;
  }
  
  
  a.dropdown-item:hover, a.dropdown-item.selected {
	color: white;
  }
  .dropdown-menu {
	color: white;
  } */

/* .form-group:not(.modal .form-group) {
	margin-bottom: 5px;
}

.right_col {
	color: var(--right-txt-color);
}

table:not(.table-condensed, .modal table) {
	border-color: var(--bcolor);
}

table:not(.table-condensed) tr {
	border-color: var(--bcolor);
}

table:not(.table-condensed) td {
	border-color: var(--bcolor);
}

table:not(.table-condensed) th {
	border-color: var(--bcolor);
}

table.dataTable>thead>tr>th,
table.dataTable>thead>tr>td {
	border-bottom: 1px solid rgba(0, 0, 0, 0.3) !important;
} */

/* h2 {
	color: var(--bcolor);
  } */

/* body .container.body .right_col {
	background: var(--bgcolor) !important;
}

footer {
	background: var(--bgcolor) !important;
	color: #c3e6cb;
}

.left_col,
.nav_title,
.main_container {
	background-color: var(--lccolor);
}

.right_col table {
	color: var(--tabletxtcolor) !important;
}

form {
	background-color: var(--bgcolor) !important;
	color: var(--form-txt-color);
	padding-top: 10px;
	padding-bottom: 10px;
}

.modal form,
.popup-form form {
	background-color: white !important;
	color: black;
	padding-top: 10px;
	padding-bottom: 10px;
}

.modal form table th,
.modal form table td {
	border-color: gray !important;
}

.modal .form-control {
	border-color: gray;
}

.modal form label,
.popup-form form label {
	color: black;
}

label {
	color: var(--label-color);
}

.dataTables_info,
.dataTables_paginate,
.paginate_button {
	color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
	color: lightgray !important;
}

.form-control:not(.popup-form .form-control, .modal .form-control) {
	background-color: var(--form-control-color);
	border-color: #8ea0fc;
}


.input-group-text {
	background-color: var(--input-group-txt-color);
	border-color: var(--input-group-txt-color);
}

.bootstrap-select .btn-light {
	background-color: var(--form-control-color) !important;
	border-color: var(--form-control-color) !important;
}

.bootstrap-select .dropdown-menu.inner {
	background-color: var(--form-control-color) !important;
}

.form-control:not(.popup-form .form-control):focus {
	background-color: var(--form-control-color) !important;
}

.nav_menu {
	background-color: var(--form-control-color);
} */

.only_print {
	display: none;
}

.table-responsive.loading {
    position: relative;
    min-height: 100px;
}

.table-responsive.loading::after {
    content: "Loading...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bootstrap-select .dropdown-menu .inner li a span.text {
  display: block;
  white-space: normal !important;
}

.bootstrap-select .dropdown-menu .inner li a small.text-muted {
  display: block;
  white-space: normal !important;
  word-wrap: break-word;
}

.bootstrap-select .dropdown-menu li small {
    padding-left: 0;
}