/*
Theme Name: Dermatologist Clinic Pro
Theme URI: 
Author: primethemes
Author URI: https://www.primewordpress.com/
Description: 
Version: 0.0.1
Requires at least: 5.8.0
Tested up to: 6.0.3
Requires PHP: 7.2
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: dermatologist-clinic-pro
Tags: one-column, two-columns, left-sidebar, right-sidebar, grid-layout, custom-colors, custom-background, custom-header, custom-menu, custom-logo, editor-style, sticky-post, featured-images, footer-widgets, full-width-template, threaded-comments, theme-options, wide-blocks, block-styles, blog, food-and-drink, e-commerce

Dermatologist Pro WordPress Theme has been created by primewordpress(primewordpress.com), 2021.
Dermatologist Pro WordPress Theme is released under the terms of GNU GPL

/* Basic Style */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

.bypostauthor {
  font-weight: 600;
}

.onsale {
  text-transform: uppercase;
}

.wc-block-cart-item__wrap {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  position: relative;
}

.wc-block-components-product-name {
  font-family: Roboto;
  font-weight: 400;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #0A3D62;
}

span.price.wc-block-components-product-price span {
  white-space: nowrap;
  font-family: Roboto;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 8%;
  text-align: center;
  color: #0A3D62;
}

.wc-block-components-product-price__regular {
  white-space: nowrap;
  font-family: Roboto;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 8%;
  text-align: center;
  color: #0A3D62;
}

.wc-block-components-product-price__value.is-discounted {
  margin-left: .5em;
  white-space: nowrap;
  font-family: Roboto;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 8%;
  text-align: center;
  color: #3DC1D3;
}

.wc-block-cart-item__remove-link {
  font-family: Roboto;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 100%;
  letter-spacing: 0%;
  color: #F92D2D !important;
  position: absolute;
  right: 0;
  bottom: 10px;
}

.wc-block-components-product-badge.wc-block-components-sale-badge {
  font-family: Roboto;
  font-weight: 500;
  font-size: 10px;
  line-height: 100%;
  letter-spacing: 8%;
  color: #0A3D62;
  padding: 6px;
}

.wc-block-components-product-metadata__description p {
  font-family: Roboto;
  font-weight: 400;
  font-size: 12px;
  line-height: 124%;
  letter-spacing: 0%;
  color: #0A3D62;
  margin: 0;
  text-align: justify;
}

.is-large.wc-block-cart .wc-block-cart-items {
  background: #fff !important;
}

.wc-block-components-button:not(.is-link) {
  background: #FFC312;
  border-bottom-right-radius: 30px !important;
  padding: 20px 19px;
  font-family: Roboto;
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #F5F6FA;
  border-radius: unset;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 5px 5px 0px 0px #F5F6FA;
}

.is-large.wc-block-cart .wc-block-components-sidebar {
  margin-top: 0;
  background: #3DC1D3;
  max-height: fit-content;
  padding: 34px;
  border-bottom-right-radius: 30px;
}

.woocommerce a.button {
  height: auto;
  background: #FFC312;
  box-shadow: 5px 5px 0px 0px #F5F6FA;
  border-bottom-right-radius: 30px;
  padding: 18px 15px;
  font-family: Roboto;
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #FFFFFF;
  width: 100%;
  text-align: center;
}

.product-details {
  padding: 14px 12px;
}

h2.woocommerce-loop-product__title {
  font-family: Roboto;
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #0A3D62;

}

.woocommerce ul.products li.product a img {
  height: 200px;
  object-fit: contain;
}

.product-price h5 {
  font-family: Roboto;
  font-weight: 600;
  font-size: 20px;
  line-height: 126%;
  letter-spacing: 0%;
  color: #0A3D62;
  margin: 9px 0;
}

.product-title a {
  font-family: Roboto;
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #0A3D62;
}

.shop-products-box {
  background: #3DC1D3;
  height: 100%;
}

.imghover {
  height: 246px;
  background: #FFFFFF;

}

.imghover img {
  height: 100%;
  object-fit: contain;
}



.wc-block-components-totals-item__value span {
  white-space: nowrap;
  font-family: Roboto;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 8%;
  text-align: center;
  color: #fff;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button {
  margin-top: 0;
  padding-top: 0;
  font-family: Roboto;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #fff;
}

.wc-block-components-totals-item__label {
  font-family: Roboto;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #fff;
}

.wc-block-components-formatted-money-amount {
  font-family: Roboto;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #fff;
}

.is-large.wc-block-cart .wc-block-cart__totals-title {
  font-family: Roboto !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 100%;
  letter-spacing: 0%;
  color: #fff !important;
  margin-bottom: 22px !important;
}


/* loader */

.preloader {
  background: #18A69D;
  display: flex;
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 0;
  top: 0;
  position: fixed;
  z-index: 99999;
  align-items: center;
  justify-content: center;
}


/* HTML: <div class="loader"></div> */
.loader {
  width: 70px;
  aspect-ratio: 1;
  background:
    radial-gradient(farthest-side, #FFD443 90%, #0000) center/16px 16px,
    radial-gradient(farthest-side, #fff 90%, #0000) bottom/12px 12px;
  background-repeat: no-repeat;
  animation: l17 1s infinite linear;
  position: relative;
}

.loader::before {
  content: "";
  position: absolute;
  width: 8px;
  aspect-ratio: 1;
  inset: auto 0 16px;
  margin: auto;
  background: #ccc;
  border-radius: 50%;
  transform-origin: 50% calc(100% + 10px);
  animation: inherit;
  animation-duration: 0.5s;
}

@keyframes l17 {
  100% {
    transform: rotate(1turn)
  }
}