.blocker{
    position            : fixed;
    top                 : 0;
    right               : 0;
    bottom              : 0;
    left                : 0;
    width               : 100%;
    height              : 100%;
    overflow            : auto;
    z-index             : 999999;
    /* padding:20px; */
    box-sizing          : border-box;
    background-color    : #000;
    background-color    : rgba(0,0,0,0.3);
    text-align          : center;
}

.blocker:before{
    content             : "";
    display             : inline-block;
    height              : 100%;
    vertical-align      : middle;
    margin-right        : -0.05em;
}

.blocker.behind{
    background-color    : transparent;
}

.modal{
    display             : none;
    vertical-align      : middle;
    position            : relative;
    z-index             : 2;
    max-width           : 800px;
    min-width           : 300px;
    box-sizing          : border-box;
    /*width:90%;*/
    background          : #fff;
    padding             : 20px 20px 30px 20px;
    -webkit-border-radius   :8px;
    -moz-border-radius      :8px;
    -o-border-radius        :8px;
    -ms-border-radius       :8px;
    border-radius       : 8px;
    -webkit-box-shadow      :0 0 10px #000;
    -moz-box-shadow         :0 0 10px #000;
    -o-box-shadow           :0 0 10px #000;
    -ms-box-shadow          :0 0 10px #000;
    box-shadow          : 0 0 10px #000;
    text-align          : left;
}

.modal a.close-modal{
    position            : absolute;
    top                 : -12.5px;
    right               : -12.5px;
    display             : block;
    width               : 30px;
    height              : 30px;
    text-indent         : -9999px;
    background-size     : contain;
    background-repeat   : no-repeat;
    background-position : center center;
    background-image    : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==');
}

.modal .modal-title {
    font-weight         : bold;
    font-size           : 12pt;
    display             : block;
    margin-bottom       : 10px;
}

.modal .modal-button {
    text-align          : center;
    display             : block;
    margin              : 20px 0 0;
}

.modal .modal-button a {
    padding             : 8px 10px;
    font-weight         : bold;
    font-size           : 10pt;
    color               : #ffffff;
    background          : #6666cc;
    border-radius       : 5px;
    text-decoration     : none;
}

.modal-spinner{
    display             : none;
    position            : fixed;
    top                 : 50%;
    left                : 50%;
    transform           : translateY(-50%) translateX(-50%);
    padding             : 12px 16px;
    border-radius       : 5px;
    background-color    : #111;
    height              : 20px;
}

.modal-spinner>div{
    border-radius       : 100px;
    background-color    : #fff;
    height              : 20px;
    width               : 2px;
    margin              : 0 1px;
    display             : inline-block;
    -webkit-animation   : sk-stretchdelay 1.2s infinite ease-in-out;
    animation           : sk-stretchdelay 1.2s infinite ease-in-out;
}

.modal-spinner .rect2{
    -webkit-animation-delay : -1.1s;
    animation-delay     : -1.1s;
}

.modal-spinner .rect3{
    -webkit-animation-delay : -1.0s;
    animation-delay     : -1.0s;
}

.modal-spinner .rect4{
    -webkit-animation-delay : -0.9s;
    animation-delay     : -0.9s;
}

@-webkit-keyframes sk-stretchdelay{
    0%,40%,100%{
        -webkit-transform   : scaleY(0.5)
    }
    20%{
        -webkit-transform   : scaleY(1.0);
    }
}

@keyframes sk-stretchdelay{
    0%,40%,100%{
        transform           : scaleY(0.5);
        -webkit-transform   : scaleY(0.5);
    }
    20%{
        transform           : scaleY(1.0);
        -webkit-transform   : scaleY(1.0);
    }
}