:root{
    --main-color:#2CA18C;
    --bg-color:#FFFFFF;
    --font-color: #333333;
    --white-color: #FFFFFF;
    --body-font: "Bai Jamjuree", sans-serif;
    --font-family: "Bai Jamjuree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --normal-font-size: 1rem;
    --main-hover:#229480;
    --second-color:#96DEC6;
}
html, body {
    height: 100%;
    margin: 0;
}
a {text-decoration: none;color: var(--font-color)}
body{
    color: var(--font-color);
    top: 0;
    font-size: var(--normal-font-size);
    font-family: var(--font-family);
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
    background-color: var(--bg-color);
}

    .main-color {color: var(--main-color);}
    .bg-main-color {background: var(--main-color);}
    .txt-32 {font-size: 32px;}
    .txt-24 {font-size: 24px;}
    .content-main {flex: 1; margin-top: 6rem;margin-bottom: 5rem;}
    .btn-nav {gap: 15px;}
    .btn-login {cursor: pointer;border: 1px solid var(--main-color);color: var(--main-color); filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));border-radius: 1000px;display: flex;flex-direction: row;justify-content: center;align-items: center;padding: 14px 16px;}
    .btn-regis {cursor: pointer;border: 1px solid var(--main-color);color: white; background-color: var(--main-color); filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));border-radius: 1000px;display: flex;flex-direction: row;justify-content: center;align-items: center;padding: 14px 16px;}
    .btn-login:hover {border: 1px solid var(--main-color);color: var(--main-color); }
    .btn-regis:hover {border: 1px solid var(--main-hover);color: white; background-color: var(--main-hover);}
    .btn-login:first-child:active {border: 1px solid var(--main-color);color: var(--main-color); }
    :not(.btn-check)+.btn-regis:active {border: 1px solid var(--main-color);color: white; background-color: var(--main-color);}
    .navbar-bg {background-color: var(--bg-color);box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.15);transition: all .8s ease;}
    .profile-img-nav {aspect-ratio: 1 / 1;object-fit: cover;width: 45px;height: 45px;cursor: pointer;}
    .nav-noti {width: 35px;height: 35px;display: flex;align-items: center;justify-content: center;}
    .user-name-nav {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 8rem;font-size: 20px;}
    .profile-box .user-name-nav {max-width: 18rem;}
    .profile-drop .user-name-nav {font-size: 20px;}
    .dropdown-profile .user-name-nav{font-size: 16px;max-width: 10rem;}
    .dropdown-profile .user-name-nav.email-txt {font-size: 14px;max-width: 10rem}
    .icon__list {
        width: 25px;
        height: 25px;
        margin-left: 0.5rem;
        text-align: center;
        align-content: center;
    }
    .badge-noti {padding: .3rem;top: 8px;left: 75%;}
    .txt-12 {font-size: 12px;}
    .gray-color {color: #cccccc}
    .dropdown-profile {padding: 15px;}
    .pro-link {padding: 15px 10px;}
    .pro-link:hover ,.icon-drop:hover {background: var(--main-hover);color: white;}
    .navbar-brand img{width: 240px;max-width: 100%;}
    .icon-drop img{width: 25px;height: 25px;margin-left: 0.5rem;}
    .user-icon {filter: invert(1)}
    .icon-drop:hover .user-icon {filter: none;}
    .icon-drop:hover .fil-icon {filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(26deg) brightness(104%) contrast(101%);}
    .profile-drop .dropdown-menu[data-bs-popper] {right: -15%;top: 115%;left: unset;min-width: 15rem;}
    .dropdown-toggle::after {content: none;}
    .footer .navbar-brand img {filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(131deg) brightness(104%) contrast(102%);width: 200px;}
    
    @media (min-width: 769px) {
        .profile-box .user-name-nav {
            max-width: 20rem;
        }
    }
    @media (min-width: 992px) {
        .profile-box .user-name-nav {
            max-width: 30rem;
        }
    }
    @media (min-width: 1200px) {
        .profile-box .user-name-nav {
            max-width: 40rem;
        }
    }
    @media (min-width: 1400px) {
        .profile-box .user-name-nav {
            max-width: 50rem;
        }
    }
    @media (max-width: 768px) {
        .footer .navbar-brand img {width: 280px;margin-bottom: 2rem;}
        .content-main {margin-top: 5rem;}
        .footer-content {
            text-align: center;
        }
        .profile-img-nav {width: 32px;height: 32px;}
        .btn-nav {gap: 5px;}
        .navbar-brand img {width: 150px;}
        .btn-login ,.btn-regis{padding: 5px 5px;font-size: 12px;}
        .profile-drop .user-name-nav {font-size: 16px;max-width: 6rem;}
    }

.spinner-border{
    color: var(--main-color) !important; 
}