.modal-dialog-bottom {
    position: absolute;
    top: 10%;
    left: 30%;
    right: 30%;
    width: 40%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - (1.75rem * 2));
}

.app-modal {
    color: #ffffff;
    background-color: #1B365D;
}

.modal-close-btn {
    color: #ffffff;
    height: auto;
    width: 6%;
}

.p-modal-b-text-header {   
    font-size: 0.9rem;
}

.p-modal-b-text {
    font-weight: bold;
    font-size: 0.9rem;
}

.btn-modal-not-bg {
    color: #fff;
    border-color: transparent;
    background-color: transparent;
    font-weight: bold;
}

.btn-modal-next {
    color: #fff;
    border-color: transparent;
    background-color: transparent;
    font-weight: bold;
}

.btn-modal-next,
.btn-modal-next:hover,
.btn-modal-next:active,
.btn-modal-next:visited {
    color: #fff !important;
    border-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.btn-modal-next::before {
    content: "NEXT ";
    float: left;
}

.btn-modal-next::after {
    content: url('../images/icons/angle-right.svg');
    float: right;
    margin-top: -12px;
}

.btn-modal-back {
    color: #fff;
    border-color: transparent;
    background-color: transparent;
    font-weight: bold;
}

.btn-modal-back,
.btn-modal-back:hover,
.btn-modal-back:active,
.btn-modal-back:visited {
    color: #fff !important;
    border-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;;
}

.btn-modal-back::after {
    content: "BACK ";
    float: right;
}

.btn-modal-back::before {
    content: url('../images/icons/angle-left.svg');
    float: left;
    margin-top: -12px;
}

.btn-modal-done {
    color: #fff;
    border-color: transparent;
    background-color: transparent;
    font-weight: bold;
    margin-bottom: 15px;
    content: "DONE ";
}

.btn-modal-done,
.btn-modal-done:hover,
.btn-modal-done:active,
.btn-modal-done:visited {
    color: #fff !important;
    border-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.btn-modal-done::before {
    content: "DONE ";
    float: left;
}

.btn-modal-done::after {
    float: right;
    margin-top: -9px;
}

.btn-modal-tips,
.btn-modal-tips:hover,
.btn-modal-tips:active,
.btn-modal-tips:visited {
    color: #fff !important;
    border-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;;
}

/* Non Retina Displays */
@media only screen and (min-width: 1200px) {
    .modal-arrow-step1 {
        position: absolute;
        width: calc(70% - 30vw);
        height: 65%;
    }

    .modal-arrow-step2 {
        position: absolute;
        width: 575px;
        right: 43px;
        top: 155px;
    }
    .modal-arrow-step3 {
        position: absolute;
        width: calc(70% - 30vw);
        height: 65%;
    }
}

/* Retina Displays */
@media only screen and (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .modal-arrow-step1 {
        position: absolute;
        left: 10px;
        width: calc(60% - 30vw);
        transform: rotate(-10deg);
    }

    .modal-arrow-step2 {
        position: absolute;
        width: 575px;
        right: 43px;
        top: 155px;
    }

    .modal-arrow-step3 {
        position: absolute;
        left: 10px;
        width: calc(60% - 30vw);
        transform: rotate(-10deg);
    }
}

@media only screen and (min-width: 992px) and (max-width: 1198.98px) {
    .modal-arrow-step1 {
        position: relative;
        width: 30%;
        height: 50%;
        top: 10%;
    }

    .modal-arrow-step2 {
        position: absolute;
        /* transform: rotateY(-30deg); */
        width: 498px;
        left: 525px;
        top: 182px;
    }

    .modal-arrow-step3 {
        position: relative;
        width: 30%;
        height: 50%;
        top: 10%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .modal-arrow-step1 {
        position: relative;
        width: 45%;
        height: 60%;
        transform: rotate(10deg);
    }

    .modal-arrow-step2 {
        position: absolute;
        transform: rotateY(-70deg);
        width: 560px;
        left: 390px;
        top: 215px;
    }

    .modal-arrow-step3 {
        position: relative;
        width: 30%;
        height: 60%;
        transform: rotate(10deg);
    }
}