@font-face {
  font-family: bariol;
  src: url('../fonts/bariol_regular-webfont.eot');
  src: url('../fonts/bariol_regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/bariol_regular.otf') format("opentype"), url('../fonts/webfont.woff2') format('woff2'), url('../fonts/webfont.woff') format('woff'), url('../fonts/webfont.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

input,
textarea {
  font-size: 16px;
  font-family: 'Quattrocento Sans', sans-serif;
}

::placeholder {
  color: #8e92a0 !important;
}

/*img:before {
  content: ' ';
  display: block;
  position: absolute;
  height: 50px;
  width: 50px;
  background-image: url("https://zokos-prod-public.s3-us-west-2.amazonaws.com/assets/images/loading.svg");
}*/

.topic-badge {
  background-color: #F34343;
  padding: 3px 6px 3px 5px;
  margin: 0px 0px 0px 8px;
  display: inline-block;
  float: right;
  border-radius: 15%;
  text-align: center;
  font-size: 12px;
}

.mainLoadingContainer {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(45deg, #2b5dd0 0%, #0f9bea 100%);
  position: fixed;
  z-index: 1;
  margin-top: 0px;
  top: 0px;
  transition: 3000ms all;
}

.loading-center {
  width: 100%;
  height: 100%;
  position: relative;
}

.loading-center-absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 150px;
  width: 150px;
  margin-top: -75px;
  margin-left: -75px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.object {
  width: 20px;
  height: 20px;
  background-color: #FFF;
  position: absolute;
  left: 65px;
  top: 65px;
}

.object:nth-child(2n+0) {
  margin-right: 0px;
}


#object_one {
  -webkit-animation: object_one 2s infinite;
  animation: object_one 2s infinite;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

#object_two {
  -webkit-animation: object_two 2s infinite;
  animation: object_two 2s infinite;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

#object_three {
  -webkit-animation: object_three 2s infinite;
  animation: object_three 2s infinite;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

#object_four {
  -webkit-animation: object_four 2s infinite;
  animation: object_four 2s infinite;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

#object_five {
  -webkit-animation: object_five 2s infinite;
  animation: object_five 2s infinite;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

#object_six {
  -webkit-animation: object_six 2s infinite;
  animation: object_six 2s infinite;
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

#object_seven {
  -webkit-animation: object_seven 2s infinite;
  animation: object_seven 2s infinite;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

#object_eight {
  -webkit-animation: object_eight 2s infinite;
  animation: object_eight 2s infinite;
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

#object_big {

  position: absolute;
  width: 50px;
  height: 50px;
  left: 50px;
  top: 50px;
  -webkit-animation: object_big 2s infinite;
  animation: object_big 2s infinite;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently */
}


@-webkit-keyframes object_big {
  50% {
    -webkit-transform: scale(0.5);
  }
}

@keyframes object_big {
  50% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
}




@-webkit-keyframes object_one {
  50% {
    -webkit-transform: translate(-65px, -65px);
  }
}

@keyframes object_one {
  50% {
    transform: translate(-65px, -65px);
    -webkit-transform: translate(-65px, -65px);
  }
}



@-webkit-keyframes object_two {
  50% {
    -webkit-transform: translate(0, -65px);
  }
}

@keyframes object_two {
  50% {
    transform: translate(0, -65px);
    -webkit-transform: translate(0, -65px);
  }
}



@-webkit-keyframes object_three {
  50% {
    -webkit-transform: translate(65px, -65px);
  }
}

@keyframes object_three {
  50% {
    transform: translate(65px, -65px);
    -webkit-transform: translate(65px, -65px);
  }
}



@-webkit-keyframes object_four {

  50% {
    -webkit-transform: translate(65px, 0);
  }
}

@keyframes object_four {
  50% {
    transform: translate(65px, 0);
    -webkit-transform: translate(65px, 0);
  }
}




@-webkit-keyframes object_five {

  50% {
    -webkit-transform: translate(65px, 65px);
  }
}

@keyframes object_five {
  50% {
    transform: translate(65px, 65px);
    -webkit-transform: translate(65px, 65px);
  }
}



@-webkit-keyframes object_six {

  50% {
    -webkit-transform: translate(0, 65px);
  }
}

@keyframes object_six {
  50% {
    transform: translate(0, 65px);
    -webkit-transform: translate(0, 65px);
  }
}




@-webkit-keyframes object_seven {

  50% {
    -webkit-transform: translate(-65px, 65px);
  }
}

@keyframes object_seven {
  50% {
    transform: translate(-65px, 65px);
    -webkit-transform: translate(-65px, 65px);
  }
}


@-webkit-keyframes object_eight {

  50% {
    -webkit-transform: translate(-65px, 0);
  }
}

@keyframes object_eight {
  50% {
    transform: translate(-65px, 0);
    -webkit-transform: translate(-65px, 0);
  }
}



.showRequestLoadingContainer {
  pointer-events: auto !important;
}

.primaryButton {
  color: #fff;
  display: inline-block;
  border-radius: 5px;
  padding: 7px 0px;
  text-decoration: none;
  outline: 0;
  width: 100px;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: linear-gradient(45deg, #2196F3 0%, #1ad5f2 100%);
  box-shadow: 1px 1px 3px 1px #03a9f4;
}

.primaryButton:active {
  position: relative;
  top: 1px;
}

.primaryButton:hover {
  -moz-box-shadow: 0 1px 1px 0 #000;
  -webkit-box-shadow: 0 1px 1px 0 #000;
  color: #F3FFFD;
  transition: all 300ms;
  opacity: 1;
  background: linear-gradient(45deg, #1490e6 0%, #23a1db 100%);
  box-shadow: 1px 1px 3px 1px #0497d9;
}


.secondaryButton {
  text-align: center;
  padding: 6px 14px;
  margin-top: 16px;
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  height: auto;
  margin: 0;
  cursor: pointer;
  text-transform: none;
  user-select: none;
  vertical-align: middle;
  box-shadow: 0 1px 0 0 rgba(22, 29, 37, 0.05);
  border-radius: 5px;
  line-height: 1.6rem;
  transition-property: background, border, box-shadow, -webkit-box-shadow;
  transition-duration: 200ms;
  -webkit-tap-highlight-color: transparent;
  transition-timing-function: cubic-bezier(0.64, 0, 0.35, 1);
  background: linear-gradient(45deg, #4462d4 0%, #8d68ff 100%);
  color: #fff;
  border: solid 1px #8167f8;
  min-width: 110px;
  outline: none;
}

.secondaryButton:active {
  position: relative;
  top: 1px;
}

.secondaryButton:hover {
  color: #F3FFFD;
  transition: all 300ms;
  opacity: 1;
  background: linear-gradient(45deg, #3a53af 0%, #795bd9 100%);
}

.tertiaryButton {
  text-align: center;
  padding: 6px 14px;
  margin-top: 16px;
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  height: auto;
  margin: 0;
  cursor: pointer;
  text-transform: none;
  user-select: none;
  vertical-align: middle;
  background: linear-gradient(to bottom, white, #f9fafb);
  border: 1px solid #c4cdd5;
  box-shadow: 0 1px 0 0 rgba(22, 29, 37, 0.05);
  border-radius: 5px;
  line-height: 1.6rem;
  color: #212b36;
  transition-property: background, border, box-shadow, -webkit-box-shadow;
  transition-duration: 200ms;
  -webkit-tap-highlight-color: transparent;
  transition-timing-function: cubic-bezier(0.64, 0, 0.35, 1);
}

.tertiaryButton:active {
  position: relative;
  top: 1px;
}

.tertiaryButton:hover {
  background: linear-gradient(to bottom, #f9fafb, #f4f6f8);
  border-color: #c4cdd5;
  box-shadow: 0 1px 0 0 rgba(22, 29, 37, 0.05);
  color: #212b36;
}

.dangerButton {
  color: #fff;
  display: inline-block;
  border-radius: 5px;
  text-decoration: none;
  outline: 0;
  padding: 7px 0px;
  width: 100px;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: linear-gradient(45deg, #e36d3f 0%, #fe508d 100%);
  box-shadow: 1px 1px 3px 1px #e35c46;
}

.dangerButton:active {
  position: relative;
  top: 1px;
}

.dangerButton:hover {
  -moz-box-shadow: 0 1px 1px 0 #000;
  -webkit-box-shadow: 0 1px 1px 0 #000;
  box-shadow: 0 1px 1px 0 #90462a;
  color: #F3FFFD;
  transition: all 300ms;
  opacity: 1;
  background: linear-gradient(45deg, #bb5a34 0%, #c64170 100%);
}

.linkText {
  color: #03A9F4;
  text-decoration: none;
  cursor: pointer;
}

.linkText:hover {
  text-decoration: underline;
}

.genericLoaderContainer {
  height: 75px;
  width: 75px;
  animation: a 1s infinite linear;
  position: absolute;
  top: Calc(50% - 80px);
  left: Calc(50% - 35px);
}

.genericLoader {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: #409eff;
  stroke-linecap: round;
}

.disableDiv {
  opacity: .2;
  pointer-events: none;
}

.buttonDisabled {
  background: rgba(128, 128, 128, .3) !important;
  cursor: not-allowed !important;
}

.genericInternalPageContainer {
  min-height: 885px;
  /*height: Calc(100vh - 170px);*/
  width: 800px;
  position: relative;
  left: Calc(50% - 300px);
  border-radius: 5px;
  padding: 50px;
  background: rgba(255, 255, 255, 0.8588235294117647);
  box-shadow: 0px 2px 5px 2px #2866d4;
}

.hideElement {
  display: none;
}

.hideTableElement {
  visibility: collapse;
}


.strongPasswordBorder {
  border: solid 2px #8bc34ad4 !important;
}

.weakPasswordBorder {
  border: solid 2px #f4433682 !important;
}

.sectionErrorBorder {
  outline: solid 2px #ff0000 !important;
}


/*PrimeNG changes start*/

.ui-multiselect .ui-multiselect-label,
.ui-multiselect,
.ui-dropdown,
.ui-dropdown label.ui-dropdown-label {
  background: rgba(255, 255, 255, 0.83) !important;
}

.chipBorderOverwrite>ul {
  border: 1px solid #c8cad5 !important;
  border-radius: 4px !important;
  padding: 3.6px 14px 3.6px 14px !important;
  background: rgba(255, 255, 255, 0.83) !important;
}

.ui-chips-token {
  margin: 3px 5px 5px 0.125em !important;
  box-shadow: 1px 1px 3px 0.5px #1669a6;
}

.chipBorderOverwrite>ul>li>input {
  font-family: 'Quattrocento Sans', sans-serif !important;
  font-size: 16px !important;
}

body .ui-messages.ui-messages-error {
  background: linear-gradient(45deg, #e36d3f 0%, #fe508d 100%);
  box-shadow: 1px 1px 3px 1px #e35c46 !important;
  color: #f8f8f8 !important;
  border: none !important;
}

.ui-messages-icon {
  color: #f8f8f8 !important;
}

body .ui-messages.ui-messages-info {
  background: linear-gradient(45deg, #43b6db 0%, #1ad5f2 100%);
  box-shadow: 0px 2px 5px 0px #03a9f4;
  color: #f8f8f8 !important;
  border: none;
}

body .ui-messages {
  font-family: "Roboto", "Trebuchet MS", Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
}


.optionValueChipClass ul {
  border: none;
}

.optionValueChipClass input {
  font-size: 16px !important;
  font-family: 'Quattrocento Sans', sans-serif !important;
}

.ui-chkbox-box.ui-state-active,
.ui-radiobutton-box.ui-state-active {
  background: #1099ea !important;
}

.ui-corner-all.ui-state-highlight {
  background-color: #1099ea !important;
}

.importSteps .ui-state-highlight {
  background: transparent !important;
}

.importSteps .ui-steps-item.ui-state-highlight .ui-steps-number {
  background: #1394e7 !important;
}

.importSteps li {
  width: 33%;
}


.ui-confirmdialog-icon {
  display: none !important;
}

.ui-editor-toolbar .ui-widget-header .ui-corner-top .ql-toolbar .ql-snow .ng-star-inserted {
  height: 43px !important;
}



/*Primeng changes end*/

@media(max-width: 1022px) {
  .genericInternalPageContainer {
    left: Calc(50% - 370px);
  }
}





/*Second primeng starts*/

body .confirmDeletionContainer .ui-button {
  text-align: center;
  padding: 6px 14px;
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  height: auto;
  margin: 0px 0px 0px 15px !important;
  cursor: pointer;
  text-transform: none;
  user-select: none;
  vertical-align: middle;
  background: linear-gradient(to bottom, white, #f9fafb) !important;
  border: 1px solid #c4cdd5 !important;
  box-shadow: 0 1px 0 0 rgba(22, 29, 37, 0.05) !important;
  border-radius: 5px;
  line-height: 1.6rem;
  color: #212b36 !important;
  transition-property: background, border, box-shadow, -webkit-box-shadow;
  transition-duration: 200ms;
  -webkit-tap-highlight-color: transparent;
  transition-timing-function: cubic-bezier(0.64, 0, 0.35, 1);
}


body .confirmDeletionContainer .ui-button:hover {
  color: inherit !important;
  background: #ececec !important;
}

body .confirmDeletionContainer .ui-button:active {
  top: 2px;
}

body .updateListingButton .ui-button:enabled:hover {
  background: #504eb3 !important;
}

body .updateListingButton .ui-button:enabled:hover {
  background: #504eb3 !important;
}



body .ui-button {
  background-color: inherit !important;
  font-size: 16px !important;
}

body .customImportFileUpload {
  color: #696969 !important;
  border: solid 1px #c5c5c5 !important;
}

body .ui-button.ui-button-text-icon-left .ui-button-text {
  padding: .25em 1em .25em 2.1em !important;
}

body .customImportFileUpload .ui-button-text.ui-clickable {
  padding: 0.35em 1em 0.35em 2.1em !important;
}



body .updateListingButton .ui-button.ui-button-text-icon-left .ui-button-text {
  padding: 0.429em 1em 0.429em 2em !important;
}


body .updateListingButton .ui-button.ui-button-text-only .ui-button-text {
  padding: 7px 16px 7px 20px !important;
}

body .massUpdateButton .ui-button {
  color: #646674;
  height: 33px;
  outline: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

body .massUpdateButton .ui-corner-left span {
  position: relative;
  bottom: 2.5px;
  left: 9px;
}

body .massUpdateButton .ui-button:enabled:hover {
  color: inherit !important;
}

body .massUpdateButton:hover {
  background: #f1f1f1 !important;
}

body .massUpdateButton .pi-chevron-down {
  font-size: 16px;
}

body .listPaginator .ui-paginator {
  border-radius: 3px;
  background-color: #fefefe;
}

/*ui-splitbutton-menubutton ui-button ui-widget ui-state-default ui-corner-right ui-button-icon-only*/

.ui-dropdown {
  min-width: inherit !important;
}

body .ui-editor-container .ui-editor-toolbar {
  background-color: rgba(255, 255, 255, 0.83) !important;
}

body .myStoreEditor .ui-editor-container .ui-editor-toolbar {
  max-height: 42px;
}


.ui-confirmdialog-message {
  word-break: break-word;
}

body .ui-multiselect .ui-multiselect-label {
  /*color: #7f8390 !important;*/
  font-size: 16px;
}

.ui-dropdown label.ui-dropdown-label {
  font-size: 16px;
  color: #7f8390;
}

body .ui-chips>ul.ui-inputtext .ui-chips-token {
  font-size: .8em !important;
}

body .ui-chips>ul.ui-inputtext {
  width: 100%;
}

/*.ui-chips-input-token input {
  font-size: 16px !important;
}
*/
body .ui-inputtext {
  font-size: 16px !important;
}

.ql-editor {
  min-height: 175px;
  font-size: 16px;
  font-family: 'Quattrocento Sans', sans-serif;
}

body .ui-editor-container .ui-editor-content .ql-editor {
  background-color: rgba(255, 255, 255, 0.83) !important;
}

.ql-toolbar.ql-snow+.ql-container.ql-snow {
  border-radius: 0px 0px 4px 4px;
}

body .ui-editor-container .ui-editor-content .ql-editor {
  border-radius: 0px 0px 4px 4px;
}

.zokosMultiSelect>div>span>span.ng-star-inserted {
  color: #7f8390;
}

.productPaginatorContainer .ui-dropdown-label.ui-inputtext.ui-corner-all.ng-star-inserted {
  padding-top: 4px !important;
  padding-bottom: 0px !important;
}

.productPaginatorContainer .ui-dropdown.ui-widget.ui-state-default.ui-corner-all.ui-helper-clearfix {
  border: solid 1px #d2d2d2;
  border-radius: 2px;
}

/*Second primeng ends*/

.shippingContainerHidden {
  overflow: hidden;
  max-height: 0px !important;
}

.shippingContainerShown {
  margin-top: 20px;
  border-radius: 5px;
  padding: 25px 25px 15px 25px;
  background: #fefefe;
  color: #5a5a5a;
  box-shadow: 0px 2px 5px 2px #e0e0e0;
  margin-top: 15px;
  margin-top: 25px;
}


/* handsOnTable Start */
.handsontable {
  font-size: 16px;
  z-index: 1;
}



/* handsOnTable End */