.de-box-shadow {
	-moz-box-shadow: 0px 0px 5px rgba(158, 147, 147, 0.5);
	-webkit-box-shadow: 0px 0px 5px rgba(151, 141, 141, 0.651);
	/* box-shadow: 5px 8px 4px 0 #9e9595; */
	box-shadow:
		5px 8px 5px 0 #9e9595,
		0 4px 20px 0 rgba(0, 0, 0, 0.19);
	/* box-shadow: 5px 8px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19); */
}

.de-box-shadow-red {
	-moz-box-shadow: 0px 0px 5px rgba(221, 90, 90, 0.5);
	-webkit-box-shadow: 0px 0px 5px rgba(221, 101, 101, 0.5);
	box-shadow:
		5px 8px 3px 0 #d15858,
		0 4px 20px 0 rgba(0, 0, 0, 0.19);
}

.de-box {
	/* display: inline-block; */
	background: url(de-button/btn.bg.png) repeat-x 0px 0px;
	padding: 5px;
	font-family: 'Roboto';
	/* font-weight:bold; */
	/* text-shadow: 1px 1px 1px rgba(255,255,255,0.5); */
	/* border:1px solid rgba(0,0,0,0.4); */
	/* -moz-border-radius: 5px; */
	/* -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5); */
	/* -webkit-border-radius: 5px; */
	/* -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5); */
}

.de-box-rotate {
	background: url(de-button/btn.bg-bawah.png) repeat-x 0px 0px;
	background-position: bottom;
	padding: 5px;
	font-family: 'Roboto';
}

.blink {
	animation: blinker 2s steps(10, start) infinite;
	-webkit-animation: blinker 2s steps(10, start) infinite;
}

@keyframes blinker {
	to {
		visibility: hidden;
	}
}

@-webkit-keyframes blinker {
	to {
		visibility: hidden;
	}
}

@keyframes blinker {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.de-gradien {
	/* background: #31e852 !important; */
	/* background: linear-gradient(to left, #191a19, #7c817d) !important;
    height: 100vh; */
	height: 100vh;
	margin: auto;
	font-family: -apple-system, BlinkMacSystemFont, sans-serif;
	overflow: auto;
	background: linear-gradient(
		315deg,
		rgba(101, 0, 94, 1) 3%,
		rgba(60, 132, 206, 1) 38%,
		rgb(85, 163, 158) 68%,
		rgb(23, 21, 21) 98%
	);
	animation: gradient 15s ease infinite;
	background-size: 400% 400%;
	background-attachment: fixed;
}

@keyframes gradient {
	0% {
		background-position: 0% 0%;
	}

	50% {
		background-position: 100% 100%;
	}

	100% {
		background-position: 0% 0%;
	}
}

/* .de-gradien:hover {
	background: linear-gradient(to right, #bde2c2, #3ac262) !important;
} */

/* Large round */
.de-round-top-left {
	border-top-left-radius: 4px;
}

.de-round-top-right {
	border-top-right-radius: 4px;
}

.de-round-bottom-left {
	border-bottom-left-radius: 4px;
}

.de-round-bottom-right {
	border-bottom-right-radius: 4px;
}

/* Large round */
.de-round-top-left-large {
	border-top-left-radius: 8px;
}

.de-round-top-right-large {
	border-top-right-radius: 8px;
}

.de-round-bottom-left-large {
	border-bottom-left-radius: 8px;
}

.de-round-bottom-right-large {
	border-bottom-right-radius: 8px;
}

/* Large round */
/* XLarge round */
.de-round-top-left-xlarge {
	border-top-left-radius: 16px;
}

.de-round-top-right-xlarge {
	border-top-right-radius: 16px;
}

.de-round-bottom-left-xlarge {
	border-bottom-left-radius: 16px;
}

.de-round-bottom-right-xlarge {
	border-bottom-right-radius: 16px;
}

/* XLarge round */
/* xXLarge round */
.de-round-top-left-xxlarge {
	border-top-left-radius: 32px;
}

.de-round-top-right-xxlarge {
	border-top-right-radius: 32px;
}

.de-round-bottom-left-xxlarge {
	border-bottom-left-radius: 32px;
}

.de-round-bottom-right-xxlarge {
	border-bottom-right-radius: 32px;
}

/* xXLarge round */

.round-left-large {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

.round-right-large {
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

.round-top-large {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.round-bottom-large {
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

.round-left-xlarge {
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
}

.round-right-xlarge {
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
}

.round-top-xlarge {
	/* border-radius: 16px 16px 0 0; */
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}

.round-bottom-xlarge {
	/* border-radius: 0 0 16px 16px; */
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
}

button[data-title] {
	position: relative;
}

input[type='number'] {
	text-align: right;
}

/*.blink {
	animation: blinker 1.5s linear infinite;
	font-family: sans-serif;
}

@keyframes blinker {
	0% {
		color: red;
	}

	50% {
		color: black;
		opacity: 0;
	}

	100% {
		color: red;
	}
}*/

.de-button {
	border: none;
	display: inline-block;
	padding: 8px 16px;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background-color: inherit;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
}

.de-button:hover {
	color: #000 !important;
	background-color: #7ac2e4 !important;
}

.scrl-y {
	overflow-y: auto;
	overflow-x: hidden;
}

.scrl-x {
	overflow-x: auto;
	overflow-y: hidden;
}

.scrl-y::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
	background-color: #ffffff;
}

.scrl-y::-webkit-scrollbar {
	width: 4px;
	background-color: #ffffff;
}

.scrl-y::-webkit-scrollbar-thumb {
	background-color: #0f4e6c;
}

body {
	font-family: 'Roboto' !important;
}

.de-roboto {
	font-family: 'Roboto', sans-serif !important;
	/* font-family: 'Times New Roman', Times, serif !important; */
}

.de-check,
.de-radio {
	width: 18px;
	height: 18px;
	position: relative;
	cursor: pointer;
}

/* Gradien */
.w3-ios-dark-blue {
	color: #fff !important;
	background-color: #5856d6 !important;
}

.w3-ios-deep-blue {
	color: #fff !important;
	background-color: #007aff !important;
}

.w3-ios-blue {
	color: #fff !important;
	background-color: #34aadc !important;
}

.w3-ios-light-blue {
	color: #fff !important;
	background-color: #5ac8fa !important;
}

.w3-ios-green {
	color: #000 !important;
	background-color: #4cd964 !important;
}

.w3-ios-pink {
	color: #fff !important;
	background-color: #ff2d55 !important;
}

.w3-ios-red {
	color: #fff !important;
	background-color: #ff3b30 !important;
}

.w3-ios-orange {
	color: #fff !important;
	background-color: #ff9500 !important;
}

.w3-ios-yellow {
	color: #000 !important;
	background-color: #ffcc00 !important;
}

.w3-ios-grey {
	color: #fff !important;
	background-color: #8e8e93 !important;
}

.w3-ios-light-grey {
	color: #000 !important;
	background-color: #ceced2 !important;
}

.w3-ios-background {
	color: #000 !important;
	background-color: #efeff4 !important;
}

.w3-theme-gradient {
	color: #000 !important;
	background: -webkit-linear-gradient(top, #64b5f6 25%, #42a5f5 75%);
}

/*.w3-theme-gradient {
    color: #000 !important;
    background: -moz-linear-gradient(top, #64b5f6 25%, #42a5f5 75%);
}

.w3-theme-gradient {
    color: #000 !important;
    background: -o-linear-gradient(top, #64b5f6 25%, #42a5f5 75%);
}

.w3-theme-gradient {
    color: #000 !important;
    background: -ms-linear-gradient(top, #64b5f6 25%, #42a5f5 75%);
}

.w3-theme-gradient {
    color: #000 !important;
    background: linear-gradient(top, #64b5f6 25%, #42a5f5 75%);
}*/

/* Untuk Combo */
.de-combo-group {
	padding-top: 2px;
}

.de-row-color {
	background-color: #f2f3f4 !important;
}

/* Form Field */
.select-form {
	background: inherit;
	padding-top: 0px;
	border: none !important;
	margin-top: -8px;
}

.select-form:focus {
	outline: none;
}

/* Untuk kalender */
input[type='date']::-webkit-calendar-picker-indicator {
	background: transparent;
	bottom: 0;
	color: transparent;
	cursor: pointer;
	height: auto;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: auto;
}

input[type='month']::-webkit-calendar-picker-indicator {
	background: transparent;
	bottom: 0;
	color: transparent;
	cursor: pointer;
	height: auto;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: auto;
}

input[type='week']::-webkit-calendar-picker-indicator {
	background: transparent;
	bottom: 0;
	color: transparent;
	cursor: pointer;
	height: auto;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: auto;
}

input[type='datetime-local']::-webkit-calendar-picker-indicator {
	background: transparent;
	bottom: 0;
	color: transparent;
	cursor: pointer;
	height: auto;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: auto;
}

.de-animasi-warna:hover {
	transition: all 2s;
}

.leaflet-popup-content {
	margin: 10px !important;
	line-height: 1.3 !important;
	font-size: 13px !important;
	font-size: 1.08333em !important;
	min-height: 1px !important;
}

.de-sup {
	/*position: absolute;
	top: -6px;
	right: -10px;
	font-size: 0.65em;*/
	vertical-align: super;
	font-size: 0.65em;
}

.de-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}