.sidebar {
    color: white;
    width: 300px;
    height: 100%;
    min-height:700px;
}

.checkmark::before {
    content: "✓";
    color: green;
}
/*.nav-item {
    transition: background-color 0.3s ease;
}

    .nav-item:hover {
        background-color: rgba(128, 128, 128, 0.8);
        Gray with 80% opacity transition: background-color 0.3s ease;
    }*/

    /*.nav-link {
        color: lavender;
        cursor: pointer;
    }*/

    /*.nav-link.active {
        background-color: #7f90a2a6;
        color: white;
    }*/
.submenu-open {
    max-height: 500px;
    overflow: hidden;
    background-color:transparent;
}

.submenu-closed {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.1s ease-out;
}

.submenu-icon {
    float: right;
}
.directory-name, .file-button {
    cursor: pointer;
    transition: color 0.3s ease;
}

    .directory-name:hover, .file-button:hover {
        color: #007bff; 
    }

.directory-level-0 {
    text-align: left;
}

.directory-level-1 {
    text-align: center;
}

.directory-level-2, .directory-level-3, .directory-level-4  {
    text-align: left; 
}
.folder-entry, .file-entry {
    cursor: pointer;
    transition: color 0.3s ease;
}

    .folder-entry:hover, .file-entry:hover {
        color: #007bff;
    }
.header {
    display: flex;
    justify-content: center;
}

table {
    font-size:14px;
}


.table-container {
    overflow-x: auto;
}


.form-control {
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    margin: 2px;
    display: block;
    display: table-cell;
    border: none;
    padding: 20px;
}

.centered-text h5 {
    text-align: center;
    color: dodgerblue; /* Dark gray for a subtle, professional look */
    font-size: 18px; /* Slightly larger to stand out */
    font-weight: 600; /* Medium to bold weight for emphasis */
    letter-spacing: 0.5px; /* Subtle spacing for a more open, airy feel */
    text-transform: uppercase; /* Capitalization for a more formal presentation */ 
    text-shadow: 1px 1px 0px #fff; /* Soft white shadow for depth (subtle, can be adjusted or removed) */
}


.lable-text {
    display: block;
    margin-bottom: 5px;
    color: #585858; /* Medium gray for label text */
    font-size: 14px; /* Slightly smaller font size for labels */
}
label  {
    margin-bottom: 5px;
    color: #585858; /* Medium gray for label text */
    font-size: 14px; /* Slightly smaller font size for labels */
}

.input-lable input {
    display: block;
    padding: 5px;
    border-radius: 2px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    font-size: 14px;
}
    .input-lable:focus {
        outline: none;
        border-color: #a9a9a9;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(169, 169, 169, 0.6);
    }
input {
    display: block;
    padding: 3px;
    border-radius: 2px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    font-size: 14px;
}
    input:disabled {
        background-color: #F5F5F5;
        color: #666;
    }

input:focus {
    outline: none;
    border-color: #a9a9a9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(169, 169, 169, 0.6);
}
   
.btn-primary {
    background-color: #0779e4;
    border-color: #0779e4;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
    padding: 8px 12px; /* Reduced button padding for a smaller button */
    font-size: 14px; /* Slightly smaller font size for button text */
}

    .btn-primary:hover {
        background-color: #0056b3;
        border-color: #0046a3;
    }
.form-element {
    margin-left: 20px;
    text-align: center;
    display:ruby;
}
.margin-bottom {
    margin-bottom: 15px; /* Reduced margin for tighter form layout */
}
.tableStyle {
    width: 100%;
    border-collapse: separate; /* Change to 'separate' to handle rounded corners */
    border-spacing: 0; /* Remove cell spacing */
    font-family: Arial;
    color: #333;
    box-shadow: 0 0 15px rgba(0,0,0,0.1); /* Shadow effect: horizontal offset, vertical offset, blur radius, color */
    overflow: hidden; /* Ensures the inner content doesn't overflow the rounded corners */
    
}

    .tableStyle td, .tableStyle th {
        border: 1px solid #ddd; /* Light gray border for each cell */
        font-size: small;
        text-align: center;
        padding: 5px;
    }

    .tableStyle th {
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: center;
        background-color: #FAFAFA; /* Light gray background for headers */
    }

.row-class:hover {
    background-color: #e8e8e8; /* Example hover effect */
}

.header-class {
    font-size:50px;
    font-weight: bolder;
    color: cornflowerblue;
}

.search-input {
    border-color: lightgray;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    padding: 4px;
    background: lightgray;
    border: 1px solid lightgrey;
    min-width: 300px;
}
.form-input{
    margin-top:20px;
}
.search-button {
    background: bottom;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: cornflowerblue;
    cursor: pointer;
    font-size: 16px;
    padding: 5px 10px;
    transition: background 0.3s, box-shadow 0.3s;
    border: 1px solid lightgray;
}


    .search-button:hover {
        background: linear-gradient(145deg, #e0e0e0, #d0d0d0);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .search-button:focus {
        outline: none;
        box-shadow: 0 0 0 2px #007BFF; /* Change the color to match your theme */
    }

.hidden-link:hover {
    text-decoration: underline;
    text-decoration-color: blue;
    text-decoration-style: solid;
    color:blue;
}
.file-upload {
    position: relative;
    display: inline-block;
}

.file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.file-button {
    /* Style your button as needed */
}
.inputTable {
    border: 1px solid lightgray;
}
    .inputTable.notValid {
        color: gray;
        
    }
.form-check-input {
    margin-right: 10%;
}

.stepper {
    counter-reset: step;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    display:flex;
}

.stepper li {
    list-style-type: none;
    width: 33%;
    position: relative;
    text-align: center;
    cursor: pointer;
}

    .stepper li span {
        display: block;
        width: 30px;
        height: 30px;
        margin: 0 auto;
        border-radius: 50%;
        background-color: #f7f7f7;
        color: #333;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        transition: all 0.4s ease;
        margin-bottom: 15%;
        position: relative;
    }

/* New class for the blinking red circle */
.blinking-circle:before {
    content: '';
    position: absolute;
    top: -7px;
    left: -7px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #ff0000; /* Red outer circle */
    animation: blink 1s infinite; /* Blinking animation */
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.stepper li:before {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: #ddd;
    z-index: -1;
}

.stepper li.before-active:before,
.stepper li.active:before,
.stepper li.before-active + li:before {
    background-color: #007bff;
}

.stepper li.before-active span,
.stepper li.active span {
    background-color: #007bff;
    color: white;
    transform: scale(1.1);
}

.stepper li:first-child:before {
    content: none;
}




/* Navigation button styles unchanged */
.navigation-buttons .btn {
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease;
}

    .navigation-buttons .btn:hover {
        background-color: #0056b3;
    }

    .navigation-buttons .btn i {
        margin-right: 5px;
    }
}
.form-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

    .form-row label {
        flex: 0 1 auto;
        margin-right: 10px;
    }

    .form-row div {
        flex: 1 1 100%;
    }

    .form-row textarea {
        width: 100%;
        box-sizing: border-box;
        border-color: lightgray;
    }

    .form-row textarea {
        width: 100%;
        box-sizing: border-box;
        border-color: lightgray;
    }

        .form-row textarea:focus {
            outline: none;
            border-color: #a9a9a9;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(169, 169, 169, 0.6);
        }
select {
    display: block;
    padding: 5px;
    margin-bottom: 15px;
    border-radius: 2px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    font-size: 14px;
}
    select:focus {
        outline: none;
        border:1px solid #a9a9a9;
    }
.error-container {
    margin-inline: auto;
    max-width: 550px;
    background-color: currentcolor; /* light red background similar to the image */
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* subtle shadow */
}

.title-message {
    color: #333; /* dark grey color for the text */
    font-size: 16px;
    margin: 10px 0;
}

.text-message {
    color: #666; /* light grey color for the paragraph */
    font-size: 14px;
}
.icon {
    color: white; /* darker red for the icon */
    font-size: x-large;
    margin-top: 1%;
}

.message {
    background-color: #fff; /* white background for the message area */
    padding: 2%;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.select-multiple {
    display: -webkit-inline-box;
}
.select-multiple-label {
    display: flow;
    align-items: center;
    justify-content: space-between;
    margin: 2px;
    padding: 3px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    width: fit-content;
    font-size: smaller;
    height: fit-content;
}

.select-multiple-label-button {
    font-size: 14px;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.RequiredField {
    color: red;
    font-weight: 700;
}
.alert-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.validation-message {
    color: red;
    font-size: 0.9em;
}
.alert-popup-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.alert-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alert-popup-body {
    margin-top: 10px;
    display:grid;
}
.btn-disabled {
    background-color: gray;
    cursor: not-allowed;
    opacity: 0.25
}
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}
.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%
}

.loader {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
    border-width: 3px 2px 3px 2px;
    border-style: solid dotted solid dotted;
    border-color: cornflowerblue rgba(255, 255, 255,0.3) #fff rgba(151, 107, 93, 0.3);
    border-radius: 50%;
    box-sizing: border-box;
    animation: 1s rotate linear infinite;
}

    .loader:before, .loader:after {
        content: '';
        top: 0;
        left: 0;
        position: absolute;
        border: 10px solid transparent;
        border-bottom-color: #fff;
        transform: translate(-10px, 19px) rotate(-35deg);
    }

    .loader:after {
        border-color: cornflowerblue #0000 #0000 #0000;
        transform: translate(32px, 3px) rotate(-35deg);
    }

@keyframes rotate {
    100% {
        transform: rotate(360deg)
    }
}

.inputs-space{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

/* Unified Loading Spinner */
.loading-spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    z-index: 9999;
}

.loading-spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.loading-spinner {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid #f3f3f3;
    border-top: 0.25rem solid #0d6efd;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}