/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: hidden; /* Prevent any unexpected horizontal scrolling */
}

.navMenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
    width: 100%; /* Ensure it takes up full width */
}

/* Initially hide the menuWrapper on mobile */
.menuWrapper {
    display: none;
    width: 100%;
}

/* Show the menu items when the hamburger menu is expanded */
.hamburger:active + .menuWrapper,
.menuWrapper[style*="block"] {
    display: block;
}



/** Page layout */

.content-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 60px); /* Assuming the height of your navigation is 60px. Adjust if different. */
    width: 100%;
}

body {
    background-color: #fefefe; /* Light grey background */ 
    margin: 0 auto;
    font-family: 'Roboto';
    color:#333;
}


body#login_page .content-container, body#register_page .content-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 60px); /* Adjusting for the height of the nav */
}




.links
{
    padding-top: 30px;
    text-align: center;
}

a
{
    color: #0094eb;
}

a.success_link
{
    color:#333;
}

.login-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 360px;
}

.logo {
    display: block;
    margin: 0 auto 0px;
    width: 150px; /* Adjust as needed */
}

.welcome-text {
    text-align: center;
    margin-bottom: 20px;
    color: #333; /* Placeholder color, replace with the exact color from Bunchamedia */
}

.login-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box; /* add this */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.login-button {
    width: 100%;
    padding: 10px;
    background-color: #0094eb; 
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.login-button:hover {
    background-color: #0056b3;
}



.error-message {
    color: red;
    font-size: 12px;
    margin-bottom: 5px;
    display: none;
}

body#page_profile input
{
    margin-top:5px;
}

body#page_profile label
{
    font-size:15px;
}



/* nav menu */


#stickyNav {
    background-color: #0094eb;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navMenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start; /* Left-align the items */
}

.navMenu > li {
    padding: 15px 20px;
    position: relative;
    margin-right: 20px; /* Add some right margin for spacing */
}

.navMenu > li:last-child {
    margin-right: 0; /* Remove margin for the last item to avoid extra spacing on the right */
}

.navMenu a {
    color: white;
    text-decoration: none;
    display: block;
}

.navMenu .hasSubmenu > a::after {
    content: " ▼";
    font-size: 0.8em;
}

.navMenu .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #007bbd;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 1px solid #006aa9;
}

.navMenu .submenu li {
    padding: 10px 20px;
}

.navMenu .submenu li:hover {
    background-color: #006aa9;
}

.navMenu .hasSubmenu:hover .submenu {
    display: block;
}

/** Footer **/

footer {
    background-color: #2c2c2c; /* Dark grey background */
    color: #ffffff; /* White text color */
    padding: 20px 0; /* Padding top and bottom */
    position: relative;
    bottom: 0;
    width: 100%;
}

.footer-content {
    text-align: center; /* Center the content */
    font-size: 16px; /* Adjust as needed */
    max-width: 1200px; /* Max width for the content */
    margin: 0 auto; /* Center the content container */
}

.footer-content a {
    color: #0094eb; /* Branding blue color for links */
    margin: 0 5px; /* Spacing between links */
    text-decoration: none; /* Remove underline */
}

.footer-content a:hover {
    text-decoration: underline; /* Underline on hover for better UX */
}


/** Profile page **/


.panel-container {
    width: 50%; /* Adjust as needed */
    margin: 0 auto; /* This will center the container horizontally */
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.user-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.avatar-container {
    flex: 1;
    text-align: center;
    max-width: 200px;
}

.avatar-container img {
    max-width: 100%;
    border-radius: 50%;
}

.user-details {
    flex: 2;
    padding-left: 20px;
}

.password-reset-container {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.password-reset-container h2 {
    text-align: center;
    margin-bottom: 20px;
}

/** Responsive menu **/
/* Hamburger Button */
.hamburger {
    background: none;
    border: none;
    font-size: 30px;
    color: white;
    display: none; /* Initially hidden */
    cursor: pointer;
}

/* Menu Wrapper */
.menuWrapper {
    display: none;
    width: 100%;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .hamburger {
        display: block;
    }

    .navMenu {
        flex-direction: column;
        align-items: normal;
        background-color: #0094eb; 
    }

    .navMenu > li {
        margin-right: 0;
    }

    .navMenu .submenu {
        position: relative;
        top: 0;
        left: 0;
        background-color: #0094eb;
    }

    .navMenu a {
        color: white; /* Ensure text color contrasts with the background */
    }
}

@media screen and (min-width: 769px) {
    .menuWrapper {
        display: block !important; /* The !important ensures that this rule takes precedence */
    }
}

/* dashboard */
.dashboard-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.dashboard-header {
    display: flex;
    justify-content: flex-end; /* Right-align the buttons */
    margin-bottom: 20px;
}

.btn {
    padding: 10px 20px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 10px; /* Add spacing between buttons */
}

.project {
    background-color: #ffffff; /* Color from your login form */
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow from your login form */
    max-width: 1100px; /* Maximum width set */
    margin-left: auto; /* Centering the project box */
    margin-right: auto; /* Centering the project box */
}


.project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.websites {
    margin-top: 20px;
}

/* Status Icons */
.status-icon-ok, .status-icon-failed, .status-icon-unknown {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 15px; /* Increased spacing between status icon and website name */
    position: relative;
    background-size: cover; /* Ensure the image covers the entire div */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-position: center; /* Center the image */
}


.status-icon-ok {
    background-image: url("../images/monitor-green-v2.png");
}

.status-icon-unknown {
    background-image: url("../images/monitor-yellow-v2.png");
}

.status-icon-failed {
    background-image: url("../images/monitor-red-v2.png");
}

/* Remove the ::before pseudo-elements for the status icons */
.status-icon-ok::before, .status-icon-failed::before {
    content: none;
}

.website {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px 0; /* Padding added for each website */
    justify-content: space-between; /* This will push the icons to the right */
}

.website:not(:last-child) {
    border-bottom: 1px solid #f3f3f3; /* Light delimiter between each website */
}

.website-icons i:not(:last-child)
{
    padding-right:5px;
}

.website-name {
    flex-grow: 1; /* Allows the website name to take up available space */
    margin-right: 10px; /* Spacing between website name and icons */
    display: flex; /* Make this a flex container */
    align-items: center; /* Align items vertically */
}

.icon {
    margin-left: 10px; /* Spacing between icons */
    cursor: pointer;
}

.light-grey-btn {
    background-color: #f3f3f3;
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    margin-left: 5px;
    width: auto;
    border-radius: 5px;
    color: #333;
}
.light-grey-btn:hover {
    background-color: grey;
    color: white;
}

.project-header span {
    font-weight: 900;
    font-size: 1.5em;
}


/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 360px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

.modal-header p{
    font-size:20px;
    text-align: center;
}

#addProjectForm, #addWebsiteForm
{
    margin-top:30px;
}

#addProjectForm button, #addWebsiteForm button
{
    margin: 0 auto;
    width: 100%;
}

#addProjectForm #projectName, #addWebsiteForm #websiteURL, #addWebsiteForm #websiteName
{
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin-top: 10px;
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.error-message {
    color: red;
    font-size: 12px;
    margin-bottom: 5px;
    display: none;
}

/* chart page */
.center-text {
    text-align: center;
}

.status-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* This will align the children to the top */
}


.uptime_chart_page .left-section,.uptime_chart_page  .right-section {
    width: 48%; /* Adjust as needed */
}

.uptime_chart_page .right-section {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: inline-block; /* This will make the box only as wide as its content */
    width:30%;
}


.right-section-header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
}



.uptime-box {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
}

.uptime-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.chart-section {
    margin-top: 20px;
}

.chart-box {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
}

.chart-container {
    margin-top: 20px;
}

.uptime_chart_page h1
{
    margin-bottom: 70px;
    margin-top: 20px;
}

.uptime_chart_page .status-row p {
    padding: 19px 0px;
}

.status-icon-text {
    display: flex;
    align-items: center; /* Center items vertically */
}

.status-image, .downtime-row img {
    width: 35px;
    vertical-align: middle;
    margin-right: 10px;
}

.downtime-row {
    display: flex;
    align-items: center;
}