@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100;300;400;500;700;900&display=swap');
:root{
  --blue-theme-0: rgba(11,60,74);
  --blue-theme-1: rgba(17,79,102);
  --blue-theme-2: rgba(40,130,157);
  --blue-theme-3: rgba(147,183,205);
  --blue-theme-4: rgba(240,240,248);

  --card-bg-color: #F9F7F7;
  --bg-color: #DBE2EF;
  --text-color: #112D4E;
  /* --border-color: #3F72AF; */
  --border-color: #0776fd;


}
.noproduct-message{
  font-size: calc(2rem +  5vw);

}
.mt2rem{
  margin-top: 2rem;
}

*{
  font-family: 'League Spartan', sans-serif;
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
 body{
  min-height: 100vh !important;
  position: relative;
  padding-bottom: 10rem;
  background-color: var(--bg-color);
  /* background-image: linear-gradient(to bottom right , var(--blue-theme-4),var(--blue-theme-3)); */
  /* background-color: var(--blue-theme-0); */
}
.row.stores {
  background-color: cornflowerblue;
  /* background: radial-gradient(circle, cornflowerblue 0%, rgba(63,94,251,1) 100%); */
  background: linear-gradient(to right, #000046, #1cb5e0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  /* background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%); */
  padding: 2rem 1rem;
}
.stores-container {
  width: 100%;
  max-width: 950px;
  padding: 1rem .5rem;
  margin: 1rem;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
.stores-products-list{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: left;
  height: 100% !important;
}
.stores-product{
  flex-basis: calc(100% / 2);
  padding: .4rem;
}
.stores-product img {
  object-fit: cover;
  width:100%;
  max-height: 200px;
  border-radius: 10px;
  border-radius: 10px;
}
.store-name {
  font-size: calc(1.1rem + 1vw);
  text-transform: uppercase;
  margin-left: .4rem;
}
.store-name a {
  text-decoration: none;
  color: rgb(77, 77, 77);
}
.product-details {
  display: flex;
  flex-direction: column;
}
.product-add {
  padding: 0 1rem;
}

:root{
  --maxwidth: 950px;
  --boxshadow:     rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.break-all{
    word-break: break-all;
}



/* CARD STYLING BEGIN */



.row.products{
  padding: 0 1rem 2rem;
}
.products-container{
  width: 100%;
  max-width: 950px;
    padding: 1rem 0.5rem;
    margin: 1rem;
}
.product-bracket{
  margin: 2rem 0;
}
.card-list{
  max-width: 950px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  column-gap: 1rem;
}

.card-v2{
  width: 100%;
  padding: .5rem;
  border-radius: 10px;
  transition: 200ms border;
  border:3px solid rgba(0,0,0,0);
  box-shadow: 0 2px 0.375rem 0 rgba(37,51,66,.2);
  color: var(--text-color);
  background-color: var( --card-bg-color);
  margin-bottom: 1rem;
  position: relative;

}

.card-v2:hover{
  border: 3px solid var(--border-color);
  box-shadow: 0 2px 0.375rem 0 cornflowerblue;

}
.card-v2-body {
  width: 100%;
  height: 11.625rem;
  margin: auto;
  object-fit: contain;
}
.card-v2-footer a {
  /* color: #253342; */
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  height: 46px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  color: var(--text-color);
}


.card-v2-participants {
  position: absolute;
  top: .5rem;
  right: .5rem;
  border-radius: 10px;
  padding: 3px 5px 1px;
  background-color: yellowgreen;
  color: #000046;
  text-align: center;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  font-weight: bold;
}



.card-v2-table {
  display: table;
  border-collapse: collapse;
  text-align:center;
  width:100%;
}
.card-v2-row {
  display: table-row;
}
.card-v2-header {
  font-weight: bold;
}
.card-v2-cell {
  display: table-cell;
  padding: 5px;
}
/* .card-v2-price-table{
  display:table;
  width:100%;
  table-layout:fixed;
  margin-top: 4rem;
  text-align: center;
}
.card-v2-price-table tr:nth-child(2){
  font-weight: 900;
  font-size: 1.2rem;
} */

/* CARD STYLING END */


/* BID STYLING BEGIN */




.bid-container {
  display: flex;
  flex-direction: row;
}
.bid-input {
  width: 100%;
  flex:1;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0   .5rem;
  border-radius: 10px 0 0 10px;
  border: 3px solid rgba(128, 128, 128, 0.342);
  border-right: 1px solid rgba(255, 0, 0, 0);
  background-color: #00000000;
  box-shadow: none;
}
.bid-input:focus{
  outline: none;
}
.bid-button {
  margin-left: .5rem;
  transition: all 300ms;
}

/* BID STYLING END */
.row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


nav {
  width: 100%;
  max-width: var(--maxwidth);
  /* background-image: linear-gradient(to top, #ddd, #fff 10%); */
  display: flex;
  /* align-content: space-around; */
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  margin:1rem;
  margin-top: 5rem;
 }
nav .logo {
  font-weight: 700;
  font-size: 2rem;
  color: cornflowerblue;
  text-decoration: none;

}

/* .stores {
  width: 100%;
  max-width: var(--maxwidth);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  border-radius: 10px;
  padding: 2rem 1rem;
  margin: 1rem;
} */
.wrapper-3rem{
  margin: 3rem;
}
section{
  /* width: 100%; */
  max-width: var(--maxwidth);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  border-radius: 10px;
  padding: 1rem;
  margin: 1rem;
  background-color: #fff;
}
.section-h3 {
  font-weight: 300;
  margin-bottom: 2rem;
  font-size: 3rem;
  display: block;
}

.user-profile {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
 .profile-img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
  margin: .3rem;
}
.user-products {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  margin-bottom: 1.5rem;
}
.product-item{
  display: flex;
  flex-direction: row;
  margin: .5rem;
}
.product-item img {
  width: 75px;
  height: 75px;
  object-fit: cover;
  margin-right: .4rem;
}
.product-title{
  word-wrap: break-word;
  font-weight: 500;
}
.product-details table {
  color: #a8a8a8
}
.product-details table  tr:nth-child(2){
  font-size: .8rem;
}
.product-details table tr:nth-child(1) td:nth-child(2),
.product-details table tr:nth-child(2) td:nth-child(2){
  padding-left: 1rem;
}

.custom-list{
  cursor: pointer;
  position: relative;
  display:  block;
  line-height: 1rem;

}
.custom-list ul {
  display: none;

	position: absolute;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  top: 1rem;
  right: 0;
  width: 100px;
  text-align: center;
}
.custom-list:hover ul {
  display:inherit;
}
.custom-list ul li {
  padding: 1rem .5rem;

  list-style: none;
}
.custom-list ul li:hover{
  background-color: #aaa;
}
.custom-list ul a {
  text-decoration: none;

}
.danger {
  color: rgb(247, 49, 49);
  font-weight: 900;
}

footer{
  padding: 5rem;
  text-align: center;
  background-image: linear-gradient(to top,#0000003f  , #00000000);

}
.m-center{
  text-align: center;
}
.m-header {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}
.m-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem 2rem;

}
.m-form .submitted{
  width: 100%;
}
.m-form.w100{
  width: 100%;
}
.m-form input {
  border: 1px solid #b8c2cc;
  border-radius: 4px;
  font-size: 16px;
  padding: 1rem;
  height: 20px;
  line-height: 20px;
}
.m-form input:not(.m-form-license input){
  width: 100%;
}
/* .m-form  button {
  width: 100%;
  padding: 15px;
  font-size: 16px;
  border-radius: 8px;
  height: 64px;
  background-color: cornflowerblue;
  outline: none;
  border: 1px solid #b8c2cc;
  background-color:rgb(51, 117, 238);
  font-weight: 900;
  color: #fff;
} */


.m-form  .m-form-license{
  display: flex;
  margin-top: 1rem;
  margin-bottom: 1rem;
  align-items: center;

}

.m-form-license input[type=checkbox]{
  margin-right: .5rem;
  width: 25px;
  height: 25px;
}
.m-form .m-form-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: .4rem;
}
.m-form .m-form-item-group{
  display: flex; flex-direction: column;
   width: 100%;
}
footer {
  bottom: 0;
  left: 0;right: 0;
  position: absolute;
}
footer a{
  text-decoration: none;
}
/* PRODUCT ADD */
.selected-images-area{

  min-height: 70px;
  padding: .5rem;
  border: 3px dashed cornflowerblue;
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(4 , 1fr);
  column-gap: .5rem;
  row-gap: .5rem;
}
.selected-images-area > img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;

}

.m-form-h-label{
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: .5rem;
  margin-bottom: .5rem;
  display: block;
  width: 100%;

}
.m-form-error {
  padding: .5rem;
  border-radius: 10px;
}
.m-form-error p {
  line-height: 1.5rem;
}
.m-form-error.yellow {
  background-color: rgba(255, 187, 0, 0.507);
  border: 3px solid #ffbf00;
  color: gray;
}
.m-form-error.red {
  /* background-color: #ff6a6a; */
  background-color: rgba(255, 0, 0, 0.507);
  border: 3px solid #ff1717;
  color: black;
}
.m-form-datepicker{
  display: grid;
  grid-template-columns: repeat(7,1fr);
  column-gap: .5rem;
  position: relative;
}

.m-form-invisible{
  display: none;
}
.m-form-enddate {
width: 100%;
text-align: center;
margin-top: .5rem;
margin-bottom: .5rem;
}
.m-datepicker-item{
  cursor: pointer ;
  padding: 1rem;
  border-radius: 10px;
  background-color: rgba(128, 128, 128, 0.329);
  color: #000;
  text-align: center;
  font-weight: bold;
  font-size: 1.5rem;
  transition: background-color 300ms;
}
.m-datepicker-item:hover{
  background-color: rgba(128, 128, 128, 0.637);
}
.m-datepicker-item.active{
  background-color: cornflowerblue;
  color: #fff;
}
.confirming-page{
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.w-100{
  width: 100%;
}
.m-flex{
  display: flex;
}
.m-align-center {
  align-items: center;
}
.m-justify-center{
  justify-content: center;
}
.svgcontainer{
  width: min-content;
  height: min-content;
  background-color: red;
}
.spinner {

  animation: rotate 2s linear infinite;
  z-index: 2;

  width: 50px;
  height: 50px;
}
.spinner.small {
  width: 13px;
  height: 13px;
}
.spinner .path {
  stroke: #93bfec;
  stroke-linecap: round;
           animation: dash 1.5s ease-in-out infinite;
}

.switch-button {
  width: 3rem;
  height: 1.5rem;
  border-radius: 1.5rem;
  padding: 4px;
  transition: all 300ms;
  position: relative;
  background-color: rgba(128, 128, 128, 0.26);
}
.switch-button-container{
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.switch-button-container p{
  margin-right: 1rem;
}
.switch-ball{
  position: absolute;
  left: 4px;
  background-color: rgb(255, 255, 255);
  width: 1rem;
  height: 1rem;
  border-radius: .5rem;
  transition: all 300ms;
}
.switchbox{
  display: none;
}
.switchbox:checked ~ .switch-button{
  background-color: cornflowerblue !important;
}
.switchbox:checked ~ .switch-button > .switch-ball{
  left: calc(2rem - 4px) !important;
}


.storename.hidden {
  display: none;
  max-height: 0px;
}
.storename.visible {

  max-height: 100%;
}

/* DATePICKER STYLING */


.date-list {
  display: flex;
 align-items: stretch;
 flex-direction: column;
  gap:.5rem;

}
.date {
cursor: pointer;
  background-color: gray;
  color: #fff;
  padding: .5rem;
  transition: 300ms background-color;
  border-radius: 10px;
  line-height: 1rem;

}
.date.active {
  background-color: cornflowerblue;
}



@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
@media screen and (min-width:450px) {
  /* .card-list{
    display: grid;
      grid-template-columns: repeat(2, 1fr);
  } */
  .card-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
  }
  .stores-product{
    flex-basis: calc(100% / 3);
  }
  .m-form .m-form-item-group{
    flex-direction: row;
  }
}
@media screen and (min-width:800px) {
  /* .card-list{
    display: grid;
      grid-template-columns: repeat(3, 1fr);
  } */
  .card-list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1rem;

  }
}