/* Business card Navbar */ /* Business card Navbar */ /* Business card Navbar */ /* Business card Navbar */ /* Business card Navbar */ /* Business card Navbar */ /* Business card Navbar */ /* Business card Navbar */ /* Business card Navbar */ /* Business card Navbar */ /* Business card Navbar */ /* Business card Navbar */
.center {
  position: relative;
}



.businesscard_interfaceSideRadios {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background-color: white;
  margin-bottom: 1rem;
}

.businesscard_interfaceSideRadios div {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.businesscard_front,
.businesscard_back {
  display: none;
}

.businesscard_front.active,
.businesscard_back.active {
  width: 100%;
  display: flex;

  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
}

.businesscardDesignEdit_navbar {
  width: 100%;
}
.position_navbar,
.contentAdd_navbar,
.businesscardBg_navbar,
.businesscardContentColor_navbar,
.logoOrnament_navbar,
.businesscardInfoColor_navbar,
.businesscardPersonColor_navbar,
.businesscardContentRadius_navbar,
.businesscardContentBorder_navbar,
.qrcode_navbar,.fonts_navbar,.download_navbar,.contentSize_navbar{
  margin-bottom: 1rem;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background-color: white;
  padding: 1rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.contentSize_navbar{
  flex-direction: column;
}
.contentAdd_navbar{
  flex-direction: column;
}
.businesscardInfoColor_navbar,.businesscardPersonColor_navbar {
  flex-direction: column;
}
.qrcode_navbar {
  align-items: center;
  justify-content: start;
}
.qrcode_navbar div{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.qrcode_navbar input[type="text"] {
  border: 2px solid var(--color-border);
  padding: 1rem;
}

.businesscardInfoColor_navbar_items,.businesscardPersonColor_navbar_items,.businesscardContentBorder_navbar_items {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.businesscardInfoColor_navbar div,.businesscardPersonColor_navbar_items div,.businesscardContentBorder_navbar_items div {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.logoOrnament_navbar {
  flex-direction: column;
}
.logoOrnament_navbar_header input {
  display: none;
}
.logoOrnament_navbar_uploads {
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.logoOrnament_navbar_header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.framUpload {
  width: 100%;
}
.framUpload label div {
  width: 100%;
  border: 2px dashed var(--color-border);
  padding: 1rem;
  text-align: center;
}
.framUpload_checkboxes {
  display: flex;

  gap: 1rem;
}
.framUpload_opacity {
  margin-top: 1rem;
}
.framUpload_opacity div {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

#logoOrnamentopacitiyInput_percent {
  width: 10rem;
  height: 3rem;
}
.framUpload_pattern_checkboxes{
  border: 2px solid var(--color-border);
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.framUpload_pattern_checkboxes div{
  display: flex;
  align-items: center;
  gap: 1rem;
}
.framUpload_checkboxes_topbottom {
  border: 2px solid var(--color-border);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.framUpload_checkboxes_left > div,
.framUpload_checkboxes_right > div {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.uploadFrame_top,
.uploadFrame_center,
.uploadFrame_bottom {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}
.contentAdd_navbar_left,
.contentAdd_navbar_right,
.framUpload_checkboxes_left,
.framUpload_checkboxes_right,
.framUpload_opacity {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 2px solid var(--color-border);
  padding: 1rem;
}
.position_navbar_toggle {
  border: 2px solid var(--color-border);
  padding: 1rem;
}
.position_navbarBox {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contentAdd_navbar_left > div,
.contentAdd_navbar_right > div {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.businesscardDesignEdit_navbar select {
  padding: 0;
  border: none;
}

.companySymbolPositionBox,
.logoPositionBox,
.profilePositionBox,
.infoPositionBox,
.businesscardContentColor_navbarBox,
.qrCodePositionBox,.businesscardContentRadius_navbar_ranges,.businesscardContentBorder_navbar_items {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 2px solid var(--color-border);
  padding: 1rem;
  width: 100%;
}

.position_navbar {
  flex-direction: column;
}

.selectBox {
  width: 100%;
  position: relative;
}
.selectBox::after {
  content: "▼";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-border);
}
.logoImg img {
  width: 16rem;
}

.businesscardBg_navbar > div {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 1rem;
}
.businesscardContentColor_navbar .selectBox {
  max-width: 40rem;
}
.businesscardContentColor_input {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.businesscardContentColor_checkboxes,
.businesscardContentColor_checkboxes > div {
  display: flex;
  align-items: center;

  gap: 1rem;
}
input[type="color"] {
  width: 3rem;
  height: 3rem;
}
.position_navbar_display {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.position_navbarBox {
  display: none;
}
.position_navbarBox_display {
  display: flex;
}

@media (max-width: 1100px) {
  .contentAdd_navbar,
  .position_navbar {
    width: 100%;
    flex-direction: column;
  }
}
@media (max-width: 900px) {
  .businesscardContentColo_checkboxes {
    flex-direction: column;
    align-items: start;
  }

  .profilePositionBox {
    flex-direction: column;
    align-items: start;
  }
}
@media (max-width: 450px) {
  .businesscardContentColor_navbarBox {
    flex-direction: column;
    align-items: start;
  }

  .contentAdd_navbar_right,
  .contentAdd_navbar_left {
    flex-direction: column;
    justify-content: end;
    align-items: start;
  }
}

.download_btn{
  display: flex;
  align-items: center;

}
.download_btn button{
 border-radius: none;
   border: none;
     background-color: var(--color-general);
     color: white;

  padding: 1rem;

}
.download_btn select{
  height: 100%;
  background-color: var(--color-general);
  border: 2px solid var(--color-border);
  color: white;
  border: none;

}
.framUpload_pattern_checkboxes{
  display: flex;
  justify-content: space-between;
}

.position_contentRadius,.contentSize_range{
  display: flex;
  justify-content: space-between;
  padding: 1rem;
     border: 2px solid var(--color-border);
     gap: 1rem;
}
.position_contentRadius div{
  display: flex;
  align-items: center;
  gap: 1rem;
 
}
.position_sideRadius{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
   padding: 1rem;
     border: 2px solid var(--color-border);
}
.position_sideRadius_coumn{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
}
.position_sideRadius_coumn input,.position_contentRadius input{
  width: 2.5rem;
  height: 2.5rem;
}
.yourJobPosition_navbar,.nameSurnameposition_navbar,.personImagePosition_navbar,.infoIconPosition_navbar,.companySymbolPosition_navbar,.companySymbolImagePosition_navabar{
  align-items: center;
display: flex;
gap: 1rem;
}
.yourJobPosition_raius,.nameSurnamePosition_checkboxes,.personImagePosition_radius,.infoIconPosition_radius,.companySymbolPosition_checkboxes,.companySymbolImagePosition_radius{
  display: flex;
  width: 100%;
  justify-content: space-between;
    padding: 1rem;
     border: 2px solid var(--color-border);
     gap: 1rem;
}
.yourJobPosition_raius input,.personImagePosition_radius input,.infoIconPosition_radius input,.companySymbolImagePosition_radius input{
  width: 2.5rem;
  height: 2.5rem;
}
.infoContentPosition_navbar{
  display: flex;
  align-items: center;

  gap: 1rem;
}
.infoContentPosition_checkboxes{
  width: 100%;
    padding: 1rem;
     border: 2px solid var(--color-border);
     display: flex;
     align-items: center;
     justify-content: space-between;
}

/* Business card design */ /* Business card design */ /* Business card design */ /* Business card design */ /* Business card design */ /* Business card design */ /* Business card design */ /* Business card design */ /* Business card design */ /* Business card design */


.businesscard {
  position: sticky;
  top: 0;
 

  width: 60rem;

  height: 30rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #e0e1e3;

  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.businesscard input {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
}
label {
  width: max-content;
}
.businesscard label {
  transition: border 0.3s;
}
.businesscard label.active {

  border: 2px solid red; /* Or your desired active style */
}

.businesscard_left,
.businesscard_right {
  width: 30rem;

  height: 30rem;
  position: relative;

  background-color: white;

}
.businesscard_left {
  overflow: hidden;
  background-color: #f2f2f2;
}
.businesscard_right {
  overflow: hidden;
  background-color: #e0e1e3;
}
.logoOrnament_top {
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
/* .logoOrnament_top img,.logoOrnament_bottom img{
  width: 15rem;
} */
.logoOrnament_topHalfLeft {
  display: none;
  position: absolute;
  top: -50%;
  left: 25%;
  transform: translate(-50%, 50%);
}
.logoOrnament_centerHalfLeft {
  display: none;
  position: absolute;
  top: 0;
  left: 25%;
  transform: translate(-50%, 50%);
}
.logoOrnament_bottomHalfLeft {
  display: none;
  position: absolute;
  bottom: -50%;
  left: 25%;
  transform: translate(-50%, -50%);
}

.logoOrnament_topHalfRight {
  display: none;
  position: absolute;
  top: -50%;
  right: 25%;
  transform: translate(50%, 50%);
}

.logoOrnament_centerHalfRight {
display: none;
  position: absolute;
  top: 0;
  right: 25%;
  transform: translate(50%, 50%);
 
}
/* .logoOrnament_centerHalfRight img {
  width: 15rem;
  display: block;
} */


.logoOrnament_bottomHalfRight {
display: none;
  position: absolute;
  bottom: -50%;
  right: 25%;
  transform: translate(50%, -50%);
}

.logoOrnament_bottom {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  z-index: 1;
}
.logoOrnament_topLeft {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}
.logoOrnament_topCenter {
  display: none;
  position: absolute;
  top: 0;

  left: 50%;
  transform: translate(-50%, -50%);
}
.logoOrnament_topRight {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

.logoOrnament_centerLeft {
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}
.logoOrnament_centerRight {
  display: none;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}
.logoOrnament_centerCenter {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.logoOrnament_bottomLeft {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
}
.logoOrnament_bottomCenter {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}
.logoOrnament_bottomRight {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%);
}
.logoOrnament_display {
  display: flex;
  justify-content: center;
  align-items: center;
 

  

  
}

.logoOrnament_display img {
  height: 15rem;
  object-fit: contain;
  display: block;
 transform: scale(0.8);
  
}

.display_none {
  display: none;
}
.display_block {
  display: block;
}

.nameSurname {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.3rem;
  font-weight: 900;
}

.personJob {
  font-size: 1.3rem;

  text-align: center;
}
.company,
.logoImg,
.person,
.info,
.qrCode {
  position: absolute;

  justify-content: end;
  gap: 1rem;

 

}
.person {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.positionCenter {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.qrCode_img{
  position: absolute;
width: 10rem;
height: 10rem;
display: flex;
justify-content: center;
align-items: center;
background-color: white;

 
}
.qrCode_img img{
   width: 9rem;
   display: block;
}
.top-left,
.top-right,
.bottom-left,
.bottom-right {
  align-items: center;
}
.infoPositionAlignStart {
  align-items: start;
}
.infoPositionAlignEnd {
  align-items: end;
}

.top-left {
  top: 1rem;
  left: 1rem;
  transform: translate(0%, 0%);
}
.center-left {
  top: 50%;
  left: 1rem;
  transform: translate(0%, -50%);
}
.center-right {
  top: 50%;
  right: 1rem;
  transform: translate(0%, -50%);
}
.center-top {
  top: 1rem;
  left: 50%;
  transform: translate(-50%, 0%);
}
.center-bottom {
  bottom: 1rem;
  left: 50%;
  transform: translate(-50%, 0%);
}
.top-right {
  top: 1rem;
  right: 1rem;
  transform: translate(0%, 0%);
}
.bottom-left {
  bottom: 1rem;
  left: 1rem;
  transform: translate(0%, 0%);
}
.bottom-right {
  bottom: 1rem;
  right: 1rem;
  transform: translate(0%, 0%);
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 1rem;
}
.info_item {
  width: 100%;
  display: flex;
  align-items: center;

  gap: 1rem;
}
.info_icon {
  width: 3.6rem;
  height: 3.6rem;
  background-color: black;

  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.info_item_tittle {
  font-size: 1.3rem;
}
.personImg {
  display: flex;
  justify-content: center;
}
.personImg img {
  width: 6rem;
  height: 6rem;
}
.company {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.companyImg {
  padding: 0;
  width: 5rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  padding: 1rem;

}
.companyImg img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  vertical-align: middle;
}
.company {
  font-size: 1.3rem;
}

@media (max-width: 600px) {
  .contentAdd_navbar_left,.position_contentRadius,.businesscardInfoColor_navbar_items,.nameSurnamePosition_checkboxes{
    flex-direction: column;
  align-items: start;
  }
  .businesscardInfoColor_navbar  div{
    align-items: start;
  }

}
@media (max-width: 400px) {
  .yourJobPosition_navbar,.nameSurname_navbar{
    flex-direction: column;
  }



}