.popupf{
            display: none;
            background-color: #74E67880;
             box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
            position: relative;
            border-radius: 15px;
            flex-direction: column;
            max-width: 60%;
            padding: 20px 20px;
            box-sizing: border-box;
        }
        .brackePopupFunctionInIndex{
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            color: #000;
            border: none;
            display: none;
            cursor: pointer;
        }
.popupf p{
    text-align: left;
}
 .placeholder {

            width: 40%;
            min-height: 390px;
            height: 100%;

            border: 2px solid black;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            margin: 30px auto;
            font-size: 18px;}
  #placeholderwad{
    background-image: url("material/wad.png");
    background-size: cover;
    background-repeat: no-repeat;

  }
  #cardcircklfoto{
     object-fit: cover;
     width: 150px;
     height: 150px;
     border-radius: 50%;
  }
  #bah{ box-shadow: 3px 3px 5px rgba(0,0,0,0.3);

  }
  #placeholderap{
    background-image: url("material/ap.png");
    background-size: cover;
    background-repeat: no-repeat;

  }
  .hightword{
    color: #000;
            position: absolute;
            justify-self: center;
            align-self: center;
            display: block;
            text-shadow:
        -1px -1px 0 #d2d2d2,
         1px -1px 0 #d2d2d2,
        -1px  1px 0 #d2d2d2,
         1px  1px 0 #d2d2d2;
        }
        .chousection{
            display: flex;
            justify-content: center;
            gap: 6px;
        }
        #cowertext{
            position: absolute;
            font-size: 30px;
            text-shadow:
        -1px -1px 0 #d2d2d2,
         1px -1px 0 #d2d2d2,
        -1px  1px 0 #d2d2d2,
         1px  1px 0 #d2d2d2;
        }

.chousedlan{
    font-weight: bold !important;
    color: black !important;
    text-decoration: none !important;
}
.lanchangebutton{
text-decoration: none;
  color: inherit;
}
 body {max-width: 100%;
    min-width: 100%;
    box-sizing: border-box;
            margin: 0 ;
            font-family: Arial, sans-serif !important;
            color: #222 !important;
            background: #F5E6AA !important;
        }
        header, footer {
            display: flex !important;
            padding: 20px !important;
            align-items: center !important;
            justify-content: center !important;
            justify-content: space-between !important;

        }
        header{
            background-image: linear-gradient(to bottom,#74E678,#F5E6AA);
        }


        nav>a {
            margin: 0 15px !important;
            text-decoration: none !important;
            color: #333 !important;
            font-weight: bold !important;
        }

        section {
            padding: 60px 20px;
            text-align: center;
        }


        footer {
            font-size: 14px;
            color: #555;
        }
        .puppiesAndLittersPage{
            padding: 20px 50px;
        }
        .first{
            padding: 20px 300px;
        }
        .first>p{
            padding: 0 150px;
        }
        .first>h1{
            font-size: 50px;
        }
        p{
            font-size: larger;
        }

        .wad{
            display: flex;
            justify-content: center;
        }

        .ap{
            display: flex;
            justify-content: center;
        }
        .ap>h1{
            color: #000;
 position: absolute;
            justify-self: center;
            align-self: center;
            text-shadow:
        -1px -1px 0 #d2d2d2,
         1px -1px 0 #d2d2d2,
        -1px  1px 0 #d2d2d2,
         1px  1px 0 #d2d2d2;
        }
        .iconslan{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .iconslan>div{
            display: flex;
            padding: 20px;
            margin: 0 15px;
            align-items: center;
            justify-content: center;
            justify-content: space-between;
        }
.aboutustext{
    display: flex;
    font-size:40px;

}
.flexconteinersAboutUs{
    display: flex;
    flex-direction: row;

}
.columofflexconteinersAboutUs{
    display: flex;
    flex-direction: column;
}
.flexconteinersAboutUs>div{

    height: 400px;
    width: 400px;
    background-color:#74E678;

     margin: 40px;
     display: flex;
     flex-direction: column;
    justify-content: space-around;
    padding-left: 25px;
    padding-right: 25px;
    }
.second{
    display: flex;
    justify-content: center;
     padding: 30px 300px;

}
.second>div{
    margin: 10px;
    display: flex;
    flex-direction: column;
    max-width: 250px;
    text-align: left;}
.img{
    max-width: 400px;
    max-height: 225px;
    background-color: #ccc;
    min-width: 399px;
    min-height: 224px;
}









.catalog{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:60px;
padding:10px;
max-width:1400px;
margin:auto;
}

.card{
background:#74E678;
padding-top:25px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 5px;
border-radius:30px;

}
.cardlife{
    background:#74E678;
padding-top:10px;
padding-left: 30px;
padding-right: 25px;
padding-bottom: 10px;
border-radius:30px;
display: flex;
flex-direction: column;
}

.card img{
width:100%;
height:260px;
object-fit:cover;
border-radius:20px;
margin-bottom:20px;
}

.card h2{
margin-bottom:10px;
font-size: 30px;
font-weight: 1000;
text-align: left;
}
.card>p{
    text-align: left;
}
.infoCardPopup1,.infoCardPopup2,.infoCardPopup3,.infoCardPopup4,.infoCardPopup5,.infoCardPopup6{
    display: flex;
    flex-direction: row;
    gap:10px;
    align-items: center;
    position: relative;

}
.infoCardPopup1 > h3,
.infoCardPopup2 > h3,
.infoCardPopup3 > h3,
.infoCardPopup4 > h3,
.infoCardPopup5 > h3,
.infoCardPopup6 > h3 {
    font-size: 30px !important;
}
.infoCardPopup1,.infoCardPopup2,.infoCardPopup3,.infoCardPopup4,.infoCardPopup5,.infoCardPopup6>img{
    border-radius: 100%;
}
.moreinfopopup1,.moreinfopopup2,.moreinfopopup3,.moreinfopopup4,.moreinfopopup5,.moreinfopopup6{
 display: none;
}
.moreinfopopup1>p,.moreinfopopup2>p,.moreinfopopup3>p,.moreinfopopup4>p,.moreinfopopup5>p,.moreinfopopup6>p{
    text-align: left;
}
#availablePuppies{
    filter: brightness(100%);
     width: 500px;
    height: 600px;
    background-image:url("material/pupppppies.jpg");
     background-size: cover;
      background-position: center;
       background-repeat: no-repeat;
       display: flex;
       justify-content: center;
       align-items: center;
}
#ADMourdogs,#ADMpuppies,#ADMlitters{
    display: none;
}
.ADMsection{
    position: relative;
    z-index: 1;
    padding: 20px 100px;
    flex-direction:column;
    align-items: center;
    max-width: 100%;
    box-sizing: border-box;
}
.litterBoxInArchiv,.littersInLittersFC{
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

}
.openFullLitterInArchiv,.closeFullLitterInArchiv,.litterPopupButtonFC,.litterPopupBrackerButtonFC{
    background: none;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
}
.litterHeaderInArchiv,.litterHeaderInFC{
    background-image: linear-gradient(to bottom,#74E678,#F5E6AA);
min-width: 100%;
max-width: 100%;
    padding: 5px 50px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    box-sizing: border-box;
}
.closeFullLitterInArchiv,.litterPopupBrackerButtonFC{
    display: none;
    transform: rotate(180deg);
}
.puppieBoxsInArchiv,.litterBoxWithPuppiesFC{
    min-width: 100%;
    max-width: 100%;
    padding: 20px 50px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 40px;
    box-sizing: border-box;
    display: none;
}
.littersInPuppiesADM{
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
}
.boxWithPuppiesAngCreate,.boxWithDogsInADM{
   display: flex !important;
    flex-flow: row wrap !important;
    gap: 40px !important; /* ЗАЗОР МЕЖДУ КАРТОЧКАМИ */
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 20px  !important;

}
.litterBoxWithPuppiesInPuppiesFC{
    min-width: 100%;
    padding: 20px 50px;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 30px;
    box-sizing: border-box;
    display: flex !important;
}

.puppieCardInArchiv,.dogVisitCardBox,.puppieInLittersCardBoxFC,.addedPuppieCard{
    display: flex;
    position:  relative !important;
    min-width: 300px;
    max-width: 500px;
    height: 400px;
    box-sizing: border-box;
    flex-shrink: 0 !important;
    flex-direction: row;
    margin: 0 !important;


}
.puppieVisitCardInArchiv,.puppieVisitCard,.dogVisitCard,.puppieVisitCardInLittersFC{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

width: 300px;
height: 400px;
flex-shrink: 0;

}
.puppieVisitCardPhotoInArchiv,.puppieCardPhoto,.visitCardDogPhoto,.puppiePhotoVisitCardInLittersFC{
    width: 300px;
    height: 400px;
    object-fit: cover;
    display: flex;
    filter: brightness(120%);
}
.dogNameVisitCardInArchiv,.dogNameVisitCard,.visitCardDogName,.puppieNameVisitCardInLittersFC{
    position: relative;
    background: linear-gradient(to bottom,#bfbebe 0%, #3a3a3a 60%,#858585 100%);
    -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  z-index: 2;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
    line-height: 0.8;


}
.NameBackground{
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    max-width: 90%;
    position: absolute;
    display:flex ;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.43);
    border-radius: 5px;
    flex-wrap: wrap;
    font-size: xx-large;
    hyphens: auto; /* Добавит черточку-перенос сам (нужен атрибут lang у тега html) */
    overflow-wrap: break-word;
}
.puppiePopupBrackerInArchiv,.puppiePopupBracker,.dogsPopupBrakerInADM,.puppiePopupBrackerInLittersFC{
    position: absolute;
    display: none;
    top: 5px;
    left: 5px;
    background: linear-gradient(to bottom,#bfbebe 0%,#3a3a3a 60%,#858585 100%);
    -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  z-index: 2;

}
.cancelChangesInPuppi,.acceptChangesInPuppi,.cancelChangeDogInfo,.acceptDogInfochange{
    display: none;
}
.puppieFullInfoInArchiv,.puppieCardInfo,.fullInfoDogVisitCard,.puppieFullInfoBoxInLittersFC{
width: 200px;
height: 400px;
overflow-y: auto;
flex-shrink: 0;
box-sizing: border-box;
padding: 10px 10px;
gap: 5px;
display: none;
flex-direction: column;
background-color: #74E678;
}
.femaledogs,.maledogs{
    position: relative;
    display: none;
    flex-direction: column;
    gap: 30px;
     padding: 50px 100px;
}
.dogLayOut{
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    justify-content: flex-start;
    gap: 30px;
}
.dogVisitCardBoxFC{
    display: flex;
    position: relative;
    flex-direction: row;
    min-width: 300px;
    height: 400px;
    max-width: 500px;
    background-color:#74E678 ;
    flex-shrink: 0;
    box-sizing: border-box;
}
.dogVisitCardFC{
    position: relative;
    display: flex;
    background-color:#ffffff1A ;
    box-sizing: border-box;
    z-index: 1;
    flex-shrink: 0;
    width: 300px;
    height: 400px;
    justify-content: center;
    align-items: center;
}
.visitCardDogPhotoFC{
    width: 300px;
    height: 400px;
    filter: brightness(120%);
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}
.closePopupInlifeStyle{
    background: linear-gradient(to bottom,#bfbebe 0%,#3a3a3a 60%,#858585 100%);
    -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: none;
  position: absolute;
  right: 10px;
  top: 25%;
  width: fit-content; /* Теперь блок будет шириной только с сам символ ✕ */
    cursor: pointer;
  transform: translateY(-25%);
}
.visitCardDogNameFC{
    max-width: 100%;
    hyphens: auto; /* Добавит черточку-перенос сам (нужен атрибут lang у тега html) */
    overflow-wrap: break-word;
    box-sizing: border-box;
    font-size:xx-large ;
     z-index: 2;
    background: linear-gradient(to bottom,#bfbebe 0%,#3a3a3a 60%,#858585 100%);
    -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin: 0;
    line-height: 0.8;
}
.dogsPopupBrakerFC{
    z-index: 2;
     position: absolute;
    display: none;
    top: 5px;
    left: 5px;
    background: linear-gradient(to bottom,#bfbebe 0%,#3a3a3a 60%,#858585 100%);
    -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

}
.fullInfoDogVisitCardFC{
    width: 200px;
height: 400px;
flex-shrink: 0;
box-sizing: border-box;
padding: 10px 10px;
gap: 5px;
display: none;
flex-direction: column;
}
.dogNameFC,.puppieNameInlittersFC{
    font-size: 50px;
    max-width: 90%;
    hyphens: auto; /* Добавит черточку-перенос сам (нужен атрибут lang у тега html) */
    overflow-wrap: break-word;
}
.dogSexFC,.puppieStatusInPuppiesFC{
    font-size: 30px;
}
#buttonToFemaleDogInMales{
    color: #000;
    position: absolute;
    top: 20px;
    left: 20px;
}
#buttonToMaleDogInFemales{
    color: #000;
    position: absolute;
    top: 20px;
    right: 20px;
}
.ADMbuttons{

    border:2px solid #F5E6AA ;
    border-radius: 20px 20px 0px 0px;
    height: 50px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
    background-image: radial-gradient(#74E678,#F5E6AA);
    border-bottom: none;
}
.puppies,.litters{
    display: none;
    flex-direction: column;

}
#puppiesbutton{
    align-self: flex-start;
text-decoration: underline;
}
#littersbutton{
    align-self: flex-end;
    text-decoration: underline;
}
.zakrivashka{
    flex: 0 0 500px !important; /* Строго 500px */
    width: 500px !important;
}

#inputformdog,.addNewFormPuppie{
    display: flex;
    width: 500px;
    height: 400px;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
    box-sizing: border-box;

}
.inputforFotoDog,.addPuppieFoto{
    height: 400px;
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;

}
#DogFoto,.addPuppifoto{
    display: none;
    position: absolute;
    z-index: -1;
}
.DogFullInfo,.PuppieFullInfo{
    max-width: 200px;
    width: 200px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;    }
#doginformation,.PuppieTextarea{
    height: 400px;
    width: 200px;
    max-width: 200px !important;
    box-sizing: border-box !important;
}
.DogSexInputs,.addPuppieStatusInputs{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
  width: 200px;
  background-color: #f1f1f1; /* Серый фон всей полоски */
  border-radius: 10px;
  padding: 4px;
  border: 1px solid #ddd;
  box-sizing: border-box;
}
.addPuppieNewStatusInputs{
    box-sizing: border-box;
     display: none;
  width: 200px;
  background-color: #f1f1f1; /* Серый фон всей полоски */
  border-radius: 10px;
  padding: 4px;
  border: 1px solid #ddd;
}
.DogSexInputs input[type="radio"],.addPuppieStatusInputs input[type="radio"] ,.addPuppieNewStatusInputs input[type="radio"]{ /* через пробел находит элемент где угодно в другом элементе хоть в нутри другого элемнета*/
  display: none;
}
.DogSexInputs label,.addPuppieStatusInputs label,.addPuppieNewStatusInputs label{
  flex: 1;
  text-align: center;
  padding: 10px;
  cursor: pointer;
  border-radius: 8px;
  transition: 0.3s;
  font-weight: 500;
  color: #666;
}
.DogSexInputs input[type="radio"]:checked + label,
.addPuppieStatusInputs input[type="radio"]:checked + label,
.addPuppieNewStatusInputs input[type="radio"]:checked + label{
  background-color: #ffffff; /* Белая плашка выбора */
  color: #000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}


.DogFoto,.addPuppifotoLabel{
    box-sizing: border-box;
    flex-shrink: 0;
    height: 400px;
    width: 300px;
    background-color: #999;
    color: #555;
    font-size: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #555;
    cursor: pointer;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#previousLitters{
     width: 500px;
    height: 600px;
    background-image:url("material/contact.png");
     background-size: cover;
      background-position: center;
       background-repeat: no-repeat;
       display: flex;
       justify-content: center;
       align-items: center;
}
.dogfoto{
    width: 300px;
    height: 400px;
    background-image:url("material/contact.png");
     background-size: cover;
      background-position: center;
       background-repeat: no-repeat;
}
.contactussection{
    display:flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.ADMheader{
    position: relative !important;
    z-index: 9999 !important;
}
.conta{
      text-align: left;
}
.conta>h1{
    word-spacing: 8px;
}
.lyfestylesection{
    padding-left: 50px;
    padding-right: 50px;
}
.lyfestylesection>h1{
    text-align: left;
}
.dogsexchousebutton{
    display: flex;
    justify-content: center;
    align-items: center;
}
.dogH1{
    padding-left: 25%;
}
.dogH1>h1{
    text-align: left;
}
.dogssexchouse{
    display: flex;
    flex-direction: column;
}
.femaledogsbutton{
    width: 600px;
    height: 500px;
    background-image: url("material/5992261792572312773.jpg");
    background-size: cover;
      background-position: center;
       background-repeat: no-repeat;
       display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.maledogsbutton{
    filter: brightness(120%);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
     width: 600px;
    height: 500px;
    background-image: url("material/5992261792572312772.jpg") ;
    background-size: cover;
      background-position: center;
       background-repeat: no-repeat;
}
.femaledogsbuttonCowerWord{
    z-index: 10;
    position: absolute;
    text-shadow:
        -1px -1px 0 #d2d2d2,
         1px -1px 0 #d2d2d2,
        -1px  1px 0 #d2d2d2,
         1px  1px 0 #d2d2d2;
  color: black;
}
.splitline{
    width: 1px;
    height: 600px;
    background-color: #222;
}
.flexboxfordogssex{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:40px;
}

.femaledoginfo{
    text-align: left;

}
.maledoginfo{
    text-align: left;
}
.closeback{
    display:flex;
    justify-content:space-between;

}
.accauntwindow{
 position:absolute;
 padding:5px;
 display:none;
 flex-direction:column;
 max-width:250px;
 min-width:200px;
 width:auto;
 height:auto;
 max-height:450px;
 min-height:110px;
 background-color:#74E678;
 border:2px solid black


}
#wrongpas{
    display: none;
    background-color: #999;
    position: absolute;
    text-align: left;
}
#wrongmailorpas{
    display: none;
    position: absolute;
    background-color: #999;
    text-align: left;
}
.logout{
    display: none;
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-align: center;

}
.row{
    display: flex;
    flex-direction: row;
    align-content: center;
    gap: 5px;
}
.singup{
    display:none;
    flex-direction:column;
    align-items:center;
    gap:5px;


}
.login{
    display:none;
    flex-direction:column;
    align-items:center;
    gap:5px;
}
.loginb,#finalloginb,#finlsingupb,#finallogout,#stayinakk{
    background-color:#F5E6AA;
    border-radius:20px;
    border:0px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
font-size:30px;
}
.singupb{
     background-color:#F5E6AA;
    border-radius:20px;
    border:0px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    font-size:30px;
}
.loginupchouse{
    display:none;
    justify-content:center;
    align-items:center;
    gap:5px;
    min-height:100px;

}
.cloesb{
     background-color:#F5E6AA;
     border:3px solid red;
     font-size:41px;
     height:20px;
     width:20px;
     display:flex;
     justify-content:center;
     align-items:center;
     text-align:center;
     color:red;
}
.openeyeiconSu,.openeyeiconRSu,.openeyeiconLi{
    display:none;
}
.passwordRSu,.passwordSu,.passwordLi{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:3px;
}
.backb{
    display: none;
}