/* 
* Layout Styles 
*/

.col-3{
    width: 33.33%;
}
.col-6{
    width: 50%;
}
.col-9{
    width: 66.66%;
}
#form-results .col-6{
    width: 50%;
    display: flex;
    justify-content: center;
}
@media (max-width: 569px){
    .col-3,
    .col-6,
    .col-9{
        width: 100%;
    }
}

#configurator{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

#configurator-form{
    width: 100%;
    background-color: #002A4D;
    padding: 2rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    max-height: 30rem;
}

#form-results{
    margin-top: 1rem;
    width: 100%;
}

@media ( min-width: 992px){
    #configurator-form{
        width: 50%;
        margin-bottom: 0;
    } 
    #form-results{
        width: 50%;
    }
    #form-results .cbs-card{
        margin-right: 1rem;
        margin-left: 1rem;
    }
}

#form-results .cbs-card{
    width: 100%;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    padding: 2rem;
}

/* 
* Form Styles 
*/


#configurator-form label{
    display: block;
    width: 100%;
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
    padding-top: 0.5rem;
}

#configurator-form select{
    display: block;
    width: 100%;
    border: none;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    outline: none;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
}

#reset{
    color: #fff;
    text-decoration: underline;
    margin-top: 2rem;
    font-weight: 500;
    font-size: 0.75rem;
    cursor: pointer;
}

#configurator-form select.select-custom {
    position: relative;
    border: 1px solid #777;
    border-radius: .25rem;
    background-color: #fff;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.1;
}

#configurator-form .select-custom-wrapper {
    position: relative;
}

#configurator-form .select-custom-wrapper::after {
    position: absolute;
    display: block;
    content: '';
    right: .8rem;
    top: 3rem;
    width: 1.1rem;
    height: .8rem;
    background-color: #777;
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    pointer-events: none;
}

#configurator-form .list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border-radius: 0.25rem;
    border: 1px solid #777;
    position: absolute;
    top: 34px;
    width: 100%;
    z-index: 1;
}

#configurator-form .list-item {
    display: flex;
    align-items: center;
    font-size: 1rem;
    line-height: 2.4;
    padding: 0 15px;
    border-bottom: 1px solid #777;
    border-color: #777;
    background-color: #fff;
    cursor: pointer;
    width: 100%;
    min-height: 75px;
}

#configurator-form .list-item:nth-child(2) {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

#configurator-form .list-item:last-child {
  border-bottom: none;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

#configurator-form .list-item img {
  width: 60px;
  max-height: 60px;
  object-fit: contain;
  height: auto;
  margin: 0.8rem;
}

#configurator-form .list-item:hover {
  background-color: rgb(235, 235, 235);
}

#configurator-form .list-item-first {
  display: none;
}

/* 
* Product Card Styles 
*/
@media (min-width: 991px){
    .current-selection{
        padding: 2rem;
    }
}

#form-results .freezer-image{
    width: 200px;
}
#form-results .freezer-selection{
    width: 200px;
}
#form-results .freezer-title{
    width: 100%;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 600;
    padding-bottom: .8rem;
}
@media (max-width: 569px){
    #form-results .freezer-title{
        font-size: 1.4rem;
    }
}
#form-results .selection-title,
#form-results .box-info-title{
    width: 100%;
    font-size: 1.4rem;
    font-weight: 600;
    padding-bottom: .8rem;
}
#form-results .cbs-title,
#form-results .box-info-title{
    font-size: 1.4rem;
    font-weight: 500;
    width:100%;
}
#form-results .cbs-sku,
.box-sku{
    font-size: 1rem;
}
#form-results .cbs-price, 
.box-price{
    font-weight: 500;
    font-size: 1.2rem;
}
@media (max-width: 569px){
    .cbs-image{
        padding-top: 1rem;
    }
}
#form-results .view-cbs-product{
    background-color: #00ace5;
    border: none;
    border-radius: 4px;
    padding: 8px 20px;
    min-width: 200px;
    margin-top: 1rem;
}
#form-results .view-cbs-product a{
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
}
#form-results .rack-dimesion{
    color:#606060; 
    margin-right: 15px; 
    font-weight: 600;
}
.cbs-specs {
    list-style: none;
}
@media (max-width: 569px){
    .cbs-specs{
        padding: 0;
    }
}

.freezer-spec-container,
.rack-spec-container,
.box-container{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.box-sku{
    width: 100%;
}

@media (max-width: 569px){
    .rack-spec-container .cbs-title,
    .box-container .box-info-title{
        order: 1;
    }
    .rack-spec-container .col-3,
    .box-container .col-3{
        order: 3;
    }

    .rack-spec-container .col-6,
    .box-container .col-6{
        order: 4;
    }
    .box-sku{
        order: 2;
    }
}

#configurator-form .error{
    color: red;
    padding-top: 0.5rem;
    font-size: 14px;
}