/* General Styles */



body {



    font-family: 'Arial', sans-serif;



    margin: 0;



    padding: 0;



    background: #2c3e50; /* Gradient Background */



    color: #333;



    overflow-x: hidden; /* Prevent horizontal scroll */



}


div#step-7 button.next-step {
    width: 100%;
}
.add-smtp{



    background-color: #1abc9c;



    color: white;



    border: none;



    cursor: pointer;



padding: 10px;



    margin: 0 auto 20px auto;



    border: 1px solid #ced4da;



    border-radius: 4px;



    font-size: 14px;



    box-sizing: border-box;



text-decoration: none;



}



/* Flexbox Container for Layout */



.container {



    display: flex;



    width: 100%;  /* Full viewport width */



    margin: 0;



    padding: 0;



}



/* Welcome Message */



.welcome-message {



    margin: 20px;



    padding: 20px;



    background-color: #f4f4f4;



    border-radius: 5px;



    box-shadow: 0 0 10px rgba(0,0,0,0.1);



}







.welcome-message h3 {



    margin-bottom: 10px;



    color: #333;



}







.welcome-message p {



    font-size: 16px;



    color: #555;



}







/* Sidebar Styles */



.sidebar {



    width: 250px;               /* Fixed width */



    background: #2c3e50;        /* Dark background */



    color: white;



    padding: 20px;



    height: 100vh;              /* Full height of viewport */



    box-sizing: border-box;



    position: fixed;            /* Fixed to the left side */



    top: 0;                     /* Stick to the top */



    left: 0;   



 display: flex;



    flex-direction: column;



    justify-content: space-between;/* Stick to the left */



}







.sidebar h2 {



    color: #ecf0f1;



    margin-bottom: 20px;



    text-align: center;



}







.sidebar ul {



    list-style: none;



    padding: 0;



    margin: 0;



 flex-grow: 1;



}







.sidebar ul li {



    padding: 10px;



    margin: 10px 0;



    background: #34495e;



    cursor: pointer;



    text-align: center;



    border-radius: 5px;



    transition: all 0.3s ease;



}







.sidebar ul li:hover {



    background: #1abc9c;



}



.sidebar .logout-btn {



    padding: 10px 20px;



    background-color: #f44336;



    color: #fff;



    border: none;



    cursor: pointer;



    width: 100%;



    text-align: center;



    margin: 10px auto;



}







.sidebar .logout-btn:hover {



    background-color: #d32f2f;



}



/* Main Content Styles */



.main-content {



    margin-left: 250px; /* Matches the sidebar width */



    padding: 20px;



    background: #ecf0f1;



    min-height: 100vh;



    box-sizing: border-box;



    width: calc(100% - 250px); /* Take remaining width after sidebar */



}







.main-content h1 {



    color: #333;



    margin-bottom: 20px;



}







.main-content p {



    color: #555;



    margin-bottom: 20px;



}







/* Login Box Styles */



.login-box {



    background: white;



    border-radius: 10px;



    padding: 30px;



    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);



    width: 100%;



    max-width: 400px;



    text-align: center;



    margin: auto;



}







.login-box h1 {



    margin-bottom: 20px;



    color: #1abc9c;



}







.login-box input[type="text"],



.login-box input[type="password"] {



    width: 100%;



    padding: 10px;



    margin: 10px 0;



    border: 1px solid #1abc9c;



    border-radius: 5px;



    box-sizing: border-box;



}







.login-box button {



    width: 100%;



    padding: 10px;



    background: #1abc9c;



    border: none;



    border-radius: 5px;



    color: white;



    font-size: 16px;



    cursor: pointer;



    transition: background 0.3s;



}







.login-box button:hover {



    background: #25a087;



}







/* Button Styling */



button {



    padding: 10px 20px;



    background: #1abc9c;



    border: none;



    color: white;



    border-radius: 5px;



    cursor: pointer;



    transition: all 0.3s ease;



}







button:hover {



    background: #16a085;



}







/* Responsive Design for Small Screens */



@media (max-width: 768px) {



    .sidebar {



        position: relative;



        width: 100%;



        height: auto;



    }







    .main-content {



        margin-left: 0;



        width: 100%; /* Full width for small screens */



    }







    .container {



        flex-direction: column;



    }



}



/* Styling for the table */



.smtp-table, .users-table {



    width: 100%;



    border-collapse: collapse;



    margin: 20px 0;



    font-size: 16px;



    text-align: left;



    background-color: #f9f9f9;



    color: #333;



}







/* Table header styling */



.smtp-table thead, .users-table thead{



    background-color: #1abc9c;



    color: white;



}







.smtp-table th, .users-table th {



    padding: 12px;



    text-align: left;



    border: 1px solid #ddd;



}







/* Disable hover effect on thead rows */



.smtp-table thead tr:hover, .users-table tr:hover {



    background-color: inherit; /* Retain the original color */



}







/* Table body styling */



.smtp-table td, .users-table td {



    padding: 10px;



    border: 1px solid #ddd;



}







/* Alternate row background for better readability */



.smtp-table tr:nth-child(even), .users-table tr:nth-child(even) {



    background-color: #eafaf7;



}







/* Row hover effect for tbody rows */



.smtp-table tbody tr:hover, .users-table tbody tr:hover {



    background-color: #d6f5ee;



}







/* Link styling for the Delete action */



.smtp-table a, .users-table a{



    color: #e74c3c;



    text-decoration: none;



    font-weight: bold;



}



.smtp-table a:hover, .users-table a:hover {



    color: #c0392b;



    text-decoration: underline;



}



td.stts {



    text-transform: capitalize;



}

.campaingns-all {

    width: 100%;

    border-collapse: collapse;

    font-family: Arial, sans-serif;

font-size: 14px;

    overflow-x: auto;

    white-space: nowrap;

display: block;

}



.campaingns-all thead {

    background-color: #1abc9c;

    color: #fff;

}



.campaingns-all th, 

.campaingns-all td {

    padding: 10px;

    text-align: left;

    border: 1px solid #ddd;

}



.campaingns-all tbody tr:nth-child(odd) {

    background-color: #f9f9f9;

}



.campaingns-all tbody tr:nth-child(even) {

    background-color: #eafaf6;

}



.campaingns-all tbody tr:hover {

    background-color: #d7f7ee;

}



/* General button styling */

.campaingns-all a {

    display: inline-block;

    padding: 8px 12px;

    border-radius: 4px;

    color: #fff;

    font-size: 12px;

    font-weight: bold;

    text-align: center;

    text-decoration: none;

    transition: background-color 0.3s ease, transform 0.2s ease;

}



/* Pause button */

.campaingns-all a.pause {

    background-color: #f1c40f; /* Yellow */

}



.campaingns-all a.pause:hover {

    background-color: #d4ac0d;

    transform: scale(1.05);

}



/* Stop button */

.campaingns-all a.stop {

    background-color: #e74c3c; /* Red */

}



.campaingns-all a.stop:hover {

    background-color: #c0392b;

    transform: scale(1.05);

}



/* Delete button */

.campaingns-all a.delete {

    background-color: #8e44ad; /* Purple */

}



.campaingns-all a.delete:hover {

    background-color: #71368a;

    transform: scale(1.05);

}



/* Resume button */

.campaingns-all a.resume {

    background-color: #2ecc71; /* Green */

}



.campaingns-all a.resume:hover {

    background-color: #27ae60;

    transform: scale(1.05);

}



/* Restart button */

.campaingns-all a.restart {

    background-color: #3498db; /* Blue */

}



.campaingns-all a.restart:hover {

    background-color: #2980b9;

    transform: scale(1.05);

}



/* Edit button */

.campaingns-all a.edit {

    background-color: #16a085; /* Teal */

}



.campaingns-all a.edit:hover {

    background-color: #138d75;

    transform: scale(1.05);

}

.campaingns-all td {

    white-space: nowrap; /* Prevent wrapping of buttons */

}



.campaingns-all td a {

    margin-right: 5px; /* Add spacing between buttons */

    display: inline-block; /* Ensure buttons are inline */

}



/* Style for the add campaign */

.container.ssss {

    display: block !important;

height: auto;

}

.container.ssss h1 {

    color: #343a40;

    text-align: center;

    margin-bottom: 20px;

}

form#campaign-form{

 max-width: 500px;



    margin: 0 auto;



    background-color: #ffffff;



    padding: 20px;



    border-radius: 5px;



    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);



    box-sizing: border-box;

}

/* General Form Styling */

form#campaign-form {

    max-width: 500px;

    margin: 0 auto;

    background-color: #ffffff;

    padding: 20px;

    border-radius: 5px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    box-sizing: border-box;

}



/* Step Container for the individual steps */

form#campaign-form #step-container {

    padding: 15px;

}



/* Step Header */

form#campaign-form h2 {

    font-size: 18px;

    color: #343a40;

    margin-bottom: 10px;

}



/* Step 1: Select SMTP Account Styling */

form#campaign-form  select {

    width: 100%;

    padding: 10px;

    margin-bottom: 20px;

    border: 1px solid #ced4da;

    border-radius: 4px;

    font-size: 14px;

    box-sizing: border-box;

}



form#campaign-form  select:focus {

    border-color: #80bdff;

    outline: none;

    box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);

}



/* Button Styling */

button.next-step, button.back-step {

    width: 49%;

    padding: 10px;

    background-color: #1abc9c; /* Button Color */

    color: white;

    font-size: 14px;

    border: none;

    border-radius: 4px;

    cursor: pointer;

    transition: background-color 0.3s ease, transform 0.2s ease;

}



button.next-step:hover, button.back-step:hover {

    background-color: #397f71; /* Darker green for hover effect */

    transform: scale(1.05);

}



/* Responsive Adjustments */

@media (max-width: 600px) {

    form#campaign-form {

        padding: 15px;

    }



    form#campaign-form  select, form#campaign-form button {

        font-size: 12px;

    }

}

/* Step Header */

#step-4 h2 {

    font-size: 18px;

    color: #343a40;

    margin-bottom: 15px;

    text-align: center;

}



/* Label Styling */

#step-4 label, #step-7 label {

    font-weight: bold;

    color: #495057;

    display: block;

    margin-bottom: 8px;

}



/* Input Fields */

#step-4 input[type="text"], 

#step-4 input[type="email"], #step-7 input[type="number"] {

    width: 100%;

    padding: 10px;

    margin-bottom: 20px;

    border: 1px solid #ced4da;

    border-radius: 4px;

    font-size: 14px;

    box-sizing: border-box; /* Ensures padding is included in the width calculation */

}



#step-4 input[type="text"]:focus, 

#step-4 input[type="email"]:focus {

    border-color: #80bdff;

    outline: none;

    box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);

}



/* Next Button Styling */

#step-4 .next-step, #step-4 .back-step {

    width: 49%;

    padding: 10px;

    background-color: #1abc9c; /* Button Color */

    color: white;

    font-size: 14px;

    border: none;

    border-radius: 4px;

    cursor: pointer;

    transition: background-color 0.3s ease, transform 0.2s ease;

    text-align: center;

    margin-top: 15px;

}



#step-4 .next-step:hover, #step-4 .back-step:hover {

    background-color: #397f71; /* Darker green for hover effect */

    transform: scale(1.05);

}



/* Responsive Adjustments for Small Screens */

@media (max-width: 600px) {

    #step-4 input[type="text"], 

    #step-4 input[type="email"], 

    #step-4 .next-step, #step-4 .back-step {

        font-size: 12px;

    }

}

/* Step 5: Campaign Schedule Styling */

#step-5 {

    display: block;

    padding: 20px;

}



/* Heading for Step 5 */

#step-5 h2, #step-6 h2 {

    color: #343a40;

    text-align: center;

    margin-bottom: 20px;

}



/* Styling for Schedule Name Input */

#step-5 label[for="schedule_name"] {

    font-weight: bold;

    color: #495057;

    display: block;

    font-size: 15px;

    margin-bottom: 8px;

text-align: center;

    width: 100%;

}



#step-5 input[name="schedule_name"] {

    width: 100%; /* Full width input */

    padding: 10px;

    font-size: 14px;

    margin-bottom: 20px;

    border: 1px solid #ced4da;

    border-radius: 4px;

    box-sizing: border-box;

}



/* Day Row Layout */

.day-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 10px;

}



/* Styling for Day Checkbox */

.day-row input[type="checkbox"] {

    margin-right: 10px;

}



/* Timepicker Inputs for Each Day */

.day-row input[type="text"] {

    width: 100px;

    padding: 8px;

    font-size: 14px;

    margin-right: 10px;

    border: 1px solid #ced4da;

    border-radius: 4px;

}



/* Wrap day-row if needed */

.day-row input[type="text"]:last-child {

    margin-right: 0;

}



/* Responsive Layout for Small Screens */

@media (max-width: 600px) {

    .day-row {

        flex-direction: column;

        align-items: flex-start;

    }



    .day-row input[type="text"] {

        width: auto;

        margin-bottom: 10px;

    }



    .day-row input[type="checkbox"] {

        margin-bottom: 10px;

    }

}



/* Button Styling */

#step-5 button.next-step, #step-5 button.back-step {

    background-color: #1abc9c; /* Button color */

    color: white;

    border: none;

    padding: 10px 20px;

    font-size: 14px;

    cursor: pointer;

    border-radius: 4px;

    display: block;

    margin: 20px auto 0;

width: 49%;

    display: inline-block;

}



/* Hover Effect for Next Button */

#step-5 button.next-step:hover, #step-5 button.back-step:hover {

    background-color: #397f71; /* Hover color */

}

/* Step 6: Campaign Deadline */

#step-6 {

    display: block;

    padding: 20px;

}



/* Heading for Step 6 */

#step-6 label[for="campaign_deadline"] {

    font-weight: bold;

    color: #495057;

    display: block;

    margin-bottom: 8px;

}



/* Deadline Input */

#step-6 input[type="datetime-local"] {

    width: 100%; /* Full-width input */

    padding: 10px;

    font-size: 14px;

    margin-bottom: 20px;

    border: 1px solid #ced4da;

    border-radius: 4px;

    box-sizing: border-box;

}



/* Button Styling */

#step-6 button[type="submit"] {

    background-color: #df2f2f; /* Button color */

    color: white;

    border: none;

    padding: 10px 20px;

    font-size: 14px;

    cursor: pointer;

    border-radius: 4px;

    display: inline-block;

    margin: 0;
width:49%;


}



/* Hover Effect for Submit Button */

#step-6 button[type="submit"]:hover {

    background-color: #397f71; /* Darker button color on hover */

}

div#step-1 button.next-step {

   // width: 100%;

}

div#step-7 button {

    width: 49%;

}

button.addcmpg{

background: #e60000;

}