/*=========================================================
=            SIMPATI RSUD MIMIKA
=            DESIGN SYSTEM
=            VARIABLES.CSS
=========================================================*/

/*=========================================================
=            ROOT
=========================================================*/

:root{

/*=========================================================
=            BRAND COLOR
=========================================================*/

--primary:#5F8D7A;
--primary-hover:#55806F;
--primary-active:#476C5E;

--primary-50:#F7FBF9;
--primary-100:#EEF7F3;
--primary-200:#D8EBE2;
--primary-300:#BEDCCD;
--primary-400:#95BDA8;
--primary-500:#5F8D7A;
--primary-600:#4D7665;
--primary-700:#3F6354;
--primary-800:#335145;
--primary-900:#263D34;

/*=========================================================
=            SECONDARY
=========================================================*/

--secondary:#8DAE9F;
--secondary-light:#EAF4EF;
--secondary-dark:#587565;

/*=========================================================
=            ACCENT
=========================================================*/

--accent:#00B894;
--accent-light:#DDF8F1;
--accent-dark:#0D7C66;

/*=========================================================
=            SUCCESS
=========================================================*/

--success:#198754;
--success-light:#D1F5E0;
--success-dark:#12683F;

/*=========================================================
=            WARNING
=========================================================*/

--warning:#FFC107;
--warning-light:#FFF7DA;
--warning-dark:#D39E00;

/*=========================================================
=            DANGER
=========================================================*/

--danger:#DC3545;
--danger-light:#FFE6E9;
--danger-dark:#B02A37;

/*=========================================================
=            INFO
=========================================================*/

--info:#0DCAF0;
--info-light:#DDF8FD;
--info-dark:#0A9CB8;

/*=========================================================
=            WHITE
=========================================================*/

--white:#FFFFFF;
--white-soft:#FCFCFC;
--white-light:#FAFAFA;

/*=========================================================
=            BLACK
=========================================================*/

--black:#000000;
--black-soft:#121212;

/*=========================================================
=            BACKGROUND
=========================================================*/

--bg:#F6FAF8;
--bg-soft:#FBFCFC;
--bg-section:#F2F8F5;
--bg-card:#FFFFFF;
--bg-footer:#28463B;

/*=========================================================
=            TEXT
=========================================================*/

--text:#263238;
--text-title:#1B2B2F;
--text-body:#55646A;
--text-muted:#93A2A9;
--text-light:#FFFFFF;

/*=========================================================
=            BORDER
=========================================================*/

--border:#E2EBE7;
--border-light:#EEF3F1;
--border-dark:#C7D4CE;

/*=========================================================
=            GLASS
=========================================================*/

--glass:rgba(255,255,255,.75);
--glass-dark:rgba(0,0,0,.08);
--glass-border:rgba(255,255,255,.25);

/*=========================================================
=            SHADOW
=========================================================*/

--shadow-xs:0 2px 4px rgba(0,0,0,.04);

--shadow-sm:0 6px 18px rgba(0,0,0,.05);

--shadow-md:0 10px 28px rgba(0,0,0,.08);

--shadow-lg:0 18px 45px rgba(0,0,0,.10);

--shadow-xl:0 25px 60px rgba(0,0,0,.14);

/*=========================================================
=            GLOW
=========================================================*/

--glow-primary:0 0 25px rgba(95,141,122,.25);

--glow-success:0 0 25px rgba(25,135,84,.25);

--glow-danger:0 0 25px rgba(220,53,69,.25);

/*=========================================================
=            GRADIENT
=========================================================*/

--gradient-primary:
linear-gradient(
135deg,
#5F8D7A,
#7DAE99
);

--gradient-soft:
linear-gradient(
135deg,
#F8FBFA,
#EEF7F2
);

--gradient-dark:
linear-gradient(
135deg,
#355548,
#5F8D7A
);

--gradient-hero:
linear-gradient(
120deg,
#5F8D7A,
#84B5A2,
#DDF2EA
);

/*=========================================================
=            FONT
=========================================================*/

--font-family:'Montserrat',sans-serif;
--font-xs:12px;
--font-sm:13px;
--font-md:14px;
--font-base:16px;
--font-lg:18px;
--font-xl:22px;
--font-2xl:28px;
--font-3xl:36px;
--font-4xl:48px;
--font-5xl:64px;

/*=========================================================
=            FONT WEIGHT
=========================================================*/

--fw-100:100;
--fw-200:200;
--fw-300:300;
--fw-400:400;
--fw-500:500;
--fw-600:600;
--fw-700:700;
--fw-800:800;
--fw-900:900;

/*=========================================================
=            LINE HEIGHT
=========================================================*/

--lh-xs:1;
--lh-sm:1.2;
--lh-md:1.4;
--lh-lg:1.6;
--lh-xl:1.8;
--lh-2xl:2;

/*=========================================================
=            LETTER SPACING
=========================================================*/

--ls-xs:-1px;
--ls-sm:-.5px;
--ls-md:0;
--ls-lg:.5px;
--ls-xl:1px;

/*=========================================================
=            RADIUS
=========================================================*/

--radius-xs:4px;
--radius-sm:8px;
--radius-md:12px;
--radius-lg:18px;
--radius-xl:24px;
--radius-2xl:32px;
--radius-pill:100px;
--radius-circle:50%;

/*=========================================================
=            SPACING
=========================================================*/

--space-0:0;
--space-2:2px;
--space-4:4px;
--space-6:6px;
--space-8:8px;
--space-10:10px;
--space-12:12px;
--space-14:14px;
--space-16:16px;
--space-20:20px;
--space-24:24px;
--space-28:28px;
--space-32:32px;
--space-36:36px;
--space-40:40px;
--space-48:48px;
--space-56:56px;
--space-64:64px;
--space-72:72px;
--space-80:80px;

/*=========================================================
=            TRANSITION
=========================================================*/

--transition-fast:.2s ease;

--transition:.35s ease;

--transition-slow:.6s ease;

--transition-bounce:
cubic-bezier(.68,-.55,.27,1.55);

}


/*=========================================================
=            SIMPATI RSUD MIMIKA
=            VARIABLES.CSS
=            BAGIAN 2
=========================================================*/

:root{

/*=========================================================
=            CONTAINER
=========================================================*/

--container-xs:540px;
--container-sm:720px;
--container-md:960px;
--container-lg:1140px;
--container-xl:1320px;
--container-xxl:1440px;

--container-padding:15px;
--container-section:90px;

/*=========================================================
=            GRID
=========================================================*/

--grid-gap-xs:8px;
--grid-gap-sm:12px;
--grid-gap-md:20px;
--grid-gap-lg:30px;
--grid-gap-xl:40px;

/*=========================================================
=            HEADER
=========================================================*/

--topbar-height:48px;
--navbar-height:82px;
--header-height:130px;

--navbar-padding-x:35px;
--navbar-padding-y:18px;

--navbar-radius:18px;

--navbar-shadow:0 12px 35px rgba(0,0,0,.08);

/*=========================================================
=            LOGO
=========================================================*/

--logo-width:55px;
--logo-height:55px;

--logo-mobile:45px;

/*=========================================================
=            HERO
=========================================================*/

--hero-height:720px;
--hero-mobile:580px;

--hero-overlay:.45;

--hero-title:58px;
--hero-subtitle:22px;

--hero-button-height:58px;

/*=========================================================
=            SECTION
=========================================================*/

--section-padding:100px;

--section-padding-mobile:60px;

--section-title:42px;

--section-subtitle:18px;

/*=========================================================
=            CARD
=========================================================*/

--card-radius:22px;

--card-padding:30px;

--card-padding-sm:20px;

--card-shadow:
0 15px 35px rgba(0,0,0,.08);

--card-hover-shadow:
0 25px 55px rgba(0,0,0,.12);

--card-border:
1px solid var(--border);

--card-hover-scale:1.03;

/*=========================================================
=            ICON
=========================================================*/

--icon-xs:16px;
--icon-sm:20px;
--icon-md:26px;
--icon-lg:34px;
--icon-xl:48px;
--icon-2xl:60px;

/*=========================================================
=            BUTTON
=========================================================*/

--btn-height:52px;

--btn-height-lg:60px;

--btn-radius:14px;

--btn-padding:
14px 30px;

--btn-font:
15px;

--btn-icon-gap:
12px;

--btn-shadow:
0 12px 25px rgba(95,141,122,.18);

/*=========================================================
=            INPUT
=========================================================*/

--input-height:55px;

--input-radius:12px;

--input-padding:
15px 20px;

--input-border:
1px solid var(--border);

--input-focus:
0 0 0 4px rgba(95,141,122,.12);

/*=========================================================
=            TEXTAREA
=========================================================*/

--textarea-height:180px;

/*=========================================================
=            TABLE
=========================================================*/

--table-radius:16px;

--table-padding:16px;

--table-header:
var(--primary);

/*=========================================================
=            SIDEBAR
=========================================================*/

--sidebar-width:280px;

--sidebar-mini:90px;

--sidebar-bg:
var(--primary);

--sidebar-color:
#FFFFFF;

--sidebar-radius:0;

/*=========================================================
=            FOOTER
=========================================================*/

--footer-padding:
80px;

--footer-title:
22px;

/*=========================================================
=            MODAL
=========================================================*/

--modal-width-sm:450px;

--modal-width-md:650px;

--modal-width-lg:900px;

--modal-radius:24px;

--modal-shadow:
0 25px 70px rgba(0,0,0,.15);

/*=========================================================
=            DROPDOWN
=========================================================*/

--dropdown-width:260px;

--dropdown-radius:16px;

--dropdown-shadow:
0 20px 45px rgba(0,0,0,.12);

/*=========================================================
=            BADGE
=========================================================*/

--badge-radius:50px;

--badge-padding:
6px 16px;

/*=========================================================
=            LOADER
=========================================================*/

--loader-size:55px;

--loader-speed:1.2s;

/*=========================================================
=            OPACITY
=========================================================*/

--opacity-0:0;
--opacity-10:.1;
--opacity-20:.2;
--opacity-30:.3;
--opacity-40:.4;
--opacity-50:.5;
--opacity-60:.6;
--opacity-70:.7;
--opacity-80:.8;
--opacity-90:.9;
--opacity-100:1;

/*=========================================================
=            BLUR
=========================================================*/

--blur-xs:2px;
--blur-sm:4px;
--blur-md:8px;
--blur-lg:16px;
--blur-xl:30px;

/*=========================================================
=            SCALE
=========================================================*/

--scale-xs:1.01;
--scale-sm:1.03;
--scale-md:1.05;
--scale-lg:1.08;
--scale-xl:1.12;

/*=========================================================
=            ROTATE
=========================================================*/

--rotate-xs:2deg;
--rotate-sm:5deg;
--rotate-md:8deg;
--rotate-lg:12deg;

/*=========================================================
=            FLOAT
=========================================================*/

--float-xs:4px;
--float-sm:8px;
--float-md:12px;
--float-lg:18px;

/*=========================================================
=            ANIMATION SPEED
=========================================================*/

--speed-fast:.20s;

--speed-normal:.40s;

--speed-slow:.80s;

--speed-hero:12s;

--speed-float:5s;

--speed-blob:20s;

--speed-gradient:18s;

/*=========================================================
=            EASING
=========================================================*/

--ease:
ease;

--ease-in:
ease-in;

--ease-out:
ease-out;

--ease-in-out:
ease-in-out;

--ease-bounce:
cubic-bezier(.68,-0.55,.27,1.55);

/*=========================================================
=            Z INDEX
=========================================================*/

--z-base:1;

--z-header:900;

--z-navbar:950;

--z-dropdown:980;

--z-sticky:990;

--z-fixed:999;

--z-modal:1050;

--z-toast:1100;

--z-loader:1200;

/*=========================================================
=            BREAKPOINT
=========================================================*/

--mobile:576px;

--tablet:768px;

--laptop:992px;

--desktop:1200px;

--wide:1400px;

}

/*=========================================================
=            SIMPATI RSUD MIMIKA
=            VARIABLES.CSS
=            BAGIAN 3
=========================================================*/

:root{

/*=========================================================
=            FONT
=========================================================*/

--font-family:
'Montserrat',
sans-serif;

--heading-font:
'Montserrat',
sans-serif;

--body-font:
'Montserrat',
sans-serif;

/*=========================================================
=            FLOATING PARTICLE
=========================================================*/

--particle-size-xs:6px;
--particle-size-sm:12px;
--particle-size-md:18px;
--particle-size-lg:30px;

--particle-opacity:.10;

--particle-blur:4px;

--particle-speed:18s;

--particle-delay:3s;

/*=========================================================
=            MEDICAL SHAPE
=========================================================*/

--medical-cross-size:45px;

--medical-circle-size:60px;

--medical-plus-size:55px;

--medical-heart-size:40px;

--medical-dot-size:12px;

--medical-line-width:120px;

/*=========================================================
=            BACKGROUND OBJECT
=========================================================*/

--bg-object-opacity:.05;

--bg-object-blur:2px;

--bg-object-rotate:360deg;

--bg-object-scale:1.10;

--bg-object-speed:45s;

/*=========================================================
=            FLOAT EFFECT
=========================================================*/

--float-distance-xs:5px;

--float-distance-sm:10px;

--float-distance-md:18px;

--float-distance-lg:30px;

--float-speed-xs:4s;

--float-speed-sm:6s;

--float-speed-md:8s;

--float-speed-lg:12s;

/*=========================================================
=            MOUSE EFFECT
=========================================================*/

--mouse-scale:1.04;

--mouse-shadow:
0 20px 45px rgba(95,141,122,.20);

--mouse-speed:.35s;

/*=========================================================
=            MAGNETIC BUTTON
=========================================================*/

--magnetic-distance:8px;

--magnetic-speed:.30s;

/*=========================================================
=            HERO ANIMATION
=========================================================*/

--hero-gradient-speed:20s;

--hero-overlay-opacity:.35;

--hero-blur:25px;

--hero-glow:
0 0 80px rgba(95,141,122,.20);

/*=========================================================
=            GLASS
=========================================================*/

--glass-opacity:.70;

--glass-blur:18px;

--glass-border:
rgba(255,255,255,.30);

/*=========================================================
=            RIPPLE
=========================================================*/

--ripple-size:220px;

--ripple-opacity:.18;

--ripple-speed:.6s;

/*=========================================================
=            SHINE
=========================================================*/

--shine-opacity:.50;

--shine-speed:.8s;

--shine-angle:25deg;

/*=========================================================
=            HOVER
=========================================================*/

--hover-lift:-10px;

--hover-scale:1.04;

--hover-rotate:2deg;

/*=========================================================
=            ICON
=========================================================*/

--icon-float:8px;

--icon-rotate:8deg;

--icon-speed:.45s;

/*=========================================================
=            SCROLL
=========================================================*/

--scroll-distance:60px;

--scroll-duration:1s;

--scroll-delay:.15s;

/*=========================================================
=            FADE
=========================================================*/

--fade-duration:1s;

--fade-distance:50px;

/*=========================================================
=            BOUNCE
=========================================================*/

--bounce-height:15px;

--bounce-speed:1.5s;

/*=========================================================
=            PULSE
=========================================================*/

--pulse-scale:1.08;

--pulse-speed:2s;

/*=========================================================
=            ROTATE
=========================================================*/

--rotate-speed:18s;

--rotate-angle:360deg;

/*=========================================================
=            MORPH
=========================================================*/

--blob-radius:
55% 45% 60% 40% /
45% 55% 45% 55%;

--blob-speed:14s;

/*=========================================================
=            CURSOR GLOW
=========================================================*/

--cursor-size:250px;

--cursor-opacity:.08;

--cursor-blur:60px;

/*=========================================================
=            PARALLAX
=========================================================*/

--parallax-xs:5px;

--parallax-sm:10px;

--parallax-md:18px;

--parallax-lg:35px;

/*=========================================================
=            LOADING
=========================================================*/

--skeleton-speed:1.5s;

--skeleton-opacity:.40;

}




/*=========================================================
=            SIMPATI RSUD MIMIKA
=            PREMIUM ANIMATION SYSTEM
=========================================================*/

:root{

/*=========================================================
=            FLOATING CARD
=========================================================*/

--float-card-y:18px;
--float-card-x:10px;

--float-card-speed-1:4s;
--float-card-speed-2:5s;
--float-card-speed-3:6s;
--float-card-speed-4:7s;
--float-card-speed-5:8s;

--float-card-delay-1:0s;
--float-card-delay-2:1s;
--float-card-delay-3:2s;
--float-card-delay-4:3s;
--float-card-delay-5:4s;

/*=========================================================
=            GLASS EFFECT
=========================================================*/

--glass-bg:
rgba(255,255,255,.72);

--glass-bg-dark:
rgba(255,255,255,.15);

--glass-border:
rgba(255,255,255,.35);

--glass-blur:
20px;

--glass-shadow:
0 20px 60px rgba(0,0,0,.08);

/*=========================================================
=            HERO GLOW
=========================================================*/

--hero-glow-green:
rgba(95,141,122,.35);

--hero-glow-blue:
rgba(73,145,255,.20);

--hero-glow-white:
rgba(255,255,255,.50);

--hero-glow-radius:
120px;

/*=========================================================
=            BLOB
=========================================================*/

--blob-size-1:450px;
--blob-size-2:300px;
--blob-size-3:220px;

--blob-speed-1:18s;
--blob-speed-2:22s;
--blob-speed-3:26s;

/*=========================================================
=            PARTICLE
=========================================================*/

--particle-count:40;

--particle-speed:20s;

--particle-opacity:.15;

--particle-size:8px;

/*=========================================================
=            MEDICAL ICON FLOAT
=========================================================*/

--medical-icon-size:50px;

--medical-icon-opacity:.08;

--medical-speed:10s;

/*=========================================================
=            MOUSE LIGHT
=========================================================*/

--mouse-light-size:350px;

--mouse-light-opacity:.15;

--mouse-light-speed:.35s;

/*=========================================================
=            MAGNETIC
=========================================================*/

--magnetic-distance:10px;

--magnetic-speed:.25s;

/*=========================================================
=            HOVER CARD
=========================================================*/

--hover-scale:1.08;

--hover-translate:-12px;

--hover-shadow:
0 30px 70px rgba(95,141,122,.20);

/*=========================================================
=            BUTTON
=========================================================*/

--button-hover-scale:1.05;

--button-hover-shadow:
0 18px 40px rgba(95,141,122,.25);

/*=========================================================
=            SHINE
=========================================================*/

--shine-speed:1.2s;

--shine-opacity:.65;

--shine-width:120px;

/*=========================================================
=            ECG LINE
=========================================================*/

--ecg-speed:12s;

--ecg-opacity:.08;

--ecg-height:120px;

/*=========================================================
=            HERO BACKGROUND
=========================================================*/

--hero-gradient-speed:18s;

--hero-gradient-angle:135deg;

--hero-overlay:.25;

/*=========================================================
=            FLOAT MENU
=========================================================*/

--menu-radius:22px;

--menu-shadow:
0 20px 50px rgba(0,0,0,.10);

--menu-hover:
0 30px 70px rgba(95,141,122,.18);

}

/* Font yang dipakai konsisten untuk seluruh frontend */
body{
font-family:'Montserrat','Segoe UI',sans-serif;
}