@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif&display=swap');

:root {
	--primary: #4664E6;
	--primaryDark: #2244E1;
	--primaryLight: #0096FF;
	--accent: #8FD9A8;
	--accentDark: #28B5B5;

	--light: #FFF;
	--dark: #333;
}

* {
	box-sizing: border-box;
	font-family: 'Work Sans', sans-serif;
	font-family: 'Sen', sans-serif;
	text-rendering: optimizeLegibility;
	font-size: 15px;
	font-weight: 400;
}

body {
	margin: 0;
	line-height: 1.5;
	color: #333;
	background: #F9FAFA;
}

.font-1 {
	font-family: 'Work Sans';
}

.font-2 {
	font-family: 'Sen';
}

.font-3 {
	font-family: 'PT Serif';
}

.select-0 {
	user-select: none;
}

.bx {
	position: relative;
	top: 1px;
}

header {
	background-color: var(--light);
	border-bottom: solid 1px #DDD;
	box-shadow: 0 2px 5px #88888810;
}

header + section {
	margin-top: 50px;
	margin-bottom: 40px;
}

.card-custom {
	border: 0;
	background-color: var(--light);
	box-sizing: border-box;
	padding: 20px;
	min-height: 100px;
	margin-bottom: 15px;
	border-radius: 6px;
	box-shadow: 0 2px 5px #88888810;
	overflow: hidden;
	cursor: default;
	transition: all .2s ease-in-out;
}

.answer {
	padding: 0;
	margin: 0;
	margin-top: 20px;
}

.answer li {
	position: relative;
	list-style: none;
	border: solid 2px #EEE;
	border-radius: 8px;
	height: 42px;
	line-height: 39px;
	padding: 0 12px 0 45px;
	margin-bottom: 10px;
	user-select: none;
	cursor: pointer;
	transition: all .2s ease-in-out;
}

.answer li:before {
	content: "";
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border: solid 2px #33333340;
	border-radius: 8px;
	background-color: transparent;
	transition: all .2s ease-in-out;
}

.answer li:hover,
.answer li.active:hover {
	border-color: var(--bs-primary);
	background-color: var(--bs-primary);
	color: var(--light);
}

.answer li.active {
	color: var(--primary);
	border-color: var(--primary);
	background-color: #4664E650;
}

.answer li:hover:before {
	border-color: var(--primary);
	background-color: var(--light);
}

.answer li.active:before {
	border-color: var(--primary);
	background-color: var(--primary);
}

.answer li.active:after {
	content: "";
	position: absolute;
	left: 17px;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	border-radius: 4px;
	background-color: var(--light);
}

.pagination-prev.disabled,
.pagination-next.disabled {
	background-color: #ddeaff60 !important;
}

/* bootstrap custom */
.btn {
	font-size: 15px !important;
	border-radius: 10px;
	padding-left: .8rem;
	padding-right: .8rem;
	padding-bottom: 0.35rem;
}

.btn:hover {
	color: #777;
	border-color: #DDD;
}

.btn-sm {
	padding: 0.25rem 0.6rem;
	font-size: 0.8rem !important;
	border-radius: 8px;
}

.btn-action.disabled,
.btn-action:disabled {
	border: 0 !important;
}

.btn-group .dropdown-toggle-split {
	padding-right: 0.35rem;
	padding-left: 0.25rem;
}

.btn-group .dropdown-toggle::after {
	content: "\ea4a";
	border: 0;
	font-family: 'boxicons', cursive;
	top: 1px;
	position: relative;
	margin-left: 0;
	vertical-align: unset;
}

.dropdown-menu {
	margin-top: 10px;
	border-radius: 12px;
	border-color: #00000010;
	box-shadow: 1px 2px 20px 5px #00000010;
}

.dropdown-menu li {
	padding: 0 8px;
}

.dropdown-menu li .dropdown-item {
	font-size: 15px;
	padding: 0 .8rem;
	height: 36px;
	line-height: 36px;
	cursor: pointer;
	border-radius: 8px;
	transition: all .3s ease-in-out;
}

.dropdown-item:focus, .dropdown-item:hover {
	background-color: #EEE;
}

.dropdown-menu .dropdown-item.icon {
	background-color: transparent !important;
	font-size: 0.9rem;
	padding: .5rem 1rem;
	color: #999;
	outline: 0;
}

.dropdown-menu .dropdown-item.icon:hover {
	color: #000;
}

.dropdown-toggle::after {
	content: "\ea4a";
	border: 0;
	font-family: 'boxicons', cursive;
	top: 2px;
	position: relative;
	margin-left: .20em;
	vertical-align: unset;
}

.navbar-brand > img {
	border-radius: 10px;
}

.navbar-nav .nav-item {
	margin-right: 4px;
}

.navbar-nav .nav-link {
	padding: 0.35rem 0.6rem !important;
	border-radius: 8px;
	transition: all .3s ease-in-out;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
	background-color: #EEE;
}

.navbar-right {
	display: flex;
	align-items: center;
}

.navbar-right img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #FFF;
	border: solid 1px #CCC;
	object-fit: cover;
	padding: 1px;
}

.navbar-right .nav-item {
	background-color: transparent;
	margin-left: 10px;
	padding: 0;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	cursor: pointer;
	transition: all .2s linear;
}

.navbar-right .nav-item:hover:not(:first-child) {
	background-color: var(--primary);
}

.navbar-right .nav-item:hover > .nav-link {
	color: #adb1c7;
}

.navigation .dropdown-item {
	font-size: 0.95rem;
	padding: 0.5rem 1rem;
}

/* bg light */
.bg-light-light {
	color: #181c32;
	background-color: #f3f6f9;
}

.bg-light-success {
	color: #0bb783;
	background-color: #d7f9ef;
}

.bg-light-primary {
	color: #5c96fc;
	background-color: #ddeaff;
}

.bg-light-info {
	color: #8950fc;
	background-color: #eee5ff;
}

.bg-light-warning {
	color: #ffa800;
	background-color: #fff4de;
}

.bg-light-danger {
	color: #f64e60;
	background-color: #ffe2e5;
}

/* btn light */
.btn-light {
	color: #181c32;
	background-color: #f3f6f9;
	border-color: #f3f6f9;
	box-shadow: none;
}

.btn-light:hover,
.btn-light:focus {
	color: #181c32;
	background-color: #dae3ec;
	border-color: #d1dde8;
}

.btn-light:focus {
	box-shadow: 0 0 0 .2rem rgba(210, 213, 219, .5);
}

.btn.btn-light-success {
	color: #0bb783 !important;
	background-color: #d7f9ef !important;
	border-color: transparent;
}

.btn.btn-light-success:hover,
.btn.btn-light-success:focus {
	color: #fff !important;
	background-color: #0bb783 !important;
}

.btn.btn-light-success:focus {
	box-shadow: 0 0 0 .2rem rgba(11, 183, 131, .3);
}

.btn.btn-light-primary {
	color: #5c96fc;
	background-color: #ddeaff;
	border-color: transparent;
}

.btn.btn-light-primary:hover,
.btn.btn-light-primary:focus {
	color: #fff;
	background-color: #5c96fc;
}

.btn.btn-light-primary:focus {
	box-shadow: 0 0 0 .2rem #5c96fc50;
}

.btn.btn-light-info {
	color: #8950fc;
	background-color: #eee5ff;
	border-color: transparent
}

.btn.btn-light-info:hover,
.btn.btn-light-info:focus,
.btn.btn-light-info.hovered {
	color: #fff;
	background-color: #8950fc;
}

.btn.btn-light-info:focus {
	box-shadow: 0 0 0 .2rem #8950fc50;
}

.btn.btn-light-warning {
	color: #ffa800;
	background-color: #fff4de;
	border-color: transparent
}

.btn.btn-light-warning:hover,
.btn.btn-light-warning:focus {
	color: #fff;
	background-color: #ffa800;
}

.btn.btn-light-warning:focus {
	box-shadow: 0 0 0 .2rem #ffa80050;
}

.btn.btn-light-danger {
	color: #f64e60;
	background-color: #ffe2e5;
	border-color: transparent
}

.btn.btn-light-danger:hover,
.btn.btn-light-danger:focus {
	color: #fff;
	background-color: #f64e60;
}

.btn.btn-light-danger:focus {
	box-shadow: 0 0 0 .2rem #f64e6050;
}

@media (max-width: 460px) {
	.content-psikotes img {
		max-width: 100% !important;
	}
}

/* toast */
.toast {
	width: auto;
	position: fixed;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 1em;
	border-radius: 10px;
	background-color: #FFF;
	overflow: hidden;
	z-index: -1;
}

.toast.show,
.toast.hide {
	z-index: 1111;
}

.toast-body {
	padding: 1em 2em 1em 1.6em;
}

.toast .btn-close {
	width: 5px;
	height: 5px;
	box-shadow: none;
}

.toast-body:before {
	content: "";
	width: 6px;
	height: 42px;
	background-color: var(--primary);
	border-radius: 6px;
	position: absolute;
	left: 6px;
	top: 5px;
}

.danger .toast-body:before {
	background-color: #FD6161;
}

.warning .toast-body:before {
	background-color: #FFAC2B;
}

.success .toast-body:before {
	background-color: #2ECC71;
}

.primary .toast-body:before {
	background-color: #2F80ED;
}