* {
                margin: 0;
                padding: 0;
            }

            html, body {
                width: 100%;
                /*height: 100%;*/
            }

            /*@media screen and (max-width: 1280px) and (max-height: 720px) {
               html {
                  transform: scale(.5);
               }
            }*/

            @media screen and (max-width: 1920px) {
                body {
                    zoom: 1;
                }
            }

            @media screen and (min-width: 1920px) {
                body {
                    zoom: 1.2;
                    /*font-size: vw;*/
                }
            }

            body::before {
                /*background: url("/img/background/bg.jpg") no-repeat;*/
                /*background-size: cover;*/

                background-color: #fff;
                content: "";
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -2;
                opacity: 1; /*0.7;*/
            }
            
            body::after {
                /*background-color: #563d7c;*/
                content: "";
                display: block;
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
                z-index: -1;
                /*opacity: 0.5;*/
                /*background-image: url('/img/logo/dukcapil_kemendagri_logo.png');*/
                /*background-repeat: no-repeat;*/
                /*background-attachment: fixed;*/
                /*background-position: center; */
                /*background-size: 300px 400px;*/
            }

            .section {
              -webkit-animation-duration: .38s;
                      animation-duration: .38s;
              -webkit-animation-fill-mode: both;
                      animation-fill-mode: both;
              -webkit-animation-name: slideInUp;
                      animation-name: slideInUp;
            }

            #loading-indicator {
                position: absolute;
                left: 10px;
                top: 10px;
            }

            .main-frm {
                transform: scale(1); /*scale(0.85);*/ /*0.9;*/
                opacity: 1; /*0.9;*/
            }

            .modal-open .main-frm {
                transform: scale(1); /*o.9*/
                opacity: 0.6;
                -webkit-animation-name: deepin; /* Safari 4.0 - 8.0 */
                animation-name: deepin;
            }

            @-webkit-keyframes deepin {
                0%   { opacity: 0.6; }
                100% { opacity: 0.4; }
            }

            .datatable-footer, .datatable-header {
                padding-top: 7px !important;
            }

            #user_table_info, #user_table_filter, #user_table_length {
                margin-bottom: 7px !important;
            }

            .dataTables_wrapper {
                font-family: 'Roboto Condensed' !important;
                position: relative;
                clear: both;
                *zoom: 1;    
                zoom: 1;
            }

            .dataTables_wrapper th {
                font-weight: bold;
            }

            th.dt-center, td.dt-center { text-align: center; }
            th.dt-left, td.dt-left { text-align: left; }
            th.dt-right, td.dt-right { text-align: right; }

            .refresh {
                text-decoration: none;
                color: #6e7179; 
                text-decoration-color: #e77817; 
                padding-left: 1px;
            }

            .table td, .table th {
                padding: 3px 5px 3px 5px;
            }

            .btn {
                border-radius: 0;
            }

            .datatable-header {
                padding-left: 0px !important;
                padding-right: 0px !important;
            }

            .dataTables_filter input {
                padding: .2rem 0 !important;
                font-size: .7rem;
            }

            .dataTables_length select {
                font-size: .7rem;
                height: 2rem;
            }

            .btn-custom {
                padding: 3px 5px; 
                font-family: 'Roboto Condensed' !important; 
                font-size: 10px; 
                text-transform: capitalize !important;
                border-color: #ffffff;
                margin: 1px !important;
            }

            .waves-float:active, .waves-float:focus, .waves-float:hover {
                transition: all .3s !important;
                -webkit-transition: all .3s !important;
                -moz-transition: all .3s !important;
                -o-transition: all .3s !important;
                
                box-shadow: 0 2px 10px 0 rgba(0,0,0,.18) !important;
                -webkit-box-shadow: 0 2px 10px 0 rgba(0,0,0,.18) !important;
                -moz-box-shadow: 0 2px 10px 0 rgba(0,0,0,.18) !important;
                -o-box-shadow: 0 2px 10px 0 rgba(0,0,0,.18) !important;

                outline: 0 !important;
            }

            .form-control:focus {
                box-shadow: none !important;
                -moz-box-shadow: none !important;
                -webkit-box-shadow: none !important;
                -o-box-shadow: none !important;
            }

            .input-custom {
                font-family: 'Roboto Condensed' !important;
                font-size: .75rem !important;
                height: 2rem !important;
                padding-top: 3px !important;
                padding-left: 10px !important;
                padding-bottom: 0px !important;
                margin-top: 10px !important;
                border-bottom: 1px dashed #ed9445c7 !important;
            }

            .input-custom2 {
                /*font-family: 'Roboto Condensed' !important;*/
                font-size: .75rem !important;
                height: 2rem !important;
                /*padding-top: 3px !important;*/
                padding-left: 10px !important;
                padding-bottom: 0px !important;
                /*margin-top: 10px !important;*/
                border-bottom: 1px dashed #ed9445c7 !important;
            }

            .input-custom3 {
                font-size: .75rem !important;
                height: 1.5rem !important;
                padding-left: 10px !important;
                padding-bottom: 0px !important;
                border-bottom: 1px dashed #ed9445c7 !important;
            }

            .input-custom3a {
                font-size: .75rem !important;
                height: 1.5rem !important;
                padding-left: 6px !important;
                padding-bottom: 0px !important;
                border-bottom: 1px dashed #ed9445c7 !important;
            }

            .input-custom4 {
                font-size: 0.75rem !important;
                padding-left: 10px !important;
                padding-bottom: 0px !important;
                border-bottom: 1px dashed #ed9445c7 !important;
            }

            .select-custom {
                font-family: 'Roboto Condensed' !important;
                font-size: .75rem !important;
                padding-bottom: 0px !important;
                border-bottom: 1px dashed #ed9445c7 !important;
            }

            .select-custom2 {
                font-family: 'Roboto Condensed' !important;
                font-size: .75rem !important;
                padding-bottom: 0px !important;
                padding-left: 10px !important;
                border-bottom: 1px dashed #ed9445c7 !important;
            }

            .textarea-custom {
                font-family: 'Roboto Condensed' !important;
                font-size: .75rem !important;
                padding-bottom: 0px !important;
                border-bottom: 1px dashed #ed9445c7 !important;
                line-height: unset !important;
            }

            .textarea-custom2 {
                font-family: 'Roboto Condensed' !important;
                font-size: .75rem !important;
                padding-bottom: 0px !important;
                border-bottom: 1px dashed #ed9445c7 !important;
                line-height: unset !important;
            }

            .label-custom {
                margin-bottom: 0px !important;
            }

            .div-label-custom {
                margin-top: 12px !important;
            }

            .div-label-custom2 {
                margin-top: 15px !important;
            }

            .div-label-custom3 {
                margin-top: 9px !important;
            }

            .modal-bodyChild, .modal-bodyChildx {
                padding: 0px 5px 0px 5px !important;
            }

            .modal-contentChild, .modal-contentChildx {
                font-family: 'Roboto Condensed' !important; 
                font-size: 10px; 
                /*line-height: 2.5;*/
            }

            .modal-footerChild, .modal-footerChildx {
                padding: 10px 15px 10px 15px !important;
            }

            .modal-footerChild2, .modal-footerChild2x {
                padding: 0px 5px 0px 5px !important;
            }

            .modal-headerChild, .modal-headerChildx {
                border-left: 2px solid hsla(28, 82%, 50%, 1); 
                background-color: hsla(28, 82%, 50%, 0.8); 
                color: #ffffff; 
                font-weight: bold; 
                padding: 5px 5px; 
                display: block;
            }

            .modal-titleChild, .modal-titleChildx {
                font-family: 'Roboto Condensed' !important; 
                font-size: 10px; 
                line-height: 2.5; 
                margin-bottom: 0px;
            }

            .capitalize {
                text-transform: capitalize;
            }

            .uppercase {
                text-transform: uppercase;
            }

            .form-control:disabled, .form-control[readonly] {
                background-color: #e9ecef;
                opacity: 1;
            }

            input{
                text-transform: capitalize;
            }

            .form-control:disabled {
                color: #333 !important;
            }

            .input-search-dt {
                border-radius: 4px;
                border: 1px solid #ccc;
                width:75%;
            }

            .lbl-set1 {
                border-radius: 1rem;
                font-size: 90%;
                padding-left: 10px;
                padding-right: 10px;
            }

            .left {
                text-align: left !important;
            }

            .center {
                text-align: center !important;
            }

            .bold {
                font-weight: bold !important;
            }

            table.fancytree-ext-table tbody tr.fancytree-active {
                background-color: #FFFFFF !important;
            }

            .tbl-scroll          { overflow-y: auto; height: 500px; }
            .tbl-scroll thead th { position: sticky; top: 0; }

            table  { border-collapse: collapse; width: 100%; }
            th, td { padding: 8px 16px; }
            th     { background:#ffffff;z-index:99999; }

            .leaflet-tooltip.my-labels {
                background-color: transparent;
                border: transparent;
                box-shadow: none;
                font-weight: bold;
                font-size: 12px;
            }

            .leaflet-control-info {
                padding: 2px;
                /*box-shadow: 0 0 15px rgba(0,0,0,0.2);*/

                font-family: 'Roboto Condensed' !important;
                font-size: 10px;
                color: #333333;
                text-align: left;

                /*border-radius: 5px;*/
                background-color: #ffffff;

                min-width: 300px;
                max-width: 250px;

                cursor: pointer !important;
            }

            .cls_pnl_swp_mpdtdsply {
                padding: 2px;
                box-shadow: 0 0 2px #ffffff;

                font-family: 'Roboto Condensed' !important;
                font-size: 10px;
                color: #333333;
                text-align: left;

                border-radius: 2px;
                background-color: #ffffff;

                min-width: 150px;
                max-width: 150px;

                cursor: pointer !important;
            }

            #id_pnl_mpdtdsply {
                padding: 1px;
                opacity: 1;
                border-radius: 5px;
                border-top: 1px solid #5c6bc0;
                cursor: pointer !important;

                -webkit-box-shadow: 0 1px 1.5px 1px rgba(0,0,0,.12);
                box-shadow: 0 1px 1.5px 1px rgba(0,0,0,.12);
                -webkit-transition: all .3s;
                -moz-transition: all .3s;
                -o-transition: all .3s;
                transition: all .3s;
            }

            #id_pnl_mpdtdsply:hover {
                opacity: 1;

                cursor: default !important;
            }

            .color-green-1 {
                color: #4caf50;
            }

            .color-orange-1 {
                color: #ff9800;
            }

            .color-random-1 {
                color: rgb(0 0 0 / 85%);
            }

            .text-gray-500 {
                --text-opacity: 1;
                color: rgba(160,174,192,var(--text-opacity));
            }

            .font-1dot2rem {
                font-size: 1.2rem !important;
            }

            .font-1dot1rem {
                font-size: 1.1rem !important;
            }

            .font-1rem {
                font-size: 1rem !important;
            }

            .font-dot9rem {
                font-size: 0.9rem !important;
            }

            .font-dot85rem {
                font-size: 0.85rem !important;
            }

            .font-dot8rem {
                font-size: 0.8rem !important;
            }

            .font-dot75rem {
                font-size: 0.75rem !important;
            }

            .font-dot7rem {
                font-size: 0.7rem !important;
            }

            .font-dot6rem {
                font-size: 0.6rem !important;
            }

            .font-dot61rem {
                font-size: 0.61rem !important;
            }

            .font-dot62rem {
                font-size: 0.62rem !important;
            }

            .font-dot63rem {
                font-size: 0.63rem !important;
            }

            .font-dot64rem {
                font-size: 0.64rem !important;
            }

            .font-dot65rem {
                font-size: 0.65rem !important;
            }

            .font-dot5rem {
                font-size: 0.5rem !important;
            }

            .font-dot55rem {
                font-size: 0.55rem !important;
            }

            .font-dot45rem {
                font-size: 0.45rem !important;
            }

            .font-dot4rem {
                font-size: 0.4rem !important;
            }

            .font-dot35rem {
                font-size: 0.35rem !important;
            }

            .font-dot3rem {
                font-size: 0.3rem !important;
            }

            .font-dot25rem {
                font-size: 0.25rem !important;
            }

            .font-dot2rem {
                font-size: 0.2rem !important;
            } 

            .font-family-cursive {
                font-family: cursive !important;
            }

            .font-family-roboto {
                font-family: "Roboto Condensed", sans-serif !important;;
            }

            .font-family-serif {
                font-family: serif !important;
            }

            .font-family-quicksand {
                font-family: 'Quicksand' !important;;
            }

            .line-height-1dot5 {
                line-height: 1.5;
            }

            .line-height-2dot5 {
                line-height: 2.5;
            }

            .shadow-lg {
                box-shadow: 0 0.2rem 0.4rem rgba(0,0,0,.175) !important;
            }

            .font-family-1 {
                font-family: 'Roboto Condensed' !important;
                font-variant: tabular-nums;
                line-height: 1.5;
            }

            .bg-green {
                background: #4caf50!important;
            }

            .navbar-dark .navbar-nav-link {
                color: #fff !important;
            }

            .text-shadow-888888 {
                text-shadow: 1px 1px 1px #888888;
            }

            .modal-content {
                border-radius: 10px;
            }

            .text-shadow-e6e6e6 {
                text-shadow: 1px 1px 1px #e6e6e6;
            }

            .dataTables_info {
                margin-bottom: 0 !important;
            }

            .dataTables_paginate .paginate_button {
                padding: .3rem !important;
                min-width: 1.6rem !important;
            }

            div.dataTables_wrapper div.dataTables_info {
                padding-top: 0 !important;
            }

            .dataTables_filter {
                margin: 0 !important;
            }

            .dataTables_length {
                margin: 0 !important;
            }

            .dataTables_filter input {
                font-size: 0.6rem !important;
            }

            .text-transform-none {
                text-transform: none;
            }

            .text-shadow-black {
                text-shadow: 1px 1px 1px #000;
            }

            .color-ff9800 {
                color: #ff9800;
            }

            .color-bd7100 {
                color: #bd7100;
            }

            .color-4caf50 {
                color: #4caf50;
            }

            .color-0aa711 {
                color: #0aa711;
            }

            .color-59984c {
                color: #59984c;
            }

            .color-ff5722 {
                color: #ff5722;
            }

            .separator-vertical-1 {
                background-image: linear-gradient(#d8d8d8 33%, rgba(255,255,255,0) 0%); background-position: right; background-size: 1px 8px; background-repeat: repeat-y;
            }

            .separator-horizontal-1 {
                border-top: 1px dashed gainsboro;    
            }

            .separator-horizontal-bottom-1 {
                border-bottom: 1px dashed gainsboro;    
            }

            .bg-color-ff9800 {
                background-color: #ff9800;
            }

            .bg-color-009688 {
                background-color: #009688;
            }

            #divdatademografigrafik {
                width: 100%;
                height: 400px;
            }

            #divdatademografigrafik2 {
                width: 100%;
                height: 300px;
            }

            .blink {
                animation: blink 1s linear infinite;
            }

            @keyframes blink {
                50% {
                    opacity: 0;
                }
            }

            .cursor-pointer {
                cursor: pointer;
            }

            .box-shadow-custom1 {
                box-shadow: 0 0px 1px rgba(0,0,0,.16), 0 0px 1px rgba(0,0,0,.23);
            }

            .text-shadow-a0a0a0 {
                text-shadow: 1px 1px 1px #a0a0a0;
            }

            /* pulse dot animation [start] */
            .pulsating-circle {
                background: rgb(204 204 204 / 0.2);
                border-radius: 50%;
                height: 15px;
                width: 15px;

                box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
                transform: scale(1);
                animation: pulse 2s infinite;
            }

            @keyframes pulse {
                0% {
                    transform: scale(0.95);
                    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
                }

                70% {
                    transform: scale(1);
                    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
                }

                100% {
                    transform: scale(0.95);
                    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
                }
            }
            /* pulse dot animation [end] */

            .loading_fiturWaiting:after {display: none;}

            .loading_fiturWaiting{
                background-color: rgba(0,0,0,0.8);
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                z-index: 9999;
            }
            .loader_fiturWaiting {
                margin: auto;
                margin-top: 40vh;
                border: 3px solid #f3f3f3;
                border-radius: 50%;
                border-top: 3px solid #de180f;
                border-bottom: 3px solid #de180f;
                width: 40px;
                height: 40px;
                -webkit-animation: spin 2s linear infinite; /* Safari */
                animation: spin 2s linear infinite;
            }

            @-webkit-keyframes spin {
                0% { -webkit-transform: rotate(0deg); }
                100% { -webkit-transform: rotate(360deg); }
            }

            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }

            ::-webkit-scrollbar {
                display: block !important;
                width: 5px !important;
                height: 5px !important;
            }
            ::-webkit-scrollbar-thumb {
                background: rgb(74 90 177 / 75%) !important;
            }
            ::-webkit-scrollbar-track {
                background: #fff !important;
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
            }

            .text-color-545454 {
                color: #545454;
            }

            .text-color-616161 {
                color: #616161;
            }

            .text-color-797979 {
                color: #797979 !important;
            }

            .text-color-ff9800 {
                color: #ff9800 !important;
            }

            .text-color-ff9800 {
                color: #ff9800 !important;
            }

            .text-color-f39100 {
                color: #f39100 !important; /*yellow*/
            }

            .text-color-c1ae06 {
                color: #c1ae06 !important; /*yellow*/
            }

            .text-color-5a71f5 {
                color: #5a71f5 !important; /*blue*/
            }

            .text-color-e0a800 {
                color: #e0a800 !important; 
            }

            .text-color-b58800 {
                color: #b58800 !important; 
            }

            .text-color-f95826 {
                color: #f95826 !important; 
            }

            .text-color-ca0912 {
                color: #ca0912 !important; 
            }

            .bg-2196f3  {
                background-color: #2196f3 !important;
            }

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

            .border-grey {
                border: 1px solid grey !important;
            }

            .cursor-pointer {
                cursor: pointer;
            }

            .text-underline {
                text-decoration: underline !important;
            }

            .photoviewer-modal {
                box-shadow: 0 0 6px 2px rgba(0, 0, 0, .3);
            }

            .photoviewer-inner {
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-color: rgb(255 255 255 / 0%) !important;
                border: none;
                border-radius: 0;
                backdrop-filter: unset;
            }

            .photoviewer-header .photoviewer-toolbar {
                background-color: rgba(0, 0, 0, .5);
            }

            .photoviewer-stage {
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-color: rgb(255 255 255 / 0%) !important;
                border: none;
            }

            .photoviewer-image {
                width: 100% !important;
                /*height: 100% !important;*/
                left: 0px !important
            }

            .photoviewer-header .photoviewer-toolbar {
                background-color: rgb(255 255 255 / 0%);
            }

            .svg-inline-icon {
                color: #fff;
            }

            .photoviewer-footer .photoviewer-toolbar {
                background-color: rgb(0 0 0 / 0%);
                border-top-left-radius: 0px;
                border-top-right-radius: 0px;
            }

            .photoviewer-footer {
                background-color: rgb(0 0 0 / 80%);
            }

            .photoviewer-header, .photoviewer-footer {
                pointer-events: none;
            }

            .photoviewer-title {
                color: #fff !important;
            }

            .photoviewer-button {
                color: #ccc;
                pointer-events: auto;
            }

            .photoviewer-footer .photoviewer-button:hover {
                color: white;
            }

            .text-transform-unset {
                text-transform: unset !important;
            }