/*
Theme Name: Bell House Divi Child
Theme URI:  https://www.bellhousefabrics.co.uk
Author:     Adams Group
Author URI: https://www.adams.uk.com
Template:   Divi
Version:    2.0
License:    GNU General Public License v2 or later
*/


#custom-commission-settings-inner-body .row .col-sm-6 {
    padding-right:0px ;
    padding-left: 0 ;

    padding-top: 1%;
    padding-bottom: 1%;
}


#custom-commission-settings-inner-body .row .col-sm-6 {
    padding-right:0px ;
    padding-left: 0 ;

    padding-top: 1%;
    padding-bottom: 1%;
}


 .custom-commission-settings-div .jumbotron h1 {
font-size: 3em;

}

.custom-commission-settings-div .container {
    display: flex;
    justify-content: center;
    align-items: center; 
    }
    
.bellhouse-components-div input, .bellhouse-components-div select  {
    border: 1px solid black !important;
}

.calc-options__container{
    display: none !important;
}

.bellhouse-components-div{
    background-color: white !important ;
}

.bellhouse-components-div .options__list {

list-style-type: none !important; /* Remove bullets */
padding: 0; /* Remove padding */
margin: 0; /* Remove margins */
}

 #Heading .option__image{
    height: 150px !important;
}

.accordion-header:not(.header-green){
    border: 1px solid black;
    padding: 0;
}

.header-green{
    background: green !important ;
    color: white !important;
    font-size: 18px !important;
}

.header-green .accordion-button {
    background: green;
    color: white;
    font-size: 18px !important ;
  }
  
  .header-green  .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important ;
  }

  

  
@media only screen and (max-width: 768px) {

    .option-guide__image{
      width: 100% !important;
    }

    .option-guide__content{
        width: 100% !important;
    }
  
  }

 #curtains-accordion  .option-guide__image{
    display: flex;
    justify-content: center;
  }

  .curtains-lining-info h5{
    margin-top: 0.5em;
  }

  .curtains-lining-info p{
    margin-bottom: 0;
  }
/* 
  .modal-dialog {
    max-width: 90%;
  }
  .modal-dialog-slideout {
    min-height: 100%;
    margin: 0 0 0 auto;
    background: #fff;
  }
  .modal.fade .modal-dialog.modal-dialog-slideout {
    -webkit-transform: translate(100%, 0)scale(1);
    transform: translate(100%, 0)scale(1);
  }
  .modal.fade.show .modal-dialog.modal-dialog-slideout {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    display: flex;
    align-items: stretch;
    -webkit-box-align: stretch;
    height: 100%;
  }
  .modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
  }
  .modal-dialog-slideout .modal-content {
    border: 0;
  }
  .modal-dialog-slideout .modal-header,
  .modal-dialog-slideout .modal-footer {
    height: 4rem;
    display: block;
  } */


  .modal.fade .modal-dialog {
    transition: transform .6s cubic-bezier(.8100000000000001,.01,.15,.99);
    transform: translateX(100%);
}

.modal.show .modal-dialog {
    transform: translateX(0); 
}

.modal{
  min-height: 100%;
}

.modal-dialog{
  margin: 0 0 0 auto;
  min-height: 100%;
}
/* 
.bellhouse-components-div .modal-dialog-scrollable .modal-content{
  min-height: 100%;
}  */

#main-header{
  z-index: 1 !important;
}

.modal-body div{
  border-top: 0px;
}

.modal-body{
  padding: 0;
}

.btn h5{
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.mtm-option-div{
  background: white;
  padding: 10px;
  margin: 10px;
}

.bellhouse-components-div  * {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
}

.bellhouse-components-div ul li {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 300 !important; /* Light weight */
  letter-spacing: normal !important;

}

/* --- Majesti Banner Light --- */

/* MAJESTI BANNER LIGHT (Default letterspacing) */
.majesti-banner-light {
  font-family: 'Majesti Banner Light', serif !important; /* Fallback to a generic serif font */
  font-weight: 300 !important; /* Light weight */
  letter-spacing: normal !important; /* Default browser letter-spacing */
}

/* MAJESTI BANNER LIGHT (With a lot of letterspacing) */
.majesti-banner-light-extra-space {
  font-family: 'Majesti Banner Light', serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.1em !important; /* Increased letter-spacing */
}

/* --- Open Sans --- */

/* OPEN SANS SEMI BOLD (Default letterspacing) */
.open-sans-semi-bold {
  font-family: 'Open Sans', sans-serif !important; /* Fallback to a generic sans-serif font */
  font-weight: 600 !important; /* Semi-Bold weight */
  letter-spacing: normal !important; /* Default browser letter-spacing */
}

/* OPEN SANS SEMI BOLD (With a lot of letterspacing) */
.open-sans-semi-bold-extra-space {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important; /* Increased letter-spacing */
}

/* OPEN SANS REGULAR (Default letterspacing) */
.open-sans-regular {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 400 !important; /* Regular weight */
  letter-spacing: normal !important;
}

/* OPEN SANS REGULAR (With a lot of letterspacing) */
.open-sans-regular-extra-space {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
}

/* OPEN SANS LIGHT (Default letterspacing) */
.open-sans-light {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 300 !important; /* Light weight */
  letter-spacing: normal !important;
}

/* OPEN SANS LIGHT (With a lot of letterspacing) */
.open-sans-light-extra-space {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.1em !important;
}

/* --- General Open Sans Classes with Letterspacing --- */

/* OPEN SANS with general letterspacing (can be combined with font-weight for Regular or Semi Bold) */
/* Use this class on a container, then apply specific font-weight to children */
.open-sans-text-with-letterspacing {
  font-family: 'Open Sans', sans-serif !important;
  letter-spacing: 0.02em !important; /* Subtle letter-spacing for readability */
}

/* Example usage for "OPEN SANS REGULAR & SEMI BOLD / WITH LETTERSPACING" */
/* Apply 'open-sans-text-with-letterspacing' to the parent element,
 then use 'font-weight: 400;' for regular text and 'font-weight: 600;' for semi-bold text within it. */
/* E.g., <p class="open-sans-text-with-letterspacing">This is regular text. <strong>This is semi-bold.</strong></p> */

/* --- Text Color Classes --- */

/* BONE: R215 G211 B199 */
.text-color-bone {
  color: rgb(215, 211, 199) !important;
}

/* BACKGROUND: R242 G239 B236 */
.text-color-background {
  color: rgb(242, 239, 236) !important;
}

/* OLIVE: R113 G112 B60 */
.text-color-olive {
  color: rgb(113, 112, 60) !important;
}

/* MIDNIGHT: R25 G26 B59 */
.text-color-midnight {
  color: rgb(25, 26, 59) !important;
}

/* PINK CLAY: R219 G182 B161 */
.text-color-pink-clay {
  color: rgb(219, 182, 161) !important;
}

/* LEMON: R215 G206 B40 */
.text-color-lemon {
  color: rgb(215, 206, 40) !important;
}

/* JAM: R107 G0 B41 */
.text-color-jam {
  color: rgb(107, 0, 41) !important;
}

/* --- Background Color Classes --- */

/* BONE Background: R215 G211 B199 */
.bg-color-bone {
  background-color: rgb(215, 211, 199) !important;
}

/* BACKGROUND (page background color) Background: R242 G239 B236 */
.bg-color-background {
  background-color: rgb(242, 239, 236) !important;
}

/* OLIVE Background: R113 G112 B60 */
.bg-color-olive {
  background-color: rgb(113, 112, 60) !important;
}

/* MIDNIGHT Background: R25 G26 B59 */
.bg-color-midnight {
  background-color: rgb(25, 26, 59) !important;
}

/* PINK CLAY Background: R219 G182 B161 */
.bg-color-pink-clay {
  background-color: rgb(219, 182, 161) !important;
}

/* LEMON Background: R215 G206 B40 */
.bg-color-lemon {
  background-color: rgb(215, 206, 40) !important;
}

/* JAM Background: R107 G0 B41 */
.bg-color-jam {
  background-color: rgb(107, 0, 41) !important;
}


.bellhouse-components-div .modal-body{
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.bellhouse-components-div .modal-body .col-xl-3{
  background-color: white !important;
  display: flex;
  align-items: center;
}


.bellhouse-components-div .modal-body .col-sm-9{
  padding-left: 75px;
  padding-right: 40px;
}

@font-face {
  font-family: 'Majesti Banner Light'; /* This is the name you'll use in your CSS */
  src: url('assets/fonts/Majesti-Banner/Majesti-Banner-Light.otf') format('opentype'); /* Path to your .otf file */
  font-weight: 300; /* Adjust this if the font is a different weight */
  font-style: normal;
  font-display: swap; /* Recommended for better user experience */
}

.bellhouse-components-div .modal-header {
display: none !important;
}

.bellhouse-components-div .modal-footer {
display: none !important;
}

.bellhouse-components-div .modal-body h2:first-of-type {
  margin-top: 5vh !important;
}

.confirm-selection-button{
  width: 250px;
  height: 36px;
  border-color: rgb(25, 26, 59) !important;
  border: 1px solid;;
  color: rgb(25, 26, 59) !important;
  background-color: white !important;
  text-transform: uppercase !important;
  
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important; /* Increased letter-spacing */
}

.bellhouse-components-div input[type]:not([type="checkbox"]), .bellhouse-components-div select {
  background-color: rgb(242, 239, 236) !important;
  border-radius: 0px !important;
  accent-color: #007bff; /* Change this to your desired color (e.g., blue, green, #FF0000) */
  
}
/* 
.bellhouse-components-div input[type="radio"] {
  background-color: white !important;
  border: default !important;
  
} */
/* 
.spinner {
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-left-color: #3498db;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  animation: spin 1s linear infinite;
  margin-left: 5px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
} */

@media (min-width: 981px) {
  .bellhouse-components-div .container:before {
      content: "";
      position: absolute;
      top: 0;
      height: 100%;
      width: 0px !important;
      background-color: #e2e2e2;
  }
}


.mtm-option-div label{
  width: 100% !important;
}

.modal-dialog{
      margin: 20px 0 0 auto !important;
    min-width: 80% !important;
    min-height: 98% !important;
}

@media screen and (max-width: 1200px) {
    .modal-dialog {
        margin: 0 !important;
        min-width: 100% !important;
        min-height: 100% !important;
    }

.bellhouse-components-div .modal-body .col-xl-3{
  background-color: white !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 30px !important;
}

.bellhouse-components-div .modal-body .col-xl-3 > div {
  width: 100% !important;
  text-align: center;

}

.confirm-selection-button{
  height: 36px;
  border-color: rgb(25, 26, 59) !important;
  border: 1px solid;;
  color: rgb(25, 26, 59) !important;
  background-color: white !important;
  text-transform: uppercase !important;
  
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important; /* Increased letter-spacing */
}

    .modal{
      padding: 0 !important;
    }

    .bh-mtm-form .modal-content {
        height: 100%;
    }
    .bh-mtm-form .modal-body {
        overflow-y: auto;
    }
  
}

.bh-mtm-form input[type="number"]::after{
      content: 'cm';
    position: absolute;
    top: 18px;
    right: 10px;
    font-size: 1.3rem;
    line-height: 1;
    letter-spacing: .001em
}


.icon-tooltip {
    width: 18px !important;
    height: 18px !important;
    background: 0 0 !important;
    border: 2px solid #000 !important;
    color: #000 !important;
    border-radius: 50% !important;
    display: inline-block !important;
    margin-left: 5px !important;
    position: relative !important;
    margin-bottom: -3px !important;
    cursor: pointer !important;
    font-size: 1.3rem !important;
    font-family: 'UntitledSansMedium' !important;
}

.icon-tooltip.hidden {
    display: none
}

.icon-tooltip:after {
    content: 'i' !important;
    position: absolute !important;
    top: 2px !important;
    left: 50% !important;
    text-align: center !important;
    font-size: 1.2rem !important;
    display: block !important;
    letter-spacing: 0 !important;
    -webkit-transform: translateX(-50%) !important;
    -moz-transform: translateX(-50%) !important;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%) !important;
}

.bellhouse-components-div .input-group-text{
  margin-bottom: 0.5rem !important;
  border: 1px solid black !important;
  background-color: rgb(242, 239, 236) !important;
  border-radius: 0px !important;
}

.modal:nth-of-type(even) {
    z-index: 1062 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1061 !important;
}