.info-block #small-block,
.info-block #large-block {
  position: fixed;
  right: -60%;       /* изначально за правой границей */
}

/* когда мы хотим увидеть small */
.info-block #small-block.visible {
  right: 0;
}

/* когда мы хотим увидеть large */
.info-block #large-block.visible {
  right: 0;
}

/* дополнительный сдвиг для small при открытом large */
.info-block #small-block.shifted {
  /* здесь 500px — это ширина large-block; можно заменить */
 right: 60%;
    background: #ff9768;
    font-size: 1rem;
    line-height: 2;
    display: none;
}




/* 1) Маленький красный блок с "!" */
   .info-block  #small-block {
          position: fixed;
    width: 44px;
    background: red;
    color: white;
    font-size: 1.5rem;
    line-height: 44px;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    right: -100px;
    cursor: pointer;
    transition: right 0.5s ease;
    z-index: 2;
       display:block;
        
    }
    @keyframes pulse {
      0%   { transform: translateY(-50%) scale(1); }
      50%  { transform: translateY(-50%) scale(1.3); }
      100% { transform: translateY(-50%) scale(1); }
    }
    .pulse {
      animation: pulse 0.6s ease 1;
    }

 /* 2) Блок "Важная информация" теперь 280?100 */
    .info-block  #info-block {
    text-align: center;
    margin: 0 auto;
    }



    /* 3) Большой серый блок 500?280 */
    .info-block #large-block {
      position: fixed;
      width: 60%;
    /*height: 50%;*/
      background: var(--bs-secondary-bg);
      top: 50%; transform: translateY(-50%);
      right: -60%;        /* спрятан за правым краем */
      transition: right 0.5s ease;
      z-index: 3;
      padding: 20px; box-sizing: border-box;
    }

[data-bs-theme=dark] .info-block #large-block {filter: grayscale(100%);}
[data-bs-theme=dark] .info-block #info-block{color:#000;}

.info-block .text { height: 300px;

}
   .info-block  #large-block .close {
      --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-secondary-bg);
    }


.info-block  #large-block .ikongolos{text-align: left;}

.info-block  #large-block .golosovalka .btn-outline-primary{
    --bs-btn-bg: var(--bs-secondary-bg);
    --bs-btn-border-color: var(--bs-secondary-bg);
    --bs-btn-color: var(--bs-body-color);
    text-align: left;
}
.info-block  #large-block .golosovalka .btn-check+.btn:hover {
    background-color: var(--bs-primary-text-emphasis);
    border-color: var(--bs-primary-text-emphasis);
}
.info-block  #large-block .golosovalka .btn-check+.btn:hover .border-start{
border-color: var(--bs-primary-text-emphasis) !important;}



@media (max-width: 767px) {
.info-block #large-block {
  right: -100%;       /* изначально за правой границей */
width: 87% !important;
    }
    #info-block {width: 100% !important;}    


}