@font-face {
  font-family: "IBMPlexMono";
  src: url("../fonts/ibmplexmono-regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/ibmplexmono-regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/ibmplexmono-regular.otf") format("opentype"), /* Open Type Font */
    url("../fonts/ibmplexmono-regular.svg") format("svg"), /* Legacy iOS */
    url("../fonts/ibmplexmono-regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/ibmplexmono-regular.woff") format("woff"), /* Modern Browsers */
    url("../fonts/ibmplexmono-regular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexMono-ExtraLight";
  src: url("../fonts/ibmplexmono-extralight.eot"); /* IE9 Compat Modes */
  src: url("../fonts/ibmplexmono-extralight.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/ibmplexmono-extralight.otf") format("opentype"), /* Open Type Font */
    url("../fonts/ibmplexmono-extralight.svg") format("svg"), /* Legacy iOS */
    url("../fonts/ibmplexmono-extralight.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/ibmplexmono-extralight.woff") format("woff"), /* Modern Browsers */
    url("../fonts/ibmplexmono-extralight.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexMono-Light";
  src: url("./fonts/ibmplexmono-light.eot"); /* IE9 Compat Modes */
  src: url("../fonts/ibmplexmono-light.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/ibmplexmono-light.otf") format("opentype"), /* Open Type Font */
    url("../fonts/ibmplexmono-light.svg") format("svg"), /* Legacy iOS */
    url("../fonts/ibmplexmono-light.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/ibmplexmono-light.woff") format("woff"), /* Modern Browsers */
    url("../fonts/ibmplexmono-light.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexMono-Medium";
  src: url("../fonts/ibmplexmono-medium.eot"); /* IE9 Compat Modes */
  src: url("../fonts/ibmplexmono-medium.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/ibmplexmono-medium.otf") format("opentype"), /* Open Type Font */
    url("../fonts/ibmplexmono-medium.svg") format("svg"), /* Legacy iOS */
    url("../fonts/ibmplexmono-medium.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/ibmplexmono-medium.woff") format("woff"), /* Modern Browsers */
    url("../fonts/ibmplexmono-medium.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexMono-Bold";
  src: url("../fonts/ibmplexmono-bold.eot"); /* IE9 Compat Modes */
  src: url("../fonts/ibmplexmono-bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/ibmplexmono-bold.otf") format("opentype"), /* Open Type Font */
    url("../fonts/ibmplexmono-bold.svg") format("svg"), /* Legacy iOS */
    url("../fonts/ibmplexmono-bold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/ibmplexmono-bold.woff") format("woff"), /* Modern Browsers */
    url("../fonts/ibmplexmono-bold.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
html {
	position: relative;
	min-height: 100%;
}
body {
	-webkit-transition-timing-function: ease;
	-o-transition-timing-function: ease;
	transition-timing-function: ease;
	-webkit-transition-duration: .35s;
	-o-transition-duration: .35s;
	transition-duration: .35s;
	-webkit-transition-property: padding-top;
	-o-transition-property: padding-top;
	transition-property: padding-top;
	margin-bottom: 30px;
	font-family: "IBMPlexMono";
	font-size: small;
}
.text-muted {
    color: #666 !important;
}
.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 30px;
	line-height: 2;
	background-color: black;
}
.navbar {
	background: white url("../img/navbar-bg.png") repeat-x center top / cover;
	height: 40px;
	border: 1px solid black;
}
.navbar-collapse {
    background: white;
    border-color: black;
	border-style: solid;
	border-width: 0px 1px 0px 1px;
	margin-left: -1px;
	margin-top: -1px;
	margin-right: -1px;
}
.navbar-brand {
    color: black;
    background-color: #fff;
    font-family: "IBMPlexMono-Bold";
    padding: 0 15px;
    border-color: black;
	line-height: 1.75;
	height: 38px;
	border-style: solid;
	border-width: 0 1px;
	margin-top: -2px;
}
.navbar-toggler {
    background-color: white;
    border-color: black;
    border-radius: 0px;
    padding: .25rem;
    position: relative;
	right: 0px;
	top: -1px;
	border-style: solid;
	border-width: 0px 0px 0px 1px;
	height: 38px;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 20 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
	background-position-x: -4px;
}
.btn-nav {
    font-weight: 400;
    color: white;
    background-color: black;
    border-radius: 0px;
}
.cari {
    width: 40px;
    height: 40px;
    padding: 0px;
    position: relative;
    top: -2px;
}
.akun {
	position: absolute;
	right: 39px;
	width: 40px;
	height: 40px;
	padding: 0px;
}
.nav-item {
    border-color: black;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
}
.nav-link {
	font-family: "IBMPlexMono-Medium";
    color: black;
    padding: 5px 15px !important;
}
#searchbar form {
	background-color: black;
}
#searchbar .form-control, #searchbar .form-control:focus {
    color: white;
    background-color: transparent;
    border: none;
    box-shadow: unset;
}
#searchbar .form-control-sm {
	font-size: small;
}
.btn-cari, .btn-tutup {
    color: white;
    background-color: transparent;
    font-size: small;
}
.btn-tutup {
	font-family: "IBMPlexMono-ExtraLight";
	font-size: 1.5em;
	line-height: 1;
	margin-top: -2px;
}
#intro.carousel {
    height: 12em;
}
.carousel-indicators li {
	width: 10px;
	height: 10px;
	border-radius: 100%;
	background-color: black;
}
.carousel-indicators .active {
    background-color: white;
    border: 1px solid black;
}
.custom-select {
    line-height: 1;
}
.custom-select-sm {
    font-size: 100%;
}
select + i.fa {
	font-size: large;
	float: right;
	margin-top: -24px;
	margin-right: 5px;
	pointer-events: none;
	padding-right: 5px;
	color: white;
	position: relative;
}
.lang {
    background: black;
    border-color: black;
    color: white;
    padding-left: 5px;
}
.lang:focus {
    border-color: black;
    outline: 0;
    box-shadow: unset;
}
.btn-dark {
    background-color: black;
    border-color: black;
    font-size: 100%;
}
.konten-holder {
	background-image: url("../img/control-bg.png");
	background-position: center 3px;
	background-repeat: no-repeat;
}
.figure-caption {
    color: black;
}

.controller {
	display: block;
    position: absolute;
    font-size: x-large;
    z-index: 2;
    color: white;
}
.controller.next {
    right: 0px;
}
.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 0px;
    left: 15%;
    z-index: 18;
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: center;
    top: -41px;
    height: 20px;
}
.carousel-holder {
    height: calc(100vh - 133px);
    overflow-y: scroll;
    margin-top: 3rem;
}
.small {
	font-family: "IBMPlexMono-Medium";
}
a {
	color: black;
}
h5, h6 {
	font-family: "IBMPlexMono-Bold";
	font-weight: normal;
}
.login .btn, .lupa-password .btn, .edit-profil .btn {
	margin: 1em auto;
}
.btn-sm.btn-light {
	font-family: "IBMPlexMono-Medium";
    font-size: small;
    border-radius: 0px;
}
.btn-light {
    color: black;
    background-color: white;
    border-color: black;
}
strong {
	font-family: "IBMPlexMono-Medium";
	font-weight: normal;
}
.file {
	display: flex;
    align-items: center;
	justify-content: center;
}
.file-input {
    height: auto;
    left: 0;
    opacity: 0;
    outline: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.file-upload {
    flex-direction: column;
    height: auto;
    padding: 2em 3em;
    border: 1px solid black;
	border-radius: 4px;
	font-size: 1em;
	white-space: nowrap;
	-moz-appearance: none;
	-webkit-appearance: none;
	align-items: center;
	box-shadow: none;
	display: inline-flex;
	justify-content: flex-start;
	line-height: 1.5;
	position: relative;
	cursor: pointer;
}
.form-control {
	color: black;
	border-color: black;
}
.form-control:focus {
    color: black;
    border-color: black;
    box-shadow: unset;
}
.galeri .btn-sm {
    font-size: smaller;
}
.galeri .figure-caption {
    font-size: 78%;
}
.table-sm {
    font-size: 68%;
}
.table-sm td {
    border: none;
    padding: 0px;
}
.table-sm tr td:first-child {
	text-align: right;
	min-width: 118px;
}
.table-sm tr td:last-child {
	padding-left: 5px;
}
.table-dark > th {
    background-color: black;
}
.table thead th {
    border-bottom: none;
}
.table-bordered, .table-bordered td, .table-bordered th {
    border: 1px solid black;
}
.table-bordered {
    font-size: 100%;
}
.table-bordered tr td:first-child {
    text-align: center;
    min-width: auto;
}
.carousel-control-next, .carousel-control-prev {
	width: 8%;
    opacity: 1;
}
.chocolat-wrapper {
    z-index: 9999 !important;
}
.chocolat-wrapper .chocolat-close {
    background: url(../img/close.png) 50% 50% no-repeat !important;
}
.chocolat-wrapper .chocolat-bottom {
    display: none !important;
}

.koin-qty {
    margin-bottom: 0px !important;
}
.qty {
    border: 1px solid black;
    padding: .25rem .5rem;
    line-height: 1.5;
    border-radius: .2rem;
}
.bs-stepper-header {
	margin: 0px !important;
    height: 22px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    line-height: 1;
    border-left: 1px solid black;
}
.bs-stepper-label {
    margin: 0px 1px 0px 0px !important;
    font-style: italic;
    letter-spacing: -1px;
}
.bs-stepper-label:first-child {
    margin-left: -8px !important;
}
.bs-stepper .step-trigger {
	font-size: 9px !important;
	font-weight: normal !important;
	line-height: 1 !important;
	padding: 5px 2px 5px 15px !important;
	border-radius: 0px !important;
	color: black !important;
	height: 22px;
}
.step.active > .step-trigger {
	background-color: black;
	color: white !important;
}
.bs-stepper .step-trigger:disabled {
    opacity: 1 !important;
}
.step {
    height: 22px;
}
.step:before {
    content: '';
    border-left: 6px solid black;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    position: absolute;
}
.step:after {
    content: '';
    border-left: 5px solid white;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: absolute;
    margin-top: 1px;
    z-index: 20;
}
.step.active:after {
    border-left-color: black;
}
.bs-stepper-header:before {
    content: '';
    border-left: 6px solid black;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    position: absolute;
    height: 22px;
	display: inline-block;
	position: absolute;
	right: 9px;
	margin-top: -1px;
}
.bs-stepper-header:after {
    content: '';
    border-left: 5px solid white;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: absolute;
    display: inline-block;
	height: 20px;
	right: 10px;
    z-index: 20;
}
.step:first-child::before {
	visibility: hidden;
}

.data-karya .col-form-label {
    font-size: smaller;
    text-align: right;
}
.data-karya .form-control-sm {
	font-size: small;
}
.apresiasi {
	width: 14.285714285714286%;
}
.apresiasicon {
    width: 24px;
    height: 33px;
    margin: 0 auto;
}
.apresiasi label {
    margin-bottom: 0px;
}
.konversi {
    border: 1px solid black;
    border-radius: .25em;
    padding: .25em 3em;
}
.qr {
    width: 50%;
    margin: 0 auto;
    border: 1px solid #666;
	border-radius: .25rem;
	padding: .5em;
}
.qr .figure-caption {
    font-size: 75%;
    line-height: 1.25;
}
.upload-txt {
	font-size: smaller;
	line-height: 1;
	text-align: center;
	margin-top: 1em;
}
.foto-karya .file-upload {
    padding: 1em .5em;
}
.foto-karya .file-label {
    margin-bottom: 1.25rem;
}
.foto-karya .col-form-label {
    text-align: right;
}
.form-check-inline {
    margin-right: 0px;
    width: 50%;
    float: left;
}
.form-check-label {
    font-size: smaller;
}
.datetimepicker-input {
	background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
	background-size: 8px 10px;
}
.datepicker-days table {
    margin-left: -40% !important;
}
.bootstrap-datetimepicker-widget .table-sm {
    font-size: 100% !important;
}
.bootstrap-datetimepicker-widget table th {
	border: none;
}
.bootstrap-datetimepicker-widget table th.dow:first-child, .bootstrap-datetimepicker-widget table th.prev {
    text-align: right;
}
.bootstrap-datetimepicker-widget.dropdown-menu {
	border-color: black;
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom::before {
	border-bottom-color: black !important;
}