/*================================= Fields ==================================*/
.field,
.field-group {
  display: block;
  width: 100%;
  position: relative;
}
.field-entry-group,
.field-group-join {
  display: flex;
  flex-wrap: nowrap;
  flex-flow: row nowrap;
}

.field-entry-group .field-entry,
.field-entry-group .btn-default {
  height: 100%;
}

.field-entry-group > .flex-grow-1 {
  flex-grow: 1;
  flex-basis: 100%;
}

.field-entry-group .field-entry,
.field-entry-group .btn-default,
.field-group-join .field-group .field-entry,
.field-group-join .field-group .field-entry-group .field-entry,
.field-group-join .field .field-entry,
.field-group-join .field .field-entry-group .field-entry {
  border-radius: 0;
}
.field-entry-group > .field-entry:first-child,
.field-entry-group > .btn-default:first-child,
.field-entry-group > *:first-child .field-entry,
.field-entry-group > *:first-child .btn-default,
.field-group-join .field-group:first-child > .field-entry,
.field-group-join .field-group:first-child > .field-entry-group > .field-entry:first-child,
.field-group-join .field:first-child > .field-entry,
.field-group-join .field:first-child > .field-entry-group > .field-entry:first-child {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.field-entry-group > .field-entry:last-child,
.field-entry-group > .btn-default:last-child,
.field-entry-group > *:last-child .field-entry,
.field-entry-group > *:last-child .btn-default,
.field-group-join .field-group:last-child > .field-entry,
.field-group-join .field-group:last-child > .field-entry-group > .field-entry:last-child,
.field-group-join .field:last-child > .field-entry,
.field-group-join .field:last-child > .field-entry-group > .field-entry:last-child {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.field-entry-group .field-entry,
.field-group-join .field-group,
.field-group-join .field {
  flex-grow: 1;
  flex-basis: 0;
  max-width: 100%;
}

.field-entry-group > * {
  flex: 1;
}


.field-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.125rem;
  font-weight: bold;
}
.field-disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}
.field-required .field-label::before {
  content: '* ';
  color: red;
}
.field-description {
  display: block;
  margin-bottom: 0.25rem;
}
.field-description a {
  display: inline-block;
  text-decoration: none;
}
.field-description,
.field-description a {
  font-size: 0.875rem;
  line-height: 1.125rem;
  font-weight: normal;
}

.field-error-message {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.125rem;
  font-weight: normal;
}
.fields-entry-no-style {
  margin: 0;
  padding: 0;
  border: none;
  outline: 0;
  box-shadow: none;
  appearance: none;
}

.field-entry {
  width: 100%;
  font-size: 1rem;
  line-height: 1.125rem;
  cursor: text;
  padding: 0.75rem;
  border-radius: 0.25rem;
  display: inline-block;
  vertical-align: middle;
  border-style: solid;
  border-width: 1px;
}

input.field-entry {
  appearance: none;
  outline: none;
}
.field-entry::-ms-clear {
  display: none;
}
textarea.field-entry {
  line-height: 1.25rem;
  resize: vertical;
}
select.field-entry {
  cursor: pointer;
  font-size: 0.875rem;
}
.field-entry:not(select) {
  /* Ajuste safari iphone */
  appearance: none;
}

.field-entry[readonly],
.field-entry:disabled {
  pointer-events: none;
  touch-action: none;
  user-select: none;
  cursor: no-drop !important;
}

.field-error .field-entry,
.field-entry-error {
  position: relative;
  z-index: 1;
}

.field-small .field-entry,
.field-group-small .field-entry,
.field-entry-small {
  padding: 0.5rem;
  padding-right: 2.25rem;
}

.field-obs{
  width: 97%;
}

.field-medium .field-entry,
.field-group-medium .field-entry,
.field-entry-medium {
  padding: 0.75rem;
  padding-right: 2.5rem;
}
.field-large .field-entry,
.field-group-large .field-entry,
.field-entry-large {
  padding: 1.125rem;
  padding-right: 2.8rem;
}

.field-color {
  width: 100%;
}
.field-small .field-color {
  height: 36px;
}
.field-medium .field-color {
  height: 44px;
}
.field-large .field-color {
  height: 56px;
}

.field-icon {
  display: block;
  position: absolute;
  line-height: 1.25rem;
  text-align: center;
}
.field-icon-right {
  right: 0;
}
.field-small .field-icon,
.field-group-small .field-icon {
  width: 2rem;
  margin-bottom: calc(-1.25rem - 0.375rem - 0.375rem);
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.field-small .field-icon:not(.field-icon-right) + .field-entry,
.field-group-small .field-icon:not(.field-icon-right) + .field-entry {
  padding-left: 2rem;
}
.field-small .field-icon-right + .field-entry,
.field-group-small .field-icon-right + .field-entry {
  padding-right: 2rem;
}

.field-medium .field-icon,
.field-group-medium .field-icon {
  width: 2.75rem;
  margin-bottom: calc(-1.25rem - 0.75rem - 0.75rem);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.field-medium .field-icon:not(.field-icon-right) + .field-entry,
.field-group-medium .field-icon:not(.field-icon-right) + .field-entry {
  padding-left: 2.75rem;
}
.field-medium .field-icon-right + .field-entry,
.field-group-medium .field-icon-right + .field-entry {
  padding-right: 2.75rem;
}

.field-large .field-icon,
.field-group-large .field-icon {
  width: 3.5rem;
  margin-bottom: calc(-1.25rem - 1.125rem - 1.125rem);
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
}
.field-large .field-icon:not(.field-icon-right) + .field-entry,
.field-group-large .field-icon:not(.field-icon-right) + .field-entry {
  padding-left: 3.5rem;
}
.field-large .field-icon-right + .field-entry,
.field-group-large .field-icon-right + .field-entry {
  padding-right: 3.5rem;
}

.checkbox,
.radio {
  display: block;
  width: 100%;
  position: relative;
  cursor: pointer;
}
.radio-inline,
.checkbox-inline {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  padding-right: 2rem;
}
.field-group-inline {
  display: inline-block;
  vertical-align: middle;
  width: auto;
}
.checkbox-small,
.radio-small {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.checkbox-medium,
.radio-medium {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.checkbox-large,
.radio-large {
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
}

.checkbox-entry,
.radio-entry {
  display: none;
}
.checkbox-text,
.radio-text {
  position: relative;
  display: block;
  width: auto;
  padding-left: 2rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.25rem;
  user-select: none;
}
.checkbox-text:empty,
.radio-text:empty {
  padding-left: 0;
  width: 1.125rem;
  height: 1.125rem;
}
.checkbox-disabled,
.radio-disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.checkbox-description,
.radio-description {
  padding-left: 2rem;
  display: block;

  font-size: 0.875rem;
  line-height: 1.125rem;
  font-weight: normal;
}

.checkbox-text::before,
.radio-text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  width: 1rem;
  height: 1rem;
  border-style: solid;
  border-width: 1px;
  border-radius: 0.125rem;
}
.radio-text::before {
  border-radius: 50%;
}



/*================================= Buttons ==================================*/
.btn-default {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  cursor: pointer;
  overflow: hidden;
  position: relative;

  border: 1px solid transparent;
  border-radius: 0.25rem;

  text-decoration: none;
  white-space: nowrap;
}

@media (pointer: fine) {
  .btn-default:hover {
    filter: brightness(0.88);
  }
}
.btn-default i,
.btn-default img,
.btn-default svg,
.btn-default span {
  font-size: 0.875rem;
  line-height: 1.125rem;
}
.btn-default i,
.btn-default svg,
.btn-default img {
  width: 1.125rem;
  height: 1.125rem;
}
.btn-default span {
  font-weight: bold;
  letter-spacing: 0.5px;
}
.btn-default i + span,
.btn-default svg + span,
.btn-default img + span {
  margin-left: 0.25rem;
}
.btn-default span + i,
.btn-default span + svg,
.btn-default span + img {
  margin-left: 0.25rem;
}
.btn-default:not(.btn-loading):disabled {
  opacity: 0.38;
  cursor: no-drop;
}
.btn-loading {
  cursor: progress;
}
.btn-loading > * {
  opacity: 0;
}
.btn-loading::after {
  content: '';
  position: absolute;
  width: 2rem;
  height: 2rem;
  background-size: 2rem 2rem !important;
  background-position: center center !important;
  background: url('../../img/loading-white.svg');
  right: calc(50% - 1rem);
  bottom: calc(50% - 1rem);
}
.btn-loading.light::after,
.btn-outline.btn-loading::after {
  background: url('../../img/loading-black.svg');
}
.btn-full {
  width: 100%;
}
.btn-small {
  padding: 0.5rem 1rem;
}
.btn-medium {
  padding: 0.75rem 1.5rem;
}
.btn-large {
  padding: 1.125rem 2.25rem;
}
.btn-small-square {
  padding: 0.5rem;
  min-width: 2.250rem;
}
.btn-medium-square {
  padding: 0.75rem;
  min-width: 2.75rem;
}
.btn-large-square {
  padding: 1.125rem;
  min-width: 3.5rem;
}
.btn-group {
  display: flex;
  flex-wrap: nowrap;
  flex-flow: row nowrap;
}
.btn-group .btn-default {
  border-radius: 0;
}
.btn-group .btn-default:first-child {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.btn-group .btn-default:last-child {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  opacity: 2;
  border-radius: 5px;
}
input.range-slider:hover {
  opacity: 1;
}
input.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 50px;
}

/*================================= Modal ==================================*/
/*==== #modal utilizado no Retirar na Loja (endereços disponiveis) =========*/

#arrow,
#arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

#arrow {
  visibility: hidden;
}

#arrow::before {
  visibility: visible;
  content: '';
  transform: rotate(45deg);
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
}

.popover-container {
  display: inline-block;
}

.table-price-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.25rem;
  cursor: pointer;
}

.text-price{
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

#arrow-modal,
#arrow-modal::before {
  position: absolute;
  left: 25%;
  top: -2px;
  width: 8px;
  height: 8px;
  background: inherit;
}

#arrow-modal {
  visibility: hidden;
}

#arrow-modal::before {
  visibility: visible;
  content: '';
  transform: rotate(45deg);
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
}
.modal-popover {
  position: absolute;
  left: -5rem;
  background: white;
  padding: 12px 14px;
  margin-top: -10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  max-width: 450px;
  text-align: left;
  color: #0D0D0D;
}

.modal-popover {
  display: none;
}

.text-address{
  font-size: 12px;
  gap: 0.2rem;
  cursor: pointer;
  line-height: 0.25rem;
}

.modal-popover h4 {
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
}

.modal-popover p {
  font-size: 14px;
  line-height: 20px;
  margin-top: 0.4rem;
}

.popover-table-price:hover .modal-popover{
  display: block;
  z-index: 10;
}

table.tablemodal {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ccc;
}

table.tablemodal thead tr th {
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  text-align: left;
  padding: 8px;
}

table.tablemodal tbody tr th {
  text-align: left;
  padding: 8px;
  font-weight: 400;
  font-size: 14px;
}

table.tablemodal thead tr {
  background-color: #ccc;
}

table.tablemodal thead tr:nth-child(even) {
  background-color: #ccc;
}

@media only screen and (max-width: 800px) {
  .modal-popover {
      max-width: 100vw;
      left: 0rem;
  }
}

@media only screen and (min-width:767px) and (max-width: 769px) {
  .modal-popover {
      max-width: 100vw;
      left: -3rem;
  }
}