.escs_btn__transition {
  transition: left 0.5s, top 0.5s cubic-bezier(0.39, -0.35, 0.69, 1.38);
}

.escs_btn_size__transition {
   transition: height 0.5s, width 0.5s;
}

.escs_btn_notif_size__transition {
  transition: height 0.5s, width 0.5s;
}

.escs_btn___notif_anim {
  animation: notif_slidein 0.5s ease-in-out;
}

.escs_btn___notif_anim_out {
  animation: notif_slideout 0.5s;
  animation-fill-mode: forwards;
}

.escs_btn___notif_content {
  max-width: 250px; 
  width: max-content;
  transition: max-width 0.5s, max-height 0.5s ease-in-out;
  padding: 10px 0px 10px 10px;
}

@keyframes notif_slidein {
  from {
    transform-origin: top left;
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform-origin: top left;
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes notif_slideout {
  from {
    transform-origin: top left;
    opacity: 1;
    font-size: 13;
    padding: 10;
    margin-bottom: 5;
    max-height: 150px;
  }

  to {
    transform-origin: top left;
    opacity: 0;
    font-size: 0;
    padding: 0;
    margin-bottom: 0;
    max-height: 0px;
  }
}
.escs_webview__backgroundView_opened {
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: transparent;
  transition: background-color 0.5s ease-in-out;
}

.escs_webview__backgroundView_closed {
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
  position: absolute;
  background-color: "transparent";
  transition: width 0.5s 0.5s, height 0.5s 0.5s, background-color 0.5s ease-in-out;
}

.escs_webview__containerView {
  position: absolute;
  justify-content: center;
  align-items: center;
  display: flex;
}

.escs_webview__opened {
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  transition: background-color 0.5s, width 0.5s, height 0.5s, left 0.5s,
    right 0.5s ease-in-out;
}

.escs_webview__closed {
  top: 0px;
  bottom: 0px;
  right: 0px;
  transition: background-color 0.5s, width 0.5s, height 0.5s, left 0.5s,
    right 0.5s ease-in-out;
  width: 100%;
  background-color: "transparent";
  width: 0px;
  height: 0px;
}

.escs_webview__controlopen {
  top: 0px;
  opacity: 1;
  transition: top 0.5s 0.5s, opacity 0.5s 0.5s ease-in-out;
}

.escs_webview__controlclose {
  top: 100px;
  opacity: 0;
  transition: top 0.5s 0.5s, opacity 0.5s 0.5s ease-in-out;
}


.escs_webview__frame_portrait {
  display: flex;
  flex-direction: column;

  flex: 1;
  margin-top:  40px;
  margin-bottom: 15px;
  margin-left: 15px;
  margin-right:  15px;
  align-self: center;
  width: calc(100% - 30px);
  height: calc(100% - 55px);
}

.escs_webview__frame_landscape {
  grid-auto-flow: dense;
  display: grid;
  grid-template-columns: 1fr 60px;
  /* column-gap: 10px; */
  width: calc(100% - 15px);
  height: calc(100% - 30px);
  align-self: center;
  flex-direction: column;

  flex: 1;
  margin-top: 15px;
  margin-right: 0px;
  margin-bottom: 15px;
  margin-left: 15px;
}

.escs_webview__controls_landscape {
  grid-auto-flow: dense;
  display: grid;
  margin-left:10px; 
  flex-direction: column;
  margin-top: 120px;
  margin-left: -20px;
  row-gap: 10px;
}

.escs_webview__minmax_transition {
  transition: top 0.5s, left 0.5s, width 0.5s, height 0.5s ease-in-out;
}

.escs_webview__minmax_transition_hidden_minimized {
  transition: top 0.1s, left 0.1s, width 0.1s, height 0.1s ease-in-out;
}

.escs_webview__moveVertical {
  align-self: center;
  height: 30px;
  width: 48px;
  background-image: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9JzQ4JyBoZWlnaHQ9JzMwJyB2aWV3Qm94PScwIDAgNDAgMjUnIGZpbGw9J25vbmUnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHJlY3Qgd2lkdGg9JzQwJyBoZWlnaHQ9JzI1JyByeD0nNCcgZmlsbD0nYmxhY2snLz48Y2lyY2xlIGN4PScxMi41JyBjeT0nNy41JyByPScxLjUnIHRyYW5zZm9ybT0ncm90YXRlKC05MCAxMi41IDcuNSknIGZpbGw9J3doaXRlJy8+PGNpcmNsZSBjeD0nMTcuNScgY3k9JzcuNScgcj0nMS41JyB0cmFuc2Zvcm09J3JvdGF0ZSgtOTAgMTcuNSA3LjUpJyBmaWxsPSd3aGl0ZScvPjxjaXJjbGUgY3g9JzIyLjUnIGN5PSc3LjUnIHI9JzEuNScgdHJhbnNmb3JtPSdyb3RhdGUoLTkwIDIyLjUgNy41KScgZmlsbD0nd2hpdGUnLz48Y2lyY2xlIGN4PScyNy41JyBjeT0nNy41JyByPScxLjUnIHRyYW5zZm9ybT0ncm90YXRlKC05MCAyNy41IDcuNSknIGZpbGw9J3doaXRlJy8+PGNpcmNsZSBjeD0nMTIuNScgY3k9JzEyLjUnIHI9JzEuNScgdHJhbnNmb3JtPSdyb3RhdGUoLTkwIDEyLjUgMTIuNSknIGZpbGw9J3doaXRlJy8+PGNpcmNsZSBjeD0nMTcuNScgY3k9JzEyLjUnIHI9JzEuNScgdHJhbnNmb3JtPSdyb3RhdGUoLTkwIDE3LjUgMTIuNSknIGZpbGw9J3doaXRlJy8+PGNpcmNsZSBjeD0nMjIuNScgY3k9JzEyLjUnIHI9JzEuNScgdHJhbnNmb3JtPSdyb3RhdGUoLTkwIDIyLjUgMTIuNSknIGZpbGw9J3doaXRlJy8+PGNpcmNsZSBjeD0nMjcuNScgY3k9JzEyLjUnIHI9JzEuNScgdHJhbnNmb3JtPSdyb3RhdGUoLTkwIDI3LjUgMTIuNSknIGZpbGw9J3doaXRlJy8+PGNpcmNsZSBjeD0nMTIuNScgY3k9JzE3LjUnIHI9JzEuNScgdHJhbnNmb3JtPSdyb3RhdGUoLTkwIDEyLjUgMTcuNSknIGZpbGw9J3doaXRlJy8+PGNpcmNsZSBjeD0nMTcuNScgY3k9JzE3LjUnIHI9JzEuNScgdHJhbnNmb3JtPSdyb3RhdGUoLTkwIDE3LjUgMTcuNSknIGZpbGw9J3doaXRlJy8+PGNpcmNsZSBjeD0nMjIuNScgY3k9JzE3LjUnIHI9JzEuNScgdHJhbnNmb3JtPSdyb3RhdGUoLTkwIDIyLjUgMTcuNSknIGZpbGw9J3doaXRlJy8+PGNpcmNsZSBjeD0nMjcuNScgY3k9JzE3LjUnIHI9JzEuNScgdHJhbnNmb3JtPSdyb3RhdGUoLTkwIDI3LjUgMTcuNSknIGZpbGw9J3doaXRlJy8+PC9zdmc+")
}
.escs_webview__moveHorizontal {
  transform: rotate(90deg);
  align-self: center;
  height: 30px;
  width: 48px;
  background-image: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9JzQ4JyBoZWlnaHQ9JzMwJyB2aWV3Qm94PScwIDAgNDAgMjUnIGZpbGw9J25vbmUnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHJlY3Qgd2lkdGg9JzQwJyBoZWlnaHQ9JzI1JyByeD0nNCcgZmlsbD0nYmxhY2snLz48Y2lyY2xlIGN4PScxMi41JyBjeT0nNy41JyByPScxLjUnIHRyYW5zZm9ybT0ncm90YXRlKC05MCAxMi41IDcuNSknIGZpbGw9J3doaXRlJy8+PGNpcmNsZSBjeD0nMTcuNScgY3k9JzcuNScgcj0nMS41JyB0cmFuc2Zvcm09J3JvdGF0ZSgtOTAgMTcuNSA3LjUpJyBmaWxsPSd3aGl0ZScvPjxjaXJjbGUgY3g9JzIyLjUnIGN5PSc3LjUnIHI9JzEuNScgdHJhbnNmb3JtPSdyb3RhdGUoLTkwIDIyLjUgNy41KScgZmlsbD0nd2hpdGUnLz48Y2lyY2xlIGN4PScyNy41JyBjeT0nNy41JyByPScxLjUnIHRyYW5zZm9ybT0ncm90YXRlKC05MCAyNy41IDcuNSknIGZpbGw9J3doaXRlJy8+PGNpcmNsZSBjeD0nMTIuNScgY3k9JzEyLjUnIHI9JzEuNScgdHJhbnNmb3JtPSdyb3RhdGUoLTkwIDEyLjUgMTIuNSknIGZpbGw9J3doaXRlJy8+PGNpcmNsZSBjeD0nMTcuNScgY3k9JzEyLjUnIHI9JzEuNScgdHJhbnNmb3JtPSdyb3RhdGUoLTkwIDE3LjUgMTIuNSknIGZpbGw9J3doaXRlJy8+PGNpcmNsZSBjeD0nMjIuNScgY3k9JzEyLjUnIHI9JzEuNScgdHJhbnNmb3JtPSdyb3RhdGUoLTkwIDIyLjUgMTIuNSknIGZpbGw9J3doaXRlJy8+PGNpcmNsZSBjeD0nMjcuNScgY3k9JzEyLjUnIHI9JzEuNScgdHJhbnNmb3JtPSdyb3RhdGUoLTkwIDI3LjUgMTIuNSknIGZpbGw9J3doaXRlJy8+PGNpcmNsZSBjeD0nMTIuNScgY3k9JzE3LjUnIHI9JzEuNScgdHJhbnNmb3JtPSdyb3RhdGUoLTkwIDEyLjUgMTcuNSknIGZpbGw9J3doaXRlJy8+PGNpcmNsZSBjeD0nMTcuNScgY3k9JzE3LjUnIHI9JzEuNScgdHJhbnNmb3JtPSdyb3RhdGUoLTkwIDE3LjUgMTcuNSknIGZpbGw9J3doaXRlJy8+PGNpcmNsZSBjeD0nMjIuNScgY3k9JzE3LjUnIHI9JzEuNScgdHJhbnNmb3JtPSdyb3RhdGUoLTkwIDIyLjUgMTcuNSknIGZpbGw9J3doaXRlJy8+PGNpcmNsZSBjeD0nMjcuNScgY3k9JzE3LjUnIHI9JzEuNScgdHJhbnNmb3JtPSdyb3RhdGUoLTkwIDI3LjUgMTcuNSknIGZpbGw9J3doaXRlJy8+PC9zdmc+")
}
.escs_webview__moveContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3px
}
.escs_webview__container {                                            
  grid-column: 1;
  display: flex;
  flex: 1;
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.escs_webview__iframe {
  display: 'flex';
  flex: 1;
  border-width: 0;
  height: 100%;
  width: 100%;
  overscroll-behavior: contain
}

.escs_webview__loader {
  display: 'flex';                         
  flex: 1;
  flex-direction: 'row'; 
  justify-content: 'center'; 
  align-items: 'center'; 
}