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

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

header {
width: 100%; height: max-content; display: flex; align-items: center; justify-content: space-between; padding: 15px 10px; border-bottom: 1px solid var(--border-shade-color);
background-color: var(--primary-color); z-index: 99999 !important;
}
#header_logo {
height: 35px; width: max-content;
}
#header_logo img {
height: 100%; width: auto;
}

.header_menu_box {
height: max-content; display: flex; align-items: center; justify-content: center; border-radius: 10px; background-color: #FFFFFF;
}
.menulnkbox {
  height: max-content; width: max-content; position: relative; margin: 5px; border-radius: 60px;  padding: 10px 20px; font-weight: 500;
}
.menulnkbox:hover {
  color: var(--accent-color);
}
.header_extended_box {
  width: max-content; height: max-content; display: flex; align-items: center; justify-content: center;
}
.header_extended_lnk, .header_extended_menu {
  position: relative; display: flex; align-items: center; justify-content: center; margin-right: 10px; 
  width: 40px; height: 40px; border-radius: 100%; background-color: var(--shade-color); cursor: pointer;
}
.header_extended_lnk button, .header_extended_menu  button{
width: 100%; height: 100%; cursor: pointer;
}

.settings_account_button,.exit_account_button ,  #mob_header_menu_btn {
width: 100%; height: auto; padding: 10px;
}
#mob_header_menu_btn {
  padding: 10px !important; padding-bottom: 5px !important;
}
.settings_account_button img,.exit_account_button img, .header_extended_menu  button img{
width: 100%; height: auto; 
}
.settings_account_button:hover {
  transform: rotate(90deg); transition-duration: 100ms;
}
#header_extended_lnk_avatar {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.header_extended_lnk_dp {
  padding: 10px;
}

@media (min-width: 700px) { 

header {
width: 100%; height: max-content; display: flex; align-items: center; justify-content: space-between; padding: 15px 30px; border-bottom: 1px solid var(--border-shade-color);

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

.menuslide {
  width: max-content; height: max-content; background-color: var(--primary-color); z-index: 2 !important; border-radius: 10px;
  position: fixed; top: 52px; right: 5px; overflow-y: auto; padding: 20px 0px; padding-bottom: 0%;
  }
  
  .slideboxtwo { 
  width: 80%; height: 100%; display: flex; flex-direction: column; background-color: #FFFFFF; padding-top: 70px; position: relative;
  }
  .slideboxtwolink {
  width: 100%; padding:20px 40px; border-bottom:1px solid #22333d; color: #FFFFFF !important; height: max-content; display: flex; align-items: center;
  font-size: 1.2rem; font-weight: 400; text-transform: uppercase; position: relative;
  }
  
/* -------------------------------------------------------------------------- main styling start here ----------------------------------------------------------------------------*/

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

@media (min-width: 700px) {
main {
padding: 10px 20px;  
}
 }

/* ------------------------------------------------------------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: 8px; width: 100%;  padding-bottom: 10px;
position: relative; 
}

#admingreetlink {
    position: absolute; top: 0%; left: 0%; height: 100%; width: 100%; z-index: 5;
}
 .shopmgbox {
width: 60px; height: 60px; border-radius: 100%; background-color: #f4f4f4; display: flex; align-items: center; justify-content: center;
margin-right: 10px; display: flex; align-items: center; justify-content: center;
}
 .shopmgbox {
  font-size: 1.2rem; font-weight: 700;
 }
 .shopmgbox img {
    width: auto; height: 100%;
 }
 #merchname {
font-size: 1.4rem;  padding-bottom: 1px;   color: var(--text-color);  padding-bottom: 2px;
font-weight: 600;
 }
 #merchid {
font-size: .7rem; font-weight: 500;  color: var(--accent-color); 
 }
.dasholgobox {
width: 100%; padding: 10px; margin-bottom: 0px; display: flex; justify-content: space-between; align-items: center;
padding-bottom: 20px; background-color: var(--pair-color); margin-bottom: 30px; border-bottom: 1px solid #192b36 ;
}
#dashlogo {
height: auto; width: 80px;  min-width: auto; 
}
.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 ;
}

.adminlnkbox {
width: 100%; height: 45px; display: flex; align-items: center; position: relative; margin-bottom: 10px; padding: 25px 15px; position: relative;
font-size: .9rem; color: #FFFFFF;  border-radius: 10px;  border: solid 1px var(--primary-color);
}
#instruct_current_page {
background-color: #0c141a;
}
.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;
}

.adminlnkbox img {
width: 23px; height: auto; margin-right: 10px;
}
.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: 30px 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: 1.2rem; margin-bottom: 0px; width: 100%; display: flex; align-items: center; justify-content: flex-start; text-transform: capitalize; font-weight: 500;
color:var(--primary-color); 
}

#adminboxintro button {
width: 32px; height: 32px; margin-right: 10px; padding: 5px; border-radius: 100%;  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: 0px 5px;
}
.calendarbox {
  width: 100% !important; 
}
.new_calendarbox {
background: #FFFFFF !important;
}
.calendar h2 {
  margin: 0;
}
.days {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-top: 10px;
}
.day {
padding: 10px; color: #000000; border-radius: 2px; font-size: .9rem; border: solid 1px #E4E6E9; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
background-color: #F1F1F1;
}
.today {
border-color: #FFFFFF;  color: #FFFFFF; font-weight: 600; background-color: var(--primary-color);
}
 
.table_body {
  overflow-y: auto !important;
}

@media (min-width: 860px) { 
    
#adminboard {
width: 22% ; height: calc( 100vh - 20px); position: fixed; z-index: 99; box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.08);
top: 0%;   left: 0%; padding: 20px 10px; border: none !important; overflow-y: scroll; background-color: var(--primary-color); margin: 10px; border-radius: 20px;
} 
.adminboxsect {
padding: 20px; padding-bottom: 40px; 
}

#adminbox {
padding-left: 10px; padding-bottom: 40px; min-height: 98vh; padding-top: 20px; padding-right: 0px; 
}
#adminboxintro {
width: 100%;
}
.adminlnkbox {
width: 100%; margin-bottom: 16px; font-size: .9rem; 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; 
  }
  @media (min-width: 700px) {
 #adminbox {
padding: 20px 10px;  
}
   }
/* ------------------------------------------------------------------ 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: 0px;  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
}
.dashpaymentboxtwo {
width: 100%; padding: 0px; 
}
.merchbankbox {
width: calc(100%); padding: 20px 15px; border-radius: 8px; background-color: #FFFFFF;  min-height: 170px; margin-right: 0px; color: var(--primary-color);
margin-bottom: 20px; display: flex; flex-direction: column; align-items: space-between; justify-content: space-between; border: solid 1px #f1f1f1;
}
.merchbankboxi {
margin-left: 0px;  margin-right: 0px;  color: #000 !important;
}
.merchbankboxp {
  width: 100%; display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 10px; color: var(--primary-color);
}
.merchbankboxp img {
height: 26px; width: auto; margin-right: 5px;
}
.merchbankboxp span {
  font-size: .8rem; padding: 3px 12px; border-radius: 16px; color: var(--primary-color); 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: var(--text-color);
}
.merchbankboxdate {
  width: 100%;   font-size: .7rem; color: var(--text-color);
}

.merchbankgraphbox {
width: calc(100%); padding:20px; border-radius: 8px; background: #FFFFFF;  min-height: 150px;  margin-bottom: 20px;
}
.merchbankgraphboxi {
  min-height: max-content;
}

.table_block_scroll {
width: 100%; height: max-content; overflow-x: auto;
}
.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;  min-height: 200px;  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(../graphics/6193493.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: var(--primary-color); 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: 6px; font-size: .9rem; color: #FFFFFF; background-color: var(--primary-color);
}

#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: 700px) {
.table_block_scroll {
overflow: hidden;
}
.merchbankbox {
width: calc(50% - 5px); padding: 20px 15px; border-radius: 8px; background-color: #FFFFFF;  min-height: 170px; margin-right: 5px; color: var(--primary-color);
margin-bottom: 10px; display: flex; flex-direction: column; align-items: space-between; justify-content: space-between; border: solid 1px #f1f1f1; 
}

.merchbankboxi {
margin-left: 5px;  margin-right: 0px;  color: #000 !important;
}
 }
@media (min-width: 1000px) { 

  .dashpaymentboxone {
  width: 70%;  padding: 10px;   padding-left: 0%; padding-right: 0%;
  }
  .dashpaymentboxtwo {
  width: 30%;  padding: 10px;  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: 8px;  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 #A8BAC1 1px; padding: 10px; border-radius: 4px; font-size: .8rem; background-color: #fcfcfc;
}
.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: 4px; 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: 5px;
  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: 30px;
  }
  .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;
  }
}

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

.secondary-section {
width: 100%; min-height: 400px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;
}
.extendedrectbox {
width: 100%; height: max-content; padding: 10px 0px; margin-bottom: 30px;
}
.createbutton, .paybutton, .form-submit-btn{
  width: max-content; min-width: 120px; height: 55px; border-radius: 10px; background-color: var(--test-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(--test-color); transition-duration: 1s;
}
.createbutton img, .form-submit-btn img, .paybutton img {
  height: 26px; width: auto; margin-left: 6px;
}
.factor-wrap-box {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; height: max-content;
}
.factor-wrap-box-top {
min-width: 200px; border-top-right-radius: 16px; border-top-left-radius: 16px;  background-color: #cfd8e6; width: max-content; height: 50px; display: flex; align-items: flex-end;
justify-content: space-between; border-top: solid 2px #212e37; overflow: visible;  

}
.factor-wrap-box-top-side {
  width: 20px; height: 100%; border-bottom-left-radius: 40px;  background: var(--background-gradient); 
}
.factor-wrap-box-top p {
  font-size: 1.1rem; font-family: fontthree; font-weight: 600; padding: 10px 20px;  
}
.factor-wrap-box-content {
background: var(--secondary-color); padding: 40px 10px; width: 100%; height: max-content; border-radius: 16px; border-top-left-radius: 0%; background-color: #cfd8e6; 
display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;  position: relative;
}

/* ------------------------------------------------------------ Ext Accounts ----------------------------------------------------------*/
.secondary-section-accounts {
  justify-content: space-between;
}
.secondary-wrap-box {
width: calc(33% - 8px);  margin-bottom: 20px; background-color: #FFFFFF; border-radius: 26px;  min-height: 160px;
 padding: 20px; position: relative; border: solid 1px #FAFAFA;
}
.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: 45px; height: 45px; border-radius: 100%;  display: flex; align-items: center; justify-content: center; margin-right: 10px; background-color: #333; z-index: 88;
}
.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;
}
.initials-box-top span {
font-size: .7rem; font-weight: 500; text-transform: capitalize; color: #76808f; width: 98%;  white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis;
}
.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: 100%; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between;   font-size: .6rem; font-weight: 600; color: #76808f;
cursor: pointer; 
}
.options-list:hover {
  background-color: #F8FCFF;
}
.options-list  img {
height: 16px; width: auto; margin-left: 5px;
}
.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: 5px 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: 20px;
}
.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: 10px;
  }
  .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;
  }

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

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

#orderfilterbtn, #invoicefilterbtn {
display: flex; align-items: center; justify-content: center; padding: 5px 20px; height: 50px; background-color: #212124; border-radius: 26px; cursor: pointer;
width: 100%; margin-bottom: 20px; color: #0b0d0f;
}
#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: 1rem; color: #FFFFFF;
}
.filterput {
padding: 5px 20px; height: 50px; background-color: #ebeff7; border-radius: 26px; margin-bottom: 20px; font-size: .9rem; color: #000000; 
border: solid 1px #d8dfeb;
}
.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_client_form {
margin-bottom: 100px; overflow: visible;
}
.otmboxonetab {
background-color: #FFFFFF; padding: 30px 20px; margin-bottom: 20px; border-radius: 16px; border:solid 1px #FAFAFA; 
padding-bottom: 0%; overflow: visible; width: 100%;
}
.otmboxonetabintro {
  border-bottom: solid 1px #F5F5F5; padding-bottom: 15px;
}
.secondary-section-ii {
padding: 0px 40px;
}
.form-top-box {
width: 100%; display: flex; align-items: center; justify-content:flex-start ; padding-bottom: 20px; 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: max-content; height: max-content; margin-bottom: 15px; background-color: transparent !important; border-radius: 100%;
   padding: 10px;
}
.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 10px 20px; 
}
.merchbankboxp_view_contactxi span {
  color: #FFFFFF !important; 
}

.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;
}
}

/* -------------------------------------------------------------------- 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); width: 100%; 
  height: 100%; padding-bottom: 100px !important; 

  }
  .sign_in_logo_box {
    width: 250px; height: max-content;   display: flex; align-items: center; justify-content: center; padding-bottom: 40px;
  }  
  .sign_in_logo_box img {
    width: 100% ; 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 {
  width: 100%; height:max-content; padding: 20px;  background-color: #FFF; border-radius: 5px; display: flex; flex-direction: column; 
  align-items: center; justify-content: center;  min-height: 330px; border: solid 2px var(--shade-color); padding-top: 40px;
  }
  
  .loginformput,.signupformput {
  width: 100%; height: 100%; border: var(--primary-color) solid 1px; border-radius: 5px; padding: 10px; font-size: .8rem;  background-color: #F1F1F1 !important; 
  }
  #loginformbtn,#signupformbtn {
  width: 100%; height: 45px; color: #FFFFFF !important; background-color: var(--primary-color); font-size: .9rem; border-radius: 10px; margin-bottom: 20px; margin-top: 10px;
  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: #146279 !important; text-decoration: underline; font-weight: 500; font-size: .8rem;
  } 
  #tosignup {
  width: 100%; color: var(--primary-color); 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;
  }
  @media (min-width: 700px) {
  
    #signupform  {
      display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
    }
    .signputbox {
      max-width: 350px;
    }
    #loginform {
      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); 
}
}


/* -------------------------------------------------------- Checkout styling start here --------------------------------------------*/
.co-form {
width: 100%; display: flex; align-items:flex-start; justify-content: space-between; flex-wrap: wrap;
}
.fourth_main {
padding: 100px 20px !important; 
}
.checkout_td  {
  font-size: .8rem; color: #1C1C1C; padding: 10px 10px;
}
.final_calc_box, .final_stray_box {
width: 100%; height: max-content;  display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start;
padding: 0px 5px; padding-bottom: 10px; border-bottom: 1px solid #E4E6E9; margin-bottom: 15px;
}
.final_calc_box p {
width: 100%; height: max-content;  display: flex; align-items: center; justify-content: space-between; font-size: .9rem;
padding-bottom: 15px;
}
.final_stray_box p {
font-size: .8rem; padding-bottom: 10px;   width: 100%;  
}
.final_stray_box p span {
text-transform: uppercase; line-height: 1.5rem; font-size: .8rem; color: #146279; font-weight: 500;
}
.final_stray_box {
margin: 0%; padding-bottom: 10px; border: none;
}

.final_calc_box p span {
color: #146279; font-size: .8rem; text-transform: uppercase;
}
.paymentoptionbox {
width: 100%; display: flex; flex-wrap: wrap; height: max-content;  border-bottom: 1px solid #E4E6E9;  margin-bottom: 20px; position: relative;
padding-bottom: 20px;
}

.specoptndrop input{
display: none;
}
.specoptndrop {
min-width: calc(50% - 8px) ; margin:4px; 
}
.specradio-btn {
width: 100%; height: max-content; border: 1px solid #E4E6E9; display: flex;  align-items: center; justify-content: center;
border-radius: 5px; position: relative; text-align: center; cursor: pointer; padding: 12px  10px; 
}

.specradio-btn p {
font-size: .85rem; font-weight: 560;
}

.specoptndrop input:checked+ .specradio-btn {
background-color:#F1F4F5; color: #FFFFFF !important; border: 1px solid #146279;
}
.merchbankboxpix {
border: none !important;  margin-bottom: 10px !important;
}

.merchbankboxpix span {
  font-size: .7rem !important; padding: 5px 16px; border-radius: 36px; border: 1px solid #f1f1f1; margin-top: 5px;
  }

@media (min-width: 700px) { 
  .fourth_main {
    padding: 90px 80px !important;
    }

  }

  /* chart */
.merchbankgraphboxdash { padding: 0%; padding-bottom: 0% !important;}
.merchbankgraphboxdash p { padding: 10px; margin: 0%;}
.chartdash {
  width: 100%; padding: 15px;  background-color: #f3f6f8; overflow: auto;
}

/*--------------------------------------------------------------------------- Contract -------------------------------------------------------------------------------*/
.sibambene-agreement {
  align-items: center; justify-content: center; 
}
.agreement-title {
    text-align: center; font-size: 1.2rem;margin-bottom: 25px;font-weight: 600;
}

.agreement-section-title {
    font-size: 1rem; font-weight: 600;margin-top: 25px;
    margin-bottom: 10px;
    color: var(--accent-color);
}

/* Paragraphs */
.agreement-intro,
.partner-info,
.collective-ref,
.agreement-section-text {
    font-size: .9rem;
    line-height: 1.5rem;
    margin-bottom: 15px;
}

/* Lists */
.agreement-list {
    list-style-type:circle;
    padding-left: 20px;
    margin-bottom: 15px;
}

/* Signature */
.signature {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.signature-line {
    width: 48%;
    margin-top: 20px;
    font-size: 16px;
}
.contracttext_box {
  width: 100%; max-width: 800px; padding: 40px 20px; border-radius: 6px; background-color: #FFFFFF; border: solid 1px #F5F5F5;
}

.contract-actions {
    margin: 20px 0;
    text-align: center;
}

.btn {
    padding: 12px 25px; height: 45px;
    background-color: var(--primary-color);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: var(--accent-color);
}

.upload-form {
    max-width: 500px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f3f4f6;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.upload-form input[type="file"] {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
}

.upload-btn {
    align-self: flex-start;
}

.agreement_sub_form_box {
display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 6px; background-color: #FAFAFA; border: solid 1px #f5f5f5;
padding: 20px 10px;
}

.requestconfirmboxmg {
  width: 140px; height: auto; margin-bottom: 10px;
}
.requestconfirmbox p {
  font-weight: 600; font-size: 1rem;
}
.requestconfirmboxlink {
  padding: 15px; width: max-content; height: max-content; color: #FFF !important; background-color: var(--primary-color); border-radius: 6px;
}

/*--------------------------------------------------------------------------- Notification -------------------------------------------------------------------------------*/ 

.del_this_message {
  width: 20px; height: 20px; padding: 2px; border: solid 1px #E4E6E9 solid; background-color: #FAFAFA;
}
.del_this_message  img {
  height: 100%; width: auto;
}

.final_dep_box {
padding: 20px; background-color: #FFFFFF; border-radius: 5px; width: 100%; max-width: 450px;
}
.final_dep_box p {
  width: 100%; padding: 10px 5px; border-bottom: 1px #E4E6E9 solid; font-size: 1rem;
}
.final_pay_btn {
  width: 100%; margin-top: 20px;
}

.final_dep_box h2 {
  width: 100%; padding: 10px 5px; border-bottom: 1px #E4E6E9 solid; font-size: 1.5rem; font-weight: 600;
}
/* ------------------------------------------------------------Slides ------------------------------------------------------ */
.slider {
    width: 100%; max-width: 500px;  position: relative; background: #FFFFFF; border-radius: 6px; padding: 20px; display: flex; 
    flex-direction: column; justify-content: center; align-items: center; min-height: 450px;
}

.slide {
    display: none; padding: 30px; 
}

.slide.active {
  display: flex; flex-direction: column; justify-content: center; align-items: center; 
}
.slide  img {
width: auto; height: 150px; padding-bottom: 20px;
}
.slide  h2 {
  text-align: center; padding-bottom: 10px; font-weight: 600; font-size: 1.2rem;
}
.slide  p {
  text-align: center; color: #76808f; font-weight: 300; font-size: .9rem; padding-bottom: 20px;
}

.slide  span {
  text-align: center; color: #aa7005; font-weight: 300; font-size: .9rem; padding-top: 15px;
  border-top: solid 1px #E4E6E9;
}
.controls {
    margin-top: 15px; text-align: right; width: 100%; display: flex; align-items: center; justify-content: center;
}

.controls button {
  padding: 8px 25px; border: solid 1px #e4e6e9; background: #FAFAFA; color: var(--primary-color); cursor: pointer;
border-radius: 120px; display: flex; align-items: center; margin: 0px 5px;
}

.controls button:hover {
    background: var(--primary-color); color: #ffffff;
}
#partner-picker {
    text-align: center; margin-top: 60px; 
}

.partner-grid {
display: flex; justify-content: center;  margin-top:10px;  flex-wrap: wrap;

}

.partner-card {
    cursor: pointer;
    transition: transform .2s ease; border:  solid 1px #E4E6E9; background-color: #FFFFFF; border-radius: 10px; padding: 20px 25px;
    display: flex; align-items: center; justify-content: center; flex-direction: column; width: 150px; margin: 10px; height: 160px;
}
.partner-card span {
  padding-top: 10px; font-weight: 500; width: 100%; text-align: center; white-space: nowrap; text-overflow: ellipsis;  display: block;  font-size: .9rem;
}

.partner-card:hover {
    transform: scale(1.05);
}

.partner-card .dp-box {
  margin: 0%;
}