@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');


body {
    background-color: #f8f8f8;
    font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
}

/*.login_wrapper {
    width: 100%;
    margin-top: 50px;
}*/

.login_form {
    width: 400px;
    margin: 0 auto;
    background: #fff;
    padding: 30px 25px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

    .login_form img {
        margin-bottom: 20px;
    }
    #Username, #Password {
        border-radius: 15px;
        
        
    }
        #Username::placeholder, #Password::placeholder {
            font-size: 12px;
            color: #b7c6c4;
            padding-left: 7px;
            letter-spacing: 0.7px;
        }
.login_content h1 {
    font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
    font-size: 35px;
    margin-bottom: 20px;
    font-weight: 700;
    color: #666666;
    text-shadow: 1px 1px 0 #f8f8f8, -1px 1px 0 #f8f8f8, 1px -1px 0 #f8f8f8, -1px -1px 0 #f8f8f8;
}
.BLogin {
   border-radius: 10px;
}
.BLogin:hover {
    background-color: #252634 !important; /* พื้นหลังเข้มขึ้น */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* เงา */
    transform: translateY(-2px); /* เด้งขึ้นเล็กน้อย */
}
.crm-text {
    letter-spacing: 2px;
}

.module-text {
    padding-left: 10px;
    letter-spacing: 1px;
}
      
.title-with-lines {
    display: flex;
    align-items: center;
    text-align: center;
    color: #6c7a89; /* สีตัวอักษร */
    font-size: 22px;
    font-weight: 500;
}

    .title-with-lines::before,
    .title-with-lines::after {
        content: "";
        flex: 1;
        border-bottom: 1px solid #ccc; /* สีเส้น */
        margin: 0 10px;
    }

.login_content .form-control {
    height: 35px;
    font-size: 14px;
    margin-bottom: 15px;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding-left: 10px;
}



.separator {
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
    color: #888;
}

.text-danger {
    color: #d9534f !important;
    font-size: 13px;
}
.nav-sm .nav.side-menu li a {
    text-align: center !important;
    font-weight: 400;
    font-size: 10px;
    padding: 10px 5px
}

.nav-sm .nav.child_menu li.active,
.nav-sm .nav.side-menu li.active-sm {
    border-right: 0;
}

    .nav-sm ul.nav.child_menu ul,
    .nav-sm .nav.side-menu li.active-sm ul ul {
        position: static;
        width: 200px;
        background: none
    }

.nav-sm > .nav.side-menu > li.active-sm > a {
    color: #1ABB9C !important
}

.nav-sm .nav.side-menu li a i.toggle-up {
    display: none !important
}

.nav-sm .nav.side-menu li a i {
    font-size: 25px !important;
    text-align: center;
    width: 100% !important;
    margin-bottom: 5px
}

.nav-sm ul.nav.child_menu {
    left: 100%;
    position: absolute;
    top: 0;
    width: 210px;
    z-index: 4000;
    background: #3E5367;
    display: none
}

    .nav-sm ul.nav.child_menu li {
        padding: 0 10px
    }

        .nav-sm ul.nav.child_menu li a {
            text-align: left !important
        }

.nav-sm .profile {
    display: none
}

.menu_section {
    margin-bottom: 35px
}

    .menu_section h3 {
        padding-left: 15px;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: .5px;
        font-weight: bold;
        font-size: 11px;
        margin-bottom: 0;
        margin-top: 0;
        text-shadow: 1px 1px #000
    }

    .menu_section > ul {
        margin-top: 10px
    }

.profile_pic {
    width: 35%;
    float: left
}