body, h1, h2, p, ul, li {
    margin: 0;
    padding: 0;
}

h2 {
    margin-top: 10px;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

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

nav ul li a {
    color: white;
    text-decoration: none;
}

.container {
    max-width: 1000px;
    margin-top: 20px;
    margin-left: 20px; /* Add left margin for positioning on the left side */
    padding: 20px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    
}

.logincolumn-container {
    display: flex;
    flex-wrap: wrap;
    margin: 5px;
}

.logincolumn {
    flex: 1;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    padding-left: 5px; /* Adjust the left padding as needed */
    margin: 5px;
    border-radius: 8px;
    width: 48%; /* Adjust the width as needed */
}

.loginicons {
    max-width: 100%;
    height: auto;
    float: left; /* Float the image to the right */
    margin: 5px 10px 10px 10px; /* Adjust the margin as needed */
}

.light-red {
    background-color: #f34545;  /* Light red background color */
}


.verticallogin{
    transform: rotate(180deg);
    writing-mode: vertical-lr;
    text-align: center;
}

.containerlogin{
    display: grid;
    grid-auto-rows: minmax(min-content, max-content);
    grid-template-columns: auto 1fr;
    max-width: 1000px;
    margin-top: 20px;
    margin-left: 20px; 
    padding: 20px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
}

  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

form {
    margin-top: 10px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

button[type="submit"] {
    background-color: #333;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button[type="button"] {
    background-color: #333;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}


/* Style the table */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 5px;
    text-align: left;
}   

table tr td:first-child {
    width: 3%;
    text-align: right;
}

th:nth-child(n+3) {
    text-align: center;
}


table tr td:nth-child(n+3) {
    text-align: center; /* Center-align content in cells */
    vertical-align: middle; /* Vertically center content in cells */
}

/* Style the footer */
footer {
    padding: 5px;
    text-align: center;
}

/* Add hover effect to links */
a:hover {
    text-decoration: underline;
    color: #333;
}

/* Style individual flash messages */
.flash-message {
    margin-bottom: 5px;
    padding: 5px 10px;
    background-color: #fff;
    font-weight: bold;
}

.add-button,
.download-button,
.delete-button {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px; 
}

.login-button {
        margin-top: 10px; 
        margin-bottom: 5px;
    }
    
.input-container input,
.input-container select {
    margin-right: 10px; /* Add 10px right margin to create padding between input elements */
}

.button-container {
    display: flex; /* This makes the buttons display in a row */
    align-items: center; /* Vertically align the buttons */
    gap: 5px; /* Add some space between buttons */
}

.button-container form button {
    padding: 7px 10px; /* Adjust the padding to control button size */
    background-color: #454546; /* Button background color */
    color: #fff; /* Button text color */
    border: none; /* Remove button border */
}

.bottom-button-container {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px; /* Add margin at the top for spacing */
}

.bottom-button-container .keyword-input {
    width: 150px;
}


.input-button-group {
    display: flex;
    align-items: center;
    margin-right: 10px; /* Add margin between groups */
    margin-left: 30px;
}

.input-button-group label {
    margin-right: 7px;
}


.light-green {
    background-color: rgb(217, 248, 217);
}

.mid-green {
    background-color: rgb(101, 243, 101);
}


.brown {
    background-color: rgb(250, 175, 104);
}


.link-details-container {
    padding-left: 15px; 
}

.link-details-container ul {
    list-style-type: disc; /* Remove bullets from the list */
    padding: 0; /* Remove default padding from the list */
}

.link-details-container li {
    margin-bottom: 3px; /* Adjust the margin between list items */
}

.sitehistorytable 
{   margin-top: 5px;
    width: 100%;
}

.sitehistorytable th {
    text-align: center;
}

.sitehistorytable th:first-child, td:first-child {
    width: 7%; /* Adjust the width as needed */
}
.sitehistorytable td:nth-child(2) {
    width: 25%;
}
.sitehistorytable td:nth-child(3) {
    width: 10%;
}
.sitehistorytable td:nth-child(4) {
    width: 50%;
}
.sitehistorytable td:nth-child(5) {
    width: 10%;
}

#sitehistory {
margin-bottom: 5px;
}

.bottom-buttons {
    display: flex;
    align-items: last baseline;
    bottom: 1px;
    width: 50%;
    padding: 1px;
    
}

.bottom-buttons input[type="file"] {
    color:#1010a0;
}

.bottom-buttons input[type="file"] {
    color:rgb(37, 37, 37);
    font-size:80%;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table th, .comparison-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.comparison-table .html-column td {
    vertical-align: top;
    text-align: justify;
    white-space: nowrap; /* Prevent text from wrapping */
}

.iframe-container {
    width: 40%;
    height: 60px;
    overflow: auto;
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.no-column {
    width: 4%; /* Adjust the width for the 'No' column */
}

.date-column {
    width: 10%; /* Adjust the width for the 'Selected Dates' column */
}

.html-source-column {
    width: 10%; /* Adjust the width for the 'HTML source' column */
}

.html-column {
    width: 75%; /* Adjust the width for the 'HTML' column */
}

.banner-word {
    color: darkblue;
    font-weight: bold;
    font-size: 1.2em; /* Adjust the font size as needed */
}


.table-button {
    text-decoration: none; /* Remove default link underline */
}

.table-button button {
    /* Add button styling */
    background-color: #333;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.forms-container {
    display:flex;
    flex-wrap: wrap;
    gap: 10px; 
}


.manageform {
    display: flex;
    flex-direction: column;
    margin-left: 5px;
    margin-right: 5px;

}

.manageform form div {
    margin-top: 10px; /* Adjust the margin as needed */
    margin-bottom: 0px; /* Adjust the margin as needed */

}

.manageform:first-child {
    margin-right: 5px; /* Adjust the margin as needed */
}

.manageform:last-child {
    margin-left: 5px; /* Adjust the margin as needed */
}

.info-icon {
    font-weight: bold;
    margin-left: 5px;   
    position: relative;
    display: inline-block;
  }

.info-icon .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: rgb(97, 99, 97);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  }
  
  .info-icon:hover .tooltiptext {
    visibility: visible;
  }

/*

.info-icon:hover:after {
    content: attr(title);  
    display: inline-block;
    position: relative;
    left: 10px;
    bottom: 5px;
    background: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#registrationForm:invalid button {
    pointer-events: none;
}
*/

.news-box {
    background-color: #fff; /* Set background color for the "paper" */
    padding: 20px; /* Adjust padding as needed */
    margin: 10px 0; /* Add margin for spacing */
    border: 1px solid #ddd; /* Add border for a paper-like appearance */
    border-radius: 10px; /* Add rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    
    /* Add the paper texture background */
    background-image: url('paper-texture.jpg');
    background-size: cover; /* Adjust based on your texture image */
}

.news-header {
    padding: 10px; /* Add padding to the header */
    border-bottom: 1px solid #ddd; /* Add a border between header and content */
}

.news-title {
    font-size: 1.2em; /* Adjust title font size */
    font-weight: bold; /* Add bold styling to title */
}

.news-date {
    font-size: 0.9em; /* Adjust date font size */
    color: #888; /* Add a muted color for the date */
}

.toggle-content {
    display: none; /* Hide the checkbox */
}


.news-content {
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    padding: 10px; 
    text-align: justify; 
}

.toggle-content:checked + label + .news-content {
    max-height: none; /* Remove the maximum height for full expansion */
}

.space {
    height: 10px; /* Set the height to the desired space between news-box elements */
}

        .navbar {
            overflow: hidden;
            background-color: black; 
            color: white; 
            height: 25px; 
            text-align: left; 
        }

        .navbar a {
            display: inline-block; 
            color: white;
            text-align: center;
            padding: 3px 10px;
            padding-left: 30px;
            text-decoration: none;
        }

        .hamburger-icon {
            display: none; 
            font-size: 20px;
            cursor: pointer;
            float: right; 
            padding: 5px 16px;
        }

        .mobile-menu {
            display: none;
            position: absolute;
            background-color: black;
            text-align: left;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            opacity: 0.5; 
            transition: opacity 0.3s ease-in-out;
        }

        .mobile-menu a {
            display: block;
            color: white;
            padding: 5px 16px;
            text-decoration: none;
        }

        .screenshots-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        
        .section-title {
            display: block; 
            margin-bottom: 10px; 
        }

        .screenshot {
            width: 48%; 
            margin-bottom: 20px; 
        }

        .warning {
            color: red;
        }

        button:disabled {
            opacity: 0.8; 
            cursor: not-allowed;
        }

@media (max-width: 768px) {
    .container, .containerlogin {
        margin-left: 0;
        padding: 10px;
        overflow-x: auto; /* Add horizontal scrolling for the container */
    }
    h1 {font-size:170%;}

    input[type="text"] {
        padding: 8px;
    }

    button[type="submit"] {
        padding: 3px 12px;
    }

    .logincolumn {
        flex: 100%;
        padding: 5px;
        font-size: 90%;
        text-align: justify;
    }

    .loginicons {
        max-width: 30%; 
        margin: 5px 5px 10px 0; 
    }

    p.frontlogincolumn {
        text-indent: 0px;
        margin-bottom: 10px; 
        text-align: justify;
        line-height: 1.2;
    }

    table th {
        font-size: 12px; 
    }

    table tr {
        font-size: 10px; 
    }

    .table-row {
        line-height: 1.2; /* Adjust the line-height value as needed */
        padding: 3px; /* Adjust the padding as needed */
    }
    
    .table-row td {
        font-size: 10px; /* Reduce the font size */
    }

    .table-button button {
        padding: 3px 12px;}

        .manageform {
            width: 100%; /* Stack vertically on smaller screens */
        }
        
        .link-details-container li {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 85vw; /* Adjust the maximum width as needed */
        }

        .bottom-button-container form {
            display:grid;
            margin-bottom: 10px; /* Adjust the margin as needed */
        }
        
        .navbar a {
            display: none;
        }

        .navbar .hamburger-icon {
            display: block;
        }

        .mobile-menu {
            display: none;
            width: 100%;
        }

        .mobile-menu a {
            text-align: center;
        }

        /* Show mobile menu when hamburger icon is pressed */
        .navbar.show-mobile-menu .mobile-menu {
            display: block;
        }

        .screenshot {
            width: 100%; 
            height: auto;
        }
        

    /* Add any other styles for smaller screens here */
}