.modalWindow,.messageBox,.notification
{  
position:fixed;  
display:none;  
z-index:10004;
background-color:#ffffff;
border:2px solid #eeeeee;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
box-shadow: #666666 0px 5px 25px;
-webkit-box-shadow: #666666 0px 5px 25px;
-moz-box-shadow: #666666 0px 5px 25px;
-webkit-overflow-scrolling:touch;
} 



.modalCloseButton
{
position:relative;
float:right;
width:70px;
height:15px;
top:-35px;
z-index:99999; /* higher than iframe */
font-size:14px;
cursor:pointer;
font-size:14px;
font-weight:bold;
}

.modalWindow.fullscreen
{
border-color:#ffffff;
}

.modalWindow.fullscreen .modalCloseButton
{
top:10px;
margin-right:40px;
}

.modalWindow iframe
{
top:-15px;
position:relative;
z-index:99998;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}

.messageBox
{
display:block;
position:fixed;
background-color:#ffffff;
padding:40px;
margin:auto;
top:0px;
left:0px;
width:300px;
}

.confirmationButton
{
display:block;
margin:20px auto;
font-size:12px;
padding:8px 10px;
letter-spacing:0px;
}

.app-message.alert {
    color: #fff;
    background-color: #916d87;
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 2s;
}

.app-message.alert.loud {
    background-color: #ff8c00;
}

.app-message.alert.open {
    max-height: 400px;
}

.app-message.alert .innerContent {
    padding: 8px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.app-message.alert .innerContent p {
    color: #fff;
    font-size: 11px;
    margin-bottom: 0;
}

.app-message.alert .button_confirmation {
    display: inline-block;
    margin: 4px 0 0 12px;
}

.notification {
    display: none;
    width: 300px;
    border: 0;
    background-color: #ffffff;
    right: 0;
    bottom: 0;
}

.innerNotification {
    padding: 0 20px 20px 20px;
}

.notification .confirmationButton {
    display: block;
    text-align: right;
    margin: 4px 4px 4px 0;
    padding: 4px;
    color: #000000;
    font-weight: bold;
    cursor: pointer;
}

.notification.wide-notification {
    width: 400px;
}

.notification.left-notification {
    left: 0;
    right: auto;
    margin-left: 40px;
    margin-right: 0;
}


.tooltip
{
display:none;
position:absolute;
z-index:999;
box-shadow: #666666 0px 5px 25px;
-webkit-box-shadow: #666666 0px 5px 25px;
-moz-box-shadow: #666666 0px 5px 25px;
}


.tooltipContent
{
color:#222233 !important;
font-size:11px;
font-weight:normal;
padding:13px;
background-color:#ffffff;
}



.tooltipContent strong
{
color:#222233 !important;
font-weight:bold !important;
}

.tooltipContent .magenta
{
color:#ff00ff !important;
}

.tooltipExit
{
cursor:pointer;
}

body.fullscreenModal
{
overflow:hidden;
}

/*Might want this higher up if we use the spinner elsewhere*/
.spinner {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 3px solid #ccc;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.button-fade-out {
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}

.button-fade-in {
    opacity: 1;
    transition: opacity 0.25s ease-in-out;
}