.ajaxProgress {
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10000;
}

.loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.u-info {
    display: inline-block;
}
.c-m-0 {
    margin: 0px;
}

.c-mt-10 {
    margin-top: 10px;
}
.c-responsive {
    width: 100%;
}
.text-html {
    font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
    font-size: 12px;
}
.bogor-cinta {
    color: white;
    background-color: #009efb;
}
.badge {
    background-color: #777;
    color: #fff;
    display: inline-block;
    font-size: 8px;
    line-height: 1;
    min-width: 8px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.badge.badge-corner {
    color: #fff !important;
    position: absolute !important;
    right: -3px !important;}
.min-height-398 {
    min-height: 398px;
}
/* Transparent */
.g-bg-transparent {
    background-color: transparent !important;
}

.g-bg-transparent--hover:hover {
    background-color: transparent !important;
}

.g-bg-transparent--hover--after:hover::after {
    background-color: transparent !important;
}

.g-parent:hover .g-bg-transparent--parent-hover {
    background-color: transparent !important;
}

/* Complementary Colors
------------------------------------*/
/* Beige Colors */
.g-bg-beige {
    background-color: #e5e1de !important;
}

/* Color Green */
.g-bg-green {
    background-color: #72c02c !important;
}

.g-bg-green-opacity-0_1 {
    background-color: rgba(114, 192, 44, 0.1) !important;
}

.g-bg-green--hover:hover {
    background-color: #72c02c !important;
}

/* Color Blue */
.g-bg-blue {
    background-color: #3398dc !important;
}

.g-bg-blue-opacity-0_1 {
    background-color: rgba(51, 152, 220, 0.1) !important;
}

.g-bg-blue-opacity-0_7 {
    background-color: rgba(51, 152, 220, 0.7) !important;
}

.g-bg-blue-opacity-0_9 {
    background-color: rgba(51, 152, 220, 0.9) !important;
}

.g-bg-blue--hover:hover {
    background-color: #3398dc !important;
}

/* Color Light Blue */
.g-bg-lightblue {
    background-color: #edf2f8 !important;
}

.g-bg-lightblue-opacity-0_1 {
    background-color: rgba(237, 242, 248, 0.1) !important;
}

.g-bg-lightblue-v1 {
    background-color: #d6e2ee !important;
}

.g-bg-lightblue-v1-opacity-0_1 {
    background-color: rgba(214, 226, 238, 0.1) !important;
}

/* Color Dark Blue */
.g-bg-darkblue {
    background-color: #009 !important;
}

.g-bg-darkblue-opacity-0_1 {
    background-color: rgba(0, 0, 153, 0.1) !important;
}

/* Color Indigo */
.g-bg-indigo {
    background-color: #4263a3 !important;
}

.g-bg-indigo-opacity-0_1 {
    background-color: rgba(66, 99, 163, 0.1) !important;
}

/* Color Red */
.g-bg-red {
    background-color: #f00 !important;
}

.g-bg-red-opacity-0_1 {
    background-color: rgba(255, 0, 0, 0.1) !important;
}

.g-bg-red-opacity-0_2 {
    background-color: rgba(255, 0, 0, 0.2) !important;
}

.g-bg-red-opacity-0_5 {
    background-color: rgba(255, 0, 0, 0.5) !important;
}

.g-bg-red-opacity-0_8 {
    background-color: rgba(255, 0, 0, 0.8) !important;
}

.g-bg-red--hover:hover {
    background-color: #f00 !important;
}

/* Color Light Red */
.g-bg-lightred {
    background-color: #e64b3b !important;
}

.g-bg-lightred-opacity-0_1 {
    background-color: rgba(230, 75, 59, 0.1) !important;
}

.g-bg-lightred--hover:hover {
    background-color: #e64b3b !important;
}

/* Color Dark Red */
.g-bg-darkred {
    background-color: #a10f2b !important;
}

.g-bg-darkred-opacity-0_1 {
    background-color: rgba(161, 15, 43, 0.1) !important;
}

/* Color Purple */
.g-bg-purple {
    background-color: #9a69cb !important;
}

.g-bg-purple-opacity-0_1 {
    background-color: rgba(154, 105, 203, 0.1) !important;
}

.g-bg-purple-opacity-0_7 {
    background-color: rgba(154, 105, 203, 0.7) !important;
}

.g-bg-purple-opacity-0_9 {
    background-color: rgba(154, 105, 203, 0.9) !important;
}

.g-bg-purple-opacity-0_9--after::after {
    background-color: rgba(154, 105, 203, 0.9) !important;
}

.g-bg-purple--hover:hover {
    background-color: #9a69cb !important;
}

/* Color Dark Purple */
.g-bg-darkpurple {
    background-color: #6639b6 !important;
}

.g-bg-darkpurple-opacity-0_1 {
    background-color: rgba(102, 57, 182, 0.1) !important;
}

/* Color Pink */
.g-bg-pink {
    background-color: #e81c62 !important;
}

.g-bg-pink-opacity-0_1 {
    background-color: rgba(232, 28, 98, 0.1) !important;
}

.g-bg-pink-opacity-0_9 {
    background-color: rgba(232, 28, 98, 0.9) !important;
}

.g-bg-pink--hover:hover {
    background-color: #e81c62 !important;
}

.g-bg-pink--before::after, .g-bg-pink--after::after {
    background-color: #e81c62 !important;
}

.g-bg-pink--before--hover:hover::after, .g-bg-pink--after--hover:hover::after {
    background-color: #e81c62 !important;
}

/* Color Orange */
.g-bg-orange {
    background-color: #e57d20 !important;
}

.g-bg-orange-opacity-0_1 {
    background-color: rgba(229, 125, 32, 0.1) !important;
}

.g-bg-orange-opacity-0_2 {
    background-color: rgba(229, 125, 32, 0.2) !important;
}

.g-bg-orange--hover:hover {
    background-color: #e57d20 !important;
}

/* Color Deep Orange */
.g-bg-deeporange {
    background-color: #fe541e !important;
}

.g-bg-deeporange-opacity-0_1 {
    background-color: rgba(254, 84, 30, 0.1) !important;
}

.g-bg-deeporange--hover:hover {
    background-color: #fe541e !important;
}

/* Color Yellow */
.g-bg-yellow {
    background-color: #ebc71d !important;
}

.g-bg-yellow-opacity-0_1 {
    background-color: rgba(235, 199, 29, 0.1) !important;
}

.g-bg-yellow-opacity-0_7 {
    background: rgba(235, 199, 29, 0.7) !important;
}

.g-bg-yellow--hover:hover {
    background-color: #ebc71d !important;
}

/* Color Aqua */
.g-bg-aqua {
    background-color: #29d6e6 !important;
}

.g-bg-aqua-opacity-0_1 {
    background-color: rgba(41, 214, 230, 0.1) !important;
}

.g-bg-aqua-opacity-0_9 {
    background-color: rgba(41, 214, 230, 0.9) !important;
}

.g-bg-aqua--hover:hover {
    background-color: #29d6e6 !important;
}

/* Color Cyan */
.g-bg-cyan {
    background-color: #00bed6 !important;
}

.g-bg-cyan-opacity-0_1 {
    background-color: rgba(0, 190, 214, 0.1) !important;
}

.g-bg-cyan-opacity-0_9 {
    background-color: rgba(0, 190, 214, 0.9) !important;
}

.g-bg-cyan-opacity-0_9--after::after {
    background-color: rgba(0, 190, 214, 0.9) !important;
}

.g-bg-cyan--hover:hover {
    background-color: #00bed6 !important;
}

/* Color Teal */
.g-bg-teal {
    background-color: #18ba9b !important;
}

.g-bg-teal-opacity-0_1 {
    background-color: rgba(24, 186, 155, 0.1) !important;
}

.g-bg-teal-opacity-0_9 {
    background-color: rgba(24, 186, 155, 0.9) !important;
}

.g-bg-teal-opacity-0_9--after::after {
    background-color: rgba(24, 186, 155, 0.9) !important;
}

.g-bg-teal--hover:hover {
    background-color: #18ba9b !important;
}

/* Color Brown */
.g-bg-brown {
    background-color: #9c8061 !important;
}

.g-bg-brown-opacity-0_1 {
    background-color: rgba(156, 128, 97, 0.1) !important;
}

.g-bg-brown--hover:hover {
    background-color: #9c8061 !important;
}

/* Color Blue Gray */
.g-bg-bluegray {
    background-color: #585f69 !important;
}

.g-bg-bluegray-opacity-0_1 {
    background-color: rgba(88, 95, 105, 0.1) !important;
}

.g-bg-bluegray-opacity-0_2--before::before, .g-bg-bluegray-opacity-0_2--after::after {
    background-color: rgba(88, 95, 105, 0.2) !important;
}

.g-bg-bluegray-opacity-0_3--before::before, .g-bg-bluegray-opacity-0_3--after::after {
    background-color: rgba(88, 95, 105, 0.3) !important;
}

.g-bg-bluegray-opacity-0_5 {
    background-color: rgba(88, 95, 105, 0.5) !important;
}

.g-bg-bluegray-opacity-0_7 {
    background-color: rgba(88, 95, 105, 0.7) !important;
}


.load {
    border: 1px solid #fff;
    padding: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    transform: translate(-50%, -50%) rotate(135deg);
    /*change these sizes to fit into your project*/
    width: 65px;
    height: 65px;
}

    .load hr {
        border: 0;
        margin: 0;
        width: 40%;
        height: 40%;
        position: absolute;
        border-radius: 50%;
        animation: spin 2s ease infinite;
    }

    .load :first-child {
        background: #19a68c;
        animation-delay: -1.5s;
    }

    .load :nth-child(2) {
        background: #f63d3a;
        animation-delay: -1s;
    }

    .load :nth-child(3) {
        background: #fda543;
        animation-delay: -0.5s;
    }

    .load :last-child {
        background: #193b48;
    }

@keyframes spin {
    0%, 100% {
        transform: translateX(200%);
    }

    25% {
        transform: translateY(200%);
    }

    50% {
        transform: translateX(0);
    }

    75% {
        transform: translateY(0);
    }
}

.g-font-weight-500 {
    font-weight: 500;
}

.as-font-weight-400 {
    font-weight: 400;
}

.g-py-8 {
    padding-top: 0.57143rem !important;
    padding-bottom: 0.57143rem !important;
}

.as-width-60 {
    width: 60px !important;
}

.as-height-60 {
    height: 60px;
}

.as-width-50 {
    width: 50px !important;
}

.as-height-50 {
    height: 50px;
}

.as-font-size-25 {
    font-size: 1.78571rem !important;
}

.as-font-size-11 {
    font-size: 11px;
}

.as-font-size-12 {
    font-size: 12px;
}

.as-font-size-18 {
    font-size: 18px;
}

.as-py-10 {
    padding-top: 0.71429rem !important;
    padding-bottom: 0.71429rem !important;
}

.as-font-size-20 {
    font-size: 1.42857rem !important;
}

.as-font-size-15 {
    font-size: 15px !important;
}

.as-font-size-16 {
    font-size: 1.14286rem !important;
}

.as-color-blue-opacity_1 {
    background-color: rgb(132 239 219 / 22%) !important;
}

.as-height-10-rem {
    height: 10rem !important;
}

.as-width-27-rem {
    width: 27rem !important;
}

@media (min-width: 1680px) {
    .as-font-size-20--lg-2 {
        font-size: 1.42857rem !important;
    }
    .as-font-size-14--lg-2 {
        font-size: 14px !important;
    }

    .as-width-50--lg-2 {
        width: 50px !important;
    }

    .as-height-50--lg-2 {
        height: 50px;
    }

    .as-font-size-15--lg-2 {
        font-size: 15px;
    }
    .as-font-size-16--lg-2 {
        font-size: 1.14286rem !important;
    }
    .as-height-158--lg-2 {
        height: 158px !important;
    }
}
.as-height-400 {
    height: 400px;
}

.progress-box {
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    font-size: .75rem;
    line-height: 1rem;
    text-align: center;
    background-color: #e9ecef;
    border-radius: .25rem;
}

.as-rounded-5px {
    border-radius: 5px;
}

.as-rounded-10px {
    border-radius: 10px;
}

.as-rounded-15px {
    border-radius: 15px;
}

.as-rounded-20px {
    border-radius: 20px;
}

.as-rounded-30px {
    border-radius: 30px;
}

.as-rounded-40px {
    border-radius: 40px;
}

.as-rounded-50px {
    border-radius: 50px;
}

.as-mb-3 {
    margin-bottom: 0.21429rem !important;
}

.as-bg-black-gradient-opacity-v2,
.as-bg-black-gradient-opacity-v2--after::after {
    background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
    background-repeat: repeat-x;
}
.as-bg-overlay {
    position: relative;
}

@media (min-width: 768px) {
    .as-font-size-12--md {
        font-size: 12px;
    }
}