@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
:root {
    --primary-green: #23B3AA;
    --secondary-green: #118B84;
    --light-green: #E9F9F8;
    --dark-green: #05726C;
    --light-black: #9099a5;
    --primary-black: #121A22;
    --secondary-black: #38404A;
    --light-black-2: #B2BAC3;
    --white: #FFFFFF;
    --red: #D1323C;
    --background: #F7F8FA;
    --rounded-sm: 8px;
    --rounded-md: 16px;
    --rounded-card-header: 16px 16px 0 0;
    --rounded-card-footer-sm: 0 0 8px 8px;
    --horizontal-spar: #eceff1;
    --border: #eceff1;
    --blue-zoom: #2D8BFF;
    --progress-bar: #F2994A;
    --progress-bg: #FFF3E8;
}

html {
    height: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    position: relative;
    min-height: 100%;
    font-family: 'Inter', sans-serif;
}

*, *:before, *:after {
    box-sizing: inherit;
}

.btn-block+.btn-block {
    margin-top: 0;
}

a, a:hover {
    color: inherit;
    text-decoration: none;
}

/* navbar */

.navbar-light .navbar-toggler-icon {
    background-image: url('../../img/ruang-duka/hamburgermenu.svg');
}

.navbar-light .navbar-toggler-icon.open {
    background-image: url('../../img/ruang-duka/hamburgermenu-close.svg');
}

.navbar-light .navbar-toggler {
    padding: 0;
    border-color: transparent;
}

.navbar-light .navbar-toggler:focus {
    outline: none;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--primary-black);
}

.navbar-light .navbar-nav .nav-link.active {
    color: var(--primary-green);
}

@media (max-width: 991.98px) {
    .offcanvas-collapse {
        bottom: 0;
        top: 65px;
        left: 100%;
        z-index: 10;
        width: 100%;
        position: fixed;
        overflow-y: auto;
        visibility: hidden;
        padding-left: 1rem;
        padding-right: 1rem;
        transition-duration: .3s;
        background-color: var(--white);
        transition-property: left, visibility;
        transition-timing-function: ease-in-out;
    }
    .offcanvas-collapse.open {
        left: 0;
        visibility: visible;
    }
}

/* button */

/* button primary */

.btn {
    font-family: 'Inter', sans-serif;
    border-radius: var(--rounded-sm);
}

.btn-sm {
    padding: 7px 12px;
}

.btn-md {
    padding: 8px 15px;
}

.btn-lg {
    padding: 10px 25px;
}

.btn-primary svg, .btn-secondary svg {
    margin-right: 5px;
}

.btn-primary {
    border-color: transparent;
    background-color: var(--primary-green);
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    box-shadow: none!important;
    border-color: transparent!important;
    background-color: var(--secondary-green)!important;
}

.btn-primary.disabled {
    box-shadow: none!important;
    border-color: transparent!important;
    background-color: var(--light-black)!important;
}

.btn-primary.disabled:hover {
    box-shadow: none!important;
    border-color: transparent!important;
    background-color: var(--primary-green)!important;
}

.btn-outline-primary {
    color: var(--primary-green);
    border-color: var(--primary-green);
}

.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus {
    box-shadow: none!important;
    border-color: transparent!important;
    background-color: var(--secondary-green)!important;
}

.btn-outline-primary.disabled {
    box-shadow: none!important;
    color: var(--white);
    border-color: transparent!important;
    background-color: var(--light-black)!important;
}

.btn-outline-dark:hover svg, .btn-outline-dark:active svg, .btn-outline-dark:focus svg {
    fill: var(--white);
}

.btn-outline-dark:hover, .btn-outline-dark:active, .btn-outline-dark:focus {
    box-shadow: none!important;
}

/* button secondary */

.btn-secondary {
    border-radius: 8px;
    border-color: transparent;
    color: var(--primary-green);
    background-color: var(--white);
}

.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
    box-shadow: none!important;
    border-color: transparent!important;
    color: var(--primary-green)!important;
    background-color: var(--light-green)!important;
}

.btn-secondary.disabled {
    box-shadow: none!important;
    color: var(--light-black-2)!important;
    border-color: var(--light-black-2)!important;
    background-color: var(--background)!important;
}

/* input */

.form-group {
    position: relative;
}

.form-group svg {
    z-index: 3;
    fill: var(--light-black-2);
}

.form-group input {
    width: 100%;
    padding: 20px 15px;
    color: var(--primary-black);
    border-color: var(--border);
    border-radius: var(--rounded-sm);
}

.form-group input.greeting {
    background-color: var(--background);
}

.form-group label {
    z-index: 2;
    top: 1.8rem;
    left: 1rem;
    width: 100%;
    position: relative;
    transition: all 200ms;
    color: var(--light-black-2);
    background-color: var(--white);
}

.form-group label::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: -1px;
    left: 0px;
    transform: translateX(-100%);
    transition: all 0.3s ease;
}

.form-group input:focus, .form-group input:valid {
    box-shadow: none;
    background-color: var(--white);
    border-color: var(--primary-green);
}

.form-group label span {
    position: absolute;
    bottom: 47px;
    left: 0px;
    transition: all .3s ease;
}

.form-group input:focus+label span, .form-group input:valid+label span {
    font-size: 95%;
    padding: 0 5px;
    color: var(--primary-green);
    background-color: var(--white);
    transform: translate3d(0px, -100%, 0px);
}

/* input with icon password */

.form-group .icon.right {
    top: 10px;
    right: 1rem;
    cursor: pointer;
    position: absolute;
}

/* input with icon left */

.form-group .icon.left {
    top: 10px;
    left: 1rem;
    cursor: pointer;
    position: absolute;
}

.form-group input.left {
    width: 100%;
    padding: 20px 15px 20px 50px;
    color: var(--primary-black);
    border-radius: var(--rounded-sm);
}

.form-group .icon.left.search {
    top: 13px;
}

/* input with icon search */

.form-group input.search {
    width: 100%;
    padding: 25px 15px 25px 40px;
    border-color: var(--border);
    color: var(--primary-black);
    border-radius: var(--rounded-sm);
    box-shadow: 0px 16px 32px rgba(18, 26, 34, 0.08);
}

.form-group input.search:focus {
    box-shadow: none;
}

/* select */

.form-group select {
    width: 100%;
    height: 2.7rem;
    padding: 0 15px;
    color: var(--primary-black);
    border-radius: var(--rounded-sm);
}

.form-group select:focus, .form-group select:valid {
    box-shadow: none;
    border-color: var(--primary-green);
}

.form-group select:focus+label span, .form-group select:valid+label span {
    font-size: 95%;
    padding: 0 5px;
    color: var(--primary-green);
    background-color: var(--white);
    transform: translate3d(0px, -100%, 0px);
}

/* textarea */

.form-group textarea {
    padding-top: 15px;
    padding-left: 15px;
    color: var(--primary-black);
    border-radius: var(--rounded-sm);
    border-color: var(--border);
}

.form-group textarea.greeting {
    background-color: var(--background);
}

.form-group textarea:focus, .form-group textarea:valid {
    box-shadow: none;
    border-color: var(--primary-green);
    background-color: var(--white);
}

/* form validate */

.form-control.is-valid, .was-validated .form-control:valid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2323B2AA'%3E%3Cg data-name='Layer 2'%3E%3Cg data-name='checkmark-circle-2'%3E%3Crect width='24' height='24' opacity='0'/%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.3 7.61l-4.57 6a1 1 0 0 1-.79.39 1 1 0 0 1-.79-.38l-2.44-3.11a1 1 0 0 1 1.58-1.23l1.63 2.08 3.78-5a1 1 0 1 1 1.6 1.22z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D1323C'%3E%3Cg data-name='Layer 2'%3E%3Cg data-name='alert-circle'%3E%3Crect width='24' height='24' opacity='0'/%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 15a1 1 0 1 1 1-1 1 1 0 0 1-1 1zm1-4a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.custom-select.is-invalid, .was-validated .custom-select:invalid {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D1323C'%3E%3Cg data-name='Layer 2'%3E%3Cg data-name='alert-circle'%3E%3Crect width='24' height='24' opacity='0'/%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 15a1 1 0 1 1 1-1 1 1 0 0 1-1 1zm1-4a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center right 1.75rem/calc(.75em + .375rem) calc(.75em + .375rem) no-repeat;
}

.custom-select.is-valid, .was-validated .custom-select:valid {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2323B2AA'%3E%3Cg data-name='Layer 2'%3E%3Cg data-name='checkmark-circle-2'%3E%3Crect width='24' height='24' opacity='0'/%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.3 7.61l-4.57 6a1 1 0 0 1-.79.39 1 1 0 0 1-.79-.38l-2.44-3.11a1 1 0 0 1 1.58-1.23l1.63 2.08 3.78-5a1 1 0 1 1 1.6 1.22z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center right 1.75rem/calc(.75em + .375rem) calc(.75em + .375rem) no-repeat;
}

/* dropdown */

.dropdown .btn-secondary.dropdown-toggle {
    color: var(--primary-black);
    background-color: var(--white);
    border-color: var(--light-black-2);
}

.dropdown .btn-secondary.dropdown-toggle:active, .dropdown .btn-secondary.dropdown-toggle:focus, .dropdown .btn-secondary.dropdown-toggle:hover {
    color: var(--primary-green)!important;
    background-color: var(--white)!important;
    border-color: var(--primary-green)!important;
}

.dropdown .dropdown-menu {
    border-radius: var(--rounded-sm);
    transform: translate3d(0px, -130px, 0px)!important;
}

/* checkbox and radio */

.custom-control-label::before {
    border: 1.5px solid var(--secondary-black);
}

.custom-control-input:checked~.custom-control-label::before {
    box-shadow: none;
    background-color: var(--white)!important;
    border-color: var(--primary-green)!important;
}

.custom-control-input:focus~.custom-control-label::before {
    box-shadow: none;
}

/* checkbox */

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='20' viewBox='0 0 25 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.29289 7.37377L0.707107 9.95956C0.316582 10.3501 0.316582 10.9832 0.707106 11.3738L8.62623 19.2929C9.01675 19.6834 9.64991 19.6834 10.0404 19.2929L24.6262 4.70711C25.0168 4.31658 25.0168 3.68342 24.6262 3.29289L22.0404 0.707107C21.6499 0.316582 21.0168 0.316583 20.6262 0.707107L10.0404 11.2929C9.64992 11.6834 9.01675 11.6834 8.62623 11.2929L4.70711 7.37377C4.31658 6.98325 3.68342 6.98325 3.29289 7.37377Z' fill='%2323B3AA'/%3E%3C/svg%3E");
}

/* radio */

.custom-radio .custom-control-input:checked~.custom-control-label::after {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='10' fill='%2323B3AA'/%3E%3C/svg%3E");
}

/* table */

table tr:first-child td {
    border-top: 0;
}

/* progress */

.progress {
    height: 10px;
    border-radius: var(--rounded-sm);
    background-color: var(--progress-bg);
}

.progress .progress-bar {
    border-radius: var(--rounded-sm);
    background-color: var(--progress-bar);
}

/* card */

.card-one {
    border-color: var(--border);
    border-radius: var(--rounded-md);
}

.card-two {
    border-color: var(--border);
    border-radius: var(--rounded-md);
}

.card-three {
    border-color: var(--background);
    border-radius: var(--rounded-sm);
    background-color: var(--background);
}

.card-four {
    border-color: var(--border);
    border-radius: var(--rounded-sm);
}

.card-one .card-header {
    font-weight: 700;
    border-bottom: none;
    text-transform: capitalize;
    background-color: var(--white);
    border-radius: var(--rounded-card-header)!important;
}

.card-two .card-header {
    font-weight: 700;
    border-bottom: none;
    text-transform: uppercase;
    background-color: var(--background);
    border-radius: var(--rounded-card-header)!important;
}

.card-four .card-footer {
    background-color: var(--white);
    border-radius: var(--rounded-card-footer-sm);
}

.card-profile .photo {
    width: 100%;
    height: auto;
    max-width: 140px;
}

@media(min-width: 320px) {
    .card-fixed {
        margin-top: 0;
    }
    .card-ajust-list {
        margin-top: 0;
    }
}

@media (min-width: 768px) {
    .card-fixed {
        margin-top: 0;
    }
}

@media (min-width:992px) {
    .card-fixed {
        margin-top: -59.5rem;
    }
    .card-ajust-list {
        margin-top: -96.5rem!important;
    }
}

@media(min-width: 1024px) {
    .card-profile, .card-vendor {
        width: 18rem;
    }
    .card-fixed {
        width: 18rem;
        margin-top: -59.5rem;
    }
}

@media (min-width: 1200px) {
    .card-profile, .card-vendor {
        width: 22.8rem;
    }
    .card-fixed {
        width: 22.8rem;
        margin-top: -63rem;
    }
}

/* horizontal spar */

.horizontal-spar {
    height: 1px;
    width: 100%;
    background-color: var(--horizontal-spar);
}

.horizontal-spar-2 {
    height: 1px;
    width: 100%;
    background-color: var(--primary-green);
}

/* border */

.border-sm {
    border-radius: var(--rounded-md);
    border: 1px solid var(--horizontal-spar);
}

/* zoom video */

.youtube-video iframe {
    width: 100%;
    /* max-width: 700px; */
    height: 350px;
    border-radius: var(--rounded-sm);
    /* margin-bottom: 1rem; */
}

.iframe-parent-class::safter {
    content: '';
    cursor: pointer;
    z-index: 1000;
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background-image: url('../img/icon/close.svg');
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    background-color: var(--primary-green);
}

.zoom-video .zoom-circle {
    border-radius: 50%;
    background-color: var(--blue-zoom);
}

.zoom-video .zoom-circle svg {
    width: 4rem;
    height: 4em;
    padding: 1rem;
}

.zoom-video.zoom-end {
    border-color: transparent;
    background-color: var(--background);
}

.zoom-video.zoom-end .zoom-circle svg {
    width: 2.5rem;
    height: 2.5rem;
    padding: .5rem;
}

.zoom-video.zoom-active {
    border-color: transparent;
    background-color: var(--white);
}

.zoom-video.zoom-active .zoom-circle svg {
    width: 2.5rem;
    height: 2.5rem;
    padding: .5rem;
}

.btn-list-video[aria-expanded="true"] .arrow {
    transform: rotate(180deg);
}

.btn-list-video:focus, .btn-list-video:hover, .btn-list-video:active {
    box-shadow: none!important;
}

/* video floating */

.video-fixed {
    position: fixed!important;
    bottom: 0;
    transform: translateY(100%);
    width: 200px;
    height: 10px;
    z-index: 999;
    animation: fade-in-up .25s ease forwards;
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (min-width: 320px) {
    .youtube-video.floating iframe {
        width: 100%;
        max-width: 250px;
        height: 150px;
    }
    .video-fixed {
        top: 80px;
        left: 20px;
    }
}

@media (min-width: 768px) {
    .youtube-video.floating iframe {
        width: 100%;
        max-width: 350px;
        height: 200px;
    }
}

@media (min-width: 992px) {
    .youtube-video.floating iframe {
        width: 100%;
        max-width: 300px;
        height: 175px;
    }
    .video-fixed {
        top: 90px;
        left: 20px;
    }
}

/* loader */

.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background: var(--white);
}

.loader {
    position: absolute;
    top: 48%;
    left: 48%;
    margin: -20px 0 0 -71px;
    filter: contrast(20);
}

.loader .dot-animate {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: var(--primary-black);
    border-radius: 50%;
    transform: translateX(0);
    animation: dot 2.8s infinite;
}

.loader .dot-static {
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    animation: dots 2.8s infinite;
}

.loader .dot-static span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: var(--primary-black);
    border-radius: 50%;
}

@keyframes dot {
    50% {
        transform: translateX(96px);
    }
}

@keyframes dots {
    50% {
        transform: translateX(-31px);
    }
}

/* navigation */

::-webkit-scrollbar {
    display: none;
}

.navigation .tab-one .nav.nav-pills .nav-item .nav-link {
    padding-top: .5rem;
    padding-bottom: .5rem;
    margin-right: .5rem;
    border-radius: 8px 8px 0 0;
    border: transparent;
    color: var(--primary-black);
}

.navigation .tab-one .nav.nav-pills .nav-item .nav-link svg {
    fill: var(--primary-black);
}

.navigation .tab-one .nav.nav-pills .nav-item .nav-link.active svg {
    fill: var(--white);
}

.navigation .tab-one .nav.nav-pills .nav-item .nav-link.active {
    border: transparent;
    color: var(--white);
    background-color: var(--primary-green);
}

.navigation-border {
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.nav.nav-pills .nav-item .nav-link {
    display: flex;
    padding: .3rem 1rem;
    margin-right: 1rem;
    border-radius: 100px;
    border: 1px solid var(--background);
    background-color: var(--background);
}

.nav.nav-pills .nav-item .nav-link.active {
    color: var(--primary-green);
    border: 1px solid var(--primary-green);
    background-color: var(--light-green);
}

.nav.nav-pills .nav-item .nav-link svg {
    margin-right: .5rem;
}

.nav.nav-pills .nav-item .nav-link.active svg {
    fill: var(--primary-green);
}

@media (min-width:320px) {
    .navigation {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .navigation-border .navigation {
        display: flex;
        overflow-x: auto;
        margin-left: 15px;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .navigation-border .navigation .menu-slide, .navigation .menu-slide {
        flex: 0 0 auto;
    }
}

@media (min-width:768px) {
    .navigation-border .navigation {
        margin-left: 0;
        overflow: unset;
        justify-content: center;
    }
}

/* service-notfound */

.service-notfound {
    width: 100%;
    height: auto;
    max-width: 415px;
}

/* list almarhum */

.img-list {
    width: 100%;
    height: auto;
    border-radius: var(--rounded-sm);
}

@media (max-width: 768px) {
    .img-list {
        width: 75%;
    }
    .list-group-item {
        padding-top: .5rem;
        padding-bottom: .25rem;
    }
}