body {
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    width: 100vw;
    transition: .3s ease;
    transition-property: position;
    user-select: none;
}
img {
    pointer-events: none;
}

.topContent {
    display: grid;
    place-items: center;
    width: 100%;
    grid-template-columns: 70% 30%;
    position: relative;
    background-color: white;
    transition: 0.7s ease .5s;
    overflow-x: hidden;
}

.logo {
    width: 120px;
    margin: 10px 0px 5px 0px;
    transition: .7s ease;
    transition-delay: .5s;
}

.menu1 {
    width: 40px;
    height: 4px;
    background-color: #FBE2EC;
    margin: 6px;
    border-radius: 3px;
    transition: .7s ease;

}

.closemenu {
    position: absolute;
    top: 45%;
    left: 10%;
    transform: rotate(45deg);

    height: 30px;
}

.m2,
.m1 {
    width: 40px;
    height: 4px;
    background-color: #FBE2EC;
    margin: 6px;
    border-radius: 3px;
    transition: .4s ease;
}

.m1 {
    transform: rotate(90deg) translate(-100px);
    position: absolute;
}

.m2 {
    transform: translate(-100px);

}

.dates,.Times{
    display: grid;
    place-items: center;
    width: 100%;
    padding-top: 40px;
}
.Times{
    background-color: #e2fbe767;
    padding-bottom: 40px;
}

.dates{
    background-color: #fbe2ec67;
    padding-bottom: 40px;
    min-height: 400px;
}

.datain {
    display: grid;
    place-items: center;
    width: 100%;
    /* border: 1px solid rgb(173, 171, 171); */
    width: 250px;
    margin-bottom: 20px;
    border-radius: 10px;
    animation: datain 0.5s ease forwards;
    background-color: white;
    box-shadow: rgb(228, 228, 228) 2px 2px 5px;
}


@keyframes datain {
    from{transform: translate(-100vw);}
    to {transform: translate(0vw);}
    
}
@keyframes keyin {
    from{opacity: 0;}
    to {opacity: 1;}
    
}
@keyframes dataout {
    
    from {transform: translate(0vw);}
    to{transform: translate(-100vw);}
}

.timesPlace{
margin: 20px;
}

#impdataAdd,#timesAdd{
    transition: .5s ease;
    margin-bottom: 20px;
}
#impdataRemove , #timesRemove{
display: none;
}
.datesPlace input:nth-child(1),.timesPlace input  {
    margin: 10px 0px 10px 0px;
    width: 170px;
    outline: none;
    
}

.opysData{
    width: 200px;
    outline: none;
    margin: 10px 0px 10px 0px;
}

.intervalTime{
    display: none;
    place-items: center;
    border: 1px solid rgb(173, 171, 171);
    width: 200px;
    height: 100px;
    animation: datain 0.5s  ease forwards ;
}



 .days{
     border-top: 1px solid black;
    display: grid;
    place-items: center;
    width: 100%;
    /* margin-top: 20px; */
    background-color: #fef4ff49;
    padding-bottom: 10px;
    transition: .3s ease;
    overflow-y: hidden;
   
}
.dayTo{
    display: grid;
    place-items: center;
    width: 100%;
    /* margin-top: 20px; */
    background-color: #fef4ff49;
    padding-bottom: 10px;
    transition: .3s ease;
    background-color: transparent; 
    
}

.days h2{
    text-align: center;
}
.day{
    width: 200px;
    background-color: rgba(238, 238, 238, 0.377);
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    margin-bottom: 15px;
    transition: .3s ease;
    color: rgb(170, 170, 170);

}

.addDay{
    background-color: rgb(163, 255, 186);
   transform: scale(1.2);
   box-shadow:  beige 2px 2px 3px;
   color: black;
}

.addSome{
    /* background-color: rgb(163, 255, 186); */
    background-color: transparent;
    color:rgb(63, 179, 92);
    border: rgb(63, 179, 92) solid 1px;
    padding: 10px;
    font-size: 15px;
    outline: none;
    border-radius: 10px;
    box-shadow: rgb(238, 238, 238) 2px 2px 5px;
    animation: keyin 0.7s ease forwards;

}
.addSome1{
    /* background-color: rgb(163, 255, 186); */
    background-color: transparent;
    color:rgb(66, 21, 56);
    border: rgb(66, 21, 56) solid 1px;
    /* border: rgb(75, 216, 110) solid 1px; */
    padding: 10px;
    font-size: 15px;
    outline: none;
    border-radius: 10px;
    box-shadow: rgb(238, 238, 238) 2px 2px 5px;
    animation: keyin 0.7s ease forwards;

}


.delSome{
    background-color: transparent;
    border: rgb(201, 85, 85) solid 1px;
    padding: 10px;
    font-size: 12px;
    outline: none;
    border-radius: 10px;
    box-shadow: rgb(238, 238, 238) 2px 2px 5px;
    color: rgb(201, 85, 85);
    animation: keyin 0.8s  ease forwards;
}

.allphr,.phrIn{
    display: grid;
    place-items: center;
    width: 100%;
    position: relative;
    overflow:hidden;  
}
.allphr{
    margin-top: 20px;
}

.handsPhr{
    width: 300px;
    transform: translateY(0px);
   
}

.rozdl{
    width: 80%;
    text-align: center;
}
.roz1{
    position: absolute;
    transform: translate(-35px,-83px) rotate(-2deg);
    font-size: 15px;
}
.roz2{
    position: absolute;
    transform: translate(100px,-85px) rotate(10deg);
    font-size: 12px;
}
.roz3{
    position: absolute;
    transform: translate(35px,-35px) rotate(-4deg);
    font-size: 10px;
}
.roz4{
    position: absolute;
    transform: translate(-80px,-25px) rotate(-11deg);
    font-size: 10px;
}

.sideMenu{
    display: grid;
    position: fixed;
    top: 100px;
    left: -110%;
    height: calc(100% - 100px);
    width: 100%;
    background-color: #FBE2EC;
    transition: .5s ease 0.3s;
    z-index: 99;
    overflow-y: scroll;
    
}
.sideBody{
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    position: relative;

}

.noScroll{
    overflow: hidden;
}

.cenAli{
    display: grid;
    place-items: center;
    width: 100%;
}

.fullLang{
margin: 10px 0px 10px 0px;
text-align: center;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 10px 0px 20px 0px;
}

.lang{
    width: 250px;
    height: 50px;
    background-color:  rgba(238, 238, 238, 0.377);
    display: grid;
    place-items: center;
    border-radius: 20px;
    margin: 5px 0px 5px 0px;
    transform: scale(0.7);
    transition: .3s ease;
    color: rgb(170, 170, 170);
    font-size: 20px;
    user-select: none;
}

.langBor{
    box-sizing: border-box;
    width: 250px;
    height: 50px;
    position: absolute;
    border: 2px solid green;
    border-radius: 20px;
    transform:  translateY(-60px);
    background: none;
    transition: .3s ease ;
    box-shadow: rgb(238, 238, 238) 2px 2px 5px;
}

.allLang{
    position: relative;
}

.langSelect{
    background-color: rgb(217, 255, 223);
    transform: scale(1);
    color: black;
}
.krip{
    margin: 10px 0px 10px 0px;
   overflow: hidden;
    padding: 20px 0px ;
}

.kripTop{
    display: grid;
    width: 300px;
    height: 50px;
    place-items: center;
    grid-template-columns:50% 50%;
    background-color:  rgba(238, 238, 238, 0.377);
    color: rgb(170, 170, 170);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: rgb(238, 238, 238) 2px 2px 5px;
    transition: .3s ease;
}

.skob,.kill{
    display: grid;
    place-items: center;
    font-size: 18px;
    width: 100%;
    height: 100%;
    transition: .3s ease;
    
}

.actKrip{
    background-color: #fad6e4;
    box-sizing: border-box;
 
    color: white;
    transition: .3s ease;
}

.kripAll{
    position: relative;
    display: grid;
    place-items: center;
    margin:40px 0px;
    height: 200px;
    width: 150px;
    /* border: rgb(201, 85, 85) solid 1px; */
    border-radius: 0px 15px 15px 0px;
    box-shadow: rgb(172, 172, 172) 2px 2px 5px;
    transition: .3s ease;
    background-color: rgb(253, 239, 246);
    transform: rotate(-5deg) translate(-10px);
}
.kripAll p{
    width: 80%;
    text-align: left;
    transform: translate(10px);
    line-height: 1.3;
    font-size: 14px;
}

.rings{
    position: absolute;
    height: 130px;
    transform: translate(-77px);
    transition: .3s ease ;
    opacity: 0;
}

.kripAll p span{
    color: green;
    animation: doneOn 1s forwards ; 
}

@keyframes doneOn{
    from{opacity: 0;}
    to{opacity: 1;}
}

.dataOr{
    width: 300px;
    display: grid;
    place-items: center;
    grid-template-columns: 50% 50%;
    height: 50px;
    margin: 20px 0px;
    background-color: rgb(255, 224, 224);
    border-radius: 20px;
    box-shadow: rgb(238, 238, 238) 2px 2px 5px;
    background-color:  rgba(238, 238, 238, 0.377);
    color: rgb(170, 170, 170);
    overflow: hidden;
 
}

.datovanyi,.nedatovanyi{
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
}

.actDataStor{
    background-color: #fad6e4;
  
    color: white;
    transition: .3s ease;
}

.adapt{
    width: 320px;
    text-align: center;
}

.hi{
    color:#e981a9 ;
      font-size: 17px;
    
}

#effTable{
    border-collapse: collapse;
    width: 90%;
    margin: 20px 0px;
    font-size: 15px;
}
td{
    border: 1px solid black;
    padding: 10px;
}
th{
    font-size: 12px;
    text-align: center;
}
tr:nth-child(even){background-color: #f2f2f2}
#notesT{
background-color: rgb(252, 236, 236);
}

.text1Img{
    display: grid;
    place-items: center;
    width: 300px;
    height: 600px;
    overflow: hidden;
    /* border: 1px solid black; */
    margin: 20px 0px 20px 0px;
    position: relative;
}

.text1Img img{
    width: 600px;
    transform: translate(-5px,-250px);
}

.text2Img{
    display: grid;
    place-items: center;
    width: 280px;
    height: 830px;
    overflow: hidden;
    /* border: 1px solid black; */
    margin: 20px 0px 20px 0px;
    position: relative;
}
.text2Img img{
    width: 600px;
    transform: translate(-305px,-10px);
}

#text1{
    position: absolute;
    top: 10px;
    left: 30px;
    width: 250px;
    text-align: center;
    font-size: 20px;
    border: none;
    outline: none;
}

#text2{
    position: absolute;
    top: 480px;
    width: 200px;
    text-align: center;
    font-size: 15px;
    border: none;
    left: 45px;
    outline: none;
    background-color: transparent;
    transform:translateX(17px);
}

.testAddApp{
    display: grid;
    place-items: center;
    position: absolute;
    top: 100px;
    transform: translateX(90px);
    color: white;
    background-color: rgb(106, 233, 106);
    padding: 0px;
    border-radius: 10px;
    box-shadow: rgb(201, 201, 201) 2px 2px 5px;
    width: 100px;
    height: 30px;
    font-size: 13px;
    transition: .5s ease;
    animation: keyin .3s ease forwards;
    
}

.testDelApp{
    display: grid;
    place-items: center;
    position: absolute;
    top: 150px;
    transform: translateX(90px);
    color: white;
    background-color: rgb(255, 131, 131);
    padding: 0px;
    border-radius: 10px;
    box-shadow: rgb(201, 201, 201) 2px 2px 5px;
   
    font-size: 11px;
    text-align: center;
    transition: .5s ease;
    display: none;
    animation: keyin .5s ease forwards;
   
    width: 100px;
    height: 30px;
}

.testApp{
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 45px;
    left: 0px;
    height: 420px;
    width: 57px;
    transition: .3s ease;
    opacity: 0;
}

.appTimeTest{
  
    font-size: 9px;
   width: 53px;
    height: 15px;
    outline: none;
    
    
}

.timein{
    display: grid;
    margin: 0px;
    padding: 0px;
    width: 53px;
    height: 20px;
    margin: 5.5px 0px ;
    animation: datain 0.2s ease forwards;
     /*background-color: green;*/
}

#text5{
    position: absolute;
    top: 0px;
    left: 40px;
    width: 200px;
    text-align: center;
    font-size: 15px;
    border: none;
    outline: none;
    background: none;
}
#text4{
    position: absolute;
    top: 180px;
    left: 36px;
    width: 200px;
    text-align: center;
    font-size: 15px;
    border: none;
    outline: none;
    background: none;
}

#text3{
    position: absolute;
    top: 505px;
    left: 36px;
    width: 200px;
    text-align: center;
    font-size: 15px;
    border: none;
    outline: none;
    background: none;
}
.moreDay{
    display: none;
    animation: datain 0.5s ease forwards;
}
#isit{
    padding: 0px;
    margin: 0px;
}
#moreClick{
    margin: 10px 0px;
    padding: 10px;
    background-color: rgb(255, 236, 236);
    font-size: 10px;
    border: none;
    border-radius: 5px;
}

h2{
   font-size: 20px;
   font-style: oblique;
   margin: 20px 0px;

}

.moreDiv{
    display: grid;
    place-items: center;
    width: 80%;
    grid-template-columns: 60% 40%;
    border: .5px solid rgb(150, 150, 150);
    border-radius: 20px;
}
.calenImg{
    width: 100%;
    margin-bottom: 30px;
    max-width: 500px;
    box-shadow: rgb(201, 201, 201) 2px 2px 5px;
}
.notesFull{
    background-color: #F5D3D4;
}
.notesFull img{
    width: 100%;
    max-width: 500px;
}
#notes{
    width: 250px;
    margin: 0px 0px 20px 0px;
    text-align: center;
    border-radius: 10px;
    border: none;
    outline: none;
    height: 40px;
    box-shadow: rgb(150, 150, 150) 2px 2px 5px;
    transition: .3s ease;
}
.first{
    background-color: #FBE2EC;
    
    box-shadow: rgb(180, 180, 180) 5px 5px 10px;
  
}
.first img{
    width: 100%;
    max-width: 500px;
}
.sumka{
    width: 100%;
    max-width: 500px;
}

.vidgukFull{
    position: relative;
    width: 90vw;
    background-color: white;
margin-bottom: 50px;
overflow: hidden;
border-radius: 20px;
box-shadow: rgb(180, 180, 180) 5px 5px 10px;

}
.vidSha{
    position: absolute;
    height: 100%;
    width: 30px;
    background-color: transparent;
    right: 0px;
    box-shadow: inset rgb(255, 255, 255) -15px 0px 15px;
}
.vidImg{
    width: 90vw;
    height: 300px;
    overflow-x: scroll;
}
.vidImg img{
    height: 300px;
}
.pro{
    padding: 15px;
    max-width: 500px;
}
.pro p {
    text-align: justify;
    font-size: 12px;
}
a{
    color: rgb(245, 160, 160);
}


.novaIn{
    display: grid;
    place-items: center;
    width: 100%;
    height: 0px;
    transition: .3s ease;
    overflow: hidden;
    padding-bottom: 30px;
}

.np{
    outline: none;
    width: 300px;
    margin: 10px 0px;
    text-align: center;
    height: 50px;
    border: none;
    border-radius: 20px;
    font-size: 15px;
    padding: 20px;
    max-width: 300px;
    min-width: 249px;
    background-color: #ffffff;
    transform: translate(-100vw);
    transition: .3s ease;
    
}
.novaFull{
    background-color: white;
    transition: .3s ease;
}
.np:focus{
   border: 1px solid rgb(231, 147, 147);
}

#novaLogo{
    width: 250px;
    margin: 40px 0px;
    background-color: #ffeef4;
    padding: 5px 20px 0px 20px;
    border-radius: 20px;
    transition: .3s ease;
}

.send{
    border: none;
    width: 150px;
    height: 40px;
    border-radius: 20px;
    margin-top: 15px;
    margin-bottom: 30px;
    background-color: rgb(99, 212, 99);
    color: white;
}
.fullAlert{
    position: fixed;
    top: -300px;
    left:0px;
    width: 100vw;
    
    display: grid;
    place-items: center;
    z-index: 99;
    
    transition: .5s ease;
}
.alertBox{
    position: relative;
    width: 200px;
    height: 100px;
    background-color: white;
    box-shadow: rgb(180, 180, 180) 5px 5px 10px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    padding: 20px;
    text-align: center;
}

.Vart{
    border-top: 1px solid black;
}

.timerCount{
    display: grid;
    place-items: center;
    grid-template-columns: 25% 25% 25% 25%;
    width: 200px;
    margin: 0px 0px 20px 0px;
    height: 70px;
  
}
.vartCount h2{
    margin: 20px 0px 10px 0px;
    border: 5px dotted rgb(255, 242, 242);
    padding: 10px 20px;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    
}
.dateFrag{
    display: grid;
    position: relative;
    place-items: center;
    width: 40px;
    height: 70px;


}
.dateFrag span{
    position: absolute;
    bottom: 0px;
}
.vartCount{
    display: none;
    width: 80%;
    background-color: rgb(255, 238, 238);
    border-radius: 20px;
    margin: 20px 0px;
    box-shadow: rgb(211, 211, 211) 5px 5px 5px;
}
#oldprice{
    text-decoration-line: line-through;
-webkit-text-decoration-line: line-through;
text-decoration-color: rgb(255, 177, 177);
-webkit-text-decoration-color: rgb(255, 177, 177);
  text-decoration: line-through rgb(255, 177, 177);
  color: rgb(255, 177, 177);
}
#priceNew{
    font-size: 20px;
}


#dayCount,#hourCount,#minCount,#secCount{
    font-size: 15px;
    padding: 0px;
}

#saleBord{
    font-size: 25px;
    color: rgb(247, 181, 181);
}

.vartCount p{
    margin: 0px;
}

#askPhrase{
    overflow: hidden;
    transition: .3s ease;
    height: 50px;
}

.mainOpys p span{
    color: green;
}
.mainOpys{
    padding: 20px 0px;
}
#myLogo{
    margin: 20px;
    width: 150px;
    
}
.addition p{
    text-align: justify;
    padding: 20px;
}

.send{
    transition: .3s ease;
}