.dialog {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    position: absolute;

    z-index: 8888;

    left: 0;
    top: 0;

    background: transparent;

    &-content {
        display: flex;

        opacity: 1;

        background-color: @color-bromic-background;
        box-shadow: 0px 0px 5px @color-bromic-header;

        z-index: 9999;
    }

    &-overlay {
        display: block;

        position: absolute;

        width: 100%;
        height: 100%;

        left: 0;
        top: 0;

        background-color: #000000;
        opacity: .65;
    }
}


.dialog-deploy {
    flex: 1;
    display: block;

    &-header {
        display: block;
        font-size: 16px;
        line-height: 1;
        font-weight: 500;

        padding: 8px 0 8px 0;

        background-color: @color-bromic-header;
        color: #FFFFFF;
        border-bottom: 3px solid @color-bromic-main;

        min-width: 300px;

        text-align: center;
    }

    &-body {
        display: block;
        padding: 0 20px;

        margin-bottom: 16px;

        &-spinner {
            display: block;
            padding: 24px 0 8px 0;

            .sk-folding-cube {
                margin: 20px auto;
                width: 40px;
                height: 40px;
                position: relative;
                -webkit-transform: rotateZ(45deg);
                transform: rotateZ(45deg);
            }

            .sk-folding-cube .sk-cube {
                float: left;
                width: 50%;
                height: 50%;
                position: relative;
                -webkit-transform: scale(1.1);
                -ms-transform: scale(1.1);
                transform: scale(1.1);
            }
            .sk-folding-cube .sk-cube:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: @color-bromic-main;
                animation: sk-foldCubeAngle 2.4s infinite linear both;
                transform-origin: 100% 100%;
            }
            .sk-folding-cube .sk-cube2 {
                transform: scale(1.1) rotateZ(90deg);
            }
            .sk-folding-cube .sk-cube3 {
                transform: scale(1.1) rotateZ(180deg);
            }
            .sk-folding-cube .sk-cube4 {
                transform: scale(1.1) rotateZ(270deg);
            }
            .sk-folding-cube .sk-cube2:before {
                animation-delay: 0.3s;
            }
            .sk-folding-cube .sk-cube3:before {
                animation-delay: 0.6s;
            }
            .sk-folding-cube .sk-cube4:before {
                animation-delay: 0.9s;
            }

            @keyframes sk-foldCubeAngle {
                0%, 10% {
                    transform: perspective(140px) rotateX(-180deg);
                    opacity: 0;
                } 25%, 75% {
                      transform: perspective(140px) rotateX(0deg);
                      opacity: 1;
                  } 90%, 100% {
                        transform: perspective(140px) rotateY(180deg);
                        opacity: 0;
                    }
            }
        }

        &-message {
            display: block;
            margin-top: 16px;
            padding: 8px 0;

            font-size: 14px;
            line-height: 1;
            font-weight: 300;

            text-align: center;

            a {
                font-weight: 500;

                &.isValid { color: @color-bromic-main; }
            }
        }

        &-error {
            display: block;

            margin-top: 16px;

            font-size: 14px;
            line-height: 1;
            font-weight: 500;

            text-align: center;

            color: #f20d0d;
        }
    }

    &-footer {
        display: block;
        padding: 8px 0 16px 0;

        text-align: center;

        &-done {
            display: block;

            margin: 0 auto;
            padding: 8px 30px;

            outline: 0;
            border: 0;

            background-color: #009900;
            color: #FFFFFF;

            font-size: 12px;
            font-weight: 500;
            line-height: 1;

            cursor: pointer;
            will-change: opacity;
            transition: opacity .2s ease;

            &:hover { opacity: .65; }
        }

        &-loading {
            display: block;
            margin: 0 auto;

            padding: 6px 30px;
            outline: 0;
            border: 0;

            background-color: @color-bromic-main;

            cursor: pointer;
            will-change: opacity;
            transition: opacity .2s ease;

            &:hover { opacity: .85; }

            .spinner {
                margin: 2px;
                width: 70px;
                text-align: center;
            }

            .spinner > div {
                width: 10px;
                height: 10px;
                background-color: #FFFFFF;

                border-radius: 100%;
                display: inline-block;
                -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
                animation: sk-bouncedelay 1.4s infinite ease-in-out both;
            }

            .spinner .bounce1 {
                -webkit-animation-delay: -0.32s;
                animation-delay: -0.32s;
            }

            .spinner .bounce2 {
                -webkit-animation-delay: -0.16s;
                animation-delay: -0.16s;
            }

            @-webkit-keyframes sk-bouncedelay {
                0%, 80%, 100% { -webkit-transform: scale(0) }
                40% { -webkit-transform: scale(1.0) }
            }

            @keyframes sk-bouncedelay {
                0%, 80%, 100% {
                    -webkit-transform: scale(0);
                    transform: scale(0);
                } 40% {
                      -webkit-transform: scale(1.0);
                      transform: scale(1.0);
                  }
            }
        }
    }
}


.dialog-saveFirst {
    flex: 1;
    display: block;

    &-header {
        display: block;
        font-size: 16px;
        line-height: 1;
        font-weight: 500;

        padding: 8px 0 8px 0;

        background-color: @color-bromic-header;
        color: #FFFFFF;
        border-bottom: 3px solid @color-bromic-main;

        min-width: 300px;

        text-align: center;
    }

    &-body {
        display: flex;

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

        padding: 0 16px;

        &-icon {
            display: inline-block;
            text-align: center;
            padding: 24px 0 12px 0;

            i {
                font-size: 48px;
                color: #f20d0d;
            }
        }

        &-message {
            display: inline-block;
            padding: 8px 0;

            max-width: 200px;

            font-size: 14px;
            line-height: 1;
            font-weight: 300;

            text-align: center;
        }
    }

    &-footer {
        display: block;
        padding: 8px 0 16px 0;

        text-align: center;

        &-ok {
            display: block;

            margin: 0 auto;
            padding: 8px 30px;

            outline: 0;
            border: 0;

            background-color: #009900;
            color: #FFFFFF;

            font-size: 12px;
            font-weight: 500;
            line-height: 1;

            cursor: pointer;
            will-change: opacity;
            transition: opacity .2s ease;

            &:hover {
                opacity: .65;
            }
        }

    }
}