/* template basic sips */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;600;700;800&display=swap');

body {
	color: rgb(37, 36, 36) !important;
	font-family: "inter", "Overpass", sans-serif !important;
	font-weight: 400;
	line-height: 1;
}

.card {
	border-radius: 1rem !important;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm,
.col-sm-auto,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md,
.col-md-auto,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg,
.col-lg-auto,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl,
.col-xl-auto {
	padding-right: 6px;
	padding-left: 6px;
}


.p-1-2 {
	padding: 12px;
}

.btn {
	padding: 0.445rem 0.75rem;
}

.btn-lg {
	padding: 0.6rem 1rem;
}

/* template basic */

/* KIPLI */
.widget .widget-title {
	font-weight: bold;
	margin-bottom: 0;
	line-height: 1;
}

.widget .widget-title-detail {
	line-height: 1;
}

.widget .widget-count {
	align-self: center;
	text-align: left;
}

.widget .widget-count h3 {
	margin-bottom: 5%;
}

.widget .widget-icon {
	width: 38px;
	height: 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	background-color: #ffffff;
	border-radius: 0.35rem;
	padding: .25rem;
}

.users_icon_widget {
	display: inline-block;
	border-radius: 20px;
	padding: 9px;
	width: 35px;
	height: 35px;
}

/* custom color templates */
.bg-active {
	background-color: #1b4cff;
}

.bg-purple {
	background-color: #af1bcc;
}

.text-purple {
	color: #af1bcc;
}

.bg-green {
	background-color: #18d190;
}

.text-green {
	color: #18d190;
}

.bg-primary {
	background-image: linear-gradient(150deg, #1b4cff, #33bff5) !important;
}

.bg-none {
	background-color: #00000000 !important;
}


.bg-light-grey {
	background-color: #efefef;
}

/*dinon aktifkan biar bisa hidden sidebar saat mobile responsif*/
/* .vertical .sidebar-left,
.vertical.hover .sidebar-left,
.narrow.open .sidebar-left {
	min-width: 14rem;
	width: 14rem;
}

.vertical .topnav,
.vertical.hover .topnav,
.narrow.open .topnav {
	margin-left: 14rem;
	line-height: .6rem;
}

.vertical .main-content,
.vertical.hover .main-content,
.narrow.open .main-content {
	margin-left: 14rem;
	padding: 1rem;
} */

.subcontent-heading {
	padding: .5rem;
}

.subcontent-title {
	font-weight: bold;

}

.dot-heading {
	background-color: #1165ec;
	height: 18px;
	width: 18px;
	border-radius: 10px;
}

.dot-status {
	background-color: #1165ec;
	height: 15px;
	width: 15px;
	border-radius: 10px;
	margin: 0 5px;
}

.showhide-sucontent {
	color: black;
}

.icon-log-activity {
	width: 37px;
	height: 37px;
	padding: 10px;
	background-color: #efefef;
	border-radius: 10px;
	margin-right: 10px;
}

/* cusotm rounded */
.rounded-2 {
	border-radius: 20px;
}

.rounded-1 {
	border-radius: .45rem;
}

.rounded-10 {
	border-radius: 10%;
}

.rounded-15 {
	border-radius: .7rem;
}


.avatar-sm img {
	width: 31px;
}

.list-group-item {
	padding: .5rem .75rem;
}

.password-show {
	font-family: "feather";
	content: "";
	position: absolute;
	right: 10px;
	border-radius: 15px;
	padding: 10px;
}

.form-search {
	display: block;
	width: 100%;
	height: calc(1.5em + 0.5rem + 2px);
	padding: 0.3rem .5rem 0.3rem 1.8rem;
	font-size: 0.76562rem;
	font-weight: 400;
	line-height: 1;
	color: #495057;
	background-color: #ffffff;
	background-clip: padding-box;
	border: 1px solid #dee2e6;
	border-radius: 8px;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-search:focus {
	color: #495057;
	background-color: #ffffff;
	border-color: #9bbcff;
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(27, 104, 255, 0.25);
}

.searchform-2 {
	position: relative;
}

.searchform-2:before {
	font-family: "feather";
	content: "\e9cc";
	position: absolute;
	left: 4px;
	padding: 4px;
}

.maps-section {
	height: 85%;
}

.status-kontrak {
	display: flex;
	align-items: center;
	padding: 0 .7rem;
}

.text-status {
	font-size: 11px;
}

.btn-excel {
	margin-right: 10px;
	height: fit-content;
}

.icon-excel {
	margin: 0 15px 0 -20px;
	color: white;
	font-size: 12px;
}

/* datatable custom style 11mei*/
.dataTables_length label {
	margin: 0;
}

ul.pagination li a {
	border-radius: 20px;
	padding: 0.35rem 0.75rem;
}

ul.pagination .previous a {
	border-radius: 20px;
}

.page-item.active .page-link {
	background-color: #00000000;
	color: #4e4e4e;
	font-weight: 600;
	font-size: 16px;
	border: 0;
}

.page-item:first-child .page-link {
	color: #404040;
	background-color: white;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}

.page-link:hover {
	border: none;
}

.page-item:last-child .page-link {
	background-color: white;
	color: #404040;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
}

ul.pagination .disabled a {
	background-color: #00000000 !important;
}

td .status-persetujuan {
	background-color: rgba(255, 255, 255, 0.239);
	border: solid 1px rgb(248, 248, 248);
	padding: .15rem .3rem;
	border-radius: 5px;
}

td .status-persetujuan.non-aktif {
	background-color: #fa202022;
	color: #f50000;
	border: solid 1px #fe5757;
}

td .status-persetujuan.aktif {
	background-color: #37d74f22;
	color: #37D750;
	border: solid 1px #37D750;
}

.table-sm {
	font-size: 0.8rem;
}

.table-sm th,
.table-sm td {
	padding: .4rem 0.2rem;
}

table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>td.sorting {
	padding-right: 20px;
}

/* modal custom  */
.modal-content {
	border-radius: 1rem;
}

.modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 1rem 1rem;
	border-bottom: 0px;
	border-top-left-radius: calc(0.3rem - 1px);
	border-top-right-radius: calc(0.3rem - 1px);
}

.name-title {
	font-weight: 600;
	font-size: 25px;
}

.kartu-pengenal {
	width: 140px;
	border-radius: 20px;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
	display: contents;
}

.kartu-pengenal img {
	width: 145px;
}

.dropdown-toggle.more-horizontal::after {
	content: "\e9a5";
}

.widget-2 {
	background-color: white;
	border: 1px solid #d5d5d5;
	border-radius: 10px;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
	padding: 5px;
}

.form-label {
	font-weight: 600;
}

.select2-container--bootstrap4 .select2-selection {
	border-radius: .7rem;
}

.select2-container--bootstrap4 {
	width: 100% !important;
}

.vertnav .nav-item {
	padding: 10px 1px;
}

.nav-item.active {
	background-color: #EEF4FC;
	border-radius: 15px;
}

.nav-item.active .nav-link {
	color: #0168FD !important;
}

/* KIPLI */
/* .maps-section img{
        height: inherit;
        overflow: scroll;
    } */


.brand-label {
	margin-right: 70%;
	font-size: 10px;
}

.judul-card {
	font-weight: bold;
	font-size: 14px;
	margin-bottom: 1px;
}


.p-card {
	font-size: 14px;
	margin-bottom: 1px;
}

.card {
	border-radius: 16px;
	border: none;
}

.card-radius0 {
	border-radius: 0px;
	border: none;
}

.content1 {
	position: absolute;
	width: 35px;
	height: 70px;
	left: 0px;
	top: 2px;
	border-radius: 8px;
}

.text-angka {
	text-align: center;
	margin-top: 40px;
	margin-left: 40px;
	font-size: 20px;
	font-weight: 700;
	line-height: 20px;
	color: blue;
}

.text-huruf {
	width: 84px;
	height: 29px;
	font-style: normal;
	font-weight: 600;
	font-size: 20px;
	line-height: 29px;
	color: #000000;
}


/* form input search icon di dalam */
.search-input {
	padding-left: 10px;
	width: 90px;

}

.icon {
	position: absolute;
	top: 6px;
	left: 20px;
	background-color: transparent;
	border-radius: 50%;
}

.icon i {
	font-size: 13px;
	color: #000;
}

/* navbar-style */
.navbar-style {
	margin-left: 30px;
	position: relative;

}

/* upload foto */
.profile-pic-div {
	height: 100px;
	width: 100px;
	position: relative;
	top: 10%;
	left: -3%;
	transform: translate(20%, 20%);
	border-radius: 50%;
	overflow: hidden;
	border: 0px solid grey;
}

#photo {
	height: 100%;
	width: 100%;
}

#file {
	display: none;
}

#uploadBtn {
	height: 30px;
	width: 100%;
	position: absolute;
	bottom: -10%;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	background: rgba(73, 73, 73, 0.7);
	color: wheat;
	line-height: 20px;
	font-family: sans-serif;
	font-size: 11px;
	cursor: pointer;
	display: none;
}

/* form import file */
.wrapper .section-form {
	height: 167px;
	display: flex;
	cursor: pointer;
	margin: 30px 0;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border-radius: 5px;
	border: 2px dashed #0067FF;
}


form p {
	margin-top: 15px;
	font-size: 16px;
}

section .row {
	margin-bottom: 10px;
	background: #ffffff;
	list-style: none;
	padding: 15px 20px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

section .row i {
	color: #6990F2;
	font-size: 15px;
}

section .details span {
	font-size: 14px;
}

.progress-area .row .content {
	width: 100%;
	margin-left: 15px;
}

.progress-area .details {
	display: flex;
	align-items: center;
	margin-bottom: 7px;
	justify-content: space-between;
}

.progress-area .content .progress-bar {
	height: 6px;
	width: 100%;
	margin-bottom: 4px;
	background: #fff;
	border-radius: 30px;
}

.content .progress-bar .progress {
	height: 100%;
	width: 0%;
	background: #6990F2;
	border-radius: inherit;
}

.uploaded-area {
	max-height: 232px;
	overflow-y: scroll;
}

.uploaded-area.onprogress {
	max-height: 150px;
}

.uploaded-area::-webkit-scrollbar {
	width: 0px;
}

.uploaded-area .row .content {
	display: flex;
	align-items: center;
}

.uploaded-area .row .details {
	display: flex;
	margin-left: 15px;
	flex-direction: column;
}

.uploaded-area .row .details .size {
	color: #404040;
	font-size: 11px;
}

.uploaded-area i.fa-check {
	font-size: 16px;
}


/* tambahan lukman 25 mei 2023 */

/* modal-bottom tambahan */
.modal-bottom {
	transform: translate(0, 100%);
}

.modal-bottom.show {
	transform: translate(0, 0);
	transition: transform 0.3s ease-out;
}

/* juru pungut anak panah */
.anak-panah {
	font-family: "feather";
	content: "";
	position: absolute;
	right: 28px;
	border-radius: 15px;
	padding: 10px;
}

/* tambahan lukman 25 mei 2023 */

/* tambahn lukman 26 mei 2023 */
.uploadcms {
	height: 163px;
	display: flex;
	cursor: pointer;
	margin: 10px 0;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border-radius: 5px;
	border: 2px dashed #989898;
}

/* tambahn lukman 26 mei 2023 */

/* tambahan aplikasi parkiran lukman 29 mei 2023 */
.drag-area {
	border: 2px dashed #0067FF;
	height: 231px;
	width: auto;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.drag-area.active {
	border: 2px solid #0067FF;
}


.drag-area header {
	font-size: 18px;
	font-weight: 500;
	color: #0067FF;
}

.drag-area span {
	font-size: 18px;
	font-weight: 500;
	color: #0067FF;
	margin: 10px 0 15px 0;
}

.drag-area button {
	padding: 10px 25px;
	font-size: 13px;
	font-weight: 500;
	border: none;
	outline: none;
	background: #0067FF;
	color: #ffffff;
	border-radius: 5px;
	cursor: pointer;
}

.drag-area img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 5px;
}

.detail-user {
	font-weight: bold;
	margin-left: 7%;
	margin-top: 10%;
}

.p-user {
	font-size: small;
	margin-left: 7%;
}

.status-user {
	background-color: rgba(255, 255, 255, 0.239);
	border: solid 1px rgb(248, 248, 248);
	padding: .15rem .3rem;
	border-radius: 15px;

}

.user-aktif {
	background-color: #d7ca3722;
	color: #d7d237;
	border: solid 1px #d7c437;

}

.aktivitas-admin {
	font-weight: bold;
}

.rounded-left {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.detail-row {
	display: none;
	background-color: #f6f9fd;
}

/* navtabs costum */
.wrapper-costum {
	width: 100%;
	margin: 2px auto;
	padding: 25px 30px 30px 30px;
	border-radius: 15px;
	background: #ffffff;
	box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
}

.wrapper-costum nav {
	position: relative;
	width: 45%;
	height: 45px;
	display: flex;
	align-items: center;

}

.wrapper-costum nav label {
	display: block;
	height: 60%;
	width: 100%;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	position: relative;
	z-index: 1;
	color: rgb(168, 167, 167);
	font-size: 15px;
	border-radius: 5px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
	margin: 0 5px;
	border: 1px solid rgb(231, 231, 231);
	background: #FBFBFB;
	transition: all 0.3s ease;
	font-weight: 600;
}

.wrapper-costum nav label:hover {
	background: rgb(255, 255, 255);

}

#all:checked~nav label.all,
#admin:checked~nav label.admin,
#jukir:checked~nav label.jukir,
#dishub:checked~nav label.dishub,
#cpm:checked~nav label.cpm,
#finance:checked~nav label.finance,
#tarif-flat:checked~nav label.tarif-flat,
#tarif-custom:checked~nav label.tarif-custom  {
	color: #0067FF;
	border-bottom: none;
	background: #ffffff;
}

nav .slider {
	position: absolute;
	height: 100%;
	width: 20%;
	left: 0;
	bottom: 0;
	z-index: 0;
	border-radius: 5px;
	background: #ffffff;
	transition: all 0.3s ease;
}

input[type="radio"] {
	display: none;

}

#admin:checked~nav .slider {
	left: 20%;
}

#jukir:checked~nav .slider {
	left: 40%;
}

#dishub:checked~nav .slider {
	left: 60%;
}

#cpm:checked~nav .slider {
	left: 80%;
}

section .content {
	display: none;
	background: #fff;
}

#tarif-flat:checked~nav .slider {
	left: 20%;
}

#tarif-custom:checked~nav .slider {
	left: 40%;
}

#all:checked~section .content-1,
#admin:checked~section .content-2,
#jukir:checked~section .content-3,
#dishub:checked~section .content-4,
#cpm:checked~section .content-5,
#finance:checked~section .content-6,
#tarif-flat:checked~section .content-1,
#tarif-custom:checked~section .content-2 {
	display: block;
}

section .content .title {
	font-size: 21px;
	font-weight: 500;
	margin: 30px 0 10px 0;
}


section .content p {
	text-align: justify;
}

.table-color {
	background-color: #E4F0FF;
}

/* tambahan aplikasi parkiran lukman 29 mei 2023 */

/* tambahan Dhimas */
.badge-danger2 {
	color: #E44646;
	background-color: #FADADA;
}

.badge-success2 {
	color: #3F9A53;
	background-color: #DBF1E0;
}

.badge-secondary2 {
	color: #949AA3;
	background-color: #EBEBEB;
}

.badge-success3 {
	color: #4CB964;
	background-color: #FBFBFB;
}

.badge-pending {
	color: #FFD12E;
	background-color: #FBFBFB;
}

.badge-cancel {
	color: #949AA3;
	background-color: #FBFBFB;
}

.btn-primaryubah {
	color: #0168FF;
	background-color: #f1f5ff;
	border-color: #ffffff;
	padding: 5px 7px;
}

.badge-primary4 {
	color: #003480;
	background-color: #F7F9FD;
	border-color: #E4F0FF;
}

.kecilkan_font{
    font-size : 10px;
}
.hiddenRow {
    padding: 0 !important;
}
/* tambahan Dhimas */

/* tambahan rsponsif */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: auto auto;
    }
    .item1 {
        grid-row: 1 / 3;
    }
    .nama-akun {
	display: none;
    }
    .nama-nav {
	font-size : 10px;
    }
}

@media (max-width : 576px){
    .topnav {
        position: fixed;
        width: 100%;
        height: 10vh;
        top: 10px;
        margin-left: 60%;
    }
    .title-page{
        position: fixed;
        font-size: 15px;
        width: hidden;
        height: 10%;
        top: 35px;
    }
    .form-row{
        flex-basis: 0;
        flex-grow: 1;
        min-width: 0;
        max-width: 100%;
    }
	.card-deck {
        flex-flow: row wrap;
        margin-right: -15px;
        margin-left: -15px;
    }

    .card-deck .card {
        display: flex;
        flex: 1 0 0%;
        flex-direction: column;
        margin-right: 15px;
        margin-bottom: 0;
        margin-left: 15px;
    }

}

.kecilkan_font2{
    font-size : 12px;
}