.diamond-page {
margin-top: 50px;
margin-bottom: 115px;
}
.diamond-page .search-gp {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 47px;
}
.dropdown-gp {
display: flex;
}
.rs-container {
text-align: left;
}
.dropdown-gp li {
font-size: 16px;
position: relative;
font-weight: 400;
font-family: var(--font3);
color: var(--primary-color);
text-align: center;
letter-spacing: -0.5px;
margin-right: 21px;
}
.dropdown-gp li a {
width: 110px;
border: 1px solid var(--primary-color);
display: inline-block;
padding: 8px 36px 8px 7px;
}
.dropdown-gp li a span {
position: relative;
}
.dropdown-gp li:last-child {
margin-right: 0;
}
.dropdown-gp li a span::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
top: 50%;
right: -28px;
transform: translateY(-50%);
background: url(//sumonthazinpann.com/wp-content/themes/diamondempire/assets/img/ico_down.png) no-repeat center/cover;
}
.dropdown-gp li a.active-filter span:after{
filter: brightness(0) invert(1);
}
.diamond-page .filter-list {
position: absolute;
top: 60px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
border-radius: 4px;
padding: 24px 50px 50px;
background-color: #fff;
display: none;
width: 323px;
z-index: 100;
}
.diamond-page .filter-list.active {
display: block;
}
.diamond-page .active-filter {
background-color: var(--btn-color);
color: var(--white);
}
.diamond-page .fliter-content {
display: flex;
}
.diamond-page .clear {
font-size: 16px;
color: #E52317;
font-weight: 400;
font-family: var(--font3);
letter-spacing: 0.3px;
text-decoration: underline;
cursor: pointer;
}
.diamond-page .diamond-list {
padding: 27px 0 14px;
}
.diamond-page .diamond-list li {
margin-bottom: 47px;
}
.diamond-page .check-gp {
display: block;
margin-bottom: 25px;
}
.diamond-page .check-gp:last-child{
margin-bottom: 0;
}
.diamond-page .check-gp input {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.diamond-page .check-gp label {
position: relative;
cursor: pointer;
text-align: left;
width: 100%;
display: block;
letter-spacing: 0.3px;
font-size: 16px;
font-weight: 400;
font-family: var(--font3);
}
.diamond-page .filter-list.stock,.diamond-page .filter-list.clarity,.diamond-page .filter-list.cut{
width: 176px;
padding: 22px 13px 24px;
}
.diamond-page .dropdown-gp .filter-list.stock li{
text-align: left;
}
.diamond-page .check-gp label::after {
content: '';
-webkit-appearance: none;
background-color: transparent;
border: 2px solid var(--black);
width: 13px;
height: 12px;
position: absolute;
right: -19px;
vertical-align: middle;
top: 2px;
}
.check-gp input:checked + label::before {
content: '';
display: block;
position: absolute;
top: 4px;
right: -14px;
width: 3px;
height: 7px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
background-color: var(--primary-color);
z-index: 11;
}
.diamond-page .filter-list.shaped{
width: 195px;
}
.diamond-page .check-gp label span img{
width: 18px;
margin-right: 10px;
}
.check-gp input:checked + label::after{
background-color: var(--primary-color);
}
.diamond-page .filter-list li.check-gp{
margin-right: 21px;
}
.diamond-page .filter-list li.check-gp:last-child{
margin-bottom: 0;
}
.slider-container {
width: 100%;
height: 44px; margin: 0 auto;
cursor: pointer;
}
.carat.filter-list {
width: 320px;
}
.carat .slider-container,
.price .slider-container {
top: 46px;
position: relative;
}
.carat .rs-tooltip,
.size .rs-tooltip,
.price .rs-tooltip{
top: -18px;
background-color: #F9F9F9;
border: 1px solid #E6E6E6;
border-radius: 2px;
min-width: 110px;
color: #1B0700;
font-size: 14px;
font-family: var(--font2);
}
.carat .rs-tooltip span,
.price .rs-tooltip span {
color: #73787E;
padding-left: 10px;
}
.color .rs-container .rs-pointer,
.carat .rs-container .rs-pointer,
.price .rs-container .rs-pointer,
.advance-filter-list-gp .rs-container .rs-pointer{
border: 1px solid var(--primary-color);
background-color: var(--primary-color);
border-radius: 50%;
top: 2px;
width: 13px;
height: 13px;
box-shadow: unset;
}
.color .rs-container .rs-pointer::before,
.color .rs-container .rs-pointer::after,
.carat .rs-container .rs-pointer::before,
.carat .rs-container .rs-pointer::after,
.price .rs-container .rs-pointer::before,
.price .rs-container .rs-pointer::after,
.advance-filter-list-gp .rs-container .rs-pointer::before,
.advance-filter-list-gp .rs-container .rs-pointer::after{
content: none;
}
.color .rs-container .rs-selected,
.carat .rs-container .rs-selected,
.price .rs-container .rs-selected,
.advance-filter-list-gp .rs-container .rs-selected{
background-color: var(--primary-color);
border: 1px solid transparent;
transition: all .2s linear;
} .carat .rs-container .rs-scale span::before,
.price .rs-container .rs-scale span::before{
content: none;
}
.color.filter-list {
padding: 40px 20px 0;
width: 816px;
}
.color .rs-container .rs-scale span ins {
position: relative;
top: -28px;
margin-top: 0;
font-family: var(--font2);
color: var(--primary-color);
}
.advance-filter{
margin-bottom: 44px;
}
.advance-filter-list{
display: none;
}
.advance-filter-list.active{
display: block;
}
.advance-filter-list-gp{
display: flex;
margin-top: -7px;
justify-content: space-between;
margin-bottom: 30px;
}
.advance-filter-touch span{
text-align: center;
display: inline-block;
font-size: 16px;
font-weight: 400;
font-family: var(--font3);
color: var(--primary-color);
letter-spacing: 0.5px;
position: relative;
z-index: 99;
padding-right: 25px;
cursor: pointer;
}
.advance-filter-touch span::after, .advance-filter-touch span::before {
content: "";
position: absolute;
background-color: var(--black);
}
.advance-filter-touch span::before {
top: 4px;
right: 10px;
width: 2px;
height: 12px;
}
.diamond-filter .dropdown-gp .filter-ttl::before{
top: 61%;
}
.advance-filter-touch span::after {
top: 48%;
right: 5px;
width: 13px;
height: 2px;
}
.advance-filter-touch.active span:before{
background-color: transparent;
}
.advance-filter-touch{
position: relative;
z-index: 99;
text-align: center;
}
.advance-filter-touch::before,.advance-filter-touch::after{
width: 43%;
height: 1px;
content: "";
position: absolute;
top: 50%;
background-color: #BDC0CD;
}
.advance-filter-touch::before{
left: 0;
}
.advance-filter-touch::after{
right: 0;
}
.page-id-276 .advance-filter-list-gp,.page-id-278 .advance-filter-list-gp{
justify-content: flex-start;
}
.page-id-276 .advance-filter-detail,.page-id-278 .advance-filter-detail{
margin-right: 3%;
}
.advance-filter .advance-filter-detail{
width: 30%;
}
.advance-filter-list-gp .slider-container{
width: 100%;
}
.advance-filter-list-gp .advance-filter-label{
font-size: 14px;
font-family: var(--font2);
font-weight: 400;
color: var(--black);
letter-spacing: 0.5px;
}
.advance-filter-list-gp .rs-container .rs-scale span ins {
position: relative;
top: -28px;
margin-top: 0; font-size: 12px;
font-family: var(--font2);
color: var(--primary-color);
}
.advance-filter-list-gp .rs-container{
margin-top: 45px;
}
.advance-filter-list-gp .rs-container .rs-pointer{
border: 1px solid var(--primary-color);
background-color: var(--primary-color);
border-radius: 50%;
top: 2px;
width: 13px;
height: 13px;
box-shadow: unset;
} @media only screen and (min-width:768px) and (max-width:1280px) {
.diamond-page {
margin-top: 3.906vw;
margin-bottom: 8.984vw;
}
.diamond-page .search-gp {
padding-bottom: 3.672vw;
}
.diamond-page .dropdown-gp li {
font-size: 1.25vw;
letter-spacing: -0.039vw;
margin-right: 1.641vw;
}
.diamond-page .dropdown-gp li a {
width: 8.594vw;
padding: 0.625vw 2.813vw 0.625vw 0.547vw;
}
.diamond-page .dropdown-gp li a span::after {
width: 1.563vw;
height: 1.563vw;
right: -2.188vw;
}
.diamond-page .filter-list {
top: 4.688vw;
border-radius: 0.313vw;
padding: 1.875vw 5.563vw 3.906vw;
width: 37.234vw;
z-index: 100;
}
.diamond-page .clear {
font-size: 1.25vw;
letter-spacing: 0.023vw;
}
.diamond-page .diamond-list {
padding: 2.109vw 0 1.094vw;
}
.diamond-page .diamond-list li {
margin-bottom: 3.672vw;
}
.diamond-page .check-gp {
margin-bottom: 1.953vw;
}
.diamond-page .check-gp label {
letter-spacing: 0.023vw;
font-size: 1.25vw;
}
.diamond-page .filter-list.stock,.diamond-page .filter-list.clarity,.diamond-page .filter-list.cut{
width: 13.75vw;
padding: 1.719vw 1.016vw 1.875vw;
}
.diamond-page .check-gp label::after {
width: 1.016vw;
height: 0.938vw;
right: -1.484vw;
top: 0.156vw;
}
.check-gp input:checked + label::before {
top: 0.313vw;
right: -1.094vw;
width: 0.234vw;
height: 0.547vw;
}
.diamond-page .filter-list.shaped{
width: 15.234vw;
}
.diamond-page .check-gp label span img{
width: 1.406vw;
margin-right: 0.781vw;
}
.diamond-page .filter-list li.check-gp{
margin-right: 1.641vw;
}
.diamond-page .filter-list li.check-gp:last-child{
margin-bottom: 0;
}  .carat .slider-container,
.price .slider-container {
top: 3.594vw;
position: relative;
}
.carat .rs-tooltip,
.size .rs-tooltip,
.price .rs-tooltip{
top: 1.406vw;
min-width: 8.594vw;
font-size: 1.094vw;
}
.carat .rs-tooltip span,
.price .rs-tooltip span {
padding-left: 0.781vw;
}
.advance-filter .advance-filter-detail {
width: 32%;
}
.color.filter-list {
padding: 3.125vw 1.563vw 0;
width: 48.672vw;
}
.color .rs-container .rs-scale span ins {
top: -2.188vw;
}
.advance-filter{
margin-bottom: 3.438vw;
}
.advance-filter-list-gp{
margin-top: -0.547vw;
margin-bottom: 2.344vw;
}
.advance-filter-touch span{
font-size: 1.25vw;
padding-right: 1.953vw;
cursor: pointer;
}
.advance-filter-touch span::before {
top: 0.313vw;
right: 0.781vw;
width: 0.156vw;
height: 0.938vw;
}
.advance-filter-touch span::after {
right: 0.391vw;
width: 1.016vw;
height: 0.156vw;
}
.advance-filter-list-gp .advance-filter-label{
font-size: 1.094vw;
letter-spacing: 0.039vw;
}
.advance-filter-list-gp .rs-container .rs-scale span ins { font-size: 0.938vw;
}
.advance-filter-list-gp .rs-container{
margin-top: 3.516vw;
}
}
@media all and (max-width:767.9px) {
.diamond-page {
margin-top: 13.333vw;
margin-bottom: 30.667vw;
}
.diamond-page .search-gp {
padding-bottom: 12.533vw;
}
.diamond-page .dropdown-gp {
display: none;
}
.diamond-page .dropdown-gp li a{
text-align: left;
padding: 28.999px 16.999px 14.501px 14.25px;
}
.dropdown-gp li a {
width: 100%;
border: 0.267vw solid transparent;
}
.diamond-page .dropdown-gp li a span {
letter-spacing: -0.24vw;
font-size: 4.8vw;
}
.dropdown-gp li a span::after,
.filter-option .dropdown-gp a:after {
content: none;
}
.diamond-page .filter-list {
position: relative;
top: unset;
box-shadow: unset;
border-radius: unset;
padding: 1.6vw 4.267vw 4.8vw;
background-color: unset;
display: block;
width: 100%;
z-index: 100;
}
.diamond-page .filter-list.active {
display: block;
}
.diamond-page .fliter-content {
display: flex;
}
.diamond-page .clear {
font-size: 4.267vw;
color: #E52317;
font-weight: 400;
font-family: var(--font3);
letter-spacing: 0.08vw;
text-decoration: underline;
}
.diamond-page .diamond-list {
padding: 7.2vw 0 3.733vw;
}
.diamond-page .diamond-list li {
margin-bottom: 12.533vw;
}
.diamond-page .check-gp {
margin-bottom: 5.6vw;
}
.diamond-page .check-gp:last-child{
margin-bottom: 0;
}
.diamond-page .check-gp label {
position: relative;
cursor: pointer;
text-align: left;
width: 100%;
display: block;
letter-spacing: 0.08vw;
font-size: 4.267vw;
font-weight: 400;
font-family: var(--font3);
}
.diamond-page .filter-list.stock,.diamond-page .filter-list.clarity,.diamond-page .filter-list.cut{
width: 100%;
padding: 1.6vw 4.267vw 4.8vw;
}
.diamond-page .dropdown-gp .filter-list.stock li{
text-align: left;
}
.diamond-page .check-gp label::after {
border: 0.533vw solid var(--black);
width: 3.467vw;
height: 3.2vw;
right: -5.067vw;
top: 0.533vw;
}
.check-gp input:checked + label::before {
top: 1.067vw;
right: -3.733vw;
width: 0.8vw;
height: 1.867vw;
border: solid #fff;
border-width: 0 0.533vw 0.533vw 0;
}
.diamond-page .filter-list.shaped{
width: 100%;
}
.diamond-page .check-gp label span img{
width: 4.8vw;
margin-right: 2.667vw;
}
.check-gp input:checked + label::after{
background-color: var(--primary-color);
}
.diamond-page .filter-list li.check-gp{
padding-right:  5.6vw;
margin-right: 0;
}
.diamond-page .filter-list li.check-gp:last-child{
margin-bottom: 0;
}
.diamond-page .filter-list.clarity li, .diamond-page .filter-list.cut li{
border-bottom: 0.267vw solid transparent;
}
.slider-container {
width: 100%;
height: 44px;
max-width: unset;
}
.carat.filter-list {
padding: 1.6vw 4.267vw 10.667vw;
width: 100%;
}
.price.filter-list{
padding: 1.6vw 4.267vw 10.667vw; 
}
.carat .slider-container,
.price .slider-container {
top: 12.267vw;
position: relative;
}
.carat .rs-tooltip,
.size .rs-tooltip,
.price .rs-tooltip{
top: -4.8vw;
background-color: #F9F9F9;
border: 0.267vw solid #E6E6E6;
border-radius: 0.533vw;
min-width: 110px;
color: #1B0700;
font-size: 3.733vw;
font-family: var(--font2);
}
.carat .rs-tooltip span,
.price .rs-tooltip span {
color: #73787E;
padding-left: 2.667vw;
}
.color .rs-container .rs-pointer,
.carat .rs-container .rs-pointer,
.price .rs-container .rs-pointer,
.advance-filter-list-gp .rs-container .rs-pointer{
border: 1px solid var(--primary-color);
background-color: var(--primary-color);
border-radius: 50%;
top: 2px;
width: 13px;
height: 13px;
box-shadow: unset;
}
.color .rs-container .rs-pointer::before,
.color .rs-container .rs-pointer::after,
.carat .rs-container .rs-pointer::before,
.carat .rs-container .rs-pointer::after,
.price .rs-container .rs-pointer::before,
.price .rs-container .rs-pointer::after,
.advance-filter-list-gp .rs-container .rs-pointer::before,
.advance-filter-list-gp .rs-container .rs-pointer::after{
content: none;
}
.color .rs-container .rs-selected,
.carat .rs-container .rs-selected,
.price .rs-container .rs-selected,
.advance-filter-list-gp .rs-container .rs-selected{
background-color: var(--primary-color);
border: 1px solid transparent;
transition: all .2s linear;
} .carat .rs-container .rs-scale span::before,
.price .rs-container .rs-scale span::before{
content: none;
}
.color.filter-list {
padding: 10.667vw 5.333vw 0;
width: 100%;
}
.color .rs-container .rs-scale span ins {
position: relative;
top: -28px;
margin-top: 0;
font-family: var(--font2);
color: var(--primary-color);
}
.advance-filter{
margin-bottom: 11.733vw;
}
.advance-filter-list{
display: none;
}
.advance-filter-list.active{
display: block;
}
.advance-filter-list-gp{
display: block;
margin-top: 0;
margin-bottom: 8vw;
}
.advance-filter-detail{
padding: 7.733vw 4.533vw 3.867vw 3.8vw;
border-bottom: 1px solid #EAEBED;
}
.diamond-page .filter-option li.btn-gp a {
padding: 2.133vw 6.4vw;
text-align: center;
}
.advance-filter-touch span{
text-align: center;
display: inline-block;
font-size: 4.267vw;
font-weight: 400;
font-family: var(--font3);
color: var(--primary-color);
letter-spacing: 0.133vw;
position: relative;
z-index: 99;
padding-right: 6.667vw;
cursor: pointer;
}
.advance-filter-touch span::after, .advance-filter-touch span::before {
content: "";
position: absolute;
background-color: var(--black);
}
.advance-filter-touch span::before {
top: 4px;
right: 10px;
width: 2px;
height: 12px;
}
.advance-filter-touch span::after {
top: 48%;
right: 5px;
width: 13px;
height: 2px;
}
.advance-filter-touch.active span:before{
background-color: transparent;
}
.advance-filter-touch{
position: relative;
z-index: 99;
text-align: center;
}
.advance-filter-touch::before,.advance-filter-touch::after{
width: 43%;
height: 1px;
content: "";
position: absolute;
top: 50%;
background-color: #BDC0CD;
}
.advance-filter-touch::before{
left: 0;
}
.advance-filter-touch::after{
right: 0;
}
.advance-filter .advance-filter-detail{
width: 30%;
}
.advance-filter-list-gp .slider-container{
width: 100%;
}
.advance-filter-list-gp .advance-filter-label{
font-size: 4.8vw;
letter-spacing: 0.133vw;
display: block;
text-align: left;
}
.dropdown-gp li:last-child {
margin-right: 0;
}
.advance-filter-list-gp .rs-container .rs-scale span ins {
position: relative;
top: -7.467vw;
margin-top: 0; font-size: 1.8vw;
font-family: var(--font2);
color: var(--primary-color);
}
.advance-filter-list-gp .rs-container{
margin-top: 12vw;
}
.advance-filter-list-gp .rs-container .rs-pointer{
border: 1px solid var(--primary-color);
background-color: var(--primary-color);
border-radius: 50%;
top: 2px;
width: 13px;
height: 13px;
box-shadow: unset;
} }