﻿.wp-block-gutena-play-button
{
    display: flex;
    justify-content: center;
}
.wp-block-gutena-play-button.alignleft
{
    float: none;
    justify-content: flex-start;
}
.wp-block-gutena-play-button.alignright
{
    float: none;
    justify-content: flex-end;
}
.wp-block-gutena-play-button .play-button
{
    background: var(--gutena--lightbox-button-color,#fff);
    border: 2px solid var(--gutena--lightbox-button-color,#fff);
    border-radius: var(--gutena--lightbox-radius,0);
    cursor: pointer;
    height: var(--gutena--lightbox-button-width,64px);
    position: relative;
    vertical-align: middle;
    width: var(--gutena--lightbox-button-width,64px);
}
.wp-block-gutena-play-button .play-button:hover
{
    background: var(--gutena--lightbox-button-hover-color,var(--gutena--lightbox-button-color,#fff));
    border-color: var(--gutena--lightbox-button-hover-color,var(--gutena--lightbox-button-color,#fff));
}
.wp-block-gutena-play-button .play-button.bordered, .wp-block-gutena-play-button .play-button.bordered:hover
{
    background-color: transparent!important;
}
.wp-block-gutena-play-button .play-button.circle
{
    border-radius: 50%;
    position: relative;
}
.wp-block-gutena-play-button .play-button.circle[data-ripple=true]:after, .wp-block-gutena-play-button .play-button.circle[data-ripple=true]:before
{
    animation: gutena-ripple 2.6s cubic-bezier(.25,.9,.2,1) .4s infinite;
    border: 1px solid hsla(0,0%,100%,.5);
    border-radius: 50%;
    content: "";
    display: block;
    height: 100%;
    left: -1px;
    opacity: 0;
    position: absolute;
    top: -1px;
    transform: scale(.35);
    width: 100%;
}
.wp-block-gutena-play-button .play-button.circle[data-ripple=true]:before
{
    animation-delay: .5s;
}
.wp-block-gutena-play-button .play-button.circle[data-ripple=true]:after
{
    animation-delay: 0s;
}
.wp-block-gutena-play-button .play-button.circle .play-icon
{
    border-radius: 50%;
}
.wp-block-gutena-play-button .play-button .play-icon
{
    border-radius: var(--gutena--lightbox-radius,0);
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 1px 0 0 1px;
    position: absolute;
    right: 0;
    top: 0;
    transition: transform .35s ease;
    z-index: 99;
}
.wp-block-gutena-play-button .play-button .play-icon:after
{
    border-bottom: var(--gutena--lightbox-icon-size,10px) solid transparent;
    border-left: calc(var(--gutena--lightbox-icon-size,10px) * 1.5) solid var(--gutena--lightbox-icon-color,#0274fa);
    border-top: var(--gutena--lightbox-icon-size,10px) solid transparent;
    content: "";
    display: block;
    height: 0;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-35%,-50%);
    width: 0;
}
.wp-block-gutena-play-button .play-button .play-icon:hover:after
{
    border-left-color: var(--gutena--lightbox-icon-hover-color,var(--gutena--lightbox-icon-color,#0274fa))!important;
}
@keyframes gutena-ripple
{
    0%
    {
        opacity: 1;
        transform: scale(1);
    }
    to
    {
        opacity: 0;
        transform: scale(1.7);
    }
}
.tingle-modal *
{
    box-sizing: border-box;
}
.tingle-modal
{
    -webkit-overflow-scrolling: touch;
    align-items: center;
    background: rgba(0,0,0,.9);
    bottom: 0;
    cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg width=%2719%27 height=%2719%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27m15.514.535-6.42 6.42L2.677.536a1.517 1.517 0 0 0-2.14 0 1.517 1.517 0 0 0 0 2.14l6.42 6.419-6.42 6.419a1.517 1.517 0 0 0 0 2.14 1.517 1.517 0 0 0 2.14 0l6.419-6.42 6.419 6.42a1.517 1.517 0 0 0 2.14 0 1.517 1.517 0 0 0 0-2.14l-6.42-6.42 6.42-6.418a1.517 1.517 0 0 0 0-2.14 1.516 1.516 0 0 0-2.14 0z%27 fill=%27%23FFF%27/%3E%3C/svg%3E"),auto;
    display: flex;
    flex-direction: column;
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 1000;
}
@supports((
-webkit-backdrop-filter: blur(12px)) or (
backdrop-filter: blur(12px)))
{
.tingle-modal
{
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
}
.tingle-modal--confirm .tingle-modal-box
{
    text-align: center;
}
.tingle-modal--noOverlayClose
{
    cursor: default;
}
.tingle-modal--noClose .tingle-modal__close
{
    display: none;
}
.tingle-modal__close
{
    background-color: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    height: 2rem;
    padding: 0;
    position: fixed;
    right: 2.5rem;
    top: 2.5rem;
    width: 2rem;
    z-index: 1000;
}
.tingle-modal__close svg *
{
    fill: currentColor;
}
.tingle-modal__closeLabel
{
    display: none;
}
.tingle-modal__close:hover
{
    color: #fff;
}
.tingle-modal-box
{
    background: #fff;
    border-radius: 4px;
    cursor: auto;
    flex-shrink: 0;
    margin-bottom: auto;
    margin-top: auto;
    opacity: 1;
    position: relative;
    width: 60%;
    will-change: transform,opacity;
}
.tingle-modal-box__content
{
    padding: 3rem;
}
.tingle-modal-box__footer
{
    background-color: #f5f5f5;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: auto;
    padding: 1.5rem 2rem;
    width: auto;
}
.tingle-modal-box__footer:after
{
    clear: both;
    content: "";
    display: table;
}
.tingle-modal-box__footer--sticky
{
    bottom: -200px;
    opacity: 1;
    position: fixed;
    transition: bottom .3s ease-in-out .3s;
    z-index: 10001;
}
.tingle-enabled
{
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
}
.tingle-modal--visible .tingle-modal-box__footer
{
    bottom: 0;
}
.tingle-modal--visible
{
    opacity: 1;
    visibility: visible;
}
.tingle-modal--visible .tingle-modal-box
{
    animation: scale .2s cubic-bezier(.68,-.55,.265,1.55) forwards;
}
.tingle-modal--overflow
{
    overflow-y: scroll;
    padding-top: 8vh;
}
.tingle-btn
{
    background-color: #808080;
    border: none;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    line-height: normal;
    margin: 0 .5rem;
    padding: 1rem 2rem;
    text-decoration: none;
    transition: background-color .4s ease;
    vertical-align: middle;
}
.tingle-btn--primary
{
    background-color: #3498db;
}
.tingle-btn--danger
{
    background-color: #e74c3c;
}
.tingle-btn--default
{
    background-color: #34495e;
}
.tingle-btn--pull-left
{
    float: left;
}
.tingle-btn--pull-right
{
    float: right;
}
@media(max-width: 540px)
{
    .tingle-modal
    {
        display: block;
        padding-top: 60px;
        top: 0;
        width: 100%;
    }
    .tingle-modal-box
    {
        border-radius: 0;
        width: auto;
    }
    .tingle-modal-box__content
    {
        overflow-y: scroll;
    }
    .tingle-modal--noClose
    {
        top: 0;
    }
    .tingle-modal--noOverlayClose
    {
        padding-top: 0;
    }
    .tingle-modal-box__footer .tingle-btn
    {
        display: block;
        float: none;
        margin-bottom: 1rem;
        width: 100%;
    }
    .tingle-modal__close
    {
        background-color: #2c3e50;
        border: none;
        box-shadow: none;
        color: #fff;
        display: block;
        height: 60px;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
    }
    .tingle-modal__closeLabel
    {
        display: inline-block;
        font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
        font-size: 1.6rem;
        vertical-align: middle;
    }
    .tingle-modal__closeIcon
    {
        display: inline-block;
        font-size: 0;
        margin-right: .8rem;
        vertical-align: middle;
        width: 1.6rem;
    }
}
@keyframes scale
{
    0%
    {
        opacity: 0;
        transform: scale(.9);
    }
    to
    {
        opacity: 1;
        transform: scale(1);
    }
}
.tingle-modal.gutena-lightbox-modal
{
    z-index: 99999;
}
.tingle-modal.gutena-lightbox-modal .tingle-modal-box__content
{
    padding: 1rem;
}
.tingle-modal.gutena-lightbox-modal .tingle-modal-box__content .gutena-lightbox-close
{
    cursor: pointer;
    position: absolute;
    right: -30px;
    top: -30px;
}
@media(max-width: 540px)
{
    .tingle-modal.gutena-lightbox-modal .tingle-modal-box__content .gutena-lightbox-close
    {
        display: none;
    }
}
.tingle-modal.gutena-lightbox-modal .tingle-modal-box__content .gutena-lightbox-close svg
{
    color: #fff;
    height: 20px;
    width: 20px;
}
.tingle-modal.gutena-lightbox-modal .tingle-modal-box__content .gutena-lightbox-close svg *
{
    fill: currentColor;
}
.tingle-modal.gutena-lightbox-modal .tingle-modal-box__content .embed-container
{
    --video--width: 1000;
    --video--height: 540;
    background: #000;
    max-width: 100%;
    overflow: hidden;
    padding-bottom: calc(var(--video--height) / var(--video--width) * 100%);
    position: relative;
}
@media(max-width: 540px)
{
    .tingle-modal.gutena-lightbox-modal .tingle-modal-box__content .embed-container
    {
        margin-top: 62px;
    }
}
.tingle-modal.gutena-lightbox-modal .tingle-modal-box__content .embed-container embed, .tingle-modal.gutena-lightbox-modal .tingle-modal-box__content .embed-container iframe, .tingle-modal.gutena-lightbox-modal .tingle-modal-box__content .embed-container object
{
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.tingle-modal.gutena-lightbox-modal .tingle-modal__closeIcon svg
{
    height: 20px;
    width: 20px;
}
@media(min-width: 541px)
{
    .tingle-modal.gutena-lightbox-modal .tingle-modal__close
    {
        display: none;
    }
}
@media(max-width: 540px)
{
    .tingle-modal.gutena-lightbox-modal .tingle-modal__close
    {
        background-color: #000;
    }
    .tingle-modal.gutena-lightbox-modal .tingle-modal__close .tingle-modal__closeIcon
    {
        margin-right: .3rem;
    }
    .tingle-modal.gutena-lightbox-modal .tingle-modal__close .tingle-modal__closeIcon svg
    {
        height: 13px;
        width: 13px;
    }
    .tingle-modal.gutena-lightbox-modal .tingle-modal__close .tingle-modal__closeLabel
    {
        font-size: 1.2rem;
    }
}
