/* ==== */
/* TYPOGRAPHY */
/* ==== */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
p {
    color: #505050;
}

p.text-small.text-important {
    color: #892D23;
}

a {
    color: #000;
}

a:hover,
a:active {
    color: #505050;
}

.text-subtitle {
    color: #a5acb0;
}

.text-alert {
    color: #B60506;
}

/* ==== */
/* BUTTON */
/* ==== */

.btn {
    color: #fff;
}

/* BUTTON - Default / Primary - White outline */

.btn-default,
.btn-primary {
    background: #000;
    border: 2px solid #000;
}

.btn-default:focus,
.btn-primary:focus {
    background: #000;
    border: 2px solid #000;
}

.btn-default:hover,
.btn-primary:hover {
    background: #000;
    border: 2px solid #000;
    color: #fff;
}

.btn-default:active,
.btn-primary:active,
.btn-default.active,
.btn-primary.active,
.btn-default:active:focus,
.btn-primary:active:focus,
.btn-default.active:focus,
.btn-primary.active:focus {
    background: #505050;
    border: 2px solid #505050;
}

.btn-default:active:hover,
.btn-primary:active:hover,
.btn-default.active:hover,
.btn-primary.active:hover {
    background: #505050;
    border: 2px solid #505050;
}

.btn-default.disabled,
.btn-default[disabled],
.btn-default.inactive,
.btn-primary.disabled,
.btn-primary[disabled],
.btn-primary.inactive {
    background: #fff;
    border: 2px solid #a5acb0;
    color: #a5acb0;
}

.btn-default.disabled:hover,
.btn-default[disabled]:hover,
.btn-default.inactive:hover,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
.btn-primary.inactive:hover,
.btn-default.disabled:active,
.btn-default[disabled]:active,
.btn-default.inactive:active,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
.btn-primary.inactive:active,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
.btn-default.inactive:focus,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
.btn-primary.inactive:focus {
    background: #fff;
    border: 2px solid #a5acb0;
    color: #a5acb0;
}

/* BUTTON - Secondary - Black Fill */

.btn-secondary {
    background: #fff;
    border: 2px solid #000;
    color: #000;
}

.btn-secondary:focus {
    color: #505050;
}

.btn-secondary:hover {
    background: #fff;
    border: 2px solid #505050;
}

.btn-secondary:active,
.btn-secondary.active {
    background: #fff;
    border: 2px solid #505050;
    color: #505050;
}

.btn-secondary:active:hover,
.btn-secondary.active:hover {
    background: #fff;
    border: 2px solid #505050;
    color: #505050;
}

.btn-secondary.disabled,
.btn-secondary[disabled],
.btn-secondary.inactive {
    background: #fff;
    border: 2px solid #a5acb0;
    color: #a5acb0;
}

.btn-secondary.disabled:hover,
.btn-secondary[disabled]:hover,
.btn-secondary.inactive:hover {
    background: #fff;
    border: 2px solid #a5acb0;
    color: #a5acb0;
}

/* BUTTON - Text - no fill, just pure text */

.btn-text {
    background-color: transparent;
    color: #000;
}

/* BUTTON - Small */

.btn-small:hover,
.btn-small:active,
.btn-small.active,
.btn-small:focus {
    color: #fff;
    border: 2px solid #505050;
    background: #505050;
}

.btn-small.active:hover,
.btn-small:active:hover {
    color: #fff;
}

@media screen and (min-width: 768px) {
    .btn-next[disabled],
    .btn-next.is-disabled {
        border: 2px solid #a5acb0;
    }

    .btn-next[disabled]:hover,
    .btn-next.is-disabled:hover {
        border: 2px solid #a5acb0;
    }
}

/* ==== */
/* NAVIGATION */
/* ==== */

.nav-is-open .navigation {
    background: #505050;
}

.navigation {
    background: #505050;
    border-bottom: 1px solid #fff;
}

.navigation.is-transparent {
    background: transparent;
}

.navigation.is-sticky {
    background: #505050;
}

.navigation .logo {
    color: #fff;
}

.navigation .hamburger span,
.navigation .hamburger span::after,
.navigation .hamburger span::before {
    background-color: #fff;
}

.navigation .navigation-links li a {
    color: #505050;
}

.navigation.is-open .navigation-links {
    background: #fff;
}

@media screen and (min-width: 768px) {
    .navigation .navigation-links li a {
        color: #fff;
    }
}

/* NAVIGATION - Progress Steps */

.progress-steps .item-icon {
    background-color: #fff;
    border: 2px solid #a5acb0;
    color: #a5acb0;
}

.progress-steps .item-text {
    color: #a5acb0;
}

.progress-steps .item-line {
    background-color: #a5acb0;
}

.progress-steps-item.is-active .item-icon {
    border: 2px solid #505050;
}

.progress-steps-item.is-active .item-icon::after {
    background-color: #505050;
}

.progress-steps-item.is-active .item-text {
    color: #505050;
}

.progress-steps-item.is-completed .item-icon {
    border-color: #429548;
}

@media screen and (min-width: 768px) {
    .progress-steps .item-icon {
        border: 3px solid #a5acb0;
    }

    .progress-steps-item.is-active .item-icon {
        border: 3px solid #505050;
    }
}

/* NAVIGATION - Tabs */

.nav-tabs {
    border-bottom: 1px solid #505050;
}

.nav-tabs>li {
    background: #e6e6e6;
}

.nav-tabs>li.active>a {
    border-left: 1px solid #505050;
    border-top: 1px solid #505050;
    border-right: 1px solid #505050;
}

.nav-tabs>li.active>a:before {
    background: #505050;
}

.nav-tabs>li>a {
    border-bottom: 1px solid #505050;
    color: #a5acb0;
}

.nav-tabs>li:not(.active)>a:hover,
.nav-tabs>li:not(.active)>a:active {
    border-bottom: 1px solid #505050;
}

/* ==== */
/* HERO */
/* ==== */

.hero {
    color: #fff;
}

.hero::before {
    background-color: rgba(0, 0, 0, 0.5);
}

.hero::after {
    background-image: -webkit-gradient(linear,
        left top,
        left bottom,
        color-stop(50%, rgba(0, 0, 0, 0)),
        color-stop(80%, rgba(0, 0, 0, 0.25)));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 80%);
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 80%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(0, 0, 0, 0)), color-stop(80%, rgba(0, 0, 0, 0.25)));
    background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 80%);
}

/* ==== */
/* HERO-SCHOOL */
/* ==== */

.hero-school {
    color: #505050;
    background: #e6e6e6;
}

/* ==== */
/* FORM */
/* ==== */

.form-row-two label:first-child {
    border-right: 1px solid #e6e6e6;
}

.form-row-two label:last-child {
    border-left: 1px solid #e6e6e6;
}

.form .form-row-three .exp-date-spacer {
    border-bottom: 2px solid #e6e6e6;
    color: #a5acb0;
}

.form .form-row-three label+label+label+label {
    border-left: 2px solid #e6e6e6;
}

.form .form-row:first-child .form-control[type='text'] {
    border-top: 2px solid #e6e6e6;
}

.form .form-row:first-child .form-control[type='text'].has-error {
    border-color: #a94442;
    background-color: #f8d7da;
}

.form .form-row:first-child .checkbox {
    border-bottom: 2px solid #e6e6e6;
}

.form .form-control[type='text'],
.form .form-control[type='email'],
.form .form-control[type='tel'] {
    border-bottom: 2px solid #e6e6e6;
}

.form .form-control[type='text'].has-error,
.form .form-control[type='email'].has-error,
.form .form-control[type='tel'].has-error {
    border-color: #a94442;
    background-color: #f8d7da;
}

/* fixes input height: 0 issue */
.form .form-control[type='text'],
.form .form-control[type='email'],
.form .form-control[type='tel'] {
	padding: 0 0 0 14px;
	height: 48px !important;
	line-height: 48px !important;
}

.form .form-row {
    font-size: 0;
}

.form select.has-error {
    border-color: #a94442;
    background-color: #f8d7da;
}

.form .form-control[type='text']::-webkit-input-placeholder,
.form .form-control[type='email']::-webkit-input-placeholder,
.form .form-control[type='tel']::-webkit-input-placeholder {
    color: #a5acb0;
}

.form .form-control[type='text']:-ms-input-placeholder,
.form .form-control[type='email']:-ms-input-placeholder,
.form .form-control[type='tel']:-ms-input-placeholder {
    color: #a5acb0 !important;
}

.form select {
    background: transparent;
    color: #a5acb0;
    border-bottom: 2px solid #e6e6e6;
}

.form select::-ms-expand {
	display: none;
}

.form select.is-selected {
    color: #000;
}

/* CHECKBOX */

.checkbox input[type='checkbox']:checked+.checkbox-figure {
    background: #505050;
}

.checkbox .checkbox-figure {
    border: 1px solid #505050;
}

/* RADIO */

.radio .radio-figure {
    border: 1px solid #505050;
}

.radio .radio-figure span {
    background-color: #505050;
}

/* INPUT */

/* INPUT FIELDS */

.input-fields>li {
    border-bottom: 2px solid #e6e6e6;
}

.input-fields>li:first-child {
    border-top: 2px solid #e6e6e6;
}

/* INPUT FIELDS - blank-field */

.input-fields .blank-field p {
    color: #505050;
}

/* INPUT FIELDS - card-field */

.input-fields .card-field {
    border: 2px solid #e6e6e6;
}

.input-fields .card-field p {
    color: #505050;
}

/* INPUT FIELDS - text-field - nested collapse version - is-active */

.input-fields .text-field-collapse.is-active .text-field-main .btn-small {
    border-color: #505050;
    background: #505050;
}

/* ==== */
/* DROPDOWN */
/* ==== */

.dropdown {
    background: #000;
}

.dropdown::after {
    content: '';
    border-right: 0.125em solid #fff;
    border-bottom: 0.125em solid #fff;
}

.dropdown select {
    border: 2px solid #000;
    background: transparent;
    color: #fff;
}

.dropdown select option {
    color: #000;
}

.dropdown select::-ms-expand {
	display: none;
}

/* DROPDOWN - Secondary */

.dropdown-secondary {
    background: transparent;
}

.dropdown-secondary::after {
    border-right: 0.125em solid #000;
    border-bottom: 0.125em solid #000;
}

.dropdown-secondary select {
    color: #000;
    border: 2px solid #000;
}

/* DROPDOWN - custom */

.dropdown-toggle {
    color: #fff !important;
}

.dropdown-inner.open>.dropdown-toggle:hover,
.dropdown-inner.open>.dropdown-toggle:focus,
.dropdown-inner.open>.dropdown-toggle {
    background: #505050;
    border-color: #505050;
}

.dropdown-menu {
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
}

.dropdown-menu li a {
    color: #000;
}

.dropdown-menu li a:hover {
    background: #a5acb0;
}

/* ==== */
/* PANEL */
/* ==== */

/* PANEL - Main */

.panel {
    background-color: #fff;
}

/* Panel - Heading */

.panel>.panel-heading {
    background-color: #e6e6e6;
}

.panel>.panel-heading .panel-title-icon {
    background-color: transparent;
    border: 2px solid #a5acb0;
    color: #a5acb0;
}

.panel>.panel-heading a[aria-expanded='true'] .panel-title-icon:after {
    background-color: #505050;
}

.panel>.panel-heading .panel-title-text {
    color: #505050;
}

/* PANEL - is-completed */

.panel.is-completed .panel-title-icon {
    border-color: #429548;
}

/* PANEL-GROUP - review  */

.panel-group-review .panel+.table-review {
    border-top: 3px solid #505050;
}

/* PANEL - reviewInfo */

.panel-reviewInfo .panel-body-description+.panel-body-content {
    border-bottom: 1px solid #e6e6e6;
}

.panel-reviewInfo .panel-body>*:last-child {
    border-top: 4px solid #505050;
}

/* ==== */
/* TABLE */
/* ==== */

/* TABLE - review */

.table-review-row-promo {
    border-top: 2px solid #e6e6e6;
    border-bottom: 2px solid #e6e6e6;
}

/* TABLE - address */

.table-address td {
    color: #505050;
}

/* TABLE - ring-info */

.table-ringInfo td {
    color: #505050;
}

/* TABLE - total */

.table-total td {
    color: #505050;
}

/* ==== */
/* RING PREVIEW */
/* ==== */

.ring-preview-info .ring-name {
    color: #505050;
}

.ring-preview-info .ring-price {
    color: #505050;
}

/* ==== */
/* RINGS GRID */
/* ==== */

@media screen and (min-width: 768px) {
    .tab-content .tab-pane#women-rings+.tab-pane#men-rings {
        border-left: 2px solid #e6e6e6;
    }
}

/* ==== */
/* SHARE */
/* ==== */

.share .title {
    color: #505050;
}

/* ==== */
/* ERROR ALERT */
/* ==== */

.alert-error {
    color: #B60506;
    background-color: #f8d7da;
    border: 0 #f5c6cb;
}


/* ==== */
/* BUTTON CONTROLS */
/* ==== */

.btn-control {
    background: #fff;
}

/* ==== */
/* CALLOUT */
/* ==== */

.callout {
    background-color: #e6e6e6;
}

/* ==== */
/* UI AUTOCOMPLETE OVERRIDE */
/* ==== */

.ui-autocomplete-input {
    border: 2px solid #505050;
}

.ui-widget.ui-widget-content.ui-autocomplete {
    border: 1px solid #505050;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
.ui-menu-item>.ui-state-active {
    background: #a5acb0 !important;
}

/* ==== */
/* MODAL */
/* ==== */

/* MODAL - full screen on mobile */

.modal-footer {
    background: #fff;
}

/* ==== */
/* LAYOUT */
/* ==== */

.layout-warranty {
    background: #fff;
}

/* LAYOUT - about */

.layout-about {
    background: #fff;
}

/* LAYOUT - progress */

@media screen and (min-width: 768px) {
    .layout-progress-ring nav {
        border-bottom: 1px solid #e6e6e6;
    }
}

/* LAYOUT - progress: top */

@media screen and (min-width: 768px) {
    .layout-progress-top nav {
        border-bottom: 1px solid #e6e6e6;
    }
}

/* LAYOUT - progress: side */

@media screen and (min-width: 768px) {
    .layout-progress-side nav {
        border-bottom: 1px solid #e6e6e6;
    }
}

/* LAYOUT - progress: review */


@media screen and (min-width: 768px) {
    .layout-progress-review nav {
        border-bottom: 1px solid #e6e6e6;
    }
}

/* LAYOUT - progress: checkout */

@media screen and (min-width: 768px) {
    .layout-progress-checkout nav {
        border-bottom: 1px solid #e6e6e6;
    }
}

/* LAYOUT - progress: wait */

@media screen and (min-width: 768px) {
    .layout-progress-wait nav {
        border-bottom: 1px solid #e6e6e6;
    }
}

/* LAYOUT - progress: confirmation */

@media screen and (min-width: 768px) {
    .layout-progress-confirm nav {
        border-bottom: 1px solid #e6e6e6;
    }
}