@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");

* {
  box-sizing: border-box;
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.login {
  background-color: whitesmoke;
  font-size: 16px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
}

.container {
  max-width: 98vw;
  margin: 0 auto;
  padding: 1rem;
  background-color: darkgreen;
}

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

.login .container {
  max-width: 460px;
  margin: 3rem auto;
  padding: 2rem;
  border: 1px solid darkgreen;
  border-radius: 0.25rem;
  background-color: darkgreen;
  color: whitesmoke;
  font-weight: bold;
}

.input {
  appearance: none;
  display: block;
  width: 100%;
  color: whitesmoke;
  border: 1px solid rbg(180, 180, 180);
  background-color: whitesmoke;
  color: darkgreen;
  font-weight: bold;
  padding: 1rem;
  border-radius: 0.25rem;
}

.input.input-error {
  border: 1px solid red;
}

.input.input-error:focus {
  border: 1px solid red;
}

.input:focus {
  outline: none;
  border: 1px solid whitesmoke;
  background-clip: padding-box;
}

.error-message {
  font-size: 0.85rem;
  color: red;
}

.button {
  background-color: whitesmoke;
  padding: 1rem;
  border: none;
  color: darkgreen;
  font-weight: bold;
  display: block;
  width: 100%;
  text-align: center;
  cursor: pointer;
  font-size: 1rem;
}

.button:hover {
  filter: brightness(110%);
}

#dashboard {
  display: none;
}

.page {
  text-decoration: none;
  color: whitesmoke;
}

html {
  margin: 0;
  padding: 0;
}

#loader {
  display: block;
  position: absolute;
  top: 35vh;
  left: 45vw;
  border: 16px solid #f3f3f3;
  /* Light grey */
  border-top: 16px solid darkgreen;
  /* Blue */
  border-radius: 50%;
  width: 220px;
  height: 220px;
  animation: spin 2s linear infinite;
}

#login {
  display: none;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.dashboard {
  position: absolute;
  width: 100%;
  height: 140%;
  margin: 0;
  padding: 0%;
  background-color: whitesmoke;
  box-sizing: border-box;
}

/* Sidebar */

#sidebar {
  display: none;
}

.sidebar {
  position: fixed;
  height: 100%;
  /*calc(100% - 40px);*/
  width: 250px;
  background-color: darkgreen;
  color: whitesmoke;
  top: 0;
  padding: 20px;
}

.sidebar>img {
  height: 50px;
  margin-left: -5px;
  margin-bottom: 20px;
}

.head {
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
  margin-left: -5px;
  gap: 1em;
}

.letter {
  background-color: white;
  border-radius: 50%;
  width: 20%;
  color: darkgreen;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: bold;
}


.user>* {
  margin: 0;
}

.nav {
  margin-top: 60px;
  margin-left: 0;
}

.nav__list {
  list-style-type: none;
  margin: 0;
}

.nav__list--item {
  margin: 0;
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  align-items: center;
  font-weight: 500;
  text-decoration: none;
  color: whitesmoke;
}

.nav__list--item>i {
  margin-right: 20px;
}

.sidebar>button {
  position: absolute;
  bottom: 30px;
  left: 20px;
  background-color: white;
  font-family: inherit;
  width: 200px;
  height: 40px;
  border-radius: 3%;
  font-size: 16px;
  color: darkgreen;
  border-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.fa-message {
  margin-top: 5px;
}

/* Painel */
#painel {
  position: absolute;
  left: 250px;
  padding: 15px 25px;

  width: calc(100% - 250px);
  height: calc(100% - 31px);
  margin-bottom: 0px;
}

#painel>h1 {
  margin-top: 0;
  color: darkgreen;
  border-bottom: 1px solid;
  box-sizing: border-box;

  padding: 5px;
}

.toggler>form {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}


.programselect select {
  background-color: white;
  border: 2px solid darkgreen;
  color: darkgreen;
  font-weight: bold;
  border-radius: 3%;
  height: 30px;
  width: 100%;
}

.datalabel {
  color: darkgreen;
  font-weight: bold;
}

.dataselect {
  background-color: darkgreen;
  border: 2px solid darkgreen;
  color: white;
  font-weight: bold;
  border-radius: 3%;
  height: 30px;

}


.programselectbox {
  position: relative;

}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.programas {
  display: none;
  border: 1px #dadada solid;
  position: absolute;
  z-index: 2;
  background-color: white;
}

.programas label {
  display: block;
  background-color: white;
}

.programas label:hover {
  background-color: #1e90ff;
}

.malha {
  position: relative;
  display: grid;
  margin-top: 15px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(7, minmax(auto, 1fr));
  gap: 10px;
  height: 100%;
}

.malha>* {
  border: solid lightgrey 1px;
  border-radius: 2%;
}

#one {
  grid-column: 1;
  grid-row: 1;
}

#two {
  grid-column: 2;
  grid-row: 1;
}

#three {
  grid-column: 3;
  grid-row: 1;
}

#four {
  grid-column: 4;
  grid-row: 1;
}

.stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: darkgreen;
}

.stat>h3 {
  margin: 10px auto;
  display: flex;
  justify-content: center;
  text-decoration: underline;

}

.stat>h1 {
  color: darkgreen;
  font-weight: bold;
  font-size: 35px;
}

.stat>p {
  background-color: lightpink;
  color: red;
  width: 40px;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  justify-content: center;
}


.five {
  grid-column: 1 / 3;
  grid-row: 2 / 5;
  position: relative;

}

.six {
  grid-column: 3 / 5;
  grid-row: 2 / 5;
}

.seven {
  grid-column: 1 / 3;
  grid-row: 5 / 8;
}

.eight {
  grid-column: 3 / 5;
  grid-row: 5 / 8;
}

#graph {
  position: absolute;
  left: 200px;
}

#timespan {
  position: absolute;
  top: 0;
  left: 0;
  background-color: darkgreen;
  border: 2px solid darkgreen;
  color: white;
  font-weight: bold;
  border-radius: 3%;
  height: 22px;
}

#tooltip1 {
  border: 1px solid #ccc;
  position: absolute;
  padding: 10px;
  background-color: #fff;
  display: none;
  pointer-events: none;
}

#tooltip2 {
  border: 1px solid #ccc;
  position: absolute;
  padding: 10px;
  background-color: #fff;
  display: none;
  pointer-events: none;
}

#tooltip3 {
  border: 1px solid #ccc;
  position: absolute;
  padding: 10px;
  background-color: #fff;
  display: none;
  pointer-events: none;
}

#usage_timespan {
  position: absolute;
  top: 0;
  left: 0;
  background-color: darkgreen;
  border: 2px solid darkgreen;
  color: white;
  font-weight: bold;
  border-radius: 3%;
  height: 22px;
}

#timespan3 {
  position: absolute;
  top: 0;
  left: 0;
  background-color: darkgreen;
  border: 2px solid darkgreen;
  color: white;
  font-weight: bold;
  border-radius: 3%;
  height: 22px;
}

#usage_chart {
  position: relative;
}

#activity_chart {
  position: relative;
}

.axis {

  shape-rendering: geometricPrecision;
}


#map {
  position: relative;

  border-radius: 2%;
  height: 100%;
  width: 100%;
}

/* Plods page */
#plods {
  display: block;
  position: absolute;
  left: 250px;
  padding: 15px 25px;

  width: calc(100% - 250px);
  height: calc(100% - 31px);
  margin-bottom: 0px;
}

.page {
  cursor: pointer;
}

.headerPlods {

  color: darkgreen;
  font-weight: bold;
}

.filter {
  margin-top: 10px;
  padding-bottom: 5px;
  display: flex;
  gap: 20px;
  border-style: none none double none;
}

#plod__toggler {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

#plod__toggler>button {
  height: 35px;
  width: 130px;
  margin-top: 15px;
  background-color: darkgreen;
  border: 2px solid darkgreen;
  font-weight: bold;
  border-radius: 3%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
}

#table_div {
  width: 100%;
}

#myTable,
#holes__myTable {
  margin-top: 15px;
  /*border-collapse: collapse;*/
  border-spacing: 0 0;
  width: 100%;
}

#mytable>th,
td {
  padding: 10px 20px;
  margin: 0;
  text-align: center;
}




/*#mytable > td:nth-child(1){
  width: 20%;
}*/


tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:not(:first-child):hover {
  background-color: green;
}

/*.weird{
  text-decoration: underline;
  color: black;
}*/

.weird:hover {
  color: white;
  cursor: pointer;
}

#individualPlod {
  display: none;
  position: absolute;
  left: 250px;
  padding: 15px 25px;

  width: calc(100% - 250px);
  height: calc(100% - 31px);
  margin-bottom: 0px;
}

#individualPlodBorder {
  position: relative;
  margin: auto;
  padding: 2% 0;
  border: 1px solid;
  width: calc(100% - 30vw);
}

#plodLogo {
  position: absolute;
  right: 40px;
  top: 20px;
}

#plodPageTitle {
  display: flex;
  justify-content: center;
  margin-top: 120px;
  text-decoration: underline;
}

/*#detailsLog{
  display: grid;
  grid-template-columns: 1fr 1fr;
}*/

#details {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

#details__plod {
  display: flex;
  justify-content: center;
  gap: 50px;
}

#details__plod>ul {
  list-style-type: none;
  line-height: 3;

}

#details__plod>ul:nth-of-type(1) {
  font-weight: bold;

}

#plodPage__actividades {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#plodPage__drilling {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#plodPage__consumables {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#plodPage__equipment {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#plodPage__survey {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Create Plod */

#createPlod {
  display: none;
  background-color: white;
}

#createPlod__sidebar {
  position: fixed;
  height: 100%;
  /*calc(100% - 40px);*/
  left: 250px;
  width: 350px;
  background-color: #E6E6E6;
  color: darkgreen;
  top: 0;
  padding: 20px;
}

#createPlod__content {
  position: absolute;
  left: 600px;
  padding: 15px 25px;
  width: calc(100% - 700px);
  height: calc(96%);

  display: flex;
  flex-direction: column;
  align-items: center;
}

#createPlod__details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4em;
  margin-bottom: 30px;
}

/*#createPlod__details > *{
  margin-bottom: 20px;
}*/

#createPlod__details--dataTurno,
#createPlod__details--rigTime,
#createPlod__personnel--inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2em;
}

#createPlod_actividade--hidInput {
  display: none;
  flex-direction: column;
  gap: 0px;
  align-items: center;
}

#createPlod_drilling--hidInput {
  display: none;
}

#createPlod_personnel--hidInput {
  display: none;
}

#createPlod_equipment--hidInput {
  display: none;
  flex-direction: column;
  gap: 0px;
  align-items: center;
}

#createPlod_consumable--hidInput {
  display: none;
  flex-direction: column;
  gap: 0px;
  align-items: center;
}

#createPlod_survey--hidInput {
  display: none;
  flex-direction: column;
  gap: 0px;
  align-items: center;
}

#createPlod--submit, #createHole--submit {
  width: 15%;
  padding: 1% 0;
  border-radius: 0%;
  background-color: darkgreen;
  border: none;
  color: white;
  font-weight: bold;
}

#createPlod--submit:hover, #createHole--submit:hover {
  cursor: pointer;
}

#createPlod__equipment--input:hover,
#createPlod__consumable--input:hover,
#createPlod__actividade--input:hover,
#createPlod__personnel--input:hover,
#createPlod__drilling--input:hover,
#createPlod__survey--input:hover,
#createPlod__anexos--input:hover {
  cursor: pointer;
}

.emptyness:after {
  content: '.';
  visibility: hidden;
}


/* Holes page */
#holes {
  display: block;
  position: absolute;
  left: 250px;
  padding: 15px 25px;

  width: calc(100% - 250px);
  height: calc(100% - 31px);
  margin-bottom: 0px;
}

.holes__header {

  color: darkgreen;
  font-weight: bold;
  margin-bottom: 10px;
  border-style: none none double none;
  padding-bottom: 10px;
}

#holes__toggler {
  color: darkgreen;

  display: flex;
  justify-content: space-between;
}

#holes__myTable>th,
td {
  padding: 10px 20px;
  margin: 0;
  text-align: center;
}

#newHole, #newPlod {
  background-color: darkgreen;
  padding: 0.4rem;
  width: 8rem;
  border: none;
  color: whitesmoke;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  font-size: 1rem;
}

.strange:hover {
  color: white;
  cursor: pointer;
}


#individualHole {
  display: none;
  position: absolute;
  left: 250px;
  padding: 15px 25px;

  width: calc(100% - 250px);
  height: calc(100% - 31px);
  margin-bottom: 0px;
}

#individualHoleBorder {
  position: relative;
  margin: auto;
  padding: 2% 0;
  border: 1px solid;
  width: calc(100% - 30vw);
}

#holeLogo {
  position: absolute;
  right: 40px;
  top: 20px;
}

#holePageTitle {
  display: flex;
  justify-content: center;
  margin-top: 120px;
  text-decoration: underline;
}

/*#detailsLog{
  display: grid;
  grid-template-columns: 1fr 1fr;
}*/

#details2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

#details__hole {
  display: flex;
  justify-content: center;
  gap: 50px;
}

#details__hole>ul {
  list-style-type: none;
  line-height: 3;

}

#details__hole>ul:nth-of-type(1) {
  font-weight: bold;

}


#holePage__plods {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#holePage__consumables {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#holePage__actividades {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#holePage__plods {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#holePage__survey {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#createPlod {
  display: none;
  background-color: white;
}

#createHole__sidebar {
  position: fixed;
  height: 100%;
  /*calc(100% - 40px);*/
  left: 250px;
  width: 350px;
  background-color: #E6E6E6;
  color: darkgreen;
  top: 0;
  padding: 20px;
}

#createHole__content {
  position: absolute;
  left: 600px;
  padding: 15px 25px;
  width: calc(100% - 700px);
  height: calc(96%);

  display: flex;
  flex-direction: column;
  align-items: center;
}

#createHole__details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4em;
  margin-bottom: 30px;
}

#createHole__detailLists{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#createHole__detailLists > ul{
  display: flex;
  flex-direction: column;
  gap: 1em;
  justify-content: space-around;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 60%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

#modal-header1 {
  padding: 2px 16px;
  background-color: red;
  color: white;
}

#modal-header2 {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {padding: 2px 16px;}

#modal-footer1 {
  padding: 2px 16px;
  background-color: red;
  color: white;
}

#modal-footer2 {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.strangePlods:hover{
  cursor: pointer;
}

#logLoader {
  display: block;
  position: absolute;
  top: 35vh;
  left: 45vw;
  border: 16px solid #f3f3f3;
  /* Light grey */
  border-top: 16px solid darkgreen;
  /* Blue */
  border-radius: 50%;
  width: 220px;
  height: 220px;
  animation: spin 2s linear infinite;
}


.leaflet-control-attribution {
  display: none;
}