:root {
  --side-height: 0px;
  --bg: rgb(247, 250, 252);
  --primary-color: #2563eb;
  --prim-dark: #1d4ed8;
  --error-color:#dc2626;
  --success-color: #16a34a;
  --muted-color: #64748b;
  --white-color:#ffffff;
  --black-color: #000000;
  --large-font:1.5rem;
  --normal-font:0.95rem;
  --small-font:0.93rem;
  --tiny-font:0.7rem;
  --modal-overlay: #0f172a99;
  --border-color: #e2e8f0;
  --warn-col: #d97706;
  --max-width:1800px;
  --mobile-width:100%;
  --desktop-width:90%;
  --side-draw-width:70%;
  --accent:#2563eb;
  --accent-2:rgb(159, 153, 238);
  --normal-gap:5px;
  --corner-radius: 4px;
  --hover-bg:#eeeef0;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --th-color:#333;
  --th-bg:#f8f9fa;
}

*{
  margin:0;
  padding:0;
  outline:0;
  appearance:0;
  list-style:none;
  text-decoration:none;
  box-sizing:border-box;
}

body{
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-optical-sizing:auto;
  font-style:normal;
  font-variation-settings:"wdth" 100;
  line-height: 1.6;
  overflow-x:hidden;
  background: var(--white-color);
  font-size:var(--normal-font);
  scroll-behavior:smooth;
  position:relative;
}

.abcd01{
  min-height:100vh;
  max-width: var(--max-width);
  width: var(--mobile-width);
}

/* STYLING ASIDE HEADER*/
.abcd03{
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  z-index:35;
  width:260px;
  padding:14px 14px 12px;
  background:var(--white-color);
  border-right:1px solid var(--border-color);
  overflow-y:auto;
}

.abcd04{
  height:100%;
  width: var(--mobile-width);
  display:flex;
  flex-direction:column;
  position: relative;
}

.abcd05{
  margin:2px 13px 22px;
}

/* LOGO*/
._xusb33{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--normal-gap);
}

._klvl42{
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  object-fit: contain;
}

._knzi36{
  font-weight: 700;
  font-size: var(--large-font);
}

.abcd06{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  margin:2px 0;
  border-radius:23px;
  font-size:var(--small-font);
  font-weight:700;
  color: var(--black-color);
}

.abcd06:hover{
  background:var(--hover-bg);
}

.abcd07{
  width:22px;
  height:22px;
  display: flex;
  justify-content: center;
  font-weight: 700;
  color: var(--white-color);
  border-radius: 55%;
  border: 1px solid var(--white-color);
  background: var(--black-color);
  align-items: center;
  padding:5px;
}

.abcd09{
  background:var(--hover-bg);
}

.abcd10{
  margin-top:auto;
}

.abcd11{
  width: 100%; 
  margin-top: 8px;
  display: inline-block;
  text-align: center;
  padding:8px 16px;
  background-color: var(--white-color);
  color:var(--primary-color);
  border:1px solid var(--primary-color);
  border-radius:23px;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--small-font);
  cursor: pointer;
  transition: background-color 0.5s;
}

.abcd12{
  background:var(--primary-color);
  color:var(--white-color);
}

.abcd11:hover{
  background: var(--hover-bg);
  border: 1px solid var(--hover-bg);
  color: var(--primary-color);
}

.pabc01{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 8px;
  padding:8px 16px;
  border-radius:23px;
  background-color: var(--white-color);
  color:var(--primary-color);
  border:1px solid var(--hover-bg);
  cursor: pointer;
}

.pabc02{
  width: 23px;
  height: 23px;
  object-fit: cover;
  border-radius: 55%;
  border: 1px solid var(--hover-bg);
}

.pabc03{
  font-size: var(--small-font);
  font-weight: 500;
}

.pabc01:hover{
  background-color: var(--hover-bg);
  color:var(--black-color);
  border:1px solid var(--hover-bg);
}

.pabc04{
  width: var(--mobile-width);
  position: absolute;
  display: none;
  bottom: 46px;
  left:0px;
  border: 1px solid var(--border-color);
  border-radius: var(--corner-radius);
  background-color: var(--white-color);
  box-shadow:var(--shadow);
  z-index: 25;
}

.pabc05{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid var(--border-color);
  padding: 8px;
}

.pabc05a{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  padding: 8px;
}

.pabc06{
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pabc02b{
  width: 37px;
  height: 37px;
  object-fit: cover;
  border-radius: 55%;
  border: 1px solid var(--hover-bg);
}

.pabc07{
  font-size: var(--small-font);
  color: var(--black-color);
}

.pabc07a{
  font-size: var(--small-font);
  color: var(--black-color);
  font-weight: 400;
}

.pabc08{
  font-size: var(--tiny-font);
  color: var(--muted-color);
}

.pabc05a{
  color: var(--black-color);
  cursor: pointer;
}

.pabc05a:hover{
  background: var(--hover-bg);
}
/*HEADER*/
.head00{
  position: fixed;
  top: 0;
  left: 0;
  width: var(--mobile-width);
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  z-index: 20;
  padding: 10px;
  border-bottom: 1px solid var(--border-color);
  background: var(--white-color);
}

.head01{
  width: var(--mobile-width);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.head02{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px;
  cursor: pointer;
  border-radius: 55%;
}

.head03{
  position: relative;
}

.head031{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid var(--border-color);
}

.head11{
  width: var(--mobile-width);
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  gap: 5px;
  white-space: nowrap;
}

.pabx78{
  position: absolute;
  display: none;
  flex-direction: column;
  top: 50px;
  right:0px;
  border: 1px solid var(--border-color);
  border-radius: var(--corner-radius);
  background-color: var(--white-color);
  box-shadow: var(--shadow);
  white-space: nowrap;
  z-index:25;
}

.trwrp00{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--mobile-width);
  z-index: 20;
  background-color: transparent;
  display: none;
}

.trwrb00{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--mobile-width);
  z-index: 30;
  background-color: #00000052;
  display: none;
}

/* MAIN SECTION */
.abcd14{
  margin-left:260px;
  min-height:100vh;
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:48px;
  justify-content:center;
  padding:0 28px 0 0px;
}

.abcd15{
  min-width:0;
  width: var(--mobile-width);
  border-right: 1px solid var(--border-color);
}

.abcd16{
  padding: 10px 10px;
  display:flex;
  align-items:center;
  gap:7px;
}

.abcd17{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:var(--small-font);
  font-weight:600;
}

.abcd18{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.abcd22{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 16px;
  gap: 5px;
  border-radius:23px;
  border:1px solid var(--primary-color);
  background:var(--white-color);
  cursor:pointer;
  color: var(--primary-color);
}

.abcd22b{
  font-size: var(--small-font);
  font-weight: 500;
}

.abcd23{
  width:16px;
  height:16px;
  fill:var(--primary-color);
}

.abcd22:hover{
  border:1px solid var(--hover-bg);
  background: var(--hover-bg);
}

/* POST JOB BUTTON */
.abcd19b{
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 10px;
  background-color: var(--white-color);
}

.abcd19{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 8px 16px;
  gap: 8px;
  border: 1px solid var(--border-color);
  border-radius: 23px;
  cursor: pointer;
  background: var(--white-color);
}

.abcd19:hover{
  background: var(--hover-bg);
  border: 1px solid var(--hover-bg);
}

.abcd20{
  width: 16px;
  height: 16px;
}

.abcd21{
  font-size: var(--small-font);
  color: var(--muted-color);
}

/* JOB Card*/
.abcd24{
  border-bottom:1px solid var(--border-color); 
}

.abcd25{
  min-width:0;
}

.abcd25b{
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--black-color);
  font-size: var(--small-font);
  padding: 10px;
}

.abcd26{
  display:flex;
  align-items:center;
  gap:5px;
  color: var(--muted-color);
}

.abcd28{
  display:flex;
  align-items:center;
  gap:3px;
  color:var(--muted-color);
}

.abcd29{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.abcd30{
  color: var(--primary-color);
}

.abcd31{
  color:var(--muted-color);
}

.abcd32{
  font-weight:600;
  color: var(--black-color);
}

.abcd33{
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp: 2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size: var(--small-font);
}

.abcd33a{
  display:flex;
  flex-direction: row;
  align-items:center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px;
}

.abcd33c{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content: center;
  gap: 3px;
  padding: 7px 10px;
  background: var(--white-color);
  border: 1px solid var(--hover-bg);
  border-radius: 23px;
  position: relative;
  cursor: pointer;
}

.abcd33c:hover{
  background: var(--hover-bg);
}

.abcd33g{
  font-weight: 400;
  font-size: var(--small-font);
  color: var(--muted-color);
}

.stat23{
  position: absolute;
  top: -10px;
  right: -10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background-color: var(--white-color);
  border: 1px solid var(--hover-bg);
  color: var(--muted-color);
  font-size: var(--tiny-font);
  border-radius: 23px;
}

/* ADVERT Card*/

.abcd33k{
  border-bottom:1px solid var(--border-color); 
}

.abcd33o{
  display:flex;
  flex-direction:row;
  gap: 5px;
  font-size: var(--small-font);
  color: var(--black-color);
  padding: 10px;
}

.abcd33l{
  color: var(--muted-color);
}

.abcd33m{
  display:flex;
  align-items:center;
  gap:8px;
  color: var(--primary-color);
}

.abcd42:hover{
  text-decoration: underline;
}

.abcd33n{
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--corner-radius);
  border: 1px solid var(--border-color);
}

/* RIGHT SIDE SECTION */
.abcd34{
  min-width:0;
  align-self:start;
  position:sticky;
  top:var(--side-height);
  padding-top:16px;
  padding-bottom:22px;
}

.abcd35{
  border:1px solid var(--border-color);
  border-radius:var(--corner-radius);
  overflow:hidden;
  background:var(--white-color);
  margin-bottom:12px;
}

.abcd36{
  padding:10px;
  display: flex;
  flex-direction: column;
}

.abcd37{
  display: flex;
  flex-direction: row;
  align-items: normal;
  justify-content: space-between;
  width: var(--mobile-width);
  gap: 10px;
  color: var(--black-color);
  font-size: var(--small-font);
}

.abcd45{
  padding:10px;
}

.abcd46{
  font-size:var(--small-font);
  font-weight:700;
  margin-bottom:10px;
}

.abcd47{
  border-radius: 28px;
  margin-bottom: 3px;
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  position: relative;
  padding:8px 10px;
  font-size: var(--small-font);
  color: var(--black-color);
}
.abcd47:hover{
  background:var(--hover-bg);
}

.abcd50a{
  position: absolute;
  top: -10px;
  left: -3px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background-color: var(--white-color);
  border: 1px solid var(--hover-bg);
  color: var(--muted-color);
  font-size: var(--tiny-font);
  border-radius: 23px;
}

/* TODAYS ACTIVITY */
.abcd51{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:var(--small-font);
}

.abcd53{
  flex:1;
}

.abcd54{
  color:var(--muted-color);
}

.abcd55{
  font-weight:500;
  margin-top:2px;
}

/* FOOTER SECTION */
.abcd56{
  padding:17px 6px 8px;
  color: var(--muted-color);
  font-size: var(--small-font);
}

.abcd57{
  color:var(--muted-color);
  text-decoration:none;
  margin-right:10px;
  white-space:nowrap;
}

.abcd57:hover{
  text-decoration:underline;
  color:var(--primary-color);
}

.abcd58{
  white-space:nowrap;
  font-size: var(--tiny-font);
}

.plnc00 {
  display:flex;
  flex-direction: row;
  align-items: flex-start;
  gap:10px;
  padding: 10px 0;
}

.plnc00 label { 
  display: flex; 
  flex-direction: row;
  align-items: center; 
  gap: 3px; 
  cursor: pointer; 
  padding: 3px 9px;
  border-radius: var(--corner-radius);
  font-size:var(--small-font);
  background: #eff6ff;
}

.plan90{
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px;
  border-radius: var(--corner-radius);
  background: #ecfdf5;
  color: #15803d;
  font-size: var(--small-font);
  font-weight: 500;
}

.plnc02{
  display: flex;
  flex-direction: column;
  gap:2px;
}

.plnc03{
  color: var(--primary-color);
  font-weight:600;
}

.plnc04{
  color: var(--black-color);
  font-weight:400;
}



/*MODAL LIST JOB */

.modl05 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--modal-overlay);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.3s ease;
  padding: 10px;
}

.box07 {
  position: relative;
  background: var(--white-color);
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  border-radius: var(--corner-radius);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
  animation: scle08 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes scle08 {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.head09 {
  padding:10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white-color);
}

.mttl10 {
  font-size:var(--small-font);
  font-weight: 700;
  color: var(--black-color);
}

.cbtn11 {
  background: transparent;
  border: 1px solid var(--hover-bg);
  padding: 3px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-color);
  transition: background-color 0.2s, color 0.2s;
}

.cbtn11:hover {
  background-color: var(--hover-bg);
  color: var(--primary-color);
}

.body12 {
  padding:10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap:3px;
}

.form13 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rowx19 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.grpx14 {
  display: flex;
  flex-direction: column;
  gap:3px;
  width: 100%;
}

.grpd01{
  display: flex;
  flex-direction: column;
  gap:3px;
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: var(--corner-radius);
  padding: 10px;
}

.grpd01 span{
  font-size: var(--small-font);
  color: var(--muted-color);
}

.lbls15 {
  font-size:var(--small-font);
  color: var(--muted-color);
}

.inpt16 {
  width: 100%;
  padding: 8px 12px;
  font-size:var(--small-font);
  border: 1px solid var(--border-color);
  border-radius: var(--corner-radius);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background-color:var(--white-color);
  color: var(--black-color);
}

.area18 {
  resize: vertical;
  min-height: 100px;
}


.inpt16:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.selc17 {
  width: 100%;
  padding: 8px 12px;
  font-size:var(--small-font);
  border: 1px solid var(--border-color);
  border-radius: var(--corner-radius);
  outline: none;
  background-color: var(--white-color);;
  color: var(--black-color);
  cursor: pointer;
}

.selc17:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.radi20 {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.rbox21 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--small-font);
  cursor: pointer;
  color: var(--black-color);
}

.rbox21 input {
  accent-color: var(--primary-color);
  width: 12px;
  height: 12px;
  cursor: pointer;
}

.foot22 {
  padding: 10px 0 30px 0;
  display: flex;
  justify-content:center;
}

.sbtn23 {
  width: 100%;
  padding: 8px 12px;
  background-color: var(--primary-color);
  color: var(--white-color);
  font-size: var(--small-font);
  font-weight: 600;
  border: 1px solid var(--primary-color);
  border-radius: var(--corner-radius);
  cursor: pointer;
  transition: background-color 0.2s;
}

.sbtn23:hover {
  background-color: var(--prim-dark);
}

/* SHARE ICONS */

._ltfv4k {
  padding: 1px 0;
  justify-content: flex-start;
  gap: 12px;
  display: flex;
}

._icbv8t{
  padding: 6px;
  justify-content: center;
  flex-direction: row;
  display: flex;
  cursor: pointer;
  color: var(--muted-color);
  border: 1px solid var(--muted-color);
  border-radius: 55%;
}

._icbv8t:hover{
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

/*MODAL ERROS AND ALERTS*/
.messd10{
  display: flex;
  flex-direction: column;
  padding: 10px 10px 20px 10px;
}

.messd11{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.messd11a{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: var(--muted-color);
  border: 1px solid var(--muted-color);
  border-radius: 55%;
  padding: 10px;
}

.messd11b{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: var(--success-color);
  border: 1px solid var(--success-color);
  border-radius: 55%;
  padding: 10px;
}

.messd12{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 20px 0px;
  font-size: var(--normal-font);
  font-weight: 500;
  color: var(--muted-color);
}

.messd12b{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 20px 0px;
  font-size: var(--normal-font);
  color: var(--success-color);
}


.messd13{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.messd14{
  display: inline-block;
  text-align: center;
  padding: 0.5rem 1rem;
  background-color: var(--white-color);
  color:var(--primary-color);
  border:1px solid var(--primary-color);
  border-radius:var(--corner-radius);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--small-font);
  cursor: pointer;
  transition: background-color 0.2s;
}

.messd14:hover {
  border:1px solid var(--prim-dark);
  color:var(--prim-dark);
}

/*NO JOB*/

.messr10{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
  min-height: 200px;
}

.messd11x{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: var(--muted-color);
  border: 1px solid var(--muted-color);
  border-radius: 55%;
  padding: 10px;
}

.empt00{
  font-weight: 400;
  font-size: var(--normal-font);
  color: var(--black-color);
}

.messd22{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top:20px;
  margin-bottom: 20px;
  gap: 20px;
  font-size: var(--normal-font);
  color: var(--muted-color);
  font-weight: 500;
}

.edit00{
  width: var(--mobile-width);
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap:5px;
  padding: 5px 0;
}


.edit00 label { 
  display: flex; 
  flex-direction: column;
  align-items: center; 
  justify-content: center;
  gap: 3px; 
  cursor: pointer; 
  padding: 3px 9px;
}

.edit01{
  border-bottom: 2px solid var(--white-color);
  font-size:var(--small-font);
  font-weight: 500;
}

.edit02{
  border-bottom: 2px solid var(--primary-color) !important;
  color:var(--primary-color);
}

.prof00{
  margin-top: 10px;
  display: none;
}

.hdprf00{
  display: block;
}

.apprver {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  font-size: var(--small-font);
  padding: 10px 8px;
  margin-bottom: 8px;
  border-radius: var(--corner-radius);
  font-weight: 500;
  width: var(--mobile-width);
}

/* STYLING JOB SECTION */
.abcd17b{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  padding: 6px; 
  border-radius: 50%; 
  border: 1px solid var(--black-color);
  color:var(--black-color);
  cursor: pointer;
}
.abcd17b:hover{
  border:1px solid var(--primary-color);
  color:var(--primary-color);
}

.abcd16f{
  border-bottom: 1px solid var(--border-color);
}

.abcd33aa{
  font-size:var(--small-font);
  color:var(--black-color);
  margin-top: 7px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* APPLICANTS THING */
.abcd33oa{
  display:flex;
  flex-direction:column;
}

.abcf01{
  font-size:var(--small-font);
  padding: 10px;
  color: var(--muted-color);
  border-bottom:1px solid var(--border-color);
}

/*Applicants Feed*/
.abcd401{
  background: var(--white-color);
  border-bottom: 1px solid var(--border-color);
  padding:10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.abgt02{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.abcd402{
  width:46px;
  height:46px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--border-color);
}

.abcd403 {
  flex: 1;
  min-width: 0;
}

.abcd404 {
  font-size: var(--small-font);
  font-weight: 600;
}

.abcd406{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:4px;
  color: var(--primary-color);
  font-size: var(--small-font);
}

.abcd407{
  margin-left: auto;
}

.abcd408{
  border: 1px solid var(--border-color);
  background:var(--white-color);
  color: var(--black-color);
  padding:6px 10px;
  border-radius: var(--corner-radius);
  font-size: var(--small-font);
  font-weight: 500;
  cursor:pointer;
}

.abcd408:hover{
  background: var(--hover-bg);
  border-color: var(--hover-bg);
  color: var(--primary-color);
}

.abcd66a{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.abcd405{
  color:var(--muted-color);
  font-size:var(--small-font);
}

.status {
  display: inline-flex;
  align-items: center;
  gap:5px;
  padding: 3px 9px;
  border-radius: var(--corner-radius);
  font-size:var(--tiny-font);
  font-weight:600;
}

.status.pending {
  background: #fff7ed;
  color: #c2410c;
}
.status.reviewing {
  background: #eff6ff;
  color: #2563eb;
}
.status.selected {
  background: #ecfdf5;
  color: #15803d;
}
.status.closed {
  background: #f4f4f5;
  color: #71717a;
}
.status-dot{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/*STICKY METRICS DATA*/
.abcd35a{
  border:1px solid var(--border-color);
  border-radius:var(--corner-radius);
  overflow:hidden;
  background:var(--white-color);
  margin-bottom:12px;
}

.abcd36a{
  padding:28px;
}

.abcd37a{
  font-size:var(--small-font);
  color:var(--muted-color);
  font-weight:700;
  margin-bottom:7px;
}

.abcd38a{
  font-size:var(--large-font);
  font-weight:800;
}

.abcd39a{
  border-top:1px solid var(--border-color);
  padding:21px 24px
}

.abcd40a{
  font-size:var(--small-font);
  letter-spacing:1.1px;
  color:var(--muted-color);
  font-weight:700;
  display:flex;
  gap:8px;
  align-items:center;
}
.abcd41a{
  font-size:var(--large-font);
  font-weight:800;
  margin-top:14px;
}
.abcd42a{
  font-size:var(--small-font);
  color:var(--muted-color);
  margin-top:10px;
}

.abcd43a{
  height:1px;
  background:var(--border-color);
  margin:21px 0 15px;
}

.abcd44a{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  color:var(--muted-color);
  font-size:var(--small-font);
}
.abcd45a{
  display:flex;
  align-items:center;
  gap:8px;
}
.abcd45b{
  font-size:var(--small-font);
  color:var(--muted-color);
}

/*ACCOUNT PROFILE*/
.abcd99a{
  min-height:163px;
  padding:10px;
  border-bottom: 1px solid var(--border-color);
}

.abcd55a {
  padding: 10px;
  border-bottom: 1px solid var(--border-color);
}

.abcf500{
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px 10px;
  font-size: var(--small-font);
  color: var(--muted-color);
}

.abcf500f{
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px 10px;
}


.abcf500a{
  font-size: var(--small-font);
  color: var(--muted-color);
}

.abcf500b{
  font-size: var(--small-font);
  color: var(--black-color);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.abcd100{
  display: flex;
  flex-direction: column;
}

.abcd101{
  display: flex;
  align-items: center;
  gap: 15px;
}

.abcd102{
  width:66px;
  height:66px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--border-color);
}

.abcd102a{
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.abcd103{
  font-size: var(--normal-font);
  font-weight: 800;
}

.abcd104{
  color:var(--muted-color);
  font-size: var(--small-font);
}

.abcd105{
  margin-left:auto;
  border:1px solid var(--border-color);
  background: var(--white-color);
  padding:7px 13px;
  border-radius:var(--corner-radius);
  font-size:var(--small-font);
  color: var(--muted-color);
  cursor: pointer;
}

.abcd105:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.abcd33t{
  margin-left:auto;
}

.abcd106 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border-color);
  padding: 10px;
}

.abcd107{
  text-align: center;
}

.abcd107 strong{
  display: block;
  font-size: var(--small-font);
}
.abcd107 span {
  color: var(--muted-color);
  font-size: var(--small-font);
}

.abcd111 {
  display: flex;
  flex-direction: row;
  gap: 5px;
  border-bottom: 1px solid var(--border-color);
}

.abcd112 {
  text-decoration:none;
  border:0;
  padding:10px;
  color: var(--muted-color);
  font-size:var(--small-font);
  font-weight:700;
  border-bottom:2px solid transparent;
}

.abcd112.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.abcd499{
  border: 1px solid var(--error-color);
  background:var(--white-color);
  color: var(--error-color);
  padding:6px 10px;
  border-radius: var(--corner-radius);
  font-size: var(--small-font);
  font-weight: 500;
  cursor:pointer;
}

.abcd499:hover{
  background: var(--hover-bg);
  border-color: var(--hover-bg);
  color: var(--primary-color);
}

/**Sticky Profile Card */
.abcd305{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:4px;
}

._jh6yp0{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

._jh6yp0 svg{
  width: 20px; 
  height: 20px;
}

._mjgt17{
  fill: var(--primary-color);
}

.abcd38za{
  font-weight:800;
  font-size: var(--normal-font);
}

.chk411 { 
  display: flex; 
  align-items: center; 
}

.chk411 label { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  cursor: pointer; 
  font-weight: 400; 
  font-size: var(--small-font);
  color: var(--muted-color);
}

.abcd19bb{
  border-bottom: 1px solid var(--border-color);
  padding: 10px;
  background-color: var(--white-color);
}

/** REVIEWS */

.abcd200c{
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.abcd300{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.abcd302{
  width:50px;
  height:50px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--border-color);
}

.abcd303{
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  align-items: flex-start;
}

.abcd304{
  font-size:var(--small-font);
  font-weight:700;
}

.abcd308{
  font-size: var(--small-font); 
  color: var(--muted-color);
}

.abcd306{
  font-weight:700;
  font-size: var(--small-font);
  color: var(--muted-color);
}

/* SUBSCRIPTION SECTION */

.abcd240{
  border-bottom:1px solid var(--border-color); 
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.abcd241{
  font-size: var(--small-font);
  color: var(--muted-color);
  font-weight: 500;
}

.abcd242{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  font-size: var(--small-font);
  color: var(--black-color);
}

.rdo411 {
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap:10px;
  padding: 10px 0;
}

.rdo411 label { 
  display: flex; 
  align-items: center; 
  gap: 3px; 
  cursor: pointer; 
  padding: 3px 9px;
  border-radius: var(--corner-radius);
  font-size:var(--tiny-font);
  font-weight:600;
  background: #eff6ff;
  color: var(--primary-color);
}

.abcd5x{
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.abcv45{
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--corner-radius);
  gap: 3px;
  font-size: var(--small-font);
}

.paysucc14 {
  background-color: #dcfce7;
  color: var(--success-color);
  padding: 10px 8px;
  border-radius:var(--corner-radius);
  margin-top: 8px;
  font-size:var(--small-font);
  border: 1px solid #bbf7d0;
}

.pyin89{
  padding: 10px;
}

/**APPLICANT PROFILE */
.body12b{
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap:3px;
}

.abcd106a{
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px solid var(--border-color);
}

._mjgt17d{
  cursor: pointer;
}

/* ABOUT SECTION */

.abcd00{
  margin-left: 260px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 28px;
}

.abcd0a{
  max-width: 650px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: var(--normal-font);
}

.abcd0a h2{
  font-size: var(--large-font);
}

.wrpt00{
  display: flex;
  flex-direction: column;
  width: var(--mobile-width);
  gap: 10px;
}

.ttct00{
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: var(--normal-font);
  font-weight: 600;
}

.ttctb00{
  font-size: var(--normal-font);
  font-weight: 400;
}

.inpg00{
  border: 1px solid var(--border-color);
  border-radius: var(--corner-radius);
  padding: 10px;
  margin: 5px 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.inpg00 legend {
  font-size: var(--small-font);
  font-weight: 600;
  color: var(--muted-color);
  padding: 0 10px;
  margin-left: 5px;
}

/* STYLING ADMIN SECTION */
.abcd14ab {
  margin-left: 260px;
  min-height: 100vh;
  padding: 28px 28px 80px;
}

.dash11 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.top12 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 5px;
}

.top12d {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}


.titl13 {
  font-size: var(--small-font);
  font-weight: 600;
  color: var(--black-color);
}

.filt18 {
  background-color: var(--white-color);
  border-radius: var(--corner-radius);
  padding: 10px;
  box-shadow: var(--shadow);
}

.frm9y6{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px; 
  width: 100%;
}

.grou25{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.crdx01{
  margin-top: 10px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  text-align: center;
}

.crdx02{
  padding: 20px;
  border-radius: var(--corner-radius);
  box-shadow: var(--shadow);
  background: var(--white-color);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.crdx03{
  font-size: var(--small-font);
  color: var(--muted-color);
}

.crdx04{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.crdx05{
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.crdx06{
  font-size: var(--large-font);
  font-weight: 700;
}

.crdx07{
  font-size: var(--normal-font);
  font-weight: 700;
}

.crdx08{
  width: 1px;
  height: 20px;
  background: var(--border-color);
}

.crdx09{
  font-size: var(--small-font);
}

.crdx10{
  height: 1px;
  width: 20px;
  background: var(--border-color);
  text-align: center;
  margin: auto;
  margin-top: 5px;
  margin-bottom: 10px;
}

.crdx11{
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/*Section with Table*/
.subxr10{
  background-color: var(--white-color);
  padding: 20px;
  border-radius: var(--corner-radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.tpcd00{
  font-size: var(--small-font); 
  font-weight: 600; 
  color: var(--black-color);
}

.btn21x {
  background: var(--primary-color);
  color: var(--white-color);
  padding: 8px 14px;
  border: none;
  border-radius: var(--corner-radius);
  cursor: pointer;
  font-size: var(--small-font);
  text-decoration: none;
  display: inline-block;
}

.tpdr01{
  font-size: var(--small-font);
  font-weight: 600;
}

.tpdr01 span{
  font-size: var(--small-font);
  color: var(--success-color);
}

.tblw31 {
  background: var(--white-color);
  border-radius: var(--corner-radius);
  border: 1px solid var(--border-color);
  overflow: hidden;
  margin-top: 5px;
}

.tabl31 {
  width: var(--mobile-width);
  border-collapse: collapse;
  text-align: left;
}

.tabl31 th {
  background:var(--th-bg);
  font-weight: 600;
  color: var(--th-color);
}

.tabl31 th, .tabl31 td {
  padding: 12px 15px;
  border-bottom: 1px solid var(--border-color);
  font-size: var(--small-font);
}

.badg31 {
  padding: 4px 8px;
  border-radius: var(--corner-radius);
  font-size: var(--small-font);
  font-weight: 500;
}

.stat31 {
  background: #e2f0d9;
  color: #385723;
}

.stat32 {
  background: #d9e1f2;
  color: #1f4e78;
}

.badg41 {
  padding: 4px 8px;
  border-radius: var(--corner-radius);
  font-size: var(--small-font);
  font-weight: bold;
}

.btn34x {
  background: var(--warn-col);
  color: var(--black-color);
  margin-right: 5px;
  padding: 5px 14px;
  border: none;
  border-radius: var(--corner-radius);
  cursor: pointer;
  font-size: var(--small-font);
  text-decoration: none;
  display: inline-block;
}

.btn36x {
  background:var(--error-color);
  color:var(--white-color);
  padding: 5px 14px;
  border: none;
  border-radius: var(--corner-radius);
  cursor: pointer;
  font-size: var(--small-font);
  text-decoration: none;
  display: inline-block;
}

.axbv100{
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.axbv101{
  font-size: var(--small-font);
  color: var(--primary-color);
  font-weight:600;
}

.axbv102{
  font-size: var(--small-font);
  color: var(--muted-color);
}

.filtf16{
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-bottom: 10px;
}

.btn16 {
  background: var(--white-color);
  color: var(--primary-color);
  padding: 8px 14px;
  border: 1px solid var(--primary-color);
  border-radius: var(--corner-radius);
  cursor: pointer;
  font-size: var(--small-font);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}

.pagi01 {
  display: flex;
  gap: 5px;
  padding: 10px;
  justify-content: center;
}

.pgln01.actv01 {
  background: var(--primary-color);
  color: var(--white-color);
  border-color:var(--primary-color);
}

.pgln01 {
  padding: 4px 12px;
  border: 1px solid var(--border-color);
  border-radius:var(--corner-radius);
  text-decoration: none;
  color: var(--muted-color);
  font-size: var(--small-font);
}

.prfcd10{
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.abxg100{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.prtt10{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.prfcd11{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: var(--small-font);
  color: var(--muted-color);
  padding: 8px 0px;
  margin-top: 5px;
  margin-bottom: 5px;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.stat37 {
  background: #ecfdf5;
  color: #15803d;
}

.mnac90{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  height: 100%;
}

.docs100{
  width:66px;
  height:66px;
  border-radius:var(--corner-radius);
  object-fit:cover;
  border:1px solid var(--border-color);
  cursor: pointer;
}

.docs101{
  width:80px;
  height:60px;
  border-radius:var(--corner-radius);
  object-fit:cover;
  border:1px solid var(--border-color);
  cursor: pointer;
}

.docs99{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  padding-top: 10px;
  width: 100%;
}

.updt99{
  border-top: 1px solid var(--border-color);
  margin-top: 5px;
  padding-top: 10px;
}

.abcd33d{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content: center;
  gap: 3px;
  padding: 7px 10px;
  background: var(--white-color);
  border: 1px solid var(--hover-bg);
  border-radius: 23px;
  position: relative;
}

.invp90{
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 5px;
  margin-bottom: 5px;
}

.imag41{
  width: 60px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--corner-radius);
}

.abqq33{
  display:-webkit-box;
  -webkit-line-clamp:1;
  line-clamp: 1;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size: var(--small-font);
}

.cntx66{
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: var(--corner-radius);
  box-shadow: var(--shadow);
  background: var(--white-color);
  padding: 20px;
  width: var(--mobile-width);
  min-width: 500px;
}

._vers85 {
  gap: 8px;
  display: flex;
  color: var(--muted-color);
  align-items: center;
}

._kgvf76{
  font-size: var(--small-font);
  color: var(--muted-color);
}

.tpdr99{
  font-size: var(--small-font);
  color: var(--muted-color);
}

.emp311{
  width: var(--mobile-width);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.emp311 span{
  font-size: var(--small-font);
  color: var(--muted-color);
  font-weight: 500;
}

.aler19 {
  font-size: var(--small-font);
  padding: 10px 8px;
  margin-bottom: 8px;
  border-radius: var(--corner-radius);
  font-weight: 500;
  width: var(--mobile-width);
}

.ales21 {
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.alee22 {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.star {
  width: 20px;
  transition: color 0.2s;
  stroke: var(--primary-color);
  height: 20px;
  fill: none;
  cursor: pointer;
  color: lightgray;
}

.chosen svg {
  fill: var(--primary-color);
}

@media screen and (max-width: 600px) {
  .head00{
    display: flex;
  }

  .rowx19{
    flex-direction: column;
    width: var(--mobile-width);
  }

  .abcd01 {
    width: var(--mobile-width);
  }

  .abcd03 {
    width: var(--side-draw-width);
    border: none;
    height: 100%;
    display: none;
  }

  .abcd14 {
    margin: 0;
    width: var(--mobile-width);
    padding: 120px 0px 20px 0px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    justify-content: flex-start;
  }

  .abcd14ab {
    margin: 0;
    width: var(--mobile-width);
    padding: 120px 0px 20px 0px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    justify-content: flex-start;
  }

  .abcd00 {
    margin: 0;
    width: var(--mobile-width);
    padding: 120px 0px 20px 0px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    justify-content: flex-start;
  }

  .abcd0a {
    max-width: var(--mobile-width);
    width: var(--mobile-width);
    padding: 10px;
  }

  .cntx66 {
    min-width:var(--mobile-width);
    width: var(--mobile-width);
  }

  .abcd15 {
    min-width: 0;
    width: var(--mobile-width);
    border: 0;
  }

  .abcd34 {
    min-width: 0;
    position: relative;
    padding: 0px;
    align-items: flex-start;
    margin-top: auto;
  }

  .abcd35a {
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: unset;
    margin: 0px;
  }

  .abcd35 {
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: unset;
    margin-bottom: 1px;
  }

  .abcd56 {
    padding: 10px;
  }

  .modl05 {
    justify-content: flex-end;
    padding: 0;
    width: var(--mobile-width);
    height: var(--mobile-width);
    flex-direction: column;
  }

  .box07 {
    max-width:var(--mobile-width);
  }

  .dash11 {
    max-width:var(--mobile-width);
  }

  .frm9y6 {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .grou25 {
    width: 100%;
  }

  .top12 {
    padding: 10px;
  }

  .crdx01{
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }

  thead{display: none;}

  table, tbody, td, tr{
    display: block; 
    width: var(--mobile-width);
  }

  tr{
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--corner-radius);
  }

  td{
    display: flex; 
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border: none;
    border-bottom: var(--border-color);
    white-space: normal;
    overflow-wrap: anywhere;
    width: var(--mobile-width);
  }

  td::before{
    content: attr(data-label);
    font-weight: 700;
    flex: 0 0 35%;
    white-space: normal;
  }

  .filtf16 {
    width: 100%;
    flex-direction: column;
    gap: 5px;
  }

}

@media screen and (min-width: 601px) and (max-width: 1024px) {
   .head00{
    display: flex;
  }

  .abcd01 {
    width: var(--mobile-width);
  }

  .rowx19{
    flex-direction: column;
    width: var(--mobile-width);
  }
  .abcd03 {
    width: var(--side-draw-width);
    border: none;
    height: 100%;
    display: none;
  }

  .abcd14 {
    margin: 0;
    width: var(--mobile-width);
    padding: 120px 0px 20px 0px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    justify-content: flex-start;
  }

  .abcd14ab {
    margin: 0;
    width: var(--mobile-width);
    padding: 120px 0px 20px 0px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    justify-content: flex-start;
  }

  .abcd00 {
    margin: 0;
    width: var(--mobile-width);
    padding: 120px 0px 20px 0px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    justify-content: flex-start;
  }

  .abcd0a {
    max-width: var(--mobile-width);
    width: var(--mobile-width);
    padding: 10px;
  }

  .cntx66 {
    min-width:var(--mobile-width);
    width: var(--mobile-width);
  }

  .abcd15 {
    min-width: 0;
    width: var(--mobile-width);
    border: 0;
  }

  .abcd34 {
    width: var(--mobile-width);
    min-width: 0;
    margin-top: auto;
    padding: 0px;
    align-items: flex-start;
  }

  .abcd35a {
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: unset;
    margin: 0px;
  }

  .abcd35 {
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: unset;
    margin-bottom: 1px;
  }

  .abcd56 {
    padding: 10px;
  }

  .modl05 {
    justify-content: flex-end;
    padding: 0;
    width: var(--mobile-width);
    height: var(--mobile-width);
    flex-direction: column;
  }

  .box07 {
    max-width:var(--mobile-width);
  }

  .dash11 {
    max-width:var(--mobile-width);
  }

  .frm9y6 {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .grou25 {
    width: 100%;
  }

  .top12 {
    padding: 10px;
  }

  .crdx01{
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }

  thead{display: none;}

  table, tbody, td, tr{
    display: block; 
    width: var(--mobile-width);
  }

  tr{
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--corner-radius);
  }

  td{
    display: flex; 
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border: none;
    border-bottom: var(--border-color);
    white-space: normal;
    overflow-wrap: anywhere;
    width: var(--mobile-width);
  }

  td::before{
    content: attr(data-label);
    font-weight: 700;
    flex: 0 0 35%;
    white-space: normal;
  }

  .filtf16 {
    width: 100%;
    flex-direction: column;
    gap: 5px;
  }
}