@import url("./jquery-ui.min.css");
@import url("./jquery-ui.structure.min.css");
@import url("./font.css");
@import url("./wienerberger.css");

/**
 * Error page
 */

.error-page {
  min-height:      calc(100vh - 300px);
  display:         flex;
  justify-content: center;
  align-items:     center;
}

/**
 * Editor
 */

.editor-template {
  display: none;
}

/**
 * Header spacing fix
 */

.ecx header.page__header .headerMainWrapper.fixed-top {
  position: fixed;
}

.headerMainWrapper .header-spacer {
  float:       right;
  height:      100px;
  line-height: 100px;
  margin-left: 20px;
  text-align:  center;
  width:       70px;
  font-size:   20px;
}

@media (max-width: 1024.98px) {
  .header-spacer {
    height:      78px;
    line-height: 78px;
    margin-left: auto
  }
}

/**
 * Form spacing fix
 */

.form-spacer-bottom {
  margin-bottom: 35px;
}

.title p.empty {
  padding: 20px 0;
}

.pl-22 {
  padding-left: 22px;
}

/**
 * Parsley form fix
 */

ul.parsley-errors-list {
  position: absolute;
  width:    100%;
}

ul.parsley-errors-list > li {
  white-space:   nowrap;
  text-overflow: ellipsis;
  overflow:      hidden;
}

.input-parsley-wrapper {
  padding-bottom: 10px;
}

.ecx .form-group input.parsley-error ~ .icon-check-light {
  top: 23%;
}

.ecx .form-group select.parsley-error ~ .icon-check-light,
.ecx .form-group textarea.parsley-error ~ .icon-check-light {
  top: 30%;
}

.ecx .form-group input.parsley-success ~ .icon-check-light {
  top: 40%;
}

/**
 * Assetbrowser adjustments
 */

.ecx .component {
  margin-bottom: 17px;
}

.product-info .product-info-date {
  position: absolute;
  right:    14px;
  bottom:   14px;
}

/**
 * Assetbrowser styles without initializing it
 */
.ecx .asset-browser-style .pin-count {
  align-items:    center;
  display:        flex;
  font-size:      14px;
  margin-bottom:  30px;
  vertical-align: middle
}

.ecx .asset-browser-style .pin-count .remove-all-pins {
  border-left:  1px solid #E1E1E1;
  margin-left:  20px;
  padding-left: 20px
}

.ecx .asset-browser-style .pin-count i {
  color:        #B30000;
  font-size:    22px;
  margin-right: 5px
}

@media print {
  .ecx .asset-browser-style {
    display: none !important
  }
}

.asset-browser-style .action-switch-link {
  font-weight:    700;
  padding-bottom: 26px
}

.asset-browser-style .main-filter a,
.asset-browser-style .main-filter span {
  font-size: 14px;
  margin:    0 14px
}

.asset-browser-style .main-filter a.disabled,
.asset-browser-style .main-filter span.disabled {
  border-bottom:   none;
  color:           #3F3F3F;
  cursor:          default;
  opacity:         .3;
  pointer-events:  none;
  text-decoration: none
}

.asset-browser-style .main-filter a.disabled:hover,
.asset-browser-style .main-filter span.disabled:hover {
  border-bottom:   none;
  color:           #3F3F3F;
  text-decoration: none
}

.asset-browser-style .main-filter p {
  font-size: 14px
}

.asset-browser-style .pinned-items,
.asset-browser-style section {
  margin: 0 -10px
}

.asset-browser-style .pinned-items:after,
.asset-browser-style section:after {
  clear:   both;
  content: " ";
  display: block
}

.asset-browser-style .pinned-items article,
.asset-browser-style section article {
  border:     1px solid #E1E1E1;
  display:    block;
  margin:     0 10px 20px;
  padding:    0;
  position:   relative;
  transition: box-shadow .2s ease-in-out;
  width:      calc(25% - 20px)
}

.asset-browser-style .pinned-items article .download,
.asset-browser-style .pinned-items article .pin,
.asset-browser-style section article .download,
.asset-browser-style section article .pin {
  align-items:     center;
  background:      #FFFFFF;
  border:          1px solid #B30000;
  border-radius:   50%;
  color:           #B30000;
  cursor:          pointer;
  display:         flex;
  font-family:     wienerberger;
  height:          22px;
  justify-content: center;
  opacity:         0;
  position:        absolute;
  right:           8px;
  text-decoration: none;
  top:             8px;
  transition:      opacity .3s, background .3s, color .3s, transform .2s, border-color .2s;
  width:           22px;
  z-index:         10
}

@media (max-width: 1024.98px) {
  .asset-browser-style .pinned-items article .download,
  .asset-browser-style .pinned-items article .pin,
  .asset-browser-style section article .download,
  .asset-browser-style section article .pin {
    opacity: 1
  }
}

.asset-browser-style .pinned-items article .download.active,
.asset-browser-style .pinned-items article .download:hover,
.asset-browser-style .pinned-items article .pin.active,
.asset-browser-style .pinned-items article .pin:hover,
.asset-browser-style section article .download.active,
.asset-browser-style section article .download:hover,
.asset-browser-style section article .pin.active,
.asset-browser-style section article .pin:hover {
  background: #B30000;
  color:      #FFFFFF
}

.asset-browser-style .pinned-items article .download.active:active,
.asset-browser-style .pinned-items article .download:hover:active,
.asset-browser-style .pinned-items article .pin.active:active,
.asset-browser-style .pinned-items article .pin:hover:active,
.asset-browser-style section article .download.active:active,
.asset-browser-style section article .download:hover:active,
.asset-browser-style section article .pin.active:active,
.asset-browser-style section article .pin:hover:active {
  background-color: #6F0E0F;
  border-color:     #6F0E0F;
  transform:        scale(.92)
}

.asset-browser-style .pinned-items article .download.active,
.asset-browser-style .pinned-items article .pin.active,
.asset-browser-style section article .download.active,
.asset-browser-style section article .pin.active {
  opacity: 1
}

.asset-browser-style .pinned-items article .download,
.asset-browser-style section article .download {
  display: none
}

.asset-browser-style .pinned-items article .download:before,
.asset-browser-style section article .download:before {
  content: "";
  display: block
}

.asset-browser-style .pinned-items article:hover,
.asset-browser-style section article:hover {
  box-shadow:      0 0 4px #E1E1E1, 0 0 18px #E1E1E1;
  text-decoration: none
}

.asset-browser-style .pinned-items article:hover .pin,
.asset-browser-style section article:hover .pin {
  opacity: 1
}

.asset-browser-style .pinned-items article .assetActions,
.asset-browser-style section article .assetActions {
  align-items:     center;
  background:      rgba(63, 63, 63, .22);
  display:         flex;
  height:          100%;
  justify-content: space-around;
  left:            0;
  opacity:         0;
  padding:         0 15%;
  position:        absolute;
  top:             0;
  width:           100%
}

.asset-browser-style .pinned-items article .assetActions .download,
.asset-browser-style .pinned-items article .assetActions .pin,
.asset-browser-style section article .assetActions .download,
.asset-browser-style section article .assetActions .pin {
  font-size: 23px;
  height:    33px;
  opacity:   1;
  position:  relative;
  right:     auto;
  top:       auto;
  width:     33px
}

.asset-browser-style .pinned-items article .assetActions.small,
.asset-browser-style section article .assetActions.small {
  padding: 0 5px
}

.asset-browser-style .pinned-items article.active .assetActions,
.asset-browser-style .pinned-items article:hover .assetActions,
.asset-browser-style section article.active .assetActions,
.asset-browser-style section article:hover .assetActions {
  opacity: 1
}

.asset-browser-style .pinned-items article:hover .assetActions .download,
.asset-browser-style section article:hover .assetActions .download {
  display: flex
}

@media (max-width: 767.98px) {
  .asset-browser-style .pinned-items article,
  .asset-browser-style section article {
    width: calc(100% - 20px)
  }
}

.asset-browser-style .pinned-items article div.image,
.asset-browser-style section article div.image {
  background-position: 50%;
  background-size:     cover;
  overflow:            hidden;
  padding-bottom:      85%;
  position:            relative
}

.asset-browser-style .pinned-items article div.image img,
.asset-browser-style section article div.image img {
  left:          50%;
  max-height:    100%;
  max-width:     100%;
  -o-object-fit: contain;
  object-fit:    contain;
  position:      absolute;
  top:           50%;
  transform:     translateX(-50%) translateY(-50%)
}

.asset-browser-style .pinned-items article h4,
.asset-browser-style section article h4 {
  font-size:     18px;
  height:        48px;
  line-height:   24px;
  margin-bottom: 1px;
  overflow:      hidden;
  overflow-wrap: anywhere;
  position:      relative
}

.asset-browser-style .pinned-items article h4 i,
.asset-browser-style section article h4 i {
  color:    #B30000;
  left:     0;
  position: absolute;
  top:      3px
}

.asset-browser-style .pinned-items article .product-info,
.asset-browser-style section article .product-info {
  font-size:   16px;
  line-height: 22px;
  padding:     14px
}

.asset-browser-style .pinned-items article .product-info p,
.asset-browser-style section article .product-info p {
  color:         #737575;
  font-size:     16px;
  margin-bottom: 0
}

.asset-browser-style .pinned-items article .product-info a,
.asset-browser-style section article .product-info a {
  color: #0F0F0F
}

@media (min-width: 768px) {
  .asset-browser-style .pinned-items.itemCount-2 .wrapper,
  .asset-browser-style .pinned-items.itemCount-3 .wrapper,
  .asset-browser-style .pinned-items.itemCount-4 .wrapper,
  .asset-browser-style .pinned-items[data-count="2"] .wrapper,
  .asset-browser-style .pinned-items[data-count="3"] .wrapper,
  .asset-browser-style .pinned-items[data-count="4"] .wrapper,
  .asset-browser-style section.itemCount-2 .wrapper,
  .asset-browser-style section.itemCount-3 .wrapper,
  .asset-browser-style section.itemCount-4 .wrapper,
  .asset-browser-style section[data-count="2"] .wrapper,
  .asset-browser-style section[data-count="3"] .wrapper,
  .asset-browser-style section[data-count="4"] .wrapper {
    display:        flex;
    flex-direction: row
  }

  .asset-browser-style .pinned-items.itemCount-2 .wrapper .product-info h4,
  .asset-browser-style .pinned-items.itemCount-3 .wrapper .product-info h4,
  .asset-browser-style .pinned-items.itemCount-4 .wrapper .product-info h4,
  .asset-browser-style .pinned-items[data-count="2"] .wrapper .product-info h4,
  .asset-browser-style .pinned-items[data-count="3"] .wrapper .product-info h4,
  .asset-browser-style .pinned-items[data-count="4"] .wrapper .product-info h4,
  .asset-browser-style section.itemCount-2 .wrapper .product-info h4,
  .asset-browser-style section.itemCount-3 .wrapper .product-info h4,
  .asset-browser-style section.itemCount-4 .wrapper .product-info h4,
  .asset-browser-style section[data-count="2"] .wrapper .product-info h4,
  .asset-browser-style section[data-count="3"] .wrapper .product-info h4,
  .asset-browser-style section[data-count="4"] .wrapper .product-info h4 {
    border-bottom:  1px solid #E1E1E1;
    height:         auto;
    padding-bottom: 8px
  }

  .asset-browser-style .pinned-items.itemCount-2 .wrapper .product-info p,
  .asset-browser-style .pinned-items.itemCount-3 .wrapper .product-info p,
  .asset-browser-style .pinned-items.itemCount-4 .wrapper .product-info p,
  .asset-browser-style .pinned-items[data-count="2"] .wrapper .product-info p,
  .asset-browser-style .pinned-items[data-count="3"] .wrapper .product-info p,
  .asset-browser-style .pinned-items[data-count="4"] .wrapper .product-info p,
  .asset-browser-style section.itemCount-2 .wrapper .product-info p,
  .asset-browser-style section.itemCount-3 .wrapper .product-info p,
  .asset-browser-style section.itemCount-4 .wrapper .product-info p,
  .asset-browser-style section[data-count="2"] .wrapper .product-info p,
  .asset-browser-style section[data-count="3"] .wrapper .product-info p,
  .asset-browser-style section[data-count="4"] .wrapper .product-info p {
    padding-top: 8px
  }

  .asset-browser-style .pinned-items.itemCount-2 .assetActions,
  .asset-browser-style .pinned-items.itemCount-3 .assetActions,
  .asset-browser-style .pinned-items.itemCount-4 .assetActions,
  .asset-browser-style .pinned-items[data-count="2"] .assetActions,
  .asset-browser-style .pinned-items[data-count="3"] .assetActions,
  .asset-browser-style .pinned-items[data-count="4"] .assetActions,
  .asset-browser-style section.itemCount-2 .assetActions,
  .asset-browser-style section.itemCount-3 .assetActions,
  .asset-browser-style section.itemCount-4 .assetActions,
  .asset-browser-style section[data-count="2"] .assetActions,
  .asset-browser-style section[data-count="3"] .assetActions,
  .asset-browser-style section[data-count="4"] .assetActions {
    padding: 0 10%
  }

  .asset-browser-style .pinned-items.itemCount-4 article,
  .asset-browser-style .pinned-items[data-count="4"] article,
  .asset-browser-style section.itemCount-4 article,
  .asset-browser-style section[data-count="4"] article {
    width: calc(33% - 20px)
  }

  .asset-browser-style .pinned-items.itemCount-4 article .image,
  .asset-browser-style .pinned-items[data-count="4"] article .image,
  .asset-browser-style section.itemCount-4 article .image,
  .asset-browser-style section[data-count="4"] article .image {
    padding-bottom: 50%;
    width:          40%
  }

  .asset-browser-style .pinned-items.itemCount-4 article .product-info,
  .asset-browser-style .pinned-items[data-count="4"] article .product-info,
  .asset-browser-style section.itemCount-4 article .product-info,
  .asset-browser-style section[data-count="4"] article .product-info {
    width: 60%
  }
}

@media (min-width: 1025px) {
  .asset-browser-style .pinned-items.itemCount-4 article,
  .asset-browser-style .pinned-items[data-count="4"] article,
  .asset-browser-style section.itemCount-4 article,
  .asset-browser-style section[data-count="4"] article {
    width: calc(25% - 20px)
  }
}

@media (min-width: 768px) {
  .asset-browser-style .pinned-items.itemCount-3 article,
  .asset-browser-style .pinned-items[data-count="3"] article,
  .asset-browser-style section.itemCount-3 article,
  .asset-browser-style section[data-count="3"] article {
    width: calc(33% - 20px)
  }

  .asset-browser-style .pinned-items.itemCount-3 article .image,
  .asset-browser-style .pinned-items[data-count="3"] article .image,
  .asset-browser-style section.itemCount-3 article .image,
  .asset-browser-style section[data-count="3"] article .image {
    padding-bottom: 50%;
    width:          40%
  }

  .asset-browser-style .pinned-items.itemCount-3 article .product-info,
  .asset-browser-style .pinned-items[data-count="3"] article .product-info,
  .asset-browser-style section.itemCount-3 article .product-info,
  .asset-browser-style section[data-count="3"] article .product-info {
    width: 60%
  }
}

@media (min-width: 1025px) {
  .asset-browser-style .pinned-items.itemCount-3 article,
  .asset-browser-style .pinned-items[data-count="3"] article,
  .asset-browser-style section.itemCount-3 article,
  .asset-browser-style section[data-count="3"] article {
    width: calc(33% - 20px)
  }

  .asset-browser-style .pinned-items.itemCount-3 article .image,
  .asset-browser-style .pinned-items[data-count="3"] article .image,
  .asset-browser-style section.itemCount-3 article .image,
  .asset-browser-style section[data-count="3"] article .image {
    padding-bottom: 45%;
    width:          30%
  }

  .asset-browser-style .pinned-items.itemCount-3 article .product-info,
  .asset-browser-style .pinned-items[data-count="3"] article .product-info,
  .asset-browser-style section.itemCount-3 article .product-info,
  .asset-browser-style section[data-count="3"] article .product-info {
    width: 70%
  }
}

@media (min-width: 768px) {
  .asset-browser-style .pinned-items.itemCount-2 article,
  .asset-browser-style .pinned-items[data-count="2"] article,
  .asset-browser-style section.itemCount-2 article,
  .asset-browser-style section[data-count="2"] article {
    width: calc(50% - 20px)
  }

  .asset-browser-style .pinned-items.itemCount-2 article .image,
  .asset-browser-style .pinned-items[data-count="2"] article .image,
  .asset-browser-style section.itemCount-2 article .image,
  .asset-browser-style section[data-count="2"] article .image {
    padding-bottom: 30%;
    width:          20%
  }

  .asset-browser-style .pinned-items.itemCount-2 article .product-info,
  .asset-browser-style .pinned-items[data-count="2"] article .product-info,
  .asset-browser-style section.itemCount-2 article .product-info,
  .asset-browser-style section[data-count="2"] article .product-info {
    width: 80%
  }
}

@media (min-width: 1025px) {
  .asset-browser-style .pinned-items.itemCount-2 article,
  .asset-browser-style .pinned-items[data-count="2"] article,
  .asset-browser-style section.itemCount-2 article,
  .asset-browser-style section[data-count="2"] article {
    width: calc(50% - 20px)
  }

  .asset-browser-style .pinned-items.itemCount-2 article .image,
  .asset-browser-style .pinned-items[data-count="2"] article .image,
  .asset-browser-style section.itemCount-2 article .image,
  .asset-browser-style section[data-count="2"] article .image {
    padding-bottom: 25%
  }
}

.asset-browser-style .pinned-items.itemCount-6 article,
.asset-browser-style .pinned-items[data-count="6"] article,
.asset-browser-style section.itemCount-6 article,
.asset-browser-style section[data-count="6"] article {
  width: calc(16.66% - 20px)
}

@media (max-width: 1024.98px) {
  .asset-browser-style .pinned-items.itemCount-6 article,
  .asset-browser-style .pinned-items[data-count="6"] article,
  .asset-browser-style section.itemCount-6 article,
  .asset-browser-style section[data-count="6"] article {
    width: calc(25% - 20px)
  }
}

@media (max-width: 767.98px) {
  .asset-browser-style .pinned-items.itemCount-6 article,
  .asset-browser-style .pinned-items[data-count="6"] article,
  .asset-browser-style section.itemCount-6 article,
  .asset-browser-style section[data-count="6"] article {
    width: calc(100% - 20px)
  }
}

.asset-browser-style .pinned-items.itemCount-1 article,
.asset-browser-style .pinned-items[data-count="1"] article,
.asset-browser-style section.itemCount-1 article,
.asset-browser-style section[data-count="1"] article {
  padding: 0;
  width:   100%
}

@media (max-width: 767.98px) {
  .asset-browser-style .pinned-items.itemCount-1 article,
  .asset-browser-style .pinned-items[data-count="1"] article,
  .asset-browser-style section.itemCount-1 article,
  .asset-browser-style section[data-count="1"] article {
    padding: 10px;
    width:   calc(100% - 20px)
  }
}

.asset-browser-style .pinned-items.itemCount-1 article .wrapper,
.asset-browser-style .pinned-items[data-count="1"] article .wrapper,
.asset-browser-style section.itemCount-1 article .wrapper,
.asset-browser-style section[data-count="1"] article .wrapper {
  display: flex
}

@media (max-width: 767.98px) {
  .asset-browser-style .pinned-items.itemCount-1 article .wrapper,
  .asset-browser-style .pinned-items[data-count="1"] article .wrapper,
  .asset-browser-style section.itemCount-1 article .wrapper,
  .asset-browser-style section[data-count="1"] article .wrapper {
    border-bottom:  1px solid #E1E1E1;
    padding-bottom: 10px
  }
}

.asset-browser-style .pinned-items.itemCount-1 article h4,
.asset-browser-style .pinned-items[data-count="1"] article h4,
.asset-browser-style section.itemCount-1 article h4,
.asset-browser-style section[data-count="1"] article h4 {
  border-bottom:  1px solid #E1E1E1;
  height:         auto;
  margin-bottom:  10px;
  padding-bottom: 10px
}

@media (max-width: 767.98px) {
  .asset-browser-style .pinned-items.itemCount-1 article h4,
  .asset-browser-style .pinned-items[data-count="1"] article h4,
  .asset-browser-style section.itemCount-1 article h4,
  .asset-browser-style section[data-count="1"] article h4 {
    border:  none;
    margin:  0;
    padding: 10px 0 0
  }
}

.asset-browser-style .pinned-items.itemCount-1 article .image,
.asset-browser-style .pinned-items[data-count="1"] article .image,
.asset-browser-style section.itemCount-1 article .image,
.asset-browser-style section[data-count="1"] article .image {
  flex-shrink:    0;
  height:         130px;
  padding-bottom: 0;
  width:          130px
}

@media (max-width: 767.98px) {
  .asset-browser-style .pinned-items.itemCount-1 article .image,
  .asset-browser-style .pinned-items[data-count="1"] article .image,
  .asset-browser-style section.itemCount-1 article .image,
  .asset-browser-style section[data-count="1"] article .image {
    height: 90px;
    width:  90px
  }
}

.asset-browser-style .pinned-items.itemCount-1 article .product-info,
.asset-browser-style .pinned-items[data-count="1"] article .product-info,
.asset-browser-style section.itemCount-1 article .product-info,
.asset-browser-style section[data-count="1"] article .product-info {
  flex-grow:   1;
  margin-left: 0;
  padding:     15px
}

@media (max-width: 767.98px) {
  .asset-browser-style .pinned-items.itemCount-1 article .product-info,
  .asset-browser-style .pinned-items[data-count="1"] article .product-info,
  .asset-browser-style section.itemCount-1 article .product-info,
  .asset-browser-style section[data-count="1"] article .product-info {
    padding: 10px
  }
}

.asset-browser-style .pinned-items.itemCount-1 article .product-info p i,
.asset-browser-style .pinned-items[data-count="1"] article .product-info p i,
.asset-browser-style section.itemCount-1 article .product-info p i,
.asset-browser-style section[data-count="1"] article .product-info p i {
  color: #B30000
}

.asset-browser-style .pinned-items article {
  width: calc(16.66% - 20px)
}

@media (max-width: 1024.98px) {
  .asset-browser-style .pinned-items article {
    width: calc(25% - 20px)
  }
}

@media (max-width: 767.98px) {
  .asset-browser-style .pinned-items article {
    width: calc(100% - 20px)
  }
}

.asset-browser-style .loadMore {
  text-align: center
}

.asset-browser-style .loadMore .loadingSpinner {
  display:    none;
  text-align: center
}

.asset-browser-style .loadMore .loadingSpinner img {
  width: 150px
}

.asset-browser-style .loadMore.loading .loadMore-btns {
  display: none
}

.asset-browser-style .loadMore.loading .loadingSpinner {
  display: block
}

.asset-browser-style .loadMore.allLoaded {
  display: none
}

.asset-browser-style .pinned-items {
  background:     10px;
  border-bottom:  1px solid #B30000;
  margin-bottom:  25px;
  padding-bottom: 10px
}