a{
    cursor:pointer
  }
  button{
    cursor:pointer
  }
  
  .inputFeildCustomDesign {
    border: 2px solid #363636;
    border-radius: 25px;
    width: 391px;
    height: 62px;
    padding-left: 20px;
  }
  
  @media only screen and (min-width: 768px) and (max-width: 1200px) {
    .inputFeildCustomDesign {
      border: 2px solid #363636;
      border-radius: 25px;
      width: 331px;
      height: 62px;
      padding-left: 10px;
    }
  }
  
  @media only screen and (max-width: 768px) {
    .inputFeildCustomDesign {
      width: 95%;
      padding-left: 10px;
    }
  }
  
  ::placeholder {
    font-weight: 400;
    font-size: 16px;
    color: #363636;
    opacity: 0.5;
  }
  
  a {
    color: black;
    text-decoration: none;
  }
  
  .selectDesign {
    width: 420px;
  }
  
  @media only screen and (max-width: 1200px) {
    .selectDesign {
      width: 100%;
    }
  }
  
  .picker {
    position: relative;
  }
  
  .swatch {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }
  
  .popover {
    position: absolute;
    z-index: 5;
    top: calc(100% + 2px);
    left: 0;
    border-radius: 9px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  }
  
  .smallertextfeild {
    border-radius: 100px;
    width: 100px;
    height: 45px;
    border: 1px solid #dddddd;
    padding-left: 10px;
  }
  
  .productcardSlider .slick-prev {
    left: -16px;
    z-index: 1;
  }
  
  .productcardSlider .slick-next {
    right: -16px;
    z-index: 1;
  }
  
  .productcardSlider .slick-prev:before,
  .productcardSlider .slick-next:before {
    color: #363636 !important;
    opacity: 0.5 !important;
    visibility: hidden;
  }
  
  .productcardSlider :hover .slick-prev:before,
  .productcardSlider :hover .slick-next:before {
    color: #363636 !important;
    opacity: 0.5 !important;
    visibility: visible;
  }
  
  .productcardSlider .slick-slide {
    text-align: center;
  }
  
  figure {
    width: 600px;
    background-repeat: no-repeat;
  }
  
  figure:hover img {
    opacity: 0;
  }
  
  /* *:not(input) {
    -webkit-touch-callout: none; /* iOS Safari */
  /* -webkit-user-select: none; /* Safari */
  /* -khtml-user-select: none; /* Konqueror HTML */
  /* -moz-user-select: none; /* Old versions of Firefox */
  /* -ms-user-select: none; /* Internet Explorer/Edge */
  /* user-select: none;
  }*/
  
  .imageThumbnails .slick-dots li {
    width: 100px;
    height: 100px;
  }
  
  .imageThumbnails .slick-dots {
    bottom: auto;
  }
  
  .imageThumbnails .slick-prev:before,
  .imageThumbnails .slick-next:before {
    color: #363636 !important;
    opacity: 0.5 !important;
  }
  
  .imageThumbnails .slick-dots {
    position: relative !important;
  }
  
  @media only screen and (max-width: 768px) {
    .imageThumbnails .slick-dots {
      display: none !important;
    }
  }
  
  .imageThumbnails .slick-prev {
    left: -21px;
    z-index: 1;
    top: 22% !important;
  }
  
  .imageThumbnails .slick-next {
    right: -21px;
    z-index: 1;
    top: 22% !important;
  }
  
  @media only screen and (max-width: 1200px) {
    .imageThumbnails .slick-prev {
      left: -21px;
      z-index: 1;
      top: 15% !important;
    }
    .imageThumbnails .slick-next {
      right: 21px !important;
      z-index: 1;
      top: 15% !important;
    }
  }
  
  @media only screen and (max-width: 768px) {
    .imageThumbnails .slick-prev {
      left: 20px !important;
      z-index: 1;
      top: 50% !important;
    }
    .imageThumbnails .slick-next {
      right: 20px !important;
      z-index: 1;
      top: 50% !important;
    }
  }
  
  @media only screen and (max-width: 1200px) {
    .imageThumbnails .slick-prev {
      left: 20px;
    }
  }
  
  @media only screen and (max-width: 768px) {
    .imageThumbnails .slick-track {
      height: 300px;
    }
  }
  
  .imageThumbnails .slick-slide img {
    width: 400px;
    height: 400px;
    margin: 0 auto;
  }
  
  .imageThumbnails .slick-slide {
    height: 400px;
  }
  
  @media only screen and (max-width: 1200px) {
    .imageThumbnails video {
      /* margin-top: 100px; */
    }
  }
  
  .react-player__preview {
    width: 100% !important;
  }
  
  @media only screen and (max-width: 1200px) {
    .react-player__preview {
      width: 387px !important;
    }
  }
  
  .hideScrollBar::-webkit-scrollbar {
    display: none;
  }
  
  .DemoWrapper {
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    /*height: 100vh;*/
  }
  
  .DemoWrapper .Demo {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 40%;
  }
  
  .DemoWrapper label {
    color: #6b7c93;
    font-weight: 300;
    letter-spacing: 0.025em;
  }
  
  .DemoWrapper button {
    white-space: nowrap;
    border: 0;
    outline: 0;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 14px;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    color: #fff;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    background-color: #6772e5;
    text-decoration: none;
    -webkit-transition: all 150ms ease;
    transition: all 150ms ease;
    margin-top: 10px;
  }
  
  .DemoWrapper button:hover {
    color: #fff;
    cursor: pointer;
    background-color: #7795f8;
    transform: translateY(-1px);
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
  }
  
  .DemoWrapper input,
  .StripeElement {
    display: block;
    margin: 10px 0 20px 0;
    max-width: 500px;
    padding: 10px 14px;
    font-size: 1em;
    font-family: "Source Code Pro", monospace;
    box-shadow: rgba(50, 50, 93, 0.14902) 0px 1px 3px,
      rgba(0, 0, 0, 0.0196078) 0px 1px 0px;
    border: 0;
    outline: 0;
    border-radius: 4px;
    background: white;
  }
  
  .DemoWrapper input::placeholder {
    color: #aab7c4;
  }
  
  .DemoWrapper input:focus,
  .StripeElement--focus {
    box-shadow: rgba(50, 50, 93, 0.109804) 0px 4px 6px,
      rgba(0, 0, 0, 0.0784314) 0px 1px 3px;
    -webkit-transition: all 150ms ease;
    transition: all 150ms ease;
  }
  
  .StripeElement.IdealBankElement,
  .StripeElement.FpxBankElement,
  .StripeElement.PaymentRequestButton {
    padding: 0;
  }
  
  .StripeElement.PaymentRequestButton {
    height: 40px;
  }
  
  .extraClass {
    font-size: 20px !important;
    pointer-events: auto !important;
  }
  
  .extraClass:hover {
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .borderBottomPyment:first-child {
    border-bottom: 1px solid #dfe0df;
  }
  
  .hideScrollBar .slick-slider {
    max-width: 235px !important;
    width: 235px !important;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #4b9664;
    border: 2px solid #4b9664;
  }
  
  ::-webkit-scrollbar {
    background-color: #f5f5f5;
    height: 5px;
  }
  
  ::-webkit-scrollbar {
    background-color: #f5f5f5;
    width: 5px;
  }
  
  .themeInnerWrapper {
    width: 92%;
    display: inline-block;
  }
  
  @media only screen and (max-width: 1200px) {
    .themeInnerWrapper {
      width: 100%;
    }
    .wrapTop {
      margin-top: 98px;
    }
  }
  
  .productcardSlider iframe {
    border: none !important;
  }
  
  .productcardSlider iframe .divbtnpos {
    display: none !important;
  }
  
  .imageThumbnails iframe {
    border: none !important;
  }
  
  .Iframe360 {
    /* width: 330px !important; */
    border: none !important;
    top: -53px;
    position: absolute;
    left: 0;
  }
  
  .Iframe3dv {
    /* width: 250px !important;
    border: none !important;
    position: relative;
    top: 25px; */
  
    position: absolute;
    border-radius: 0;
    left: -15px;
  }
  
  .customTransform video {
    transform: scale(1.5);
  }
  
  .customTransform img {
    transform: scale(1.3);
  }
  
  .invalid-feedback {
    color: red;
  }
  
  .disableArrow {
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  
  .rte-wrapper {
    width: 100% !important;
    display: block !important;
    margin-bottom: 25px !important;
    height: 400px !important;
  }
  
  .rtc-editor {
    height: 275px !important;
    border: 1px solid #f1f1f1 !important;
    padding: 5px !important;
    border-radius: 2px !important;
  }
  
  @media only screen and (max-width: 1200px) {
    .swaggerApi {
      margin-top: 100px;
    }
  }
  
  .fancyHeightWidth {
    height: 48px !important;
    width: 30px !important;
  }
  
  .bannerTextAlign {
    padding: 0 200px 0 200px;
    margin-top: 130px;
    position: relative;
  }
  
  @media only screen and (max-width: 1200px) {
    .bannerTextAlign {
      padding: 0 20px 0 20px;
    }
  }
  
  .bannerTextBox {
    width: 35%;
    padding: 10px;
    z-index: 8;
  }
  
  @media only screen and (max-width: 1200px) {
    .bannerTextBox {
      width: 100%;
    }
  }
  
  .bannerTextBoxCenter {
    width: 100%;
    padding: 10px;
    z-index: 999;
  }
  
  @media only screen and (max-width: 768px) {
    .bannerTextBoxCenter {
      padding: 0px !important;
    }
  
    .bannerTextBoxCenter h1 {
      font-size: 48px !important;
    }
    .bannerTextBoxCenter p {
      font-size: 18px !important;
    }
  }
  
  @media only screen and (max-width: 1200px) {
    .bannerTextBoxCenter {
      width: 100%;
    }
  }
  
  .fakeImgeBox {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 27%;
    opacity: 0.3;
  }
  
  @media only screen and (max-width: 1200px) {
    .fakeImgeBox {
      left: 0;
      right: 0;
      width: 100% !important;
    }
  }
  
  .bannerTextAlignCenter {
    margin: 0 200px 0 200px;
    margin-top: 130px;
    position: relative;
    padding-bottom: 5px;
    display: flex;
  }
  
  .fakeImgeBoxCenter {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    opacity: 0.3;
  }
  
  @media only screen and (max-width: 1200px) {
    .bannerTextAlignCenter {
      margin: 0 20px 0 20px;
      margin-top: 130px;
    }
  }
  
  @media only screen and (max-width: 1200px) {
    .fakeImgeBoxCenter {
      left: 0;
      right: 0;
      width: 100% !important;
    }
  }
  
  .image-360-view {
    position: absolute;
    background: url("/images/360_view.svg");
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100px;
    height: 100px;
    margin: auto;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: rgb(255 255 255 / 50%) 0px 0px 4px;
    transition: 0.5s all;
    color: rgb(80, 80, 80);
    text-align: center;
    line-height: 100px;
    z-index: 2;
  }
  
  .image-360-vieww {
    position: absolute;
    background: url("/images/threeesixtynew.png");
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: rgb(255 255 255 / 50%) 0px 0px 4px;
    transition: 0.5s all;
    color: rgb(80, 80, 80);
    text-align: center;
    line-height: 100px;
    z-index: 2;
  }
  
  #loading-image {
    /*animation: mymove 1s infinite;*/
    height: 220px;
    /*background-color: aliceblue;*/
  }
  
  .animate {
    animation: mymove 1s infinite;
  }
  
  .certificate {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  @keyframes mymove {
    from {
      background-color: aliceblue;
    }
    to {
      background-color: aquamarine;
    }
  }
  
  @media only screen and (max-width: 1200px) {
    .imgeVideoWwidthPdp > div {
      width: 100% !important;
    }
  }
  
  @media only screen and (max-width: 768px) {
    .tablemobileModdeApi {
      width: 500px;
    }
  }
  
  @media only screen and (max-width: 768px) {
    .bottomalign {
      margin-bottom: 8px;
    }
  }
  
  @media only screen and (max-width: 768px) {
    .postBottom {
      margin-bottom: 15px;
    }
  }
  
  @media only screen and (max-width: 768px) {
    .priceList {
      display: inline-block;
    }
  }
  
  @media only screen and (max-width: 767px) {
    .buttonAlignorder {
      margin-top: 10px;
    }
    .noticationBadgeInMobile {
      position: fixed;
      bottom: 50px;
      z-index: 999999999;
    }
  }
  
  .noticationHeight {
    max-height: 500px;
    min-width: 100px;
    overflow: scroll;
  }
  
  .noticationHeight .MuiAlert-message {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }
  
  .action-required {
    background-color: #eba4c1 !important;
    /*color: #fff !important;*/
  }
  
  .inprogress {
    background-color: #fcf5dc !important;
    /*color: #fff !important;*/
  }
  
  .ship-to-office {
    background-color: #b1d4ee !important;
    /*color: #fff !important;*/
  }
  
  .delivered {
    background-color: #abc3a4 !important;
    /*color: #fff !important;*/
  }
  
  .lianerProgressbarAlignment {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
  }
  
  @media only screen and (max-width: 1200px) {
    .lianerProgressbarAlignment {
      width: 200px;
    }
  }
  
  @media only screen and (max-width: 767px) {
    .lianerProgressbarAlignment {
      width: 200px;
    }
  }