.modal-block {
    background: transparent;
    padding: 0;
    text-align: left;
    max-width: 600px;
    margin: 40px auto;
    position: relative;
}

    .modal-block.modal-block-xs {
        max-width: 200px;
    }

    .modal-block.modal-block-sm {
        max-width: 400px;
    }

    .modal-block.modal-block-md {
        max-width: 600px;
    }

    .modal-block.modal-block-lg {
        max-width: 900px;
    }

    .modal-block.modal-block-full {
        max-width: 98%;
    }

    .modal-block.modal-header-color .panel-heading h2 {
        color: #FFF;
    }

    .modal-block.modal-full-color {
        color: #FFF;
    }

        .modal-block.modal-full-color .panel-heading {
            border: 0;
        }

            .modal-block.modal-full-color .panel-heading h2 {
                color: #FFF;
            }

        .modal-block.modal-full-color .panel-footer {
            border: 0;
        }

        .modal-block.modal-full-color .panel-body {
            background-color: transparent;
        }

        .modal-block.modal-full-color .fa {
            color: #FFF !important;
        }

/* Modal Wrapper */
.modal-wrapper {
    position: relative;
    padding: 25px 0;
}

/* Modal Icon */
.modal-icon {
    float: left;
    width: 20%;
    text-align: center;
}

    .modal-icon .fa {
        font-size: 52px;
        position: relative;
        top: -10px;
        color: #CCC;
    }

    .modal-icon.center {
        float: none;
        width: auto;
        padding-top: 20px;
    }

        .modal-icon.center + .modal-text {
            float: none;
            width: auto;
        }

    .modal-icon + .modal-text {
        float: left;
        width: 80%;
    }

/* Modal Text */
.modal-text {
    padding: 0 5px;
}

    .modal-text h1, .modal-text h2, .modal-text h3, .modal-text h4, .modal-text h5, .modal-text h6 {
        padding: 0;
        margin: -7px 0 4px 0;
    }

.modal-block-primary .fa {
    color: #CCC;
}

.modal-block-primary.modal-header-color .panel-heading {
    background-color: #CCC;
}

.modal-block-primary.modal-full-color .panel {
    background-color: #e0e0e0;
}

.modal-block-primary.modal-full-color .panel-heading {
    background-color: #CCC;
}

.modal-block-primary.modal-full-color .panel-footer {
    background-color: #e0e0e0;
}

.modal-block-success .fa {
    color: #47a447;
}

.modal-block-success.modal-header-color .panel-heading {
    background-color: #47a447;
}

.modal-block-success.modal-full-color .panel {
    background-color: #5cb85c;
}

.modal-block-success.modal-full-color .panel-heading {
    background-color: #47a447;
}

.modal-block-success.modal-full-color .panel-footer {
    background-color: #5cb85c;
}

.modal-block-warning .fa {
    color: #ed9c28;
}

.modal-block-warning.modal-header-color .panel-heading {
    background-color: #ed9c28;
}

.modal-block-warning.modal-full-color .panel {
    background-color: #f0ad4e;
}

.modal-block-warning.modal-full-color .panel-heading {
    background-color: #ed9c28;
}

.modal-block-warning.modal-full-color .panel-footer {
    background-color: #f0ad4e;
}

.modal-block-danger .fa {
    color: #d2322d;
}

.modal-block-danger.modal-header-color .panel-heading {
    background-color: #d2322d;
}

.modal-block-danger.modal-full-color .panel {
    background-color: #d9534f;
}

.modal-block-danger.modal-full-color .panel-heading {
    background-color: #d2322d;
}

.modal-block-danger.modal-full-color .panel-footer {
    background-color: #d9534f;
}

.modal-block-info .fa {
    color: #5bc0de;
}

.modal-block-info.modal-header-color .panel-heading {
    background-color: #5bc0de;
}

.modal-block-info.modal-full-color .panel {
    background-color: #7dcde5;
}

.modal-block-info.modal-full-color .panel-heading {
    background-color: #5bc0de;
}

.modal-block-info.modal-full-color .panel-footer {
    background-color: #7dcde5;
}

.modal-block-dark .fa {
    color: #171717;
}

.modal-block-dark.modal-header-color .panel-heading {
    background-color: #171717;
}

.modal-block-dark.modal-full-color .panel {
    background-color: #2b2b2b;
}

.modal-block-dark.modal-full-color .panel-heading {
    background-color: #171717;
}

.modal-block-dark.modal-full-color .panel-footer {
    background-color: #2b2b2b;
}

html.dark .modal-content {
    background-color: #1d2127;
}

html.dark .modal-header,
html.dark .modal-footer {
    border-color: #282d36;
}

/* Close */
.mfp-close,
.mfp-close-btn-in .mfp-close {
    font-family: "Open Sans", Arial, sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #838383;
}

/* No Margins */
.mfp-no-margins img.mfp-img {
    padding: 0;
}

.mfp-no-margins .mfp-figure:after {
    top: 0;
    bottom: 0;
}

.mfp-no-margins .mfp-container {
    padding: 0;
}

/* Zoom */
.mfp-with-zoom .mfp-container, .mfp-with-zoom.mfp-bg {
    opacity: 0.001;
    -webkit-backface-visibility: hidden;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container, .mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
}

/* Animnate */
.my-mfp-zoom-in .zoom-anim-dialog {
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
}

.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
}

.my-mfp-zoom-in.mfp-bg {
    opacity: 0.001;
    /* Chrome opacity transition bug */
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}

.my-mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.my-mfp-zoom-in.mfp-removing.mfp-bg {
    opacity: 0;
}

.my-mfp-slide-bottom .zoom-anim-dialog {
    opacity: 0;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    -webkit-transform: translateY(-20px) perspective(600px) rotateX(10deg);
    -moz-transform: translateY(-20px) perspective(600px) rotateX(10deg);
    -ms-transform: translateY(-20px) perspective(600px) rotateX(10deg);
    -o-transform: translateY(-20px) perspective(600px) rotateX(10deg);
    transform: translateY(-20px) perspective(600px) rotateX(10deg);
}

.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
    opacity: 1;
    -webkit-transform: translateY(0) perspective(600px) rotateX(0);
    -moz-transform: translateY(0) perspective(600px) rotateX(0);
    -ms-transform: translateY(0) perspective(600px) rotateX(0);
    -o-transform: translateY(0) perspective(600px) rotateX(0);
    transform: translateY(0) perspective(600px) rotateX(0);
}

.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
    opacity: 0;
    -webkit-transform: translateY(-10px) perspective(600px) rotateX(10deg);
    -moz-transform: translateY(-10px) perspective(600px) rotateX(10deg);
    -ms-transform: translateY(-10px) perspective(600px) rotateX(10deg);
    -o-transform: translateY(-10px) perspective(600px) rotateX(10deg);
    transform: translateY(-10px) perspective(600px) rotateX(10deg);
}

.my-mfp-slide-bottom.mfp-bg {
    opacity: 0.01;
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}

.my-mfp-slide-bottom.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.my-mfp-slide-bottom.mfp-removing.mfp-bg {
    opacity: 0;
}

.panel-heading {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.text-danger {
    color: #d2322d !important;
    font-size: 13px;
    line-height: 20px;
}