/* Seleksi SDM participant theme */
:root {
	--seleksi-primary: #0f6f82;
	--seleksi-accent: #2baab1;
	--seleksi-bg: #eef4f7;
	--seleksi-sidebar: #0f3f4d;
	--seleksi-sidebar-soft: #145467;
	--seleksi-text: #243746;
	--seleksi-muted: #6b7b88;
	--seleksi-border: #dce8ed;
	--seleksi-panel-shadow: 0 18px 46px rgba(27, 52, 68, 0.12);
}

html,
body {
	min-height: 100%;
}

html.fixed .content-body,
html.fixed .inner-wrapper,
html.fixed .sidebar-left {
	padding-top: 72px;
}

body,
html.fixed {
	background: var(--seleksi-bg);
	color: var(--seleksi-text);
}

body,
button,
input,
select,
textarea {
	font-family: "Open Sans", Arial, sans-serif;
}

html .header {
	background: #fff;
	border-bottom: 1px solid var(--seleksi-border);
	box-shadow: 0 8px 28px rgba(27, 52, 68, 0.08);
	min-height: 72px;
}

html .header .logo-container {
	background: #fff;
	border-bottom: 0;
	height: 72px;
	padding: 16px 24px;
}

html .header .logo {
	line-height: 1;
}

html .header .logo img {
	max-width: 100%;
	height: auto;
	max-height: 42px;
}

html .header .toggle-sidebar-left {
	background: var(--seleksi-primary);
	border-radius: 6px;
	color: #fff;
	height: 42px;
	line-height: 42px;
	margin-top: 0;
	right: 16px;
	top: 15px;
	width: 42px;
}

html .sidebar-left,
html.sidebar-left-collapsed .sidebar-left,
html .sidebar-left .nano {
	background: var(--seleksi-sidebar);
	box-shadow: 4px 0 22px rgba(27, 52, 68, 0.18);
}

html .sidebar-left .sidebar-header {
	background: var(--seleksi-sidebar);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	height: 72px;
}

html .sidebar-left .sidebar-title,
html .sidebar-left .sidebar-toggle i {
	color: rgba(255, 255, 255, 0.72);
}

html .sidebar-left .sidebar-title {
	letter-spacing: 0;
	line-height: 72px;
	padding-left: 22px;
}

html .sidebar-left .sidebar-toggle {
	background: var(--seleksi-sidebar-soft);
	border-radius: 0 0 6px 0;
	height: 72px;
	line-height: 72px;
	width: 64px;
}

html .sidebar-left .nano-content {
	padding: 12px 0 28px;
}

html ul.nav-main {
	margin: 0;
	padding: 0 12px;
}

html ul.nav-main > li {
	margin: 6px 0;
}

html ul.nav-main > li > a {
	border-radius: 6px;
	color: rgba(255, 255, 255, 0.72);
	font-weight: 600;
	letter-spacing: 0;
	min-height: 46px;
	padding: 12px 16px;
	transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

html ul.nav-main > li > a:hover,
html ul.nav-main > li.nav-active > a,
html ul.nav-main > li.nav-expanded > a {
	background: var(--seleksi-sidebar-soft);
	color: #fff;
}

html ul.nav-main > li.nav-active > a {
	box-shadow: inset 4px 0 0 var(--seleksi-accent);
}

html ul.nav-main > li > a span {
	font-size: 14px;
}

html ul.nav-main li i {
	color: inherit;
	font-size: 18px;
	margin-right: 12px;
	width: 22px;
}

html .content-body {
	background: var(--seleksi-bg);
	padding: 36px 34px 48px;
}

html .content-body > .row,
html .content-body > form,
html .content-body > section,
html .content-body > .panel {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

html .page-header {
	background: var(--seleksi-primary);
	border-bottom: 4px solid var(--seleksi-accent);
	border-radius: 0;
	box-shadow: none;
	margin: -36px -34px 34px;
	min-height: 82px;
	padding: 0 34px;
}

html .page-header h2 {
	border-bottom-color: var(--seleksi-accent);
	color: #fff;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 82px;
	padding: 0;
}

html .page-header .breadcrumbs,
html .page-header .breadcrumbs a,
html .page-header .breadcrumbs span,
html .page-header .breadcrumbs i {
	color: rgba(255, 255, 255, 0.8);
}

html .page-header .right-wrapper {
	line-height: 82px;
}

html .sidebar-right-toggle,
html .panel-actions {
	display: none !important;
}

html .panel {
	background: #fff;
	border: 0;
	border-radius: 8px;
	box-shadow: var(--seleksi-panel-shadow);
	overflow: hidden;
}

html .panel-heading {
	background: #fff;
	border-bottom-color: #e5edf1;
	padding: 22px 26px;
}

html .panel-heading.bg-danger,
html .panel-heading.bg-primary,
html .panel-heading.bg-success {
	background: var(--seleksi-primary) !important;
}

html .panel-title {
	color: var(--seleksi-text);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0;
}

html .panel-subtitle {
	color: var(--seleksi-muted);
	margin-top: 6px;
}

html .panel-body {
	padding: 24px 26px;
}

html .panel-horizontal .panel-heading {
	border-radius: 8px 0 0 8px;
}

html .panel-horizontal .panel-body {
	padding: 24px 26px;
}

html .panel-footer {
	background: #f8fbfc;
	border-top-color: #e5edf1;
	padding: 18px 26px;
}

html .form-control {
	border-color: #cfdde4;
	border-radius: 6px;
	box-shadow: none;
	min-height: 42px;
}

html .form-control:focus {
	border-color: var(--seleksi-accent);
	box-shadow: 0 0 0 3px rgba(43, 170, 177, 0.14);
}

html .control-label {
	color: #334b5d;
	font-weight: 700;
}

html .btn {
	border-radius: 6px;
	font-weight: 700;
	min-height: 40px;
}

html .btn-primary {
	background: var(--seleksi-accent);
	border-color: var(--seleksi-accent);
}

html .btn-primary:hover,
html .btn-primary:focus {
	background: #238f96;
	border-color: #238f96;
}

html .btn-success {
	background: var(--seleksi-primary);
	border-color: var(--seleksi-primary);
}

html .alert {
	border-radius: 6px;
}

html .alert-info {
	background: #e3f6f8;
	border-color: #b8e4e8;
	color: #236783;
}

html .alert-success {
	background: #e7f7f4;
	border-color: #bee7df;
	color: #236753;
}

html .alert-danger {
	background: #fff0f0;
	border-color: #f0c4c4;
	color: #9d3434;
}

html .table {
	background: #fff;
}

html .table > thead > tr > th {
	background: #f7fbfc;
	border-bottom-color: #dce8ed;
	color: var(--seleksi-text);
	font-weight: 700;
}

html .table > tbody > tr > td {
	border-top-color: #edf3f6;
}

html .fileupload .uneditable-input {
	border-color: #cfdde4;
	border-radius: 6px;
	min-height: 42px;
}

html .select2-container .select2-choice,
html .select2-container-multi .select2-choices {
	border-color: #cfdde4;
	border-radius: 6px;
	min-height: 42px;
}

html .select2-container .select2-choice .select2-chosen {
	line-height: 40px;
}

html .select2-drop-active {
	border-color: var(--seleksi-accent);
}

#formasiDetailWrap .alert {
	margin-bottom: 0;
	line-height: 1.7;
}

/* Dashboard-aligned participant pages */
html .content-body .row {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

html .form-bordered .form-group {
	border-bottom-color: #edf3f6;
	padding-bottom: 18px;
	padding-top: 18px;
}

html .form-bordered .form-group:last-child {
	border-bottom: 0;
}

html .radio-custom {
	margin-bottom: 10px;
}

html .radio-custom label,
html .checkbox-custom label {
	color: var(--seleksi-text);
	font-weight: 600;
	line-height: 1.5;
}

html .radio-primary input[type="radio"]:checked + label:after,
html .checkbox-primary input[type="checkbox"]:checked + label:after,
html .chekbox-primary input[type="checkbox"]:checked + label:after {
	background: var(--seleksi-accent);
	border-color: var(--seleksi-accent);
}

html .required {
	color: #d9534f;
}

html .table.mb-none {
	margin-bottom: 0;
}

html .table > tbody > tr > td {
	color: #3f5363;
	line-height: 1.65;
	padding: 12px 14px;
	vertical-align: middle;
}

html .table > tbody > tr > td:first-child {
	color: var(--seleksi-muted);
	font-weight: 700;
	width: 34%;
}

html .document-table > tbody > tr > td:first-child {
	width: 52px;
}

html .document-table > tbody > tr > td:last-child {
	text-align: right;
	width: 120px;
}

html .label {
	border-radius: 999px;
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	padding: 6px 10px;
}

html .label-danger {
	background: #fee2e2;
	color: #991b1b;
}

html .thumb-info {
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	overflow: hidden;
}

html .thumb-info img {
	background: #eef4f7;
	border-radius: 8px;
}

html .thumb-info .thumb-info-title {
	background: rgba(15, 111, 130, 0.94);
	border-radius: 6px;
	bottom: 14px;
	left: 14px;
	right: 14px;
	padding: 10px 12px;
}

html .thumb-info .thumb-info-inner {
	color: #fff;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0;
}

html .thumb-info .thumb-info-type {
	background: transparent;
	color: rgba(255, 255, 255, 0.82);
	font-size: 12px;
	font-weight: 600;
	padding: 0;
}

html .panel-featured {
	border-top: 0;
}

html .select2-container .select2-choice .select2-arrow {
	background: #f7fbfc;
	border-left-color: #d6e2e8;
	border-radius: 0 6px 6px 0;
}

html .select2-results .select2-highlighted {
	background: var(--seleksi-accent);
}

html .btn-default {
	background: #fff;
	border-color: #cfdde4;
	color: #31566a;
}

html .btn-default:hover,
html .btn-default:focus {
	background: #f4fafb;
	border-color: #b8d7de;
	color: var(--seleksi-primary);
}

html .btn i {
	margin-right: 6px;
}

@media (max-width: 767px) {
	html.fixed .content-body,
	html.fixed .inner-wrapper,
	html.fixed .sidebar-left {
		padding-top: 64px;
	}

	html .header {
		min-height: 64px;
	}

	html .header .logo-container {
		height: 64px;
		padding: 13px 58px 13px 14px;
		width: 100%;
	}

	html .header .logo img {
		max-height: 38px;
	}

	html .header .toggle-sidebar-left {
		top: 11px;
	}

	html .content-body {
		padding: 20px 12px;
	}

	html .page-header {
		margin: -20px -12px 20px;
		min-height: 68px;
		padding: 0 16px;
	}

	html .page-header h2 {
		font-size: 20px;
		line-height: 68px;
	}

	html .page-header .right-wrapper {
		display: none;
	}

	html .panel-heading,
	html .panel-body,
	html .panel-footer {
		padding-left: 16px;
		padding-right: 16px;
	}

	html .table > tbody > tr > td,
	html .table > tbody > tr > td:first-child {
		display: block;
		width: 100%;
	}

	html .table > tbody > tr > td:first-child {
		padding-bottom: 0;
	}

	html .document-table > tbody > tr > td:first-child,
	html .document-table > tbody > tr > td:last-child {
		text-align: left;
		width: 100%;
	}
}