@font-face {
    font-family: helvetica-now-text;
    src: url(HelveticaNowText.ttf);
}

body {
    font-family: helvetica-now-text, sans-serif;
    margin: 0px;
    overflow-y: scroll;
}

.navbar {
    display: flex;
    flex-direction: row;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 99999;
    box-shadow: 0px 5px 5px #aaaaaa;
    background-color: white;
    height: 70px;
    width: 100%;
}

.navbar .title-container {
    width: 30%;
    min-width: 600px;
    display: flex;
    margin-left: 20px;
}

.navbar .title-container .logo {
    height: 30px;
    margin: 20px 0px 0px 0px;
    display: flex;
}

.navbar .nav-items {
    width: 70%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.navbar .nav-items .item-container {
    height: 100%;
    margin: 0px 15px 0px 0px;
    padding: 0px 5px 0px 5px;
}

.navbar .nav-items .item-container:hover {
    background-color: #E5EFF0;
    cursor: pointer;
}

.navbar .nav-items .item-container .item {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.navbar .nav-items .item-container .item a {
    color: black;
    text-decoration: none;
    padding: 25px 0px 25px 0px;
}

.navbar a:visited,
.sidebar a:visited {
    color: blue;
}

.vertical-line {
    border-left: 1px solid grey;
    height: 35px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    margin-top: 20px !important;
}

.sidebar-container {
    height: 100%;
    width: 300px;
    position: fixed;
    z-index: 1;
    top: 70px;
    left: 0;
    background-color: #CDDBDE;
}

.sidebar {
    height: 90%;
    padding: 10px 10px 10px 10px;
    overflow-y: auto;
}

.sidebar::after {
    display: block;
    content: " ";
    height: 60px;
    visibility: hidden;
    pointer-events: none;
}

.sidebar a {
    text-decoration: none;
}

.sidebar a:hover {
    text-decoration: underline;
    /* background-color: #EEF6F7; */
}

.sidebar ul,
.sidebar ol {
    padding: 5px 0px 5px 20px;
    margin-left: 15px;
}

.sidebar>ul {
    margin: 5px;
    padding-left: 7px;
    list-style: none;
}

.sidebar li {
    padding: 5px 0px 5px 0px;
}

.main-content {
    margin-left: 310px;
    width: 100%;
}

.checklist-table {
    /* max-width: 1400px; */
    margin-bottom: 16px;
}

.checklist-table tr:hover {
    background-color: #E5EFF0;
}

.checklist-table th,
.checklist-table td {
    padding: 5px 10px 5px 10px;
}

.checklist-table,
.checklist-table th,
.checklist-table td {
    border: 1px solid #CDDBDE;
    border-collapse: collapse;
}

.checklist-table td.td-checkbox {
    text-align: center;
}

.checklist-table td.td-checkbox.td-disabled {
    background-color: lightgray;
}

.section-top::before {
    display: block;
    content: " ";
    margin-top: -80px;
    height: 80px;
    visibility: hidden;
    pointer-events: none;
}

.timeline-header {
    width: 100%;
    font-size: 1.2em;
}

.timeline-list {
    margin: 5px 0px 40px 0px
}

.login-form {
    font-size: 1.3em;
}

.login-form table {
    margin: auto;
}

.login-form td {
    height: 50px;
}

.login-form td input {
    width: 250px;
    margin-left: 15px;
    font-size: 0.9em;
    padding-left: 5px;
}

.login-form input[type="submit"] {
    display: block;
    width: 200px;
    margin: 20px auto 10px auto;
    font-size: 1em;
}

.alert_message {
    width: 60%;
    margin: 10% auto;
    border: 1px solid #0c0c0c;
    border-radius: 10px;
    background-color: #f8f9fa; /* Light grey background */
    font-size: 1.2em;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    color: #495057; /* Dark grey text */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Add a shadow for depth */
}