@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
	--black:#000000;
	--dark:#2B2A2A;
	--gray:#716E6E;
	--light:#767474;
	--purple:#4B48BD;
	--light-purple: #EDEDF9;
	--orange:#FF6700;
	--light-orange: #FFF0E6;
	--red:#FF3636;
	--light-red:#FFEBEB;
	--green:#09B13C;
	--light-green:#E7F8EC;
	--border-radius: 8px;
	--border-color:#CED4DA;
	
	--bg-orange: #FFF0E5;
	--bg-ultramarine: #DDDDFF;
	--bg-light-ultramarine: #F0F0FF;
	--bg-red: #FFEBEB;
	--bg-green: #E6F7EB;
}

body {
	font-family: "Poppins", sans-serif;
	color: var(--dark);
	font-weight:400;
	font-size: 16px !important;
	background-color: var(--bg-light-ultramarine);
}

.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
	width: 100%;
  	margin-right: auto;
  	margin-left: auto;
}
@media (min-width: 992px) {
	.container, .container-sm, .container-md, .container-lg {
    	max-width: 95%;
  	}
}

.content-login {
	background-image: url('../image/bg_login.png');
	background-position:center;
	background-repeat:no-repeat;
	background-size: 75%;
}

.text-orange {
	color: var(--orange) !important;
}
.text-purple {
	color: var(--purple) !important;
}
.font-weight-bold {
	font-weight: 600 !important;
}
.bg-purple,
.badge-purple {
	background-color: var(--purple);
	color: #FFFFFF;
}

.bg-orange,
.badge-orange {
	background-color: var(--orange);
	color: #FFF;
}
.badge {
	min-width: 26px;
	font-size: 14px;
}
.badge-lg {
  font-size: 16px;
  padding: .6rem 1rem;
 }

/* form */
#expatriate .image {
	text-align:center;
}

.image-preview {
	width: 100%;
	border-radius: var(--border-radius);
}

@media (max-width: 450px) {
  .content-wrapper {
    padding: 1.5rem 0;
  }
  
  .auth .auth-form-light {
		width: 70%;
	}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
	.auth .auth-form-light {
		width: 70%;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
	.auth .auth-form-light {
		width: 55%;
	}
}

@media (min-width: 820px) { 
	.auth .auth-form-light {
		width: 50%;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	.auth .auth-form-light {
		width: 40%;
	}
}

@media (min-width: 1000px) { 
	.auth .auth-form-light {
		width: 40%;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	.auth .auth-form-light {
		width: 40%;
	}
}

@media (min-width: 1400px) { 
	.auth .auth-form-light {
		width: 35%;
	}
}

@media (min-width: 1600px) { 
	.auth .auth-form-light {
		width: 28%;
	}
}

.toolbar .btn {
	margin-left:8px;
	padding: 0.730rem .8rem;
}
.toolbar a.btn {
	padding: .6rem .8rem;
}

.btn {
	padding:0.650rem .8rem;
	line-height:20px;
}
.btn-lg {
	padding:1.375rem 1rem !important;
}
.btn-content  {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  white-space: nowrap;
  -webkit-transition-duration: 0.45s;
  -moz-transition-duration: 0.45s;
  -o-transition-duration: 0.45s;
  transition-duration: 0.45s;
  transition-property: color;
  -webkit-transition-property: color;
}
.btn i {
	font-size: 1.2rem;
}
.btn-content i + span {
	margin-left:6px;
}
.btn-outline-orange {
	border: 1px solid var(--orange);
	color: var(--orange);
}
.btn-outline-orange:hover {
	background-color: var(--light-orange);
}
.btn-orange {
	background-color: var(--orange);
	color: #FFFFFF;
}

.has-error > .form-control,
.has-error > .input-group {
	border: 1px solid var(--danger);
}
.text-error,
.help  {
	font-size: 13px;
	letter-spacing:1px;
}
td span + label,
td label + span {
	margin-top:10px;
}
.text-error {
	color:var(--danger);
}
.help {
	color:var(--gray);
}

select {
      -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAMAAACtdX32AAAAdVBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhMdQaAAAAJ3RSTlMAAAECAwQGBwsOFBwkJTg5RUZ4eYCHkJefpaytrsXGy8zW3+Do8vNn0bsyAAAAYElEQVR42tXROwJDQAAA0Ymw1p9kiT+L5P5HVEi3qJn2lcPjtIuzUIJ/rhIGy762N3XaThqMN1ZPALsZPEzG1x8LrFL77DHBnEMxBewz0fJ6LyFHTPL7xhwzWYrJ9z22AqmQBV757MHfAAAAAElFTkSuQmCC);
background-position: 100%;
    background-repeat: no-repeat;
}
.form-control {
	font-size: 1rem;
	border-radius: var(--border-radius);
	color: var(--black);
}
.input-group {
	border-radius: var(--border-radius);
	overflow:hidden;
	border: 1px solid var(--border-color);
}
.is_focused > .form-control,
.input-group.is_focused {
	border:1px solid var(--orange);
}
.disabled > .form-control,
.input-group.disabled {
	background-color: #f4f4f4;
}
.input-group .form-control {
	border:0;
	height: 44px;
}
.input-group-prepend .input-group-text {
	padding: 0 0.75rem;
	border:0;
	color: var(--gray);
}
.input-group-prepend > .btn {
	margin: 1px 2px;
	padding: .375rem .75rem;
	border-radius: var(--border-radius) !important;
}
.input-group .form-control,
.input-group-prepend .input-group-text {
	background-color: transparent;
}
.input-group-prepend + .form-control {
	padding-left: 0;
}
/*
.input-group .la {
	font-size:1.2rem;
	cursor:pointer;
}
*/

.form-lg .form-control {
	padding: .6rem 1rem !important;
  	font-size: 1rem !important;
	padding-top: .8rem !important;
	padding-bottom: .8rem !important;
}
input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
  transform: scale(1.5);
}
.form-group .form-check {
	margin-top: 40px;
	margin-bottom: 0;
}
.form-check {
	display: flex;
  	padding-left: 1rem;
}
.form-check input {
	height: auto;
  width: auto;
}
.form-check label {
	margin: 0;
    margin-left: 0px;
  line-height: initial;
  font-size: 1rem;
  margin-left: 15px;
}
.form-view {
	padding:.8rem 0;
	border-bottom: 1px solid #e4e4e4;
	text-align:left;
	font-size:17px;
	font-weight:500;
}
.form-view label {
	display:block;
	font-size: 1rem;
	color: var(--gray);
	margin-bottom: 0;
	font-weight:normal;
}

.col-code {
	width:10%;
}
.col-action {
	width:5%;
}
.col-name {
	width: 300px;
}
.col-photo {
	width: 100px;
}

/* alert */
.alert i {
	margin-right: 8px;
}
.alert-purple {
	background-color: var(--light-purple);
	color: var(--purple);
}

/* header */
header {
	background-color: #FFFFFF;
}
header .navbar-nav .nav-item {
	margin-right: 10px;
}
header .navbar-nav .nav-item .nav-link {
	color: var(--dark);
	font-weight:500;
	padding: 0.5rem 1rem;
	border-radius: var(--border-radius);
}
header .navbar-nav .nav-item:hover > a {
	color: var(--purple) !important;
}
header .navbar-nav li.active > a {
	background-color: var(--bg-light-ultramarine);
}
header .toolbar .la {
	font-size:1.7rem;
}
.dropdown-toggle::after {
	display:none;
}
.dropdown-header {
	color: var(--gray);
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 10px;
	padding-bottom: 10px;
}
header .dropdown-menu {
	border-radius: var(--border-radius);
}

header.fixed-top + main {
	padding-top: 55px;
}

/* main */
.card-header,
.card-footer {
	background-color:transparent;
}
.card-footer {
	font-size: .9rem;
	color: var(--gray);
}

.footer {
	background-color:transparent;
	font-size: initial;
  	font-family: inherit;
	padding:0 0 1.5rem 0;
	border:0;
}

.required > label::after {
	content: "*";
	color: var(--danger);
	padding-left:8px;
}

td.col-link {
	cursor:pointer;
}
tbody tr:hover {
	background-color: var(--light-purple) !important;
}

#toggle .btn-success.not-active,
#toggle .btn-danger.not-active {
	border-color: var(--border-color);
	background-color: transparent;
	color: var(--gray);
}

.datepicker-dropdown {
	padding:10px 20px !important;
	width:auto !important;
}

.content-wrapper .card {
	border:1px solid var(--border-color);
}

.nav-pills .nav-item {
	margin:0;
}
.nav-pills .nav-item .nav-link {
	border-radius: var(--border-radius);
	border:0;
	color: var(--gray);
	background-color: var(--bg-light-ultramarine);
  margin-right: 10px;
}
.nav-pills .nav-item .nav-link:hover {
	color: var(--purple);
}
.nav-pills .nav-item .active,
.nav-pills .nav-item .active:hover {
	color: #FFFFFF;
	background-color: var(--purple);
}
.nav-pills + .tab-content {
	border:0;
	padding:1rem 0;
}
.nav-pills .nav-link {
	padding: .5rem 1.3rem;
}

.form-title {
	padding: .6rem .8rem;
	border-radius: var(--border-radius);
	background-color: var(--bg-light-ultramarine);
	margin-bottom: 2rem;
}

@media (max-width: 991px) {
  .navbar .navbar-brand-wrapper {
    width: auto;
  }
}

.table,
.table td {
	border: 0;
}
.table thead th {
	font-size: 15px;
}
.table th a {
	color: var(--purple);
}
th.action {
	min-width: 100px;
  	width: 120px;
}
th.date {
	min-width: 120px;
  	width: 200px;
}
th.name {
	min-width: 250px;
}
th.value {
	width: 15%;
}
.table-list td {
	height: 72px;
}
td > label {
	margin: 0;
}
td > span.help {
	display:block;
}

.rounded {
	border-radius: var(--border-radius);
}
.circle {
	border-radius: 100% !important;
}

.modal-header .close {
	padding:0;
	margin:0;
}

#menu li .nav-link {
  display: block;
  cursor: pointer;
}
#menu ul {
  z-index: 1;
}

.breadcrumb {
	background-color: transparent;
	padding:0;
	color: var(--gray);
	border:0;
}
.breadcrumb li + li {
	*padding-left: 15px;
	margin-left: 10px;
}
.breadcrumb li + li::before {
	content: "/";
	padding-right: 5px;
}

.pagination {
	margin:0;
}
.pagination li > a,
.pagination li > span {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 28px;
	border-radius: 100%;
}
.pagination li.active > span {
	background-color: var(--orange);
	color: #FFFFFF;
}

.list-thumb {
	width: 70px;
	height: 80px;
	border-radius: var(--border-radius);
}
.ktp-thumb {
	width: 127px;
}

.navbar-collapse {
	margin:0;
}

.accordion > .item + .item {
	border-top: 1px solid var(--border-color);
}
.accordion > .item > .item-title {
	padding:.8rem;
	margin:0;
}
.accordion > .item > .item-title:hover {
	background-color: var(--bg-light-ultramarine);
}
.accordion > .item > .item-title > * {
	align-items: baseline;
}
.accordion > .item > .item-title[aria-expanded="true"]{
	color: var(--orange);
}
.accordion > .item > .item-content {
	margin-bottom: 20px;
	border:1px solid var(--orange);
	border-radius: var(--border-radius);
	overflow:hidden;
}

.nav-tabs .nav-link {
	padding: .75rem 1.5rem;
}
@media (max-width: 767px) {
	.nav .nav-link {
		padding: .75rem 1rem;
	}
	.nav .nav-item {
    *padding: .75rem .5rem;
	
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
}
}

img.img-language {
	height: 28px;
	border:1px solid var(--border-color);
	border-radius: var(--border-radius);
}

#language .dropdown-item > img {
	height: 18px;
	border:1px solid var(--border-color);
	border-radius: var(--border-radius);
	margin-right: 8px;
}

#accordion-row h4 {
	padding: 1rem;
}
#accordion-row .collapse {
	padding: 0 1rem;
	margin-bottom: 1rem;
}

.auth .brand-logo img {
	border-radius: 16px;
}

#tab-kitas .tab-content {
	padding: 1rem;
}
#tab-kitas .tab-content .tab-pane {
	padding: 0;
}
#tab-kitas .card {
	margin:0;
	border:0;
	box-shadow:none;
	border-radius:0;
}
#tab-kitas .card + .card {
	border-top: 1px solid var(--border-color);
}
#tab-kitas .card-header {
	padding:0;
}
#tab-kitas .card-header a {
	text-align: left;
	padding: 1rem;
}
#tab-kitas .card-body {
	padding: 0 1rem;
}
#tab-kitas .accordion > .card .card-header a::before {
  display:none;
}
#tab-kitas .card.highlight {
	border: 1px solid var(--orange);
	border-radius: var(--border-radius);
}
#tab-kitas .card.highlight .card-header a {
	font-weight:600;
	color: var(--orange);
	font-size: 1.2rem;
}

.progress .progress-bar {
	border-radius:0;
}

td.link {
	cursor: pointer;
}

.content-wrapper {
  padding: 2.375rem 0;
 }

.panel-right {
	position: fixed;
	height: 100%;
	right: 0;
	width:330px;
}
.panel-right + .content-wrapper {
	padding-right: 300px;
}
.panel-right .list-group {
	padding-bottom: 100px;
}


.table-responsive > .table {
	table-layout: fixed;
}

.table-responsive .table th,
.table-responsive .table td > * {
	white-space:normal;
}

.table td label,
.table td span {
	display:block;
}