/* layout
-------------------------------------------*/
html, body { font-family: 'Noto Sans KR', 'Nanum Gothic', "돋움", dotum, arial, sans-serif; background: #fff; color: #464646; box-sizing: border-box; height: 100%;}
.container { margin: 0 auto; width: 491px; padding: 20px 15px 0 15px;}
.head { background-image: linear-gradient( to right, #09cded, #149ee4); height: 70px; border-top-left-radius: 10px; border-top-right-radius: 10px; position: relative;}
.chat-wrap { background: #fff;}

/* common
-------------------------------------------*/
strong { font-weight: 700;}
.hidden { display: none;}
input,
button,
input:focus,
button:focus,
a:focus { -webkit-box-shadow: none; box-shadow: none; outline: none;}

/* cover
-------------------------------------------*/
.login .cover { background: #CCC2AD; text-align: center; }
.cover {height: 800px; border-radius: 10px; position: relative; padding-top: 120px; }

.cover img.logo { position: absolute; z-index: 1; top: 40px; left: 40px;}
.cover .ico-close { display: block; width: 32px; height: 32px; background: url(../img/btn_close.png) no-repeat 0 0; position: absolute; right: 20px; top: 24px; z-index: 10;}
.cover .ico-close:hover,
.cover .ico-close:focus { background-image: url(../img/btn_close_hover.png);}

/* login
-------------------------------------------*/
.form-login { width: 380px; margin: 46px auto 0 auto;}
.form-login .dropdown { margin-bottom: 0;}
.form-login input,
.form-login .dropdown .btn-style { width: 100%; border-radius: 25px; height: 50px; font-size: 16px; font-weight: 300; border: 1px solid #5D857733; background: #F5F3ED; padding-left: 30px; padding-right: 30px; margin-bottom: 10px; color: #7A9991; box-sizing: border-box; text-align: left;}
.form-login .dropdown.open .btn-style { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.form-login .dropdown .btn-style:active { box-shadow: none; outline: none;}
.form-login .dropdown .btn-style .caret { position: absolute; z-index: 1050; width: 24px; height: 24px; top: 12px; right: 20px; border: none; background: url(../img/btn_dropdown.png) center no-repeat;}
.form-login .dropdown.open .btn-style .caret { background: url(../img/btn_dropup.png) center no-repeat; }

.form-login .dropdown ul.dropdown-menu { width: 100%; max-height: 184px; overflow-y: auto; margin-top: -11px; box-shadow: 0px 4px 6px #0E1A2326; border: 1px solid #5D857733; border-top: none; border-radius: 24px; border-top-left-radius: 0; border-top-right-radius: 0; background: #F5F3ED; padding: 0;}
.form-login .dropdown ul.dropdown-menu li { padding: 0;}
.form-login .dropdown ul.dropdown-menu li a { display: block; width: 100%; height: 36px; font-size: 16px; color: #5D8577; padding: 7px 31px 0 31px;}
.form-login .dropdown ul.dropdown-menu li a:hover { background: rgba(211, 226, 218, 0.8);}

.form-login input { color: #5d8577;}
.form-login input::placeholder { color: #7A9991;}
.form-login input:-webkit-input-placeholder { color: #7A9991;}
.form-login input::-ms-input-placeholder { color: #7A9991;}


.form-login .btn-login { width: 100%; height: 50px; text-align: center; border-radius: 25px; border: none; background: #3B5A4F; color: #fff; font-size: 18px; font-weight: 300;  margin-top: 26px;}
.form-login .btn-login:hover { background: #315247;}



/* custom scroll
-------------------------------------------*/
/* width */
.dropdown-menu::-webkit-scrollbar { width: 8px;}

/* Track */
.dropdown-menu::-webkit-scrollbar-track { background: none; margin-bottom: 24px;}

/* Handle */
.dropdown-menu::-webkit-scrollbar-thumb { background: #AAB3B0; width: 8px; border-radius: 4px;}

/* Handle on hover */
.dropdown-menu::-webkit-scrollbar-thumb:hover { background: #AAB3B0;}

/* custom login */
.login, .login * {
    box-sizing: border-box;
}

body {
    min-width: unset;
}

input, button {
    font-family: inherit;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    display: none;
    text-align: left;
}

.open > .dropdown-menu {
    display: block;
}

.dropdown-menu > li > a {
    text-decoration: none;
}

.login button {
    cursor: pointer;
}

.login .error {
    margin-top: 10px;
    padding-left: 10px;
    font-size: 14px;
    text-align: left;
    color: #ba130d;
}

/* custom chat */
.chat-root.container {
    position: unset;
    width: 461px;
    height: 800px;
    overflow: unset;
}

.container-chat {
    padding: 0;
    overflow: hidden;
}

.bot .name {
    text-align: left;
}

.write-form textarea {
    float: left;
}

@media (max-width: 767.98px) {
    .login.container,
    .chat-root.container {
        width: 100vw;
        height: 100vh;
        padding: 0;
    }

    .cover {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }

    .login .cover > img:not(.logo) {
        max-width: 100%;
        max-height: 50%;
    }

    .form-login {
        max-width: 90%;
    }
}