/* =====================================================================================================================
===== TingleModal v0.15.2 ==============================================================================================
===================================================================================================================== */
.tingle-modal * {
    box-sizing : border-box;
}

.tingle-modal {
    align-items                : center;
    background                 : rgba(198, 185, 174, 0.5);
    bottom                     : 0;
    cursor                     : pointer;
    display                    : flex;
    flex-direction             : column;
    left                       : 0;
    opacity                    : 0;
    overflow                   : hidden;
    -webkit-overflow-scrolling : touch;
    position                   : fixed;
    right                      : 0;
    top                        : 0;
    visibility                 : hidden;
}

/* ===== CONFIRM AND ALERTS ========================================================================================= */
.tingle-modal--confirm .tingle-modal-box {
    text-align : center;
}

/* ===== MODAL ====================================================================================================== */
.tingle-modal--noOverlayClose {
    cursor : default;
}

.tingle-modal--noClose .tingle-modal__close {
    display : none;
}

.tingle-modal__close {
    background-color : transparent;
    border           : none;
    color            : #FFFFFF;
    cursor           : pointer;
    display          : none;
    height           : 2rem;
    padding          : 0;
    position         : fixed;
    right            : 2rem;
    top              : 4rem;
    width            : 2rem;
}

.tingle-modal__close svg * {
    fill : currentColor;
}

.tingle-modal__closeLabel {
    display : none;
}

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

.tingle-modal-box {
    cursor        : auto;
    flex-shrink   : 0;
    margin-bottom : auto;
    margin-top    : auto;
    max-width     : 80%;
    min-width     : 400px;
    opacity       : 1;
    position      : relative;
    will-change   : transform, opacity;
}

.dialog_1 .tingle-modal-box,
.dialog_2 .tingle-modal-box,
.dialog_3 .tingle-modal-box,
.dialog_5 .tingle-modal-box,
.dialog_6 .tingle-modal-box {
    background            : #C6B9AE;
    border                : 2px solid #A56734;
    border-radius         : 5px;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    box-shadow            : inset 0 0 10px 0 rgba(0, 0, 0, 0.75);
    -webkit-box-shadow    : inset 0 0 10px 0 rgba(0, 0, 0, 0.75);
    -moz-box-shadow       : inset 0 0 10px 0 rgba(0, 0, 0, 0.75);
}

.dialog_4 .tingle-modal-box {
    background            : rgba(255, 255, 255, 0.6);
    border-radius         : 5px;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    box-shadow            : 10px 10px 25px -10px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow    : 10px 10px 25px -10px rgba(0, 0, 0, 0.75);
    -moz-box-shadow       : 10px 10px 25px -10px rgba(0, 0, 0, 0.75);
}

.tingle-modal-box__content {
    word-wrap : break-word;
}

.dialog_1 .tingle-modal-box__content,
.dialog_2 .tingle-modal-box__content,
.dialog_3 .tingle-modal-box__content,
.dialog_5 .tingle-modal-box__content,
.dialog_6 .tingle-modal-box__content {
    padding    : 1.5rem 1.5rem;
    text-align : center;
}

.dialog_4 .tingle-modal-box__content {
    background                      : #C6B9AE;
    border                          : 1px solid #575757;
    border-bottom                   : none;
    border-top-left-radius          : 2px;
    -webkit-border-top-left-radius  : 2px;
    -moz-border-radius-topleft      : 2px;
    border-top-right-radius         : 2px;
    -webkit-border-top-right-radius : 2px;
    -moz-border-radius-topright     : 2px;
    margin                          : 5px 5px 0 5px;
}

.tingle-modal-box__content img {
    max-width : 100%;
}

.dialog_1 .tingle-modal-box__content input:not([type='checkbox']),
.dialog_1 .tingle-modal-box__content textarea,
.dialog_2 .tingle-modal-box__content input:not([type='checkbox']),
.dialog_2 .tingle-modal-box__content textarea {
    margin-left : 5px;
    padding     : 5px;
    width       : calc(100% - 10px);
}

.dialog_1 .tingle-modal-box__content input[type='checkbox'],
.dialog_2 .tingle-modal-box__content input[type='checkbox'] {
    margin: 15px;
}

.dialog_4 .tingle-modal-box__content input {
    border             : 1px solid #000000;
    box-shadow         : inset 0 0 5px 0 rgba(0, 0, 0, 0.75);
    -webkit-box-shadow : inset 0 0 5px 0 rgba(0, 0, 0, 0.75);
    -moz-box-shadow    : inset 0 0 5px 0 rgba(0, 0, 0, 0.75);
    margin             : 5px 0 10px 0;
    padding            : 5px;
    width              : 100%;
}

.dialog_4 .tingle-modal-box__content input[type=checkbox] {
    margin : 0;
}

.tingle-modal-box__footer {
    cursor                             : auto;
    border-bottom-left-radius          : 4px;
    -webkit-border-bottom-left-radius  : 4px;
    -moz-border-radius-bottomleft      : 4px;
    border-bottom-right-radius         : 4px;
    -webkit-border-bottom-right-radius : 4px;
    -moz-border-radius-bottomright     : 4px;
    width                              : auto;
}

.dialog_1 .tingle-modal-box__footer,
.dialog_2 .tingle-modal-box__footer,
.dialog_3 .tingle-modal-box__footer,
.dialog_5 .tingle-modal-box__footer,
.dialog_6 .tingle-modal-box__footer {
    padding : .7rem 1rem;
}

.dialog_4 .tingle-modal-box__footer {
    background                         : #C6B9AE;
    background-size                    : 100% 100%;
    border                             : 1px solid #575757;
    border-top                         : none;
    border-bottom-left-radius          : 2px;
    -webkit-border-bottom-left-radius  : 2px;
    -moz-border-radius-bottomleft      : 2px;
    border-bottom-right-radius         : 2px;
    -webkit-border-bottom-right-radius : 2px;
    -moz-border-radius-bottomright     : 2px;
    margin                             : 0 5px 5px 5px;
}

.tingle-modal-box__footer::after {
    clear   : both;
    content : "";
    display : table;
}

.tingle-modal-box__footer--sticky {
    background    : #C6B9AE;
    border-top    : 2px solid #A56734;
    border-bottom : 2px solid #A56734;
    bottom        : -200px; /* TODO : find a better way */
    margin-left   : 2px;
    opacity       : 1;
    position      : fixed;
    transition    : bottom .3s ease-in-out .3s;
}

/* ===== STATE ====================================================================================================== */
.tingle-enabled {
    left     : 0;
    overflow : hidden;
    position : fixed;
    right    : 0;
}

.tingle-modal--visible .tingle-modal-box__footer {
    bottom : 0;
}

.tingle-enabled .tingle-content-wrapper {
    filter : blur(8px);
}

.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;
}

/* ===== BUTTONS ==================================================================================================== */
.tingle-btn {
    border             : none;
    box-shadow         : none;
    -webkit-box-shadow : none;
    -moz-box-shadow    : none;
    cursor             : pointer;
    display            : inline-block;
    font-family        : inherit;
    font-size          : inherit;
    line-height        : normal;
    margin             : 0 .5rem;
    text-decoration    : none;
    transition         : background-color .4s ease;
    vertical-align     : middle;
}

.dialog_1 .tingle-btn,
.dialog_2 .tingle-btn,
.dialog_3 .tingle-btn,
.dialog_5 .tingle-btn,
.dialog_6 .tingle-btn {
    background-color      : #A56734;
    border-radius         : 5px;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    color                 : #FFFFFF;
    padding               : 8px 16px;
}

.dialog_4 .tingle-btn {
    background : none;
    margin     : 0 5px;
    padding    : 0 10px 15px 10px;
}

.dialog_1 .tingle-btn:focus,
.dialog_2 .tingle-btn:focus,
.dialog_3 .tingle-btn:focus,
.dialog_5 .tingle-btn:focus,
.dialog_6 .tingle-btn:focus {
    border  : 2px solid #3498DB;
    padding : 6px 14px;
}

.dialog_4 .tingle-btn:focus {
    text-shadow : 0 0 5px #000000, 0 0 5px #000000, 0 0 5px #000000, 0 0 5px #000000;
}

.dialog_1 .tingle-btn:hover,
.dialog_2 .tingle-btn:hover,
.dialog_3 .tingle-btn:hover,
.dialog_5 .tingle-btn:hover,
.dialog_6 .tingle-btn:hover {
    border  : 2px solid white;
    padding : 6px 14px;
}

.dialog_4 .tingle-btn:hover {
    color       : #A56734;
    text-shadow : 0 0 5px #FFFFFF, 0 0 5px #FFFFFF, 0 0 5px #FFFFFF, 0 0 5px #FFFFFF, 0 0 5px #FFFFFF;
}

.tingle-btn--primary {
    background-color : #3498DB;
}

.tingle-btn--danger {
    background-color : #A52A2A !important;
}

.tingle-btn--default {
    background-color : #34495E;
}

.tingle-btn--pull-left {
    float : left;
}

.tingle-btn--pull-right {
    float : right;
}

/* ===== DIALOG_2 = LOGIN =========================================================================================== */
.dialog_4 .form_login_header {
    background     : #000000;
    border-bottom  : 2px solid #FD7401;
    color          : #FFFFFF;
    letter-spacing : 2px;
    line-height    : 40px;
    padding-left   : 15px;
}

.dialog_4 .form_login_data {
    padding : 15px 15px 0 15px;
}

.dialog_4 .form_login_data label,
.dialog_4 .tingle-btn {
    color          : #FFFFFF;
    letter-spacing : 2px;
    margin-left    : 5px;
    text-shadow    : 0 0 10px #000000;
}

/* ===== DIALOG IMG ================================================================================================= */
.dialog_img {
    background            : #E8E3DF;
    border                : 1px solid #A56734;
    border-radius         : 5px;
    -moz-border-radius    : 5px;
    -webkit-border-radius : 5px;
    height                : 400px;
    margin                : 10px 0;
    padding               : 5px;
}

.dialog_img .helper {
    display        : inline-block;
    height         : 100%;
    vertical-align : middle;
}

.dialog_img img {
    max-height     : 100%;
    vertical-align : middle;
}

/* ===== RESPONSIVE ================================================================================================= */
@media (max-width : 540px) {
    .tingle-modal:not(.dialog_4) {
        /*display     : block;*/
        /*padding-top : 60px;*/
        /*top         : 0;*/
        /*width       : 100%;*/
    }

    .tingle-modal:not(.dialog_4) .tingle-modal-box {
        /*border-radius : 0;*/
        /*margin        : 5px;*/
        max-width     : 100%;
        width         : calc(100% - 20px);
    }

    .tingle-modal:not(.dialog_4) .tingle-modal-box__content {
        /*overflow-y : auto;*/
    }

    .tingle-modal-box__content form {
        width : auto !important;
    }

    .tingle-modal-box__content img {
        max-width : 100%;
    }

    .tingle-modal--noClose {
        top : 0;
    }

    .tingle-modal:not(.dialog_4).tingle-modal--noOverlayClose {
        padding-top : 0;
    }

    .tingle-modal-box__footer {
        display        : flex;
        flex-direction : column;
    }

    .tingle-modal-box__footer:not(.dialog_4 *):not(.no_reverse_button *) {
        flex-direction : column-reverse;
    }

    .tingle-modal-box__footer .tingle-btn {
        display : block;
        float   : none;
        margin  : 0 0 1rem 0;
        width   : 100%;
    }

    .tingle-modal__close {
        background-color   : #2C3E50;
        border             : none;
        box-shadow         : none;
        -webkit-box-shadow : none;
        -moz-box-shadow    : none;
        color              : #FFFFFF;
        display            : none;
        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;
    }
}

@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
    .tingle-modal:before {
        backdrop-filter         : blur(18px);
        -webkit-backdrop-filter : blur(18px);
        bottom                  : 0;
        content                 : "";
        left                    : 0;
        position                : fixed;
        right                   : 0;
        top                     : 0;
    }

    .tingle-enabled .tingle-content-wrapper {
        filter : none;
    }
}

/* ===== ANIMATIONS ================================================================================================= */
@keyframes scale {
    0% {
        opacity   : 0;
        transform : scale(.9);
    }
    100% {
        opacity   : 1;
        transform : scale(1);
    }
}