body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  background-color: #292929;
}
button{
  cursor: pointer;
}
a:link{
  text-decoration: inherit;
  text-decoration: none;
}

#greetings-li,
#first-li,
#second-li,
#third-li,
#fourth-li,
#fifth-li{
  display: flex;
  align-items: center;
  margin: 3vh 0 3vh 0.75vw;
}
a[id$="-li"]:hover > li{
  color: #FDBC2D;
}
.main-page{
  display: grid;
  height:100vh;
  background-color: #292929;
  grid-template-areas:
  'navBar pageForm pageForm pageForm pageForm pageForm'
  'navBar pageForm pageForm pageForm pageForm pageForm'
  'navBar pageForm pageForm pageForm pageForm pageForm'
}

.main-wrapper{
    color: #D4D4D5;
    background-color: #292929;
    opacity: 1;
    height: calc(100vh - var(--footerHeight));
    width: calc(100vw - 260px);
    overflow-y: auto;
}

.logo {
  grid-area: logo;
  width: calc(100vw - 260px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  position: relative;
  height: var(--footerHeight);
  float: right;
}
.logo img {
  position: relative;
  right: 42px;
  bottom: 42px;
}

.painelTop{
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: start;
  margin-left: 2rem;
  margin-right: 2rem;
}

.painelMainTitle{
  padding: 0;
  margin: 0;
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: left;
}

.painelTopLogin{
  text-align: left;
  margin-top: 2rem;
  margin-left: 1.875rem;
  padding-left: 5rem;
  padding-right: 5rem;
}

.painelLoginTitle{
  padding: 0;
  margin: 0;
  margin-bottom: .5rem;
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.7rem;
}

.separator{
  width: 4vw;
  height: .25rem;
  background-color: #FD9932;
  display: block;
}

ul .wrapper-initial-page{
  width: 100%;
  margin-top: 10px;
  border-bottom: solid 0.3px #D4D4D5
}
.navbarLeft{
  text-align: center;
  background-color: #1A1A1A;
  box-shadow: 0px 3px 10px #121212;
  opacity: 1;
  grid-area: navBar;
  width: 260px;
  height: 90vh;
  position:relative; 
  padding: 5vh 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
#progressbar{
  background-color: #E5E5E5;
  margin-left: -3px;
}
.progressbar-text{
  display: flex;
  font-size: 0.570rem;
  margin-top: 13px;
  color: #707070;
  width: 100vh;
  justify-content: space-between;
  margin-bottom: 13px;
}
progress::-moz-progress-bar {
  background: #0055FF;
}
progress::-webkit-progress-value {
  background: #0055FF;
}
progress {
  color: #0055FF;
}
progress[value]{
  width: 100vh;
  height: 7px;
  background-color: #0055FF;
}
.navbarLeft-img-logo{
  width: 210px;
  height: 50px;
}
.navbarLeft ul li{
  list-style: none;
  text-align: left;
  font-size: 1.300rem;
  color: #D4D4D5;
  margin-left: 6px;
}
.navbarLeft ul {
  padding-left: 0px;
}
.navbarLeft-list img{
  height: 25px;
  width: 25px;
  margin-right: 0.5vw;
}
.operation-form{
  grid-area: pageForm;
  position:relative; 
  height: calc(100vh - var(--footerHeight));
  overflow-y: scroll;
}
.operation-form span{
  position:relative;
  color: #D4D4D5;
  font-size: 1.4375rem;
}
.main-page-form{
  margin: 4vh;
  box-shadow: 0px 5px 6px #00000029;
  border-radius: 9px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #121212;
}
.header-form{
  background-color: #1A1A1A;
  opacity: 0.75;
  width: 100%;
  height: 120px;
  border-radius: 9px 9px 0px 0px;
  display: flex;
  justify-content: center;
  padding-top: 3vh;
}

.text-header-form{
  padding: 13px;
  max-width: 250px;
}
.text-header-form p{
  color: #AEAEAE;
  font-size: 0.835rem;
  max-width: 150px;
}
.form-main {
  margin-top: 30px;
  text-align: center;
  color: #AEAEAE;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.form-main p {
  max-width: 460px;
}

.form-main input, select, textarea {
  border: none;
  border-radius: 9px;
  box-sizing: border-box;
  color: #AEAEAE;
  font-weight: 400;
  width: 300px;
  height: 45px;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 0 18px 0 18px;
  background: #333333 0% 0% no-repeat padding-box;
  opacity: 1;
}
.cor-vermelha:-moz-placeholder {
  color: #AEAEAE !important;
  font-weight: bold;
  opacity:  1;

}
.input-type-checked{
  display: flex;
  flex-direction: row;
}

.input-type-checked input[type="radio"]{
  width: 15px;
  height: 11px;
}

#input-type-checked-operation{
  display: flex;
  flex-direction: row;
}
#input-type-checked-results{
  display: flex;
  flex-direction: row;
}
.form-control-input-radios{
  display: flex;
}
/* .hide{
  display: none;
} */
.input-type-checked-results-one{
  display: flex;
  margin-top: 30px;
  justify-content:space-between;
}
.input-type-checked-results-one input{
  width: 111px;
  height: 45px;
  margin-left: 12px;
  margin-right: 17px;

}
.input-type-checked-results-one label{
  max-width: 100px;
  text-align: left;
  margin-left: 13px;
}
.input-type-checked-results-two {
  display: flex;
  margin-top: 30px;
}
.input-type-checked-results-two input[type="checkbox"]{
  width: 26px;
  height: 26px;
  margin-left: 30px;
}
.info-results-cartuchos label{
  margin-top: 30px;
  margin-bottom: 20px;

}
.input-type-checked-results-two label{
  margin-left: 40px;
}
#input-type-checked-operation .form-control{
  display: flex;
  font-size: 0.75rem;
  margin-top: 20px;
  margin-bottom: 10px;
}

.input-type-checked p{
  color: #FDBC2D;
  font-size: 0.875rem;
  margin-top: 0px;
}
.input-type-checked .form-control{
  display: flex;
  font-size: 0.75rem;
  margin-top: 20px;
  margin-bottom: 10px;
}
.input-type-checked label{
  font-size: 0.875rem !important;
}
.input-type-checked .form-control input{
  display: flex;
  width: 14px;
  height: 14px;
  margin-left: 2px;

}
.btns-forms{
  display: flex;
  align-items: center;
  justify-content: center;
}
#add-another{
  background: none;
  border: none;
  color: #FDBC2D;
  text-transform: lowercase;
  float: right;
}
#add-another-cartucho{
  background: none;
  border: none;
  color: #FDBC2D;
  text-transform: lowercase;
  display: flex;
}
.btns-forms button{
  border-radius: 12px;
  width: 224px;
  height: 47px;
  margin-bottom: -12px;
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 30px;
  border: none;
  color: #292929
}
.btn-next{
  background-color: #FDBC2D;
  color: #292929;
  border: solid 1px #FDBC2D;
}
.btn-previus{
  background-color: #656565;
  color: #292929;
  border: solid 1px #656565;
}
label {
  align-items: center;
  color: #AEAEAE;
  display: flex;
  font-size: 0.6875rem;
}
.box-form-group{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 20px;
  column-gap: 2vw;
  text-align: left;
}
.page-final-cadastro strong{
  border: 0;
  color:#D4D4D5;
  font-weight: bold;
  font-size: 1.375rem;
}
#box-form-group-info-operation-one{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px;
  margin-top: 30px;
}

#box-form-group-result-operation-one #registro_ocorrencia{
  width:100vh;
}

.box-form-group h3{
  color: #707070;
}
.box-form-info-operation{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
#cartuchos-container{
  display: flex;
  flex-wrap: wrap;
}
#cartuchos-container input{
  width: 140px;
}
.error-message{
  color: #FDBC2D;
  font-size: 0.875rem;
  text-align: left;
}
p.error-message{
  max-width: 250px;
}
.tela-login-main a:link{
  margin-bottom: 40px;
}

.page-final-cadastro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.page-final-cadastro img {
  margin-bottom: 50px;
  margin-top: 30px;
}
.page-final-cadastro span {
  color:#D4D4D5;
  font-weight: bold;
  font-size: 2.1875rem;
}
.page-final-cadastro p {
  color:#D4D4D5;
  font-weight: 400;
  font-size: 1.375rem;
  max-width: 650px;
  margin-top: 50px;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.pagination ul{
  display: flex;
  max-width: 400px;
}
ul.pagination li{
  list-style: none;
}
ul.pagination li a, strong {
  color: #ffff;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #FDBC2D;
}
ul.pagination strong {
  color: #FDBC2D;
}
.pagination li:first-child a, strong {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.pagination li:last-child a, strong{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-color: #FDBC2D ;
}
/* .proximity-group {
  letter-spacing: 0.5px;
  max-width: 100%;
  flex-direction: column;
} */
.divide {
  max-width: 80%;
  margin: 0px 0px;
}
.sr-only {
  display: none;
}
.tr-lista-operacao{
  cursor: pointer;
}
.tr-lista-operacao:hover{
  background-color:#F5F5F5;
}
.operation-time, .operation-location {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  column-gap: 1vw;
  width: 100%;
  padding: 1vh 1vw;
}
.operation-location {
  border-bottom: 1px solid #707070;
}
.operation-time div, .operation-location div {
  flex-shrink: 1;
}
.operation-time > div, .operation-location > div {
  width: calc(25% - 2vw);
} 
.operation-time input {
  width: 100%;
}
.operation-location select {
  width: 100%;
}
.operation-location input {
  width: 100%;
}
.form-group.location-form {
  width: 100%;
  display: flex;
}
.progress-container {
  margin-left: auto;
  margin-right: 1vw;
}

.input-wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
  max-width: 80%;
  margin: 0px 0px;
}

@media(max-width: 1080px){
  html {
    font-size: 93.75%;
  }
}
@media(max-width: 720px){
  html {
    font-size: 87.5%;
  }
}