/*
USAGE NOTICE:
This template and associated assets can only be used with express permission from the author.
All components and code segments must retain this copyright notice.
*/

:root {
  --primary-dark: #0B1C26;
  --primary-medium: #195073; 
  --primary-light: #4A7A8C;
  --secondary: #A8BBBF; 
  --accent: #2196F3;
  --background: #ffffff;
  --on-background: #0b0c0c;
  --grey: #E1F0FC ;
  --success: #84dcc6;
  --warn: #f7b538;
  --danger: #FF6B6E;
}

body {
  font-family: 'Atkinson Hyperlegible';
  margin: 0;
  padding: 0;
  overflow-y:auto;
  overflow-x:hidden;
}

/* General Button Style */
.btn, .file-loader, .btn-success {
  display: inline-block;
  margin-left:0;
  margin-right: 10px;
  margin-top:10px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: var(--background);
  background-color: var(--primary-light);
  border: none;
  border-radius: 10px;
  transition: all 0.3s ease 0s;
  background-image: none;
}

.btn:hover, .file-loader:hover, .btn-success:hover {
  background-color: var(--secondary);
  color: white;
  outline: 6px solid var(--accent);
  transform: scale(0.9);
}

.btn:active, .file-loader:active, .btn-success:active {
  background-color: var(--grey);
  outline: 6px solid var(--accent);
  transform: translateY(4px);
}

a {
  /* Base link styles */
  color: var(--primary-medium);
  transition: color 0.3s ease, transform 0.3s ease;
}

a:hover {
  /* Styles for when the mouse hovers over the link */
  color: var(--accent);
  font-weight: bold;
}

a:active {
  /* Styles for when the link is clicked */
  color: var(--primary-dark);
}

select {
  display:flex;
  max-width: 97%;
  padding-left:5px!important;
  padding-right:5px!important;
  margin-left:5px!important;
  margin-right:5px!important;
}

input.anvil-component, select.anvil-component, textarea.anvil-component {
  margin-left: 10px;
  margin-right: 5px;
  padding-left: 5px;
  padding-right: 5px; /* Reduced padding-right to avoid cutting off content */
  box-sizing: border-box; /* Ensures padding is included in the total width of the element */
  width: calc(100% - 30px); /* Adjust width to account for padding and margins */
}

input.anvil-component:hover, textarea.anvil-component:hover {
  outline: 4px solid var(--accent);
  outline-offset: 0px; /* You can adjust or remove this property based on your design needs */
  /*transform: scale(0.95);*/
}

.anvil-component select:hover, .anvil-datepicker input:hover {
  outline: 4px solid var(--accent);
  transform: scale(0.95);
}

input.anvil-component:focus, textarea.anvil-component:focus {
  outline: 6px solid var(--accent);
  outline-offset: 0px; /* You can adjust or remove this property based on your design needs */
  transform: scale(0.95);
}

.anvil-component select:focus, .anvil-datepicker input:focus {
  /*transform: scale(0.95);*/
  outline: 6px solid var(--accent);
}

.checkbox, .radio {
  cursor: pointer;
}

/* Component: CheckBox, RadioButton */
.checkbox input, .radio input {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  transform: scale(2);
  border-radius: 1px;
  box-shadow: 0 0 0 1pt black;
  background-color: var(--background);
  /* color: %color:Gray 600%; */
}

.checkbox input, .radio input {
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox input:checked, .radio input:checked {
  background-color: var(--secondary);
  box-shadow: 0 0 0 1pt var(--primary-light);
  color: var(--on-background);
}

.checkbox input:checked:before {
  font-family: "FontAwesome";
  content: "\f00c";
  font-size: 10px;
}

.radio input:checked:before {
  font-family: "FontAwesome";
  content: "\f111";
  font-size: 8px;
}

.checkbox, .radio {
  text-indent: 15px;
  font-size: 16px;
}

.radio input {
  border-radius : 50%;
}

.checkbox input:hover, .radio input:hover {
  background: var(--accent);
}

.checkbox input:focus, .radio input:focus {
  outline: 2px solid var(--accent)
    transform: scale(0.95);
}

.radio input:focus {
  border-radius: 10px;
}

.anvil-label>.label-text, a>.link-text {
  display: inline-block;
  padding-bottom: 5px;
  padding-top: 5px;
  white-space: pre-wrap;
}

.top-nav .hamburger-menu {
  margin-right: auto;
}

.top-nav {
  background-color: var(--primary-medium);
  border-bottom-right-radius: 20%;
  border-bottom-left-radius: 20%;
  padding-right: 15px;
  color: white;
  display: flex;
  align-items: center;
  padding: 14px 16px;
  box-shadow: 0px 3px 3px 0px rgba(103, 99, 163, 0.6); /* Glow effect on the bottom edge */
  position: sticky; /* Changed from 'relative' to 'sticky' */
  top: 0; /* Stick to the top */
  z-index: 9999; /* Ensure it's above other elements */
}

.top-nav a {
  display: block;
  color: white;
  text-align: center;
  padding-top: 0.5px;
  padding-bottom: 0.5px;
  padding-left: 10px;
  padding-right: 10px
text-decoration: none;
}

/* Grow on hover */
.top-nav a:hover {
transform: scale(1.05);
color: var(--accent)
}

.icon {
display: none;
}

.hamburger-menu {
cursor: pointer;
font-size: 24px;
border: none; /* Removes the default button border */
background-color: transparent;
}

.hamburger-menu:hover {
transform: scale(1.2);
color: var(--accent);
}

.hamburger-menu[aria-expanded="true"]::before {
content: "\2715"; /* Change icon to 'X' or similar when menu is open */
}

.hamburger-menu img {
width: 40px; /* or any size that fits your design */
height: auto; /* maintain aspect ratio */
cursor: pointer; /* to show it's clickable */
}

.pop-out-menu {
display: block;
background-color: var(--primary-dark);
position: fixed;
border-top-right-radius: 30%;
border-bottom-right-radius: 30%;
padding-top: 40px;
padding-right: 30px;
top: 52px;
left: 0;
transition: left 0.3s ease;
height: calc(100% - 52px);
width: 200px;
z-index: 100;
box-shadow: 3px 0px 3px 0px rgba(103, 99, 163, 0.6); /* Glow effect on the right edge */
}

.pop-out-menu a {
float: none;
background-color: var(--primary-dark);
color: white;
padding: 1px 16px; /* Updated padding */
padding-left: 20px;
text-decoration: none;
display: block;
text-align: left;
}

.pop-out-menu a:hover {
color: var(--accent);
}

.pop-out-menu.visible {
display: block;
left: 0;
}

.main-container {
display: grid;
grid-template-columns: 85% 15%;
gap: 10px;
padding: 10px;
padding-bottom:30px;
margin-bottom: 50px;
overflow-y: auto;
overflow-x:hidden;
}

.main-container-secondary {
display: grid;
grid-template-columns: 1fr; /* Updated to a single column */
gap: 10px;
padding: 10px;
padding-bottom:30px;
margin-bottom: 50px;
}

.container-full {
background-color: var(--background);
padding: 20px;
overflow-y: auto; /* Adds scroll to the container if the content is taller than the container */
overflow-x: hidden;
height: calc(100vh - 50px - 3px - 40px); /* Adjusted height to consider top navigation height */
}

.content-wrap-secondary {
transition: margin .3s;
margin-left: 200px; /* Shifted by default */
margin-right: 0;
}


.container-70, .container-30 {
background-color: var(--background);
padding: 20px;
}

.breadcrumbs-container {
padding-top: 10px; /* Add some space above the breadcrumbs */
text-align: right; /* Aligns the breadcrumbs to the right */
}

.container-30 {
background-color: var(--grey);
color: var(--on-background);
padding-top: 90px; /* Increased padding-top to push content down inside the container */
padding-left: 40px;
padding-right: 10px;
border-top-left-radius: 30%;
border-bottom-left-radius:60%;
box-shadow: 0px 0px 10px 2px rgba(103, 99, 163, 0.2); /* Subtle glow effect all around with rgba */
height: calc(100vh - 50px - 3px - 40px); /* Adjusted height to consider top navigation height */
overflow-y: auto; /* Adds scroll to the container if the content is taller than the container */
overflow-x: hidden;
margin-top: -40px; /* Negative margin to extend behind top nav */
box-sizing: border-box; /* Ensure padding is included in the total height */
}

.container-30:hover {
color: var(--accent);
}

.footer-section {
display: flex;
justify-content: space-between;
background-color: var(--primary-light);
padding: 20px;
padding-left: 210px;
padding-right: 30px;
border-top-right-radius: 30%;
border-top-left-radius: 30%;
box-shadow: 0px -3px 3px 0px rgb(103, 99, 163, 0.6); /* Glow effect on the top edge with --accent color */
position: relative; /* Needed if you want to use z-index */
z-index: 2; /* Ensure the shadow is above other elements if necessary */
}

.footer-column {
width: calc(50% - 20px);
padding-left: 20px;
color: white;
text-align: center;
}

.copy-right-bar {
background-color: var(--secondary);
color: var(--on-background);
text-align: right;
font-size: 12px;
padding: 10px;
width: auto;
height: 40px;
bottom: 0;
left: 0;
right: 0;
position: fixed;
}

.copy-right-bar-secondary {
background-color: var(--secondary);
color: var(--on-background);
text-align: right;
font-size: 12px;
padding: 10px;
width: auto;
height: 40px;
bottom: 0;
left: 0;
right: 0;
position: fixed;
}

.footer-wrapper {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 90;
}

.footer-wrapper .copy-right-bar {
position: static;
z-index: 90;
overflow-x: hidden;
overflow-y: hidden;
}

body.menu-open .footer-wrapper {
margin-left: 200px;
}

.content-wrap {
transition: margin .3s;
margin-left: 200px; /* Shifted by default */
margin-right: 0;
}

body.menu-open .content-wrap {
margin-left: 200px;
padding-left:10px;
}

/* Show hamburger menu on small screens */
@media (max-width: 600px) {

.top-nav a {
display: none;
}

.hamburger-menu {
display: block;
}

.pop-out-menu {
display: block !important;
}

}

@media (min-width: 1300px) {
.main-container {
display: grid;
grid-template-columns: 90% 10%;
gap: 10px;
padding: 10px;
overflow-y: auto;
overflow-x: hidden;
}
}

@media (max-width: 1000px) {
.footer-section {
display: none;
}
}

@media (max-height: 1500px) {
.footer-section {
display: none;
}
}

@media (max-width: 960px) {
/* Styles for screens smaller than or equal to 600px */

.top-nav {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 20%;
}

.top-nav a {
display: none;
}

.hamburger-menu {
display: block;
}

.pop-out-menu {
display: block; /* Ensure menu can be displayed */
left: -200px; /* Initially position menu off the screen */
}

.main-container {
grid-template-columns: 1fr;
margin-right:5px;
margin-left:5px;
overflow-y: auto;
overflow-x: hidden;
}

.container-70, .container-30 {
width: 100%;
margin-top: 0; /* Reset negative margin */
padding-top: 20px; /* Adjust padding for mobile */
height: auto; /* Reset height to auto for flexibility */
border-top-left-radius: 10%; /* Optional: adjust border-radius for mobile */
}

.container-30 {
border-radius: 10px;
}

.footer-section {
display: none;
}

.content-wrap {
margin-left: 0; /* Reset margin */
padding-left: 0; /* Reset padding */
}
}

#loadingSpinner {
width: 100x;
height: 100px;
z-index: 9999999;
background-image: url(spinner.gif) !important;
position: fixed; /* Ensure it's always fixed relative to the viewport */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Center it */
}

@media (max-width: 767px) {
#loadingSpinner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}

/* Splash Screen Styles */
#splashScreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: var(--background);
}

.peel {
position: absolute;
width: 100%;
height: 100%;
}

.peel1 {
background-color: var(--primary-dark);
animation: peelAway 3s 0s forwards;
clip-path: circle(0% at 100% 0%);
}

.peel2 {
background-color: var(--primary-medium);
animation: peelAway 3s 1s forwards;
clip-path: circle(0% at 0% 100%);
}

.peel3 {
background-color: var(--primary-light);
animation: peelAway 3s 2s forwards;
clip-path: circle(0% at 100% 100%);
}

@keyframes peelAway {
to {
clip-path: circle(150% at 50% 50%);
}
}

.modal-content {
border-bottom-left-radius: 50px;
border-bottom-right-radius: 100px;
box-shadow: 0px 3px 3px 0px rgba(103, 99, 163, 0.6); /* Glow effect on the bottom edge */
z-index:9999;
}

.modal-header {
padding-top: 50px;
padding-left: 15px;
border-bottom: 3px solid var(--primary-dark);
}

.modal-body {
position: relative;
padding-top: 15px;
padding-left:15px;
margin: 20px;
}

.modal-body.alert-text, .modal-title.alert-title {
padding: 15px;
}

.modal-footer {
display: flex; /* Use flexbox */
align-items: center; /* Center vertically */
justify-content: center; /* Center horizontally */
padding-bottom: 30px;
padding-right: 25%;
padding-left: 10%;
border-top: 0;
}

/* Notifications */
body>div[data-notify="container"] {
background: var(--secondary);
border: none;
padding: 24px;
border-bottom-left-radius: 20%;
border-bottom-right-radius: 30%;
box-shadow: 0px 0px 10px 2px rgba(103, 99, 163, 0.2); /* Subtle glow effect all around with rgba */
z-index:9999;
}

body>div[data-notify="container"]>span[data-notify="title"] {
display: block;
font-size: 18px;
font-weight: 500;
padding-top: 60px;
color: var(--on-background);
}

body>div[data-notify="container"]>span[data-notify="message"] {
display: block;
padding: 20px 0 0;
padding-bottom: 20px;
font-size: 16px;
color: var(--on-background);
}

body>div[data-notify="container"].alert-success{
background-color: var(--success);
}

body>div[data-notify="container"].alert-success>span[data-notify="title"]{
color: %var(--on-background);
}

body>div[data-notify="container"].alert-danger{
background-color: var(--danger);
}

body>div[data-notify="container"].alert-danger>span[data-notify="title"]{
color: var(--on-background);
}

body>div[data-notify="container"].alert-warning{
background-color: var(--warn);
}

body>div[data-notify="container"].alert-warning>span[data-notify="title"]{
color: var(--on-background);
}

button.close > span, button.close {
color:var(--accent);
text-shadow: 0 1px 0 var(--on-background);
}

/* Data Grid Header */

.anvil-data-grid {
margin-left: 10px;
margin-right: 10px;
}


.anvil-data-grid > .data-grid-child-panel > div.auto-grid-header {
background-color: var(--background); /* Header background color */
color: var(--primary-dark); /* Header text color */
border-bottom: 2px dashed var(--primary-medium); /* Header bottom border color */
padding: 10px; /* Header padding */
font-weight: bold; /* Header font weight */
}

/* Data Grid Rows */
.anvil-data-row-panel {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
background-color: var(--background); /* Row background color */
border-bottom: 1px dashed var(--primary-medium); /* Row bottom border color */
margin-left: 10px;
margin-right: 10px;
padding: 10px; /* Row padding */
align-items: center; /* Align items in the row to the center */
}

/* Data Grid Row on hover */
.anvil-data-row-panel:hover {
background-color: var(--grey); /* Row background color on hover */
color: var(--primary-dark);
}

/* Data Grid Cell */
.anvil-data-grid-cell {
margin: 5px; /* Cell margin */
padding: 5px; /* Cell padding */
border-radius: 5px; /* Cell border radius */
background-color: var(--accent); /* Cell background color */
color: var(--on-background); /* Cell text color */
}

/* Data Grid Cell on hover */
.anvil-data-grid-cell:hover {
background-color: var(--grey); /* Cell background color on hover */
color: var(--background);
}

.designer .anvil-data-row-panel>.data-row-col>.anvil-designer-col-value-preview {
font-style: italic;
color: var(--primary-medium);
padding: 10px 0px;
}

/*Plots*/

div.plot-container.plotly svg.main-svg {
box-shadow: 0px 0px 10px 2px rgba(103, 99, 163, 0.2); /* Subtle glow effect all around with rgba */
border-radius: 12px;
}

.plot-container.plotly .main-svg .parcoords .y-axis .axis .tick > text {
text-shadow: none !important;
}

.plot-container.plotly .main-svg .parcoords .y-axis .axis > path.domain {
stroke: var(--primary-medium);
}

.anvil-role-display {
font-size: 57px;
line-height: 64px;
font-weight: 400;
}

.anvil-role-headline {
font-size: 32px;
line-height: 40px;
font-weight: 400;
}

.anvil-role-title {
font-size: 22px;
line-height: 28px;
font-weight: 500;
}

.anvil-role-body {
font-size: 14px;
line-height: 20px;
font-weight: 400;
}

.anvil-role-input-prompt {
font-size: 16px;
line-height: 1.5;
}

.anvil-role-inset {
border-left: 5px solid;
border-radius: 0px;
color: var(--on-background);
text-align: left;
font-weight: 700;
padding-left: 20px;
border-color: var(--primary-medium);
}

.anvil-role-success {
border-left: 5px solid;
border-radius: 0px;
color: var(--on-background);
text-align: left;
font-weight: 700;
padding-left: 20px;
border-color: var(--success);
}

.anvil-role-warning {
border-left: 5px solid;
border-radius: 0px;
color:var(--on-background);
text-align: left;
font-weight: 700;
padding-left: 20px;
border-color: var(--warn);
}

.anvil-role-error {
border-left: 5px solid;
border-radius: 0px;
color:var(--on-background);
text-align: left;
font-weight: 700;
padding-left: 20px;
border-color: var(--danger);
}

.anvil-role-outlined-card {
  border-radius: 20px;
  background-color: var(--grey);
  color: var(--primary-dark);
  border: solid 2px var(--secondary);
  box-shadow: 0px 3px 3px 0px rgba(103, 99, 163, 0.6);
  padding: 20px;
  margin: 10px;

  /* --- Text wrapping and responsiveness --- */
  word-wrap: break-word;        /* Legacy but safe */
  overflow-wrap: break-word;    /* Modern spec */
  white-space: normal;          /* Allow line breaks */
  hyphens: auto;                /* Nice word breaking for long text */
}

/* Mobile-first responsive typography */
@media (max-width: 768px) {
  .anvil-role-outlined-card {
    padding: 15px;
    font-size: 0.95rem;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .anvil-role-outlined-card {
    padding: 10px;
    font-size: 0.9rem;
    line-height: 1.4;
  }
}


.anvil-role-inset-column {
padding-left: 50px;
padding-right: 10px;
margin-left: 10px;
margin-right: 10px;
}

.anvil-column-panel {
padding-left:5px;
}

.anvil-role-img-glow {
box-shadow: 0 0 8px white; /* X-offset, Y-offset, Blur radius, and Color */
}

.anvil-role-outlined-button > .btn, .anvil-role-outlined-button.file-loader>label {
background-color: var(--grey);
color: var(--on-background);
border: solid 2px var(--primary-dark);
display: inline-block;
margin-left:0;
margin-right: 10px;
margin-top:10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
text-align: center;
text-decoration: none;
}

.anvil-role-outlined-button > .btn:hover, .anvil-role-outlined-button.file-loader>label:hover {
background-color: var(---primary-dark);
outline: 6px solid var(--accent);
transform: scale(0.9);
}

.anvil-role-outlined-button > .btn:focus, .anvil-role-outlined-button > .btn:active,
.anvil-role-outlined-button.file-loader>label:focus, .anvil-role-outlined-button.file-loader>label:active{
outline: 2px solid var(--accent);
transform: scale(0.9);
}

.anvil-role-error-button > .btn, .anvil-role-error-button.file-loader>label {
background-color: var(--danger);
color: var(--grey);
border: solid 2px var(--primary-dark);
display: inline-block;
margin-left:0;
margin-right: 10px;
margin-top:10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
text-align: center;
text-decoration: none;
}

.anvil-role-error-button > .btn:hover, .anvil-role-error-button.file-loader>label:hover {
background-color: var(---grey);
color: var(--on-background);
outline: 6px solid var(--accent);
transform: scale(0.9);
}

.anvil-role-error-button > .btn:focus, .anvil-role-error-button > .btn:active,
.anvil-role-error-button.file-loader>label:focus, .anvil-role-error-button.file-loader>label:active{
outline: 2px solid var(--accent);
transform: scale(0.9);
}

.anvil-role-pill {
display: inline-block;
border-radius: 5px;
font-size: 10px;
padding-left: 10px;
padding-right: 10px;
text-transform: uppercase;
text-align: center;
background: var(--accent);
color: var(--background);
white-space: nowrap;
}

.anvil-role-local-pill {
display: inline-block;
border-radius: 5px;
font-size: 10px;
padding-left: 10px;
padding-right: 10px;
text-transform: uppercase;
text-align: center;
background: var(--success);
color: var(--on-background);
white-space: nowrap;
}

/*Plots*/

div.plot-container.plotly svg.main-svg {
border: 1px solid %color:primary-dark%;
border-radius: 12px;
}

.plot-container.plotly .main-svg .parcoords .y-axis .axis .tick > text {
text-shadow: none !important;
}

.plot-container.plotly .main-svg .parcoords .y-axis .axis > path.domain {
stroke: %color:grey%;
}

::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent */
}

canvas {
display: flex;
border: 2px dashed;
border-radius: 10px;
padding:10px;
}

canvas:hover {
outline: 4px solid var(--accent);
transform: scale(0.95);
}

canvas:focus {
outline: 2px solid var(--accent);
}

/* Anvil Role: Messages from Me */
.anvil-role-from-me {
display: inline-block;
max-width: 75%;
margin: 0.25rem 0;
padding: 0.5rem .875rem;
background-color: var(--primary-light);
color: #fff;
border-radius: 1.15rem;
text-align: left;
font-size: 14px; /* Adjusted for better readability */
word-wrap: break-word;
align-self: flex-end;
}

/* Anvil Role: Messages from Them */
.anvil-role-from-them {
display: inline-block;
max-width: 75%;
margin: 0.25rem 0;
padding: 0.5rem .875rem;
background-color: var(--grey);
color: #000;
border-radius: 1.15rem;
text-align: left;
font-size: 14px; /* Adjusted for better readability */
word-wrap: break-word;
align-self: flex-start;
}

/* Optional: Adjustments for smaller screens */
@media screen and (max-width: 800px) {
.anvil-role-from-me, .anvil-role-from-them {
padding: 0.4rem 0.7rem; /* Slightly reduced padding */
}
}