.modal { position: fixed; left: 0 !important; bottom: 0 !important; right: 0 !important; height: 100%; z-index: 999999; display: none; background: -moz-linear-gradient(top, rgba(0,0,0,0) 70%, rgba(0,0,0,0.05) 73%, rgba(0,0,0,0.47) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 70%,rgba(0,0,0,0.05) 73%,rgba(0,0,0,0.47) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 70%,rgba(0,0,0,0.05) 73%,rgba(0,0,0,0.47) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#78000000',GradientType=0 ); }
    .modal .modal-dialog { text-align: center; width: 50%; height: auto; overflow-y: auto; max-height: 100%; background-color: #eee !important; font-size: 0.9em; box-shadow: 0px 0px 10px rgba(0,0,0,0.5); box-shadow: 0px 0px 75px -10px rgba(0,0,0,0.75); position: absolute; bottom: 30px; left: 50%; transform: translate(-50%, 0); }
        .modal .modal-dialog .modal-header { text-align: center; padding-top: 5px; font-weight: bold; text-transform: uppercase; font-size:15px; margin: 10px 0; }
        .modal .modal-dialog .modal-body { padding: 0 0 17px 0; font-size: 15px; font-weight: normal; }
        .modal .modal-dialog .modal-body ul { list-style: none; }
        .modal .modal-dialog .close { text-align: right; position: absolute; right: 5px; top: 5px; }
            .modal .modal-dialog .close img { width: 15px; height: 15px; cursor: pointer; }

.modalerror { border: 1px solid #ff0000; }
.modalinfo { border: 1px solid green; }