/* styles.css */
header {
    background-color: #343a40; /* Dark background for header */
    color: white;
    padding: 15px 0;
}

footer {
    background-color: #343a40; /* Dark background for footer */
    color: white;
}

.navbar-light .navbar-nav .nav-link {
    color: #555;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #007bff;
}

.btn-outline-light {
    color: white;
    border-color: white;
}

.btn-outline-light:hover {
    background-color: white;
    color: #343a40;
}

/* Remove borders and padding from the list group */
.list-group {
    border: none;
    padding: 0;
    margin: 0;
}

/* Remove borders and background from list items */
.list-group-item {
    border: none;
    background: none;
    padding: 5px 0;
}

/* Adjust the toggle icon spacing */
.toggle-folder {
    margin-right: 5px;
}

/* Style links to look clean */
.list-group-item a {
    text-decoration: none;
    color: #007bff; /* Bootstrap primary color */
}

.list-group-item a:hover {
    text-decoration: underline;
}

/* Remove indentation for nested lists */
.list-group.ms-3 {
    margin-left: 0;
    padding-left: 15px;
}

/* Remove underline from folder links */
.list-group-item a {
    text-decoration: none; /* No underline */
    color: inherit; /* Keep the default color */
}

/* Ensure no underline on hover */
.list-group-item a:hover {
    text-decoration: none; /* No underline on hover */
}

/* Position the security level number inside the folder icon */
.folder-icon-wrapper {
    position: relative;
    display: inline-block;
}

/* Folder icon colors based on security level */
.folder-icon {
    font-size: 1.5em; /* Increase the size of the icon */
    margin-top: 3px; 
}

.folder-icon.folder-level-5 {
    color: rgb(227, 7, 7); /* Security level 5: Red */
}
.folder-icon.folder-level-4 {
    color: orange; /* Security level 4: Orange */
}
.folder-icon.folder-level-3 {
    color: darkblue; /* Security level 3: Yellow */
}
.folder-icon.folder-level-2 {
    color: lightblue; /* Security level 2: Blue */
}
.folder-icon.folder-level-1 {
    color: black; /* Security level 1: Black */
}

/* Folder security level text colors based on security level */
.folder-security-level.folder-level-text-5 {
    color: white; /* Security level 5: White text */
}
.folder-security-level.folder-level-text-4 {
    color: black; /* Security level 4: Black text */
}
.folder-security-level.folder-level-text-3 {
    color: white; /* Security level 3: Black text */
}
.folder-security-level.folder-level-text-2 {
    color: white; /* Security level 2: White text */
}
.folder-security-level.folder-level-text-1 {
    color: white; /* Security level 1: White text */
}

/* Position the security level number inside the folder icon */
.folder-security-level {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-120%, 55%);
    font-size: 0.6rem; /* Adjust font size to fit inside the icon */
    font-weight: bold; /* Make the number bold */
    
}

/* Folder name colors based on security level */
.folder-name.folder-level-text-5 {
    color: red; /* Security level 5: Red */
}
.folder-name.folder-level-text-4 {
    color: orange; /* Security level 4: Orange */
}
.folder-name.folder-level-text-3 {
    color: darkblue; /* Security level 3: Dark Blue */
}
.folder-name.folder-level-text-2 {
    color: lightblue; /* Security level 2: Light Blue */
}
.folder-name.folder-level-text-1 {
    color: black; /* Security level 1: Black */
}

/* Folder count colors based on security level */
.folder-count.folder-level-text-5 {
    color: red !important; /* Security level 5: Red */
}
.folder-count.folder-level-text-4 {
    color: orange !important; /* Security level 4: Orange */
}
.folder-count.folder-level-text-3 {
    color: darkblue !important; /* Security level 3: Dark Blue */
}
.folder-count.folder-level-text-2 {
    color: lightblue !important; /* Security level 2: Light Blue */
}
.folder-count.folder-level-text-1 {
    color: black !important; /* Security level 1: Black */
}

/* Position the security level number inside the file icon */
.file-icon-wrapper {
    position: relative;
    display: inline-block;
}

/* File icon colors based on security level */
.file-icon {
    font-size: 1.2em; /* Increase the size of the icon */
}

/* Security level text colors based on security level */
.file-security-level.file-level-text-5 {
    color: white; /* Security level 5: White text */
}
.file-security-level.file-level-text-4 {
    color: black; /* Security level 4: Black text */
}
.file-security-level.file-level-text-3 {
    color: white; /* Security level 3: White text */
}
.file-security-level.file-level-text-2 {
    color: white; /* Security level 2: White text */
}
.file-security-level.file-level-text-1 {
    color: white; /* Security level 1: White text */
}

/* Position the security level number inside the file icon */
.folder-security-level {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-90%, 37%);
    font-size: 0.9rem;
    font-weight: bold;
}

/* File icon and name colors based on security level */
.file-icon.file-level-5,
.file-name.file-level-5 {
    color: rgb(227, 7, 7); /* Security level 5: Red */
}

.file-icon.file-level-4,
.file-name.file-level-4 {
    color: orange; /* Security level 4: Orange */
}

.file-icon.file-level-3,
.file-name.file-level-3 {
    color: darkblue; /* Security level 3: Dark Blue */
}

.file-icon.file-level-2,
.file-name.file-level-2 {
    color: lightblue; /* Security level 2: Light Blue */
}

.file-icon.file-level-1,
.file-name.file-level-1 {
    color: black; /* Security level 1: Black */
}

/* Style for selected folder row */
.selected-folder {
    font-size: 1.1em; /* Slightly larger font size */
    font-weight: bold; /* Make the text bold */
    color: darkblue !important; /* White text color */
    background-color: rgb(231, 241, 255); /* Light blue background */
    padding: 10px; /* Add padding for better visibility */
    border-radius: 0px; /* Square corners (no rounding) */
}

/* Style for selected folder counts */
.selected-folder-count {
    font-weight: bold; /* Make counts bold */
    color: blue; /* Green color for counts */
}

/* Position the security level number inside the file icon */
.file-icon-wrapper {
    position: relative; /* Ensure relative positioning for child elements */
    display: inline-flex; /* Align icon and text */
    align-items: center; /* Vertically align items */
}

.file-icon {
    font-size: 1.5em; /* Adjust size of the file icon */
    color: orange; /* Example color for file icon */
}

.file-security-level {
    position: absolute; /* Position relative to the file icon */
    top: 50%; /* Vertically center the text */
    left: 50%; /* Horizontally center the text */
    transform: translate(-65%, -40%); /* Adjust for perfect centering */
    font-size: 0.9em; /* Adjust font size */
    font-weight: bold; /* Make the text bold */
    color: black; /* Ensure the text is visible */
}

/* Payment Page Styles */
.payment-page { min-height: 100vh; background: #e3f2fd; }
.payment-details-card { box-shadow: 0 4px 24px #00336622; border-radius: 18px; background: #fff; min-height: 540px; }
.payment-card-form { box-shadow: 0 4px 24px #00336622; border-radius: 18px; min-height: 540px; }
@media (max-width: 991px) {
    .payment-details-card { padding: 32px 12px 24px 12px !important; }
    .payment-card-form { padding: 32px 12px 24px 12px !important; }
}
@media (max-width: 767px) {
    .payment-details-card, .payment-card-form { min-height: unset !important; }
    .payment-page { padding: 0 !important; }
    .row.no-gutters { flex-direction: column; }
    .d-none.d-md-block { display: none !important; }
}
.form-label { font-size: 1.1rem; }
input.form-control { font-size: 1.2rem; border-radius: 6px; border: 1px solid #063366; }
.btn-success { background: #438f29; border: none; }
.btn-success:hover { background: #2e6b1a; }
.response-success { color: #438f29; }
.response-error { color: #990000; }




.payment-page { min-height: 100vh; background: #e3f2fd; }
.payment-details-card { box-shadow: 0 4px 24px #00336622; border-radius: 18px; background: #fff; min-height: 540px; }
.payment-card-form { box-shadow: 0 4px 24px #00336622; border-radius: 18px; min-height: 540px; }
@media (max-width: 991px) {
    .payment-details-card { padding: 32px 12px 24px 12px !important; }
    .payment-card-form { padding: 32px 12px 24px 12px !important; }
}
@media (max-width: 767px) {
    .payment-details-card, .payment-card-form { min-height: unset !important; }
    .payment-page { padding: 0 !important; }
    .row.no-gutters { flex-direction: column; }
    .d-none.d-md-block { display: none !important; }
}
.form-label { font-size: 1.1rem; }
input.form-control { font-size: 1.2rem; border-radius: 6px; border: 1px solid #063366; }
.btn-success { background: #438f29; border: none; }
.btn-success:hover { background: #2e6b1a; }
.response-success { color: #438f29; }
.response-error { color: #990000; }