/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
   white-space: normal;
   text-align: center;
   word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
   color: #0366d6;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
   color: #fff;
   background-color: #1b6ec2;
   border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
   font-size: 14px;
}

@media (min-width: 768px) {
   html {
      font-size: 16px;
   }
}

.border-top {
   border-top: 1px solid #e5e5e5;
}

.border-bottom {
   border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
   box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}


/* Sticky footer styles
-------------------------------------------------- */
html {
   position: relative;
   min-height: 100%;
}

body {
   /* Margin bottom by footer height*/
   margin-bottom: 60px;
}

.footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   white-space: nowrap;
   line-height: 30px; /* Vertically center the text there */
   background-color: #F8F8F8;
}


/* Star ratings
-------------------------------------------------- */
.star-rating-block {
   position: relative;
   cursor: pointer;
   display: inline-block;
   user-select: none;
}

   .star-rating-block .star-rating-stars {
   }

   .star-rating-block .star-rating-editor {
      visibility: hidden;
      width: 264px;
      background-color: white;
      color: black;
      text-align: center;
      border-radius: 6px;
      border: 1px solid #00000040;
      padding: 8px 0px 0px 0px;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -132px;
   }

   .star-rating-block .show {
      visibility: visible;
   }


.stars {
   width: fit-content;
   margin: 0 auto;
   cursor: pointer;
}

   .stars .star {
      color: #91a6ff !important;
   }

   .stars .rate {
      height: 50px;
      margin-left: -5px;
      padding: 5px 8px 5px 8px;
      font-size: 25px;
      position: relative;
      cursor: pointer;
   }

      .stars .rate input[type="radio"] {
         opacity: 0;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%,0%);
         pointer-events: none;
      }

   .stars .star-over::after {
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      font-size: 16px;
      content: "\f005";
      display: inline-block;
      color: #d3dcff;
      z-index: 1;
      position: absolute;
      top: 14px;
      left: 13px;
   }

   .stars .rate:nth-child(1) .face::after {
      content: "\f119"; /* ☹ */
   }

   .stars .rate:nth-child(2) .face::after {
      content: "\f11a"; /* 😐 */
   }

   .stars .rate:nth-child(3) .face::after {
      content: "\f118"; /* 🙂 */
   }

   .stars .rate:nth-child(4) .face::after {
      content: "\f580"; /* 😊 */
   }

   .stars .rate:nth-child(5) .face::after {
      content: "\f59a"; /* 😄 */
   }

   /* emoji box */
   .stars .face {
      opacity: 0;
      position: absolute;
      width: 35px;
      height: 35px;
      background: #91a6ff;
      border-radius: 5px;
      top: -50px;
      left: 3px;
      transition: 0.2s;
      pointer-events: none;
   }

/* arrow */
.face::before {
   font-family: 'Font Awesome 5 Free';
   font-weight: 900;
   content: "\f0dd";
   display: inline-block;
   color: #91a6ff;
   z-index: 1;
   position: absolute;
   left: 9px;
   bottom: -15px;
}

/* emoji face common */
.face::after {
   font-family: 'Font Awesome 5 Free';
   font-weight: 900;
   display: inline-block;
   color: #ffffff;
   z-index: 1;
   position: absolute;
   left: 5px;
   top: -1px;
}

.stars .rate:hover .face {
   opacity: 0.9;
}


/* Webshop
-------------------------------------------------- */
body {
   font: 1.0625rem/1.5 "Varela Round", "Segoe UI Web Regular","Segoe UI Regular WestEuropean","Segoe UI",Tahoma,Arial,Roboto,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

.container-webshop-body {
   padding-top: 93px;
}

.container-webshop-admin-body {
}

.savedata-spinner {
   width: 1.8rem; 
   height: 1.8rem;
   vertical-align:middle;
}

.cart-badge {
   font-size: 16px;
   font-weight: 500;
   padding-top: 5px;
   padding-bottom: 4px;
   position:relative;
   left:10px;
   margin-left:-30px;
   top:-6px;
}

.nopadding {
   padding: 0px !important;
   margin: 0px !important;
}

.admin-leftmenu {
   background-color: #f8f8f8;
   padding: 0px !important;
   margin: 0px !important;
   width: 100px;
}

.table-hrk-eur-price tr {
   background-color: rgba(0,0,0, 0.0) !important;
   line-height: 20px;
}

.table-hrk-eur-price table {
   background-color: rgba(0,0,0, 0.0) !important;
}

.table-hrk-eur-price td {
}

.hrk-eur-currency-badge {
   width: 34px;
   text-align: right !important;
   font-size: small;
   opacity: 0.7;
   text-transform: uppercase;
   margin-left: 8px;
}

.toast-top-center {
   position: absolute;
   top: 30px;
   left: 50%;
   max-width: 80%;
   transform: translate(-50%, 0);
}

.toast-add-product-content {
   background-color: green;
   color: wheat;
   font-weight: bold;
   font-size: 20px;
   padding: 12px 22px 12px 22px;
   text-align: center;
}

.btn-circle {
   width: 44px;
   height: 44px;
   padding: 8px 0px 0px 0px;
   border-radius: 22px;
   text-align: center;
   font-size: 20px;
}

.shop-hero-image-container {
   width:970px;
   height:250px;
   overflow:hidden;
   margin:auto;
}
/*.shop-hero-image {
   margin-bottom: 0px;
   width:970px;
   object-position:top;
   z-index: -100;
}
*/
.shop-hero-image {
   width: 100%;
   object-fit: cover;
   object-position: 0px 0px;
}

.shop-header-cart, .shop-header-orders, .shop-header-webshop {
   border: 0px;
   min-height: 44px;
   vertical-align: middle;
   background-color: #97BD00;
   color: white;
}

.shop-header-orders {
   padding: 7px 0px 0px 2px;
}

.shop-header-webshop {
   padding: 9px 0px 0px 1px;
   font-size: 17px;
}

.shop-header-cart:hover {
   color: #009000 !important;
}

.shop-header-orders:hover {
   color: #009000 !important;
}

.shop-header-webshop:hover {
   color: #009000 !important;
}

.shop-header-burzahrane {
   margin-top: -11px;
}

.row-centered {
   display: flex;
   justify-content: center;
}

.rating-star-on {
   color: #97BD00;
}

.rating-star-off {
   color: #00000030;
}

.form-control {
   border-radius: 16px;
}

.btn-primary {
   background-color: #97BD00 !important;
   border:0px;
   border-color: #1861ac !important;
   color: #ffffff !important;
   border-radius: 20px;
   padding: 8px 20px 8px 20px;
}

   .btn-primary:hover {
      background-color: #97BD00 !important;
      color: #004000 !important;
   }

   .btn-primary:disabled {
      background-color: #E0E0E0 !important;
      color: black !important;
   }

.btn-danger {
   border-radius: 20px;
   padding: 8px 20px 8px 20px;
}

a.btn {
   color: #ffffff !important;
}

.btn-accept-policy {
   float: right;
   font-size: 16px;
   max-height:48px;
   margin-left:12px;
}

.highlighted-section {
   padding: 14px;
   background-color: #FCFCFC;
   border: 1px solid #E0E0E0;
   border-radius: 10px;
}

.shop-nav {
   width: 100%;
   height:92px;
   margin: 0px !important;
   padding: 10px 8px 10px 8px;
}
.shop-nav-content {
   height:100%;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: stretch;
   align-content:space-around;
}
.shop-nav-content-left {
   align-self:center;
   margin-right:auto;
   display:flex;
   flex-direction:row;
   flex-wrap:nowrap;
}
.shop-nav-content-right {
   align-self:center;
   margin-left: auto;
}
.shop-logo-container {
   max-width: 220px;
   max-height: 80px;
   overflow:hidden;
   align-self:center;
}
.shop-logo {
   object-fit:none;
}
.shop-title {
   margin: 0px 8px 0px 8px;
   vertical-align: middle;
   align-self:center;
   overflow: hidden;
}

.companyinfo-block {
   padding-left:20px;
   padding-top:20px;
   width:75%;
}

.companyinfo-form-group {
   text-align: left !important;
   margin-left: 0%;
   margin-right: 0%;
}

.companyinfo-form-label {
   font-size: 0.9em;
   padding: 0px 0px 2px 12px;
}

.companyinfo-form-right-padding {
   padding-right: 12px !important;
}

.companyinfo-control {
}

@media (max-width: 320px) {
   .shop-hero-image {
      height: calc(100vw * 0.3);
   }
}

@media (max-width: 500px) {
   .container-webshop-body {
      padding-top: 140px;
   }

   .shop-nav {
      height: 146px;
   }

   .shop-nav-content {
      align-items: center;
      flex-direction: column;
   }

   .shop-nav-content-left {
      margin-left: auto;
      align-content:center;
   }

   .shop-logo {
      max-width:100px;
      object-fit:cover;
   }

   .shop-nav-content-right {
      margin: auto;
   }

   .shop-header-cart {
      margin-left: 4px;
      margin-bottom: 0px;
   }

   .shop-header-webshop {
      margin-bottom: 0px;
   }

   .shop-header-orders {
      margin-bottom: 0px;
   }

   .shop-header-burzahrane {
      margin-bottom: 0px;
   }
}

@media (max-width: 750px) {
   .companyinfo-form-right-padding {
      padding-right: 0px !important;
   }
}

@media (max-width: 920px) {
   .companyinfo-block {
      width: 100%;
   }
}

@media (max-width: 991px) {
   .shop-hero-image-container {
      width: 100vw;
      height: calc(100vw * 250 / 970);
   }
   .shop-hero-image {
      width: 100vw;
      object-fit:cover;
   }
   .shop-subtitle {
      width: 100vw;
      padding-left:20px;
      padding-right:20px;
   }
}

@media (min-width: 10px) {
   body {
      /* Margin bottom by footer height */
      margin-bottom: 360px;
   }
}

@media (min-width: 440px) {
   body {
      /* Margin bottom by footer height */
      margin-bottom: 240px;
   }
}

@media (min-width: 640px) {
   body {
      /* Margin bottom by footer height */
      margin-bottom: 230px;
   }
}

@media print {
   header {
      display: none;
   }

   footer {
      display: none;
   }
}

.lang-tab-item-title {
   display: normal;
}

.lang-tab-item-title-small {
   display: normal;
   text-transform: uppercase;
}

@media (max-width: 450px) {
   .lang-tab-item-title {
      display: none;
   }

   .lang-tab-item-title-small {
      display: normal;
   }
}

@media (min-width: 450px) {
   .lang-tab-item-title {
      display: normal;
   }

   .lang-tab-item-title-small {
      display: none;
   }
}