body {
    padding-top: 25px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 60px;
}

@font-face {
	font-family: 'Glyphicons Halflings';
	src: url(../fonts/glyphicons-halflings-regular.eot);
	src: url(../fonts/glyphicons-halflings-regular.eot?#iefix) format("embedded-opentype"), url(../fonts/glyphicons-halflings-regular.woff2) format("woff2"), url(../fonts/glyphicons-halflings-regular.woff) format("woff"), url(../fonts/glyphicons-halflings-regular.ttf) format("truetype"), url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format("svg");
}

.mar-right {
    margin-right: 10px;
}
*, .btn{
	font-weight: 400;
	font-size: 12px;
	color: gray;
	font-family: "Open Sans",Helvetica,Arial,sans-serif;
}
.btn-group {
	display:block;
}
.card-body .btn.btn-stones {
	height: 110px;
	min-width: 80px !important;
	width: 16%;
	padding: 0.3rem 0.3rem;
	margin-bottom: 5px;
}
.card-body .font-weight-bold {
	font-weight: 700 !important;
	font-size: 1rem;
}
.card-body .header {
    font-weight: 700 !important;
    font-size: 1.25rem;
}
.card-body img {
	margin-bottom: 5px;
}

.metal-color-btn {
	display: inline-block;
	margin: 0px;
	padding: 5px;
	border: none;
	margin-bottom: unset !important;
}

.metal-color-group {
	display: inline-block;
	padding: 3px;
	text-align: center;
	background-color: #fff;
	margin-bottom: 10px;
	margin-right: 8px;
	border: 1px solid #ccc;
    width:100%;
}

.metal-color-group-name {
	margin-bottom: 4px;
	padding:5px;
}

.card-body .btn.btn-secondary {
	margin-bottom: 5px;
}

.card-body input[type=radio]
{
	display: none;
}

.btn-outline-primary {
	color: #808080;
	background-color: white;
	background-image: none;
	border-color: #cccccc;
	padding: 0.375rem 0.75rem !important;
}

.metal-white {
	color: #808080;
	background-color: #f3f1ea;
	background-image: none;
	border-color: #cccccc;
}


.btn-outline-primary:hover:not(:disabled):not(.disabled) {
	background-color: gray;
}

.btn-outline-primary:hover:not(:disabled):not(.disabled) span {
	color: #fff !important;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-outline-primary:focus span, .btn-outline-primary.focus span, .btn-outline-primary.active span{
	color: #fff;
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
	color: #ced4da;
	background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: #4F90C5;
    border-color: #cccccc;
}

/*Custom variants*/

.btn-accordion-header {
    color: #333333;
    background-color: white;
    background-image: none;
    text-align: left;
}

.btn-accordion-header:hover {
    color: #fff;
    background-color: #4F90C5;
    border-color: #cccccc;
}

.btn-outline-header:focus, .btn-accordion-header.focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-accordion-header.disabled, .btn-accordion-header:disabled {
    color: #ced4da;
    background-color: transparent;
}

.btn-accordion-header:not(:disabled):not(.disabled):active, .btn-accordion-header:not(:disabled):not(.disabled).active,
.show > .btn-accordion-header.dropdown-toggle {
    color: #fff;
    background-color: #4F90C5;
    border-color: #cccccc;
}

.btn-accordion-header:not(:disabled):not(.disabled):active:focus, .btn-accordion-header:not(:disabled):not(.disabled).active:focus,
.show > .btn-accordion-header.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-yellow {
    color: #808080;
    background-color: #f2d681;
    border-color: #cccccc;
}
.metal-yellow {
	color: #808080;
	background-color: #f2d681;
	border-color: #cccccc;
}

/*.btn-yellow:hover {
    color: white;
    background-color: #4f90c5;
    border-color: #cccccc;
}*/

.btn-yellow:focus, .btn-yellow.focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-yellow.disabled, .btn-yellow:disabled {
    color: #212529;
    background-color: #f2d681;
    border-color: #cccccc;
}

.btn-yellow:not(:disabled):not(.disabled):active, .btn-yellow:not(:disabled):not(.disabled).active,
.show > .btn-yellow.dropdown-toggle {
    color: white;
    background-color: #4f90c5;
    border-color: #cccccc;
}

.btn-yellow:not(:disabled):not(.disabled):active:focus, .btn-yellow:not(:disabled):not(.disabled).active:focus,
.show > .btn-yellow.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-rose {
    color: #808080;
    background-color: #f9dcd3;
    border-color: #cccccc;
}

.metal-rose {
	color: #808080;
	background-color: #f9dcd3;
	border-color: #cccccc;
}

/*.btn-rose:hover {
    color: white;
    background-color: #4f90c5;
    border-color: #cccccc;
}*/

.btn-rose:focus, .btn-rose.focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-rose.disabled, .btn-rose:disabled {
    color: #212529;
    background-color: #f9dcd3;
    border-color: #cccccc;
}

.btn-rose:not(:disabled):not(.disabled):active, .btn-rose:not(:disabled):not(.disabled).active,
.show > .btn-rose.dropdown-toggle {
    color: white;
    background-color: #4f90c5;
    border-color: #cccccc;
}

.btn-rose:not(:disabled):not(.disabled):active:focus, .btn-rose:not(:disabled):not(.disabled).active:focus,
.show > .btn-rose.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-silver {
    color: #808080;
    background-color: #efefef;
    border-color: #cccccc;
}

.metal-silver {
	color: #808080;
	background-color: #eee;
	border-color: #cccccc;
}

/*.btn-silver:hover {
    color: white;
    background-color: #4f90c5;
    border-color: #cccccc;
}*/

.btn-silver:focus, .btn-silver.focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-silver.disabled, .btn-silver:disabled {
    color: #212529;
    background-color: #f9dcd3;
    border-color: #cccccc;
}

.btn-silver:not(:disabled):not(.disabled):active, .btn-silver:not(:disabled):not(.disabled).active,
.show > .btn-silver.dropdown-toggle {
    color: white;
    background-color: #4f90c5;
    border-color: #cccccc;
}

.btn-silver:not(:disabled):not(.disabled):active:focus, .btn-silver:not(:disabled):not(.disabled).active:focus,
.show > .btn-silver.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-stones {
    color: #333333;
    background-color: transparent;
    width: 20%;
    height: 110px;
    white-space: normal;
    font-family: initial;
    min-width: 100px !important;
}

    .btn-stones:hover {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    }

    .btn-stones:focus, .btn-stones.focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    }

    .btn-stones:disabled, .btn-stones.disabled {
        pointer-events: none;
    }

    .btn-stones span {
        display: inline-grid;
        font-size: 0.9rem;
    }

.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    /*border: 1px solid rgba(0, 0, 0, 0.125);*/
    border-radius: 0.25rem;
    margin-bottom: 15px;
    color: grey;
}

.card-header {
	border-bottom: 0;
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical > .btn-group:not(:last-child) > .btn {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.btn.disabled {
	opacity : 0.4;
}

[v-cloak] {
	display: none;
}

.card-header a:before {
	font-family: 'Glyphicons Halflings';
	content: "\e253";
	font-size: 12px;
	float: right;
	transition: all 0.5s;
}

.card-header a.collapsed:before {
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

.hideContent {
	display:none;
}
.stone-image {
	position: absolute;
}
.stone-image-option {
	height: 30px;
}

/* Image Demo */
.large img {
    width: 1000px;
    height: 1000px;
}

.small img {
    width: 445px;
    height: 445px;
}

/* Dark overlay - set overlay option
 to true to see this style */
.az-overlay {
    background-color: #000;
    opacity: 0.3;
    filter: alpha(opacity=30);
    z-index: 10;
    width: 445px;
    height: 445px;
}
/* make zoom window round 
  default zoom window size is 110px,
  set the border-radius to half */
.az-zoom {
    border-radius: 5px; /* 55px; */
    width: 210px !important;
    height: 210px !important;
}

 fade out small content when hovering
.az-hovered > * {
    opacity: 0.5;
    filter: alpha(opacity=50);
}


.large {
	background: #fff;
}

.zoom {
    display: block;
    margin: 0 auto;
    width: 445px;
    height: 445px;
}

body {
	margin: 100px;
}

.product-price {
	font-family: Quant-Light;
	color: #363636;
	font-size: 26px;
	font-weight: 100;
}
.zales-addtocart-button {
	background-color: #b64d52 !important;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	line-height: 17px;
	color: #ffffff;
}
.peoples-addtocart-button {
	background-color: #4F90C5 !important;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 17px;
	color: #ffffff;
}
.gordons-addtocart-button {
    background-color: #32064D !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 17px;
    color: #ffffff;
}

.peoples-errorModal .btn {
    background-color: #4F90C5 !important;
    font-family: "Open Sans",Helvetica,Arial,sans-serif;
    font-size: 12px;
    line-height: 17px;
    color: #ffffff;
    width: 25%;
    margin-bottom:15px;
}
.peoples-errorModal h3, .peoples-errorModal button {
    color: #4F90C5;
    font-size: 1.75rem;
}

.zales-errorModal .btn {
    background-color: #b64d52 !important;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    line-height: 17px;
    color: #ffffff;
    width: 25%;
    margin-bottom: 15px;
}

.zales-errorModal h3, .zales-errorModal button {
    color: #b64d52;
    font-size: 1.75rem;
}

.gordons-errorModal .btn {
    background-color: #32064D !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 17px;
    color: #ffffff;
    width: 25%;
    margin-bottom: 15px;
}

.gordons-errorModal h3, .gordons-errorModal button {
    color: #32064D;
    font-size: 1.75rem;
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .9 !important;
}

.btn-cart {
    padding: 10px 25px;
    width: 100%;
}

body {
	margin: 100px;
}
.starting-at {
	height:18px;
}

.card-body {
    padding: 0.5rem;
}

.metal-color-group label {
    width: 33%;
    padding: 0.375rem 0 !important;
}

.container {
    margin: 0 auto;
    padding:0px;
}

.col-lg-7 {
    width : 99.9% !important;
}

.engraving-input {
    padding: 1.125rem;
    max-width: 100%;
    border-color:transparent;
    /*margin:0.84px;*/
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /*.engraving-input {
        margin: 0.84px;
    }*/
}

/* Chrome only: */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    /*.engraving-input {
        margin: 0.8px;
    }*/
}

@media (min-width: 350px) {
    .metal-color-group {
        width: 46%;
        margin-right: 8px;
    }

    .card-body {
        padding: 0.5rem;
    }
}

@media (min-width: 560px) {
    .metal-color-group {
        width: 23%;
        margin-right: 10px;
    }
        
    .card-body {
        padding: 0.5rem;
    }
    .btn-cart {
        width: 50%;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 920px;
    }

    .card-body {
        padding:0.5rem;
    }
    .metal-color-group {
        width: 46%;
    }
    .metal-color-group label {
        padding: 0.375rem 0.75rem !important;
    }
    .btn-cart {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 1210px;
    }
    .metal-color-group {
        width:23%;
    }
    .card-body {
        padding: 1.25rem;
    }
    .btn-cart {
        width: 50%;
    }
}

@media (min-width: 1020px) {
    .metal-color-group {
        width: 23%;
    }
    .card-body {
        padding: 1.25rem;
    }

    
}

.engravingText {
    text-shadow: 0.5px 0.5px 0.5px rgba(255,255,255,.8), -0.5px -0.5px 0.5px rgba(255,255,255,.8);
    fill: #080707e6;
    position: absolute;
    top: 0;
    left: 0;
}

.italic {
    -moz-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(30deg, 0deg);
    -webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(30deg, 0deg);
    -o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(30deg, 0deg);
    -ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(30deg, 0deg);
    transform: scale(1) rotate(0deg) translate(0px, 0px) skew(30deg, 0deg);
}

.ENG4 {
    font-size: 1rem;
    font-weight: 600;
}

.cursor-wait {
    cursor : wait !important;
}

.mr-80 {
    margin-right:80%;
}