[data-primary="color_2"] {
  --primary: #3a9d94; /*#4885ed;*/
  --secondary: #1491ab;
  --primary-link: #215A86;
  --primary-info: #e9f7f6;
  --secondary-link: #ecfbfb;
  --primary-btn: #2492cc;
  --primary-hover: #5dbccb; /* #1a66e8; */
  --primary-dark: #0e3d8e;
  --primary-header: #334455;
  --primary-header-text: #f2f2f2;
  --primary-heading: var(--bs-yellow);
  --primary-content-body: var(--bs-dark);
  --brand-title: #bdde33;

  --rgba-primary-1: rgba(23, 162, 184, 0.1);
  --rgba-primary-2: rgba(23, 162, 184, 0.2);
  --rgba-primary-3: rgba(23, 162, 184, 0.3);
  --rgba-primary-4: rgba(23, 162, 184, 0.4);
  --rgba-primary-5: rgba(23, 162, 184, 0.5);
  --rgba-primary-6: rgba(23, 162, 184, 0.6);
  --rgba-primary-7: rgba(23, 162, 184, 0.7);
  --rgba-primary-8: rgba(23, 162, 184, 0.8);
  --rgba-primary-9: rgba(23, 162, 184, 0.9); 
}

[data-primary="color_3"] {
  --primary: #5bcfc5;
  --secondary: #709fba;
  --primary-hover: #38bfb3;
  --primary-dark: #217069;
  --rgba-primary-1: rgba(91, 207, 197, 0.1);
  --rgba-primary-2: rgba(91, 207, 197, 0.2);
  --rgba-primary-3: rgba(91, 207, 197, 0.3);
  --rgba-primary-4: rgba(91, 207, 197, 0.4);
  --rgba-primary-5: rgba(91, 207, 197, 0.5);
  --rgba-primary-6: rgba(91, 207, 197, 0.6);
  --rgba-primary-7: rgba(91, 207, 197, 0.7);
  --rgba-primary-8: rgba(91, 207, 197, 0.8);
  --rgba-primary-9: rgba(91, 207, 197, 0.9); }

[data-primary="color_4"] {
  --primary: #39322b; /*#4885ed;*/
  --secondary: #d88153;
  --primary-link: #4c0707;
  --primary-info: #e9f7f6;
  --secondary-link: #ecfbfb;
  --primary-btn: #2492cc;
  --primary-hover: #3a1819; /* #1a66e8; */
  --primary-dark: #0e3d8e;
  --primary-header: #100104;
  --primary-header-text: #f2f2f2; /* 003366 */
  --primary-heading: var(--bs-yellow);
  --primary-content-body: var(--bs-dark);
  --brand-title: #efefef;

  --rgba-primary-1: rgba(33, 6, 6, 0.1);
  --rgba-primary-2: rgba(33, 6, 6, 0.2);
  --rgba-primary-3: rgba(33, 6, 6, 0.3);
  --rgba-primary-4: rgba(33, 6, 6, 0.4);
  --rgba-primary-5: rgba(33, 6, 6, 0.5);
  --rgba-primary-6: rgba(33, 6, 6, 0.6);
  --rgba-primary-7: rgba(33, 6, 6, 0.7);
  --rgba-primary-8: rgba(33, 6, 6, 0.8);
  --rgba-primary-9: rgba(33, 6, 6, 0.9); }

[data-primary="color_5"] {
  --primary: #dc3545;
  --secondary: #709fba;
  --primary-hover: #bd2130;
  --primary-dark: #66121a;
  --rgba-primary-1: rgba(220, 53, 69, 0.1);
  --rgba-primary-2: rgba(220, 53, 69, 0.2);
  --rgba-primary-3: rgba(220, 53, 69, 0.3);
  --rgba-primary-4: rgba(220, 53, 69, 0.4);
  --rgba-primary-5: rgba(220, 53, 69, 0.5);
  --rgba-primary-6: rgba(220, 53, 69, 0.6);
  --rgba-primary-7: rgba(220, 53, 69, 0.7);
  --rgba-primary-8: rgba(220, 53, 69, 0.8);
  --rgba-primary-9: rgba(220, 53, 69, 0.9); }

[data-primary="color_6"] {
  --primary: #fd7e14;
  --secondary: #dc6502;
  --primary-hover: #dc6502;
  --primary-dark: #773701;
  --rgba-primary-1: rgba(253, 126, 20, 0.1);
  --rgba-primary-2: rgba(253, 126, 20, 0.2);
  --rgba-primary-3: rgba(253, 126, 20, 0.3);
  --rgba-primary-4: rgba(253, 126, 20, 0.4);
  --rgba-primary-5: rgba(253, 126, 20, 0.5);
  --rgba-primary-6: rgba(253, 126, 20, 0.6);
  --rgba-primary-7: rgba(253, 126, 20, 0.7);
  --rgba-primary-8: rgba(253, 126, 20, 0.8);
  --rgba-primary-9: rgba(253, 126, 20, 0.9); }

[data-primary="color_7"] {
  --primary: #ffc107;
  --secondary: #709fba;
  --primary-hover: #d39e00;
  --primary-dark: #6d5200;
  --rgba-primary-1: rgba(255, 193, 7, 0.1);
  --rgba-primary-2: rgba(255, 193, 7, 0.2);
  --rgba-primary-3: rgba(255, 193, 7, 0.3);
  --rgba-primary-4: rgba(255, 193, 7, 0.4);
  --rgba-primary-5: rgba(255, 193, 7, 0.5);
  --rgba-primary-6: rgba(255, 193, 7, 0.6);
  --rgba-primary-7: rgba(255, 193, 7, 0.7);
  --rgba-primary-8: rgba(255, 193, 7, 0.8);
  --rgba-primary-9: rgba(255, 193, 7, 0.9); }

[data-primary="color_8"] {
  --primary: #3a9d94; /*#4885ed;*/
  --secondary: #4c98a4;
  --primary-link: #1f6772;
  --primary-info: #e9f7f6;
  --secondary-link: #ecfbfb;
  --primary-btn: #2492cc;
  --primary-hover: #5dbccb; /* #1a66e8; */
  --primary-dark: #0e3d8e;
  --primary-header: #334455;
  --primary-header-text: #f2f2f2;
  --primary-heading: var(--bs-yellow);
  --primary-content-body: var(--bs-dark);
  --brand-title: #bdde33;

  --rgba-primary-1: rgba(23, 162, 184, 0.1);
  --rgba-primary-2: rgba(23, 162, 184, 0.2);
  --rgba-primary-3: rgba(23, 162, 184, 0.3);
  --rgba-primary-4: rgba(23, 162, 184, 0.4);
  --rgba-primary-5: rgba(23, 162, 184, 0.5);
  --rgba-primary-6: rgba(23, 162, 184, 0.6);
  --rgba-primary-7: rgba(23, 162, 184, 0.7);
  --rgba-primary-8: rgba(23, 162, 184, 0.8);
  --rgba-primary-9: rgba(23, 162, 184, 0.9); 
}

[data-primary="color_9"] {
  --primary: #3a9d94; /*#4885ed;*/
  --secondary: #4c98a4;
  --primary-link: #1f6772;
  --primary-info: #e9f7f6;
  --secondary-link: #ecfbfb;
  --primary-btn: #2492cc;
  --primary-hover: #5dbccb; /* #1a66e8; */
  --primary-dark: #0e3d8e;
  --primary-header: #ecfbfb;
  --primary-header-text: 003366;
  --primary-heading: var(--bs-yellow);
  --primary-content-body: var(--bs-dark);
  --brand-title: #bdde33;

  --rgba-primary-1: rgba(23, 162, 184, 0.1);
  --rgba-primary-2: rgba(23, 162, 184, 0.2);
  --rgba-primary-3: rgba(23, 162, 184, 0.3);
  --rgba-primary-4: rgba(23, 162, 184, 0.4);
  --rgba-primary-5: rgba(23, 162, 184, 0.5);
  --rgba-primary-6: rgba(23, 162, 184, 0.6);
  --rgba-primary-7: rgba(23, 162, 184, 0.7);
  --rgba-primary-8: rgba(23, 162, 184, 0.8);
  --rgba-primary-9: rgba(23, 162, 184, 0.9); 
}

[data-primary="color_10"] {
  --primary: #17a2b8;
  --secondary: #709fba;
  --primary-hover: #117a8b;
  --primary-dark: #062a30;
  --rgba-primary-1: rgba(23, 162, 184, 0.1);
  --rgba-primary-2: rgba(23, 162, 184, 0.2);
  --rgba-primary-3: rgba(23, 162, 184, 0.3);
  --rgba-primary-4: rgba(23, 162, 184, 0.4);
  --rgba-primary-5: rgba(23, 162, 184, 0.5);
  --rgba-primary-6: rgba(23, 162, 184, 0.6);
  --rgba-primary-7: rgba(23, 162, 184, 0.7);
  --rgba-primary-8: rgba(23, 162, 184, 0.8);
  --rgba-primary-9: rgba(23, 162, 184, 0.9); }

[data-primary="color_11"] {
  --primary: #94618E;
  --secondary: #442240;
  --primary-dark: #382435;
  --primary-link: #be40af;
  --primary-info: #e9f7f6;
  --secondary-link: #ecfbfb;
  --primary-btn: #94618E;
  --primary-hover: #442240;
  --brand-title: #f2f2f2;
  
  --primary-heading: var(--bs-yellow);
  --primary-content-body: var(--bs-dark);
  --primary-header: #72406c;
  --primary-header-text: #f2f2f2; /* 003366 */

  --rgba-primary-1: rgba(148, 97, 142, 0.1);
  --rgba-primary-2: rgba(148, 97, 142, 0.2);
  --rgba-primary-3: rgba(148, 97, 142, 0.3);
  --rgba-primary-4: rgba(148, 97, 142, 0.4);
  --rgba-primary-5: rgba(148, 97, 142, 0.5);
  --rgba-primary-6: rgba(148, 97, 142, 0.6);
  --rgba-primary-7: rgba(148, 97, 142, 0.7);
  --rgba-primary-8: rgba(148, 97, 142, 0.8);
  --rgba-primary-9: rgba(148, 97, 142, 0.9); }

[data-primary="color_12"] {
  --primary: #343a40;
  --secondary: #709fba;
  --secondary-link: #ecfbfb;
  --primary-info: #e9f7f6;
  --primary-link: #4b8e8b;
  --primary-btn: #2492cc;
  --primary-hover: #1d2124;
  --primary-dark: black;

  --primary-header: #4069b3;
  --primary-header-text: #f2f2f2; /* 003366 */
  --primary-heading: var(--bs-yellow);
  --primary-content-body: var(--bs-dark);
  --brand-title: #efefef;

  --rgba-primary-1: rgba(52, 58, 64, 0.1);
  --rgba-primary-2: rgba(52, 58, 64, 0.2);
  --rgba-primary-3: rgba(52, 58, 64, 0.3);
  --rgba-primary-4: rgba(52, 58, 64, 0.4);
  --rgba-primary-5: rgba(52, 58, 64, 0.5);
  --rgba-primary-6: rgba(52, 58, 64, 0.6);
  --rgba-primary-7: rgba(52, 58, 64, 0.7);
  --rgba-primary-8: rgba(52, 58, 64, 0.8);
  --rgba-primary-9: rgba(52, 58, 64, 0.9); }

[data-primary="color_13"] {
  --primary: #2a2a2a;
  --secondary: #709fba;
  --primary-link: #2a2a2a;
  --primary-hover: #111111;
  --primary-dark: black;
  --primary-header: #fcfcfd;
  --primary-content-body: var(--bs-white);
  --rgba-primary-1: rgba(42, 42, 42, 0.1);
  --rgba-primary-2: rgba(42, 42, 42, 0.2);
  --rgba-primary-3: rgba(42, 42, 42, 0.3);
  --rgba-primary-4: rgba(42, 42, 42, 0.4);
  --rgba-primary-5: rgba(42, 42, 42, 0.5);
  --rgba-primary-6: rgba(42, 42, 42, 0.6);
  --rgba-primary-7: rgba(42, 42, 42, 0.7);
  --rgba-primary-8: rgba(42, 42, 42, 0.8);
  --rgba-primary-9: rgba(42, 42, 42, 0.9); }

[data-primary="color_14"] {
  --primary: #3a9d94; /*#4885ed;*/
  --secondary: #4c98a4;
  --primary-link: #1f6772;
  --primary-info: #e9f7f6;
  --secondary-link: #ecfbfb;
  --primary-btn: #2492cc;
  --primary-hover: #5dbccb; /* #1a66e8; */
  --primary-dark: #0e3d8e;
  --primary-header: #1f3c3a;
  --primary-header-text: #f2f2f2; /* 003366 */
  --primary-heading: var(--bs-yellow);
  --primary-content-body: var(--bs-dark);
  --brand-title: #efefef;

  --rgba-primary-1: rgba(23, 162, 184, 0.1);
  --rgba-primary-2: rgba(23, 162, 184, 0.2);
  --rgba-primary-3: rgba(23, 162, 184, 0.3);
  --rgba-primary-4: rgba(23, 162, 184, 0.4);
  --rgba-primary-5: rgba(23, 162, 184, 0.5);
  --rgba-primary-6: rgba(23, 162, 184, 0.6);
  --rgba-primary-7: rgba(23, 162, 184, 0.7);
  --rgba-primary-8: rgba(23, 162, 184, 0.8);
  --rgba-primary-9: rgba(23, 162, 184, 0.9); }

[data-primary="color_15"] {
  --primary: #4cb32b;
  --secondary: #709fba;
  --primary-link: #4cb32b;
  --primary-hover: #3b8a21;
  --primary-dark: #18380d;
  --primary-header: #fcfcfd;
  --primary-content-body: var(--bs-white);
  --rgba-primary-1: rgba(76, 179, 43, 0.1);
  --rgba-primary-2: rgba(76, 179, 43, 0.2);
  --rgba-primary-3: rgba(76, 179, 43, 0.3);
  --rgba-primary-4: rgba(76, 179, 43, 0.4);
  --rgba-primary-5: rgba(76, 179, 43, 0.5);
  --rgba-primary-6: rgba(76, 179, 43, 0.6);
  --rgba-primary-7: rgba(76, 179, 43, 0.7);
  --rgba-primary-8: rgba(76, 179, 43, 0.8);
  --rgba-primary-9: rgba(76, 179, 43, 0.9); }

.nav-header span.brand-title  { margin-top:0; }
.page-background { position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:-2; }
.page-background-2 { position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:-1; }
.header { background: var(--primary-header); }
.header-left .dashboard_bar > * { color: var(--primary-header-text); text-shadow:1px 1px 1px #999; }
.fs70,.fs70 > * { font-size:70% !important; }
.fs80,.fs80 > * { font-size:80% !important; }
.fs85,.fs85 > * { font-size:85% !important; }
.fs90,.fs90 > * { font-size:90% !important; }
.fs92,.fs92 > * { font-size:92% !important; }
.fs115,.fs115 > * { font-size:115% !important; }
.fs125,.fs125 > * { font-size:125% !important; }
.fs135,.fs135 > * { font-size:135% !important; }
.fs150,.fs150 > * { font-size:150% !important; }

body,#main-wrapper,.authincation,.page-background-2 {
	background: var(--rgba-primary-2);
	color: var(--primary-content-body);
}
body.free {
	background: none;
}

ul.disc li {
  list-style: disc;
}
ol.number li, ol.decimal li {
  list-style: decimal;
}

.modform-frm {
	background-color: var(--primary-info);
	position: relative;
	padding: 1rem;
	margin-bottom: 1rem;
	color: #6c557f;
	border: 1px solid #e9ddf2;
	border-radius: 0.75rem;	
}
  .modform-frm .alert-link {
    color: #0f1c08; }
  [data-theme-version="dark"] .modform-frm {
    background: rgba(180, 141, 211, 0.1);
    border-color: rgba(180, 141, 211, 0.1); }

h2.title, h3.title {
	border-color: #e6e6e6;
	position: relative;
	background: var(--secondary);
	color: var(--bs-white);
	padding: 1rem 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center; }
	@media only screen and (max-width: 575px) {
	  h2.title, h3.title {
		padding: 1.25rem 1rem 1.25rem; } }
	[data-theme-version="dark"] h2.title, h3.title {
	  border-color: #2e2e42; }
.table-title {
	background: var(--secondary);	
	color: var(--bs-white);
	font-size:125%;
	padding: 1rem 1.5rem;
}	
.table-subtitle {
	border-color: #e6e6e6;
	position: relative;
	background: var(--primary-hover);
	color: var(--bs-white);
	padding: 1rem 1.5rem;
	align-items: center; 
	margin-bottom: var(--bs-card-title-spacer-y); }
	@media only screen and (max-width: 575px) {
	  h2.title, h3.title {
		padding: 1.25rem 1rem 1.25rem; } }
	[data-theme-version="dark"] h2.title, h3.title {
	  border-color: #2e2e42; }
h2.title a,h3.title a,.table-title a {
	color:#dff5c8;
}
.tab-content h2.title, .tab-content h3.title {
	background: var(--primary-hover);
	color: var(--bs-white);
	padding: 0.75rem 1.875rem 0.675rem;
}
.tab-content h2.title i.bi, .tab-content h3.title i.bi,
.table-subtitle i.bi {
	height: auto;
	line-height: 1px;
	width: auto;
	font-size: 24px;
	margin-right:1.25rem;
	padding: 0;
}
.table tbody td .alert { padding:0.2rem 0.2rem; font-size:92%; }
div.odd,.table .odd td {
	background-color: var(--bs-table-striped-bg) !important;
	color:#3c3c3c !important;
}
div.odd,.table .event td {
	background-color: var(--bs-table-bg) !important;
	color:#3c3c3c !important;
}

[data-theme-version="dark"] div.odd,[data-theme-version="dark"] .table .odd td {
    background-color: #171622 !important; 
	color:#f2f2f2 !important;
}
[data-theme-version="dark"] div.even,[data-theme-version="dark"] .table .even td {
    background-color: #222222; 
	color:#f2f2f2;
}
a.text-primary {
  color: var(--primary-link) !important; 
}
.thead-primary a.text-primary {
	color: #f0eead !important;
}
.thead-primary a.text-warning {
	color: rgba(248,247,221,1) !important;
}
.textbox,.textbox_half,.textbox_short,.textbox_fit {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #444;
  background-color: #fAfAfA;
  background-clip: padding-box;
  border: 1px solid #767676;
  appearance: none;
  border-radius: 0.75rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 
}
.textbox { width:80%; min-width:200px; }
.textbox_half { width:40%; min-width:140px; }
.textbox_short { width:15%; min-width:120px; }
.textbox_fit { 
	min-width:70px; 
	field-sizing: content;
}

.custom-select { 
	width: max-content;
	width: min-content;
	width: fit-content(25em);
	width: auto !important;
	border: 1px solid #e2e2e2;
	padding: .3rem 0.5rem;
	color: #715d5d;
	border-radius: 5px;
}
.label_req { font-weight:bold; }
.petunjuk { 
	font-style: italic !important;
	font-size:92%;
}
input::placeholder {
  opacity: 0.5;
  font-size:92%;
  color: #888;
}
i.bi { margin-right:0.24rem; }
@-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } 
.css3-blink { -webkit-animation-name: blinker;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);-webkit-animation-duration: 3s;text-decoration:blink; !important;font-size:100%; }
body > * {
	scrollbar-width: thin;
/*
	scrollbar-color: var(--primary-link) var(--rgba-primary-8);
*/
	scrollbar-color: var(--primary-link) var(--rgba-primary-3);
	
}
::-webkit-scrollbar-thumb {
  background: var(--sidebar-bg) 
}

@media only screen and (max-width: 767px) {
	.header-left .dashboard_bar {
		display: flex;
		font-size:100%;
	} 
	.textbox_short { width:25%; min-width:120px; }
}
@media print {
	body { background:#fff; }
	.dlabnav { display:none; }
	.nav-header { background-color:#fff; }
	.header { margin-left:0px; background-color:#fff; }
	.nav-header .brand-title { color:#000; }
	.header-left { min-width:400px; }
	.header-left .dashboard_bar > * {
		color:#000;
	}
	.header-right { display:none; }
	.footer { background:transparent; color#666 !important;}
	.page-background,.page-background-2 { display:none; }
	#my-breadcrumb { display:none; }
	.content-body { margin:0.5cm 0px; }
	.content-body .container-fluid { padding:0px; }
	h2.title,h3.title { background: #fff; border-bottom:1px solid #000; color:#000; }
	.table .thead-primary th { background:#fff; color:#2456b2; }
}