/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com
File: Custom Css File
*/

/* @font-face {
  font-family: BeVietnamPro;
  src: url("/00_assets/01_fonts/be_vietnam_pro/BeVietnamPro-Regular.woff") format("woff");
}

* {
  font-family: BeVietnamPro;
} */
 
/* @font-face {
  font-family: Poppins;
  src: url("/00_assets/01_fonts/poppins/Poppins-Regular.ttf") format("ttf");
}

* {
  font-family: Poppins;
} */

:root {
  --app-color: #F36979;
  --app-sub-color: #EE4457;
  --app-subtwo-color: #EE4457;
}

:root,
[data-bs-theme='light'] {
  --vz-blue: #3577f1;
  --vz-indigo: #405189;
  --vz-purple: #6559cc;
  --vz-pink: #f672a7;
  --vz-red: #f06548;
  --vz-orange: #f1963b;
  --vz-yellow: #f7b84b;
  --vz-green: #0ab39c;
  --vz-teal: #02a8b5;
  --vz-cyan: #299cdb;
  --vz-white: #fff;
  --vz-gray: #878a99;
  --vz-gray-dark: #343a40;
  --vz-gray-100: #f3f6f9;
  --vz-gray-200: #eff2f7;
  --vz-gray-300: #e9ebec;
  --vz-gray-400: #ced4da;
  --vz-gray-500: #adb5bd;
  --vz-gray-600: #878a99;
  --vz-gray-700: #495057;
  --vz-gray-800: #343a40;
  --vz-gray-900: #212529;
  --vz-primary: #405189;
  --vz-secondary: #3577f1;
  --vz-success: #0ab39c;
  --vz-info: #299cdb;
  --vz-warning: #f7b84b;
  --vz-danger: #f06548;
  --vz-light: #f3f6f9;
  --vz-dark: #212529;
  --vz-primary-rgb: 64, 81, 137;
  --vz-secondary-rgb: 53, 119, 241;
  --vz-success-rgb: 10, 179, 156;
  --vz-info-rgb: 41, 156, 219;
  --vz-warning-rgb: 247, 184, 75;
  --vz-danger-rgb: 240, 101, 72;
  --vz-light-rgb: 243, 246, 249;
  --vz-dark-rgb: 33, 37, 41;
  --vz-primary-text-emphasis: #364574;
  --vz-secondary-text-emphasis: #2d65cd;
  --vz-success-text-emphasis: #099885;
  --vz-info-text-emphasis: #2385ba;
  --vz-warning-text-emphasis: #d29c40;
  --vz-danger-text-emphasis: #cc563d;
  --vz-light-text-emphasis: #ced4da;
  --vz-dark-text-emphasis: #343a40;
  --vz-primary-bg-subtle: #e2e5ed;
  --vz-secondary-bg-subtle: #e1ebfd;
  --vz-success-bg-subtle: #daf4f0;
  --vz-info-bg-subtle: #dff0fa;
  --vz-warning-bg-subtle: #fef4e4;
  --vz-danger-bg-subtle: #fde8e4;
  --vz-light-bg-subtle: #f9fbfc;
  --vz-dark-bg-subtle: #e9ebec;
  --vz-primary-border-subtle: #b3b9d0;
  --vz-secondary-border-subtle: #aec9f9;
  --vz-success-border-subtle: #9de1d7;
  --vz-info-border-subtle: #a9d7f1;
  --vz-warning-border-subtle: #fce3b7;
  --vz-danger-border-subtle: #f9c1b6;
  --vz-light-border-subtle: #eff2f7;
  --vz-dark-border-subtle: #adb5bd;
  --vz-white-rgb: 255, 255, 255;
  --vz-black-rgb: 0, 0, 0;
  --vz-font-sans-serif: 'Poppins', sans-serif;
  --vz-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --vz-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --vz-body-font-family: var(--vz-font-sans-serif);
  --vz-body-font-size: 0.8125rem;
  --vz-body-font-weight: 400;
  --vz-body-line-height: 1.5;
  --vz-body-color: #212529;
  --vz-body-color-rgb: 33, 37, 41;
  --vz-body-bg: #f3f3f9;
  --vz-body-bg-rgb: 243, 243, 249;
  --vz-emphasis-color: #212529;
  --vz-emphasis-color-rgb: 33, 37, 41;
  --vz-secondary-color: #878a99;
  --vz-secondary-color-rgb: 135, 138, 153;
  --vz-secondary-bg: #fff;
  --vz-secondary-bg-rgb: 255, 255, 255;
  --vz-tertiary-color: rgba(33, 37, 41, 0.5);
  --vz-tertiary-color-rgb: 33, 37, 41;
  --vz-tertiary-bg: #eff2f7;
  --vz-tertiary-bg-rgb: 239, 242, 247;
  --vz-heading-color: #495057;
  --vz-link-color: #405189;
  --vz-link-color-rgb: 64, 81, 137;
  --vz-link-decoration: none;
  --vz-link-hover-color: #405189;
  --vz-link-hover-color-rgb: 64, 81, 137;
  --vz-code-color: #f672a7;
  --vz-highlight-color: #212529;
  --vz-highlight-bg: #fcf8e3;
  --vz-border-width: 1px;
  --vz-border-style: solid;
  --vz-border-color: #e9ebec;
  --vz-border-color-translucent: #ced4da;
  --vz-border-radius: 0.25rem;
  --vz-border-radius-sm: 0.2rem;
  --vz-border-radius-lg: 0.3rem;
  --vz-border-radius-xl: 1rem;
  --vz-border-radius-xxl: 2rem;
  --vz-border-radius-2xl: var(--vz-border-radius-xxl);
  --vz-border-radius-pill: 50rem;
  --vz-box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
  --vz-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --vz-box-shadow-lg: 0 5px 10px rgba(30, 32, 37, 0.12);
  --vz-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --vz-focus-ring-width: 0.25rem;
  --vz-focus-ring-opacity: 0.25;
  --vz-focus-ring-color: rgba(var(--vz-primary-rgb), 0.25);
  --vz-form-valid-color: #0ab39c;
  --vz-form-valid-border-color: #0ab39c;
  --vz-form-invalid-color: #f06548;
  --vz-form-invalid-border-color: #f06548;
}

[data-bs-theme='dark'] {
  color-scheme: dark;
  --vz-body-color: #ced4da;
  --vz-body-color-rgb: 206, 212, 218;
  --vz-body-bg: #1a1d21;
  --vz-body-bg-rgb: 26, 29, 33;
  --vz-emphasis-color: #fff;
  --vz-emphasis-color-rgb: 255, 255, 255;
  --vz-secondary-color: #878a99;
  --vz-secondary-color-rgb: 135, 138, 153;
  --vz-secondary-bg: #212529;
  --vz-secondary-bg-rgb: 33, 37, 41;
  --vz-tertiary-color: rgba(206, 212, 218, 0.75);
  --vz-tertiary-color-rgb: 206, 212, 218;
  --vz-tertiary-bg: #2a2d31;
  --vz-tertiary-bg-rgb: 42, 45, 49;
  --vz-primary-text-emphasis: #6674a1;
  --vz-secondary-text-emphasis: #5d92f4;
  --vz-success-text-emphasis: #3bc2b0;
  --vz-info-text-emphasis: #54b0e2;
  --vz-warning-text-emphasis: #f9c66f;
  --vz-danger-text-emphasis: #f3846d;
  --vz-light-text-emphasis: #535659;
  --vz-dark-text-emphasis: #5f6164;
  --vz-primary-bg-subtle: rgba(64, 81, 137, 0.15);
  --vz-secondary-bg-subtle: rgba(53, 119, 241, 0.15);
  --vz-success-bg-subtle: rgba(10, 179, 156, 0.15);
  --vz-info-bg-subtle: rgba(41, 156, 219, 0.15);
  --vz-warning-bg-subtle: rgba(247, 184, 75, 0.15);
  --vz-danger-bg-subtle: rgba(240, 101, 72, 0.15);
  --vz-light-bg-subtle: #25282c;
  --vz-dark-bg-subtle: #313437;
  --vz-primary-border-subtle: #2a3559;
  --vz-secondary-border-subtle: #1b3c79;
  --vz-success-border-subtle: #055a4e;
  --vz-info-border-subtle: #154e6e;
  --vz-warning-border-subtle: #7c5c26;
  --vz-danger-border-subtle: #783324;
  --vz-light-border-subtle: #35383c;
  --vz-dark-border-subtle: #3c3f42;
  --vz-heading-color: #ced4da;
  --vz-link-color: #d9dce7;
  --vz-link-hover-color: #e1e3ec;
  --vz-link-color-rgb: 217, 220, 231;
  --vz-link-hover-color-rgb: 225, 227, 236;
  --vz-code-color: #f672a7;
  --vz-highlight-color: #ced4da;
  --vz-highlight-bg: #634a1e;
  --vz-border-color: #32383e;
  --vz-border-color-translucent: #32383e;
  --vz-form-valid-color: #3bc2b0;
  --vz-form-valid-border-color: #3bc2b0;
  --vz-form-invalid-color: #f3846d;
  --vz-form-invalid-border-color: #f3846d;
}

/* BORDER */
.border-left-3-info {
  border-left: 5px solid #299cdb;
}

/* MARGIN */
/* margin top */
.mt-150px {
  margin-top: 150px;
}

/* RESPONSIVE */

/* max width */

@media screen and (max-width: 1290.5px) {
  .nav-name-text {
    font-size: 12px;
  }
  .nav-name-sub-text {
    font-size: 12px;
  }
  .nav-text-size {
    font-size: 12px;
  }
}

@media screen and (max-width: 1199.5px) {
  .ms-timeline-cus {
    margin-left: -100px;
  }
}

@media screen and (max-width: 991.5px) {
  .ms-timeline-cus {
    margin-left: 40px;
  }
  .modal.modal-center .modal-dialog {
    position: absolute;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    margin: 0; /* hilangkan margin default */
    width: 90%;
  }
}

@media screen and (max-width: 575px) {
  .mt-success-reg {
    margin-top: 50px;
  }
  .width-dok-container {
    width: 100%;
  }
}

@media screen and (max-width: 345px) {
  .teks-brand-pondok {
    display: none;
  }
}

/* min width */

@media screen and (min-width: 575px) {
  .teks-brand-pondok {
    display: none;
  }
  .mt-success-reg {
    margin-top: 150px;
  }
  .width-dok-container {
    width: 180px;
  }
  .height-carousel-cus {
    height: 550px;
  }
}

@media screen and (min-width: 668.5px) {
  .height-carousel-cus {
    height: 700px;
  }
}

@media screen and (min-width: 991.5px) {
  .w-unggah {
    width: 50%;
  }
  .height-carousel-cus {
    height: 600px;
  }
  .modal.modal-center .modal-dialog {
    position: absolute;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    margin: 0; /* hilangkan margin default */
    width: 45%;
  }
}

@media screen and (min-width: 1199.5px) {
  .ms-timeline-cus {
    margin-left: -120px;
  }
  .position-lg-absolute {
    position: absolute;
  }
}

@media screen and (min-width: 1290.5px) {
  .nav-name-sub-text {
    font-size: 12px;
  }
}


.text-a-justify {
  text-align: justify;
}

.bg-info-0-1 {
  background-color: rgba(41,156,219,.1);
}

/* STICKY SIDE */
@media (min-width: 992px) {
  .sticky-side {
    position: sticky;
    top: calc(1px);
  }
}

.text-truncate-one-lines {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.text-truncate-three-lines {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

/* MODAL CUSTOM */
.modal-backdrop {
  opacity: 40%;
  transition: opacity 0s ease-in-out;
}

.fade-modal .modal-dialog {
    -webkit-animation: fadeInDown 0.3s;
    animation: fadeInDown 0.3s;
}

/* Saat modal ditutup, tambahkan kelas ini secara dinamis */
.fade-modal.out .modal-dialog {
    -webkit-animation: fadeOutUp 0.3s;
    animation: fadeOutUp 0.3s;
}

/* Keyframes untuk fade in */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -30px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Keyframes untuk fade out */
@keyframes fadeOutUp {
    from {
        opacity: 1;
        transform: none;
    }
    to {
        opacity: 0;
        transform: translate3d(0, -30px, 0);
    }
}
/* END MODAL CUSTOM */

/* .bg-login {
  background-image: url(/00_assets/02_images/EasyMeds/bg_login.png);
  background-size: cover;
  background-position: center;
} */


.min-vh-75-2 {
  min-height: 75.2vh;
}

.hover-bg-light:hover {
  background-color:  var(--vz-light);
}

.user-chat {
  background: url(/00_assets/02_images/chat-bg-pattern.png) !important;
  -webkit-transition: all 0.4s !important;
  transition: all 0.4s !important;
  position: relative !important;
  background-color: var(--vz-body-bg) !important;
}

.kertas-resep {
  width: 12cm;
}

/* ------------------------------------- CUSTOM APP ------------------------------------------ */

/* APP THEME COLOR */
.app-color {
  background-color: var(--app-color);
}
.app-sub-color {
  background-color: var(--app-sub-color);
}
.app-subtwo-color {
  background-color: var(--app-subtwo-color);
}

/* OFF CANVAS HOVER */
.offcanvas .navbar-nav .nav-item .nav-link.hover-custom:hover {
  color: var(--app-color);
  background-color: var(--app-sub-color);
}

/* BTN */
.shopee-color {
  background-color: #EE4D2D;
}
.whatsapp-color {
  background-color: #25D366;
}

.btn-darkgold-color {
  background-color: #A47A14;
}

.btn-app-color {
  background-color: var(--app-color);
  color: var(--app-sub-color);
}

.mt-180px {
  margin-top: 180px;
}

@media screen and (min-width: 1291px) {
  .btn-custom {
    margin-left: 80px;
  }
  .btn-klinik {
    margin-top: -600px;
  }
  .mt-contact {
    margin-top: 180px;
  }
  .mt-sosmed {
    margin-top: 160px;
  }
}

@media screen and (max-width: 1290.5px) {
  .btn-custom {
    margin-left: 80px;
  }
  .btn-klinik {
    margin-top: -600px;
  }
  .mt-contact {
    margin-top: 180px;
  }
  .mt-sosmed {
    margin-top: 160px;
  }
}

@media screen and (max-width: 1199.5px) {
  .btn-custom {
    margin-left: 65px;
  }
  .btn-klinik {
    margin-top: -700px;
  }
  .mt-sosmed {
    margin-top: 160px;
  }
}

@media screen and (max-width: 991.5px) {
  .btn-custom {
    margin-left: 50px;
  }
  .btn-klinik {
    margin-top: -500px;
  }
}

@media screen and (max-width: 768.5px) {
  .btn-custom {
    bottom: 0px;
    margin-left: 35px;
  }
  .btn-klinik {
    margin-top: -300px;
  }
  .mt-sosmed {
    margin-top: 100px;
  }
}

@media screen and (max-width: 575px) {
  .btn-custom {
    font-size: 10px;
  }
  .btn-klinik {
    margin-top: -100%;
  }
  .mt-contact {
    margin-top: 100px;
  }
  .mt-sosmed {
    margin-top: 50px;
  }
}

.custom-container {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 992px) {
  .custom-container {
    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
}


.container-footer {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 992px) {
  .container-footer {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
}


@media (max-width: 768.5px) {
  .container-footer {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 125px;
    padding-right: 125px;
  }
}

@media (max-width: 992px) {
  .container-footer {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
}

.hero-nav.swiper-button-next::after,
.hero-nav.swiper-button-prev::after {
  color: white !important;
}

.bg-detail {
  background: linear-gradient(180deg,rgba(255, 254, 254, 1) 10%, rgba(237, 83, 83, 0) 100%);
}

.gradient-overlay-klinik {
    background: linear-gradient(to bottom, var(--app-sub-color) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}