izaac-frontend/src/index.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap");

@tailwind base;

@layer base {

  .no-tailwindcss-base h1,
  .no-tailwindcss-base h2,
  .no-tailwindcss-base h3,
  .no-tailwindcss-base h4,
  .no-tailwindcss-base h5,
  .no-tailwindcss-base h6 {
      font-size: revert;
      font-weight: revert;
  }

  .no-tailwindcss-base ol,
  .no-tailwindcss-base ul {
      list-style: revert;
      margin: revert;
      padding: revert;
  }
}

/* @layer components {
  .no-spin-buttons::-webkit-inner-spin-button,
  .no-spin-buttons::-webkit-outer-spin-button {
    @apply -webkit-appearance-none margin-0;
  }
  .no-spin-buttons {
    @apply -moz-appearance-textfield;
  }
} */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Dla Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

@tailwind components;
@tailwind utilities;

#root {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: auto;
}



:root {
  --black-gradient: linear-gradient(
    144.39deg,
    #ffffff -278.56%,
    #6d6d6d -78.47%,
    #11101d 91.61%
  );
}

* {
  scroll-behavior: smooth;
}

.category-hover:hover {
  transform: scale(1.1); 
  /* Apply negative margin if needed */
}

.slide-container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease-out, opacity 0.5s ease;
  opacity: 0;
}

/* Expanded state styles */
.collapsible {
  max-height: 0;
  overflow: hidden;
  transition-property: all;
  transition-timing-function: ease-in-out;
  transition-duration: 0.5s;
}

/* Styl dla elementu, gdy jest rozwinięty */
.collapsible.expanded {
  max-height: 1000px; /* Przykładowa maksymalna wysokość, może wymagać dostosowania */
  opacity: 1;
  transition-property: all;
  transition-timing-function: ease-in-out;
  transition-duration: 0.5s;
}

.div-transition {
  transition-property: filter;
  transition-duration:  1s;
  transition-timing-function: ease-in-out;
}


.noblur {
  filter: blur(0px);
  transition-property: filter;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

.blur {
  filter: blur(5px);
  transition-property: filter;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}
.minus-z-index {
  z-index: -10;
}

.editor-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 12rem;
  padding-right: 12rem;
  
  ;
}
.div-transition {
  transition: all 0.3s ease;
  scale: 100%;
}

.ck-editor__editable {
  min-height: 12rem;
  max-height: 12rem;
  
}

.job-listing {
  -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
  mask-image: linear-gradient(to top, black 0%, transparent 100%);
}
.job-listing2 {
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

.lista {
  list-style: inside;
}

.lista-outside {
  list-style: outside;
}

.sidebar-show {
  -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.sidebar-hide {
  -webkit-animation: slide-down 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-down 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.slider-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.slider {
  position: relative;
  width: 100%;
}


.slider__track,
.slider__range,
.slider__left-value,
.slider__right-value {
  position: absolute;
}

.slider__track,
.slider__range {
  border-radius: 3px;
  max-width: 100%;
  width: 100%;
  height: 5px;
}

.slider__track {
  background-color: #ced4da;
  width: 100;
  z-index: 1;
}

.slider__range {
  background-color: #9fe5e1;
  z-index: 2;
}

.slider__left-value,
.slider__right-value {
  color: #dee2e6;
  font-size: 12px;
  margin-top: 20px;
}

.slider__left-value {
  left: 6px;
  color: black;
}

.slider__right-value {
  right: -4px;
  color: black;

}

/* Removing the default appearance */
.thumb,
.thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.thumb {
  pointer-events: none;
  position: absolute;
  height: 0;
  outline: none;
  transition-duration: 0.5s;
  transition-property: display;
}

.thumb--left {
  z-index: 3;
}

.thumb--right {
  z-index: 4;
}

/* For Chrome browsers */
.thumb::-webkit-slider-thumb {
  background-color: #f1f5f7;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 1px 1px #ced4da;
  cursor: pointer;
  height: 18px;
  width: 18px;
  margin-top: 4px;
  pointer-events: all;
  position: relative;
}

/* For Firefox browsers */
.thumb::-moz-range-thumb {
  background-color: #f1f5f7;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 1px 1px #ced4da;
  cursor: pointer;
  height: 18px;
  width: 18px;
  margin-top: 4px;
  pointer-events: all;
  position: relative;
}


@-webkit-keyframes fadeIn {
  from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
    to { opacity: 1; }
}

.thumb--animatedin {
  animation: fadeIn 0.5s;
}

@-webkit-keyframes fadeOut {
  from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes fadeOut {
  from { opacity: 1; }
    to { opacity: 0; }
} 

.thumb--animatedout {
  animation: fadeOut 0.5s;
}

.t-width {
width: 84%;
}

.search-width {
  width: 16rem;
}