body{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; 
  min-height: 716px; 
  height:100vh; 
  overflow-y: auto;
}
#loading{
  z-index: 100000;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 38, 58, 0.75) !important;
  position: fixed;
  top: 0;
  left: 0;
}

#divalertbtrp{
  position: fixed;
  top: 75px;
  right: 30px;
  width: 40vw;
  z-index: 2000;
}

.form-floating > .form-control::placeholder {
  color: lightgray;
}
.form-floating > .form-control:not(:focus)::placeholder {
  color: transparent;
}
.form-floating>.form-control.form-control-sm,
.form-floating>.form-select.form-select-sm,
.form-floating>.form-control-plaintext {
  padding-left: 0.75rem;
}

.form-floating>.form-control.form-control-sm,
.form-floating>.form-control-plaintext,
.form-floating>.form-select {
  height: 2.4rem;
  line-height: normal;
  padding-top: 0.9rem;
  padding-bottom: 0.1rem;
}

.form-floating> .form-control-sm+label, .form-floating> .form-select-sm+label {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
}

.form-floating > .form-control.form-control-sm:focus ~ label, 
.form-floating > .form-control.form-control-sm:not(:placeholder-shown) ~ label, 
.form-floating > .form-control-plaintext ~ label, 
.form-floating > .form-select ~ label{
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-control, .form-select{
  border: 1px solid #646769;
  border-radius: 10px;
}

.dataTables_wrapper {
  font-size: 0.875rem !important;
}
table.dataTable td, table.dataTable th {
  font-size: 0.800rem !important;
  padding: 0.15rem 0.35rem;
}
table.dataTable tr{
  background-color: #e9e9e9;
}
table.dataTable td.nowrap{
  white-space: nowrap;
}
table.dataTable td.dt-control:before{
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900; 
  content: "\f106" !important;
  rotate: 180deg;
  line-height: normal !important;
  font-size: 1.5rem;
  border: none !important;
  background-color: transparent !important;
  color: black !important;
  box-shadow: none !important;
  margin-top: 2px !important;
  font-weight: bold;
  transition: 0.2s;
  height: 1.5rem !important;
  width: 2rem !important;
}
table.dataTable tr.dt-hasChild td.dt-control:before{
  rotate: 0deg !important;
}

.btn-excel{
  background-color: #1d6f42;
  color: white;
}
.btn-excel:hover, .btn-excel:focus{
  background-color: #0d4d29;
}

.form-control[required] ~ label:after,
select.form-select[required] ~ label:after {
  content: '*';
  color: red;
  font-size: 12px;
  margin-left: 4px;
}

.tblrowdet{
  max-width: 90vw; 
  text-align:justify;
}

@media (max-width:1600px) {
  .tblrowdet{
    max-width: 88vw; 
  }
}

@media (max-width:1366px) {
  .tblrowdet{
    max-width: 85vw; 
  }
}

@media (max-width:1024px) {
  #divalertbtrp{
    width: 60vw;
  }
  .tblrowdet{
    max-width: 83vw; 
  }
}


@media (max-width:768px) {
  .tblrowdet{
    max-width: 91vw; 
  }
  #divalertbtrp{
    width: 90vw;
  }
}