body.modal-open { overflow-x: hidden; overflow-y: hidden; }

/* modals 2 */

.modal-form                              { position: fixed; z-index: 200; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.5); overflow-y: auto; }
.modal-form                              { display: none; }
.modal-form > .container                 { position: relative; margin: 100px auto 20px; background-color: #fff; }
.modal-form > .container > a.close       { position: absolute; top: -36px; right: -36px; width: 36px; height: 36px; line-height: 36px; }
.modal-form > .container > a.close       { display: block; font-size: 36px; text-align: center; color: #fff; text-decoration: none; }
.modal-form > .container > a.close:hover { text-decoration: none; }

.modal-form .input                { border: none; border-bottom: 1px solid #b2b2b2; margin-bottom: 10px; padding: 3px; font-size: 14px; line-height: 30px; }
.modal-form .input:focus          { border-color: #228dcf; }
.modal-form textarea.input        { min-height: 100px; line-height: normal; resize: none; }
.modal-form .input-frame          { position: relative; margin-bottom: 10px; }
.modal-form .input-frame > .input { margin-bottom: 0; }
.modal-form .input-frame > .input.has-icon { padding-right: 20px; }
.modal-form .input-frame > a      { display: block; position: absolute; right: 0; top: 0; font-size: 18px; width: 20px; line-height: 36px; text-align: center; text-decoration: none; }
.modal-form .input-frame > a      { background-color: #fff; }
.modal-form .input-frame > a:hover{ background-color: #eee; }
.modal-form .input-frame > .icon       { cursor: pointer; position: absolute; right: 0; top: 0; font-size: 18px; width: 20px; line-height: 36px; text-align: center; }
.modal-form .input-frame > .icon       { background-color: #fff; color: #228dcf; }
.modal-form .input-frame > .icon:hover { background-color: #eee; }

.modal-form .form-hint { margin: -5px 0 10px; font-size: 12px; color: #999; font-style: italic; }

@media screen and (max-width: 640px) {
	.modal-form > .container > a.close { top: 0; right: 0; color: #228dcf; }
}

.modal-form .links          { text-align: center; font-size: 14px; margin: 20px 0 -20px; }
.modal-form .links a        { display: inline-block; line-height: 25px; }
.modal-form .links a.google { display: inline-block; line-height: 25px; padding-left: 30px; background: url('/static/img/google-account.png') no-repeat left center; background-size: 25px; }

@media screen and (max-width: 800px) {
	.modal-form .links      { margin-bottom: -10px; }
}