.meblokonf *{
   box-sizing: border-box;
}

.meblokonf h2 {
   font-size: 18px;
   margin: 0 -15px;
   text-align: center;
   padding: 5px;
   background: #f0f0f0;
   border-bottom: 1px solid #e5e5e5;
}

.meblokonf h3 {
   font-size: 17px;
   margin: 5px 0;
}

#configModal.modal {
   overflow-y:hidden;
}
.meblokonf .modal-body {
   padding-top: 0;
   overflow: auto;
}

.meblokonf .modal-dialog {
   max-width: 90%;
}

.meblokonf .modal-header {
   display: flex;
   justify-content: space-between;
}

.meblokonf .variant-group-button {
   width: 30%;
   text-align: left;
   border: 1px solid #ccc;
   padding: 10px 10px 10px 18px;
   display: block;
   cursor: pointer;
   position: relative;
   border-radius: 2px;
}

.meblokonf .variant-group-button .selected-material {
   font-size: 12px;
}

.meblokonf .variant-group-button .selected-image {
   float: right;
   width: 40px;
   height: 40px;
   background-size: cover;
   border-radius: 2px;
}

.meblokonf .variant-group-button .step-number {
   position: absolute;
   top: 3px;
   left: 5px;
   font-weight: bold;
   font-size: 20px;
   color: #ccc;
}

.meblokonf .variant-group-button .selected-material {
   display: block;
}

.meblokonf .variant-group-button.current {
   border-color: red;
}

.meblokonf .variant-group-button.current .step-number {
   color: red;
}

.meblokonf .materials-list {
   display: flex;
   flex-wrap: wrap;
}

.meblokonf .materials-list .material {
   width: 132px;
   cursor: pointer;
   padding: 10px;
   border: 2px solid transparent;
   border-radius: 8px;
   position: relative;
}

.meblokonf .materials-list .material .price-impact {
   position: absolute;
   top: 15px;
   left: 14px;
   font-size: 10px;
   background: rgba(255, 255, 255, 0.7);
   padding: 2px;
   border-radius: 4px;
}

.meblokonf .materials-list .material .material-image {
   width: 110px;
   height: 100px;
   background-size: cover;
   background-position: center center;
   border: 1px solid #ccc;
   border-radius: 8px;
}

.meblokonf .materials-list .material .caption {
   font-size: 11px;
   text-align: center;
   display: inline-block;
   width: 100%;
}

.meblokonf .materials-list .material.selected {
   border-color: #0C4A86;
   box-shadow: inset 0px 0px 5px #0C4A86;
}

.meblokonf .materials-list .material .zoomin {
   position: absolute;
   top: 10px;
   right: 10px;
   width: 25px;
   height: 25px;
   text-align: center;
   line-height: 25px;
}

.meblokonf .materials-list .material .zoomin a {
   display: block;
}

.meblokonf .materials-list .material .zoomin i {
   color: #fff;
   text-shadow: 1px 1px 2px #666;
}

.meblokonf .materials-list .material .zoomin a:hover i {
   transform: scale(1.2);
}

#configModal h4 {
   margin: 0;
}

.meblokonf .modal-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

/*
.conf-prices {
   float: left;
   margin-left: 10px;
}
*/

.conf-price-display {
   font-weight: bold;
   color: red;
   font-size:20px;
}

.conf-old-price-display {
   text-decoration: line-through;
}

#configClose {
   margin-right: auto;
}

#configAddToCart {
   color: #fff;
   margin-left: auto;
}

@media (max-width: 480px) {
   .meblokonf .variant-group-button {
      width: 100%;
      padding-top: 2px;
      padding-bottom: 2px;
   }
   .meblokonf .materials-list .material {
      width: 100px;
   }
   .meblokonf .materials-list .material .material-image {
      width: 78px;
   }
}

#meblokonf-overlay {
   width: 100%;
   height: 100%;
   position: fixed;
   top:0;
   left: 0;
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Dual ring */
.lds-dual-ring {
   display: inline-block;
   width: 80px;
   height: 80px;
}
.lds-dual-ring:after {
   content: " ";
   display: block;
   width: 64px;
   height: 64px;
   left: auto;
   top: auto;
   margin: 8px;
   border-radius: 50%;
   border: 6px solid #2fb5d2;
   border-color: #2fb5d2 transparent #2fb5d2 transparent;
   animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}