.logo-header {
    max-height: 100px;
    width: auto;
}

/* Custom For Admin */

/* Sidebar */
.admin.sidebar-left {
    background-color: #2EAF7D;
}

.google-maps {
    height: 500px;
    width: 500px;
}

#map {
    height: 100%;
}

/* Logo */
html.modern .header.header-nav-menu .admin .logo:after {
    background: #2EAF7D;
}

/* Toggle */
html.modern .admin.sidebar-left .sidebar-header .sidebar-toggle {
    background-color: #2EAF7D;
}

html.modern .admin.sidebar-left .sidebar-header .sidebar-toggle i {
    color: #FCE181;
}

/* Nano */
html.no-overflowscrolling .admin.sidebar-left .admin.nano {
    background: #fff;
    box-shadow: -5px 0 0 #565656 inset;
}

html.no-overflowscrolling .admin.nano>.nano-pane>.nano-slider {
    background: #2EAF7D;
}

/* Menu */
.admin.nano ul.nav-main li a {
    color: #444;
}

.admin.nano>ul.nav-main>li>a:hover,
.admin.nano>ul.nav-main>li>a:focus,
.admin.nano>ul.nav-main>li>a.active {
    color: #02353C;
    background-color: #FFE67C;
}

html.modern .admin.nano ul.nav-main li i {
    color: #4ABDAC;
}

html.modern .admin.nano ul.nav-main li.nav-group-label {
    color: #026670;
}

html.modern .admin.nano ul.nav-main li.nav-parent>a:after {
    color: #4ABDAC;
}

html.modern .admin.nano ul.nav-main li.nav-expanded>a {
    color: #026670;
    background: #FFE67C;
}

.admin.nano ul.nav-main li .nav-children {
    background: #2EAF7D;
    box-shadow: 0px -3px 3px -3px rgba(0, 0, 0, 0.7) inset;
}

.admin.nano ul.nav-main li .nav-children li a:hover,
.admin.nano ul.nav-main li .nav-children li a:focus,
.admin.nano ul.nav-main li .nav-children li a.active {
    color: #02353C !important;
    background: #FFE67C;
}

/* Page Header */
.admin.page-header {
    background-color: #2EAF7D;
    background-image: linear-gradient(315deg, #49C5B6 0%, #2EAF7D 74%);
    border-left: none;
    border-bottom: none;
}

.bg-white {
    background-color: #FFF !important;
    color: black;
}

.bg-yellow {
    background-color: #FCE181 !important;
    color: #000;
}

.bg-green {
    background-color: #47a447 !important;
    color: #fff;
}

.bg-green-header {
    background-color: #2EAF7D !important;
    color: #fff;
}

.bg-orange {
    background-color: #FC4A1A !important;

}

.bg-orange-light {
    background-color: #FED8B1 !important;

}

.bg-red {
    background-color: #ff0000 !important;

}

.bg-blue-light {
    background-color: #CAEBF2 !important;

}

.bg-grey {
    background-color: #F2F2F2 !important;

}

.tt-input,
/* UPDATE: newer versions use tt-input instead of tt-query */
.tt-hint {
    width: 600px;
    /*height: 30px;*/
    padding: 8px 12px;
    font-size: 16px;
    line-height: 20px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
}

.tt-input {
    /* UPDATE: newer versions use tt-input instead of tt-query */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999;
}

.tt-menu {
    /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
    width: 600px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 14px;
    line-height: 15px;
}

.tt-suggestion.tt-cursor {
    /* UPDATE: newer versions use .tt-suggestion.tt-cursor */
    color: #fff;
    background-color: #0097cf;
}

.tt-suggestion p {
    margin: 0;
}

/*#icon_pass {
    display: initial;
    position: absolute;
    top: 2.3rem;
    right: 2rem;
    font-size: 1.5rem;
    color: lightgray;
}

#icon_confirm_pass {
    display: initial;
    position: absolute;
    top: 10.3rem;
    right: 2rem;
    font-size: 1.5rem;
    color: lightgray;
}*/

.border-highlight-green {
    border: 3px solid #47a447 !important;
}

.border-highlight-blue {
    border: 3px solid #CAEBF2 !important;
}

.border-highlight-orange {
    border: 3px solid #FC4A1A !important;
}

.comment_area {
    margin: -10px -15px;
    background-color: #f8f9fa !important;
    border-radius: 5px;
}

.comment_area .comment_area_box {
    margin: 10px 10px;
}

/*Menambahkan untuk scroll dari notifikasi*/
html.modern .notifications .notification-menu::-webkit-scrollbar {
    width: 8px;
}

html.modern .notifications .notification-menu::-webkit-scrollbar-track {
    border-radius: 10px;
    box-shadow: inset 0 0 5px grey;
    background: #777;
}

html.modern .notifications .notification-menu::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #2EAF7D;
}

::-webkit-scrollbar-thumb:hover {
    background: #2EAF7D;
}

/*FOTO GALLERY*/
.thumb-info.thumb-info-no-borders.thumb-info-no-borders-rounded,
.thumb-info.thumb-info-no-borders.thumb-info-no-borders-rounded img,
.thumb-info.thumb-info-no-borders.thumb-info-no-borders-rounded .thumb-info-wrapper,
.thumb-info.thumb-info-no-borders.thumb-info-no-borders-rounded .thumb-info-wrapper:after {
    border-radius: 4px;
}

.thumb-info.thumb-info-no-borders,
.thumb-info.thumb-info-no-borders img {
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
}

.thumb-info.thumb-info-no-borders,
.thumb-info.thumb-info-no-borders img {
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
}

.thumb-info {
    display: block;
    position: relative;
    text-decoration: none;
    max-width: 100%;
    background-color: #FFF;
    border-radius: 4px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

.thumb-info .thumb-info-wrapper {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    border-radius: 4px;
    margin: 0;
    overflow: hidden;
    display: block;
    position: relative;
}

.thumb-info .thumb-info-wrapper:after {
    content: "";
    background: rgba(33, 37, 41, 0.8);
    transition: all 0.3s;
    border-radius: 4px;
    bottom: -4px;
    color: #FFF;
    left: -4px;
    position: absolute;
    right: -4px;
    top: -4px;
    display: block;
    opacity: 0;
    z-index: 1;
}

.thumb-info.thumb-info-no-borders .thumb-info-wrapper:after {
    border-radius: 0;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
}

.thumb-info.thumb-info-lighten .thumb-info-wrapper:after {
    background: rgba(23, 23, 23, 0.25);
}

.thumb-info img {
    transition: all 0.3s ease;
    border-radius: 3px;
    position: relative;
    width: 100%;
}

.thumb-info .thumb-info-title {
    transition: all 0.3s;
    background: #333;
    color: #FFF;
    font-weight: 600;
    left: 0;
    letter-spacing: -.05em;
    position: absolute;
    z-index: 2;
    font-size: 17px;
    display: block;
    bottom: 0%;
    width: 100%
}

.thumb-info .thumb-info-inner {
    transition: all 0.3s;
    display: block;
}

.thumb-info.thumb-info-bottom-info .thumb-info-type {
    float: none;
    background: none;
    padding: 0;
    margin: 0;
}

.thumb-info:hover.thumb-info-centered-icons .thumb-info-action {
    opacity: 1;
    transform: translate3d(0, -50%, 0);
}

.thumb-info.thumb-info-centered-icons .thumb-info-action {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 0;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 45px;
    text-align: center;
    opacity: 0;
    transition: transform .2s ease-out, opacity .2s ease-out;
    transform: translate3d(0, -70%, 0);
    z-index: 2;
}

.thumb-info.thumb-info-centered-icons .thumb-info-action a {
    text-decoration: none;
}

.thumb-info.thumb-info-centered-icons .thumb-info-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 35px;
    height: 35px;
    font-size: 14px;
    border-radius: 50%;
    margin-right: 5px;
    transition: all 0.1s ease;
    z-index: 2;
}

.thumb-info.thumb-info-centered-icons .thumb-info-action-icon i {
    margin: 0;
}

.thumb-info.thumb-info-bottom-info .thumb-info-title {
    background: #FFF;
    left: 0;
    width: 100%;
    max-width: 100%;
    transition: transform .2s ease-out, opacity .2s ease-out;
    transform: translate3d(0, 100%, 0);
    top: auto;
    bottom: 0;
    opacity: 0;
    padding: 15px;
    text-shadow: none;
    color: #777;
}

.thumb-info.thumb-info-bottom-info:hover .thumb-info-title {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

html .thumb-info .thumb-info-action-icon-light {
    background-color: #FFF;
}

.w-100px {
    width: 100px !important;
}

.list_img_w100 {
    width: 100%;
}

.portfolio_img {
    max-width: 250px;
    height: auto;
}

/*TEXT*/
.text-old-green {
    color: #184D47 !important;
}

.text-green {
    color: #295F2D !important;
}

.text-green:hover,
.text-green:focus {
    color: #18391b !important;
    background-color: #d4dfd5 !important;
    border-radius: 10px !important;
}

.text-white {
    color: #F2F2F2 !important;
}

.text-light-green {
    color: #6FC27C !important;
}

.text-grey {
    color: #444444 !important;
}

.text-navy {
    color: #354259 !important;
}

/*BACKGROUND COLOR*/
.bg-error-notification {
    height: 500px;
    width: 100%;
    background-image: url(/media/init/ptsp_error_notif.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: contain;
}

.btn_icon {
    display: flex;
    position: absolute;
    right: .5rem;
    top: 8px;
    font-size: xx-large;
    color: lightgray;
}


.bg-white {
    background-color: #FFF;
}

.bg-white-pastel {
    background-color: #F2F2F2;
}

.bg-white-transparent {
    background-color: rgba(242, 242, 242, 0.9);
}

.bg-grey {
    background-color: #cfcfc4;
}

.bg-light-grey {
    background-color: #E4DEAE !important;
}

.bg-grey-transparent {
    background-color: rgba(169, 169, 169, 0.9);
}

.bg-old-green {
    background-color: #011B10;
}

.bg-green {
    background-color: #01A66F;
}

.bg-green-color-primary {
    background-color: #133A1B !important;
}

.bg-green-color-tertiary {
    background-color: #BDD99E !important;
}

.bg-green-color-secondary {
    background-color: #B7BF96 !important;
}

.bg-green-color-pastel {
    background-color: #01A66F !important;
}

.bg-green-transparent {
    background-color: rgba(119, 221, 119, 0.9);
}

.bg-yellow-pastel {
    background-color: #FFE662 !important;
}

.bg-light-blue {
    background-color: #d0ded8 !important;
}

.bg-light-green {
    background-color: #E5F6DF !important;
}


.btn-block {
    display: block;
    width: 100%;
    border: none;
    line-height: 1rem;
    cursor: pointer;
    text-align: center;
}

.height-150 {
    min-height: 150px !important;

}

.height-300 {
    min-height: 300px !important;

}

.height-450 {
    min-height: 450px !important;

}

.height-800 {
    min-height: 800px !important;
}

.bg-login {
    background-image: url(/static/media/bg-wallpaper/bg-login.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-signup {
    background-image: url(/static/media/bg-wallpaper/bg-signup.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-reset {
    background-image: url(/static/media/bg-wallpaper/bg-reset.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-success {
    background-image: url(/static/media/bg-wallpaper/bg-success.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.form-control {
    height: calc(2rem + 0.75rem + 2px) !important;
    font-size: 1.2rem;
}

.info-tiles {
    position: relative;
    padding: 5px 5px;
    background: #ffffff;
}

.info-tiles .info-icon {
    height: 28px;
    width: 28px;
    float: left;
    position: relative;
    justify-content: center;
    display: flex;
    align-items: center;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    border: 2px solid #1a8e5f;
    box-shadow: -3px 3px 0 #b5f2d9;
    margin-bottom: 0px;
}

.info-tiles .info-icon i {
    font-size: 0.9rem;
    color: #1a8e5f;
    margin-bottom: 0px;
}

.info-tiles .info-icon.secondary {
    border: 2px solid #cc2626;
    box-shadow: -4px 4px 0 #f9dfdf;
}

.info-tiles .info-icon.secondary i {
    color: #cc2626;
    margin-bottom: 0px;
}

.info-tiles .stats-detail {
    margin: 1px 0 0 33px;
}

.info-tiles h3 {
    margin: 0 0 .3rem 0;
    line-height: 100%;
}

.info-tiles p {
    margin: 0;
    line-height: 100%;
    color: #8796af;
}



@media (min-width:576px) {
    .col-sm {
        flex: 1 0 0%
    }

    .row-cols-sm-auto>* {
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-sm-1>* {
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-sm-2>* {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-sm-3>* {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .row-cols-sm-4>* {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-sm-5>* {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-sm-6>* {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-sm-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.3333333333%
    }

    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.6666666667%
    }

    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.3333333333%
    }

    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.6666666667%
    }

    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.3333333333%
    }

    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.6666666667%
    }

    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-sm-0 {
        margin-left: 0
    }

    .offset-sm-1 {
        margin-left: 8.3333333333%
    }

    .offset-sm-2 {
        margin-left: 16.6666666667%
    }

    .offset-sm-3 {
        margin-left: 25%
    }

    .offset-sm-4 {
        margin-left: 33.3333333333%
    }

    .offset-sm-5 {
        margin-left: 41.6666666667%
    }

    .offset-sm-6 {
        margin-left: 50%
    }

    .offset-sm-7 {
        margin-left: 58.3333333333%
    }

    .offset-sm-8 {
        margin-left: 66.6666666667%
    }

    .offset-sm-9 {
        margin-left: 75%
    }

    .offset-sm-10 {
        margin-left: 83.3333333333%
    }

    .offset-sm-11 {
        margin-left: 91.6666666667%
    }

    .g-sm-0,
    .gx-sm-0 {
        --bs-gutter-x: 0
    }

    .g-sm-0,
    .gy-sm-0 {
        --bs-gutter-y: 0
    }

    .g-sm-1,
    .gx-sm-1 {
        --bs-gutter-x: 0.25rem
    }

    .g-sm-1,
    .gy-sm-1 {
        --bs-gutter-y: 0.25rem
    }

    .g-sm-2,
    .gx-sm-2 {
        --bs-gutter-x: 0.5rem
    }

    .g-sm-2,
    .gy-sm-2 {
        --bs-gutter-y: 0.5rem
    }

    .g-sm-3,
    .gx-sm-3 {
        --bs-gutter-x: 1rem
    }

    .g-sm-3,
    .gy-sm-3 {
        --bs-gutter-y: 1rem
    }

    .g-sm-4,
    .gx-sm-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-sm-4,
    .gy-sm-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-sm-5,
    .gx-sm-5 {
        --bs-gutter-x: 3rem
    }

    .g-sm-5,
    .gy-sm-5 {
        --bs-gutter-y: 3rem
    }
}

@media (min-width:768px) {
    .col-md {
        flex: 1 0 0%
    }

    .row-cols-md-auto>* {
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-md-1>* {
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-md-2>* {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-md-3>* {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .row-cols-md-4>* {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-md-5>* {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-md-6>* {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-md-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-md-1 {
        flex: 0 0 auto;
        width: 8.3333333333%
    }

    .col-md-2 {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-md-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-md-4 {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .col-md-5 {
        flex: 0 0 auto;
        width: 41.6666666667%
    }

    .col-md-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-md-7 {
        flex: 0 0 auto;
        width: 58.3333333333%
    }

    .col-md-8 {
        flex: 0 0 auto;
        width: 66.6666666667%
    }

    .col-md-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-md-10 {
        flex: 0 0 auto;
        width: 83.3333333333%
    }

    .col-md-11 {
        flex: 0 0 auto;
        width: 91.6666666667%
    }

    .col-md-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-md-0 {
        margin-left: 0
    }

    .offset-md-1 {
        margin-left: 8.3333333333%
    }

    .offset-md-2 {
        margin-left: 16.6666666667%
    }

    .offset-md-3 {
        margin-left: 25%
    }

    .offset-md-4 {
        margin-left: 33.3333333333%
    }

    .offset-md-5 {
        margin-left: 41.6666666667%
    }

    .offset-md-6 {
        margin-left: 50%
    }

    .offset-md-7 {
        margin-left: 58.3333333333%
    }

    .offset-md-8 {
        margin-left: 66.6666666667%
    }

    .offset-md-9 {
        margin-left: 75%
    }

    .offset-md-10 {
        margin-left: 83.3333333333%
    }

    .offset-md-11 {
        margin-left: 91.6666666667%
    }

    .g-md-0,
    .gx-md-0 {
        --bs-gutter-x: 0
    }

    .g-md-0,
    .gy-md-0 {
        --bs-gutter-y: 0
    }

    .g-md-1,
    .gx-md-1 {
        --bs-gutter-x: 0.25rem
    }

    .g-md-1,
    .gy-md-1 {
        --bs-gutter-y: 0.25rem
    }

    .g-md-2,
    .gx-md-2 {
        --bs-gutter-x: 0.5rem
    }

    .g-md-2,
    .gy-md-2 {
        --bs-gutter-y: 0.5rem
    }

    .g-md-3,
    .gx-md-3 {
        --bs-gutter-x: 1rem
    }

    .g-md-3,
    .gy-md-3 {
        --bs-gutter-y: 1rem
    }

    .g-md-4,
    .gx-md-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-md-4,
    .gy-md-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-md-5,
    .gx-md-5 {
        --bs-gutter-x: 3rem
    }

    .g-md-5,
    .gy-md-5 {
        --bs-gutter-y: 3rem
    }
}

@media (min-width:992px) {
    .col-lg {
        flex: 1 0 0%
    }

    .row-cols-lg-auto>* {
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-lg-1>* {
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-lg-2>* {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-lg-3>* {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .row-cols-lg-4>* {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-lg-5>* {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-lg-6>* {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-lg-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-lg-1 {
        flex: 0 0 auto;
        width: 8.3333333333%
    }

    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.6666666667%
    }

    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.3333333333%
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.6666666667%
    }

    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.3333333333%
    }

    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.6666666667%
    }

    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-lg-0 {
        margin-left: 0
    }

    .offset-lg-1 {
        margin-left: 8.3333333333%
    }

    .offset-lg-2 {
        margin-left: 16.6666666667%
    }

    .offset-lg-3 {
        margin-left: 25%
    }

    .offset-lg-4 {
        margin-left: 33.3333333333%
    }

    .offset-lg-5 {
        margin-left: 41.6666666667%
    }

    .offset-lg-6 {
        margin-left: 50%
    }

    .offset-lg-7 {
        margin-left: 58.3333333333%
    }

    .offset-lg-8 {
        margin-left: 66.6666666667%
    }

    .offset-lg-9 {
        margin-left: 75%
    }

    .offset-lg-10 {
        margin-left: 83.3333333333%
    }

    .offset-lg-11 {
        margin-left: 91.6666666667%
    }

    .g-lg-0,
    .gx-lg-0 {
        --bs-gutter-x: 0
    }

    .g-lg-0,
    .gy-lg-0 {
        --bs-gutter-y: 0
    }

    .g-lg-1,
    .gx-lg-1 {
        --bs-gutter-x: 0.25rem
    }

    .g-lg-1,
    .gy-lg-1 {
        --bs-gutter-y: 0.25rem
    }

    .g-lg-2,
    .gx-lg-2 {
        --bs-gutter-x: 0.5rem
    }

    .g-lg-2,
    .gy-lg-2 {
        --bs-gutter-y: 0.5rem
    }

    .g-lg-3,
    .gx-lg-3 {
        --bs-gutter-x: 1rem
    }

    .g-lg-3,
    .gy-lg-3 {
        --bs-gutter-y: 1rem
    }

    .g-lg-4,
    .gx-lg-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-lg-4,
    .gy-lg-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-lg-5,
    .gx-lg-5 {
        --bs-gutter-x: 3rem
    }

    .g-lg-5,
    .gy-lg-5 {
        --bs-gutter-y: 3rem
    }
}

@media (min-width:1200px) {
    .col-xl {
        flex: 1 0 0%
    }

    .row-cols-xl-auto>* {
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-xl-1>* {
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-xl-2>* {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-xl-3>* {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .row-cols-xl-4>* {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-xl-5>* {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-xl-6>* {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-xl-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.3333333333%
    }

    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.6666666667%
    }

    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.3333333333%
    }

    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.6666666667%
    }

    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.3333333333%
    }

    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.6666666667%
    }

    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-xl-0 {
        margin-left: 0
    }

    .offset-xl-1 {
        margin-left: 8.3333333333%
    }

    .offset-xl-2 {
        margin-left: 16.6666666667%
    }

    .offset-xl-3 {
        margin-left: 25%
    }

    .offset-xl-4 {
        margin-left: 33.3333333333%
    }

    .offset-xl-5 {
        margin-left: 41.6666666667%
    }

    .offset-xl-6 {
        margin-left: 50%
    }

    .offset-xl-7 {
        margin-left: 58.3333333333%
    }

    .offset-xl-8 {
        margin-left: 66.6666666667%
    }

    .offset-xl-9 {
        margin-left: 75%
    }

    .offset-xl-10 {
        margin-left: 83.3333333333%
    }

    .offset-xl-11 {
        margin-left: 91.6666666667%
    }

    .g-xl-0,
    .gx-xl-0 {
        --bs-gutter-x: 0
    }

    .g-xl-0,
    .gy-xl-0 {
        --bs-gutter-y: 0
    }

    .g-xl-1,
    .gx-xl-1 {
        --bs-gutter-x: 0.25rem
    }

    .g-xl-1,
    .gy-xl-1 {
        --bs-gutter-y: 0.25rem
    }

    .g-xl-2,
    .gx-xl-2 {
        --bs-gutter-x: 0.5rem
    }

    .g-xl-2,
    .gy-xl-2 {
        --bs-gutter-y: 0.5rem
    }

    .g-xl-3,
    .gx-xl-3 {
        --bs-gutter-x: 1rem
    }

    .g-xl-3,
    .gy-xl-3 {
        --bs-gutter-y: 1rem
    }

    .g-xl-4,
    .gx-xl-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-xl-4,
    .gy-xl-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-xl-5,
    .gx-xl-5 {
        --bs-gutter-x: 3rem
    }

    .g-xl-5,
    .gy-xl-5 {
        --bs-gutter-y: 3rem
    }
}

@media (min-width:1400px) {
    .col-xxl {
        flex: 1 0 0%
    }

    .row-cols-xxl-auto>* {
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-xxl-1>* {
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-xxl-2>* {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-xxl-3>* {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .row-cols-xxl-4>* {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-xxl-5>* {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-xxl-6>* {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-xxl-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-xxl-1 {
        flex: 0 0 auto;
        width: 8.3333333333%
    }

    .col-xxl-2 {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-xxl-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-xxl-4 {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .col-xxl-5 {
        flex: 0 0 auto;
        width: 41.6666666667%
    }

    .col-xxl-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-xxl-7 {
        flex: 0 0 auto;
        width: 58.3333333333%
    }

    .col-xxl-8 {
        flex: 0 0 auto;
        width: 66.6666666667%
    }

    .col-xxl-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-xxl-10 {
        flex: 0 0 auto;
        width: 83.3333333333%
    }

    .col-xxl-11 {
        flex: 0 0 auto;
        width: 91.6666666667%
    }

    .col-xxl-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-xxl-0 {
        margin-left: 0
    }

    .offset-xxl-1 {
        margin-left: 8.3333333333%
    }

    .offset-xxl-2 {
        margin-left: 16.6666666667%
    }

    .offset-xxl-3 {
        margin-left: 25%
    }

    .offset-xxl-4 {
        margin-left: 33.3333333333%
    }

    .offset-xxl-5 {
        margin-left: 41.6666666667%
    }

    .offset-xxl-6 {
        margin-left: 50%
    }

    .offset-xxl-7 {
        margin-left: 58.3333333333%
    }

    .offset-xxl-8 {
        margin-left: 66.6666666667%
    }

    .offset-xxl-9 {
        margin-left: 75%
    }

    .offset-xxl-10 {
        margin-left: 83.3333333333%
    }

    .offset-xxl-11 {
        margin-left: 91.6666666667%
    }

    .g-xxl-0,
    .gx-xxl-0 {
        --bs-gutter-x: 0
    }

    .g-xxl-0,
    .gy-xxl-0 {
        --bs-gutter-y: 0
    }

    .g-xxl-1,
    .gx-xxl-1 {
        --bs-gutter-x: 0.25rem
    }

    .g-xxl-1,
    .gy-xxl-1 {
        --bs-gutter-y: 0.25rem
    }

    .g-xxl-2,
    .gx-xxl-2 {
        --bs-gutter-x: 0.5rem
    }

    .g-xxl-2,
    .gy-xxl-2 {
        --bs-gutter-y: 0.5rem
    }

    .g-xxl-3,
    .gx-xxl-3 {
        --bs-gutter-x: 1rem
    }

    .g-xxl-3,
    .gy-xxl-3 {
        --bs-gutter-y: 1rem
    }

    .g-xxl-4,
    .gx-xxl-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-xxl-4,
    .gy-xxl-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-xxl-5,
    .gx-xxl-5 {
        --bs-gutter-x: 3rem
    }

    .g-xxl-5,
    .gy-xxl-5 {
        --bs-gutter-y: 3rem
    }
}


/* carousel */
.owl-carousel {
    display: block
}

.owl-prev {
    position: absolute;
    top: 30%;
    left: -25px;
    display: block !important;
    border: 0px solid black;
    opacity: 0 !important;
    background-color: #D6D6D6;
    transition: color 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

.owl-next {
    position: absolute;
    top: 30%;
    right: -25px;
    display: block !important;
    border: 0px solid black;
    opacity: 0 !important;
    background-color: #D6D6D6;
    transition: background 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

.owl-carousel:hover .owl-nav .owl-prev {
    opacity: 1 !important;
    transition: opacity 0.5s ease-out;
}

.owl-carousel:hover .owl-nav .owl-next {
    opacity: 1 !important;
    transition: opacity 0.5s ease-out;
}

.owl-nav .owl-next:hover .owl-nav .owl-next {
    background-color: yellow;
    transition: background-color 0.5s ease-out;
}

.category-img {
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    background-position: center;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 80;
}

.custom-container-2 {
    position: relative;
    text-align: center;
    color: white;
}

.top-line {
    border-top: 2px solid #fff;
    left: 10px;
    position: absolute;
    top: 15px;
    width: 50%;
    opacity: 0% !important;
    transition: opacity 1s ease;
}

.bottom-line {
    border-top: 2px solid #fff;
    bottom: 15px;
    position: absolute;
    right: 10px;
    width: 50%;
    opacity: 0% !important;
    transition: opacity 1s ease;
}

.darken {
    -webkit-filter: brightness(100%);
}

.custom-container-2:hover .darken {
    -webkit-filter: brightness(70%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.custom-container-2:hover .top-line {
    opacity: 100% !important;
    transition: opacity 1s ease;
}

.custom-container-2:hover .bottom-line {
    opacity: 100% !important;
    transition: opacity 1s ease;
}

.img-fluid-40 {
    width: 40%;
    height: auto;
}

.img-fluid-60 {
    width: 60%;
    height: auto;
}

icon-blue {
    color: #263c97;
}

.block-userlink:hover icon-blue {
    color: #16bcdc;
}

.text-blue {
    color: #263c97 !important;
}

.text-blue-2 {
    color: #5c74d6 !important;
}

@import url("https://fonts.googleapis.com/css?family=Roboto");

@-webkit-keyframes come-in {
    0% {
        -webkit-transform: translatey(100px);
        transform: translatey(100px);
        opacity: 0;
    }

    30% {
        -webkit-transform: translateX(-50px) scale(0.4);
        transform: translateX(-50px) scale(0.4);
    }

    70% {
        -webkit-transform: translateX(0px) scale(1.2);
        transform: translateX(0px) scale(1.2);
    }

    100% {
        -webkit-transform: translatey(0px) scale(1);
        transform: translatey(0px) scale(1);
        opacity: 1;
    }
}

@keyframes come-in {
    0% {
        -webkit-transform: translatey(100px);
        transform: translatey(100px);
        opacity: 0;
    }

    30% {
        -webkit-transform: translateX(-50px) scale(0.4);
        transform: translateX(-50px) scale(0.4);
    }

    70% {
        -webkit-transform: translateX(0px) scale(1.2);
        transform: translateX(0px) scale(1.2);
    }

    100% {
        -webkit-transform: translatey(0px) scale(1);
        transform: translatey(0px) scale(1);
        opacity: 1;
    }
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    background: #eaedf2;
    font-family: 'Roboto', sans-serif;
}

.header_category {
    padding: 15px 0px;
}


/*Floating Button*/
.floating-container {
    position: fixed;
    width: 100px;
    height: 100px;
    bottom: 0;
    right: 0;
    margin: 35px 25px;
    z-index: 9999;
}

.floating-container:hover {
    height: 200px;
}

.floating-container:hover .floating-button {
    box-shadow: 0 10px 25px rgba(44, 179, 240, 0.6);
    -webkit-transform: translatey(5px);
    transform: translatey(5px);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.floating-container .element-container {
    position: absolute;
    bottom: 5rem;
    left: 2rem;

}

.floating-container:hover .element-container .float-element:nth-child(1) {
    -webkit-animation: come-in 0.4s forwards 0.2s;
    animation: come-in 0.4s forwards 0.2s;
}

.floating-container:hover .element-container .float-element:nth-child(2) {
    -webkit-animation: come-in 0.4s forwards 0.4s;
    animation: come-in 0.4s forwards 0.4s;
}

.floating-container:hover .element-container .float-element:nth-child(3) {
    -webkit-animation: come-in 0.4s forwards 0.6s;
    animation: come-in 0.4s forwards 0.6s;
}

.floating-container .floating-button {
    position: absolute;
    width: 65px;
    height: 65px;
    background: #2cb3f0;
    bottom: 40px;
    border-radius: 50%;
    left: 0;
    right: 0;
    margin: auto;
    color: white;
    line-height: 65px;
    text-align: center;
    font-size: 23px;
    z-index: 100;
    box-shadow: 0 10px 25px -5px rgba(44, 179, 240, 0.6);
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.floating-container .float-element {
    position: relative;
    display: block;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 15px auto;
    color: white;
    font-weight: 500;
    text-align: center;
    line-height: 50px;
    z-index: 0;
    opacity: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
}

.floating-container .float-element .material-icons {
    vertical-align: middle;
    font-size: 16px;
}

.floating-container .float-icon {
    display: flex;
    justify-content: center;
    width: 2em;
    height: 2em;
}

/*.floating-container .float-element:nth-child(1) {
            background: #42A5F5;
            box-shadow: 0 20px 20px -10px rgba(66, 165, 245, 0.5);
        }

        .floating-container .float-element:nth-child(2) {
            background: #4CAF50;
            box-shadow: 0 20px 20px -10px rgba(76, 175, 80, 0.5);
        }

        .floating-container .float-element:nth-child(3) {
            background: #FF9800;
            box-shadow: 0 20px 20px -10px rgba(255, 152, 0, 0.5);
        }*/