.center {
  justify-content: start;
}

.businesscardEdit_navbar {
  width: 60rem;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.businesscardToggleMenu {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--color-border);
  padding: 0.5rem;
}

.businesscardToggleMenu a {
  width: 100%;
  padding: 0.5rem;
  border: 2px solid var(--color-general);
  text-align: center;
  color: #183252;
}


.activeElement {


  border: 2px solid var(--color-general);
  background-color: #FFD43B;
  color: #183252;



}


.businesscardGeneralEdit {
  width: 100%;
  max-width: 60rem;


  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.businesscardGeneralEdit_column {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background-color: white;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.businesscardGeneralEdit_column i {
  font-size: 2.5rem;
}

.businesscardGeneralEdit_column input {
  width: 5rem;
  height: 5rem;
  padding: 0;
}

.businesscardGeneralEdit_column label {
  border: 2px solid black;
  padding: 1rem;

}

.businesscardGeneralEdit_column input[type="radio"] {
  display: none;
}

.businesscardGeneralEdit_column input[type="radio"]:checked+label {
  background-color: #FFD43B;
}

.filetype {
  display: flex;
  align-items: center;
  gap: 1rem;

}

.filetype,
.write {
  padding: 0.5rem;
}

.toggleForm {
  position: absolute;
  overflow: hidden;


  height: 0;
  width: 0;
}

.toggle {

  width: 100%;
  max-width: 60rem;


  display: flex;
  flex-direction: column;
  gap: 1rem;




}

.toggle input,
.toggle select,
.toggle button {
  height: 4rem;

}

.toggle select {
  width: 15rem;
}




.toggle button {
  width: 6rem;

}

.infoToggle,
.personToggle,
.logoImgToggle,
.companyToggle,
.qrCodeToggle,
.ornamentToggle,
.ornamentAllEditToggle,
.bgColorToggle,
/* .ornamentEditToggle, */
.writeInputsToggle,
.downloadToggle,
.uploadToggle,
.backgroundColorToggle,

.fileTypeToggle {
  display: none;
}


.toggle_active {
  display: flex;

}


.toggle_section {


  display: flex;
  width: 100%;
  gap: 2rem;
  background-color: white;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  padding: 1rem;
  align-items: center;

  justify-content: space-between;





}
.infoItemColorInput_section{
  flex-direction: column;

}
.infoItemColorInput_section >div{
  width: 100%;
}
button{
  padding: 1rem;
}

.personColorValueToggle,.infoColorValueToggle,.bgColorValueToggle{
  display: none;
}

.personColorValueToggle button{
  padding: 1rem;
}

.writeInputsToggle .toggle_section {
  flex-direction: column;
}


.toggle_section p{
  width: 100%;
 display: flex;
 justify-content: center;
}
.businesscardContentNavbar_item_display {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.businesscardContentNavbar_item_display>div,
.businesscardContentNavbar_item_order {

  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem;
  border: 1px solid var(--color-border);
  width: 100%;
}

.writeInputsToggle .toggle_section >div {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.toggle select {
  width: 100%;
}
.siceColorInput{
  display: flex;
  flex-direction: column;
  gap: 1rem;

}
 input[type="color"]{
  width: 100%;
  padding: 0;
}
.contentFontRadioSection{
  flex-direction:  row !important;
  flex-wrap: wrap;
}
.fontListSection{
  height: 20rem;
  overflow: scroll;
 align-items: start;
}
.circle {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid #183153;
  border-radius: 50%;

}

.circleActive {
  background-color: #FFD43B;
  border-radius: 50%;
}

.toggle_top {
  flex-direction: column;
}

.toggle_section_item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.toggle_topInputIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background-color: black;
  color: white;

}

.toggle_topInputIcon i {
  font-size: 3rem;
}

.toggle_topInputIcon_addIcon {
  display: none;
}

.fontSelect,
.fontSize,
.colors,
.iconBoxRadius,
.logoSize,
.qrCodeRadius,
.personImgRadius,
.personImgSizeRadius,
.personImgSize,
.personNameSize,
.personYourJobSize {

  display: flex;

  flex-direction: column;
  gap: 1rem;
}

/* .download{
  display: flex;
  justify-content: space-between;
  gap: 1rem;

} */
.download form,
.download button {
  width: 100%;
}



input[type="range"] {
  width: 15rem;
  margin: 0;
  padding: 0;

}

input[type="radio"] {
  width: 3rem;
  height: 3rem;
}

.infoPositionAlignStart {
  align-items: start;
}

.infoPositionAlignEnd {
  align-items: end;
}

.businesscardContentNavbar_item_positions {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  /* position: absolute;
  top: 0; */
  z-index: 1;

}

.logoOrnamentAddLink {
  position: static;
  z-index: 9;
}

.businesscardContentNavbar_item_position_left,
.businesscardContentNavbar_item_position_right {

  width: 100%;
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}

.businesscardContentNavbar_item_position_center {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--color-border);
}

.personContentRemove,
.personContentColor,
.infoContentColor,
.iconContentRemove {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.personContentRemove label,
.personContentColor label,
.infoContentColor label,
.iconContentRemove label {
  display: flex;
  align-items: center;
  font-weight: 700;

  gap: 1rem;
}

.personContentRemove input,
.iconContentRemove input {
  width: 3rem;
  height: 3rem;
}

.personPhotoUpload,
.logoPhotoUpload,
.companyPhotoUpload,
.framePhotoUpload {
  padding: 1rem;
  width: 100%;

  border: 5px dashed #DFE0E2;
  background-color: #F2F2F2;
  border-radius: 1rem;
  align-items: center;
  display: flex;
  font-weight: 900;
  display: flex;
  justify-content: center;
}

/* .personToggle .toggle_top{
  flex-direction: column;
} */

.centerBtn,
.rotateBtn {
  display: flex;
  align-items: center;
  gap: 1rem;

}

.qrCodeSizeAndQrcodeBoxCheckbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;

}

.qrcodeBoxVisibility,
.qrcodeBoxRotate {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 1rem;
}

.logoBgSizeInputsLabel {
  display: flex;

  align-items: center;
  gap: 1rem;
}

.logoBgSizeInputsLabel input {

  padding: 0;
  text-align: center;
}

.logoBgSizeArrws {
  width: 100%;
  display: flex;
  align-items: center;


  gap: 1rem;
  font-size: 2rem;
}

.logoBgSizeArrws button {
  width: 100%;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;


}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* .toggle_section_header{
  display: none;
} */
.toggle_section_header h4 {
  width: 100%;
  display: flex;
  justify-content: center;
}

.symbolFontSizeValueInputs,
.personFontSizeValueInputs,
.infoTitlesFontSizeValueInputs {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.symbolFontSizeValueInputs input[type="number"],
.personFontSizeValueInputs input[type="number"],
.infoTitlesFontSizeValueInputs input[type="number"] {
  width: 5rem;
}

.ornamentEditToggleUploadInputs,
.ornamentEditToggleOpacityInputs,
.ornamentEditToggleRotateInputs,
.ornamentEditToggleSizeInputs {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 1rem;



}

.ornamentEditToggleOpacityInputs input,
.ornamentEditToggleRotateInputs input,
.ornamentEditToggleSizeInputs input {
  width: 100%;
}

.ornamentEditToggleUploadInputs_left,
.ornamentEditToggleUploadInputs_right,
.ornamentEditToggleOpacityInputs_left,
.ornamentEditToggleOpacityInputs_right,
.ornamentEditToggleRotateInputs_left,
.ornamentEditToggleRotateInputs_right,
.ornamentEditToggleSizeInputs_left,
.ornamentEditToggleSizeInputs_right{

  width: 100%;
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  font-size: 2rem;
}

.ornamentEditToggleRotateInputs_center,
.ornamentEditToggleOpacityInputs_center,
.ornamentEditToggleSizeInputs_center,
.ornamentEditToggleUploadInputs_center{
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border: 1px solid var(--color-border);
  padding: 1rem;
}


.reset {
  width: 100%;
  background-color: #FFD43B;
  padding: 1rem;
  border-radius: 1rem;

  text-align: center;

}


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


  gap: 1rem;
}
.infosToggle .toggle_section{
  flex-direction: column;
  align-items: start;
  gap: 1rem;
}
.infosToggle .toggle_section p{
 justify-content: start;
}
.infosToggle_heder{
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.writeInputsToggle .info_section{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contentInfo_section{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contentInfo_section div{
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 1rem;
}


.infoItemColorInput_section{
  display: none;
}
input[type="range"] {
  width: 100%;
}
label {
  display: flex;
  align-items: center;
  gap: 1rem;

  padding: 0.3rem;
}
.notRadioLabel  {
  display: flex;
  align-items: center;
  gap: 1rem;

padding: 0.5rem;
    border: 2px solid var(--color-general);
    text-align: center;
    color: #183252;

}

.notRadioLabel input{
  display: none;
}
.notRadioLabel:has(input[type="radio"]:checked) {
  background-color: #FFD43B;;

}


.colorPickerPalette,.colorPickerHue{

  position: relative;
     cursor: crosshair;
}
.colorBoxPointer{
 position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 2px #000;
    transform: translate(-5px, -5px);
    pointer-events: none;
    top: 0;
    left: 250px; /* Varsayılan sağ üst köşe */
}
.colorHueSlider{

    position: absolute;
    left: -2px;
    right: -2px;
    height: 4px;
    border: 2px solid #fff;
    box-shadow: 0 0 2px #000;
    transform: translateY(-4px);
    pointer-events: none;
    top: 0;
}


canvas {
  width: 100%;
    border: 1px solid #1a1a1a;
    display: block;
}


@media screen and (max-width: 650px) {
.businesscardToggleMenu {
  font-size: 1rem;
  gap: 0.5rem;
   display: grid;
 grid-template-columns: auto auto auto;
}

}

@media screen and (max-width: 450px) {
.businesscardToggleMenu {
 display: grid;
 grid-template-columns: auto auto ;



}
}

@media screen and (max-width: 350px) {
.businesscardToggleMenu {
 display: grid;
 grid-template-columns: auto  ;



}
}