* {
  margin: 0;
  padding: 0;
}

*,
*:: before,
*:: after {
  box-sizing: border-box;
}
.top-navabr-new .navbar-nav{
  flex-direction: unset !important;
  margin: 0px -15px !important;

}
body {
  color: #666666;
  font-family: "Open Sans", sans-serif;
}
#productPageDesktop{
  padding-right : 0px !important;
  scrollbar-width: none;
}

input:focus-visible {
  outline: none;
}

.prod-container {
  max-width: 1030px;
  width: 100%;
  margin: 0 auto;
}

.productDesk-section p {
  margin-bottom: 0;
}

.productDesk-section ul.breadcrumb {
  padding: 11px 0px 13px;
  list-style: none;
  background-color: #fff;
  display: inline-flex;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
  height: 20px;
}

.productDesk-section ul.breadcrumb li {
  display: inline;
}

.productDesk-section ul.breadcrumb li + li:before {
  padding: 0 8px;
  color: #666666;
  content: "/\00a0";
}

.productDesk-section ul.breadcrumb li a {
  color: #666666;
  text-decoration: none;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-decoration: underline;
}

.productDesk-section ul.breadcrumb li:last-child a {
  text-decoration: none;
}

.productDesk-section ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}

.content-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 0 30px;
}

.left-wrapper {
  max-width: 660px;
  width: 100%;
}

.product-title {
  font-family: Open Sans;
  font-size: 24px;
  font-weight: 600;
  line-height: 32.68px;
  letter-spacing: -0.01em;
  text-align: left;
  margin-bottom: 15px;
}

.right-wrapper {
  max-width: 440px;
  width: 100%;
}

.frameAmtDesc-heading {
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 27.24px;
  text-align: left;
  color: #094dbc;
}

.amt-hightlight {
  font-family: Open Sans !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 32.68px !important;
  text-align: left !important;
  color: #094dbc !important;
}

.frameAmt {
  display: inline-block;
  margin-left: 10px;
  color: #888888;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.79px;
  text-align: left;
  text-decoration: line-through;
}

.rating-counts {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.79px;
  text-align: left;
  margin-left: 3px;
}

.ratings-div {
  display: flex;
  align-items: center;
  gap: 0 3px;
  justify-content: center;
  cursor: pointer;
}
#show_review_count{
  cursor: pointer;
}

.sideProductPage-subinfoHeader {
  display: flex;
  justify-content: space-between;
}

.rating-icon {
  width: 17px;
}

.prodCart-div {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 15px 0 10px;
}

.prodQuant-drp {
  border: 1px solid #cccccc;
  color: #333333;
  font-size: 16px;
  line-height: 21px;
  font-weight: 400;
  padding: 0px 15px 0px 10px;
  border-radius: 6px;
  height: 48px;
  max-width: 71px;
  width: 100%;
  appearance: none;
  /*background: url(../desktop_product_new/images/drp-arrow.svg);*/
  background-repeat: no-repeat;
  background-position: calc(100% - 16px);
  background-size: 16px;
}

.prod-addCart-btn {
  background-color: #094dbc;
  padding: 10px 24px 10px 16px;
  border-radius: 6px;
  color: #ffffff;
  font-size: 20px;
  line-height: 20px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.1px;
  border: 0;
  outline: none;
  height: 48px;
  max-width: 329px;
  width: 100%;
}

.cart-icon {
  display: inline-block;
  margin-right: 10px;
  width: 20px;
}

.shipping-msg {
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.07px;
  text-align: left;
  color: #666666;
}

.desk-divider {
  margin: 15px 0;
  border-top: 1px solid #cccccc;
}

.editableDiv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 0;
}

.editableDiv-heading {
  color: #000000;
  font-size: 16px;
  line-height: 16px;
  font-weight: 400;
  
}
.editableDiv-heading-frames{
  width: 400px;
}

.info-icon {
  margin-left: 8px;
  display: inline-block;
}

.measurement-unit {
  color: #cccccc !important;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  display: inline-flex;
  gap: 8px;
}

.measurement-unit span.active {
  color: #094dbc;
  text-decoration: underline;
}

.editableDiv-imageSize-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.customInput-top-div {
  position: relative;
  margin: 0px 0;
  width: 100%;
}

.customInput-top-div-Qty {
  position: relative;
  margin: 0px 0;
}

.customInput-label {
  color: #666666;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  margin-bottom: 0;
  position: absolute;
  left: 5px;
  top: -7px;
  background: white;
  padding: 0 5px;
  z-index: 999;
}

/*.size-input {
  font-size: 16px;
  font-weight: 600;
  line-height: 21px;
  color: #666666;
  border-width: 1px 1px 3px 1px;
  border-color: #666666;
  border-style: solid;
  padding: 12px;
  height: 46px;
  border-radius: 6px;
  width: 100%;
  outline: none;
  }*/

  .imageSize-details-icons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    max-width: 15px;
    width: 100%;
  }

  .update-btn {
    background-color: #094dbc;
    padding: 15px 10px;
    color: #ffffff;
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
    align-items: center;
    max-width: 80px;
    width: 100%;
    height: 46px;
    border-radius: 6px;
    border: 0;
    margin: 10px 0;
    opacity: 20%;
  }

  .dimension-txt {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.07px;
    text-align: left;
    color: #666666;
  }

  .editableDiv-header .editableDiv-heading span {
    font-weight: 600;
  }

  .frameType-scrollableDiv {
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    /*gap: 10px;*/
    padding: 0px 0;
  }

  .frameType-wrap .frame-box {
    flex-basis: 20%;
  }

  .frameType-wrap .frameType-scrollableDiv .frame-name {
    color: #666666;
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    text-align: center;
  }

  .viewAllFrames-txt {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #666666;
    text-decoration: underline;
    cursor: pointer;
    width: 121px;
  }

  p.frmtext.select-frame-text063 {
    font-size: 14px;
    line-height: 19px;
    /*color: #666666;*/
    font-weight: 400;
    margin-bottom: 0;
    margin-top: 6px;
  }

  .frmtext.select-frame-text066{
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.07px;
    text-align: left;
    margin-bottom: 0;
  }

  .select_frame_color
  {
    margin-bottom: 10px;
    cursor: pointer;
  }
  .mainframeCotainter {
    cursor: grab;
  }

/*.frameType-wrap .frame-box img{
	border: 4px solid transparent;
}

.frameType-wrap .frame-box.active img{
	border: 4px solid #094DBC;
  }*/

  .frameType-wrap .frame-box.active .frame-name {
    color: #094dbc;
  }

  .frameType-wrap .frameType-scrollableDiv::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .frameType-scrollableDiv::-webkit-scrollbar-track {
    background-color: transparent;
    box-shadow: none;
  }

  .frameType-scrollableDiv::-webkit-scrollbar-thumb {
    background-color: #cccccc;
    width: 60px;
    height: 6px;
    border-radius: 6px;
  }

  .addMat-btn {
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    color: #094dbc;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 130px;
    width: 100%;
    border-radius: 6px;
    border: 1px solid #094dbc;
    padding: 10px;
    background-color: unset;
    outline: none;
    white-space: nowrap;
  }

  .addMat-btn span {
    color: #666666;
    display: inline-block;
    margin-left: 6px;
  }

  .mattingImg-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: end;
  }

  .info-icon {
    cursor: pointer;
  }

  .custFtame-title {
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 21.79px;
    text-align: left;
    color: #000000;
  }

  .custFtame-title .typeTxt {
    color: #666666;
  }


  .custFtame-title a {
    color: #094dbc !important;
    text-decoration: underline;
  }

  .custFrameInclude-txt {
    margin-bottom: 12px;
  }

  .custFrameInclude-txt .typeTxt{
    color: #444444 !important;
  }

  .uploadImgBlock-div {
  }

  .uploadImgBlock-div input[type="file"] {
    display: none;
  }

  .uploadImgBlock-div .custom-file-upload {
    display: inline-flex;
    padding: 0px;
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #444444;
    margin-bottom: 0;
    align-items: center;
    gap: 6px;
  }

  .addImg-icon {
    display: inline-block;
  }

  .custom-file-upload span {
    color: #666666;
    font-size: 12px;
    line-height: 24px;
    font-weight: 400;
  }

  .preview-txt {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: #444444;
  }

  .bottomPrice-addbtnSection .frameAmtDesc-heading {
    margin-bottom: 0;
  }

  .product-detailsSection {
    margin-top: 39px;
  }

   .productDetails-nav li{
    max-width: 150px;
    max-height: 48px;
    width: 100%;

  }

  .productDetails-nav a {
    font-size: 16px;
    line-height: 20px;
    align-items: center;
    font-weight: 500;
    color: #666666;
  }

  .productDetails-nav a {
    color: #666666;
    text-decoration: none;
    padding: 14px 45px;
    display: inline-block;
  }


  .productDetails-nav a.active {
    color: #094dbc !important;
    text-decoration: none;
    padding: 14px 45px;
    display: inline-block;
    border-bottom: 2px solid #094dbc;
  }

  .productDetails-nav {
    border-bottom: 0px solid #e6e0e9;
    display: flex;
    justify-content: space-between;
  }

  .prodDetailsTab-heading {
    font-size: 20px;
    color: #000000;
    line-height: 27px;
    font-weight: 400;
    margin-bottom: 10px;
  }

  .productDetails-tab-div .tab-pane p.prodDetails-tab-txt {
    font-size: 16px;
    line-height: 21px;
    font-weight: 400;
    color: #666666;
    margin-bottom: 10px;
  }

  .productDetails-tab-div .tab-pane p.prodDetails-tab-txt span {
    font-weight: 700;
  }

  .productDetails-tab-div .tab-content {
    padding: 15px 0 0;
  }

  .prodDetails-tab-txt {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #666666;
    margin-bottom: 10px !important;
  }

  .prodDetails-tab-txt span {
    font-weight: 700;
  }

  .additionalInfo-list {
    padding-left: 20px;
    margin-bottom: 0;
  }

  .productDetails-tab-btn {
    font-size: 16px;
    line-height: 16px;
    color: #666666;
    font-weight: 600;
    padding: 14px 15px;
    border: 1.5px solid #666666;
    border-radius: 6px;
    background-color: transparent;
    outline: none;
    margin: 0px 0 0;
  }

  .productDetails-tab-btn-new {
    font-size: 16px;
    line-height: 16px;
    color: #666666;
    font-weight: 600;
    padding: 14px 15px;
    border: 1.5px solid #666666;
    border-radius: 6px;
    background-color: transparent;
    outline: none;
    margin: 0px 0 0;
  }

  .reviews-counts {
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    margin-left: 6px;
  }

  .reviews-div {
    display: flex;
    align-items: center;
    margin: 10px 0;
  }

  .reviews-icon {
    width: 25px;
  }

  .reviews-content p {
    font-size: 16px;
    line-height: 21px;
    font-weight: 400;
    color: #666666;
  }

  .reviews-content p span {
    font-weight: 700;
  }

  .reviews-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0 10px;
  }

  .reviews-block {
    margin-bottom: 10px;
  }

  .reviews-date {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.07px;
    text-align: right;
    color: #666666;
  }

  .photosByCust-imgBlock {
    width: 100px;
    height: 100px;
  }

  .photosByCust-imgBlock img {
    /*	width: 100%;*/
    /*	max-width: 100%;*/
    height: 100%;
  }

  .photosByCust-row {
    display: flex;
    gap: 10px;
  }

  .photosBy-customer {
    padding-top: 27px;
  }

  .photosBy-customer h6 {
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 600;
    line-height: 21.79px;
    text-align: left;
    color: #666666;
  }

  .similarProd-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
  }

  .similarProd-col {
    width: 100%;
    max-width: 100%;
  }

  .similarProd-col img {
    width: 100%;
  }

  .similarProd-txt {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.07px;
    text-align: left;
    color: #666666;
    margin-top: 10px;
  }

  .specification-block p {
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 21.79px;
    text-align: left;
    color: #666666;
  }

  .specification-block {
    display: flex;
    gap: 30px;
  }

  .mainSection-txt {
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 21.79px;
    text-align: left !important;
    color: #666666;
    margin: 15px 0 !important;
  }

  .frameImgDiv-section {
    margin-bottom: 15px;
  }

  /* =============================== css for view all frames popup =================================== */

 .viewAllFrameModal {
   z-index: 100000 !important;
  }
  .sizeModal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }

 /* .viewAllFrameModal .modal-dialog {
    max-width: 780px;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }*/

  .viewAllFrameModal .modal-dialog {
    max-width: 630px;
    width: 100%;
    height: 100%;
    margin: -3px 12px 0px auto;
  }

   /*#productPageDesktop .viewAllFrameModal .modal-backdrop {
      opacity: 0 !important;
      z-index: 999;
    }*/

  .viewAllFrameModal .filter-btn {
    border: 1px solid #cccccc;
    font-size: 16px;
    line-height: 16px;
    color: #666666;
    font-weight: 600;
    padding: 13px 15px;
    background-color: transparent;
    outline: none;
    border-radius: 6px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 145px;
    width: 100%;
  }

  .viewAllFrameModal .filter-icon {
    display: inline-block;
    margin-left: 10px;
  }

  .viewAllFrameModal .selectFrame-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 17.5px;
    padding-right: 6px;
  }

  .viewAllFrameModal .modal-body {
    padding: 15px 13px 15px 15px;
  }

  .viewAllFrameModal .modal-content {
    border: 0;
    border-radius: 0px;
    height: 100% !important;
  }

  .viewAllFrameModal .selectFrame-col .frame-title {
    font-size: 14px;
    line-height: 19px;
    color: #666666;
    font-weight: 400;
    margin-bottom: 0;
  }

  .viewAllFrameModal .frame-content-wrapper span {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.07px;
    text-align: left;
    color: #dadada;
  }

  .viewAllFrameModal .frame-content-wrapper .amt-val {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.07px;
    text-align: left;
    margin-bottom: 0;
  }

  .viewAllFrameModal .frame-content-wrapper {
    margin-top: 6px;
  }

  .viewAllFrameModal .selectFrame-col {
    flex-basis: 100px;
    margin-bottom: 20px;
  }

  .viewAllFrameModal .selectFrame-wrapperOld {
    margin-top: 10px;
    max-height: 585px;
    /*height: 100%;*/
    height: 430px;
    overflow-y: scroll;
  }
 /* .viewAllFrameModal .selectFrame-wrapper {

    min-height: 0; 
    max-height: calc(100vh - 194px); 
    height: auto; 
    overflow-y: scroll;
}
*/

.viewAllFrameModal {
    padding-right: 0px !important; 
    padding-left: 0px !important; 
    left: 12px !important;
}

  .viewAllFrameModal .selectFrame-wrapper {
      min-height: 0px; 
      /*max-height: calc(100vh - 194px);*/
      max-height: calc(100vh - 257px);
      height: auto; 
      overflow-y: scroll;
  }
  .viewAllFrameModal .selectFrame-wrapper::-webkit-scrollbar {
    width: 10px;
    height: 56px !important;
    flex: none;
    order: 1;
    flex-grow: 0;

  }
  .viewAllFrameModal .selectFrame-wrapper::-webkit-scrollbar-track {
    background-color: #fff;
  }

  .viewAllFrameModal .selectFrame-wrapper::-webkit-scrollbar-thumb {
    background-color: #cccccc;
    width: 6px;
    border-radius: 6px;
  }

  .viewAllFrameModal .sizeModal-top h5.modal-title {
    font-size: 20px;
    color: #666666;
    line-height: 20px;
    font-weight: 600;
  }

  .selectFrame-col.active img.selectedframe-img {
    border: 4px solid #094dbc;
  }

  .selectFrame-col.active .frame-title {
    color: #094dbc;
    font-weight: 600;
  }

  .selectFrame-col.active .amt-val {
    color: #094dbc;
  }

  .selectFrame-btn-row {
    margin: 21px 0px 0px;
  }

  .cancel-btn {
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
    color: #666666;
    border: 0;
    outline: none;
    padding: 14px 15px;
    background-color: transparent;
  }

  .select-frame-btn {
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
    color: #094dbc;
    border: 1.5px solid #094dbc;
    border-radius: 6px;
    padding: 14px 15px;
    height: 44px;
    max-width: 130px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    white-space: nowrap;
  }

  .selectFrame-btn-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
  }

/*  .viewFramesCust-select {
    border: 1px solid #cccccc;
    font-size: 14px;
    line-height: 16px;
    color: #666666;
    font-weight: 650;
    padding: 10px 20px;
    background-color: transparent;
    outline: none;
    border-radius: 6px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    appearance: none;
    background: url(../desktop_product_new/images/drp-arrow.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 5px);
    background-size: 17px;

  }*/

  .viewFramesCust-select {
    border: 1px solid #cccccc;
    font-size: 14px;
    line-height: 16px;
    color: #666666;
    font-weight: 550;
    padding: 11px 25px;
    background-color: transparent;
    outline: none;
    border-radius: 6px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    appearance: none;
    background: url(../desktop_product_new/images/drp-arrow.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 5px);
    background-size: 17px;
}

  .viewFramesCust-select.clrDrp {
    max-width: 124px;
    width: 100%;
  }

  .viewFramesCust-select.sortBy-drp {
    max-width: 125px;
    width: 100%;
  }

  .viewFramesCust-select.materialDrp {
    max-width: 114px;
    width: 100%;
  }


  .viewFramesCust-select.clrDrp::-webkit-scrollbar {
    width: 4px;
    height: 5px;
  }

  .viewFramesCust-select.clrDrp::-webkit-scrollbar-track {
    background-color: #fff;
  }

  .viewFramesCust-select.clrDrp::-webkit-scrollbar-thumb {
    background-color: #cccccc;
    width: 4px;
    border-radius: 6px;
  }


  .selectFrame-sizeBtn {
    max-width: 145px;
    width: 100%;
    white-space: nowrap;
  }

  .modaltop-filterdiv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
  }

  .top-filterBtn {
    font-family: Open Sans;
    font-size: 16px;
    line-height: 16px;
    color: #094dbc;
    font-weight: 600;
    padding: 10px 14px;
    background-color: transparent;
    outline: none;
    border-radius: 6px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 70px;
    width: 100%;
    border: 1px solid #094dbc;
  }

  .searchInput {
    font-family: Open Sans;
    font-size: 16px;
    /*font-weight: 600;*/
    line-height: 16px;
    text-align: left;
    border: 1px solid #cccccc;
    border-radius: 6px;
    padding: 10px 13px;
    max-width: 175px;
    width: 100%;
    background: url(../desktop_product_new/images/search_icon.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 8px);
    background-size: 16px;
  }

  /* =============================== css for view all frames popup =================================== */

  /* =============================== css for matting popup start =================================== */

 /* .addMatting-modal .modal-dialog {
    max-width: 750px;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }*/
  .addMatting-modal{
    z-index: 100000 !important;
    padding-right: 0px !important; 
    padding-left: 0px !important; 
    left: -1px !important;
  }

   .addMatting-modal .modal-dialog {
   max-width: 600px;
    width: 100%;
    height: 100%;
    /*margin: 5px 3px 0px auto*/
    margin: 0px 0px 0px auto

  }

  .addMatting-modal h5.modal-title {
    font-family: Open Sans;
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
    /*margin-bottom: 0;*/
    margin: 5px 5px 0px 5px;
    color: #49454F;
  }
  .customMatList{
margin-top:0px;
  }
  .matPopupClose{
   margin: -20px 10px 5px 5px;
  }
  .addMatting-modal .modal-body {
    /*padding: 15px 15px 15px 15px;*/
  }

  .addMatting-modal .modal-content {
    border: 0;
    height: 100% !important;
  }

  .addMatting-modal .allColors-drp {
    height: 42px;
    padding: 10px 10px;
    border: 1.5px solid #cccccc;
    border-radius: 6px;
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
    color: #666666;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    width: 100%;
    appearance: none;
    background: url(../desktop_product_new/images/drp-arrow.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 5px);
    background-size: 12px;
    cursor: pointer;
  }


  .addMatting-modal .allMatType-drp {
    height: 42px;
    padding: 10px 15px;
    border: 1.5px solid #cccccc;
    border-radius: 6px;
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 600;
    line-height: 17px;
    text-align: left;
    color: #666666;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 158px;
    width: 100%;
    appearance: none;
    background: url(../desktop_product_new/images/drp-arrow.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 5px);
    background-size: 12px;
    cursor: pointer;
  }

  .addMatting-modal .addmat-topMat{
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 21.79px;
    text-align: center;
    color:#666666;
    padding: 14px 20px;
    text-decoration: none;
    cursor: pointer;
  }

  .addMatting-modal .addmat-topMat.active{
    border-bottom: 2px solid #094DBC;
    color:#094DBC;
  }

  .addMatting-modal .addmat-topMat.disable{
   color: #F2F2F2
 }
 .addMatting-modal .addmat-topMat:hover{
  text-decoration: none;
}

.addMatting-modal .matting-filter{
	display: flex;
	align-items: center;
	justify-content: space-between;
	/*gap: 85px;*/
	margin-bottom: 10px;
	padding: 6px 0;
}

.addMatting-modal .matting-filter-left{
	display: flex;
	align-items: center;
	/*justify-content: center;*/
  width: 100%;
}


.addMatting-modal .matting-filter-right{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.addMatting-modal .addmatting-wrapperOld{
 /*margin-top: 10px;*/
 max-height: 300px;
 height: 100%;
 overflow-y: auto;
 overflow-x: hidden;

}

.addMatting-modal .addmatting-wrapper{
 min-height: 0; 
    max-height: calc(100vh - 283px); 
    height: auto; 
    overflow-y: scroll;

}


.addMatting-modal .addmatting-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 56px;
}

.addMatting-modal .addmatting-wrapper::-webkit-scrollbar-track {
  background-color: #fff;
}

.addMatting-modal .addmatting-wrapper::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  width: 6px;
  border-radius: 6px;
}

.addMatting-modal .matting-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  padding-right: 6px;
}

/*.addMatting-modal .mattingGrid-col{
 flex-basis: 100px;
 margin-bottom: 20px;
}*/

.addMatting-modal .matting-title-heading{
	font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.07px;
  text-align: center;
  color: #666666;

}

.addMatting-modal .mattingGrid-col.active .matting-title-heading{
	color:#094DBC;
	font-weight: 600;
}

.addMatting-modal .selectMat-btn-row{
	display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  /*padding: 10px 0;*/
}

.addMatting-modal .btnSection-right{
	display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}


.addMatting-modal .remove-btn{
 font-family: Open Sans;
 font-size: 16px;
 font-weight: 600;
 line-height: 16px;
 text-align: left;
 color: #666666;
 border: 1.5px solid #CCCCCC;
 border-radius: 6px;
 padding: 14px 15px;
 height: 44px;
 min-width: 127px;
 width: 100%;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background-color: transparent;
 white-space: nowrap;
}

.addMatting-modal .matwidth-txt{
	font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  text-align: left;
  color: #666666;
  /*margin-top: 10px;*/
}

/*.home-text22 {
  color: rgba(102, 102, 102, 1);
  height: auto;
  font-size: 11px;
  align-self: stretch;
  font-style: Regular !important;
  text-align: center;
  font-family: Open Sans;
  font-weight: 700;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}*/

/*.home-text23 {
  color: rgba(102, 102, 102, 1);
  height: auto;
  font-size: 11px;
  align-self: stretch;
  font-style: Regular !important;
  text-align: center;
  font-family: Open Sans;
  font-weight: 700;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}*/

/*.home-text23 {
  color: rgba(102, 102, 102, 1);
  height: auto;
  font-size: 14px;
  align-self: stretch;
  font-style: Regular !important;
  text-align: center;
  font-family: Open Sans;
  font-weight: 700;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}
*/

/* Royal */

.home-text22 {
width: 100px;
height: 19px;
/*font-family: 'Open Sans';*/
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 30px;
/* identical to box height */
text-align: center;
color: #444444;
/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
}

.home-text25 {
width: 100px;
height: 19px;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 97px;
text-align: center;
color: #444444;
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
}

.home-text26 {
width: 100px;
height: 19px;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 97px;
text-align: center;
color: #444444;
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
}

.home-text23 {
width: 100px;
height: 19px;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 30px;
text-align: center;
color: #444444;
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
}

.home-text24 {
width: 100px;
height: 19px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
color: #444444;
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
}

.addMatting-modal .modal-footer {
    display: block !important;  
}

/* Rectangle 143 */


/*new design added for left image*/

.prodSlider-section .home-image27 {
  width: 45px;
  height: 45px;
  /*border-color: rgba(102, 102, 102, 1);
  border-style: solid;
  border-width: 2px;*/
}

.popup_img{
  width: 100%;
  max-width: 100%;
}


/* ==================== 03/05/2024 ====================================== */

/* =====================  css for glass modal  ============================ */
.glass-option-modal{
  background: rgba(0, 0, 0, 0.5) !important;
}

.glass-option-modal .modal-dialog {
  max-width: 450px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.glass-option-modal {
  /*margin-top:10px;*/
}
.glass-option-modal .modal-body {
  /*padding: 15px 15px 15px 15px;*/
  padding: 0px;
}
.glass-option-modal .home-frame1951 {
margin: 0px !important;
}

.glass-option-modal .modal-content {
  border: 0;
}

#glassOption-modal .glasstype-nav {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0px;
  padding: 15px 0;
  border-bottom: 0px solid transparent;
  margin-top: 15px;

}

#glassOption-modal .glasstype-nav li {
  flex-basis: 50%;
}

#glassOption-modal .glasstype-nav a {
  color: #666666;
  text-decoration: none;
  padding: 15px 11px;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 10px;
  text-align: center;
  width: 100%;
  border:0;

}

#glassOption-modal .glasstype-nav a.active {
  color: #094DBC !important;
  text-decoration: none;
  padding: 15px 11px;
  display: inline-block;
  border-bottom: 3px solid #094DBC !important;
}

#glassOption-modal .glassTab-radioSection {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0px 0;
}

#glassOption-modal .glassTab-radioSection input[type=radio] {
  width: 20px;
  height: 20px;
  accent-color: #094DBC;
  flex-shrink: 0;
}

#glassOption-modal .radioTxt-wrap {
  padding-right: 0px;
}

#glassOption-modal .glassTab-radioSection label {
  font-size: 16px;
  line-height: 21px;
  /*color: #666666;*/
  color: #000000;
  font-weight: 400;
  margin-bottom: 0;
}

#glassOption-modal .glassTab-radioSection label span {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.79px;
  text-align: left;
  color: #666666;
}

#glassOption-modal .radioTxt-wrap label span.active {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 700;
  line-height: 21.79px;
  text-align: left;
  color: #094DBC
}

#glassOption-modal .radioTxt-wrap label span.highlight {
  color: #000000;
  font-weight: 600;
}

#glassOption-modal .glassTab-radioSection .radioTxt-wrap label {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.79px;
  text-align: left;
  color: #666666;
}

#glassOption-modal .radioTxt-wrap p {
  margin-bottom: 0;
}

#glassOption-modal .glass-wrapper {
  gap: 10px;
  display: flex;
  padding: 0 0 15px;
  align-self: stretch;
  align-items: flex-start;
  flex-shrink: 0;
  justify-content: space-between;
}

#glassOption-modal .glassmodal-img.active {
  border: 2px solid #094DBC;
}

#glassOption-modal .modalClose-divwrap {
  text-align: right;
}

/*#glassOption-modal .glassmodal-container {
  display: flex;
  flex-direction: column;
  max-height: 440px;
  height: 100%;
  overflow-y: auto;
}*/

#glassOption-modal .glassmodal-container {
  display: flex;
  flex-direction: column;
  min-height: 0; 
  max-height: calc(100vh - 280px); 
  height: auto; 
  overflow-y: scroll;
}

#glassOption-modal .modalClose-divwrap {
  text-align: right;
  position: absolute;
  right: 15px;
  top: 9px;
}

.noGlass-btn {
  gap: 10px;
  display: flex;
  padding: 14px 15px;
  align-items: center;
  border-color: #CCCCCC;
  border-style: solid;
  border-width: 1.5px;
  border-radius: 6px;
  justify-content: center;
  font-size: 16px;
  text-align: left;
  font-family: Open Sans;
  font-weight: 600;
  line-height: 16px;
  font-stretch: normal;
  text-decoration: none;
  color: #666666;
  background-color: transparent;
}


.selectGlass-btn {
  gap: 10px;
  display: flex;
  padding: 14px 15px;
  align-items: center;
  border-color: rgba(9, 77, 188, 1);
  border-style: solid;
  border-width: 1.5px;
  border-radius: 6px;
  justify-content: center;
  font-size: 16px;
  text-align: left;
  font-family: Open Sans;
  font-weight: 600;
  line-height: 16px;
  font-stretch: normal;
  text-decoration: none;
  color: #094dbc;
  background-color: transparent;

}

.cancelGlass-btn {
  gap: 10px;
  display: flex;
  padding: 14px 15px;
  align-items: center;
  border-radius: 6px;
  justify-content: center;
  color: rgba(102, 102, 102, 1);
  height: auto;
  font-size: 16px;
  text-align: left;
  font-family: Open Sans;
  font-weight: 600;
  line-height: 16px;
  font-stretch: normal;
  text-decoration: none;
  background-color: transparent;
  border: 0;
}

.glass-btn-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
}

.btn-div-right {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 4px;
}


.glass-option-modal .glassmodal-container::-webkit-scrollbar {
  width: 6px;
  height: 56px;
}

.glass-option-modal .glassmodal-container::-webkit-scrollbar-track {
  background-color: #fff;
}

.glass-option-modal .glassmodal-container::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  width: 6px;
  border-radius: 6px;
}
/* =====================  css for glass modal  end ============================ */




/* =====================  css for backing modal  ============================ */

.backing-option-modal{
  background: rgba(0, 0, 0, 0.5) !important;
}
.backing-option-modal .backingModal-container{
   min-height: 0; 
    max-height: calc(100vh - 115px); 
    height: auto; 
    overflow-y: scroll;
}


.backing-option-modal .backingModal-container::-webkit-scrollbar {
  width: 5px;
  height: 56px;
}

.backing-option-modal .backingModal-container::-webkit-scrollbar-track {
  background-color: #fff;
}

.backing-option-modal .backingModal-container::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  width: 6px;
  border-radius: 6px;
}


.backing-option-modal .modal-dialog {
  max-width: 450px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.backing-option-modal .modal-body {
  /*padding: 15px 15px 15px 15px;*/
  padding: 0px !important;
}

.backing-option-modal .modal-content {
  border: 0;
}



#backingOption-modal .backingTab-radioSection {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0px 0;
}

#backingOption-modal .backingTab-radioSection input[type=radio] {
  width: 20px;
  height: 20px;
  accent-color: #094DBC;
  flex-shrink: 0;
}

#backingOption-modal .radioTxt-wrap {
  padding-right: 0px;
  cursor: pointer;
}

#backingOption-modal .backingTab-radioSection label {
  font-size: 16px;
  line-height: 21px;
  color: #666666;
  font-weight: 400;
  margin-bottom: 0;
  cursor: pointer;
}

#backingOption-modal .backingTab-radioSection label span {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.79px;
  text-align: left;
  color: #666666;
}

#backingOption-modal .radioTxt-wrap label span.active {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 700;
  line-height: 21.79px;
  text-align: left;
  color: #094DBC
}

#backingOption-modal .radioTxt-wrap label span.highlight {
  color: #000000;
  font-weight: 600;
}

#backingOption-modal .backingTab-radioSection .radioTxt-wrap label {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.79px;
  text-align: left;
  color: #666666;
}

#backingOption-modal .radioTxt-wrap p {
  margin-bottom: 0;
}

#backingOption-modal .backing-wrapper {
  gap: 10px;
  display: flex;
  padding: 0 0 15px;
  align-self: stretch;
  align-items: flex-start;
  flex-shrink: 0;
  justify-content: space-between;
  /*margin-right: 5px;*/
  padding: 15px;
}

.backingmodal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*margin-bottom: 15px;*/
  padding:15px;
}

.backingmodal-top h5.modal-title {
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
  text-align: left;
  margin-bottom: 0;
  color: #49454F;
}

.selectBaking-btn {
  gap: 10px;
  display: flex;
  padding: 14px 15px;
  align-items: center;
  border-color: rgba(9, 77, 188, 1);
  border-style: solid;
  border-width: 1.5px;
  border-radius: 6px;
  justify-content: center;
  font-size: 16px;
  text-align: left;
  font-family: Open Sans;
  font-weight: 600;
  line-height: 16px;
  font-stretch: normal;
  text-decoration: none;
  color: #094dbc;
  background-color: transparent;

}

.cancelBaking-btn {
  gap: 10px;
  display: flex;
  padding: 14px 15px;
  align-items: center;
  border-radius: 6px;
  justify-content: center;
  color: rgba(102, 102, 102, 1);
  height: auto;
  font-size: 16px;
  text-align: left;
  font-family: Open Sans;
  font-weight: 600;
  line-height: 16px;
  font-stretch: normal;
  text-decoration: none;
  background-color: transparent;
  border: 0;
}

.backing-btn-div {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 4px;
}
.backingbtndiv {
  padding: 15px;
}






/* =====================  css for backing modal  end ============================ */




/* =====================  css for mounting hardware modal  ============================ */
#mountingHardwareOption-modal{
  background: rgba(0, 0, 0, 0.5) !important;
}
.mountingHardwareModal-container{
    min-height: 0; 
    max-height: calc(100vh - 135px); 
    height: auto; 
    /*overflow-y: scroll;*/
}
  .mountingHardware-modal .mountingHardwareModal-container::-webkit-scrollbar {
    width: 6px;
    height: 56px;
  }

  .mountingHardware-modal .mountingHardwareModal-container::-webkit-scrollbar-track {
    background-color: #fff;
  }

  .mountingHardware-modal .mountingHardwareModal-container::-webkit-scrollbar-thumb {
    background-color: #cccccc;
    width: 6px;
    border-radius: 6px;
  }

  .HardwareMainDivss{

  }

  .mountingHardware-modal .remove-btn{
 font-family: Open Sans;
 font-size: 16px;
 font-weight: 600;
 line-height: 16px;
 text-align: left;
 color: #666666;
 border: 1.5px solid #CCCCCC;
 border-radius: 6px;
 padding: 14px 15px;
 height: 46px;
 min-width: 127px;
 width: 100%;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background-color: transparent;
 white-space: nowrap;
}
.mountingHardware-modal .modal-dialog {
  max-width: 450px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.mountingHardware-modal .modal-body {
  /*padding: 15px 15px 15px 15px;*/
  padding: 0px !important;
}

.mountingHardware-modal .modal-content {
  border: 0;
}



.mountingHardwareTab-radioSection {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0px 0;
}

.mountingHardwareTab-radioSection input[type=radio] {
  width: 20px;
  height: 20px;
  accent-color: #094DBC;
  flex-shrink: 0;
}

.radioTxt-wrap {
  padding-right: 0px;
}

.mountingHardwareTab-radioSection label {
  font-size: 16px;
  line-height: 21px;
  color: #666666;
  font-weight: 400;
  margin-bottom: 0;
}

.mountingHardwareTab-radioSection label span {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.79px;
  text-align: left;
  color: #666666;
}

.radioTxt-wrap label span.active {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 700;
  line-height: 21.79px;
  text-align: left;
  color: #094DBC
}

.radioTxt-wrap label span.highlight {
  color: #000000;
  font-weight: 600;
}

.mountingHardwareTab-radioSection .radioTxt-wrap label {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.79px;
  text-align: left;
  color: #666666;
}

.radioTxt-wrap p {
  margin-bottom: 0;
}

.mountingHardware-wrapper {
  gap: 10px;
  display: flex;
  padding: 0 0 15px;
  align-self: stretch;
  align-items: flex-start;
  flex-shrink: 0;
  justify-content: space-between;
  cursor: pointer;
  padding: 15px;
}

.mountingHardwaremodal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
}

.mountingHardwaremodal-top h5.modal-title {
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
  text-align: left;
  margin-bottom: 0;
  color: #49454F;
}

.selectMounting-btn {
  gap: 10px;
  display: flex;
  padding: 14px 10px;
  align-items: center;
  border-color: rgba(9, 77, 188, 1);
  border-style: solid;
  border-width: 1.5px;
  border-radius: 6px;
  justify-content: center;
  font-size: 16px;
  text-align: left;
  font-family: Open Sans;
  font-weight: 600;
  line-height: 16px;
  font-stretch: normal;
  text-decoration: none;
  color: #094dbc;
  background-color: transparent;

}

.cancelMounting-btn {
  gap: 10px;
  display: flex;
  padding: 14px 15px;
  align-items: center;
  border-radius: 6px;
  justify-content: center;
  color: rgba(102, 102, 102, 1);
  height: auto;
  font-size: 16px;
  text-align: left;
  font-family: Open Sans;
  font-weight: 600;
  line-height: 16px;
  font-stretch: normal;
  text-decoration: none;
  background-color: transparent;
  border: 0;
}

.mounting-btn-div {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 4px;
  padding: 15px;
  /*padding: 5px 0px 2px 26px;*/
}


.hardware-modal-footer{
  padding:0px !important;
  background: #ffffff !important;
  border-top: 0px !important;
}
/*.hardwareTags-section {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  padding: 0 0 10px 10px;

}
*/

.hardwareTags-section {
            display: flex;
            overflow-x: auto;
            scrollbar-width: none; 
            -ms-overflow-style: none;
            white-space: nowrap;
            cursor: grab;
            gap: 10px;
            padding: 0 10px 10px 10px;
             user-select: none; 
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
        .hardwareTags-section::selection {
            background: transparent; 
            color: inherit; 
        }
         .hardwareTags-section.activeGrab {
            cursor: grabbing;
        }

.hardware-tags.active {
  border: 1.5px solid #094DBC;
  font-weight: 600;
}

/*.hardware-tags {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  text-align: left;
  color: #666666;
  font-weight: 400;
  border: 1.5px solid #CCCCCC;
  padding: 10px 14px;
  border-radius: 4px;
  white-space: nowrap;
  cursor: pointer;
  }*/


  .hardware-tags{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    text-align: left;
    color: #666666;
    font-weight: 400;
    border: 1.5px solid #CCCCCC;
    padding: 10px 14px;
    border-radius: 4px;
    white-space: nowrap;
    cursor: pointer;
    background: #FFFFFF;
  }

  .hardwareTags-section::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .hardwareTags-section::-webkit-scrollbar-track {
    background-color: transparent;
    box-shadow: none;
  }

  .hardwareTags-section::-webkit-scrollbar-thumb {
    background-color: #CCCCCC;
    width: 60px;
    height: 6px;
    border-radius: 6px;
  }


/*.hardwareTags-section {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  padding: 0 0 8px 0;
  cursor: -webkit-grab;
  cursor: grab;
}


.hardware-tags.active {
  border: 1.5px solid #094DBC;
  font-weight: 600;
}

.hardware-tags {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  text-align: left;
  color: #666666;
  font-weight: 400;
  border: 1.5px solid #CCCCCC;
  padding: 10px 14px;
  border-radius: 4px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.hardwareTags-section::-webkit-scrollbar {
  background-color: #ffffff;
  width: 6px;
  height: 6px;
  border-radius: 6px;
}

.hardwareTags-section::-webkit-scrollbar-track {
  background-color: transparent;
  box-shadow: none;
  }*/

/*.hardwareTags-section::-webkit-scrollbar-thumb {
  background-color: #CCCCCC;
  width: 30px;
  height: 2px;
  border-radius: 6px;
  }*/
  /* ==================== 03/05/2024 End====================================== */


  /* ==================== 06/05/2024 Start====================================== */
  .selected_glass_radio{
    cursor: pointer;
    padding: 15px;
  }
  .selected_glass_radio.home-text04{
    gap: 10px;
    display: flex;
    /*padding: 0 0 15px;*/
    align-self: stretch;
    align-items: flex-start;
    flex-shrink: 0;
    justify-content: space-between;
    cursor: pointer;
  }

  /* ==================== 03/05/2024 End====================================== */

  #framethumbs{
    display: flex !important;
    /*justify-content: center;*/
    flex-wrap: wrap;
  }

  #framethumbsTwo{
    display: flex !important;
    flex-wrap: wrap;
  }

  #framethumbs p.frmtext {
    /*font-size: 14px;
    line-height: 19px;
    color: #666666;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 6px;*/
    /*color: rgba(102, 102, 102, 1);*/
    height: auto;
    font-size: 14px;
    font-style: Regular;
    text-align: left;
    font-family: Open Sans;
    font-weight: 500;
    line-height: normal;
    font-stretch: normal;
    text-decoration: none
  }

  .home-text076 {
    color: rgba(102, 102, 102, 1);
    height: auto;
    font-size: 16px;
    font-style: Regular;
    text-align: left;
    font-family: Open Sans;
    font-weight: 400;
    line-height: normal;
    font-stretch: normal;
    text-decoration: none;
  }

  .home-text088 {
    color: rgba(102, 102, 102, 1);
    height: auto;
    font-size: 16px;
    font-style: Regular;
    text-align: left;
    font-family: Open Sans;
    font-weight: 400;
    line-height: normal;
    font-stretch: normal;
    text-decoration: none;
  }

  .select-frame-text042{
    color: #cccccc;
    height: auto;
    font-size: 14px;
    font-style: Regular;
    text-align: left;
    font-family: Open Sans;
    font-weight: 500;
    line-height: normal;
    font-stretch: normal;
    text-decoration: none
  }

  /* ==================== 08/05/2024 start====================================== */
  .product-detailsSection .tab-content{
    border-top: 0px solid #dbdbdb !important;
    border-left: 0px solid #dbdbdb !important;
    border-right: 0px solid #dbdbdb !important;
    border-bottom: 0px solid #dbdbdb !important;
  }


  .product-detailsSection .tab-content{
    border-top: 0px solid #dbdbdb !important;
    border-left: 0px solid #dbdbdb !important;
    border-right: 0px solid #dbdbdb !important;
    border-bottom: 0px solid #dbdbdb !important;
  }


  /*.product-detailsSection .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{*/
    .product-detailsSection .nav-tabs>li.active>a{

 /* border: 1px solid #ddd;
    border-bottom: transparent;
    font-size: 14px;
    font-weight: bold;*/
    border: 0px solid #ddd;
    border-bottom: transparent;
    font-size: 14px;
    font-weight: bold;
    color: #094dbc !important;
    text-decoration: none;
    padding: 14px 45px;
    display: inline-block;
    border-bottom: 2px solid #094dbc;

  }

 .product-detailsSection .nav-tabs>li.active>a:hover{
  background-color: #fff !important;
 /* border-bottom: 2px solid #094dbc;
  border-radius: 0px;*/
}
  .productDetails-tab-div .nav-tabs>li>a{
    border: 2px solid transparent;
    padding: 14px 55px !important;
    display: inline-block !important;
  }

  .productDetails-tab-div .nav-tabs>li>a:hover{
    padding: 14px 55px;
    display: inline-block;
    border-color: transparent;
    /*border-bottom: 2px solid #094dbc;*/
    /*color: #094dbc !important;*/
    font-size: 14px;
    background-color: #f2f2f2 !important;
    border-radius: 0px;

  }
  .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
    border: none !important;
    border-bottom: 2px solid #094dbc !important;
    border-radius: 0px;
  }

  .nav-tabs>li>a {
    font-size: 14px;
  }

  .typeTxt{
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 21.79px;
    text-align: left;
    color: #666666;
  }

  /* ==================== 08/05/2024 end====================================== */

  #productPageDesktop{
    color: #666666;
    font-family: "Open Sans", sans-serif !important;
  }

  .addtocartag{
    width: 100% !important;
  }

  #mobile_addToCart_item_page2{
    background-color: #094dbc;
    padding: 10px 24px 10px 16px;
    border-radius: 6px;
    color: #ffffff;
    font-size: 20px;
    line-height: 20px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.1px;
    border: 0;
    outline: none;
    height: 48px;
    max-width: 354px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;

  }

  #mobile_addToCart_item_page{
    background-color: #094dbc;
    padding: 10px 24px 10px 16px;
    border-radius: 6px;
    color: #ffffff;
    font-size: 20px;
    line-height: 20px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.1px;
    border: 0;
    outline: none;
    height: 48px;
    max-width: 354px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;

  }


  #frame_size_width {
    font-size: 16px;
    font-weight: 600;
    line-height: 21px;
    color: #666666;
    border-width: 1px 1px 5px 1px;
    border-color: #666666;
    border-style: solid;
    padding: 12px;
    height: 46px;
    border-radius: 6px;
    width: 100%;
    outline: none;
    text-align:left;
    /*background: url(../desktop_product_new/images/inch_symbol.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 105px);
    background-size: 20px;*/
  }

  #frame_size_height {
    font-size: 16px;
    font-weight: 600;
    line-height: 21px;
    color: #666666;
    border-width: 1px 1px 1px 5px;
    border-color: #666666;
    border-style: solid;
    padding: 12px;
    height: 46px;
    border-radius: 6px;
    width: 100%;
    outline: none;
    text-align:left;
    /*background: url(../desktop_product_new/images/inch_symbol.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 92px);
    background-size: 20px;*/
  }


  #orderquantity {
    font-size: 16px;
    font-weight: 600;
    line-height: 21px;
    color: #666666;
    border-width: 1px 1px 1px 1px;
    border-color: #666666;
    border-style: solid;
    padding: 12px;
    height: 46px;
    border-radius: 6px;
    /*width: 100%;*/
    width: 110%;
    outline: none;
  }

  #orderquantity1 {
    font-size: 16px;
    font-weight: 600;
    line-height: 21px;
    color: #666666;
    border-width: 1px 1px 1px 1px;
    border-color: #666666;
    border-style: solid;
    padding: 12px;
    height: 46px;
    border-radius: 6px;
    width: 100%;
    outline: none;
  }

/*#frame_size_width:focus {
   font-size: 16px;
    font-weight: 600;
    line-height: 21px;
    color: #666666;
    border-width: 1px 1px 5px 1px;
    border-color: #094dbc;
    border-style: solid;
    padding: 12px;
    height: 46px;
    border-radius: 6px;
    width: 100%;
    outline: none;
    caret-color: #094dbc;
}

  #frame_size_height:focus {
   font-size: 16px;
    font-weight: 600;
    line-height: 21px;
    color: #666666;
    border-width: 1px 1px 1px 5px;
    border-color: #094dbc;
    border-style: solid;
    padding: 12px;
    height: 46px;
    border-radius: 6px;
    width: 100%;
    outline: none;
    caret-color: #094dbc;
}

#frame_size_width:hover {
   font-size: 16px;
    font-weight: 600;
    line-height: 21px;
    color: #666666;
    border-width: 1px 1px 5px 1px;
    border-color: #094dbc;
    border-style: solid;
    padding: 12px;
    height: 46px;
    border-radius: 6px;
    width: 100%;
    outline: none;
    caret-color: #094dbc;
}

  #frame_size_height:hover {
   font-size: 16px;
    font-weight: 600;
    line-height: 21px;
    color: #666666;
    border-width: 1px 1px 1px 5px;
    border-color: #094dbc;
    border-style: solid;
    padding: 12px;
    height: 46px;
    border-radius: 6px;
    width: 100%;
    outline: none;
    caret-color: #094dbc;
    }*/



    #frame_size_width_cm {
      font-size: 16px;
      font-weight: 600;
      line-height: 21px;
      color: #666666;
      border-width: 1px 1px 5px 1px;
      border-color: #666666;
      border-style: solid;
      padding: 12px;
      height: 46px;
      border-radius: 6px;
      width: 100%;
      outline: none;
    }

    #frame_size_height_cm {
      font-size: 16px;
      font-weight: 600;
      line-height: 21px;
      color: #666666;
      border-width: 1px 1px 1px 5px;
      border-color: #666666;
      border-style: solid;
      padding: 12px;
      height: 46px;
      border-radius: 6px;
      width: 100%;
      outline: none;
    }




 /*.customInput-top-div:hover {
    color: #094dbc;
}

.customInput-top-div:focus {
    color: #094dbc;
    }*/

    .normal-txt{
      font-weight: 400;
      color: #666666 !important;
    }

    .SelectHDW_NEWActive{
      color: #094dbc !important;
    }

  /*  #productPageDesktop .modal-backdrop {
      opacity: 0.2 !important;
      z-index: 999;
    }*/

 #productPageDesktop .modal-backdrop {
      opacity: 0 !important;
      z-index: 999;
    }

.modal-backdrop
{
    opacity:0.5 !important;
}


    /*==============================Exported css for matting modal ===============================*/
    #matting-modal .home-container {
      width: 100%;
      display: flex;
      overflow: auto;
      /*  min-height: 100vh;*/
      align-items: center;
      flex-direction: column;
    }
    #matting-modal .home-matting {
      width: 100%;
      height: auto;
      display: flex;
      overflow: hidden;
      box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.6000000238418579) ;
      align-items: flex-start;
      border-color: rgba(204, 204, 204, 1);
      border-style: solid;
      border-width: 1px;
      border-radius: 6px;
      flex-direction: column;
      background-color: rgba(255, 255, 255, 1);
    }
    #matting-modal .home-content {
      gap: 10px;
      width: 450px;
      display: flex;
      padding: 15px;
      align-items: flex-start;
      flex-shrink: 0;
      flex-direction: column;
    }
    #matting-modal .home-frame4 {
      gap: 4px;
      display: flex;
      align-self: stretch;
      align-items: flex-start;
      flex-shrink: 0;
    }
    #matting-modal .home-text {
      color: rgba(0, 0, 0, 1);
      height: auto;
      flex-grow: 1;
      font-size: 16px;
      align-self: stretch;
      font-style: Regular;
      text-align: left;
      font-family: Open Sans;
      font-weight: 400;
      line-height: 24px;
      font-stretch: normal;
      text-decoration: none;
    }
    #matting-modal .home-close24px {
      width: 24px;
      height: 24px;
    }
    #matting-modal .home-frame1954 {
      gap: 4px;
      display: flex;
      padding: 0 0 10px;
      align-self: stretch;
      align-items: flex-start;
      flex-shrink: 0;
    }
    #matting-modal .home-text2 {
      color: rgba(102, 102, 102, 1);
      height: auto;
      flex-grow: 1;
      font-size: 16px;
      font-style: Regular;
      text-align: left;
      font-family: Open Sans;
      font-weight: 400;
      line-height: 24px;
      font-stretch: normal;
      text-decoration: none;
    }
    #matting-modal .home-brandedglasseth1 {
      width: 149px;
      height: 138px;
    }
    #matting-modal .home-select {
      gap: 10px;
      display: flex;
      padding: 14px 15px;
      align-items: center;
      border-color: rgba(102, 102, 102, 1);
      border-style: solid;
      border-width: 1.5px;
      border-radius: 6px;
      cursor: pointer;
    }
    #matting-modal .home-text4 {
      color: rgba(102, 102, 102, 1);
      height: auto;
      font-size: 16px;
      font-style: SemiBold;
      text-align: left;
      font-family: Open Sans;
      font-weight: 600;
      line-height: 16px;
      font-stretch: normal;
      text-decoration: none;
    }

    #matting-modal .modal-dialog{
      max-width: 450px;
      width: 100%;
    }


    #matting-modal .modal-body{
      padding: 0  !important;
    }

    #matting-modal .home-backing-options{
      border: 0;
    }


    /*end matting modal*/



    /*=========================== shippingInfo Exported figma css for frames include ==========================*/



    #shippingInfo-modal .home-container {
      width: 100%;
      display: flex;
      overflow: auto;
      min-height: unset;
      align-items: center;
      flex-direction: column;
    }
    #shippingInfo-modal .home-frameinludes {
      gap: 10px;
      width: 100%;
      height: auto;
      display: flex;
      padding: 0 0 8px;
      overflow: hidden;
      box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.6000000238418579) ;
      align-items: flex-start;
      flex-shrink: 0;
      border-color: rgba(204, 204, 204, 1);
      border-style: solid;
      border-width: 1px;
      flex-direction: column;
      background-color: rgba(255, 255, 255, 1);
    }
    #shippingInfo-modal .home-content {
      display: flex;
      padding: 15px;
      align-self: stretch;
      align-items: flex-end;
      flex-direction: column;
      justify-content: center;
    }
    #shippingInfo-modal .home-frame4 {
      gap: 4px;
      display: flex;
      align-self: stretch;
      align-items: flex-start;
      flex-shrink: 0;
      padding: 10px 0;
    }
    #shippingInfo-modal .home-text {
      color: rgba(102, 102, 102, 1);
      height: auto;
      flex-grow: 1;
      font-size: 20px;
      align-self: stretch;
      font-style: SemiBold;
      text-align: left;
      font-family: Open Sans;
      font-weight: 600;
      line-height: 20px;
      font-stretch: normal;
      text-decoration: none;
    }
    #shippingInfo-modal .home-close24px {
      width: 24px;
      height: 24px;
    }
    #shippingInfo-modal .home-frame1955 {
      gap: 10px;
      display: flex;
      padding: 15px 0 10px;
      align-self: stretch;
      align-items: flex-start;
      flex-shrink: 0;
    }
    #shippingInfo-modal .home-text02 {
      color: rgba(0, 0, 0, 1);
      height: auto;
      flex-grow: 1;
      font-size: 16px;
      font-style: SemiBold;
      text-align: left;
      font-family: Open Sans;
      font-weight: 600;
      line-height: normal;
      font-stretch: normal;
      text-decoration: none;
    }
    #shippingInfo-modal .home-text03 {
      color: rgba(0, 0, 0, 1);
      font-weight: 600;
    }
    #shippingInfo-modal .home-text05 {
      color: rgba(0, 0, 0, 1);
      font-weight: 600;
    }
    #shippingInfo-modal .home-brandedglasseth1 {
      width: 107px;
      height: 55px;
    }
    #shippingInfo-modal .home-select {
      gap: 10px;
      display: flex;
      padding: 14px 15px;
      align-items: center;
      border-color: rgba(102, 102, 102, 1);
      border-style: solid;
      border-width: 1.5px;
      border-radius: 6px;
      justify-content: center;
      cursor: pointer;
    }
    #shippingInfo-modal .home-text07 {
      color: rgba(102, 102, 102, 1);
      height: auto;
      font-size: 16px;
      font-style: SemiBold;
      text-align: left;
      font-family: Open Sans;
      font-weight: 600;
      line-height: 16px;
      font-stretch: normal;
      text-decoration: none;
    }
    #shippingInfo-modal .home-frame1951 {
      gap: 10px;
      display: flex;
      padding: 15px 0 10px;
      align-self: stretch;
      align-items: flex-start;
      flex-shrink: 0;
      /*border-bottom: 1px solid #aaa;*/
    }
    #shippingInfo-modal .home-text09 {
      color: rgba(0, 0, 0, 1);
      height: auto;
      flex-grow: 1;
      font-size: 16px;
      font-style: SemiBold;
      text-align: left;
      font-family: Open Sans;
      font-weight: 600;
      line-height: normal;
      font-stretch: normal;
      text-decoration: none;
    }
    #shippingInfo-modal .home-text10 {
      color: rgba(0, 0, 0, 1);
      font-weight: 600;
    }
    #shippingInfo-modal .home-text12 {
      color: rgba(0, 0, 0, 1);
      font-weight: 600;
    }
    #shippingInfo-modal .home-image42 {
      width: 100px;
      height: 60px;
    }
    #shippingInfo-modal .home-select1 {
      gap: 10px;
      display: flex;
      padding: 14px 15px;
      align-items: center;
      border-color: rgba(102, 102, 102, 1);
      border-style: solid;
      border-width: 1.5px;
      border-radius: 6px;
      cursor: pointer;
    }
    #shippingInfo-modal .home-text14 {
      color: rgba(102, 102, 102, 1);
      height: auto;
      font-size: 16px;
      font-style: SemiBold;
      text-align: left;
      font-family: Open Sans;
      font-weight: 600;
      line-height: 16px;
      font-stretch: normal;
      text-decoration: none;
    }
    #shippingInfo-modal .home-frame1954 {
      gap: 6px;
      display: flex;
      padding: 15px 0 10px;
      align-self: stretch;
      align-items: flex-start;
      flex-shrink: 0;
    }
    #shippingInfo-modal .home-text16 {
      color: rgba(0, 0, 0, 1);
      height: auto;
      flex-grow: 1;
      font-size: 16px;
      font-style: SemiBold;
      text-align: left;
      font-family: Open Sans;
      font-weight: 600;
      line-height: normal;
      font-stretch: normal;
      text-decoration: none;
    }
    #shippingInfo-modal .home-text17 {
      color: rgba(0, 0, 0, 1);
      font-weight: 600;
    }
    #shippingInfo-modal .home-text19 {
      color: rgba(0, 0, 0, 1);
      font-weight: 600;
    }
    #shippingInfo-modal .home-brandedglasseth11 {
      width: 107px;
      height: 68px;
    }
    #shippingInfo-modal .home-select2 {
      gap: 10px;
      display: flex;
      padding: 14px 15px;
      align-items: center;
      border-color: rgba(102, 102, 102, 1);
      border-style: solid;
      border-width: 1.5px;
      border-radius: 6px;
      justify-content: center;
      cursor: pointer;
    }
    #shippingInfo-modal .home-text21 {
      color: rgba(102, 102, 102, 1);
      height: auto;
      font-size: 16px;
      font-style: SemiBold;
      text-align: left;
      font-family: Open Sans;
      font-weight: 600;
      line-height: 16px;
      font-stretch: normal;
      text-decoration: none;
    }

    #shippingInfo-modal .normal-txt{
      font-weight: 400;
      color: #666666 !important;
    }



    #shippingInfo-modal .modal-body{
      padding: 0 !important;
    }


    #shippingInfo-modal .shipping-data {
      width: 98%;
    }

    /* shippingInfo end */


    /*glass information modal frameIncludes-modal - Start*/


    /*=========================== Exported figma css for frames include ==========================*/



    #frameIncludes-modal .home-container {
      width: 100%;
      display: flex;
      overflow: auto;
      min-height: unset;
      align-items: center;
      flex-direction: column;
    }
    #frameIncludes-modal .home-frameinludes {
      gap: 10px;
      width: 100%;
      height: auto;
      display: flex;
      padding: 0 0 8px;
      overflow: hidden;
      box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.6000000238418579) ;
      align-items: flex-start;
      flex-shrink: 0;
      border-color: rgba(204, 204, 204, 1);
      border-style: solid;
      border-width: 1px;
      flex-direction: column;
      background-color: rgba(255, 255, 255, 1);
    }
    #frameIncludes-modal .home-content {
      display: flex;
      padding: 15px;
      align-self: stretch;
      align-items: flex-end;
      flex-direction: column;
      justify-content: center;
    }
    #frameIncludes-modal .home-frame4 {
      gap: 4px;
      display: flex;
      align-self: stretch;
      align-items: flex-start;
      flex-shrink: 0;
    }
    #frameIncludes-modal .home-text {
      color: rgba(102, 102, 102, 1);
      height: auto;
      flex-grow: 1;
      font-size: 20px;
      align-self: stretch;
      font-style: SemiBold;
      text-align: left;
      font-family: Open Sans;
      font-weight: 600;
      line-height: 20px;
      font-stretch: normal;
      text-decoration: none;
    }
    #frameIncludes-modal .home-close24px {
      width: 24px;
      height: 24px;
    }
    #frameIncludes-modal .home-frame1955 {
      gap: 10px;
      display: flex;
      padding: 15px 0 10px;
      align-self: stretch;
      align-items: flex-start;
      flex-shrink: 0;
    }
    #frameIncludes-modal .home-text02 {
      color: rgba(0, 0, 0, 1);
      height: auto;
      flex-grow: 1;
      font-size: 16px;
      font-style: SemiBold;
      text-align: left;
      font-family: Open Sans;
      font-weight: 600;
      line-height: normal;
      font-stretch: normal;
      text-decoration: none;
    }
    #frameIncludes-modal .home-text03 {
      color: rgba(0, 0, 0, 1);
      font-weight: 600;
    }
    #frameIncludes-modal .home-text05 {
      color: rgba(0, 0, 0, 1);
      font-weight: 600;
    }
    #frameIncludes-modal .home-brandedglasseth1 {
      width: 107px;
      height: 55px;
    }
    #frameIncludes-modal .home-select {
      gap: 10px;
      display: flex;
      padding: 14px 15px;
      align-items: center;
      border-color: rgba(102, 102, 102, 1);
      border-style: solid;
      border-width: 1.5px;
      border-radius: 6px;
      justify-content: center;
      cursor: pointer;
    }
    #frameIncludes-modal .home-text07 {
      color: rgba(102, 102, 102, 1);
      height: auto;
      font-size: 16px;
      font-style: SemiBold;
      text-align: left;
      font-family: Open Sans;
      font-weight: 600;
      line-height: 16px;
      font-stretch: normal;
      text-decoration: none;
    }
    #frameIncludes-modal .home-frame1951 {
      gap: 10px;
      display: flex;
      padding: 15px 0 10px;
      align-self: stretch;
      align-items: flex-start;
      flex-shrink: 0;
    }
    #frameIncludes-modal .home-text09 {
      color: rgba(0, 0, 0, 1);
      height: auto;
      flex-grow: 1;
      font-size: 16px;
      font-style: SemiBold;
      text-align: left;
      font-family: Open Sans;
      font-weight: 600;
      line-height: normal;
      font-stretch: normal;
      text-decoration: none;
    }
    #frameIncludes-modal .home-text10 {
      color: rgba(0, 0, 0, 1);
      font-weight: 600;
    }
    #frameIncludes-modal .home-text12 {
      color: rgba(0, 0, 0, 1);
      font-weight: 600;
    }
    #frameIncludes-modal .home-image42 {
      width: 100px;
      height: 60px;
    }
    #frameIncludes-modal .home-select1 {
      gap: 10px;
      display: flex;
      padding: 14px 15px;
      align-items: center;
      border-color: rgba(102, 102, 102, 1);
      border-style: solid;
      border-width: 1.5px;
      border-radius: 6px;
      cursor: pointer;
    }
    #frameIncludes-modal .home-text14 {
      color: rgba(102, 102, 102, 1);
      height: auto;
      font-size: 16px;
      font-style: SemiBold;
      text-align: left;
      font-family: Open Sans;
      font-weight: 600;
      line-height: 16px;
      font-stretch: normal;
      text-decoration: none;
    }
    #frameIncludes-modal .home-frame1954 {
      gap: 6px;
      display: flex;
      padding: 15px 0 10px;
      align-self: stretch;
      align-items: flex-start;
      flex-shrink: 0;
    }
    #frameIncludes-modal .home-text16 {
      color: rgba(0, 0, 0, 1);
      height: auto;
      flex-grow: 1;
      font-size: 16px;
      font-style: SemiBold;
      text-align: left;
      font-family: Open Sans;
      font-weight: 600;
      line-height: normal;
      font-stretch: normal;
      text-decoration: none;
    }
    #frameIncludes-modal .home-text17 {
      color: rgba(0, 0, 0, 1);
      font-weight: 600;
    }
    #frameIncludes-modal .home-text19 {
      color: rgba(0, 0, 0, 1);
      font-weight: 600;
    }
    #frameIncludes-modal .home-brandedglasseth11 {
      width: 107px;
      height: 68px;
    }
    #frameIncludes-modal .home-select2 {
      gap: 10px;
      display: flex;
      padding: 14px 15px;
      align-items: center;
      border-color: rgba(102, 102, 102, 1);
      border-style: solid;
      border-width: 1.5px;
      border-radius: 6px;
      justify-content: center;
      cursor: pointer;
    }
    #frameIncludes-modal .home-text21 {
      color: rgba(102, 102, 102, 1);
      height: auto;
      font-size: 16px;
      font-style: SemiBold;
      text-align: left;
      font-family: Open Sans;
      font-weight: 600;
      line-height: 16px;
      font-stretch: normal;
      text-decoration: none;
    }

    #frameIncludes-modal .normal-txt{
      font-weight: 400;
      color: #666666 !important;
    }



    #frameIncludes-modal .modal-body{
      padding: 0 !important;
    }

    /* ======================================Exported css for mounting option  ===================================== */

    /*glass information modal frameIncludes-modal - End*/


    /*==============================Exported css for size measure modal ===============================*/

    #sizeMeasure-modal .home-container {
      width: 100%;
      display: flex;
      overflow: auto;
      /*min-height: 100vh;*/
      align-items: center;
      flex-direction: column;
    }
    #sizeMeasure-modal .home-content {
      gap: 10px;
      width: 100%;
      height: auto;
      display: flex;
      padding: 15px;
      align-self: stretch;
      align-items: flex-start;
      flex-direction: column;
    }
    #sizeMeasure-modal .home-frame4 {
      gap: 4px;
      display: flex;
      align-self: stretch;
      align-items: flex-start;
      flex-shrink: 0;
    }
    #sizeMeasure-modal .home-text {
      color: rgba(0, 0, 0, 1);
      height: auto;
      flex-grow: 1;
      font-size: 16px;
      align-self: stretch;
      font-style: Regular;
      text-align: left;
      font-family: Open Sans;
      font-weight: 400;
      line-height: 20px;
      font-stretch: normal;
      text-decoration: none;
    }
    #sizeMeasure-modal .home-close24px {
      width: 24px;
      height: 24px;
    }
    #sizeMeasure-modal .home-frame1954 {
      gap: 4px;
      display: flex;
      padding: 0 0 10px;
      align-self: stretch;
      align-items: flex-start;
      flex-direction: column;
    }
    #sizeMeasure-modal .home-text02 {
      color: var(--dl-color-m3_sys_light-onsurfacevariant);
      height: auto;
      font-size: 16px;
      align-self: stretch;
      font-style: Regular;
      text-align: left;
      font-family: Open Sans;
      font-weight: 400;
      line-height: 20px;
      font-stretch: normal;
      text-decoration: none;
    }
    #sizeMeasure-modal .home-brandedglasseth1 {
      width: 418px;
      height: 421px;
    }
    #sizeMeasure-modal .home-text06 {
      color: var(--dl-color-m3_sys_light-onsurfacevariant);
      height: auto;
      font-size: 16px;
      align-self: stretch;
      font-style: Regular;
      text-align: left;
      font-family: Open Sans;
      font-weight: 400;
      line-height: 20px;
      font-stretch: normal;
      text-decoration: none;
    }



    #sizeMeasure-modal .modal-dialog{
      max-width: 450px;
      width: 100%;
    }


    #sizeMeasure-modal .modal-body{
      padding: 0  !important;
    }

    #sizeMeasure-modal .home-backing-options{
      border: 0;
    }

    /*20240517*/

    .selectedColorText{
      color: #094dbc !important;
    }
    .selectedColorTextTwo{
      color: #094dbc;
    }


    .clr                      { clear: both;}
    .whitebox                 { background-color: #ffffff; padding: 10px; margin: 0;}
    .whitebox .fullrow        { padding: 10px; margin: 0;}
    .whitebox .fullrow .left  { width: 80%; float: left;  padding: 0px; margin: 0;}
    .whitebox .fullrow .right { width: 20%; float: right; padding: 0px; margin: 0;}
    .whitebox h1              { font-family: arial; font-size: 20px; font-weight: 600; color: #000; margin: 0; padding: 0; line-height: normal;}
    .whitebox p               { font-family: arial; font-size: 20px; font-weight: 600; color: #000; margin: 0; padding: 0; line-height: normal; text-align: right;}
    .greytxt                  { font-weight: 400; color: #666;}

    .whitebox a               { color: #094dbc; text-decoration: none;}
    .whitebox a:hover         { color: #000000; text-decoration: underline;}
    .whitebox a:visited       { color: #000000; text-decoration: underline;}


    .mainbar                  { background-color: #cccccc; border-radius: 16px;}
    .midbar                   { background-color: #666666; border-radius: 16px;}
    

    /* iphone Landscape  [HORIZONTAL] CSS Start here */
    @media only screen and (max-width :580px)
    {
      .whitebox h1              { font-size: 15px;}
      .whitebox p               { font-size: 15px;}
    }

    .top-navabr-new .navbar-nav{
      flex-direction: unset !important;
    }
    /* Css added for the shipping options popup  START*/
    #shippingInfo-modal .shipping-data
    {
      width:100%;
      padding :0px  !important;
    }
    .whitebox .fullrow{
      padding: 0px !important;
      margin-bottom: 24px;
    }
    .whitebox .fullrow:last-child {
      margin-bottom: 0px ;
    }
    .greytxt
    {
      color: #666;
      font-family: Open Sans;
      font-size: 14px;
      font-weight: 400;
      line-height: 19.07px;
      text-align: left;
    }
    .whitebox h1 {
      font-family: Open Sans;
      font-size: 16px;
      font-weight: 600;
      line-height: 21.79px;
      text-align: left;
      color: #000;
      margin: 0;
      padding: 0;
    }


    .right p {
      font-family: Open Sans;
      font-size: 16px;
      font-weight: 600;
      line-height: 21.79px;
      text-align: right;
      color: #000;
      margin: 0;
      padding: 0;
    }
    #shippingInfo-modal .home-frame4
    {
      padding: 10px 0 20px;
    }
    /* Css added for the shipping options popup  END*/


    /*20240521*/


    #rangeSlider-modal .home-container {
      width: 100%;
      display: flex;
  /* overflow: auto;
  min-height: 100vh; */
  align-items: center;
  flex-direction: column;
}

#rangeSlider-modal .home-right {
  width: 100%;
  height: 911px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 0;
}

#rangeSlider-modal .home-framesize {
  width: 519px;
  height: 292px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 1;
}

#rangeSlider-modal .home-frame1952 {
  gap: 5px;
  top: 0px;
  left: 0px;
  display: flex;
  padding: 20px;
  overflow: hidden;
  position: absolute;
  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.6000000238418579);
  align-items: flex-start;
  border-color: rgba(204, 204, 204, 1);
  border-style: solid;
  border-width: 1px;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 1);
}

#rangeSlider-modal .home-group1919 {
  width: 479px;
  height: 116px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 1;
}

#rangeSlider-modal .home-discrete {
  gap: 6px;
  top: 51px;
  left: 0px;
  width: 354px;
  display: flex;
  padding: 0 5px 0 0;
  position: absolute;
  align-items: center;
  flex-shrink: 0;
}

#rangeSlider-modal .home-activetrack {
  width: 341px;
  display: flex;
  overflow: hidden;
  flex-grow: 1;
  align-items: center;
  flex-shrink: 0;
  border-radius: 16px 2px 2px 16px;
  flex-direction: column;
  justify-content: center;
}

#rangeSlider-modal .home-track {
  width: 100%;
  height: 16px;
  align-self: stretch;
  border-radius: 16px 16px 16px 16px;
  background-color: #666666;
  position: absolute;
  top: 62px;
}

#rangeSlider-modal  input[type='range'] {
  overflow: hidden;
  width: 80px;
  -webkit-appearance: none;
  background-color: #666666;
  width: 100%;

}





#rangeSlider-modal .home-handle {
  width: 2px;
  height: 44px;
  display: flex;
  z-index: 1;
  overflow: hidden;
  position: absolute;
  right: 122px;
  top: 48px;
  align-items: flex-start;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: #094dbc;
}

#rangeSlider-modal .home-statelayer {
  top: 0px;
  left: 0px;
  width: 2px;
  height: 44px;
  position: absolute;
  border-radius: 4px;
}

#rangeSlider-modal .home-discretedots {
  gap: 33.81999969482422px;
  width: 354px;
  display: flex;
  padding: 0 4px;
  z-index: 2;
  align-items: center;
  flex-shrink: 0;
  justify-content: space-between;
}

#rangeSlider-modal .home-trackdot11 {
  width: 4px;
  height: 4px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 0;
}

#rangeSlider-modal .home-dot {
  top: 0px;
  left: 0px;
  width: 4px;
  height: 4px;
  position: absolute;
}

#rangeSlider-modal .home-valueindicator {
  gap: 8px;
  width: 48px;
  display: flex;
  padding: 12px 16px;
  z-index: 3;
  align-items: center;
  flex-shrink: 0;
  border-radius: 6px;
  justify-content: center;
  background-color: var(--dl-color-default-atfcta);
}

#rangeSlider-modal .home-text {
  color: var(--dl-color-m3_sys_light-inverseonsurface);
  height: auto;
  font-size: 14px;
  font-style: Regular;
  text-align: center;
  font-family: Open Sans;
  font-weight: 400;
  line-height: 20px;
  font-stretch: normal;
  text-decoration: none;
}

#rangeSlider-modal .home-track1 {
  top: 65px;
  left: 354px;
  width: 125px;
  height: 16px;
  position: absolute;
  align-self: stretch;
  border-radius: 2px 16px 16px 2px;
}

#rangeSlider-modal .home-handleleft {
  top: 48px;
  left: 5px;
  width: 2px;
  height: 44px;
  display: flex;
  overflow: hidden;
  position: absolute;
  align-items: flex-start;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: var(--dl-color-default-atfcta);
}

#rangeSlider-modal .home-statelayer1 {
  top: 0px;
  left: 0px;
  width: 2px;
  height: 44px;
  position: absolute;
  box-sizing: content-box;
  /*/ border-color: rgba(255, 255, 255, 1); /*/
  border-style: solid;
  border-width: 3px;
  border-radius: 4px;
}

#rangeSlider-modal .home-valueindicator1 {
  gap: 8px;
  top: 0px;
  left: 0px;
  width: 48px;
  display: flex;
  padding: 12px 16px;
  position: absolute;
  align-items: center;
  flex-shrink: 0;
  border-radius: 6px;
  justify-content: center;
  background-color: rgba(102, 102, 102, 1);
}

#rangeSlider-modal .home-valueindicator12 {
  gap: 8px;
  top: 0px;
  right: 100px;
  width: 48px;
  display: flex;
  padding: 12px 16px;
  position: absolute;
  align-items: center;
  flex-shrink: 0;
  border-radius: 6px;
  justify-content: center;
  background-color: #094DBC;
}


#rangeSlider-modal .home-text02 {
  color: var(--dl-color-m3_sys_light-inverseonsurface);
  height: auto;
  font-size: 14px;
  font-style: Regular;
  text-align: center;
  font-family: Open Sans;
  font-weight: 400;
  line-height: 20px;
  font-stretch: normal;
  text-decoration: none;
}

#rangeSlider-modal .home-text04 {
  top: 94px;
  color: rgba(102, 102, 102, 1);
  height: auto;
  /*/ position: absolute; /*/
  font-size: 16px;
  font-style: Regular;
  text-align: left;
  font-family: Open Sans;
  font-weight: 400;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
  display: block;
  margin-bottom: 20px;
}

#rangeSlider-modal .home-group1918 {
  width: 479px;
  height: 116px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 1;
}

#rangeSlider-modal .home-discrete1 {
  gap: 6px;
  top: 51px;
  left: 0px;
  width: 354px;
  display: flex;
  padding: 0 5px 0 0;
  position: absolute;
  align-items: center;
  flex-shrink: 0;
}

#rangeSlider-modal .home-activetrack1 {
  width: 341px;
  display: flex;
  overflow: hidden;
  flex-grow: 1;
  align-items: center;
  flex-shrink: 0;
  border-radius: 16px 2px 2px 16px;
  flex-direction: column;
  justify-content: center;
}

#rangeSlider-modal .home-track2 {
  width: auto;
  height: 16px;
  align-self: stretch;
  border-radius: 16px 2px 2px 16px;
}

#rangeSlider-modal .home-handle1 {
  width: 2px;
  height: 44px;
  display: flex;
  z-index: 1;
  overflow: hidden;
  position: relative;
  align-items: flex-start;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: var(--dl-color-default-atfcta);
}

#rangeSlider-modal .home-statelayer2 {
  top: 0px;
  left: 0px;
  width: 2px;
  height: 44px;
  position: absolute;
  border-radius: 4px;
}

#rangeSlider-modal .home-discretedots1 {
  gap: 33.81999969482422px;
  width: 354px;
  display: flex;
  padding: 0 4px;
  z-index: 2;
  align-items: center;
  flex-shrink: 0;
  justify-content: space-between;
}

#rangeSlider-modal .home-trackdot111 {
  width: 4px;
  height: 4px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 0;
}

#rangeSlider-modal .home-dot1 {
  top: 0px;
  left: 0px;
  width: 4px;
  height: 4px;
  position: absolute;
}

#rangeSlider-modal .home-valueindicator2 {
  gap: 8px;
  width: 48px;
  display: flex;
  padding: 12px 16px;
  z-index: 3;
  align-items: center;
  flex-shrink: 0;
  border-radius: 6px;
  justify-content: center;
  background-color: var(--dl-color-default-atfcta);
}

#rangeSlider-modal .home-text06 {
  color: var(--dl-color-m3_sys_light-inverseonsurface);
  height: auto;
  font-size: 14px;
  font-style: Regular;
  text-align: center;
  font-family: Open Sans;
  font-weight: 400;
  line-height: 20px;
  font-stretch: normal;
  text-decoration: none;
}

#rangeSlider-modal .home-track3 {
  top: 65px;
  left: 354px;
  width: 125px;
  height: 16px;
  z-index: 1;
  position: absolute;
  align-self: stretch;
  border-radius: 2px 16px 16px 2px;
}

#rangeSlider-modal .home-handleleft1 {
  top: 48px;
  left: 5px;
  width: 2px;
  height: 44px;
  display: flex;
  z-index: 2;
  overflow: hidden;
  position: absolute;
  align-items: flex-start;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: var(--dl-color-default-atfcta);
}

#rangeSlider-modal .home-statelayer3 {
  top: 0px;
  left: 0px;
  width: 2px;
  height: 44px;
  position: absolute;
  box-sizing: content-box;
  /*/ border-color: rgba(255, 255, 255, 1); /*/
  border-style: solid;
  border-width: 3px;
  border-radius: 4px;
}

#rangeSlider-modal .home-valueindicator3 {
  gap: 8px;
  top: 0px;
  left: 0px;
  width: 48px;
  display: flex;
  padding: 12px 16px;
  z-index: 3;
  position: absolute;
  align-items: center;
  flex-shrink: 0;
  border-radius: 6px;
  justify-content: center;
  background-color: rgba(102, 102, 102, 1);
}

#rangeSlider-modal .home-text08 {
  color: var(--dl-color-m3_sys_light-inverseonsurface);
  height: auto;
  font-size: 14px;
  font-style: Regular;
  text-align: center;
  font-family: Open Sans;
  font-weight: 400;
  line-height: 20px;
  font-stretch: normal;
  text-decoration: none;
}

#rangeSlider-modal .home-text10 {
  top: 94px;
  color: rgba(102, 102, 102, 1);
  height: auto;
  z-index: 4;
  /*/ position: absolute; /*/
  font-size: 16px;
  font-style: Regular;
  text-align: left;
  font-family: Open Sans;
  font-weight: 400;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
  display: block;
  margin-bottom: 20px;
}

#rangeSlider-modal .home-iconnavigationclose24px {
  top: 16.40753173828125px;
  left: 489.407470703125px;
  width: 14px;
  height: 14px;
  position: absolute;
}

#rangeSlider-modal .home-text02 {
  color: #fff;
}

#rangeSlider-modal .home-text08 {
  color: #fff;
}




#rangeSlider-modal .modal-dialog {
  max-width: 519px;
  width: 100%;
}


#rangeSlider-modal .modal-body {
  padding: 0 !important;
}

#rangeSlider-modal .home-backing-options {
  border: 0;
}



/*/ =================================== css for add matting range slider 20/05/2024 ======================================= /*/


.mattingRange-wrap {
  max-width: 242px;
  width: 100%;
  margin-top: 20px;
}

.mattingRangeWrap {
  max-width: 242px;
  width: 100%;
  margin-top: -7px;
  margin-left: 8px;

}

.mattingRange-div-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mattingRange-div-inner p {
  margin-bottom: 0;
}

.matWidthRange-val {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.79px;
  text-align: left;
  color: #CCCCCC;

}



.matWidth-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: #CCCCCC;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  border: 1px solid #666666;
  border-radius: 10px;
}



.matWidth-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 55px;
  height: 42px;
  background: #F2F2F2;
  cursor: pointer;
  border: 1px solid #666666;
  padding: 11px 12px;
  border-radius: 6px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 21.79px;
  text-align: center;

}

.matWidth-slider::-moz-range-thumb {
  width: 40px;
  height: 44px;
  background: #F2F2F2;
  cursor: pointer;
  border: 1px solid #666666;
  padding: 11px 12px;
  border-radius: 6px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 21.79px;
  text-align: center;
}

.matwidth-txt {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.79px;
  text-align: left;
  color: #CCCCCC;

}

.customSize-link {
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.07px;
  text-align: left;
  color: #666666;
  text-decoration: underline;
}





/* 
=================================== css for add matting range slider  20/05/2024 ======================================= */


/*/ ===========================css for zoom image popup========================================= /*/

#zoomImage-modal .home-container {
  width: 100%;
  display: flex;
  /* overflow: auto;
  min-height: 100vh; */
  align-items: center;
  flex-direction: column;
}

#zoomImage-modal .home-right {
  width: 100%;
  /*/ height: 911px; /*/
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 0;
}

#zoomImage-modal .home-zoomimage {
  gap: 10px;
  width: auto;
  height: auto;
  display: flex;
  padding: 15px;
  overflow: hidden;
  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.6000000238418579);
  align-items: flex-end;
  flex-shrink: 0;
  border-color: rgba(204, 204, 204, 1);
  border-style: solid;
  border-width: 1px;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 1);
}

#zoomImage-modal .home-header {
  gap: 4px;
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  flex-shrink: 0;
}

#zoomImage-modal .home-text {
  color: rgba(102, 102, 102, 1);
  height: auto;
  flex-grow: 1;
  font-size: 20px;
  align-self: stretch;
  font-style: SemiBold;
  text-align: left;
  font-family: Open Sans;
  font-weight: 600;
  line-height: 20px;
  font-stretch: normal;
  text-decoration: none;
}

#zoomImage-modal .home-close24px {
  width: 24px;
  height: 24px;
}

#zoomImage-modal .home-frames {
  gap: 10px;
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  flex-shrink: 0;
}

#zoomImage-modal .home-thumbs {
  gap: 10px;
  width: 185px;
  height: 645px;
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-shrink: 0;
}

#zoomImage-modal .home-image27 {
  width: 75px;
  height: 75px;
  border-color: rgba(102, 102, 102, 1);
  border-style: solid;
  border-width: 2px;
}

#zoomImage-modal .home-image28 {
  width: 75px;
  height: 75px;
  cursor: pointer;
}

#zoomImage-modal .home-image29 {
  width: 75px;
  height: 75px;
}

#zoomImage-modal .home-image30 {
  width: 75px;
  height: 75px;
}

#zoomImage-modal .home-image31 {
  width: 75px;
  height: 75px;
}

#zoomImage-modal .home-image32 {
  width: 75px;
  height: 75px;
}

#zoomImage-modal .home-image33 {
  width: 75px;
  height: 75px;
}

#zoomImage-modal .home-image34 {
  width: 75px;
  height: 53px;
}

#zoomImage-modal .home-video {
  width: 75px;
  height: 75px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 1;
}

#zoomImage-modal .home-image43 {
  top: 0px;
  left: 0px;
  width: 75px;
  height: 75px;
  position: absolute;
}

#zoomImage-modal .home-playcircleoutline24px {
  top: 23px;
  left: 22px;
  width: 30px;
  height: 30px;
  display: flex;
  position: absolute;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6000000238418579);
  align-items: flex-start;
  flex-shrink: 0;
}

#zoomImage-modal .home-iconavplaycircleoutline24px {
  top: 2.5px;
  left: 2.5px;
  width: 25px;
  height: 25px;
  position: absolute;
}

#zoomImage-modal .home-main-image {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
}

#zoomImage-modal .home-arrowbackios24px {
  width: 24px;
  height: 24px;
}

#zoomImage-modal .home-image {
  width: 500px;
  height: 500px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 0;
}

#zoomImage-modal .home-image26 {
  top: 0px;
  left: 24.5px;
  width: 437px;
  height: 500px;
  position: absolute;
}

#zoomImage-modal .home-image52 {
  top: 0px;
  left: 0px;
  width: 500px;
  height: 500px;
  position: absolute;
}

#zoomImage-modal .home-text2 {
  top: 385px;
  left: 144.5px;
  color: rgba(0, 0, 0, 1);
  height: auto;
  position: absolute;
  font-size: 40px;
  box-shadow: 0.9942857027053833px 0.9942857027053833px 0.9942857027053833px 0px rgba(0, 0, 0, 0.25);
  font-style: Regular;
  text-align: center;
  font-family: Open Sans;
  font-weight: 400;
  line-height: 40px;
  font-stretch: normal;
  text-decoration: none;
}

#zoomImage-modal .home-text3 {
  color: rgba(0, 0, 0, 1);
}

#zoomImage-modal .home-text4 {
  color: rgba(102, 102, 102, 1);
}

#zoomImage-modal .home-arrowforwardios24px {
  width: 24px;
  height: 24px;
}

#zoomImage-modal .home-frame1974 {
  gap: 10px;
  width: 546px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  justify-content: center;
}

#zoomImage-modal .home-removecircleoutline24px {
  width: 30px;
  height: 30px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 0;
}

#zoomImage-modal .home-iconcontentremovecircleoutline24px {
  top: 2.5px;
  left: 2.5px;
  width: 25px;
  height: 25px;
  position: absolute;
}

#zoomImage-modal .home-addcircleoutline24px {
  width: 30px;
  height: 30px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 0;
}

#zoomImage-modal .home-iconcontentaddcircleoutline24px {
  top: 2.5px;
  left: 2.5px;
  width: 25px;
  height: 25px;
  position: absolute;
}





#zoomImage-modal .modal-dialog {
  max-width: 750px;
  width: 100%;
}


#zoomImage-modal .modal-body {
  padding: 0 !important;
}

#zoomImage-modal .home-backing-options {
  border: 0;
}



/*Diploma css*/

.diplomasize-container {
  gap: 8px;
  width: 400px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}

.size-wrapper-block {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 21.79px;
  text-align: left;
  color: #666666;
  border: 1px solid #666666;
  padding: 11px 10px;
  border-radius: 6px;
  width: auto;
  background-color: transparent;
}

.size-wrapper-block.active {
  border-color: rgba(9, 77, 188, 1);
  border-style: solid;
  border-width: 3px;
  border-radius: 6px;
  color: rgba(9, 77, 188, 1);
}

.diplomaActive{
  border-color: rgba(9, 77, 188, 1);
  border-style: solid;
  border-width: 3px;
  border-radius: 6px;
  color: rgba(9, 77, 188, 1);
}


.diplomaSize-header {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  text-align: left;

}

.diplomaSize-header-title span {
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: left;
  color: #CCCCCC;
}

.diplomaMatting-div-txt {
  gap: 8px;
  display: flex;
  padding: 3px 0;
  align-self: stretch;
  align-items: center;
  flex-shrink: 0;
  font-size: 16px;
}

.diplomaMat-color {
  width: 30px;
  height: 16px;
  /*border: 1px solid black;*/
}
#topMatColorWide,#bottomMatColorWide{
display: contents;}
/*.diplomaMatting-container{
  margin-top:-10px;
  }*/
  /*=========20240527=================*/
  .titleDescription{
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    color: #666666;
    margin-bottom: 15px;
    display: block;
  }


  .editTxt-link {
   color: #094dbc;
   flex-grow: 1;
   font-size: 16px;
   text-align: left;
   font-family: Open Sans;
   font-weight: 400;
   line-height: 16px;
   font-stretch: normal;
   text-decoration: none;
   border-bottom: 1px solid #094dbc;
 }
 /*20240529*/
 .zimg12{
  display: none;
}

.home-main-image {
  position: relative;
  overflow: hidden;
}
.home-main-image img {
  max-width: 100%;
  max-height: 100%;
  /*cursor: grab;*/
}
.zoomInImage.disabled,
.zoomOutImage.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.zoom_image::-webkit-scrollbar {
  background-color: #ffffff;
  width: 6px;
  height: 6px;
  border-radius: 6px;
}

.zoom_image::-webkit-scrollbar-track {
  background-color: transparent;
  box-shadow: none;
}

.glassAlert{

  box-sizing: border-box;
  /* Auto layout */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 13px 10px;
  gap: 10px;
  width: 420px;
  height: 45px;
  background: #F2F2F2;
  border: 1px solid #CCCCCC;
  border-radius: 6px;

  /* Inside auto layout */
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;

}
/*20240530*/

/*.mainImgContianerForWithMat{margin:0 auto;max-width:100%;border:0 solid red;min-height:80%!important; position: relative;margin-left: 90px; margin-top: 39px;}*/
/*.mainImgContianerForNoMat{margin:0 auto;max-width:100%;border:0 solid red;min-height:80%!important; position: relative;margin-left: 55px; margin-top: 5px;}*/

.mainImgContianer1{text-align:center;position:relative;margin:0 auto;max-width:100%}
/*.mainImgContianer{margin:0 auto;max-width:100%;border:0 solid red;min-height:80%!important; position: relative;margin-left: 30px;}*/
/*.mainImgContianer{margin:0 auto;max-width:100%;border:0 solid red;min-height:80%!important; position: relative;margin-left: 80px; margin-top: 50px;}*/

.matActiveclass{
  /*border-bottom:solid 2px #094dbc;*/
}
.disabledContainer{pointer-events:none;opacity:0.4;}
.optcityOfButton{
  opacity: 100%;
}
.matActiveclassBorder{
  border-bottom:solid 2px #094dbc;
  color: #094dbc !important;
}

.home-image{
  display: flex !important; 
}

#myframe_size{
  font-weight: 400;
}
.frame_name_link{
  color:#666666;
}

#myframe_name1{
  font-weight: 400;
}
#myframe_name{
  font-weight: 400;
}
#myframe_rabbit{
  font-weight: 400; 
}

.lodMoreDetails {
  display: none;
}
.backing-div{
  cursor: pointer;
}

/*20240603*/

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #094dbc;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  margin-left: 270px;
}

.loaderForFrames {
  margin-top: 130px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #094dbc;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  margin-left: 270px;
}
.loaderForFrames::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


#imageSize-inch,#changeImageSize{
  cursor: pointer;
}
.buttonShowActive{
  color: #ffffff;
  background-color: #094dbc;
  cursor: pointer;
}

.buttonShowInActive{
  color: '';
  background-color: '';
  cursor: not-allowed;
}

/*20240608*/

.customInput-top-div2 {
  position: relative;
  margin: 0px 0;
  /*width: 100%;*/
}

.customInput-label2 {
  color: #666666;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  margin-bottom: 0;
  position: absolute;
  left: 5px;
  top: -7px;
  background: white;
  padding: 0 5px;
  z-index: 999;
}

.customInput-labelMat {
  color: #666666;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  margin-bottom: 0;
  position: absolute;
  left: 5px;
  top: -7px;
  background: white;
  padding: 0 5px;
  z-index: 999;
  display: none;
}

.size-input2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 21px;
  color: #666666;
  border-width: 1px 1px 3px 1px;
  border-color: #666666;
  border-style: solid;
  padding: 12px;
  height: 46px;
  border-radius: 6px;
  width: 100%;
  outline: none;
}

.viewFramesCust-select {
  padding-left:8px !important;
}
.viewAllFrameModal .filter-btn {
  padding-left:8px !important;

}

#frameFilterMaterial{
  /*padding-right: 27px !important;*/
  margin-right: 7px !important;
  padding-left: 8px !important;
}

.prodCart-div{
  /*gap:10px;*/
  gap:0px;
}
.addtocartag{
  display: flex;
  justify-content: flex-end;
}

/*20240613*/

.viewFramesModalClose{
  cursor: pointer;
}
#frameFilterColor, #frameFilterMaterial,#frameFilterPrice{
  cursor: pointer;
}
#verticle_images{
  cursor: pointer;
}
.glassModalClose,.fltr_btn,.hardwareModalClose,.hardwarev4_label,.backingModalClose{
  cursor: pointer;
}





/*.range-value {
    position: absolute;
  top:-25px;
    transform: translateX(-50%);
    padding: 2px 0px;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  }*/

/*.range-value {
  position: absolute;
    top: 154px;
    transform: translateX(-50%);
   
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;

    }*/


 /*   .range-value {
      position: absolute;
      top: 130px;
      transform: translateX(-50%);
      padding-left: 220px; 
      border-radius: 4px;
      pointer-events: none;
      white-space: nowrap;
      font-size: 16px;
      font-weight: 600;

    }*/

/*   .range-value {
      position: relative;
      top: -14px;
      transform: translateX(-50%);
      border-radius: 4px;
      pointer-events: none;
      white-space: nowrap;
      font-size: 16px;
      font-weight: 600;

    }*/

.range-value {
    position: relative;
  top:-15px;
    transform: translateX(-50%);
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  /*margin-left: -19px;*/
  margin-left: 4px;

  }


    .matSizes-div {
      display: flex;
      align-items: center;
      /*justify-content: center;*/
      gap: 10px;
      margin: 15px 0;
    }

    .sizeInput-form {
      position: relative;
      margin: 0px 0;
    }

    .sizeInput-label {
      /*color: #CCCCCC;*/
      font-size: 12px;
      line-height: 16px;
      font-weight: 400;
      margin-bottom: 0;
      position: absolute;
      left: 5px;
      top: -7px;
      background: white;
      padding: 0 5px;
      z-index: 999;
    }

    .sizeInput-form.active .sizeInput-label {
      color: #666666;
    }

    .size-input-control {
      font-size: 16px;
      font-weight: 600;
      line-height: 21px;
      /*color: #CCCCCC;*/
      border-width: 3px 1px 1px 1px;
      /*border-color: #CCCCCC;*/
      border-style: solid;
      padding: 11px 20px;
      height: 44px;
      border-radius: 6px;
      width: 95px;
    }

    .sizeInput-form.active .size-input-control {
      border-color: #666666;
      color: #666666;
    }

    .sizeInput-form.dynamic-div .sizeInput-label {
      color: #094DBC;
      font-weight: 700;
      font-family: "Roboto", sans-serif;
    }

    .sizeInput-form.dynamic-div .dynamicSize-input {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      max-width: 118px;
      width: 100%;
      height: 44px;
      padding: 10px;
      color: #094DBC;
      border-width: 1px 3px 1px 1px;
      border-color: #094DBC;
      border-style: solid;
      border-radius: 6px;
    }

    .sizeInput-form.dynamic-div .size-input-control {
      border: 0;
      padding: 0;
      text-align: center;
      color: #094DBC;
      font-weight: 400;
      background-color: transparent;
      width: 100%;
      min-width: 49px;
    }

/*.sizeInput-form.dynamic-div {
  display: none;
  }*/

  #reset_all_size{
    margin-left: 191px;
    margin-top: -12px;
    cursor: pointer;
  }
  #customSizeLink{
    cursor: pointer;
    margin-top:-7px;
  }

  #top_plus,#top_minus,#right_plus,#right_minus,#bottom_plus,#bottom_minus,#left_plus,#left_minus{
    display:none;
  }


  #top_input{
    border-width: 4px 1px 1px 1px;
  }

  #right_input{
    border-width: 1px 4px 1px 1px;
  }


  #bottom_input{
    border-width: 1px 1px 4px 1px;
  }

  #left_input{
    border-width: 1px 1px 1px 4px;
  }


  /*bottom code*/

  .mattingWidth-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    width: 328px;
  }

  .mattingWidth-div .cust-sizesLink {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    / line-height: 19.07px; /
    text-align: right;
    color: #666666;
    text-decoration: underline;
  }

  .bottomMatWidth-wrapper{
    width: 44%;
  }
  .bottomMatwidth-div {
    background-color: #F2F2F2;
    border: 1px solid #666666;
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    color: #666666;
    padding: 7px 12px;
    border-radius: 6px;
    margin: 10px 5px 5px 5px;
    cursor: pointer;
  }

  .bottomMatwidth-div.active {
    color: #094DBC;
    border-color: #094DBC;
    font-weight: 600;
    border: 2px solid #094DBC;
  }

  .close-icon{
    cursor: pointer;
  }

  .select_frame_color_new{
  cursor: pointer;
  }

  .getSwapPreview_cm,.getSwapPreview{
    cursor: pointer;
  }

  /*20240627  - design for popup filter*/

  .tooltip-max .tooltip-inner:active  {
    background: #094DBC !important;
  }
  .tooltip-min .tooltip-inner:active{
    background: #094DBC !important;
  }
  .max-slider-handle:active{
    background: #094DBC !important;
  }
  .min-slider-handle:active{
    background: #094DBC !important;
  }


  .rabbet-size{

    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #444444;
  }
  .sliderCont .slider{
    opacity: 1 !important;
  }      
  .tooltip {
    opacity: 1 !important;
  }

  .slider-selection {
    background: #444444 !important;

  }
  .slider-success .slider-selection {
    background-color: #5cb85c !important;
  }
  .slider-primary .slider-selection {
    background-color: #428bca !important;
  }
  .slider-info .slider-selection {
    background-color: #5bc0de !important;
  }
  .slider-warning .slider-selection {
    background-color: #f0ad4e !important;
  }
  .slider-danger .slider-selection {
    background-color: #d9534f !important;
  }
  .slider.slider-horizontal {
    width: 100% !important;
    height: 20px;
  }
  .slider-handle {
    background-color: #444444 ;
    background-image: none !important;
    -webkit-box-shadow: 1px 1px 24px -2px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 1px 1px 24px -2px rgba(0,0,0,0.75) !important;
    box-shadow: 1px 1px 24px -2px rgba(0,0,0,0.75) !important;
    border-radius: 0px !important;
    width: 3px !important;
    height: 45px !important;
    margin-left: -2px !important;
    margin-top: -11px !important;
  }
  .slider-handle:active{
    background-color:#094DBC !important;
  }
  .max-slider-handle{
    background-color: #444444 !important;
    z-index: 3000 !important;
  }

  .slider-strips .slider-selection {
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(255,252,252,0.08) 5px, rgba(252,252,252,0.08) 10px) !important;
    background-image: -ms-repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(255,252,252,0.08) 5px, rgba(252,252,252,0.08) 10px) !important;
    background-image: -o-repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(255,252,252,0.08) 5px, rgba(252,252,252,0.08) 10px) !important;
    background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(255,252,252,0.08) 5px, rgba(252,252,252,0.08) 10px) !important; 
  }
  .tooltip-inner {
    width: 50px ;
    max-width: 200px;
    padding: 3px 8px;
    color: #fff !important;
    text-align: center;
    background-color: #444444 ;
    border-radius: 4px;
  }
  .tooltip-min .tooltip-inner {
    max-width: 200px;
    padding: 15px 15px;
    color: #fff !important;
    text-align: center;
    background-color: #444444 !important;
    border-radius: 4px;
    position: relative;
    top: -43px;
    left: 1px;
  }

  .tooltip-max .tooltip-inner {
    max-width: 200px;
    padding: 15px 15px;
    color: #fff !important;
    text-align: center;
    background-color: #444444 !important;
    border-radius: 4px;
    position: relative;
    top: -43px;
    left: -15px;
  }
  .tooltip-max{
    width: 20px !important;
    background: #FFFFFF !important
  }
  .tooltip.top .tooltip-arrow {
    display: none !important;
  }
  .slider .tooltip.top {
    margin-top: -25px !important;
  }
  .well {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    padding: 0;
  }
  .slider.slider-horizontal .slider-track {
    height: 16px;
    width: 100%;
    margin-top: -5px;
    top: 50%;
    left: 0;
    border-radius: 20px;
  }
  .slider-ghost .slider-track {
    height: 5px !important;
  }
  .slider-ghost .slider-handle {
    top: -2px !important;
    border: 5px solid #f77500;
  }
  .slider-success.slider-ghost .slider-handle {
    border-color: #5cb85c;
  }
  .slider-primary.slider-ghost .slider-handle {
    border-color: #428bca;
  }
  .slider-info.slider-ghost .slider-handle {
    border-color: #5bc0de;
  }
  .slider-warning.slider-ghost .slider-handle {
    border-color: #f0ad4e;
  }
  .slider-danger.slider-ghost .slider-handle {
    border-color: #d9534f;
  }


  .min-slider-handle {
    background-color: #444444 !important;
  }

  /*========20240========*/
/*#cart_popup .modal-content {
    width: 570px !important;
}*/

/* Styling for the popup frame */
.popup-frame-skeleton {
  width: 113px;
  padding: 5px;
  margin-top: 0;
  background-color: #ffffff; /* Optional background color */

}

.popup-frame-skeleton img.frame-image {
  height: 108px !important;
  width: 108px !important;
  margin-bottom:-40px;
}

.popup-frame-skeleton .frame-text {
  color: rgb(9, 77, 188);
}

.popup-frame-skeleton .frame-text p {
  margin-top: 9px; /* Adjust as necessary */
}
.popup-frame-skeleton .frame-text .sktext {
   height: 50px !important;
  width: 108px !important;
  margin-bottom:-100px;
}

/*==========20240709================*/
/* Container for skeleton the entire frame */
.frameSkeletonContainer {
  width: 80px !important;
  padding: 5px !important;
  margin-top: 0px !important;
  /* Add any other common styles here */
}

/* Styling for the frame skeleton image */
.frameSkeletonImage {
  height: 55px;
  width: 55px;
}
.frameSkeletonText {
  height: 14px;
  width: 55px;
}
.frameSkeletonTextTwo {
  height: 14px;
  width: 55px;
}
.homeImage27{
    width: 45px;
    height: 45px;
    /*margin-bottom:2px;*/
}
.preview_left_img{
  width: 47.99px !important;
  height: 47.5px !important;
  border-color: #cccccc;
  border-style: solid;
  border-width: 1px;
  margin-bottom: 2px;
}

.mainImageSkeleton{
width: 450px !important;
    height: 450px !important;
    /*margin-left: -15px;*/
    margin-top: 10px;
  }

   /* .skeletonLoaderAll {
    width: 90%;
    height: auto;
    background-color: #e2e5e7;
     background-image: linear-gradient(to right, #E6EFDE 0%, #FEFFFD 25%, #E6EFDE 50%, #FEFFFD 75%, #E6EFDE 100%);
    background-size: 200% 100%; 
    background-repeat: no-repeat;
    border-radius: 4px;
    animation: shine 1.5s infinite linear; 
    margin-bottom: 1rem; 
  }

  @keyframes shine {
    to {
      background-position: 200% 0;
    }
  }*/

  /*below css of skeletonLoaderAll is commented as per skype commemt on 20240712*/

/*  .skeletonLoaderAll {
  width: 90%;
  height: auto; 
  background: linear-gradient(90deg, #E6EFDE, #FEFFFD, #E6EFDE);
  background-size: 200% 100%;
  animation: gradient-slide 2s infinite linear;
  border-radius: 4px;
}

@keyframes gradient-slide {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}*/

/*============20240710===========*/
/*.matFilterBottom{
  flex-basis: 100px !important; 
  margin-bottom: 20px !important; 
  animation: skeleton-loading 1s linear infinite alternate;
}
.matTwo{
  height:100px; 
  width:100px;
  margin:9px;
}*/

/*.matFilterMiddle{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 6px;
margin: 0 6px;
width: 100px;
height: 125px;
flex: none;
order: 1;
flex-grow: 0;
margin-bottom: 20px !important;
flex-basis: 100px !important;
}
.matThree{
width: 100px;
height: 100px;
flex: none;
order: 0;
flex-grow: 0;
cursor: pointer;
}*/

.matFilterMiddle{
align-items: flex-start;
gap: 6px;
height: 139px;
}
.matThree{
width: 100px;
height: 100px;
flex: none;
order: 0;
flex-grow: 0;
cursor: pointer;
}

/*.matFilterBottom{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 6px;
margin: 0 7px;
width: 100px;
height: 125px;
flex: none;
order: 1;
flex-grow: 0;
margin-bottom: 20px !important;
flex-basis: 100px !important;
}*/

.matFilterBottom{
align-items: flex-start;
gap: 6px;
height: 170px;
}
.matTwo{
width: 100px;
/*height: 100px;*/
flex: none;
order: 0;
flex-grow: 0;
cursor: pointer;
}

/*.matFilterTop{
  
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 6px;
margin: 0 7px;
width: 100px;
height: 125px;
flex: none;
order: 1;
flex-grow: 0;
margin-bottom: 20px !important;
flex-basis: 100px !important;
}*/
.matFilterTop {
  align-items: flex-start;
  gap: 2px;
  /*height: 139px;*/
  height: 183px;  
}

.matOne{
width: 100px;
/*height: 100px;*/
flex: none;
order: 0;
flex-grow: 0;
cursor: pointer;
}
/*============20240711===========*/
/*.mainImgContianer{
    width: 518px;
    height: 500px;
    position: relative;
    top: 50px;
    left: 100px;
    flex: none;
    order: 0;
    flex-grow: 0;
    z-index: 0;
}*/

/*#setcanvas{
  position: relative;
}
*/

#setcanvas{
   width: 100%; 
    /*height: 100%;*/ 
    /*height: 450px;*/
    height: 500px;

    display: flex; 
    justify-content: center; 
    align-items: center; 
}


#preview_container{
  width:100%;height:480px;float: left;position: relative;
}

.cls_collage{min-height:40%!important}
.mainImgContianer{
  margin:0 auto;
  max-width:100%;
  border:0 solid red;
  min-height:80%!important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


#main_imageOldorking{
  position: relative;
    /* top: 38px; */
    left: 40px;
     width: 450px; 
    /* height: 478px; */
    cursor: pointer;
    margin: 10px;
}
#main_image{
  position: relative;
  margin: 0 auto;
  width: 500px; 
  height: 500px; 
  cursor: pointer;
  margin-top: 3px;
}
/*#main_image{
    position: relative;
    top: -38px;
    left: -50px;
    width: 440px;
    height: 470px;
    cursor: pointer;
}*/

/* Breadcrumbs */

/*=======20240712================*/

#mattingNone{
width: 41px;
height: 16px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 16px;
display: contents;
align-items: center;
text-transform: capitalize;
color: #666666;

}

#matsNotAvailable{
width: 41px;
height: 16px;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 16px;
display: none;
align-items: center;
text-transform: capitalize;
color: #666666;

}

.selectTopMatImage,.selectBottomMatImage,.selectMiddleMatImage{
  list-style-type: none;
    width: 100px;
    /* height: 20px; */
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #444444;
    flex: none;
    order: 1;
    flex-grow: 0;
    margin-left: 10px;
    padding-bottom:5px;
    cursor: pointer;
}

/*.popupSingleMatDoubleMat{
  width: 28px;
height: 18px;
}*/

.price-main{
  font-family: Open Sans;
  font-size: 24px;
  font-weight: 700;
  line-height: 32.68px;
  text-align: left;

}
.price-sub{
  font-family: Open Sans;
font-size: 20px;
font-weight: 600;
line-height: 27.24px;
text-align: left;

}

/*20240716*/

.childBottomContainer,.childTopContainer{
  width: 570px;
  /*height: 2465px;*/
  height: 100%;
  min-height: 300px;
}
.child_Bottom_Container,.child_Top_Container{
  margin-top: 12px !important;
}

.matBottomWidthTxt{
  margin-top: 10px;
  margin-left: 9px;
}
.matTopWidthTxt{
  margin-top: -7px;
  margin-left: 6px;

}

/*.mattingRangeDiv{
margin: 8.40px 5px 8.40px 5px;
}*/

.custMatSizeWrapper,.mattingRangeDiv,.bottomMatWidthWrapper {
height: 56px !important;
}

#ka_canvas{
cursor: pointer;
}

.bg-right_arrow_p,.bg-left_arrow_p{
cursor: pointer;
}

/*================20240718================*/

.allLeftImages{
  width:48px;
  border: 1px solid rgb(241, 241, 243);
  box-shadow : 0 0 3px 2px rgba(241, 241, 243, 0.5);
}

/*====================20240726======================*/

 .rippleButton {
            overflow: hidden;
        }

        .rippleButton:focus {
            outline: none;
        }

        .rippleButton .ripple {
            position: absolute;
            border-radius: 50%;
            background: #d9d4d4;
            pointer-events: none;
            transform: scale(0);
            animation: ripple-animation 0.6s linear;
        }

        @keyframes ripple-animation {
            to {
                transform: scale(4);
                opacity: 0%;
            }
        }

/*=================20240729====================*/


    .rippleButtonAddToCart {
        overflow: hidden;
        display: inline-block; /* Ensure it behaves like a block element */
        position: relative; /* Needed for absolute positioning of ripple */
    }

    .rippleButtonAddToCart:focus {
        outline: none;
    }

    .rippleAButton {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.6); /* Adjust the background color as needed */
        pointer-events: none;
        transform: scale(0);
        animation: rippleAButton-animation 0.9s linear;
    }

    @keyframes rippleAButton-animation {
        to {
            transform: scale(4);
            opacity: 5%;
        }
    }
/*new added css 20240729*/
/*=================20240802============================*/

 .rippleButtonAll {
        overflow: hidden;
        display: inline-block; /* Ensure it behaves like a block element */
        position: relative; /* Needed for absolute positioning of ripple */
    }

    .rippleButtonAll:focus {
        outline: none;
    }

    .rippleAll {
      position: absolute;
      border-radius: 50%;
      background: #d9d4d4;
      pointer-events: none;
      transform: scale(0);
      animation: rippleAll-animation 0.6s linear;
    }

    @keyframes rippleAll-animation {
        to {
            transform: scale(4);
            opacity: 5%;
        }
    }

    /*==================20240809========================*/

.OKBTN_ {
  position: relative;
}

.updateLoader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 7px solid #ffffff;
  border-top-color: transparent;
  animation: spinUpdateLoader 1s linear infinite;
  display: none; /* Initially hide the loader */
}

.OKBTN_.loadingButton .updateLoader {
  display: block; /* Show the loader when button is in loading state */
}

@keyframes spinUpdateLoader {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.clsProductDesc.prodDetails-tab-txt{
  text-align: left !important;
}


.input-icon_width ,.input-icon_height {
    position: absolute;
    top: 30%;
    left: 30px; / Default left position /
    transform: translateY(-50%);
    height: 20px; / Adjust based on your image size /
    width: 20px;
}

/*=========20240816========*/

 


  #frameColorLabel {
            color: #666666;
            font-size: 12px;
            line-height: 16px;
            font-weight: 400;
            position: absolute;
            background: white;
            padding: 0 5px;
            z-index: 999;
            margin: -8px 0px 0px 3px;
        }

        .dropdownColorOptions {
            display: none;
            position: absolute;
            background-color: white;
            border: 1px solid #ccc;
            border-top: none;
            z-index: 1;
            margin-left: -25px;
            margin-top: 14px;
        }

        .dropdownColortSelected {
            cursor: pointer;
            display: flex;
            align-items: center;
            width: 62px;
            margin-left: -19px;
        }

        .dropdownColortOption {
            padding: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            width: 91px;
        }

        .dropdownColortOption img {
            width: 50px;
            height: auto;
            margin-right: 10px;
        }

        .dropdownColortOption:hover {
            background-color: #f1f1f1;
        }

     

    #frameWidthLabelOne {
    color: #666666;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    position: absolute;
    background: white;
    padding: 0 5px;
    z-index: 999;
    margin: -8px 0px 0px 3px;
    }

    #framesRabbitLabelOne {
      color: #666666;
      font-size: 12px;
      line-height: 16px;
      font-weight: 400;
      position: absolute;
      background: white;
      padding: 0 5px;
      z-index: 999;
      margin: -8px 0px 0px 3px;
    }

    .dropdownWidthRabbitWrapper {
      border: 1px solid #cccccc;
      font-size: 14px;
      line-height: 16px;
      color: #666666;
      font-weight: 550;
      padding: 11px 25px;
      background-color: transparent;
      outline: none;
      border-radius: 6px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;

    }

    #frameWidthDropdown,#framesRabbitDropdown{
      cursor: pointer;
      appearance: none;
      background: url(../desktop_product_new/images/drp-arrow.svg);
      background-repeat: no-repeat;
      background-position: calc(100% - 5px);
      background-size: 17px;
    }

    .dropdownWidthRabbitOptions {
      display: none;
      position: absolute;
      background-color: white;
      border: 1px solid #ccc;
      border-top: none;
      z-index: 1;
      margin-left: -25px;
      margin-top: 14px;
    }

    .dropdownColortOptions {
      display: none;
      position: absolute;
      background-color: white;
      border: 1px solid #ccc;
      border-top: none;
      z-index: 1;
      margin-left: -25px;
      margin-top: 14px;
    }

    .dropdownColortOption {
      padding: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      width: 91px;
    }

    .dropdownColortOption img {
      width: 50px;
      height: auto;
      margin-right: 10px;
    }

    .dropdownColortOption:hover {
      background-color: #f1f1f1;
    }



        .dropdownWidthRabbitSelected {
            cursor: pointer;
            display: flex;
            align-items: center;
            width: 66px;
            margin-left: -19px;
        }
        .dropdownWidthSelected{
          cursor: pointer;
            display: flex;
            align-items: center;
            width: 66px;
            margin-left: -17px;
            margin-top: 11.5px;

        }

         .dropdownWidthRabbitOption {
            padding: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            width: 93px;
        }
        .WidthOptionClass{
          padding: 10px 10px 2px 10px;

        }

       /* .dropdownWidthRabbitOption img {
            width: 50px;
            height: auto;
            margin-right: 10px;
        }*/

        .dropdownWidthRabbitOption:hover {
            background-color: #f1f1f1;
        }

        .sizeModalTop{
          /*width: 692px;*/
          height: 24px;
          font-style: normal;
          font-weight: 600;
          font-size: 20px;
          line-height: 20px;
          color: #444444;
          flex: none;
          order: 0;
          align-self: stretch;
          flex-grow: 1;
        }

        /*.totalFramesCount{
          font-style: normal;
          font-weight: 500;
          font-size: 16px;
          line-height: 20px;
        }*/
        /*20240814*/


.prodDetails-tab-txt{
  text-align: left;
}
.home-text108{
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 21.79px !important;
  text-align: left !important;
  color: #444444;
}
#revimgcnt img{
width: 17.11px;
height: 16.36px;
margin-top: -4px;
cursor: pointer;
}

#revimgcnt{
  cursor: pointer;
}
.b1_name{
  font-family: Open Sans !important;
  font-size: 14px !important;
  font-weight: 400 ;
  line-height: 19.07px ;
  text-align: left !important;
  text-decoration: none !important;

}

.shippingdays{
  width: 100% !important;
}
.parentFrameContainer{
  overflow-x: hidden;
}
/*end*/

/*20240820*/

.zoomImageModal {
  background: rgba(0, 0, 0, 0.5) !important;
}
.sizeMeasureModal {
  background: rgba(0, 0, 0, 0.5) !important;
}
.shippingInfoModal{
  background: rgba(0, 0, 0, 0.5) !important;
}
.mattingModal{
  background: rgba(0, 0, 0, 0.5) !important;
}
.frameIncludesModal {
  background: rgba(0, 0, 0, 0.5) !important;
}
#cart_popup{
  background: rgba(0, 0, 0, 0.5) !important;
}

.ratingStarIconSix{
  display: none;
}




#frameFilterColor .selected {
      color: #094dbc;
     font-weight: 600;
    }

    /*20240822*/



/*/ css for total item  blue color section /*/

.total-items-section{
  margin-bottom: 15px;
}
.total-items-wrapper{
  width: 100%;
  height: 51px;
  padding: 8px 12px 8px 12px;
  border-radius: 6px;
  background-color:#E6EDF4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
}
.total-items-wrapper p{
  font-size: 16px;
  font-weight: 400;
  line-height: 21.79px;
  text-align: left;
  color: #444444;
}

.total-itm-show-drp{
  width: 100%;
  max-width: 80px;
  height: 35px;
  padding: 8px 10px 8px 10px;
  border-radius: 6px;
  border: 1px;
  margin-left: 8px;
  margin-right: 20px;
  font-size: 14px;
  font-weight: 400;
}

.total-itm-best-seller-drop{
  width: 100%;
  max-width: 152px;
  height: 35px;
  padding: 8px 10px 8px 10px;
  border-radius: 6px;
  border: 1px;
  margin-left: 8px;
  font-size: 14px;
  font-weight: 400;
}
.sort-by-txt{
  min-width: 55px;
}
/ css for total item  blue color section /


.dropdownWidthRabbitOption .primary-text{
  color: #094DBC !important;
  font-weight: 600;
}
.primary-text{
  color: #094DBC !important;
  font-weight: 600;
}


.drop-dimension{
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  text-align: left;


}
.dropDimension{
   margin-top: -6px;
}
.drop-frame-img-wrapper{
  width: 40%;
}

.selectFrame-modal-footer{
  position: absolute !important;
  bottom: 1% !important;
  width: 96% !important;
  background: #ffffff !important;
  border-top: 0px !important;
}
#frameFilterColor{
  color: #666666 !important;
}
/*20240827*/

.loadMoreFrames {
    font-size: 16px;
    line-height: 16px;
    color: #666666;
    font-weight: 600;
    padding: 14px 15px;
    border: 1.5px solid #666666;
    border-radius: 6px;
    background-color: transparent;
    outline: none;
    /*margin: 0px 0 0;*/
    margin:20px 0px 20px 215px;
  }

  .loadMoreFramesFilter {
    font-size: 16px;
    line-height: 16px;
    color: #666666;
    font-weight: 600;
    padding: 14px 15px;
    border: 1.5px solid #666666;
    border-radius: 6px;
    background-color: transparent;
    outline: none;
    /*margin: 0px 0 0;*/
    margin:20px 0px 20px 215px;
    display: none;
  }

  /*new code*/

  @keyframes slideInFromRight {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes slideOutToRight {
    0% {
      transform: translateX(0);
      opacity: 1;
    }
    100% {
      transform: translateX(100%);
      opacity: 0;
    }
  }
  
  #viewallFrames-modal .modal-dialog {
    animation-duration: 0.4s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
  }
  
/*  #viewallFrames-modal .modal-dialog {
    animation-name: slideInFromRight;
  }*/


  #viewallFrames-modal.fade.show .modal-dialog {
    animation-name: slideInFromRight;
  }
  #viewallFrames-modal.fade .modal-dialog {
    animation-name: slideOutToRight;
  }



 #addMatting-modal .modal-dialog {
    animation-duration: 0.4s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
  }
  
  /*#addMatting-modal .modal-dialog {
    animation-name: slideInFromRight;
  }
*/

 #addMatting-modal.fade.show .modal-dialog {
    animation-name: slideInFromRight;
  }
  #addMatting-modal.fade .modal-dialog {
    animation-name: slideOutToRight;
  }

  /*Commone code*/

 .activeTextColor{
   color: #094dbc;
  }
  .activeBorderColor{
    border-color: #094dbc;
  }
  .hiddenContent{
    display: none;
  }
 .visibleContent{
  display: block;
 }

 .hiddenFramesContent{
    /*display: none;*/
  }

  .moreThanTData{
    display: none !important;
  }

  #header_img_source{
    display: none;
  }


  #searchTextBtn1Label {
    position: absolute;
    top: 50%;
    left: 10px; /* Adjust to align with the input field */
    transform: translateY(-50%);
    transition: all 0.3s ease;
    color: gray;
    pointer-events: none;
    font-family: Open Sans;
    font-size: 16px;
  }

  #searchTextBtn1Label.moveUp {
    top: -1px;
    color: #094dbc;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    margin-bottom: 0;
    position: absolute;
    left: 7px;
    background: white;
    padding: 0 2px;
    z-index: 999;
  }
#middleMatNoData, #bottomMatNoData, #topMatNoData {
  display: none;
}

.matErrorDataHide{
  display: none !important;

}


.matErrorDataShow{
  display: block !important;

}
.topMatDivClass{
  margin-right: 14px;
}

.bottomMatDivClass{
  margin-right: 14px;
}

.middleMatDivClass{
  margin-right: 13px;
}

.frame_loader_hide_frame_show_1
{
  font-size: 14px !important;
  display: none;
}


/*matting validation modal ccc*/


#matvalidation{
  background: rgba(0, 0, 0, 0.5)
}

/*------------------- image configuration modal css end-----------------*/
.icon_mat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  position: relative;
}

.mat_validation_title {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: left;
  color: #444444;
}

.mat_validate_text {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #444444;
  margin-bottom: 10px;
}


#matsValidationMessage{
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
    gap: 0px; 
    display: inline-block;
    padding: 0px 0;
    margin-top: 8px;
  }
  #matsValidationMessageTwo{
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
  }

  /*new css 20240920*/
  /*.active-indicator {
      position: absolute;
      width: 10px; 
      height: 3px; 
      background-color: #094DBC; 
      transition: top 0.2s ease; 
      right: 0; 
      z-index: 10; 
      right: 13px;
    }*/

 .active-indicator {
      position: relative;
      width: 10px; 
      height: 3px; 
      background-color: #094DBC; 
      transition: top 0.2s ease; 
      right: 0; 
      z-index: 10; 
      right: -578px;
    }


/*new test code*/

.matActiveClassBorderTop {
    border-bottom: solid 3px #094dbc;
    color: #094dbc !important;
    background: #F2F2F2;
 }

   .selectFrameText042{
    color: #cccccc;
    font-size: 14px;
    font-style: Regular;
    text-align: left;
    font-family: Open Sans;
    line-height: normal;
    font-stretch: normal;
    text-decoration: none;
    line-height: 70px;
    width: 100px;
    height: 57px;
  }

  .selectFrameText043{
    color: #cccccc;
    font-size: 14px;
    font-style: Regular;
    text-align: left;
    font-family: Open Sans;
    line-height: normal;
    font-stretch: normal;
    text-decoration: none;
    line-height: 70px;
    width: 100px;
    height: 57px;
  }


.no_match_record{
width: 380px;
height: 19px;
font-weight: 400;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #EE0000;
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
}

/* Please update Image Size to be below 40� x 60� */
.divBackgroundActive{
  background: #F2F2F2;
}

.glassImgStyle{
  width: 70px !important;
  height: 70px !important;
}

.glass_category_name{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: 0.1px;
  color: #444444;
  flex: none;
  order: 0;
  flex-grow: 0;
}
.glass-divider{
  width: 100%;
  height: 0px;
  border: 1px solid #CCCCCC;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
  /*margin: 10px 0px 10px 0px;*/
  margin: 10px 0px 0px 0px;
}

.forGlassOptionGroup{
  /*margin: 10px;*/
  /*margin:4px 10px 10px 10px;*/
  margin:10px 10px 0px 10px;

}
.glassHideShow{
  display: none;
}

.selfInstallButton{
  padding:10px !important;
}
.hardwareImg{
  margin-right: 4px;
}



/*-------------------------------inch cm button css start------------------------------*/
.inch-btn{
  padding: 8.5px 10px 8.5px 10px;
  border: 1px solid #999999;
  background: #CCCCCC;
  border-radius: 6px 0px 0px 6px !important;
  opacity: 0px;
  max-height: 36px;
  display: flex;
  align-items: center;
  color :#444444;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.07px;
}
.cm-btn{
  padding: 8.5px 10px 8.5px 10px;
  border: 1px solid #999999;
  background: #CCCCCC;
  border-radius: 0px 6px 6px 0px !important;
  opacity: 0px;
  max-height: 36px;
  display: flex;
  align-items: center;
  color :#444444;
  text-decoration: none !important;
  font-size: 14px;
    font-weight: 400;
    line-height: 19.07px;
}
.inch-cm-active{
  background: #FFFFFF !important;
  border: 1px solid #094dbc !important;
  color :#094dbc !important;
  font-weight: 600 !important;
}
/*.img-size-wrapper-tools{
  display: flex !important;
  gap: 73px;
}*/
.btnGroupClass{
/* right: 94px; */
}
/*-------------------------------inch cm button css end------------------------------*/

.input_size_border {
    border-color: #094dbc !important;
}

.input_size_title {
    color: #094dbc !important;
}

.input_size_border_error {
    border-color: #FF0000 !important;
}

.input_size_title_error {
    color: #FF0000 !important;
}


 .progressCircle {
            width: 30px;
            height: 30px;
            margin: -6px 0px 0px 12px;
            border-radius: 50%;
            border: 4px solid #fff;
            border-top-color: #444444;
            border-bottom-color: #444444;
            border-right-color: #444444;
            animation: progressCircle 1s linear infinite;
            display: none;
        }

        @keyframes progressCircle {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes progressCircle {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .OKBTN_.loadingButton .progressCircle {
  display: block; /* Show the loader when button is in loading state */
}



/* .diplomaMatting-div-txt{
  display: flex !important;
  flex-wrap: wrap !important;
}
#topMatColorName{
  width: 350px;
} */


.sub_heading
{
  font-size: 14px;
  color:#666666;
  font-weight: 400;
}
.conf_name {
  font-weight: 600;
}

.cf_includes{
  margin-bottom:12px
}

.glassSelectOption-main{
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scrollbar-width: thin;
	width: 100%;
	padding-bottom: 10px;
  scrollbar-width: none;
  /* min-width: 471px; */
} 

#addtocartpopupmodal{
	background: rgba(0, 0, 0, .5)
}

.glass-option-wrap {
	min-width: 130px;
	/* width: 150px; */
	border-radius: 6px;
	border: 1px solid #888888;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background-color: #fff;
	cursor: pointer;
}

.glass-option-wrap p {
	margin: 0;
}

.glass-option-head {
	font-family: Open Sans;
	font-size: 14px;
	font-weight: 600;
	color: #444444;
}

.glassOption-list {
	font-family: Open Sans;
	font-size: 14px;
	font-weight: 400;
	line-height: 16px;
	display: flex;
	align-items: center;
	gap: 7px;
	flex-direction: column;
}
.glassOptionlist {

	font-size: 14px;
  margin-top: 10px;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 19px;
  color: #444444;
  min-inline-size: max-content;
}

.glassOption-list p{
	display: flex;
	align-items: center;
	gap: 7px;
	color:#444444;
}
.perimage{
  margin-left:10px;
}
/*New Upgrade section design */
.glassActive-supportiveTxt {
	font-family: Open Sans;
	font-size: 14px;
	font-weight: 400;
	color: #094dbc;
	text-align: center;
}

.glassType-txt {
	font-family: Open Sans;
	font-size: 10px;
	font-weight: 600;
	color: #888888;
	text-align: center;
}

.glassActive-supportiveTxt span{
	font-weight: 600;
}


.glass-option-wrap.active{
	border: 2px solid #094DBC;
	background-color: #094DBC0D;
}

.glass-option-wrap.active .glass-option-head{
	color: #094DBC;
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
    .glassSelectOption-main{
		display: flex;
		gap: 10px;
		overflow-x: auto;
		scrollbar-width: thin;
		width: 100%;
		padding-bottom: 10px;
	}
	
 }
.decimal_price_upgrade{
	font-size: 10px;
}

/* cart popup start */

.addToCartPopup-wrapper {
    /* max-width: 355px; its on ly for mobile devide */
    width: 100%;
    margin: 0 auto
}

.atcPopup-header {
    padding: 15px;
    border-bottom: 1px solid #ccc;
    background-color: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.atcPopup-header h3 {
    font-size: 20px;
    font-weight: 600;
    text-align: left;
    color: #666;
    margin-bottom: 0;
    margin-top: 0
}

.atcPopup-header h3 span {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
    color: #094dbc
}

.value-span {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    text-align: left !important;
    color: #094dbc !important
}

.viewAll-detailsLink {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: #666;
    text-decoration: underline
}

.atcPopup-list-inner {
    gap: 10px;
    display: flex;
    align-items: flex-start;
    padding: 15px 10px
}

.atcProd-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 27.24px;
    text-align: left;
    color: #666;
    margin-bottom: 5px;
    margin-top: 0
}

.atcProd-info {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left
}

.atcPopup-btnDiv {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 15px 15px
}

.keepShopping-btn,
.startCheckout-btn {
    height: 44px;
    width: 100%;
    padding: 14px 15px;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    display: inline-flex
}

.keepShopping-btn {
    border: 1.5px solid transparent;
    line-height: 16px;
    color: #666;
    background-color: transparent;
    border-radius: 6px;
    align-items: center !important;
    justify-content: center !important;
}

.startCheckout-btn {
    border: 1.5px solid #094dbc;
    color: #fff;
    background-color: #094dbc;
    border-radius: 6px;
    align-items: center;
    justify-content: center
}

.popup_preview {
    height: 75px;
    width: 75px
}

.atcPopup-textWrap {
    max-height: 330px;
    overflow-y: scroll;
    scrollbar-width: none;
    width: 100%;
}

.cartPreviewImage {
    width: 100px;
    height: auto;
    object-fit: contain
}

.cm-btn,
.inch-btn {
    height: 38px;
    padding: 8.5px 10px;
    border-bottom: 1px solid #999;
    border-top: 1px solid #999;
    font-weight: 400;
    color: #444;
    background: #ccc;
    font-size: 14px;
    line-height: 19.07px;
    text-align: left
}

.atcPopup-imgWrap {
    max-width: 130px
}

.inch-btn {
    border-radius: 6px 0 0 6px;
    border-left: 1px solid #999;
    border-right: 0
}

.cm-btn {
    border-radius: 0 6px 6px 0;
    border-right: 1px solid #999;
    border-left: 0
}

.cm-btn.active,
.inch-btn.active {
    border: 1px solid #094dbc;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 19.07px;
    text-align: left;
    color: #094dbc
}

.inch-cm-wrapper {
    padding-right: 11px
}

.upgrade-area {
    background-color: #f2f2f2;
    border-top: 1px solid #ccc;
    padding: 15px
}

.upgrade-title {
    font-size: 16px;
    font-weight: 600;
    color: #666;
    text-align: left;
    margin-bottom: 4px;
    line-height: 21px
}

.openingSize-subinfo,
.upgrade-text {
    font-weight: 400;
    text-align: left;
    color: #666
}

.upgrade-text {
    font-size: 14px;
    margin-bottom: 4px;
    line-height: 19px
}

.upgrade-text a {
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    color: #094dbc
}

.openingSize-subinfo {
    font-size: 12px;
    line-height: 20px !important;
}

.viewAllDetails-wrapper {
    margin-top: 30px;
    display: none;
    margin-bottom: 5px
}

.upgrade-link,
.upgradeit {
    text-decoration: underline;
    cursor: pointer
}

.reset_c1 {
    color: #444
}

.atcProd-info:last-child {
    margin-bottom: 0
}

.atcProd-info span {
    font-weight: 600
}

/* cart popup END */

/*CSS for new upload image border */
.uploadPhoto-section{
	outline: 3px solid #094DBC;
    text-align: center;
    border-radius: 4px;
    padding: 0px 15px 8px 15px;
    margin-bottom: 17px;
}
.custom_fileupload{
	color:#094DBC !important;
  cursor: pointer;
  font-size: 16px !important;
  line-height: 24px;
  font-weight: 600 !important;
}
.custom-icon path {
	fill: #094DBC;
}
.uploadImgBlock-div .custom-file-upload {
    margin-top: 8px;
}
/*CSS for new upload image border */


/*css added for similar product sectiion DATE 20250414*/
 .home-divider01 {
  width: 600px;
  height: 1px;
  align-self: stretch;
}

 .home-similar {
  gap: 10px;
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  flex-direction: column;
  overflow-x: auto;
  scrollbar-width: thin;
  overflow-y: hidden;
  padding-bottom: 15px;
}

 .home-text062 {
  color: rgba(0, 0, 0, 1);
  height: auto;
  font-size: 20px;
  font-style: Regular;
  text-align: left;
  font-family: Open Sans;
  font-weight: 400;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 10px;
}

 .home-frame19421 {
  gap: 20px;
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  justify-content: space-between;
}

 .home-group1910 {
    width: 100px;
    height: 100%;
    display: flex;
    position: relative;
    align-items: flex-start;
    flex-shrink: 1;
    cursor: pointer;
    min-height: 163px;
}
 

 .home-rectangle143 {
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  position: absolute;
}

 .home-text064 {
  top: 110px;
  color: rgba(102, 102, 102, 1);
  width: 100px;
  height: auto;
  position: absolute;
  font-size: 14px;
  font-style: Regular;
  text-align: left;
  font-family: Open Sans;
  font-weight: 400;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

 .home-group1911 {
  width: 100px;
  height: 129px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 1;
}

 .home-rectangle1431 {
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  position: absolute;
}

 .home-text066 {
  top: 110px;
  color: rgba(102, 102, 102, 1);
  width: 100px;
  height: auto;
  position: absolute;
  font-size: 14px;
  font-style: Regular;
  text-align: left;
  font-family: Open Sans;
  font-weight: 400;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

 .home-group1912 {
  width: 100px;
  height: 148px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 1;
}

 .home-rectangle1432 {
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  position: absolute;
}

 .home-text068 {
  top: 110px;
  color: rgba(102, 102, 102, 1);
  width: 100px;
  height: auto;
  position: absolute;
  font-size: 14px;
  font-style: Regular;
  text-align: left;
  font-family: Open Sans;
  font-weight: 400;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

 .home-group1914 {
  width: 100px;
  height: 148px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 1;
}

 .home-rectangle1433 {
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  position: absolute;
}

 .home-text070 {
  top: 110px;
  color: rgba(102, 102, 102, 1);
  width: 100px;
  height: auto;
  position: absolute;
  font-size: 14px;
  font-style: Regular;
  text-align: left;
  font-family: Open Sans;
  font-weight: 400;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

 .home-group1913 {
  width: 100px;
  height: 148px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 1;
}

 .home-rectangle1434 {
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  position: absolute;
}

 .home-text072 {
  top: 110px;
  color: rgba(102, 102, 102, 1);
  width: 100px;
  height: auto;
  position: absolute;
  font-size: 14px;
  font-style: Regular;
  text-align: left;
  font-family: Open Sans;
  font-weight: 400;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}

 .home-divider02 {
  width: 600px;
  height: 1px;
  align-self: stretch;
}

.similarimage {
  width: 100px;
  height: 100px;
  background: #f0f0f0;
  position: relative;
  overflow: hidden;
}

.similarimage::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150px;
  height: 100%;
  width: 150px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: shimmer 1s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(200%);
  }
}


.similarimagetext {
  width: 100px;
  height: 20px;
  background: #f0f0f0;
  overflow: hidden;
}

.similarimagetext::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150px;
  height: 100%;
  width: 150px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: shimmer 1s infinite;
}

.skeletonLoaderAllforrd {
  width: 300px;
  height: 20px;
  background: #f0f0f0;
  overflow: hidden;
}

.skeletonLoaderAllforrd::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150px;
  height: 100%;
  width: 150px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: shimmer 1s infinite;
}


.shimmer-line {
  height: 15px;
  border-radius: 4px;
  background: #f0f0f0;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}

.shimmer-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100px;
  height: 100%;
  width: 150px;
  background: linear-gradient(90deg, transparent, rgba(255,255,250,0.6), transparent);
  animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(200%);
  }
}

.inline-row {
  display: flex;
  gap: 10px;
}


.home-image46 {
  width: 100px;
  height: 100px;
  border-color: rgba(204, 204, 204, 1);
  border-style: solid;
  border-width: 1px;
  margin-bottom: 10px;
  min-width: 100px;
  min-height: 100px;
}

.home-frame1964 {
    gap: 10px;
    width: 100%;
    display: flex;
    overflow: hidden;
    align-items: flex-start;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.home-group1900 {
  width: 100px;
  height: 100%;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 1;
  cursor: pointer;
}

.grp-button, .grp-button-active {
    width: 121px !important;
    height: 44px !important;
    padding: 12.5px 15px  !important;
    font-size: 14px !important;
    line-height: 19.07px !important;
}
.grp-button {
    border: 1px solid #999 ;
    background: #ccc ;
    color: #444;
    font-weight: 400 ;
}
.grp-button-active
 {
    background: #fff !important;
    border: 1px solid #094dbc !important;
    color: #094dbc !important;
    font-weight: 600;
}
.print-img-modal-footer{
      justify-content: left !important
}

.preview_maindiv  {
     margin: 0 auto 15px;
     text-align: center !important;  
     aspect-ratio: unset !important;
}

.select-areas-overlay{
     left: 50% !important;
     transform: translate(-50%, 0px)  !important;
}

.imgsizeconfiermation-text {
    font-size: 16px;
    line-height: unset !important;
    color: #444;
    padding-bottom: 0px;
    margin-bottom:0px;
    width: 260px;
}

.modal_details_wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

#imageCropModal .modal-dialog{
    max-width: 650px !important;
}
#imageCropModal .modal-body.py-0.modal_width {
    padding: 0 15px !important;
}
.imgsizeconfermation-footer{
    padding: 15px 15px !important;
}

.label.custom-control-label.switch-label.pl-2{
  font-size: 16px !important;
}
.imgsizeconfermation-footer-text{
  font-size: 16px !important;

}

.input_validate {
	border-color: red !important
}

.label_validate {
	color: red !important
}
.txt_error_msg {
    color: red;
    font-weight: 600;
    font-size: 14px;
    position: relative;
    left: 45%;
}


p.productOption-title
 {
    display: flex;
    align-items: center;
    justify-content: space-between;
 }
  .submit_btn_div{
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
 }

 /* ########################### - Discountinued popup css  -  ###########################    */
.display_disc_popup_title,
.disc_max-image-sizetxt {
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #444;
	margin-bottom: 10px
}

.disc_max-image-sizetxt {
	color: red
}
.display_disc_popup_center-blocks {
	display: block;
	margin-right: auto;
	margin-left: auto;
	width: 60px
}

.okbtns {
	font-family: Open Sans;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	color: #fff;
	background-color: #094dbc;
	border: 1.5px solid #094dbc;
	border-radius: 6px;
	padding: 0;
	height: 44px;
	max-width: 100px;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap
}
#ModalForDiscontinue{
  background-color: rgba(0, 0, 0, .6);
	z-index: 99999
}

.popup-container {
  position: relative;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  width: 400px; /* Adjust as needed */
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #333;
}
/* ########################### - END -  ###########################    */