.portal-name,
.tablink,
.tabcontent h2,
.error-text,
.dark-mode-text {
    font-family: Arial, sans-serif; /* Add font-family rule */
}

/* Add dark mode styles */
body.dark-mode {
    /* Update background image for dark mode */
    background-image: url('https://i.imgur.com/BipsyqW.png');
    /* Add other dark mode styles here */
}

/* Add dark mode styles for error messages */
body.dark-mode .error-text {
    color: #fff;
}

/* Update the background image for dark mode */
body.dark-mode .login-container {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Dark mode styles for the login button */
body.dark-mode .login-container button[type="submit"] {
    background-color: rgba(0, 0, 0, 0.8); /* Change the background color */
    color: #fff; /* Change the text color to white */
    border-radius: 5px; /* Add border-radius to make the button border rounded */
}

/* Dark mode styles for the login button on hover */
body.dark-mode .login-container button[type="submit"]:hover {
    background-color: rgba(30, 30, 30, 0.5); /* Change the background color on hover */
    /* Add any other hover effects as needed */
}

body.dark-mode .portal-name {
    background-color: rgba(0, 0, 0, 0.8); /* Change the background color to a darker shade */
    color: #fff; /* Change the text color to white */
}

body.dark-mode .tablink {
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
}

/* Change text color for tab content in dark mode */
body.dark-mode .tabcontent h2 {
    color: #fff; /* Change text color to white */
}

body.dark-mode .dark-mode-text {
    color: #fff;
}

/* Media query for phones in portrait orientation in dark mode */
@media screen and (max-width: 768px) and (orientation: portrait) {
    body.dark-mode {
        background-image: url('https://i.imgur.com/Ts3juvZ.png');
        /* Adjust other background properties as needed */
    }
}

.switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 34px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 50%;
    }

    input:checked + .slider {
        background-color: #2196F3;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }
    
   .dark-mode-text {
        position: relative; /* Change position to relative */
        vertical-align: middle;
        top: 6px;
    }

/* Add more dark mode styles as needed */


.login-container {
    width: 90%; /* Adjusted width to fit various screen sizes */
    max-width: 400px; /* Added max-width to prevent stretching on larger screens */
    margin: 100px auto; /* Adjusted top margin for centering */
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.logo-container {
    text-align: center;
    margin-bottom: 20px; /* Added margin to separate from the login form */
}

.logo {
    width: 250px; /* Adjusted width of the logo */
    height: auto;
    position: relative; /* Change position to relative */
    top: 80px; /* Adjust the top position as needed */
}

.portal-name {
    font-size: 24px;
    color: #333;
    text-align: center;
    position: relative;
    top: 80px;
    background-color: rgba(255, 255, 255, 0.8); /* White translucent background */
    padding: 5px; /* Reduced padding */
    border-radius: 5px; /* Reduced border-radius */
    width: 16%;
    margin: 0 auto;
}

.tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px; /* Added margin to separate from the login form */
}

.tablink {
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    padding: 10px 20px;
    border-radius: 15px;
    cursor: pointer;
    margin: 0 5px;
    font-family: Arial, sans-serif; /* Add font-family rule */
}

.tabcontent {
    display: none; /* Hide tab content by default */
}

.tabcontent h2 {
    margin-bottom: 10px;
}

button[type="submit"] {
    margin-top: 10px;
}