/* Professional Conservation App Color Scheme */
:root {
    --primary-color: #176F75;
    --primary-hover: #1a7b82;
    --primary-light: #d8f5f7;
    --primary-medium: #83edf5;
    --primary-dark: #0d5459;
    --secondary-color: #6c757d;
    --background-color: #fafbfc;
    --card-background: #ffffff;
    --border-color: #176F75;
    --text-primary: #176F75;
    --text-secondary: #5a6c7d;
    --text-muted: #8492a6;
    --selected-color: #c44100;
    --success-color: #27ae60;
    --warning-color: #f39c12;
    --warning-light: #f5cc8a;
    --danger-color: #e74c3c;
    --danger-light: #e69187;
    --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-strong: 0 10px 25px rgba(0, 0, 0, 0.1);
    --border-radius: 5px;
    --border-radius-large: 5px;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Minion Pro', Georgia, 'Times New Roman', serif;
}

/*
    This is necessary to enable wait-overlay, etc.
    display:flex must be accompanied by height, width. o'e content shrinks.

    It appears that setting the height of the primary content items sets the
    height of the body. Those are the map, header, and footer.
*/
html, body
{
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  color: #006054;
  margin-top: unset;
  margin-bottom: unset;
  font-weight: unset;
  line-height: unset;
}
a {
  color: #c44100;
  text-decoration: underline;
}
a:hover {
  color: #c44100;
  text-decoration: underline;
  cursor: pointer;
}
button {
  color: #006054;
  background-color: white;
  border: 1px solid #006054;
  border-radius: 8px;
  cursor: pointer;
}
label {
    font-size: 16px;
    font-weight: 600;
}
li {
    font-size: 16px;
    font-weight: 500;
}
input {
    font-size: 24px;
    font-weight: 600;
    border:  #006054 1px solid;
    background-color: white;
    border-radius: 8px;
    padding: 5px 5px;
}
select {
    font-size: 24px;
    font-weight: 600;
    padding: 5px 5px;
    margin-bottom: 5px;
}
button {
    font-size: 24px;
    font-weight: 600;
    padding: 5px 5px;
    border:  #006054 1px solid;
    border-radius: 8px;
}
.content-row {
  padding: 2px;
}

.divider-header {
    width: 100%;
    margin-bottom: 5px;
}
/* Default Button Styling */
.default-button {
    font-weight: bold;
    border: 3px solid orange !important;
}

.info-icon {
    height: 30px;
}
#wait-overlay {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 90000;
    background-color:lightgrey;
    opacity: 70%;
    text-align: center;
}
#wait-overlay i {
    margin: 0;
    position: absolute;
    top: 40%;
    -ms-transform: translateY(-40%);
    transform: translateY(-40%);
}
  
.light-foreground {
    color: #006054;
}
div.controls {
    color: #006054;
    background-color: white;
}
.header-title {
    height: 100%;
    width: 100%;
    margin: auto;
    text-align: center;
    /*font-size: 18px;*/
}

/* 
    Next 3 items define appearance of target button at end of text input 
    NOTE: the input it overlays needs width: 100% for this to work.
*/
.button-inside { /*div containing text-input and button clipped to end*/
    position: relative;
}
.target-location { /*button clipped to end of text-input*/
    position: absolute;
    top: 4%; /* Adjust b/c we make borders 3px for invalid required fields. */
    right: 1%;
    border-radius: 8px;
    z-index: 2;
    border: none;
    height: 92%; /* Adjust to 100-2*(top). This works if lake-location div class, above, is not also 100% */
    width: 50px;
    cursor: pointer;
}
.target-location img {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
}

/*
    Define the appearance of required fields
*/
input:invalid {
    background-color: #ffdddd;
    border-color: red;
    border-style: solid;
    border-radius: 8px;
}

select:invalid {
    background-color: #ffdddd;
    border-color: red;
    border-style: solid;
    border-radius: 8px;
}
/*
input[type="checkbox"]:invalid {
    background-color: #ffdddd;
    border-color: red;
    border-style: solid;
    border-radius: 8px;
}
  
input[type="checkbox"]:invalid {
    outline: 2px solid red;
}
*/
input[type="checkbox"]:invalid + .checkbox-label {
    color: red;
}

.logo-vce {
    background-color: white;
    width: 250px;
    padding-right: 0;
    margin-right: 0;
}

/* info-text and info-icon styles */

.label-with-info {
    display: inline-flex;
    position: relative;
    font-size: large;
    font-weight: 600;
}
  
.label-info-icon {
    width: 20px;
    height: 20px;
    background-color: lightblue;
    border-radius: 50%;
    border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    color: blue;
    font-weight: bold;
    cursor: pointer;
    margin-left: 5px;
}

.info-text,
.help-text {
    display: none;
    position: absolute;
    color: white;
    background-color: black;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    margin: 20px;
    z-index: 10000;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    font-size: large;
    }

/* 
    some items in the title bar and filter bar need vertical-offset info 
    because the mouseover text paints on top of them
*/
.filter-info {
    top: 60px;
    left: 0;
    margin: 0;
}

/* 
    hack to make the page title mouseover not overpaint itself 
    this looks awful but at least it works
*/
.title-info {
    top: 60px;
}

.info-text.show,
.help-text.show {
    display: block;
    visibility: visible;
}

.header-name {
    display: inline;
    height: 100%;
    margin-top: 5px;
    font-size: 18px;
    vertical-align: middle;
}

.info-icon-svg {
    width: 22px;
    height: 22px;
    fill: #006054; /*aka #006054*/
    cursor: pointer;
    vertical-align: middle;
    padding-bottom: 3px;
}

.project-radio-group {
    display: flex; /* Arrange buttons horizontally */
    gap: 10px;      /* Spacing between buttons */
}

.project-radio {
    width: 5vw;
    min-width: 60px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px 5px; /* Padding inside buttons */
    border: 1px solid #006054; /* Border for buttons */
    border-radius: 8px;    /* Rounded corners */
    cursor: pointer;        /* Make buttons clickable */
    color: #006054;
    background-color: white; /* Light background color */
}

.project-radio.selected { /* Style for selected button */
    background-color: #006054; /* Slightly darker background when selected */
    color: white;
    border-color: black 3px;
}

.button-container {
    margin-top: 10px;
    margin-bottom: 10px;
}


.exit-button {
    background: none;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.exit-button:hover {
    background-color: var(--primary-light);
}