@font-face { font-family: fontone; src: url(../font/Poppins-Regular.ttf);}
@font-face { font-family: fontthree; src: url(../font/Poppins-Regular.ttf);}

* {
overflow: hidden; box-sizing: border-box; text-decoration: none; background-color: transparent; border: none; padding: 0%; margin: 0%; font-family: fontone; 
font-weight: 400;  color: var(--primary-color);  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none; user-select: none; 
}

:root {
  --primary-color: #092534 ;
  --accent-color: #0d2c3d;
  --secondary-color: #35bc39;
  --test-color: #000;
  --shade-color: #fafafa;
}

input, textarea {
  color: var(--primary-color) !important;
}

button:active { transform: scale(.97);}

html { font-size: 15px; }

body { width: 100vw; overflow-y: auto; height: 100vh; background-color: #F5F5F5 !important; scroll-behavior: smooth;}

input:focus, textarea:focus{ outline: none !important; }

@media (min-width: 700px) { 
.mobinclude {
  display: none !important;
}
::-webkit-scrollbar {
  width: 4px; 
  }
  ::-webkit-scrollbar-track {
  background-color: transparent;
  }
  ::-webkit-scrollbar-thumb {
  background-color: #F1F4F5;
  }
  ::-webkit-scrollbar-thumb:hover {
  background-color: #000000;
  }
}
@media (max-width: 700px) { 
.deskinclude, ::-webkit-scrollbar  {
    display: none !important;

}
}

/* ------------------------------------------------------------Load Screen ----------------------------------------------------*/

.loascreen {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; min-height: 500px;
}
.loascreen img {
  width: 100px; height: auto;
}

/* ------------------------------------------------------------------------- Mob Header -------------------------------------------------------------------------------- */

.mob_header {
width: 100%; height: max-content; background-color: var(--primary-color); padding: 10px 20px; display: flex; align-items: center; justify-content: space-between;
z-index: 99999;
}

#mob_header_logo {
height: auto; width: max-content;
}
#mob_header_logo img {
 height: 30px; width: auto;
}
#mob_header_menu_btn {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; padding: 2px;
}
#mob_header_menu_btn img {
  width: 100%; height: auto;
}

/* ------------------------------------------------------------------------- Slide styling -------------------------------------------------------------------------------- */

.menuslide {
  width: 100%; height: 100%; background-color: var(--primary-color); background-size: auto 100%; z-index: 999; display: none;
  position: fixed; top: 0%; left: 0%; overflow-y: auto; padding-top: 100px;
  }
  
  .slideboxtwo { 
  width: 80%; height: 100%; display: flex; flex-direction: column; background-color: #FFFFFF; padding-top: 70px; position: relative;
  }
  .slideboxtwolink {
  width: 100%; padding: 10px; border-bottom:1px solid #F1F4F5; color: #000000 !important; height: 45px; display: flex; align-items: center;
  font-size: .9rem; font-weight: 400; background-color: #FFFFFF; text-transform: uppercase;
  }
  
  .slideboxtwosocialbox {
  width: 100%; position: absolute; z-index: 9; display: flex; align-items: center; justify-content: flex-start; padding: 10px; background-color: #FFFFFF;
  bottom: 0%; left: 0%;
  }
   


/* -------------------------------------------------------------------------- main styling start here ----------------------------------------------------------------------------*/

main {
padding: 0 !important;  width: 100%; height: max-content; display: flex; flex-direction: column; justify-content: center; align-items: center; 
}

/* ------------------------------------------------------------bottom styling -----------------------------------------------------------------------------*/

.bottomcont {
width: 100%; height:max-content; display: flex;flex-wrap: wrap; flex-direction: row; background: #e4e6e9; padding: 70px 30px 20px 30px; align-items: flex-start;
justify-content: flex-start; border-top: solid 1px #FAFAFA;
}
  
 .bottomcontbox {
width: max-content; height: max-content; display: flex; flex-direction: column; margin-bottom: 12px; display: flex;
align-items: flex-start; min-width: 250px; margin-bottom: 20px;
}
 .bottomcontbox h4 {
color: 1.3rem;  color: #000; padding-bottom: 15px; font-weight: 400; 
 }
  .viewbottom {
  padding-bottom: 20px;
  }
  #bottomclk{
  width: max-content; padding-bottom:12px; color: #000000 !important; font-size: .9rem; font-weight: 500;
  }
  .bottompaytrick {
  display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 30px;margin-top: 30px;
  }
  .bottompaytrick img{
  margin-right: 10px; width: auto; height: 100%;
  }
  .bottomsocialbox {
  width: 100%; height: max-content; padding-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  }
  .bottomsocial {
  height: 30px; padding: 2px; width: max-content; display: flex; align-items: center; justify-content: flex-start; padding-right: 10px; 
  }
  .bottomsocial img {
  height: 98%; width: auto; 
  }
  .payngs {
  height: 55% !important;
  }
  
  #pyrexanchdiv {
  width: 100%; background-color: #E4E6E9;  display: flex; justify-content: space-between; height: max-content; 
  border-top: 1px #FAFAFA solid; color: #000000; padding: 30px 30px 30px 50px;
  }
  #pyrexanchdiv a {
  color: #000000 !important; width: max-content; height: max-content; font-size: .8rem; text-transform: uppercase;
  }
  #pyrexanchdiv a span {
  text-decoration: underline; text-transform: uppercase;
  }
  .crbottom {
  font-weight: 400;  text-transform: uppercase; font-size: .8rem;
  }
  
/* ----------------------------------------------------------- admin styling ------------------------------------------------------------------------------ */

#adminmain {
width: 100%; height: max-content; display: flex; flex-wrap: wrap; align-items: center; padding: 0px !important; 
}

#admingreet {
display: flex; align-items: center; justify-content: flex-start; border-radius: 6px; width: 100%;  padding-bottom: 10px; 
position: relative; overflow: visible; min-height: 100px;
}

.merchbankgraphboxintro {
background-color: #E0E8EE !important; background-image: url(../png/3456706.jpg); background-size: cover; background-repeat: no-repeat; 
background-position: center; 
}

#admingreetlink {
position: absolute; top: 0%; left: 0%; height: 100%; width: 100%; z-index: 5;
}
.hello_admin_insti_board {
width: 100%; padding: 10px; border-radius: 6px; background-color: #FFFFFF;  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.08);  margin-bottom: 10px;
}
.hello_admin_insti_board img {
height: 40px; width: auto;
}
.hello_admin_insti_board h3 {
font-size: 1.5rem; color: #000000; text-decoration: underline;
}
 .shopmgbox {
width: 170px; height: max-content;  display: flex; align-items: center; justify-content: center;
margin-right: 20px; 
}
 .shopmgbox img {
width: 100%; height: auto; 
 }
 #merchname {
font-size: 1.6rem; color: #FFFFFF; padding-bottom: 2px;  font-weight: 600; text-transform: capitalize;
 }
 #merchid {
font-size: .84rem; color: #F1f1f1; font-weight: 300; padding-bottom: 5px;
 }
#dasholgobox {
width: 100%; padding: 30px 10px 30px 20px; margin-bottom: 0px; display: flex; justify-content: space-between; align-items: center;
 background-color: var(--pair-color); margin-bottom: 30px; border-bottom: 1px solid #192b36 ;
}
#dashlogo {
height: 38px; width: auto; 
}
.sign_out_button {
  width:max-content; padding: 5px 20px; border-radius: 16px; border: solid 1px #808080; display: flex; align-items: center; justify-content: center;
  height: max-content; color: #FFFFFF; font-size: .8rem; margin: 20px; margin-top: 120px; position: absolute; border-bottom: 0%;

}
.sign_out_button img {
  height: 22px; width: auto; margin-right: 10px;
}
.adminboard_tool_box {
width: max-content; display: flex; align-items: center; justify-content: flex-start; padding: 5px 10px; background-color: #14222b; 
border-radius: 26px; border: solid 1px#121c24 ;
}
.settings_account_button, .exit_account_button {
width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; padding: 3px; cursor: pointer;  border-radius: 100%; background-color: #182630;
}
.exit_account_button {
margin-left: 15px;
}

.settings_account_button img,.exit_account_button img {
width: 100%; height: auto;
}
.settings_account_button:hover {
  transform: rotate(90deg); transition-duration: 100ms;
}
.adminlnkbox {
width: 100%; height: 55px; display: flex; align-items: center; position: relative; padding: 20px 10px; position: relative; justify-content: space-between;
  border: solid 1px var(--primary-color);  
}
.adminboard_dropbox {
  width: 100%; height: max-content;  background-color: var(--accent-color); display: none;
}
.adminboard_dropbox_links {
background-color: var(--accent-color); padding:12px 20px 12px 40px; border-bottom: 1px var(--primary-color) solid;  position: relative;
color: #FFFFFF; font-size: .8rem; font-weight: 500; cursor: pointer;
}
.adminboard_dropbox_links:hover {
  background-color: var(--secondary-color);
}
#instruct_current_page {
background-color: #0033ff;
}
#terminate_btn a {
z-index: 8; width: 100%; height: 100%; position: absolute; top: 0%; left: 0%;
}
.adminlnkbox a,#adminlnkbtn {
position: absolute; width: 100%; height: 100%; top: 0%; left: 0%; z-index: 9; 
}
.itemcontrollnks {
width: 100%; height: max-content; padding-left: 22px; display: flex; flex-direction: column; 
}
.acllink {
color: #181E20 !important; font-size: .9rem; margin: 1px; padding: 4px;  height: 35px;
display: flex; align-items: center;
}
.acllink {
border-bottom: 1px #F1F4F5 solid;
}
#acllinkone {
border-top: 1px #F1F4F5 solid;
}
.adminlnkbox:hover {
background-color: #14222b;
}
.adminlinkbox_first {
display: flex; align-items: center; font-size: .9rem; color: #FFFFFF; 
}
.adminlinkbox_icon {
width: 20px; height: auto; margin-right: 10px;
}
.adminlinkbox_toggle {
width: 22px; padding: 2px; height: 22px; border: none; display: flex; align-items: center; justify-content: center;   transition: transform 0.3s ease;
} 

.adminlinkbox_toggle.rotate {
  transform: rotate(90deg);
}
.dminlinkbox_toggle img {
  width: auto; height: 100%;
}
.admincount {
position: absolute; right: 1%; padding: 5px 4px 4px 4px; border-radius: 5px; color: #FFFFFF !important; background-color: var(--accent-color);
font-size: .7rem !important; height: 18px; width: 18px; display: flex; align-items: center; justify-content: center;
}
#adminlogout {
margin-top: 20px; font-size: .9rem; color: #FF0000; width: 100%; text-align: center;
}
#adminlogout:hover {
color: #808080 !important;
}
    
#adminbox {
width: 100%; height: max-content; padding: 85px 10px; 
}
.adminboxsect {
width: 100%; height: max-content; display: flex; flex-wrap: wrap; align-self: center; overflow-y: auto; padding: 15px 10px ;
margin-bottom: 20px;  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.08); margin-bottom: 40px !important; background-color: #FFFFFF; 
}
#adminboxintro {
font-size: 1rem; width: 100%; display: flex; align-items: center; justify-content: flex-start; text-transform: uppercase; font-weight: 600;

}
#adminboxintro button {
width: 28px; height: 28px; margin-right: 10px; padding: 2px;  cursor: pointer;
}
#adminboxintro button:hover {
background-color: #FFFFFF;
}

#adminboxintro button img {
width: 100%; height: auto; 
}

.adminboxsectintro {
width: 100%; height: max-content; font-size:1.2rem; color: #808080; padding-bottom: 10px; display: flex; justify-content: space-between;
align-items: center;  margin-bottom: 5px; font-weight: 700;
}
.adminboxsectintro a {
color: #000000; font-size: .6rem; color: #FFFFFF !important; width:max-content; height: max-content; background-color: #000000; border-radius: 4px;
padding: 5px 16px 5px 16px;
}
.desklnk, .desklnki {
position: absolute; top: 0%; left: 0%; height: 100%; width: 100%; cursor: pointer; z-index: 6;
}
     
.admoptclkbox {
height: max-content; width: 100%; margin-bottom: 10px; display: flex;flex-wrap: wrap;
}
.admoptclkbox a {
padding: 3px 10px 3px 10px; font-size: .7rem; border: solid 1px #000000; border-radius: 16px; margin: 0px 5px 5px 0px; color: #000000 !important;
height: max-content; width: max-content; 
}

.calendar {
  width: 100%; padding: 10px 5px;
}
.calendarbox {
  width: 100% !important;
}
.calendar h2 {
  margin: 0;
}
.days {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;margin-top: 10px;
}
.day {
padding: 10px; color: #000000; border-radius: 6px; font-size: .8rem; border: solid 1px #E4E6E9; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
}
.today {
border-color: #FFFFFF;  color: #FFFFFF; font-weight: 600; background-color: var(--test-color);
}
.newpostresultclient_dashboard {
display: flex; align-items: center; justify-content: flex-start; width: 100%;
}
   
@media (min-width: 860px) { 
  
.hello_admin_insti_board img {
height: 60px; width: auto;
}
#adminboard {
width: 22% ; height: 100vh; position: fixed; z-index: 99; box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.08); 
top: 0%;   left: 0%; padding: 0px; border: none !important; overflow-y: scroll; background-color: var(--primary-color); 
} 
.adminboxsect {
padding: 20px; padding-bottom: 40px; 
}
#adminbox {
margin-left: calc( 22% + 30px);
}
#adminbox {
width: 74%;  padding-left: 10px; padding-bottom: 40px; min-height: 98vh; padding-top: 30px; padding-right: 0px; 
}
#adminboxintro {
margin-bottom: 0px; width: 100%;  font-size: 1rem; font-weight: 600;
}
.adminlnkbox {
width: 100%; font-size: 1rem; font-weight: 400;
}
.admincount {
right: 8%;
}
}
  
table {
width: 100%;   overflow: hidden;  border-collapse: collapse;
 }
  
  th, td {
padding: 8px 15px; text-align: left; border-bottom: 1px solid #E4E6E9;  font-size: .9rem; font-weight: 400;
  }
  td  {
    font-size: .8rem; color: #2F3543; 
  }
  
  th {
     font-size: .8rem; 
  }
  
  tr:hover {
    background-color: #FAFAFA;
  }
  
  td img {
    border-radius: 4px;
  }
  
  .view-btn {
    background-color: #000000; color: white; padding: 5px 20px; text-decoration: none; border-radius: 2px;  font-size: .7rem; font-weight: 400; border-radius: 6px;
    transition: background-color 0.3s; 
  }
  
  .view-btn:hover {
    background-color: #FF0000;
  }
  tr {
    border: none !important; 
  }
/* ------------------------------------------------------------------ Payments styling --------------------------------------------------------------------- */

.dashpaymentsect {
width: 100%; height: max-content;  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; 
}
.dashpaymentboxone {
width: 100%; padding: 10px;  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; padding-bottom: 0%;
}
.dashpaymentboxtwo {
width: 100%; padding: 10px; padding-top: 0%;
}
.merchbankbox {
width: calc(50% - 5px); padding: 20px 15px; border-radius: 6px; background-color: #FFFFFF;  margin-right: 5px;
margin-bottom: 10px; display: flex; flex-direction: column; align-items: space-between; justify-content: space-between; box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.048);
}
.merchbankboxi {
margin-left: 5px;  margin-right: 0px; background-color: var(--accent-color); 
}
.merchbankboxp {
  width: 100%; display: flex; align-items: center;justify-content: space-between; padding-bottom: 10px; border-bottom: 1px #FAFAFA solid; margin-bottom: 10px;
}
.merchbankboxp img {
height: 26px; width: auto; margin-right: 5px;
}
.merchbankboxp span {
  font-size: .85rem;  padding: 3px 12px; font-weight: 600; 
}
.merchbankboxpiv {
  border-bottom: 1px solid var(--accent-color);
}
.merchbankboxpiv span {
color: #ffffff ; background-color: #000000;
}
.merchbankboxsales {
  font-family: fontthree; font-size: 3rem; color: #000000;
}
.merchbankboxdate {
  width: 100%;   font-size: .7rem;color: #000000; 
}

.merchbankgraphbox {
width: calc(100%); padding:20px; border-radius: 6px; background-color: #FFFFFF;   min-height: 150px;  margin-bottom: 10px; box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.048);
}
.merchbankgraphboxi {
  min-height: max-content; box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.048);
}
.chart-wrapper {
display: flex; align-items: flex-end; justify-content: center; margin: 0 auto; width: 100%; 
}
.bar {
flex: 1; margin: 0; background-color: #afc8ff; background-size: 100% 100%; border-radius: 2px 2px 0 0; z-index: 8; margin: 0px 1px;
}

#chart-container {
width: 100%; padding-top: 10px; height: 200px; position: relative; display: flex; align-items: flex-end; justify-content: space-between; background: #FFFFFF; overflow: hidden;
}

.gridline {
position: absolute; width: 100%; height: 1px; border-top: 1px dashed #E4E6E9;
}

.gridline-label {
position: absolute; left: -40px; transform: translateY(-50%); font-size: 12px; color: #666; 
}

.x-axis {
display: flex; justify-content: space-between; width: 100%;   padding: 8px 5px;
}

.x-axis-label {
 font-weight: bold; color: #333;  font-size: .6rem; color: #76808f; font-weight: 400;
}

.merchbankhold {
  width: 100%; padding: 20px 15px ; border-radius: 15px; background-color: #FFFFFF;   margin-bottom: 10px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; height: max-content;
}
.merchbankform {
width: 100%; height: max-content;
}
.walletbalancebox {
border-radius: 10px; width: 100%; height: max-content;  background-color: #FFFFFF;  padding: 0%; margin-bottom: 10px;
}
.walletbalanceboxtop {
height: 100px; background-image: url(../PNG/walletback.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;
background-color: #212729; padding: 10px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
}
.walletbalanceboxtoptxt {
color: #FFFFFF; font-weight: 300; font-size: .7rem;
}
.walletbalanceboxtopprice {
  font-family: fontthree; font-size: 1.6rem; color: #FFFFFF;
}
.walletbalanceboxbot {
width: 100%; background-color: #afc8ff; width: 100%; height: 40px; background-image: url(../PNG/elegant-dark.avif); background-repeat: no-repeat; background-position: center; background-size: cover;
background-color: #000000; padding: 10px;
}
.walletbalanceboxbottxt {
color: #FFFFFF; font-weight: 400; font-size: .6rem; font-weight: fonttwo;
}
.walletbalanceboxbotnum {
color: #FAFAFA; font-weight: 200; font-size: .5rem; 
}
.withdrawtab {
  width: 49%; border-radius: 10px; background-color: #F1F4F5; padding: 10px; height:max-content; margin-bottom: 10px;
}
.wtabtxt {
 font-size: .9rem; color: #000000;
}
.wtabamount {
font-family: fontthree; font-size: 1.1rem; color: #000000; padding: 3.5px 0px;
}
.wtabdate {
color: #808080; font-weight: 200; font-size: .5rem; 
}

.requestbank {
width: 100%; border-radius: 12px 10px; background-color: #F1F4F5; padding: 10px; height:max-content; margin-bottom: 10px;
}
.bankcardbox {
display: flex;  background-color: #FFFFFF; border-radius: 8px; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 5px; margin-bottom: 10px;
}
.bankcardbox img {
  background-color: #0052FF; border-radius: 5px; object-fit: contain; padding: 10px; height: 40px; width: 40px;
}
.bankdetailbox {
width: calc(100% - 80px); height: 100%; padding: 5px 20px ; 
}
.bankdetailbox p {
width: 100%; font-size: .8rem; color: #000000; font-weight: 400; text-align: start;
}
.bankdetailbtn {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.bankdetailbtn img {
  background-color: #F1F4F5; object-fit: contain; width: 30px; height: 30px; padding: 5px;
}

#withdraw {
background-color: #eef2fd; border-radius: 8px; width: 100%; padding: 10px 12px; font-family: fontthree; font-size: 1.1rem; color: #000000; height: 50px; border: 1px solid #afc8ff;
margin-top: 2px; margin-bottom: 12px;
}
#withdrawsubbtn, #withdrawsubdef {
  width: 100%; height: 50px; border-radius: 8px; font-size: .9rem; color: #FFFFFF; background-color: #0052FF;
}

#withdrawsubdef {
background-color: #181E20; display: flex; align-items: center; justify-content: center; color: #808080;
}

#drawamountlabel {
  font-size: .7rem; color: #76808f; font-weight: 300;
}
#updatebankdetail {
width: 100%; padding: 10px; background-color: #FFFFFF; border-radius: 5px;  min-height: 100px;
}
.updatebankdetailput {
width: 100%; height: 30px; padding: 5px 10px; border: 1px solid #E4E6E9; background-color: #FAFAFA; font-size: .7rem; color: #000000;  margin-top: 2px; margin-bottom: 10px;
border-radius: 6px;
}
.updatebankdetaillabel {
  font-size: .7rem; color: #808080;
}
.updatebankdetailbtn {
width: 100%; height: 30px; padding: 5px 10px;  background-color: #000000; font-size: .7rem; color: #FFFFFF;  margin-top: 5px; margin-bottom: 10px;
border-radius: 6px;
}
.requestconfirmbox {
width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; padding: 10px;
}
#requestconfirmboxmg {
width: 130px;  height: auto;
}

#requestconfirmboxicon {
  margin: 5px; width: 26px; height: auto;
}
.requestconfirmbox p {
width: 100%; text-align: center; font-size:  .9rem; padding-top: 0%;
}
#formattedAmount {
width: max-content;  border-radius: 16px; color: #000000; font-size: .8rem; font-weight: 300; margin-bottom: 8px;
}
.alertcontainer {
width: 100%; display: flex; align-items: flex-start; justify-content: flex-start; border-radius: 6px; padding: 10px; margin-bottom: 10px;
}
.alertimage {
width: 25px; height: 25px; padding: 3px; object-fit: contain; margin-right: 10px;
}
.alertmessage {
font-size: .7rem; width: calc(100% - 36px);
}
#errmessage {
  color: #D05249;
}
#winmessage {
  color: #458362;
}
#alerterr {
  background-color: #FCEBEC; 
}
#alertwin {
  background-color: #EDF3EC;
}

@media (min-width: 1000px) { 

  .dashpaymentboxone {
  width: 70%;  padding-left: 0%; padding-right: 0%; padding-top: 0%;
  }
  .dashpaymentboxtwo {
  width: 30%; padding-right: 0px; 
  }

 }

/* ------------------------------------------------------------------ Product Update styling --------------------------------------------------------------------- */

.addproductbtnbox {
width: 100%; height: max-content;
}
#addnewprodbtn {
height: 45px; background-color: #000000; color: #FFFFFF !important; border-radius: 6px; width: max-content; padding: 16px 25px; margin-bottom: 20px; display: flex;
align-items: center; justify-content: center; font-size: .9rem;
}
#addnewprodbtn:hover, #addnewprodbtn:active {
  background-color: #0052FF;
}
#addnewprodbtn img {
  height: 22px; width: auto; margin-left:  10px;
}
#addnewprodlnk {
  height: max-content; width: max-content;
}

 
/* -----------------------------------------------------------------------  control styling ---------------------------------------------------------------------- */
.form-section {
  width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.thirdmain {
  align-items: flex-start !important; min-height: 200vh;
}
#reftest {
  width: 100%; padding-bottom: 10px;
}
.controltop {
width: 100%; height: max-content; display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px #000000 solid; 
}
.control-top-box {
  padding-bottom: 0px !important;
}
.controltop h3 {
font-size: .9rem;
}
.controltop h4 {
font-size: 2rem;
}

.addformsection  {
width: 100%; height: max-content; background-color:  #FFFFFF; border: 1px solid #e4e6e9;  border-radius: 6px;  margin-bottom: 20px;
}

.addformsectpush {
padding: 20px 10px; border-bottom: solid 1px #E4E6E9;
}
.addformsectdrop {
padding: 20px 10px; display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; position: relative; width: 100%; overflow: visible;
}

.file-upload-container {
  position: relative;
  display: inline-block;
  width: 100%; /* Adjust width as needed */
}

.file-upload-label {
  display: inline-block; height: 120px; width: 100%; padding: 10px 20px; background-color: #FAFAFA; color: #000; border-radius: 10px; border: dashed 2px #E4E6E9;
  border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

.file-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-names {
  margin-top: 10px;
  color: #333;
}

.image-previews {
  width: 100%; height: max-content; margin-top: 10px; display: flex; flex-wrap: wrap;
}

.image-preview {
  margin-right: 10px; margin-bottom: 10px; width: 60px; height: 60px; border: 1px solid #ddd;   border-radius: 5px; display: flex;  justify-content: center; align-items: center; position: relative;
}

.image-preview img {
  width: 90%; height: auto;
  object-fit: cover;
}
.remove-button {
  position: absolute;
  top: 0;
  right: 0;
  background: #000000;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
}

.controlbox { 
width: 100%; height: max-content;
}
#additemform {
width: 100%; height: max-content; display: flex; flex-wrap: wrap; align-items: center;
}
.addformbox {
width: max-content; height: max-content; width: 100%; max-width: 410px; margin-bottom: 10px; position: relative; overflow: visible;
}
.addformboxvxi {
  width: 100% !important; max-width: 100%;
  }
.addformbox label {
font-size: .7rem;
}
.addformput,#pchecksel {
width: 100%; height: 50px; border: solid #E4E6E9 1px; padding: 10px; border-radius: 2px; font-size: .8rem; background-color: #FAFAFA;
}
.blogput {
  height: 90px !important;
}
#promoalertest {
font-size: .7rem; color: #ACD0A0; border: 1px solid #ACD0A0; width: max-content; height: max-content; padding: 5px 10px 5px 10px;
margin-bottom: 10px;
}
.addformtext {
width: 100%; height: 200px; border: solid #A8BAC1 1px; padding: 10px; border-radius: 6px; font-size: .8rem; background-color: #F5F5F5;
}
#addformbtn, #myaccountbtn {
width: 100%; height: 50px; border-radius: 4px; color: #FFFFFF !important; background-color: #000000; max-width: 410px; cursor: pointer;
}
#addformbtn:hover {
  background-color: #0052FF; 
}
#addformmg {
width: 100%; border-radius: 4px; max-width: 360px;display: flex; padding: 12px ; margin-bottom: 10px;  height: 50px;
border: solid #A8BAC1 1px;
}
#controlalert {
width: max-content; max-width: 100%; padding: 4px; display: flex; align-items: center;
border: solid 1px #FF0000; background-color: #EF8F8F; margin: 2px;
}
#controlalert img {
width: 18px; height: 18px; margin-right: 10px;
}
#controlalert span {
font-size: .8rem; 
}
.imagesecondbox {
  width: 100%; height: max-content; display: flex; flex-wrap: wrap; padding: 20px 10px; background-color: #ffffff; border-radius: 8px; border: solid 1px #E4E6E9;
}
.image-wrapper {
  width:  max-content; height: max-content; position: relative; border-radius: 5px; margin-right: 10px; margin-bottom: 10px; overflow: visible;
}
.image-wrapper img {
  width: 100px; height: auto;
}
.delete-btn {
  width: 18px; height: 18px; background-color: #000000; color: #FFFFFF; border-radius: 100%; position: absolute; right: -5%; top: -5%; z-index: 5;
  display: flex; align-items: center; justify-content: center;
}

.coloroptionhold {
width: 100%; height: max-content; border-radius: 4px; border: solid 1px #E4E6E9; padding: 10px; margin-bottom: 20px;
}
.coloroptionhold h4 {
  width: 100%; padding: 15px 0px; font-size: .9rem; border-bottom: 1px #E4E6E9; text-transform: uppercase; display: flex; align-items: center; justify-content: flex-start;
}
.colorDisplayBox {
  width: 26px; height: 26px; border-radius: 100%; margin-left: 10px;
}

.colorboxhold {
min-width: 120px; border: solid #E4E6E9 1px; display: flex; align-items: center; padding: 10px; width: max-content;
}
.selectedColorsDisplay {
  width: 100%; height: max-content; min-height: 500px;
}
.multi-select {
  position: relative;
  width: 100%;
  max-width: 400px;
  overflow: visible;
}

.select-box {
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #fff;
  border-radius: 1px;
  display: flex;
  justify-content: space-between;
  align-items: center;   overflow: visible; overflow-y: auto; width: 100% !important; max-width: 100% !important;
}

.options-container {
  display: none;
  position: absolute;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 99;
}

.option {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.option input {
  margin-right: 10px;
}

.option:hover {
  background: #f0f0f0;
}

.category {
  padding: 8px 12px;
  background: #e9e9e9;
  font-weight: bold;
}

.btn-clear {
  padding: 4px 9px;
  background: red;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 3px;
  font-size: 10px;
  display: none; width: 50px;
}
.selected-options {
width: calc(100% - 60px);
}

.category {
  font-weight: bold;
  cursor: pointer;
  padding: 5px;
  background-color: #f4f4f4;
  margin-top: 10px;
}

.option {
  display: block;
  margin-left: 15px;
}
#color-option-container {
width: 100%; height: max-content;
}

@media (min-width: 700px) { 
.addformbox {
  width: calc(33% - 5px); margin-bottom: 20px;
  }
  .addformboxii {
    width: 100%; max-width: 100%;
  }
  .addformboxxi {
  width: calc(100% - 33.4%); max-width: 100%;
  }
  .addformput,#addformbtn {
  height: 40px;
  }
  #addformbtn {
  width: 100% !important; margin-top: .8rem;
  }
  .addformtext {
  height: 150px;
  }
  .textformbox {
  max-width: 500px; width: 30%;
  }
  #addformmg {
  margin-right: 10px; height: 45px;
  }
}

@media (min-width: 1200px) { 
.addformbox_next {
width: calc(25% - 5px); margin-bottom: 30px;

}
}

/* -----------------------------------------------------------------------            structure blocks        ---------------------------------------------------------------------------------- */

.secondary-section {
width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; padding-top: 30px; height: max-content;
}
.extendedrectbox {
width: 100%; height: max-content; padding: 10px 10px; margin-bottom: 20px; border-bottom: solid 1px #E4E6E9;
}
.createbutton, .paybutton, .form-submit-btn, #sendpost{
  width: max-content; min-width: 120px; height: 45px; border-radius: 6px; background-color: var(--primary-color);  font-size: .9rem;
  color: #FFFFFF; padding: 10px 25px; display: flex; align-items: center; justify-content: space-between; cursor: pointer;
}
.createbutton:hover,.form-submit-btn:hover, .paybutton:hover{
background-color: var(--accent-color); transition-duration: 1s;
}
.createbutton img, .form-submit-btn img, .paybutton img {
  height: 26px; width: auto; margin-left: 6px;
}

@media (min-width: 700px) { 
.extendedrectbox {width: 100%; height: max-content; padding: 20px 0px; }
}

/* ------------------------------------------------------------ Ext Accounts ----------------------------------------------------------*/

.secondary-section-accounts {
  justify-content: space-between;
}
.secondary-wrap-box {
width: calc(100%);  margin-bottom: 20px; background-color: var(--shade-color); border-radius: 6px;  min-height: 160px;
 padding: 20px; position: relative; border: solid 1px #FAFAFA; box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.021); border: solid 1px #E4E6E9;
}
.account_spacer {
  width: calc(33% - 8px);
}
.profile-box-top {
  width: 100%; border-bottom: #F5F5F5 solid 1px; padding-bottom: 10px ; display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; overflow: visible; position: relative;
}
.dp-box {
  width: 42px; height: 42px; border-radius: 100%;  display: flex; align-items: center; justify-content: center; margin-right: 10px;  z-index: 88;
  font-size: 1rem; font-weight: 600; color: #FFFFFF;
}
.dp-box img {
width: 100%; height: 100%; object-fit: cover; border-radius: 100%;
}
.initials-box-top {
  width: calc(100% - 75px); height: max-content;
}
.initials-box-top h6 {
font-size: .9rem; font-weight: 500; text-transform: capitalize; width: 100%; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; padding-bottom: 2px;
}
.initials-box-top span {
font-size: .7rem; font-weight: 500; text-transform: capitalize;
}
.options-box-top {
width: 20px; height: 100%; display: flex; align-items: flex-start; justify-content: flex-end;   padding: 2.5px; cursor: pointer;
z-index: 98;
}
.options-box-top img {
width: 100%; height: auto;
}
.options-box-top-drop {
position: absolute; bottom: -100%; width: 100px; height: max-content; background-color: #FFFFFF; z-index: 98; right: 0%;
box-shadow: 1px 1px 5px #E4E6E9; border: solid 1px #FAFAFA;  display: none;
}
.options-list {
width: max-content; padding: 5px 10px; display: flex; align-items: center; justify-content: space-between;   font-size: .7rem; font-weight: 600; color: #000;
cursor: pointer; border: #000 solid 1px;  border-radius: 5px;
}
.remove-client-btn {
  border: none; padding: 2px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 100%; 
}
.options-list:hover {
  background-color: #F8FCFF;
}
.options-list  img {
height: 16px; width: auto; 
}
.remove-client-btn:hover {
border: solid 1px #000; background-color: #e1f8e1;
}
.icon-list-listing {
width: 100%; padding-bottom: 10px; display: flex; align-items: center; justify-content: flex-start; 
}
.icon-list-listing img {
width: 18px; margin-right: 10px;
}
.icon-list-listing span {
white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; width: calc(100% - 20px); color: #76808f; font-size: .85rem; text-transform: lowercase;
font-weight: 500; 
}
.tag-box-hold {
width: 100%; display: flex; align-items: center; overflow-y: auto;
}
.tag-box {
width: max-content; height: max-content; padding: 3px 14px;  display: flex; align-items: center; justify-content: center;
background-color: #D2F8D2; margin-right: 10px; border-radius: 26px;
}

.tag-box span {
font-size: .7rem; color: #050505;  font-weight: 600;
}
.client-contact-box {
  padding-bottom: 10px;
}
.merchid_view_contact {
padding-top: 5px;
}
.empty-box-section {
width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px;
}
.empty-box-section-img {
  width: 200px; height: auto; margin-bottom: 0px;
}
.empty-box-section p {
  max-width: 400px; margin-bottom: 30px; font-size: .9rem; color: var(--primary-color); text-align: center; line-height: 1.6rem; width: 90%; font-weight: 400;
}

.success-box-section {
  width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  .success-box-section-img {
    width: 200px; height: auto; margin-bottom: 0px;
  }
  .success-box-section p {
    width: 400px; margin-bottom: 30px; font-size: .9rem; color: var(--primary-color); text-align: center; line-height: 1.6rem;
  }
  #additional_inputs {
    width: 100%;
  }
  .addformsectdropxv {
    border: solid 1px #F5F5F5; background-color: #FAFAFA;  padding: 30px 10px;  padding-bottom: 0%; border-radius: 16px; margin-bottom: 10px;
  }
  .calendarboxx {
  height: 239px;
  }

.group-block {
  margin-bottom: 20px;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}

.group-title {
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

.subgroup-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.subgroup-label {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.subgroup-label:hover {
  background: #eef6ff;
  border-color: #007BFF;
}

.subgroup-checkbox {
  transform: scale(1.1);
  accent-color: #007BFF;
}


@media (min-width: 700px) { 
.secondary-wrap-box {
width: calc(50% - 8px); }
}

@media (min-width: 700px) { 
.secondary-wrap-box {
width: calc(33% - 8px); }
}

/* -------------------------------------------------------------------------Admin Orders Styling --------------------------------------------------------------------------*/

.adminorderfilterbox {
  width: 100%; height: max-content; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;  padding-bottom: 30px;
}

#orderfilterbtn, #invoicefilterbtn {
display: flex; align-items: center; justify-content: center; padding: 5px 20px; height: 45px; background-color: #000000; border-radius: 5px; border: solid 1px #E4E6E9; cursor: pointer;
width: 100%; margin-bottom: 10px;
}
#orderfilterbtn:hover, #orderfilterbtn:active, #invoicefilterbtn:hove {
  border: solid 1px #76808f;
}
#orderfilterbtn img , #invoicefilterbtn img {
height: 16px; width: auto; margin-right: 10px;
}
#orderfilterbtn span,  #invoicefilterbtn span {
font-size: .9rem; color: #FFFFFF;
}
.filterput {
padding: 5px 10px; height: 45px; background-color: #FFFFFF; border-radius: 5px; margin-bottom: 10px; font-size: .8rem; color: #000000; border: solid 1px #E4E6E9; 
}
.filterputsearch {
width: 100%; 
}
.filterputoption {
  width: 49%;
  }

  @media (min-width: 700px) { 

    .paymentbox {
    margin-right: 12px; margin-bottom: 20px;
    }
    .ordersearchbox {
    height: 32px; width: 360px;
     }
    #ordersearchform button {
    padding: 5px;
    }
    #ordersearchform input {
     font-size: .7rem;
    }
    }
    
  @media (min-width: 860px) { 
  .adminviewmobsect {
  padding-top: 0px;
  }
    .moblnk {
    display: none !important; 
    }

.filterputsearch {
width: 38%;
}
.filterputoption,   #orderfilterbtn ,  #invoicefilterbtn{
  width: 20%;
}

}
/* ------------------------------------------------------------ Ext new account -----------------------------------------------*/

.new_contact_options_hold {
width: 100%;  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 20px; height: max-content;
}
.subgroup-checkbox-initial {
display: none;
}
.new_contact_options_box {
  padding: 30px 20px; width: 100%; min-height: 150px; border: solid 1px #E4E6E9; display: flex; justify-content: center; align-items: center; 
  background-color: #FFFFFF; cursor: pointer;
}
.new_contact_options_box:hover {
  background-color: #e1f8e1; border: solid 2px var(--secondary-color);
}
.new_contact_options_box:active {
  background-color: #FFFFFF; border: solid 2px var(--primary-color);
}
.new_contact_options_box span {
  font-size: 2rem; font-weight: 700; color: #000000; text-align: center; padding: 10px;
}
#new_client_form {
margin-bottom: 100px; overflow: visible;
}
.secondary-section-ii {
padding: 0px 10px;
}
.otmboxonetab {
background-color: #FFFFFF; padding: 30px 20px; margin-bottom: 20px; border-radius: 6px; border:solid 1px #FAFAFA; 
padding-bottom: 0%; overflow: visible; width: 100%;
}

.form-top-box {
width: 100%; display: flex; align-items: center; justify-content:flex-start ; padding-bottom: 0px; position: relative;
overflow: visible;
}
.form-top-box-mg-box, .form-top-option-box-mg-box {
width: 60px; height: 60px; border-radius: 100%; display: flex; align-items: center; justify-content:center; margin-right: 12px;
}
.form-top-box-mg-box img, .form-top-option-box-mg-box img {
width: 100%; height: 100%; object-fit: cover;
}
.form-top-change-mg {
  padding: 4px 8px; border: solid 1px #E4E6E9; background-color: #FAFAFA; border-radius: 3px; font-weight: 500;
  font-size: .8rem; cursor: pointer;
}
.form-top-change-mg:hover {
  color: #FFFFFF; background-color: var(--shade-color);
}
.form-mg-option-box {
position: absolute; width: 380px; height: 200px; z-index: 98; left: 70px; top: 10px; background-color: #FFFFFF; border-top-right-radius: 10px;
box-shadow: 1px 1px 5px #E4E6E9; padding: 10px; overflow-y: auto; border-bottom-right-radius: 10px; border-bottom-left-radius: 20px;
display: none;
}
.form-mg-option-box-scroll{
display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; padding: 10px 0px;
}

.form-top-option-box-mg-box {
margin: 5px !important; cursor: pointer; border: 1px solid#ffffff;
}
.form-top-option-box-mg-box:hover {
  transform: scale(1.01); border-color: #FAFAFA;
}

.multi-select {
  position: relative;
  width: 100%;
  max-width: 400px;
  overflow: visible;
}

.select-box {
 cursor: pointer; display: flex; justify-content: space-between; align-items: center; overflow-y: auto; width: 100%  !important; max-width: 100% !important;
}

.options-container {
  display: none; position: absolute; width: 100%; max-height: 300px; overflow-y: auto; background: #fff; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
  z-index: 99;
}

.option {
  padding: 8px 12px; display: flex; align-items: center; cursor: pointer;
}

.option input {
  margin-right: 10px;
}

.option:hover {
  background: #f0f0f0;
}

.category {
  padding: 8px 12px; background: #e9e9e9; font-weight: bold;   font-weight: bold; cursor: pointer; padding: 5px; background-color: #f4f4f4; margin-top: 10px;
}

.btn-clear {
  padding: 4px 9px; background: red; color: white; border: none; cursor: pointer; border-radius: 3px; font-size: 10px;
  display: none; width: 50px;
}
.selected-options {
width: calc(100% - 60px);
}

.option {
  display: block;
  margin-left: 15px;
}
#color-option-container {
width: 100%; height: max-content;
}
.secondary-section_view_clientele {
  justify-content: center; align-items: center;  padding-top:20px ;
}
.view_clintele_btn_box {
width: 100%; height: max-content; display: flex; align-items: center; justify-content: flex-end; padding-bottom: 10px;
}
.view_clintele_btn {
  width: max-content; height: max-content; padding: 5px 30px; font-size: .9rem; border-radius: 26px; background-color: #182630;
  color: var(--accent-color); font-size: .8rem; cursor:pointer; border: solid 2px var(--primary-color);
}
.view_clintele_btn:hover {
  color: var(--primary-color); background-color: var(--accent-color); transition-duration: 700ms; border: solid 2px var(--primary-color);
}
.merchbankbox_view_client {
  padding: 0%; padding-bottom: 20px;
}
.view_contact_mgbox {
  width: 80px; height: 80px; margin-bottom: 15px;
}
.view_clientele_hold_box {
width: 100%;  max-width: 800px; height: max-content; display: flex; justify-content: space-between; align-items: flex-start; 
flex-wrap: wrap;  
}
.view_client_avatar_box {
  justify-content: center; align-items: center; padding: 20px;
}
.table_column_last {
text-align: end;
}
.merchbankboxp_view_contact {
  border: none; margin-bottom: 0%; padding: 20px 20px 0px 20px; 
}
.tag-box-hold_view_client {
  width: 100%; justify-content: flex-end;
}
.merchbankbox_view_client_contact {
  background-color: var(--primary-color); 
}
.view_contact_table tr td {
 color: #000000 !important; border: none;  border-top: 1px solid #EDF2F5; font-weight: 500; font-size: .7rem; padding: 10px 20px;
}
.view_contact_table_contact tr td {
 color: #FFFFFF !important; border: none;  border-top: 1px solid var(--secondary-color);
}
.view_contact_table thead tr th{
border: none ; 
}
.view_contact_table_contact tr:hover {
background-color: transparent;
}
.merchbankgraphbox_view_client_info {
  padding: 0%; padding-bottom: 20px;
}
.view_client_loyalty {
width: max-content; height: max-content; display: flex; align-items:center; justify-content: center; 
}
.view_client_loyalty img{
width: 24px; height: auto; margin-right: 5px;
}
.view_client_loyalty span{
font-size: .7rem; color: #000000; font-weight: 500;
}
.tag-box-hold_view_client {
  justify-content: space-between; height: max-content; align-items: center; padding-top: 5px;
}
@media (min-width: 700px) { 
.merchbankbox_view_client {
  height: 180px;
}
.new_contact_options_box  {
  width: calc(33% - 5px); max-width: 310px; min-width: 310px;
}
}
@media (min-width: 1200px) { 

.secondary-section-ii {
padding: 0px 40px;

}
}

/* -------------------------------------------------------------------- Ext Subscriptions --------------------------------------------------------------*/

.second-side-box {
width: 100%; height:max-content; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; padding-left: 5px; min-height: 500px; 
}
.secondary-wrap-boxv {
  width: 100%; 
}
.createbuttonv {
width: 100%; margin-bottom: 20px;
}
.section-intro-text {
  font-size: .8rem; padding: 6px 16px; border-radius: 26px; margin-bottom: 20px; width: 100%; font-weight: 500; text-transform: capitalize;
  border: solid 1px var(--primary-color);
}
.initials-box-topv span{
font-size: .8rem; padding-top: 8px;
}
.short-box-description {
white-space: wrap; overflow: hidden; width: 100%;  text-overflow: ellipsis; max-height: 2.4rem; font-size: .8rem; margin-bottom: 20px; font-weight: 400;
line-height: 1.1rem;
}

#suggestions {
  position: absolute; width: 100%; background-color: white; z-index: 999; border-radius: 2px; border: 1px solid #ccc; font-size: .8rem;
}

.suggestion-item {
  padding: 8px; cursor: pointer;  margin-bottom: 5px; /* Adds space between suggestions */
}

.suggestion-item:hover {
  background-color: #f0f0f0;
}
.icon-list-listingv {
padding: 5px 0px; width: 98%;
}
.icon-list-listingv span {
  color: var(--primary-color); width: 90%; white-space: wrap; overflow: hidden; text-overflow: ellipsis;
}
#add_feature_button,#add_item_button {
 background-color: #146279; margin-top: 19px;  color: #FFFFFF;
}
.feature-list {
  padding-top: 10px;
}
.addformboxv {
  width: calc(70% - 10px); max-width: 100%; 
}
.addformboxvi {
width: 30%; max-width: 100%;
}
.remove-feature {
width: 28px; height: 28px;  color: #FFFFFF;  display: flex; align-items: center; justify-content: center;
}
.remove-feature img {
width: 100%; height: auto;
}

/* ------------------------------------------------------------------------ login styling ----------------------------------------------------------------------------------------------*/

#lgnmain {
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px !important;  background-color: var(--primary-color); background-size: cover;
  width: 100%; height: 100%; padding-bottom: 100px !important; background-image: url(../svg/background-dark.svg); background-position: center;
}
.lgnmain_top_box {
width: 100%; height: max-content;  margin-bottom: 70px; display: flex; align-items: center; justify-content: center; padding: 20px 30px 30px 40px;

}
.switch_lgn_lnk {
width: max-content; border-radius: 10px; background-color: var(--accent-color); color: #FFFFFF !important; padding: 10px 25px;
display: flex; align-items: center; justify-content: center;  border: solid 2px var(--primary-color); margin: 3px;
}
.switch_lgn_lnk img {
height: 20px; margin-right: 10px; width: auto;
}
.switch_lgn_lnk:hover {
  border-color: var(--secondary-color);
}
  .sign_in_logo_box {
    width: 100%; height: max-content;   display: flex; align-items: center; justify-content: center; padding-bottom: 40px; padding-top: 10px;
  }  
  .sign_in_logo_box img {
    width: 200px ; height: auto;
  }
  #lgnmain h1 {
  font-size: 2rem;
  }
  #lgnmain p {
  font-size: .9rem;  padding-bottom: 30px; color: #000000; width: 100%; text-align: center;
  }
  .putbox,.signputbox {
  width: 100%; height: 45px; margin-top: 10px;border-radius: 5px; display: flex; justify-content: center;align-items: center; position: relative;
  }
  #loginform,#signupform,#recoverform {
  width: 100%; height:max-content; padding: 10px 30px;  background-color: var(--primary-color); border-radius: 16px; display: flex; flex-direction: column; 
  align-items: center; justify-content: center;  min-height: 400px; padding-bottom: 0%;
  }
  
  .loginformput,.signupformput {
  width: 100%; height: 100%; border: #F1F1F1 solid 1px; border-radius: 5px; padding: 10px; font-size: .8rem;  background-color: #E4E6E9 !important; 
  }
  #loginformbtn,#signupformbtn, #recoverysubmit {
  width: 100%; height: 45px !important; color: #FFFFFF !important; background-color: var(--secondary-color) !important; font-size: .9rem !important; border-radius: 10px !important; margin-bottom: 20px; margin-top: 10px !important;
  cursor: pointer;
  }
  #recvbtn,.clrformbox {
    width: 100%; 
  }
  #recvbtn,.clrformbtn {
  width: 100%; height: 40px; color: #666 !important; background-color: #000000; font-size: .9rem;
    border-radius: 10px; margin-bottom: 20px; margin-top: 30px;
  }
  
  .passeyebox {
  position: absolute; width: max-content; height: max-content;right: 3%; display: flex; 
  justify-content: center; align-items: center; z-index: 9; padding: 2px;
  }
  .passeyebox:active{
  transform: scale(.96);
  }
  .passeyebox img {
  width: auto; height: 20px;
  }
  
  #recoverpass {
  width: 100% ; text-align: end; color: #808080 !important; font-size: .7rem; font-weight: 400;
  padding: 4px;
  }
  #recoverpass h3 {
    text-align: end; color: #F1F4F5 !important; font-size: .7rem; font-weight: 400;
    padding: 4px;
  }
  
  #tosignup span{
  color: #FFFFFF !important; text-decoration: underline; font-weight: 500; font-size: .8rem;
  } 
  #tosignup {
  width: 100%; color: #FFFFFF !important; font-size: .8rem; padding: 4px;
  }
  
  .ls-box {
  width: 100%; height: max-content; display: flex; border-radius: 16px; background-color: #FCEBEC;
  }
  .ls-box  img {
  width: 20px; height: 20px; margin: 5px;
  }
  .ls-box p {
  font-size: .4rem; color: #FF0000 !important; padding: 5px;
  }
  .loader-box {
    width: 200px; height: 200px; display: flex; justify-content: center; align-items: center;
  }
  #alertline {
    padding: 0%; color: #D05249; font-size: .9rem; height: max-content;
  }
  .recformp {
    color: #FFFFFF !important;
  }
  @media (min-width: 700px) {
  
  .lgnmain_top_box {
 justify-content: flex-end; 

}
    #signupform  {
      display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
    }
    .signputbox {
      max-width: 350px;
    }
    #loginform, #recoverform {
      width: 400px;
    }
    #signupform {
      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; max-width: 700px; flex-direction: row; position: relative;
    }
    .signputbox {
      width: calc(50% - 5px); max-width: 100%; 
    }
  }

  /* -----------------------------------------------------------------Invoicing ---------------------------------------------------------------------*/
  .table-responsive {
    width: 100%; padding-bottom: 40px;
  }
  .table_status  {
    padding: 4px 12px; border-radius: 30px;  font-size: .6rem; color: #FFFFFF;  display: flex; align-items: center;
    justify-content: flex-start; width: max-content; min-width: 100px;  font-weight: 600;
  }

.table_status  img{
  margin-right: 10px; height: 16px; width: auto;
}


/* -----------------------------------------------------------------Account Settings ---------------------------------------------------------------------*/
.secondary-section-settings {
justify-content: space-between; flex-wrap: wrap; padding-top: 40px; padding-right: 10px;
}
.third_build_box {
width: 100%; height: 180px; border-radius: 6px; margin-bottom: 20px; background-color: #f3f9fc; box-shadow: 1px 1px 5px #E4E6E9;
padding: 20px;  cursor: pointer;  position: relative; overflow: visible;
}
.third_build_box:hover {
  margin-top: -1px;
}
.third_build_box h3 {
font-size: 1rem; padding-bottom: 10px; font-weight: 600; height: calc(40% - 20px);
}

.third_build_box p {
font-size: .83rem; padding-bottom: 10px; color: #000000; font-weight: 400; height: calc(60% - 20px); word-spacing: 4px; line-height: 1.3rem;
}

.third_build_box img {
width: 40px; height: 40px; border-radius: 100%; object-fit: contain; padding: 8px; background-color: #FFFFFF; border: solid 1px #F1F1F1;
}

#company_settings { background-color: #f8f9f5;}
#payment_settings { background-color: #f1f8f7;}

.notif_alert_box {
  width: 23px; height: 23px; border-radius: 100%; background-color: #389485; position: absolute; right: -10px; top: -10px; border: 4px solid #F8FCFF;
  z-index: 89; display: flex; align-items: center; justify-content: center; padding: 0%;
  }
.notif_alert_box img {
width: 100%; height:auto; z-index: 89; background-color: transparent; padding: 0%; border: none;
}

@media (min-width: 700px) {
.third_build_box {
width:calc(50% - 10px); 
}
}

@media (min-width: 1000px) {
.third_build_box {
width:calc(33% - 8px); 
}
}

/* -----------------------------------------------------------------Ext Messages---------------------------------------------------------------------*/
.posts_wrapper {
  width: 100%; height: max-content;   background-color: #FFFFFF; border-radius: 0px; 
 padding: 20px; position: relative; border-top: solid 1px #E4E6E9;
}
.user_posts_wrapper_top {
  width: 100%; display: flex; align-items: center; justify-content: flex-start; padding-bottom: 15px;
}
.user_posts_wrapper_bottom {
  width: 100%; display: flex; align-items: center; justify-content: flex-start; padding-top: 20px;
}
.user_posts_dps {
width: 30px; height: 30px; border-radius: 100%; border: solid #FFFFFF 1px; object-fit: cover; background-color: #FFFFFF; margin-right: 4px;
}
.user_posts_message_hold {
background-color: #f1f5f7; padding: 10px;  font-size: .8rem; font-weight: 400; color: #76808f;  border-radius: 6px; 
}
.user_posts_status_box {
  padding: 5px 10px;  border-radius: 16px; background-color: #e1f8e1; display: flex; align-items: center; justify-content: flex-start; margin-right: 10px; border: solid 1px #e1f8e1;
}
.user_posts_status_box img{
 height: 16px; margin-right: 5px;
}
.user_posts_status_box span{
font-size: .6rem; font-weight: 600; color: #145515;
}
.user_posts_status_box_type {
background-color: #FFFFFF; border: solid 1px #000000;
}
.user_posts_status_box_type span {
  color: #000000;
}

/*------------------------------------------------------------------------------------ New Post -----------------------------------------------------------------*/

.new_post_box {
width: 100%; height: auto;  border-radius: 6px; padding: 0px; padding-bottom: 0px; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
}
.new_post_box_sectone,.new_post_box_secttwo {
  width: 100%; background-color: #FFFFFF; padding: 20px 20px; border-radius: 6px; margin-bottom: 20px; box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.048);
  border: solid 1px #FAFAFA;
}
.newpostintro {
  font-size: .9rem; font-weight: 700; padding-bottom: 2px;
}
.newpostintro_tip {
  font-size: .7rem; font-weight: 400; color: #76808f; padding-bottom: 10px;
}
.newpostboxfilterbox {
width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; 
}
.newpostfilterputbox {
position: relative; height: 35px;   width: 100%;padding: 0%; margin-bottom: 10px;
}
.newpostfilterput {
width: 100%; border: solid 1px #E4E6E9; height: 100%; margin: 0%; padding: 5px 10px 5px 30px; border-radius: 3px; display: flex; align-items: center; justify-content: flex-start;
font-size: .8rem;
}
.newpostfilterputbox img {
  position: absolute; width: 18px;  left: 5px;  height: 100%; object-fit: contain; padding: 1px;
}
.newpostfilterselect {
  width: calc(100% / 3); height: 35px;  padding: 5px 10px; font-size: .8rem; background-color: #F5F5F5; border-left: solid 1px #FFFFFF; margin-bottom: 20px;
}
.newpostboxfilteresultbox {
  width: 100%; overflow-y: auto; height: 300px; 
}
.newpostresultclient {
width: 100%; display: flex; align-items: center; justify-content: space-between; border-bottom:  1px solid #F5F5F5; height: 50px; padding: 10px 2px;  
}
.newpostresultclient_divone {
width:calc(60% - 2px); display: flex; align-items: center; justify-content: flex-start;
}
.newpostresultclient_divtwo {
width:calc(40% - 2px); display: flex; align-items: center; justify-content: flex-end;
}
.newpostresultclient_dp {
width: 32px; height: 32px; border-radius: 100%; margin-right: 5px; object-fit: cover; color: #FFFFFF; font-size: .65rem; font-weight: 800; display: flex;
align-items: center; justify-content: center; 
}
.newpostresultclient_checkbox {
  width: 17px; height: 17px; margin-right: 8px;
}
.newpostresclientinitials {
height: 30px; width: max-content; 
}
.newpostresclientinitials_name {
  font-size: .8rem; font-weight: 600; padding-bottom: 0px; 
}
.newpostresclientinitials_status {
  font-size: .6rem; font-weight: 400; ; color: #76808f; padding-left: 2px;
}
.tag-boxii span {
  font-size: .6rem;
}
.new_post_formbox {
  width: 50%;
}
.new_post_secondary-section {
justify-content: center;
}

.new_post_formbox_first,.new_post_formbox_second {
  width: 100%; ; padding-bottom: 10px;
}
.new_post_formbox_first label {
  font-size: .7rem; padding-right: 5px; color: #76808f; width: 75px;
}
.new_post_text_area {
  width: 100%; min-height: 210px; background-color:  #FAFAFA; color: #000000; font-size: .8rem; padding: 20px 10px; border-radius: 6px;
  border: solid 1px #E4E6E9;
} 
.new_post_formbox_second {
margin-top: 20px;
}
.new_post_formbox_bottom {
  width: 100%; display: flex; align-items: center; padding-bottom: 10px; justify-content: flex-end; padding-top: 20px;  
}
#send-post {
  background-color: #000000;
}
#send-post img{
margin: 0%; margin-right: 5px; height: 18px; 
}

.newpostboxfilteresultbox_scrollbox {
width: 100%; height: max-content; z-index: 10;
}
.newpostboxfilteresultbox_scrollbox:active {
  cursor: grabbing;
}

.switch_post_contact_option_box {
width: 100%; height: max-content; display: flex; align-items: center; justify-content: space-between;
}
.switch_post_contact_option_box li {
padding: 10px; width: 50%; font-size: .8rem; font-weight: 500;text-align: center; display: flex; align-items: center; justify-content: center; color: #76808f;
border-bottom: #E4E6E9 solid 2px; cursor: pointer;
}

.switch_post_contact_option_box li span {
color: #76808f; font-size: .8rem;
}
.spco_li_open {
color: #000000 !important; border-bottom: #000000 solid 2px !important;
}
.spco_li_open span {
color: #000000 !important; 
}
.newpostresultclient_checkbox_res {
  display: none;
}
.no-contacts-message {
width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;
padding: 40px 20px;
}
.no-contacts-message img {
  width: 35%; height: auto; padding-bottom: 20px;
}
.no-contacts-message p {
width: 90%; text-align: center;  font-size: .8rem; color: #76808f;
}

.create_post_select_options {
width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 5px 0px;
}
.create_post_select_button {
padding: 5px 15px; border: solid 1px #76808f; font-size: .6rem; font-weight: 600; cursor: pointer; color: #76808f; width: calc(50% - 2px);
display: flex; align-items: center; justify-content: center;
}
.create_post_select_button:hover {
  background-color: #F5F5F5;
}

@media (min-width: 1000px) {
.new_post_box_sectone {
  width: calc(60% - 5px);
}
.new_post_box_secttwo {
    width: calc(40% - 5px);
}
 }