/* Style for the body */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0; /* Change this to your desired background color */
    /* background: linear-gradient(#141e30, #243b55); */
    margin: 0;
    padding: 0;
}
/* Set the margin and padding of the header to 0 */
h1, h2, h3, p {

    margin:0px;

    padding:0px;

}
/* Header/Logo Title */
.header1 {
    padding: 2px;
    text-align: center;
    color: rgb(113, 24, 172);
    font-size: 25px;
    
}

.datetime{
    width:100%;
    margin-top:15px;
    text-align:center;
    font-size:20px; font-family: Verdana, Geneva, sans-serif;
    color: #0c0c0c;
}

/* Style for the body content after login */
.body-content {
    position: absolute;
    top: 20%; /* Adjusted to 20% of the viewport height */
    left: 50%;
    width: 460px;
    padding: 40px;
    margin: 0 auto 100px;
    transform: translate(-50%, 0); /* Only horizontally center */
    background: rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}

/* Style for the login page container */
.login-container {
    text-align: center;
    margin-top: 50px;
}
/* Style for the login form */
.login-form {
    width: 300px;
    margin: 0 auto 100px;
    padding: 40px;
    background-color: #f4f4f4;
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}
/* Style for the login form labels */
.login-form label {
    display: block;
    text-align: left;
    font-weight: bold;
}
/* Style for the login form input fields */
.login-form input[type="text"],
.login-form input[type="password"] {
    width: 100%;
    padding: 5px;
    margin: 5px 0;
    box-sizing: border-box;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}
/* Style for the login form submit button */
.login-form input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    box-sizing: border-box;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
}
.login-form input[type="submit"]:hover {
    background-color: #0004d8; /* Darker green color on hover */
    font-weight: bold;
}
/* Style for the password popup */
#passwordPopup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f4f4f4;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    z-index: 1;
}
/* Style for the password input */
#passwordInput {
    margin: 10px 0;
    padding: 5px;
    box-sizing: border-box;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    width: 100%;
}
/* Style for the password submit button */
#passwordSubmit {
    padding: 5px 15px;
    background-color: #007bff;
    color: #fff;
    box-sizing: border-box;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    cursor: pointer;
}
#passwordSubmit:hover {
    background-color: #0236c4; /* Darker green color on hover */
}
/* Style for the close button */
.closeButton {
    float: right;
    cursor: pointer;
}

/* Style for error messages */
.error-message {
    color: red;
}
/* Style for the Edit button */
.edit-button {
    background-color: #007BFF; /* Button background color */
    color: #fff; /* Text color */
    padding: 5px 15px; /* Padding */
    box-sizing: border-box;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    cursor: pointer; /* Add pointer cursor on hover */
    font-size: 16px; /* Font size */
}
.edit-button:hover {
    background-color: #011ea1; /* Darker green color on hover */
}
/* Style for the Save button */
.save-button {
    background-color: #28A745; /* Button background color */
    color: #fff; /* Text color */
    padding: 5px 15px; /* Padding */
    box-sizing: border-box;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    cursor: pointer; /* Add pointer cursor on hover */
    font-size: 16px; /* Font size */
}
.save-button:hover {
    background-color: #06aa01; /* Darker green color on hover */
}
/* Style for the "Run Failover" button */
.runfo-button {
    background-color: #a906f5; /* Green background color */
    color: white; /* Text color */
    padding: 5px 15px; /* Padding around the button text */
    box-sizing: border-box;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    cursor: pointer; /* Change cursor on hover */
    font-size: 16px; /* Font size */
}

/* Style for the "Run Failover" button on hover */
.runfo-button:hover {
    background-color: #63029b; /* Darker green color on hover */
}
/* Style for the "Run Shift" button */
.runshift-button {
    background-color: #73fc18; /* Green background color */
    color: rgb(8, 8, 8); /* Text color */
    padding: 5px 15px; /* Padding around the button text */
    box-sizing: border-box;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    cursor: pointer; /* Change cursor on hover */
    font-size: 16px; /* Font size */
}

/* Style for the "Run Shift" button on hover */
.runshift-button:hover {
    background-color: #19d800; /* Darker green color on hover */
}
.logout-button {
    background-color: #007BFF; /* Green background color */
    color: white; /* Text color */
    padding: 5px 15px; /* Padding around the button text */
    box-sizing: border-box;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    cursor: pointer; /* Change cursor on hover */
    font-size: 16px; /* Font size */
}

/* Style for the "Run Failover" button on hover */
.logout-button:hover {
    background-color: #eb0000; /* Darker green color on hover */
}
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.portdown-button {
    background-color: #FF0000; /* Green background color */
    color: white; /* Text color */
    padding: 5px 15px; /* Padding around the button text */
    box-sizing: border-box;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    cursor: pointer; /* Change cursor on hover */
    font-size: 16px; /* Font size */
}

/* Style for the "Run Failover" button on hover */
.portdown-button:hover {
    background-color: #a80505; /* Darker green color on hover */
}
.portup-button {
    background-color: #00FF00; /* Green background color */
    color: rgb(10, 10, 10); /* Text color */
    padding: 5px 15px; /* Padding around the button text */
    box-sizing: border-box;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    cursor: pointer; /* Change cursor on hover */
    font-size: 16px; /* Font size */
}

/* Style for the "Run Failover" button on hover */
.portup-button:hover {
    background-color: #2bd309; /* Darker green color on hover */
}
.autofail-button {
    background-color: #3d0066; /* Green background color */
    color: rgb(250, 247, 247); /* Text color */
    padding: 5px 15px; /* Padding around the button text */
    box-sizing: border-box;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    cursor: pointer; /* Change cursor on hover */
    font-size: 16px; /* Font size */
}

/* Style for the "Run Failover" button on hover */
.autofail-button:hover {
    background-color: #5c0099; /* Darker green color on hover */
}
.autoshift-button {
    background-color: #2d00f7; /* Green background color */
    color: rgb(251, 251, 252); /* Text color */
    padding: 5px 15px; /* Padding around the button text */
    box-sizing: border-box;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    cursor: pointer; /* Change cursor on hover */
    font-size: 16px; /* Font size */
}

/* Style for the "Run Failover" button on hover */
.autoshift-button:hover {
    background-color: #6a00f4; /* Darker green color on hover */
}
.submit1-button {
    background-color: #f50ed6; /* Green background color */
    color: white; /* Text color */
    padding: 5px 15px; /* Padding around the button text */
    box-sizing: border-box;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    cursor: pointer; /* Change cursor on hover */
    font-size: 16px; /* Font size */
}

/* Style for the "Run Failover" button on hover */
.submit1-button:hover {
    background-color: #ce04bd; /* Darker green color on hover */
}
.back-button {
    background-color: #1410fc; /* Green background color */
    color: white; /* Text color */
    padding: 5px 15px; /* Padding around the button text */
    box-sizing: border-box;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    cursor: pointer; /* Change cursor on hover */
    font-size: 16px; /* Font size */
}

/* Style for the "Run Failover" button on hover */
.back-button:hover {
    background-color: #0003b1; /* Darker green color on hover */
}
.led {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: gray;
    display: inline-block;
    border: 2px solid #fffcfc; /* Colored border */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    margin-right: 10px;
}

.led.green {
    background-color: #00FF00;
}

.led.red {
    background-color: #FF0000;
}

/* Style for the password input wrapper */
.password-wrapper {
    position: relative;
    width: 100%;
}

/* Style for the password input */
.login-form input[type="password"] {
    width: 100%;
    padding: 5px 5px 5px 10px;  /* Adjust padding for spacing */
    margin: 5px 0;
    box-sizing: border-box;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}

/* Style for the eye icon */
.eye-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

/* Wrapper to hold both forms side by side */
.button-wrapper {
    display: flex; /* Flexbox to make the forms side by side */
    position: center;
    justify-content: space-between; /* Ensures there's space between the forms */
    gap: 20px; /* Adds space between the buttons */
}

.script-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.script-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.script-button {
    padding: 10px 15px;
    font-size: 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    flex: 1; /* Equal width for all buttons */
}

.script-button:hover {
    background-color: #0056b3;
}
.link-up-button {
    background-color: #00FF00; /* Green background color */
    color: rgb(10, 10, 10); /* Text color */
    padding: 5px 15px; /* Padding around the button text */
    box-sizing: border-box;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    cursor: pointer; /* Change cursor on hover */
    font-size: 16px; /* Font size */
}
.link-up-button:hover {
    background-color: #0f4b03;
}
.link-down-button {
    background-color: #FF0000; /* Green background color */
    color: white; /* Text color */
    padding: 5px 15px; /* Padding around the button text */
    box-sizing: border-box;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    cursor: pointer; /* Change cursor on hover */
    font-size: 16px; /* Font size */
}
.link-down-button:hover {
    background-color: darkred;
}