.modal-form.new                          { 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.new                          { display: none; }

.modal-form.new                          { user-select: none; -moz-user-select: none; -webkit-user-select: none; }
.modal-form.new input                    { user-select: text; -moz-user-select: text; -webkit-user-select: text; }
.modal-form.new textarea                 { user-select: text; -moz-user-select: text; -webkit-user-select: text; }
.modal-form.new > .container > .inner    { user-select: text; -moz-user-select: text; -webkit-user-select: text; }
.modal-form.new > .container > .inner > .card-tabs { user-select: none; -moz-user-select: none; -webkit-user-select: none; }

.modal-form.new > .container               { box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; }
.modal-form.new > .container               { position: relative; margin: 100px auto 20px; background-color: #fff; }
.modal-form.new > .container               { padding: 35px 25px 25px; border: 1px solid #D8DDE6; border-radius: 5px; box-shadow: 0 8px 15px 0 rgba(0,0,0,0.35); }

.modal-form.new > .container > .form-close       { position: absolute; display: block; text-align: center; text-decoration: none; }
.modal-form.new > .container > .form-close       { top: 35px; right: 25px; width: 20px; height: 20px; line-height: 20px; }
.modal-form.new > .container > .form-close       { font-size: 36px; color: #657FAC; opacity: 0.4; cursor: pointer; }
.modal-form.new > .container > .form-close:hover { text-decoration: none; }

.modal-form.new > .container .outer-bottom { box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; }
.modal-form.new > .container .outer-bottom { position: absolute; left: 0; right: 0; top: calc(100% + 10px); background-color: #fff; }
.modal-form.new > .container .outer-bottom { padding: 5px 25px; border: 1px solid #D8DDE6; border-radius: 5px; box-shadow: 0 8px 15px 0 rgba(0,0,0,0.35); }

.modal-form.new      > .container       { width: 320px; }
.modal-form.new.w320 > .container       { width: 320px; }
.modal-form.new.w640 > .container       { width: 640px; }
.modal-form.new.w960 > .container       { width: 960px; }

@media screen and (max-width: 1024px) {
    .modal-form.new      > .container       { width: 320px; }
    .modal-form.new.w320 > .container       { width: 320px; }
    .modal-form.new.w640 > .container       { width: 640px; }
    .modal-form.new.w960 > .container       { width: 640px; }
}

@media screen and (max-width: 800px) {
    .modal-form.new      > .container       { width: 320px; }
    .modal-form.new.w320 > .container       { width: 320px; }
    .modal-form.new.w640 > .container       { width: 640px; }
    .modal-form.new.w960 > .container       { width: 640px; }
}

@media screen and (max-width: 640px) {
    .modal-form.new      > .container       { width: 320px; }
    .modal-form.new.w320 > .container       { width: 320px; }
    .modal-form.new.w640 > .container       { width: 320px; }
    .modal-form.new.w960 > .container       { width: 320px; }
}

@media screen and (max-width: 400px) {
    .modal-form.new      > .container       { width: 100%; height: 100vh; overflow-y: auto; }
    .modal-form.new.w320 > .container       { width: 100%; height: 100vh; overflow-y: auto; }
    .modal-form.new.w640 > .container       { width: 100%; height: 100vh; overflow-y: auto; }
    .modal-form.new.w960 > .container       { width: 100%; height: 100vh; overflow-y: auto; }

    .modal-form.new > .container           { position: absolute; transform: translate(0, 0); left: 0; top: 0; }
    .modal-form.new > .container           { margin: 0; padding-top: 0; border-radius: 0; }

    .modal-form.new > .container .form-close   { top: 0; left: 0; width: 46px; height: 46px; line-height: 46px; color: #2D6DF2; opacity: 1; }

    .modal-form.new > .container .outer-bottom { position: initial; left: auto; right: auto; bottom: auto; margin-top: 20px; }
    .modal-form.new > .container .outer-bottom { padding: 0; border: none; border-radius: none; box-shadow: none; }
}

.modal-form.new .inner .mcol                 { display: inline-block; vertical-align: top; }
.modal-form.new .inner .mcol                 { width: calc(50% - 10px); }
.modal-form.new .inner .mcol:nth-of-type(2n) { margin-left: 20px; }

@media screen and (max-width: 640px) {
    .modal-form.new .inner .mcol                 { width: 100%; }
    .modal-form.new .inner .mcol:nth-of-type(2n) { margin-left: 0; }
}


.modal-form.new .form-inputs           { margin: 0 -5px; display: flex; align-items: stretch; flex-wrap: wrap; justify-content: flex-start; }
.modal-form.new .form-inputs > .single { width: calc(25% - 10px); margin: 0 5px 10px; }
.modal-form.new .form-inputs > .double { width: calc(50% - 10px); margin: 0 5px 10px; }
.modal-form.new .form-inputs > .full   { width: calc(100% - 10px); margin: 0 5px 10px; }

@media screen and (max-width: 640px) {
    .modal-form.new .form-inputs > .single { width: calc(50% - 10px); }
    .modal-form.new .form-inputs > .double { width: calc(100% - 10px); }
}


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

.modal-form.new input,
.modal-form.new textarea                 { width: 100%; margin: 0; padding: 2px 10px; font-size: 14px; line-height: 30px; box-sizing: border-box; }
.modal-form.new input,
.modal-form.new textarea                 { color: #657FAC; border: 1px solid #e5e5e5; border-radius: 5px; background-color: #fff; }
.modal-form.new textarea                 { min-height: 100px; line-height: normal; resize: none; }

.modal-form.new .form-title                   { margin-top: -6px; padding-right: 20px; }
.modal-form.new .form-title                   { color: #657FAC; font-size: 24px; font-weight: 300; line-height: 32px; }

.modal-form.new > .container > .inner         { margin-top: 30px; }
.modal-form.new .inner .form-row              { margin-top: 10px; }
.modal-form.new .inner .form-row label        { position: relative; overflow: visible; margin: 0; padding: 6px 0; }
.modal-form.new .inner .form-row label        { color: #657FAC; font-size: 12px; line-height: 18px; font-weight: 500; }
.modal-form.new .inner .form-row label > .opt { display: block; opacity: 0.5; font-size: 12px; font-weight: normal; line-height: 16px; white-space: normal; }
.modal-form.new .inner .button                { margin: 25px 0 0 0; width: 100%; }
.modal-form.new .inner > .text                  { color: #2D6DF2; font-size: 14px; line-height: 16px; }
.modal-form.new .inner > .info                  { color: #657FAC; font-size: 14px; text-align: center; }
.modal-form.new .inner > .hint                  { color: #0044CD; font-size: 12px; margin-top: 5px; }
.modal-form.new .inner > .form-row > .text      { color: #2D6DF2; font-size: 14px; line-height: 16px; }
.modal-form.new .inner > .form-row > .info      { color: #657FAC; font-size: 14px; text-align: center; }
.modal-form.new .inner > .form-row > .hint      { color: #0044CD; font-size: 12px; margin-top: 5px; }

@media screen and (max-width: 400px) {
    .modal-form.new .form-title { margin: 0 -25px; padding: 16px 25px 14px 46px; border-bottom: 1px solid rgb(45,109,242,0.2); }
    .modal-form.new .form-title { font-size: 14px; line-height: 16px; font-weight: bold; text-align: center; color: #2D6DF2; }
    .modal-form.new .form-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .modal-form.new > .container > .inner         { margin-bottom: 25px; }
    .modal-form.new > .container > .inner::before { content: ''; margin: 35px auto 50px; display: block; }
    .modal-form.new > .container > .inner::before { width: 120px; height: 25px; background: url('/static/img/logo/128x128-blue.png') no-repeat center center; background-size: contain; }
}


.modal-form.new label  { font-size: 14px; color: #1f3c77; }

.modal-form.new .ctrls          { display: flex; align-items: center; justify-content: flex-end; margin-top: 20px; }
.modal-form.new .ctrls > button { min-width: 120px; }


/* buttons */

.modal-form.new .button       { display: block; text-align: center; border-radius: 5px; font-size: 14px; text-decoration: none; line-height: 32px; width: 130px; padding: 0 5px; }
.modal-form.new .button       { box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; }
.modal-form.new .button       { position: relative; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.modal-form.new .button:hover { text-decoration: none; }

.modal-form.new .button.green { background-color: #10B163; box-shadow: 0 8px 15px 0 rgba(16,177,99,0.5); color: #fff; }
.modal-form.new .button.blue  { background-color: #3080EB; box-shadow: 0 8px 15px 0 rgba(48,128,235,0.5); color: #fff; }
.modal-form.new .button.navy  { background-color: #0044CD; box-shadow: 0 8px 15px 0 rgba(0,68,205,0.5); color: #fff; }
.modal-form.new .button.red   { background-color: #FF5D40; box-shadow: 0 8px 15px 0 rgba(255,93,64,0.5); color: #fff; }

.modal-form.new .button:active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-color: #000; opacity: 0.05; }
.modal-form.new .button:disabled       { pointer-events: none; opacity: 0.5; background-color: #999; box-shadow: 0 8px 15px 0 rgba(0,0,0,0.3); }