Packet-Fence/admin/css/accessduration.css

/* accessduration.css */
:root {
    --background-color: linear-gradient(to bottom, #25476a 30%, #eef2f6 30%) ;
    --text-color: #25476a ;
    --nav-background: #ffffff;
    --sidebar-background: #ffffff;
    --link-color: #03080c;
    --hover-background: #2980b9 ;
    --submenu-background: #ecf0f1;
    --highlight-color: #e74c3c;
    --border-color: #dfe4ea;
    --notification-badge-color: #e74c3c;
    --hover-image: url('../images/');
    --button-color:#25476a ;
    --user-container:#ffffff;
    --table-head: #d7d9e6;
    --table-border:#25476a;
    --box-shadow:rgb(37, 71, 106);
  }
  
  /* Dark mode styles */
  .dark-theme-variables {
    --background-color: linear-gradient(to bottom, #213343 30%, rgba(33, 51, 67,0.7) 30%);
    --text-color: #ffffff;
    --nav-background: #073a82;
    --sidebar-background: #2b3f51;
    --link-color: #ffffff;
    --hover-background: #475f73;
    --submenu-background: #353b48;
    --highlight-color: #e1b12c;
    --border-color: #404552;
    --notification-badge-color: #e84118;
    --user-container:linear-gradient(to bottom, #636f7b 40%, #213343 90%);
    --table-head:#293c4d;
    --button-color:#213343;
    --table-border:#213343;
    --box-shadow:rgba(255, 255, 255, 0.842);
  }
  
  
/* Overall layout adjustments to match the master page */
body {
    background: var(--background-color);
    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
    margin: 0;
    padding: 0;
}

/* User table container for Access Duration page */
.usertable {
    background: var(--sidebar-background);
    padding: 2rem;
    margin-left: 19rem; /* Aligns with the fixed sidebar from master page */
    margin-top: 10rem; /* Space below the fixed navbar */
    border-radius: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 70%;
}

.heading {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-color);
    text-align: center;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 1rem;
}

/* Access Duration Choices Button */
form {
    display: flex;
    flex-direction: column; /* Aligns form elements in a column */
}

.form{
    display: flex;
    flex-wrap: wrap;
    width: 38rem;
    gap: 1rem;
}
/* Align label and button in the same line */
.form-group {
    display: flex;
    align-items: center;
    margin-bottom: 1rem; /* Space between each form group */
}

.form-group label {
    margin-right: 1rem; /* Space between label and button */
}

/* Align dropdown with its label */
.form-group select {
    flex-grow: 1; /* Allows dropdown to fill remaining space */
}

/* Save and Reset Buttons */
.form-actions {
    display: flex;
    justify-content: flex-start; /* Align buttons to the left */
    margin-top: 2rem;
    gap: 1rem; /* Space between the buttons */
}


.input{
      border-radius: 0.6rem;
      background-color: #fcfcfc;
      height: 3rem;
      width: 23rem;
}

input .input{
    border: 1px solid #034dae;
}
/* Additional styling for .sb_btn class */
.sb_btn {
    background: transparent;
    color: #000000;
    border:2px solid var(--button-color);
    padding: 10px 20px;
    width: 15rem;
    height: 3rem;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}
.buttons{
    display: flex;
}
.save_button{
    margin-top: 2rem;
    width: 7rem;
    height: 2rem;
    background-color: var(--text-color);
    color: #ffffff;
    border-radius: 0.5rem;
    border: none;
    transition: background-color 0.3s ease;
}
.reset_button{
    margin-top: 2rem;
    margin-left: 2rem;
    width: 7rem;
    height: 2rem;
    background-color: var(--text-color);
    color: #ffffff;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
    border: none;
}

.sb_btn:hover {
    background-color: var(--hover-background);
}

/* Adjusting the width and height of Access Duration Choices section */
.col-40 {
    width: 30rem; /* Adjust width as per your preference */
    height: auto; /* Adjust height if needed */
    display: flex; /* Make it flexible for better alignment */
    gap: 2rem; /* Add spacing between input and select elements */
    margin-bottom: 1rem;
}

.col-40 input[type="number"], 
.col-40 select {
    height: 2.5rem; /* Adjust height to make them consistent */
    border: 1.8px solid rgb(7, 62, 151);
    border-radius: 0.5rem;
    padding: 0.5rem;
    width: 18rem;
}

/* You can also target the label section if needed */
.col-10 label {
    font-size: 1.1rem; /* Adjust label size if required */
    color: var(--button-color);
    font-weight: bold;
}

.col-10{
    margin-bottom: 1rem; /* Add spacing below label */
}

img{
    display: block;
}
img.plus{
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    margin-bottom:0.1rem;
    padding: 0;
}
img.minus{
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

img.plus:hover{
    content: url(../images/add_hover.png);
}
img.minus:hover{
    content: url(../images/minus_hover.png);
}

/* Responsive design adjustments */
@media (max-width: 768px) {
    .usertable {
        width: 100%;
        margin-left: 0;
        padding: 1.5rem;
    }

    .form-actions {
        flex-direction: column;
        gap: 1rem;
    }
}

.input{
    width: 10rem;
    height: 2rem;
    margin-bottom: 1rem;
    border: 1px solid #034dae;
}