:root {
  --back-black: #1B1A20;
  --back-gray: #A4BBC2;  
  --icon-size: 70%; 
  --top-outdent: 50px; 
  --panel-corner: 8px;  
  --pointed-item: #4172F4;
  --selected-item: #444D53;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  src: url('../fonts/GolosText-VariableFont_wght.ttf');
}
body{
  font-family: "Golos Text";
  font-optical-sizing: auto;
  font-weight: unset;
  font-style: normal;
}
body, editor{
  margin: 0px;
  padding: 0px;
  background:none transparent;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100vw;  
  height: 100vh;
}
editor{
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  display: none;
}

.big-container{
  overflow-y: hidden;
}
.gallery{
  height: calc(100vh - 200px);
  overflow-y: scroll;
}
#container {
  display: flex;
  margin: 0 auto;
  position: absolute;
  top: 49px;
  left: 49px;
  border-radius: var(--panel-corner);
  overflow: hidden;
  height: calc(100vh - 75px - 64px);
  width: calc(100% - 54px);
  background: black;
  justify-content: center;
  align-items: center;
}

#container.no-panel {
  left: 0;
  width: 100%;
}

.canvas-container{
  width: 100% !important;
  height: 100% !important;  
}

#settings {
  position: absolute;
  width: 300px;
  height: 300px;
  background: #CCCCCC;
  left: 15px;
  top: 235px;
  display: none;
  padding: 10px;
}

table {
  margin: 0 auto; }

table tr th {
  text-align: center;
  background: #444444;
  color: #FFFFFF;
  padding: 3px; }

table tr td {
  border: solid 1px;
  padding: 3px; }

.field {
  width: 50px; }

#information {
  padding: 10px;
  font-size: 22px;
  background: pink;
  border: 1px solid red;
  margin-bottom: 3px; }

#intro-canvas, .upper-canvas{
  left: 0;
  right: 0;
  margin: auto;
  display: block;
}

#intro-canvas {
  background: rgba(255, 255, 255, 0);
  background-size: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
/*  image-rendering: pixelated;*/
}

#back-canvas {
  position: absolute;
  background: #292930;
}

.scroll-block{
  height: 1px;
}

.canvas-container {
  margin: auto; }

.pult {
  position: absolute;
  display: flex;
  align-items: center;
  width: 100%;  
  height: 75px;
  padding-left: 50px;
  background: #595656;
  bottom: 0px;
  z-index: 101;
}

.img-magnifier-glass {
  display: block;
  position: absolute;
  border: 1px solid #fff;
  border-radius: 50%;
  cursor: none;
  width: 100px;
  height: 100px;
  overflow: hidden;
  pointer-events: none;
}
    
#control {
  display: grid;
  grid-template-columns: 1fr 4fr;
  background: darkgray;
  margin-bottom: 3px;
  padding: 5px;
  border: 1px solid darkblue; }

#lbl {
  color: white;
  font-size: 20px; }

.buttons {
  display: inline-block;
  background: lightgray;
  margin: 10px;
  padding: 5px;
  cursor: pointer; }

#drop_file_zone {
  background-color: #EEE;
  border: #999 5px dashed;
  width: 290px;
  height: 200px;
  padding: 8px;
  font-size: 18px; }

#drag_upload_file {
  width: 50%;
  margin: 0 auto; }

#drag_upload_file p {
  text-align: center; }

#selectfile {
  display: none; }

#drop_file_zone {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto; }

.load-image-container {
  width: 100%;
  height: 100%;
  visibility: hidden; }

.load-image-container > div:first-child {
  position: absolute;
  left: 0;
  top: 0;
  background: black;
  opacity: 0.5;
  width: 100%;
  height: 100%; }

.legend{
  position: absolute;
  background: white;
  overflow: scroll;
  width: 200px;
  height: 150px;
  right: 0;
  bottom: 0;
  z-index: 1; 
}

.legend-item{
  display: flex;
  position: relative;
  flex-direction: row; 
}

.legend-item *{
  margin: 2px; 
}

.legend-item-image{
  width: 10px;
  height: 10px
}

.legend-item-caption{
  font-size: 10px;
  color: black; 
}

.panel{
  border: 1px solid #35383E;
  background: var(--back-black);  
}

.hl, .vl{
  background: #35383E;
}

.hl{
  height: 2px;  
  width: 100%;
}

.vl {
  width: 2px;
  height: 100%;
}

.top-menu {
  display: flex;
  flex-direction: row;
  position: relative;
  left: var(--top-outdent);
/*  font-size: 0;*/
/*  font-family: Verdana;*/
  cursor: pointer;
  z-index: 100;
}

.left-menu {
  display: grid;
  grid-template-columns: auto;
  position: absolute;
  top: var(--top-outdent);
  left: 0;
  font-size: 0;
/*  font-family: Verdana;*/
  cursor: pointer;
  z-index: 100;
}

.top-menu, .left-menu{
  border-radius: var(--panel-corner);   
}

.top-menu-button {
  position: relative;
  width: 32px;
  height: 32px;
  position: relative;
  margin: 5px;
}

/*.top-menu-button-selected::before{*/
/*  background: var(--selected-item) !important;*/
/*}*/

.top-menu-button-selected{
  background: var(--pointed-item);  
}
.top-menu-button.top-menu-button-selected:not(.zoom)::before, .top-menu-items.top-menu-button-selected:not(.zoom)::before {
  background-color: white;
}
/*.top-menu-button:hover, .top-menu-button:hover div:not(.zoom-bullet), .top-menu-items:hover {*/
.top-menu-button, .top-menu-items {
  border-radius: 4px;
}

.top-menu-button:not(.zoom):hover, .top-menu-items:not(.zoom):hover {
  background: var(--pointed-item);
}

.top-menu-button:not(.zoom):hover::before, .top-menu-items:not(.zoom):hover::before {
  background-color: white;
}

.top-menu-button::after{
/*  animation-duration: 1.5s;
  animation-name: hide;  */
}

.top-menu-button:not(.poupup-menu .top-menu-button):hover::after{
  content: attr(value);
  position: absolute;
  top: 100%;
  left: 0;  
  background: wheat;
  font-size: 10px;
  padding: 2px;   
  margin: 2px 0 0 10px;
  border-radius: 2px;
  opacity: 0;
  z-index: 100;
}

@keyframes hide {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }  
}

.top-menu-button:hover > .top-menu-items-container {
  visibility: visible; }

.top-menu-button::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.top-menu-button::before, .top-menu-items::before{
  background: #A4BBC2; 
}
#menu::before{
  mask: url("../icons/1_menu.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%;   
}
#pointer::before{
  mask: url("../icons/1_pointer.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%;   
}
.top-menu-items-container.zoom{
  z-index: 101;
}
#scale{
  width: 49px;
}
#scale::before{
  mask: url("../icons/1_scale.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%;   
}
#scale::after { 
  content: attr(scale_value);
  display: flex;
  width: 100%;
  height: 100%;  
  justify-content: center;
  align-items: center;  
  font-size: 10px;
  color: var(--back-gray);
}
#stick::before{
  mask: url("../icons/1_stick.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%;   
}
#move::before{
  mask: url("../icons/1_move.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%;   
}
#selection::before{
  mask: url("../icons/1_selection.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%;   
}
#undo-btn::before{
  mask: url("../icons/1_act-undo-btn.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%;   
}
#redo-btn::before{
  mask: url("../icons/1_act-redo-btn.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%;   
}
#zoom-in::before{
  mask: url("../icons/1_zoom-in.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%;   
}
#zoom-out::before{
  mask: url("../icons/1_zoom-out.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%;   
}
#zoom-text{
  width: 30px;
}
#zoom-text::after {
  content: attr(value);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 10px;  
  color: var(--back-gray);
}

#selected-tool {
  position: relative;
  left: 42px;
  top: 5px;  
  width: 42px;
  height: 42px;
  color: #6E8086;
  font-size: 10px;
  --icon-img: url("") 50% 50% no-repeat;
}
#selected-tool::after {
  content: attr(value);
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 10px;  
  color: var(--back-gray);
}

#selected-tool::before {
  content: "";  
  display: block;
  position: absolute;
  left: -100%;
  top: -5px;
  width: 100%;
  height: 100%;
  mask: var(--icon-img);
  mask-repeat: no-repeat;
  mask-position: 50% 50%; 
  background: var(--back-gray);
  z-index: 100;
}

#elements::before {
  mask: url("../icons/2_elements.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%; 
}

#text::before {
  mask: url("../icons/2_text.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%; 
}

#size::before {
  mask: url("../icons/2_size.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%; 
}

#geometry::before {
  mask: url("../icons/2_geometry.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%; 
}

#arrow::before {
  mask: url("../icons/2_arrow.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%; 
}

#line::before {
  mask: url("../icons/2_line.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%; 
}

#cap::before {
  mask: url("../icons/2_cap.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%; 
}

#pencil::before {
  mask: url("../icons/2_pencil.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%; 
}

#socket::before {
  mask: url("../icons/2_socket.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%; 
}

#rect::before {
  mask: url("../icons/2_rect.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%; 
}

#circle::before {
  mask: url("../icons/2_circle.svg"); 
  mask-repeat: no-repeat;
  mask-position: 50% 50%; 
}

.top-menu-items {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.top-menu-items:not(#menu .top-menu-items)::before{
  content: "";
  height: 20px;
  width: 20px;
  margin: 5px 5px 5px 6px;
}

.top-menu-items div:last-child {
  font-size: 13px;
  user-select: none;
  padding: 5px;
}

#elements .top-menu-items::after {
  content: attr(value);
  margin-left: 6px;
  margin-right: 15px;  
  font-size: 13px;
}

#petlya::before {
  mask: url("../icons/3_petlya.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: var(--icon-size);   
}

#naprav::before {
  mask: url("../icons/3_naprav.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: 100%;
}

#gazlift::before {
  mask: url("../icons/3_gazlift.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: var(--icon-size); 
}

#podyomnik::before {
  mask: url("../icons/3_podyomnik.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: var(--icon-size); 
}

#sushka::before {
  mask: url("../icons/3_sushka.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: var(--icon-size); 
}

#lotok::before {
  mask: url("../icons/3_lotok.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: var(--icon-size); 
}

#vnutr-yaschik::before {
  mask: url("../icons/3_vnutr-yaschik.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: var(--icon-size); 
}

#butilochnitsa::before {
  mask: url("../icons/3_butilochnitsa.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: 60%; 
}

#dampfer::before {
  mask: url("../icons/3_dampfer.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: var(--icon-size);  
} 

#tip-on::before {
  mask: url("../icons/3_tip-on.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: var(--icon-size); 
}

#zamok::before {
  mask: url("../icons/3_zamok.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: var(--icon-size); 
}

#skritiy-krepezh::before {
  mask: url("../icons/3_skritiy-krepezh.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: 100%; 
}

.top-menu-items-container {
  position: absolute;
  left: 100%;
  visibility: hidden;
  padding-left: 10px;
  z-index: 100;
}

.top-menu-items-container-back{
  color: white;
  border-radius: var(--panel-corner);
  overflow: hidden;
  padding: 12px 12px 12px 12px;
}

.top-menu .top-menu-items-container{
  left: 0px;
  top: 100%;
  padding: 10px 0 0 0;
}

.top-menu-button.zoom:not(#menu .top-menu-items)::before, .top-menu-items.zoom:not(#menu .top-menu-items)::before {
  position: absolute;
  left: -5px;
  background: var(--pointed-item);
  width: 4px;
  border-radius: 4px;
  height: 23px;
  top: -5px;
}

.top-menu-items.zoom:last-child::before{
  height: 15px !important;
}

.zoom div{
  width: 100%;
  box-sizing: border-box;
}

.zoom .top-menu-button {
  height: auto; }

.zoom .top-menu-items {
  position: relative;
  border-color: transparent;
  width: 42px;
  height: 15px;
  justify-content: center;
  margin: 6px 0 6px 0;
}

.zoom .top-menu-items div {
  width: 80%;
  height: 1px;
/*  border: 1px solid white;*/
}

.zoom .top-menu-items div::before {
  position: absolute;
  left: 25px;
  transform: translateY(-50%); 
}

.zoom .top-menu-items:nth-child(1) div::before {
  content: "1x";
}
.zoom .top-menu-items:nth-child(2) div::before {
  content: "2x";
}
.zoom .top-menu-items:nth-child(3) div::before {
  content: "3x";
}
.zoom .top-menu-items:nth-child(4) div::before {
  content: "4x";
}
.zoom .top-menu-items:nth-child(5) div::before {
  content: "5x";
}
.zoom .top-menu-items:nth-child(6) div::before {
  content: "6x";
}
.zoom .top-menu-items:nth-child(7) div::before {
  content: "7x";
}
.zoom .top-menu-items:nth-child(8) div::before {
  content: "8x";
}

.zoom-size-selected::after {
  content: "";
  position: absolute;
  background: white;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin-top: 0.5vw;
  margin-bottom: 1.3vw;
  left: -3px;
  top: 2px; 
  margin: auto;
  z-index: 100;
}

.zoom-bullet {
  position: relative;
  left: 0;
  right: 0;
  margin: auto;  
  background: white;
  border-radius: 50%;
}

.zoom-bullet:first-child{
  width: 2vw;
  height: 2vw;
  margin-top: 0.8vw;
  margin-bottom: 0.3vw;  
}

.zoom-bullet:last-child{
  width: 0.7vw;
  height: 0.7vw;
  margin-top: 0.5vw;  
  margin-bottom: 1.3vw;
}

.palette {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: var(--back-black);
}

.color-cell {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  margin: 4px;
  border-radius : 2px;
}

.color-cell:nth-child(1) {
  background-color: #1F3675; }

.color-cell:nth-child(2) {
  background-color: #3156B7; }

.color-cell:nth-child(3) {
  background-color: #5D558A; }

.color-cell:nth-child(4) {
  background-color: #7E1549; }

.color-cell:nth-child(5) {
  background-color: #B84446; }

.color-cell:nth-child(6) {
  background-color: #A43413; }

.color-cell:nth-child(7) {
  background-color: #D76E10; }

.color-cell:nth-child(8) {
  background-color: #B8855F; }

.color-cell:nth-child(9) {
  background-color: #3B7A3A; }

.color-cell:nth-child(10) {
  background-color: #FFFFFF; }

.color-cell:nth-child(11) {
  background-color: #707070; }

.color-cell:nth-child(12) {
  background-color: #000000; }

.color-cell:hover:after {
  content: "";
  position: absolute;
  z-index: 100;
  left: -2px;
  top: -2px;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 2px solid white; }

.color-cell-active:after {
  content: "";
  position: absolute;
  z-index: 99;
  left: -2px;
  top: -2px;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 2px solid white; }

.poupup-menu{
  position: absolute;
  top: 200px;
  left: 200px;
  border-radius: 4px;
  z-index: 100;
}

.poupup-menu .top-menu-items-container-back{
  display: flex;
  flex-direction: row;
  padding: 0;
}

#elements .top-menu-items::after {
  content: attr(value);
  margin-left: 6px;
  margin-right: 15px;  
  font-size: 13px;
}

#copy::before {
  mask: url("../icons/4_copy.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%; 
}

#cut::before {
  mask: url("../icons/4_cut.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%; 
}

#delete::before {
  mask: url("../icons/4_delete.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%; 
}

.img-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
}

.img-preview img{
  cursor: pointer;
}

.img-preview img {
  border: 1px solid black; 
  height: 200px;
}

.img-preview * {
  margin: 5px; }

.gallery {
  background: var(--back-black);
  color: white; }

.gallery a {
  color: white;
  font-size: 17px;
  font-weight: bold; }

.gallery > div {
  display: inline-block; }

.load-frame {
  display: flex;
  flex-direction: column;
  height: 200px;
  justify-content: center;
  align-items: center;
  background: #eff7fa;
/*  padding: 20px;
  background: gray;*/
}
.load-frame button{
  margin-bottom: 50px;
  width: 150px;
  height: 50px;
  font-size: 20px;
}
.load-frame > div div{
  margin-bottom: 20px;
  font-size: 15px;
}

.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8; }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
  z-index: 800; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
  width: 100% !important;
  height: 100%;
  max-width: 1268px;
  max-height: 869px; 
  left: 50vw;
  top: 50vh;
  transform: translate(-50%, -50%);
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  left: 8px;
  right: 8px;
  z-index: 1044; }

.mfp-preloader a {
  color: #CCC; }

.mfp-preloader a:hover {
  color: #FFF; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button::-moz-focus-inner {
  padding: 0;
  border: 0; }

iframe{
  background-color: rgba(0, 0, 0, 0.7) !important;
}

.mfp-close {
  position: absolute;
  top: 12px;
  right: 12px;
  margin-top: -1px;
  font-style: normal;
  font-size: 30px !important;
  z-index: 801;
}
.mfp-close:after{
  content: "×";  
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000; }

.mfp-iframe-scaler iframe:hover, .mfp-iframe-scaler iframe:active, .mfp-iframe-scaler iframe:focus {
  top: 0;
  left: 0;
  margin: 0; }

.caption-bar-button {
  cursor: pointer;
  color: white;
  border: 0;
  display: block;
  padding: 0;
  opacity: 0.65;
  transition: 400ms;
  width: 20px;
  height: 20px;
  line-height: 20px;
}

.caption-bar-button:hover {
  opacity: 0.93;
}

.drop-zone-container{
  width: 100%;
}
#drop-zone{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #eff7fa;
  padding-top: 70px;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
  cursor: pointer;
  box-sizing: border-box;
}
.progress{
    display: none;
}
#drop-zone div:first-child {
  font-size: 100px;
  font-weight: 300;
  margin-top: -60px;
  margin-bottom: -30px;
  color: gray;
}
#drop-zone div:last-child{
    font-size: 25px;
    color: #9c9c9c;
}
.progress{
/*    width: 200px;*/
    height: 20px;
}
.progress div{
    width: 0;
    height: 100%;
    background: #006889;    
}

.thumb-gallery-item {
  display: inline-block;
  position: relative;
  margin: 11px;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  background-size: cover;  
  background-position: center;
  background-repeat: no-repeat;       
}
.thumb-gallery-item::before {
  content: attr(data-cap);
  position: absolute;
  bottom: -30px;
  font-size: 10px;
  color: #464646;
}
.thumb-gallery-item:nth-child(4n - 3) {
  margin-left: 20px; 
}
.thumb-gallery-item:nth-child(4n) {
  margin-right: 20px; 
}
.thumb-gallery-temp-item{
} 
.thumb-gallery-temp-item::after {
  content: "";
  opacity: 0.5;    
  background: white;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}      
.thumb-gallery-item:hover .close-button{
  visibility: visible;        
}
.close-button {
  visibility: hidden;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(20%, -30%);
  border-radius: 50%;
  width: 15px;
  height: 15px;
  background: white;
  cursor: pointer;
  color: gray;
  text-align: center;
  line-height: 15px;
  font-size: 10px;
  z-index: 1;       
}
.close-button:after {
    content: "✖";
}
.save-btn-preview{
  position: fixed;
  left: 30px;
  bottom: 30px;
  color: white;
  box-shadow: box-shadow: 10px 5px 5px black;
  padding: 2px;
  text-shadow: 1px 1px 2px black;
  background: gray;
}
@media screen and (max-height: 680px) {
    .left-menu{
      grid-template-columns: auto auto;
    }
    #container{
      left: 90px;
      width: calc(100% - 95px);
    } 
    .top-menu{
      left: 87px;      
    }
    .hl{
      display: none;
    }   
}