/*********************
 Variables.css
*********************/
/* You cannot use CSS variables (custom properties) for CSS selectors */
/*
:root {
  --top-navigation-id: #myStart;
  --main-input-id: #myInput1;
  --add-button-class: .addBtn1;
}
*/

/*********************
 MenuDisplay.css
*********************/
/********************* MenuDisplay - For top navigation *********************/

/*align the top navigation to the right so it has place to show the hamburger icon for the sidenavigation menu*/
#myStart {
    margin-left: 60px;
}

/*********************
 GenericBackgroundDisplay.css
*********************/
/********************* GenericBackgroundDisplay - For generic styles that are usually seen in the background *********************/
/* Making a black background and other admin lte changes*/
/* Styles for the header content with specific padding at the top and bottom */
.content-header {
    padding-top: 15px;
    padding-bottom: 1px;
}

/* Sets the background color and text color for the entire body of the document */
body {
    /*background-color: #111;*/
    background-color: #333;
    color: #fff;
}

/* Styles for the horizontal rule with a specific background color */
hr {
    background-color: #fff;
}

/*********************
 FormDisplay.css
*********************/
/********************* FormDisplay - For input fields *********************/

/*to display font color for a label inside an input field in a form */
.form-floating .form-label {
        color: #333;
    }

/********************* FormDisplay - For buttons *********************/
/* Styles for a round button with bold text */
.round-button {
    border-top: 0px;
    border-bottom: 0px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
}

/********************* FormDisplay - For checkboxes *********************/
/* Styles for the format checkbox with specific height and width */
.format_chkbox {
    height: 17px;
    width: 17px;
}

/*********************
 AccordionDisplay.css
*********************/
/********************* AccordionDisplay - For general tables *********************/
/* This rule styles the accordion body */
.accordion-body {
    /* Set the background color to dark grey */
    background-color: #333;
    /* Set the text color to white */
    color: #fff;
}

/* This rule adds rounded corners and a border to the bottom of the expanded accordion body */
    .accordion-item:last-of-type .accordion-collapse.show .accordion-body {
    /* Add rounded corners to the bottom left and right of the accordion body */
    border-bottom-left-radius: .35rem;
    border-bottom-right-radius: .35rem;
}

/*********************
 TablesDisplay.css
*********************/
/********************* TablesDisplay - For general tables *********************/

/*for font color in tables to be right */
.table {
    color: #fff;
}

/* This rule makes the table header sticky */
thead th {
  /* The position property is set to sticky to make the header stick to the top of the viewport when scrolling */
  position: sticky;
  /* The top property is set to 0 to stick the header to the top of the viewport */
  top: 0;
  /* The z-index property is set to 10 to ensure the header is displayed above the table rows */
  z-index: 10;
  /* The background is set to white to ensure the text is readable when the header is sticky */
  background: #555 !important; /*white;*/
  /* A bit lighter than the page background */
  background-color: #555 !important;
  color: #fff !important; /* Keeping the text color white for contrast */
}

/********************* TablesDisplay - For tables alternating styles on odd vs. even rows *********************/
/* For table with different css on odd vs even rows */
/* Styles for a table with alternating row colors and collapsed borders */
.nth-table {
    border-collapse: collapse;
    /*border: 1px solid #824100;*/
}
/* Styles for odd rows in the table */
.nth-table tr:nth-child(odd) {
	/* A bit lighter than the page background */
	background: #444 !important;
	background-color: #444 !important; 
    /*background: #9DCECE;*/
    color: #fff !important; /* Keeping the text color white for contrast */
    }
/* Styles for even rows in the table */
.nth-table tr:nth-child(even) {
		/* A bit darker than the odd rows */
	background: #757575 !important;
	background-color: #757575 !important;
        /*background: #9DCECE;*/
        color: #fff !important; /* Keeping the text color white for contrast */
    }
/* Styles for the table headers */
.nth-table th {
        /*background: #9DCECE;*/
        /*color: #fff;*/
        font-weight: bold;
    }

/********************* TablesDisplay - For tables with row numbers for IDs *********************/
/* For table that has row numbers for IDs*/
.td-with-id {
    float: left; 
    margin-left: 2.5em; 
    border-top: 0px;
}
/* Adding row numbers through css*/
/* Initializes a counter for row numbers in a table */
.css-serial {
    counter-reset: serial-number; /* Set the serial number counter to 0 */
}

/* Adds row numbers to a table by incrementing and displaying the counter */
.css-serial td:first-child:before {
    counter-increment: serial-number; /* Increment the serial number counter */
    content: counter(serial-number); /* Display the counter */
}

/*********************
 CardsDisplay.css
*********************/
/********************* CardsDisplay - For styles on cards *********************/
/* Styles for the card with specific background color, border, and border color */
.card {
    background-color: #444 !important; /* #333 Card Background */
    border: solid 1px; /* Card Border */
    border-color: #ccc; /* #fff Card Border Color */
	color: #fff; /* Card Text */
	padding: 20px;
    margin: 20px;
    transition: background-color 0.3s ease; /* Transition for hover effect */
}
/* Changes the background color of the card when hovered over */
.card:hover {
  background-color: #555; /* Slightly lighter on hover */
}
/* Styles for the card header with centered text */
.card-header {
    text-align: center;
}
/* Styles for the card header and footer with a specific background color, padding, and text color */
.card-header,
.card-footer {
  background-color: #444; /* Darker background for header and footer */
  padding: 10px;
  color: #fff; /* White text */
}
/* Styles for the card title with left margin */
.card-title {
    margin-left: 20px;
	margin-bottom: 15px; /* Space below the title */
	font-size: 1.5em; /* Larger font size for the title */
}
/* Styles for the card subtitle with left margin */
.card-subtitle {
    margin-left: 20px;
}
/* Styles for the card body with specific padding around the content */
.card-body {
  padding: 20px; /* Padding around the body content */
}
/* Styles for the special card body with specific background color and text color */
.card-body.special {
    background-color: #fff;
    color: #333;
}
/* Styles for the custom card footer with specific background, border color, and width */
.card-footer.card-custom {
    background: rgba(255, 255, 255, 0.0);
    border-color: white;
    width: 440px;
	color: #fff; /* White text */
}

/*********************
 CalendarAndDatesDisplay.css
*********************/
/********************* CalendarAndDatesDisplay - For styles on FullCalendar library *********************/
/* Styles for the widget header with specific background color */
.fc-widget-header {
    background: #1f2d3d;
}
/* Styles for the unthemed table cell of today with specific background color */
.fc-unthemed td.fc-today {
    background: #1f2d3d;
    ;
}
/********************* CalendarAndDatesDisplay - For styles on DateRangePicker *********************/
/* Styles for the date range picker with specific text color and background color */
.daterangepicker {
    color: #333;
    background-color: #fff;
}
/* Styles for the calendar table with black text color */
/* for daterangepicker */
.calendar-table {
    color: black;
}
/*Bootstrap*/
/*
.form-floating {
    position: relative;
}

    .form-floating > .form-control,
    .form-floating > .form-select {
        height: calc(3.5rem + 2px);
        line-height: 1.25;
    }

    .form-floating > label {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        padding: 1rem 0.75rem;
        pointer-events: none;
        border: 1px solid transparent;
        transform-origin: 0 0;
        transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
    }

@media (prefers-reduced-motion: reduce) {
    .form-floating > label {
        transition: none;
    }
}

.form-floating > .form-control {
    padding: 1rem 0.75rem;
}

    .form-floating > .form-control::-moz-placeholder {
        color: transparent;
    }

    .form-floating > .form-control::placeholder {
        color: transparent;
    }

    .form-floating > .form-control:not(:-moz-placeholder-shown) {
        padding-top: 1.625rem;
        padding-bottom: 0.625rem;
    }

    .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
        padding-top: 1.625rem;
        padding-bottom: 0.625rem;
    }

    .form-floating > .form-control:-webkit-autofill {
        padding-top: 1.625rem;
        padding-bottom: 0.625rem;
    }

.form-floating > .form-select {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating > .form-control:-webkit-autofill ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-label {
    margin-bottom: 0.5rem;
}

.col-form-label {
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
}

.col-form-label-lg {
    padding-top: calc(0.5rem + 1px);
    padding-bottom: calc(0.5rem + 1px);
    font-size: 1.25rem;
}

.col-form-label-sm {
    padding-top: calc(0.25rem + 1px);
    padding-bottom: calc(0.25rem + 1px);
    font-size: 0.875rem;
}
    */