@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,700");
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

body {
  font-family: "Ubuntu", Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  background-color: #ffffff;  padding-top: 4px;
}

.tooltip {
    z-index: 0;
}

.navbar-default {
    background-color: #009688;
    border-color: #009688;
    background-image: none;
}

.navbar-default .navbar-brand {
    color: #ffffff;
}

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    color: #ffffff;
    background-color: none;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color: #00695c;
    background-image: none;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: #00796b;
    background-image: none;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: #00695c;
    color: #ffffff;
    background-image: none;
}

.navbar-default .navbar-nav > li > a {
    color: #ffffff;
    text-decoration: none;
}

.btn-primary {
    color: #fff;
    background-color: #9c27b0;
    border-color: #9c27b0;
}

.btn-success {
    color: #fff;
    background-color: #9c27b0;
    border-color: #9c27b0;
}

.form-group {
    margin-bottom: 5px;
}

.divider {
    margin-top: 7px;
    margin-bottom: 7px;
}

.plants-pager {
    margin-top: 10px;
    margin-bottom: 10px;
}

.undo-btn-pager {
    margin-top: 0;
    margin-bottom: 0;
}

.pager li>a, .pager li>span, .undo-btn-pager li>a {
    padding: 2px 13px;
}

.lSSlideOuter {
    overflow: visible;
}

.thumbnail_panel {
    background: whitesmoke;
    margin-bottom: 5px;
}

.slider-thumbnail {
    display: block;
    max-width: 110%;
    height: 150px;
    object-fit: contain;
}

#thumbnail_preview {
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;
}

#plants_from_user {
    color: #9c27b0;
}

.bg-purple {
    color: #ffffff;
    background-color: #605ca8 !important;
}

.bg-navy {
    color: #ffffff;
    background-color: #001f3f !important;
    border-color: #001f3f;
}

.bg-blue {
    color: #ffffff;
    background-color: #428bca !important;
}

.bg-maroon {
    color: #ffffff;
    background-color: #d81b60 !important;
}

.bg-orange {
    color: #ffffff;
    background-color: #ff851b !important;
}

.bg-olive {
    color: #ffffff;
    background-color: #3d9970 !important;
}

.column {
    background-color: #caeeec;
}

.btn-search {
    color: #E9EDEF;
    background-color: #2c8f38;
    border-color: #2d7b31
}

.well {
    margin-bottom: 5px;
    padding: 5px 10px 5px 5px;
}

.well-sm .row .col-md-12 {
    margin-bottom: -10px;
}

.btn-stage-bad {
    color: #ffffff;
    background-color: #d8464e !important;
}

.btn-stage-good {
    color: #ffffff;
    background-color: #249f2c !important;
}

.btn.outline {
    border: 5px solid #0a68ff;
}

.meta-tag-col {
    margin-top: -15px;
    padding-left: 0px;
}

.btn_remove_disease_form {
    margin-top: 24px;
}


.has-input-error {
    border-color: #a94442;
}

.help-block.input-errors {
    color: #a94442;
}

.query-editor {
    position: relative !important;
    border: 1px solid lightgray;
    margin: auto;
    height: 100px;
}

.zero-padding {
    padding: 0
}

.nn-pad {
    padding-left: 15px
}

.ws-messages-container {
    width: 370px;
    position: absolute;
}


@media (min-width: 1600px) {
    .container {
        width: 1400px; 
        max-width: 1400px; 
    }
}

/* Default styles for medium screens */
#zoom_mw {
    height: 600px;
    object-fit: contain;
    max-width: 457px;
    width: 100%; /* Ensure it scales within the parent col-md-5 */
}


@media (min-width: 1600px) {
    #zoom_mw {
        height: 700px; 
        max-width: 600px; 
        
    }
}


@media (min-width: 1920px) {
    #zoom_mw {
        height: 700px; 
        max-width: 600px;         
    }
}