.modal {
  width: 100%;
  height: 100%;
  /*background-color: rgba(0, 0, 0, 0.5);*/
  background: rgba(0, 0, 0, .65);
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  z-index: 999999;
  align-items: center;
  justify-content: center;
}
.modal .modal-container {
  display: flex;
  flex-flow: column;
  /*width: 95% !important;*/
  margin: 5px;
  border-radius: 25px;
  background-color: #ffffff;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.03);
  -webkit-animation: fade .8s;
  animation: fade .8s;
}
.modal .modal-container.modal-zoom {
  transform: scale(0.5);
}
.modal .modal-container.modal-slide {
  transform: translateY(-1000px);
}
.modal .modal-container .modal-header {
  display: flex;
  padding: 5px;
  font-weight: 600;
  justify-content: space-between;
  border-bottom: 0px solid #e6e9ec;
  align-items: center;
}
.modal .modal-container .modal-header h1 {
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: left;
    color: #4d4d4d;
    padding: 0;
    margin: 0 auto;
}
.modal .modal-container .modal-header button {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 28px !important;
    line-height: 24px;
    padding-bottom: 4px;
    padding: 5px;
    color: #009cff;
    font-weight: 900;
}
.modal .modal-container .modal-header button:hover {
  color: #676767;
}
.modal .modal-container .modal-content {
  padding: 10px 5px;
  flex: 1;
}
.modal .modal-container .modal-content .modal-prompt-input input {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #e6e9ec;
  margin-top: 15px;
  width: 100%;
}
.modal .modal-container .modal-footer {
  border-top: 0px solid #e6e9ec;
  padding: 15px;
  display: flex;
}
.modal .modal-container .modal-footer button {
  display: inline-flex;
  appearance: none;
  border: none;
  background-color: #009cff;
  color: #ffffff;
  border-radius: 4px;
  padding: 7px 12px;
  font-size: 14px;
  margin-right: 7px;
  cursor: pointer;
}
.modal .modal-container .modal-footer button:last-child {
  margin-right: 0;
}
.modal .modal-container .modal-footer button:hover {
  background-color: #009cff;
}
.modal .modal-container .modal-footer button.alt {
  font-weight: 500;
  background-color: #dadbdd;
  color: #606266;
}
.modal .modal-container .modal-footer button.alt:hover {
  background-color: #d5d6d8;
}
.modal .modal-container .modal-footer button.right {
  margin-left: auto;
}
.modal.modal-small .modal-container {
  width: 400px;
}
.modal.modal-medium .modal-container {
  width: 600px;
}
.modal.modal-large .modal-container {
  width: 900px;
}
.modal.modal-full .modal-container {
  width: 100%;
  height: 100%;
}
.modal.modal-open {
  display: flex;
}
.modal.modal-open .modal-container.modal-zoom {
  transform: scale(1);
  transition: all 0.2s ease;
}
.modal.modal-open .modal-container.modal-slide {
  transform: translateY(0);
  transition: all 0.5s ease;
}
.modal.modal-open .modal-container .modal-loading {
    position: absolute;
    background: #ccc;
    display: block;
    z-index: 1000000000;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    margin: 0 auto;
    margin: auto;
    text-align: center;
    width: 80px;
    height: 80px;
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid #3498db;
    animation: ring 1.2s linear infinite;
}
@keyframes ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.modal .modal-container .modal-content .youtube {
  aspect-ratio: 16 / 9;
  width: 98%;
}

.modal .modal-container .modal-content .bubles {
 width: 85%;
 margin: 5px auto;
 max-width: 280px;
 heiht: auto;
 text-align: center;
}
.modal .modal-container .modal-content .bubles {
    vertical-align: middle;
    background-size: 25px;
    background-position: left center;
    background-repeat: no-repeat;
    padding: 5px 0 10px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEgklEQVR4nO1aa2gdVRA+Cio+Kz4oLek9syG0WFGEIkIRRNFSUSkWBBEVQfwh+EtErIIvCq2PIiHZmdzGgugv/SuI+CpikjuzXK0/rAERf9RGEatWpbEq9srsno1JvK8ke3ZXsx/sj7v33p0z35mZM481pkKFChUqVPCCDTJ6uRV62jK9awW/BqFZEGp5uxgnTBlQi8KtVvAjr8p2uApVfOiL4bOAkYDxVLIg/AGEDgDTDohw09pPXz03CzmB4B36fMsUpfcKJ2CwWV8DQg23kFlg3D3EwxdkLWdgavwiYJyOCZCxh+ObradOdy5wKmt5fWFgat/Z6n9u14/WGLcYD4pbodtT5UHwsMrV72rN+rrEIvB7UwSs4Eiq/BDvH1jOM5bo65/D5Kid+y/jPYlF4Dsmbww26tc6n59dyc73ofQsCH4MTI+sa9bPWRB3BA/rb2pM92emWL8AoQ+c/+02OUOVt4yvp1ahn70LtYdeutAy7dIIDEw/pdFeg6DJA63WaRsmRtYHUXh3uvOW8XjQCK/0Lhs43KaBpo15Huj6P7/Jz/TgVP2KfJQX+tMx/mEQjd0GTJPJImhH7gQwHVOf39Ksn5GL2QPTsSTS0vNqholieFTvBTKyMZejtlG/xjK9liZaVvBBkwcs4+OO+fdT5RUg+Jve3zTx8vm5LCRdj9B9SoJlOpkH+SYOeEnmtd2UBHHKnaTD496FWcbjKsxHartc6M47l/zOuzAoutDosTHeXRDKSkDSY2gtN/3uGxUBUllAa7ELbP7sjTOt4HPA+M2iJGXGMu3V780KUePwFs011NRthDeXygUs094emdqelcpNFXTH3ZFO39tGeJnJmwAQmolL0Cjc+q/y2FmCdwKY3nZkT2ZhcUsloOPJkFXMULOPzZ/pSLskbL2MXAyCXzmCXjFlISBPWBm9ChhPeK0NoMQEKKzgXa5K/QOi8LpVR4DCCr7wT5m8PzD+TwGM01DtzpgyQFvjTG85Eg7N7xv6sQDG95zfPWZKAjcz+NJ1ivb5tQAZ2+787ncloSyWEETh1ZlXidDB34HpyW7JUGYLWMpaOdzm3ODb7B4qvc98K/Rr3gTMT5QWX5qpZiYIlpj0FEmAdq21b5lpsxRKTkCh/QCoCCCvFtDtWflZACcjsHbjr1VBgGWUOMC0aUrkQEBcdmuZXSABtCtRCg/OH4zkQgDTnq6NlzwIGGzW18wNRZleXDgd8kuANjocCTOFEaAIGnTTguGo4K1JQ6Jdmoy/6L3NB0fPMx6RmwukCCK8UXPsXmmvVmMJUeH15v9EgELHY8D0qHsj7Mf2pTI969LRN40nxF1pppOFj+ygDQFDnwxfaoV+djXCE17kMt3ryt5pH8/vG50Cno3GdgLTX6kl1BhvyCImBI3xtQHTQ/OKrwdMkYBuiUo0tjPtHPU6GboMWjpe8Wh80bGcO6CHYhub9Uus4DP6ipvuWqff9Ry0zA1c8IS+h2wbeKcpAyCjM7/ToKX0gOwIKFWXuW9UBEhlAa3KBWQVx4AKFSpUqGD+u/gbAu/7Dkoiq5UAAAAASUVORK5CYII=')
}

.modal .modal-container .modal-content .buble {
  margin-left: 20px;
  width: 95%;
  max-width: 230px;
  height: auto;
  min-height: 20px;
  display:inline-block;
  border-radius: 15px;
  background: #fff;
  padding: 1px 5px;
  font-size: 12px;
  color: #ff730e;
  text-align: center;
  position: relative;
  border: 1px solid #f1f1f1;
  filter:  /* the more shadow you add the thicker the border will be */
    drop-shadow(0px 1px 0px #ccc) 
    drop-shadow(0px 1px 0px #ccc) 
    drop-shadow(0px 1px 0px #ccc) 
    drop-shadow(0px 1px 0px #ccc) 
    drop-shadow(0px 1px 1px #ccc);
}
.modal .modal-container .modal-content .buble::before {
  content: "";
  position: absolute;
  height: var(--h,10px);
  width: var(--w,20px);
  background: inherit;
  transform:scale(var(--x,1),var(--y,1));
}
.modal .modal-container .modal-content .buble.p-left::before{
  right: 97%;
  clip-path: polygon(10% 0, 10% 10%,10% 10%);
}
.modal .modal-container .modal-content .buble.p-left.alt::before{
  clip-path: polygon(80% 0, 80% 80%,0% 130%);
}
.modal .modal-container .modal-content .buble.top::before{
  top:var(--p,10px);
}