input {
    autocomplete: off !important;
    /* May not work consistently in all browsers */
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Kanit", sans-serif;
}

html {
    scroll-behavior: smooth !important;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

img, svg {
    pointer-events: none !important;
}


.main_contain {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
}

.main_div {
    width: calc(100% - 270px);
    left: 270px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
}

.sidebar {
    width: 270px;
    position: fixed;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.sidebar.hide {
    width: 80px;
}

.sidebar.hide~.main_div {
    width: calc(100% - 80px);
    left: 80px;
}

.sidebar .contain_wrapper {
    height: 100%;
    position: relative;
    border-right: 1px solid #d7dde2;
    display: flex;
    flex-direction: column;
}


.sidebar .ul_contain {
    padding: 10px;
    width: 100%;
    overflow-y: auto;
    flex-grow: 1;
    height: 0;
}

.sidebar .ul_contain .txtunder {
    font-size: 15px;
    color: #5b5b5b;
}

.sidebar.hide .ul_contain .txtunder {
    text-align: center;
    padding-bottom: 10px;
    position: relative;
    display: inline-block;
    width: 100%;
}

.sidebar.hide .ul_contain .txtunder::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 2px;
    background-color: #ccc;
    /* สีเทา */
    border-radius: 10px;
}

.sidebar .ul_contain ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sidebar .ul_contain ul li {
    cursor: pointer;
    height: 45px;
    padding: 8px 10px;
    padding-left: 15px;
    margin-bottom: 3px;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.sidebar.hide .ul_contain ul li {
    justify-content: center;
    padding-left: 10px;
}

.sidebar .ul_contain ul li:hover {
    background: rgba(93, 136, 255, 0.1);
    color: #5D87FF;
}

.sidebar .ul_contain ul li:hover * {
    color: #5D87FF;
}

.sidebar .ul_contain ul li.active {
    background: #5D87FF;
}

.sidebar .ul_contain ul li.active:hover * {
    color: #fff;
}

.sidebar .ul_contain ul li.active a {
    color: #fff;
}

.sidebar .ul_contain ul li a {
    text-decoration: none;
    color: #5b5b5b;
    font-size: 18px;
}

.sidebar.hide .ul_contain ul li a span {
    display: none;
}

.sidebar .ul_contain ul li svg {
    font-size: 18px;
    margin-right: 20px;
}

.sidebar.hide .ul_contain ul li svg {
    margin-right: 0;
}

.sidebar .ul_contain ul li:last-child {
    margin-bottom: 20px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.sidebar .avatar_contain {
    height: auto;
    width: 100%;
    padding: 10px;
    border-top: 1px solid #d7dde2;
    flex-shrink: 0;
    animation: fadeIn 0.1s ease-in-out forwards;
}

.sidebar.hide .avatar_contain {
    display: none;
    animation: fadeOut 0.1s ease-in-out forwards;

}

.sidebar .logo_contain {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: row;
    padding: 10px;
    flex-shrink: 0;
}

.sidebar .logo_contain img {
    width: 50px;
    height: 50px;
    margin: 10px;
}

.sidebar .logo_contain a {
    text-decoration: none;
    color: #28282B;
    font-size: 22px;
}

.sidebar.hide .logo_contain a {
    display: none;
}

.sidebar .wrapper_avatar {
    background: rgba(87, 196, 255, 0.15);
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
}

.sidebar .avatar_contain img {
    border-radius: 50px;
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.sidebar .avatar_contain .avatar_detail {
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.sidebar .avatar_contain .avatar_detail p {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
    text-align: start;
    color: #2A3547;
}

.sidebar .avatar_contain .avatar_detail span {
    font-size: 12px;
    text-align: start;
}

.sidebar .avatar_contain a {
    position: absolute;
    right: 30px;
    font-size: 18px;
}

.sidebar.hide~.main_div ._navbar {
    width: calc(100% - 80px);
    left: 80px;
}

._navbar {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    width: calc(100% - 270px);
    left: 270px;
    position: fixed;
    top: 0;
    padding: 0;
    margin: 0;
    z-index: 1;
    background: #fff;
}

._navbar .navbar_wrapper {
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

._navbar #navbar_ham_check {
    display: none;
}

._navbar .toggle {
    position: relative;
    width: 20px;
    cursor: pointer;
    margin: auto;
    display: block;
    height: calc(4px * 3 + 11px * 2);
}

._navbar .bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: calc(4px / 2);
    background: #5b5b5b;
    color: inherit;
    opacity: 1;
    transition: none 0.35s cubic-bezier(.5, -0.35, .35, 1.5) 0s;
}

/***** Spin Animation *****/

._navbar .bar--top {
    bottom: calc(20% + 11px + 4px/ 2);
    transition-property: bottom, transform;
    /* transition-delay: calc(0s + 0.35s),0s; */
    transition-delay: 0;
}

._navbar .bar--middle {
    top: calc(20% - 4px/ 2);
    transition-property: opacity;
    transition-delay: 0;
    /* transition-delay: calc(0s + 0.35s); */
}

._navbar .bar--bottom {
    top: calc(20% + 11px + 4px/ 2);
    transition-property: top, transform;
    transition-delay: 0;
    /* transition-delay: calc(0s + 0.35s),0s; */
}

#navbar_ham_check:checked+.toggle .bar--top {
    bottom: calc(50% - 4px/ 2);
    transform: rotate(135deg);
    transition-delay: 0;
    /* transition-delay: 0s,calc(0s + 0.35s); */
}

#navbar_ham_check:checked+.toggle .bar--middle {
    opacity: 0;
    transition-duration: 0s;
    transition-delay: 0;
    /* transition-delay: calc(0s + 0.35s); */
}

#navbar_ham_check:checked+.toggle .bar--bottom {
    top: calc(50% - 0px/ 2);
    transform: rotate(225deg);
    transition-delay: 0;
    /* transition-delay: 0s,calc(0s + 0.35s); */
}

._navbar .navbar_wrapper .navbar_right ul {
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: end;
    align-items: center;
}

._navbar .navbar_wrapper .navbar_right ul .icn_logo {
    width: 30px;
    height: 30px;
    border-radius: 50px;
}

._navbar .navbar_wrapper .navbar_right ul li {
    min-width: 50px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

._navbar .navbar_wrapper .navbar_right ul li svg {
    font-size: 20px;
    color: #5b5b5b;
}

.notification-icon {
    position: relative;
}

.notification-icon .badge {
    position: absolute;
    top: -5px;
    right: 5px;
    background-color: #5D87FF;
    color: white;
    font-size: 10px;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    line-height: 1;
    pointer-events: none;
}




@media screen and (max-width: 360px) {
        .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10;
    }

    .sidebar.hide {
        display: none;

    }

    .sidebar.hide~.main_div, .sidebar.hide~.main_div ._navbar {
        width: calc(100% - 0px);
        left: 0;
    }

    .sidebar~.main_div, .sidebar~.main_div ._navbar {
        width: calc(100% - 0px);
        left: 0;
    }

    .sidebar~.main_div ._navbar .navbar_wrapper {
        justify-content: end;
    }
}

@media screen and (max-width: 480px) and (min-width: 361px) {
            .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10;
    }

    .sidebar.hide {
        display: none;

    }

    .sidebar.hide~.main_div, .sidebar.hide~.main_div ._navbar {
        width: calc(100% - 0px);
        left: 0;
    }

    .sidebar~.main_div, .sidebar~.main_div ._navbar {
        width: calc(100% - 0px);
        left: 0;
    }

    .sidebar~.main_div ._navbar .navbar_wrapper {
        justify-content: end;
    }
}

@media screen and (min-width: 481px) and (max-width: 767px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10;
    }

    .sidebar.hide {
        display: none;

    }

    .sidebar.hide~.main_div, .sidebar.hide~.main_div ._navbar {
        width: calc(100% - 0px);
        left: 0;
    }

    .sidebar~.main_div, .sidebar~.main_div ._navbar {
        width: calc(100% - 0px);
        left: 0;
    }

    .sidebar~.main_div ._navbar .navbar_wrapper {
        justify-content: end;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {}

@media screen and (min-width: 1024px) and (max-width: 1279px) {}

@media screen and (min-width: 1280px) and (max-width: 1439px) {}

@media screen and (min-width: 1440px) and (max-width: 1919px) {}

@media screen and (min-width: 1920px) {}