body{ 
  width: 100%;
  background:#E7E3E0; padding: 0 0; margin:0 0;
  font:13px Verdana, Arial, Helvetica, sans-serif;
}
.top-nav{
  width: 100%;
  background-color: #fff;
}
.top-nav img{
  width: 12rem;
  height: 5rem;
  margin-left: 3rem;
}
.left-nav, .returns-left-nav, .budgets-left-nav {
  float: left;
  width: 15%;
  margin-top: 2rem;
  /* margin-left: 1rem; */
  
}
/* MT Schedule left nav */
.mt-schedule-left-nav, .admin-left-nav{
  float: left;
  width: 13%;
  margin-top: 2rem;
  /* margin-left: 1rem; */
  
}
.left-nav ul, .mt-schedule-left-nav ul, .admin-left-nav ul, .returns-left-nav ul, .budgets-left-nav ul{
  list-style-type: none;
  cursor: pointer;
}
.left-nav li, .mt-schedule-left-nav li, .admin-left-nav li, .returns-left-nav li, .budgets-left-nav li{
  margin-top: .7rem;
  cursor: pointer;
  font-size: 14px;
}
.left-nav ul li a, .mt-schedule-left-nav ul li a, .admin-left-nav ul li a, .returns-left-nav ul li a, .budgets-left-nav ul li a{
  color: #20253a;
  text-decoration: none;
  padding-left: .3rem;
  padding-right: .3rem;
}

.admin-left-nav ul li a, .returns-left-nav ul li a, .budgets-left-nav ul li a{
  transition: box-shadow 0.3s ease;
}

.left-nav a:focus, .custom-active {
  outline: none; 
  box-shadow: 0 0 3px 2px #e600a0;
}

.form-p-details, .drugs-quantification-container, .main-container, .budgets-container {
  float: right;
  width: 80%;
  margin-top: 2rem;
  margin-right: 1rem;
}

.container {
  /* border: 1px solid #ddd; */
  padding: 20px;
  margin: 33px;
  margin-top: 5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  gap: 2rem;
  width: 60%;
}

/* Tile styles */
.tile {
  margin: 1rem; /* Space around card */
  padding: 0.25rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  transition: transform 0.2s, box-shadow 0.2s; /* Smooth transitions */
  cursor: pointer; /* Pointer cursor on hover */
}

.tile:hover {
  transform: translateY(-5px); /* Lift effect */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Stronger shadow */
}

.tile:active {
  transform: translateY(0); /* Remove lift effect on click */
}

.container div{
    width:14rem;
    height:16rem;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:1.2rem;
}
.container div a{
   text-decoration: none;
   color: #20253a;
   font-size: 20px;
}
.zone-or-subcounty, .edits, .admin-actions{
    display: none;
    margin-left: .4rem;
    cursor: pointer;
}

.one-or-multi, .page1Edits, .page2edits{
    display: none;
    margin-left: .8rem;
    cursor: pointer;
}
.edit_pg_1{
  outline: none; 
  box-shadow: 0 0 3px 2px #e600a0;
  margin-left: .8rem;
  padding-left: .3rem;
  padding-right: .3rem;
}
.edit_pg_2{
  margin-left: .8rem;
}

.highcharts-drilldown-axis-label {
  fill: rgb(28, 29, 33) !important; 
  font-weight: 300 !important;
}

.schedule-form {
  float: right;
  width: 85%;
  margin-top: 2rem;
  margin-right: 1rem;
}

.content-container {
  float: right;
  width: 84%;
  margin-top: 2rem;
  margin-right: 1rem;
}

/* Additional styles added to the data table*/
.dataTables_wrapper .dataTables_length select {
  width: 50px;
  height: 30px;
}

/* Additional styles added to the data table*/
.dataTables_wrapper .dataTables_length {
  padding-bottom: 10px;
}

.row-input {
  height: 1.5rem;
  width: 90%;
  text-align: center;
}

.rate-input {
  height: 1.5rem;
  width: 30%;
  flex-grow: 1;
}

.treatment-type-dropdown {
  height: 1.9rem;
  width: 90%;
  text-align: center;
}

#abz_subcounty_requisition, #abz_county_requisition {
  background-color: #ecfafb;
}

#pzq_subcounty_requisition, #pzq_county_requisition {
  background-color: #ffe4fa;
}

tr.dtrg-group {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

.styled-select {
  display: inline;
  padding: 5px 10px;
  margin-left: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  width: 120px;
  height: 35px;
  text-align: center;
  /* background-color: #E7E3E0; */
}

.checkbox, .radio {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 14px;
}

#error-modal ol {
  list-style-type: lower-roman; /* Use lower Roman numerals */
  line-height: 2; /* Increase line spacing */
  padding-left: 20px;
}

/* Admin left nav styles */
.county-admin-data, .subcounty-admin-data, .returns-data, .county-budget, .subcounty-budget{
  display: none;
  margin-left: .4rem;
  cursor: pointer;
}

.upload-container, .county-table-container, .mt-table-container, .subcounty-table-container, .data-table-container, .download-container{
  background-color: #fcfcfc;
  padding: 10px;
  padding-bottom: 20px;
}

#contact-details input, #subcounty-data-details input {
  height: 1.7rem;
  width: 60%;
  text-align: left;
  padding-left: 10px;
}

#contact-details label, #subcounty-data-details label {
  padding-top: 15px;
}

#contact-details input.error, #subcounty-data-details input.error {
  border: 2px solid red;
  background-color: #ffe6e6;
}

@media screen and (max-width: 600px) {
  .top-nav{
    width:100%;
  }
  .top-nav .welcome{
    display: none;
  }

  .top-nav img{
    padding:0;
    margin: 0;
  }
  .left-nav ul{
    display: flex;
    flex-direction: row;
  }
  
  .form-p-details #schoollist{
    display: flex;
    flex-direction: column;
  }
}