/*
  Style podstawowe i wspólne dla frontendu i admina
*/

:root {
  font-size: 16px;
}

/* Domyślny rozmiar fonta w przeglądarkach to 16px, zmieniamy to tak żeby 1em = 10px, dla całego serwisu ustawiamy 1.2em */
body {
  font-family: 'Open Sans', Helvetica, sans-serif;
}

.hover:hover {
  opacity: 0.75;
  cursor: pointer;
}

/* globalne wyszarzenie */
.grayscale-filter {
  filter: grayscale(100%);
}

.css-lazy-load {
  background: none !important;
}

/* guzik do koszyka */
.ask-for-project-btn {
  width: 275px;
  padding: 20px 0;
  border: 0 none;
  font: inherit;
  color: #fff;
  cursor: pointer;
  font-size: 28px;
  outline: none;
  text-transform: uppercase;
  background: #ca1d61;
}

.add-to-cart:hover,  .ask-for-project-btn:hover {
  opacity: 0.5;
}

.add-to-cart i,  .ask-for-project-btn i {
  margin-right: 20px;
}

/* styl niezaznaczalnego elementu */
.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.link-color {
  color: var(--link-color);
}

/* uniwersalny ostylowany checkbox dla zestawu input + label*/
input[type="checkbox"].styled, input[type="radio"].styled {
  position: absolute;
  clip: rect(0,0,0,0);
}
input[type="checkbox"].styled + label, input[type="radio"].styled + label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

input[type="checkbox"].styled + label:before, input[type="radio"].styled + label:before {
  background: transparent url('../images/checkbox.png') no-repeat 0 0;
  display: inline-block;
  content: "";
  width: 30px;
  height: 30px;
}
input[type="checkbox"].styled:hover + label:before, input[type="radio"].styled:hover + label:before { background-position: 0 -30px; }
input[type="checkbox"].styled:checked + label:before, input[type="radio"].styled:checked + label:before { background-position: 0 -60px; }
input[type="checkbox"].styled:checked:hover + label:before, input[type="radio"].styled:checked:hover + label:before { background-position: 0 -90px; }


.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000c;
}

/* przycisk dodania do ulubionych */
.favorites-add-remove {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
}

/* tooltip - zamiennik wypierający zqm-hint */
.ui-tooltip {
  background: #fff;
  padding: 20px;
  box-shadow: 2px 2px 5px #999;
  -webkit-box-shadow: 2px 2px 5px #999;
}

.ui-tooltip.ui-widget-content {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0;
}

.ui-tooltip .arrow {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
}

.ui-tooltip .arrow.top {
  top: -16px;
  bottom: auto;
}

.ui-tooltip .arrow.left {
  left: 5%;
  right: initial;
}

.ui-tooltip .arrow.right {
  right: 5%;
  left: initial;
}

.ui-tooltip .arrow:after {
  content: "";
  position: absolute;
  left: 20px;
  top: -20px;
  width: 25px;
  height: 25px;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 6px 5px 9px -9px black;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.ui-tooltip .arrow.top:after {
  bottom: -20px;
  top: auto;
}

/* kółeczko z '?' - dla tooltipa/hinta */
.hint.fa-question-circle, .z-hint.fa-question-circle {
  color: #aaa;
  font-size: 20px;
}
.hint.fa-question-circle:hover, .z-hint.fa-question-circle:hover  {
  color: #ca1d61;
}

/* fix dla współdziałania z colorbox */
.ui-autocomplete.ui-front { z-index: 9999; }

/* stylizowane checkboxy */
.onoffswitch {
  position: relative;
  display: inline-block;
  width: 80px;
  margin-right: 1em;
  vertical-align: middle;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select: none;
}
.onoffswitch input[type="checkbox"] {
  display: none;
}
.onoffswitch label {
  display: block;
  position: relative;
  left: 0;
  overflow: hidden;
  cursor: pointer;
  width: 80px;
  height: 36px;
  padding: 0;
  line-height: 36px;
  border-radius: 36px;
  background-color: #aaa;
  transition: background-color 0.3s ease-in;
}
.onoffswitch label:before {
  content: "";
  display: block;
  width: 56px;
  margin: 0px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  border: 2px solid #aaa;
  border-radius: 36px;
  transition: all 0.3s ease-in 0s;
  background-color: #aaa;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAyklEQVQ4T42TaxHCQAyENw5wAhLACVUAUkABOCkSwEkdhNmbpHNckzv689L98toIAKjqGcAFwElEFr5ln6ruAMwA7iLyFBM/TPDuQSrxwf6fCKBoX2UMIYGYkg8BLOnVg2RiAEexGaQQq4w9e9klcxGLLAUwgDAcihlYAR1IvZA1sz/+AAaQjXhTQQVoe2Yo3E7UQiT2ijeQdojRtClOfVKvMVyVpU594kZK9zzySWTlcNqZY9tjCsUds00+A57z1e35xzlzJjee8xf0HYp+cOZQUQAAAABJRU5ErkJggg==");
  background-size: 14px auto;
  background-repeat: no-repeat;
  background-position: 80% 50%;
  z-index: 1;
}

.onoffswitch label:after {
  content: "";
  display: block;
  position: absolute;
  left: 2px;
  top: 2px;
  width: 36px;
  height: 32px;
  background-color: #fff;
  transition: all 0.3s;
  z-index: 2;
  border-radius: 18px;
}

.onoffswitch label * {
  box-sizing: content-box;
}

.onoffswitch input[type="checkbox"]:checked + label {
  background-color: #ca1d61;
}

.onoffswitch input[type="checkbox"]:checked + label:after {
  left: 42px;
}

.onoffswitch input[type="checkbox"]:checked + label:before {
  right: initial;
  border: 2px solid #ca1d61;
  background-color: #ca1d61;
  background-position: 30% 50%;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAmUlEQVQ4T6WT0RWDMAhFeZs4ipu0mawZpaO4yevBc6hUIWLNd+4NeQDk5sE/PMkZwFvZywKSTxF5iUgH0C4JHGyF97IggFVSqyCFga0CvQSg70Mdwd8QSSr4sGBMcgavAgdvwQCtApvA2uKr1x7Pu++06ItrF5LXPB/CP4M0kKTwYRIDyRAOR9lJTuF0F0hOAJbKopVHOZN9ACS0UgowIx8ZAAAAAElFTkSuQmCC");
}

.onoffswitch + span { display: inline-block; }

.onoffswitch.small { width: 40px; }

.onoffswitch.small label {
  width: 54px;
  height: 22px;
  padding-right: 15px;
  line-height: 22px;
  border-radius: 22px;
}

.onoffswitch.small input[type="checkbox"]:checked + label:after { left: 32px; }
.onoffswitch.small label:before { border-radius: 20px; background-size: 10px auto; }
.onoffswitch.small input[type="checkbox"]:checked + label:before { background-position: 20% 50%; }
.onoffswitch.small label:after { width: 20px; height: 18px; border-radius: 10px; }

.hide { display: none; }

.break-line {
  margin-bottom: 10px;
}

@media (max-width: 1650px) {
  #not-found .message { top: 32vw; left: 50%; width: 650px; margin-left: -190px; }
}

@media (max-width: 1280px) {
  #not-found .message { top: 35vw; left: 44vw; width: 500px; }
  #not-found h1 { display: none; }
}

@media (max-width: 1160px) {
  #not-found .message { line-height: 1.5em; font-size: 16px; }
  #not-found .message h1 { font-size: 30px; }
}

@media (max-width: 900px) {
  #not-found .message { top: 35vw; left: 43vw; width: 400px; }
}

@media (max-width: 750px) {
  #not-found .message { top: 36vw; left: 50%; width: 300px; margin-left: -150px; }
  #not-found { background: #fff; }
  #not-found picture { visibility: hidden; }
}