.popupEditor {
  --backdropBackground: rgba(0,0,0,.5);
  --border: 4px solid #fff;
  --background: white;
  --backgroundS: #1d70a6;
  --height: 800px;
  --width: 1200px;
  --closeBtnSize: 30px;
  --colorBtnColor: white;
  --colorBtnColorHover: #1d70a6;
  --colorBtnBackground: #1d70a6;
  --colorBtnBackgroundHover: white; }

#canvas-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 10000;
  background: var(--background);
  border: var(--border);
  border-radius: 10px;
  height: var(--height);
  width: var(--width);
  max-height: calc(100% - 2 * var(--closeBtnSize));
  max-width: calc(100% - 2 * var(--closeBtnSize));
  box-sizing: border-box; }
  @media (max-width: 640px) {
    #canvas-wrapper {
      height: 100%;
      width: 100%;
      max-height: unset;
      max-width: unset;
      padding-top: var(--closeBtnSize);
      border-radius: 0;
      background: var(--backgroundS); } }

#canvas-fullscreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--backdropBackground); }
  #canvas-fullscreen-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200000; }

#canvas-close-btn {
  z-index: 10;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transform: translate(50%, -50%);
      -ms-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
  width: var(--closeBtnSize);
  height: var(--closeBtnSize);
  background: var(--colorBtnBackground);
  color: var(--colorBtnColor);
  box-sizing: border-box;
  border-radius: 50%;
  transition: color .3s ease, background-color .3s ease;
  border: 1px solid currentColor; }
  @media (max-width: 640px) {
    #canvas-close-btn {
      -webkit-transform: none;
          -ms-transform: none;
              transform: none;
      border-radius: 0; } }
  #canvas-close-btn .icon--close {
    position: relative;
    box-sizing: border-box;
    display: block;
    color: inherit;
    height: calc(100% - 2 * 7px);
    width: calc(100% - 2 * 7px); }
    #canvas-close-btn .icon--close:before, #canvas-close-btn .icon--close:after {
      content: '';
      position: absolute;
      top: 0;
      left: calc(50% - 1px);
      height: 100%;
      border-right: 2px solid currentColor;
      transition: -webkit-transform .5s ease;
      transition: transform .5s ease;
      transition: transform .5s ease, -webkit-transform .5s ease; }
    #canvas-close-btn .icon--close:before {
      -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
              transform: rotate(45deg); }
    #canvas-close-btn .icon--close:after {
      -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
              transform: rotate(-45deg); }
  #canvas-close-btn:hover {
    color: var(--colorBtnColorHover);
    background: var(--colorBtnBackgroundHover); }
    #canvas-close-btn:hover .icon--close:before {
      -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
              transform: rotate(-45deg); }
    #canvas-close-btn:hover .icon--close:after {
      -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
              transform: rotate(45deg); }