.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

/*====Media Queries====*/
/*====Layout====*/
/*====Validation====*/
/*====Margins====*/
/*====Section styling====*/
/*====Text Styling====*/
.WizardMenuItems .WizardSummary .WizardSummaryItems .SummaryItemName {
  font-size: 15px;
  line-height: 1.6;
}
.WizardMenuItems .WizardSummary .WizardSummaryItems .SummaryItemDescription {
  padding-bottom: 20px;
  font-size: 12px;
}
.WizardMenuItems .StepContainer {
  display: grid;
  grid-template-columns: auto 1fr;
}
.WizardMenuItems .StepContainer .step-name {
  color: #c0bfd4;
  padding-top: 5px;
}
.WizardMenuItems .StepContainer .step-name.active {
  color: #464c58;
}
.WizardMenuItems .StepContainer .step-name.completed {
  color: #464c58;
  cursor: pointer;
}
.WizardMenuItems .StepContainer .stepNumber {
  background-color: #fff;
}
.WizardMenuItems .StepContainer .step-line {
  min-height: 20px;
  height: 100%;
  width: 50%;
  text-align: center;
  justify-self: center;
  border-right: 1px solid #c0bfd4;
}
.WizardMenuItems .accordion-button {
  padding: unset;
}
.WizardMenuItems .accordion-button::before {
  content: "Toon details";
  text-decoration: underline;
}
.WizardMenuItems .accordion-button::after {
  background-image: none;
}
.WizardMenuItems .accordion-body {
  padding: unset;
  padding-top: 15px;
}
.WizardMenuItems .accordion-button:not(.collapsed) {
  background-color: unset;
  box-shadow: unset;
  color: #f4991a;
}
.WizardMenuItems .accordion-button:not(.collapsed)::before {
  content: "Verberg details";
  text-decoration: underline;
}
.WizardMenuItems .accordion-button:not(.collapsed)::after {
  background-image: none;
}
.WizardMenuItems .accordion-button:focus {
  z-index: 3;
  border-color: unset;
  outline: 0;
  box-shadow: unset;
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

/*====Media Queries====*/
/*====Layout====*/
/*====Validation====*/
/*====Margins====*/
/*====Section styling====*/
/*====Text Styling====*/
.WizardMenuItemsMobile .StepContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.WizardMenuItemsMobile .StepContainer:not(.last-step) {
  width: 100%;
}
.WizardMenuItemsMobile .StepContainer .stepNumber {
  width: 30px !important;
  height: 30px !important;
  font-size: 16px !important;
}
.WizardMenuItemsMobile .StepContainer .step-line {
  width: 100%;
  border-bottom: 1.2px solid #c0bfd4;
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

/*====Media Queries====*/
/*====Layout====*/
/*====Validation====*/
/*====Margins====*/
/*====Section styling====*/
/*====Text Styling====*/
.WizardFooterMobile {
  background-color: #f6f6f8;
  padding: 10px;
  margin-left: -16px;
  margin-right: -16px;
  border: 1px solid #e6e3f1;
  background-color: rgba(246, 246, 248, 0.8);
  position: sticky;
  bottom: 0;
  padding-bottom: 0.5em;
  padding-top: 0.5em;
  z-index: 1020;
}
.WizardFooterMobile .cursor-pointer {
  cursor: pointer;
}
.WizardFooterMobile .modal-content {
  background-color: #f6f6f8;
}
.WizardFooterMobile .modal-content .stepNumber {
  width: 30px !important;
  height: 30px !important;
  font-size: 16px !important;
}
.WizardFooterMobile .modal-content .modal-footer {
  background-color: #f6f6f8 !important;
  justify-content: center;
}
.WizardFooterMobile .modal-content .modal-footer button {
  background-color: unset;
  border: unset;
  color: #f4991a;
  text-decoration: underline;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.9px;
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

/*====Media Queries====*/
/*====Layout====*/
/*====Validation====*/
/*====Margins====*/
/*====Section styling====*/
/*====Text Styling====*/
#ConfiguratorFinished {
  background: #fff;
}
#ConfiguratorFinished #ConfigHeading .config-heading {
  min-height: 80px;
  align-items: center;
}
#ConfiguratorFinished #ConfigHeading .config-heading img {
  max-height: 40px;
}
@media screen and (max-width: 767.6px) {
  #ConfiguratorFinished #ConfigHeading .config-heading .cart {
    max-height: 20px;
  }
}
#ConfiguratorFinished #ConfigHeading .config-heading .cart-checkmark {
  margin-left: -10px;
  max-height: 30px;
  position: absolute;
}
@media screen and (max-width: 767.6px) {
  #ConfiguratorFinished #ConfigHeading .config-heading .cart-checkmark {
    max-height: 20px;
  }
}
#ConfiguratorFinished #ConfigSummary {
  background-image: linear-gradient(to bottom, #f0eff9 -7%, #f9f8fc 32%);
  padding-top: 30px;
  padding-bottom: 30px;
}
@media screen and (max-width: 767.6px) {
  #ConfiguratorFinished #ConfigSummary {
    padding-top: 15px;
    padding-bottom: 10px;
  }
}
#ConfiguratorFinished #ConfigSummary .summary-card {
  background: #fff;
  padding-right: 111px;
  display: grid;
  grid-template: "image summary title" "image summary buttons" "image summary buttons" "image summary link" "image summary link" "image summary arrow";
}
@media screen and (max-width: 991.6px) {
  #ConfiguratorFinished #ConfigSummary .summary-card {
    padding-right: 50px;
  }
}
@media screen and (max-width: 767.6px) {
  #ConfiguratorFinished #ConfigSummary .summary-card {
    grid-template: "title title" "image summary" "image arrow" "buttons buttons" "link link";
    padding: 0px;
    background: unset;
  }
}
#ConfiguratorFinished #ConfigSummary .summary-card .summary-image {
  background: rgba(113, 118, 141, 0.06);
  padding: 18px 120px 21px;
  display: flex;
  justify-content: center;
  grid-area: image;
}
@media screen and (max-width: 991.6px) {
  #ConfiguratorFinished #ConfigSummary .summary-card .summary-image {
    padding: 18px 40px 21px;
  }
}
@media screen and (max-width: 767.6px) {
  #ConfiguratorFinished #ConfigSummary .summary-card .summary-image {
    padding: 15px;
    border-start-start-radius: 8px;
    border-end-start-radius: 8px;
  }
}
#ConfiguratorFinished #ConfigSummary .summary-card .summary-image img {
  max-height: 236px;
}
#ConfiguratorFinished #ConfigSummary .summary-card .summary-image-iv {
  background: rgba(113, 118, 141, 0.06);
  padding: 18px 0px 21px 0px;
  display: flex;
  justify-content: center;
  grid-area: image;
}
@media screen and (max-width: 991.6px) {
  #ConfiguratorFinished #ConfigSummary .summary-card .summary-image-iv {
    padding: 18px 40px 21px;
  }
}
@media screen and (max-width: 767.6px) {
  #ConfiguratorFinished #ConfigSummary .summary-card .summary-image-iv {
    padding: 15px;
    border-start-start-radius: 8px;
    border-end-start-radius: 8px;
  }
}
#ConfiguratorFinished #ConfigSummary .summary-card .summary-image-iv img {
  max-height: 236px;
}
#ConfiguratorFinished #ConfigSummary .summary-card .summary-door {
  grid-area: summary;
  padding-left: 50px;
  padding-right: 100px;
  padding-top: 51px;
}
@media screen and (max-width: 767.6px) {
  #ConfiguratorFinished #ConfigSummary .summary-card .summary-door {
    padding-top: 15px;
    padding-left: 20px;
    background: #fff;
    border-start-end-radius: 8px;
  }
}
@media screen and (max-width: 1199.6px) {
  #ConfiguratorFinished #ConfigSummary .summary-card .summary-door {
    padding-right: 20px;
  }
}
#ConfiguratorFinished #ConfigSummary .summary-card .title {
  grid-area: title;
  padding-top: 51px;
  padding-bottom: 15px;
}
@media screen and (max-width: 767.6px) {
  #ConfiguratorFinished #ConfigSummary .summary-card .title {
    font-size: 1rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #464c58;
    padding-top: 0;
  }
}
#ConfiguratorFinished #ConfigSummary .summary-card .nav-buttons {
  display: flex;
  justify-content: center;
  gap: 30px;
  grid-area: buttons;
}
@media screen and (max-width: 1199.6px) {
  #ConfiguratorFinished #ConfigSummary .summary-card .nav-buttons {
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
  }
}
#ConfiguratorFinished #ConfigSummary .summary-card .nav-buttons a {
  width: 100%;
  margin-bottom: 15px;
}
#ConfiguratorFinished #ConfigSummary .summary-card .reconfig-link {
  padding-bottom: 30px;
  cursor: pointer;
  text-decoration: underline;
  text-align: center;
  grid-area: link;
}
#ConfiguratorFinished #ConfigSummary .summary-card .arrow {
  grid-area: arrow;
  background: #fff;
  border-end-end-radius: 8px;
}
#ConfiguratorFinished #ConfigSummary .summary-card .arrow .illustration-arrow {
  transform: rotate(230deg);
  transform: translate(-50px, 10px) rotate(230deg);
  height: 60px;
  width: 0px;
}
@media screen and (max-width: 1199.6px) {
  #ConfiguratorFinished #ConfigSummary .summary-card .arrow .illustration-arrow {
    display: none;
  }
}
@media screen and (max-width: 767.6px) {
  #ConfiguratorFinished #ConfigSummary .summary-card .arrow .illustration-arrow {
    display: block;
    transform: translate(-23px, -22px) rotate(30deg) scaleX(-1);
    height: 60px;
    width: 136px;
  }
  #ConfiguratorFinished #ConfigSummary .summary-card .arrow .illustration-arrow img {
    height: 70px;
  }
}
#ConfiguratorFinished #MeasuringHelpAlert {
  padding-top: 60px;
  padding-bottom: 60px;
}
@media screen and (max-width: 767.6px) {
  #ConfiguratorFinished #MeasuringHelpAlert {
    padding-top: 15px;
    padding-bottom: 0;
  }
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

/*====Media Queries====*/
/*====Layout====*/
/*====Validation====*/
/*====Margins====*/
/*====Section styling====*/
/*====Text Styling====*/
.ConfiguratorCardList {
  margin-bottom: 25px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
@media screen and (max-width: 767.6px) {
  .ConfiguratorCardList:has(.full-width-img) {
    grid-template-columns: repeat(auto-fit, minmax(150px, 100vw));
  }
}
.ConfiguratorCardList.ImageBorder .card-img-container {
  border: 1px solid #c0bfd4;
}
.ConfiguratorCardList .promotion-sticker {
  position: absolute;
  right: 0;
}
.ConfiguratorCardList .promotion-sticker img {
  max-height: 60px;
  text-align: right;
  right: 0;
}
.ConfiguratorCardList .ConfiguratorCard {
  height: 100%;
  max-width: 370px;
}
@media screen and (max-width: 767.6px) {
  .ConfiguratorCardList .ConfiguratorCard:has(.full-width-img) {
    max-width: unset;
  }
}
.ConfiguratorCardList .ConfiguratorCard .card {
  height: 100%;
  border-radius: 8px;
  cursor: pointer;
  border-width: 1px;
}
.ConfiguratorCardList .ConfiguratorCard .card:hover {
  border-color: #c0bfd4;
}
.ConfiguratorCardList .ConfiguratorCard .card.active {
  border-color: #f4991a;
  border-width: 2px;
  height: calc(100% + 2px);
  margin: -0.9px;
}
.ConfiguratorCardList .ConfiguratorCard .card.full-width-img .card-img-container {
  height: 80px;
}
.ConfiguratorCardList .ConfiguratorCard .card.full-width-img .card-img-container .card-img-top {
  max-height: 100px;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 767.6px) {
  .ConfiguratorCardList .ConfiguratorCard .card.full-width-img {
    display: grid;
    grid-template-columns: 3fr 2fr;
  }
}
@media screen and (max-width: 767.6px) and (max-width: 575.6px) {
  .ConfiguratorCardList .ConfiguratorCard .card.full-width-img {
    grid-template-columns: 2fr 1fr;
  }
}
@media screen and (max-width: 767.6px) and (max-width: 440px) {
  .ConfiguratorCardList .ConfiguratorCard .card.full-width-img {
    grid-template-columns: 6fr 5fr;
  }
}
@media screen and (max-width: 767.6px) {
  .ConfiguratorCardList .ConfiguratorCard .card.full-width-img .card-body {
    grid-column-start: 1;
    grid-row-start: 1;
    display: grid;
    gap: 8px;
    align-items: center;
  }
  .ConfiguratorCardList .ConfiguratorCard .card.full-width-img .card-body .card-price {
    grid-column-start: 2;
    grid-row-start: 1;
    padding-bottom: 0;
    text-align: right;
    justify-self: end;
  }
  .ConfiguratorCardList .ConfiguratorCard .card.full-width-img .card-body .card-heading {
    grid-column-start: 1;
    grid-row-start: 1;
  }
  .ConfiguratorCardList .ConfiguratorCard .card.full-width-img .card-body .card-heading .h5 {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 767.6px) and (max-width: 440px) {
  .ConfiguratorCardList .ConfiguratorCard .card.full-width-img .card-body .card-price {
    grid-column-start: 1;
    grid-row-start: 2;
    text-align: left;
    justify-self: unset;
  }
}
@media screen and (max-width: 767.6px) {
  .ConfiguratorCardList .ConfiguratorCard .card.full-width-img .card-img-container {
    grid-column-start: 2;
    grid-row-start: 1;
    height: 60px;
    align-self: center;
    padding-right: 8px;
  }
  .ConfiguratorCardList .ConfiguratorCard .card.full-width-img .card-img-container .card-img-top {
    max-height: 60px;
    width: 100%;
    height: 100%;
    padding: 5px;
    border-radius: 8px;
    outline-offset: -5px;
    outline: solid 1px #f0eff9;
  }
}
.ConfiguratorCardList .ConfiguratorCard .card .card-img-container {
  text-align: center;
  height: 130px;
  display: flex;
  justify-content: end;
  align-items: end;
  margin: 10px;
}
.ConfiguratorCardList .ConfiguratorCard .card .card-img-container .card-img-top {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  width: unset;
}
.ConfiguratorCardList .ConfiguratorCard .card .card-img-container .zoom-icon {
  position: absolute;
  padding: 10px;
}
.ConfiguratorCardList .ConfiguratorCard .card .card-divider {
  border-top: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 8px;
  margin-left: 10px;
  margin-right: 10px;
}
@media screen and (max-width: 767.6px) {
  .ConfiguratorCardList .ConfiguratorCard .card .card-divider {
    display: none;
  }
}
.ConfiguratorCardList .ConfiguratorCard .card .card-body .card-heading {
  display: flex;
  justify-content: space-between;
}
.ConfiguratorCardList .ConfiguratorCard .card .card-body .info-icon {
  cursor: pointer;
}
.ConfiguratorCardList .ConfiguratorCard .card .card-body .card-price {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.9px;
  color: #f4991a;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
}
.ConfiguratorCardList .ConfiguratorCard .card .card-body .card-price .gray-linethrough {
  color: #a3a1ba;
  text-decoration: line-through;
  padding-left: 3px;
  font-size: 10px;
  font-weight: normal;
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

/*====Media Queries====*/
/*====Layout====*/
/*====Validation====*/
/*====Margins====*/
/*====Section styling====*/
/*====Text Styling====*/
#VideoModal .modal {
  cursor: pointer;
}
#VideoModal .modal .modal-video {
  min-width: 50%;
}
@media screen and (max-width: 767.6px) {
  #VideoModal .modal .modal-video {
    width: unset;
  }
}
#VideoModal .modal .modal-video .closeButtonContainer {
  display: flex;
  justify-content: end;
  margin-bottom: -15px;
  margin-right: -25px;
}
@media screen and (max-width: 767.6px) {
  #VideoModal .modal .modal-video .closeButtonContainer {
    margin-bottom: -10px;
    margin-right: -7px;
  }
}
#VideoModal .modal .modal-video .closeButtonContainer .btn-close {
  border-radius: 1.25rem;
  background-color: white;
  padding: 10px;
  opacity: 1;
  text-align: right;
  z-index: 1;
}
#VideoModal .videoModalButton {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.9px;
  color: #f4991a;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  #VideoModal .videoModalButton {
    justify-self: right;
  }
}
#VideoModal .videoModalButton .videotext {
  display: grid;
  gap: 7px;
  align-items: center;
  grid-template-columns: auto 1fr;
}
@media screen and (min-width: 768px) {
  #VideoModal .videoModalButton .videotext {
    justify-content: right;
    grid-template-columns: auto auto;
  }
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

/*====Media Queries====*/
/*====Layout====*/
/*====Validation====*/
/*====Margins====*/
/*====Section styling====*/
/*====Text Styling====*/
.ConfiguratorAlert .alertbox {
  display: grid;
  grid-template-columns: 35px auto;
  gap: 20px;
}
.ConfiguratorAlert .alertbox .alertboxIcon img {
  max-width: 24px;
}
.ConfiguratorAlert .alertbox p {
  margin-bottom: 0;
}
.ConfiguratorAlert .measuring {
  background-color: #f0eff9;
  padding: 58px 60px 59px;
  border-radius: 8px;
  gap: 30px;
}
.ConfiguratorAlert .measuring .alertboxIcon img {
  max-width: unset;
}
.ConfiguratorAlert .info {
  font-size: 1rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.88;
  letter-spacing: normal;
  color: #464c58;
  padding: 30px 74px 30px 65px;
  border-radius: 8px;
  background-color: #f0eff9;
  margin-bottom: 20px;
}
@media screen and (max-width: 767.6px) {
  .ConfiguratorAlert .measuring {
    padding: 30px;
    display: block;
  }
  .ConfiguratorAlert .measuring .alertboxIcon {
    float: left;
    padding-right: 5px;
  }
  .ConfiguratorAlert .measuring .alertbox-info .alert-text {
    display: flex;
    justify-items: flex-start;
  }
}
@media screen and (max-width: 767.6px) and (max-width: 991.6px) {
  .ConfiguratorAlert .measuring .alertbox-info .alert-text {
    display: inline-block;
  }
}
@media screen and (max-width: 767.6px) {
  .ConfiguratorAlert .info {
    font-size: 15px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: normal;
    color: #464c58;
    padding: 20px 10px 25px 10px;
    margin-bottom: 10px;
  }
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

/*====Media Queries====*/
/*====Layout====*/
/*====Validation====*/
/*====Margins====*/
/*====Section styling====*/
/*====Text Styling====*/
.ConfiguratorAccordion .moreInformationCollapse .accordion-button:not(.collapsed)::before {
  content: "Verberg informatie";
}
.ConfiguratorAccordion .accordion-item {
  border: unset;
  border-top: solid 1px #e6e3f1;
  border-bottom: solid 1px #e6e3f1;
}
.ConfiguratorAccordion .accordion-item .accordion-button:not(.collapsed) {
  background-color: #fff !important;
}
.ConfiguratorAccordion .accordion-item .accordion-button:not(.collapsed) span {
  display: none;
}
.ConfiguratorAccordion .accordion-item .accordion-button::after {
  background-size: 1rem !important;
}
.ConfiguratorAccordion .accordion-item .accordion-button:focus {
  box-shadow: unset;
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

/*====Media Queries====*/
/*====Layout====*/
/*====Validation====*/
/*====Margins====*/
/*====Section styling====*/
/*====Text Styling====*/
#Tooltip .tooltip-wrapper {
  position: relative;
  display: inline-block;
  top: -7px;
  float: right;
  cursor: help;
}
#Tooltip span {
  visibility: hidden;
  position: absolute;
  width: 300px;
  padding: 15px !important;
  bottom: 100%;
  left: 50%;
  margin-left: -150px;
  border: solid 1px #e6e3f1;
  background-color: #fff;
  padding: 5px 0;
  border-radius: 6px;
  z-index: 1;
  font-size: 1rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.88;
  letter-spacing: normal;
  color: #464c58;
}
@media screen and (max-width: 767.6px) {
  #Tooltip span {
    width: 190px;
  }
}
#Tooltip span::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #e6e3f1 transparent transparent transparent;
}
#Tooltip .tooltip-wrapper:hover span {
  visibility: visible;
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

/*====Media Queries====*/
/*====Layout====*/
/*====Validation====*/
/*====Margins====*/
/*====Section styling====*/
/*====Text Styling====*/
#QuantitySelector .quantityViewer .display-quantity {
  color: #5e4897;
  text-align: center;
  background-color: white;
  padding: 9px 0;
  width: 100%;
  border: solid 1px #f0eff9;
}
#QuantitySelector .quantitySelector {
  display: grid;
  grid-template-columns: auto 2fr auto;
  border: solid 1px #f0eff9;
  border-radius: 8px;
  margin-bottom: 20px;
  max-width: 128px;
}
#QuantitySelector .quantitySelector .controls {
  background-color: #fff;
  border-radius: 8px;
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
}
#QuantitySelector .quantitySelector .controls img {
  text-align: center;
  padding: 8px;
  height: 80%;
}
#QuantitySelector .quantitySelector .display-quantity {
  color: #5e4897;
  text-align: center;
  background-color: #fbfbff;
  padding: 9px;
  width: 100%;
  border-left: solid 1px #f0eff9;
  border-right: solid 1px #f0eff9;
}
#QuantitySelector .quantitySelector .filter-gray {
  -webkit-filter: grayscale(0); /* Webkit */
  filter: gray; /* IE6-9 */
  filter: grayscale(1); /* W3C */
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

.list-group.small .list-group-item {
  padding: 0.25rem 0.5rem;
}

/*====Media Queries====*/
/*====Layout====*/
/*====Validation====*/
/*====Margins====*/
/*====Section styling====*/
/*====Text Styling====*/
#ConfiguratorSelectOption .dropdown .form-select {
  font-size: 0.75rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.9px;
  color: #5e4897;
  max-width: 300px;
  border-left: none;
  border-right: none;
  padding: 19px;
  border-radius: unset !important;
  box-shadow: unset !important;
}
@media screen and (min-width: 768px) {
  #ConfiguratorSelectOption .dropdown .form-select {
    width: 210px;
  }
}
#ConfiguratorSelectOption .dropdown .dropdown-menu {
  width: 200px;
  box-shadow: 0 2px 18px 0 rgba(0, 0, 0, 0.07);
  padding: 15px 19px 5px 19px;
  top: -3px !important;
  border: none !important;
  border-radius: unset;
}
#ConfiguratorSelectOption .dropdown .dropdown-menu li {
  cursor: pointer;
  /* &:hover {
      background-color: red;
  }*/
}
#ConfiguratorSelectOption .dropdown .dropdown-menu li .dropdown-item {
  font-size: 0.75rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.9px;
  color: #5e4897;
  padding: unset;
  padding-left: 10px;
  margin-bottom: 15px;
  cursor: pointer;
}
#ConfiguratorSelectOption .dropdown .dropdown-menu li .dropdown-item:hover, #ConfiguratorSelectOption .dropdown .dropdown-menu li .dropdown-item:active, #ConfiguratorSelectOption .dropdown .dropdown-menu li .dropdown-item:focus {
  background-color: unset;
}
#ConfiguratorSelectOption .dropdown .display-color-wrapper {
  border-radius: 50%;
  border: solid 1px #a3a1ba;
  height: 17px;
  width: 17px;
}
#ConfiguratorSelectOption .dropdown .display-color-wrapper .display-color {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: solid 3px #fff;
}

#Checkbox .check-component {
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding-left: unset;
  font-style: normal;
  font-weight: 600;
  font-size: 0.875rem;
  color: #5e4897;
}
#Checkbox .check-component input[type=checkbox] {
  font-size: 1rem;
}
#Checkbox .check-component input[type=checkbox]:checked:after {
  background-color: #5e4897;
  border-radius: 4px;
}
#Checkbox .check-component input[type=checkbox]:after {
  border: 1pt solid black;
  border-radius: 4px;
}
#Checkbox .check-component label[for] {
  cursor: pointer;
}
#Checkbox input[type=checkbox]:after {
  width: 14pt;
  height: 14pt;
}

.dropdown {
  display: inline-block;
}
.dropdown .dropdown-toggle {
  min-width: 150px;
  font-size: 0.938rem;
  font-weight: 400;
  line-height: 24px;
  color: #5e4897;
  padding: 8px 15px;
  display: flex;
  gap: 5px;
  justify-content: space-between;
}
.dropdown .dropdown-toggle.standard-toggle {
  border: 1px solid rgb(238.6153715161, 238.131838565, 239.868161435);
  background: white;
}
.dropdown .dropdown-toggle.standard-toggle::after {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  border-left: unset;
  transform: rotate(130deg);
  margin-left: 0.8em;
}
.dropdown .dropdown-toggle.standard-toggle.show::after {
  transform: rotate(-45deg);
  vertical-align: 0.01em;
}
.dropdown .dropdown-toggle::after {
  margin-left: auto;
  display: inline-block;
  align-self: center;
}
.dropdown .dropdown-toggle.edit-toggle {
  border: 1px solid black;
  border-radius: 8px;
}
.dropdown .dropdown-toggle.edit-toggle::after {
  width: 20px;
  height: 20px;
  border: none;
  background: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2216%22%20viewBox%3D%220%200%2015%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.28%204.62L10.88%207.22M1%2011.38V14.5H4.12L14%204.62L10.88%201.5L1%2011.38Z%22%20stroke%3D%22%23F4991A%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
.dropdown .dropdown-toggle:focus {
  box-shadow: unset;
}
.dropdown .dropdown-menu {
  margin-top: -10px !important;
  min-width: 150px;
  border: 1px solid rgb(238.6153715161, 238.131838565, 239.868161435);
  background: white;
  border-top: none;
  z-index: 2000;
}
.dropdown .dropdown-menu.edit-toggle {
  border: 1px solid black;
  border-radius: 8px;
  background: #fff;
  margin-top: -1px !important;
}
.dropdown .dropdown-menu .dropdown-item {
  font-size: 0.938rem;
  font-weight: 400;
  line-height: 24px;
  color: #5e4897;
}
.dropdown .dropdown-menu .dropdown-item.selected-item {
  background: rgb(238.6153715161, 238.131838565, 239.868161435);
}
.dropdown .disabled-item {
  color: black;
  background: rgb(238.6153715161, 238.131838565, 239.868161435);
}

.floating-labels .form-control {
  padding: 10px 20px;
  border: 1px solid rgb(238.6153715161, 238.131838565, 239.868161435);
  border-radius: 0.5rem;
  background-color: rgb(238.6153715161, 238.131838565, 239.868161435);
}
.floating-labels .form-control.valid {
  border-color: #eff4ed;
  background-color: #fbfff9;
}
.floating-labels .form-control[aria-invalid]:not(:focus) {
  border: solid 1px #e9d2d4;
  background-color: #f8eeef !important;
  color: #dd0b14;
}
.floating-labels .form-control[aria-invalid]:not(:focus) + label {
  color: #dd0b14 !important;
}
.floating-labels .form-control:focus {
  box-shadow: none;
}
.floating-labels .form-floating {
  margin-top: 14px;
}
.floating-labels .form-floating > label {
  margin: 1px 0 1px 8px;
  padding: 0.75rem !important;
  display: block;
  background-color: transparent;
  height: calc(100% - 2px);
  white-space: nowrap;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #5e4897;
  border-radius: 1em;
}
.floating-labels .form-floating > .form-control {
  line-height: 2;
  height: revert;
}
.floating-labels .form-floating > .form-control[aria-invalid] ~ label {
  color: #5e4897;
}
.floating-labels .form-floating > .form-control:is(textarea) {
  padding-top: 0.7em !important;
  padding-bottom: 0.7em !important;
}
.floating-labels .form-floating > .form-control:not(:placeholder-shown) {
  border: solid 1px #e4eae2;
  background-color: #fbfff9;
}
.floating-labels .form-floating > .form-control:focus,
.floating-labels .form-floating > .form-control:not(:placeholder-shown),
.floating-labels .form-floating > .form-select {
  padding: 10px 20px;
}
.floating-labels .form-floating > .form-control:focus ~ label,
.floating-labels .form-floating > .form-control:not(:placeholder-shown) ~ label,
.floating-labels .form-floating > .form-select ~ label {
  opacity: 1;
  display: flex;
  align-items: center;
  background-color: white;
  padding: 0 13px 21px 13px;
  height: 1em;
  margin-left: 7px;
  margin-top: -4px;
  /*@include menutabactive;*/
}
.floating-labels .validation-message {
  margin-left: 21px;
}
@media screen and (min-width: 768px) {
  .floating-labels .input-checkmark-metrics-validation-container, .floating-labels #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container, #DoorAccessoryConfigurator .floating-labels .input-checkmark-withoutvalidation-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}
.floating-labels .input-checkmark-metrics-validation-container .input-group, .floating-labels #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group, #DoorAccessoryConfigurator .floating-labels .input-checkmark-withoutvalidation-container .input-group {
  display: grid;
  max-width: 350px;
}
@media screen and (max-width: 767.6px) {
  .floating-labels .input-checkmark-metrics-validation-container .input-group, .floating-labels #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group, #DoorAccessoryConfigurator .floating-labels .input-checkmark-withoutvalidation-container .input-group {
    max-width: unset;
  }
}
.floating-labels .input-checkmark-metrics-validation-container .input-group .inputBox, .floating-labels #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group .inputBox, #DoorAccessoryConfigurator .floating-labels .input-checkmark-withoutvalidation-container .input-group .inputBox {
  border-radius: unset;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  grid-row-start: 1;
}
.floating-labels .input-checkmark-metrics-validation-container .input-group .checkmark, .floating-labels #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group .checkmark, #DoorAccessoryConfigurator .floating-labels .input-checkmark-withoutvalidation-container .input-group .checkmark {
  background-color: #fbfff9;
}
.floating-labels .input-checkmark-metrics-validation-container .input-group .checkmark i, .floating-labels #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group .checkmark i, #DoorAccessoryConfigurator .floating-labels .input-checkmark-withoutvalidation-container .input-group .checkmark i {
  font-size: 25px;
  color: #68b43e;
}
.floating-labels .input-checkmark-metrics-validation-container .input-group .input-group-text, .floating-labels #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group .input-group-text, #DoorAccessoryConfigurator .floating-labels .input-checkmark-withoutvalidation-container .input-group .input-group-text {
  border: solid 1px #e7ede4;
  border-left: none;
  grid-row-start: 1;
}
.floating-labels .input-checkmark-metrics-validation-container .input-group .input-group-text.checkmark, .floating-labels #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group .input-group-text.checkmark, #DoorAccessoryConfigurator .floating-labels .input-checkmark-withoutvalidation-container .input-group .input-group-text.checkmark {
  display: none;
}
.floating-labels .input-checkmark-metrics-validation-container .input-group .input-group-text.metrics, .floating-labels #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group .input-group-text.metrics, #DoorAccessoryConfigurator .floating-labels .input-checkmark-withoutvalidation-container .input-group .input-group-text.metrics {
  max-width: 50px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: #fff;
  border: solid 1px #e7ede4;
}
.floating-labels .input-checkmark-metrics-validation-container .input-group .modified.valid:not(:focus) + .checkmark, .floating-labels #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group .modified.valid:not(:focus) + .checkmark, #DoorAccessoryConfigurator .floating-labels .input-checkmark-withoutvalidation-container .input-group .modified.valid:not(:focus) + .checkmark {
  display: initial;
}
.floating-labels .input-checkmark-metrics-validation-container .input-group .modified:placeholder-shown + .checkmark.checkmark, .floating-labels #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group .modified:placeholder-shown + .checkmark.checkmark, #DoorAccessoryConfigurator .floating-labels .input-checkmark-withoutvalidation-container .input-group .modified:placeholder-shown + .checkmark.checkmark {
  display: none;
}

.RadioButtons {
  display: flex;
  gap: 30px;
  align-items: center;
  font-style: normal;
  font-weight: 600;
  font-size: 0.875rem;
  color: #5e4897;
}
.RadioButtons .form-check {
  cursor: pointer;
}
.RadioButtons .form-check .form-check-input {
  font-size: 1rem;
}
.RadioButtons .form-check .form-check-input:checked[type=radio] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%235e4897'/%3e%3c/svg%3e");
  background-color: #fff;
  border-color: black;
}
.RadioButtons input[type=radio]:after {
  all: unset;
}

#ToggleSwitch {
  display: flex;
  align-items: center;
  font-style: normal;
  font-weight: 600;
  font-size: 0.875rem;
  color: #5e4897;
}
#ToggleSwitch .form-switch {
  font-size: 1.563rem;
}
#ToggleSwitch .form-switch .form-check-input {
  margin-top: 0;
}
#ToggleSwitch .form-switch .form-check-input.always-on-style {
  background-color: #fff;
  border-color: black;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3ccircle cx='10' cy='10' r='7' fill='rgba(155, 128, 185, 0.9)'/%3e%3c/svg%3e"); /* Change %23fff to your desired color */
}
#ToggleSwitch .form-switch .form-check-input.always-on-style:hover {
  background-color: #5e4897;
  border-color: #5e4897;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3ccircle cx='10' cy='10' r='7' fill='%23fff'/%3e%3c/svg%3e"); /* Change %23fff to your desired color */
}
#ToggleSwitch input[type=checkbox]:after {
  all: unset;
}

#TooltipRadioButtons {
  display: flex;
  gap: 30px;
  align-items: center;
  font-style: normal;
  font-weight: 600;
  font-size: 0.875rem;
  color: #5e4897;
}
#TooltipRadioButtons .form-check {
  cursor: pointer;
}
#TooltipRadioButtons .form-check .form-check-input {
  font-size: 1rem;
}
#TooltipRadioButtons .form-check .form-check-input:checked[type=radio] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%235e4897'/%3e%3c/svg%3e");
  background-color: #fff;
  border-color: black;
}
#TooltipRadioButtons input[type=radio]:after {
  all: unset;
}

#DoorAccessoryConfigurator {
  color: #464c58;
}
#DoorAccessoryConfigurator .ConfguratorPageHeading {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}
@media screen and (max-width: 767.6px) {
  #DoorAccessoryConfigurator .ConfguratorPageHeading {
    display: none;
  }
}
#DoorAccessoryConfigurator .ConfguratorPageHeading .ConfiguratorH1 {
  margin: unset;
  font-size: 40px;
  font-weight: bold;
  margin-left: 1.25rem;
}
#DoorAccessoryConfigurator .validation-message {
  font-size: 1rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.88;
  letter-spacing: normal;
  color: #464c58;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  background-color: #f9d9da;
  padding: 8px 16px;
  display: block;
  margin-top: 8px;
  margin-bottom: 0;
  width: auto;
}
@media screen and (max-width: 767.6px) {
  #DoorAccessoryConfigurator .validation-message {
    font-size: 15px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: normal;
    color: #464c58;
    padding: 15px;
    margin-bottom: 10px;
  }
}
#DoorAccessoryConfigurator .validation-message:before {
  content: url("../images/Messages/icon-alert.png");
  padding-right: 20px;
  position: relative;
  top: 5px;
}
@media screen and (max-width: 767.6px) {
  #DoorAccessoryConfigurator .validation-message:before {
    padding-right: 10px;
  }
}
#DoorAccessoryConfigurator .btn:focus {
  box-shadow: unset;
}
#DoorAccessoryConfigurator #pricescontainer .price-orange {
  font-size: 1.875rem;
  font-weight: 800;
  color: #f4991a;
}
@media screen and (max-width: 767.6px) {
  #DoorAccessoryConfigurator #pricescontainer .price-orange {
    font-size: 1.35rem;
  }
}
#DoorAccessoryConfigurator #pricescontainer .price-grey {
  font-size: 0.8rem;
  color: #a3a1ba;
}
#DoorAccessoryConfigurator #pricescontainer .discount {
  border-radius: 19px;
  padding: 10px 20px;
  border: solid 1px #5e4897;
  font-size: 0.75rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.9px;
  color: #5e4897;
}
@media screen and (max-width: 767.6px) {
  #DoorAccessoryConfigurator #pricescontainer .discount {
    padding: 8px 15px;
    font-size: 0.625rem;
  }
}
#DoorAccessoryConfigurator #PriceAndDeliveryContainer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
@media screen and (max-width: 767.6px) {
  #DoorAccessoryConfigurator #PriceAndDeliveryContainer {
    display: grid;
  }
}
#DoorAccessoryConfigurator #PriceAndDeliveryContainer #DeliveryTimeContainer {
  display: flex;
  align-items: center;
}
#DoorAccessoryConfigurator .configurator-items {
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-gap: 8px;
}
#DoorAccessoryConfigurator .configurator-items .configurator-item-title {
  flex-basis: 200px;
}
#DoorAccessoryConfigurator .configurator-items .configurator-item-choices {
  flex-grow: 3;
}
#DoorAccessoryConfigurator .inputBox {
  padding: 10px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.88;
  min-width: 280px;
}
@media screen and (max-width: 767.6px) {
  #DoorAccessoryConfigurator .inputBox {
    width: 100%;
  }
}
#DoorAccessoryConfigurator .inputBox::placeholder {
  color: #5e4897;
}
#DoorAccessoryConfigurator .inputBox:not(:placeholder-shown) {
  border: solid 1px #e7ede4;
  background-color: #fbfff9;
}
#DoorAccessoryConfigurator .inputBox:placeholder-shown {
  border: solid 1px #f0eff9;
  background-color: #fbfbff;
}
#DoorAccessoryConfigurator .inputBox:focus-visible {
  outline: none;
}
#DoorAccessoryConfigurator .valid.modified:not([type=checkbox]) {
  outline: none;
}
#DoorAccessoryConfigurator input.invalid {
  background-color: #f8eeef !important;
  color: #dd0b14;
  border: solid 1px #e4c6c8;
  outline: none;
}
#DoorAccessoryConfigurator input.invalid ~ p {
  color: #dd0b14;
}
#DoorAccessoryConfigurator .radio-input-with-buttons-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media screen and (max-width: 767.6px) {
  #DoorAccessoryConfigurator .radio-input-with-buttons-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
  }
}
#DoorAccessoryConfigurator .radio-input-with-buttons-group .input-button-label {
  padding: 8px 16px;
  border-radius: 6px;
  color: #f4991a;
  background-color: #fff;
  border: 1px solid #f4991a;
  font-size: 12px;
  letter-spacing: 0.9px;
  cursor: pointer;
  display: block;
  text-align: center;
}
@media screen and (max-width: 767.6px) {
  #DoorAccessoryConfigurator .radio-input-with-buttons-group .input-button-label {
    padding: 8px;
  }
}
#DoorAccessoryConfigurator .radio-input-with-buttons-group input[type=radio] {
  display: block;
  position: absolute;
  left: 0;
  opacity: 0.01 !important;
  z-index: 100 !important;
}
#DoorAccessoryConfigurator .radio-input-with-buttons-group input:checked + label,
#DoorAccessoryConfigurator .radio-input-with-buttons-group .Checked + label {
  background-color: #f4991a;
  color: #fff;
}
#DoorAccessoryConfigurator .radio-input-with-buttons-group label:hover {
  background-color: #f4991a;
  color: #fff;
}
#DoorAccessoryConfigurator .radio-input-with-buttons-group input:disabled + label {
  border: solid 2px #c0bfd4;
  color: #c0bfd4;
  background: #fff;
  font-weight: bold;
}
#DoorAccessoryConfigurator .radio-input-with-buttons-group input:disabled + label:hover {
  background: #fff;
  color: #c0bfd4;
  cursor: default;
}
@media screen and (min-width: 768px) {
  #DoorAccessoryConfigurator .input-checkmark-metrics-validation-container, #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}
#DoorAccessoryConfigurator .input-checkmark-metrics-validation-container .input-group, #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group {
  display: grid;
  max-width: 350px;
}
@media screen and (max-width: 767.6px) {
  #DoorAccessoryConfigurator .input-checkmark-metrics-validation-container .input-group, #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group {
    max-width: unset;
  }
}
#DoorAccessoryConfigurator .input-checkmark-metrics-validation-container .input-group .inputBox, #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group .inputBox {
  border-radius: unset;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  min-width: unset;
  grid-row-start: 1;
  max-width: 300px;
}
@media screen and (max-width: 767.6px) {
  #DoorAccessoryConfigurator .input-checkmark-metrics-validation-container .input-group .inputBox, #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group .inputBox {
    max-width: unset;
  }
}
#DoorAccessoryConfigurator .input-checkmark-metrics-validation-container .input-group .checkmark, #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group .checkmark {
  background-color: #fbfff9;
}
#DoorAccessoryConfigurator .input-checkmark-metrics-validation-container .input-group .checkmark i, #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group .checkmark i {
  font-size: 25px;
  color: #68b43e;
}
#DoorAccessoryConfigurator .input-checkmark-metrics-validation-container .input-group .input-group-text, #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group .input-group-text {
  border: solid 1px #e7ede4;
  border-left: none;
  grid-row-start: 1;
}
#DoorAccessoryConfigurator .input-checkmark-metrics-validation-container .input-group .input-group-text.checkmark, #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group .input-group-text.checkmark {
  display: none;
}
#DoorAccessoryConfigurator .input-checkmark-metrics-validation-container .input-group .input-group-text.metrics, #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group .input-group-text.metrics {
  max-width: 50px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: #fff;
  border: solid 1px #e7ede4;
}
#DoorAccessoryConfigurator .input-checkmark-metrics-validation-container .input-group .modified.valid:not(:focus) + .checkmark, #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group .modified.valid:not(:focus) + .checkmark {
  display: inline-block;
}
#DoorAccessoryConfigurator .input-checkmark-metrics-validation-container .input-group .modified:placeholder-shown + .checkmark.checkmark, #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group .modified:placeholder-shown + .checkmark.checkmark {
  display: none;
}
#DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container {
  display: block;
}
#DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group {
  display: grid;
  grid-template-columns: auto 50px;
}
@media screen and (min-width: 768px) {
  #DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group {
    max-width: 471px;
  }
}
#DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group .inputBox {
  max-width: unset;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
#DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group .inputBox:not(:placeholder-shown):not(:focus) {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
#DoorAccessoryConfigurator .input-checkmark-withoutvalidation-container .input-group .inputBox:not(:placeholder-shown):not(:focus) + .checkmark {
  display: inline-block;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
#DoorAccessoryConfigurator .nav-tabs .nav-link {
  padding: 20px 24px 19px;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.9px;
  color: #5e4897;
  border-radius: 5px;
  cursor: pointer;
}
@media screen and (max-width: 767.6px) {
  #DoorAccessoryConfigurator .nav-tabs .nav-link {
    padding: 11px 10px 12px 11px;
    border-radius: 4px;
    font-size: 11px;
  }
}
#DoorAccessoryConfigurator .nav-tabs .active {
  border: none !important;
  background-color: #f0eff9 !important;
  border-bottom: solid 3px #9b80b9 !important;
}
#DoorAccessoryConfigurator .link {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.9px;
  color: #f4991a;
  width: 100%;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
}
#DoorAccessoryConfigurator .stepNumber {
  border: solid 1.6px #c0bfd4;
  width: 36px;
  height: 36px;
  justify-content: center;
  color: #c0bfd4;
  font-size: 24px;
  font-weight: bold;
  border-radius: 100%;
  display: flex;
  align-items: center;
}
#DoorAccessoryConfigurator .stepNumber.active {
  background: #5e4897;
  color: #fff;
  border: unset;
}
#DoorAccessoryConfigurator .stepNumber.completed {
  background-color: #f4991a;
  color: #fff;
  cursor: pointer;
  border: unset;
}
#DoorAccessoryConfigurator .card-description-text-large .configurator-card-description {
  font-size: 1rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.88;
  letter-spacing: normal;
  color: #464c58;
}
@media screen and (min-width: 768px) {
  #DoorAccessoryConfigurator .customshadow {
    box-shadow: 0 2px 18px 0 rgba(0, 0, 0, 0.07);
  }
}
#DoorAccessoryConfigurator .heading-vid-accordian-grouping:has(.validation-message) .h3 {
  color: red;
  margin-bottom: 20px;
}
#DoorAccessoryConfigurator .heading-vid-accordian-grouping {
  display: grid;
  column-gap: 15px;
  align-items: center;
}
#DoorAccessoryConfigurator .heading-vid-accordian-grouping .h3 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
}
#DoorAccessoryConfigurator .heading-vid-accordian-grouping p {
  margin-bottom: unset;
}
#DoorAccessoryConfigurator .heading-vid-accordian-grouping .validation-message {
  grid-row-start: 2;
  grid-column-start: 1;
  grid-column-end: 3;
}
#DoorAccessoryConfigurator .heading-vid-accordian-grouping .video-modal {
  grid-column-start: 2;
  grid-row-start: 1;
}
@media screen and (max-width: 767.6px) {
  #DoorAccessoryConfigurator .heading-vid-accordian-grouping .video-modal {
    grid-column-start: 1;
    grid-row-start: 4;
    margin-top: 20px;
  }
  #DoorAccessoryConfigurator .heading-vid-accordian-grouping .video-modal .videoModalButton {
    text-align: left;
  }
}
#DoorAccessoryConfigurator .heading-vid-accordian-grouping .more-info {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  margin-top: 20px;
}