.animated {
    -webkit-animation-duration: 200ms;
    animation-duration: 200ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.position-absolute {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}

popup {
    font-family: 'Lato', sans-serif;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}

.popup-backdrop {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    -webkit-animation-duration: 200ms;
    animation-duration: 200ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    z-index: 1500;
    background-color: rgba(0, 0, 0, 0.5);
}

.popup-container {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    z-index: 1501;
}

.popup-container .popup {
    -webkit-animation-duration: 200ms;
    animation-duration: 200ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    top: 35%;
    left: 45%;
    width: 400px;
    color: black;
    border-radius: 0;
    position: absolute;
    background-color: #F7F7FA;
    margin-left: -125px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.popup-container .popup-body {
    margin-bottom: 15px;
    margin-top: 15px;
    padding: 20px;
    color: #6b737a;
}

.popup-container .popup-buttons button.ok-button:hover {
    opacity: 0.8;
}

.popup-container .popup-buttons button.cancel-button:hover {
    opacity: 0.8;
}

.popup-container .popup-buttons button.cancel-button {
    background-color: #A7AEC1;
    color: #ffffff;
}

.popup-container .popup-buttons button.ok-button-red {
    background-color: #e03b4a !important;
    color: #fff;
}

.popup-container .popup-buttons button.ok-button-green {
    background-color: #00bf6f !important;
    color: #fff;
}

.popup-container .popup-buttons button.ok-button {
    color: #fff;
    background-color: #7625f3;
}

.popup-container .popup-buttons button {
    display: table-cell;
    width: 50%;
    border-radius: 0;
    height: 55px;
    border: 5px solid #f6f6f9;
}

.popup-container .popup-buttons {
    border: 5px solid #f6f6f9;
    text-align: center;
    width: 100%;
    display: table;
    position: relative;
    height: 100%;
}

.popup-container .popup-head {
    border-bottom: 1px solid #e7e7e7;
}

.popup-container .popup-title {
    background-color: white;
    margin: 0;
    text-align: center;
    padding: 20px 5px 20px 5px;
    text-transform: uppercase;
    font-size: 1.3rem;
    color: #595959;
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

@-webkit-keyframes zoomOut {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    100% {
        opacity: 0;
    }
}

@keyframes zoomOut {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    100% {
        opacity: 0;
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}