/* General */

body[class^="mydreamring-index"] .columns.container {
  padding: 0;
  margin: 0;
  max-width: 100%;
  width: 100%;
}

.mdr-page-container {
  background-color: #EDDEDA; /* #faeae6; */
  padding-bottom: 100px;
}

.mdr-page-container[store-id="1"] {
  background-color: #EDDEDA; /* #fef0ef; */
}

.mdr-page-container > .mdr-page-content > .full-image {
  padding-bottom: 20px;
}

.mdr-inner-content {
  width: 60%;
  margin: 0 auto;
}

.mdr-text {
  color: #000000;
  padding-bottom: 15px;
}

.mdr-text > a {
  text-decoration: underline;
  color: #cca096;
}

.mdr-text > a:hover {
  color: #ac776a;
}

.mdr-button {
  padding: 10px;
  transition: 0.3s all ease;
  background-color: #cca096;
  border: 3px solid #cca096;
  color: #ffffff !important;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.mdr-button:hover {
  background-color: #EDDEDA;
  border: 3px solid #cca096;
  color: #cca096 !important;
  box-shadow: none !important;
}

.mdr-button:active,
.mdr-button:focus {
  background: #cca096;
  border: 3px solid #cca096;
}

/* Start */

.mdr-buttons {
  padding: 10px 0 30px;
  display: flex;
  justify-content: space-between;
}

.fill-in-form-btn,
.edit-form-btn,
.discover-btn {
  width: 29%;
  text-transform: uppercase;
  font-weight: bold;
  padding: 10px 0;
}

/* Add */

#mdr-add-form,
#mdr-edit-add-form,
#mdr-validate-form,
#mdr-discover-form,
#mdr-edit-form,
#mdr-discover-validate-form,
#mdr-edit-validate-form,
.mdr-forms {
  width: 100%;
  margin: 0 auto;
}

#mdr-edit-add-form:not(:first-child) {
  padding-top: 40px;
}

#mdr-edit-add-form:not(:last-child) {
  padding-bottom: 40px;
  border-bottom: 2px dotted #d6bbb3;
}

#mdr-add-form > div,
#mdr-edit-add-form > div,
.mdr-forms > div,
#mdr-validate-form > div,
#mdr-discover-form > div,
#mdr-edit-form > div,
#mdr-discover-validate-form > div,
#mdr-edit-validate-form > div {
  margin-bottom: 20px;
}

#mdr-add-form > div > *,
#mdr-edit-add-form > div > *,
.mdr-forms > div > *,
#mdr-validate-form > div > *,
#mdr-discover-form > div > *,
#mdr-edit-form > div > *,
#mdr-discover-validate-form > div > *,
#mdr-edit-validate-form > div > * {
  display: block;
  color: #000000;
}

#mdr-add-form > div > span,
#mdr-edit-add-form > div > span,
.mdr-forms > div > span,
#mdr-validate-form > div > span,
#mdr-discover-form > div > span,
#mdr-edit-form > div > span,
#mdr-discover-validate-form > div > span,
#mdr-edit-validate-form > div > span {
  font-size: 12px;
}

#mdr-add-form > div > input,
#mdr-add-form > div.form-row > div.phone-content > input,
#mdr-edit-add-form > div > input,
#mdr-edit-add-form > div.form-row > div.phone-content > input,
#mdr-discover-form > div.form-row > div.phone-content > input,
#mdr-edit-form > div.form-row > div.phone-content > input {
  width: 50%;
  border: none;
  border-bottom: 1px solid #cccccc;
  border-radius: 0;
}

#mdr-add-form div.phone-content,
#mdr-edit-add-form div.phone-content,
#mdr-discover-form div.phone-content,
#mdr-edit-form div.phone-content {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

#mdr-add-form div.phone-content select.phone-1-countries-dropdown,
#mdr-add-form div.phone-content select.phone-2-countries-dropdown,
#mdr-edit-add-form div.phone-content select.phone-1-countries-dropdown,
#mdr-edit-add-form div.phone-content select.phone-2-countries-dropdown,
#mdr-discover-form div.phone-content select.phone-countries-dropdown,
#mdr-edit-form div.phone-content select.phone-countries-dropdown {
  width: 15%;
  background-position: calc(100% - 5px) 50%;
  height: auto;
  border: 1px solid #cccccc;
  margin-right: 15px;
  padding-left: 5px;
  border-radius: 3px;
}

#mdr-add-form > div > label.required:after,
#mdr-edit-add-form > div > label.required:after,
#mdr-validate-form > div > label.required:after,
#mdr-discover-form > div > label.required:after,
#mdr-edit-form > div > label.required:after,
#mdr-discover-validate-form > div > label.required:after,
#mdr-edit-validate-form > div > label.required:after {
  content: " *";
  color: red;
}

#mdr-add-form > div,
#mdr-edit-add-form > div,
.mdr-forms > div,
#mdr-validate-form > div,
#mdr-discover-form > div,
#mdr-edit-form > div,
#mdr-discover-validate-form > div,
#mdr-edit-validate-form > div {
  background-color: #ffffff;
  padding: 20px;
}

#mdr-add-form .checkbox-container,
#mdr-edit-add-form .checkbox-container,
.mdr-forms .checkout-container {
  display: flex !important;
  align-items: center;
  font-size: 14px;
  line-height: 2;
}

#mdr-add-form .checkbox-container > input,
#mdr-edit-add-form .checkbox-container > input {
  margin-top: 0;
  width: 15px;
  height: 15px;
  opacity: 1;
  position: unset;
  margin-right: 5px;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #cccccc;
}

#mdr-add-form .checkbox-container > input:focus,
#mdr-edit-add-form .checkbox-container > input:focus {
  box-shadow: none;
}

#mdr-add-form .checkbox-container > input#other-stone-shape,
#mdr-add-form .checkbox-container > input#other-stone-material,
#mdr-edit-add-form .checkbox-container > input#other-stone-shape,
#mdr-edit-add-form .checkbox-container > input#other-stone-material {
  width: auto;
  margin-left: 10px;
  background: none;
  padding-left: 5px;
  height: 25px;
  font-style: normal;
}

#mdr-add-form select#measure,
#mdr-edit-add-form select#measure {
  width: auto;
  border: 1px solid #cccccc;
  padding-top: 0;
  padding-bottom: 0;
  height: 40px;
  margin-top: 10px;
  padding-left: 5px;
}

#mdr-add-form > div textarea,
#mdr-edit-add-form > div textarea {
  background: none;
  width: 50%;
  line-height: 1;
  padding-left: 5px;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #cccccc;
}

#mdr-add-form > div a,
#mdr-edit-add-form > div a {
  text-decoration: underline;
}

#mdr-add-form .product-list,
#mdr-edit-add-form .product-list,
.mdr-forms .product-list {
  display: flex;
  flex-wrap: wrap;
}

#mdr-add-form .product-list .list-item,
#mdr-edit-add-form .product-list .list-item,
.mdr-forms .product-list .list-item {
  width: 25%;
}

#mdr-add-form .product-list .list-item .list-item-checkbox-name,
#mdr-edit-add-form .product-list .list-item .list-item-checkbox-name,
.mdr-forms .product-list .list-item .list-item-checkbox-name {
  display: flex;
  align-items: center;
}

#mdr-add-form .product-list .list-item .list-item-checkbox-name input,
#mdr-edit-add-form .product-list .list-item .list-item-checkbox-name input {
  margin-top: 0;
}

#mdr-add-form .product-list .list-item .list-item-image,
#mdr-edit-add-form .product-list .list-item .list-item-image,
.mdr-forms .product-list .list-item .list-item-image {
  height: 150px;
  width: auto;
}

#mdr-add-form .product-list .list-item .list-item-image > img,
#mdr-edit-add-form .product-list .list-item .list-item-image > img,
.mdr-forms .product-list .list-item .list-item-image > img {
  object-fit: contain;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

#mdr-add-form .product-list .list-item .list-item-checkbox-name label,
#mdr-edit-add-form .product-list .list-item .list-item-checkbox-name label,
.mdr-forms .product-list .list-item .list-item-checkbox-name label {
  cursor: pointer;
}

#mdr-add-form span.error-msg,
#mdr-edit-add-form span.error-msg,
#mdr-discover-form span.error-msg,
#mdr-edit-form span.error-msg,
#mdr-validate-form .form-row .error-msg,
#mdr-discover-validate-form span.error-msg,
#mdr-edit-validate-form span.error-msg {
  display: none;
  color: red !important;
  padding-top: 5px;
}

span.phone-1-prefix,
span.phone-2-prefix,
span.phone-number-prefix {
  font-weight: 700;
  padding-top: 1px;
}

input#phone-1,
input#phone-2 {
  padding-left: 5px;
}

/* Discover */

input[name="last-three-digits"] {
  padding-left: 0;
  padding-bottom: 0;
}

/* Validate */

#mdr-validate-form > div > input,
#mdr-discover-form > div > input,
#mdr-edit-form > div > input,
#mdr-discover-validate-form > div > input,
#mdr-edit-validate-form > div > input {
  width: 50%;
  background: none;
  padding-left: 5px;
  padding-top: 0;
  border: none;
  border-bottom: 1px solid #cccccc;
  border-radius: 0;
}

#mdr-validate-form > div > input[type="number"]::-webkit-outer-spin-button,
#mdr-validate-form > div > input[type="number"]::-webkit-inner-spin-button,
#mdr-discover-form > div > input[type="number"]::-webkit-outer-spin-button,
#mdr-discover-form > div > input[type="number"]::-webkit-inner-spin-button,
#mdr-edit-form > div > input[type="number"]::-webkit-outer-spin-button,
#mdr-edit-form > div > input[type="number"]::-webkit-inner-spin-button,
#mdr-discover-validate-form
  > div
  > input[type="number"]::-webkit-outer-spin-button,
#mdr-discover-validate-form
  > div
  > input[type="number"]::-webkit-inner-spin-button,
#mdr-edit-validate-form > div > input[type="number"]::-webkit-outer-spin-button,
#mdr-edit-validate-form
  > div
  > input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#mdr-validate-form > div > input[type="number"]::-webkit-inner-spin-button,
#mdr-discover-form > div > input[type="number"]::-webkit-inner-spin-button,
#mdr-edit-form > div > input[type="number"]::-webkit-inner-spin-button,
#mdr-discover-validate-form
  > div
  > input[type="number"]::-webkit-inner-spin-button,
#mdr-edit-validate-form
  > div
  > input[type="number"]::-webkit-inner-spin-button {
  -moz-appearance: textfield;
  /* Firefox */
}

#mdr-validate-form .info-message,
#mdr-add-form .info-message,
#mdr-validate-form .expired-message,
#mdr-discover-form .info-message,
#mdr-edit-form .info-message,
#mdr-discover-validate-form .info-message,
#mdr-discover-validate-form .expired-message,
#mdr-edit-validate-form .info-message,
#mdr-edit-validate-form .expired-message {
  padding: 10px;
  margin-bottom: 10px;
  display: none;
  color: #31708f;
  border: 1px solid #31708f;
  background: none;
}

#mdr-validate-form .success-message,
#mdr-edit-add-form .success-message,
#mdr-discover-validate-form .success-message,
#mdr-edit-validate-form .success-message {
  padding: 10px;
  margin-bottom: 10px;
  display: none;
  color: green;
  border: 1px solid green;
  background: none;
}

#mdr-validate-form .error-message,
#mdr-discover-form .error-message,
#mdr-edit-form .error-message,
#mdr-discover-validate-form .error-message,
#mdr-edit-validate-form .error-message {
  padding: 10px;
  margin-bottom: 10px;
  display: none;
  color: #ff0000;
  border: 1px solid #ff0000;
  background: none;
}

#mdr-validate-form .no-code-message,
#mdr-discover-validate-form .no-code-message,
#mdr-edit-validate-form .no-code-message {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none !important;
}

#mdr-validate-form .no-code-message > a,
#mdr-discover-validate-form .no-code-message > a,
#mdr-edit-validate-form .no-code-message > a {
  padding: 0 3px;
  text-decoration: underline;
}

#mdr-validate-form .no-code-message > a:hover,
#mdr-discover-validate-form .no-code-message > a:hover,
#mdr-edit-validate-form .no-code-message > a:hover {
  color: #cca096;
}

#mdr-validate-form input#verification-code,
#mdr-discover-validate-form input#verification-code,
#mdr-edit-validate-form input#verification-code {
  padding-bottom: 0;
  border: none;
  border-bottom: 1px solid #cccccc;
  border-radius: 0;
}

input.code-error {
  border-color: red !important;
}

input.code-error::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: red;
  opacity: 1;
  /* Firefox */
}

input.code-error:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: red;
}

input.code-error::-ms-input-placeholder {
  /* Microsoft Edge */
  color: red;
}

.mdr-disabled {
  pointer-events: none;
  opacity: 0.6;
}

a.info-message-a {
  display: inline-block !important;
  color: #1a5e7f !important;
  font-weight: bold;
}
/* Success */

.pt40 {
  padding-top: 40px;
}
.confirm-email-content {
  padding-top: 20px;
}
.confirm-email-form {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 10px;
}
input#confirm-email-input {
  width: 350px;
  background: none;
  border: none;
  border-radius: 0;
  border-bottom: 2px solid #cca096;
  padding: 0;
  color: inherit;
  font-style: italic;
}
input#confirm-email-input::placeholder,
input#confirm-email-input::-ms-input-placeholder {
  color: inherit;
}

button#confirm-email-button {
  padding: 8px 20px;
  transition: 0.3s all ease;
  background-color: #cca096;
  border: 3px solid #cca096;
  color: #ffffff;
  text-align: center;
  margin-left: 10px;
}
button#confirm-email-button:hover {
  background-color: #ffedeb;
  border: 3px solid #cca096;
  color: #cca096;
}
.confirm-email-content .form-errors > span {
  display: none;
  padding-top: 10px;
}
.confirm-email-content .form-errors span.input-error,
.confirm-email-content .form-errors span.form-error {
  color: red;
}
.success-message {
  color: green;
}
/* Forms */

.mdr-forms:not(:first-child) {
  padding-top: 40px;
  border-top: 3px solid #ccc;
}

.mdr-forms:first-child {
  padding-bottom: 20px;
}

/* RESPONSIVE */

@media only screen and (max-width: 1280px) {
  /* General */
  .mdr-inner-content {
    width: 90%;
  }
}

@media only screen and (max-width: 1024px) {
  /* Add */
  #mdr-add-form,
  #mdr-edit-add-form,
  .mdr-forms {
    width: 70%;
  }
}

@media only screen and (max-width: 768px) {
  /* Start */
  .mdr-buttons {
    flex-direction: column;
  }
  .fill-in-form-btn,
  .edit-form-btn,
  .discover-btn {
    width: 100%;
  }
  .fill-in-form-btn,
  .edit-form-btn {
    margin-bottom: 15px;
  }
  .mdr-buttons > button:not(:last-child) {
    margin-bottom: 15px;
  }
  /* Validate */
  #mdr-add-form,
  #mdr-edit-add-form,
  .mdr-forms,
  #mdr-validate-form,
  #mdr-discover-form,
  #mdr-edit-form,
  #mdr-discover-validate-form,
  #mdr-edit-validate-form {
    width: 100%;
  }
  /* Add */
  #mdr-add-form div.phone-content select.phone-1-countries-dropdown,
  #mdr-add-form div.phone-content select.phone-2-countries-dropdown,
  #mdr-edit-add-form div.phone-content select.phone-1-countries-dropdown,
  #mdr-edit-add-form div.phone-content select.phone-2-countries-dropdown,
  #mdr-discover-form div.phone-content select.phone-countries-dropdown,
  #mdr-edit-form div.phone-content select.phone-countries-dropdown {
    padding-right: 0;
    width: 13%;
    background-position: calc(100% - 15px) 50%;
  }
}

@media only screen and (max-width: 580px) {
  /* General */
  .mdr-page-container {
    background-color: #EDDEDA; /* #fdebea; */
  }

  /* Success */
  .confirm-email-form {
    flex-direction: column;
  }
  input#confirm-email-input,
  button#confirm-email-button {
    width: 100%;
  }
  button#confirm-email-button {
    margin-left: 0;
    margin-top: 15px;
  }
}

@media only screen and (max-width: 480px) {
  /* Add */
  #mdr-add-form .product-list .list-item,
  #mdr-edit-add-form .product-list .list-item,
  .mdr-forms .product-list .list-item {
    width: 33.33%;
  }
  #mdr-add-form > div > input,
  #mdr-add-form > div textarea,
  #mdr-edit-add-form > div > input,
  #mdr-edit-add-form > div textarea,
  #mdr-validate-form button {
    width: 100%;
  }
  #mdr-add-form .product-list .list-item .list-item-checkbox-name input,
  #mdr-add-form .checkbox-container > input,
  #mdr-edit-add-form .product-list .list-item .list-item-checkbox-name input,
  #mdr-edit-add-form .checkbox-container > input {
    width: 16px;
  }
  #mdr-add-form .checkbox-container > input#other-stone-shape,
  #mdr-add-form .checkbox-container > input#other-stone-material,
  #mdr-edit-add-form .checkbox-container > input#other-stone-shape,
  #mdr-edit-add-form .checkbox-container > input#other-stone-material {
    height: auto;
  }
  #mdr-add-form div.phone-content select.phone-1-countries-dropdown,
  #mdr-add-form div.phone-content select.phone-2-countries-dropdown,
  #mdr-edit-add-form div.phone-content select.phone-1-countries-dropdown,
  #mdr-edit-add-form div.phone-content select.phone-2-countries-dropdown,
  #mdr-discover-form div.phone-content select.phone-countries-dropdown,
  #mdr-edit-form div.phone-content select.phone-countries-dropdown {
    width: 15%;
  }
  #mdr-add-form > div > input,
  #mdr-add-form > div.form-row > div.phone-content > input,
  #mdr-edit-add-form > div > input,
  #mdr-edit-add-form > div.form-row > div.phone-content > input,
  #mdr-discover-form > div.form-row > div.phone-content > input,
  #mdr-edit-form > div.form-row > div.phone-content > input {
    width: 85%;
  }
  /* Start */
  #mdr-add-form .mdr-button,
  #mdr-edit-add-form .mdr-button,
  #mdr-discover-form .mdr-button,
  #mdr-edit-form .mdr-button {
    width: 100%;
  }
  /* Validate */
  #mdr-validate-form > div > input,
  #mdr-discover-form > div > input,
  #mdr-edit-form > div > input,
  #mdr-discover-validate-form > div > input,
  #mdr-edit-validate-form > div > input {
    width: 100%;
  }
  #mdr-validate-form .no-code-message,
  #mdr-discover-validate-form .no-code-message,
  #mdr-edit-validate-form .no-code-message {
    display: block;
    padding-left: 0;
    padding-right: 0;
  }
  #mdr-validate-form .no-code-message > a,
  #mdr-discover-validate-form .no-code-message > a,
  #mdr-edit-validate-form .no-code-message > a {
    display: inline-block;
    padding: 0;
  }
}

@media only screen and (max-width: 425px) {
  /* Add */
  #mdr-add-form .product-list .list-item,
  #mdr-edit-add-form .product-list .list-item,
  .mdr-forms .product-list .list-item {
    width: 50%;
  }
  #mdr-add-form div.phone-content select.phone-1-countries-dropdown,
  #mdr-add-form div.phone-content select.phone-2-countries-dropdown,
  #mdr-edit-add-form div.phone-content select.phone-1-countries-dropdown,
  #mdr-edit-add-form div.phone-content select.phone-2-countries-dropdown,
  #mdr-discover-form div.phone-content select.phone-countries-dropdown,
  #mdr-edit-form div.phone-content select.phone-countries-dropdown {
    width: 22%;
    background-position: calc(100%) 50%;
  }
  #mdr-add-form > div > input,
  #mdr-add-form > div.form-row > div.phone-content > input,
  #mdr-edit-add-form > div > input,
  #mdr-edit-add-form > div.form-row > div.phone-content > input,
  #mdr-discover-form > div.form-row > div.phone-content > input,
  #mdr-edit-form > div.form-row > div.phone-content > input {
    width: 78%;
  }
}

@media only screen and (max-width: 380px) {
  #mdr-add-form div.phone-content select.phone-1-countries-dropdown,
  #mdr-add-form div.phone-content select.phone-2-countries-dropdown,
  #mdr-edit-add-form div.phone-content select.phone-1-countries-dropdown,
  #mdr-edit-add-form div.phone-content select.phone-2-countries-dropdown,
  #mdr-discover-form div.phone-content select.phone-countries-dropdown,
  #mdr-edit-form div.phone-content select.phone-countries-dropdown {
    width: 22%;
    background: unset;
  }
}