body {
  display: flex;
  justify-content: center;
  /* font-family: 'Roboto', sans-serif; */
  font-family: 'Roboto Light';
  font-size: 18px;
  background-color: #ababab;
  /* color: #434242; */
  color: black;
  text-align: center;
}


p{
  line-height: normal;
  padding: 0 1em;
  margin-bottom: .7em;
}
li{
  line-height: normal;
  padding: -1em 1em;
  margin-bottom: .7em;
  margin-left: 2em;
  display: list-item;
  list-style-type: disc;

}
strong{
  font-weight: 700
}


/* Основной контейнер */
#grand_container {
  display: flex;
  justify-content: center;
  width: 100vw;
  max-width: 700px;
  flex-direction: column;
  border: 1px solid #434242;
  background-color: #f7f7f7;
  margin-top: 1em;
}
/* Вывод результата */
#result{
  display: none;
}
#result_title{
  text-align: left;
  line-height: 2em;
  padding-left: 1em;
  cursor: pointer;
  border-top: 1px solid #ababab;
  border-bottom: 1px solid #ababab;
}

/* Шапка */
header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: .4em 0 .7em 0;
}

#logo_img {
  width: 90%;
  max-width: 400px;
  cursor: pointer;
}

/* Меню */
/* Меню Заголовок */
#win_menu_head {
  width: 100%;
  height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #cfcfcf;
  border-bottom: 1px solid #f7f7f7;
}
#menu_head_left {
  display: flex;
  align-items: center;
}
.menu_img {
  height: 1.7em;
  margin: 0 1em;
  cursor: pointer;
  display: inline-block;
  opacity: 1;
}
.menu_img_deactive{
  height: 1.7em;
  margin: 0 1em;
  display: inline-block;
  opacity: .5;
}
.menu_img_hidden {
  height: 1.5em;
  margin: 0 1em;
  cursor: pointer;
  display: none;
}
.menu_str {
  display: inline-block;
  cursor: pointer;
}
#menu_head_center{
  width:2em;
  height:2em;
  cursor: pointer;
}
#menu_head_right {
  margin-right: 1em;
}


/* Меню Пункты */
#win_menu_item {
  width: 100%;
  display: none;
  background-color: #cfcfcf;
}

.menu_item {
  cursor: pointer;
  font-weight: normal;
}

#go_win_start {
  font-weight: bolder;
}

/* Узкий экран - столбец */
@media only screen and (max-width: 450px) {
  #win_menu_item {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
  }
  #save_balloons_id, #save_balloons_txt{
    display: none; /* ИСПРАВИТЬ inline-block */
  }

  .menu_item {
    padding: 1em 0;
    border-bottom: 1px solid #f7f7f7;
    width: 100%;
    padding-left: 1em;
  }
}

/* Широкий экран - строка */
@media only screen and (min-width: 451px) {
  #win_menu_item {
    height: 2.5em;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  #save_balloons_id #save_balloons_txt{
    display: inline-block;
  }
}

/* Окна программы */
.win {
  width:100%;
  /* min-height: 100vh; */
}

#win_start {
  display: block;
  text-align: left;
  background-color: white;
}
/* Блок с кнопкой */
.item_start{
  margin: 3em 0;
  padding-left: 1em;
}
/* Кнопка */
.button_start{
  display: inline-block;
  padding: .5em 1em;
  margin-left: 1em;
  margin-bottom: .5em;
  background-color: #f7f7f7;
  border: 1px solid #434242;
  border-radius: 5px;
  cursor: pointer;

  line-height: normal;
}



#win_library, #win_constructor, #win_catalog {
  display: none;
}
#win_constructor{
  position: relative;
}

/* Окно Конструктор */

/* Заголовок меню инструментов конструктора */
#win_constructor_tools{
  height: 2.5em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #cfcfcf;
  cursor: pointer;
}
/* Пункт меню инструментов конструктора */
.tools_item{
  border-bottom: 1px solid #cfcfcf;
  padding: .3em 0;
}
/* Части Пункта меню инструментов конструктора */
.tools_item_content{
  height: 1.7em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tools_item_content_bottom{
  height: 1.7em;
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* flex-wrap: wrap; */
}

/* пункт очисть все */
#clear_all{
  border-bottom: 1px solid #cfcfcf;
  padding: .3em 0;
  height: 2em;
  line-height: 2em;
  color: #cfcfcf;
  background-color: #434242;
  cursor: pointer;
}


/* Рисунок букета в конструкторе */
#win_constructor_div{
  background-color: white;
  position: relative;
  height: 100vh;
}
/* Шары в букете */
.img_bouqet{
  position: absolute;
  cursor: pointer;
}
/* Ленточки в букете */
.ribbon_div{
  position: absolute;
  width: 1px;
  background-color: #434242;
  transform-origin: 50% 100%;
}
/* Перечень шаров в конструкторе */
#win_constructor_list{
  background-color: white;
  display: none;
  text-align: left;
  padding: 1em;
}
#win_constructor_list div{
  margin-bottom: 1em;
}
#win_constructor_list li{
  margin: .5em 0 .5em 1em;
  list-style-type: disc;
}
#back_constructor{
  display: inline-block;
  padding: .5em 1em;
  background-color: #f7f7f7;
  border: 1px solid #434242;
  border-radius: 5px;
  cursor: pointer;
}
/* Окно активного шара */
#balloon_active_frame{
  position: absolute;
  bottom: 1vw;
  left: 1vw;
  width: 100px;
  height: 100px;
  border: 1px solid #434242;
  border-radius: 5px;
  z-index: 998;
  background-color: white;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  cursor: pointer;
  padding: 5px;
}
#balloon_active_frame_close{
  position: absolute;
  left: calc(1vw +  100px);
  bottom: calc(1vw +  100px);
  width: 2em;
  height: 2em;
  background-color: white;
  z-index: 999;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px solid #434242;
}
#balloon_active_frame_close_img{
  width: 1.5em;
  height: 1.5em;
}
#balloon_active_img{
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* Буфер активных шаров */
#clipboard_balloon{
  position: absolute;
  bottom: 1vw;
  left: 1vw;
  width: 100px;
  height: 1.2em;
  border: 1px solid #434242;
  border-radius: 5px;
  z-index: 998;
  background-color: white;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  cursor: pointer;
  padding: 5px;
  line-height: 1.2em;
}
/* Окно вывода буфера */
#clipboard_balloon_win{
  display: none;
}
#clipboard_balloon_title{
  text-align: left;
  line-height: 2em;
  padding-left: 1em;
  cursor: pointer;
  border-top: 1px solid #ababab;
  border-bottom: 1px solid #ababab;
}
#clipboard_balloon_div{
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Контекстное меню Конструктора */
#constructor_context_menu{
  position: absolute;
  z-index: 990;
  width: 100px;
  border: 1px solid red;
  display: none;
  padding: .5em;
  border: 1px solid #434242;
  background-color: rgba(247, 247, 247, 0.5);
  border-radius: 5px;
}
#constructor_context_menu div{
  padding: .5em 0;
  text-shadow: 1px 1px #f7f7f7;
  cursor: pointer;
}
#win_constructor_top{
  position: absolute;
  height: 1px;
  width: 1px;
  top: -2.5em;
  left: 0;
}


/* Подвал конструктора */
#win_constructor_footer{
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 2.5em;
  border-bottom: 1px solid #cfcfcf;
}


/* Окно Каталог */
/* Заголовок каталога */
.catalog_head {
  height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #cfcfcf;
  margin: 2em 0 0.5em 0;
  cursor: pointer;
}

/* Содержимое каталога */
.catalog_content {
  display: none;
  /* flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; */
  background-color: white;
}
.catalog_content_part{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Рисунок в каталоге */
.catalog_img {
  transform: scale(.8);
  margin: -10px;
  cursor: pointer;
}

/* Окно вывода выбранного шара */
/* Контейнер для окна вывода */
#sreen_full {
  display: none;
  align-items: center;
  align-content: center;
  justify-content: center;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 997;
}
/* Окно вывода */
#balloon_select {
  max-width: 500px;
  max-height: 500px;
  width: 90vw;
  height: 90vw;
  background-color: white;
  border: 1px solid #434242;
  border-radius: 8px;
  position: absolute;
  z-index: 998;
  display: none;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
/* Заголовок окна вывода */
#balloon_select_head{
  width: 100%;
  height: 3.5em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  }
/* Рисунок в окне вывода */
#balloon_select_img{
  width: 95%;
  height: calc(100% - 7em);
  /* background-image: url(../https://sharograf.ru/big_light/figure_anagram_07256.png); */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
/* Подвал в окне вывода */
#balloon_select_futer{
  width: 100%;
  height: 3.5em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
/* Кнопки футера окна вывода */
.balloon_select_button{
  display: flex;
  align-items: center;
  padding: .2em 1em .2em 0;
  background-color: #f7f7f7;
  border: 1px solid #434242;
  border-radius: 5px;
}

/* Кнопка наверх */
#top_body_button{
  display:block;
  position:fixed;
  bottom: 2.5em;
  right: 1em;
  width:2em;
  height:2em;
  line-height: 2em;
  padding:2px;
  color: #cfcfcf;
  background-color: #434242;
  border: 1px solid #cfcfcf;
  border-radius:1em;
  cursor: pointer;
}
/* Заставка во время загрузки страницы */
#loading_gif{
  display: flex;
  position:fixed;
  left: calc(50vw - 100px);
  top: calc(50vh - 100px);
  width: 200px;
  height: 200px;
  background-color: white;
  border: 1px solid #ababab;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  border-radius: 8px;
}

/* Заказать букет */
#order_shop{
  height: 2.5em;
  background-color: #5CBF14;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #f7f7f7;
  cursor: pointer;
  color: white;
}
#order_shop_show{
  background-color: white;
  display: none;
}
#sharlar_logo_img{
  width: 80%;
  margin: 1em 0;
}
.shop_box{
  border-radius: 10px;
  display: inline-block;
  margin: 1em;
  /* width: 180px; */
  cursor: pointer;
}
.images_box{
  background-color: white;
  text-align: center;
  margin: 3px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
.balloon_logo_style{
  width: 150px;
  height: 150px;
  margin: 5px;
}
.shop_caption{
  text-align: center;
  padding: 0 1em 0.5em 1em;
  margin: 0;
  color: white;
  line-height: 1.2em;
}
.social{
  width: 50px;
  height: 50px;
  margin: 0 .5em;
}

/* Справка */
#help_box{
  background-color: white;
  display: none;
}
.chapter_head{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  margin-top: 2em;
  height: 2.5em;
}
.menu_str_help {
  display: inline-block;
  cursor: pointer;
  font-size: 1.2em;
}
.chapter_content{
  display: none;
  text-align: left;
  padding: 0 1em;
}
/* Видео ролики */
.img_video{
  width: 90vw;
  max-width: 500px;
  margin: 1em 0;
}