/* Container */
.container-with-shadow {
	box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

/* Table */
/* General Table Styles */
.table2355 {
    background: #f5f5f5;
    font-size: 12px;
    line-height: 24px;
    margin: 30px auto;
    width: 100%;
    border-collapse: separate;
    box-shadow: inset 0 1px 0 #fff;
}

/* Table Header Styles (Not necessary on mobile, but included for larger screens) */
.table2355 th {
    background: url(https://jackrugile.com/images/misc/noise-diagonal.png), linear-gradient(#777, #444);
    color: #fff;
    font-weight: bold;
    padding: 10px 15px;
    text-align: left;
    text-shadow: 0 1px 0 #000;
    border-top: 1px solid #555;
    border-bottom: 1px solid #333;
}

/* Table Cell Styles */
.table2355 td {
    padding: 10px 15px;
    border: 1px solid #e8e8e8;
    position: relative;
}

/* Media Queries for Mobile */
@media screen and (max-width: 768px) {
    .table2355 {
        font-size: 14px;  /* Adjust font size for mobile */
        margin: 15px auto;  /* Reduce margin */
    }

    /* Make each record (tr) look like a card */
    .table2355 tr {
        display: block;
        margin-bottom: 15px;  /* Add spacing between records */
        background: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  /* Light shadow for card effect */
        padding: 15px;
        border: 1px solid #e8e8e8;  /* Border for the card */
    }

    /* Remove table headers on mobile */
    .table2355 th {
        display: none;
    }

    /* Style each td inside the card */
    .table2355 td {
        display: block;
        text-align: left;  /* Ensure content is left-aligned */
        border: none;  /* Remove inner borders for a cleaner look */
        margin-bottom: 10px;  /* Add space between fields in each record */
    }

    /* First column (td:first-child) becomes the title of the record */
    .table2355 td:first-child {
        font-size: 16px;  /* Make the first column more prominent */
        font-weight: bold;
        background-color: #e8f5e9;  /* Light background for the first column */
        padding: 15px;
        border-radius: 5px;
        color: #333;
    }

    /* Add background color to distinguish fields in the record */
    .table2355 td:nth-child(odd) {
        background: #f9f9f9;
    }

    .table2355 td:last-child {
        margin-bottom: 0;
    }

    /* Style for second and subsequent columns (details) */
    .table2355 td:not(:first-child) {
        background: #f1f1f1;  /* Lighter background for other fields */
        padding-left: 20px;
    }
}

/* For very small screens (e.g., phones in portrait mode) */
@media screen and (max-width: 480px) {
    .table2355 td {
        padding: 12px 8px;  /* Reduce padding for very small screens */
    }

    /* Ensure the first column title stands out even more on very small screens */
    .table2355 td:first-child {
        font-size: 18px;
        padding: 15px;
        background-color: #e1f7d5;  /* Slightly more prominent background for first column */
    }
}

/* Loader */
.loader {
	width: 35px;
	height: 35px;
	border: 4px solid #2A90C5;
	border-bottom-color: transparent;
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}

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

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

.loader-spinning {
	width: 48px;
	height: 48px;
	border: 5px solid;
	border-color: #007cbf transparent;
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}

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

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


/* Custom Button */
.custom-btn {
	display: inline-block;
	outline: none;
	cursor: pointer;
	border: 1px solid transparent;
	text-align: left;
	vertical-align: top;
	padding: calc(.375rem - 3px) 12px calc(.375rem - 3px) 12px;
	background-color: #2A90C5;
	font-size: 14px;
	letter-spacing: 0.16px;
	min-height: 32px;
	line-height: 1.29;
	color: #fff !important;
	font-weight: 400;
	transition: background 70ms cubic-bezier(0, 0, .38, .9), box-shadow 70ms cubic-bezier(0, 0, .38, .9), border-color 70ms cubic-bezier(0, 0, .38, .9), outline 70ms cubic-bezier(0, 0, .38, .9);
}

.custom-btn.normal-padding {
	padding-right: 12px;
}

.custom-btn.danger {
	background-color: #c70003;
}

.custom-btn.success {
	background-color: #28a745;
}

.custom-btn.warning {
	background-color: #ffc107;
}

.custom-btn:hover {
	background-color: #1e74a3;
}

.custom-btn.danger:hover {
	background-color: #a50101;
	/* Darker shade for danger */
}

.custom-btn.success:hover {
	background-color: #218838;
	/* Darker shade for success */
}

.custom-btn.warning:hover {
	background-color: #e0a800;
	/* Darker shade for warning */
}


/* Input */
/* Wrapper for the input element */
.i7s9a {
	--w: 200px;
	--b-h: 1px;
	--b-before-c: rgba(221, 221, 221, 0.39);
	--b-after-c: #5891ff;
	--i-hover-c: #4985e01f;
	position: relative;
	width: var(--w);
}

/* Styling of the input element */
.i2b8z {
	position: relative;
	z-index: 0;
	color: black;
	font-size: 0.9rem;
	background-color: transparent;
	width: 100%;
	box-sizing: border-box;
	padding-inline: 0.5em;
	padding-block: 0.7em;
	border: none;
	border-bottom: var(--b-h) solid var(--b-before-c);
}

/* Styling of the animated border */
.i5m4q {
	position: absolute;
	background: var(--b-after-c);
	width: 0%;
	height: 1px;
	bottom: 0;
	left: 0;
	transition: 0.3s;
}

/* Text Area */


/* Hover effect on input */
input:hover {
	background: var(--i-hover-c);
}

input:focus {
	outline: none;
}

/* Animated border on focus */
input:focus~.i5m4q {
	width: 100%;
}

/* Custom Tables */
.t9823465 {
	border: 1px solid #ccc;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 100%;
	table-layout: fixed;
}

.t9823465 caption {
	font-size: 1.5em;
	margin: .5em 0 .75em;
}

.t9823465 tr {
	background-color: #f8f8f8;
	border: 1px solid #ddd;
	padding: .35em;
}

.t9823465 th,
.t9823465 td {
	padding: .625em;
	text-align: center;
}

.t9823465 th {
	font-size: .85em;
	letter-spacing: .1em;
	text-transform: uppercase;
}

@media screen and (max-width: 600px) {
	.t9823465 {
		border: 0;
	}

	.t9823465 caption {
		font-size: 1.3em;
	}

	.t9823465 thead {
		border: none;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	.t9823465 tr {
		border-bottom: 3px solid #ddd;
		display: block;
		margin-bottom: .625em;
	}

	.t9823465 td {
		border-bottom: 1px solid #ddd;
		display: block;
		font-size: .8em;
		text-align: right;
	}

	.t9823465 td::before {
		/*
      * aria-label has no advantage, it won't be read inside a table
      content: attr(aria-label);
      */
		content: attr(data-label);
		float: left;
		font-weight: bold;
		text-transform: uppercase;
	}

	.t9823465 td:last-child {
		border-bottom: 0;
	}
}

.t35456346 {
	border: 1px solid #ccc;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 100%;
	table-layout: fixed;
}

.t35456346 caption {
	font-size: 1.2em;
	margin: .5em 0 .75em;
}

.t35456346 tr {
	background-color: #f8f8f8;
	border: 1px solid #ddd;
	padding: .35em;
}

.t35456346 th,
.t35456346 td {
	padding: .625em;
	text-align: center;
}

.t35456346 td {
	font-size: .85em;
	white-space: normal; /* Allow text to wrap */
	word-wrap: break-word; /* Prevent overflow by breaking long words */
}

.t35456346 th {
	font-size: .85em;
	letter-spacing: .1em;
	text-transform: uppercase;
}

@media screen and (max-width: 600px) {
	.t35456346 {
		border: 0;
	}

	.t35456346 caption {
		font-size: 1.3em;
	}

	.t35456346 thead {
		border: none;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	.t35456346 tr {
		border-bottom: 3px solid #ddd;
		display: block;
		margin-bottom: .625em;
	}

	.t35456346 td {
		border-bottom: 1px solid #ddd;
		display: block;
		font-size: .8em;
		text-align: left;
		white-space: normal; /* Ensure text wraps on smaller screens */
		word-wrap: break-word; /* Ensure long words break to fit */
	}

	.t35456346 td::before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
		text-transform: uppercase;
	}

	.t35456346 td:last-child {
		border-bottom: 0;
	}
}

/* Messages */
.message-container {
	cursor: pointer;
	z-index: 9001;
	position: fixed;
	top: 10px;
	right: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

/* Message Box */
.message-box {
	color: whitesmoke;
	padding: 10px;
	width: 350px;
	display: flex;
	justify-content: start;
	align-items: center;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
	z-index: 9001;
}

/* Message Box Types */
.message-box.success {
	background-color: #28a745;
}

.message-box.error {
	background-color: #dc3545;
}

.message-box.info {
	background-color: #007bbf;
}

.message-box.warning {
	background-color: #d97706;
}

/* Announcements */
.custom-announcement {
	position: relative;
	z-index: -1;
	background: rgba(255, 255, 255, 0.2);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	backdrop-filter: blur(11.2px);
	-webkit-backdrop-filter: blur(11.2px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.announcement-info {
	padding: 5px;
	font-size: 14px;
	color: #31708f;
	background-color: #d9edf7;
	border-color: #bce8f1;
}

.announcement-warning {
    padding: 5px;
    font-size: 14px;
    color: #b78633;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.announcement-danger {
    padding: 5px;
    font-size: 14px;
    color: #be312f;
    background-color: #f2dede;
    border-color: #ebccd1;
}

/* Alerts */
.custom-alert {
	position: relative;
	z-index: -1;
	background: rgba(255, 255, 255, 0.2);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	backdrop-filter: blur(11.2px);
	-webkit-backdrop-filter: blur(11.2px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.alert-success {
	padding: 5px;
	font-size: 14px;
	color: #3c763d;
	background-color: #dff0d8;
	border-color: #d6e9c6;
}

.alert-info {
	padding: 5px;
	font-size: 14px;
	color: #31708f;
	background-color: #d9edf7;
	border-color: #bce8f1;
}

.alert-danger {
	padding: 5px;
	font-size: 14px;
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1;
}

.success-message {
	font-size: 12px;
	color: rgb(0, 128, 0);
}

.warning-message {
	font-size: 12px;
	color: #2eb8e4;
}

.error-message {
	font-size: 12px;
	color: rgb(229, 68, 68);
}

/* App Css Fixes */
a {
	text-decoration: none;
}

li {
	list-style: none;
}

/* Custom Modal */
.custom-modal {
	z-index: 9000;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: start;
	/* From https://css.glass */
	background: rgba(255, 255, 255, 0.2);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(11px);
	-webkit-backdrop-filter: blur(11px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.custom-modal .card {
	min-width: 600px;
	border: 0;
	border-radius: 0;
	margin-top: 80px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	max-height: 90vh;
	/* Ensure modal height does not exceed 90vh */
	overflow: hidden;
	/* Prevent content overflow */
}

.custom-modal .card-header,
.custom-modal .card-footer {
	border: 0;
	border-radius: 0;
}

.custom-modal .card-body {
	flex: 1;
	overflow-y: auto;
}

@media (max-width: 768px) {
	.custom-modal .card {
		margin-top: 0;
		min-width: 100%;
		width: 100%;
		height: 100%;
		min-height: 100vh;
		/* Allow the modal to fill 100vh on smaller screens */
	}
}

/* Json Viewer */
.json-display {
    font-family: 'Courier New', Courier, monospace;
    background-color: #fff;
    color: #000;
    padding: 15px;
    border-radius: 5px;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 14px;
}
.json-display .key {
    color: #00bfff;
}
.json-display .string {
    color: #ff1493;
}
.json-display .number {
    color: #32cd32;
}
.json-display .boolean {
    color: #ff8c00;
}
.json-display .null {
    color: #a9a9a9;
}