/* Custom styles moved from inline attributes */

/* For the empty div used as a gap */
.zero-height {
    height: 0;
}

/* Custom styles moved from inline attributes */

/* Reusable gap classes for the footer */
.gap-10 {
    height: 10px;
}

.gap-12 {
    height: 12px;
}

.gap-35 {
    height: 35px;
}

/* Gap heights */
.gap-h0 { height: 0; }

.gap-h15 { height: 15px; }
.gap-h17 { height: 17px; }
.gap-h20 { height: 20px; }

/* Submenu block styles */
.submenu-style-1 { min-width: 300%; margin-top: 8px; }
.submenu-style-2 { min-width: 200%; margin-top: 8px; }
.submenu-style-3 { min-width: 390%; margin-top: 8px; }
.submenu-style-4 { min-width: 350%; margin-top: 8px; }
.submenu-style-5 { min-width: 150%; margin-top: 8px; }
.submenu-style-6 { min-width: 100%; }

/* Add cursor pointer to clickable elements */
[data-link], #mobile-btn, .top_menu_link, .top_menu_linkM, .main_logo, .submenu {
    cursor: pointer;
}



/* Gap heights */
.gap-h0 { height: 0; }
.gap-h180 { height: 180px; }

/* Add cursor pointer to clickable elements */
[data-link], [data-toggle] {
    cursor: pointer;
}

/* --- Submenu Toggle Styles --- */

/* Hide submenus by default */
.mobile_menu_level2 {
    display: none;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    max-height: 0;
}

/* Class to show the submenu with a smooth animation */
.mobile_menu_level2.open {
    display: block;
    max-height: 1500px; /* Set a max-height greater than any possible submenu content */
}

/* Optional: Style for the active toggle button */
.mmenu_toggle_ico.active {
    /* Add styles for when the menu is open, e.g., change background or icon */
    background-image: url(../../images/submenu_ico1.png);
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: 380px center;
}

.font-sm {
    font-size: 14px;
}
.text-teal {
    color: #00AB9C;
}
.title-black-bold {
    color: #000;
    font-weight: bold;
}





/* Gap heights */
.gap-h0 { height: 0; }
.gap-h5 { height: 5px; }
.gap-h10 { height: 10px; }
.gap-h15 { height: 15px; }
.gap-h20 { height: 20px; }
.gap-h30 { height: 30px; }
.gap-h40 { height: 40px; }
.gap-h50 { height: 50px; }
.gap-h60 { height: 60px; }

/* Dash height */
.dash-h1 { height: 1px; }
.dash-blue {
    border-bottom: 2px solid #0090B3;
    height: 2px;
}

/* Title styling */
.title-black-bold {
    color: #000;
    font-weight: bold;
}

/* Title color */
.title-color-green {
    color: #007460;
}

/* Add cursor pointer to clickable elements */
.top_navbar_home, #go-top {
    cursor: pointer;
}


/* Content title styles */
.content-title-style {
    color: #007460;
    max-width: 1400px;
}

/* Main content container styles */
.main-content-style {
    max-width: 1420px;
}

/* Utility for centering block elements */
.center-block {
    margin-left: auto;
    margin-right: auto;
}

/* Table image width */
.table-image-width {
    width: 1400px;
}

/* Container and image sizing */
.max-w-820 { max-width: 820px; }
.max-w-822 { max-width: 822px; }
.img-max-w-800 { max-width: 800px; }
.img-max-w-802 { max-width: 802px; }
.img-w-987 { width: 987px; }
.img-max-w-80 { max-width: 80px; }

/* Widths and Max-widths */
.max-w-97 { max-width: 97px; }
.max-w-325 { max-width: 325px; }
.max-w-345 { max-width: 345px; }
.max-w-800 { max-width: 800px; }
.max-w-802 { max-width: 802px; }
.max-w-820 { max-width: 820px; }
.max-w-1220 { max-width: 1220px; }
.img-w-802 { width: 802px; }
.img-w-984 { width: 984px; }
.img-w-1200 { width: 1200px; }
.max-w-77 { max-width: 77px; }

/* Width Constraints */
.max-w-617 { max-width: 617px; }
.max-w-632 { max-width: 632px; }
.max-w-690 { max-width: 690px; }
.max-w-697 { max-width: 697px; }
.max-w-710 { max-width: 710px; }
.max-w-712 { max-width: 712px; }
.max-w-715 { max-width: 715px; }
.max-w-717 { max-width: 717px; }
.max-w-732 { max-width: 732px; }
.max-w-735 { max-width: 735px; }
.max-w-749 { max-width: 749px; }
.max-w-750 { max-width: 750px; }
.max-w-760 { max-width: 760px; }
.max-w-764 { max-width: 764px; }
.max-w-769 { max-width: 769px; }
.max-w-770 { max-width: 770px; }
.max-w-772 { max-width: 772px; }
.max-w-780 { max-width: 780px; }
.max-w-782 { max-width: 782px; }


.max-w-918 { max-width: 918px; }

/* Image Width Constraints */
.img-max-w-240 { max-width: 240px; }
.img-max-w-362 { max-width: 362px; }
.img-max-w-612 { max-width: 612px; }
.img-max-w-690 { max-width: 690px; }
.img-max-w-697 { max-width: 697px; }
.img-max-w-712 { max-width: 712px; }
.img-max-w-715 { max-width: 715px; }
.img-max-w-750 { max-width: 750px; }
.img-max-w-752 { max-width: 752px; }
.img-max-w-782 { max-width: 782px; }
.img-max-w-898 { max-width: 898px; }
.max-w-772 { max-width: 772px; }
.max-w-770 { max-width: 770px; }
.img-max-w-80 { max-width: 80px; }
.img-max-w-752 { max-width: 752px; }
.img-max-w-750 { max-width: 750px; }

/* Background colors */
.bg-white { background-color: #fff; }

/* Font styles */
.font-size-14 { font-size: 14px; }
.color-black { color: #000; }
.color-grey { color: #9E9E9F; }
.color-green { color: #108F78; }
.font-weight-bold { font-weight: bold; }

/* Layout */
.float-left { float: left; }
.float-right { float: right; }

/* Background colors */
.bg-color-green {
    background-color: #50A035;
}

/* Text colors and font weights */
.text-color-main {
    color: #007460;
}

.text-color-green {
    color: #50A035;
}

.font-weight-500 {
    font-weight: 500;
}

/* Note Text Styling */
.note-text-749 {
    font-size: 14px;
    max-width: 749px;
    margin-left: auto;
    margin-right: auto;
}
.note-text-780 {
    font-size: 14px;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}
.note-text-782 {
    font-size: 14px;
    max-width: 782px;
    margin-left: auto;
    margin-right: auto;
}
.note-text-centered {
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
}

/* Unit Display Spans */
.unit-display {
    float: right;
    font-size: 14px;
    color: #000;
    font-weight: normal;
}
.unit-display-black {
    float: right;
    font-size: 14px;
    color: #000;
}

/* Layout Containers */
.chart-container-left {
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
    float: left;
    margin-bottom: 10px;
}
.image-box-left {
    max-width: 382px;
    margin-left: auto;
    margin-right: auto;
    float: left;
}
.image-box-right {
    max-width: 382px;
    margin-left: auto;
    margin-right: auto;
    float: right;
}

/* Box and Card Styles */
.case-study-box {
    margin-left: 20px;
    margin-right: 20px;
    border-style: dashed;
    border-width: 2px;
    border-color: #00AB9C;
    border-radius: 15px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.case-study-title {
    color: #00AB9C;
    font-size: 20px;
}
.case-study-subtitle {
    color: #00AB9C;
    font-size: 18px;
}
.info-box-gray {
    background-color: #F2F2F2;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
}
.bordered-box-dotted {
    border-style: dotted;
    border-width: 2px;
    border-color: #231815;
    border-radius: 15px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}
.box-text-content {
    margin-left: auto;
    margin-right: auto;
    font-size: 15px;
}
.box-title {
    color: #000;
    font-size: 16px;
    font-weight: bold;
}

/* Title styling */
.title-black-bold {
    color: #000;
    font-weight: bold;
}

/* Font sizing */
.font-size-14 { font-size: 14px; }
.font-size-18 { font-size: 18px; }
.font-size-20 { font-size: 20px; }

/* Font and text styles */
.font-size-14 { font-size: 14px; }
.text-teal { color: #00AB9C; }
.title-black-bold {
    color: #000;
    font-weight: bold;
}
.subtitle-teal {
    color: #00AB9C;
    font-size: 17px;
}

.info-box {
    background-color: #F2F2F2;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
}
.content-box-gray {
    background-color: #F2F2F2;
    border-top: solid 1px #221613;
}
.risk-title-box {
    background-color: #E6F3F2;
    color: #00AB9C;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: solid 3px #00AB9C;
}
.border-bottom-teal {
    border-bottom: solid 3px #00AB9C;
}
.measure-badge {
    display: table;
    padding: 2px 15px;
    border-radius: 30px;
    color: #00AB9C;
    font-size: 17px;
    background-color: #E6F3F2;
}

.unit-display {
    float: right;
    font-size: 14px;
    color: #000;
    font-weight: normal;
}