/*
Design URL 	: 	 Otterfresh - Germination Reports
Design by  	:    CrossCountryWebServices
Designer   	:    Rajesh Kumar
Version	   	:    HTML5/CSS3
*/

/*  font-family: 'Open Sans', sans-serif;  */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

html {   scroll-behavior: smooth; }  section{ overflow: hidden;}  
*{ padding: 0px; margin: 0px; }  *:focus { outline: none; }  a:focus{ text-decoration: none; }

body{font-family: 'Open Sans', sans-serif;  font-weight: 400;  font-size:16px;  color:#252525;} 

h1, h2, h3, h4, h5{font-family: 'Open Sans', sans-serif;  font-weight: 300;  color:#806b64; margin: 0px; }

a {color:#404040;} a:hover {color:#000; text-decoration: none;}
p{ font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 16px;  color: #000; font-weight: 400;  line-height:28px; text-decoration:none; margin:0px; padding:0px;}
p a{color:#000;} p a:hover{color:#252525; } p a:active{color:#252525; } p a:visited{color:#252525; } 
p strong{   font-weight: bold; color:#252525; }   em{ font-weight:normal;} 

.alpha{ padding-left:0px; margin-left:0px;}  .omega{ padding-right:0px; margin-right:0px;} 
.responsive-table, .table-responsive{ overflow-x: auto; }

.add-bottom5{margin-bottom:5px;} .add-bottom10{margin-bottom:10px;} .add-bottom{margin-bottom:15px;} 
.add-bottom20{margin-bottom:20px;} .add-bottom25{margin-bottom:25px;} .add-bottom35{margin-bottom:35px;}  .add-bottom50{margin-bottom:50px;} 
.add-bottom-top35{ padding:35px 0;} .add-bottom-top15{ padding:15px 0;}

.add-left10{margin-left:10px;}

.add-top100{ padding-top:100px;} .add-top10{ padding-top:10px;}
.add-top10{margin-top:10px;} .add-top{margin-top:15px;}  .add-top25{margin-top:25px;}  

.cred{color:#e31e25; display:inline;} .img{ margin: 5px 15px 0 0;} 

#myBtnup { display: none; position: fixed; bottom: 5px; right: 5px; z-index: 99999; font-size: 13px; border: none; outline: none;
  background-color: #111; opacity: 1;   color: white;  font-weight: 300; cursor: pointer;   padding: 10px 10px;   border-radius: 50px; }
#myBtnup:hover {   opacity: 0.8; }

.btn {/*background: #fff;*/ background: transparent; border: 1px solid #931004; border-radius: 20px;  font-size: 16px; color:#931004;  padding:10px 20px;
	 display: inline-block; position: relative; cursor: pointer; transition: background-color 0.2s, color 0.2s; white-space: nowrap; } 
.btn:hover, .btn:focus, .btn:visited, .btn:active {  background: #931004; color:#fff; outline: none; box-shadow: none; }


a.btn, a.btn:focus, a.btn:visited, a.btn:active { background: #fff; border: 1px solid #931004; border-radius: 20px;  font-size: 16px; color:#931004;  padding:10px 20px;
   display: inline-block; position: relative; cursor: pointer; transition: background-color 0.2s, color 0.2s; white-space: nowrap; } 
a.btn:hover {  background: #931004; color:#fff; outline: none; box-shadow: none; }


/*.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin:100px 0 0px 0;}
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }*/
.main ul li{font-family: 'Open Sans', sans-serif;  font-size:16px; color:#252525;} 


/* report page starts here */
.top-strip{ background: #931004; height: 38px; width: 100%; }
.toggle-btn{ margin: 10px; cursor: pointer; transition: background-color 0.2s, color 0.2s; white-space: nowrap;}
.toggle-btn div { width: 30px; height: 3px; background-color: #fff; margin: 4px 0; border-radius: 3px; }
.toggle-btn a:hover div{ background: #f5f5f5; }



/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 10; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  /*background-color: #c46404;*/ /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
  background:rgba(196, 16, 0, 0.8);
}

/* The navigation menu links */
.sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 17px;  color: #fff; display: block; transition: 0.3s; }
/* When you mouse over the navigation links, change their color */
.sidenav a:hover { color: #ffde00; }
/* Position and style the close button (top right corner) */
.sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; }
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {  /*transition: margin-left .5s;   padding: 20px; */}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {  .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} }

.top-strip h1{ color:#fff; font-size: 20px; line-height: 38px; text-align: center;   margin: 0px; padding: 0px;  }
.top-strip a.btn{ float: right; background: none; color: #fff; font-size: 14px; line-height: 38px; border:0; border-radius: none 0; margin: 0px 15px 0px 0px; padding: 0px; }

.banner{ background: #f7f8fc; height: 80px;  }
.banner h2{text-align: center; color: #931004; font-size: 32px; line-height: 80px; font-weight: 300;}


.page-heading{ border-bottom:1px solid #f1f1f1; height: 80px; padding: 20px 0; }
.page-heading h3{ font-size: 18px;  font-weight:600; color: #931004; line-height: 24px; padding-left: 50px; background: url(img/farm-icon.png) 5px 7px no-repeat;  } 
.page-heading h3 span{ display: block; font-size: 14px; color: #4d4d4f; font-weight: 300; }
/*.page-heading a.btn, .page-heading a.btn:focus, .page-heading a.btn:visited,, .page-heading a.btn:active{  float: right; color:#931004;	 border:#931004;}
.page-heading a.btn:hover{ color: #fff;}
*/

.button a.btn, .button a.btn:focus { float: right; background: none;  color:#931004;  border: 1px solid #931004; border-radius: 20px;} 
.button a.btn:hover {  background-color: #931004; color:#fff; outline: none; box-shadow: none; }

/* VIEW STATUS */
.status{ padding: 20px 0; overflow: visible; }
.status h3{ font-size: 26px;  font-weight:300; color: #931004; line-height: 36px; margin: 25px 0 40px 0;} 

/*.timeline{ min-height: 135px; background: url(img/timeline-stroke.jpg) 0 46% repeat-x; margin-bottom: 7px; overflow-x: scroll;   }

.timeline ul{ list-style-type: none; margin: 0px; padding: 0px;    }*/

.timeline { min-height: 170px; margin-bottom: 60px; overflow-x: auto; width: 100%; background: #f5f5f5; border-radius: 15px; 
  /*border:1px solid #eee;*/ padding: 15px 10px; background: url(img/timeline-stroke.jpg) 0 64% repeat-x #f5f5f5; }
.timeline  ul{ list-style-type: none; margin: 0px; padding: 0px;  width: max-content;  }
.timeline li{margin:  20px; padding: 0px;  /*margin-right:5%;*/  display: inline-block; font-weight: 600; font-size: 16px;   }
.timeline li a{ background: #d7d8d8; border:7px solid #d7d8d8; display: block; padding: 0px;  border-radius: 60px; height: 50px; width: 50px; margin-top: 15px;
cursor: pointer;  position: relative; transition: background-color 0.2s, color 0.2s; white-space: nowrap; }
.timeline li a:hover{ background: #c46404; border:7px solid #d7d8d8; }
.timeline li a.select{ background: #c46404; border:7px solid #d7d8d8;}

/* 5 Columns */
.col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 {  position: relative;  min-height: 1px;  padding-right: 15px; padding-left: 15px; }
.col-xs-15 { width: 20%;  float: left; }
@media (min-width: 768px)  { .col-sm-15 { width: 20%; float: left; } }
@media (min-width: 992px)  { .col-md-15 { width: 20%; float: left; } }
@media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } }


/* Select Dropdown */
.filter-menu {/*width: 850px;*/ margin: 0 auto; margin-bottom: 40px; }
.filter-menu .col-md-3{  /*max-width: 240px; */} .filter-menu .stage{ /*max-width: 140px;*/ }
.filter-menu .col-md-11, .filter-menu .col-md-1{ padding: 0px; }

.filter-menu  label{ font-weight: 400; color: #c46404; font-size: 14px; line-height: 14px; margin-left: 17px; padding: 0 5px; 
display: inline; width: min-content;  position: relative;   background: #fff; z-index: 5; }

.filter-menu .form-group input:not([type="submit"]), .filter-menu .form-group textarea { color:#777; font-size: 14px;  width: 100%;  
  border: 1px solid rgba(0, 0, 0, 0.2);  padding: 11px 15px;  z-index: 1;  position: relative;    
  border-radius: 10px; margin-bottom: 5px; background: transparent; font-weight: 400; margin: -7px 0px 5px 10px;}


/* select main arrow */
.filter-menu .custom-select {   position: relative; margin-top: -7px;  }
.filter-menu .custom-select select {     display: none;  }
.filter-menu .select-selected {  padding: 20px 20px; font-size: 15px;} 

.filter-menu .select-selected:after {   position: absolute;  content: "";   top: 15px;   right: 15px;   width: 0;   height: 0;   
border: 8px solid transparent;   border-color: #c46404 transparent transparent transparent;  font-size:16px; color: #000; } 
.filter-menu .select-selected.select-arrow-active:after {   border-color: transparent transparent #c46404 transparent;   top: 10px; }
.filter-menu .select-selected { color: #000; padding: 8px 20px; border: 1px solid #ccc; border-radius: 12px;  cursor: pointer; }
.filter-menu .select-items div  { color: #000; padding: 8px 20px; border: 1px solid #000; cursor: pointer;  font-size: 13px;} 
.filter-menu .select-items {   position: absolute; line-height: 18px;   background:#f1f1f1;   top: 100%;   left: 0;   right: 0;   z-index: 99; }
.filter-menu .select-items div { border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer; }
.filter-menu .select-hide {   display: none; }
.filter-menu .select-items div:hover, .filter-menu .same-as-selected {   background-color: rgba(0, 0, 0, 0.1); }


/* SELECT DROPDOWN New*/
.filter-menu select{ width: 100%; background: none;   /*border: 1px solid #c1c1c1;*/ /*font-size: 13px;*/ }
.filter-menu .styled-select select { background: transparent;  -webkit-appearance: none;  -moz-appearance: none; appearance: none; border: none;  
  float:left; width: 100%;  padding:  10px 15px; color: #000;  width: 100%; min-height: 36px;}
.filter-menu .styled-select.slate select::-ms-expand { display: none; /* hide the default arrow in ie10 and ie11 */}

.filter-menu .styled-select.slate {background: url(img/dd-arrow.png) no-repeat right 14px ; border-radius: 10px; float:left; border: 1px solid #cccccc; color: #000;   width: 100%;   margin:-7px 0px 5px 10px; }
.filter-menu .styled-select.slate select { color:#757575; font-weight: 400; font-size: 15px; box-shadow: none;  }
.filter-menu .styled-select.slate option{ font-size: 14px; line-height: 30px; padding: 10px; height: 30px; }  

.filter-menu .search-btn{ float: left; margin-top: 14px; padding: 10px 15px; background: #931004; text-align: left; }

.filter-menu .form-group input[type=button].search-btn/*, input[type=submit], input[type=reset]*/ {
float: left; margin-top: 14px; padding: 10px 15px; width: 50px; color: #931004; text-align: left; cursor: pointer;
background: url(img/search.png) 13px 10px no-repeat #931004;  }


.filter-menu .search-btn:hover{ opacity: 0.7; background: transparent; }






/* Tray */
.tray { min-height: 40px; margin-bottom: 30px; overflow-x: auto; width: 100%; /*border:1px solid #eee;*/ padding:0 20px; }
.tray  ul{ list-style-type: none; margin: 0px; padding: 0px;  width: max-content;  }

.tray  li{margin:  20px 30px 20px 0px; padding: 0px;  display: inline-block; font-weight: 600; font-size: 16px;   }

.tray  li a{padding: 5px 10px;    border-radius: 10px; color: #c46404; background: transparent; font-size: 17px; line-height: 24px; font-weight: 700;
cursor: pointer;  position: relative; transition: background-color 0.2s, color 0.2s; white-space: nowrap; }
.tray  li a:hover{color: #fff; background: #c46404;  }
.tray  li a.select{ color: #fff; background: #c46404; }


/* width */
::-webkit-scrollbar { width: 8px; height: 8px;  cursor:pointer; }
/* Track */
::-webkit-scrollbar-track { background: #f1f1f1;  } 
/* Handle */
::-webkit-scrollbar-thumb { background: #c46404; cursor:pointer; border-radius: 10px; }
/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background:  #aaa;   }


/* VIEW STATUS */
.summery{ padding: 20px 0;  } .summery .btn{ margin-left: 15px; margin-bottom: 5px; }
.summery h3{ font-size: 26px;  font-weight:300; color: #931004; line-height: 36px; margin: 0px;} 
.summery h3 span{ color: #4d4d4f; font-weight: 400; font-size: 22px; }
/* Grids */


.summery .grid-container-main{  background-color: #f0f0f0; padding: 40px 40px 40px 10px ; margin: 20px 0;  }
.summery .grid-container {display: grid; grid-column-gap: 18px; grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto; /*no. of grids*/ }
.summery .grid-item { padding: 10px;  font-size: 30px; text-align: center; box-shadow: 3px 2px 10px 0px rgba(0,0,0,0.40);
 background-color: #443c3a; display: block; margin-bottom: 18px; min-width: 40px; min-height: 40px;  }

.summery .numbers .grid-item{ background: none; box-shadow: unset; color: #fff; text-align: center;  min-height: 30px; padding: 0px; margin-bottom: 10px;   }
.summery .numbers .grid-item span.no-bg{ background: transparent; border:none; }
.summery .numbers .grid-item span{ width: 21px; height: 21px; margin: 0 auto; text-align: center; border:2px solid #443c3a; 
	background: #443c3a; 	font-size: 13px; line-height: 14px; font-weight: 600; display: block; border-radius: 20px; }

.grid-item.alphabet{ background:  transparent; box-shadow: unset; color:#c46404; font-size: 20px; font-weight: bold; text-align: right; }

/* container35 */
.grid-container35 { display: grid; grid-column-gap: 18px; grid-template-columns: auto auto auto auto auto auto auto auto;  }
.grid-container35 .grid-item{ margin-bottom: 20px; min-width: 40px; min-height: 60px; }
.grid-container35 .grid-item.alphabet{ background:  transparent; box-shadow: unset; color:#c46404; font-size: 20px; font-weight: bold; text-align: right; }
.grid-container35 .numbers .grid-item{ background: none; box-shadow: unset; color: #fff; text-align: center;  min-height: 30px;
  padding: 0px; margin-bottom: 10px;   }

.grid-item.orange{ background: #dba728; }      /* Germinated */
.grid-item.green{  background: #c5dd89; }      /* first-leaf */
.grid-item.dgreen{ background: #82933c; }      /* Transplanted */
.grid-item.brown{  background: #977453; }      /* True Leaf*/ 
.grid-item.light-brown{  background: #bdb9a5;} /* Planted*/
.grid-item.pink{  background: #9d0b17;}        /* Dead*/

.grid-item.selected{ border:4px solid #fff; }

 
/*  CELL-COUNTS  */
.cell-counts { padding: 20px 0; min-height: 500px; }
.cell-counts  h3{ font-size: 26px;  font-weight:300; color: #931004; line-height: 36px; margin: 0px 0px 25px 0px;} 
.cell-counts  h5 {  font-size: 22px;  font-weight:300; color: #368d51; line-height: 36px; margin: 0px 0px 15px 0px;} 
.cell-counts  h5 span{  margin-left: 5px;   font-weight:500;}

/*  7 Columns  */
.col-xs-17, .col-sm-17, .col-md-17, .col-lg-17 {  position: relative;  min-height: 1px;  padding-right: 15px; padding-left: 15px; }
.col-xs-17 { width: 14.28%;  float: left; }
@media (min-width: 768px)  { .col-sm-17 { width: 14.28%; float: left; } }
@media (min-width: 992px)  { .col-md-17 { width: 14.28%; float: left; } }
@media (min-width: 1200px) { .col-lg-17 { width: 14.28%; float: left; } }



.circle-bar{   position: relative;   text-align: center; }
.circle-bar .layer{ position: absolute;   top: 25%; left: 0%; width: 100%; /*transform: translate(-50%, -50%);*/}
.circle-bar .layer .circle_text{/*position: absolute; left: 0%; top:0%;*/ width: 80%; margin: 0 auto; display: block; }
.circle-bar .layer .circle_text h3{ font-size: 15px; line-height: 15px;  text-align: center; display: block; color: #443c3a; font-weight: 600; margin: 0px; }
.circle-bar .layer .circle_text h4 { font-size: 38px;  color: #fbd6d6; /* Capacity */ line-height: 48px; text-align: center; display: block;font-weight: 600; margin: 0px; }
.circle-bar .layer .circle_text h4 img{ margin-top: -7px; }


.circle-bar .layer .circle_text h4.clr-brown{ color: #bdb9a5; }  /* Planted */
.circle-bar .layer .circle_text h4.clr-choclate{ color: #82933c; }  /*  True Leaf */
.circle-bar .layer .circle_text h4.clr-green{ color: #c5dd89; }  /*First Leaf*/
.circle-bar .layer .circle_text h4.clr-orange{ color: #dba728; }   /*Germinated */
.circle-bar .layer .circle_text h4.clr-dgreen{ color: #004724; } /*Transplanted*/
.circle-bar .layer .circle_text h4.clr-red{ color: #9d0b17; }  /* Dead */



/* progrss bar */
.progress {height: 54px; margin-bottom: 20px; overflow: hidden; background-color: #f5f5f5;  border-radius: 30px; 
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);   box-shadow: inset 0 1px 2px rgba(0,0,0,.1); }
.progress-bar { float: left; width: 0; height: 100%; font-size: 18px; line-height: 52px; color: #fff; text-align: left; padding: 0 20px; background: #4eba6f; }
.progress-bar span{ float: right; font-size: 18px; font-weight: 300;  }


/*** Lightbox ***/
/* The Modal (background) */
.modal {   display: none;   position: fixed ;   z-index: 99999999;   padding-top: 55px;   left: 0;   /*top: 110px;*/   width: 100%;  
  height: 100%;   overflow: auto;  background-color:rgba(0, 0, 0, 0.7); }

.popup-form .modal-content {position: relative;  background: #fff; width:300px; border:1px solid #ddd; margin: 0 auto 50px auto;
 z-index: 999999999; border-radius: 0;  padding: 20px 20px 40px 20px ;}

.popup-form .close {color: #c46404; position: absolute; top: 11px; right: 15px; font-size: 30px; font-weight: bold; opacity: 1; }
.popup-form .close:hover, .popup-form .close:focus {   color: #000;   text-decoration: none;    cursor: pointer; }
.popup-form .mySlides {   display: none; }

 /*change-status-popup*/
.change-status-popup{  margin: 20px auto;   }

.change-status-popup h3{ font-weight: 400; text-align: center; font-size: 25px; line-height: 40px; padding-bottom: 12px;  margin-bottom: 8px; text-align: center;
 border-bottom: #c46404 solid 1px;  color: #000;  }
.change-status-popup h5{  font-weight: 400; text-align: center; font-size: 18px; line-height: 24px;  padding: 12px 0; color: #000;  text-align: center;  }
.change-status-popup p { text-align: center; } 

/*.change-status-popup a.btn { padding:  13px 30px; padding-left: 50px; background: url(img/circle-on-btn.png) 20px 13px no-repeat; 
  border: 2px solid #c46404; color: #333; font-weight: 400; text-align: center; float: inherit; border-radius: 25px; margin-top: 12px; }
.change-status-popup a.btn:hover, .change-status-popup a.btn.active{color: #931004; border-color:#931004;  
  background: url(img/circle-on-btn-hover.png) 20px 13px no-repeat #fff; box-shadow: none; }*/

.change-status-popup a.btn {      color: #fff; background: #bdb9a5;  border: 2px solid #bdb9a5;  padding:  13px 30px; font-weight: 600; text-align: center; float: inherit; border-radius: 25px; margin-top: 12px; }
.change-status-popup a.btn:hover{ color: #bdb9a5; background: #fff;  border: 2px solid #bdb9a5; box-shadow: none; }

a.btn.germinated{  background: #dba728;  border: 2px solid #dba728;  color:#fff;}
a.btn.germinated:hover{ color: #dba728; border: 2px solid #dba728;    background: #fff; }

a.btn.first-leaf{  background: #c5dd89;  border: 2px solid #c5dd89;  color:#fff;}
a.btn.first-leaf:hover{ color: #c5dd89; border: 2px solid #c5dd89;    background: #fff;  }

a.btn.true-leaf{ background: #82933c;  border: 2px solid #82933c;  color:#fff;}
a.btn.true-leaf:hover{ color: #82933c; border: 2px solid #82933c;    background: #fff;}

a.btn.dead{ background: #9d0b17;  border: 2px solid #9d0b17;  color:#fff; }
a.btn.dead:hover{ color: #9d0b17; border: 2px solid #9d0b17;    background: #fff;}

a.btn.transplanted{  background: #004724;  border: 2px solid #004724;  color:#fff; }
a.btn.transplanted:hover{ color: #004724; border: 2px solid #004724;    background: #fff;}



/* USER / plant / COMPANY / VARIETY LIST PAGE  */
.plant-status .container{ max-width: 780px; margin: 0 auto; }

.plant-status form{ max-width: 400px; float: right; }
.plant-status .form-group input:not([type="submit"]), .plant-status .form-group textarea { color:#333;  width: 100%;  
  border: 1px solid rgba(0, 0, 0, 0.2);  padding: 10px 15px;  z-index: 1;  position: relative; font-size: 13px;    
  border-radius: 10px; margin-bottom: 5px; background: transparent; font-weight: 400;}
.plant-status .form-group .btn{ border:1px solid; background: none; padding: 9px 20px; }
.plant-status .form-group .btn:hover, .plant-status .form-group .btn:focus, .plant-status .form-group .btn:visited, .plant-status .form-group .btn:active {  background: #931004; color:#fff; outline: none; box-shadow: none; }


.plant-table .table>thead>tr>th {  vertical-align: bottom;  border-bottom: 1px solid #931004; font-size: 14px; color: #333; }
.plant-table .table>tbody>tr>td { font-size: 14px; }

.plant-table .table>tbody>tr>td a img{ width: 12px; }
.plant-table .table>tbody>tr>td a{ color: #931004; font-size: 12px; font-weight: 400; }
.plant-table .table>tbody>tr>td a:hover{ color: #000; }


/* USER / plant / COMPANY / VARIETY LIST PAGE  */
.add-userp .container{ /*max-width: 550px; */ margin: 0 auto; }
.add-user-bg { /*background: #f8f8f8;*/ padding: 20px; }
/*.add-userp form{ max-width: 400px; float: right; }*/
.add-userp .form-group input:not([type="submit"]), .add-userp .form-group textarea { color:#777; font-size: 14px;  width: 100%;  
  border: 1px solid rgba(0, 0, 0, 0.2);  padding: 11px 15px;  z-index: 1;  position: relative;    
  border-radius: 10px; margin-bottom: 5px; background: transparent; font-weight: 400;}

.add-userp .filter-menu .styled-select.slate { margin:  0px 0px 5px 0px;}
.filter-menu .styled-select.slate select { color:#777; font-size: 14px; font-weight: 400;   box-shadow: none; }

.add-userp .form-group .btn{ border:1px solid; background: none; padding: 9px 20px; }
.add-userp .form-group .btn:hover, .add-userp .form-group .btn:focus, .add-userp .form-group .btn:visited, .add-userp .form-group .btn:active {  background: #931004; color:#fff; outline: none; box-shadow: none; }

.alert-danger  {  color: #a94442;  background-color: transparent;   border: 0px;  font-size: 13px; padding: 7px 10px; }
.alert-success { color: #3c763d;   background-color: #dff0d8;  border: 0px;  font-size: 14px;  padding: 10px 15px; font-weight: 400; }


/*  Reporting System Page */
.report-filter .filter-menu{ margin-bottom: 0px;  }

.report-bg{ background: #f8f8f8;  min-height: 100px; margin: 20px 0 30px 0 ; box-shadow: 3px 2px 10px 1px rgba(0,0,0,0.15);
 border-radius: 10px; padding: 35px 25px; }

.report-bg h3{ text-align: center; font-size: 26px; color: #931004; font-weight: 300; margin-bottom: 30px; }
.report-bg h3 span{ padding: 2px 10px; font-weight: 700; font-size: 21px; border:1px;  border-radius: 30px; margin-left: 5px; border:1px solid #ddd; }


.report-table .table>thead>tr>th{ font-family: 'Open Sans', sans-serif; color: #c46404; font-weight: 400; border-bottom-color: #ddd; border-right: 0px; border-left: 0px; }
.report-table th, .report-table td{font-family: 'Open Sans', sans-serif;  text-align: center; font-size: 15px; font-weight: 400; }

.report-table .table>tbody>tr>td.stage{ color: #fff; background: #c46404; font-weight: 400; font-size: 13px;} 


.report-bg .summery .grid-container-main { background-color: transparent; padding: 25px 10px 25px 0px; margin: 15px 0  10px 0;
border:1px solid #eee; border-radius: 10px;    }

.report-bg .cell-counts { padding: 20px 0;  min-height: auto; }
.report-bg .cell-counts h3{ text-align: left; padding-left: 5px; }




/* LOGIN PAGE */
.login-page{ background: url(img/login-bg.jpg) 0 0 no-repeat; margin: 0px; padding: 0px; min-height: 768px; }
.login-box{ background: #fff; /*min-height: 550px;*/  margin-top: 6%; padding:30px 15px; }

.red-logo{ width: 140px; margin-bottom: 30px; margin-left: 15px; }

.login-box .filter-menu{ max-width: 420px; margin: 50px auto; }

.login-box .filter-menu input{ margin-top: inherit; }
.login-box .filter-menu label {font-size: 15px; font-weight: 400;}


/* input menu */
.login-box .filter-menu .form-group input:not([type="submit"]), .filter-menu .form-group textarea { margin: -7px 0px 0px 0px ; 
   }
.login-box .filter-menu .form-group label{ margin-left: 10px; }


/* custome checkbox design */
.login-box .checkbox-new { color: #323232;  font-weight: normal;  display: inline-block;  position: relative;  margin: 7px 0;  padding-left: 35px;  cursor: pointer;  
 font-size: 12px;  line-height: 20px; text-align: left;  -webkit-user-select: none;   -moz-user-select: none;   -ms-user-select: none;   user-select: none; }

.login-box .pass label { text-align: left; width: auto; margin: 0 10px 7px 0; margin: 5px 0 12px 0; font-size: 13px; line-height: 26px;
    color: #666;      } 
.login-box .pass label.checkbox-new input {   position: absolute;   opacity: 0;   cursor: pointer;   height: 0;  width: 0; }

.login-box .checkmark {   position: absolute;   top: 3px;   left: 10px;  height: 19px;   width: 19px;  
  background-color: #be1f11;  /*border: 1px solid #d8d6ef;*/ border-radius: 5px;  }

.login-box .checkbox-new:hover input ~ .checkmark {   background-color: #be1f11;   }
.login-box .checkbox-new input:checked ~ .checkmark {   background-color: #be1f11; /* border: 1px solid #be1f11;*/ }

.login-box .checkmark:after {   content: "";    position: absolute;   display: none; }
.login-box .checkbox-new input:checked ~ .checkmark:after {   display: block; }
.login-box .checkbox-new .checkmark:after {   left: 7px;   top: 3px;   width: 6px;   height: 10px;   border: solid white;   border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);   -ms-transform: rotate(45deg);   transform: rotate(45deg); }
.login-box .checkbox-new input.abs{ position: absolute; }


/* btn */
.login-box .filter-menu .btn{ width: 100%; color: #fff; background:#be1f11; padding: 12px; font-size: 14px;  margin-top: 7px; text-transform: uppercase;} 
.login-box .filter-menu .btn:hover{ color: #000; background: transparent; } 


.login-box p{ text-align: left; }
.login-box p a{ color: #999; font-size: 14px; margin: 20px 0; }
.login-box p a:hover{ color:#be1f11; } 

.login-box .filter-menu .form-group{ margin: 7px 0 15px 0; }
.login-box span.invalid-feedback strong { font-size: 13px; padding: 0px; margin: 0px; padding-left: 15px; font-weight: 400; color: #ff1500; }
.login-box span{ margin-bottom: 15px; }



/* Trays List */
.trays-list .container{ max-width: 1170px; /*margin: 0 auto;*/ }
.trays-list .filter-menu { margin-bottom: 0px; }
.trays-list form {  max-width: fit-content; float: right; margin-bottom: 20px;}
.trays-list .filter-menu .styled-select.slate, .trays-list .filter-menu .form-group input:not([type="submit"]){ margin: 0px;  }

table td.left { text-align: left !important } 
table td.left strong{ color: #333; font-weight: 600; }

.plant-table .table>tbody>tr>td a.btn{ background: transparent; }
.plant-table .table>tbody>tr>td a.btn:hover{ background: #be1f11; color: #fff; }

.plant-table .table>tbody>tr>td a:hover{ text-decoration: underline; color: #be1f11; }


/* add tray fine tuning*/
.checkbox2 { margin-bottom: 25px; }
.checkbox2 label{ margin-left: 0px; }
input#plant_tray_type { width: 20px; }
label.form-check-label {     margin-left: 0; }

 
tr.tr-bg-green,tr.tr-bg-green:hover{ background: #daf9b1; }
tr a.btn-hover:hover{ opacity: 0.7; }


/* 21 July 2020 */
.modal { overflow-x: hidden; }
.popup-form2 .modal-content { position: relative;  width: 100%; border: 0px solid #ddd; margin: 0 auto 50px auto; z-index: 999999999;  
   background: #f8f8f8;  box-shadow: 3px 2px 10px 1px rgba(0,0,0,0.15); border-radius: 10px; }

.trays-popup .status { padding: 20px 0 0px 0;  overflow: visible; }
.trays-popup.report-bg { padding:  20px;   background: transparent;  box-shadow: 0px 0px 0px 0px ; border-radius: 10px;}
.trays-popup.report-bg h3 { text-align: left; margin: 0px;  }
.trays-popup.report-bg h3 span { border:0px; }

.trays-popup.report-bg a.btn, .trays-popup.report-bg a.btn:focus,.trays-popup.report-bg a.btn:visited, 
.trays-popup.report-bg a.btn:active {   background: transparent; margin-top: 15px; }
.trays-popup.report-bg a.btn:hover{ background: #931004;}

.trays-popup.report-bg label{ background: #f8f8f8; }


/* Single Popup */
form#update-tray .form-group input{ margin-top: 15px; }
input#tray_image { outline: 0px; padding: 10px 7px; }
form#update-tray .form-group a#select-all-html {  margin-top: 0px; }

span#plant-html, span#ver-html { font-size: 15px;  line-height: 36px; }
span#plant-html span, span#ver-html span{ padding-right: 5px; }


.add-userp .form-group input:not([type="submit"]) {margin:0px 0px 5px 10px; }

.create-user .filter-menu .styled-select.slate {  margin: 0px 0px 0px 10px; }
.create-user .filter-menu .form-group .btn { margin-left: 10px; }

/* GALLERY */
.gallery-container{ padding:50px 10px 10px 0px;  overflow-x: auto; width: 100%;  min-height: 100px;} 
.gallery ul{ list-style-type: none; width: max-content; }
.gallery ul li{ max-width: 280px; margin-right: 15px; border:1px solid #ddd; display: inline-block; cursor: pointer;  }
/* Hide the slides by default */
/*.modal.gallery-popup {  display: none; }*/
/*.gallery-popup .mySlides {   display: block; }*/
#myModal2.popup-form .modal-content {  width: auto; max-width: 600px; padding: 1px; }
.gallery-popup .prev, .gallery-popup .next {   cursor: pointer;  position: absolute;  top: 53%;  width: auto;  padding: 16px;  margin-top: -50px;  color: white; 
  font-weight: bold;  font-size: 20px;  transition: 0.6s ease;  border-radius: 0 3px 3px 0;  user-select: none;  -webkit-user-select: none;  background-color: rgba(0, 0, 0, 0.8);}
.gallery-popup .next {  right: 0;  border-radius: 3px 0 0 3px;}
.gallery-popup .prev:hover, .gallery-popup .next:hover {   background-color: rgba(0, 0, 0, 0.8); }
.hover-shadow:hover {   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)/*, 0 6px 20px 0 rgba(0, 0, 0, 0.25)*/;   cursor:pointer; }





/* #    Media Queries by Rajesh Kumar Kukreja : Cross Country Webservices
============================================================================================================== */ 


/* Desktop resolution  : screen 01 */
@media only screen and (min-width: 2301px) and (max-width: 2900px) {   }

/* Desktop resolution : screen 02 */
@media only screen and (min-width: 1901px) and (max-width: 2300px) {   }

/* Desktop resolution : screen 03 */
@media only screen and (min-width: 1601px) and (max-width: 1900px) {   }

/* Desktop resolution : screen 04 */
@media only screen and (min-width: 1441px) and (max-width: 1600px) {  }

/* 15.6 Laptop resolution : screen 05 */
@media only screen and (min-width: 1281px) and (max-width: 1440px) {  }

/* Smaller than standard 960 (devices and browsers) : screen 06 */
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
.col-xs-17, .col-sm-17, .col-md-17, .col-lg-17 {  padding-right: 7px;   padding-left: 7px; }  /* CELL COUNTS */
 }

/* Smaller than standard 960 (devices and browsers) : screen 07 */
@media only screen and (min-width: 990px) and (max-width: 1024px) { 
.col-xs-17, .col-sm-17, .col-md-17, .col-lg-17 {  padding-right: 7px;   padding-left: 7px; }  /* CELL COUNTS */
 }

/* Tablet Portrait size to standard 990 (devices and browsers) : screen 08 */
@media only screen and (min-width: 959px) and (max-width: 990px) {   
.container{ width: 100%; }

/*
.timeline {  min-height: 135px;   margin-bottom: 7px; }
.timeline ul {  } 
.timeline li {  margin: 0px 2% 30px 2%; }  
.timeline li a { margin-top: 15px; }
*/
.summery .grid-container-main { background-color: #f0f0f0; padding: 30px 10px 15px 0px; margin: 20px 0; }
.summery .grid-container {  display: grid;   grid-column-gap: 14px; }

.summery .grid-item, .summery .numbers .grid-item { min-width: 22px; min-height: 22px; padding: 5px; }
.summery .grid-item { margin-bottom: 14px; }


/* Cell Counts : Progress Bar */
.col-xs-17, .col-sm-17, .col-md-17, .col-lg-17 {  position: relative;  min-height: 1px;  padding-right: 7px; padding-left: 7px; }
.col-sm-17 { width: 20%;  float: left; }
.circle-bar{  width: 133px; margin: 0 auto; margin-bottom: 30px; }

}
	
	
/* Tablet Portrait size to standard 960 (devices and browsers) : screen 09 */
@media only screen and (min-width: 768px) and (max-width: 959px) { 
.container{ width: 100%; }


/*.timeline {  min-height: 135px;  background: none   margin-bottom: 7px; }
.timeline li {  margin: 0px 4.5% 30px 0%; }   .timeline li a { margin-top: 5px; }
*/
.summery .grid-container-main { background-color: #f0f0f0; padding: 30px 10px 15px 0px; margin: 20px 0; }
.summery .grid-container {  display: grid;   grid-column-gap: 14px; }

.summery .grid-item, .summery .numbers .grid-item { min-width: 22px; min-height: 22px; padding: 5px; }
.summery .grid-item { margin-bottom: 14px; }


/* Cell Counts : Progress Bar */
.col-xs-17, .col-sm-17, .col-md-17, .col-lg-17 {  position: relative;  min-height: 1px;  padding-right: 7px; padding-left: 7px; }
.col-sm-17 { width: 25%;  float: left; }
.circle-bar{  width: 133px; margin: 0 auto; margin-bottom: 30px; }


/* login box */
.login-box{ max-width: 90%; margin: 0 auto; background: #fff; /*min-height: 550px;*/  margin-top: 6%; padding:30px 15px; }
.login-page{ background: url(img/login-bg.jpg) 0 0 repeat; margin: 0px; padding: 0px 0px 50px 0px ; min-height: 768px; }
.login-box .filter-menu {  max-width: 420px;   margin: 5px auto 20px auto; }

 }
		
/* All Mobile Sizes (devices and browser) : screen 10 */
@media only screen and (max-width: 800px) { }

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) : screen 11 */
@media only screen and (min-width: 480px) and (max-width: 767px) { 


.toggle-btn{ margin-left: 0px;  } .top-strip .btn { margin-right: 0px; }

.page-heading h3 {     font-size: 16px; }
.button a.btn, .button a.btn:focus { font-size: 12px; padding: 8px; }

.banner h2 { text-align: center;  color: #931004;   font-size: 24px; }

.status h3 { font-size: 22px; line-height: 32px;  margin: 15px 0 30px 0; }


/*.timeline {  min-height: auto;  background: none    margin-bottom: 7px; }
.timeline ul { text-align: center; } 
.timeline li {  margin: 0px 4.5% 30px 0%; }   .timeline li a { margin-top: 5px; }*/

.filter-menu { margin-bottom: 10px; }
.filter-menu .search-btn{ margin-left: 15px; }


.tray {  padding: 5px; margin-bottom: 15px; } .tray li { margin-right: 10px; }


 /*  TABLE SUMMERY */

.summery  .container{ padding: 0px;   } 
.summery h3 { font-size: 22px;  line-height: 28px; margin-bottom: 10px;  }
.summery h3 span {  color: #4d4d4f;   font-weight: 400;  font-size: 18px; line-height: 18px; }

.summery .grid-container-main { background-color: #f0f0f0; padding: 30px 5px 15px 0px; margin: 20px 0;  overflow-x: scroll;}

.summery .grid-container {  display: grid;   grid-column-gap: 7px; }
.summery .grid-item {  min-height: auto;     margin-bottom: 7px;     box-shadow: 3px 2px 10px 0px rgba(0,0,0,0.20);}

.summery .grid-item, .summery .numbers .grid-item { min-width: 12px; min-height: 12px; padding: 0px; }

.summery .numbers .grid-item span {  width: 15px;     height: 15px;  font-size: 9px;} /* Numbers */
.grid-item.alphabet { font-size: 12px;   font-weight: bold;  text-align: center;  box-shadow: unset;}



/* Cell Counts : Progress Bar */
.cell-counts { padding-top: 0px; }
.cell-counts h3 {   font-size: 22px;  line-height: 28px;  }

.cell-counts h5 {  font-size: 18px; }
.cell-counts .add-bottom50 {  margin-bottom: 0px; }

.col-xs-17, .col-sm-17, .col-md-17, .col-lg-17 {  position: relative;  min-height: 1px;  padding-right: 7px; padding-left: 7px; }
.col-sm-17 { width: 33%;  float: left; }
.circle-bar{  width: 133px; margin: 0 auto; margin-bottom: 30px; }


/*.status .filter-menu { width: 360px; margin: 0 auto; }*/


/* Reporting System page */
.report-filter { width: 360px; margin: 0 auto; }
.filter-menu .form-group input[type=button].search-btn{ margin-left: 45%; }

}
  
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) : screen 12 */
@media only screen and (max-width: 479px) { 
   


.toggle-btn{ margin-left: 0px;  } .top-strip .btn { margin-right: 0px; }

.page-heading h3 {     font-size: 16px; }
.button a.btn, .button a.btn:focus { font-size: 12px; padding: 8px; }

.banner h2 { text-align: center;  color: #931004;   font-size: 24px; }

.status h3 { font-size: 22px; line-height: 32px;  margin: 15px 0 30px 0; }


/*.timeline {  min-height: auto;  background: none; margin-bottom: 7px; }
.timeline ul { text-align: center; } 
.timeline li {  margin: 0px 4.5% 30px 0%; }   .timeline li a { margin-top: 5px; }*/

.filter-menu { margin-bottom: 10px; }
.filter-menu .search-btn{ margin-left: 15px; }
.filter-menu .styled-select.slate {  margin: -7px 0px 5px 0px; }
.tray {  padding: 5px; margin-bottom: 15px; } .tray li { margin-right: 10px; }


 /*  TABLE SUMMERY */
.summery  .container{ padding: 0px;   } 
.summery h3 { font-size: 22px;  line-height: 28px; margin-bottom: 10px;  }
.summery h3 span {  color: #4d4d4f;   font-weight: 400;  font-size: 18px; line-height: 18px; }

.summery .grid-container-main { background-color: #f0f0f0; padding: 30px 5px 15px 0px; margin: 20px 0;  overflow-x: scroll;}

.summery .grid-container {  display: grid;   grid-column-gap: 7px; }
.summery .grid-item {  min-height: auto;     margin-bottom: 7px;     box-shadow: 3px 2px 10px 0px rgba(0,0,0,0.20);}

.summery .grid-item, .summery .numbers .grid-item { min-width: 12px; min-height: 12px; padding: 0px; }

.summery .numbers .grid-item span {  width: 15px;     height: 15px;  font-size: 9px;} /* Numbers */

.grid-item.alphabet { font-size: 12px;   font-weight: bold;  text-align: center;  box-shadow: unset;}
.grid-container35 .grid-item.alphabet{  font-size: 12px; }


/* Cell Counts : Progress Bar */
.cell-counts { padding-top: 0px; }
.cell-counts h3 {   font-size: 22px;  line-height: 28px;  }

.cell-counts h5 {  font-size: 18px; }
.cell-counts .add-bottom50 {  margin-bottom: 0px; }

.col-xs-17, .col-sm-17, .col-md-17, .col-lg-17 {  position: relative;  min-height: 1px;  padding-right: 7px; padding-left: 7px; }
.col-sm-17 { width: 50%;  float: left; }
.circle-bar{  width: 133px; margin: 0 auto; margin-bottom: 30px; }


/* pages for users / variety / plants list */
.plant-status p{ text-align: center; margin-bottom: 20px; }
.plant-status fieldset fieldset{ padding-left: 0px; }
.table-responsive {  border: 1px solid #eee; }

/* Reporting System page */
.filter-menu .form-group input[type=button].search-btn{ margin-left: 45%; }

/* login box */
.login-box{ max-width: 90%; margin: 0 auto; background: #fff; /*min-height: 550px;*/  margin-top: 6%; padding:15px 0px; }
.login-page{ background: url(img/login-bg.jpg) 0 0 repeat; margin: 0px; padding: 0px 0px 20px 0px ; min-height: 768px; }
.login-box .filter-menu {  max-width: 420px;   margin: 5px auto 20px auto; }


.trays-list form { max-width: inherit;  float: none;  margin-bottom: 20px; }


/* 21 July 2020*/
.modal { overflow-x: hidden; /*display: block;*/ }
.popup-form2 .modal-content { position: relative;  width: 100%; border: 0px solid #ddd; margin: 0 auto 50px auto; 
  z-index: 999999999;     background: #f8f8f8;  box-shadow: 3px 2px 10px 1px rgba(0,0,0,0.15); border-radius: 10px; }

.trays-popup .status { padding: 0px 0;  overflow: visible; }
.trays-popup.report-bg { padding:  0;   background: transparent;  box-shadow: 0px 0px 0px 0px ; border-radius: 10px;}
.trays-popup.report-bg h3, .trays-popup.report-bg p { text-align: center; margin: 0px;  }
.trays-popup.report-bg h3 span { border:0px; }

.trays-popup.report-bg a.btn, .trays-popup.report-bg a.btn:focus,.trays-popup.report-bg a.btn:visited, 
.trays-popup.report-bg a.btn:active {   background: transparent; margin-top: 15px; }
.trays-popup.report-bg a.btn:hover{ background: #931004;}

.trays-popup.report-bg label{ background: #f8f8f8; }


}
	
/* Small devices (mobile, 360px and down) : screen 13 */
@media only screen and (max-width: 360px) { }

/* Small devices (mobile, 320px and down) : screen 14 */
@media only screen and (max-width: 320px) {   }