@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');

@media print {
    body * {
        display: none; /* Hide everything by default when printing */
    }
    #printableDiv, #printableDiv * {
        display: block !important; /* Show only the div you want to print and its child elements */
    }
    /* Ensure all parent elements of #printableDiv are also displayed */
    html, body, .maincontent, .SearchResults, #printableDiv, #printableDiv * {
        display: block !important;
    }
}


/* Define the color scheme */
:root {
    --primary-color: #003366; /* Deep Blue */
    --secondary-color-1: #3399CC; /* Softer Blue */
    --secondary-color-2: #FF6600; /* Contrasting Orange */
    --neutral-gray: #707070; /* Neutral Gray */
    --background-color: #F5F5F5; /* Light Gray Background */
    --text-color: #333333; /* Very Dark Gray for Text */
}

#SearchResults {
    position: relative; /* Needed for absolute positioning of the child */
}

#background-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/AU_seal_blue.png') no-repeat top center;
    background-size: 60%;
    opacity: 0.25; /* Adjust for desired level of fade */
    z-index: -1; /* Ensure it stays behind other content */
}

/* Style for other content to ensure it's on top */
#SearchResults > *:not(#background-div) {
    /*position: relative;*/
    z-index: 1;
}

/* Styling for primary buttons */
.button-primary {
    background-color: var(--primary-color);
    color: white;
    padding: 5px 5px;
	margin: 5px;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.button-primary:hover {
    background-color: var(--secondary-color-1);
}

/* Styling for secondary buttons (e.g., Call to Action) */
.button-secondary {
    background-color: var(--secondary-color-2);
    color: white;
    padding: 5px 5px;
	margin: 5px;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.button-secondary:hover {
    background-color: var(--neutral-gray);
}

/* Styling for hyperlinks */
a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    color: var(--secondary-color-1);
}

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: 'Raleway', sans-serif;
	font-weight: 100;
}

#sidebar {
    background-color: #0aa39f;
    color: white;
    height: 100vh;
    width: 200px;
    position: fixed;
    left: 0;
    top: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;

/*
    background-image: url('/AT_stacked_rgb_LOGO_ONLY.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: calc(100% - 20px);
*/
}

.logo {
    height: 150px; /* Adjust based on your logo size */
    background-image: url('/AT_stacked_rgb_LOGO_ONLY.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;	
	opacity: 0.50; /* Adjust for desired level of fade */
}

#sidebar ul {
    list-style-type: none;
}

#sidebar ul li a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 10px;
}

#menu-toggle {
    display: none;
    padding: 10px;
    background: #0aa39f;
    cursor: pointer;
}

#maincontent {
    margin-left: 200px;
    padding: 10px;
	height: 100vh;
}

/* Responsive */
@media (max-width: 768px) {
    #sidebar {
        width: 100%;
        height: auto;
		display: block;
        position: relative;
    }

    #menu-toggle {
        display: block;
    }

    #sidebar ul {
        display: none;
    }

    #nav-bottom-image {
        display: none;
    }

    #maincontent {
        margin-left: 0;
    }
	
	.logo {
		display: none;
	}
}

.user-initial {
    width: 20px;  /* Size of the circle */
    height: 20px; /* Size of the circle */
    background-color: #007bff; /* Circle color */
    color: white; /* Text color */
    border-radius: 50%; /* Makes the div a circle */
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
    font-size: 10px; /* Adjust the size of the letter */
    font-weight: bold; /* Optional: Makes the letter bold */
}

.tabs {
    list-style-type: none;
    padding: 0;
}

.tab-link {
    display: inline-block;
    margin-right: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
}

.current {
    background-color: #eee;
}

.tab-content {
    display: none;
    border: 1px solid #ccc;
    padding: 20px;
    margin-top: 10px;
}

.tab-content.current {
    display: block;
	display: flex;
	flex-wrap: wrap;
}

.tab-content-child-div {
    flex: 1 1 auto; /* Allows flexibility but respects content size */
    min-width: 150px; /* Minimum width */
    max-width: 100%; /* Prevents growing beyond the parent width */
    padding: 10px; /* Spacing inside the div */
    margin: 10px; /* Spacing outside the div */
    border: 1px solid #ccc; /* Visual clarity */
    white-space: nowrap; /* Keeps content in a single line */
    overflow: auto; /* Adds scrollbars if content overflows */
}


.chat-window {
    width: 300px;
    height: 400px;
    border: 1px solid #ccc;
    background-color: #fff;
    position: absolute;
    overflow: hidden;
}

.chat-header {
    background-color: #f2f2f2;
    padding: 10px;
    cursor: move;
}

.chat-content {
    height: calc(100% - 60px);
    overflow-y: auto;
}

.chat-input {
    width: 100%;
    border-top: 1px solid #ccc;
    padding: 10px;
    box-sizing: border-box;
}

#attractiveBox {
    border: 2px solid #007bff;
    padding: 20px;
    border-radius: 10px;
    background-color: #f0f0f0;
    text-align: center;
    width: 300px;
    position: fixed; /* Position it relative to the viewport */
    top: 50%; /* Center it vertically */
    left: 50%; /* Center it horizontally */
    transform: translate(-50%, -50%); /* Offset the top and left for perfect centering */
    z-index: 1000; /* Ensure it’s above other content */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds a shadow for depth */
}

#attractiveBox h2 {
    color: #007bff;
}

#attractiveBox button {
    margin: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
}

#attractiveBox button:hover {
    background-color: #0056b3;
}

.box-hidden {
    display: none;
}

.nav-bottom-image {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    margin: auto;
    max-width: calc(100% - 20px); /* Adjust width considering the margin */
	border-radius: 10px;
	display: block;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    padding-top: 60px;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.json-pair {
    margin-bottom: 10px;
}

.json-pair label {
    margin-left: 8px;
}


.modalDoc {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
}

.modalDoc-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-height: 80%;
    overflow-y: auto;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.tableAltRowColor tr:nth-child(odd) {
    background-color: #ffffff; /* White for odd rows */
}

.tableAltRowColor tr:nth-child(even) {
    background-color: #f2f2f2; /* Light gray for even rows */
}

#commsContainer {
    display: flex;
    flex-direction: column;
    height: 500px; /* Adjust as necessary */
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f9f9f9;
}

#commsChatWindow {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 10px;
}

#commsInputContainer {
    display: flex;
	flex-direction: column;
}

#commsInput {
    flex-grow: 1;
    margin-right: 10px;
    padding: 5px;
}

#commsSendButton {
    width: 100px; /* Adjust as necessary */
}

#commsRadioButtons {
	display: flex;
    margin-bottom: 10px;
}

#commsRadioButtons label {
    margin-right: 10px;
}

#commsInput {
    flex-grow: 1;
    margin-bottom: 10px;
}


.commsConversation {
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.commsHeader {
    background-color: #f2f2f2;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}

.chatContainer {
    display: flex;
    flex-direction: column;
    padding: 10px;
    max-width: 600px; /* Adjust as needed */
    margin: auto;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
}


.commsMessages {
    max-width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 15px;
    color: black;
    max-height: 500px; /* Adjust the height as needed */
    overflow-y: auto;
	overflow-x: hidden;
	display: none;
	flex-direction: column;
	white-space: normal;
}

.commsFromMe {
    align-self: flex-end;
    background-color: #D7DDF9;
}

.commsFromThem {
    align-self: flex-start;
    background-color: #90A0EB;
}

.chatMessage {
    max-width: 90%;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 15px;
    color: black;
	box-sizing: border-box;
    word-wrap: break-word; /* Break long words */
    overflow-wrap: break-word; /* Ensure overflow text breaks onto the next line */
	white-space: normal;
}

.chatHeader {
    max-width: 100%;
    margin-bottom: 3px;
    padding: 3px;
    border-radius: 0px;
    color: black;
	box-sizing: border-box;
    white-space: no-wrap;
}

.chatTo {
    align-self: flex-end;
    background-color: #D7DDF9;
}

.chatFrom {
    align-self: flex-start;
    background-color: #90A0EB;
}

#chatContainer {
    display: flex;
    flex-direction: column;
    padding: 10px;
    max-width: 600px; /* Adjust as needed */
    margin: auto;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
}

#warranFileContainer {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
}

.warrenFileColumn {
    flex: 1;
    min-width: 250px; /* Maximum width of each column */
	max-width: 400px; /* Maximum width of each column */
    margin: 10px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    box-sizing: border-box; /* Ensures padding and border are included in width */
}

.warrenFileList {
    list-style-type: none;
    padding: 0;
}

.warrenFileList li a {
    text-decoration: none;
    color: #0275d8;
    display: block;
    padding: 5px;
    margin: 5px 0;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s;
}

.warrenFileList li a:hover {
    background-color: #eef7fe;
}