* {
	font-family: "Poppins", sans-serif;
}
body {
	background-color: #f8f7fc !important;
}
.container-fluid {
	padding: 0;
}
.img100 {
	width: 100%;
}
.pos-tengah {
	display: flex;
	align-items: center;
}
.fp a {
	font-size: 14px;
	color: #67b361;
	text-decoration: none;
	background-color: transparent;
}
.fp a:hover {
	color: #67b361;
}
.remember {
	font-size: 14px;
}
.log-wb {
	font-size: 20px;
}
.log-txt {
	font-size: 26px;
	font-weight: bold;
}
.btn-lgn {
	font-size: 16px;
	color: #ffffff;
	border-radius: 30px;
	background: #67b361;
	border-color: #67b361;
	font-weight: 500;
}

.btn-lgn:hover {
	border-radius: 30px;
	color: #ffffff;
	background: #406f3c;
	border-color: #406f3c;
}
.form-control-lg {
	font-size: 17px !important;
}
.notif-salah {
	position: fixed;
	top: 20%;
	left: 50%;
	margin-left: -250px;
	z-index: 9;
}
.nav-link-new {
	color: #3e3e3e;
}
.nav-link-new:hover {
	color: #3e3e3e !important;
}
.active-nav {
	color: #67b361 !important;
}
.active-nav:hover {
	color: #67b361 !important;
}
.nav-left-sidebar {
	top: 0px !important;
	box-shadow: none !important;
}
.dashboard-header .navbar-right {
	padding: 0px !important;
	min-height: 60px !important;
}
.nama-lgn {
	padding-right: 5rem !important;
	padding-left: 2rem !important;
}
.title-sub-h2 {
	font-weight: bold;
	color: black;
}
.fixed-top {
	left: 264px !important;
	background: #f8f7fc;
}
.f-left {
	left: 264px !important;
}
.fixed-footer {
	left: 264px !important;
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: white;
	/* color: white; */
	padding: 1vw;
	/* text-align: center; */
}
/* untuk body */
.body-content {
	margin-top: 5rem !important;
}
/* icon */
.thgnd img {
	content: url("/static/ver_1/image/icon/thgtm.png");
}
.thgnd.active-nav img {
	content: url("/static/ver_1/image/icon/thgtm-active.svg") !important;
}
.thgtm img {
	content: url("/static/ver_1/image/icon/thgtm.png");
}
.thgtm.active-nav img {
	content: url("/static/ver_1/image/icon/thgtm-active.svg") !important;
}
.loger img {
	content: url("/static/ver_1/image/icon/thgnd.png");
}
.loger.active-nav img {
	content: url("/static/ver_1/image/icon/thgnd-active.svg") !important;
}
.overview img {
	content: url("/static/ver_1/image/icon/overview.png");
}
.overview.active-nav img {
	content: url("/static/ver_1/image/icon/overview-active.svg") !important;
}
.setting img {
	content: url("/static/ver_1/image/icon/setting.png");
}
.setting.active-nav img {
	content: url("/static/ver_1/image/icon/setting-active.svg") !important;
}
.dokumen img {
	content: url("/static/ver_1/image/icon/dokumen.png");
}
.dokumen.active-nav img {
	content: url("/static/ver_1/image/icon/dokumen-active.svg") !important;
}
/*  */
.dashboard-main-wrapper {
	padding-top: 97px !important;
}
.txt-bold {
	font-weight: bold !important;
}
.txt-black {
	color: black;
}
.oval {
	border-radius: 20px !important;
}
.detail-oval-kmbl {
	border-radius: 33px !important;
	font-size: 13px !important;
	border-color: #67b361 !important;
	color: #67b361 !important;
	padding: 7px 0px !important;
}
.input-edt {
	/* border: 0px !important; */
	color: black !important;
}
.detail-oval-kmbl:hover {
	border-radius: 33px !important;
	font-size: 13px !important;
	background: #67b361 !important;
	border-color: #67b361 !important;
	color: white !important;
	padding: 7px 0px !important;
}
.mar {
	margin-top: 1px;
	margin-bottom: 1px;
}
.dt-device {
	font-weight: normal !important;
	font-size: 14px !important;
}
.d-device {
	font-weight: bold;
	color: black;
	font-size: 30px;
}
.detail-oval-csv {
	border-radius: 33px !important;
	font-size: 13px !important;
	background: #67b361 !important;
	border-color: #67b361 !important;
	color: white !important;
	padding: 14px 31px !important;
}
.detail-oval-sbmt {
	border-radius: 33px !important;
	font-size: 13px !important;
	background: #67b361 !important;
	border-color: #67b361 !important;
	color: white !important;
	padding: 7px 0px !important;
}
.detail-reg-sbmt {
	border-radius: 5px !important;
	font-size: 12px !important;
	background: #67b361 !important;
	border-color: #67b361 !important;
	color: white !important;
	padding: 7px 0px !important;
}
.detail-reg-sbmt:hover {
	border-radius: 5px !important;
	font-size: 12px !important;
	background: #457e40 !important;
	border-color: #457e40 !important;
	color: white !important;
	padding: 7px 0px !important;
}

.sbmt-s {
	border-radius: 5px !important;
	font-size: 12px !important;
	background: #67b361 !important;
	border-color: #67b361 !important;
	color: white !important;
	padding: 7px 0px !important;
}
.sbmt-c {
	border-radius: 5px !important;
	font-size: 12px !important;
	/* background: #67b361 !important;
	border-color: #67b361 !important; */
	color: black !important;
	padding: 7px 0px !important;
}
.sbmt-c:hover {
	border-radius: 5px !important;
	font-size: 12px !important;
	background: #dfe9df !important;
	/* border-color: #67b361 !important; */
	color: black !important;
	padding: 7px 0px !important;
}
.add-oval {
	border-radius: 20px !important;
	font-size: 13px !important;
	background: #67b361 !important;
	border-color: #67b361 !important;
	color: white !important;
	padding: 9px 43px !important;
}
.add-oval:hover {
	border-radius: 20px !important;
	font-size: 13px !important;
	background: #67b361 !important;
	border-color: #67b361 !important;
	color: white !important;
	padding: 9px 43px !important;
}
.input-lbl {
	border-radius: 5px !important;
}
#myInput {
	/* background-image: url(/css/searchicon.png); */
	background-position: 10px 12px;
	background-repeat: no-repeat;
	width: 100%;
	font-size: 14px;
	padding: 8px 12px 7px 31px;
	border: 1px solid #ddd;
	margin-bottom: 12px;
	border-radius: 16px;
}
.detail-oval {
	border-radius: 20px !important;
	font-size: 13px !important;
	background: #67b361 !important;
	border-color: #67b361 !important;
	color: white !important;
	padding: 9px 43px !important;
}
.detail-oval:hover {
	border-radius: 20px !important;
	font-size: 13px !important;
	background: #67b361 !important;
	border-color: #67b361 !important;
	color: white !important;
	padding: 9px 43px !important;
}
.detail-reg {
	border-radius: 5px !important;
	font-size: 13px !important;
	background: #67b361 !important;
	border-color: #67b361 !important;
	color: white !important;
	padding: 9px 43px !important;
}
.detail-reg:hover {
	border-radius: 5px !important;
	font-size: 13px !important;
	background: #67b361 !important;
	border-color: #67b361 !important;
	color: white !important;
	padding: 9px 43px !important;
}
.pad-p{
	margin: 0px 2px 7px 0px!important;
}
/* untuk card  */
.card-device {
	border-radius: 29px !important;
}
.title-device-card {
	font-size: 20px;
	color: black;
	font-weight: bold;
}
/* versi mobile  */

.loading-button {
	z-index: 9999999;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.4);
	position: fixed;
	min-width: 100%;
	min-height: 100%;
}

.loading-suhu {
	z-index: 9999999;
}

.loading-lembap {
	z-index: 9999999;
}

.tampilan-hilang {
	display: none !important;
}
.loading-button-new{
	z-index: 9999999;
    background-color: rgba(0, 0, 0, 0.4)!important;
    position: fixed!important;
    min-width: 100%!important;
    min-height: 100%!important;
    left: 264px!important;
    top: 131px!important;
}
.txt-icon{
	font-size: 18px;
}
.loginpage{
	padding-left: 0px;
    padding-right: 60px;
}
.oval-log{
	padding-left: 12px!important;
    background: #67b361 !important;
    border-color: #67b361 !important;
    border-radius: 10px!important;
}
.logout-a:hover{
	color: black!important;
}
 .btn-toggle {
	 margin: 0 4rem;
	 padding: 0;
	 position: relative;
	 border: none;
	 height: 1.5rem;
	 width: 3rem;
	 border-radius: 1.5rem!important;
	 color: #6b7381;
	 background: #bdc1c8;
	 background-color: white!important;
	 border-color: #67b361!important;
}
 .btn-toggle:focus, .btn-toggle:focus.active, .btn-toggle.focus, .btn-toggle.focus.active {
	 outline: none;
}
 .btn-toggle:before, .btn-toggle:after {
	 line-height: 1.5rem;
	 /* width: 4rem; */
	 width: 8.5rem;
	 text-align: center;
	 font-weight: 600;
	 font-size: .75rem;
	 text-transform: uppercase;
	 letter-spacing: 2px;
	 position: absolute;
	 bottom: 0;
	 transition: opacity .25s;
}
 .btn-toggle:before {
	 content: 'Delay';
	 /* left: -4rem; */
	 left: -6rem;
	 color: #67b361;
}
 .btn-toggle:after {
	 content: 'Spesific Time';
	 right: -8rem;
	 opacity: .5;
	 color: #67b361;
}
 .btn-toggle > .handle {
	 position: absolute;
	 top: 0.1875rem;
	 left: 0.1875rem;
	 width: 1.125rem;
	 height: 1.125rem;
	 border-radius: 1.125rem;
	 background: #67b361;
	 transition: left .25s;
}
 .btn-toggle.active {
	 transition: background-color .25s;
}
 /* .btn-toggle.active {
	 background-color: #29b5a8!important;
} */
 .btn-toggle.active > .handle {
	 left: 1.6875rem;
	 transition: left .25s;
}
 .btn-toggle.active:before {
	 opacity: .5;
}
 .btn-toggle.active:after {
	 opacity: 1;
}
.stimecontent{
	display: flex;
    align-items: center;
    gap: 2px;
}
.btn-toggle-rel {
	margin: 0 4rem;
	padding: 0;
	position: relative;
	border: none;
	height: 1.5rem;
	width: 3rem;
	border-radius: 1.5rem!important;
	color: #6b7381;
	background: #bdc1c8;
	background-color: white!important;
	border-color: #67b361!important;
}
.btn-toggle-rel:focus, .btn-toggle-rel:focus.active, .btn-toggle-rel.focus, .btn-toggle-rel.focus.active {
	outline: none;
}
.btn-toggle-rel:before, .btn-toggle-rel:after {
	line-height: 1.5rem;
	/* width: 4rem; */
	width: 8.5rem;
	text-align: center;
	font-weight: 600;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	position: absolute;
	bottom: 0;
	transition: opacity .25s;
}
.btn-toggle-rel:before {
	content: 'Off';
	/* left: -4rem; */
	left: -6rem;
	color: #67b361;
}
.btn-toggle-rel:after {
	content: 'On';
	right: -5.8rem;
	opacity: .5;
	color: #67b361;
}
.btn-toggle-rel > .handle {
	position: absolute;
	top: 0.1875rem;
	left: 0.1875rem;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 1.125rem;
	background: #67b361;
	transition: left .25s;
}
.btn-toggle-rel.active {
	transition: background-color .25s;
}
.btn-toggle-rel.active > .handle {
	left: 1.6875rem;
	transition: left .25s;
}
.btn-toggle-rel.active:before {
	opacity: .5;
}
.btn-toggle-rel.active:after {
	opacity: 1;
}
.btn-toggle-fil {
	margin: 0 4rem;
	padding: 0;
	position: relative;
	border: none;
	height: 1.5rem;
	width: 3rem;
	border-radius: 1.5rem!important;
	color: #6b7381;
	background: #bdc1c8;
	background-color: white!important;
	border-color: #67b361!important;
}
.btn-toggle-fil:focus, .btn-toggle-fil:focus.active, .btn-toggle-fil.focus, .btn-toggle-fil.focus.active {
	outline: none;
}
.btn-toggle-fil:before, .btn-toggle-fil:after {
	line-height: 1.5rem;
	/* width: 4rem; */
	width: 8.5rem;
	text-align: center;
	font-weight: 600;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	position: absolute;
	bottom: 0;
	transition: opacity .25s;
}
.btn-toggle-fil:before {
	content: 'Off';
	/* left: -4rem; */
	left: -6rem;
	color: #67b361;
}
.btn-toggle-fil:after {
	content: 'On';
	right: -5.8rem;
	opacity: .5;
	color: #67b361;
}
.btn-toggle-fil > .handle {
	position: absolute;
	top: 0.1rem;
	left: 0.0875rem;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 1.125rem;
	background: #67b361;
	transition: left .25s;
}
.btn-toggle-fil.active {
	transition: background-color .25s;
}
.btn-toggle-fil.active > .handle {
	left: 0.7875rem;
	transition: left .25s;
}
.btn-toggle-fil.active:before {
	opacity: .5;
}
.btn-toggle-fil.active:after {
	opacity: 1;
}
.pilihan-rel:disabled{
	background-color: #67b361ad;
}
.update-param{
	z-index: 9999999;
    background-color: rgba(0, 0, 0, 0.1)!important;
    position: fixed!important;
    min-width: 100%!important;
    min-height: 100%!important;
    top: 0px!important;
}
.btn-toggle-fil-batas {
	margin: 0 1rem;
	padding: 0;
	position: relative;
	border: none;
	height: 1.5rem;
	width: 3rem;
	border-radius: 1.5rem!important;
	color: #6b7381;
	background: #bdc1c8;
	background-color: white!important;
	/* border-color: #67b361!important; */
}
.btn-toggle-fil-batas:focus, .btn-toggle-fil-batas:focus.active, .btn-toggle-fil-batas.focus, .btn-toggle-fil-batas.focus.active {
	outline: none;
}
.btn-toggle-fil-batas:before, .btn-toggle-fil-batas:after {
	line-height: 1.5rem;
	/* width: 4rem; */
	width: 8.5rem;
	text-align: center;
	font-weight: 600;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	position: absolute;
	bottom: 0;
	transition: opacity .25s;
}
.btn-toggle-fil-batas:before {
	/* content: 'Off'; */
	/* left: -4rem; */
	left: -6rem;
	color: red;
}
.btn-toggle-fil-batas:after {
	/* content: 'On'; */
	right: -5.8rem;
	opacity: .5;
	color: #67b361;
}
.btn-toggle-fil-batas > .handle {
	position: absolute;
	top: 0.1rem;
	left: 0.0875rem;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 1.125rem;
	background: red;
	transition: left .25s;
}
.btn-toggle-fil-batas.active {
	transition: background-color .25s;
}

.btn-toggle-fil-batas {
	border-color: red!important;
}
.btn-toggle-fil-batas.active {
	border-color: #67b361!important;
}
.btn-toggle-fil-batas.active > .handle {
	left: 1.6rem;
	transition: left .25s;
	background: #67b361!important;
}
.btn-toggle-fil-batas.active:before {
	opacity: .5;
}
.btn-toggle-fil-batas.active:after {
	opacity: 1;
}
.tgh-tmpl{
    display: flex;
    align-items: center;
}
._jw-tpk-container {
	height: 12rem!important;
}
._jw-tpk-dark {
    color: #67b361!important;
    box-shadow: inset 0 0 0 1px #67b361!important;
}
._jw-tpk-dark ._jw-tpk-header, ._jw-tpk-dark ol>li>a._jw-tpk-selected {
    color: #f5f5f5;
    background: #67b361!important;
}
.sidebar-dark.nav-left-sidebar .navbar-nav .nav-link {
    color: #7a80b4!important;
}
.drp{
	padding-left: 2rem;
}
.rm-btn{
	place-self: flex-end;
	margin: 0 0 -18px 0!important;
}
.oval-block {
    border-radius: 20px !important;
    font-size: 13px !important;
    background: #ed1c24 !important;
    border-color: #ed1c24 !important;
    color: white !important;
    padding: 7px 3px !important;
}
.oval-allow{
    border-radius: 20px !important;
    font-size: 13px !important;
    background: #67b361 !important;
    border-color: #67b361 !important;
    color: white !important;
    padding: 7px 3px !important;
}
.oval-block:hover {
    border-radius: 20px !important;
    font-size: 13px !important;
    background: #ad1218 !important;
    border-color: #ad1218 !important;
    color: white !important;
    padding: 7px 3px !important;
}
.oval-allow:hover{
    border-radius: 20px !important;
    font-size: 13px !important;
    background: #477e43 !important;
    border-color: #477e43 !important;
    color: white !important;
    padding: 7px 3px !important;
}
.btnprvt-key{
	border-radius: 5px !important;
	background-color: transparent;
    border-color: transparent!important;
	color: #1a94d0 !important;
	transition: ease-in;
	padding: 7px 3px !important;
}
.btnprvt-key:hover{
	border-radius: 5px !important;
    background: #84cff5 !important;
	background-color: transparent;
	color: #0e4f70 !important;
	padding: 7px 3px !important;
	transition: ease-in-out;
}
.btn-newfill{
	border-radius: 5px !important;
	color: #1a94d0 !important;
	transition: ease-in;
}
.btn-newfill:hover{
	border-radius: 5px !important;
    background: #84cff5 !important;
    border-color: #84cff5 !important;
	color: #0e4f70 !important;
	transition: ease-in-out;
}
.btn-newfill-s{
	border-radius: 5px !important;
    background: #84cff5 !important;
    border-color: #84cff5 !important;
	color: #0e4f70 !important;
	transition: ease-in-out;
}
.det-key-list{
	padding-right: 0px!important;
    font-weight: bold;
}
.det-value-list{
	padding-left: 0px!important;
}
.card-footer-od{
	padding: 0.75rem 1.25rem;
    background-color: transparent;
	border-top: 0px solid rgba(0,0,0,.125);
}
.brdr{
	border-bottom: 1px solid #e6e6f2;
}
.acc-type{
    /* position: fixed; */
    bottom: 0px;
    padding: 1vw;
}
.billing{
	display: flex!important;
    flex: none!important;
    flex-direction: row!important;
    justify-content: space-between!important;
}
.btn-hapus{
	background-color: transparent;
	border-color: transparent!important;
	transition: ease-in;
	padding: 0px 0px !important;
	color: red;
}
.datar{
	display: flex;
    align-items: center;
}
.brs-1{
	display: flex;
	align-items: flex-start;
	justify-content: space-between!important;
}
.sbmt-u{
    border-radius: 5px !important;
    font-size: 12px !important;
    background: #68bb61 !important;
    border-color: #68bb61 !important;
    color: white !important;
}
.sbmt-d{
    border-radius: 5px !important;
    font-size: 12px !important;
    background: #68bb61 !important;
    border-color: #68bb61 !important;
    color: white !important;
}
.sbmt-u:hover{
    border-radius: 5px !important;
    font-size: 12px !important;
    background: #478041 !important;
    border-color: #478041 !important;
    color: white !important;
}
.billing-plan{
	display: flex!important;
}
.updt-blg{
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
@media (max-width: 1320px){
	.txt-det{
		font-size: 12px!important;
	}
	.det-key-list{
		padding-right: 0px!important;
		font-weight: bold;
	}
	.det-value-list{
		padding-left: 0px!important;
	}
}
@media (max-width: 768px) {
	.mobile-view{
		display: none!important;
		visibility: hidden!important;
	}
	.fixed-top {
		left: 0px !important;
		z-index: 0 !important;
	}
	.fixed-footer {
		left: 0px !important;
	}
	.f-left {
		left: 0px !important;
	}
}