/*Inspired from https://codepen.io/chriddyp/pen/bWLwgP.css*/

@font-face {
  font-family: 'Roboto';
  src: url('/assets/Roboto-Bold.ttf') format('truetype');
  font-weight: 700; /* Bold weight */
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('/assets/Roboto-Medium.ttf') format('truetype');
  font-weight: 500; /* Medium weight */
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('/assets/roboto-regular.ttf') format('truetype');
  font-weight: 400; /* Regular weight */
  font-style: normal;
}

/* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
}
.column, .columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}
/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
      width: 85%;
      padding: 0;
 }
}
/* For devices larger than 550px */
@media (min-width: 550px) {
    .container {
        width: 80%;
    }

    .column:first-child, .columns:first-child {
        margin-left: 0;
    }

    .three.columns {
      width: 25%;
    }

    .four.columns {
        width: 33.3333333334%;
    }

    .eight.columns {
        width: 66.6666666666%;
    }

    .nine.columns {
      width: 75%;
    }
}
/* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE html is set to 62.5% so that all the REM measurements throughout Skeleton are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%;
}
body {
  font-size: 14px;
 /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  color: #003781;
    font-family: Roboto, sans-serif;
}

/* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300;
}
h1 {
  font-size: 4.5rem;
  line-height: 1.2;
  letter-spacing: -.1rem;
  margin-bottom: 2rem;
}
h2 {
  font-size: 3.6rem;
  line-height: 1.25;
  letter-spacing: -.1rem;
  margin-bottom: 1.8rem;
  margin-top: 1.8rem;
}
h3 {
  font-size: 3.0rem;
  line-height: 1.3;
  letter-spacing: -.1rem;
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
}
h4 {
  font-size: 2.6rem;
  line-height: 1.35;
  letter-spacing: -.08rem;
  margin-bottom: 1.2rem;
  margin-top: 1.2rem;
}
h5 {
  font-size: 2.2rem;
  line-height: 1.5;
  letter-spacing: -.05rem;
  margin-bottom: 0.6rem;
  margin-top: 0.6rem;
}
h6 {
  font-size: 2.0rem;
  line-height: 1.6;
  letter-spacing: 0;
  margin-bottom: 0.75rem;
  margin-top: 0.75rem;
}
p {
  margin-top: 0;
}
/* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside;
}
ol {
  list-style: decimal inside;
}
ol, ul {
  padding-left: 0;
  margin-top: 0;
}
ul ul, ul ol, ol ol, ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%;
  margin-top: 0px;
}
ul > li > ul > li {
  margin-bottom: 0;
}
li {
  margin-bottom: 1rem;
    font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 14px;
  padding-left: 12px;
    color: #49454F;
}
ul {
  list-style-type: "• ";
}
.markdown ul {
  margin-top: 0;
  /*margin-bottom: 0;*/
  padding-left: 14px; /* Adjust indentation if needed */
}
.markdown ul li {
  margin-bottom: 4px; /* Reduce space between list items */
  line-height: 1.2; /* Adjust line height for tighter spacing */
}

/* Financial content styling improvements */
.markdown {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

.markdown p {
  margin-bottom: 1em;
  line-height: 1.5;
}

.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: 600;
}

.markdown hr {
  border: none;
  border-top: 2px solid #e0e0e0;
  margin: 1.5em 0;
}

/* Prevent horizontal scrolling in markdown content */
.markdown * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Improve text readability in financial sections */
#rp-content .markdown,
#ll-content .markdown,
#cc-content .markdown {
  line-height: 1.6;
  text-align: justify;
  padding: 12px 0;
}
/* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Self Clearing Goodness */
.container:after, .row:after, .u-cf {
  content: "";
  display: table;
  clear: both;
}
/* Media Queries –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Note: The best way to structure the use of media queries is to create the queries near the relevant code. For example, if you wanted to change the styles for buttons on small devices, paste the mobile query code up in the buttons section and style it there. */
/* Larger than mobile */
@media (min-width: 400px) {
}
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
}
/* Larger than tablet */
@media (min-width: 750px) {
}
/* Larger than desktop */
@media (min-width: 1000px) {
}
/* Larger than Desktop HD */
@media (min-width: 1200px) {
}
/* Custom App General CSS Below --------------------------------- */
/* Main Layout ––––––––––––––––––––––––––––––––––––––––––––––––––*/
html, body{
  height: 100%;
}

body {
  background-color: #F3F8FB;
  color: #d8d8d8;
  height: 100%;
  margin: 0;
  padding: 0;
}

.row {
  margin-left: 0;
  margin-right: 0;
}

h1, h2, h3, h4, h5 {
  font-family: Roboto, sans-serif;
  letter-spacing: 1.1px;
  font-size: 16px;
  padding-left: 12px;
    color:  #003781;
    font-style: normal;
    font-weight: 700;
}

h4 {
  font-family: Roboto, sans-serif;
  letter-spacing: 1.1px;
  font-size: 14px;
  padding-left: 12px;
    color:  #003781;
    font-style: normal;
    font-weight: 700;
}

p {
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 14px;
  padding-left: 12px;
    color: #49454F;
}
a {
  text-decoration: none;
}
.bg-grey{
  background-color: #FFF;
}
.text-padding{
  padding: 5px;
}
/* Graph Layout ––––––––––––––––––––––––––––––––––––––––––––––––––*/
.div-for-charts{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

/* Graph Control Objects ––––––––––––––––––––––––––––––––––––––––––––––––––*/
.div-user-controls {
  padding-left: 24px;
  padding-top: 32px;
    padding-right: 24px;
}
.div-for-dropdown {
  padding-top: 12px;
  padding-bottom: 12px;
}
.div-for-slider {
  width: 97%;
  text-align: center;
}

/* Custom App CSS Below --------------------------------- */
/* restyle radio items */
.radio-group .form-check {
  padding-left: 0;
}

.radio-group .btn-group > .form-check:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
    border: 1px solid #007AB3;
    font: 400 14px Roboto, sans-serif;
    padding: 10px 16px;
    color: #49454F;
}

.radio-group .btn-group > .form-check:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
    border: 1px solid #007AB3;
    font: 400 14px Roboto, sans-serif;
    padding: 10px 16px;
    color: #49454F;
}

.radio-group .btn-group > .form-check > .btn.active {
  background-color: #007AB3 !important;
  border-color: #007AB3 !important;
  color: white !important;
}

.custom-tab .nav-link {
    font: 500 14px Roboto, sans-serif;
    color: #646568;  /* Text color */
    padding: 10px;  /* Adjust padding for better spacing */
    border-left: none;  /* No left border */
    border-right: none;  /* No right border */
    border-top: none;  /* No top border */
    border-bottom: none;  /* No top border */
}

/* Style for the active tab (with a different bottom border color) */
.custom-tab .nav-link.active {
    font: 500 14px Roboto, sans-serif;
    color: #003781;  /* Active tab text color */
    border-bottom: 3px solid #003781;  /* Black bottom border for active tab */
}

/* Target disabled tab links */
.custom-tab .nav-link.disabled {
    font-style: italic !important;
    color: #A0AEC0 !important;
}

.all-tabs {
    margin-top: 32px;
}

.custom-title {
    font-family: Roboto, sans-serif;
    font-size: 24px;
    font-weight: 700;
}

.search-button {
    background-color: #003781;
    color: white;
    border: 1px solid #003781;
}

.search-button i {  /* Styles the icon inside the button */
    font-size: 1.2em;
}

.input-group {
    width: 100%;
    margin-right: 24px;
}

.intermediary-title {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #003781;
    padding-left: 16px;
    margin-top: 16px;
}

#error-message {
  color: #FF3B30 !important;
  font-weight: 400;
  font-size: 12px;
}

.general-info-display {
    font-family: Roboto, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #4F5053;
    padding-left: 16px;
    padding-top: 8px;
}

#first-info-title {
  padding-top: 16px;
}

#last-info-display {
    padding-bottom: 16px;
}

#insured-data-div {
    border-right: none;
}

#general-info-and-policy-data {
    width: 100%;
    background-color: white;
    margin-top: 24px;
    border-radius: 8px;
    /*display: none;*/
}

.general-info-output {
    color: #003781;
    font-weight: 700;
    margin-left: 8px;
}

.custom-btn {
    width: 30px;
    height: 30px;
    padding: 5px;
    background-color: #FFFFFF;
    border: 1px solid #FFFFFF;
}

.custom-btn i {  /* Styles the icon inside the button */
    font-size: 1.4em;
    color: #003781;
    -webkit-text-stroke: 0.5px #003781;
}

/* Button hover state */
.custom-btn:hover {
    background-color: #f0f0f0 !important; /* Change background color on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow effect */
}

/* Icon hover state */
.custom-btn:hover i {
    color: #003781; /* Change icon color on hover */
}

/* Button active state */
.custom-btn:active {
    background-color: #cccccc !important;  /* Change background color when clicked */
    box-shadow: none; /* Optional: removes the shadow effect */
}

/* Icon active state */
.custom-btn:active i {
    color: #003781; /* Change icon color when active */
}

/* Button disabled state */
.custom-btn:disabled {
  background-color: #cccccc !important;  /* Change background color when clicked */
  box-shadow: none; /* Optional: removes the shadow effect */
}

/* Icon disabled state */
.custom-btn:disabled i {
  color: #003781; /* Change icon color when active */
}

/* Button focus state */
.custom-btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Example focus shadow */
}

/* Icon focus state */
.custom-btn:focus i {
    color: #003781;  /* Change icon color when focused */
}

.information-btn {
    width: 30px;
    height: 30px;
    background-color: #003781;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Remove default padding */
    border: 0;
  }

.information-btn i {  /* Styles the icon inside the button */
    font-size: 2.4em;
    -webkit-text-stroke: 0.5px #003781;
}

/* dash-ag-grid header background */
.custom-header {
    background-color: #003781 !important;  /* Blue header background */
    color: white !important;  /* White text */
    font-weight: bold;
    text-align: center;
}

mark.highlight-online {
  background-color: transparent;
  font-style: italic;
  color: #F0BA2E;
}

mark.highlight-monitoring {
  background-color: transparent;
  font-style: italic;
  color: #7C14CE;
}

mark {
  background-color: transparent;
  font-style: italic;
  color: #7C14CE;
}

.gradient-text {
  background: linear-gradient(to right, #1E3A8A, #F97316);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

.custom-card {
  border-radius: 8px;
  box-shadow: 0px 2px 8px 0px rgba(160, 174, 192, 0.20);
  margin-top: 20px;
}

.custom-card-body {
  color: #003781;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  padding: 16px;
  display: flex; /* Enable flexbox */
  justify-content: center; /* Vertically center */
  align-items: center; /* Horizontally center */
  height: 100%; /* Take full height of parent CardBody */
}

.custom-card-body-sub {
  color: #003781;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  padding: 12px;
  padding-bottom: 8px;
  display: flex; /* Enable flexbox */
  justify-content: flex-start; 
  align-items: center; /* Horizontally center */
  height: 100%; /* Take full height of parent CardBody */
}

.custom-card-body-sub-content {
  padding-left: 0;
}

.card-body {
  padding-left: 0px;
}

.my-modal-header {
    color: var(--Gray-900, #4F5053);
    font-size: 20px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    text-align: center;
}

#close-info {
    background-color: #003781;
    color: white;
    border: 1px solid #003781;
    font-size: 14px;
}

.hidden-tab .nav-link {
    display: none !important;
}

/* Style each dropdown option */
.Select-option {
    color: #007AB3 !important;          /* Text color */
    font-family: 'Arial', sans-serif !important; /* Font style */
    font-size: 16px !important;         /* Optional */
}

/* Style selected option in list */
.Select-option.is-selected {
    background-color: rgba(255, 102, 0, 0.2) !important;
    color: #007AB3 !important;
}

/* Style hovered option */
.Select-option:hover {
    background-color: rgba(255, 102, 0, 0.1) !important;
}

/* Style the currently selected value (collapsed view) */
.Select-value-label {
    color: #007AB3 !important;
    font-weight: 500
}

/* Change the color of dropdown options */
.Select-option {
    color: #007AB3 !important;   /* Change this to any color or hex code */
    background-color: #007AB3 !important;
}

/* Optional: change the selected option color in the dropdown list */
.Select-option.is-selected {
    color: #007AB3 !important;
}

/* Optional: change color when hovering */
.Select-option:hover {
    color: #007AB3 !important;
}

.Select-control,
.Select-control:hover {
    border: none !important;
    box-shadow: none !important;
    color: #007AB3 !important;
}

/* Remove border from focused state */
.is-focused .Select-control {
    border: none !important;
    box-shadow: none !important;
    color: #007AB3 !important;
}
/* Optional: remove dropdown menu border */
.Select-menu-outer {
    border: none !important;
    box-shadow: none !important;
    color: #007AB3 !important;
}

#version {
  position: fixed;
  bottom: 0;
  width: 100%;
  color: gray;
  font-size: 12px;                            
}