.content {
	margin: auto;
	max-width: 100%;
  }
table {
	margin-left: 0px;
}

img {
	margin-left: 0px;
}

th {
	text-align:left;
}

body { 
	width: 100%;
}

.program {
	border-collapse: collapse;
}

.program tr {
	border: 1px solid black;
}

.program td {
	border: 1px solid black;
	width: 100px;
}

.w4 {
	width: 200px;
	font-weight: bold;
	border: 0px;
}

.w3 {
	width: 2150px;
}

.w1 {
	width: 50px;
}

.w1, .w2, .w3, .w4 {
	text-align: center;
}
/* Header */
/* Style for the main conference title */
.cscwd-title {
	font-family: Arial, Helvetica, sans-serif; /* Matching the serif font style */
	font-size: 39px; /* Approximating the font size for the main title */
	font-weight: bold; /* The text appears bold */
	text-align: center; /* Center-aligning the text */
	color: #002D5E; /* Matching the blue color in the text */
	margin-top: 20px; /* Adding some spacing at the top */
  }
  
  /* Style for the conference date and location */
  .cscwd-date {
	font-family: Arial, Helvetica, sans-serif; /* Matching the serif font style */
	font-size: 30px; /* Slightly smaller font size for details */
	font-weight: bold; /* The text appears bold */
	text-align: center; /* Center-aligning the text */
	color: #002D5E; /* Using the same blue color */
	margin-bottom: 20px; /* Adding some spacing at the bottom */
    padding-top: 20px;
  }

  
  .cscwd-header {
	width: 100%; /* Images fill the table cells */
	height: auto; /* Maintain the aspect ratio of images */
	display: block; /* Removes any small spaces below images */
  }
  .cscwd-header table.header-logo{
	width:1128px;
  }

  .photo-table {
	width: 100%; /* Full width table */
	padding: 0 0 0 0;
	border-collapse: collapse; /* Remove space between cells */
	height: auto;
	text-align: center; /* Center-aligns content in table cells */
  }
  
  .photo-table td {
	/*width: 25%;  Each image takes up an equal portion of the table row */
	padding: 0; /* No padding inside table cells */
  }
 
  .photo-table img {
	width: 100%; /* Images fill the table cells */
	height: auto; /* Maintain the aspect ratio of images */
	display: block; /* Removes any small spaces below images */
  }
  .photo-table img.logo-ieee{
	width:130px;
  }
  .photo-table img.logo-cscwd{
	width:130px;
  }
  .photo-table td.logo{
	width: 150px;
  }

  /* Container */
  .menu {
	background-color: #99CCDD; /* Light cyan background color for the menu container */
	padding: 10px; /* Adds padding inside the menu container */
	border-radius: 10px; /* Rounds the corners of the menu container */
	width: 200px; /* Sets a fixed width for the menu */
	
}
  
  .menu ul {
	list-style-type: none; /* Removes the default bullet points from the list */
	padding: 0; /* Removes default padding from the list */
	margin: 0; /* Removes default margin from the list */
  }
  
  .menu li {
	margin-bottom: 0px; /* Adds space between each menu item */
  }
  
  .menu a {
	text-decoration: none; /* Removes the default underline from links */
	color: #0070C0; /* Sets a blue color for the links */
	font-weight: bold; /* Makes the link text bold */
	display: block; /* Makes the links block-level elements to fill the width */
	padding: 8px; /* Adds padding around the link text */
	border-radius: 5px; /* Rounds the corners of the links */
	transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
  }
  
  .menu a:hover, a.selected {
	background-color: #002D5E; /* Blue background color on hover */
	color: #ffffff; /* White text color on hover */
  }

  .info-container {
	background-color: #99CCFF; /* Light cyan background */
	padding: 10px; /* Adds padding inside the container */
	border-radius: 10px; /* Rounds the corners of the container */
	width: 255px; /* Sets a fixed width for the container */
	font-family: Arial, sans-serif; /* Sets a clean, modern font */
	color: #333; /* Sets a dark grey color for the text */
	line-height: 1.2; /* Improves readability with line spacing */
	margin:0px;
  }
  
  .info-container h2 {
	font-size: 16px; /* Sets the font size for section headings */
	color: #0070C0; /* Blue color for headings */
	margin-bottom: 10px; /* Adds space below headings */
	border-bottom: 1px solid #0070C0; /* Adds a bottom border to headings */
	padding-bottom: 5px; /* Adds padding to bottom of headings */
  }
  
  .info-container h3 {
	font-size: 14px; /* Sets a slightly smaller font size for subheadings */
	color: #0056b3; /* Darker blue for subheadings */
	margin-top: 10px; /* Adds space above subheadings */
	margin-bottom: 5px; /* Adds space below subheadings */
  }
  
  .info-container p {
	font-size: 13px; /* Sets the font size for paragraphs */
	margin: 0 0 10px 0; /* Adds margin below each paragraph */
  }
  
  .info-container p br {
	line-height: 2.0; /* Adds more space between lines when using <br> */
  }

  .container {
	width: 100%; /* Full width for smaller screens */
	max-width: 1158px; /* Maximum width for larger screens */
	margin: 0 auto; /* Center the container horizontally */
	padding: 0 15px; /* Add horizontal padding for spacing */
	box-sizing: border-box; /* Include padding and border in the element's total width and height */
  }
  .container table.main-table{
	max-width: 1158px;
  }

  /* Container for the content */
.content-container {
	min-height: 1670px;
  background-color: #f5f7fa; /* Light grey background for better contrast */
  padding: 20px; /* Adds padding around the container */
  border-radius: 10px; /* Rounds the corners of the container */
  font-family: 'Arial', sans-serif; /* Sets a modern, readable font */
  color: #333; /* Dark grey color for the main text */
  line-height: 1.6; /* Increases line height for better readability */
  max-width: 800px; /* Limits the width of the container */
  margin: auto; /* Centers the container on the page */
}

/* Highlighted text such as deadlines */
.highlight {
  /* font-size: 18px; Slightly larger font size for important announcements */
  font-weight: bold; /* Makes the text bold */
  color: #002D5E; /* Red color for emphasis */
  /*margin-bottom: 10px;  Adds space below the highlighted text */
}

/* Regular paragraph text */
.normal-text {
  font-size: 16px; /* Standard font size for paragraphs */
  margin-bottom: 15px; /* Adds space below paragraphs */
  text-align: justify; /* Justifies text for a clean, aligned look */
}

/* Headers for sections */
h2 {
  font-size: 20px; /* Larger font size for section headers */
  color: #0070C0; /* Blue color for headers */
  margin-top: 20px; /* Adds space above headers */
  margin-bottom: 10px; /* Adds space below headers */
  border-bottom: 2px solid #0070C0; /* Adds a blue bottom border for distinction */
  padding-bottom: 5px; /* Adds space between the text and the border */
}

/* List styling */
.topics-list, .special-sessions {
  padding-left: 20px; /* Adds padding to align list items properly */
  margin-bottom: 15px; /* Adds space below the lists */
}

.topics-list li, .special-sessions li {
  margin-bottom: 10px; /* Adds space between list items */
}

/* Link styling */
a {
  color: #007bff; /* Blue color for links */
  text-decoration: none; /* Removes underline from links */
  font-weight: bold; /* Makes links bold */
  transition: color 0.3s ease; /* Adds smooth transition effect on hover */
}

a:hover {
  color: #002D5E; /* Darker blue color on hover */
}
.table-date tr td{
 height:28px;
}
/* Special styling for email links */
a[href^="mailto:"] {
  font-style: italic; /* Italicizes email links to distinguish them */
}
  .clear{
	clear: both;
  }

  .footer {
	text-align: center; /* Center the text */
	padding: 10px 0; /* Add vertical padding for spacing */
	font-size: 12px; /* Set a smaller font size for the footer text */
	color: #666; /* Use a light grey color for the text */
	width: 100%; /* Make sure the footer spans the full width of the page */
	margin-top: 5px; /* Add some space above the footer */
  }
 .sfees{
	width: 100%;
 }
  .fees {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	font-size: 18px;
	font-family: Arial, sans-serif;
	text-align: left;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  }
  
  .fees th, 
  .fees td {
	padding: 12px 15px;
	border-bottom: 1px solid #ddd;
  }
  
  .fees th {
	background-color: #f4f4f4;
	font-weight: bold;
	text-align: center;
	color: #333;
  }
  
  .fees tr:hover {
	background-color: #f1f1f1;
  }
  
  .fees .price, .li-price {
	text-align: right;
	color: #0066cc;
	font-weight: bold;
	text-align: center;
  vertical-align: middle;
  }
  
  .fees tr:nth-child(even) {
	background-color: #fafafa;
  }
  ul.ul-content{
    margin-left:0px;
    padding-left:5px;
  }
  .ul-content li {
	background-color: #f9f9f9; /* Light background for list items */
	margin-bottom: 5px; /* Space between list items */
  margin-left:0px;
  padding-left:5px;
	padding: 5px 5; /* Adds padding inside each list item */
	border-radius: 5px; /* Rounds the corners of list items */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow effect */
	display: flex; /* Aligns icon and text in a row */
	align-items: center; /* Centers the text vertically */
  }
  
  .ul-content li::before {
	content: "\2022"; /* Unicode for a bullet symbol */
	color: #002952; /* Sets bullet color */
	font-weight: bold; /* Makes bullet bold */
	display: inline-block;
	width: 20px; /* Space between bullet and text */
	margin-right: 5px; /* Adds margin to right of bullet */
  margin-left:10px;
	font-size: 24px; /* Makes bullet larger */
  }
  

.list-section {
    margin: 20px 0 10px;
    color: #2c3e50;
    border-bottom: 0;
    padding-bottom: 10px;
}

/* Styling for hotel section */
.hotel {
    background-color: white;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hotel h3 {
    margin-top: 0;
    color: #2980b9;
}

.hotel p {
    margin: 5px 0;
}

.hotel strong {
    color: #2c3e50;
}

/* Styling for links */
.hotel a {
    color: #3498db;
    text-decoration: none;
}

.hotel a:hover {
    text-decoration: underline;
}

/* Responsive layout */
@media (min-width: 768px) {
    .hotel {
        display: flex;
        flex-direction: column;
    }

    .hotel h3 {
        margin-bottom: 10px;
    }
}

figure {
    display: inline-block;
    margin: 20px; /* adjust as needed */
	
}
.margin-e{
	margin-bottom: 0px;
}
figure img {
    vertical-align: top;
	clear: both;
}
figure figcaption {
    text-align: center;
}

.carousel {
    margin-left: 10px;
    margin-right: 10px;
}

ul.slides {
    display: block;
    position: relative;
    height: 165px;
	width: 990px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

ul.slides input {
    display: none; 
}


.slide-container { 
    display: block; 
}

.slide-image {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0;
    transition: all .7s ease-in-out;
}   

.slide-image img {
    width: auto;
    min-width: 100%;
    height: 100%;
}

.carousel-controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    font-size: 44px;
    line-height: 160px;
    color: #fff;
}

.carousel-controls label {
    display: none;
    position: absolute;
    padding: 0 20px;
    opacity: 0;
    transition: opacity .5s;
    cursor: pointer;
}

.slide-image:hover + .carousel-controls label{
    opacity: 0.3;
}

.carousel-controls label:hover {
    opacity: 0.7;
}

.carousel-controls .prev-slide {
    width: 20px;
    text-align: left;
    left: 0;
}

.carousel-controls .next-slide {
    width: 20px;
    text-align: right;
    right: 0;
}

.carousel-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    z-index: 999;
    text-align: center;
}

.carousel-dots .carousel-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.3;
    margin: 5px;
}

input:checked + .slide-container .slide-image {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .carousel-controls label {
     display: block; 
}

input#img-1:checked ~ .carousel-dots label#img-dot-1,
input#img-2:checked ~ .carousel-dots label#img-dot-2,
input#img-3:checked ~ .carousel-dots label#img-dot-3,
input#img-4:checked ~ .carousel-dots label#img-dot-4,
input#img-5:checked ~ .carousel-dots label#img-dot-5,
input#img-6:checked ~ .carousel-dots label#img-dot-6 {
	opacity: 0.8;
}


input:checked + .slide-container .nav label { display: block; }



.sponsor-item {
  max-width: 900px; /* Sets the maximum width for the container */
  margin: 0 auto; /* Centers the container horizontally */
  padding: 20px; /* Adds padding around the container */
  padding-bottom: 10px;
  background-color: #f9f9f9; /* Light grey background color for the container */
  border-radius: 8px; /* Rounds the corners of the container */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for depth */
  margin-bottom: 20px; /* Adds space between each sponsor item */
  text-align: center; /* Centers the content within each sponsor item */
}

.sponsor-item a {
  text-decoration: none; /* Removes the underline from the links */
  color: inherit; /* Ensures the text color matches the parent element */
  display: block; /* Makes the link a block element to wrap the image and text */
}

.sponsor-logo {
  width: 100%; /* Makes the logo responsive to the width of the sponsor item */
  max-width: 400px; /* Sets a maximum width for the logos */
  margin-bottom: 10px; /* Adds space below the logo */
  transition: transform 0.3s ease; /* Adds a smooth zoom effect on hover */
}

.sponsor-name {
  font-size: 20px; /* Sets the font size for the sponsor names */
  color: #333; /* Dark grey color for the text */
  font-weight: bold; /* Makes the sponsor name bold */
  margin-top: 5px; /* Adds space above the sponsor name */
}

.sponsor-item:hover .sponsor-logo {
  transform: scale(1.05); /* Slightly zooms in the logo on hover */
}

.sponsor-item:hover .sponsor-name {
  color: #002D5E; /* Changes the sponsor name color to blue on hover */
}