/* *
{
	
	border: red 1px solid;
}
 */
 

.icon-tooltip {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2214px%22 viewBox%3D%220%20-960%20960%20960%22 width%3D%2214px%22 fill%3D%22%23666666%22%3E%3Cpath d%3D%22M440-280h80v-240h-80v240Zm40-320q17%200%2028.5-11.5T520-640q0-17-11.5-28.5T480-680q-17%200-28.5%2011.5T440-640q0%2017%2011.5%2028.5T480-600Zm0%20520q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Zm0-80q134%200%20227-93t93-227q0-134-93-227t-227-93q-134%200-227%2093t-93%20227q0%20134%2093%20227t227%2093Zm0-320Z%22%2F%3E%3C%2Fsvg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
 
}

	
	.toggle-sx{color:#000;}
.card{border:none !important}


.timeline-content p

{
background-color:rgb(255,255,255,0.7) !important;
border-radius:0.25rem;
padding:0.4rem;
}	

.ellipsis-button {
    
    white-space: nowrap; /* Prevents the text from wrapping */
    overflow: hidden; /* Ensures the text doesn't spill out of the button */
    text-overflow: ellipsis; /* Replaces overflowing text with "..." */
    display: inline-block;
    text-align: center; /* Optional: Centers the text */
 
}	
 
.link-style{
text-decoration:none;
color:inherit;
padding:0 !important;
border:none;
}

	
	:root {  --ind: #0571b0; 
  --myn: #ca0020;
}

/* Universal rule */
*:focus {
    outline: none !important;
    box-shadow: none !important;
	border-color:var(--bs-border-color) !important;
 
}
 *:active {
    outline: none !important;
    box-shadow: none !important;
border-color:var(--bs-border-color) !important;
}

 *:checked {
    outline: none !important;
    box-shadow: none !important;
	border-color:var(--bs-border-color) !important;
}
  *:target {
    outline: none !important;
    box-shadow: none !important;
	border-color:var(--bs-border-color) !important;
}
 
 


        body {
            background-color: #fff;
			font-family: Georgia, Helvetica, "Times New Roman", Times, serif;
            
            
		  font-size: 1.4rem;
		  line-height: 1;
		  color: #222222;
		  overflow: visible; /* Ensure overflow is not clipping the content */
		  }

.footnote_tooltip {text-decoration:none; color:grey}

		p{margin-bottom: 0px;
  margin-top: 5px;
  line-height: 20px;
  font-size: 14px;
  color: #333333;}

 
 .bg-transparent.card{border:0.005rem solid grey}
h1, h2, h3, h4, h5{font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif}
h1 {
  color: #000000;
  font-family: georgia;
  font-size: 32px;
  line-height: 35px;
}


.form-control,input,.btn{font-size: 14px;}

		.IND_border
		{
			border-right:1.5px solid #838383;
 		}
		.MYA_border
		{
			border-left:1.5px solid #838383;
		}
		
        .timeline {
            position: relative;
            padding: 20px 0;
            max-width: 100%;
        }
        .timeline::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 4px;
            <!-- background: #6c757d; -->
            margin-left: -2px;
        }
        .timeline .timeline-item {
            padding: 10px 0;
            position: relative;width: 50%;
        }
		 
		
        .timeline .timeline-item.left {
            float:left;
            padding-right: 5px;
			justify-self: flex-start; 
			 
			
        }
        .timeline .timeline-item.right {
           float:right;
            padding-left: 5px;
			margin-left:auto;
			justify-content: flex-end;; 
			
        }
        .timeline .timeline-item .timeline-content {
            padding: 5px;
            background-color: #495057;
            position: relative;
            border-radius: 5px;
        }
        .timeline .timeline-item .timeline-date {
            position: absolute;
            top: 10px;
            width: 50px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: #007bff;
        }
        .timeline .timeline-item.left .timeline-date {
            right: 100%;
            margin-right: 10px;
        }
        .timeline .timeline-item.right .timeline-date {
            left: 100%;
            margin-left: 10px;
        }
        .timeline .timeline-item .circle {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 10px;
            height: 10px;
            background: #007bff;
            border-radius: 50%;
            z-index: 1;
        }
     
        
        .sticky-bg {
            position: fixed;
			
        
        
			
            z-index: -1;
        

 
 
        }   
	 

        .timeline-content {
            height: 100%;
        }


.header {
            background-color: #4CAF50;
            color: white;
            text-align: center;
            padding: 1rem;
        }
        .main-title {
            text-align: center;
            padding: 1rem;
        }
        .byline {
            text-align: center;
            font-style: italic;
            padding-bottom: 1rem;
        }
        .controls-container {
            background-color: #FFF;
            padding: 10px 20px;
            <!-- display: flex; -->
            <!-- align-items: center; -->
            <!-- justify-content: center; -->
            margin-bottom: 1rem;
			position:sticky;
			position: -webkit-sticky; /* Safari */
            position: sticky;
			top: 0;
			z-index: 1000;
			border: 1px solid #3b6b9c; /* Border color */
			border-radius: 8px; /* Rounded edges */
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow */
			color: #ffffff; /* Default text color */
        }
		
		
		.controls-container.sticky {
    width: 100%; /* Take full width on mobile */
    left: 0; /* Align to the left */
    right: 0; /* Align to the right */
    z-index: 1000; /* Ensure it stays on top of other content */
	border: none;
 border-radius:0;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow */
}

        .controls-container .separator {
            width: 1px;
            height: 20px;
            background-color: #ccc;
            margin: 0 0.5rem;
        }
        .controls-container button,
        .controls-container input[type="date"],
        .controls-container input[type="text"] {
            margin: 0 0.5rem;
        }
        .controls-container label {
            margin: 0 0.5rem;
            font-weight: bold;
        }
        .how-to-read-button {
            margin-bottom: 1rem;
            padding: 0.5rem 1rem;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .controls {
            background-color: white;
            display: flex;
            align-items: center;
            border-radius: 50px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 0.5rem 1rem;
            width: 80%;
            justify-content: space-between;
        }
        .controls > div {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .controls .toggle-switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
        .controls .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .controls .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: 0.4s;
            border-radius: 34px;
        }
        .controls .toggle-slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: 0.4s;
            border-radius: 50%;
        }
        .controls input:checked + .toggle-slider {
            background-color: #4CAF50;
        }
        .controls input:checked + .toggle-slider:before {
            transform: translateX(26px);
        }
        .controls .separator {
            width: 1px;
            height: 40px;
            background-color: #ccc;
            margin: 0 1rem;
        }
        .controls button {
            background-color: #FF385C;
            color: white;
            border: none;
            border-radius: 50%;
            padding: 0.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .separator {
            width: 100%;
            height: 2px;
            background-color: #e0e0e0;
            margin: 1rem 0;
        }
	        .controls-container-mobile {
            background-color: white;
            padding: 0.5rem;
            <!-- display: flex; -->
            <!-- align-items: center; -->
            <!-- justify-content: center; -->
            margin-bottom: 1rem;
			position:sticky;
			position: -webkit-sticky; /* Safari */
            position: sticky;
			top: 0;
			z-index: 1000;
			    background-color: #FFF;
    padding: 10px 20px;
    margin-bottom: 1rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    border: 1px solid #3b6b9c; /* Border color */
    border-radius: 8px; /* Rounded edges */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow */
    color: #ffffff; /* Default text color */
        }
		
		.controls-container-mobile.sticky {
    width: 100%; /* Take full width on mobile */
    left: 0; /* Align to the left */
    right: 0; /* Align to the right */
    z-index: 1000; /* Ensure it stays on top of other content */
	border: none;
	border-radius: 0; /* Remove rounded corners */
    padding-left: 0; /* Remove left padding */
    padding-right: 0; /* Remove right padding */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow */
}


@media (max-width: 770px) {
.container {width:100%}
    .controls-container {
       display:none
        
    }
	    .controls-container .col,
    .controls-container .btn-group,
    .controls-container .input-group {
        flex: 1 1 100%; /* Make each control take full width */
        margin-bottom: 0.5rem; /* Add some margin between controls */
    }
	
    .collapsible-toggle {
        display: none; /* Display the toggle button on mobile */
    }
	
	.controls-container-mobile
	{display:flex}
.input-group-sm .form-control,.btn{font-size: 10px;}	


        .sticky-bg {
                  
			   
            background-size: 200%;
 
        }
}

@media (min-width: 601px) {
    .collapsible-toggle {
        display: none; /* Hide the toggle button on larger screens */
    }
	.controls-container-mobile
	{display:none}
	.controls-container{display:block}

}


.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1001;
    justify-content: center;
    align-items: center;
}

.overlay .controls-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    padding: 1rem;
    border-radius: 10px;
    width: 90%;
    max-width: 400px;
}


 .custom-icon {
    background-color: white; /* Set the background to white */
    color: black; /* Set the icon color to black */
    border: 2px solid black; /* Add a black outline */
    border-radius: 50%; /* Make the icon's background circular */
    padding: 10px; /* Adjust the padding to make the icon fit within the circle */
    font-size: 16px; /* Adjust the font size as needed */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; /* Adjust the width and height to your needs */
    height: 30px;
    line-height: 0; /* Ensures icon is vertically centered */
}

.overlay .controls-container button,
.overlay .controls-container input[type="date"],
.overlay .controls-container input[type="text"] {
    margin: 0.5rem 0;
    width: 100%; /* Ensure full width on mobile */
}

.overlay .controls-container .separator {
    width: 100%;
    height: 1px;
    background-color: #ccc;
    margin: 0.5rem 0;
}

.timeline .left h4,.timeline .left h6{color:#0571b0}
.country .ind{color:#0571b0}

.timeline .right h4,.timeline .right h6{color:#ca0020}
.country .myn{color:#ca0020}


.modal-dialog-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Full screen height */
  }

  .modal-content {
    margin: auto;
    width: 80%; /* Adjust the width as needed */
    max-width: 500px; /* Max width for the modal */
  }

  .modal .btn-close {
    font-size: 0.7rem; /* Smaller size for the close button */
    width: 1.5rem;
    height: 1.5rem;
  }