// Place all the styles related to the product_order controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
.btn-light{
  width: 100%;
  height: 44px;
  color: #434343;
  background-color: white;
  border: solid 1px #979797;
  border-radius: 0;
}

.non-user{
  margin-left: 12px;
}

.order-img{
  width: 110px;
  height: 110px;
}

.border-bottom-black{
  border-bottom: solid 2px #434343;
}

.form-group.row {
  padding-left: 4px;
  border-bottom: 1px solid #eaeaea;
}

.form-group.row > label{
  font-weight: bold;
}

.form-group.row > .col-8{
  margin-top: 1px;
}

.form-group.row > .col-8 > input{
  border: none;
  box-shadow: none;
  font-size: 14px;
}

.form-group.row > .col-8 > input#sample2_postcode{
  display: inline;
  width: 40%;
}

input[type="button"].btn-post{
  border: 1px solid #434343 !important;
  width: 108px;
  height: 36px;
  background-color: white !important;
  border-radius: 0 !important;
}

.form-control{
  color: black;
}

.order-card-row{
  margin: 16px 14px;
}

.order-card{
  height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #eaeaea;
  width: 112px;
}

.order-money{
  margin-top: -15px;
  width: 110px;
  margin-left: auto;
  border-bottom: 1px solid #c4c4c4;
}

.order-money input{
  text-align: right;
  border: none;
  width: 90px;
  padding: 0;
  margin-bottom: 1px;
  font-weight: bold;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.checklabel{
  position: relative;
  padding-left: 35px;
  display: block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox{
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark{
  position: absolute;
  top: 2px;
  left: 10px;
  height: 16px;
  width: 16px;
  background-color: white;
  border: 1px solid #979797;
  border-radius: 4px;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checklabel .checkmark:after{
  left: 3px;
  width: 8px;
  height: 10px;
  border: solid black;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.checklabel input:checked ~ .checkmark:after{
  display: block;
}

.pay-button{
  width: 156px;
  height: 48px;
  background-color: white;
  color: #434343;
  border: 1px solid #434343;
  font-weight: bold;
  cursor: pointer;
}

.pay-button:hover, .pay-button:focus{
  background-color: #434343;
  color: white;
  outline: none;
}

.btn-pay-finish{
  display: block;
  width: 320px;
  height: 57px;
  background-color: #434343;
  color: white;
  border: 1px solid #434343;
  margin: 0 auto;
  font-weight: bold;
}

.btn-pay-finish:hover, .btn-pay-finish:focus{
  color: black;
  cursor: pointer;
}

// complete

.complete-number{
  font-size: 48px;
  font-weight: bold;
  display: inline-block;
}

.complete-text{
  font-size: 14px;
}

.sns-img{
  width: 38px;
  height: 38px;
  margin: 0 10px;
}

.border-bottom-none{
  border-bottom: none !important;
}

#phoneCase > .dropdown > .dropdown-menu{
  min-width: inherit;
  width: 100%;
}

.scrollable-menu{
  height: auto;
  max-height: 200px;
  overflow-y: scroll;
}

#jellyCase.on{
  display: block;
}

#jellyCase.off{
  display: none;
}

#hardCase.on{
  display: block;
}

#hardCase.off{
  display: none;
}

.select-phone{
  border-radius: 4px;
  height: 28px;
  border: solid 1px #c4c4c4;
  font-size: 12px;
  padding: 2px 12px;
}

select:focus{
  outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
