html, body {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
}
body.neo-desktop-frames-wrapper {
  height: 100vh;
  overflow: hidden;
  background-image: radial-gradient(50% 50%, #4C97D9 0%, #0D6EBD 92%);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
  background-color: #0D6EBD;
}
body.neo-desktop-frames-wrapper.vidyoconnect-web {
  min-width: 810px;
  min-height: 500px;
  overflow: auto;
}
.none {
  display:none;
}
.animate {
  transition: all 300ms cubic-bezier(0.390, 0.345, 0.215, 0.835);
  transition-timing-function: cubic-bezier(0.390, 0.345, 0.215, 0.835);
}
.animate-on-close.closed {
  transition: all 300ms cubic-bezier(0.390, 0.345, 0.215, 0.835);
  transition-timing-function: cubic-bezier(0.390, 0.345, 0.215, 0.835);
}
.rows-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.rows-wrapper-item {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}
.columns-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}
.columns-wrapper-item {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.frames {
  overflow: hidden;
}

#topIframe {
  width: 100%;
  flex: 0 0 50px;
}
#leftIframe {
  height: 100%;
  flex: 0 0 300px;
}
#rightIframe {
  height: 100%;
  flex: 0 0 200px;
}
#bottomIframe {
  width: 100%;
  flex: 0 0 200px;
}
#neoIframe {
  flex: 1;
  overflow: hidden;
}
#preIframe, #postIframe {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 55555;
  top: 0;
  left: 0;
  transform: translate(0%, 0%) scale(1, 1);
  background: #fff;
}
#preIframe.closed {
  transform: translate(0%, 0%) scale(0,0);
}
#postIframe.closed {
  transform: translate(0%, 0%) scale(0,0);
}
#customIframe {
  height: 80%;
  width: 80%;
  position: absolute;
  z-index: 55555;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
}
#customIframe.closed {
  transform: translate(-150%, -150%) scale(0);
}
neo-iframe {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.frames.closed {
  flex: 0 0 0px !important;
  display: none;
}
iframe {
  border: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  background: #fff;
}
.close-frame-button {
  width: 32px;
  height: 32px;
  background: #fff;
  position: absolute;
  margin: 5px 0 0 5px;
  background-image: url(../img/buttons/black_x.svg);
  background-size: cover;
  opacity: 1;
}
.close-frame-button:hover {
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
}
.frames.closed .close-frame-button {
  display: none;
}

@media ( max-height: 310px ) and ( max-width: 360px ) {
  #topIframe,
  #leftIframe,
  #rightIframe,
  #bottomIframe,
  #preIframe,
  #postIframe,
  #customIframe {
    display: none !important;
  }
}