.notif_popup_back {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; z-index: 9998;}
.notif_popup_back:hover, .notif_note_close:hover {cursor: pointer;}

.notif_popup {padding: 55px 0 0; display: none; position: fixed; left: 50%; width: 500px; margin-left: -250px; text-align: center; z-index: 9999; box-sizing: border-box; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
.notif_popup .notif_popup_close_css {position: absolute; right: 15px; top: 15px; width: 14px; height: 14px; z-index: 993; background: url('/bitrix/images/star.notification/close.png') 0 0 no-repeat; background-size: 100% auto;}
.notif_popup .notif_popup_close:hover {cursor: pointer;}
.notif_popup p {font-size: 14px; line-height: 1.5; padding: 0 0 25px; margin: 0;}
.notif_popup .notif_popup_content {position: relative; top: -20px; padding: 0 62px;}
.notif_popup .notif_popup_close_button{
  width: 115px;
  display:inline-block;
  padding: 12px 0;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 15px;
  border-radius: 5px;
}

.notif_popup1 {background: #ffbf00;}
.notif_popup1 p {color: #333333;}
.notif_popup1 .notif_popup_close_button{background: #333333; color: #ffbf00;}

.notif_popup2 {background: #333333;}
.notif_popup2 p {color: #ffbf00;}
.notif_popup2 .notif_popup_close_button{background: #ffbf00; color:  #333333;}



.notif_note {padding: 38px 0 0; width: 100%;  text-align: left; z-index: 9999; box-sizing: border-box;}
.notif_note .notif_popup_close_css {position: absolute; right:15px; top: 4px; width: 14px; height: 14px; z-index: 993; background: url('/bitrix/images/star.notification/close.png') 0 0 no-repeat; background-size: 100% auto;}
.notif_note .notif_popup_close:hover {cursor: pointer;}
.notif_note p {font-size: 14px; line-height: 1.5; margin: 0;}
.notif_note .notif_popup_content {position: relative; top: -20px; padding: 0 15px; padding-right: 50px; max-width: 1200px; margin:0 auto; box-sizing: border-box;}


@media screen and (max-width: 1100px) {
.notif_popup {width: 500px; margin-left: -250px;}
}

@media screen and (max-width: 750px) {
.notif_popup {width: 320px; margin-left: -160px;}
}

.star_notification_note {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  z-index: 9999;
}

.notif_note.notif_popup1 {
  width: 1000px;
  margin: 0 auto;
  padding: 0;
  background: #f6f7fa;
}
.notif_note.notif_popup1 .notif_popup_content {
  top: auto;
  padding: 30px 20px 30px 130px;
  background: url('/upload/notif_back.png') no-repeat 20px center;
  font-size: 14px;
}
.notif_note.notif_popup1 .notif_popup_close_css {
  background: url('/upload/notif_close.svg') no-repeat center center;
  right: 20px;
  top: 15px;
}
.notif_title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.notif_flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1.2;
}
.notif_flex > div {

}
.notif_flex > div + div {
  margin-left: 60px;
}
.notif_flex a {
  box-sizing: border-box;
  display: inline-block;
  background: #ffdf00;
  border-radius: 5px;
  padding: 10px 30px;
  font-weight: 400;
}

@media screen and (max-width: 1000px) {
  .notif_note.notif_popup1 {
    width: 100%;
  }
}
@media screen and (max-width: 650px) {
  .notif_note.notif_popup1 .notif_popup_content {
    background: none;
    padding: 30px;
  }
  .notif_flex {
    flex-wrap: wrap;
  }
  .notif_flex > div + div {
    margin-left: 0;
    margin-top: 20px;
  }
}