html{
  min-height: 100%;
}
.form{
    border: 2px dashed #000;
    border-radius: 5px;
  position: relative;
  top: 50%;
  margin-top:50px;
  width: 100%;
  height: 200px;
  
}
.form p{
  width: 100%;
  text-align: center;
  line-height: 50px;
  font-family: Arial;
}
.form input{
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
  margin-left:-50%;
  background:red;
}
.custom-selection{
    background-color: #eee;
    margin:5px;
    cursor:pointer;
}
.custom-selection i{
    color:#162F4B;
    padding-bottom:5px;
    font-size: 2rem;
}

.custom-selection span{
  color:#162F4B;
  font-size: 0.875rem;
}


.custom-selection:hover{
  background-color: #f44336;
}

#result{
    width:100%;
}
.thumbnail{
    float:left;
    width: 100px;
    margin: 10px;    
}


.bg-gradient-primary {
  height: 100%;
  background-color: #F68620;
  background-size: cover

}

.customActive {
background-color: #f44336;

}
.customActive i{
  color: #fff; 
}
.customActive span{
  color: #fff; 
}

.noncustomActive {
background-color: #eee;

}
.noncustomActive i{
  color: #162F4B; 
}
.noncustomActive span{
  color: #162F4B; 
}


.bg-custom{
   background-color: linear-gradient(60deg, #F68620, #F68620);
 }