/* FormViewer - v1.0.0 */

/* Layout Styles */
.page {
    display:block;
    overflow: hidden;
    background-color: white;
}

.page-inner {
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}

#formviewer {
    overflow: auto;
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

#overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    visibility: hidden;
}

#overlay.panning {
    visibility: visible;
    cursor: all-scroll;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: grab;
}

#overlay.panning.mousedown {
    cursor: all-scroll;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

/* Continuous Layout */
.layout-continuous .page {
    margin: 0 auto 10px;
}
.layout-continuous .page:last-child {
    margin: 0 auto 0;
}

/* Tabs */
.tabbed-wrapper .tab-body > * {
    display: none;
}

.tabbed-wrapper .tab-body .selected {
    display: flex;
}

/* Signatures */

.signature {
    cursor: pointer;
}

.no-signature {
    border: none;
}

dialog.signature-modal {
    width: 600px;

    flex-direction: column;
    padding: 0;

    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5);

    &[open] {
        display: flex;
    }

    &::backdrop {
        background-color: rgb(0 0 0 / 40%)
    }

    .tab-head {
        display: flex;
        flex-direction: row;

        width: 100%;

        height: 50px;
        max-height: 20%;

        border-bottom: 2px inset black;

        color: white;
        background-color: #707784;

        .tab-link {
            flex: 1;

            border: 0;
            border-left: 1px black inset;

            text-align: center;
            line-height: 3;

            color: white;
            background-color: unset;

            cursor: pointer;

            &:hover {
                background-color: #eee;
            }

            &.selected {
                background-color: #98a1b3 !important;
                cursor: default;
            }

            &:first-child {
                border-left: 0;
            }
        }
    }

    .tab-body {
        height: 290px;

        & > *[data-tab-name="draw"] {
            width: 100%;
            height: 100%;

            canvas {
                max-height: 100%;
                max-width: 100%;
                margin: auto;

                touch-action: none;
            }
        }

        & > *[data-tab-name="text"] {
            width: 100%;
            height: 100%;
            align-content: center;

            input {
                width: 100%;
                text-align: center;
                font-size: 70px;
                font-family: cursive;
                height: 100%;
                padding: 0;
                border: 0;
            }
        }


        & > *[data-tab-name="image"] {
            height: 100%;

            & > div {
                display: none;
            }

            & > .active {
                display: flex;
            }

            .signature-image-upload {
                position: relative;
                .signature-error-text {
                    display: none;

                    &.active {
                        display: revert;
                    }
                }
            }

            .signature-image-loading {
                height: 100%;

                justify-content: center;
                align-items: center;
            }

            .signature-image-modify {
                position: relative;

                .signature-image-slider {
                    position: absolute;
                    bottom: 10px;
                    left: 50%;
                    transform: translateX(-50%);
                    opacity: 40%;
                    transition: opacity 500ms;

                    &:hover {
                        opacity: 100%;
                    }
                }
            }
        }
    }

    .tab-foot {
        display: flex;
        justify-content: stretch;

        height: 40px;

        border-top: 1px inset black;

        & > * {
            flex: 1;

            border: 0;
            border-top: 1px black solid;
            border-right: 1px black solid;

            &:last-child {
                border-right: 0;
            }
        }
    }
}

.spinner {
    width: 150px;
    height: 150px;

    border: 5px solid black;
    border-bottom-color: transparent;
    border-radius: 100%;

    animation: rotation linear 1s infinite;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}