.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 1s linear infinite; */
    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.0;
    }

    50% {
        opacity: 0.0;
    }

    100% {
        opacity: 1.0;
    }
}

.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;
    /* color: red; */
    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;
}