@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800|Roboto:100,300,400,500,700,900|Roboto+Mono:100,200,300,400,500,600,700|Noto+Sans+Symbols:100,200,300,400,500,600,700,800,900|Share+Tech+Mono:400');

@import url('https://fonts.googleapis.com/css?family=Armata:400|Rajdhani:300,400,500,600,700|Poppins:100,200,300,400,500,600,700,800,900|Saira:100,200,300,400,500,600,700,800,900|Jura:300,400,500,600,700|Monda:400,700');

:root {
    --border-color: #fff;
    --active-background-gradient: linear-gradient(180deg, rgba(33,150,243,1) 0%, rgba(33,150,243,0.75) 75%, rgba(0,0,0,0) 100%);
    --linear-background-gradient: linear-gradient(180deg, rgba(166,166,166,0.75) 0%, rgba(166,166,166,0.75) 75%, rgba(0,0,0,0) 100%);
    --inactive-color: #BABABA;
    --active-color: #2196F3;
    --active-rgba-color: rgba(33,150,243,1);
    --toggled-rgba-color: rgba(33,150,243,0.45);
    --text-color: #222222;
    --active-text-color: #FFF;
    --select-border: #777;
    --select-focus: blue;
    --select-arrow: var(--select-border);
    --toolbar-width: 3.5vw;
    --toolbar-height: 16vw;
    --light-text-weight: 300;
    --heavy-text-weight: 800;
    --normal-text-weight: 400;
    --ui-container-radial-gradient: radial-gradient(circle, rgba(221,221,221,1) 0%, rgba(216,216,216,1) 55%, rgba(136,136,136,1) 100%);
    /* --ui-item-active-border-color: var(--active-rgba-color); */
    --ui-item-active-border-color: #FFFFFF;
    --ui-item-active-background-color: midnightblue;
    --ui-item-active-foreground-color: midnightblue;
    --ui-item-dark-active-border-color: #CCCCCC;
    --ui-item-dark-active-background-color: rgba(0,0,0,0.30);
    --ui-item-dark-active-foreground-color: #CCCCCC;
    --ui-item-hover-border-color: #EEEEEE;
    --ui-item-hover-background-color: rgba(0,0,0,0.60);
    --ui-item-hover-foreground-color: #EEEEEE;
    --ui-item-inactive-border-color: #9D9D9D;
    --ui-item-inactive-background-color: rgba(0,0,0,0.25);
    --ui-item-inactive-foreground-color: #9D9D9D;
    --ui-item-pressed-border-color: #2196F3; /* #CCCCCC; */
    --ui-item-pressed-background-color: rgba(0,0,0,0.75);
    --ui-item-pressed-foreground-color: #2196F3; /* #CCCCCC; */
    /* Label Text */
    --label-large-text: 1.7em;
    --label-medium-text: 1em;
    --label-small-text: 0.6em;
    /* Label Icons */
    --label-large-icon: 80%;
    --label-medium-icon: 60%;
    --label-small-icon: 40%;
    /* All label filters assume the label is black to start */
    --label-active-filter: invert(100%);
    --label-hover-filter: invert(88%);
    --label-inactive-filter: invert(70%);
    --label-pressed-filter: invert(52%) sepia(51%) saturate(5307%) hue-rotate(189deg) brightness(104%) contrast(91%); /* #2196F3 (bright cobalt blue) */
    /* All icon filters assume the icon is black to start */
    --icon-active-filter: invert(100%);
    --icon-hover-filter: invert(88%);
    --icon-inactive-filter: invert(65%);
    --icon-pressed-filter: invert(52%) sepia(51%) saturate(5307%) hue-rotate(189deg) brightness(104%) contrast(91%); /* #2196F3 (bright cobalt blue) */
}


.pagebackgroundstyle {
    /* background: rgb(221,221,221); */
    background: var(--ui-container-radial-gradient);
    sfont-family: 'Open Sans', sans-serif;
    sfont-family: 'Roboto', sans-serif;
    sfont-weight: var(--heavy-text-weight);
}

.pagestyle {
    sfont-family: 'Open Sans', sans-serif;
    font-family: 'Poppins', sans-serif;
    font-weight: var(--light-text-weight);
}

.activeitem:hover {
    border-width: 0.125em;
    border-style: solid;
    border-color: var(--ui-item-active-border-color);
    background-color: var(--ui-item-active-hover-background-color);
}

.activeitem:active {
    background-color: var(--ui-item-active-pressed-background-color);
}



.standardcontainerstyle {
    background-color: var(--ui-item-inactive-background-color);
    /* Adding font color and weight here so that divs show up */
    /* in a uniform fashion as long as they are given this */
    /* class. */
    color: var(--ui-item-dark-active-foreground-color);
    font-size: 1.15em;
    sfont-family: 'Open Sans', sans-serif;
    font-family: 'Poppins', sans-serif;
}

.activecontainerstyle {
    background-color: var(--ui-item-active-background-color);
}



.inactivebackgroundstyle {
    background-color: var(--ui-item-inactive-background-color);
}

.inactiveiconstyle {
    filter: var(--icon-inactive-filter);
}

.activebackgroundstyle {
    background-color: var(--ui-item-active-background-color);
}

.activeiconstyle {
    filter: var(--icon-active-filter);
}

.pressedbackgroundstyle {
    background-color: var(--ui-item-active-pressed-background-color);
}

hoverbackgroundstyle:hover {
    border-width: 0.125em;
    border-style: solid;
    border-color: var(--ui-item-active-border-color);
    background-color: var(--ui-item-active-hover-background-color);
}

.standardiconlayout {
    /* background: transparent; */
    /* background: red; */
    background-repeat: no-repeat;
    background-position: center;
    /*background-size: var(--label-medium-icon);*/
    background-size: 80% 60%;
    /* padding: 0.0em 0.0em 0.5em 0.0em; */
    /* margin: 0.5em 0.65em 0.5em 0em; */
    /* margin: 0em 0.65em 0em 0.65em; */
    /*    margin: 0em auto; */
    /* overflow: scroll; */
    /* white-space: nowrap; */
    /* color: white; */
    /* font-weight: 500; */
    text-align: center;
}


.squareareainterior {
    background-image: url("squareblack.svg");
}



/* Re-styling Bootstrap */

label {
    sfont-weight: bold; /* Bold label text */
    sfont-size: 1.1em;
}


.form-control {
    background-color: var(--ui-item-dark-active-background-color);
    sborder: 1px solid #CCC; /* Dark-ui border */
    border: 0 !important; /* Remove borders */
    border-radius: 0 !important; /* Make corners square */
    color: var(--ui-item-dark-active-foreground-color);

    sfont-size: 1.25rem;
}

    .form-control:focus {
        background-color: var(--ui-item-dark-active-background-color);
        sborder: 1px solid #CCC; /* Dark-ui border */
        border: 0 !important; /* Remove borders */
        border-radius: 0 !important; /* Make corners square */
        color: var(--ui-item-dark-active-foreground-color);
    }

    .form-control::placeholder {
        color: var(--ui-item-inactive-foreground-color);
    }


.form-select {
    background-color: var(--ui-item-dark-active-background-color);
    sborder: 1px solid #CCC; /* Dark-ui border */
    border: 0 !important; /* Remove borders */
    border-radius: 0 !important; /* Make corners square */
    color: var(--ui-item-dark-active-foreground-color);
    /* Believe it or not the next 4 lines are necessary JUST */
    /* to change the chevron arrow color to white. If you */
    /* want to change it to another color, you will need to */
    /* alter the part of the 'background-image' value where */
    /* it says'fill="white"'. Change 'white' to whatever */
    /* color you want. */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;

    font-size: 1.25rem;
}

    .form-select:focus {
        background-color: var(--ui-item-dark-active-background-color);
        sborder: 1px solid #CCC; /* Dark-ui border */
        border: 0 !important; /* Remove borders */
        border-radius: 0 !important; /* Make corners square */
        color: var(--ui-item-dark-active-foreground-color);
    }

    .form-select::placeholder {
        color: var(--ui-item-inactive-foreground-color);
    }

option {     /* For select options */
    color: var(--ui-item-dark-active-background-color); /* Text color */
    background-color: var(--ui-item-dark-active-background-color); /* Background color */
}



/* Custom radio button */
.form-check-input {
    background-color: var(--ui-item-dark-active-background-color);
}

    .form-check-input:checked {
        background-color: var(--ui-item-dark-active-background-color);
    }

/* Custom label styling */
.form-check-label {
    sfont-weight: bold; /* Bold label text */
}



/* Change the background color and text color of the tabs */
.nav-tabs .nav-link {
    sbackground-color: var(--inactive-color);
    sbackground-color: transparent;
    background-image: linear-gradient(180deg, rgba(80,80,80,.5) 0%, rgba(80,80,80,0.3) 50%, rgba(0,0,0,0.05) 90%, rgba(0,0,0,0) 100%);
    color: #555555;
    border-radius: .5em .5em 0em 0em;
    -webkit-border-radius: .5em .5em 0em 0em;
    -moz-border-radius: .5em .5em 0em 0em;
    font-weight: bold; /* Bold label text */
    font-size: 1.2em;
}

    .nav-tabs .nav-link.active {
        sbackground-color: var(--active-color);
        background-color: transparent;
        sbackground-image: linear-gradient(180deg, rgba(33,150,243,1) 0%, rgba(33,150,243,0.75) 50%, rgba(0,0,0,0.01) 90%, rgba(0,0,0,0) 100%);
        background-image: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.05) 90%, rgba(0,0,0,0) 100%);
        color: var(--ui-item-active-foreground-color);
    }

    .nav-tabs .nav-link:hover {
        sbackground-color: var(--active-color);
        sbackground-color: transparent;
        sbackground-image: linear-gradient(180deg, rgba(33,150,243,1) 0%, rgba(33,150,243,0.75) 50%, rgba(0,0,0,0.01) 90%, rgba(0,0,0,0) 100%);
        sbackground-image: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.05) 90%, rgba(0,0,0,0) 100%);
        color: var(--ui-item-active-foreground-color);
    }

    #file-upload-display {
        position: relative; /* Ensures it scrolls with the page */
        margin: 0; /* Remove any extra margins */
        padding: 10px; /* Internal spacing */
        max-height: 150px; /* Limit height to prevent overflow */
        overflow-y: auto; /* Enable scroll if the content exceeds max height */
        width: 100%; /* Match the full width of the container */
        background-color: midnightblue; /* Bright background for contrast */
        border: 1px solid #ccc; /* Subtle border for separation */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow for depth */
        font-family: Arial, sans-serif; /* Readable font */
        font-size: 14px; /* Easy-to-read text size */
        color: midnightblue; /* Black text for visibility */
        font-weight: 500; /* Slightly bold for better readability */
        line-height: 1.5; /* Improve text spacing */
    }
    
    #casefilesuploadcontainer {
        display: flex; /* Align children properly */
        flex-direction: column; /* Stack children vertically */
        gap: 10px; /* Add spacing between children */
        width: 100%; /* Ensure the container spans the full width of its parent */
    }
    
    
    #file-upload-display div {
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Hide overflow content */
        text-overflow: ellipsis; /* Add "..." for clipped content */
        display: block;
        color: #ffffff /* Ensure each log entry is treated as a block element */
    }
    
    #file-upload-display div:hover {
        overflow: visible; /* Allow full text to be visible on hover */
        white-space: normal; /* Wrap text normally when hovering */
        background-color: midnightblue; /* Optional: Highlight background on hover */
        z-index: 10; /* Ensure it appears above other elements */
        position: relative; /* Ensure it's positioned properly */
    }
    

    .button-container {
        display: flex; /* Align buttons in a row */
        justify-content: space-between; /* Distribute space between buttons */
        gap: 10px; /* Add spacing between buttons */
        margin-top: 20px; /* Add space above the button container */
        position: relative; /* Ensure proper alignment */
        z-index: 10; /* Keep above other content */
        width: 100%; /* Make container span the full width */
    }
    
    button#clear-rx,
    button#clear-uploads {
        background-color: #ff0000; /* Red background */
        color: white; /* White text */
        border: none; /* Remove border */
        font-size: 18px; /* Larger font size */
        font-weight: 700; /* Bold font */
        padding: 10px 20px; /* Consistent padding */
        border-radius: 4px; /* Slightly rounded corners */
        cursor: pointer;
        flex: 1; /* Make these buttons share the available space evenly */
        text-align: center; /* Center text inside the button */
    }
    
    button#clear-rx:hover,
    button#clear-uploads:hover {
        background-color: #cc0000; /* Darker red on hover */
    }
    
    button.submit-button {
        font-size: 26px; /* Largest font size for prominence */
        font-weight: 750; /* Boldest font weight */
        padding: 10px 20px; /* Consistent padding */
        background-color: #007bff; /* Blue background */
        color: white; /* White text */
        border: none; /* Remove border */
        border-radius: 4px; /* Slightly rounded corners */
        flex: 2; /* Make this button take up twice as much space */
        text-align: center; /* Center text inside the button */
    }
    
    button.submit-button:hover {
        background-color: #0056b3; /* Darker blue on hover */
    }