/***********************************************/
/****************** 1 -> 400 ******************/
/***************  alasql    alasql   *********
// https://github.com/chicagocomputerclasses/alasql
******************************/

*{
  padding:0px;
  margin:0px;
  box-sizing:border-box;
}
html{
  height: 100%;
}
body {
  background-color: #232323;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top:    env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  min-height: 100svh;
  height: calc(100%+env(safe-area-inset-bottom));
  padding-bottom: constant(safe-area-inset-bottom);
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -mz-user-select: none;
}





.logo {
  z-index: 9;
}
.logo b {
  font: 400 15vh "Comic Neue", cursive;
  letter-spacing: -4px;
  color: #eef;
  text-shadow: 0 -20px 40px, 0 0 2px, 0 0 1em rgb(195, 246, 229),
    0 0 0.5em rgb(195, 246, 229), 0 0 0.1em rgb(195, 246, 229), 0 10px 3px #000;
}


.msghead{
  left: 0px;
  top: 0px;
  position: absolute;
  width: 15vw;
  height: 45px;
}

.notific{
  right: 0px;
  top: 0px;
  position: absolute;
  width: 15vw;
  height: 45px;
}






html,
body {
 
  margin: 0;
  padding: 0;
}

a {
  text-decoration:none;
  display:flex;
  color: #fde068;
  justify-content: center;
  align-items: center;
}
.vertical-nav {
    z-index: 10;
    border: none;
    position: fixed;
    background: none;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 30vw;
    bottom: 13vh;
 
}


.vertical-nav li ul > li {
  list-style: none;
  display: block;
  width: 100%;
  border-top: solid 0.5px transparent;
  text-align: center;
  position: relative;
  flex-grow: 1;
  align-items: stretch;
 
  display: flex;
}




.vertical-nav > li {
   transition: all 2s;
    border-bottom: 0.1px solid #000000;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 5rem;
    list-style: none;
    margin-top: 4.5vh;
    width: 14vh;
    text-align: center;
    position: relative;
    flex-grow: 1;
    max-width: 140px;
    height: 14vh;
    box-shadow: rgb(42 42 42) 0px -5px 10px inset, rgb(236, 236, 236) 0px 5px 10px inset, rgb(0, 0, 0) 0px 27px 25px;
}

:root{
  --x:0deg;
  --myColor1:#000000;
}
.vertical-nav > li a{
  
      content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    width: 108%;
    height: 108%;
    transition: 0.5s;
    transform: rotateZ(-50deg);
    background: conic-gradient(from 0, #00000000 83deg, #31ceb7 46deg, #2cd6d6 200deg, #00000000 200deg, #00000000 278deg, #fffb50 259deg);
   }

@keyframes lightCircle {
  0%{transform: rotateZ(20deg);}
  20%{transform: rotateZ(100deg);}
  40%{transform: rotateZ(175deg);}
  60%{transform: rotateZ(200deg);}
  80%{transform: rotateZ(100deg);}
  100%{transform: rotateZ(-50deg);}
}
 
.vertical-nav li a {
  display: flex;
  align-items: center;
  flex-flow: column;
  justify-content: center;
  transition: all 0.2s ease;
}


.log-out{
  box-shadow: none;
  height: 5vh;
  width: 50vw;
  position: relative;
  bottom: -7.5vh;
  border-radius: 5rem;
  outline-offset: 5px;
  display: flex
;
  justify-content: center;
  align-items: center;
}
























/************************* midia********************


@media only screen and (max-height :700px){

  a ,a icon{
font-size:20px;
  }

.logo-container:before {
  
		width:    13vw;
	
	}

	#page-logo {
    top:      50%;left:50%;
		font: bold 2.5rem 'Arial', sans-serif;
    
	}

.heead{
box-shadow: 0px 0px 10px black;
    background: linear-gradient(0deg, black 22%, #72726d 111%);
    height: 17%;
    

}

}

**/


















/***********************************************/
/******************  400 -> 1200 ******************/
/*********************************************/







.topBar{
  border-radius: 2rem;
    padding: 22px;
    z-index: 99;
    box-shadow: 0px 0px 12px #484848;
    background: #2b2b2b;
    direction: rtl;
    top: 60px;
    width: 100%;
    position: fixed;
    max-height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    overflow:hidden;
}

.bar{
    background: linear-gradient(355deg, #333333, #ebebeb);
    border-radius: 5rem;
    margin: 8px 10px;
    color: #ffffff;
    text-align: center;
    font-size: 9px;
    text-shadow: 0px 0px 4px #d0d0d0;
    padding: 9px 12px;
    box-shadow: 0px -1px 3px #858585, 1px 3px 5px #141414, -2px -2px 8px #767676;
}

.bar2{
    text-align: center;
    text-shadow: 0px 0px 5px #ffffff;
    border: none;
    box-shadow: 2px 2px 12px #848484, -1px -1px 3px #f7d2d2;
    color: #000000;
    right: 0px;
    position: relative;
    background: linear-gradient(316deg, #868686, #f7f7f7);
}














/* Colors */



/*.panel:nth-child(3) {
    --color: #ffa700;
}
*/
.inset{
  overflow-y: scroll;
  width: 100%;
  left: 0px;
  right: 0px;
  top: 0px;
  background: repeating-linear-gradient(0deg, black, #00b7b7 7px);
  bottom: 0px;
  min-height: 100vh;
  position: absolute;
  
}




.panels {
   padding-bottom: 38vw;
    position: relative;
    margin-top: 18vh;
    padding-top: 8vw;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 1s;
    transform-style: preserve-3d;
    align-items: center;
}



    
.panel {
     filter: drop-shadow(0px 6px 8px #000000);
    height: 40vh;
    position: relative;
    width: 99vw;
    background: conic-gradient(from 61deg, #363636 60deg, #0f0f0f 84deg, transparent 84deg, transparent 154deg, #0f0f0f 154deg, #363636 171deg);
    max-width: 500px;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    text-align: center;
    transition: all 1s;
    z-index: 9999;
    perspective: 1000px;
}



/* ------------------------------------------ */



.cartBtn {
      transition: all 3s;
      z-index: 900;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    bottom: 1.5vh;
    width: 9vh;
    border-bottom: 0.1px solid #1f1f1f;
    height: 9vh;
    background: radial-gradient(circle farthest-corner at 37px 15px, #ffffff, #a798a3, #342831, #000000);
    box-shadow: -5px 16px 9px #000000c7;
    border-radius: 50%;

}

.cartBtn2{
  display:flex;transform: translate(-39vw, 1vw);
}


.after {
  inset: -15px -15px;
  content: '';
  position: absolute;
  background: none;
  border-radius: 50%;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0px 0px 5px rgb(0, 234, 255));
  
}

.after2{  animation: cart 2s ease-in 0s; }

@keyframes cart{
  0%{
   transform: rotateZ(180deg);
   inset:-15px -15px;
  }
  50%{
   transform: rotateZ(90deg);
   border-left: 2px solid rgb(0, 238, 255);
   border-right: 2px solid rgb(0, 255, 251);
   inset:-17px -17px;
  }
  75%{
    transform: rotateZ(180deg);
    border-left: 2px solid rgb(0, 234, 255);
    border-right: 2px solid rgb(0, 238, 255);
    inset:-17px -17px;
  }
  100%{
  transform: rotateZ(0deg);
  inset:-15px -15px;
  }
}

.animate{
  animation: 0.15s animate ease-in 0s;
}

@keyframes animate {
  0%{transform:matrix(1.47, 0, 0, 1.47, 0, 0);}
  25%{transform:matrix(1.87, 0, 0, 1.87, 0, 0);}
  50%{transform:matrix(2, 0, 0, 2, 0, 0);}
  75%{transform:matrix(1.67, 0, 0, 1.67, 0, 0);}
  100%{transform:matrix(1.37, 0, 0, 1.37, 0, 0);}
}

.slide-fade-enter-active {
  transition: all 0.1s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.1s ease-in;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  opacity: 0;
  transition: all 0.1s ;
}


.cart {
  transition: opacity 1s;
  display: flex;
  position: absolute;
  flex-direction: column;
  z-index: 100;
  background: #ffffff75;
  height: 100%;
  width: 100%;
  z-index: 950;
  align-items: center;
  justify-content: center;
}

.pageTop {
  width: 95vw;
  height: 40vh;
  transform-origin: top;
  position: relative;
  top: 40.2vh;
  transform-style: preserve-3d;
  transition: all 2s;
  display: flex;
  align-items: center;
  justify-content: center;
  transform : rotateX(180deg);
}
.pageTop2{ animation: translate 1.3s ease-in 0s; }

@keyframes translate{
0%{ transform : rotateX(0deg);}  100%{ transform : rotateX(180deg); }
}

.pageBottom {
  border-radius: 1rem;
  height: 40vh;
  width: 95vw;
  background: linear-gradient(180deg, black, #272727);
  border: 2px dotted black;
  border-top: none;
  border-bottom: none;
  box-shadow: 0px 5px 15px black;
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: column;
}

.cartFront, .cartBack {
border-radius: 1rem; position: absolute; width: 100%; height: 100%; display: flex; justify-content: center;
}

.itemFlex {
   width: 100%; align-items: center; display: flex; justify-content: center; padding: 10px 0px;
}
.itemFlex span {
  justify-content: center;align-items: center;display: flex;width: 20%;font-size: 12px;text-align: center;
}


.cartItem {
  color: wheat;
  height: 160%;
  background: transparent;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  position: absolute;
  display: none;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  padding-top: 10px;
}

.display{ display:flex; }









.priceAll {
  width: 100%;
  height: 6vh;
  color: wheat;
  background: repeating-linear-gradient(45deg, #50554f, #606060 28px);
  box-shadow: inset 1px 3px 5px black;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-shadow: 0px 0px 5px lawngreen, 0px 0px 10px red;
}

.buttonBottom {
  display: flex;align-items: center;justify-content: space-evenly;width: 100%;
}

.backword {
  padding: 10px 0px;
    font-weight: bold;
    font-size: 15px;
    color: #242424;
    text-shadow: 0px 0px 3px #807800;
    background: linear-gradient(0deg, #c2b325, #e0d890);
    width: 50%;
    border: none;
  border-end-start-radius: 1rem;
}

.next {
 padding: 10px 0px;
    font-weight: bold;
    font-size: 15px;
    color: #242424;
    text-shadow: 0px 0px 3px #807800;
    background: linear-gradient(0deg, #c2b325, #e0d890);
    width: 50%;
    border: none;
    border-end-end-radius: 1rem;
}



.myB{
width: 4vw;
  height: 4vh;
  border-radius: 5rem;
  background: #b5b4b4;
  transform: translateX(60%);
  transition: 1s;
}

/* ------------------------------------------------------ */




.cartFront , .cartBack{
  border-radius: 1rem;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.cartFront{
  z-index: 1;
  backface-visibility: hidden;
  background: linear-gradient(90deg, black, #1b1b1b);
}

.cartBack{
  box-shadow: 0px -2px 12px black;
  border: 2px dotted #000000;
  border-bottom: none;
  border-top: none;
  background: linear-gradient(0deg, black, #272727);
  transform: rotateX(180deg);
}

/* ------------------------------------------- */


.itemFlex{
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 10px 0px;
}



/* for cart first open */
.itemFlex p{
  padding: 0px 7%;
  justify-content: end;
  align-items: center;
  display: flex;
  width: 100%;
  font-size: 16px;
  text-align: center;
  color: #a8a7a7;
  text-shadow: 0px 0px 5px #ff0000;
}


.itemFlex input{
  width: 0px;
  display: none;
}

.itemFlex .input{ 
 padding: 15px;
    width: 90%;
    height: 100%;
    display: flex;
    background: linear-gradient(45deg, black, #025852);
    color: #ffffff;
    border-radius: 3rem;
    border: 3px dotted #fde068;
    box-shadow: 0px 0px 4px #fde068;
}

.span2{
  color: rgb(255 255 255);
  justify-content: space-around;
  align-items: center;
  display: flex;
  width: 75%;
  font-size: 13px;
  text-align: center;
  background: linear-gradient(0deg, black, #272626);
  border-radius: 2rem;
  padding: 1px 1px;
}

.fatora{
  left: 5px;
  position: absolute;
  border-radius: 0.5rem;
  height: 85%;
  width: 50%;
     color: #afafaf;
    font-size: 14px;
    text-shadow: 1px 1px 2px #3a3a3a;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}




.itemFlex span {
  justify-content: center;
  align-items: center;
  display: flex;
  width: 20%;
  font-size: 12px;
  text-align: center;
}

.itemFlex label{
  justify-content: center;
  display: flex;
  align-items: center;
  margin: 0px 15px;
  width: 20vh;
  color: #938e8e;
  padding: 3px 0px;
  font-weight: bold;
  text-shadow: 0px 0px 1px #585555;
  border-radius: 2rem;
  outline: 3px solid rgb(226 204 126);
  outline-offset: 9px;
  outline-style: solid;
  filter: drop-shadow(0px 0px 2px gray);

}
.hoverPlace{
  background: #b1de9c;
  box-shadow: 0px 0px 3px #61d838;
  color: black;
  text-shadow: 0px 0px 2px black;
}

.inputP{
  color: #000000;
  background: repeating-linear-gradient(90deg, white, #9d9d9d 10px);
  text-shadow: 0px 0px 1px #000000;
  box-shadow: 0px 0px 7px #e0e0e0;
  border-radius: 0.8rem;
  width: 90%;
}




.itemFlex textarea {
  display: flex;
      width: 90%;
      padding: 5px 6px 0px 0px;
      font-size: 11px;
      min-height: 6vh;
      border-radius: 0.9rem;
      background: #e1ede5;
      color: black;
      box-shadow: 0px 0px 6px rgb(216 201 80);
      border: 2px solid #ddce77;
      box-sizing: border-box;
}
/* -------------------------------------------- */

 
/* .span2{
  color: #f77a7a;
  text-shadow: 0px 0px 5px red;
 
} */

/* -------------------------------------------- */
.errSolve{
  width: 100%;
    color: #ff6c6c;
    position: relative;
    text-align: center;
    background: linear-gradient(0deg, black, transparent);
    font-size: 18px;
    padding: 10px;
}
.errSolve2{
  border-radius: 1rem;
  position: absolute;
  height: 25%;
  top: 35vh;
  background: linear-gradient(0deg, #151515, #895c4b);
  align-items: center;
  justify-content: space-evenly;
  display: flex;
  flex-direction: column;
  color: #ff3100;
}

.editDEL{
  background: #191919;
  color: rgb(255 0 0);
  height: 13%;
  position: absolute;
  top: -29px;
  display: flex;
  width: 56%;
  border-radius: 1rem;
  justify-content: space-evenly;
}


.delItemHolder{
  position: absolute;
  width: 100%;
  background: linear-gradient(0deg, black, #545252);
  display: flex;
  justify-content: space-around;
  color: #ff8080;
  height: 35px;
  border-radius: 3rem;
  z-index: 990;
  text-shadow: 0px 0px 3px red;
}


/* ------------------- */




.shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}
/* --------------------------- */
.shake2 {
  animation: shake2 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
}
@keyframes shake2 {
  10%,
  90% {
    transform: translate3d(0, 3px, 0);
  }

  20%,
  60%
   {
    transform: translate3d(0, 2px, 0);
  }
 
  30%,
  40%,
  50%,
  70% {
    transform: translate3d(0, -3px, 0);
  }
}






/* ----------slide-fade-------------- */
/* we will explain what these classes do next! */
/* we will explain what these classes do next! */
/* .slide-fade-enter-active {
  transition: all 0.1s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.1s cubic-bezier(0.5, 0.5, 0.5, 0.5);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(-45px);
  opacity: 0;
  transition: all 0.1s ;
} */

/* --------------list----------------- */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}
/* 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
*/
.before{

  border-end-start-radius: 0.5rem;
  border-end-end-radius: 0.5rem;
  transition: all 2s;
  max-width: 505px;
  height: 35px;
  z-index: -65;
  text-align: center;
  justify-content: end;
  align-items: center;
  flex-direction: row;
  display: flex
;
  position: absolute;
  bottom: 0px;
  width: 27%;
  background: #191919;
 }
.before2{
  letter-spacing: 1px;
    color: rgb(11 255 0);
    text-shadow: 0px 0px 2px #0ef00e;
    font-weight: 900;
    padding-left: 8px;
    font-size: 14px;
    display: flex;
    place-items: center;
}

.page2 {
 position: static;
    z-index: 888;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    display: flex;
    height: 80%;
    flex-direction: row;
    width: 100%;
    background: linear-gradient(0deg, black, #46463d);
}
/* 88888888888 */


.imgDiv {
     top: 0;
    position: absolute;
    height: calc(100% - 10.2vh);
    width: 100%;
    background: linear-gradient(200deg, black -2%, #00000000, #ffffff00), linear-gradient(0deg, #000000 -90% -50%, transparent, transparent);
    align-items: center;
    overflow: hidden;
    justify-content: space-evenly;
    display: flex;
}




.holderCount{
  color: #fde068;
  width: 100%;
  height: 5.5vh;
  display: flex;
  flex-direction: row;
  position: absolute;
  bottom: 5.1vh;
  justify-content: center;
  align-items: center;
  background: conic-gradient(from 135deg at 33%, #191919 3deg, #191919 270deg, #00000000 0deg), conic-gradient(from 135.1deg at 33.5%, #fde068 4deg, #fde068 269deg, #00000000 -7deg), conic-gradient(from 135deg at 34%, #191919 0deg, #191919 270deg, #00000000 3deg), conic-gradient(from 315deg at 66.5%, #cc000000 0deg, #cc000000 270deg, #808067 35deg), conic-gradient(from -46deg at 67%, #ffffff00 0deg, #ffffff00 271deg, #191919 -8deg), conic-gradient(from -45deg at 67.5%, #191919 -11deg, #191919 270deg, #fde068 -8deg); border-bottom: 0.1px solid #fde068;
  box-shadow: inset #000000 3px 5px 15px, inset #000000 -3px 2px 5px;
}

.plusMinus{
  position: absolute;
  bottom: 0.7vh;
  z-index: 999;
  justify-content: space-around;
  align-items: center;
  display: flex;
  width: 11vw;
  color: #fde068;
  text-shadow: 0px 0px 4px #fde068;
  font-size: 3vh;
  font-weight: 900;
  -webkit-text-stroke-width: 3px;
}

img{
  user-select: none;
  pointer-events: none;
  transition: all 0.175s;
}

@keyframes btn{
  0%{width: 50%;}
  50%{width: 66%;}
  100%{width: 50%;}

}

.centerPM{
    transition: all 0.175s;
    font-size: 10.5px;
    width: 50%;
    color: #fff2be;
    text-shadow: 1px 3px 3px #000000;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
}


.postText{
    position: absolute;
    right: 35px;
    top: 55px;
    color: #93e3cf;
    text-shadow: 0px 0px 3px #95fff869;
    z-index: 1;
    font-size: 13px;
    text-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: end;
}

.postSame{
    position: relative;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;

}


.postSame div{
  border: 2px dashed #fde068;
    text-shadow: 0px 0px 1px #ffffff;
    letter-spacing: 1px;
    border-radius: 1rem;
    color: #d9d5b1;
    font-size: calc(1vw + 9px);
    background: #005c5a85;
    padding: 2px calc(2vw + 3px) 2px calc(2vw + 3px);
}





.titlee{
   top: 12px;
    right: 20px;
    position: absolute;
    color: #f9cbff;
    text-shadow: 0px 0px 3px #b28fbc;
    font-size: 24px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}









/*****************************************************/
.imgg {
  user-select: none;
  pointer-events: none;
  z-index: -2;
  box-shadow: 0px 0px 3px black;
  align-items: center;
  overflow: hidden;
  justify-content: space-evenly;
  display: flex;
  flex-direction: row;
}


img{
  user-select: none;
  pointer-events: none;
}

  .callx4{
    height: 44px;
    right: 25px;
    width: 44px;
    font-size: 31px;
  }






.page2 .h1last-child{
  margin-bottom:30px;
}
  
 
/*****************************************************/

.commenter{
  z-index: 9990;
  bottom: 110px;
  left: 10%;
  background: linear-gradient(180deg, #434343, #0e0e0e);
  height: auto;
  box-shadow: -1px -3px 5px #585656, 1px 3px 6px #000000;
  border-radius: 2rem;
  backdrop-filter: blur(6px);
  color: #fff;
  position: fixed;
  width: 80%;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.commenter .come{
  margin-top: 70px;
    display: flex;
    align-items: center;
}

/************************************************************/


.lable {
    display:none;
    right: 0;
    left: 0;
    background: linear-gradient(1deg, black, #0a5c47b8);
    box-shadow: 0px -9px 23px #595c5cc9, 0px 16px 27px #000000, 0px 8px 9px #000000, 0px 7px 10px #222121;
    z-index: 7;
    line-height: 8vh;
    position: relative;
    height: 9vh;
    padding: 0px;
    /* margin-bottom: 3.5vh; */
    font-weight: bold;
    flex-wrap: wrap;
    /* display: flex; */
    flex-direction: row;
 
  
  } 
	
.lable a{
   letter-spacing: 2px;
    text-shadow: 0px 0px 5px white;
    text-align: center;
    width: 20vw;
    line-height: 9vh;
    position: relative;
    font-size: 1.3rem;
    color: white;
    
	
	
} 
.lable a:hover {
 color: #fde068;
}
.lable a:first-child{
    text-shadow: 0px 0px 2px black;
    line-height: 2vh;
    height: 4vh;
    font-size: 2.3rem;
    color: #7c0404;

} 

/********************************************************************/







.callx{
    right: -3px;
    top  : 4px;
    position: absolute;
    text-shadow: 0px 0px 3px black;
    text-align: center;
    width: 20vw;
    font-size: 10vw;
    color: #ba0404;
}


.callx2{
  top: 3px;
  position: absolute;
  margin-bottom: 5px;
  width: 30px;
  height: 30px;
  font-size: 20px;
  border-radius: 2rem;
  border: 2px dotted red;
  align-items: center;
  display: flex
;
  justify-content: center;
  box-shadow: 0px 0px 5px #1a1919, inset 0px 0px 6px #6a6a6a, 0px 0px 3px black;
  text-align: center;
  color: #ff9f9f;
  z-index: 999;
}









.lable > div{
    justify-content: space-around;
    display: flex;
    width: 60vw;
    position: relative;

}










/**



@media only screen and (max-height :700px){
.inset{min-width:100vw;min-height:100vh;width:auto;}
.lable{ position: fixed;height: 10vh;  }  .lable a,h3 , h1 ,h4 , h5 , p, .u1, .u2 ,.u3,.u4, .button { font-size:1.1rem;  }
.panels{     top:0vh;
        padding: 6vh 0;
        margin: 18vh 0;
        width: 100%;
        flex-direction: row;}
.panel{ width: 545px;
        margin: 21px 11px;
        left: -136px;
        display: flex;
        text-align: center;
        transition: all .2s;
        perspective: 5000px;}
.page1{ left: -35.5vw; margin-left: -18vw; transform: rotateY(180deg); position: relative;}  
.front {  transform: rotateY(180deg); }
[class^="page"] {    width: 35vw; height: 49vh;}
.panel:hover .page1{ left: 0vw; transform: rotateY(0deg); top:0vh; } 
.panel:hover {margin-top:3.5vh; padding:0 11vw; }
  
}



*/


/* Hide scrollbar for Chrome, Safari and Opera */
#app::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#app {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

}












.heead1{
    display: block;
    border-radius: 61%;
    display: block;
    transform: translateX(532%);
    transition: 2s, width 2s, height 2s;
    width: 15%;
    height: 61px;
    top: 0px;
    background: linear-gradient(165deg, #ffc4c4, #c84444, #6c0707, #210101e0);
    box-shadow: 0px 0px 8px #ff0000, 0px 0px 11px #000000;

}








.searcher {
  
  position: relative;
   
 } 

  .search {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: all 1s;
    left: 5px;
    position: relative;
    z-index: 9;
    } 
    
    .search2 {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      transition: all 1s;
      position: relative;
      color: #fde068;
      text-shadow: 0px 0px 3px #fde068;
      font-size: 16px;
      display: flex;
      z-index: 9;
      justify-content: center;
      align-items: center;
     } 

     

   .search:before {
      content: "";
      position: absolute;
      margin: auto;
      top: 22px;
      right: 0;
      bottom: 0;
      left: 22px;
      width: 8px;
      height: 2px;
      background: #fde068;
      transform: rotate(45deg);
      transition: all .5s;
    }
   .search:after {
      content: "";
      position: absolute;
      margin: auto;
      top: -5px;
      right: 0;
      bottom: 0;
      left: -5px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid #fde068;
      transition: all .5s;
    }

.inputtext {
  top: 5px;
  font-size: 11px;
  font-family: 'Inconsolata', monospace;
  position: absolute;
  left: 5px;
  outline: none;
  height: 40px;
  outline: none;
  border: none;
  background:linear-gradient(45deg, #a8aa37, #62626200);
  color: #ffffff;
  padding: 0 10px 0 20px;
  border-radius: 10px;
  transition: all 1s;
  opacity: 0;
  bottom: 3px;
  font-weight: bolder;
  letter-spacing: 0.1em;
    } 


      input:before {
        top: 0;
        left: 0;
        width: 25px;
      }
      .inputtext:after {
        top: 0;
        left: 0;
        width: 25px;
        height: 2px;
        border: none;
        background: white;
        border-radius: 0%;
        transform: rotate(-45deg);
      }
    
    .inputtext:placeholder {
      color: white;
      opacity: 0.5;
      font-weight: bolder;
    }


/************************************************************/

.site{
font-size: 12.3px;
    color: #fbfbfb;
    text-shadow: 0px 0px 2px #cacaca, 0px 0px 4px #6a0000, 0px 0px 3px #ff0000;
}
.light{
font-size: 12.3px;
    text-align: right;
    width: 100%;
    text-shadow: 0px 0px 2px #828181, 0px 0px 3px #fbfbff, 0px 1px 8px #e3e848;
    color: #fcfdff;
}

.lightH{
padding: 0px 11px 15px 0px;
    position: absolute;
    width: 54%;
    height: 40px;
    right: 0px;
    gap: 5px;
    bottom: 2px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;

}


.title{
  padding: 3px 6px 0px 0px;
    border-radius: 3rem;
    text-shadow: 0px 0px 5px #ff0000, 0px 0px 4px blue, 0px 0px 8px blue, 0px 0px 10px red;
    padding-left: 6px;
    max-width: 55vw;
    left: 3px;
    color: white;
    bottom: 4px;
    position: absolute;
    font-size:17px;
    text-align: center;
}


.fas fa-angle-right , .fas fa-angle-left{ 
    top: 30%;
    opacity: 0.5;
    font-size: 31px;
    position: absolute;
    color: #000000;

}

.xlight{
    color: #f4f2ed;
    position: absolute;
    background: red;
    top: -20px;
    width: 30px;
    font-size: 19px;
    border-start-start-radius: 0.5rem;
    border-start-end-radius: 0.5rem;
    text-shadow: 0px 0px 2px white;
    box-shadow: 0px 0px 2px red;
}

.refre{
  align-items: center;
  justify-content: center;
  display: flex
;
  text-align: center;
  height: 28px;
  width: 28px;
  background: linear-gradient(-8deg, black, #fbf9f9);
  border-radius: 50%;
  left: 5px;
  position: absolute;
}





/***********************************************/
/******************  1200 ->  ******************/
/*********************************************/








/* <script>

// <!-- 
// const Light = { 
//           data() {
//    return data;
			       
//         },
//       methods : methodss,    
       
//       template: ` 
// <div   class="inset">
  

//  <nav class="header__nav"  id="fade3"  >

//     <ul class="header__menu"   >
     
//   <li class="header__item"  style="left: 20%;">
//     <div class="heead "  style="display:block;" >
//      <h1 class="header__logo__name"   >
//       <router-link to="/" >
//         <i class="fa fa-home" style="text-shadow: #fde068 0px 0px 2px;color: rgb(207 182 92); text-align: center;font-size: 14px;margin: 2px;"><br/>الرئيسية</i>
//       </router-link>
//       </h1>
//     </div>
//    </li>

       
//     </ul> 
//   </nav>




// <div class="row" style="margin-top: 110px;">
//   <template v-for="item in infoLights" :key="item" > 
//     <div class="col-md-12 col-lg-6">
//       <div class="member-card">
//         <div class="member-pic"></div>
//         <div class="member-card-details">
//           <a ><div class="member-name">{{item.hisN}} </br>ناشر الفكرة</div></a>
//           <div class="member-position" @click="chatLight='',hisId=item.hisId,callMchat=true,hisN=item.hisN,getMsgLight2(),msg='' "> النقاش مع الفريق</div>
//           <div class="member-position" @click="hisId=item.hisId,getMembersL(),callM=true"> أعضاء الفريق</div>
//         </div>
//         <div class="btn-fired" @click="hisId=item.hisId,getoneData(),callHisPost=true">تفاصيل الفكرة</div>
//       </div>
//     </div>
//   </template>
//  </div>


//  <div class="commenter memberL" v-if="callM" dir="rtl" >
//     <div  class="form-container">
//        <div class="callx2"  @click="callM=false">x</div>
//            <div class="row" style="margin-top: 110px;">
//              <template v-for="item in membersL" :key="item" > 
//                <div class="col-md-12 col-lg-6">
//                 <div class="member-card" style="border-radius: 3rem;">
//                     <div class="member-card-details">
//                       <a style="margin-bottom:5px;" @click="hisId=item.myId,getoneData(),callHisPost=true,callM=false">
//                       <div class="member-name" style="font-size:16px;">{{item.iname}} </div>
//                       </a>
//                     </div>
//                  </div>
//                </div>
//             </template>
//           </div>
//       </div>
//   </div>

  


// <div id="container" v-if="callMchat==true" style="position:fixed;height:91%;">
//     <div class="callx"  @click="callMchat=false" style="right: -5px;top: -3px;" >x</div>

// 	<main>
// 	<header>
			
//       <i class="fas fa-user-alt" style="text-shadow: 0px 0px 5px gray;font-size: 23px;color: black;font-weight: 900;"></i>
// 			<div>
// 				<h2 style="text-shadow: 0px 0px 2px black;color: #7a0000;font-size: 13px;margin-right: 100px;margin-top: 7px;"> .. {{ hisN }} محادثة مع فريق  </h2>
// 			</div>


// 		</header>

// 		<ul id="chat" style="direction: ltr;height: 78%;">
//       <template v-for="c in chatLight" >
// 			 <li class="chatLight" >
// 				<div class="message">
//          <i class='fas fa-user-alt' @click="hisId=c.myId,getoneData(),callHisPost=true"
//            style='font-size:4.3vw;color: white;text-shadow: white 0px 0px 1px, white 0px 0px 14px, white 0px 0px 68px, white 0px 0px 132px, white 0px 0px 200px;'>{{ c.iname }}</i>

//          <div> {{c.msg}} </div>
// 				</div>
// 			 </li>
//       </template>
 
// 		</ul>
// 		<footer>
// 			<textarea placeholder="أكتب رسالتك هنا" v-model="msg" dir="rtl"></textarea>
			
// 			<a @click="addMsgLight(),msg=''">إرسال</a>
// 		</footer>
// 	</main>
// </div>




// <!---------top end enset----------bottom end his post---------------------->



//    <div class="containerW" v-if="infoLights==[]&& !warning">
//       <div class="it item1"></div>
//       <div class="it item2"></div>
//       <div class="it item3"></div>
//     </div>



//   </div>
//          `
//            } -->










  <div    :class="{ display : cart==2 }" class="cartItem"   > 
     <div class="itemFlex " style="    background: repeating-linear-gradient(145deg, #3e3e3e, transparent 65%);border-radius: 2rem;height: 10%;"  >
      : موقعك الآن 
     </div>
        <div class="itemFlex" style="flex-wrap: wrap;">
         <label for="mroj"  :class="{ 'shake2 hoverPlace' : inputP=='المروج'}">المروج</label>  <input type="radio" value="المروج"         v-model="inputP"    id="mroj">
         <label for="msakn" :class="{ 'shake2 hoverPlace' : inputP=='المساكن'}">المساكن</label> <input type="radio" value="المساكن"        v-model="inputP"    id="msakn">
         <label for="ksor1" :class="{ 'shake2 hoverPlace' : inputP=='القصور الشمالي'}">القصور الشمالي</label> <input type="radio" value="القصور الشمالي" v-model="inputP"   id="ksor1">
         <label for="ksor2" :class="{ 'shake2 hoverPlace' : inputP=='القصور الجنوبي'}">القصور الجنوبي</label> <input type="radio" value="القصور الجنوبي" v-model="inputP"   id="ksor2">
         <label for="sok"   :class="{ 'shake2 hoverPlace' : inputP=='السوق'}" >السوق</label>   <input type="radio" value="السوق"           v-model="inputP"   id="sok">
        </div>
  </div>
  
  
///////////////////////////////


 <Transition name="slide-fade">
    <div class="fade before" v-if="item.count!=0" name="fade" @click='xyPosition($event)'>

                <div class="before2"
                   @click="cartItem.push({title:item.title,count:item.count,price:item.price}),item.count=0">
                  <img src="icons/purchase.png" style=" filter: brightness(1.2);width: 21%;margin-right: 11px;max-width: 55px;" />إضافة 
                </div>
    </div>           <!------for before----------------->
 </Transition>




 /////////////////////////////////////////////










</script>
 */