/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.4.1750237267
Updated: 2025-06-18 17:01:07
*/

body{
	font-family: "Roboto";
	font-weight: 300;
	line-height: 1.3;
}

a{
	color: #333333;
}

.hcp-sticky-header {
	box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
	transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hcp-sticky-header.has-shadow {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; /* Premium soft drop shadow */
}


div[data-elementor-type="wp-page"],
div[data-elementor-type="single-post"],
footer[data-elementor-type="footer"]{
	margin-left: 30px !important;
	margin-right: 30px !important;
	max-width: calc(100% - 60px) !important;
	width: auto !important;
	box-sizing: border-box !important;
}

@media (max-width: 767px) {
	div[data-elementor-type="wp-page"],
	div[data-elementor-type="single-post"],
	footer[data-elementor-type="footer"]{
		margin-left: 15px !important;
		margin-right: 15px !important;
		max-width: calc(100% - 30px) !important;
	}
}


.home-gateway {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1;
}


.home-gateway::before {
    content: "" !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 0.5s ease-in-out !important;
	z-index: -1 !important; 
}

.home-gateway:hover::before {
    transform: scale(1.03) !important;
}
.home-gateway-hcp::before {
	background-image: linear-gradient(#00000000, #00000010), url('https://stg-monoferhcpportal-staging.kinsta.cloud/wp-content/uploads/2025/11/Monofer_Administration_10-683x1024.jpg') !important;
}
.home-gateway-pr::before {
	background-image: linear-gradient(#00000099, #00000099), url('https://stg-monoferhcpportal-staging.kinsta.cloud/wp-content/uploads/2025/11/img-8.jpg'); !important;
}


.one-subtitle span {
    animation: oneFadeIn 0.8s ease-out forwards;
	opacity: 0; 
	transform: translateY(40px);
	display:inline-block;
}


@keyframes oneFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
	}
    to {
        opacity: 1;
		transform: translateY(0px);
    }
}

ul.wp-block-list{
	margin-block-end: 20px !important;
}

ul.wp-block-list li{
    margin-block-end: 10px !important;
}

.wp-block-button__link, .hcp-t-a-card-btn, #calc_btn, #clear_btn{
    background: linear-gradient(to right, #ee7d00 0%, #ee7d00 33.33%, #ee7d00 33.33%, #83c3e3 66.66%, #83c3e3 66.66%, #83c3e3 100%) !important;
    background-size: 300% 100% !important;
    background-position: right bottom !important;
    transition: background-position 0.3s ease-out !important;
	color: var(--white);
	font-weight: 500;
}

.wp-block-button__link:hover, .hcp-t-a-card-btn:hover, #calc_btn:hover, #clear_btn:hover{
    background-position: left bottom !important;
	color: var(--white);
}

.wp-block-heading{
	font-size:18px;
}

.wp-block-buttons{
	margin-block-end: 0.9em;
}


input[type="number"].dose_calc_input{
	font-size: 50px;
	letter-spacing: 5px;
}

.dose_calc_input{
	text-align:center;
	background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.dose_calc_input[readonly]{
	cursor: default;
	font-size: 22px;
}

.dose_calc_input::-webkit-outer-spin-button,
.dose_calc_input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* Base styling for both tabs */
.tab-hb {
  background: linear-gradient(to bottom, #e6e6e6, #f2f2f2);

}

.tab-weight {
  background: linear-gradient(to bottom, #83c3e3, #cee7f4);

}

/* Table styling */
table {
  grid-column: 1 / 6; /* Spans across all 5 columns under the tabs */
  border-collapse: collapse;
  width: 100%;
  background: #f7f9fa;
  border: 2px solid #d1dbe0;
  border-radius: 12px;
  overflow: hidden; /* Keeps borders rounded */
}

th, td {
  padding: 15px;
  text-align: center;
  border: 1px solid #d1dbe0;
}

/* Header styling to match the columns color theme */
th {
  background-color: #f0f4f7;
  color: #555;
}

/* Highlight columns 3, 4, 5 with a slight blue tint like the image */
td:nth-child(n+3), th:nth-child(n+3) {
  background-color: #edf5fc;
}

/* User profile icon */
/* =========================================================================
   HCP User Dropdown
   ========================================================================= */

.hcp-dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle;
		margin-left: 10px;
}


.hcp-dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    color: #333333;
    transition: all .2s ease;
}

.hcp-dropdown-toggle:hover,
.hcp-dropdown:hover .hcp-dropdown-toggle {
    background-color: #83C3E3 !important;
    color: #ffffff !important;
}

.user-icon-svg svg {
    width: 20px;
    height: 20px;
    margin-right: 6px;
}
.arrow-icon-svg svg {
    width: 12px;
    height: 12px;
    opacity: 0.7;
}

.hcp-dropdown:hover .hcp-dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0);
}

.hcp-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 220px;
    background-color: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;

    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px); 
    transition: all 0.2s ease;
}

.hcp-dropdown-links {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.dropdown-welcome-msg {
    padding: 10px 20px 6px;
    font-weight: 600;
    color: #555;
    font-size: 14px;
}

.dropdown-divider {
    height: 1px;
    background-color: #e9e9e9;
    margin: 6px 0 8px;
}

.dropdown-link-item {
    display: block;
    padding: 10px 20px;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 14px;
    transition: background-color 0.1s ease;
}

.dropdown-link-item:hover {
    background-color: #f5f5f5;
    color: #004a99 !important; 
}

.logout-item {
    color: #d9534f !important; /* 紅色 */
}
.logout-item:hover {
    background-color: #fff1f0;
}

@media screen and (max-width: 768px) {

    .hcp-dropdown-toggle {
        padding: 6px 10px !important; 
    }

    .user-icon-svg svg {
        width: 16px !important;
        height: 16px !important;
        margin-right: 4px !important;
    }

    .arrow-icon-svg svg {
        width: 10px !important;
        height: 10px !important;
    }


    .hcp-dropdown-menu {
        width: 180px !important; 
        right: 0 !important;     
        top: 105% !important;    
    }

    .dropdown-welcome-msg {
        padding: 8px 14px 4px !important;
        font-size: 13px !important;
    }

    .dropdown-link-item {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
}