/* General styles for navigation menu */
body {
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 200;
    margin: 0;
    padding: 0;
    background-color: rgb(245,245,245);
    color: rgb(75,75,75);
}

main {
    position: relative;
    margin-top: 80px;
}

h1, h2, h3, p {
    padding: 0;
}

h1 {
    margin: 20px 0px 20px 0px;
}

h2 {
    margin: 20px 0px 20px 0px;
}

h3 {
    margin: 30px 0px 12px 0px;
}

p {
    margin: 12px 0px 7px 0px;
}

h1, h2, h3 {
    text-transform: uppercase;
}

h1, h2 {
    font-weight: 600;
}

h1, h3 {
    color: rgb(212,135,139);
}

h1 {
    font-size: 1.8em;
}

h2 {
    font-size: 1.2em;
    color: rgb(30,80,130);
}

h3 {
    font-size: 0.9em;
    font-weight: 500;
}

.standalone {
    text-align: left;
    margin: 20px;
}

section {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px 20px 20px 20px;
    background-color: rgb(255,255,255);
    margin-bottom: 5px;
    text-align: left;
    border-left: 5px solid rgb(232,165,169);
}

a {
    text-decoration: none;
    color: rgb(70,160,150);
}

a:hover {
    color: rgb(30,80,130);
}

ul, ol {
    margin-top: -4px;
    padding-left: 30px;
}

.intro {
    border: none;
    margin: 0;
    background-color: rgb(245,245,245);
    box-shadow: none;
}

.intro h1 {
    margin: 8px 7px 8px 7px;
}

.intro h2 {
    margin: 7px 7px 8px 7px;
}

.intro h3 {
    margin: 0 7px 7px 7px;
}

.keynote h3, .organizers h3 {
    margin: 7px 0px 7px 0px;
}

.attention {
    background-color: rgb(232,165,169);
    border-left: 5px solid rgb(212,135,139);
}

.attention h1, .attention h2, .attention h3, .attention p, .attention .high {
    color: rgb(255,255,255);
}

.alert_success, .alert_error {
    color: rgb(255,255,255);
    padding-top: 20px;
}

.alert_success {
    background-color: rgb(125,160,129);
    border-left: 5px solid rgb(212,135,129);
}

.alert_error {
    background-color: rgb(160,125,139);
    border-left: 5px solid rgb(212,135,139);
}

.attention .high {
    font-size: 1em;
}

.high {
    font-weight: 500;
    text-transform: uppercase;
    color: rgb(70,160,150);
    font-size: 0.9em;
}

.low {
    font-size: 0.8em;
    color: rgb(120,120,120);
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgb(255,255,255);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ensure navbar takes full width */
    position: relative;
    height: 60px;
}

.logo {
    display: flex;
    align-items: center;
    height: 57px;
    margin-left: 15px;
    margin-top: 3px;
}

.logologo {
    height: 30px;
    display: block;
}

.logotitle {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9em;
    text-align: left;
    padding: 0;
    margin-left: 15px;
    color: rgb(30,80,130);
}

.menu {
    list-style-type: none;
    position: relative;
    margin: 0;
    display: flex;
}

.menu li {
    margin-right: 15px;
    position: relative;
    border-bottom: 10px solid transparent;
}

.menu a {
    text-decoration: none;
    color: rgb(70,160,150);
    padding: 30px 10px 9px 10px;
    display: block;
    font-size: 1rem;
}

/* Active menu item styles */
.menu li.active {
    border-bottom: 7px solid rgb(232,165,169);
    padding-bottom: 12px;
}

.menu li.active a {
    color: rgb(212,135,139);
}

.menu li:hover {
    border-bottom: 7px solid rgb(232,165,169);
}

.menu li a:hover {
    color: rgb(30,80,130);
}

.hamburger {
    position: absolute;
    top: 20px;
    right: 15px;
    display: none;
    flex-direction: column;
    cursor: pointer;
    width: 21px;
    height: 21px;
    justify-content: space-between;
}

.hamburger .line {
    width: 21px;
    height: 3px;
    background-color: rgb(70,160,150);
    transition: transform 0.3s ease;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

.hero {
    position: relative;
    margin: 0;
    padding: 0;
    margin-top: -20px;
    width: 100%;
    height: 75vh;
    border: none;
    background-image: url('assets/images/hero-image.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: left;
}

.map {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.guide1, .guide2, .guide3 {
    height: 300px;
    width: 300px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: inline-block;
}

.guide1 {
    background-image: url('assets/images/guide1.jpeg');
    margin-right: 15px;
}

.guide2 {
    background-image: url('assets/images/guide2.jpeg');
    margin-right: 15px;
}

.guide3 {
    background-image: url('assets/images/guide3.jpeg');
}

.guide_photo image {
    width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.lunch_map {
    width: 600px;
    aspect-ratio: 1 / 1;
    background-image: url('assets/images/lunch_map.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#form_field {
    display: none;
}

/* Label Styling */
label {
    font-size: 16px;
    color: #444;
    margin-bottom: 8px;
    margin-top: 10px;
    display: block;
}

/* Input and Textarea Styling */
input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea, select, input[type="search"], select option {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 200;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

select {
    height: 2.8rem;
}

/* Focus States for Inputs and Textarea */
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
    border-color: #0056b3;
    outline: none;
}

/* Checkboxes and Buttons */
input[type="checkbox"] {
    margin-right: 8px;
}

/* Button Styling */
button[type="submit"], button[type="button"] {
    padding: 8px;
    font-size: 16px;
    background-color: #0056b3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

td button[type="submit"], td button[type="button"] {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
}

input[type="time"] {
    padding: 8px 15px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 10px;
}

button[type="submit"]:hover, button[type="button"]:hover {
    background-color: #004085;
}

/* Speaker Delete Button */
button[type="button"] {
    background-color: #dc3545;
    margin-top: 5px;
}

button[type="button"]:hover {
    background-color: #c82333;
}

/* Spacer Between Fields */
input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea, select, button[type="submit"], button[type="button"], input[type="time"] {
    margin-bottom: 15px;
}

.dt-layout-start, .dt-layout-end {
    width: 50%;
    display: inline-block;
}

.dt-layout-end {
    text-align: right;
}

.dt-length label {
    display: inline-block;
    width: 200px;
    margin-left: 10px;
}

#dt-length-0 {
    width: 90px;
    display: inline-block;
}

.dt-search {
    display: inline-block;
    margin-bottom: 10px;
}

.dt-search label {
    display: inline-block;
    width: 100px;
}

#dt-search-0 {
    margin-left: 15px;
    width: 200px;
    display: inline-block;
    margin-bottom: 0;
}

.dt-paging button {
    margin: 15px 1px 0 1px;
}

.dt-info {
    margin-top: 15px;
}

/* Error Messages */
.error {
    color: red;
    font-size: 14px;
}

/* General Table Styling */
table {
    width: 100%;
    border-collapse: collapse; /* Collapse borders between cells */
    margin-bottom: 20px; /* Space below the table */
}

/* Table Header Styling */
th {
    background-color: #f8f9fa; /* Light background for header */
    color: #333; /* Dark text for contrast */
    font-size: 16px;
    padding: 12px; /* Padding for header cells */
    text-align: left; /* Align header text to the left */
    border: 1px solid #ddd; /* Light border at the bottom of the header */
    vertical-align: top;
}

/* Table Body Styling */
td {
    padding: 8px; /* Padding for table cells */
    font-size: 14px; /* Font size for body cells */
    border: 1px solid #ddd; /* Light grey border for table cells */
    vertical-align: top;
}

/* Odd Row Background Color */
table.dataTable tbody tr:nth-child(even) {
    background-color: rgb(252,252,240);
}

/* Hover Effect for Rows */
tr:hover {
    background-color: #f1f1f1; /* Slightly darker background on hover */
}

/* Table Footer Styling (Optional) */
tfoot {
    background-color: #f8f9fa; /* Same light background as header */
    font-weight: 500;
}

tfoot td {
    padding: 12px;
    border-top: 1px solid #ddd;
}

.col_abstract {
    width: 40%;
}

.program {
    float: left;
    margin-top: 8px;
    width: calc(100% - 6px);
    box-sizing: border-box;
}

.pr_day {
    float: left;
    width: calc(100% - 15px);
    margin-bottom: 17px;
    margin-left: 5px;
    background-color: rgb(170,210,205);
    padding: 5px 5px 8px 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#pr_day_1 {
    background-color: rgb(150,180,100);
}

#pr_day_1 .pr_ses_title {
    color: rgb(110,140,70);
}

#pr_day_2 {
    background-color: rgb(210,120,100);
}

#pr_day_2 .pr_ses_title {
    color: rgb(180,90,70);
}

#pr_day_3 {
    background-color: rgb(100,160,170);
}

#pr_day_3 .pr_ses_title {
    color: rgb(70,130,140);
}

#pr_day_1 .pr_ses_time, #pr_day_1 .pr_ses_keynote, #pr_day_1 .pr_ses_parallel, #pr_day_1 .pr_ses_no_pres {
    border-left: 5px solid rgb(190,210,150);
}

#pr_day_2 .pr_ses_time, #pr_day_2 .pr_ses_keynote, #pr_day_2 .pr_ses_parallel, #pr_day_2 .pr_ses_no_pres {
    border-left: 5px solid rgb(250,160,150);
}

#pr_day_3 .pr_ses_time, #pr_day_3 .pr_ses_keynote, #pr_day_3 .pr_ses_parallel, #pr_day_3 .pr_ses_no_pres {
    border-left: 5px solid rgb(155,200,210);
}

.day_toggle {
    color: rgb(255,255,255);
    font-size: 0.8em;
    padding-left: 15px;
    text-transform: lowercase;
    font-weight: 200;
}

.pr_day_date {
    float: left;
    padding: 15px 15px 10px 8px;
    width: calc(100% - 24px);
    color: rgb(255,255,255);
    text-transform: uppercase;
    font-weight: 600;
}

.pr_ses {
    float: left;
    width: 100%;
    margin-top: 5px;
    font-size: 0.9em;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.pr_ses_time {
    float: left;
    padding: 12px 10px 0 8px;
    width: calc(100% - 23px);
    background-color: rgb(245,245,245);
    font-weight: 500;
}

.pr_ses_content {
    float:left;
    width: 100%;
    font-weight: 500;
    color: rgb(212,135,139);
}

.pr_ses_content > div:not(:last-child) {
    border-bottom: solid 1px rgb(210,210,210);
}

.pr_ses_content > div:nth-child(even) {
    background-color: rgb(235,237,235);
}

.pr_ses_no_pres {
    padding: 8px 10px 12px 0px;
    width: calc(100% - 15px);
    text-transform: uppercase;
    background-color: rgb(245,245,245);
    border-left: 5px solid rgb(232,165,169);
}

.pr_ses_keynote, .pr_ses_parallel {
    display: block;
    width: calc(100% - 5px);
    float: left;
    background-color: rgb(245,245,245);
}

.pr_ses_keynote_head, .pr_ses_parallel_head {
    width: calc(100% - 5px);
    float: left;
}

.pr_ses_keynote_head > span, .pr_ses_parallel_head  > span {
    display: block;
    float: left;
    width: calc(100% - 16px);
}

.pr_ses_title {
    text-transform: uppercase;
    padding: 8px 8px 0 8px;
}

.pr_ses_chair {
    padding: 2px 8px 0 8px;
    color: rgb(75,75,75);
    font-weight: 200;
    font-size: 0.85em;
}

.pr_ses_location {
    padding: 2px 8px 0px 8px;
    color: rgb(75,75,75);
    font-weight: 200;
    font-size: 0.85em;
}

.sessions_toggle {
    display: block;
    float:left;
    font-size: 0.85em;
    padding: 5px 8px 5px 8px;
    font-weight: 200;
}

.pr_ses_keynote_body, .pr_ses_parallel_body {
    margin: 0 5px 5px 5px;
    width: calc(100% - 10px);
    float: left;
}

.pr_pres_keynote_body, .pr_pres_parallel_body {
    float: left;
    width: 100%;
    margin-bottom: 2px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    background-color: rgb(255,255,255);
}

.pr_pres_keynote_body  > span, .pr_pres_parallel_body  > span, .pr_pres_keynote_body  > a, .pr_pres_parallel_body  > a {
    display: block;
    width: calc(100% - 18px);
    float: left;
}


.pr_pres_speaker {
    padding: 12px 10px 4px 8px;
    color: rgb(75,75,75);
    font-weight: 200;
    font-size: 0.95em;
    color: rgb(30,80,130);
    border-top: solid 1px rgb(240,240,240);
}

.pr_pres_title {
    padding: 0 10px 6px 8px;
    font-size: 0.8em;
    font-weight: 600;
    color: rgb(212,135,139);
    text-transform: uppercase;
}

.abstract_word_count {
    font-size: 0.85em;
    font-weight: bold;
}

.abstract_toggle {
    padding: 0 10px 10px 8px;
    font-weight: 200;
    font-size: 0.85em;
}

.pr_pres_abstract {
    padding: 2px 10px 12px 8px;
    color: rgb(75,75,75);
    font-weight: 200;
    font-size: 0.85em;
}

footer {
    color: #fff;
    padding: 1em;
    text-align: center;
}

footer .logos {
    margin-top: 10px;
}

footer .logos img {
    margin: 10px 30px 30px 30px;
    height: 80px;
}

#login_link {
    height: 15px;
    width: 100%;
    display: block;
}

#logo4 {
    height: 150px;
}

/* Mobile Styles */
@media (max-width: 1280px) {
    
    .logo {
        width: 80%;
    }
    
    header {
        width: 100%;
    }
    
    nav ul li {
        display: block;
        margin: 10px 0;
    }

    .hero img {
        height: auto;
    }
    
    .menu {
        display: none;
        flex-direction: column;
        background-color: #fff;
        position: absolute;
        max-height: 85vh;
        overflow-y: auto;
        top: 60px;
        right: 0px;
        width: 100%;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
        border-top: 1px solid rgb(230,230,230);
        z-index: 100;
    }

    .menu.active {
        display: flex;
    }

    .hamburger {
        display: flex;
    }

    .hamburger.active .line:nth-child(1) {
        transform: rotate(45deg);
        position: relative;
        top: 9px;
    }

    .hamburger.active .line:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .line:nth-child(3) {
        transform: rotate(-45deg);
        position: relative;
        top: -9px;
    }

    .menu li {
        text-align: center;
        padding: 0px;
        margin: 0;
        border-bottom: none;
    }

    .menu a {
        font-size: 1.2rem;
        padding-bottom: 5px;
        padding: 15px 5px 15px 5px;
        border-bottom: none;
    }
    
    /* Active menu item styles */
    .menu li.active {
        background-color: rgb(232,165,169);
        border-bottom: none;
        padding: 0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    .menu li.active a {
        color: rgb(255,255,255);
        padding: 15px 5px 15px 5px;
        border-bottom: none;
    }
    
    .menu li:hover {
        background-color: rgb(70,160,150);
        color: rgb(255,255,255);
        border-bottom: none;
    }
    
    .menu li a:hover {
        background-color: rgb(70,160,150);
        color: rgb(255,255,255);
        border-bottom: none;
    }
    
    .hero {
        background-image: url('assets/images/hero-image-tablet.jpg');
    }
    
    .map {
        padding-bottom: 50%; /* Adjusted aspect ratio */
    }
    
    form {
        padding: 20px;
        font-size: 0.9em;
    }
    
    td form {
        padding: 0;
    }

    label {
        font-size: 0.9em;
    }

    input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea, select {
        padding: 10px;
    }

    button[type="submit"], button[type="button"], input[type="time"] {
        font-size: 14px;
        padding: 10px 20px;
    }
    
    table {
        width: 100%;
        display: block;
        overflow-x: auto; /* Allow horizontal scrolling */
    }

    th, td {
        padding: 8px;
    }
    
    .col_abstract {
        min-width: 500px;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 1280px) and (orientation: landscape) {
    .menu {
        max-height: 60vh; /* Further reduce height in landscape mode */
    }
}

@media (max-width: 800px) {
    
    .logo {
        width: 80%;
    }
    
    .hero {
        background-image: url('assets/images/hero-image-mobile.jpg');
        height: 35vh;
    }
    
    .map {
        padding-bottom: 60%; /* Adjusted aspect ratio */
    }
    
    .dt-layout-start, .dt-layout-end {
        width: 100%;
        display: block;
    }
    
    .dt-layout-end {
        text-align: left;
        margin-bottom: 5px;
    }
    
    .dt-search label {
        display: inline-block;
        width: 50px;
    }
    
    #dt-search-0 {
        display: inline-block;
    }
    
    .col_abstract {
        min-width: 360px;
    }
    
    .lunch_map {
        width: 90vw;
        aspect-ratio: 1 / 1;
    }
}