html {
    color: #75787B;
    font-family: 'AvenirLTStd-Heavy';
    font-size: 16px;
}        

body {
    overflow: hidden; 
}
/*body {
    font-family: AvenirLTStd-Heavy;
    font-size: 16px;
    font-weight: normal;
    overflow: hidden; 
    padding-top: 0px;
}*/

button {
    background-image: linear-gradient(to bottom, #fff, #e0e0e0 100%);
    border: 1px;
    border-color: rgb(204,204,204);
    border-radius: 5px;
    font-family: inherit;
    height: 34px;
}    

div {
    color: black
}        

input, textarea {
    font-family: inherit;
}        

label {
    color: black
}        

select {
    border-radius: 5px;
    font-family: inherit;
    height: 34px;
    width: auto;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}        

td, td *, th {
    /*color: #75787B !important; override DIV color */
} 

th {
    background-color: rgba(86,192,201,0.5);
    padding-bottom: 8px;
    padding-top: 8px;
    text-align: left;
}   

th, td {
    border: none;
    padding-left: 8px;
    margin: 0;
}

tr:hover {
    background-color: rgb(245,245,245);
}        

.accordion-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 10px;
    transition: max-height 0.3s ease-out;
}    

.accordion-content.open {
    max-height: 100%; /* has to be 100%, not 100vh, to avoid truncating display of very long tables eg. Users batch*/
    padding: 10px;
}        

.accordion-item {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 5px;
    padding: 10px;
    text-decoration: none !important;
}    

.accordion-item:hover {
    background: #f0f0f0;
}    

.dropdown-button {
    background-color: #3498db;
    border: none;
    border-radius: 0px;
    color: white;
    cursor: pointer;
    font-size: 16px;
    outline: none;
    padding: 10px 15px;
}    

.dropdown-button:hover {
    background-color: #2980b9;
}    

.dropdown-container {
    position: relative;
}  

/* 2025-08-11 fix for Safari */
.dropdown-container:focus-within .dropdown-menu,
.dropdown-container:hover .dropdown-menu {
    display: block;
}

/*.dropdown-container:focus-within .dropdown-menu {
    display: block;
}*/   
  
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -50%; /* start in previous column; wow */
    background-color: white;
    border: 1px solid #ccc;
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
    width: 150%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 10;
}    

.dropdown-menu li {
    padding: 10px;
    border-bottom: 1px solid #eee;
}    
  
.dropdown-menu li:last-child {
    border-bottom: none;
}    
  
.dropdown-menu li a {
    text-decoration: none;
    color: #333;
    display: block;
}    
  
.dropdown-menu li:hover {
    background-color: #f1f1f1;
}

.nb-activity-column {
    padding-right: .5vw;
    white-space: nowrap;
    width: 1px;
}    

.nb-big-margin {
    margin-left: 10vw;
    margin-right: 10vw;
}        

.nb-black {
    color: black !important;
}

.nb-block {
    display: block;
}

.nb-center {
    text-align: center;
}

.nb-cursor-pointer {
    cursor: pointer;
}

.nb-dark {
    color: black;
}

.nb-datepicker-input {
    flex-grow: 1;
    border: 1px solid grey;
    border-radius: 5px;
    box-sizing: border-box;
    height: 34px;
    margin-right: -1px;
    padding: 0 10px;
    width: 100%;
}

.nb-datepicker-button {
    align-items: center;
    background: #f8f8f8;
    border: 1px solid grey;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    height: 34px;
    justify-content: center;
    padding: 0 10px;
    white-space: nowrap;
}

.nb-datepicker-div {
    align-items: center;
    display: flex;
    gap: 0px;
    width: 100%;
}

.nb-datepicker-td {
    margin: 0;
    padding: 0;
    width: 100%;
}

.nb-dim {
    color: #75787B;
}        

.nb-div-top {
    margin-top: 20px;
}    

.nb-dropdown-button {
    background-image: linear-gradient(to bottom, rgb(51,122,183) 0, rgb(38,90,136) 100%);
    border-radius: 0px; /* temporary */
    color: white;
}

.nb-error-color {
    color:red !important;
}

.nb-false-positive-false {
    border-radius:.5vh;
    border-style: solid;
    font-size: 6vh;
    border-width: 1px;
    height: 6vh;
    width: 6vh;
}

.nb-false-positive-note-icon {
    font-size: 7vh;
    height: 7vh;
    width: 7vh;
    vertical-align:top;
}

.nb-false-positive-true {
    font-size: 7vh;
    height: 7vh;
    width: 7vh;
    color: green !important;
    vertical-align:top;
}

.nb-file-control {
    width: 400px
}

.nb-flex-inner {
    display: flex;
    flex: 1 1 20%;
    flex-direction: column;
    gap: .8rem;
}

.nb-flex-news {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
}        

.nb-flex-outer {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}    

.nb-green {
    color: green;
}

.nb-hidden {
    visibility: hidden;
}

.nb-horizontal {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
}

.nb-inline {
    display: inline-block;
}

/* for eg. the Activity display inside some table rows */
.nb-inline-table {
    margin:auto;
    width:50%
}

.nb-input {
    border: 1px solid grey;
    border-color: rgb(204,204,204);
    border-radius: 5px;
    box-sizing: border-box;
    height: 34px;
    padding-bottom: 0px;
    padding-left: 10px;
    padding-top: 0px;
    width: 100%
}    

.nb-input-admin {
    border-color: rgb(204,204,204);
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    padding-left: 10px;
    box-sizing: border-box;
    height: 34px;
    padding-bottom: 0px;
    padding-top: 0px;
}        

.nb-input-auto {
    width: auto;
}        

.nb-input-narrow {
    width: 25%;
}            

.nb-link {
    color: rgb(51,122,183);
    text-decoration: none;
}            

.nb-margin-bottom {
    margin-bottom: 1rem;
}

.nb-margin-top {
    margin-top: 5rem;
}

.nb-menu-li {
    display: inline-block;
    margin-right: 10px;
}    

.nb-menu-ref {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}    

.nb-more-button {
    background-color: rgba(86,192,201,.5);
    background-image: none; /* override button definition */
    color: #75787B;
    font-family: AvenirLTStd-Heavy;
    font-size: 16px;
    margin-bottom: 2px;
    width:100%; 
}    

.nb-no-padding {
    padding: 0;
}

.nb-note-textarea {
    height: 54px;
    padding: 1vh;
    width: 98.7%;
}

.nb-report {
    align-items: flex-start;
    width: 25%;
}

.nb-scrolly {
    height: 85vh; /* todo */
    overflow-x: hidden;
    overflow-y: auto;
}

.nb-scrolly-big {
    height: 100vh; /* todo */
    overflow-x: hidden;
    overflow-y: auto;
}

.nb-search-header {
    border-spacing: 0px;
    margin: 0 auto;
    width: 65%;
}

.nb-search-output {
    margin-left: 0px;
    margin-right: 0px;
}

.nb-select {
    align-self: start; /* important when inside nb-flex-inner */
    width: auto;
}

.nb-spiral {
    float: left;
    height: 78px;
    width: 85px;
}

.nb-stacked {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}        

.nb-stacked-label {
    margin-bottom: -.8rem;
}

.nb-stacked-label-cancel {
    margin-bottom: .8rem;
}

.nb-table {
    border-collapse: collapse;
    width: 100%;
}        

.nb-table td {
    border-bottom-color: rgb(221,221,221);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    line-height: 1.4;
    padding-bottom: 8px;
    padding-top: 8px;
    vertical-align: top;
}        

.nb-table tr:last-child td {
    border-bottom: none;
}        

.nb-table-activity {
    line-height: 4vh;
    padding-left: .5vw;
    width: 100%; 
}    

/* for EID form which looks weird without a title. Maybe ALL forms should have a title. */
.nb-tablelike-title {
    background-color: rgba(86, 192, 201, .5);
    height:34px;
    line-height:34px;
    padding-left: 10px;
}

.nb-td-25 {
    width: 12.5%
}    

.nb-td-left {
    margin: 0px;
    padding: 0px;
}        

.nb-td-middle {
    margin: 0px;
    padding: 0px;
}        

.nb-td-right {
    margin: 0px;
    padding: 0px;
}        

.nb-top-menu {
    color:  #75787B; 
    float: right;
    padding: 0;
    padding-right: .4vw;
    list-style: none;
    text-align: right;
}

.nb-trash {
    font-family: 'FontAwesome';
    content: "\f1f8";
}    

.nb-white-button {
    color: white !important
}

.nb-wide-button {
    background-image: linear-gradient(to bottom, #fff, #e0e0e0 100%);
    border: 1px solid grey;
    border-color: rgb(204,204,204);
    border-radius: 5px;
    box-sizing: border-box;
    height: 34px;
    padding-bottom: 0px;
    padding-left: 10px;
    padding-top: 0px;
    width: 100%
}    

.nb-width-20 {
    width: 20%
}        

.nb-width-40 {
    width: 40%
}        

.nb-width-80 {
    max-width:80vw;
}    

.nb-width-100 {
    width: 100%;
}        

.upload-list {
    list-style-type: none
}    

.upload-list li input {
    margin-right: 10px
}

.password-container {
    position: relative;
    display: inline-block;
    position: relatve;
    width: 25%;
}
.nb-input-pw {
    width: 100%;
    padding-right: 35px; /* Space for button */
}
.toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    outline: none;
}
.strength-meter { height: 8px; width: 25%; background: #ddd; margin-top: 5px; border-radius: 4px; }
.strength-bar { height: 100%; width: 0%; border-radius: 4px; transition: width 0.3s; }
.weak { background-color: red; }
.medium { background-color: orange; }
.strong { background-color: green; }