.tingle-modal *{box-sizing:border-box}
.tingle-modal{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1000;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    visibility:hidden;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;flex-direction:column;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    overflow:hidden;
    -webkit-overflow-scrolling:touch;
    background:rgba(0,0,0,.75);
    opacity:0;
    cursor:pointer;
    -webkit-transition:-webkit-transform .3s ease;
    transition:-webkit-transform .3s ease;
    transition:transform .3s ease;
    transition:transform .3s ease,-webkit-transform .3s ease;
}

.tingle-modal--noClose .tingle-modal__close,.tingle-modal__closeLabel{display:none}
.tingle-modal--confirm .tingle-modal-box{text-align:center}
.tingle-modal--noOverlayClose{cursor:default}

.tingle-modal__close{
    position:fixed;
    top:0px;
    right:7px;
    z-index:1000;
    padding:0;
    width:4rem;
    height:4rem;
    border:none;
    background-color:transparent;
    color:#f0f0f0;
    font-size:2.6rem;
    font-weight: 300;
    font-family: 'Roboto', sans-serif!important;
    line-height:1;
    cursor:pointer;
    -webkit-transition:color .5s ease;
    transition:color .5s ease;
}

.tingle-modal__close:hover{
    color:#fff;
}

.tingle-modal-box{
    position:relative;
    -ms-flex-negative:0;
    flex-shrink:0;
    margin-top:auto;
    margin-bottom:auto;
    width:60%;
    border-radius:3px;
    background:#fff;
    opacity:1;
    cursor:auto;
    -webkit-transition:-webkit-transform .5s cubic-bezier(.175,.885,.32,1.275);
    transition:-webkit-transform .5s cubic-bezier(.175,.885,.32,1.275);
    transition:transform .5s cubic-bezier(.175,.885,.32,1.275);
    transition:transform .5s cubic-bezier(.175,.885,.32,1.275),-webkit-transform .5s cubic-bezier(.175,.885,.32,1.275);
    -webkit-transform:scale(.7);
    -ms-transform:scale(.7);
    transform:scale(.7);
}

.tingle-modal-box__content{padding:3rem}

.tingle-modal-box__footer{
    padding:1.5rem 2rem;
    width:auto;
    border-bottom-right-radius:4px;
    border-bottom-left-radius:4px;
    background-color:#f5f5f5;
    cursor:auto;
}
.tingle-modal-box__footer::after{
    display:table;
    clear:both;
    content:"";
}
.tingle-modal-box__footer--sticky{
    position:fixed;
    bottom:-200px;
    z-index:10001;
    opacity:1;
    -webkit-transition:bottom .3s ease-in-out .3s;
    transition:bottom .3s ease-in-out .3s;
}
.tingle-enabled{
    position:fixed;
    overflow:hidden;
    left:0;
    right:0;
}
.tingle-modal--visible .tingle-modal-box__footer{bottom:0}
.tingle-enabled .tingle-content-wrapper{-webkit-filter:blur(8px);filter:blur(8px)}
.tingle-modal--visible{visibility:visible;opacity:1}
.tingle-modal--visible .tingle-modal-box{
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
}
.tingle-modal--overflow{
    overflow-y:scroll;
    padding-top:8vh;
}
.tingle-btn{
    display:inline-block;
    margin:0 .5rem;
    padding:1rem 2rem;
    border:none;
    background-color:grey;
    box-shadow:none;
    color:#fff;
    vertical-align:middle;
    text-decoration:none;
    font-size:inherit;
    font-family:inherit;
    line-height:normal;
    cursor:pointer;
    -webkit-transition:background-color .4s ease;
    transition:background-color .4s ease;
}
.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--noClose{top:0}
    .tingle-modal--noOverlayClose{padding-top:0}
    .tingle-modal-box__footer .tingle-btn{display:block;float:none;margin-bottom:1rem;width:100%}

}

@supports ((-webkit-backdrop-filter:blur(12px)) or (backdrop-filter:blur(12px))){
    .tingle-modal{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
    
    @media (max-width :540px){
        .tingle-modal{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)
        }
    }
    
    .tingle-enabled .tingle-content-wrapper{-webkit-filter:none;filter:none}
}