/* LOGINPAGE ################################################################ */
/* Password */
/* ──────────────────────── ANNOTATOR LAYOUT ─────────────────────── */

/* ==========  LAYOUT  ========== */
#annotator{display:flex;align-items:flex-start}

.sidebar {
    width: 260px;
    margin: 0 1.4rem 0 1rem;
    flex-shrink: 0;
    /* Add padding to push content below the header */
    padding-top: 70px;
    box-sizing: border-box;
}

/* Sidebar vertical spacing for annotator */
.sidebar-section, .mb-section { margin-bottom: 1.2rem !important; }
.mt-navbar { margin-top: 2.0rem !important; }  /* or adjust to taste */

/* To prevent double margins, you can add: */
.sidebar .mb-section:last-child { margin-bottom: 0 !important; }

#example-wrapper{
    width:260px;height:220px;background:#000;
    overflow:hidden;border:1px solid #444
}
#example-wrapper img{width:100%;height:100%;object-fit:contain;display:block}

#example-desc{
    height:30px;padding:4px 6px;margin:8px 0;
    background:#daf7b4;color:#294900;font-size:.85rem;
    overflow:hidden;border:1px solid #aacb86
}

.chk-hotkeys{color:#fff;margin-bottom:6px}

/* feature list ---------------------------------------------------- */
#feature-buttons{display:flex;flex-direction:column}

.feat-btn{
    display:flex;align-items:center;
    border-left:6px solid transparent;border-radius:0;
    text-align:left;white-space:nowrap
}
.feat-btn:first-child{border-top:1px solid #888;border-top-left-radius:4px;border-top-right-radius:4px}
.feat-btn:last-child {border-bottom:1px solid #888;border-bottom-left-radius:4px;border-bottom-right-radius:4px}

.feat-btn.available{background:#b1db7c}
.feat-btn.full     {background:#da7a7a}

.btn-dot  {width:10px;height:10px;border-radius:50%;margin:0 6px 2px 4px}
.btn-label{margin-left:.35rem}

#btn-non-cattle{background:#F7D255;color:#000}
#btn-save-next {margin-top:.8rem;width:100%}

/* viewer ----------------------------------------------------------- */
.viewer{
    flex:1;height:calc(100vh - 70px);
    background:rgba(0,0,0,.25);backdrop-filter:blur(8px);
    overflow:hidden
}
.viewer canvas{background:transparent}

/* overlay markers -------------------------------------------------- */
.osd-marker{position:absolute;pointer-events:none;transform:translate(-4px,-4px)}
.osd-marker .dot{width:8px;height:8px;border-radius:50%;display:block}
.osd-marker .lbl {
    position: absolute;
    left: 10px; top: -9px;
    font: bold 16px/1 Arial, sans-serif;
    color: #fff;
    /* Thicker white text, thinner black outline: */
    -webkit-text-stroke: 0.5px #fff;
    text-shadow:
        -2px -2px 0 #000,
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000;
    padding: 1px 6px;
    background: transparent;
}


#password-showhide{
    color: #294900;
}
#password-showhide:hover{
    cursor: pointer;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 20px 0px #294900;
    -moz-box-shadow:    0px 0px 20px 0px #294900;
    box-shadow:         0px 0px 20px 0px #294900;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
/* Interface */
.login_centered{
  margin-top: 15px;
}
.login-error > p{
  color:red;
  font-size: 10px;
}
.captcha-div{
  margin: 20px 0px 20px 0px;
}
/* ########################################################################## */

/* ABOUTPAGE ################################################################ */
.aboutPanel{
  padding-top: 20px;
  background-color: #daf7b4;
}
.aboutImgContainer{
  overflow: hidden;
  width: 100%;
  height: 400px;
  margin:0;
}
.aboutImg{
  display:block;
  width:100%;
}
.about-bio{
  font-family: arial;
  font-size: 16px;
  line-height: 32px;
}
hr{
  border: 0.5px solid green;
}

/* ########################################################################## */

/* REVIEWPAGE ############################################################### */
/* Photos */
.Blurry,.Blurry:hover,.Blurry:focus{
  border:1px solid red;
  background: red;
}
.Cutoff,.Cutoff:hover,.Cutoff:focus{
  border: 1px solid #42006b;
  background: #42006b;
}
.Glare,.Glare:hover,.Glare:focus{
  border: 1px solid orange;
  background: orange;
}
.Obstructed,.Obstructed:hover,.Obstructed:focus{
  border: 1px solid blue;
  background: blue;
}
.projectPhotoNumber{
  position: absolute;
  top: 0px;
  left: 10px;
  width: 100%;
  z-index: +1;
  color: white;
  width: 100px;
}
.projectPhoto{
  margin:1px 1px 1px 1px;
  position: relative;
  width: 100%;
  height:100%;
  padding: 0px 1px 0px 0px;
}
.projectPhoto:hover,.projectPhoto:focus{
  box-shadow: 1px 1px;
}
.container > img{
  margin-bottom:-50px;
}
/* Menu */
.dropdown-submenu {
  position: relative;
}
.fullres-menu{
  position:absolute!important;
  /* z-index:-1!important; */
}
.photo_option{
  cursor: pointer;
  padding: 3px 20px;
  color: #333;
}
/* Panels */
.left-panel, .right-panel{
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}
/* Photo-zooming */
#slideContainer{
  width:100%;
  height:100%;
  overflow:hidden;
}
#slide{
  width:100%;
  height:100%;
}
/* Opening full resolution photo */
.fullres {
  width:auto;
  height:auto;
  max-width:100%;
}
.main-fullres-container {
  width:100%;
  height:100%;
  display: flex;
}
.middle-fullres-container {
  width: 100%;
  height:100%;
}
.side-arrows{
  height:100%;
  width: auto;
  background-color: white;
  border: 1px solid white;
}
.side-arrows:hover{
  background-color: #daf7b4;
}
.side-arrows:active{
  background-color: #294900;
}
.side-arrows:focus{
  border: 1px solid #294900;
}
.side-arrows:disabled{
  height: 0px;
  width:0px;
  background-color: white;
  border: 1px solid white;
}
/* Project stats */
.project-rating{
  margin-left:1%;
  margin-top:50px;
}
/* Submission */
.reviewsubmit{
  margin-top: 30px;
}
/* ########################################################################## */

/* NAVIGATIONBAR/BASEPAGE ################################################### */
/* Collapseable */
.navbar-toggle:hover .span,
.navbar-toggle:focus .span{
  color: #366100;
  background-color: #e8ffc9;
}
/* Body */
body{
  /* Background image: fill horizontal dimension, anchor bottom, allow top to crop */
  background-image: url("/static/images/PVXbg.jpg");
  /* Ensure the image always spans full viewport width; height scales proportionally */
  /* Using cover + bottom position crops from the top if aspect ratios differ */
  background-size: cover; /* alternatively 100% auto; but cover handles very wide screens */
  background-position: bottom center; /* keep bottom of image visible */
  background-repeat: no-repeat;
  background-attachment: fixed; /* optional parallax-style; remove if undesired */
}
/* Credits */
.credit{
  font-size: 12px;
  color: #daf7b4;
}
.credit_container{
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 0px;
}
/* Navigation buttons */
.login{
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    color: #294900;
    width: auto;
    padding-left: 0px;
    font-size: 18px;
}
.navbar-nav ul{
  margin-top: 0px;
  margin-bot: 0px;
}
.navbar{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index:2;
}
.navbar-default {
    background-color: #daf7b4;
}
.navbar-default .navbar-brand{
    color: #294900;
    font-weight: bold;
    margin-top: 10px
}
.navbar-right{
    color: #294900;
    margin-top: 10px
}
/*link*/
.navbar-default .navbar-nav > li > a {
    color: #294900;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #366100;
    background-color: #e8ffc9;
} /*when it is .active*/
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #447a00;
    background-color: #e8ffc9;
} /*when it is .open*/
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #466d14;
    background-color: #daf7b4;
}
/* ########################################################################## */

/* ERRORPAGES ############################################################### */
.error_div{
  width: 80%;
  margin-top: 120px;
  margin-left: 10%;
  margin-right: 10%;
}
/* ########################################################################## */

/* MANUALBOOK ################################################################*/
.pdf_div{
  margin-top: 10px;
}
.manual_book{
  top: 0px;
  opacity: 0.95;
  background-color: #daf7b4;
}
/* ########################################################################## */

/* PROJECTSPAGE ############################################################# */
#table-wrapper {
  position:relative;
}
#table-scroll {
  height:150px;
  overflow:auto;
  margin-top:20px;
}
#table-wrapper table {
  width:100%;

}
#table-wrapper table * {
  color:black;
}
#table-wrapper table thead th .text {
  position:absolute;
  top:-20px;
  z-index:2;
  width:35%;
}
.searched_str{
  background-color: #daf7b4;
}
/* ########################################################################## */

/* SITESPAGE ################################################################ */
#add_animal_btn  {
    position: relative;
}
#add_animal_btn:hover:after {
    position: absolute;
    top: 0;
    left: 75%;
    width: 100%;
    content: attr(title);
    background-color: #ffa;
    color: #000;
    line-height: 1.4em;
    border: 1px solid #000;
}
/* ########################################################################## */

/* PAGESUNDERCONSTRUCTION ################################################### */
.construction{
  color:yellow;
}
/* ########################################################################## */

/* MEASUREMENTSPAGE ######################################################### */
.measurement_buttons{
  margin-top: -10px;
  margin-bottom: -10px;
}
/* ########################################################################## */

/* MAPPAGES ################################################################# */
.map_container{
  margin-left: 25%;
  margin-right: 25%;
}
/* ########################################################################## */

/* INDEX/HOMEPAGE ########################################################### */
.intro_page{
  margin-left: 5%;
  background-color: white;
}
.news_page{
  margin-left: 5%;
  background-color:white;
}
.lead, .jumbotron > p{
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
}
.lead > li{
  text-align: justify;
  text-align-last: center;
  list-style: inside;
  list-style-type: none;
  margin-left: 0px;
  margin-right:30px;
  padding-left: 0px;
}
/* ########################################################################## */

/* TIPS ##################################################################### */
#project_tip{
  position: absolute;
  display:none;
  text-align: center;
  opacity:0.9;
  background-color: #daf7b4;
}
/* ########################################################################## */

/* REGISTRATIONPAGE ######################################################### */
.registration_field > p{
  font-size:14px;
  font-weight: bold;
}
.registration_field > p > span:hover{
  cursor: pointer;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 20px 0px #294900;
  -moz-box-shadow:    0px 0px 20px 0px #294900;
  box-shadow:         0px 0px 20px 0px #294900;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
/* ########################################################################## */

/* IMAGES ################################################################### */
img{
  margin: 0px 0px 0px 0px;
}
/* ########################################################################## */

/* GENERAL ################################################################## */
.content{
  z-index:1;
}
.jumbotron{
  top: 100px;
  opacity: 0.95;
  background-color: #daf7b4;
}
.form{
  margin: 10px 0px 10px 0px;
  border: 0px 0px 0px 0px;
}
.welcome{
  size: auto;
  margin-left: 25%;
}
.container{
  margin-bottom: 80px;
}
.titlePanel{
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 100px;
}
.rowPanel{
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 20px;
}
.innerPanel1{
  margin-left: -12px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}
.innerPanel2{
  margin-left: 0px;
  margin-right: -12px;
  margin-top: 0px;
  margin-bottom: 0px;
}
.innerPanel3{
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}
/* #warning-heading{
  background-color: #ffd4d4;
}
#warning-panel{
  border-color:red;
} */
.reviewbuttons{
  margin-left: 1%;
  margin-bottom: 20px;
}
.radio{
  margin-left: 30px;
  margin-top: 0px;
}
.select_body .select_rows{
  opacity:0.7;
}
.menu_headers{
  color:#294900;
}

.subtle_info > p{
  font-size:10px;
  font-weight:normal;
  line-height: 0px;
}
.subtle_input{
  font-weight:normal;
}
select{
  cursor: pointer;
}
button:focus,
input:focus,
select:focus{
  border-color: #294900;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px #294900;
  outline: 0 none;
}

select:focus >
option:checked{
  background: #c3e398;
}

select:focus >
option:hover{
  background: #294900;
}

.styled_input > input{
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border: 1px solid #6bcf71;
	outline: none;
	color: #6bcf71;
	padding: 5px 8px 5px 8px;
	box-shadow: inset 1px 1px 4px #acffa3;
	-moz-box-shadow: inset 1px 1px 4px #acffa3;
	-webkit-box-shadow: inset 1px 1px 4px #acffa3;
	background: #f0fff1;
	width:50%;
}
.styled_input > input:disabled{
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border: 1px solid #FFC2DC;
	outline: none;
	color: #F072A9;
	padding: 5px 8px 5px 8px;
	box-shadow: inset 1px 1px 4px #FFD5E7;
	-moz-box-shadow: inset 1px 1px 4px #FFD5E7;
	-webkit-box-shadow: inset 1px 1px 4px #FFD5E7;
	background: #FFEFF6;
	width:50%;
}
.styled_input > input[type="number"]::-webkit-outer-spin-button,
.styled_input > input[type="number"]::-webkit-inner-spin-button {
    cursor: pointer;
}
.btn-primary{
  background-color: #255c47;
  border-color: #255c47;
}
.btn-primary:hover{
  background-color: #06493d;
  border-color: #255c47;
}
.btn-primary:focus,
.btn-primary:active{
  background-color: #00312e;
  border-color: #255c47;
}
.btn-danger{
  background-color:#5e1616;
  border-color:#5e1616;
}
.btn-danger:hover{
  background-color: #400000;
  border-color: #5e1616;
}
.btn-danger:focus,
.btn-danger:active{
  background-color: #3c0303;
  border-color: #5e1616;
}
.btn-success{
  background-color: #246b24;
  border-color: #246b24;
}
.btn-success:hover{
  background-color: #126723;
  border-color: #246b24;
}
.btn-success:focus,
.btn-success:active{
  background-color: #065517;
  border-color: #246b24;
}
.btn-warning{
  background-color: #bf9d34;
  border-color: #bf9d34;
}
.btn-warning:hover{
  background-color: #a97524;
  border-color: #bf9d34;
}
.btn-warning:focus,
.btn-warning:active{
  background-color: #a15421;
  border-color: #bf9d34;
}
.panel > .panel-heading{
  background-color: #daf7b4;
}
.panel{
  border: 2px solid #294900;
  opacity: 0.92;
  filter: saturate(125%);
}
input:disabled{
  background-color: #ebebeb;
}
/* ########################################################################## */

/* SPECIESPAGES ############################################################# */
.new_species{
  size: auto;
  margin-left: 25%;
}
/* ########################################################################## */

/* QUEUEPAGE ################################################################ */
.busy_check{
  outline:1px solid #ff0000;
}
/* ########################################################################## */

/* STAFFLOBBY ############################################################### */
.process_arrows{
  margin-top: 20px;
  color:#294900;
  margin-bottom: 20px;
}
.process_arrow_icons{
  height:20px;
}
/* ########################################################################## */