
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

body {
  font-family: 'Inter', sans-serif, 'Mylogo', 'PT Astra Sans Bold';
}
@font-face {
	font-family: "PT Astra Sans Bold";
	src: url("fonts/pt-astra-sans-bold.eot"); /* IE9 Compat Modes */
	src: url("fonts/pt-astra-sans-bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
		url("fonts/pt-astra-sans-bold.otf") format("opentype"), /* Open Type Font */
		url("fonts/pt-astra-sans-bold.svg") format("svg"), /* Legacy iOS */
		url("fonts/pt-astra-sans-bold.ttf") format("truetype"), /* Safari, Android, iOS */
		url("fonts/pt-astra-sans-bold.woff") format("woff"), /* Modern Browsers */
		url("fonts/pt-astra-sans-bold.woff2") format("woff2"); /* Modern Browsers */
	font-weight: normal;
	font-style: normal;
}
/* Добавьте это в ваш CSS файл или тег <style> */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
      @font-face {
            font-family: 'Mylogo';
            src: url('fonts/Mylogo-Regular.woff2') format('woff2'),
                 url('fonts/Mylogo-Regular.woff') format('woff');
                    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Предотвращает "моргание" текста при загрузке */
        }
        .logo.h-8.w-auto.mx-auto {
    margin-right: auto !important;
    margin-left: 0px !important;
    width: 150px !important;
}



        .logo.h-8.w-auto

 {

    height: auto;
    width: 100%;
    max-width: 100px;
    min-width: 87px;
    margin-top: 2px;
    margin-left: -6px;
    margin-right: -26px;

}
        img.logos.h-8.w-auto.object-contain {
    font-family: 'Mylogo';
}
input#searchInput {
background: #2563eb1f;
    border: 0;
    border-radius: 10px;
    height: 48px;
}
button#createAdBtn {
    font-size: 21px;
    border-radius: 10px;
}
button#clearSearchBtn
 {
    margin-top: 4px;
}
    .container {
        max-width: 1120px !important;
    }
button#voiceSearchBtn
 {
    margin-top: 1px;
}
.category-btn.active {
  @apply border-blue-500 ring-2 ring-blue-200;
}

main.container.mx-auto.px-4.pt-20.pb-6 {
  padding-top: 6px;
}

.overflow-x-auto {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

::-webkit-scrollbar {
  display: none;
}
.ioi.p-4 {
    padding: 10px;
}

section.container.mx-auto.px-4.mt-6 {
  margin-top: 80px;
}

.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255) !important;
}


@media (min-width: 640px) {


    .bg-white.rounded-lg.max-w-lg.w-full.max-h-\[90vh\].overflow-y-auto {

}
h3.font-semibold.text-lg.mb-1 {
    font-size: 16px !important;
    margin-bottom: 0;
    font-weight: 400;
            margin-left: 0;
}
p.text-blue-600.font-bold.text-xl.mb-2 {
    font-size: 18px !important;
    color: #000;
    margin-bottom: 2px;
}


}
.tre {
    position: relative !important;
    width: 100%;
    background: #ffffff;
}
@media (max-width: 640px) {
    form#reportForm {

    margin-top: -15px !important;
}
.p-4.md\:flex.md\:space-x-6 {
    padding-top: 0;
}

    .bg-white.rounded-lg.shadow-md.overflow-hidden.mb-6 {
    margin-left: -16px !important;
    margin-right: -16px !important;
    border-radius: 0 !important;
}




h3.font-semibold.text-lg.mb-1 {
    font-size: 15px !important;
    margin-bottom: -2px;
    font-weight: 400;
}
p.text-blue-600.font-bold.text-xl.mb-2 {
    font-size: 16px !important;
    color: #000;
    margin-bottom: -2px;
}
  .gap-6 {
    gap: 0.7rem !important;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.p-3.rounded-lg {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

header.bg-white.shadow-sm.fixed.top-0.left-0.right-0.z-10 {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.alis {
  background: #ffffff;
  padding: 5px;
  border-radius: 6px;
  color: #000 !important;
  box-shadow: rgba(0, 0, 0, 0.08) 1px 1px 4px 1px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.grid {
  display: grid;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.text-center {
  text-align: center;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.pt-20 {
  padding-top: 5rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.gap-6 {
  gap: 1.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.font-bold {
  font-weight: 700;
}

.text-xl {
  font-size: 1.25rem;
}

.bg-white {
  background-color: #fff;
}

.shadow-sm {
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.fixed {
  position: fixed;
}

.top-0 {
  top: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.z-10 {
  z-index: 10;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.overflow-hidden {
  overflow: hidden;
}

.transition {
  transition: all 0.2s ease-in-out;
}

.hover\:scale-105:hover {
  transform: scale(1.05);
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.hidden {
  display: none;
}

.block {
  display: block;
}

.max-w-xl {
  max-width: 36rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.left-3 {
  left: 0.75rem;
}

.top-2\.5 {
  top: 0.625rem;
}

.pl-10 {
  padding-left: 2.5rem;
}

.pr-4 {
  padding-right: 1rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.border {
  border: 1px solid #e5e7eb;
}

.focus\:outline-none:focus {
  outline: none;
}

.focus\:ring-2:focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.6);
}

.focus\:ring-blue-500:focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.6);
}

.text-gray-500 {
  color: #9ca3af;
}

.text-blue-600 {
  color: #2563eb;
}

.bg-blue-600 {
  background-color: #2563eb;
}

.bg-green-500 {
  background-color: #10b981;
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.01  !important;
  --tw-scale-y: 1.01  !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:bg-blue-700:hover {
  background-color: #1d4ed8;
}

.hover\:bg-green-600:hover {
  background-color: #059669;
}

.text-white {
  color: #fff;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.w-full {
  width: 100%;
}

.h-48 {
  height: 12rem;
}

.object-cover {
  object-fit: cover;
}



/* New styles for ad creation modal */
.aspect-square {
  aspect-ratio: 1/1;
}

.swiper-container {
  width: 100%;
  height: 12rem; /* фиксированная высота */
  overflow: hidden;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
button.absolute.left-3.top-2\.5.text-gray-500
 {
    margin-top: 4px;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.swiper-wrapper {
  display: flex;
  align-items: center;
}

.swiper-pagination span {
  background-color: #999;
  opacity: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 2px;
}


.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet

 {
margin: 0px var(--swiper-pagination-bullet-horizontal-gap, 2px);
    height: 4px !important;
    width: 10px !important;
    border-radius: 2px !important;
}
.swiper-pagination .swiper-pagination-bullet-active {
  background-color: #1d4ed8a8;
}
/* Адаптивность для ПК */
@media (min-width: 768px) {

        .p-4.border-b.flex.justify-between.items-center {

}
        #codeModalContent {
        background-color: #fefefe;
        margin: 200px auto;
        padding: 20px;
        border: 1px solid #888;
        border-radius: 5px;
        width: 80%;
        max-width: 400px;
        
        text-align: center;
    }
  .ad-details {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Разделение на две колонки */
    gap: 20px; /* Пространство между колонками */
  }

  .ad-avatar {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .ad-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .ad-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

      
/* Мобильная версия */
@media (max-width: 768px) {
    .win {
    margin-top: 61px !important;
}
        form#createAdForm {
margin-top: 61px;
}
    .p-4.border-b.flex.justify-between.items-center {
    position: fixed;
    width: 100%;
    background: #ffffff;
    z-index: 9;
        
    }
    .fois {
        margin-left: 0 !important;
    }
        .bg-white.rounded-lg.max-w-lg.w-full.max-h-\[90vh\].overflow-y-auto {
    max-width: 100%;
    border-radius: 0;
    max-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
}
button#closeFilterModal {
    position: absolute;
    left: 10px;
}
h3.text-lg.font-semibold {
    margin-left: 28px;
}

button#closeAdModal {
    position: absolute;
    left: 10px;
}
  .ad-details {
    display: block;
  }

  .ad-avatar {
    display: none; /* Скрываем аватарку на мобильных */
  }

  .ad-info {
    display: block;
  }

  .ad-actions {
    display: block;
  }
}

@media (min-width: 767px) {
      .text-xl.font-bold {
        font-size: 28px !important;
      }
      .ad-layout {
        display: flex;
        flex-wrap: wrap;
      }
      .ad-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;
      }
  .ad-title {
        width: 65%;
        padding-right: 1.5rem;
        margin-left: 1rem;
        margin-top: 1rem;
      }
      .ad-price-desktop {
        width: 35%;
        text-align: left;
        margin-top: 1rem;
        margin-left: 2rem;
      }
      .ad-left {
        width: 65%;
      }
      .ad-right {
        width: 35%;
        padding-left: 1.5rem;
      }
}
button#nextStep {
    display: none;
}
button#submitAd {
    width: max-content;
}
@media (min-width: 1024px) {
    
  .ad-title {
        width: 70%;
        padding-right: 1.5rem;
        margin-left: 1rem;
        margin-top: 1rem;
      }
      .ad-price-desktop {
        width: 30%;
        text-align: left;
        margin-top: 1rem;
        margin-left: 2rem;
      }
      .ad-left {
        width: 70%;
      }
      .ad-right {
        width: 30%;
        padding-left: 1.5rem;
      }
}
@media (min-width: 768px) {


  .title-on-top {
    order: -1;
    width: 100%;
  }
  .price-in-right {
    display: none; /* Скрываем цену в левом блоке на ПК */
  }
  .price-in-right-desktop {
    display: block !important; /* Показываем цену в правом блоке на ПК */
  }
}
.text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(35 35 35) !important;
}
@media (max-width: 768px) {
#codeModalContent {
    background-color: #fefefe;
    margin: 200px auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 5px;
    width: 94%;
    max-width: 400px;
    text-align: center;
}
  .price-in-right-desktop {
    display: block !important; /* Показываем цену в правом блоке на ПК */
  }

  .price-in-right-desktop {
    display: none !important; /* Скрываем цену в правом блоке на мобильных */
  }
}
.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(251 251 251) !important;
}
.grenn.bg-gray-50.p-4.rounded-lg {
    border: 1px solid rgb(59 130 246 / 0.5);
}
span.city {
position: absolute;
    z-index: 1;
    color: #ffffff;
    top: 4px;
    left: 4px;
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 6px;
    background: #00000073;
}
.alsd {
    position: relative;
}
.p-s {
    padding: 10px;
}
.gXeaCZ:not(:last-child)::after

 {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0px;
    right: 0px;
    height: 1px;
    background-color: #eaeaea;
}
.gXeaCZ {
    position: relative;
    text-align: left;
}
@media (min-width: 768px) {

    .md\:flex {
        display: flex
;
        margin-top: 1rem !important;
    }
}
.z-10 {
    z-index: 99 !important;
}
@media (max-width: 767px) {
    

    .b2b.p-4.border-b.flex.justify-between.items-center {
        display: none;
    }
}
.hfPrXO {
    position: relative;
    padding: 18px 0;
    background-color: #ffffff;
}
p.tui.text-gray-800 {
    display: inline-flex
;
}
p.tui.text-gray-500 {
    display: inline-flex;
    width: 168px;
}
.hfPrXO.yuii.mb-4 {
    padding-bottom: 30px;
    padding-top: 30px;
}
/* Добавляем линию после каждого элемента, кроме последнего */
.hfPrXO:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #f5f5f5;
}
a.flex.items-center.justify-between.text-gray-500.text-sm.cursor-pointer.hover\:bg-gray-50.rounded.px-2.py-1.no-underline:hover {
    background-color: #00000000 !important;
}
a.flex.items-center.justify-between.text-gray-500.text-sm.cursor-pointer.hover\:bg-gray-50.rounded.px-2.py-1.no-underline {
    font-size: 0.975rem !important;
}
.space {
    font-size: 15px !important;
    margin-left: 4px;
}
.strak {
    display: flex;
}

span.sss {
    margin-left: 4px;
    font-size: 15px !important;
}
.hover\:bg-gray-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / 0%) !important;
}
span.divil {
    font-size: 14px;
    margin-left: 27px;
}
i.fas.fa-chevron-right.text-gray-400 {
   margin-right: 4px;
    position: absolute;
    right: 0;
    margin-top: 4px;
}

/* Модальное окно кода доступа */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease-in-out;
}

.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    position: relative;
    animation: slideIn 0.3s ease-in-out;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modal-content h2 {
    margin-top: 0;
    color: #333;
    font-size: 24px;
}

.modal-content p {
    color: #666;
    margin-bottom: 20px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 17px;
    right: 20px;
}

.close:hover,
.close:focus {
    color: #000;
}

#accessCodeInput {
width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 0;
    background: #2563eb1f;
    border-radius: 10px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

#accessCodeInput:focus {
    outline: none;
    border-color: #4CAF50;
}

.message {
    color: #8c1408;
    font-size: 14px;
    margin-bottom: 15px;
    min-height: 20px;
}

.modal-buttons {
    display: flex;
    gap: 10px;
}

.btn-primary, .btn-secondary {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.btn-primary {
    background-color: #2563eb;
    color: white;
}

.btn-primary:hover {
    background-color: #1d4ed8;
}

.btn-secondary {
    background-color: #ccc;
    color: #333;
}

.btn-secondary:hover {
    background-color: #bbb;
}

/* Анимации */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@media (min-width: 480px) {
    .textsecr {
    margin-left: 28px !important;
    font-size: 17px;
    margin-top: 3px;
    margin-right: 0 !important;
    font-weight: 600;
}
    .textcod {
    margin-top: 35px;
    font-size: 14px;
    margin-bottom: 8px;
}
}
/* Адаптивность */
@media (max-width: 480px) {
    .textsecr {
    margin-left: 22px !important;
    font-size: 17px;
    margin-top: 3px;
    font-weight: 600;
}
    .textcod {
    margin-top: 42px;
    font-size: 14px;
    margin-bottom: 8px;
}
    .modal-content {
        margin: 20% auto;
        padding: 20px;
        width: 95%;
    }
    

}


.z-s {
    z-index: 9999;
}

@media (min-width: 640px) {
    form#reportForm {
    height: 250px;
    margin-top: -15px !important;
}
    .sm\:p-4 {
        padding: 1rem;
        display: flex !important
;
    }
}

div#reportFormFooter {
    position: fixed !important;
    width: 100% !important;
    bottom: 0 !important;
}
span.codes {
    font-size: 13px;
    color: #919191;
}
span.boards {
    font-size: 16px;
    color: #04477f;
    font-weight: 600;
}
.modalstyle {
    position: absolute;
    top: 0px;
    border-bottom: 1px solid #e6e6e6;
    width: 100%;
    left: 0;
    height: 58px;
    display: flex
;
    align-items: center;
}
/* Стили для временного уведомления */
.temporary-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 16px 24px;
  background-color: #f0fdf4; /* Светло-зеленый фон */
  color: #15803d; /* Темно-зеленый текст */
  border: 1px solid #bbf7d0; /* Граница */
  border-radius: 12px; /* Скругленные углы */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05); /* Тень */
  z-index: 10000;
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  max-width: 350px;
  font-family: 'Segoe UI', system-ui, sans-serif; /* Современный шрифт */
  font-size: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px; /* Отступ между иконкой и текстом */
}

.temporary-toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.temporary-toast.hide {
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
}

/* Иконка успеха внутри уведомления */
.temporary-toast .toast-icon {
  flex-shrink: 0; /* Иконка не сжимается */
  width: 24px;
  height: 24px;
  /* Стилизация галочки */
  display: flex;
  align-items: center;
  justify-content: center;
}

.temporary-toast .toast-icon::before {
  content: "";
  display: block;
  width: 16px;
  height: 8px;
  border-left: 2px solid #15803d; /* Цвет галочки */
  border-bottom: 2px solid #15803d; /* Цвет галочки */
  transform: rotate(-45deg); /* Создаем галочку */
}
.text-xsr {
    font-size: 17px;
    line-height: 11px;
}
.bg-red1 {
    --tw-bg-opacity: 1;
    background-color: rgb(166 43 43);
}
.-topsa {
    top: 2px;
}
.-rights {
    right: 2px;
}
/* Анимация пульсации микрофона с градиентом */
.voice-btn {
  position: relative;
}

.pulse-animation {
  animation: pulse-gradient 1.5s infinite ease-out;
}

@keyframes pulse-gradient {
  0% {
    transform: scale(0.8);
    opacity: 0.7;
    box-shadow: 0 0 0 0px rgba(67, 56, 202, 0.7); /* #4338ca */
  }
  70% {
    transform: scale(1.5);
    opacity: 0.3;
    box-shadow: 0 0 0 20px rgba(37, 99, 235, 0.3); /* #2563eb */
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
    box-shadow: 0 0 0 30px rgba(37, 99, 235, 0); /* #2563eb */
  }
}

/* Для создания градиента используем псевдоэлемент */
#pulseCircle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #4338ca, #2563eb);
  opacity: 0.7;
}

.voice-btn:active {
  transform: scale(0.95);
}
.shadow-md {
    --tw-shadow: 0 0px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
    --tw-shadow-colored: 0 0px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.text-prof {
    font-size: 22px;
    line-height: 26px;
    color: rgb(51 51 51);
}
.text-sre {
    font-size: 16px;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 400;
}
.text-srs {
    font-size: 14px;
}
 .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .form-group textarea {
            min-height: 100px;
            resize: vertical;
        }
        .price-option {
            flex: 1;
            text-align: center;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
        }
        .price-option.active {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }
        .price-input {
            display: none;
        }