
#Canvas{
    position:relative;
}

#Canvas #IconHoverHox{
    position: absolute;
    display: flex;
    background: #fff;
    border: 1px solid #000;
    border-radius: 25px;   
    padding: 5px;
    gap: 10px;
    transform: translate(-50%, -50%);
}

#Canvas #IconHoverHox img{
    flex:auto;
    width: 40px;
}

.Modal .ContentContainer{
    display:flex;
    flex-wrap: wrap;
}

.Modal .OverallOptionsContainer .OptionsContainer .BackButton{
    position: absolute;
    top: 5px;
    left: 5px;
    width: 30px;
    height: auto;
    border-radius: 100%;
    border: 1px solid #2e2e2e;
}

.Modal .ContentContainer .ExampleImageContainer{
    display:flex;
    flex: 0 0 100%;
}

.Modal .ContentContainer.ChooseDesign .SubContainer{
    display:flex;
    flex: 0 0 25%;
    flex-direction: column;
}

.Modal .ContentContainer.ChooseCabinet{
    padding:5% 10% 10% 10%;
    gap: 2%;
    row-gap: 20px;
}

.Modal .ContentContainer.ChooseCabinet .SubContainer{
    display:flex;
    flex: 0 0 32%;
    flex-direction: row;
    flex-wrap: nowrap;
    
    border-radius: 10px;
    border: 1px solid #e3e3e3;
}

.Modal .ContentContainer.ChooseCabinet .SubContainer img{
    flex:0 0 40%;
    display: inline-block;
    width: 100%;
    height: fit-content;
    align-self: center;
    padding: 5px;
    min-width: 0;
}

.Modal .ContentContainer.ChooseCabinet .SubContainer .TextContainer{
    flex:0 0 60%;
    flex-direction: column;
    display: flex;
    justify-content: center;
}

.Modal .ContentContainer .OptionsContainer{
    display:none;
}

.Modal .ContentContainer .SubContainer .OptionsContainer .Option{
    flex: 0 0 25%;
    flex-wrap: wrap;
    display: flex;
}

.Modal .ContentContainer .SubContainer .HeadText{
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
}

.Modal .ContentContainer .SubContainer .HeadText.Example{
    background: #ed7e42;
    border-radius: 100%;
    padding: 9px;
    width: 40px;
    height: 40px;
    vertical-align: middle;
    font-size: 20px;
    margin: 0 auto;
    color: #fff;
}

.Modal .ContentContainer .SubContainer .Text{
    text-align: center;
    font-size: 14px;
    margin: 0px;
}

.Modal .ContentContainer .SubContainer.PureText .Text{
    margin:10px;
}

.Modal .ContentContainer.ChooseCabinet .OptionsContainer{
    flex-wrap: wrap;
    gap: 2%;
    row-gap: 20px;
}

.Modal .ContentContainer.ChooseCabinet .OverallOptionsContainer{
    display: flex;
    gap:2%;
    row-gap:20px;
}

.Modal .ContentContainer.ChooseCabinet .OverallOptionsContainer .Option{    
    display: flex;
    flex: 0 0 32%;
    flex-direction: row;
    flex-wrap: nowrap;
    border-radius: 10px;
    border: 1px solid #e3e3e3;
}

.Modal .ContentContainer.ChooseCabinet .OverallOptionsContainer .Option img{
    flex: 0 0 40%;
    display: inline-block;
    width: 100%;
    height: fit-content;
    align-self: center;
    padding: 5px;
    min-width: 0;
}

.Modal .ContentContainer.ChooseCabinet .OverallOptionsContainer .Option .TextContainer{
    flex: 0 0 60%;
    flex-direction: column;
    display: flex;
    justify-content: center;
}

.Modal .ContentContainer.ChooseCabinet .OverallOptionsContainer .Option .TextContainer .HeadText{
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
}

.Modal .ContentContainer.ChooseCabinet .OverallOptionsContainer .Option .TextContainer .Text {
    text-align: center;
    font-size: 14px;
    margin: 0px;
  }

.Modal .ContentContainer .OverallOptionsContainer .Option .Name,
.Modal .ExtraContainer .AddOnProductContainer .Name{
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}

.Modal .ContentContainer .OverallOptionsContainer .Option img{

}

.Modal .ContentContainer .OverallOptionsContainer .Option .Price,
.Modal .ExtraContainer .AddOnProductContainer .Price,
.Modal .ContentContainer .OverallOptionsContainer .Option .Description,
.Modal .ExtraContainer .AddOnProductContainer .Description{
    text-align: center;
    font-size: 14px;
}

.Modal .ExtraContainer .AddOnProductContainer input{
    display:none;
}

.Modal .ExtraContainer .AddOnProductContainer label{
    display: block;
}

.Modal .ExtraContainer .AddOnProductContainer label img{
    max-height: 300px;
    display: block;
    margin: 0 auto;
}

.Modal .ExtraContainer .AddOnProductContainer input[type=checkbox]:checked + label{
    outline: 3px solid #73df88;
    border-radius: 10px;
}

.Modal .ExtraContainer .SaveBtn{
    background-color: #73df88;
    border: 1px solid #73df88;
    height: 44px;
    border-radius: 8px;
    color: #2e2e2e;
    cursor: pointer;
    width: 180px;
    padding: 14px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: -2px 4px 10px #2e2e2e29;
    display: block;
    -webkit-appearance: none;
    border: 0px;
    border-radius: 24px;
    margin: 0 auto;
    text-align: center;
}

.Modal .ContentContainer .ExampleImageContainer{
    flex:0 0 100%;
    display:flex;
}

.Modal .ContentContainer .ExampleImageContainer img{
    max-width: 880px;
    display: block;
    margin: 0 auto;
    border-bottom: #e2e2e2 1px solid;
    margin-bottom: 25px;
}

.Prices_Custom_UL{
    padding:0px;
}

.Prices_Custom_UL li{
    list-style-type:none;
}