/* Reset some default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Define basic styles for the page */
@font-face {
  font-family: main;
  src: url(main.ttf);
}
body {
  font-family: main;
  background-color: var(--tg-theme-secondary-bg-color, #202128);
  height: 100vh;
}

a {
  color: var(--tg-theme-link-color,#0000ee);
}

.product-container {
  display: block;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow-x: auto;
  padding: 5px;
  color: var(--tg-theme-secondary-bg-color, #fff);
}

.product-card {

/*  flex-direction: column; default is row*/
  width: 100%;
  border-radius: 15px;
  margin: 0.5em;          /*top-bottom left-right*/
  margin-left: 0;

  border: transparent;
  background-color: transparent;
}

.product-detail {
  display: flex;
  border-radius: 5px;
  margin: 0.5em;
  padding: 0.5em;
  border: 1px solid var(--tg-theme-button-color,#ddd);
  background-color: var(--tg-theme-bg-color, #fff);
}

.text-container {
  display: flex;
  flex-direction: column;
  margin: 0;
  height: 40%;
  margin-left: 10px;
  width: inherit;
  text-align: left;
}

.product-title {
  margin-top: 0.5em;
  color: var(--tg-theme-text-color, #fff);
  font-size: 18px;
  text-align: left;
  width: 100%;

}

.product-price
,.product-priceB{
  color: var(--tg-theme-text-color,#fff);
  font-size: 14px;
  text-align: center;
  font-weight: bold;
}

.product-description {
  color: var(--tg-theme-hint-color,#666);
  font-size: 14px;
  margin: 4px;
}

.product-contact {
  color: var(--tg-theme-hint-color,#666);
  font-size: 14px;
}

.product-image {
  width: 100%;
  height: 80vw;
  display: block;
  object-fit: cover;
  margin: 0 0;
  border-radius: 15px;
  padding-bottom: 5px
}

.product-button {
  background-color: var(--tg-theme-button-color,#3498db);
  color: var(--tg-theme-button-text-color,#fff);
  font-size: 14px;
  margin-top: 0.5em;
  padding: 0.5em;
  border: none;
  border-radius: 5px;
  width: 30%;

}

.product-back-button {
  background-color: var(--tg-theme-button-color,#3498db);
  color: var(--tg-theme-button-text-color,#fff);
  font-size: 14px;
  margin: 0;
  margin-bottom: 0.5em;
  padding: 0.5em;
  border: none;
  border-radius: 5px;
}

.project-info {
  display: flex;
  justify-content: center;
  color: var(--tg-theme-hint-color,#666);
  font-size: 10px;
  margin: 1em;
}
.product-buttons{
  width: 40px;
  color: white;
  font-size: 20px;
  border-radius: 5px;
  border : 0;
  justify-content: center;
}

.checkout-contianer{
  background-color: var(--tg-theme-bg-color, #fff);
  color: var(--tg-theme-text-color,#000);
  padding: 10px;

}
.checkout-contianer h5{
  font-size: 14px;
}





.comments{
  width: 100%;
  border: 0;
  padding: 10px 30px;
  background-color: var(--tg-theme-bg-color, #fff);
  color: var(--tg-theme-text-color,#000);
  border:0;
  outline:0;
  height: 50px;
  font-size: 14px;

}

.comments:focus{
  border:0;
  outline:0;
}



#address{
  background-color: var(--tg-theme-bg-color, #fff);
  color: var(--tg-theme-text-color,#000);

}
#address input{
  width: 100%;
  height: 50px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.701);
  outline: none;
  background-color: var(--tg-theme-bg-color, #fff);
  color: var(--tg-theme-text-color,#000);

}


.totalButton{
  width: 100%;
  border: 0;
  height: 60px;
  color: black;
  font-size: 16px;
  background-color: var(--tg-theme-button-color,#3498db);
  color: var(--tg-theme-button-text-color,#fff);
  position: fixed;
  bottom: 0;

}


#switch[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
}

#swi {
  cursor: pointer;
  text-indent: -9999px;
  width: 35px;
  height: 17.5px;
  background: grey;
  display: block;
  border-radius: 10px;
  position: relative;
  margin: 18px;
}

#swi:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 90px;
  transition: 0.3s;
}

#switch:checked + #swi {
  background-color: var(--tg-theme-button-color,#3498db);

}

#switch:checked + #swi:after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}

#swi:active:after {
  width: 10px;
}





/*** Table Styles **/

.table-fill {
 background: var(--tg-theme-bg-color, #11112e);
 border-radius:0px;
 margin: auto;

 padding:5px;
 width: 100%;

}

th {
 color:#D5DDE5;;
 background:var(--tg-theme-button-color,#3498db);
 border-bottom:4px solid #9ea7af;
 border-right: 1px solid #343a45;
 font-size:23px;
 font-weight: 100;
 padding:5px;
 text-align:left;
 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 vertical-align:middle;
}

th:first-child {
 border-top-left-radius:3px;
}

th:last-child {
 border-top-right-radius:3px;
 border-right:none;
}

tr {
 border-top: 1px solid #C1C3D1;
 border-bottom-: 1px solid #C1C3D1;
 color: var(--tg-theme-text-color, #fff);
 font-size:16px;
 font-weight:normal;
 text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}



tr:first-child {
 border-top:none;
 color : var(--tg-theme-button-color,#3498db)
}

tr:last-child {
 border-bottom:none;
}

tr:nth-child(odd) td {
 background: var(--tg-theme-secondary-bg-color, #202128);
}


tr:last-child td:first-child {
 border-bottom-left-radius:3px;
}

tr:last-child td:last-child {
 border-bottom-right-radius: 15px;
}

td {
 background: var(--tg-theme-secondary-bg-color, #202128);
 padding:5px;
 text-align:left;
 vertical-align:middle;
 font-weight:300;
 font-size:18px;
 text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
 border-right: 1px solid #C1C3D1;
}

td:last-child {
 border-right: 0px;
}

th.text-left {
 text-align: left;
}

th.text-center {
 text-align: center;
}

th.text-right {
 text-align: right;
}

td.text-left {
 text-align: left;
}

td.text-center {
 text-align: center;
}

td.text-right {
 text-align: right;
}













.typewriter {
  --blue: var(--tg-theme-button-color,#3498db);
  --blue-dark: var(--tg-theme-secondary-bg-color, #202128);
  --key: #fff;
  --paper: #EEF0FD;
  --text: #D3D4EC;
  --tool: #FBC56C;
  --duration: 3s;
  position: relative;
  -webkit-animation: bounce var(--duration) linear infinite;
          animation: bounce var(--duration) linear infinite;
}
.typewriter .slide {
  width: 92px;
  height: 20px;
  border-radius: 3px;
  margin-left: 14px;
  transform: translateX(14px);
  background: linear-gradient(var(--blue), var(--blue-dark));
  -webkit-animation: slide var(--duration) ease infinite;
          animation: slide var(--duration) ease infinite;
}
.typewriter .slide:before, .typewriter .slide:after,
.typewriter .slide i:before {
  content: "";
  position: absolute;
  background: var(--tool);
}
.typewriter .slide:before {
  width: 2px;
  height: 8px;
  top: 6px;
  left: 100%;
}
.typewriter .slide:after {
  left: 94px;
  top: 3px;
  height: 14px;
  width: 6px;
  border-radius: 3px;
}
.typewriter .slide i {
  display: block;
  position: absolute;
  right: 100%;
  width: 6px;
  height: 4px;
  top: 4px;
  background: var(--tool);
}
.typewriter .slide i:before {
  right: 100%;
  top: -2px;
  width: 4px;
  border-radius: 2px;
  height: 14px;
}
.typewriter .paper {
  position: absolute;
  left: 24px;
  top: -26px;
  width: 40px;
  height: 46px;
  border-radius: 5px;
  background: var(--paper);
  transform: translateY(46px);
  -webkit-animation: paper var(--duration) linear infinite;
          animation: paper var(--duration) linear infinite;
}
.typewriter .paper:before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 7px;
  border-radius: 2px;
  height: 4px;
  transform: scaleY(0.8);
  background: var(--text);
  box-shadow: 0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);
}
.typewriter .keyboard {
  width: 120px;
  height: 56px;
  margin-top: -10px;
  z-index: 1;
  position: relative;
}
.typewriter .keyboard:before, .typewriter .keyboard:after {
  content: "";
  position: absolute;
}
.typewriter .keyboard:before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  transform: perspective(10px) rotateX(2deg);
  transform-origin: 50% 100%;
}
.typewriter .keyboard:after {
  left: 2px;
  top: 25px;
  width: 11px;
  height: 4px;
  border-radius: 2px;
  box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  -webkit-animation: keyboard var(--duration) linear infinite;
          animation: keyboard var(--duration) linear infinite;
}

@-webkit-keyframes bounce {
  85%, 92%, 100% {
    transform: translateY(0);
  }
  89% {
    transform: translateY(-4px);
  }
  95% {
    transform: translateY(2px);
  }
}

@keyframes bounce {
  85%, 92%, 100% {
    transform: translateY(0);
  }
  89% {
    transform: translateY(-4px);
  }
  95% {
    transform: translateY(2px);
  }
}
@-webkit-keyframes slide {
  5% {
    transform: translateX(14px);
  }
  15%, 30% {
    transform: translateX(6px);
  }
  40%, 55% {
    transform: translateX(0);
  }
  65%, 70% {
    transform: translateX(-4px);
  }
  80%, 89% {
    transform: translateX(-12px);
  }
  100% {
    transform: translateX(14px);
  }
}
@keyframes slide {
  5% {
    transform: translateX(14px);
  }
  15%, 30% {
    transform: translateX(6px);
  }
  40%, 55% {
    transform: translateX(0);
  }
  65%, 70% {
    transform: translateX(-4px);
  }
  80%, 89% {
    transform: translateX(-12px);
  }
  100% {
    transform: translateX(14px);
  }
}
@-webkit-keyframes paper {
  5% {
    transform: translateY(46px);
  }
  20%, 30% {
    transform: translateY(34px);
  }
  40%, 55% {
    transform: translateY(22px);
  }
  65%, 70% {
    transform: translateY(10px);
  }
  80%, 85% {
    transform: translateY(0);
  }
  92%, 100% {
    transform: translateY(46px);
  }
}
@keyframes paper {
  5% {
    transform: translateY(46px);
  }
  20%, 30% {
    transform: translateY(34px);
  }
  40%, 55% {
    transform: translateY(22px);
  }
  65%, 70% {
    transform: translateY(10px);
  }
  80%, 85% {
    transform: translateY(0);
  }
  92%, 100% {
    transform: translateY(46px);
  }
}
@-webkit-keyframes keyboard {
  5%, 12%, 21%, 30%, 39%, 48%, 57%, 66%, 75%, 84% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  9% {
    box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  18% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  27% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  36% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key), 60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);
  }
  45% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  54% {
    box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  63% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 12px 0 var(--key);
  }
  72% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  81% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
}
@keyframes keyboard {
  5%, 12%, 21%, 30%, 39%, 48%, 57%, 66%, 75%, 84% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  9% {
    box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  18% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  27% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  36% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key), 60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);
  }
  45% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  54% {
    box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  63% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 12px 0 var(--key);
  }
  72% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  81% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
}






.toggle-button-cover {
  display: table-cell;
  position: relative;
  width: 200px;
  height: 140px;
  box-sizing: border-box;
}

.button-cover {
  height: 100px;
  margin: 20px;
  background-color: #fff;
  box-shadow: 0 10px 20px -8px #c5d6d6;
  border-radius: 4px;
}

.button-cover:before {
  counter-increment: button-counter;
  content: counter(button-counter);
  position: absolute;
  right: 0;
  bottom: 0;
  color: #d7e3e3;
  font-size: 12px;
  line-height: 1;
  padding: 5px;
}

.button-cover,
.knobs,
.layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.button {
  position: relative;

  width: 94px;
  height: 45px;
  overflow: hidden;
}

.button.r,
.button.r .layer {
  border-radius: 100px;
}

.button.b2 {
  border-radius: 2px;
}

.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.knobs {
  z-index: 2;
}

.layer {
  width: 100%;
  background-color: #ebf7fc;
  transition: 0.3s ease all;
  z-index: 1;
}

/* Button 10 */
#button-10 .knobs:before,
#button-10 .knobs:after,
#button-10 .knobs span {
  position: absolute;
  top: 4px;
  width: 39px;
  height: 20px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  border-radius: 2px;
  transition: 0.3s ease all;
}

#button-10 .knobs:before {
  content: "";
  left: 4px;
  background-color: #F7931A;
}

#button-10 .knobs:after {
  content: "Ⓜ";
  right: 4px;
  color: #4e4e4e;
  margin-top: 3px;
  font-size: 15px;
}

#button-10 .knobs span {
  display: inline-block;
  left: 4px;
  color: #fff;
  z-index: 1;
}

#button-10 .checkbox:checked+.knobs span {
  color: #4e4e4e;
}

#button-10 .checkbox:checked+.knobs:before {
  left: 42px;
  background-color: #f44336;
}

#button-10 .checkbox:checked+.knobs:after {
  color: #fff;
}

#button-10 .checkbox:checked~.layer {
  background-color: #fcebeb;
}


.loader {
  border: 2px solid var(--tg-theme-button-color, #3498db);
  /* Light grey */
  border-top: 2px solid var(--tg-theme-secondary-bg-color, #202128);
  /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
      transform: rotate(0deg);
  }

  100% {
      transform: rotate(360deg);
  }
}