#body { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; }
.content { height: 100%!important; }

.content-wrapper { width: 600px; background-color: #f0f0f0; }
#main { max-width: 100%; text-align: center; }
.nodrag { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -moz-user-select: none; }

.login-container .k-card-header { text-align: center; border: none; padding-top: 30px; }
.login-container .k-card-header .k-card-title { font-size: 36px; font-weight: 400; color: #555555; letter-spacing: 1.2px; }

.login-container .k-card-body.step1 { padding: 40px; }
.login-container .k-card-body.step2 { display: none; padding: 10px 40px 40px 40px; }
.login-device { text-align: left; font-size: 16px; margin: 0 4% 15px 4%; }
.login-device .k-icon { font-size: 26px; }
.login-device .name { margin-left: 2%; }
.login-input-group { margin-bottom: 60px; }
.login-input { position: relative; margin-bottom: 20px; }
.login-input .guide-icon { position: absolute; top: 50%; left: -10px; transform: translate(0, -50%); font-size: 18px; color: #0a5ab2; }
.login-input .input-icon { position: absolute; top: 50%; left: 4%; transform: translate(0, -50%); font-size: 26px; }
.login-input input { width: 94%; height: 40px; padding-left: 9%; border: none; border-bottom: 1px solid #f0f0f0; font-size: 16px; }
.login-input input:focus { outline: none; }
.login-input .placeholder { position: absolute; top: 50%; left: 12%; transform: translate(0, -50%); z-index: 1; font-size: 16px; color: #757575; pointer-events: none; }
.login-input input:focus + .placeholder, .login-input input.hide + .placeholder { left: -10000px; cursor: inherit; }
.login-input:last-child { margin-bottom: 0; }

.save-id { text-align: left; font-size: 14px; color: #555555; margin-bottom: 20px; padding: 0 25px; }
.save-id input[type=checkbox] { width: 16px; height: 16px; vertical-align: -3.4px; border-radius: 0px; }
.save-id input[type=checkbox]:checked { background-color: transparent; color: #555555; }
.save-id label { letter-spacing: 1.2px; }
/*.save-id input[type=checkbox] { display: none; }*/
/*.save-id input[type=checkbox] + label { display: inline-block; width: 20px; height: 20px; border: 1px solid #757575;*/
/*    vertical-align: -2.1px; }*/
/*.save-id input[type=checkbox]:checked + label { display: inline-block; background-color: transparent; color: #555555; }*/

.submit-button { width: 30%; height: 45px; line-height: 45px; background-color: #c5c5c5; border: none;
    border-radius: 5px; pointer-events: none; outline: none; margin-bottom: 10px; transition: ease-in 0.1s; }
.submit-button span { color: #ffffff; font-size: 16px; font-weight: 400; }
.submit-button.active { background-color: #3747ac; transition: ease-out 0.1s; cursor: pointer; pointer-events: initial; }
.submit-button.active span { font-size: 17px; }

.footer { margin-top: 50px; font-size: 14px; font-weight: 300; text-align: center; color: #555555; }

.k-tooltip { background-color: #ffffff; }
.k-tooltip .k-tooltip-content { padding: 5px; }
.k-tooltip div { font-size: 16px; color: #000000; }
.k-tooltip .main { font-weight: bold; }
.k-tooltip .sub { margin-top: 10px; }
.k-tooltip .k-callout { color: #ffffff; bottom: 0; }