/* 
   MODALS (overriding styles for popup overlay jquery plugin) 
   Note: Could move modal styles to a common stylesheet later if popup overlay plugin is adopted for whole site. 
*/	

@media all {    
	div.popup_content {
		display: none;
		min-height: 20px;
		padding: 0;
		margin: 12px;
        background-color: none;
        -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
		box-shadow: 0 0 10px rgba(0,0,0,0.4);
	}
    div.popup_content > header { 
        display: block;
        padding: 7px 15px; 
        background-color: #317ECE; 
        -webkit-border-radius: 4px 4px 0 0;
        -moz-border-radius: 4px 4px 0 0;
        border-radius: 4px 4px 0 0;
    }
    div.popup_content > header > h2 { 
        font-weight: bold;
        display: inline-block; 
        vertical-align: middle; 
    }
    div.popup_content > div {
        padding: 20px 15px 15px; 
        background-color: #FFFFFF; 
        -webkit-border-radius: 0 0 4px 4px;
        -moz-border-radius: 0 0 4px 4px;
        border-radius: 0 0 4px 4px;
    }
    div.popup_content[id="modal_submit"] > div, 
    div.popup_content[id="modal_error"] > div {
        min-width: 375px; 
        min-height: 60px; 
    }
    
    @-webkit-keyframes spin {
        100% { 
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @-moz-keyframes spin {
        100% { 
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @-ms-keyframes spin {
        100% { 
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @-o-keyframes spin {
        100% { 
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes spin {
        100% { 
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    div.popup_content[id="modal_wait"] { 
        width: 60px;
        height: 60px;
        background: url(/Assets/Images/Icons/API/loading-01.png) no-repeat;
        background-size: contain; 
        -webkit-animation: spin 2s linear infinite;
	    -moz-animation: spin 2s linear infinite;
        -o-animation: spin 2s linear infinite;
	    animation: spin 2s linear infinite;
        -webkit-box-shadow: none;
	    -moz-box-shadow: none;
        box-shadow: none;
    }

    div.popup_content[class~="closable"] > header > div { 
        float: right; 
        width: 10px; 
        padding-top: 1px; 
        -webkit-transform: scale(1.5,1); 
        -moz-transform: scale(1.5,1); 
        -ms-transform: scale(1.5,1); 
        -o-transform: scale(1.5,1); 
        transform: scale(1.5,1);
        cursor: pointer; 
    }
    div.popup_content[class~="closable"][class~="mobile"] > header > div { 
        width: 18px; 
    }
    div.popup_content > header > h2,
    div.popup_content[class~="closable"] > header > div {
        font-family: 'Mission Gothic', 'Arial-Narrow', Arial; 
        font-size: 16px; 
        line-height: 17px; 
        text-transform: uppercase; 
        color: #FFFFFF; 
    }
    div.popup_content[class~="closable"] > header::after { 
        clear: both; 
    }
    div.popup_content[class~="standalone"][class~="mobile"] {
        -moz-transform: scale(0.8);
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
    }
    div.popup_content[class~="standalone"][class~="mobile"] > header { 
        padding: 12px 15px 10px; 
    }
    div.popup_content[class~="standalone"][class~="mobile"], 
    .popup_visible div.popup_content[class~="standalone"][class~="mobile"] {
        width: 100%; 
        height: 100%; 
        margin: 0 auto; 
        -moz-box-shadow: unset;
        -webkit-box-shadow: unset;
		box-shadow: unset;
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    div.popup_content[class~="standalone"][class~="mobile"], 
    div.popup_content[class~="standalone"][class~="mobile"] > header, 
    .popup_visible div.popup_content[class~="standalone"][class~="mobile"] { 
        -webkit-border-radius: unset;
        -moz-border-radius: unset;
        border-radius: unset;
    }
    div.popup_content[class~="warning"] > header { 
        background-color: #CC0000; 
    }
}

@media (min-width: 768px) {
    div.popup_content {
		margin: 60px;
	}
}

@media (max-width: 375px) {
    div.popup_content[id="modal_submit"] > div, 
    div.popup_content[id="modal_error"] > div {
        min-width: 335px; 
    }
}

@media (max-width: 360px) {
    div.popup_content[id="modal_submit"] > div, 
    div.popup_content[id="modal_error"] > div {
        min-width: 320px; 
    }
}

@media (max-width: 320px) {
    div.popup_content[id="modal_submit"] > div, 
    div.popup_content[id="modal_error"] > div {
        min-width: 280px; 
    }
}