<template>

<div :class="'win ' + winStateClass" :style="'z-index: 100; right: '+windowRightOffset+'px;'" :ref="'win'+number" @click="moveOnTop()">
  <div class="wintitle" @dblclick="dblclickTitle()" @mousedown="mousedownTitle" @mouseup="mouseupTitle()">
    <div class="icon"></div>
    <div class="title">
        {{title}}
    </div>
    <div class="btn imgClose" @click="close()" title="Close"></div>
    <div class="btn imgMin" @click="toggleMinimize()" title="Minimize / Restore"></div>
  </div>
  <div class="content">
      <slot></slot>
  </div>
  <!--
  <div class="statusline">
    <div class="text">
        Status line
    </div>
    <div class="winresize"></div>
  </div>
  -->
</div>

</template>

<script>
    export default {
      props: ['title', 'number', 'width', 'height'],
      data: function () {
          return {
              winStateClass: '',
              drag: false,
              dragObject: this.dragObject,
              shiftX: this.shiftX,
              shiftY: this.shiftY,
              downX: this.downX,
              downY: this.downY
          }
      },
      computed: {
        windowRightOffset () {
          return (10 + (this.number-1) * 310)
        }
      },
      methods: {
          toggleMinimize: function () {
              if (this.winStateClass == '') {
                  this.winStateClass = 'minimized'
              } else {
                  this.winStateClass = ''
              }
          },
          close() {
              this.$emit('close')
          },
          moveOnTop() {
              // Change Z-Index for all windows
              let windows = document.getElementsByClassName('win')
              let xIndex = 0
              for (let window of windows) {
                xIndex = Math.max(xIndex, window.style.zIndex)
                window.style.zIndex--
              }
              // Set maximal Z-Index for current windows
              this.dragObject.style.zIndex = xIndex
          },
          mousedownTitle(e) {
              this.moveOnTop()

              let box = this.dragObject.getBoundingClientRect()
              this.shiftX = box.left
              this.shiftY = box.top

              if (e.type == 'mousedown') {
                  this.downX = e.pageX
                  this.downY = e.pageY
              }
              else {
                  if (e.type == 'touchstart') {
                      this.downX = e.touches[0].pageX
                      this.downY = e.touches[0].pageY
                  }
              }

              this.drag = true
          },
          mouseupTitle() {
              //console.log('mouseup')
              this.drag = false
          },
          dblclickTitle() {
            if (this.winStateClass == 'minimized') {
              this.winStateClass = ''
            }
          },
          onMouseMove(e) {
              if (this.drag == true) {
                  //console.log('onMouseMove')

                  let pageX = 0
                  let pageY = 0

                  if (e.type == 'mousemove') {
                      pageX = e.pageX
                      pageY = e.pageY
                  } else {
                      if (e.type == 'touchmove') {
                          pageX = e.touches[0].pageX
                          pageY = e.touches[0].pageY
                      }
                  }

                  this.dragObject.style.left = this.shiftX + (pageX - this.downX) + 'px'
                  this.dragObject.style.top = this.shiftY + (pageY - this.downY) + 'px'

                  /*
                  if (dragObject.elem) {
                      // if dragging not started yet
                      if (!dragObject.avatar) {
                          let moveX = pageX - dragObject.downX
                          let moveY = pageY - dragObject.downY
                          // if mouse dragged window a little way
                          if (Math.abs(moveX) < 3 && Math.abs(moveY) < 3) {
                              return
                          }
                          // start to drag
                          dragObject.avatar = dragObject.elem;

                          // remember shiftX/shiftY
                          let box = dragObject.avatar.getBoundingClientRect()
                          dragObject.shiftX = dragObject.downX - box.left
                          dragObject.shiftY = dragObject.downY - box.top
                          dragObject.width = box.width
                          dragObject.height= box.height

                          startDrag(e);
                      }

                      // change window position
                      dragObject.avatar.style.left = pageX - dragObject.shiftX + 'px'
                      dragObject.avatar.style.top = pageY - dragObject.shiftY + 'px'

                      if (pageX - dragObject.shiftX < 0) dragObject.avatar.style.left = '0px'
                      if (pageY - dragObject.shiftY < 0) dragObject.avatar.style.top = '0px'
                      if ((window.innerWidth - (pageX - dragObject.shiftX) - dragObject.width) < 0) dragObject.avatar.style.left = (window.innerWidth - dragObject.width) + 'px'
                      if ((window.innerHeight - (pageY - dragObject.shiftY) - dragObject.height) < 0) dragObject.avatar.style.top = (window.innerHeight - dragObject.height) + 'px'
                  }
                  if (dragObject.resize)  {
                      dragObject.resize.style.width = dragObject.width - dragObject.downX + pageX + 'px'
                      dragObject.resize.style.height = dragObject.height - dragObject.downY + pageY + 'px'
                  }
                  */



              }
          },
          setSize: function () {
          if (typeof this.width != 'undefined') {
            this.dragObject.style.width = this.width+'px'
          }

          if (typeof this.height != 'undefined') {
            this.dragObject.style.height = this.height+'px'
          }
      },
      },
      mounted: function () {
          this.dragObject = this.$refs["win"+this.number]
          document.addEventListener('mousemove', this.onMouseMove)
          document.addEventListener('touchmove', this.onMouseMove)
          //document.onmousemove = this.onMouseMove
          //document.ontouchmove = this.onMouseMove
          this.setSize()
      },
      beforeUnmount: function () {
          document.removeEventListener('mousemove', this.onMouseMove)
          document.removeEventListener('touchmove', this.onMouseMove)
          //document.onmousemove = null
          //document.ontouchmove = null
      },

      watch: {
        width() {
          this.setSize()
        },
        height() {
          this.setSize()
        }
      }
    }
</script>

<style>
.win {
  /* window style */
  /*font-family: Arial, Helvetica, sans-serif;*/
  /*font-weight: 300;*/
  /*font-size: 0.9em;*/
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  padding: 0px;
  border: 0px none;
  background: transparent none repeat scroll 0% 0%;
  overflow: hidden;
  position: fixed;
  right: 10px;
  bottom: 0px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: block;
  width: 660px;
  height: 540px;
  min-width: 300px;
  min-height: 300px;
  max-width: 1280px;
  max-height: 768px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 3px 2px;
  background-color: #FFF;
  transition: 0.05s;
}

.win.rolledup {
  min-height: 30px !important;
  height: 30px !important;
}

.win.minimized {
  min-height: 30px !important;
  height: 30px !important;
  width: 300px !important;
  left: auto !important;
  top: auto !important;
  bottom: 0px !important;
}

.win.hidden {
  display: none;
}

.win .wintitle {
  /* window title style */
  width: 100%;
  height: 2.0em;
  display: block;
  background-color:rgb(0, 137, 250);
  cursor: move;
}

.win .wintitle .icon {
  /* window title icon style */
  float: left;
  margin: 4px;
  margin-left: 8px;
  text-align: left;
  cursor: default;
  background-repeat: no-repeat;
  /*
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2MCA2MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPgo8Zz4KCTxwYXRoIGQ9Ik0xMCwyNS40NjVoMTNjMC41NTMsMCwxLTAuNDQ4LDEtMXMtMC40NDctMS0xLTFIMTBjLTAuNTUzLDAtMSwwLjQ0OC0xLDFTOS40NDcsMjUuNDY1LDEwLDI1LjQ2NXoiIGZpbGw9IiNGRkZGRkYiLz4KCTxwYXRoIGQ9Ik0zNiwyOS40NjVIMTBjLTAuNTUzLDAtMSwwLjQ0OC0xLDFzMC40NDcsMSwxLDFoMjZjMC41NTMsMCwxLTAuNDQ4LDEtMVMzNi41NTMsMjkuNDY1LDM2LDI5LjQ2NXoiIGZpbGw9IiNGRkZGRkYiLz4KCTxwYXRoIGQ9Ik0zNiwzNS40NjVIMTBjLTAuNTUzLDAtMSwwLjQ0OC0xLDFzMC40NDcsMSwxLDFoMjZjMC41NTMsMCwxLTAuNDQ4LDEtMVMzNi41NTMsMzUuNDY1LDM2LDM1LjQ2NXoiIGZpbGw9IiNGRkZGRkYiLz4KCTxwYXRoIGQ9Ik01NC4wNzIsMi41MzVMMTkuOTMsMi40NjVjLTMuMjcsMC01LjkzLDIuNjYtNS45Myw1LjkzdjUuMTI0bC04LjA3LDAuMDE3Yy0zLjI3LDAtNS45MywyLjY2LTUuOTMsNS45M3YyMS4xNDEgICBjMCwzLjI3LDIuNjYsNS45MjksNS45Myw1LjkyOUgxMnYxMGMwLDAuNDEzLDAuMjU0LDAuNzg0LDAuNjQsMC45MzNjMC4xMTcsMC4wNDUsMC4yMzksMC4wNjcsMC4zNiwwLjA2NyAgIGMwLjI3NiwwLDAuNTQ3LTAuMTE1LDAuNzQtMC4zMjdsOS43MDQtMTAuNjc1bDE2LjYyNi0wLjA2OGMzLjI3LDAsNS45My0yLjY2LDUuOTMtNS45Mjl2LTAuMTEzbDUuMjYsNS43ODYgICBjMC4xOTMsMC4yMTIsMC40NjQsMC4zMjcsMC43NCwwLjMyN2MwLjEyMSwwLDAuMjQzLTAuMDIyLDAuMzYtMC4wNjdjMC4zODYtMC4xNDksMC42NC0wLjUyLDAuNjQtMC45MzN2LTEwaDEuMDcgICBjMy4yNywwLDUuOTMtMi42Niw1LjkzLTUuOTI5VjguNDY1QzYwLDUuMTk2LDU3LjM0MSwyLjUzNiw1NC4wNzIsMi41MzV6IE00NCw0MC41MzZjMCwyLjE2Ny0xLjc2MywzLjkyOS0zLjkzNCwzLjkyOWwtMTcuMDcsMC4wNyAgIGMtMC4yOCwwLjAwMS0wLjU0OCwwLjEyLTAuNzM2LDAuMzI3TDE0LDUzLjk0OXYtOC40MTRjMC0wLjU1Mi0wLjQ0Ny0xLTEtMUg1LjkzYy0yLjE2NywwLTMuOTMtMS43NjMtMy45My0zLjkyOVYxOS40NjUgICBjMC0yLjE2NywxLjc2My0zLjkzLDMuOTMyLTMuOTNsOS4wNjgtMC4wMTljMCwwLDAsMCwwLDBjMC4wMDEsMCwwLjAwMSwwLDAuMDAyLDBsMjUuMDY4LTAuMDUyYzIuMTY3LDAsMy45MywxLjc2MywzLjkzLDMuOTMgICB2MTguNDQxVjQwLjUzNnogTTU4LDI5LjYwNmMwLDIuMTY3LTEuNzYzLDMuOTI5LTMuOTMsMy45MjlINTJjLTAuNTUzLDAtMSwwLjQ0OC0xLDF2OC40MTRsLTUtNS41VjE5LjM5NSAgIGMwLTMuMjctMi42Ni01LjkzLTUuOTMyLTUuOTNMMTYsMTMuNTE0di01LjEyYzAtMi4xNjcsMS43NjMtMy45MywzLjkyOC0zLjkzbDM0LjE0MSwwLjA3YzAuMDAxLDAsMC4wMDEsMCwwLjAwMiwwICAgYzIuMTY3LDAsMy45MywxLjc2MywzLjkzLDMuOTNWMjkuNjA2eiIgZmlsbD0iI0ZGRkZGRiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
  */
  /*
  background-image: url(data:image/svg+xml;utf8;base64,[encoded data, 8068 characters]);
  */
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIEdlbmVyYXRvcjogU1ZHIFJlcG8gTWl4ZXIgVG9vbHMgLS0+Cgo8c3ZnCiAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIKICAgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIGhlaWdodD0iMTYiCiAgIHdpZHRoPSIxNiIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0iQ2FwYV8xIgogICB2aWV3Qm94PSIwIDAgMS40ODQxNCAxLjQ4NDE0IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBzb2RpcG9kaTpkb2NuYW1lPSJjYW1lcmEuc3ZnIgogICBzdHlsZT0iZmlsbDojMDAwMDAwIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkyLjUgKDIwNjBlYzFmOWYsIDIwMjAtMDQtMDgpIj48bWV0YWRhdGEKICAgaWQ9Im1ldGFkYXRhMTMiPjxyZGY6UkRGPjxjYzpXb3JrCiAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz48ZGM6dGl0bGU+PC9kYzp0aXRsZT48L2NjOldvcms+PC9yZGY6UkRGPjwvbWV0YWRhdGE+PGRlZnMKICAgaWQ9ImRlZnMxMSIgLz48c29kaXBvZGk6bmFtZWR2aWV3CiAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgIGJvcmRlcm9wYWNpdHk9IjEiCiAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgIGdyaWR0b2xlcmFuY2U9IjEwIgogICBndWlkZXRvbGVyYW5jZT0iMTAiCiAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjI1NjAiCiAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEzNTIiCiAgIGlkPSJuYW1lZHZpZXc5IgogICBzaG93Z3JpZD0iZmFsc2UiCiAgIGlua3NjYXBlOnpvb209IjM3Ljc2IgogICBpbmtzY2FwZTpjeD0iNi45NjUyMjQ4IgogICBpbmtzY2FwZTpjeT0iMy4xODQzNTI4IgogICBpbmtzY2FwZTp3aW5kb3cteD0iMCIKICAgaW5rc2NhcGU6d2luZG93LXk9IjI4IgogICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJnNiIgLz4KPGcKICAgaWQ9Imc2IgogICB0cmFuc2Zvcm09Im1hdHJpeCgwLjAxOTcyMjU2LDAsMCwwLjAxOTcyMjU2LDAuMDA4Njg1MTYsLTAuMDAzMzI0MzgpIj4KCTxwYXRoCiAgIGQ9Ik0gNTcuNzQ2LDE0LjY1OCBIIDU0Ljk4OSBMIDUzLjk2OCwxMS4yOTUgQyA1My4wMDMsOC4xMTcgNTAuMTI0LDUuOTgyIDQ2LjgwNCw1Ljk4MiBIIDI4LjgwMSBjIC0zLjMyMSwwIC02LjIwMSwyLjEzNSAtNy4xNjUsNS4zMTMgbCAtMS4wMjEsMy4zNjMgSCAxNi40NjIgQyA3LjM4NSwxNC42NTggMCwyMi4wNDMgMCwzMS4xMjEgdiAyMC42NDIgYyAwLDkuMDc3IDcuMzg1LDE2LjQ2MiAxNi40NjIsMTYuNDYyIGggNDEuMjgzIGMgOS4wNzcsMCAxNi40NjIsLTcuMzg1IDE2LjQ2MiwtMTYuNDYyIFYgMzEuMTIxIEMgNzQuMjA4LDIyLjA0MyA2Ni44MjMsMTQuNjU4IDU3Ljc0NiwxNC42NTggWiBtIDEwLjQ2MiwzNy4xMDQgYyAwLDUuNzY5IC00LjY5MywxMC40NjIgLTEwLjQ2MiwxMC40NjIgSCAxNi40NjIgQyAxMC42OTMsNjIuMjIzIDYsNTcuNTMgNiw1MS43NjIgViAzMS4xMjEgQyA2LDI1LjM1MiAxMC42OTMsMjAuNjU5IDE2LjQ2MiwyMC42NTkgaCA4LjYwMyBsIDIuMzEzLC03LjYyMSBjIDAuMTkyLC0wLjYzMSAwLjc2NCwtMS4wNTUgMS40MjMsLTEuMDU1IGggMTguMDAzIGMgMC42NTksMCAxLjIzLDAuNDI0IDEuNDIzLDEuMDU3IGwgMi4zMTQsNy42MTkgaCA3LjIwNCBjIDUuNzY5LDAgMTAuNDYyLDQuNjkzIDEwLjQ2MiwxMC40NjIgeiIKICAgaWQ9InBhdGgyIgogICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICBzdHlsZT0ic3Ryb2tlOiNmZmZmZmY7ZmlsbDojZmZmZmZmIiAvPgoJPHBhdGgKICAgZD0ibSAzNy4yMjgsMjUuNDA2IGMgLTguODQ0LDAgLTE2LjA0LDcuMTk1IC0xNi4wNCwxNi4wNCAwLDguODQ0IDcuMTk1LDE2LjAzOSAxNi4wNCwxNi4wMzkgOC44NDUsMCAxNi4wNDEsLTcuMTk1IDE2LjA0MSwtMTYuMDM5IDAsLTguODQ1IC03LjE5NiwtMTYuMDQgLTE2LjA0MSwtMTYuMDQgeiBtIDAsMjYuMDggYyAtNS41MzYsMCAtMTAuMDQsLTQuNTA0IC0xMC4wNCwtMTAuMDM5IDAsLTUuNTM2IDQuNTA0LC0xMC4wNCAxMC4wNCwtMTAuMDQgNS41MzcsMCAxMC4wNDEsNC41MDQgMTAuMDQxLDEwLjA0IDAsNS41MzUgLTQuNTA0LDEwLjAzOSAtMTAuMDQxLDEwLjAzOSB6IgogICBpZD0icGF0aDQiCiAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7c3Ryb2tlOiNmZmZmZmYiIC8+CjwvZz4KPC9zdmc+);
  

  width: 24px;
  height: 24px;
}

.win .wintitle .title {
  /* window title text style */
  float: left;
  padding: 0.3em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  left: 2.8em;
  right: 5em;
  color: #FFF;
}

.win.minimized .wintitle {
  cursor: default;
}

.win.nomove .wintitle {
  cursor: default;
}

.win .btn {
  /* common title button style */
  float: right;
  padding: 0px;
  margin: 0.2em;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  /*
  background-position-x: 0.3em;
  background-position-y: 0.3em;
  */
  cursor: pointer;
}

.win .imgClose {
  /*
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4wMyAxMi4wMyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMTEuMjc4IDBILjc1MkEuNzUyLjc1MiAwIDAgMCAwIC43NTJ2MTAuNTI2YzAgLjQxNi4zMzYuNzUyLjc1Mi43NTJoMTAuNTI2YS43NTIuNzUyIDAgMCAwIC43NTItLjc1MlYuNzUyQS43NTIuNzUyIDAgMCAwIDExLjI3OCAwem0wIDExLjI3OEguNzUyVi43NTJoMTAuNTI2eiIvPjxwYXRoIGQ9Ik0zLjQ4NSA4LjUzN2EuMzgzLjM4MyAwIDAgMCAuNTM4IDBsMi4wMDEtMS45ODUgMS45ODQgMS45ODNhLjM4LjM4IDAgMCAwIC41MzcgMCAuMzgyLjM4MiAwIDAgMCAwLS41MzhMNi41NjMgNi4wMTZsMS45Ny0xLjk1M2EuMzc0LjM3NCAwIDAgMCAwLS41MzIuMzgyLjM4MiAwIDAgMC0uNTM4IDBMNi4wMyA1LjQ4MSA0LjAzNCAzLjQ4NmEuMzguMzggMCAwIDAtLjUzNyAwIC4zODIuMzgyIDAgMCAwIDAgLjUzOUw1LjQ5IDYuMDE3IDMuNDg2IDguMDA1YS4zNzQuMzc0IDAgMCAwIDAgLjUzMnoiLz48L2c+PC9zdmc+);
  */
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgd2lkdGg9IjE2IgogICBoZWlnaHQ9IjE2IgogICB2aWV3Qm94PSIwIDAgMTYgMTYiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzEwIgogICBzb2RpcG9kaTpkb2NuYW1lPSJjbG9zZS1zdmdyZXBvLWNvbS5zdmciCiAgIGlua3NjYXBlOnZlcnNpb249IjAuOTIuNSAoMjA2MGVjMWY5ZiwgMjAyMC0wNC0wOCkiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTE2Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzMTQiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIyNTYwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEzNTIiCiAgICAgaWQ9Im5hbWVkdmlldzEyIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBpbmtzY2FwZTp6b29tPSIxOS42NjY2NjciCiAgICAgaW5rc2NhcGU6Y3g9IjYuNTY4NjY2MSIKICAgICBpbmtzY2FwZTpjeT0iOS4yNjQ1NjQ1IgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyOCIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzEwIiAvPgogIDxnCiAgICAgZGF0YS1uYW1lPSJMYXllciAyIgogICAgIGlkPSJnOCIKICAgICB0cmFuc2Zvcm09Im1hdHJpeCgwLjkzMDA4NDc1LDAsMCwwLjkzMDA4NDc1LC0zLjE1MjU0MjQsLTMuMjcxMTg2NCkiCiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZiI+CiAgICA8ZwogICAgICAgZGF0YS1uYW1lPSJjbG9zZSIKICAgICAgIGlkPSJnNiIKICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmYiPgogICAgICA8cmVjdAogICAgICAgICB3aWR0aD0iMjQiCiAgICAgICAgIGhlaWdodD0iMjQiCiAgICAgICAgIHRyYW5zZm9ybT0icm90YXRlKDE4MCwxMiwxMikiCiAgICAgICAgIGlkPSJyZWN0MiIKICAgICAgICAgeD0iMCIKICAgICAgICAgeT0iMCIKICAgICAgICAgc3R5bGU9Im9wYWNpdHk6MDtmaWxsOiNmZmZmZmYiIC8+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Im0gMTMuNDEsMTIgNC4zLC00LjI5IEEgMS4wMDQwOTE2LDEuMDA0MDkxNiAwIDEgMCAxNi4yOSw2LjI5IEwgMTIsMTAuNTkgNy43MSw2LjI5IEEgMS4wMDQwOTE2LDEuMDA0MDkxNiAwIDAgMCA2LjI5LDcuNzEgbCA0LjMsNC4yOSAtNC4zLDQuMjkgYSAxLDEgMCAwIDAgMCwxLjQyIDEsMSAwIDAgMCAxLjQyLDAgbCA0LjI5LC00LjMgNC4yOSw0LjMgYSAxLDEgMCAwIDAgMS40MiwwIDEsMSAwIDAgMCAwLC0xLjQyIHoiCiAgICAgICAgIGlkPSJwYXRoNCIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=);
}
.win.minimized .imgClose {
  /*display: none;*/
}

.win .imgMin {
  /*
    background-image:  url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4wMyAxMi4wMyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiPjxnIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2ZmZiI+PHBhdGggZD0iTTExLjI3OCAwSC43NTJBLjc1Mi43NTIgMCAwIDAgMCAuNzUydjEwLjUyNmMwIC40MTYuMzM2Ljc1Mi43NTIuNzUyaDEwLjUyNmEuNzUyLjc1MiAwIDAgMCAuNzUyLS43NTJWLjc1MkEuNzUyLjc1MiAwIDAgMCAxMS4yNzggMHptMCAxMS4yNzhILjc1MlYuNzUyaDEwLjUyNnoiIHN0cm9rZS13aWR0aD0iLjAzMTI1Ii8+PC9nPjxwYXRoIGQ9Ik0yLjU1NiAzLjk0NWg3LjMwNyIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9Ii43NTIiLz48L3N2Zz4=);
    */
  background-image:  url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgeD0iMHB4IgogICB5PSIwcHgiCiAgIHdpZHRoPSIxNiIKICAgaGVpZ2h0PSIxNiIKICAgdmlld0JveD0iMCAwIDE2IDE2IgogICBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MiA1MiIKICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnNiIKICAgc29kaXBvZGk6ZG9jbmFtZT0ibWluaW1pemUtd2luZG93LXN2Z3JlcG8tY29tLnN2ZyIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMC45Mi41ICgyMDYwZWMxZjlmLCAyMDIwLTA0LTA4KSI+PG1ldGFkYXRhCiAgIGlkPSJtZXRhZGF0YTEyIj48cmRmOlJERj48Y2M6V29yawogICAgICAgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlCiAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgIGlkPSJkZWZzMTAiIC8+PHNvZGlwb2RpOm5hbWVkdmlldwogICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICBib3JkZXJvcGFjaXR5PSIxIgogICBvYmplY3R0b2xlcmFuY2U9IjEwIgogICBncmlkdG9sZXJhbmNlPSIxMCIKICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIKICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIyNTYwIgogICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMzUyIgogICBpZD0ibmFtZWR2aWV3OCIKICAgc2hvd2dyaWQ9ImZhbHNlIgogICBpbmtzY2FwZTp6b29tPSIxMi44MzY3MDgiCiAgIGlua3NjYXBlOmN4PSIxNC45MzYwNzQiCiAgIGlua3NjYXBlOmN5PSIxMS45MzUxNTkiCiAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICBpbmtzY2FwZTp3aW5kb3cteT0iMjgiCiAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiCiAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzYiIC8+CjxnCiAgIGlkPSJnNCIKICAgdHJhbnNmb3JtPSJtYXRyaXgoMC4yNjQ4MDM3LDAsMCwwLjI2NDgwMzcsMS40NzAzOTI2LC0zLjI0MDE4NTEpIgogICBzdHlsZT0iZmlsbDojZmZmZmZmIj4KCTxwYXRoCiAgIGQ9Ik0gNTAsNDguNSBDIDUwLDQ5LjMgNDkuMyw1MCA0OC41LDUwIEggMy41IEMgMi43LDUwIDIsNDkuMyAyLDQ4LjUgdiAtMyBDIDIsNDQuNyAyLjcsNDQgMy41LDQ0IGggNDUgYyAwLjgsMCAxLjUsMC43IDEuNSwxLjUgeiIKICAgaWQ9InBhdGgyIgogICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICBzdHlsZT0iZmlsbDojZmZmZmZmIiAvPgo8L2c+Cjwvc3ZnPg==);
    /*
  background-image:  url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4wMyAxMi4wMyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48ZyBmaWxsPSIjZmZmIiBzdHJva2U9IiNmZmYiPjxwYXRoIGQ9Ik0xMS4yOTQtLjAxNkguNzY4YS43NTIuNzUyIDAgMCAwLS43NTIuNzUydjEwLjUyN2MwIC40MTUuMzM2Ljc1Mi43NTIuNzUyaDEwLjUyNmEuNzUyLjc1MiAwIDAgMCAuNzUyLS43NTJWLjczNmEuNzUyLjc1MiAwIDAgMC0uNzUyLS43NTJ6bTAgMTEuMjc5SC43NjhWLjczNmgxMC41MjZ6IiBzdHJva2Utd2lkdGg9Ii4wMzEyNSIvPjwvZz48cGF0aCBkPSJNLjc1IDUuNTQzaDUuNjEyTTYuMzYyIDUuNTQzdjUuODYyTTEwLjIzOCAxLjc3OEw2LjMxNCA1LjcwM002LjM2MiA1LjU0M0g5LjFNNi4zOSAyLjk2NnYyLjczNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9Ii43NTIiLz48L3N2Zz4=);
  */
}
/*
.win.minimized .imgMin {
   background-image:  url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4wMyAxMi4wMyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiPjxnIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2ZmZiI+PHBhdGggZD0iTTExLjI3OCAwSC43NTJBLjc1Mi43NTIgMCAwIDAgMCAuNzUydjEwLjUyNmMwIC40MTYuMzM2Ljc1Mi43NTIuNzUyaDEwLjUyNmEuNzUyLjc1MiAwIDAgMCAuNzUyLS43NTJWLjc1MkEuNzUyLjc1MiAwIDAgMCAxMS4yNzggMHptMCAxMS4yNzhILjc1MlYuNzUyaDEwLjUyNnoiIHN0cm9rZS13aWR0aD0iLjAzMTI1Ii8+PC9nPjxwYXRoIGQ9Ik0yLjU1NiAzLjk0NWg3LjMwNyIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9Ii43NTIiLz48L3N2Zz4=);
}
*/
/*
.win .imgRollup {
  background-image:  url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4wMyAxMi4wMyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiPjxnIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2ZmZiI+PHBhdGggZD0iTTExLjI3OCAwSC43NTJBLjc1Mi43NTIgMCAwIDAgMCAuNzUydjEwLjUyNmMwIC40MTYuMzM2Ljc1Mi43NTIuNzUyaDEwLjUyNmEuNzUyLjc1MiAwIDAgMCAuNzUyLS43NTJWLjc1MkEuNzUyLjc1MiAwIDAgMCAxMS4yNzggMHptMCAxMS4yNzhILjc1MlYuNzUyaDEwLjUyNnoiIHN0cm9rZS13aWR0aD0iLjAzMTI1Ii8+PC9nPjxwYXRoIGQ9Ik0yLjU1NiAzLjk0NWg3LjMwNyIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9Ii43NTIiLz48L3N2Zz4=);
}
.win.rolledup .imgRollup {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4wMyAxMi4wMyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48ZyBmaWxsPSIjZmZmIiBzdHJva2U9IiNmZmYiPjxwYXRoIGQ9Ik0xMS4yNzggMEguNzUyQS43NTIuNzUyIDAgMCAwIDAgLjc1MnYxMC41MjZjMCAuNDE2LjMzNi43NTIuNzUyLjc1MmgxMC41MjZhLjc1Mi43NTIgMCAwIDAgLjc1Mi0uNzUyVi43NTJBLjc1Mi43NTIgMCAwIDAgMTEuMjc4IDB6bTAgMTEuMjc4SC43NTJWLjc1MmgxMC41MjZ6IiBzdHJva2Utd2lkdGg9Ii4wMzEyNSIvPjwvZz48cGF0aCBkPSJNMS43NjggMTAuMjIzbDguNTY2LTguNTY2TTEwLjI0NSAxLjM4MnY0LjEwNk0xMC41NzggMS43MzZINi40NzJNMS43OCAxMC41OTVWNi40ODlNMS40NDUgMTAuMjQxaDQuMTA2IiBmaWxsPSIjZmZmIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iLjc1MiIvPjwvc3ZnPg==);
}
.win.minimized .imgRollup {
  display: none;
}
*/

.win .content {
  /* window content style */
  padding: 4px;
  overflow-y: auto;
  position: absolute;
  top: 2em;
  bottom: 2em;
  left: 4px;
  right: 1px;
}

.win .statusline {
  /* window statusline style */
  position: absolute;
  bottom: 0;
  width:100%;
  z-index: -1;
  background-color: rgb(240, 240, 240);
  padding-top: 0.3em;
}

.win .statusline .text {
  /* window statusline text style */
  float: left;
  padding-left: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  left: 0em;
  right: 2em;
}

.win .statusline .winresize {
  /* window resize img style */
  float: right;
  cursor: nwse-resize;
  background-size: 50%;
  background-repeat: no-repeat;
  background-position-x: 0.3em;
  background-position-y: 0.3em;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE4Mi45MzEgMTgyLjkzMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTgyLjkzMSAxODIuOTMxOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxwYXRoIGQ9Ik0xNzMuOTMsOTIuNzk4Yy00Ljk3MSwwLTksNC4wMjktOSw5djUwLjQwNEwzMC43MjgsMThoNTAuNDA0YzQuOTcxLDAsOS00LjAyOSw5LTlzLTQuMDI5LTktOS05SDlDNC4wMywwLDAsNC4wMjksMCw5ICB2NzIuMTMyYzAsNC45NzEsNC4wMjksOSw5LDlzOS00LjAyOSw5LTlWMzAuNzI5bDEzNC4yMDIsMTM0LjIwMmgtNTAuNDA0Yy00Ljk3MSwwLTksNC4wMjktOSw5czQuMDI5LDksOSw5aDcyLjEzMiAgYzQuOTcxLDAsOS00LjAyOSw5LTl2LTcyLjEzMkMxODIuOTMsOTYuODI4LDE3OC45MDEsOTIuNzk4LDE3My45Myw5Mi43OTh6IiBmaWxsPSIjRkZGRkZGIi8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
  width: 24px;
  height: 24px;
}

/* win modal */
.win-overlay {
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  top: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  z-index: 10000;

  text-align: center;
  white-space: nowrap;
}

.win-overlay::after {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  content: '';
}

.win-overlay.hidden {
  display: none;
}

.win-overlay .middle {
  display: inline-block;
  vertical-align: middle;
}

.win-overlay .middle .modal {
  min-width: 200px;
  text-align: left;
  white-space: normal;
}

.win-overlay .middle .modal .win {
  position: relative;
  top: 0px !important;
  left: 0px !important;
}

.win-overlay .middle .modal .win .wintitle {
  cursor: default;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}
</style>