﻿@import "Hoster_Colors.css";
.POP_WindowOff {
    display: none !important;
}

.POP_WindowOut {
    -webkit-appearance: none;
    position: fixed;
    z-index: 2;
    width: 800px !important;
    left: 1000px;
    opacity: 0.0;
    right: 0;
    top: 30px;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
    -webkit-animation: windowFadeOut 0.25s ease-out;
    -moz-animation: windowFadeOut 0.25s ease-out;
    -o-animation: windowFadeOut 0.25s ease-out;
    animation: windowFadeOut 0.25s ease-out;
}

    @-webkit-keyframes windowFadeOut {
        0% { display: block; opacity: 1; left: 0px }
        99% { display: block; opacity: 0; left: 500px }
        100% { display: none; opacity: 0; left: 500px }
    }

    @-moz-keyframes windowFadeOut {
        0% { display: block; opacity: 1; left: 0px }
        99% { display: block; opacity: 0; left: 500px }
        100% { display: none; opacity: 0; left: 500px }
    }

    @-o-keyframes windowFadeOut {
        0% { display: block; opacity: 1; left: 0px }
        99% { display: block; opacity: 0; left: 500px }
        100% { display: none; opacity: 0; left: 500px }
    }

    @keyframes windowFadeOut {
        0% { display: block; opacity: 1; left: 0px }
        99% { display: block; opacity: 0; left: 500px }
        100% { display: none; opacity: 0; left: 500px }
    }

@media only screen and (max-width : 799px)
{
    .POP_WindowOn {
        -webkit-appearance: none;
        border-color: rgba(28, 28, 124, 0.8);
        box-sizing: border-box;
        top: 10px;
        margin: 0;
        padding: 0;
        position: absolute;
        z-index: 2;
        left: 0px;
        opacity: 1.0;
        right: 0;
        margin: 0 auto;
        width: 95% !important;
        display: block;
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 18px;
        background-color: var(--main-grid-back-color);
        border-style: solid;
        border-width: 3px;
        border-radius: 4px;
        box-shadow: 2px 2px 12px #000000;
        text-align: right;
        -webkit-animation: windowFadeIn 0.5s ease-out;
        -moz-animation: windowFadeIn 0.5s ease-out;
        -o-animation: windowFadeIn 0.5s ease-out;
        animation: windowFadeIn 0.5s ease-out;
    }

    .POP_WindowHeader {
        -webkit-appearance: none;
        text-align: right;
        background-color: rgba(28, 28, 124, 0.5);
        font-size: 14px;
        width: 100%;
        height: 23px;
        white-space: nowrap;
        overflow-y: hidden;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
    }

    .POP_WindowFrame {
        -webkit-appearance: none;
        border-top-color: lightgray;
        border-top-style: solid;
        border-top-width: 1px;
        padding: 0px;
        color: #202020;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        width: 100% !important;
        padding-top: 12px;
        padding-bottom: 12px;
        white-space: nowrap;
        background-color: #223375;
    }

}

@media only screen and (min-width : 800px)
{
    .POP_WindowOn {
        -webkit-appearance: none;
        border-color: rgba(28, 28, 124, 0.8);
        position: fixed;
        z-index: 2;
        width: 800px !important;
        left: 0px;
        opacity: 1.0;
        right: 0;
        top: 30px;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block;
        font-family: Verdana;
        font-size: 14px;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 1.0);
        border-style: solid;
        border-width: 1px;
        border-radius: 4px;
        box-shadow: 2px 2px 12px #000000;
        -webkit-animation: windowFadeIn 0.5s ease-out;
        -moz-animation: windowFadeIn 0.5s ease-out;
        -o-animation: windowFadeIn 0.5s ease-out;
        animation: windowFadeIn 0.5s ease-out;
    }

    .POP_WindowOn tr {
    }


    .POP_WindowHeader {
        -webkit-appearance: none;
        text-align: right;
        background-color: rgba(28, 28, 124, 0.5);
/*        background-color: var(--main-grid-back-color);
*/        font-size: 14px;
        width: 798px;
        height: 23px;
        white-space: nowrap;
        overflow-y: hidden;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
    }

    .POP_WindowFrame {
        -webkit-appearance: none;
        width: 798px !important;
        overflow-x: hidden;
        overflow-y: scroll;
        background-color: var(--window-page-back-color);
    }

}

    @-webkit-keyframes windowFadeIn {
        0% { display: none; opacity: 0; left: -1000px }
        1% { display: block; opacity: 0; left: -1000px }
        100% { display: block; opacity: 1; left: 0px }
    }

    @-moz-keyframes windowFadeIn {
        0% { display: none; opacity: 0; left: -1000px }
        1% { display: block; opacity: 0; left: -1000px }
        100% { display: block; opacity: 1; left: 0px }
    }

    @-o-keyframes windowFadeIn {
        0% { display: none; opacity: 0; left: -1000px }
        1% { display: block; opacity: 0; left: -1000px }
        100% { display: block; opacity: 1; left: 0px }
    }

    @keyframes windowFadeIn {
        0% { display: none; opacity: 0; left: -1000px }
        1% { display: block; opacity: 0; left: -1000px }
        100% { display: block; opacity: 1; left: 0px }
    }

