@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
    --color1: #44A348;
    --color2: #338637;
    --color3: #2B6A2F;
    --color4: #52B656;
    --color5: #F6F6F6;
    --color6: #6D6D6D;
    --color7: #9CD99EB2;
    --color8: #EBEBEB;
    --color9: #878787;
    --color10: #FF4500;
    --color11: #454545;
    --color12: #FFFFFF;
    --color13: #3d3d3d;
    --color14: #333333;

    --color-influ-1: #7C7C7C;
    --color-influ-2: #00C76A;
    --color-influ-3: #F59E0B;
    --color-influ-4: #FF5959;

    --main-font: 'Kanit';

    --color-hvr: var(--color2);
    --color-btn: var(--color12);
    --color-atv: var(--color3);
    --color-disb: var(--color4);
}

::selection {
    /*background-color: var(--main-txt-color);*/
    /*color: white;*/
}

html{ overflow: initial; }

body, .body-inner, .header-inner, .header-body {
    margin: 0px;
    /*width: 100vw;*/
    /*min-height: 100vh;*/
}

body {
    font-family: var(--main-font), sans-serif;
    font-size: 16px;
    margin: 0 auto;
/*    background-image: url('../../uploads/theme/bg.jpg');*/
    background-color: whitesmoke;
    background-position: top;
    background-repeat: repeat-y;
    background-size: cover;
}

body,
h1,
h2,
h3,
h4,
h5,
div,
p,
span,
li,
a ,
i ,
button ,
#mainMenu nav > ul > li > a,
#footer p
{
    font-family: var(--main-font), sans-serif;
    color: var(--black);
    /*word-break: break-word;*/
    /*transition: 0.3s;*/
}

body.modal-open{
    padding-right: 0 !important;
}

img,
label,
input
{
    max-width: 100%;
}

input,
textarea
{
    border: none;
}

select{ min-height: 49px; }

textarea{
    resize: vertical;
}

a:not(.btn):not(.badge):hover, 
a:not(.btn):not(.badge):focus, 
a:not(.btn):not(.badge):active
{
    color: var(--color-atv);
}

.txt1{ font-size: 2em !important; }    /* 32px */
.txt2{ font-size: 1.81em !important; } /* 29px */
.txt3{ font-size: 1.75em !important; } /* 28px */
.txt10{ font-size: 1.57em !important; }  /* 25px */
.txt4{ font-size: 1.5em !important; }  /* 24px */
.txt8{ font-size: 1.19em !important; } /* 19px */
.txt9{ font-size: 1em !important; } /* 16px */
.txt7{ font-size: 0.88em !important; } /* 14px */
.txt5{ font-size: 0.82em !important; } /* 13px */
.txt6{ font-size: 0.75em !important; } /* 12px */

.txt-b400{ font-weight: 400 !important; }
.txt-b500{ font-weight: 500 !important; }
.txt-b600{ font-weight: 600 !important; }
.txt-b700{ font-weight: 700 !important; }

.color1{ color: var(--color1); }
.color2{ color: var(--color2); }
.color3{ color: var(--color3); }
.color4{ color: var(--color4); }
.color5{ color: var(--color5); }
.color6{ color: var(--color6); }
.color7{ color: var(--color7); }
.color8{ color: var(--color8); }
.color9{ color: var(--color9); }
.color10{ color: var(--color10); }
.color11{ color: var(--color11); }
.color12{ color: var(--color12); }
.color13{ color: var(--color13); }
.color-red{ color: var(--red); }

.color-influ-1{ color: var(--color-influ-1); }
.color-influ-2{ color: var(--color-influ-2); }
.color-influ-3{ color: var(--color-influ-3); }
.color-influ-4{ color: var(--color-influ-4); }

.bg-influ-1{ background-color: var(--color-influ-1); }
.bg-influ-2{ background-color: var(--color-influ-2); }
.bg-influ-3{ background-color: var(--color-influ-3); }
.bg-influ-4{ background-color: var(--color-influ-4); }

.bg-color1{ background-color: var(--color1); }
.bg-color2{ background-color: var(--color2); }
.bg-color3{ background-color: var(--color3); }
.bg-color4{ background-color: var(--color4); }
.bg-color5{ background-color: var(--color5); }
.bg-color6{ background-color: var(--color6); }
.bg-color7{ background-color: var(--color7); }
.bg-color8{ background-color: var(--color8); }
.bg-color9{ background-color: var(--color9); }
.bg-color10{ background-color: var(--color10); }
.bg-color11{ background-color: var(--color11); }
.bg-color12{ background-color: var(--color12); }
.bg-color13{ background-color: var(--color13); }

.bd-radius1{ border-radius: 8px !important; }
.bd-radius2{ border-radius: 6px !important; }
.bd-radius30{ border-radius: 30px !important; }

.bd-transp{ border-color: transparent !important; }

.container.max-1400{
    max-width: 1400px;
}

.container.max-1600{
    max-width: 1600px !important;
}

.vw-body {
    max-width: 85vw;
}

button.btn, 
.btn:not(.close):not(.mfp-close), 
a.btn:not([href]):not([tabindex])
{
    font-family: inherit;
}

#topbar{
    display: none;
}

#header,
#header .header-inner
{
    height: 0;
    line-height: 50px;
}

#header .header-inner{
/*    background-color: var(--color2);*/
    background-color: transparent;
    box-shadow: none !important;
}

.color-header-10 {
/*    background-color: rgb(61, 61, 61);*/
    height: 0;
}


.header-inner {
    /*display: flex;*/
    width: 16%;
}

.nav-logo,
.nav-user
{
    display: inline-block;
}

.nav-user{
    float: right;
    display: flex;
}

.img-logo{
    height: 40px;
}
.images{
    width: 100%;
    height: 100%;

}

.nav-user{
    color: white;
    max-height: 50px;
}

.menu-btn {
    font-size: 1.7em;
    padding: 6px 13px;
    line-height: 1.6;
    display: block;
    height: 50px;
    transition: .2s;
}

.menu-btn:hover{
    background-color: #ef4e07;
    color: white !important;
}
.container-admin {
    /* width: 100vw; */
    background-color: rgb(61, 61, 61);
    min-height: 100vh;
    padding: 25px;
}
.p-0 {
    padding: 0px !important;
/*    background-color: rgb(41, 41, 41);*/
}

.nav-slide-white{
    background-color: white;
}

.nav-slide{
    position: fixed;
    height: 100vh;
    width: 16vw;
    top: 0;
    left: 0;
    /*left: 100vw;*/
    right: 0;
    bottom: 0;
    z-index: 999;
    display: none;
    transition: left .5s, background-color .5s 0s ease;
/*    background-color:white;*/
}

.nav-slide.open{
    /*background-color: rgba(0 0 0 / 40%);*/
    /*left: 0;*/
}

.nav-bg {
    position: absolute;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
}

.nav-left-menu{
    /*width: 30%;*/
    position: absolute;
    left: 0;
    height: 100vh;
    width: 260px;
    background-color: #292929;
/*    box-shadow: 0 0 20px #111;*/
    padding: 50px 20px;
    transition: .3s;

    overflow-y: auto;
    overflow-x: hidden;
}

.nav-slide.open .nav-right-menu{
    right: 0;
}

.close-area{
    position: absolute;
    color: white;
    font-size: 1.8em;
    top: 15px;
    right: 10px;
    padding: 5px 10px;
    cursor: pointer;
    transition: .3s;
}

.close-area:hover{
    color: #ef4e07 !important;
}

a.nav-right-link {
    color: white;
    display: flex;
    /*margin-bottom: 10px;*/
    transition: .2s;
    padding: 10px 30px;

}

.nav-right-link .fa {
    width: 30px;
    font-size: 1.4em;
    padding-top: 2px;
    text-align: left;
}

section{
    background-color: unset;
}

.content-body {
/*    top: -50px;*/
}

.bg-w-section{
    background-color: #F6F6F6CC;
}

.section-box{
    /*width: 100vw;*/
    min-height: calc(100vh - 50px);
    padding: 15px;
    /*padding-right: 30px;*/
}

.logout-box {
    position: relative;
    bottom: -80px;
    width: 100%;
    left: 0;
    border-top: 1px solid #7c7c7c;
    padding: 30px;

    & a {
        font-size: 18px;
        font-weight: 500;
        line-height: 150%;
    }

     & a:hover {
        font-size: 18px;
        font-weight: 500;
        line-height: 150%;
        color: #ef4e07 !important;
    }
}

.btn-outline1{
    /*border-radius: 8px;*/
    border-color: var(--color1) !important;
    color: var(--color1) !important;
}

.btn-outline1:hover,
.btn-outline1:focus,
.btn-outline1:active
{
    border-color: var(--color1) !important;
    color: var(--color1) !important;
    background-color: var(--color1) !important;
    color: white !important;
}

.btn.btn1{
    border-color: var(--color1) !important;
    background-color: var(--color1) !important;
    color: white !important;
    padding: 12px 0 !important;
}

.loading{
    animation: rotate-infi 4s infinite linear;
}

.order-waiter-conf[ord-status=""]{
    display: none;
}
.order-waiter-conf[ord-status="1"]{
    background-color: var(--color10);
}
.order-waiter-conf[ord-status="2"]{
    background-color: var(--color11);
}
.order-waiter-conf[ord-status="3"]{
    background-color: var(--color4);
}

button#btn-modal-history {
    background-color: transparent;
    border-color: black;
    color: black;
    padding: 12px 15px;
    margin: 0;
}

button#btn-modal-history:hover {
    background-color: gray;
}

.order-history-list .guide-item{
    width: 100%;
    max-width: unset;
}

button#btn-modal-history:hover {
    border-color: black;
}

@media (max-width: 1199px) {
    
}

@media (max-width: 1024px) {

}

@media (max-width: 991px) {
    
}

@media (max-width: 767px) {
    
}

.w-h-40{
    width: 40px;
    height: 40px;
}

.outline * {
    outline: 1px solid gray;
}

.opct075{
    opacity: .75;
}

.w-100-no-im{
    width: 100%;
}

.mw-250px{
    max-width: 250px;
}

.mw-300px{
    max-width: 300px;
}

.mw-500px{
    max-width: 500px;
}

.mw-700px{
    max-width: 700px;
}

.opct050{
    opacity: .50;
}

.min-w-300{ min-width: 300px; }

.shadow2{
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.line2{
    border-top: 1px solid var(--color8);
}

.bg-color2{
    background-color: var(--color2);
}


.bg-color10{
    background-color: var(--color10);
}

.lh-1{
    line-height: 1;
}

.lh-2{
    line-height: 2;
}

.lh-3{
    line-height: 3;
}


.navbar-brand {
    padding: 18px 22px;
    margin:0px;
    border-bottom: 1px solid #ef4e07;
}

.navbar-brand-name {
    padding: 20px 10px;
    margin:0px;
    border-bottom: 1px solid #7c7c7c;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;

    & img {
        width: 48px;
        height: 48px;
        object-fit: cover;
        border-radius: 50%;
    }

    & .text-ae {
        color: white;
        font-size: 12px;
        line-height: 150%;
        font-weight: 400;
    }

    & .text-name-x {
        color: white;
        font-size: 24px;
        line-height: 150%;
        font-weight: 500;
    }
}

.menu-style {
    max-height: 100%;
    height: 45vh;
}

 .item-menus {
    padding:0 20px 0 20px;
    width: 100%;
    height: auto;

    & li {
        list-style: none;
        margin-bottom: 10px;

        & a {
            transition:  all 0.5s ease;
            font-size: 16px;
            line-height: 150%;
            font-weight: 500;
            color: white;
        }

         & a:hover {
            transition:  all 0.5s ease;
            font-size: 18px;
            line-height: 150%;
            font-weight: 500;
            color: #ef4e07 !important;
             
        }

         & a.active {
            transition:  all 0.5s ease;
            font-size: 18px;
            line-height: 150%;
            font-weight: 500;
            color: #ef4e07 !important;
        }
        
    }
 }

@keyframes rotate-infi {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media screen and (max-width: 1200px) {
    
}

@media screen and (max-width: 1024px) {
    .header-inner {
        width: 25%;
    }

    .navbar-brand-name {
        padding: 20px 15px;

        & .text-name-x {
            font-size: 16px;
        }
    }

    .item-menus {
        padding: 0 10px 0 10px;
    }
}

@media screen and (max-width: 768px) {
    .seaarch-influ {
        padding-left: 50%;
    }

    .vw-body {
        max-width: 100vw;
    }
}

@media screen and (max-width: 767px) {
    
}