/** Shopify CDN: Minification failed

Line 91:22 Unexpected "#"
Line 610:0 Unexpected "#14-karat"
Line 611:0 Unexpected "#18-karat"

**/
:root {
  --brown1: #64513F;
  --brown2: #3A342E;
  --brown3: #BCAE9B;
  --gray1: #B8C2BB;
  --gray2: #F3F0EB;
  --bgColor: #FCFCFC;
  --white: #ffffff; 
}
body{
 background-color: var(--bgColor);
 font-family: Didot,Didot LT STD,Hoefler Text,Garamond,Times New Roman,serif; 
 height: 100%;
}


/* RING BUILDER INTEGRATION CHANGE 
main{
   margin-left: 4.4rem;
 margin-right: 4.4rem;
}
*/

/*.container-fix {
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
}
*/
/*.breadcrumb{
    margin-left: 9.5rem;
    margin-bottom: 1.5rem;
    width: 80%;
}*/
.mobile-nav{
 display:none!important;
}

.breadcrumb-options {
  display: flex;
}
.breadcrumb-options li{
  margin-left: -1.75rem;
  list-style: none;
 }
.breadcrumb-options li:first-child {
    margin-left: 0;
}
 
 
#cover-up {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 10000;
    opacity: 0.35;
} 
 
#loading {
    position: fixed;
    top:0;
    width: 100%;
    height: 100vh;
    background: #fff url('https://jewelety.com/gated/assets/images/loading.gif') no-repeat center center;
    z-index: 100000000000000;
} 
 
#step-title{
  font-size: 2.5rem;
  text-align: center;
  margin: 30px 0;
}
#step-title p {
   display:inline
   color: var(--brown1);
}
#ring-title, #ring-titlen {
  text-align:center;
  font-family: Cormorant;
  font-size: 3rem;
}
#setting-price-title, ##setting-price-titler{
  font-size: 1.25rem;
  font-family: Cormorant;
}
#previousBtn{
  color: #000;
  font-size: 15px;
  height: 3.5rem;
  width: 16.25rem;
  background-color: rgba(195, 195, 195, 1);
    font-family: DM Sans, sans-serif;
  border-style:none;
  position: absolute;
  bottom: 1%;
}

#closeBtn{
  color: #000;
  font-size: 15px;
  height: 3.5rem;
  width: 16.25rem;
  background-color: var(grey2);
  font-family: DM Sans, sans-serif;
  border-style:none;
  position: absolute;
  bottom: 1%;
}

#ringBtn, #indexRingBtn{
  color: var(--white);
  font-size: 15px;
  height: 3.5rem;
  width: 16.25rem;
  background-color: #875829;
  font-family: 'DM Sans', sans-serif;
  border-style:none;
  position: absolute;
  bottom: 1%;
}

#checkoutBtn{
  color: var(--white);
  font-size: 15px;
  font-weight:bold;
  height: 3.5rem;
  width: 16.25rem;
  background-color: #875829;
  border-style:none;
  /* position: absolute;
  bottom: 1%; */
}
.setting-name{
  font-family: var(--font-heading-family);
  font-size: 20px;
    display: block;
}
#plat-note{
	
    font-family: 'Questrial', sans-serif;
}

/* Morgan changed */
.ring-setting-container, 
.stone-container , 
.ring-box-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(186px, auto));
  height: 100%;
  /*margin-bottom:5rem;  
  margin-top: 1.5rem;*/

  .card-name {
    
  }
}
.ring-box-container{
    max-width: 960px;
    margin: auto;
}
.card{
    /* width: 17.5rem; */
    /* height: 22.5rem; */
    display:flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
    padding: 1rem;
    position: relative;
    border: 1px solid transparent;
 }
.card:hover{
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);
 }
  #imageZoom{
    width: 2.75rem;
    font-size: 1.75rem;
    position: absolute;
    border-radius: 999px;
    right: 0;
    top: 1.25rem;
    right: 1.25rem;
    border: none;
    background: var(--gray2);
 }

.card-img img{
  /* width: 15.625rem;
  height: 15.625rem; */
  cursor: pointer;
}

.setting-gold-types{
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}
.card-price,.card-carat-weight,.card-dimensions{
    font-size: 12px;
    text-align:center;
}
 .modal-desc {
    display: flex;
    justify-content: space-between;
     flex-wrap: wrap;
   padding: 15px 0;
}

#white-gold-container { min-width: 100px; cursor: pointer; }
#yellow-gold-container {min-width: 100px; cursor: pointer; }
#rose-gold-container {min-width: 100px; cursor: pointer; }
.card-img{
/* position: absolute;
left: 8%;
top: 8%; */
}
.card-name{
  text-align:center;
}
#sm_img_container_side{
  display:flex;
  flex-direction: column;
}
#sm_img_container_side .thumb-img{
  width: 20rem;
  height: auto;
  margin-bottom: 1rem;
}
#big-side-image{
    margin-left: 1rem;
    margin-bottom: 1rem;
 }
#bg-sideImg{
     /* width: 23rem;
    height: 23rem */
  width: 90%;
  height: auto;
}

#setting-images{
  display:flex;
}

#ring-detailed-container {
  margin-top: 24px;
}
#ring-detailed-title{
  font-size: 16px;
    /* font-weight: bold;   */
}

#setting-images{
  justify-content: end;
    flex-direction: column;;
}
.ring-desc-container{
  display:flex;
  justify-content: center;
}
#ring-description-container{
  width: 32rem;
/*  margin-left: 4.2rem;*/
}
#gold-options-title, #metal-type-title, #ring-size-title, #custom-engraving-title {
  font-size: 16px;
}
#gold-type-options,#metal-type-options-container{
  /* margin-left: 4.2rem;*/
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  /*height: 8rem;*/
}
 #metal-type-options-container{
   /*height: 12.5rem;*/
}
#gold-type-options-container,#metal-type-options-row{
  display:flex;
  list-style-type: none;
}
#white-gold,#rose-gold,#yellow-gold{
  width: 3.5rem;
  height: 3.5rem;
/*   margin-left:0 !important; */
  margin-top: 1rem;
  border: 1px solid var(--brown1);
  border-radius: 999px;
}
.setting-rose-gold,.setting-yellow-gold,.setting-white-gold{
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--brown1);
  border-radius: 999px;
  cursor: pointer;
}

 .setting-rose-gold, .setting-yellow-gold{
    margin-right: 1rem;
 }   
#yellow-gold, .setting-yellow-gold{
   background-image: linear-gradient(to right, #F9E4AF , #EECB87,#F8D181);  
}
#rose-gold, .setting-rose-gold{
 background-image: linear-gradient(to right, #FFE8E5 , #F6CFCA, #EABFB9);  
    
}
#white-gold, .setting-white-gold{
  background-image: linear-gradient(to right, #FAFAFA , #F7F7F7, #E7E6E2);     
}
.ring-desc-container{
   margin-top: 2rem;
   margin-bottom: 3.125rem;
 }

#gemstone-list,#shapeFilter,#carat-size{
  margin-top:1.5rem;
  margin-bottom: 1.5rem;
}
#gemstone-filter-container{
  display:none;
}
 #gemstone-list{
   display:flex;
  justify-content: space-evenly;  
}
label {
	font-family: 'DM Sans', sans-serif;
}
 #shapeFilter {
  width: 100%;
  background-color:var(--gray2);
}
 #shapeFilter ul{
  display: grid;
   border: 1px solid var(--gray2);
  background-color: #fff;
  text-align: center;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); 
  grid-auto-flow: column;
   overflow-x: auto;
 }

#stone-choices{
  text-align:center;
  font-family: Cormorant;
 }
#stone-choices-row {
  margin-top:1rem;
  display:flex;
  list-style:none;
  overflow-x: auto;
}

#stone-choices-row > li, #metal-type-options-row >li {
  padding: 8px;
  border: 1px  solid  var(--gray2);
  margin-right: 16px;
  /* box-shadow: 0px 3px 6px rgb(0 0 0 / 10%); */
  border-radius:2px;
  display: flex;
  align-items: center;
}    
#stone-choices-row > li:focus{
  background-color: var(--gray2);
}   
#stone-choices-row > li.active{
  background-color: var(--brown2);
  color: #fff;
}  

.shape-choice{
    /* background-color: var(--gray2); */
  border-radius: 2px;
  border-color: 1px solid var(--gray2);
  cursor: default;
}

#metal-type-options-row > li.selected,
#gold-type-options-container > li.selected {
    background-color: var(--gray2);
}
    
 #shape-icons > div > li > img {
    /* margin-top: 1rem; */
    width: 40px;
    height: 40px;
    /* padding: 0.5rem; */
 }

 #shape-title, #carat-title,#gemstone-title{
   font-size: 14px;
 }
 #carat-size{
   position: relative;
 }
 #min, #max {
    position: absolute;
    top: 2rem;
 }
 #min{
  left: 10px;
 }
 #max{
  right: 10px;
 }
 #progress {
  height: 5px;
  position: relative;
   background: var(--gray2);
  border-radius: 5px;
 }
 #progress #slider{
   height: 100%;
   position: absolute;
   border-radius: 5px;
    background: var(--brown1);
 }
 #carat-ranges{
   position:relative;
 }
 #carat-ranges input{
   position: absolute;
  width: 100%;
  height: 5px;
  top: -12px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
   border:none;
 }
    
input[type="range"]::-webkit-slider-thumb{
    height: 17px;
  width: 17px;
  border-radius: 50%;
   background:var(--brown1);
  pointer-events: auto;
  -webkit-appearance: none;
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
}
input[type="range"]::-moz-range-thumb{
    height: 17px;
  width: 17px;
  border: none;
  border-radius: 50%;
   background:var(--brown1);
  pointer-events: auto;
  -moz-appearance: none;
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
  
}


#filter-button{
    position: relative;
    display: block;
    /*left: 40%;*/
    margin: auto;
  	/*margin-top: 3rem;*/
    color: var(--white);
    font-size: 1.125rem;
    height: 3.5rem;
    width: 16.25rem;
    background-color: var(--brown2);
    border-style: none;
}
 #custom-engraving-container, #ring-size-container{
   /*margin-left:4.2rem ;*/
     margin-top: 1rem;
 }

.checkbox-container {
    display: inline-block
}   
 .checkbox-container input {
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
    
 .checkbox-container > .checkmark {
  position:absolute;
  height: 26px;
  width: 26px;
  background-color: var(--gray2);
   border-radius: 2px;
}
.checkbox-container:hover input ~ .checkmark {
  background-color: var(--brown3);
}

.checkbox-container input:checked ~ .checkmark {
  background-color:  var(--gray1);
}
.checkbox-container .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}    
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}
.checkbox-container .checkmark:after {
  left: 10px;
  top: 7px;
  width: 6px;
  height: 12px;
  border: solid var(--brown2);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#no-custom-engraving{
 margin-left:3rem
}    
#custom-engraving-text{
    width: 100%
  margin-top: 8px;
}
#custom-engraving-characters{
  margin-top:1rem
 }
 #info-button,#ring-size-info-button{
   width: 2rem;
   height: 2rem;
   font-size: 1.25rem;
   background: var(--gray2);
   border-radius:999px;
   color:var(--brown2);
   border:none;
   margin-left: 0.25rem;
 }
 #info-button{
    display: inline-block;
 }
 #ring-size-info-button{
    position: relative;
    left: 90%;
    bottom: 30px;
 }
/*.ring-desc-container { max-width: 1200px; margin: auto;margin-top:50px;margin-bottom:50px;}*/
 #custom-engraving-text {
	 padding: 10px 18px;    background-color: var(--gray2);
 }
 #info-modal-background,#ring-size-info-modal-background,#vela-modal-background,#img-modal-background{
      display: none; 
      position: fixed; 
      z-index: 99; 
/*       padding-top: 6rem;  */
      left: 0;
      top: 0;
      width: 100%; 
      height: 100%; 
      overflow: auto; 
      background-color: rgb(0,0,0); 
      background-color: rgba(0,0,0,0.4); 
   	  animation:modalAppear 0.5s ease-out forwards;

}
#info-dialog,#ring-size-info-dialog,#vela-info-dialog, .img-dialogs {
  width: 700px;
}
#info-dialog,#ring-size-info-dialog,#vela-info-dialog, #img-dialog{
/*   background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 60%;
  position: absolute;
  left: 18rem;
  top: 5rem;
  animation: moveModal 0.5s ease-out forwards; */
/*         width: 500px; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2em;
    background: white;
    border-radius: 10px;
 
}
#closeModal,#ring-closeModal,#vela-closeModal, #img-closeModal{
     float: right;
    font-size: 32px;
    position: absolute;
    right: 4px;
    top: -9px;
 }
#modal-title,#ring-size-modal-title,#vela-modal-title, #img-modal-title{
     font-size: 1.25rem;
    font-weight: 600;   
}
.setting-details-hr{
  margin: 16px 0!important;
  height: 0.01rem;
}
#14-karat { font-family: Questrial,sans-serif; }
#18-karat { font-family: Questrial,sans-serif; }
#platinum { font-family: Questrial,sans-serif; }
 #yellow-gold-title,#rose-gold-title,#white-gold-title{
     /* display: none; */
	 /* font-family: Questrial,sans-serif; */
 }
  #white-gold:hover + #white-gold-title{
     display: block;
  } 
  #rose-gold:hover + #rose-gold-title{
     display: block;
  } 
  #yellow-gold:hover + #yellow-gold-title{
     display: block;
  } 
 
  #ring-size-dropdown{
	margin-top:1rem;
    display: block;
    width: 55%;
    text-align: center;
    border: 1px solid var(--brown3);
   }
  #ring-overview-container{
    margin-left: 6rem;
    margin-bottom: 9.125rem;
  }
  #settting-overview-container,#stone-overview-container,#box-overview-container{
    display:flex;
  }
    
 #setting-img,#stone-img,#box-img,#stone-one-img,#stone-two-img{
     width: 15.625rem;
     height: 15.625rem;
   	 margin-top: 2rem;
 }
 #setting-desc-container,#stone-desc-container,#box-desc-container,#stone-one-desc,#stone-two-desc{
      width: 50%;
      margin-left: 3rem;
 }
#box-desc,#stone-desc,#setting-desc,#stone-one-desc,#stone-two-desc{
    font-size: 14px;
    /* font-family: 'Cormorant', sans-serif; */
}
#stone-one-container,#stone-two-container,#stones-container{
	display:flex;
}
#stones-container{
   flex-direction: column; 
} 
/*changes to pagination js css*/
#pagination{
    margin-bottom: 7rem;
    margin-left: 30rem;
}

/* Morgan added*/
.pagination-wrapper {
  margin: 50px 0;
}

.pagination__list {
  display: flex;
  justify-content: center;

  span, a {
    padding: 12px;
    display: inline-block;
  }
}


#showDesc {
/*  display:none; */
}


.light-theme a{
  background: #F3F0EB;
 }
 #total-price {
    position: relative;
    margin: auto;
    margin-top: 50px;
    padding: 20px;
    background-color: #3A342E;
    border: 1px solid #3A342E;
    min-height: 70px;
    font-size:1.5rem;
   margin-bottom: 100px;
}
 /* animations */
@keyframes modalAppear{ 
  from {
   opacity: 0;
  }
  to {
   opacity: 1
  }
}
@keyframes moveModal{ 
  from {
   top: 5rem;
  }
  to {
   top: 6rem;
  }
}

@media only screen and (min-width: 320px) and (max-width: 767px){
.absolute.z-10.mt-10.block.w-full.mx-auto.lg\:hidden.bgToggle.colors nav {
    background: #FFF;
}
  /* nav {
     background-color: var(--brown2); 
  } */
  /* .mobile-nav{
    position: fixed;
    top: 87px;
    width: 100%;
    z-index: 2;
    left:0;
  }
  .mobile-nav, .mobile-nav-options, .breadcrumb-options {
  display:flex;
  width: 100%;
    justify-content: space-between;
    background: #f3f0eb;
    align-items: center;
 }
 .breadcrumb{
    display:none;
  }
  .mobile-nav-options li{
    background-color: var(--gray2);
    padding: 14px;
  }
  #ring-step-one, #ring-step-two, #ring-step-three, #ring-step-four, #ring-step-five{
    width:40px;
 } */
  .absolute.z-10.mt-10.block.w-full.mx-auto.lg\:hidden.bgToggle{margin:0 !important}
h1.questrial-font.text-white.text-center.px-8.text-5xl.md\:text-6xl.tracking-widest.mt-60.md\:mt-96.lg\:mt-80{margin-top: 15rem !important;}
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .absolute.z-10.mt-10.block.w-full.mx-auto.lg\:hidden.bgToggle{position: relative !important;}
  h1.questrial-font.text-white.text-center.px-8.text-5xl.md\:text-6xl.tracking-widest.mt-60.md\:mt-96.lg\:mt-80{margin-top: 15rem !important;}
}

 /*Mobile repsonsive*/
@media only screen and (min-width: 320px) and (max-width: 480px) {

  .main-content {
    padding:0 15px;
    margin:0;
  }
  
/*.ring-setting-container, .stone-container, .ring-box-container {
    margin-bottom: 7rem;
}*/
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
  
  

  
 
#step-title {
    margin-top: 2rem;
}
  .text-4xl {
    /* font-size: 1.5rem !important; */
    line-height: 1.5rem !important;
}
 
  #indexRingBtn {
    left: 20%;
    width: 60%;
 }   
 
  #info-dialog, #ring-size-info-dialog, #vela-info-dialog {
/*       left: 5rem; */

  }
  #info-dialog, #ring-size-info-dialog, #vela-info-dialog,  .img-dialog{width:300px;}
  #sm_img_container_side {
    
  }
  
  #setting-left-col,#setting-right-col{
     margin:0 !important;
  }
 #big-side-image {
    margin-bottom: 1rem;
}
 #setting-images {
    margin-left: 1.5em;
}
 #bg-sideImg {
max-width: 100%;
    height: auto;
    width: 100%;
 }
 #ring-description-container {
    margin-left: 0;
}
  #ring-description {
    /* font-size: 1rem; */
    width: 95%;
  }
  #gold-options-title, #gemstone-title
  #metal-type-title,#custom-engraving-title, 
  #ring-size-title,.checkbox-container, 
  #custom-engraving-characters, #shape-title, #carat-title {
    /*margin-left: 1rem;*/
  }
/*   #gold-type-options-container {
    margin-left: 2rem;
   }*/

  
  #metal-type-options-container p {
        margin-left: 0rem;
  }

/* #metal-type-options-container p {
    margin-left: 1.5rem;
}*/
/* #metal-type-options-row {
    margin-left: 2.5rem;
}*/

  #ring-size-dropdown {
    width: 100%;
    /*margin-left: 2rem;*/
  }
  #custom-engraving-container{
    margin-bottom: 2rem;
   }
  #custom-engraving-text {
    width: 95%;
  }
  #previousBtn {
    left: 20%;
    width: 60%;
    margin-bottom:1.5rem;
   }
 #closeBtn {
    left: 20%;
    width: 60%;
    margin-bottom:1.5rem;
   }

 #ringBtn, #checkoutBtn {
    left: 20%;
    width: 60%;
    /*margin-bottom: 6rem; Webteam*/
  }
  /*#filter-button {
    width: 60%;
    left: 22%;
  }*/
  #shapeFilter ul {
   /* flex-wrap:wrap; */
    /*margin-left: 1rem; webteam*/
  }
  #shape-icons div {
   flex:22%;
  }
  #max,#min {
    width: 25%;
    margin-top:1rem;
}
  #max{
  margin-right:1rem;
 }
  #min{
  margin-left:1rem;
 }
  #progress {
    margin-top: 1rem;
}
  .stone-container{
    margin-bottom: 2rem;
  }
  #pagination{
      margin-left: 2rem;
  }
  #pagination ul{
    margin-bottom: 15rem;
  }
  #ring-overview-container {
    margin:0;
  }
 
  #settting-overview-container, #stone-overview-container, #box-overview-container {
    display: flex;
    flex-direction: column;
    text-align: center;
 }
  #gemstone-list {
    display:flex;
    margin-left: 1rem;
    flex-wrap: wrap;
 }
  #gemstone-list div {
  	flex: 25%
  }
  #gemstone-list div label {
      margin-bottom: 0.5rem;
  }
  #setting-desc-container, #stone-desc-container, #box-desc-container, #stone-one-desc, #stone-two-desc {
   width: 100%;
    margin: 0;
  }
  .ring-box-container{
    margin-left:1rem;
  }
 #box-overview-container {
    margin-bottom: 2rem;
 }
  #total-price {
    margin-top: 1rem !important;
    margin-bottom: 1rem;
  }
  #showDesc {
    display:inline-block;
    border: none;
    color: var(--brown2);
    border-radius: 10px;
    width: 8rem;
    height: 2rem;
    background-color: var(--gray2)
 }
  #setting-img, #stone-img, #box-img, #stone-one-img, #stone-two-img {
     /* margin-left: 4rem; */
    margin-bottom: 1rem;
  }
}

    
@media only screen and (min-width: 481px) and (max-width: 920px){
/*   .breadcrumb {
    margin-left: 7rem;
    transform: scale(1.1);
  } 
  .breadcrumb-options li {
    margin-left: -1rem;
} */
  #indexRingBtn {
    left: 35%;
  }
/* .ring-setting-container, .stone-container, .ring-box-container {
    margin-block: 6rem;
}*/   

    #setting-left-col{
    margin:0 !important;
  }
/*  #setting-images {
    flex-direction: column-reverse;
    margin-bottom: 2rem;
    margin-left:4.2rem;
 }*/

 /* #ring-detailed-container {
     margin-bottom: 3rem;
  }*/
/*  #ring-detailed-container {
    margin-left: 4.2rem;
}*/
 #ring-detailed-title {
    margin-left: 0rem;
    margin-right: 1rem;
    display: inline-block;
  }
  #ring-description {
    width: 100%;
    text-align: left;
}

  #previousBtn{
    left: 20%;
  }
   #closeBtn{
    left: 20%;
  }
  #ringBtn,#checkoutBtn,#previousBtn,#closeBtn{
  bottom: 1%;
  }
  #ring-size-info-button {
  bottom: 5.5rem;
  }
  #sm_img_container_side {
    flex-direction: row;
        /*margin-left: 6rem;*/
  }
  #shape-icons{
    flex-wrap: wrap;
    list-style-type: none;
  }
  #shape-icons div {
      flex: 25%;
  }
  #pagination {
    margin-bottom: 9rem;
    margin-left: 9rem;
  }
  #ring-overview-container {
     margin-bottom: 5rem;
  }
  #total-price{
    margin-bottom: 6rem;
  }
  
  #price{
      font-size: 1.5rem;
  }
  /*#filter-button {
    left: 30%;
    margin-top: 6rem;
  }*/

#showDesc {
    display:inline-block;
    border: none;
    color: var(--brown2);
    border-radius: 10px;
    width: 3rem;
    height: 2rem;
 }
  #settting-overview-container, #stone-overview-container, #box-overview-container{
      margin-left: 2rem;
  }
}

.main-content {
    max-width: 1200px;
    margin:auto;
    padding: 0 15px;
}


@media (min-width: 1536px)
.main-content {
    max-width: 1536px;
}
@media (min-width: 1280px)
.main-content {
    max-width: 1280px;
}
@media (min-width: 1024px)
.main-content {
    max-width: 1024px;
}
@media (min-width: 768px)
.main-content {
    max-width: 768px;
}
@media (min-width: 640px)
.main-content {
    max-width: 640px;
}


/* Web Team 22-06-22  */

.ring-overview-button a {
    text-decoration: none;
}
.ring-overview-button button {
    position: inherit !important;
    width: 200px !important;
}

.ring-overview-button {
/*     display: flex;
    flex-wrap: wrap; */
    width: 100%;
  text-align:center;
    justify-content: center;
    gap: 0 100px;
    padding: 15px 0 25px 0;
    flex-direction: row;
    display: flex;
  gap: 16px;
}

#pagination{margin-bottom: 0 !important;}

@media only screen and (min-width: 320px) and (max-width: 499px) {

.ring-overview-button{
  gap: 15px 14px;
    flex-direction: row;
    display: flex;
}
.ring-overview-button button {
    position: inherit !important;
    width: 156px !important;
}
#setting-images {flex-direction: column-reverse;}
}
    
#loader {  
    position: fixed;  
    left: 0px;  
    top: 0px;  
    width: 100%;  
    height: 100%;  
    z-index: 9999;  
    background: url('https://jewelety.com/gated/assets/images/loading.gif') 50% 50% no-repeat rgb(249,249,249);  
}

.ring-over-gif {
    background: #e1e1e14f;
    width: 100%;
    height: 100%;
    position: fixed;
    content: '';
    top: 0;
    z-index: 999;
}
.ring-over-gif img {
    margin: auto;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: absolute;
}

/*     Read more btn Hover Color */
.ring-desc-container div#ring-detailed-container button#showDesc:hover {
    text-decoration-color: #b8c2bb !important;    
  	color: #b8c2bb !important;
}
.ring-desc-container div#ring-detailed-container button#showDesc {
    text-decoration: underline;
}
/*     Read more btn Hover Color */
@media only screen and (min-width: 576px) and (max-width: 767px) {
  #info-dialog, #ring-size-info-dialog, #vela-info-dialog, .img-dialogs {
    width: 500px;
}
  #closeBtn {
    margin: 15px 0;
  }
  .modal-desc div {
    flex: 50%;
}
}
@media only screen and (min-width: 320px) and (max-width: 575px) {
  #info-dialog, #ring-size-info-dialog, #vela-info-dialog, .img-dialogs {
    width: 365px;
}
  .modal-desc div {
    flex: 100%;
}
/*   #closeBtn {
    margin: 15px 0;
  } */
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
 #gemstone-filter-container #gemstone-list{
   display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
}
   #gemstone-filter-container #gemstone-list div{
     flex:0 50%;
   }
  #ring-detailed-container, #ring-description-container, #gold-type-options, #metal-type-options-container, #custom-engraving-container, #ring-size-container, #setting-images, 
  #sm_img_container_side {
    margin: 20px 0;
}
  #stone-choices-row > li, #metal-type-options-row >li {
    margin: 0px 4px;
    font-size: 14px;
    line-height: 130%;
    border-radius:2px;
}
}

/* #ring-detailed-container p, p#ring-description span, #ring-detailed-container a {
    font-family: Didot !important;
    font-style: italic;
    font-weight: 300;
} */
/* .button-new-read a{text-decoration:none !important;color: #000 !important;}
body #ring-detailed-container button#showDesc.button-new-read:hover, 
#ring-detailed-container .button-new-read:hover{color: #000 !important;}
.button-new-read{    
 width: 200px !important;
    color: #000 !important;
    font-size: 1.125rem;
    height: 3.5rem !important;
    background-color: rgba(195, 195, 195, 1) !important;
    border-radius: 0 !important;
    margin-top: 10px;
} */

div#ring-description-container.mobile-show {
    padding: 0 !important;
    margin-bottom: 15px !important;
}

button#showDesc.button-new-read {
    width: 100%;
    text-align: left;
}

.mobile-show{display: none;}

@media (max-width: 920px){
.mobile-show{display: block;} 
.desktop-show{display: none;} 
.ring-desc-container {margin-top:0px !important;grid-auto-flow: inherit;}
#sm_img_container_side {overflow: scroll !important;flex-direction: row;}
#sm_img_container_side img{padding: 0 10px 0 0px;}
.inner-width-image {
    display: flex;
    flex-direction: column-reverse;
}
  .arrow-pro{display:none}
#setting-images {
    justify-content: center;
    flex-direction: row;
}
  div#sm_img_container_side{height:auto !important;}
}


@media (min-width: 920px) and (max-width: 1200px){
#sm_img_container_side img {
    width: 5rem;
    height: auto !important;
    margin-bottom: 0.25rem;
}
}

@media (min-width: 768px) and (max-width: 1100px){
  #setting-left-col{margin-left: 0 !important;}
}

@media (min-width: 921px) and (max-width: 1023px){
  div#sm_img_container_side {
    height: 336px !important;
}
  
.arrow-pro{width: 50px !important;}
  
.arrow-pro button {
    width: 30px !important;
    height: 30px  !important;
}
.inner-width-image svg {
    width: 30px  !important;
    height: 30px  !important;
}
}


#setting-left-col {
margin-left: 4.2rem;
    display: flex;
    flex-direction: column;
    margin-right: 4.2rem;
}


.inner-width-image {
    display: flex;
  position: relative;
}

.button-new-read {
    background: none !important;
}

.ring-desc-container #ring-detailed-container p#ring-description span, .ring-desc-container #ring-detailed-container p#ring-description {
    /* font-family: 'Questrial', sans-serif !important; */
    /* font-style: initial; */
}

div#sm_img_container_side {
    height:550px;
    overflow: hidden;
  position:relative;
}


.arrow-pro {
    position: absolute;
    z-index: 9;
    width: 8rem;
    margin: auto;
    text-align: center;
}
.prev-icon-arrow.arrow-pro {top: -36px;}
.next-icon-arrow.arrow-pro{bottom:0px}

.arrow-pro button {
    width:40px;
    height:40px;
    font-size: 0;
    background: transparent;
  border: none;
}
.inner-width-image svg {
    width: 40px;
    height:40px;
    fill: #bcae9b;
}

small.text-center.note-ring {
    display: block;
    font-size: 14px;
}