/* The Modal */
.modal-background {
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    min-height: 100% ; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
    -webkit-animation-name: fadeIn; /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
}

.modal-background-overlay {
    position: fixed; /* Stay in place */
    z-index: 2000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    min-height: 100% ; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
    -webkit-animation-name: fadeIn; /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
}

.modal-header {
    padding: 10px;
    background-color: #f5f5f5;
    font-size: 14px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    color: black;
}

.modal-body {min-height:80px !important}

.modal-footer {
    padding: 10px;
    background-color: #f5f5f5;
    text-align: right;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {

    /* Modal Content */
    .modal-content {
        background-color: #fefefe;
        width: 90%;
        position: absolute;
        margin-top: 30px;
        left: 50%;
        margin-left: -45%;
        min-height: 120px !important;
        -webkit-animation-name: slideIn;
        -webkit-animation-duration: 0.4s;
        animation-name: slideIn;
        animation-duration: 0.4s;
        border-radius: 3px;
        box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.5);
    }

    /* Modal Content */
    .modal-content-overlay {
        background-color: #fff;
        width: 300px;
        text-align: center;
        padding: 16px;
        left: 50%;
        margin-left: -150px;
        /*min-height: 120px !important;*/
        position: absolute;
        margin-top: 50px;
        margin-bottom: 40px;
        -webkit-animation-name: slideIn;
        -webkit-animation-duration: 0.4s;
        animation-name: slideIn;
        animation-duration: 0.4s;
        border-radius: 3px;
        box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.5);
    }

    .modal-large {
        width: 90%;
    }

    .modal-small {
        width: 90%;
    }




}

@media (min-width:769px)  {

    /* Modal Content */
    .modal-content {
        background-color: #fefefe;
        width: 700px;
        left: 50%;
        margin-left: -350px;
        min-height: 120px !important;
        position: absolute;
        margin-top: 10px;
        margin-bottom: 40px;
        -webkit-animation-name: slideIn;
        -webkit-animation-duration: 0.4s;
        animation-name: slideIn;
        animation-duration: 0.4s;
        border-radius: 3px;
        box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.5);
    }

    /* Modal Content */
    .modal-content-overlay {
        background-color: #fff;
        width: 300px;
        text-align: center;
        padding: 16px;
        left: 50%;
        margin-left: -150px;
        /*min-height: 120px !important;*/
        position: absolute;
        margin-top: 50px;
        margin-bottom: 40px;
        -webkit-animation-name: slideIn;
        -webkit-animation-duration: 0.4s;
        animation-name: slideIn;
        animation-duration: 0.4s;
        border-radius: 3px;
        box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.5);
    }

    .modal-large {
        width: 700px;
        left: 50%;
        margin-left: -350px;
    }

    .modal-small {
        width: 400px;
        left: 50%;
        margin-left: -200px;
    }


}