/* Sticky social media menu */ .social { position: fixed; z-index: 20; height: 100vh; display: flex; flex-direction: column; justify-content: center; transform: translate(-395px, 0); } .social a:nth-child(1) { color: #fff; background: rgba(177, 0, 1, 0.9); font-size: 22px; font-weight: 600; text-decoration: none; display: block; margin: 5px; padding: 20px; width: 450px; text-align: right; border-radius: 50px; transition: 1s; transition-property: transform; } .social a:nth-child(2) { color: rgba(177, 0, 1, 0.9); background: rgba(255, 255, 255, 0.9); border: 4px solid rgb(177, 0, 1); font-size: 22px; font-weight: 600; text-decoration: none; display: block; margin: 5px; padding: 20px; width: 450px; text-align: right; border-radius: 50px; transition: 1s; transition-property: transform; } .social a:nth-child(3) { color: #fff; background: rgba(0, 128, 105, 0.9); font-size: 22px; font-weight: 600; text-decoration: none; display: block; margin: 5px; padding: 20px; width: 450px; text-align: right; border-radius: 50px; transition: 1s; transition-property: transform; } .social a:hover:nth-child(1) { transform: translate(250px, 0); } .social a:hover:nth-child(2) { transform: translate(310px, 0); } .social a:hover:nth-child(3) { transform: translate(260px, 0); } .social i { margin-left: 10px; width: 30px; height: 30px; } .social a:nth-child(1) i { color: #1da0f0; } .social a:nth-child(2) i { color: #f80000; } .social a:nth-child(3) i { color: transparent; background-image: linear-gradient(45deg, #ffdf9e, #e56969, #8a49a1); -webkit-background-clip: text; background-clip: text; font-weight: 600; } /* Image modal popup */ /* Style the Image Used to Trigger the Modal */ #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover { opacity: 0.7; } /* The Modal (background) */ .modal-img { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 9999; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */ } /* Modal Content (Image) */ .modal-content-img { margin: auto; display: block; width: 80%; max-width: 900px; } /* Caption of Modal Image (Image Text) - Same Width as the Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation - Zoom in the Modal */ .modal-content-img, #caption { animation-name: zoom; animation-duration: 0.5s; } @keyframes zoom { from { transform: scale(0); } to { transform: scale(1); } } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px) { .modal-content-img { width: 100%; } } /* Card banner for ambulance and IGD */ .counter-box { display: block; background: #f6f6f6; padding: 20px 20px 15px 10px; text-align: center; transition: box-shadow 0.3s; } .counter-box:hover { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; opacity: 90%; } .counter-box p { margin: 5px 0 0; padding: 0; color: #909090; font-size: 18px; font-weight: 500; } .icon { font-size: 50px; color: #fff; vertical-align: middle; } .counter { display: block; font-size: 32px; font-weight: 700; color: #666; line-height: 28px; } .counter-box-red { background: #dc3545; /* background: #b81919; */ } .counter-box-pink { background: #9e3366; /* background: #cf3a82; */ } .counter-box-green { background: #198c77; } .counter-box .counter { color: #fff; } .counter-box p { color: #fff; } .card-icon { height: 80px; width: 80px; margin-left: 15px; } .link-hover { text-decoration: none; color: #015fc9; } .link-hover:hover { text-decoration: underline; color: #0dd3f1; } .navbar-icon { height: 45px; width: 45px; } .fs-7 { font-size: 0.9rem; } .nav-pills-custom .nav-link { color: #aaa; background: #fff; position: relative; } .nav-pills-custom .nav-link.active { color: #fff; background: #005cc4; border: 1px solid #005cc4; } /* Add indicator arrow for the active tab */ @media (min-width: 992px) { .nav-pills-custom .nav-link::before { content: ""; display: block; border-top: 8px solid transparent; border-left: 10px solid #005cc4; border-bottom: 8px solid transparent; position: absolute; top: 50%; right: -10px; transform: translateY(-50%); opacity: 0; } } .nav-pills-custom .nav-link.active::before { opacity: 1; } .icon-tab { width: 6.5rem; } .icon-background { background-color: #005cc4; border-radius: 50% !important; overflow: hidden; width: 150px; height: 150px; /* box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; */ } /* .icon-background img { width: 80%; height: auto; display: block; } */ .icon-img { width: 70%; height: 70%; object-position: top left; /* object-fit: none; */ /* display: inline; */ /* margin-top: 20px; */ } /*--------------------------------------- FEATURE BLOCK -----------------------------------------*/ .featured-block { text-align: center; transition: all 0.5s ease; /* min-height: 128px; */ min-height: 256px; padding: 15px; } .featured-block:hover { background: var(--white-color); border-radius: 8% !important; /* border: 4px solid #005cc4; */ box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); } .featured-block .featured-block-image { width: 140px; height: auto; } .featured-block:hover .featured-block-image { transform: scale(0.85); } .featured-block-image { display: block; margin: auto; transition: all 0.5s; } .featured-block:hover .featured-block-text { margin-top: 0; } .featured-block-text { color: var(--primary-color); font-size: 1.25rem; margin-top: 20px; transition: all 0.5s; } /* Floating Social Media Bar Style Starts Here */ .fl-fl { background: #dc3545; /* background: #0d6efd; */ /* text-transform: uppercase; */ letter-spacing: 3px; padding: 6px; width: 235px; position: fixed; right: -175px; z-index: 1000; font-size: 10px; border-radius: 0.6rem; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .fl-fl:hover { right: -5px; } .fl-fl a { color: #fff !important; text-decoration: none; font-size: 16px; line-height: 43px !important; vertical-align: top !important; } .fl-fl img { width: 45px; height: 45px; } .float-fb { top: 12rem; /* top: 160px; */ } .float-tw { top: 16rem; /* top: 225px; */ } .float-wa { top: 20rem; /* top: 225px; */ } /* Floating Social Media Bar Style Ends Here */ .text-responsive { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; max-width: 100%; } .table-container { max-height: 400px; /* Set a maximum height for the container */ overflow-y: auto; /* Enable vertical scroll if content overflows */ /* box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3); */ } /* Apply horizontal scrolling and prevent text wrapping on smaller screens */ @media (max-width: 768px) { #jadwal { overflow-x: auto; } #jadwal td { white-space: nowrap; } } .page-headers { background: url(/img/banner/page-banner.jpg); } .page-headers .breadcrumb-item, .page-headers .breadcrumb-item a { font-weight: 500; } .page-headers .breadcrumb-item a, .page-headers .breadcrumb-item + .breadcrumb-item::before { color: #696e77; } .page-headers .breadcrumb-item a:hover, .page-headers .breadcrumb-item.active { color: var(--primary); } .parallax { background-image: url("/img/parallax/parallax.jpg"); } .parallax-2 { background-image: url("/img/parallax/parallax-2.jpg"); } .parallax-3 { background-image: url("/img/parallax/parallax-3.jpg"); } .parallax, .parallax-2, .parallax-3, .page-headers { min-height: 50vh; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .hscroll{ overflow-x: auto;; }