/* GLOBAL */
.popup {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2255;
    background-color: rgba(0, 0, 0, 0.5);
}
.global-popup-container {
    padding: 20px;
    background-color: rgba(255, 255, 255, 1);
    margin-top: 50px;
    border: #999;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    position: relative;
}
.global-popup-message {
    color: #333;
    font-size: 20px;
    margin-top: 10px;
    width: 90%;
    overflow-wrap: break-word;
    position: relative;
}
.global-popup-container h4 {  
    color: #dd0000;
    text-transform: uppercase;
    font-family: gibson-bold, Helvetica;
    width: 80%;
    overflow-wrap: break-word;
}
.global-popup-close { 
    position: absolute;
    right: 1px;
    top: 1px;
    cursor: pointer;
    color: #fff;
    background-color: #333;
    padding: 4px;
    border: none;
}

@media(min-width: 375px) {
    .global-popup-container {
        width: 90%;
        margin: 0 auto;
        margin-top: 50px;
    }
}
@media(min-width: 425px) {
    .global-popup-container {
        width: 400px;
    }
    .form-popup {
        margin-top: 0;
    }
}
@media(min-width: 768px) {
    .global-popup-container {
        width: 450px;
        margin: 50px auto;
    }
    .global-popup-container h4 {  
        width: 90%;
    }
    .form-popup {
        margin-top: 0;
    }
    .form-popup-container {
        width: 400px;
    }
}

/* TASK */
.task-error {
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 2px;
}
.task-error h4 {
    color: #dd0000;
    text-transform: uppercase;
    font-family: gibson-bold, Helvetica;
    width: 80%;
    overflow-wrap: break-word;
}
.task-error button {
    position: absolute;
    top: 1px;
    right: 1px;
}
.task-error-message {
    color: #333;
    font-size: 20px;
    margin-top: 10px;
    width: 90%;
    overflow-wrap: break-word;
}
.task-error-list {
    font-size: 17px;
}

@media(min-width: 768px) {
    .task-error h4 {
        width: 90%;
    }
}

/* BOX FILL POPUP */
.box-fill-popup {
    position: absolute;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9) !important;
}
.box-fill-popup h4 {
    text-transform: uppercase;
    font-family: gibson-bold, Helvetica;
    width: 80%;
    overflow-wrap: break-word;
}
.box-fill-popup h4.negative-msg {
    color: #dd0000;
}
.box-fill-popup h4.neutral-msg {
    
}
.box-fill-popup h4.positive-msg {
    color: #73a236;
}
.box-fill-popup-close {
    position: absolute;
    right: 1px;
    top: 1px;
}
.box-fill-popup-msg {
    color: #333;
    font-size: 20px;
    margin-top: 10px;
    width: 100%;
    overflow-wrap: break-word;
}
@media(min-width: 375px) {

}
@media(min-width: 425px) {
    
}
@media(min-width: 768px) {

}
@media(min-width: 1080px) {

}
 
/* TRANSITIONS */
.global-popup-animation-positive {
    -webkit-animation: global-popup-animation-positive 1s forwards; 
    animation: global-popup-animation-positive 1s forwards;
}
@keyframes global-popup-animation-positive {
    0% {background-color: transparent;}
    100% {background-color: rgba(0, 0, 0, 0.5);}
}
.global-popup-animation-negative {
    -webkit-animation: global-popup-animation-negative 1s forwards;
    animation: global-popup-animation-negative 1s forwards;
}
@keyframes global-popup-animation-negative {
    from { background-color: rgba(0, 0, 0, 0.5); }
    to { background-color: transparent; }
}

.global-popup-container-animation-positive {
    -webkit-animation: global-popup-container-animation-positive 0.7s forwards; 
    animation: global-popup-container-animation-positive 0.7s forwards;
}
@keyframes global-popup-container-animation-positive {
    from { opacity: 0; }
    to { opacity: 1; }
}
.global-popup-container-animation-negative {
    -webkit-animation: global-popup-container-animation-negative 0.7s forwards;
    animation: global-popup-container-animation-negative 0.7s forwards;
}
@keyframes global-popup-container-animation-negative {
    from { opacity: 1; }
    to { opacity: 0; }
}
    
.box-fill-popup-animation-show {
    -webkit-animation: box-fill-popup-animation-show 0.5 forwards; 
    animation: box-fill-popup-animation-show 0.5s forwards;
}
@keyframes box-fill-popup-animation-show {
    from { opacity: 0; }
    to { opacity: 1; }
}
.box-fill-popup-animation-hide {
    -webkit-animation: box-fill-popup-animation-hide 0.5 forwards; 
    animation: box-fill-popup-animation-hide 0.5s forwards;
}
@keyframes box-fill-popup-animation-hide {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* OVERRIDES */
#email-confirmation-popup h4 {
    color: #73a236;
}

/* FOR IE */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .global-popup-container h4 {  
        color: #dd0000;
        text-transform: uppercase;
        width: 80%;
        overflow-wrap: break-word;
        font-family: Helvetica;
        font-weight: 900;
    }
}