body {
  font-family: "Suisse Intl", sans-serif;
}

.Formsection{
display: flex;
padding: 20px;
flex-direction: column;
justify-content: center;
align-items: center;
background: #FFF;

  width: 100%;
  box-sizing: border-box;
}
.Login{
    display: flex;
width: 392px;
flex-direction: column;
align-items: flex-start;
border-radius: 10px;
border: 1px solid #EBEBEB;
background: #FFF;
}

.Font2501{
    flex: 1 0 0;
    color: #222;

font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.96px;
}
.Loginhead{
display: flex;
padding: 24px;
align-items: center;
gap: 10px;
align-self: stretch;
}
.Font2502{
    color: #222;

font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.56px;
}
.forminput{
    display: flex;
padding: 12px;
align-items: center;
align-self: stretch;
border-radius: 10px;
background: #F5F5F5;
}
.LoginMid{
    display: flex;
padding: 24px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.pass{
    color: #7D7D7D;
text-align: right;

font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.56px;
align-self: stretch;
}
.siginbtn{
display: flex;
padding: 12px;
justify-content: center;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 8px;
background: #222;
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.56px;
}
.loginfooter{
    display: flex;
padding: 24px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}



.mainsection {
  display: flex;
  width: 100% !important;

}

.blackbtn{
  display: flex;
padding: 10px 16px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 8px;
background: #222;
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.56px;
}
.blackbtn1{
  display: flex;
padding: 8px 10px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 8px;
background: #222;
color: #FFF;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.56px;
}
.greenbtn{
  display: flex;
padding: 8px 10px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 8px;
background-color: red;
color: #FFF;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.56px;
}

.allselect{
  display: flex;
padding: 8px 10px;
justify-content: space-between;
align-items: center;
flex: 1 0 0;
border-radius: 8px;
background: #F5F5F5;

color: #222;

font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.56px;
}
.sidebar {
  width: 280px;
  color: #fff;
  display: fixed;
  flex-direction: column;
  justify-content: space-between;



}
.menu{
    display: flex;
padding: 18px 24px;
flex-direction: column;
align-items: flex-start;
gap: 4px;
flex: 1 0 0;
align-self: stretch;
}
.logo {
display: flex;
padding: 24px;
align-items: center;
gap: 10px;
align-self: stretch;
}




.sidebar-link {
  display: flex;
  padding: 16px; /* Set the same padding here */
  align-items: center;
  gap: 10px;
  align-self: stretch;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.64px;
  color: #000; /* or your base text color */
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar-link:active {
  color: #FFF;
  background-color: #000; /* optional highlight on click */
}

.logout {
display: flex;

background: #000000;
}

.main-content {
display: flex;
padding: 24px;
flex-direction: column;
gap: 10px;
flex: 1 0 0;
align-self: stretch;



}


thead {
  background-color: #000;
  color: #fff;



}

thead th {

padding: 16px;
align-items: center;
gap: 25px;


font-size: 14px;

}

tbody td {
padding: 12px;
align-items: center;
font-size: 14px;
}

  /* Status badge base */
    .status {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
    }

    /* Conditional styles based on status */
    .status-complete {
      color: #28C76F;
      border: 1px solid #28C76F;

    }

    .status-pending {
      color: #F9C851;
      border: 1px solid #F9C851;
      background-color: #fff9e6;
    }

    .status-rejected {
      color: #EA5455;
      border: 1px solid #EA5455;
      background-color: #ffecec;
    }

    select {
      padding: 8px;
      background-color: #f5f5f5;
      border: 1px solid #ccc;
      border-radius: 6px;
    }
    .inputVeiw{
display: flex;
padding: 12px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-radius: 10px;
background: #F5F5F5;
color: #222;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.48px;
    }

         .select-arrow {
            position: absolute;
            right: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
        }