/*Fonts*/
/*background*/
/*text Color*/
/*$box-shadow-light:($x-axis: 0, $y-axis: 1px, $blur: 2px, $color: $dark-gray-bg); */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
h1 {
  font-size: 38px;
  color: #000; }

h2 {
  font-size: 34px;
  color: #000; }

h3 {
  font-size: 30px;
  color: #000; }

h4 {
  font-size: 26px;
  color: #000; }

h5 {
  font-size: 22px;
  color: #000; }

h6 {
  font-size: 18px;
  color: #000; }

body {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  color: #7c7c7f;
  letter-spacing: 1px; }

.card {
  border: 0;
  background-color: #fff; }

.card-header {
  height: 40px;
  background-color: rgba(0, 0, 0, 0.1);
  Color: #000;
  font-weight: bold; }

.product_container {
  width: 100%;
  padding: 30px;
  background: #f5f5f5;
  display: flex;
  border: 0px solid;
  flex-direction: column; }

.product_title {
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.98px;
  margin: 12px 0 0 0; }

.metal_text {
  text-align: center;
  margin: 0 0 5px 0; }

.metal_icon {
  margin: 0 auto; }

.dual_tone {
  background: url("images/dual-tone.svg") no-repeat;
  background-position: center;
  display: inline-flex;
  margin: 0 3px;
  height: 26px;
  width: 26px; }

.yellow_gold {
  background: url("images/yellow-gold.svg") no-repeat;
  background-position: center;
  display: inline-flex;
  margin: 0 3px;
  height: 26px;
  width: 26px; }

.rose_gold {
  background: url("images/rose-gold.svg") no-repeat;
  background-position: center;
  display: inline-flex;
  margin: 0 3px;
  height: 26px;
  width: 26px; }

.white_gold {
  background: url("images/white-gold.svg") no-repeat;
  background-position: center;
  display: inline-flex;
  margin: 0 3px;
  height: 26px;
  width: 26px; }

.product_bg {
  background-color: #f6f6f6; }

.grey-text {
  font-family: OpenSans;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2;
  letter-spacing: 0.75px;
  color: #7c7c7f; }

body {
  font-size: 15px; }

.round_bg {
  width: 41px;
  height: 41px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  display: flex;
  align-items: center; }
  .round_bg.active {
    background: linear-gradient(to bottom, #e20044, #c00020); }

.shape {
  display: block;
  margin: auto;
  height: 100%;
  width: 100%;
  /*background: url('data:image/svg+xml;utf8,<svg xmlns= "http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">  <g fill="#696969" fill-rule="nonzero"> <path d="M209.996 425c-1.436 0-2.852.285-4.209.846-2.653 1.1-4.812 3.245-5.93 5.895l-.025.057c-1.11 2.675-1.11 5.742 0 8.416 1.71 4.122 5.714 6.786 10.2 6.786h.001c2.917 0 5.667-1.143 7.744-3.22 2.079-2.076 3.223-4.837 3.223-7.774 0-6.069-4.937-11.006-11.004-11.006zm9.561 15.256c-.437.982-1.02 1.884-1.735 2.689l-.192-3.487 1.927.798zm-17.397-1.298l-1.928.799c-.385-1.001-.611-2.051-.674-3.129l2.602 2.33zm.207.5l-.19 3.487c-.716-.803-1.299-1.706-1.738-2.69l1.928-.797zm-1.928-7.702c.44-.982 1.022-1.885 1.737-2.689l.191 3.487-1.928-.798zm1.721 1.298l-2.602 2.33c.063-1.078.289-2.128.674-3.128l1.928.798zm.896-4.866c.805-.715 1.707-1.298 2.69-1.735l.798 1.926-3.488-.191zm6.32-2.617l-2.332 2.601-.798-1.926c1.004-.385 2.055-.612 3.13-.675zm8.254 6.983l.192-3.487c.715.805 1.297 1.707 1.735 2.69l-1.927.797zm-4.03 7.938l-.727 2.45-2.246-1.22 2.973-1.23zm-4.223 5.95c-1.076-.063-2.127-.29-3.131-.676l.798-1.926 2.333 2.601zm-2.979-14.921l.727-2.45 2.247 1.219-2.974 1.23zm4.224-5.95c1.075.063 2.126.29 3.13.675l-.8 1.927-2.33-2.602zm-5.111 6.837l-1.232 2.97-1.22-2.245 2.452-.725zm-2.452 6.47l1.22-2.244 1.232 2.97-2.452-.725zm11.429-6.47l2.45.725-1.22 2.245-.748-1.806-.482-1.164zm.905 3.598l-1.58 3.812-3.814 1.579-3.814-1.58-1.58-3.81 1.58-3.813 3.814-1.579 3.814 1.579 1.217 2.936.363.876zm-.905 3.598l1.23-2.97 1.22 2.245-2.45.725zm2.596-6.992l-2.846-.843-.843-2.844 3.904-.214-.215 3.901zm-6.457-2.322l2.246-1.22.727 2.45-2.973-1.23zm-4.867 1.48l-2.848.842-.213-3.902 3.904.214-.843 2.845zm-2.848 7.63l2.848.843.843 2.846-3.904.213.213-3.902zm6.46 2.322l-2.247 1.22-.052-.175-.675-2.275 2.974 1.23zm4.866-1.48l2.846-.842.215 3.902-3.904-.213.843-2.846zm6.085-4.236l-2.912 2.607-1.417-2.607 1.417-2.607 2.912 2.607zm-6.87-7.627l.798-1.926c.983.437 1.886 1.02 2.69 1.735l-3.488.191zm-3.454 1.636c-1.655-.899-2.315-1.26-2.577-1.404l-.026-.02 2.603-2.903 2.609 2.911-2.609 1.416zm-5.995 5.991l-1.417 2.607-2.912-2.607 2.912-2.607 1.417 2.607zm2.538 7.632l-.796 1.92c-.982-.436-1.885-1.018-2.69-1.733 2.192-.12 3.031-.163 3.486-.187zm3.457-1.64l2.609 1.416-2.61 2.91-2.609-2.91 2.61-1.416zm2.954 1.842l.798 1.926c-1.004.386-2.054.613-3.13.675l2.332-2.6zm3.989-.016c-.804.715-1.707 1.298-2.69 1.735l-.799-1.926 3.489.191zm3.498-7.196c-.063 1.076-.29 2.126-.675 3.129l-1.332-.552-.596-.247 2.603-2.33zm-2.603-3.574l1.928-.798c.386 1.003.612 2.053.675 3.128l-2.603-2.33z" transform="translate(-199 -425)" /> </g> </svg >') no-repeat;*/
  /*background: url("data:image/svg+xml;utf8,<svg xmlns= 'http://www.w3.org/2000/svg' width='30' height='30'> <circle cx='15' cy='15' r='10' /></svg>")  no-repeat;*/ }

.round {
  background: url("images/round.svg") no-repeat;
  background-position: center; }

.round-white {
  background: url("images/round-white.svg") no-repeat;
  background-position: center; }

.princess {
  background: url("images/princess.svg") no-repeat;
  background-position: center; }

.princess-white {
  background: url("images/princess-white.svg") no-repeat;
  background-position: center; }

.oval {
  background: url("images/oval.svg") no-repeat;
  background-position: center; }

.oval-white {
  background: url("images/oval-white.svg") no-repeat;
  background-position: center; }

.emerald {
  background: url("images/emerald.svg") no-repeat;
  background-position: center; }

.emerald-white {
  background: url("images/emerald-white.svg") no-repeat;
  background-position: center; }

.pear {
  background: url("images/pear.svg") no-repeat;
  background-position: center; }

.pear-white {
  background: url("images/pear-white.svg") no-repeat;
  background-position: center; }

.heart {
  background: url("images/heart.svg") no-repeat;
  background-position: center; }

.heart-white {
  background: url("images/heart-white.svg") no-repeat;
  background-position: center; }

.marquise {
  background: url("images/marquise.svg") no-repeat;
  background-position: center; }

.marquise-white {
  background: url("images/marquise-white.svg") no-repeat;
  background-position: center; }

/*.noUi-handle {
    border-radius: 50%;
    background-color: $red-bg;
    border: 8px solid #fff;
    box-shadow: 0px 1px 1px 1px;
    cursor: default;
    outline: none;
}*/
.ui-state-default, .ui-widget-content .ui-state-default {
  border-radius: 50%;
  border: 5px solid #fff;
  background: #c00020;
  box-shadow: 0px 1px 1px 1px; }

/*.noUi-connect {
    background-image: $grey-gradient;
}*/
.ui-widget-header {
  background-image: linear-gradient(to right, #fff 26%, #ddd 80%);
  border-top: 2px solid #ddd !important; }

.ui-widget-content, .ui-widget.ui-widget-content {
  border: none; }

.navbar-dark .navbar-nav .dropdown-menu .nav-link {
  color: #4a4a4a; }

/*bootstrap custom start*/
.btn {
  letter-spacing: 1px; }

.btn-light {
  color: #000;
  background-color: rgba(0, 0, 0, 0.1);
  border-color: #f8f9fa; }

.btn-primary {
  color: #fff;
  background-color: #4a4a4a;
  border-color: #4a4a4a;
  border-radius: 0; }

.btn-primary:hover, .btn-primary:focus {
  background-color: #777777;
  border-color: #4a4a4a; }

.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #777777;
  border-color: #4a4a4a; }

.btn-danger {
  color: #fff;
  background-color: #c00020; }

.btn-secondary {
  color: #4a4a4a;
  background-color: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.1); }

.btn-info {
  background-color: #777777 !important;
  border-color: #4a4a4a; }

.btn-info:hover {
  color: #fff;
  background-color: #4a4a4a;
  border-color: #4a4a4a !important; }

.btn-info:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 0 0.2rem rgba(74, 74, 74, 0.5) !important; }

.btn-info:not(:disabled):not(.disabled):active {
  background: #777777 !important;
  border-color: #4a4a4a; }

.btn-info:focus {
  border-color: #4a4a4a;
  box-shadow: 0 0 0 0.2rem #4a4a4a; }

.btn-info:active {
  border-color: #4a4a4a;
  box-shadow: 0 0 0 0.2rem #4a4a4a; }

.character {
  display: block;
  margin: auto;
  font-size: 13px;
  line-height: 13px; }

.shape_name {
  display: block;
  text-align: center;
  font-size: 13px; }

.choose {
  display: inline-block; }
  .choose:before {
    content: "1";
    background: url("images/setting_before.svg") no-repeat;
    width: 60px;
    height: 60px;
    display: inline-block;
    position: absolute;
    top: -7px;
    left: 12px;
    color: #4a4a4a;
    font-family: Open Sans;
    font-weight: 600;
    font-size: 25px;
    line-height: 56px; }
  .choose:after {
    content: "";
    background: url("images/setting.svg") no-repeat;
    width: 43px;
    height: 20px;
    display: inline-block;
    position: absolute;
    top: 9px;
    right: 35px; }

.select {
  display: inline-block; }
  .select:before {
    content: "2";
    background: url("images/setting_before.svg") no-repeat;
    width: 60px;
    height: 60px;
    display: inline-block;
    position: absolute;
    top: -7px;
    left: 12px;
    color: #4a4a4a;
    font-family: Open Sans;
    font-weight: 600;
    font-size: 25px;
    line-height: 56px; }
  .select:after {
    content: "";
    background: url("images/setting-diamond.svg") no-repeat;
    width: 43px;
    height: 24px;
    display: inline-block;
    position: absolute;
    top: 9px;
    right: 20px; }

.complete {
  display: inline-block; }
  .complete:before {
    content: "3";
    background: url("images/setting_before.svg") no-repeat;
    width: 60px;
    height: 60px;
    display: inline-block;
    position: absolute;
    top: -7px;
    left: 12px;
    color: #4a4a4a;
    font-family: Open Sans;
    font-weight: 600;
    font-size: 25px;
    line-height: 56px; }
  .complete:after {
    content: "";
    background: url("images/setting-ring.svg") no-repeat;
    width: 43px;
    height: 31px;
    display: inline-block;
    position: absolute;
    top: 5px;
    right: 20px; }

.btn:hover .choose:before {
  content: "1";
  color: #c00020; }

.btn:hover .choose:after {
  content: "";
  background: url("images/setting-white.svg") no-repeat; }

.btn:hover .select:before {
  content: "2";
  color: #c00020; }

.btn:hover .select:after {
  content: "";
  background: url("images/setting-diamond-white.svg") no-repeat; }

.btn:hover .complete:before {
  content: "3";
  color: #c00020; }

.btn:hover .complete:after {
  content: "";
  background: url("images/setting-ring-white.svg") no-repeat; }

.filter_bar {
  background: #777777; }

.yellow-bg {
  background: #f7b500; }

.orrange-bg {
  background: #fa6400; }

header {
  width: 100%;
  height: auto;
  padding: 10px 0; }
  header img {
    width: 134px;
    height: auto; }

.bg-red {
  background: #c00020; }

.navbar .dropdown-menu {
  border: none;
  background-color: #c00020 !important;
  box-shadow: #c00020 1px 2px rgba(0, 0, 0, 0.19); }

.admin_menu {
    float: right;
    width: 85%;
    margin-top: 52px;
    border: 0px solid;
}

.admin_menu ul {
    list-style: none;
    border: 0px solid red;
    float: right;
    margin: 0;
    padding: 0;
}

.admin_menu ul li {
    display: inline;
    padding: 5px 10px;
    background-color: #fff;
    font-size: 12px;
}

.admin_menu ul li a {
    text-decoration: none;
    padding: 0px 2px 3px;
    color: #204168;
    border-bottom: 1px solid #cacaca;
    font: normal 14px arial;
}

.admin_menu ul li a:hover {
    padding: 0px 2px 3px;
    color: #000;
    border-bottom: 2px solid #214269;
}