@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root {
    --theme-color: #000000;
    --secondary-color: #323B4B;
}
* {
    margin: 0;
    padding: 0;
    user-select: none;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: "Inter", sans-serif;
}
p {
    margin-bottom: 0;
}

.mainParent {
    height: 100vh;
    display: grid;
    grid-template-columns: 75% 25%;
    align-items: center;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    position: relative;
}
.iframeBox {
    height: 100%;
    position: relative;
    background-color: rgb(243, 243, 243);
}
.iframeTopRightBtnBox {
    position: absolute;
    top: 40px;
    right: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.topIcon {
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 50%;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.iframeBotomIconBox {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 50px;
    padding: 5px 10px;
}
.iframeBotomIcon img {
    width: 20px;
}
.iframeBotomIcon {
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.iframeBotomIcon:hover {
    background-color: lightgray;
}
.configBox {
    height: 100vh;
    overflow-y: auto;
    position: relative;
    transition: all 0.3s ease-in-out;
}
.configBox::-webkit-scrollbar {
    width: 0;
}

/* BS CODE */
.accordion {
    /* max-height: 800px;
    height: 100%; */
    overflow-y: auto;
}
.accordion::-webkit-scrollbar {
    width: 0;
}
.accordionBtn {
    font-size: 20px;
    color: var(--secondary-color) !important;
    border-radius: 0 !important;
    padding: 25px 15px;
}
/* .accordionItem {
    margin: 10px 0;
} */
.accordion-button::after {
    background-image: url('./asset/icons/plus.png');
}
.accordion-button:not(.collapsed)::after {
    background-image: url('./asset/icons/minus.png');
}
/* .accordion-button::after {
    filter: brightness(100);
} */
.accordion-item {
    border: none !important;
    background-color: transparent !important;
    border-bottom: 3px solid rgb(238, 238, 238) !important;
}
.accordion-button:focus, .accordion-button:not(.collapsed) {
    box-shadow: none !important;
    background-color: white;
}
.accordion-body {
    padding: 10px 15px;
}
/* BS CODE */
.myTooltip {
    position: relative;
}
.myTooltip:hover::before {
    /* top: 100%; */
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease;
}
.myTooltip::before {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    min-width: max-content;
    background: white;
    color: gray;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 12px;
    content: attr(tooltip-text);
    transition: all 0.3s ease;
    z-index: 9;
    border: 1px solid lightgray;
    border-radius: 20px
}
.myTooltip.top::before {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
}
.myTooltip.right::before {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
}
.myTooltip.bottom::before {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}
.myTooltip.left::before {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.summaryBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 15px;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    background-color: white;
    border-bottom: 1px solid lightgray;
}
.selectedConfigBox {
    display: flex;
    justify-content: center;
    gap: 5px;
}
#selectedStyle {
    font-size: 20px;
    font-weight: 600;
    color: black;
}
#selectedSize {
    font-size: 20px;
    /* font-weight: 600; */
    color: black;
}
.selectedStyle {
    font-weight: 600;
    font-size: 20px;
}
.selectedSize {
    font-size: 20px;
}
.yourPriceTxt {
    color: lightgray;
    font-size: 12px;
    padding: 8px 0;
}
.calculatedPrice {
    color: #000000;
    padding-bottom: 5px;
    font-weight: 700;
    font-size: 22px;
}
.sumBtnsBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
.sumBtns {
    border: 1px solid black;
    border-radius: 50px;
    height: 40px;
    width: 150px;
}
.quoteBtn {
    color: #000000;
    background-color: white;
}
.buyNowBtn {
    color: white;
    background-color: #000000;
}
.saveBtn {
    width: max-content;
    padding: 0 20px;
    background-color: black;
    color: white;
}
.featuresBox p {
    font-size: 14px;
    color: gray;
}
.featuresBoxes {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding-top: 15px;
}

.selectStyle {
    font-size: 14px;
    color: gray;
}

.tabBtnsMove {
    background-color: var(--secondary-color);
    color: white;
    border: 1px solid var(--secondary-color);
    border-radius: 50%;
    padding: 10px;
    transition: all 0.2s ease-in-out;
    height: 25px;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
}
.tabBtnsMove:hover {
    background-color: white;
    color: var(--secondary-color);
}
.moveLeft {
    left: 0;
}
.moveRight {
    right: 0;
}

.styleTabBtnBox, .doorWindowTabBtnBox, .nestedTabBtnBox, .interiorItemTabBtnBox, .interiorPackageTabBtnBox {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    overflow-x: hidden;
    padding: 10px;
    scrollbar-width: thin;
}
/* .nestedTabBtnBox::after {
    content: "";
    display: block;
    width: 1px;
    background: transparent;
    flex-shrink: 0;
} */
/* .styleTabBtnBox::-webkit-scrollbar, .doorWindowTabBtnBox::-webkit-scrollbar, .nestedTabBtnBox::-webkit-scrollbar {
    height: 6px;
}
.styleTabBtnBox::-webkit-scrollbar-thumb, .doorWindowTabBtnBox::-webkit-scrollbar-thumb, .nestedTabBtnBox::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}
.styleTabBtnBox::-webkit-scrollbar-track, .doorWindowTabBtnBox::-webkit-scrollbar-track, .nestedTabBtnBox::-webkit-scrollbar-track {
    background: #f1f1f1;
} */
/* .styleTabBtn:hover, .doorTabBtn:hover, .nestedTabBtn:hover {
    background-color: #ddd;
} */
.styleTabBtn, .doorTabBtn, .nestedTabBtn, .secondNestedTabBtn, .thirdNestedTabBtn, .fourthNestedTabBtn, .interiorItemTabBtn, .interiorPackageTabBtn {
    padding: 5px 20px;
    background-color: white;
    border: 1px solid lightgray;
    color: gray;
    border-radius: 50px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    white-space: nowrap;

    flex-shrink: 0;
}
.styleTabBtn.active, .doorTabBtn.active, .nestedTabBtn.active, .secondNestedTabBtn.active, .thirdNestedTabBtn.active, .fourthNestedTabBtn.active, .interiorItemTabBtn.active, .interiorPackageTabBtn.active {
    background-color: #323B4B;
    border: 1px solid #323B4B;
    color: white;
}
.styleTabContent, .doorTabContent, .nestedTabContent, .secondNestedTabContent, .thirdNestedTabContent, .fourthNestedTabContent, .interiorItemTabContent {
    display: none;
    padding: 10px;
    border-top: 1px solid #ccc;
}
.styleTabContent.active, .doorTabContent.active, .nestedTabContent.active, .secondNestedTabContent.active, .thirdNestedTabContent.active, .fourthNestedTabContent.active, .interiorItemTabContent.active {
    display: block;
}

/* #collapseThree .mainTabsContent,
  #collapseNine .mainTabsContent {
    display: none;
  }
  #collapseThree .mainTabsContent.active,
  #collapseNine .mainTabsContent.active {
    display: block;
  } */
  .hidden { display: none !important; }






.contentBoxesContainer {
    display: flex;
    justify-content: start;
    align-items: flex-start;
    flex-flow: wrap;
    row-gap: 25px;
    column-gap: 15px;
    margin-top: 20px;
}
.contentBox {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    /* overflow: hidden; */
    /* max-height: 160px; */
    width: 124px;
    cursor: pointer;
}
.contentImgBox {
    background-color: #f3f3f3;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 122px;
    max-width: 124px;
    min-height: 122px;
    min-width: 124px;
}
.contentImg {
    height: 100%;
    width: 100%;
}
.contentName {
    font-size: 13px;
    color: gray;
}


/* RADIO CSS */
.sidingRadioLabel {
    margin: 12px 0;
    cursor: pointer;
    font-size: 14px;
    color: gray;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}
.sidingRadioLabel input {
    opacity: 0;
    display: none;
}
.sidingRadioSpan {
    border: 2px solid #000000;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sidingRadioSpan:after {
  content: "";
}
.sidingRadioLabel input:checked ~ .sidingRadioSpan:after {
  display: block;
  background-color: #000000;
}
.sidingRadioLabel .sidingRadioSpan:after {
    height: 12px;
	width: 12px;
	border-radius: 50%;
}
/* RADIO CSS */
.selectedSidingRadio, .selectedWallHeightRadio {
    color: gray;
}


/* CHECKBOX CSS */

.checkboxCont {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}
.checkboxCont input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}
.checkboxCont label {
    position: relative;
    cursor: pointer;
    font-size: 14px;
    color: gray;
}
.checkboxCont label:before {
    content:'';
    /* -webkit-appearance: none; */
    background-color: transparent;
    border: 2px solid black;
    padding: 10px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 10px;
}
.checkboxCont input:checked + label:after {
    content: '';
    display: block;
    position: absolute;
    top: 4px;
    left: 9px;
    height: 14px;
    width: 7px;
    border: solid black;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* CHECKBOX CSS */
.infoImgBox {
    cursor: pointer;
}
.additionalBotomTxt {
    color: gray;
    margin-bottom: 15px;
}

.selectedSizeBox {
    margin: 10px 0;
}
.custom-select {
  position: relative;
}
.additionalBotomSelect {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font-size: 1.15rem;
  padding: 10px 15px;
  background-color: #fff;
  border: 1px solid #caced1;
  border-radius: 0.25rem;
  color: gray;
  cursor: pointer;
}
.additionalBotomSelect option {
    padding: 50px;
}
.additionalBotomSelectOptions {
    padding: 50px;
    border-bottom: 1px solid gray;
}

.custom-select::before, .custom-select::after {
  content: "";
  position: absolute;
  right: 1rem;
  pointer-events: none;
}
.custom-select::before {
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid transparent;
  border-bottom: 0.3rem solid black;
  top: 40%;
}
.custom-select::after {
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid transparent;
  border-top: 0.3rem solid black;
  top: 55%;
}



/* DOOR AND WINDOW CSS */
.doorWindContentContainer, .packageContentContainer {
    display: flex;
    justify-content: start;
    align-items: flex-start;
    flex-flow: wrap;
    row-gap: 25px;
    column-gap: 15px;
    margin-top: 20px;
}
.packageContentContainer {
    flex-direction: column;
}
.doorWindContentBox, .packageContentBox {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    width: 90px;
    cursor: pointer;
    position: relative;
}
.doorWindSelectedImg {
    position: absolute;
    bottom: 8px;
    right: 10px;
}
.doorWindImgBox, .packageImgBox {
    border: 1px solid lightgray !important;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 95px;
    width: 90px;
    position: relative;
}
.doorWindImg {
    width: 90px;
    height: 90px;
}
.doorWindName {
    font-size: 12px;
    color: gray;
}
.doorWindSelectedImg {
    display: none;
}
.doorWindContentBox .doorWindImgBox.active .doorWindSelectedImg {
    display: block;
}
.doorWindowDesc {
    margin: 10px 0 20px 0;
    color: gray;
    font-size: 13px;
}
/* DOOR AND WINDOW CSS */

/* COLORS CSS */
.colorsContainer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.colorsCircle {
    border: 1px solid transparent;
    border-radius: 50%;
    height: 60px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.colors, #vinSidingColor16, #vinTrimColor16 {
    border: 1px solid #dfdfdf;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#vinSidingcolorInputBox, #vinTrimcolorInputBox, #utiGableWoodLapClrInput, #utiGableTrimClrInput, #utiGableMetalClrInput, #utiGableVentClrInput, #utiGableShedDoorClrInput, #loftedBarnWoodLapClrInput, #loftedBarnTrimClrInput, #loftedBarnMetalClrInput, #loftedBarnVentClrInput, #loftedBarnShedDoorClrInput, .customClrInputBox {
    display: none;
}

.woodLapClr1, .woodWainscotClr1, .shedDoorClr1, .trimClr1, .ventClr1, .woodWainscoting1, .flowerBoxClr1, .shuttersClr1 {
    background-color: #ECEEE8;
}
.woodLapClr2, .woodWainscotClr2, .shedDoorClr2, .trimClr2, .ventClr2, .woodWainscoting2, .flowerBoxClr2, .shuttersClr2 {
    background-color: #9EA1A0;
}
.woodLapClr3, .woodWainscotClr3, .shedDoorClr3, .trimClr3, .ventClr3, .woodWainscoting3, .flowerBoxClr3, .shuttersClr3 {
    background-color: #8B8C8A;
}
.woodLapClr4, .woodWainscotClr4, .shedDoorClr4, .trimClr4, .ventClr4, .woodWainscoting4, .flowerBoxClr4, .shuttersClr4 {
    background-color: #63686B;
}
.woodLapClr5, .woodWainscotClr5, .shedDoorClr5, .trimClr5, .ventClr5, .woodWainscoting5, .singleWindowClr1, .flowerBoxClr5, .shuttersClr5 {
    background-color: #000000;
}
.woodLapClr6, .woodWainscotClr6, .shedDoorClr6, .trimClr6, .ventClr6, .woodWainscoting6, .flowerBoxClr6, .shuttersClr6 {
    background-color: #647882;
}
.woodLapClr7, .woodWainscotClr7, .shedDoorClr7, .trimClr7, .ventClr7, .woodWainscoting7, .flowerBoxClr7, .shuttersClr7 {
    background-color: #527489;
}
.woodLapClr8, .woodWainscotClr8, .shedDoorClr8, .trimClr8, .ventClr8, .woodWainscoting8, .flowerBoxClr8, .shuttersClr8 {
    background-color: #3A5B52;
}
.woodLapClr9, .woodWainscotClr9, .shedDoorClr9, .trimClr9, .ventClr9, .woodWainscoting9, .flowerBoxClr9, .shuttersClr9 {
    background-color: #697161;
}
.woodLapClr10, .woodWainscotClr10, .shedDoorClr10, .trimClr10, .ventClr10, .woodWainscoting10, .flowerBoxClr10, .shuttersClr10 {
    background-color: #746B5B;
}
.woodLapClr11, .woodWainscotClr11, .shedDoorClr11, .trimClr11, .ventClr11, .woodWainscoting11, .flowerBoxClr11, .shuttersClr11 {
    background-color: #8F887D;
}
.woodLapClr12, .woodWainscotClr12, .shedDoorClr12, .trimClr12, .ventClr12, .woodWainscoting12, .flowerBoxClr12, .shuttersClr12 {
    background-color: #A39F93;
}
.woodLapClr13, .woodWainscotClr13, .shedDoorClr13, .trimClr13, .ventClr13, .woodWainscoting13, .flowerBoxClr13, .shuttersClr13 {
    background-color: #E0CFA1;
}
.woodLapClr14, .woodWainscotClr14, .shedDoorClr14, .trimClr14, .ventClr14, .woodWainscoting14, .flowerBoxClr14, .shuttersClr14 {
    background-color: #D0C2A8;
}
.woodLapClr15, .woodWainscotClr15, .shedDoorClr15, .trimClr15, .ventClr15, .woodWainscoting15, .flowerBoxClr15, .shuttersClr15 {
    background-color: #C3B091;
}
.woodLapClr16, .woodWainscotClr16, .shedDoorClr16, .trimClr16, .ventClr16, .woodWainscoting16, .flowerBoxClr16, .shuttersClr16 {
    background-color: #B69B75;
}
.woodLapClr17, .woodWainscotClr17, .shedDoorClr17, .trimClr17, .ventClr17m, .woodWainscoting17, .singleWindowClr2, .flowerBoxClr17, .shuttersClr17 {
    background-color: #61483C;
}
.woodLapClr18, .woodWainscotClr18, .shedDoorClr18, .trimClr18, .ventClr18, .woodWainscoting18, .flowerBoxClr18, .shuttersClr18 {
    background-color: #554D46;
}
.woodLapClr19, .woodWainscotClr19, .shedDoorClr19, .trimClr19, .ventClr19, .woodWainscoting19, .flowerBoxClr19, .shuttersClr19 {
    background-color: #58453F;
}
.woodLapClr20, .woodWainscotClr20, .shedDoorClr20, .trimClr20, .ventClr20, .woodWainscoting20, .flowerBoxClr20, .shuttersClr20 {
    background-color: #543D40;
}
.woodLapClr21, .woodWainscotClr21, .shedDoorClr21, .trimClr21, .ventClr21, .woodWainscoting21, .flowerBoxClr21, .shuttersClr21 {
    background-color: #6A3733;
}
.woodLapClr22, .woodWainscotClr22, .shedDoorClr22, .trimClr22, .ventClr22, .woodWainscoting22, .flowerBoxClr22, .shuttersClr22 {
    background-color: #7D2F24;
}
.woodLapClr23, .woodWainscotClr23, .shedDoorClr23, .trimClr23, .ventClr23, .woodWainscoting23, .flowerBoxClr23, .shuttersClr23, .logSidingClr1 {
    background-color: #A31C24;
}
.woodLapClr24, .woodWainscotClr24, .shedDoorClr24, .flowerBoxClr24, .woodWainscoting24, .shuttersClr24, .logSidingClr2, .logTrimClr1 {
    background-image: url("asset/images/utiGableWoodLapClrs/redMahogany.png")
}
.woodLapClr25, .woodWainscotClr25, .shedDoorClr25, .flowerBoxClr25, .woodWainscoting25, .shuttersClr25, .logSidingClr3, .logTrimClr2 {
    background-image: url("asset/images/utiGableWoodLapClrs/chestnut.png")
}
.woodLapClr26, .woodWainscotClr26, .shedDoorClr26, .flowerBoxClr26, .woodWainscoting26, .shuttersClr26, .logSidingClr4, .logTrimClr3 {
    background-image: url("asset/images/utiGableWoodLapClrs/butternut.png")
}
.woodLapClr27, .woodWainscotClr27, .shedDoorClr27, .flowerBoxClr27, .woodWainscoting27, .shuttersClr27, .logSidingClr5, .logTrimClr4 {
    background-image: url("asset/images/utiGableWoodLapClrs/honeyGold.png")
}
.woodLapClr28, .woodWainscotClr28, .shedDoorClr28, .flowerBoxClr28, .woodWainscoting28, .shuttersClr28, .logSidingClr6 {
    background-image: url("asset/images/utiGableWoodLapClrs/natureWalk.png")
}
.woodLapClr29, .woodWainscotClr29, .shedDoorClr29, .flowerBoxClr29, .woodWainscoting29, .shuttersClr29, .logSidingClr7, .logTrimClr5 {
    background-image: url("asset/images/utiGableWoodLapClrs/smoke.png")
}
.woodLapClr30, .woodWainscotClr30, .shedDoorClr30, .flowerBoxClr30, .woodWainscoting30, .shuttersClr30, .logSidingClr8, .logTrimClr6 {
    background-image: url("asset/images/utiGableWoodLapClrs/driftwood.png")
}
.woodLapClr31, .woodWainscotClr31, .shedDoorClr31, .flowerBoxClr31, .woodWainscoting31, .shuttersClr31, .logSidingClr9, .logTrimClr7 {
    background-image: url("asset/images/utiGableWoodLapClrs/ebony.png")
}

.rollupDoorClr1  {background-color: #8F021D;}
.rollupDoorClr2  {background-color: #D2500C;}
.rollupDoorClr3  {background-color: #536178;}
.rollupDoorClr4  {background-color: #3B61B0;}
.rollupDoorClr5  {background-color: #6A2D1F;}
.rollupDoorClr6  {background-color: #1D3B26;}
.rollupDoorClr7  {background-color: #541D14;}
.rollupDoorClr8  {background-color: #B8916A;}
.rollupDoorClr9  {background-color: #C8CFD4;}
.rollupDoorClr10 {background-color: #C6231E;}
.rollupDoorClr11 {background-color: #000000;}
.rollupDoorClr12 {background-color: #A3998C;}
.rollupDoorClr13 {background-color: #FCFEFF;}
.rollupDoorClr14 {background-color: #FFD457;}
.rollupDoorClr15 {background-color: #BFB7A9;}
.rollupDoorClr16 {background-color: #CDC19C;}
.rollupDoorClr17 {background-color: #51A139;}
.rollupDoorClr18 {background-color: #000000;}

.vinylSidingClr1, .vinylTrimClr1 {background-color: #C4C2AF;}
.vinylSidingClr2, .vinylTrimClr2 {background-color: #AAAF98;}
.vinylSidingClr3, .vinylTrimClr3 {background-color: #676B58;}
.vinylSidingClr4, .vinylTrimClr4 {background-color: #55686E;}
.vinylSidingClr5, .vinylTrimClr5 {background-color: #8C8D87;}
.vinylSidingClr6, .vinylTrimClr6 {background-color: #939EAA;}
.vinylSidingClr7, .vinylTrimClr7 {background-color: #D6D9D7;}
.vinylSidingClr8, .vinylTrimClr8 {background-color: #EDEEE9;}
.vinylSidingClr9, .vinylTrimClr9 {background-color: #FFFFFF;}
.vinylSidingClr10, .vinylTrimClr10 {background-color: #FFF6DC;}
.vinylSidingClr11, .vinylTrimClr11 {background-color: #D5CBB6;}
.vinylSidingClr12, .vinylTrimClr12 {background-color: #C3B5A0;}
.vinylSidingClr13, .vinylTrimClr13 {background-color: #C3B091;}
.vinylSidingClr14, .vinylTrimClr14 {background-color: #6F3D32;}
.vinylSidingClr15, .vinylTrimClr15 {background-color: #914E44;}

.metalClr1 {background-color: #F0F0F0;}
.metalClr2 {background-color: #ECE9EC;}
.metalClr3 {background-color: #EFDFB8;}
.metalClr4, .singleWindowClr3 {background-color: #FFFFFF;}
.metalClr5 {background-color: #AAABAD;}
.metalClr6 {background-color: #D4C6A4;}
.metalClr7 {background-color: #7B6E65;}
.metalClr8 {background-color: #78797D;}
.metalClr9 {background-color: #A08570;}
.metalClr10 {background-color: #275D6F;}
.metalClr11 {background-color: #000000;}
.metalClr12 {background-color: #B45932;}
.metalClr13 {background-color: #284662;}
.metalClr14 {background-color: #3C362F;}
.metalClr15 {background-color: #BD2029;}
.metalClr16 {background-color: #285039;}
.metalClr17 {background-color: #4E342B;}
.metalClr18 {background-color: #7F3429;}
.metalClr19 {background-color: #1F3E34;}
.metalClr20 {background-color: #000000;}
.metalClr21 {background-color: #3A121E;}
.metalClr22 {background-image: url("asset/images/utiGabMetalClr/galvalume.png");}

.textureClr1 {background-color: #ECE9EC;}
.textureClr2 {background-color: #958978;}
.textureClr3 {background-color: #AAABAD;}
.textureClr4 {background-color: #1F3E34;}
.textureClr5 {background-color: #3C362F;}
.textureClr6 {background-color: #4F4E52;}
.textureClr7 {background-color: #284662;}
.textureClr8 {background-color: #4E342B;}
.textureClr9 {background-color: #41424C;}
.textureClr10 {background-color: #00006E;}
.textureClr11 {background-color: #3A121E;}
.textureClr12 {background-color: #000000;}
.textureClr13 {background-color: #7F3429;}

.shinglesClr1 {background-image: url('asset/images/shinglesColors/dualblack.png');}
.shinglesClr2 {background-image: url('asset/images/shinglesColors/charcoalgray.png');}
.shinglesClr3 {background-image: url('asset/images/shinglesColors/pewter.png');}
.shinglesClr4 {background-image: url('asset/images/shinglesColors/vintagegreen.png');}
.shinglesClr5 {background-image: url('asset/images/shinglesColors/dualgray.png');}
.shinglesClr6 {background-image: url('asset/images/shinglesColors/weatherwood.png');}
.shinglesClr7 {background-image: url('asset/images/shinglesColors/heather.png');}
.shinglesClr8 {background-image: url('asset/images/shinglesColors/earthtonecedar.png');}
.shinglesClr9 {background-image: url('asset/images/shinglesColors/siennablend.png');}

.fiberGlassDoorClr1  {background-color: #FFFFFF;}
.fiberGlassDoorClr2  {background-color: #9EA1A0;}
.fiberGlassDoorClr3  {background-color: #63686B;}
.fiberGlassDoorClr4  {background-color: #61483C;}
.fiberGlassDoorClr5  {background-color: #C3B091;}
.fiberGlassDoorClr6  {background-color: #3A5B52;}
.fiberGlassDoorClr7  {background-color: #F0F0F0;}
.fiberGlassDoorClr8  {background-color: #ECE9EC;}
.fiberGlassDoorClr9  {background-color: #EFDFB8;}
.fiberGlassDoorClr10 {background-color: #958978;}
.fiberGlassDoorClr11 {background-color: #AAABAD;}
.fiberGlassDoorClr12 {background-color: #D4C6A4;}
.fiberGlassDoorClr13 {background-color: #7B6E65;}
.fiberGlassDoorClr14 {background-color: #78797D;}
.fiberGlassDoorClr15 {background-color: #A08570;}
.fiberGlassDoorClr16 {background-color: #275D6F;}
.fiberGlassDoorClr17 {background-color: #4F4E52;}
.fiberGlassDoorClr18 {background-color: #B45932;}
.fiberGlassDoorClr19 {background-color: #284662;}
.fiberGlassDoorClr20 {background-color: #3C362F;}
.fiberGlassDoorClr21 {background-color: #BD2029;}
.fiberGlassDoorClr22 {background-color: #285039;}
.fiberGlassDoorClr23 {background-color: #4E342B;}
.fiberGlassDoorClr24 {background-color: #7F3429;}
.fiberGlassDoorClr25 {background-color: #1F3E34;}
.fiberGlassDoorClr26 {background-color: #000000;}
.fiberGlassDoorClr27 {background-color: #3A121E;}

.doubleWindowClr1  {background-color: #000000;}
.doubleWindowClr2  {background-color: #554D46;}
.doubleWindowClr3  {background-color: #4D362F;}
.doubleWindowClr4  {background-color: #8F887D;}
.doubleWindowClr5  {background-color: #FFFFFF;}

.overHeadDoorClr1 {background-color: #F1F2F3;}
.overHeadDoorClr2 {background-color: #F8F0DD;}
.overHeadDoorClr3 {background-color: #DAD3C0;}
.overHeadDoorClr4 {background-color: #BBB3A2;}
.overHeadDoorClr5 {background-color: #43361D;}
.overHeadDoorClr6 {background-color: #000000;}

/* COLORS CSS */


.children {
    border: 1px solid transparent;
}
.children.active {
    border-color: #000000 !important;
}
.contentBox .contentImgBox.active + .contentName, .doorWindContentBox .doorWindImgBox.active + .doorWindName {
    color: #000000;
}

/* Shedview CSS */
.packageFeatures {
    margin: 20px 0;
}
.packageContentSection {
    display: flex;
    gap: 10px;
}
.disabled-item {
    pointer-events: none;
    opacity: 0.5;
} 
/* Shedview CSS */

.estimate-header {
    margin-bottom: 1rem !important;
}
.text-indent-left {
    text-indent: 7px;
    padding-left: 7px;
}
.estimate-text {
    font-size: 14px;
    font-weight: 300;
}
.estimate-container {
    margin-bottom: 1rem;
}