.clickable-container {
  cursor: pointer;
  margom
}

.card.service-details {
  background-color: transparent;
  font-size: .875rem;
}

.card {
  border-color: #D9D9D9;
  border-radius: .375rem 0 .375rem 0;
  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,.125);
    border-top-color: rgba(0, 0, 0, 0.125);
    border-right-color: rgba(0, 0, 0, 0.125);
    border-bottom-color: rgba(0, 0, 0, 0.125);
    border-left-color: rgba(0, 0, 0, 0.125);
}

.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
}


@media screen and (max-width: 767.99px) {
  .card .card-body {
    padding: 1rem;
  }
}


.card-ribbon.card-ribbon-primary {
  color: #fff;
  background: #0C7492;
}
.card-ribbon {
  white-space: nowrap;
  width: min-content;
  padding: .5rem 3rem;
  font-size: .778rem;
  border-radius: .375rem 0 .375rem 0;
}

.service-list .service-details {
	margin-bottom: 20px;
}

.card.service-details {
  background-color:transparent;
  font-size:.875rem
}
.card.service-details .stars {
  cursor:pointer
}
.card.service-details .grid {
  display:grid;
  column-gap:1.25rem;
  row-gap:1.25rem;
  max-width:100%;
  grid-template-columns:8rem 1fr 30%;
  grid-template-rows:max-content max-content
}
.card.service-details .grid>.service-provider {
  grid-row:span 2
}

.card.service-details .grid>.service h3 {
  font-size:1.3rem
}
.card.service-details .grid>.prices {
  margin-left:auto;
  display:flex;
  flex-direction:column
}
.card.service-details .grid>.prices .ranges {
  color:#4F4F4F;
  display:grid;
  column-gap:.5rem;
  grid-template-columns:max-content max-content;
  grid-auto-rows:1.5rem;
  align-items:center;
  justify-content:flex-end
}
.card.service-details .grid>.prices .ranges .price {
  text-align:right
}
.card.service-details .grid>.prices .ranges .price:first-child {
  color:#212529;
  font-size:1.3rem
}
@media screen and (max-width:767.99px) {
  .card.service-details .grid>.prices .ranges .price:first-child {
    font-size:1rem
  }
}
.card.service-details .grid>.prices .range-circle {
  justify-content:flex-end
}
.card.service-details .grid>.properties {
  margin-top:auto
}
.card.service-details .grid>.properties .text-with-icon {
  margin:.25rem 0
}
.card.service-details .grid>.actions {
  margin-left:auto;
  margin-top:auto
}


.stars-wrapper {
  display: flex;
  align-items: center;
  border: 0;
  background: none;
  overflow: visible;
  padding: 5px;
  margin-left: 12px;
}


.card.service-provider-details .stars {
  cursor:pointer
}
.card.service-provider-details .grid {
  display:grid;
  column-gap:1.25rem;
  row-gap:1.25rem;
  max-width:100%;
  grid-template-columns:8rem 1fr 30%;
  grid-template-rows:min-content min-content
}
.card.service-provider-details .grid>.service-provider {
  grid-row:span 2
}

.card.service-provider-details .grid>.title {
  grid-column:span 2
}
.card.service-provider-details .grid>.title h3 {
  font-size:1.3rem
}
.card.service-provider-details .grid>.properties {
  margin-top:auto
}
.card.service-provider-details .grid>.properties .text-with-icon {
  margin:.25rem 0
}
.card.service-provider-details .grid>.actions {
  margin-left:auto;
  margin-top:auto
}
.card.service-provider-details .grid>.actions>div {
  margin:1rem 0
}
@media screen and (max-width:1199.99px) {
  .card.service-provider-details .grid {
    grid-template-columns:8rem 1fr 35%
  }
}
@media screen and (max-width:767.99px) {
  .card.service-provider-details .grid {
    grid-template-columns:5.5rem auto;
    column-gap:1rem;
    row-gap:1rem
  }
  .card.service-provider-details .grid>.service-provider {
    grid-row:unset
  }
  .card.service-provider-details .grid>.service-provider .avatar {
    margin-right:1rem
  }
  .card.service-provider-details .grid>.title {
    grid-column:unset
  }
  .card.service-provider-details .grid>.properties {
    grid-column:span 2
  }
  .card.service-provider-details .grid>.actions {
    grid-column:span 2;
    margin:unset
  }
  .card.service-provider-details .grid>.actions>div {
    margin:.25rem 0
  }
}

.price {
  display: inline-block;
}

.card.service-details .grid > .properties {
  margin-top: auto;
}

.card.service-details .grid > .properties .text-with-icon {
  margin: .25rem 0;
}

.card.service-details .grid > .actions {
  margin-left: auto;
  margin-top: auto;
  margin-right: 10px;
}

.avatar.avatar-new {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8rem;
  height: 8rem;
  min-width: 8rem;
  min-height: 8rem;
  border: 1px solid #d9d9d9;
  border-radius: .375rem;
  text-align: center;
  overflow: hidden;
}

@media screen and (max-width:767.99px) {
  .avatar.avatar-new {
    width:5.5rem;
    height:5.5rem;
    min-width:5.5rem;
    min-height:5.5rem
  }
  .avatar.avatar-new i {
    font-size:3.8rem
  }
}

[type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled), button:not(:disabled) {
  cursor: pointer;
}

.card.service-details .stars {
  cursor: pointer;
}

.stars-wrapper .stars {
  white-space: nowrap;
}

[type="button"], [type="reset"], [type="submit"], button {
  -webkit-appearance: button;
}
button, button:active {
  outline: none;
}
button {
  background-color: transparent;
  outline: none;
  border: 0;
  cursor: pointer;
}
button, select {
  text-transform: none;
}
button, input {
  overflow: visible;
}
button, input, optgroup, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button {
  border-radius: 0;
}

.text-underline {
  text-decoration: underline;
}
.mb-2, .my-2 {
  margin-bottom: .5rem !important;
}
.mt-2, .my-2 {
  margin-top: .5rem !important;
}
.d-block {
  display: block !important;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

.break-word {
  word-break: break-word;
  overflow-wrap: break-word;
}

.font-size-small {
  font-size: .778rem;
}

.font-weight-medium {
  font-weight: 500;
}

.text-muted {
  color: #626769 !important;
}

.text-with-icon {
  display: flex;
  align-items: center;
}

.text-with-icon > span {
  margin: 0 .5rem;
}

.text-right {
  text-align: right !important;
}


.justify-content-end {
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}

.align-items-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.row, [class^="col-"] {
  background-color: inherit;
}
.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}
.flex-nowrap {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}
.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.link-with-icon {
  display: inline-flex;
  align-items: center;
}
.text-nowrap {
  white-space: nowrap !important;
}

.btn.btn-new.btn-secondary {
  color: #fff;
  background-color: #B61928;
  border-color: #B61928;
}
.btn.btn-new {
  font-size: .875rem;
  border-radius: .375rem;
  padding: .45rem 1.75rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

@media screen and (max-width:1199.99px) {
  .card.service-details .grid {
    grid-template-columns:8rem 1fr 35%
  }
}
@media screen and (max-width:767.99px) {
  .card.service-details .grid {
    grid-template-columns:1fr 1fr;
    column-gap:1rem;
    row-gap:1rem
  }
  .card.service-details .grid>.service-provider {
    grid-row:unset;
    grid-column:span 2;
    order:2
  }
  .card.service-details .grid>.service-provider .avatar {
    float:left;
    margin-right:1rem
  }
  .card.service-details .grid>.service {
    grid-column:span 2;
    order:1
  }
  .card.service-details .grid>.properties {
    order:3;
    margin:auto 0
  }
  .card.service-details .grid>.prices {
    order:4;
    margin:auto 0
  }
  .card.service-details .grid>.prices .range-circle {
    flex-direction:column
  }
  .card.service-details .grid>.prices .range-circle .range-label {
    order:2
  }
  .card.service-details .grid>.actions {
    order:5;
    grid-column:span 2
  }
  .stars-wrapper {
    margin-left: 0px;
  }



}