*{
  margin: 0;
  padding: 0;
  font-family: 'Josefin Sans', sans-serif;
}

/* SWAL THEME */
.swal-button {
  padding: 7px 19px;
  border-radius: 2px;
  background-color: #FE8D27;
  font-size: 12px;
  border: 1px solid #FE8D27;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
}

html{
  height: 100vh;
  width: 100vw;
}
#app{
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  /* background-color: #EFEDEC; */

  /* background-color: #EFEDEC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='100' y1='33' x2='100' y2='-3'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='100' y1='135' x2='100' y2='97'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23cacaca' fill-opacity='0.15'%3E%3Crect x='100' width='100' height='100'/%3E%3Crect y='100' width='100' height='100'/%3E%3C/g%3E%3Cg fill-opacity='0.15'%3E%3Cpolygon fill='url(%23a)' points='100 30 0 0 200 0'/%3E%3Cpolygon fill='url(%23b)' points='100 100 0 130 0 100 200 100 200 130'/%3E%3C/g%3E%3C/svg%3E"); */
}
/* Navbar */
.navbar{
  color: #EFEDEC;

  background-color: #FE8D27;

  width: 100vw;
  height: min-content;
  
  display: flex;
  flex-direction: row;

  padding: 0;

  /* border-bottom: solid 1px white; */
}
  .left-content img{
    width: 80px;
    height: 80px;
  }
  .right-content {
    padding: 0;
    margin: 0;
  }
    .dropdown-1{
      margin: 0;
    }
  .btn-secondary{
    color: #EFEDEC;
    background-color: #FE8D27;
    border-color: #FE8D27;
    transition: none;
  }
  .btn-secondary:hover {
    color: #EFEDEC;
    background-color: #FE8D27;
    border-color: #FE8D27;
    transition: none;
  }
  .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle {
    color: #EFEDEC;
    background-color: #FE8D27;
    border-color: #FE8D27;
    transition: none;
  }
  .btn-secondary:focus, .btn-secondary.focus{
    color: #EFEDEC;
    background-color: #FE8D27;
    border-color: #FE8D27;
    transition: none;
  }
  .dropdown-item.active, .dropdown-item:active{
    background-color: #FE8D27;
  }

/* REGISTER PAGE */
.register-page{
  color:#EFEDEC;

  background-color: #EFEDEC;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
  .image-show{
    /* width: 50%;
    height: 50%; */
    background-color: #363636 ;
  }

  .register-container{
    background-color: #363636 ;
    min-width: 30rem;
    min-height: 40rem;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-content: center ;
    align-items: center;

    padding: 10px;
  }
    .register-container input, .register-container textarea{
      color:#EFEDEC;
      background-color:#363636;
      border: none;
      border-bottom: solid 1px white;
      padding: 3px;

      width: 100%;
    }
    .register-container form{
      width: 20rem;
      display: flex;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center ;
      align-items: center;

    }
    .register-container p{
      color: red;
    }

/* END REGISTER PAGE */

/* HOMEPAGE  */

.home{
  /* height: 100%; */
  width: 100vw;
  display:flex;
  
  flex-direction: column
}
  .home-banner{
    width: 100vw;
    display: flex;
    /* flex-flow: row nowrap; */

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory; 
  }
  .home-banner img{
    width: 100vw;
    flex-shrink: 0;
    height: auto;

    scroll-snap-align: start;
    scroll-behavior: smooth;
  }
  /* .banner-shortcut a {
    display: none;
  }
  @supports (scroll-snap-type) {

  } */
  .banner-shortcut{
    text-align: center;
  }
  .showcase-container{
    height: 100%;
    width: 100vw;
    padding: 10px;
    background-color: #363636;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    align-content: center ;

    background-color: #363636;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='199' viewBox='0 0 100 199'%3E%3Cg fill='%23efedec' fill-opacity='0.7'%3E%3Cpath d='M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");

}

  /* END HOMEPAGE */

  /* PRODUCT-LIST */

  .product-list-page{
    width: 100%;
    min-height: min-content;

    padding: 10px;
    background-color: #efedec00;

    display: flex;
    flex-direction: row;
    flex-flow: wrap;

    justify-content:space-around;
  }
    .product-list-card{
      margin: 10px;
      /* max-height: min-content;s */
      /* background-color: #efedec00 ; */
    }
    .product-list-card .card-body{
      /* background-color: #15fff3; */
      max-height: 20rem;
    }
    /* .product-list-card .card{
      justify-content: center;
      align-items: center;
      align-content: center;
    } */

  /* END PRODUCT LIST */

/* PRODUCT PAGE  */

.product-page{
  height: 100%;
  width: 100%;
  
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  background-color: #efedec;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Ccircle stroke='%23fe8d27' vector-effect='non-scaling-stroke' id='a' fill='none' stroke-width='1' r='315'/%3E%3Cuse id='f' href='%23a' stroke-dasharray='100 100 100 9999'/%3E%3Cuse id='b' href='%23a' stroke-dasharray='250 250 250 250 250 9999'/%3E%3Cuse id='e' href='%23a' stroke-dasharray='1000 500 1000 500 9999'/%3E%3Cuse id='g' href='%23a' stroke-dasharray='1500 9999'/%3E%3Cuse id='h' href='%23a' stroke-dasharray='2000 500 500 9999'/%3E%3Cuse id='j' href='%23a' stroke-dasharray='800 800 800 800 800 9999'/%3E%3Cuse id='k' href='%23a' stroke-dasharray='1200 1200 1200 1200 1200 9999'/%3E%3Cuse id='l' href='%23a' stroke-dasharray='1600 1600 1600 1600 1600 9999'/%3E%3C/defs%3E%3Cg transform='translate(1000 750)' stroke-opacity='0.21'%3E%3Cg %3E%3Ccircle fill='%23fe8d27' fill-opacity='0.21' r='10'/%3E%3Cg transform=''%3E%3Cuse href='%23f' transform='scale(.1) rotate(50 0 0)' /%3E%3Cuse href='%23f' transform='scale(.2) rotate(100 0 0)' /%3E%3Cuse href='%23f' transform='scale(.3) rotate(150 0 0)' /%3E%3C/g%3E%3Cg transform=''%3E%3Cuse href='%23b' transform='scale(.4) rotate(200 0 0)' /%3E%3Cuse href='%23z' transform='scale(.5) rotate(250 0 0)' /%3E%3C/g%3E%3Cg id='z' transform=''%3E%3Cg transform=''%3E%3Cuse href='%23b'/%3E%3Cuse href='%23b' transform='scale(1.2) rotate(90 0 0)' /%3E%3Cuse href='%23b' transform='scale(1.4) rotate(60 0 0)' /%3E%3Cuse href='%23e' transform='scale(1.6) rotate(120 0 0)' /%3E%3Cuse href='%23e' transform='scale(1.8) rotate(30 0 0)' /%3E%3C/g%3E%3C/g%3E%3Cg id='y' transform=''%3E%3Cg transform=''%3E%3Cuse href='%23e' transform='scale(1.1) rotate(20 0 0)' /%3E%3Cuse href='%23g' transform='scale(1.3) rotate(-40 0 0)' /%3E%3Cuse href='%23g' transform='scale(1.5) rotate(60 0 0)' /%3E%3Cuse href='%23h' transform='scale(1.7) rotate(-80 0 0)' /%3E%3Cuse href='%23j' transform='scale(1.9) rotate(100 0 0)' /%3E%3C/g%3E%3C/g%3E%3Cg transform=''%3E%3Cg transform=''%3E%3Cg transform=''%3E%3Cuse href='%23h' transform='scale(2) rotate(60 0 0)'/%3E%3Cuse href='%23j' transform='scale(2.1) rotate(120 0 0)'/%3E%3Cuse href='%23j' transform='scale(2.3) rotate(180 0 0)'/%3E%3Cuse href='%23h' transform='scale(2.4) rotate(240 0 0)'/%3E%3Cuse href='%23j' transform='scale(2.5) rotate(300 0 0)'/%3E%3C/g%3E%3Cuse href='%23y' transform='scale(2) rotate(180 0 0)' /%3E%3Cuse href='%23j' transform='scale(2.7)'/%3E%3Cuse href='%23j' transform='scale(2.8) rotate(45 0 0)'/%3E%3Cuse href='%23j' transform='scale(2.9) rotate(90 0 0)'/%3E%3Cuse href='%23k' transform='scale(3.1) rotate(135 0 0)'/%3E%3Cuse href='%23k' transform='scale(3.2) rotate(180 0 0)'/%3E%3C/g%3E%3Cuse href='%23k' transform='scale(3.3) rotate(225 0 0)'/%3E%3Cuse href='%23k' transform='scale(3.5) rotate(270 0 0)'/%3E%3Cuse href='%23k' transform='scale(3.6) rotate(315 0 0)'/%3E%3Cuse href='%23k' transform='scale(3.7)'/%3E%3Cuse href='%23k' transform='scale(3.9) rotate(75 0 0)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;

}
  .product-page-image-container{
    background-color: red;
    height: 73%;
    width: 40%;

    margin-bottom: 10rem;

  }
  .product-page-image-container img{
    width: 100%;
    height: 100%;
  }
  .product-page-right-container{
    background-color: #EFEDEC;
    height: 73%;
    width: 40%;

    margin-bottom: 10rem;
    padding: 1rem;
    font-size: x-large;

    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
  }
    .product-page-right-container-buttons{
      /* align-self: flex-end; */

      display: flex;
      justify-content: space-between;
      /* flex-direction: column; */
      /* align-content: stretch;
      align-items: stretch; */
    }
    .product-page-right-container input{
      width: 3rem;
      text-align: center;
    }

/* CART PAGE */

.cart-page{
  /* background-color: red; */
  /* background-color: #EFEDEC; */
  /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23efedec'/%3E%3Cstop offset='1' stop-color='%23ffa500'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%23f7cca7'/%3E%3Cstop offset='1' stop-color='%23ffa500'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg %3E%3Cg transform='translate(0 195)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(-32.4 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.82' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover; */

  width: 100vw;
  /* height: 100%; */

  display: flex;
  flex-flow: row wrap;

  padding: 1rem;
}
  .cart-product-list{
    /* background-color: blue; */

    flex-grow: 3;
  }
  /* .cart-product-list img{
    width: 180px;
    height: auto; 
  }*/
  /* .cart-product-list table{
    display: flex;
  } */
  .cart-product-item{
    background-color: #EFEDEC;

    display: flex;

    flex-flow: row nowrap;
    justify-content: space-between;

    border-bottom: solid 1px;
    margin-bottom: 3px;
    margin-right: 3px;
  }
    .cart-product-item-left{
      display: flex;
      flex-flow: row;
    }
      .cart-product-item-left img{
        width: 160px;
        height: auto;
      }
      .cart-product-item-left-detail{
        display: flex;
        flex-flow: column;
        justify-content: space-between;

        margin: 1rem;
      }
    
    .cart-product-item-right{
      display: flex;
      flex-flow: column;
      justify-content: space-between;

      margin: 1rem;
    }
      .cart-product-item-right p{
        margin: 0;
      }
      .cart-product-item-right input{
        width: 3rem;
        text-align: center;
      }


  .cart-order-summary{
    color: #EFEDEC;
    /* background-color:#EFEDEC ; */
    flex-grow: 2;
    border: 1px #EFEDEC;
    /* height: 50%; */
    display: flex;
    flex-direction: column;
    /* justify-content: center; */


    text-align: center;
  }
    .cart-order-summary-card{
      background-color: #363636;
      padding: 10px;
      width: 100%;

      align-self: flex-start;
      top: 6rem;
      position: sticky;

      /* height: 50%; */
      align-self: center stretch;
      margin-bottom: 10rem;
    }