/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #1a5567;
    color: rgb(156,219,217);
    border: solid 1px rgb(156,219,217);
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.exclamation-square {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height:32px;
    width:32px;
    min-width:24px;
    max-height:24px;
    max-height:48px;
    max-width:48px;
    filter: invert(78%) sepia(90%) saturate(599%) hue-rotate(4deg) brightness(102%) contrast(102%);
}

.exclamation-square-black {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    width:24px;
    height:24px;
    min-height:20px;
    min-width:20px;
    max-height: 32px;
    max-width: 32px;
    background-color: yellow; /* Yellow background */
    color: black; /* Black foreground (text or SVG color) */
    object-fit:contain; /* Maintain aspect ratio*/
}

.check-square {
    display: flex;
    padding-right:0px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 32px;
    width: 32px;
    min-height: 24px;
    min-width: 24px;
    max-height: 48px;
    max-width: 48px;
    filter: invert(100%) brightness(100%);
}

.first-page {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height:100%;
    max-height: 128px;
    max-width: 125px;
    filter: invert(100%) brightness(100%);
}

.first-page .icon {
    background-image: url('~/Resources/arrow-bar-left.svg');
    filter: invert(1) brightness(2);
}

.bi-page-first {
    background-image: url('@Url.Content("~/Resources/arrow-bar-left.svg")');
    filter: invert(1) brightness(2);
}

.bi-settings {
    height: 25px;
    width: 25px;
    filter: invert(1) brightness(2);
}

.bi-sort-ascend,
.bi-sort-descend {
    display: inline-block;
    width: 1em; /* Adjust size as needed */
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: white; /* White background */  
    border: 1px solid #ccc; /* Optional: Adds a subtle border for contrast */
}

.bi-sort-ascend {
    background-image: url('~/Resources/caret-up-fill.svg');
}

.bi-sort-descend {
    background-image: url('~/Resources/caret-down-fill.svg');
}

.check-square-black {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height:20px;
    min-width:20px;
    height:24px;
    width:24px;
    max-height: 32px;
    max-width: 32px;
    object-fit:contain;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}


/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}

table {
    /*border-collapse: collapse; */
    font-family: Tahoma, Geneva, sans-serif;
    border: 5px solid rgb(156,219,217);
}

    table td {
        padding: 15px;
    }

    table thead td {        
        background-color: white;
        color: black;
        font-weight: bold;
        font-size: 13px;
        border: 1px solid gray;
    }

    table tbody td {
        color: #636363;
        border: 1px solid lightgray;
    }

    table tbody tr {
        background-color: #f9fafb;
    }

    table tbody tr:nth-child(odd) {
        background-color: #dddfe1;
    }

.div-table-container {
    width: 100%;
    display: flex;
    background-color: white;
}

.div-table {
    margin: 0 auto;
    display: inline-block;
}

.header {
    background-color: #003b49;
    color : white;
    cursor: pointer;
}

.div-row {
    display: flex;
}

.div-row-alt {
    display: flex;
}

.div-row-alt:nth-child(even) {
    background-color: #f2f2f2; /* Light shade for even rows */
}

div-row-alt:nth-child(odd) {
    background-color: #ffffff; /* Different shade or keep it white/transparent for odd rows */
}

.div-cell {
    border: none;
    padding: 2px;
    min-width: 80px;
    text-align: left;
    width: 10%;
    display: flex;
    flex-grow:1;
    flex-shrink:1;
    overflow:hidden;
    font-size:smaller;

}

/* Style for the custom button container */
.dashboard-button {
   /* position: relative; */
    display: flex;
    flex-direction: column;
    padding: 10px 20px; /* Adjust padding as needed */
    background-color: #fff; /* Button background color */
    color: #fff; /* Text color */
    font-size: 32px; /* Font size */
    cursor: pointer;
    align-items: center;
    /*height: 250px; */
     width: 700px;
}

/* Style for the circle */
.green_circle {
    position: relative;
    top: 0;
    right: -300px;
    width: 50px; /* Adjust circle size as needed */
    height: 50px;
    background-color: #9CDBD9; /* Circle background color */
    border-radius: 50%; /* Make it circular */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff; /* Text color inside the circle */
    font-size: 16px; /* Font size inside the circle */
}

.lightgray_circle {
    position: relative;
    top: 0;
    right: -300px;
    width: 50px; /* Adjust circle size as needed */
    height: 50px;
    background-color: #D3D3D3; /* Circle background color */
    border-radius: 50%; /* Make it circular */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff; /* Text color inside the circle */
    font-size: 16px; /* Font size inside the circle */
}

/* style="background-color:#003b49"*/
.transparent-button {
    display: inline-flex; /* Aligns items in a row */
    justify-content: space-between; /* Puts maximum space between text and number */
    align-items: center; /* Vertically centers the content */
    padding: 10px 20px; /* Adds some padding around the content */
    border: 2px solid #003b49; /* Adds a border to make the button visible */
    /*background: linear-gradient(to bottom, #4a4a4a, #d3d3d3); */
    background-color: lightgray, color: #fff; /* Sets text color to white for better contrast */
    cursor: pointer; /* Changes cursor to pointer to indicate it's clickable */
    /*max-width: 300px;*/ /* Sets a maximum width for the button */
    width: auto; /* Sets a specific width for the button */
    box-sizing: border-box; /* Ensures padding and border are included in the total width */
    /* 3D Effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Outer shadow for depth */
    border-radius: 5px; /* Slightly rounded corners for a more tactile feel */
    transition: transform 0.1s ease, box-shadow 0.1s ease; /* Smooth transition for click effect */
}
.button-text {
    font-size: 12px; /* Adjust the text size as needed */
    color: black; /* Sets the text color */
    margin-right: 20px; /* Adds space to the right of the text */
    font-weight:bold
}

.button-number {
    font-size: 15px; /* Adjust if necessary to fit inside the circle */
    color: white; /* Sets the number color */
    font-weight: bold; /* Makes the number bold */
    white-space: nowrap; /* Prevents the number from breaking into multiple lines */
    background-color: #003b49; /* Solid color for the circle */
    border-radius: 50%; /* Creates a circular shape */
    display: inline-flex; /* Allows us to use flex properties for centering */
    align-items: center; /* Vertically centers the content inside the circle */
    justify-content: center; /* Horizontally centers the content inside the circle */
    width: 50px; /* Diameter of the circle */
    height: 50px; /* Height of the circle, equal to the width for a perfect circle */
    margin-left: 10px; /* Adds space to the left of the number/circle */
}

.filter-panel {
    border: 1px solid #ccc;
    margin: 10px;
}

.filter-panel-header {
    padding: 10px;
    background-color: #f7f7f7;
    cursor: pointer;
}

    .filter-panel-header h3 {
        margin: 0;
    }

.filter-panel-body {
    padding: 10px;
    display: none; /* Initially hidden */
}

.toggle-icon {
    float: right;
}

.uid-filter-input {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    flex:1;
    width:100%;
}

.date-picker-container {
    display: flex;
    flex-direction: column; /* Stack the elements vertically */
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 5px; /* Add some margin around the container */
    width:100%;
    color:white;
}

    .date-picker-container label {
        margin-bottom: 5px; /* Space between the label and the input */
    }

    .date-picker-container input[type="date"] {
        margin-bottom: 5px; /* Space between the inputs */
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

#FilterClient ul {
    list-style-type: none; /* Removes the default bullets */
    padding: 0; /* Removes default padding */
    align-content:end;
}

#FilterClient li {
    padding: 5px 0; /* Adds some vertical padding for spacing between list items */
    color:white;    
    flex:1;
    font-size:small;
}


.selected-row {
    background-color: lightblue !important;
    border: solid 2px black !important;
    box-sizing: border-box !important;
    will-change: border, background-color;
}


.scrollable-table {
    max-height: 100vh;
    overflow: auto;
    display: table;
    width: 100%;
    box-sizing: border-box; /* Prevents layout shifts by including padding and border in width */
    white-space: nowrap; /* Prevents text from wrapping, preserving table layout */
    will-change: transform;
    transform: translateZ(0);
    border-collapse: separate;
    border-spacing: 0; /* Ensure no extra space between cells */
}

.table-hover tbody tr {
    height: auto; /* Adjust this value as needed */
    box-sizing: border-box;
    overflow: auto !important;
}



.table-hover tbody tr:nth-of-type(odd) {
    background-color: lightgrey;
}

.loader {
    position: fixed; /* Fixed position relative to the viewport */
    top: 50%; /* Move to the middle of the screen vertically */
    left: 50%; /* Move to the middle of the screen horizontally */
    transform: translate(-50%, -50%); /* Adjust position to truly center the spinner */
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #003b49; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}